contentoh-components-library 8.0.0 → 10.0.1

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

@@ -0,0 +1,172 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RegistrationSecondStep = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _GradientPanel = require("../../atoms/GradientPanel");
+
+var _react = require("react");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _variables = require("../../../global-files/variables");
+
+var _GeneralButton = require("../../atoms/GeneralButton");
+
+var _LoginPasswordStrength = require("../../molecules/LoginPasswordStrength");
+
+var _LogoImage = require("../../atoms/LogoImage");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var RegistrationSecondStep = function RegistrationSecondStep(props) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      privacyCheck = _useState2[0],
+      setPrivacyCheck = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      termsCheck = _useState4[0],
+      setTermsCheck = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      emptyPassword = _useState6[0],
+      setEmptyPassword = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      emptyConfirmPassword = _useState8[0],
+      setEmptyConfirmPassword = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(true),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      matchPasswords = _useState10[0],
+      setMatchPasswords = _useState10[1];
+
+  var nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
+
+  var validateForm = function validateForm(evt, valid) {
+    evt.preventDefault();
+    var password = document.querySelector("#newPasswordInput").value;
+    !termsCheck && (valid = false);
+    !privacyCheck && (valid = false);
+
+    if (valid) {
+      nuevoUsuario.password = password;
+      sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
+      valid && props.setPaso(3);
+    }
+  };
+
+  var validate = function validate(e) {
+    e.preventDefault();
+    var valid = true;
+    var password = document.querySelector("#newPasswordInput").value;
+    password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
+    var confirmPassword = document.querySelector("#confirmPasswordInput").value;
+    confirmPassword === "" ? setEmptyConfirmPassword(true) : setEmptyConfirmPassword(false);
+    password === confirmPassword ? setMatchPasswords(true) : setMatchPasswords(false);
+
+    if (password.length < 8 || confirmPassword === "" || password !== confirmPassword) {
+      valid = false;
+    }
+
+    return valid;
+  };
+
+  var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "credenciales",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      fontFamily: _variables.FontFamily.AvenirNext,
+      color: _variables.GlobalColors.s5,
+      text: "Ingresa tus credenciales"
+    })
+  }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoginPasswordStrength.LoginPasswordStrength, {
+    emptyPassword: emptyPassword,
+    emptyConfirmPassword: emptyConfirmPassword,
+    matchPasswords: matchPasswords,
+    textTittle: "Ingresa tus credenciales",
+    required: "required"
+  }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    className: "label-terms",
+    children: "T\xE9rminos y condiciones"
+  }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "checkbox-terms",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      type: "checkbox",
+      onClick: function onClick(e) {
+        return setTermsCheck(e.target.checked);
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      text: "Conoce nuestros termnios y condiciones de cada uno de nuestros servicios. Si tienes algunda duda o comentario escríbenos.",
+      headerType: "date-header"
+    })]
+  }, "5"), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    className: "label-terms",
+    children: "Aviso de privacidad"
+  }, "6"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "checkbox-terms",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      type: "checkbox",
+      onClick: function onClick(e) {
+        return setPrivacyCheck(e.target.checked);
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      text: "Todos los datos estan protegidos.",
+      headerType: "date-header"
+    })]
+  }, "7"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "button-end",
+    children: [(!termsCheck || !privacyCheck) && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      className: "terms",
+      children: "*Aceptar los t\xE9rminos y condiciones y el aviso de privacidad"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+      buttonType: "general-default-button",
+      label: "Enviar",
+      onClick: function onClick(e) {
+        var flag = validate(e);
+        validateForm(e, flag);
+      }
+    })]
+  }, "8"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "progress-bar",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "progress-bar-first-step-check"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "progress-bar-second-step"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "progress-bar-registration"
+    })]
+  }, "9"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+    text: "Paso 2",
+    headerType: "date-header",
+    color: _variables.GlobalColors.s4
+  }, "10"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "new-login",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+      className: "pre-registro",
+      children: ["\xBFA\xFAn no tienes cuenta?", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: " Reg\xEDstrate"
+      })]
+    })
+  }, "11")];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
+      panelColor: _variables.GlobalColors.white,
+      componentsArray: loginRight,
+      panelType: "home-login"
+    })
+  });
+};
+
+exports.RegistrationSecondStep = RegistrationSecondStep;

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

@@ -0,0 +1,20 @@
+"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  display: flex;\n  width: 50%;\n  height: 100vh;\n  .button-end {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    .general-default-button {\n      width: 160px;\n    }\n    .terms{\n      margin-bottom: 5px;\n    }\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  .progress-bar {\n    width: 100%;\n    height: 8px;\n    display: flex;\n    justify-content: space-between;\n    .progress-bar-first-step-check {\n      width: 33.33%;\n      background-color: ", ";\n    }\n    .progress-bar-second-step {\n      width: 33.33%;\n      background-color: rgb(196, 196, 196);\n    }\n    .progress-bar-registration {\n      background-color: rgb(226, 226, 226);\n      width: 33.33%;\n    }\n  }\n  .date-header {\n    margin-left: 33.33%;\n  }\n  .checkbox-terms {\n    display: flex;\n    margin-bottom: 5px;\n    input {\n      cursor: pointer;\n      & + * {\n        margin-left: 15px;\n      }\n    }\n  }\n  .label-terms {\n    color: rgb(129, 115, 147);\n    font-size: 13px;\n    line-height: 24px;\n    font-weight: 700;\n    cursor: pointer;\n    margin-left: 25px;\n    & + * {\n      margin-top: 5px;\n    }\n  }\n"])), _variables.GlobalColors.exported);
+
+exports.Container = Container;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RegistrationThirdStepDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/RegistrationThirdStep",
+  component: _index.RegistrationThirdStep
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.RegistrationThirdStep, (0, _objectSpread2.default)({}, args));
+};
+
+var RegistrationThirdStepDefault = Template.bind({});
+exports.RegistrationThirdStepDefault = RegistrationThirdStepDefault;
+RegistrationThirdStepDefault.args = {};

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

@@ -0,0 +1,155 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RegistrationThirdStep = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _GradientPanel = require("../../atoms/GradientPanel");
+
+var _react = require("react");
+
+var _LogoImage = require("../../atoms/LogoImage");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _variables = require("../../../global-files/variables");
+
+var _TagAndInput = require("../../molecules/TagAndInput");
+
+var _GeneralButton = require("../../atoms/GeneralButton");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var RegistrationThirdStep = function RegistrationThirdStep(props) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      emptyCommercialName = _useState2[0],
+      setEmptyCommercialName = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      emptyBussinesName = _useState4[0],
+      setEmptyBussinesName = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      emptyRFC = _useState6[0],
+      setEmptyRFC = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      emptyFiscalAddress = _useState8[0],
+      setEmptyFiscalAddress = _useState8[1];
+
+  var nuevoRegistro = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
+
+  var validate = function validate(e) {
+    e.preventDefault();
+    var valid = true;
+    var commercialName = document.querySelector("#commercialNameInput").value;
+    var bussinesName = document.querySelector("#bussinesNameInput").value;
+    var RFC = document.querySelector("#rfcInput").value;
+    var FiscalAddress = document.querySelector("#fiscalAddressInput").value;
+    commercialName === "" ? setEmptyCommercialName(true) : setEmptyCommercialName(false);
+    bussinesName === "" ? setEmptyBussinesName(true) : setEmptyBussinesName(false);
+    RFC === "" ? setEmptyRFC(true) : setEmptyRFC(false);
+    FiscalAddress === "" ? setEmptyFiscalAddress(true) : setEmptyFiscalAddress(false);
+
+    if (commercialName === "" || bussinesName === "" || RFC === "" || FiscalAddress === "") {
+      valid = false;
+    }
+
+    if (valid) {
+      nuevoRegistro.commercialName = commercialName;
+      nuevoRegistro.companyName = bussinesName;
+      nuevoRegistro.rfc = RFC;
+      nuevoRegistro.adress = FiscalAddress;
+      sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoRegistro));
+      props.setPaso(props.paso + 1);
+    }
+  };
+
+  var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "credenciales",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      fontFamily: _variables.FontFamily.AvenirNext,
+      color: _variables.GlobalColors.s5,
+      text: "Ingresa tus credenciales"
+    })
+  }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "user",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+      inputType: "text",
+      inputId: "commercialNameInput",
+      label: "Nombre comercial",
+      inputPlaceHolder: "Nombre comercial"
+    }), emptyCommercialName && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese el nombre comercial de la empresa"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+      inputType: "text",
+      inputId: "bussinesNameInput",
+      label: "Razón social",
+      inputPlaceHolder: "Razón social"
+    }), emptyBussinesName && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese la raz\xF3n social de la empresa"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+      inputType: "text",
+      inputId: "rfcInput",
+      label: "RFC",
+      inputPlaceHolder: "RFC"
+    }), emptyRFC && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "El RFC es requerido"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+      inputType: "text",
+      inputId: "fiscalAddressInput",
+      label: "Direccion fiscal",
+      inputPlaceHolder: "Dirección fiscal"
+    }), emptyFiscalAddress && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese la direccion fiscal de la empresa"
+    })]
+  }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "button-end",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+      buttonType: "general-default-button",
+      label: "Enviar",
+      onClick: function onClick(e) {
+        return validate(e);
+      }
+    })
+  }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "progress-bar",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "progress-bar-step-check"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "progress-bar-registration"
+    })]
+  }, "5"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+    text: "Paso 3",
+    headerType: "date-header",
+    color: _variables.GlobalColors.s4
+  }, "6"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "new-login",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+      className: "pre-registro",
+      children: ["\xBFYa tienes una cuenta?", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: " Inicia Sesi\xF3n"
+      })]
+    })
+  }, "7")];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
+      componentsArray: loginRight,
+      panelType: "home-login",
+      panelColor: _variables.GlobalColors.white
+    })
+  });
+};
+
+exports.RegistrationThirdStep = RegistrationThirdStep;

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

@@ -0,0 +1,20 @@
+"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  display: flex;\n  width: 50%;\n  height: 100%;\n  .user {\n    .input-name-header {\n      margin-top: 10px;\n    }\n  }\n  .button-end {\n    text-align: end;\n    .general-default-button {\n      width: 160px;\n    }\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  .progress-bar {\n    width: 100%;\n    height: 8px;\n    display: flex;\n    justify-content: space-between;\n    .progress-bar-step-check {\n      width: 66.66%;\n      background-color: ", ";\n    }\n    .progress-bar-registration {\n      background-color: rgb(196, 196, 196);\n      width: 33.33%;\n    }\n  }\n  .date-header {\n    margin-left: 66.66%;\n    .new-login {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n  }\n"])), _variables.GlobalColors.exported);
+
+exports.Container = Container;

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

@@ -1,12 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.RetailerSelectorDefault = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _default = {
   title: "Components/molecules/RetailerSelector",
   component: _index.RetailerSelector
@@ -14,7 +20,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.RetailerSelector, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.RetailerSelector, (0, _objectSpread2.default)({}, args));
 };
 
 var RetailerSelectorDefault = Template.bind({});

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

@@ -17,10 +17,15 @@ var _react = require("react");
 
 var _AsignationOption = require("../../atoms/AsignationOption");
 
+var _DropDownButton = require("../../atoms/DropDownButton");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
 var RetailerSelector = function RetailerSelector(_ref) {
   var retailers = _ref.retailers,
       activeRetailer = _ref.activeRetailer,
-      setActiveRetailer = _ref.setActiveRetailer;
+      setActiveRetailer = _ref.setActiveRetailer,
+      showStatus = _ref.showStatus;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -39,33 +44,39 @@ var RetailerSelector = function RetailerSelector(_ref) {
       document.addEventListener("click", closeRetailersPanel, false);
     }
   }, [retailersPanel]);
-  return /*#__PURE__*/React.createElement(_styles.Container, {
-    id: "retailers-assignation"
-  }, /*#__PURE__*/React.createElement(_Avatar.Avatar, {
-    image: activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.image,
-    altText: activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.name,
-    imageType: "medium-image",
-    onClick: function onClick() {
-      retailers.length > 1 && setRetailersPanel(!retailersPanel);
-      if (retailersPanel) document.removeEventListener("click", closeRetailersPanel, false);
-    }
-  }), retailersPanel && /*#__PURE__*/React.createElement("div", {
-    className: "retailers-panel"
-  }, retailers.map(function (retailer, index) {
-    return /*#__PURE__*/React.createElement(_AsignationOption.AsignationOption, {
-      key: "".concat(index, "-").concat(retailer === null || retailer === void 0 ? void 0 : retailer.name),
-      profileImage: retailer === null || retailer === void 0 ? void 0 : retailer.image,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    id: "retailers-assignation",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+      image: activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.image,
+      altText: activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.name,
       imageType: "medium-image",
-      asignationType: null,
-      name: retailer === null || retailer === void 0 ? void 0 : retailer.name,
-      team: retailer === null || retailer === void 0 ? void 0 : retailer.team,
       onClick: function onClick() {
-        setActiveRetailer(retailer);
-        document.removeEventListener("click", closeRetailersPanel, false);
-        setRetailersPanel(false);
+        (retailers === null || retailers === void 0 ? void 0 : retailers.length) > 0 && setRetailersPanel(!retailersPanel);
+        if (retailersPanel) document.removeEventListener("click", closeRetailersPanel, false);
       }
-    });
-  })));
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropDownButton.DropDownButton, {
+      active: retailersPanel
+    }), retailersPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "retailers-panel",
+      children: retailers.map(function (retailer, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AsignationOption.AsignationOption, {
+          profileImage: retailer === null || retailer === void 0 ? void 0 : retailer.image,
+          imageType: "medium-image",
+          asignationType: null,
+          name: retailer === null || retailer === void 0 ? void 0 : retailer.name,
+          team: retailer === null || retailer === void 0 ? void 0 : retailer.team,
+          services: retailer === null || retailer === void 0 ? void 0 : retailer.services,
+          onClick: function onClick() {
+            setActiveRetailer(retailer);
+            document.removeEventListener("click", closeRetailersPanel, false);
+            setRetailersPanel(false);
+          },
+          active: retailer.id === activeRetailer.id,
+          showStatus: showStatus
+        }, "".concat(index, "-").concat(retailer === null || retailer === void 0 ? void 0 : retailer.name));
+      })
+    })]
+  });
 };
 
 exports.RetailerSelector = RetailerSelector;

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

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  .retailers-panel {\n    background: ", ";\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);\n    border-radius: 4px;\n    padding: 10px;\n    position: absolute;\n    top: calc(100% + 10px);\n    right: 0;\n    z-index: 10;\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s3);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  cursor: pointer;\n  display: flex;\n\n  .retailers-panel {\n    background: ", ";\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);\n    border-radius: 4px;\n    padding: 10px;\n    position: absolute;\n    top: calc(100% + 10px);\n    right: 0;\n    z-index: 10;\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s3);
 
 exports.Container = Container;

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

@@ -7,10 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.SidebarNotificationDefault = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
 
 var _defaultProfileImage = _interopRequireDefault(require("../../../assets/images/defaultImages/defaultProfileImage.svg"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _default = {
   title: "Components/molecules/SidebarNotification",
   component: _index.SidebarNotification,
@@ -31,7 +35,7 @@ var setShowSidebar = function setShowSidebar(value) {
 };
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.SidebarNotification, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SidebarNotification, (0, _objectSpread2.default)({}, args));
 };
 
 var SidebarNotificationDefault = Template.bind({});

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

@@ -23,6 +23,8 @@ var _Notification = require("../../atoms/Notification");
 
 var _react = require("react");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var SidebarNotification = function SidebarNotification(_ref) {
   var _ref$array = _ref.array,
       array = _ref$array === void 0 ? [] : _ref$array,
@@ -63,43 +65,47 @@ var SidebarNotification = function SidebarNotification(_ref) {
     return date;
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, showSidebar && /*#__PURE__*/React.createElement(_styles.Container, {
-    id: "side-bar",
-    ref: sidebar
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "notification-header"
-  }, /*#__PURE__*/React.createElement(_index2.Avatar, {
-    image: _productNotification.default,
-    imageType: "retailer-image",
-    altText: "Notification Picture"
-  }), /*#__PURE__*/React.createElement(_index.ScreenHeader, {
-    headerType: "product-name-header",
-    text: "Notificaciones",
-    color: "#867586"
-  }), /*#__PURE__*/React.createElement(_GeneralButton.Button, {
-    buttonType: "close-button"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "scroll"
-  }, array === null || array === void 0 ? void 0 : array.map(function (element, index) {
-    var _element$notification;
-
-    return /*#__PURE__*/React.createElement("div", {
-      className: "date-notification",
-      key: index + "-" + (element === null || element === void 0 ? void 0 : element.dates)
-    }, /*#__PURE__*/React.createElement(_index.ScreenHeader, {
-      headerType: "input-name-header",
-      text: comparisonDate(element === null || element === void 0 ? void 0 : element.dates),
-      color: "#6A5880",
-      FontFamily: _variables.FontFamily.AvenirNext
-    }), element === null || element === void 0 ? void 0 : (_element$notification = element.notifications) === null || _element$notification === void 0 ? void 0 : _element$notification.map(function (notification, index) {
-      return /*#__PURE__*/React.createElement(_Notification.Notification, {
-        key: index,
-        profilePicture: notification === null || notification === void 0 ? void 0 : notification.profilePicture,
-        notification: notification === null || notification === void 0 ? void 0 : notification.notification,
-        newNotification: notification === null || notification === void 0 ? void 0 : notification.newNotification
-      });
-    }));
-  }))), " ");
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [showSidebar && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+      id: "side-bar",
+      ref: sidebar,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "notification-header",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Avatar, {
+          image: _productNotification.default,
+          imageType: "retailer-image",
+          altText: "Notification Picture"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
+          headerType: "product-name-header",
+          text: "Notificaciones",
+          color: "#867586"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+          buttonType: "close-button"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "scroll",
+        children: array === null || array === void 0 ? void 0 : array.map(function (element, index) {
+          var _element$notification;
+
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "date-notification",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
+              headerType: "input-name-header",
+              text: comparisonDate(element === null || element === void 0 ? void 0 : element.dates),
+              color: "#6A5880",
+              FontFamily: _variables.FontFamily.AvenirNext
+            }), element === null || element === void 0 ? void 0 : (_element$notification = element.notifications) === null || _element$notification === void 0 ? void 0 : _element$notification.map(function (notification, index) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Notification.Notification, {
+                profilePicture: notification === null || notification === void 0 ? void 0 : notification.profilePicture,
+                notification: notification === null || notification === void 0 ? void 0 : notification.notification,
+                newNotification: notification === null || notification === void 0 ? void 0 : notification.newNotification
+              }, index);
+            })]
+          }, index + "-" + (element === null || element === void 0 ? void 0 : element.dates));
+        })
+      })]
+    }), " "]
+  });
 };
 
 exports.SidebarNotification = SidebarNotification;