dgrcorrientes-modulos 1.0.0

package/src/stories/Components/EmptyState/emptyState.scss

@@ -0,0 +1,75 @@
+@import '/src/sass/utilities/variables';
+
+.e-state {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0px;
+  min-width: 700px;
+  border-radius: 16px;
+  background-color: $white;
+
+  &__img-container {
+    padding: 60px;
+    min-width: 150px;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    margin: 30px;
+
+    .text-container {
+      padding: 0;
+      // max-width: 400px;
+
+      .error {
+        font-weight: $fw-regular;
+        font-size: 14px;
+        color: $text-400;
+        margin: 0;
+      }
+
+      .title.is-4 {
+        font-weight: $fw-medium;
+        color: $black;
+        margin-top: 8px;
+        margin-bottom: 8px;
+      }
+
+      .description {
+        font-weight: $fw-regular;
+        margin-top: 8px;
+        color: $text-800;
+      }
+    }
+
+    .buttons-container {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      padding-top: 20px;
+      max-width: 700px;
+
+      .elv-button {
+        font-weight: $fw-medium;
+        font-size: 14px;
+        padding: 14px;
+        width: 47%;
+      }
+    }
+  }
+
+  &--vertical {
+    flex-direction: column;
+    width: 320px;
+
+    .e-state__img-container {
+      padding-bottom: 0px;
+    }
+  }
+}

package/src/stories/Components/ErrorPage/ErrorPage.scss

@@ -0,0 +1,65 @@
+@import '/src/sass/utilities/variables';
+
+.elv-errorPage{
+    .errorPage{
+
+        @media screen and (max-width: 1100px){
+            flex-direction: column-reverse;
+            gap: 16px !important;
+            text-align: center;
+            padding: 0px !important;
+        }
+
+        &__voucher{
+            @media screen and (max-width: 1100px){
+                align-items: center !important;
+
+            }
+        }
+
+        &__proof{
+            line-height: normal;
+        }
+
+        &__Secbutton{
+            @media screen and (max-width: 1100px){
+                justify-content: center;
+                flex-direction: column;
+                gap: 10px !important;
+            }
+        }
+
+        .button{
+            padding: 8.5px 16px;
+            border-radius: 8px;
+        }
+
+        &__Help{
+            border-top: 1px solid #E2E2E2;
+            @media screen and (max-width: 1100px){
+                padding-top: 24px !important;
+            }
+        }
+
+        &__optHelp{
+            @media screen and (max-width: 1100px){
+                justify-content: center;
+            }
+        }
+
+        &__face:not(:last-child){
+            border-right: 1px solid #E2E2E2;
+        }
+        &__cursor{
+            cursor: pointer;
+        }
+
+        .img{
+            max-width: 540px;
+            @media screen and (max-width: 1100px){
+                max-width: 320px;
+            }
+        
+        }
+    }
+}

package/src/stories/Components/ErrorPage/ErrorPage.stories.tsx

@@ -0,0 +1,164 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {ErrorPage} from './ErrorPage';
+import imgUnder from '../../assets/Under Constructions _Two Color.png';
+import imgNotFound from '../../assets/404 Page Not Found _Two Color (1).png';
+import imgfell from '../../assets/404 Page Not Found _Two Color.png';
+import imgLoading from '../../assets/Loading _Two Color.png';
+import imgEmpty from '../../assets/Empty Inbox _Two Color.png';
+import imgNotification from '../../assets/Notifications_Two Color 1.png';
+import imgProtection from '../../assets/Online protection_Two Color.png';
+
+export default {
+  title: 'Components/ErrorPage',
+  component: ErrorPage,
+  args: {},
+} as ComponentMeta<typeof ErrorPage>;
+
+const Template: ComponentStory<typeof ErrorPage> = args => <ErrorPage {...args} />;
+
+export const Standard = Template.bind({});
+Standard.args = {
+  pageType: 'page-Error',
+  page: {
+    title: 'Error interno',
+    download: 'Descargá el comprobante. Encontrá más información',
+    sub_title: 'La página no está disponible en este momento.',
+    description: 'Nuestro equipo de servidores esta resolviendo el inconveniente, visitanos más tarde.',
+    label_Button: 'Ir al formulario',
+    infoHelp: 'Si necesitás ayuda, comunicate',
+    img: imgUnder,
+  },
+  help: [
+    {icon: 'fa-solid fa-comments', labelIcon: 'Link', iconColor: '#F2994A'},
+    {icon: 'fas fa-share-alt', labelIcon: 'Link', iconColor: '#124596'},
+  ],
+  onHelp: () => console.log('clicked Button'),
+  onGo: () => console.log('clicked ongo()'),
+  onGoOpt: () => console.log('clicked ongoOpt()'),
+};
+
+export const Example1 = Template.bind({});
+Example1.args = {
+  pageType: 'page-Error',
+  headType: 'with proof',
+  page: {
+    title: 'Title',
+    download: 'Descargá el comprobante. Encontrá más información',
+    sub_title: 'El servicio de pago con títulos no se encuentra disponible en estos momentos.',
+    description:
+      'Para hacer tu pago, ingresá al siguiente enlace y completá el formulario de contacto. Pronto nos pondremos en contacto con vos.',
+    label_Button: 'Ir al formulario',
+    infoHelp: 'Si necesitás ayuda, comunicate',
+    img: imgNotFound,
+  },
+  help: [
+    {icon: 'fa-solid fa-comments', labelIcon: 'Link'},
+    {icon: 'fas fa-share-alt', labelIcon: 'Link'},
+  ],
+  onHelp: () => console.log('clicked Button'),
+  onGo: () => console.log('clicked ongo()'),
+};
+
+export const Example2 = Template.bind({});
+Example2.args = {
+  pageType: 'page-Error',
+  page: {
+    title: 'Lo sentimos',
+    sub_title: 'No pudimos encontrar la página que buscas.',
+    description: 'Podes volver a nuestra página de inicio y continuar navegando en las diferentes secciones de la web.',
+    label_Button: 'Ir al inicio',
+    infoHelp: 'Si necesitás ayuda, comunicate',
+    img: imgfell,
+  },
+  help: [
+    {icon: 'fa-solid fa-comments', labelIcon: 'Link'},
+    {icon: 'fas fa-share-alt', labelIcon: 'Link'},
+  ],
+  onHelp: () => console.log('clicked Button'),
+  onGo: () => console.log('clicked ongo()'),
+};
+
+export const Example3 = Template.bind({});
+Example3.args = {
+  pageType: 'page-Error',
+  secondButton: true,
+  page: {
+    title: 'Se está demorando',
+    sub_title: 'El servidor no está respondiendo como nos gustaría.',
+    description: 'Podes actualizar la página para ver si resuelve el inconveniente o volver a nuestra página de inicio.',
+    label_Button: 'Reintentar',
+    label_Button2: 'Ir al inicio',
+    infoHelp: 'Si necesitás ayuda, comunicate',
+    img: imgLoading,
+  },
+  help: [
+    {icon: 'fa-solid fa-comments', labelIcon: 'Link'},
+    {icon: 'fas fa-share-alt', labelIcon: 'Link'},
+  ],
+  onHelp: () => console.log('clicked Button'),
+  onGo: () => console.log('clicked ongo()'),
+  onGoOpt: () => console.log('clicked ongoOpt()'),
+};
+
+export const Example4 = Template.bind({});
+Example4.args = {
+  pageType: 'page-Error',
+  secondButton: true,
+  page: {
+    title: 'No existen mensajes nuevos',
+    sub_title: 'Regresa más tarde, no hay alertas por el momento',
+    description: 'Podes ir a la bandeja de entrada o volver a nuestra página de inicio.',
+    label_Button: 'Ir a bandeja de entrada',
+    label_Button2: 'Ir al inicio',
+    infoHelp: 'Si necesitás ayuda, comunicate',
+    img: imgEmpty,
+  },
+  help: [
+    {icon: 'fa-solid fa-comments', labelIcon: 'Link'},
+    {icon: 'fas fa-share-alt', labelIcon: 'Link'},
+  ],
+  onHelp: () => console.log('clicked Button'),
+  onGo: () => console.log('clicked ongo()'),
+  onGoOpt: () => console.log('clicked ongoOpt()'),
+};
+
+export const Example5 = Template.bind({});
+Example5.args = {
+  pageType: 'page-Error',
+  page: {
+    title: 'No hay notificaciones',
+    sub_title: 'Regresa más tarde, no hay alertas por el momento',
+    description: 'Podes volver a nuestra página de inicio y continuar navegando en las diferentes secciones de la web.',
+    label_Button: 'Ir al inicio',
+    infoHelp: 'Si necesitás ayuda, comunicate',
+    img: imgNotification,
+  },
+  help: [
+    {icon: 'fa-solid fa-comments', labelIcon: 'Link'},
+    {icon: 'fas fa-share-alt', labelIcon: 'Link'},
+  ],
+  onHelp: () => console.log('clicked Button'),
+  onGo: () => console.log('clicked ongo()'),
+};
+
+export const Example6 = Template.bind({});
+Example6.args = {
+  pageType: 'page-Error',
+  secondButton: true,
+  page: {
+    title: 'No podemos autenticarte',
+    sub_title: 'Lo sentimos, los datos ingresados no son correctos',
+    description: 'Podes ir a iniciar sesión para ingresar los datos nuevamente o registrarte',
+    label_Button: 'Iniciar sesión',
+    label_Button2: 'Registrarme',
+    infoHelp: 'Si necesitás ayuda, comunicate',
+    img: imgProtection,
+  },
+  help: [
+    {icon: 'fa-solid fa-comments', labelIcon: 'Link'},
+    {icon: 'fas fa-share-alt', labelIcon: 'Link'},
+  ],
+  onHelp: () => console.log('clicked Button'),
+  onGo: () => console.log('clicked ongo()'),
+  onGoOpt: () => console.log('clicked ongoOpt()'),
+};

package/src/stories/Components/ErrorPage/ErrorPage.tsx

@@ -0,0 +1,107 @@
+import {Button, IButton} from '../../Elements/Button/Button';
+import {Icon} from '../../Elements/Icon/Icon';
+import './ErrorPage.scss';
+
+export interface IErrorPage {
+  // BASE
+  pageType: 'page-Error';
+  headType: 'with proof';
+  secondButton: boolean;
+  page: {
+    title?: string;
+    download?: string;
+    sub_title?: string;
+    description?: string;
+    label_Button?: string;
+    label_Button2?: string;
+    optionButton?: IButton;
+    infoHelp?: string;
+    img?: string;
+  };
+  help?: IHelps[];
+
+  // IS-OPTIONS
+
+  // EVENTS
+  onHelp?: () => void;
+  onGo?: () => void;
+  onGoOpt?: () => void;
+
+  // GENERIC
+  className?: string;
+}
+export interface IHelps {
+  icon: string;
+  labelIcon: string;
+  iconColor?: string;
+}
+
+export const ErrorPage = ({page, pageType, headType, secondButton, help, onHelp, onGo, onGoOpt, className}: IErrorPage) => {
+  return (
+    <div className="elv-component elv-errorPage">
+      {pageType === 'page-Error' && (
+        <div
+          className={[
+            'errorPage is-flex is-align-items-center p-6 is-justify-content-space-between is-gap-6',
+            `${className ? ' ' + className : ''}`,
+          ].join('')}
+        >
+          <div className="is-flex is-flex-direction-column is-gap-6">
+            <div className="is-flex is-flex-direction-column is-gap-4">
+              {headType === 'with proof' ? (
+                <>
+                  <div className="errorPage__voucher is-flex is-flex-direction-column is-align-items-start is-gap-1 is-hidden-mobile  ">
+                    <p className="errorPage__proof has-text-grey-dark  has-text-weight-medium is-size-4">{page.title}</p>
+                    <div className="is-size-14px has-text-grey">{page.download}</div>
+                  </div>
+                </>
+              ) : (
+                <div className="is-size-4 has-text-weight-medium has-text-grey-dark is-hidden-mobile">{page.title}</div>
+              )}
+
+              <div className="is-size-18px has-text-grey-dark has-text-weight-medium">{page.sub_title}</div>
+              <div className="has-text-grey-dark is-size-6">{page.description}</div>
+
+              <div className="errorPage__Secbutton   is-flex is-gap-5">
+                <div>
+                  {' '}
+                  <Button label={page.label_Button} color="primary" className="button is-size-14px" onClick={() => onGo && onGo()} />
+                </div>
+                {secondButton && (
+                  <div>
+                    {' '}
+                    <Button
+                      label={page.label_Button2}
+                      fill="outline"
+                      color="primary"
+                      className="button buttonsecond is-size-14px"
+                      onClick={() => onGoOpt && onGoOpt()}
+                    />
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className="errorPage__Help pt-3">
+              <div className="is-size-14px has-text-grey">{page?.infoHelp}</div>
+              <div className="errorPage__optHelp is-flex is-gap-3 mt-2">
+                {help?.map(item => (
+                  <div className="errorPage__face errorPage__cursor is-flex pr-5" onClick={() => onHelp && onHelp()}>
+                    <Icon icon={item.icon} className="mr-2" color={item.iconColor} />
+
+                    <p className="is-size-7 has-text-grey">{item.labelIcon}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+          <div>
+            <div className="is-size-4 has-text-weight-medium has-text-grey-dark has-text-centered is-hidden-desktop is-hidden-tablet-only">
+              {page.title}
+            </div>
+            <img src={page.img} className="img" />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/stories/Components/IncomingCall/IncomingCall.scss

@@ -0,0 +1,27 @@
+@import '/src/sass/utilities/variables';
+.elv-incomingCall{
+    .incomingCall{
+        border-radius: 16px;
+       &__label{
+        color:  $truegray-400;
+       }
+
+       .with-divider{
+        border-bottom: 1px solid $truegray-300;
+        padding-bottom: 20px !important;
+       }
+       
+       
+
+       @media (max-width: 768px){
+        .container{
+            width: 550px;
+           }
+        .button{
+            font-size: 10px !important;
+           padding: 10px 5px 10px !important;
+        }
+       }
+       
+    }
+}

package/src/stories/Components/IncomingCall/IncomingCall.stories.tsx

@@ -0,0 +1,43 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {IncomingCall} from './IncomingCall';
+
+export default {
+  title: 'Components/IncomingCall',
+  component: IncomingCall,
+  args: {
+    title: 'Llamadas entrantes',
+    labelName: 'Nombre',
+    labelMail: 'Mail',
+    labelReason: 'Motivo',
+    labelTime: 'hora',
+    options: [
+      {
+        name: 'Marcia Martínez',
+        cuil: '20-34586258-8',
+        mail: 'marciamartinez@gmail.com',
+        reason: 'Consulta deuda',
+        time: '08:34 AM',
+      },
+      {
+        name: 'Marcos Gonzalez',
+        cuil: '20-34586258-8',
+        mail: 'marcos78@gmail.com',
+        reason: 'DFE',
+        time: '08:34 AM',
+      },
+      {
+        name: 'Josefina Schultz',
+        cuil: '20-34586258-8',
+        mail: 'j.schultz@gmail.com',
+        reason: 'Asesoramiento',
+        time: '08:34 AM',
+      },
+    ],
+    onAttend: () => console.log('Button Clicked'),
+  },
+} as ComponentMeta<typeof IncomingCall>;
+
+const Template: ComponentStory<typeof IncomingCall> = args => <IncomingCall {...args} />;
+
+export const Standard = Template.bind({});
+Standard.args = {};

package/src/stories/Components/IncomingCall/IncomingCall.tsx

@@ -0,0 +1,76 @@
+import './IncomingCall.scss';
+import {Button, IButton} from '../../Elements/Button/Button';
+import {title} from 'process';
+
+export interface IIncomingCall {
+  // BASE
+  title: string;
+  labelName: string;
+  labelMail: string;
+  labelReason: string;
+  labelTime: string;
+  options?: IOption[];
+
+  // IS-OPTIONS
+
+  // EVENTS
+  onAttend?: () => void;
+
+  // GENERIC
+  className?: string;
+}
+export interface IOption {
+  name?: string;
+  cuil?: string;
+  mail: string;
+  reason: string;
+  time: string;
+  button?: IButton;
+}
+
+export const IncomingCall = ({title, labelName, labelMail, labelReason, labelTime, options, onAttend, className}: IIncomingCall) => {
+  return (
+    <div className="elv-component elv-incomingCall">
+      <div className={['incomingCall  is-flex box is-flex-direction-column p-4 is-gap-4', `${className ? ' ' + className : ''}`].join('')}>
+        <div className="has-text-weight-bold">{title}</div>
+        <div>
+          <div className="incomingCall__label  is-flex is-gap-3 is-size-7">
+            <div className="is-fullw">{labelName}</div>
+            <div className="is-fullw is-flex is-justify-content-center">{labelMail}</div>
+            <div className="is-fullw is-flex is-justify-content-center">{labelReason}</div>
+            <div className="is-fullw  is-flex is-justify-content-center">{labelTime}</div>
+            <div className="container is-fullw"></div>
+          </div>
+          <div className="is-gap-3 mt-1 is-flex is-flex-direction-column is-fullw">
+            {options?.map((item, index) => (
+              <div
+                key={index}
+                className={`is-flex py-2 is-gap-3 is-align-items-center is-fullw${index !== options.length - 1 ? ' with-divider' : ''}`}
+              >
+                <div className="is-fullw ">
+                  <div className="is-size-14px has-text-weight-semibold">{item.name}</div>
+                  <div className="is-size-7">{item.cuil}</div>
+                </div>
+                <div className="is-fullw is-size-14px has-text-grey-dark">{item.mail}</div>
+                <div className="is-fullw is-size-14px has-text-grey-dark">{item.reason}</div>
+                <div className="is-fullw is-size-14px has-text-grey-dark">{item.time}</div>
+                <div className="is-flex is-justify-content-center">
+                  <div className="is-fullw">
+                    {
+                      <Button
+                        label="Atender"
+                        icon="fa-solid fa-phone fa-2xl"
+                        className="button py-3 px-4 is-size-14px"
+                        onClick={() => onAttend && onAttend()}
+                      />
+                    }
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/stories/Components/ModalConfirm/ModalConfirm.scss

@@ -0,0 +1,30 @@
+@import '/src/sass/utilities/variables';
+
+.elv-modal-confirm {
+  .modal-confirm {
+    &__icon {
+      height: 56px;
+      border-radius: 8px;
+      background-color: #ebeef2;
+    }
+    &__color {
+      color: #2c3a4b !important;
+    }
+
+    &__close {
+      right: 0px;
+      top: 0px;
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background-color: #ebeef2;
+      cursor: pointer;
+    }
+  }
+}
+.swal2-html-container {
+  margin: 0px !important;
+}
+div:where(.swal2-container) div:where(.swal2-popup) {
+  padding: 0px !important;
+}

package/src/stories/Components/ModalConfirm/ModalConfirm.stories.tsx

@@ -0,0 +1,21 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {ModalConfirm} from './ModalConfirm';
+//import '/virtual:/@storybook/builder-vite/setup-addons.js';
+
+export default {
+  title: 'Components/ModalConfirm',
+  component: ModalConfirm,
+  args: {
+    title: 'El archivo fue cargado correctamente.',
+    button: {label: 'Try Me!', fill: 'solid', size: 'medium'},
+    description:
+      'Sin embargo, el mismo supera los 2MB de tamaño (20.000 movimientos aprox.) por lo que se mostraran con opciones limitadas.',
+    Paragraph: ' ¿Desea procesar el archivo de igual manera?',
+    show: true,
+  },
+} as ComponentMeta<typeof ModalConfirm>;
+
+const Template: ComponentStory<typeof ModalConfirm> = args => <ModalConfirm {...args} />;
+
+export const Standard = Template.bind({});
+Standard.args = {};