contentoh-components-library 21.1.28 → 21.1.31

package/src/components/molecules/StatusAsignationInfo/index.js

@@ -6,6 +6,11 @@ import { Button } from "../../atoms/GeneralButton";
 import { useEffect, useState } from "react";
 import { AsignationOption } from "../../atoms/AsignationOption/index";
 import { getProfilePicture } from "../../../global-files/data";
+import { SliderToolTip } from "../../atoms/SliderToolTip";
+import InfoIcon from "../../../assets/images/sliderToolTip/infoIcon.svg";
+import Slide1 from "../../../assets/images/sliderToolTip/slide21.svg";
+import Slide2 from "../../../assets/images/sliderToolTip/slide22.svg";
+import Slide3 from "../../../assets/images/sliderToolTip/slide23.svg";
 
 export const StatusAsignationInfo = ({
   status = "-",
@@ -31,6 +36,26 @@ export const StatusAsignationInfo = ({
       setShowAsignationPanel(false);
     }
   };
+  const slidefront = [
+    {
+      slide: Slide1,
+      title: "Valida tu producto en cada activo digital",
+      description:
+        "Al solicitar a Content-oh! podrás validar la información, imágenes y documentación de tu producto, esto hará más sencillo que puedas aprobar o rechazar el contenido.",
+    },
+    {
+      slide: Slide2,
+      title: "Aprueba o rechaza con un clic",
+      description:
+        "Cuando termines de revisar tu información, elige si aproebas o rechazas, esto enviara una notificiación a nuestro equipo, para continuar o corregir el producto.",
+    },
+    {
+      slide: Slide3,
+      title: "Estatus de tu producto en el proceso",
+      description:
+        "La mayor parte del proceso podrás identificar que estatus tiene tu producto, esto dara visibilidad a todo tu equipo para saber la etapa se encuentra.",
+    },
+  ];
 
   useEffect(() => {
     if (showAsignationPanel) {
@@ -40,6 +65,12 @@ export const StatusAsignationInfo = ({
 
   return (
     <Container id={id}>
+      <SliderToolTip
+        infoIcon={InfoIcon}
+        slidefront={slidefront}
+        iconSize={"medium-image"}
+        slidePosition={"bottom-slide"}
+      ></SliderToolTip>
       {status !== "-" && <StatusTag statusType={status} ovalForm={true} />}
       {showSaveButton && (
         <Button

package/src/components/organisms/FullProductNameHeader/index.js

@@ -81,4 +81,4 @@ export const FullProductNameHeader = ({
       </div>
     </Container>
   );
-};
+};

package/src/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js

@@ -183,4 +183,4 @@ ProviderProductEditionDefault.args = {
     },
     src: "https://content-management-profile.s3.amazonaws.com/id-59/59.png?1656113146885",
   },
-};
+};

package/src/components/pages/ProviderProductEdition/index.js

@@ -33,6 +33,13 @@ import { Link } from "react-router-dom";
 import face from "../../../assets/images/defaultImages/defaultProfileImage.svg";
 import errorModal from "../../../assets/images/genericModal/errorModal.svg";
 import { GlobalModal } from "../../organisms/GlobalModal/index";
+import { SliderToolTip } from "../../atoms/SliderToolTip";
+import InfoIcon from "../../../assets/images/sliderToolTip/infoIcon.svg";
+import Slide1_1 from "../../../assets/images/sliderToolTip/slide1.svg";
+import Slide1_2 from "../../../assets/images/sliderToolTip/slide2.svg";
+import Slide1_3 from "../../../assets/images/sliderToolTip/slide3.svg";
+import Slide1_4 from "../../../assets/images/sliderToolTip/slide4.svg";
+import Slide1_5 from "../../../assets/images/sliderToolTip/slide5.svg";
 
 const reducerImages = (state, action) => {
   let { values, attrForImgs } = state;
@@ -973,6 +980,35 @@ export const ProviderProductEdition = ({
     setSaving(loading);
   }, [loading]);
 
+  const slidefront = [
+    {
+      slide: Slide1_1,
+      description:
+        "Creamos tu contenido, y todo lo que haga falta para tu producto, cada sección puedes socilitar contenido enriquecido, y nosotros lo haremos por ti.",
+    },
+    {
+      slide: Slide1_2,
+      description:
+        "Puedes agregar solicitudes de contenido enriquecido a tu carrito de compra las veces que sean necesarias. Una vez completada tu lista con los servicios necesitados sigue el proceso de compra en checkout.",
+    },
+    {
+      slide: Slide1_3,
+      description:
+        "Revisa el contenido que deseas solicilitar, valida y tambien puedes agregar contenido extra, traducciones, o simplemente completar el checkout.",
+    },
+    {
+      slide: Slide1_4,
+      description:
+        "Elige el tipo de entrega de tu producto, puedes ser recolección en el lugar o por el contrario puedes dejarlo en nuestras oficinas.",
+    },
+    {
+      slide: Slide1_5,
+      title: "Bienvenido al modo Content-oh!",
+      description:
+        "Finalmente elige la forma de pago que más te guste, procede con el pago y listo.",
+    },
+  ];
+
   return (
     <Container headerTop={headerTop}>
       <HeaderTop setHeaderTop={setHeaderTop} />
@@ -1309,6 +1345,13 @@ export const ProviderProductEdition = ({
                   </Link>
                 </button>
               ) : (
+                <>
+                <SliderToolTip
+                    infoIcon={InfoIcon}
+                    slidefront={slidefront}
+                    iconSize={"big-image"}
+                    slidePosition={"top-slide"}
+                  ></SliderToolTip>
                 <Button
                   onClick={() => {
                     setShowContentohRequestModal &&
@@ -1317,6 +1360,7 @@ export const ProviderProductEdition = ({
                   buttonType="general-default-button"
                   label="Enviar a Content-oh!"
                 />
+                </>
               )}
             </div>
           )}
@@ -1397,4 +1441,4 @@ export const ProviderProductEdition = ({
       )}
     </Container>
   );
-};
+};

package/src/components/pages/ProviderProductEdition/styles.js

@@ -115,4 +115,4 @@ export const Container = styled.div`
       width: 100%;
     }
   }
-`;
+`;

package/src/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js

@@ -111,4 +111,4 @@ RetailerProductEditionDefault.args = {
     },
     src: "https://content-management-profile.s3.amazonaws.com/id-30/30.png?1656375350443",
   },
-};
+};

package/src/components/pages/RetailerProductEdition/index.js

@@ -1449,4 +1449,4 @@ export const RetailerProductEdition = ({
       )}
     </Container>
   );
-};
+};

package/src/index.js

@@ -22,7 +22,6 @@ export * from "./components/atoms/SliderToolTip/index";
 export * from "./components/atoms/StatusTag/index";
 export * from "./components/atoms/TabSection/index";
 export * from "./components/atoms/ValidationPanel/index";
-export * from "./components/atoms/VerticalSideMenuMainPage/index";
 
 //molecules
 export * from "./components/molecules/AvatarAndValidation/index";

package/dist/components/atoms/Percent/Percent.stories.js

@@ -1,39 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.PercentDefault = void 0;
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _index = require("./index");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var status = ["-", "Pr", "Rc", "As", "P", "QF", "AF", "AA", "AP", "AC", "RA", "RF", "RP", "RC", "Ex"];
-var _default = {
-  title: "Components/atoms/Percent",
-  component: _index.Percent,
-  argTypes: {
-    statusType: {
-      options: status,
-      control: {
-        type: "select"
-      }
-    }
-  }
-};
-exports.default = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Percent, (0, _objectSpread2.default)({}, args));
-};
-
-var PercentDefault = Template.bind({});
-exports.PercentDefault = PercentDefault;
-PercentDefault.args = {
-  statusType: "-"
-};

package/dist/components/atoms/Percent/index.js

@@ -1,39 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Percent = void 0;
-
-var _styles = require("./styles");
-
-var _polygon = _interopRequireDefault(require("../../../assets/images/arrow/polygon.svg"));
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var Percent = function Percent(_ref) {
-  var statusType = _ref.statusType;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    className: "status-".concat(statusType),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      className: "text",
-      children: "Productos en proceso"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "percent-text",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        className: "number",
-        children: "20"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: _polygon.default,
-        alt: ""
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "span",
-        children: "1%"
-      })]
-    })]
-  });
-};
-
-exports.Percent = Percent;

package/dist/components/atoms/Percent/styles.js

@@ -1,20 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Container = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _variables = require("../../../global-files/variables");
-
-var _templateObject;
-
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 7px;\n  width: 97px;\n  height: 83px;\n  text-align: center;\n  padding: 15px;\n\n  &.status-Pr,\n  &.status-Rc {\n    border: 1px solid ", ";\n    .span {\n      color: ", ";\n    }\n  }\n  &.status-- {\n    border: 1px solid ", ";\n    .span {\n      color: ", ";\n    }\n  }\n\n  &.status-As,\n  &.status-P,\n  &.status-QF {\n    border: 1px solid ", ";\n    .span {\n      color: ", ";\n    }\n  }\n\n  &.status-AF,\n  &.status-AA,\n  &.status-AP,\n  &.status-AC {\n    border: 1px solid ", ";\n    .span {\n      color: ", ";\n    }\n  }\n\n  &.status-RA,\n  &.status-RF,\n  &.status-RP,\n  &.status-RC {\n    border: 1px solid #d74ded;\n    .span {\n      color: #d74ded;\n    }\n  }\n\n  &.status-Ex {\n    border: 1px solid ", ";\n    .span {\n      color: ", ";\n    }\n  }\n\n  .text {\n    color: ", ";\n    font-size: 12px;\n    font-family: ", ";\n    line-height: 14px;\n  }\n  .percent-text {\n    display: flex;\n    .number {\n      font-family: ", ";\n      font-size: 28px;\n      color: ", ";\n    }\n    .span{\n    padding-top: 8px;\n    font-size: 18px;\n    }\n  }\n"])), _variables.GlobalColors.reception, _variables.GlobalColors.reception, _variables.GlobalColors.s3, _variables.GlobalColors.s3, _variables.GlobalColors.in_progress, _variables.GlobalColors.in_progress, _variables.GlobalColors.finished, _variables.GlobalColors.finished, _variables.GlobalColors.exported, _variables.GlobalColors.exported, _variables.GlobalColors.s4, _variables.FontFamily.Raleway, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4);
-
-exports.Container = Container;

package/dist/components/molecules/TextAndGradient/TextAndGradient.stories.js

@@ -1,31 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TextAndGradientDefault = void 0;
-
-var _index = require("./index");
-
-var _Cadena = _interopRequireDefault(require("../../../assets/images/providerAndCadena/Cadena.svg"));
-
-var _default = {
-  title: "Components/molecules/TextAndGradient",
-  component: _index.TextAndGradient
-};
-exports.default = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.TextAndGradient, args);
-};
-
-var TextAndGradientDefault = Template.bind({});
-exports.TextAndGradientDefault = TextAndGradientDefault;
-TextAndGradientDefault.args = {
-  title: "Beneficios de cadenas",
-  containerList: {
-    content: ["Crea proveedores y agregalos a tu cadena", "Valida los proveedores", "Solicita actualización a proveedores", "Analiza el número de productos totales"]
-  }
-};

package/dist/components/molecules/TextAndGradient/index.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TextAndGradient = void 0;
-
-var _styles = require("./styles");
-
-var _AtomList = require("../../atoms/AtomList");
-
-var _ScreenHeader = require("../../atoms/ScreenHeader");
-
-var _variables = require("../../../global-files/variables");
-
-var TextAndGradient = function TextAndGradient(_ref) {
-  var title = _ref.title,
-      image = _ref.image,
-      containerList = _ref.containerList;
-  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
-    className: "title"
-  }, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
-    className: "title",
-    headerType: "with-bold-text",
-    text: title,
-    color: _variables.GlobalColors.s1
-  })), image && /*#__PURE__*/React.createElement("img", {
-    src: image
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "list"
-  }, /*#__PURE__*/React.createElement(_AtomList.AtomList, {
-    content: containerList.content
-  })));
-};
-
-exports.TextAndGradient = TextAndGradient;

package/dist/components/molecules/TextAndGradient/styles.js

@@ -1,18 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Container = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _templateObject;
-
-var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n    position: absolute;\n    width: 720px;\n    height: 720px;\n    left: 0px;\n    top: 0px;\n    background: linear-gradient(180deg, #E33AA9 0%, #3B1366 100%);\n    align-content: center;\n\n    .title{\n        position: absolute;\n        width: 475px;\n        height: 36px;\n        left: 110px;\n        top: 140px;\n        letter-spacing: -0.015em;\n        font-feature-settings: 'pnum' on, 'lnum' on;\n    }\n    .list{\n        position: absolute;\n        height: 160px;\n        left: 180px;\n        top: 219px;\n        font-family: Raleway;\n        font-style: normal;\n        font-weight: 500;\n        font-size: 18px;\n        line-height: 40px;\n        letter-spacing: -0.015em;\n        text-align: left;\n        \n    }\n\n"])));
-
-exports.Container = Container;

package/src/components/pages/RegistrationLoginFirstStep/RegistrationLoginFirstStep.stories.js

@@ -1,17 +0,0 @@
-import { RegistrationLoginFirstStep } from "./index";
-import LoginImage from "../../../assets/images/carouselImagesLogin/loginImage.svg";
-import Login2 from "../../../assets/images/carouselImagesLogin/login2.svg";
-import Login3 from "../../../assets/images/carouselImagesLogin/login3.svg";
-
-export default {
-  title: "Components/pages/RegistrationLoginFirstStep",
-  component: RegistrationLoginFirstStep,
-};
-const Template = (args) => <RegistrationLoginFirstStep {...args} />;
-
-export const RegistrationLoginFirstStepDefault = Template.bind({});
-
-RegistrationLoginFirstStepDefault.args = {
-  imageArrayCarousel: [LoginImage, Login2, Login3],
-  textCarousel: "Elige la plataforma que conecta proovedores y retailers",
-};

package/src/components/pages/RegistrationLoginFirstStep/index.js

@@ -1,160 +0,0 @@
-import { Container } from "./styles";
-import { GradientPanel } from "../../atoms/GradientPanel";
-import { CarouselImagesLogin } from "../../molecules/CarouselImagesLogin";
-import { useState } from "react";
-import { LogoImage } from "../../atoms/LogoImage";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-import { TagAndInput } from "../../molecules/TagAndInput";
-import { Button } from "../../atoms/GeneralButton";
-import { GeneralInput } from "../../atoms/GeneralInput";
-
-export const RegistrationLoginFirstStep = ({
-  imageArrayCarousel = [],
-  textCarousel,
-  backogroundColorCarousel,
-}) => {
-  const [emptyName, setEmptyName] = useState(false);
-  const [emptyLastName, setEmptyLastName] = useState(false);
-  const [emptyEmail, setEmptyEmail] = useState(false);
-  const [emptyJob, setEmptyJob] = useState(false);
-  const [emptyPhone, setEmptyPhone] = useState(false);
-  const [invalidEmail, setInvalidEmail] = useState(false);
-
-  const validate = async (e) => {
-    e.preventDefault();
-    const name = document.querySelector("#nameInput").value;
-    const lastName = document.querySelector("#lastNameInput").value;
-    const email = document.querySelector("#emailInput").value;
-    const job = document.querySelector("#jobInput").value;
-    const phone = document.querySelector("#phoneInput").value;
-    name === "" ? setEmptyName(true) : setEmptyName(false);
-    lastName === "" ? setEmptyLastName(true) : setEmptyLastName(false);
-    email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
-    job === "" ? setEmptyJob(true) : setEmptyJob(false);
-    phone === "" ? setEmptyPhone(true) : setEmptyPhone(false);
-    !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
-      email
-    )
-      ? setInvalidEmail(true)
-      : setInvalidEmail(false);
-  };
-  const loginRight = [
-    <LogoImage key="1" />,
-    <div className="credenciales" key={"2"}>
-      <ScreenHeader
-        fontFamily={FontFamily.AvenirNext}
-        color={GlobalColors.s5}
-        text={"Ingresa tus credenciales"}
-      />
-    </div>,
-    <div className="user" key="3">
-      <div className="name-registration-user">
-        <TagAndInput
-          inputType={"text"}
-          inputId={"nameInput"}
-          label={"Nombre"}
-          inputPlaceHolder={"Nombre"}
-        />
-        <TagAndInput
-          inputType={"text"}
-          inputId={"lastNameInput"}
-          label={"Apellido"}
-          inputPlaceHolder={"Apellido"}
-        />
-      </div>
-      {emptyName && <label>Ingrese su nombre</label>}
-      {emptyLastName && <label>Ingrese sus apellidos</label>}
-      <TagAndInput
-        inputType={"text"}
-        inputId={"emailInput"}
-        label={"Correo electrónico"}
-        inputPlaceHolder={"username@contentoh.com"}
-      />
-      {emptyEmail && <label>Ingrese su correo</label>}
-      {invalidEmail && !emptyEmail && <label>Ingrese un correo válido</label>}
-      <TagAndInput
-        inputType={"text"}
-        inputId={"jobInput"}
-        label={"Puesto laboral"}
-        inputPlaceHolder={"Puesto dentro de la empresa"}
-      />
-      {emptyJob && <label>Ingrese su puesto</label>}
-      <ScreenHeader text={"Teléfono"} headerType={"input-name-header"} />
-      <div className="phone-registration-user">
-        <select name="select" className="phone-options">
-          <option>+52</option>
-          <option>+54</option>
-          <option>+57</option>
-          <option>+506</option>
-          <option>+593</option>
-          <option>+503</option>
-          <option>+504</option>
-          <option>+507</option>
-          <option>+51</option>
-        </select>
-        <GeneralInput
-          inputId={"phoneInput"}
-          inputType={"text"}
-          inputPlaceholder={"Teléfono"}
-        />
-      </div>
-      {emptyPhone && <label>Ingrese su número de teléfono</label>}
-      <ScreenHeader text={"País"} headerType={"input-name-header"} />
-      <select name="select" className="country-options">
-        <option value="value1" selected>
-          Selecciona tu país
-        </option>
-        <option value="value2">Argentina</option>
-        <option value="value3">Colombia</option>
-        <option value="value2">Ecuador</option>
-        <option value="value3">El Salvador</option>
-        <option value="value2">Honduras</option>
-        <option value="value3">México</option>
-        <option value="value2">Panamá</option>
-        <option value="value3">Perú</option>
-      </select>
-      {emptyEmail && <label>Seleccione su país</label>}
-    </div>,
-    <div className="button-end" key="4">
-      <Button
-        buttonType={"general-default-button"}
-        label={"Enviar"}
-        onClick={(e) => validate(e)}
-      />
-    </div>,
-    <div className="progress-bar" key="5">
-      <div className="progress-bar-first-step"></div>
-      <div className="progress-bar-registration"></div>
-    </div>,
-    <ScreenHeader
-      text={"Paso 1"}
-      headerType={"date-header"}
-      color={GlobalColors.s4}
-      key="6"
-    />,
-    <div className="new-login" key="7">
-      <p className="pre-registro">
-        ¿Ya tienes una cuenta?<span> Inicia Sesión</span>
-      </p>
-    </div>,
-  ];
-  return (
-    <Container>
-      <div className="home-retailer">
-        <CarouselImagesLogin
-          panelImg={imageArrayCarousel}
-          panelText={textCarousel}
-          panelColor={backogroundColorCarousel}
-        />
-      </div>
-      <div className="home-login-retailer">
-        <GradientPanel
-          componentsArray={loginRight}
-          panelType={"home-login"}
-          panelColor={GlobalColors.white}
-        />
-      </div>
-    </Container>
-  );
-};

package/src/components/pages/RegistrationLoginFirstStep/styles.js

@@ -1,85 +0,0 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display: flex;
-  width: 100%;
-  height: 100vh;
-  .user {
-    .name-registration-user {
-      display: flex;
-      justify-content: space-between;
-      input {
-        width: 160px;
-      }
-    }
-    .input-name-header {
-      margin-bottom: 4px;
-      margin-top: 12px;
-    }
-    .phone-registration-user {
-      display: flex;
-      justify-content: space-between;
-      .phone-options {
-        width: 80px;
-      }
-      input {
-        width: 100%;
-      }
-      & + * {
-        margin-top: 10px;
-      }
-    }
-    .country-options,
-    .phone-options {
-      width: 100%;
-      border: 1px solid ${GlobalColors.s2};
-      font-family: ${FontFamily.AvenirNext};
-      color: ${GlobalColors.s4};
-      font-weight: normal;
-      font-size: 12px;
-      line-height: 15px;
-      padding: 10px;
-      outline: none;
-      border-radius: 2px;
-      resize: none;
-      &:focus {
-        border: 1px solid ${GlobalColors.magenta_s2};
-      }
-    }
-  }
-  .button-end {
-    text-align: end;
-    .general-default-button {
-      width: 160px;
-    }
-    & + * {
-      margin-top: 10px;
-    }
-  }
-  .progress-bar {
-    width: 100%;
-    height: 8px;
-    display: flex;
-    justify-content: space-between;
-    .progress-bar-first-step {
-      width: 33.33%;
-      background-color: rgb(196, 196, 196);
-    }
-    .progress-bar-registration {
-      background-color: rgb(226, 226, 226);
-      width: 66.66%;
-    }
-  }
-  .date-header {
-    .new-login {
-      & + * {
-        margin-top: 20px;
-      }
-    }
-  }
-  .home-login-retailer,
-  .home-retailer {
-    width: 50%;
-  }
-`;