contentoh-components-library 21.4.136 → 21.4.138

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

@@ -0,0 +1,34 @@
+"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 = {
+  title: "Components/molecules/StatusRetailer",
+  component: _index.StatusRetailer
+};
+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: {
+    src: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg"
+  },
+  imagesSection: true
+};

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

@@ -0,0 +1,74 @@
+"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");
+
+var StatusRetailer = function StatusRetailer(_ref) {
+  var _headerData$article;
+
+  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)(function () {
+    if (showAsignationPanel) {
+      document.addEventListener("click", closeAsignations, false);
+    }
+  }, [showAsignationPanel]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    id: id,
+    children: [showRetailer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RetailerSelectorv.RetailerSelectorv2, {
+      retailers: retailers,
+      activeRetailer: activeRetailer,
+      setActiveRetailer: setActiveRetailer
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductSkuStatus.ProductSkuStatus, {
+      productName: (headerData === null || headerData === void 0 ? void 0 : (_headerData$article = headerData.article) === null || _headerData$article === void 0 ? void 0 : _headerData$article.name) || (headerData === null || headerData === void 0 ? void 0 : headerData.name),
+      statusType: (headerData === null || headerData === void 0 ? void 0 : headerData.version_status) || (headerData === null || headerData === void 0 ? void 0 : headerData.status) || (headerData === null || headerData === void 0 ? void 0 : headerData.article_status),
+      setShowVersionSelector: setShowVersionSelector,
+      percentRequired: percent,
+      percent: percent === null || percent === void 0 ? void 0 : percent.toFixed(0),
+      containerClassName: "bar-sku",
+      contClassName: "bar-sku-cont",
+      version: version
+    })]
+  });
+};
+
+exports.StatusRetailer = StatusRetailer;

package/dist/components/molecules/StatusRetailer/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  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

@@ -0,0 +1,32 @@
+"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 = {
+  title: "Components/molecules/StripeCardForm",
+  component: _.StripeCardForm
+};
+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",
+  isSelected: true
+};

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

@@ -0,0 +1,94 @@
+"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");
+
+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: function onClick() {
+      return _onClick && _onClick();
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactStripeJs.Elements, {
+      stripe: stripeApiKey,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_paymentForm.PaymentForm, {
+        labelForm: "Pago con tarjeta",
+        setToken: setToken,
+        setCard: setCard,
+        setStripe: setStripe,
+        setModalErrorCard: setModalErrorCard,
+        setMsj: setMsj,
+        isSelected: isSelected
+      })
+    })
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {});
+};
+
+exports.StripeCardForm = StripeCardForm;

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

@@ -0,0 +1,199 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaymentForm = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var _styles = require("./styles");
+
+var _reactStripeJs = require("@stripe/react-stripe-js");
+
+var _check_circle = _interopRequireDefault(require("../../../assets/images/defaultImages/check_circle.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var PaymentForm = function PaymentForm(_ref) {
+  var _ref$labelForm = _ref.labelForm,
+      labelForm = _ref$labelForm === void 0 ? "Pago con tarjeta" : _ref$labelForm,
+      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;
+  var stripe = (0, _reactStripeJs.useStripe)();
+  var elements = (0, _reactStripeJs.useElements)();
+
+  var _useState = (0, _react.useState)(""),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      cardName = _useState2[0],
+      setCardName = _useState2[1];
+
+  var _useState3 = (0, _react.useState)({
+    name: false,
+    number: false,
+    cvc: false,
+    exp: false
+  }),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      valuesComplete = _useState4[0],
+      setValuesComplete = _useState4[1];
+
+  var handleIputChange = function handleIputChange(event, key) {
+    var temp = (0, _objectSpread2.default)({}, valuesComplete);
+
+    if (key === "name") {
+      temp[key] = event === null || event === void 0 ? void 0 : event.length;
+      setValuesComplete(temp);
+    } else {
+      temp[key] = event.complete;
+      setValuesComplete(temp);
+    }
+  };
+  /**
+   * Este método crea un nuevo token que será enviado a la bd para generar una nueva tarjeta
+   */
+
+
+  var createToken = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var token, _yield$stripe$createP, error, paymentMethod;
+
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              /* isNew values
+                1: is new
+                0: use card existing
+                -1: use other payment metoh */
+              token = "";
+              _context.next = 3;
+              return stripe.createToken(elements.getElement(_reactStripeJs.CardNumberElement));
+
+            case 3:
+              token = _context.sent;
+              _context.next = 6;
+              return stripe.createPaymentMethod({
+                type: "card",
+                card: elements.getElement(_reactStripeJs.CardNumberElement),
+                billing_details: {
+                  name: cardName
+                }
+              });
+
+            case 6:
+              _yield$stripe$createP = _context.sent;
+              error = _yield$stripe$createP.error;
+              paymentMethod = _yield$stripe$createP.paymentMethod;
+
+              try {
+                if (token.token) {
+                  token = token.token.id;
+                } else {
+                  setModalErrorCard && setModalErrorCard(true);
+                  setMsj && setMsj(token.error.message);
+                }
+
+                paymentMethod.isNew = 1;
+                setToken && setToken(token);
+                setCard && setCard(paymentMethod);
+              } catch (err) {
+                console.log(err, error);
+              }
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function createToken() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useEffect)(function () {
+    var valuesArray = Object.values(valuesComplete);
+    var allValuesComplete = valuesArray === null || valuesArray === void 0 ? void 0 : valuesArray.every(function (val) {
+      return val;
+    });
+    allValuesComplete ? createToken() : "le falta algo oiga";
+    setStripe && setStripe(stripe);
+  }, [valuesComplete]);
+
+  var handleCardNameChange = function handleCardNameChange(event) {
+    handleIputChange(event.target.value, "name");
+    setCardName(event.target.value);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.PaymentFormContainer, {
+    isSelected: isSelected,
+    children: [isSelected ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: _check_circle.default,
+      alt: "Seleccionado"
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+      children: labelForm
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "card-fields",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "element card-name",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: "Nombre en la tarjeta"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          className: "card-input",
+          value: cardName,
+          onChange: handleCardNameChange
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "element card-number",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: "No. de tarjeta"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactStripeJs.CardNumberElement, {
+          className: "card-input",
+          onChange: function onChange(e) {
+            return handleIputChange(e, "number");
+          }
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "element expiration-date",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: "Fecha de expiraci\xF3n"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactStripeJs.CardExpiryElement, {
+          className: "card-input",
+          onChange: function onChange(e) {
+            return handleIputChange(e, "exp");
+          }
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "element cvc-code ",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: "CVC"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactStripeJs.CardCvcElement, {
+          className: "card-input",
+          onChange: function onChange(e) {
+            return handleIputChange(e, "cvc");
+          }
+        })]
+      })]
+    })]
+  });
+};
+
+exports.PaymentForm = PaymentForm;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaymentFormContainer = 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, _templateObject2;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
+
+exports.Container = Container;
+
+var PaymentFormContainer = _styledComponents.default.form(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 20px;\n  border: 1px solid #f0f0f0;\n  border-radius: 10px;\n\n  h2 {\n    font-size: 15px;\n    line-height: 20px;\n    color: #262626;\n    font-family: ", ";\n\n    & + * {\n      margin-top: 10px;\n    }\n  }\n\n  .card-fields {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    .element {\n      display: flex;\n      align-items: center;\n\n      label {\n        color: #808080;\n        font-family: ", ";\n        font-size: 12px;\n        display: flex;\n\n        & + * {\n          margin-left: 6px;\n        }\n      }\n\n      .card-input {\n        border: 1px solid #f0f0f0 !important;\n        border-radius: 5px;\n        padding: 3px;\n        font-family: ", ";\n        font-size: 12px;\n        flex: 1;\n        background-color: #fff;\n      }\n\n      &.card-name {\n        flex: 1 0 100%;\n        label + * {\n          margin-left: 6px;\n        }\n      }\n\n      &.card-number {\n        flex: 1 0 100%;\n        label + * {\n          margin-left: 43px;\n        }\n      }\n\n      &.expiration-date,\n      &.cvc-code {\n        flex: 1 1 49%;\n        label + * {\n          margin-left: 9px;\n        }\n      }\n    }\n  }\n  position: relative;\n  ", "\n  img {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n  }\n"])), _variables.FontFamily.RobotoMedium, _variables.FontFamily.Lato, _variables.FontFamily.Lato, function (_ref) {
+  var isSelected = _ref.isSelected;
+  return isSelected && "border-color: #8A6CAA;\n  background: #F7F7FC;";
+});
+
+exports.PaymentFormContainer = PaymentFormContainer;

package/dist/components/molecules/StripeCardSelector/CardSelector.stories.js

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

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

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardSelector = 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 _react = require("react");
+
+var _styles = require("./styles");
+
+var _stripeJs = require("@stripe/stripe-js");
+
+var _reactStripeJs = require("@stripe/react-stripe-js");
+
+var _utils = require("./utils");
+
+var _Card = require("../../atoms/Card");
+
+var _Loading = require("../../atoms/Loading");
+
+var _check_circle = _interopRequireDefault(require("../../../assets/images/defaultImages/check_circle.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var stripeApiKey = (0, _stripeJs.loadStripe)("".concat(process.env.REACT_APP_KEY_STRIPE));
+
+var CardSelector = function CardSelector(_ref) {
+  var jwt = _ref.jwt,
+      setCard = _ref.setCard,
+      setStripe = _ref.setStripe,
+      _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 _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      cards = _useState4[0],
+      setCards = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(""),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      selectedCard = _useState6[0],
+      setSelectedCard = _useState6[1];
+
+  var loadStripeJS = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var cardsResponse;
+      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);
+              _context.next = 5;
+              return (0, _utils.getAllCards)(jwt);
+
+            case 5:
+              cardsResponse = _context.sent;
+              setCards(cardsResponse);
+
+            case 7:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function loadStripeJS() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useEffect)(function () {
+    // loadStripeJS();
+    stripeApiKey.then(function () {
+      setStripeLoaded(true);
+      (0, _utils.getAllCards)(jwt).then(function (cardsResponse) {
+        setCards(cardsResponse);
+      });
+    });
+  }, []);
+  return stripeLoaded ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    isSelected: isSelected,
+    onClick: function onClick() {
+      return _onClick && _onClick();
+    },
+    children: [isSelected ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: _check_circle.default,
+      alt: "Seleccionado"
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+      children: "Tarjetas guardadas"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactStripeJs.Elements, {
+      stripe: stripeApiKey,
+      children: cards.map(function (card) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.Card, {
+          card: card,
+          selectedCard: selectedCard,
+          setSelectedCard: setSelectedCard,
+          setCard: setCard,
+          setStripe: setStripe
+        }, card.id);
+      })
+    })]
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {});
+};
+
+exports.CardSelector = CardSelector;

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

@@ -0,0 +1,22 @@
+"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 _styles = require("../StripeCardForm/styles");
+
+var _templateObject;
+
+var Container = (0, _styledComponents.default)(_styles.PaymentFormContainer)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  ", "\n  img {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n  }\n"])), function (_ref) {
+  var isSelected = _ref.isSelected;
+  return isSelected && "border-color: #8A6CAA;\n  background: #F7F7FC;";
+});
+exports.Container = Container;