contentoh-components-library 21.4.102 → 21.4.104

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

@@ -1,56 +1,92 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StatusAsignationInfo = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
 var _styles = require("./styles");
+
 var _index = require("../../atoms/ScreenHeader/index");
+
 var _Avatar = require("../../atoms/Avatar");
+
 var _index2 = require("../../atoms/Status/index");
+
 var _GeneralButton = require("../../atoms/GeneralButton");
+
 var _react = require("react");
+
 var _index3 = require("../../atoms/AsignationOption/index");
+
 var _data = require("../../../global-files/data");
+
 var _SliderToolTip = require("../../atoms/SliderToolTip");
+
 var _infoIcon = _interopRequireDefault(require("../../../assets/images/sliderToolTip/infoIcon.svg"));
+
 var _slide = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide21.svg"));
+
 var _slide2 = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide22.svg"));
+
 var _slide3 = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide23.svg"));
+
 var _FinancedCompanies = require("./FinancedCompanies");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const StatusAsignationInfo = _ref => {
+
+var StatusAsignationInfo = function StatusAsignationInfo(_ref) {
   var _assignationsImages$a, _assignationsImages$c;
-  let {
-    status = "-",
-    imagesSection,
-    setImageLayout,
-    percent = 0,
-    assignationsImages,
-    setAssignation,
-    isRetailer,
-    downloadImages,
-    askToDeleteImages,
-    id = "default-id",
-    onClickSave,
-    showSaveButton,
-    canAssign,
-    version,
-    setShowVersionSelector,
-    user
-  } = _ref;
-  const [showAsignationPanel, setShowAsignationPanel] = (0, _react.useState)(false);
-  const [layout, setLayout] = (0, _react.useState)(false);
-  const [assignationType, setAssignationType] = (0, _react.useState)("facilitator");
-  const isFinanced = _FinancedCompanies.FinancedCompanies.includes(user === null || user === void 0 ? void 0 : user.id_company);
-  const closeAsignations = e => {
+
+  var _ref$status = _ref.status,
+      status = _ref$status === void 0 ? "-" : _ref$status,
+      imagesSection = _ref.imagesSection,
+      setImageLayout = _ref.setImageLayout,
+      _ref$percent = _ref.percent,
+      percent = _ref$percent === void 0 ? 0 : _ref$percent,
+      assignationsImages = _ref.assignationsImages,
+      setAssignation = _ref.setAssignation,
+      isRetailer = _ref.isRetailer,
+      downloadImages = _ref.downloadImages,
+      askToDeleteImages = _ref.askToDeleteImages,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? "default-id" : _ref$id,
+      onClickSave = _ref.onClickSave,
+      showSaveButton = _ref.showSaveButton,
+      canAssign = _ref.canAssign,
+      version = _ref.version,
+      setShowVersionSelector = _ref.setShowVersionSelector,
+      user = _ref.user;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showAsignationPanel = _useState2[0],
+      setShowAsignationPanel = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      layout = _useState4[0],
+      setLayout = _useState4[1];
+
+  var _useState5 = (0, _react.useState)("facilitator"),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      assignationType = _useState6[0],
+      setAssignationType = _useState6[1];
+
+  var isFinanced = _FinancedCompanies.FinancedCompanies.includes(user === null || user === void 0 ? void 0 : user.id_company);
+
+  var closeAsignations = function closeAsignations(e) {
     if (!e.target.closest("#default-id") && showAsignationPanel) {
       document.removeEventListener("click", closeAsignations, false);
       setShowAsignationPanel(false);
     }
   };
-  const slidefront = [{
+
+  var slidefront = [{
     slide: _slide.default,
     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."
@@ -63,7 +99,7 @@ const StatusAsignationInfo = _ref => {
     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."
   }];
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     if (showAsignationPanel) {
       document.addEventListener("click", closeAsignations, false);
     }
@@ -77,7 +113,7 @@ const StatusAsignationInfo = _ref => {
       slidePosition: "bottom-slide"
     }), version && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
       buttonType: "general circular-button version-button",
-      onClick: e => {
+      onClick: function onClick(e) {
         e.stopPropagation();
         e.preventDefault();
         setShowVersionSelector(true);
@@ -93,34 +129,36 @@ const StatusAsignationInfo = _ref => {
       className: "images-buttons",
       children: [showSaveButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
         buttonType: "circular-button delete-button",
-        onClick: () => {
+        onClick: function onClick() {
           askToDeleteImages && askToDeleteImages();
         }
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
         buttonType: "circular-button download-button",
-        onClick: () => {
+        onClick: function onClick() {
           downloadImages();
         }
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
         buttonType: layout ? "grid-layout" : "row-layout",
-        onClick: () => {
+        onClick: function onClick() {
           setLayout(!layout);
           setImageLayout && setImageLayout(!layout);
         }
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "assignations-container",
-      children: assignationsImages === null || assignationsImages === void 0 ? void 0 : (_assignationsImages$a = assignationsImages.assignations) === null || _assignationsImages$a === void 0 ? void 0 : _assignationsImages$a.map((assignation, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
-        imageType: "small-image",
-        image: (0, _data.getProfilePicture)(assignation.id, 20, 20),
-        altText: "user profile image",
-        onClick: e => {
-          e.preventDefault();
-          e.stopPropagation();
-          setShowAsignationPanel(true);
-          setAssignationType(assignation === null || assignation === void 0 ? void 0 : assignation.collaboratorType);
-        }
-      }, index + "-" + assignation.id))
+      children: assignationsImages === null || assignationsImages === void 0 ? void 0 : (_assignationsImages$a = assignationsImages.assignations) === null || _assignationsImages$a === void 0 ? void 0 : _assignationsImages$a.map(function (assignation, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+          imageType: "small-image",
+          image: (0, _data.getProfilePicture)(assignation.id, 20, 20),
+          altText: "user profile image",
+          onClick: function onClick(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            setShowAsignationPanel(true);
+            setAssignationType(assignation === null || assignation === void 0 ? void 0 : assignation.collaboratorType);
+          }
+        }, index + "-" + assignation.id);
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
       text: "Asig.",
       color: "#969696",
@@ -149,13 +187,15 @@ const StatusAsignationInfo = _ref => {
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "asignations-list",
-        children: (assignationsImages === null || assignationsImages === void 0 ? void 0 : assignationsImages.collaborators) !== undefined ? assignationsImages === null || assignationsImages === void 0 ? void 0 : (_assignationsImages$c = assignationsImages.collaborators[assignationType]) === null || _assignationsImages$c === void 0 ? void 0 : _assignationsImages$c.map((asignation, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.AsignationOption, {
-          profileImage: (0, _data.getProfilePicture)(asignation === null || asignation === void 0 ? void 0 : asignation.id_user, 40, 40),
-          onClick: () => {
-            setAssignation(assignationType, asignation === null || asignation === void 0 ? void 0 : asignation.id_user);
-          },
-          name: asignation.name
-        }, index + "-" + asignation.name)) : /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: (assignationsImages === null || assignationsImages === void 0 ? void 0 : assignationsImages.collaborators) !== undefined ? assignationsImages === null || assignationsImages === void 0 ? void 0 : (_assignationsImages$c = assignationsImages.collaborators[assignationType]) === null || _assignationsImages$c === void 0 ? void 0 : _assignationsImages$c.map(function (asignation, index) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.AsignationOption, {
+            profileImage: (0, _data.getProfilePicture)(asignation === null || asignation === void 0 ? void 0 : asignation.id_user, 40, 40),
+            onClick: function onClick() {
+              setAssignation(assignationType, asignation === null || asignation === void 0 ? void 0 : asignation.id_user);
+            },
+            name: asignation.name
+          }, index + "-" + asignation.name);
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
           className: "no-asignations",
           children: "Sin personas para asignar"
         })
@@ -174,4 +214,5 @@ const StatusAsignationInfo = _ref => {
     })]
   });
 };
+
 exports.StatusAsignationInfo = StatusAsignationInfo;

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

@@ -1,12 +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;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  > * + * {\n    margin-left: 8px;\n  }\n\n  .images-buttons {\n    button + * {\n      margin-left: 8px;\n    }\n  }\n\n  .assignations-container {\n    display: flex;\n    cursor: pointer;\n  }\n\n  .asignation-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 8px;\n    position: absolute;\n    top: calc(100% + 10px);\n    right: 0;\n    z-index: 10;\n\n    .asignation-header {\n      display: flex;\n      justify-content: space-between;\n\n      .asignation-status,\n      .asignation-percent {\n        & > p {\n          font-family: ", ";\n          font-weight: 500;\n          font-size: 14px;\n          line-height: 16px;\n          color: ", ";\n        }\n      }\n\n      .asignation-percent {\n        text-align: right;\n      }\n\n      & + * {\n        margin-top: 10px;\n      }\n    }\n\n    .asignations-list {\n      min-height: 40px;\n\n      .no-asignations {\n        padding: 5px;\n        font-family: ", ";\n        font-weight: 500;\n        font-size: 14px;\n        line-height: 16px;\n        color: ", ";\n      }\n\n      & + * {\n        margin-top: 10px;\n        border-top: 1px solid ", ";\n      }\n    }\n\n    .default-asignations-list {\n      padding-top: 10px;\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s3, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.GlobalColors.s3);
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  > * + * {\n    margin-left: 8px;\n  }\n\n  .images-buttons {\n    button + * {\n      margin-left: 8px;\n    }\n  }\n\n  .assignations-container {\n    display: flex;\n    cursor: pointer;\n  }\n\n  .asignation-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 8px;\n    position: absolute;\n    top: calc(100% + 10px);\n    right: 0;\n    z-index: 10;\n\n    .asignation-header {\n      display: flex;\n      justify-content: space-between;\n\n      .asignation-status,\n      .asignation-percent {\n        & > p {\n          font-family: ", ";\n          font-weight: 500;\n          font-size: 14px;\n          line-height: 16px;\n          color: ", ";\n        }\n      }\n\n      .asignation-percent {\n        text-align: right;\n      }\n\n      & + * {\n        margin-top: 10px;\n      }\n    }\n\n    .asignations-list {\n      min-height: 40px;\n\n      .no-asignations {\n        padding: 5px;\n        font-family: ", ";\n        font-weight: 500;\n        font-size: 14px;\n        line-height: 16px;\n        color: ", ";\n      }\n\n      & + * {\n        margin-top: 10px;\n        border-top: 1px solid ", ";\n      }\n    }\n\n    .default-asignations-list {\n      padding-top: 10px;\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s3, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.GlobalColors.s3);
+
+exports.Container = Container;

package/dist/components/molecules/StatusRetailer/StatusAsignationInfo.stories.js

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

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

@@ -1,35 +1,53 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StatusRetailer = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
 var _styles = require("./styles");
+
 var _react = require("react");
+
 var _ProductSkuStatus = require("../ProductSkuStatus");
+
 var _RetailerSelectorv = require("../RetailerSelectorv2");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const StatusRetailer = _ref => {
+
+var StatusRetailer = function StatusRetailer(_ref) {
   var _headerData$article;
-  let {
-    percent = 0,
-    id = "default-id",
-    showRetailer = false,
-    retailers,
-    activeRetailer,
-    setActiveRetailer,
-    headerData,
-    setShowVersionSelector,
-    version
-  } = _ref;
-  const [showAsignationPanel, setShowAsignationPanel] = (0, _react.useState)(false);
-  const closeAsignations = e => {
+
+  var _ref$percent = _ref.percent,
+      percent = _ref$percent === void 0 ? 0 : _ref$percent,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? "default-id" : _ref$id,
+      _ref$showRetailer = _ref.showRetailer,
+      showRetailer = _ref$showRetailer === void 0 ? false : _ref$showRetailer,
+      retailers = _ref.retailers,
+      activeRetailer = _ref.activeRetailer,
+      setActiveRetailer = _ref.setActiveRetailer,
+      headerData = _ref.headerData,
+      setShowVersionSelector = _ref.setShowVersionSelector,
+      version = _ref.version;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showAsignationPanel = _useState2[0],
+      setShowAsignationPanel = _useState2[1];
+
+  var closeAsignations = function closeAsignations(e) {
     if (!e.target.closest("#default-id") && showAsignationPanel) {
       document.removeEventListener("click", closeAsignations, false);
       setShowAsignationPanel(false);
     }
   };
-  (0, _react.useEffect)(() => {
+
+  (0, _react.useEffect)(function () {
     if (showAsignationPanel) {
       document.addEventListener("click", closeAsignations, false);
     }
@@ -52,4 +70,5 @@ const StatusRetailer = _ref => {
     })]
   });
 };
+
 exports.StatusRetailer = StatusRetailer;

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

@@ -1,12 +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;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  border-radius: 117px;\n  padding: 4px 5px;\n  display: flex;\n  border: 1px solid #F0F0F0;\n  gap:10px;\n  min-width: 128px;\n  justify-content:center;\n\n  .images-buttons {\n    button + * {\n      margin-left: 8px;\n    }\n  }\n\n  .assignations-container {\n    display: flex;\n    cursor: pointer;\n  }\n\n  .asignation-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 8px;\n    position: absolute;\n    top: calc(100% + 10px);\n    right: 0;\n    z-index: 10;\n\n    .asignation-header {\n      display: flex;\n      justify-content: space-between;\n\n      .asignation-status,\n      .asignation-percent {\n        & > p {\n          font-family: ", ";\n          font-weight: 500;\n          font-size: 14px;\n          line-height: 16px;\n          color: ", ";\n        }\n      }\n\n      .asignation-percent {\n        text-align: right;\n      }\n\n      & + * {\n        margin-top: 10px;\n      }\n    }\n\n    .asignations-list {\n      min-height: 40px;\n\n      .no-asignations {\n        padding: 5px;\n        font-family: ", ";\n        font-weight: 500;\n        font-size: 14px;\n        line-height: 16px;\n        color: ", ";\n      }\n\n      & + * {\n        margin-top: 10px;\n        border-top: 1px solid ", ";\n      }\n    }\n\n    .default-asignations-list {\n      padding-top: 10px;\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s3, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.GlobalColors.s3);
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  border-radius: 117px;\n  padding: 4px 5px;\n  display: flex;\n  border: 1px solid #F0F0F0;\n  gap:10px;\n  min-width: 128px;\n  justify-content:center;\n\n  .images-buttons {\n    button + * {\n      margin-left: 8px;\n    }\n  }\n\n  .assignations-container {\n    display: flex;\n    cursor: pointer;\n  }\n\n  .asignation-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 8px;\n    position: absolute;\n    top: calc(100% + 10px);\n    right: 0;\n    z-index: 10;\n\n    .asignation-header {\n      display: flex;\n      justify-content: space-between;\n\n      .asignation-status,\n      .asignation-percent {\n        & > p {\n          font-family: ", ";\n          font-weight: 500;\n          font-size: 14px;\n          line-height: 16px;\n          color: ", ";\n        }\n      }\n\n      .asignation-percent {\n        text-align: right;\n      }\n\n      & + * {\n        margin-top: 10px;\n      }\n    }\n\n    .asignations-list {\n      min-height: 40px;\n\n      .no-asignations {\n        padding: 5px;\n        font-family: ", ";\n        font-weight: 500;\n        font-size: 14px;\n        line-height: 16px;\n        color: ", ";\n      }\n\n      & + * {\n        margin-top: 10px;\n        border-top: 1px solid ", ";\n      }\n    }\n\n    .default-asignations-list {\n      padding-top: 10px;\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s3, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.GlobalColors.s3);
+
+exports.Container = Container;

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

@@ -1,19 +1,30 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.StripeCardFormDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _ = require(".");
+
 var _jsxRuntime = require("react/jsx-runtime");
-var _default = exports.default = {
+
+var _default = {
   title: "Components/molecules/StripeCardForm",
   component: _.StripeCardForm
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.StripeCardForm, {
-  ...args
-});
-const StripeCardFormDefault = exports.StripeCardFormDefault = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.StripeCardForm, (0, _objectSpread2.default)({}, args));
+};
+
+var StripeCardFormDefault = Template.bind({});
+exports.StripeCardFormDefault = StripeCardFormDefault;
 StripeCardFormDefault.args = {
   customerId: "cus_KuEt6R6vwmN09f",
   jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5ZjQzNjAwMC0wYzgyLTRjNzYtYWEzNi1kM2Q1NGJjZTZiMTMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4NTU2OTUyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2ODU1NzMxMjMsImlhdCI6MTY4NTU2OTUyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.EotcxmtkUpBxwlXa3bo25iLAmRcT0kj1G3PVITVB_0ZtF8UC19rJIMTNSc1hYkl8cbfCuB_vkjYCAxi4b2SOru5MdMTRhgNjcQTVbiwIYww-QdUWq0WSv84nW_HaRoxCJ8ezm-wBZgUTpcD3VFuynUICbODKKHUfxVdKdVoAM6GGE6ymSbO7-0C7ZumoWEqaZ22BF4G1H-JvLkR-tL5iqXa2N-QCnNoteFmHstBfH6Sp5UZhPav1VBEGRmwdFfUnC-Xc-aNeIFwgWCXMsOXFWbbmWeh0uNF-Btu-QEJ7VkCu4pbElqHWJKBYLCx1zqDBrKrsrNxyvQlxsJ9NSOae8Q",

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

@@ -1,37 +1,81 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StripeCardForm = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
 var _styles = require("./styles");
+
 var _react = require("react");
+
 var _stripeJs = require("@stripe/stripe-js");
+
 var _reactStripeJs = require("@stripe/react-stripe-js");
+
 var _paymentForm = require("./paymentForm");
+
 var _Loading = require("../../atoms/Loading");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const stripeApiKey = (0, _stripeJs.loadStripe)("".concat(process.env.REACT_APP_KEY_STRIPE));
-const StripeCardForm = _ref => {
-  let {
-    setToken,
-    setCard,
-    setStripe,
-    setModalErrorCard,
-    setMsj,
-    isSelected = false,
-    onClick
-  } = _ref;
-  const [stripeLoaded, setStripeLoaded] = (0, _react.useState)(false);
-  const loadStripeJS = async () => {
-    await stripeApiKey;
-    setStripeLoaded(true);
-  };
-  (0, _react.useEffect)(() => {
+
+var stripeApiKey = (0, _stripeJs.loadStripe)("".concat(process.env.REACT_APP_KEY_STRIPE));
+
+var StripeCardForm = function StripeCardForm(_ref) {
+  var setToken = _ref.setToken,
+      setCard = _ref.setCard,
+      setStripe = _ref.setStripe,
+      setModalErrorCard = _ref.setModalErrorCard,
+      setMsj = _ref.setMsj,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _onClick = _ref.onClick;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      stripeLoaded = _useState2[0],
+      setStripeLoaded = _useState2[1];
+
+  var loadStripeJS = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return stripeApiKey;
+
+            case 2:
+              setStripeLoaded(true);
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function loadStripeJS() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useEffect)(function () {
     loadStripeJS();
   }, []);
   return stripeLoaded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    onClick: () => onClick && onClick(),
+    onClick: function onClick() {
+      return _onClick && _onClick();
+    },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactStripeJs.Elements, {
       stripe: stripeApiKey,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_paymentForm.PaymentForm, {
@@ -46,4 +90,5 @@ const StripeCardForm = _ref => {
     })
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {});
 };
+
 exports.StripeCardForm = StripeCardForm;