contentoh-components-library 21.4.30 → 21.4.31

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

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RowItem = void 0;
+
+var _styles = require("./styles");
+
+var _ColumnItem = require("./ColumnItem");
+
+var _CheckBox = require("../../atoms/CheckBox");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var RowItem = function RowItem(_ref) {
+  var _ref$productsArray = _ref.productsArray,
+      productsArray = _ref$productsArray === void 0 ? [] : _ref$productsArray,
+      chkOnChange = _ref.chkOnChange,
+      onGridClick = _ref.onGridClick,
+      chkChecked = _ref.chkChecked;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: productsArray.map(function (_ref2, i) {
+      var cols = _ref2.cols,
+          product = _ref2.product,
+          id = _ref2.id;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "row-container",
+        onClick: function onClick(e) {
+          return onGridClick && onGridClick(e, product, i);
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "chk-container",
+          onClick: function onClick(e) {
+            e.stopPropagation();
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
+            id: "chk-" + id,
+            name: "chk-" + id,
+            className: "chk-item",
+            onChange: function onChange(e) {
+              return chkOnChange && chkOnChange(e, product);
+            },
+            defaultChecked: chkChecked && chkChecked(product)
+          })
+        }), cols.map(function (col, i) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColumnItem.ColumnItem, {
+            element: col.name,
+            flex: col.flex,
+            minWidth: col.minWidth
+          }, id + "-" + i);
+        })]
+      }, id);
+    })
+  });
+};
+
+exports.RowItem = RowItem;

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

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = exports.Column = 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)(["\n  height: calc(100% - 36px);\n  overflow: auto;\n  min-width: fit-content;\n\n  .row-container {\n    display: flex;\n    cursor: pointer;\n    &:hover {\n      background-color: #fafafa;\n    }\n\n    .chk-container {\n      width: 30px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      .chk-item {\n        width: 16px;\n        height: 16px;\n      }\n    }\n  }\n"])));
+
+exports.Container = Container;
+
+var Column = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: ", ";\n  min-width: ", "px;\n  text-align: center;\n  color: #262626;\n  font-family: ", ";\n  font-size: 12px;\n  line-height: 16px;\n  padding: 10px 5px;\n  display: flex;\n  justify-content: center;\n"])), function (_ref) {
+  var flex = _ref.flex;
+  return flex ? flex : 1;
+}, function (_ref2) {
+  var minWidth = _ref2.minWidth;
+  return minWidth ? minWidth : 100;
+}, _variables.FontFamily.Lato);
+
+exports.Column = Column;

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;

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

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAllCards = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var getAllCards = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(jwt) {
+    var response, stripeCards;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return (0, _axios.default)({
+              method: "get",
+              url: "".concat(process.env.REACT_APP_CARDS_ENDPOINT),
+              headers: {
+                Authorization: jwt
+              }
+            });
+
+          case 3:
+            response = _context.sent;
+            stripeCards = JSON.parse(response.data.body).data;
+            return _context.abrupt("return", stripeCards);
+
+          case 8:
+            _context.prev = 8;
+            _context.t0 = _context["catch"](0);
+            console.log(_context.t0);
+
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[0, 8]]);
+  }));
+
+  return function getAllCards(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+exports.getAllCards = getAllCards;