contentoh-components-library 6.0.0 → 7.0.0

package/dist/components/organisms/ProductImageModal/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  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n  overflow: auto;\n\n  .modal-container {\n    display: flex;\n    border-radius: 4px;\n    overflow: hidden;\n\n    .modal-data-container {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      align-items: center;\n      padding: 15px;\n      min-width: 375px;\n      background-color: ", ";\n\n      .validation-and-table-container {\n        .validation-panel {\n          position: relative;\n          display: flex;\n          justify-content: flex-end;\n          align-items: center;\n          .circular-button {\n            & + * {\n              margin-left: 10px;\n            }\n          }\n\n          .close-button {\n            border-radius: 3px;\n            width: 30px;\n            height: 30px;\n            padding: 0;\n            border: 1px solid #f0eef2;\n            background-size: 30px;\n          }\n\n          & + * {\n            margin-top: 25px;\n          }\n        }\n      }\n    }\n  }\n"])), _variables.GlobalColors.deep_gray);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n  width: 100%;\n  overflow: auto;\n  position: fixed;\n  background-color: rgba(59, 59, 59, 0.53);\n  backdrop-filter: blur(4px);\n\n  .modal-container {\n    display: flex;\n    border-radius: 4px;\n    overflow: hidden;\n\n    .modal-data-container {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      align-items: center;\n      padding: 15px;\n      min-width: 375px;\n      background-color: ", ";\n\n      .validation-and-table-container {\n        .validation-panel {\n          position: relative;\n          display: flex;\n          justify-content: flex-end;\n          align-items: center;\n          .circular-button {\n            & + * {\n              margin-left: 10px;\n            }\n          }\n\n          .close-button {\n            border-radius: 3px;\n            width: 30px;\n            height: 30px;\n            padding: 0;\n            border: 1px solid #f0eef2;\n            background-size: 30px;\n          }\n\n          & + * {\n            margin-top: 25px;\n          }\n        }\n      }\n    }\n  }\n"])), _variables.GlobalColors.deep_gray);
 
 exports.Container = Container;

package/dist/components/pages/CustomerLogin/CustomerLogin.stories.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CustomerLoginDefault = void 0;
+
+var _index = require("./index");
+
+var _variables = require("../../../global-files/variables");
+
+var _CustomerTypeImage = require("../../atoms/CustomerTypeImage");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _index2 = require("../../atoms/LogoImage/index");
+
+var _index3 = require("../../atoms/CheckBox/index");
+
+var _index4 = require("../../atoms/GeneralButton/index");
+
+var _TagAndInput = require("../../molecules/TagAndInput");
+
+var _default = {
+  title: "Components/pages/CustomerLogin",
+  component: _index.CustomerLogin
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.CustomerLogin, args);
+};
+
+var CustomerLoginDefault = Template.bind({});
+exports.CustomerLoginDefault = CustomerLoginDefault;
+CustomerLoginDefault.args = {
+  loginLeft: {
+    componentsArray: [/*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+      fontFamily: _variables.FontFamily.Raleway_600,
+      color: _variables.GlobalColors.white,
+      text: "Bienvenido a Cadena",
+      key: "1"
+    }), /*#__PURE__*/React.createElement("p", {
+      key: "2"
+    }, "La platarforma que conecta cadenas retailers con proveedores."), /*#__PURE__*/React.createElement(_CustomerTypeImage.CustomerTypeImages, {
+      key: "3"
+    })]
+  },
+  loginRight: {
+    componentsArray: [/*#__PURE__*/React.createElement(_index2.LogoImage, {
+      key: "1"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "credenciales",
+      key: "2"
+    }, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+      fontFamily: _variables.FontFamily.AvenirNext,
+      color: _variables.GlobalColors.s5,
+      text: "Ingresa tus credenciales"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "user",
+      key: "3"
+    }, /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+      inputType: "text",
+      label: "Nombre de usuario",
+      inputPlaceHolder: "username@contentoh.com"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "password",
+      key: "4"
+    }, /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+      inputType: "text",
+      label: "Contraseña",
+      inputPlaceHolder: "Escribe tu contraseña"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "select",
+      key: "5"
+    }, /*#__PURE__*/React.createElement(_index3.CheckBox, {
+      label: "Mantener sesión activada",
+      id: "chk-default",
+      className: "active-left"
+    }), /*#__PURE__*/React.createElement("p", {
+      className: "active-right"
+    }, "Olvide mi contrase\xF1a")), /*#__PURE__*/React.createElement("div", {
+      className: "button-right",
+      key: "6"
+    }, /*#__PURE__*/React.createElement(_index4.Button, {
+      buttonType: "general-default-button",
+      label: "Iniciar sesión"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "new-login",
+      key: "7"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "pre-registro"
+    }, "\xBFA\xFAn no tienes cuenta?", /*#__PURE__*/React.createElement("span", null, " Reg\xEDstrate")))]
+  }
+};

package/dist/components/pages/CustomerLogin/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomerLogin = void 0;
+
+var _GradientPanel = require("../../atoms/GradientPanel");
+
+var _styles = require("./styles");
+
+var CustomerLogin = function CustomerLogin(_ref) {
+  var loginLeft = _ref.loginLeft,
+      loginRight = _ref.loginRight;
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
+    className: "home-retailer"
+  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
+    componentsArray: loginLeft.componentsArray,
+    panelType: "home-panel"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "home-login-retailer"
+  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
+    panelColor: true,
+    componentsArray: loginRight.componentsArray,
+    panelType: "home-login"
+  })));
+};
+
+exports.CustomerLogin = CustomerLogin;

package/dist/components/pages/CustomerLogin/styles.js

@@ -0,0 +1,18 @@
+"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.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  height: 100vh;\n\n  .home-login-retailer,\n  .home-retailer {\n    width: 50%;\n  }\n"])));
+
+exports.Container = Container;

package/dist/components/pages/CustomerPayMethod/CustomerPayMethod.stories.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CustomerPayMethodDefault = void 0;
+
+var _index = require("./index");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _variables = require("../../../global-files/variables");
+
+var _PayMethod = require("../../molecules/PayMethod");
+
+var _GeneralButton = require("../../atoms/GeneralButton");
+
+var _default = {
+  title: "Components/pages/CustomerPayMethod",
+  component: _index.CustomerPayMethod
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.CustomerPayMethod, args);
+};
+
+var CustomerPayMethodDefault = Template.bind({});
+exports.CustomerPayMethodDefault = CustomerPayMethodDefault;
+CustomerPayMethodDefault.args = {
+  left: {
+    componentsArray: [/*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+      key: "1",
+      fontFamily: _variables.FontFamily.Raleway_600,
+      color: _variables.GlobalColors.white,
+      text: "Que incluye la plataforma"
+    })]
+  },
+  homeRegister: {
+    componentsArray: [/*#__PURE__*/React.createElement("div", {
+      className: "arrowimage",
+      key: "1"
+    }, /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+      buttonType: "general-arrow-button"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "plan",
+      key: "2"
+    }, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+      fontFamily: _variables.FontFamily.AvenirNext,
+      color: _variables.GlobalColors.s5,
+      text: "Prueba de 7 días"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "general-text",
+      key: "3"
+    }, /*#__PURE__*/React.createElement("p", null, "Para continuar te solicitamos el m\xE9todo de pago. Tienes un plazo de 7 d\xEDas para crear tus productos con base en el plan elegido.")), /*#__PURE__*/React.createElement("div", {
+      className: "payment-register",
+      key: "4"
+    }, /*#__PURE__*/React.createElement(_PayMethod.PayMethod, null)), /*#__PURE__*/React.createElement("div", {
+      className: "button-continuar",
+      key: "5"
+    }, /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+      buttonType: "general-default-button",
+      label: "Continuar"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "continue",
+      key: "6"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "free"
+    }, "Continuar de forma gratuita"))],
+    panelType: "home-card"
+  }
+};

package/dist/components/pages/CustomerPayMethod/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomerPayMethod = void 0;
+
+var _styles = require("./styles");
+
+var _GradientPanel = require("../../atoms/GradientPanel");
+
+var CustomerPayMethod = function CustomerPayMethod(_ref) {
+  var left = _ref.left,
+      homeRegister = _ref.homeRegister;
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
+    className: "general-left"
+  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
+    componentsArray: left.componentsArray,
+    panelType: "home-panel"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "register-payment-method"
+  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
+    panelColor: true,
+    componentsArray: homeRegister.componentsArray,
+    panelType: "home-card"
+  })));
+};
+
+exports.CustomerPayMethod = CustomerPayMethod;

package/dist/components/pages/CustomerPayMethod/styles.js

@@ -0,0 +1,18 @@
+"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.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  height: 100vh;\n  .register-payment-method,\n  .general-left {\n    width: 50%;\n  }\n  .register-payment-method {\n    position: relative;\n    .arrowimage {\n      width: 26px;\n      height: 26px;\n      position: absolute;\n      top: 50px;\n      left: 40px;\n    }\n  }\n"])));
+
+exports.Container = Container;

package/dist/components/pages/CustomerType/CustomerType.stories.js

@@ -30,23 +30,34 @@ exports.CustomerTypeDefault = CustomerTypeDefault;
 CustomerTypeDefault.args = {
   homeLeft: {
     componentsArray: [/*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+      key: "1",
       fontFamily: _variables.FontFamily.Raleway_600,
       color: _variables.GlobalColors.white,
       text: "Cadena"
-    }), /*#__PURE__*/React.createElement(_CustomerTypeImage.CustomerTypeImages, null), /*#__PURE__*/React.createElement("p", null, "Elige esta opci\xF3n si eres una Cadena Retailer."), /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+    }), /*#__PURE__*/React.createElement(_CustomerTypeImage.CustomerTypeImages, {
+      key: "2"
+    }), /*#__PURE__*/React.createElement("p", {
+      key: "3"
+    }, "Elige esta opci\xF3n si eres una Cadena Retailer."), /*#__PURE__*/React.createElement(_GeneralButton.Button, {
       buttonType: "general-white-button",
-      label: "Seleccionar"
+      label: "Seleccionar",
+      key: "4"
     })]
   },
   homeRight: {
     componentsArray: [/*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
       fontFamily: _variables.FontFamily.Raleway_600,
       color: "#000000",
-      text: "Proveedor"
+      text: "Proveedor",
+      key: "1"
     }), /*#__PURE__*/React.createElement(_CustomerTypeImage.CustomerTypeImages, {
       className: "imagen",
-      imageType: true
-    }), /*#__PURE__*/React.createElement("p", null, "Elige esta opci\xF3n si eres una Proveedor o Due\xF1o de producto."), /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+      imageType: true,
+      key: "2"
+    }), /*#__PURE__*/React.createElement("p", {
+      key: "3"
+    }, "Elige esta opci\xF3n si eres una Proveedor o Due\xF1o de producto."), /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+      key: "4",
       buttonType: "general-default-button",
       label: "Seleccionar"
     })]

package/dist/components/pages/CustomerType/styles.js

@@ -11,10 +11,8 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 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: 100%;\n\n  .home-retailer,\n  .home-provider {\n    width: 50%;\n  }\n  .home-provider {\n    .home-panel {\n      h2 {\n        & + * {\n          margin-top: 45px;\n        }\n      }\n    }\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  height: 100vh;\n\n  .home-retailer,\n  .home-provider {\n    width: 50%;\n  }\n  .home-provider {\n    .home-panel {\n      h2 {\n        & + * {\n          margin-top: 45px;\n        }\n      }\n    }\n  }\n"])));
 
 exports.Container = Container;

package/dist/components/pages/OnboardPlan/OnboardPlan.stories.js

@@ -7,9 +7,17 @@ exports.default = exports.OnboardPlanDefault = void 0;
 
 var _index = require("./index");
 
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _AtomList = require("../../atoms/AtomList");
+
+var _variables = require("../../../global-files/variables");
+
+var _Fullplan = require("../../organisms/Fullplan");
+
 var _default = {
   title: "Components/pages/OnboardPlan",
-  component: _index.OnboardPlan
+  Component: _index.OnboardPlan
 };
 exports.default = _default;
 
@@ -21,16 +29,22 @@ var OnboardPlanDefault = Template.bind({});
 exports.OnboardPlanDefault = OnboardPlanDefault;
 OnboardPlanDefault.args = {
   leftPanel: {
-    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"]
-    }
+    componentsArray: [/*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+      key: "1",
+      fontFamily: _variables.FontFamily.Raleway_600,
+      color: _variables.GlobalColors.white,
+      text: "Beneficios de cadenas"
+    }), /*#__PURE__*/React.createElement(_AtomList.AtomList, {
+      key: "2",
+      content: ["Crea proveedores y agregalos a tu cadena", "Solicita actualización a proveedores", "Valida los proveedores", "Analiza el número de productos totales"]
+    })]
   },
   planContainerData: {
-    title: "Elige el número de proveedores",
-    textGeneral: "Bienvido a nuestra plataforma de cadena, para continuar elige el número de proveedores que tiene tu cadena",
-    containerData: {
-      planSelection: [{
+    componentsArray: [/*#__PURE__*/React.createElement(_Fullplan.FullPlan, {
+      key: "1",
+      title: "Elige el n\xFAmero de proveedores",
+      textGeneral: "Bienvido a nuestra plataforma de cadena, para continuar elige el n\xFAmero de proveedores que tiene tu cadena",
+      containerData: [{
         number: "300",
         name: "Proveedores"
       }, {
@@ -43,6 +57,6 @@ OnboardPlanDefault.args = {
         number: "Ondemand",
         name: "agrega proveedores a tu forma"
       }]
-    }
+    })]
   }
 };

package/dist/components/pages/OnboardPlan/index.js

@@ -7,24 +7,22 @@ exports.OnboardPlan = void 0;
 
 var _styles = require("./styles");
 
-var _TextAndGradient = require("../../molecules/TextAndGradient");
-
-var _Fullplan = require("../../organisms/Fullplan");
+var _GradientPanel = require("../../atoms/GradientPanel");
 
 var OnboardPlan = function OnboardPlan(_ref) {
   var leftPanel = _ref.leftPanel,
       planContainerData = _ref.planContainerData;
   return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
     className: "left"
-  }, /*#__PURE__*/React.createElement(_TextAndGradient.TextAndGradient, {
-    title: leftPanel.title,
-    containerList: leftPanel.containerList
+  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
+    componentsArray: leftPanel.componentsArray,
+    panelType: "home-panel"
   })), /*#__PURE__*/React.createElement("div", {
     className: "rigth"
-  }, /*#__PURE__*/React.createElement(_Fullplan.FullPlan, {
-    title: planContainerData.title,
-    textGeneral: planContainerData.textGeneral,
-    containerData: planContainerData.containerData
+  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
+    panelColor: true,
+    componentsArray: planContainerData.componentsArray,
+    panelType: "home-plan"
   })));
 };
 

package/dist/components/pages/OnboardPlan/styles.js

@@ -13,6 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n  display: flex;\n  flex-direction: row-reverse;\n  width: 1440px;\n  height: 720px;\n  .rigth {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    .title {\n      & + * {\n        margin-top: 30px;\n      }\n    }\n    .general-text {\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    /* button{\n            margin:auto;\n        } */\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  height: 100vh;\n  \n  .left,\n  .rigth {\n    width: 50%;\n  }\n  .left {\n    .title {\n      & + * {\n        margin-top: 35px;\n      }\n    }\n  }\n  .rigth {\ndisplay: flex;\nalign-items: center;\n    .title {\n      & + * {\n        margin-top: 30px;\n      }\n    }\n    .general-text {\n      & + * {\n        margin-top: 50px;\n      }\n    }\n  }\n"])));
 
 exports.Container = Container;

package/dist/components/pages/RetailerPlan/RetailerPlan.stories.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RetailerPlanDefault = void 0;
+
+var _index = require("./index");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _AtomList = require("../../atoms/AtomList");
+
+var _variables = require("../../../global-files/variables");
+
+var _Fullplan = require("../../organisms/Fullplan");
+
+var _default = {
+  title: "Components/pages/RetailerPlan",
+  Component: _index.RetailerPlan
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.RetailerPlan, args);
+};
+
+var RetailerPlanDefault = Template.bind({});
+exports.RetailerPlanDefault = RetailerPlanDefault;
+RetailerPlanDefault.args = {
+  retailerLeft: {
+    componentsArray: [/*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+      key: "1",
+      fontFamily: _variables.FontFamily.Raleway_600,
+      color: _variables.GlobalColors.white,
+      text: "Benficios de crear productos"
+    }), /*#__PURE__*/React.createElement(_AtomList.AtomList, {
+      key: "2",
+      content: ["Crea productos", "Solicita actualización", "Revisa, valida o rechaza productos", "Comparte con colaboradores"]
+    })]
+  },
+  planRetailerData: {
+    componentsArray: [/*#__PURE__*/React.createElement(_Fullplan.FullPlan, {
+      title: "Elige el n\xFAmero de proveedores",
+      textGeneral: "Bienvido a nuestra plataforma de cadena, para continuar elige el n\xFAmero de proveedores que tiene tu cadena",
+      containerData: [{
+        number: "300",
+        name: "Proveedores"
+      }, {
+        number: "1500",
+        name: "Proveedores"
+      }, {
+        number: "+3000",
+        name: "Proveedores"
+      }],
+      key: "1"
+    })]
+  }
+};

package/dist/components/pages/RetailerPlan/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RetailerPlan = void 0;
+
+var _styles = require("./styles");
+
+var _GradientPanel = require("../../atoms/GradientPanel");
+
+var _Fullplan = require("../../organisms/Fullplan");
+
+var RetailerPlan = function RetailerPlan(_ref) {
+  var retailerLeft = _ref.retailerLeft,
+      planRetailerData = _ref.planRetailerData;
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
+    className: "left-retailer"
+  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
+    componentsArray: retailerLeft.componentsArray,
+    panelType: "home-panel"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "righ-retailer"
+  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
+    panelColor: true,
+    componentsArray: planRetailerData.componentsArray,
+    panelType: "home-plan"
+  })));
+};
+
+exports.RetailerPlan = RetailerPlan;

package/dist/components/pages/RetailerPlan/styles.js

@@ -0,0 +1,18 @@
+"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.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\ndisplay: flex;\nwidth: 100%;\nheight: 100vh;\n\n\n  .righ-retailer,\n  .left-retailer{\n      width: 50%;\n  }\n  \n  .righ-retailer {\n    .title {\n      & + * {\n        margin-top: 30px;\n      }\n    }\n    .general-text {\n      & + * {\n        margin-top: 50px;\n      }\n    }\n  }\n\n"])));
+
+exports.Container = Container;