contentoh-components-library 21.3.85 → 21.3.87

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

@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  flex: 1;\n  overflow: auto;\n\n  .data-container {\n    display: flex;\n    flex: 0%;\n    height: calc(100% - ", "px);\n    .image-data-panel {\n      width: 340px;\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    .product-information {\n      width: calc(100% - 341px);\n      display: flex;\n      flex-direction: column;\n\n      .services-information-container {\n        height: 100%;\n        overflow: auto;\n      }\n\n      .image-services {\n        aside {\n          display: grid;\n          grid-template-columns: repeat(auto-fill, 179px);\n          column-gap: 15px;\n          row-gap: 15px;\n          padding: 20px;\n        }\n      }\n\n      .commentary-box {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        padding: 10px;\n        padding-left: 0;\n\n        .commentary {\n          display: flex;\n          align-items: flex-end;\n\n          .input-container {\n            width: 500px;\n\n            .quill {\n              height: 100px;\n            }\n\n            & + * {\n              margin-left: 5px;\n            }\n          }\n\n          .buttons-box {\n            display: flex;\n            width: 210px;\n            flex-wrap: wrap;\n\n            .general-transparent-button {\n              & + * {\n                margin-top: 5px;\n              }\n            }\n\n            .general-transparent-button,\n            .general-green-button,\n            .general-button-disabled {\n              width: fit-content;\n              min-width: 201px;\n              height: 40px;\n            }\n          }\n        }\n      }\n\n      .feedback-box {\n        display: flex;\n      }\n    }\n  }\n  .container {\n    width: 100%;\n    height: 100%;\n    .dropzone {\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  flex: 1;\n  overflow: auto;\n\n  .data-container {\n    display: flex;\n    flex: 0%;\n    height: calc(100% - ", "px);\n    .image-data-panel {\n      width: 340px;\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    .product-information {\n      width: calc(100% - 341px);\n      display: flex;\n      flex-direction: column;\n\n      .services-information-container {\n        height: 100%;\n        overflow: auto;\n      }\n\n      .image-services {\n        aside {\n          display: grid;\n          grid-template-columns: repeat(auto-fill, 179px);\n          column-gap: 15px;\n          row-gap: 15px;\n          padding: 20px;\n        }\n      }\n\n      .commentary-box {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        padding: 10px;\n        padding-left: 0;\n\n        .commentary {\n          display: flex;\n          align-items: flex-end;\n\n          .input-container {\n            width: 500px;\n\n            .quill {\n              height: 100px;\n            }\n\n            & + * {\n              margin-left: 5px;\n            }\n          }\n\n          .buttons-box {\n            display: flex;\n            width: 210px;\n            flex-wrap: wrap;\n\n            .general-transparent-button {\n              & + * {\n                margin-top: 5px;\n              }\n            }\n\n            .general-transparent-button,\n            .general-green-button,\n            .general-button-disabled {\n              width: fit-content;\n              min-width: 201px;\n              height: 40px;\n            }\n          }\n        }\n      }\n\n      .feedback-box {\n        display: flex;\n      }\n    }\n  }\n  #modal-message-box {\n    width: 400px;\n    height: 100px;\n  }\n  .container {\n    width: 100%;\n    height: 100%;\n    .dropzone {\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), function (_ref) {
   var headerTop = _ref.headerTop;
   return headerTop;
 });

package/dist/components/pages/RetailerProductEdition/utils.js

@@ -5,14 +5,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getInputsData = exports.getAuditVersion = void 0;
+exports.translateService = exports.sendMessage = exports.getInputsData = exports.getAuditVersion = exports.createMessage = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
 
 var _axios = _interopRequireDefault(require("axios"));
 
+var _handle_http = require("../../../global-files/handle_http");
+
 var getAuditVersion = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(articleId, setState, token) {
     var auditResponse;
@@ -64,4 +68,59 @@ var getInputsData = function getInputsData(services, activeRetailer, setDatashee
   }
 };
 
-exports.getInputsData = getInputsData;
+exports.getInputsData = getInputsData;
+
+var translateService = function translateService(tab) {
+  switch (tab) {
+    case "description":
+    case "Descripción":
+      return "Descripciones";
+
+    case "datasheet":
+    case "Ficha técnica":
+      return "Fichas técnicas";
+
+    case "images":
+    case "Imágenes":
+      return "Imágenes";
+  }
+};
+
+exports.translateService = translateService;
+
+var createMessage = function createMessage(retailers, idRetailer, oldStatus, newStatus, service) {
+  var _ref2 = (retailers === null || retailers === void 0 ? void 0 : retailers.filter(function (ret) {
+    return ret.id === idRetailer;
+  })) || [],
+      _ref3 = (0, _slicedToArray2.default)(_ref2, 1),
+      retailer = _ref3[0];
+
+  return "".concat(translateService(service), " de ").concat(retailer.name, " |").concat(oldStatus, "| a |").concat(newStatus);
+};
+
+exports.createMessage = createMessage;
+
+var sendMessage = /*#__PURE__*/function () {
+  var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(data) {
+    var paramsBody, paramsHeader;
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            paramsBody = data.paramsBody, paramsHeader = data.paramsHeader;
+            return _context2.abrupt("return", (0, _handle_http.fetchPOST)(process.env.REACT_APP_CREATE_MESSAGES, paramsBody, paramsHeader));
+
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+
+  return function sendMessage(_x4) {
+    return _ref4.apply(this, arguments);
+  };
+}();
+
+exports.sendMessage = sendMessage;

package/dist/index.js

@@ -810,7 +810,7 @@ Object.keys(_index61).forEach(function (key) {
   });
 });
 
-var _index62 = require("./components/organisms/ChangePassword/index");
+var _index62 = require("./components/molecules/StripeCardForm/index");
 
 Object.keys(_index62).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -823,7 +823,7 @@ Object.keys(_index62).forEach(function (key) {
   });
 });
 
-var _index63 = require("./components/organisms/Fullplan/index");
+var _index63 = require("./components/molecules/StripeCardSelector/index");
 
 Object.keys(_index63).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -836,7 +836,7 @@ Object.keys(_index63).forEach(function (key) {
   });
 });
 
-var _index64 = require("./components/organisms/FullProductNameHeader/index");
+var _index64 = require("./components/organisms/ChangePassword/index");
 
 Object.keys(_index64).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -849,7 +849,7 @@ Object.keys(_index64).forEach(function (key) {
   });
 });
 
-var _index65 = require("./components/organisms/FullTabsMenu/index");
+var _index65 = require("./components/organisms/Fullplan/index");
 
 Object.keys(_index65).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -862,7 +862,7 @@ Object.keys(_index65).forEach(function (key) {
   });
 });
 
-var _index66 = require("./components/organisms/ImageDataTable/index");
+var _index66 = require("./components/organisms/FullProductNameHeader/index");
 
 Object.keys(_index66).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -875,7 +875,7 @@ Object.keys(_index66).forEach(function (key) {
   });
 });
 
-var _index67 = require("./components/organisms/ImagePreviewer/index");
+var _index67 = require("./components/organisms/FullTabsMenu/index");
 
 Object.keys(_index67).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -888,7 +888,7 @@ Object.keys(_index67).forEach(function (key) {
   });
 });
 
-var _index68 = require("./components/organisms/ImagesGroup/index");
+var _index68 = require("./components/organisms/ImageDataTable/index");
 
 Object.keys(_index68).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -901,7 +901,7 @@ Object.keys(_index68).forEach(function (key) {
   });
 });
 
-var _index69 = require("./components/organisms/InputGroup/index");
+var _index69 = require("./components/organisms/ImagePreviewer/index");
 
 Object.keys(_index69).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -914,7 +914,7 @@ Object.keys(_index69).forEach(function (key) {
   });
 });
 
-var _index70 = require("./components/organisms/ProductImageModal/index");
+var _index70 = require("./components/organisms/ImagesGroup/index");
 
 Object.keys(_index70).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -927,7 +927,7 @@ Object.keys(_index70).forEach(function (key) {
   });
 });
 
-var _index71 = require("./components/organisms/Chat/index");
+var _index71 = require("./components/organisms/InputGroup/index");
 
 Object.keys(_index71).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -940,7 +940,7 @@ Object.keys(_index71).forEach(function (key) {
   });
 });
 
-var _index72 = require("./components/organisms/Modal/index");
+var _index72 = require("./components/organisms/ProductImageModal/index");
 
 Object.keys(_index72).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -953,7 +953,7 @@ Object.keys(_index72).forEach(function (key) {
   });
 });
 
-var _index73 = require("./components/organisms/OrderDetail/index");
+var _index73 = require("./components/organisms/Chat/index");
 
 Object.keys(_index73).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -966,6 +966,32 @@ Object.keys(_index73).forEach(function (key) {
   });
 });
 
+var _index74 = require("./components/organisms/Modal/index");
+
+Object.keys(_index74).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index74[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index74[key];
+    }
+  });
+});
+
+var _index75 = require("./components/organisms/OrderDetail/index");
+
+Object.keys(_index75).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index75[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index75[key];
+    }
+  });
+});
+
 var _RangeCalendar = require("./components/organisms/RangeCalendar");
 
 Object.keys(_RangeCalendar).forEach(function (key) {
@@ -992,6 +1018,19 @@ Object.keys(_TableResizable).forEach(function (key) {
   });
 });
 
+var _index76 = require("./components/organisms/SideModal/index");
+
+Object.keys(_index76).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index76[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index76[key];
+    }
+  });
+});
+
 var _ChangePasswordLogin = require("./components/pages/ChangePasswordLogin");
 
 Object.keys(_ChangePasswordLogin).forEach(function (key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.3.85",
+  "version": "21.3.87",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",
@@ -16,6 +16,8 @@
     "@mui/material": "^5.12.0",
     "@mui/styled-engine-sc": "^5.12.0",
     "@storybook/addon-postcss": "^2.0.0",
+    "@stripe/react-stripe-js": "^2.1.1",
+    "@stripe/stripe-js": "^1.54.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

package/src/components/atoms/ButtonV2/styles.js

@@ -94,7 +94,7 @@ export const Container = styled.div`
       }
       &.pink {
         background-color: #e33aa9;
-        color: red;
+        color: white;
         border-color: #e33aa9;
         &:hover {
           background-color: #b42983;

package/src/components/atoms/Card/index.js

@@ -1,9 +1,42 @@
 import { Container } from "./styles";
+import { CheckBox } from "../CheckBox";
+import { CardCvcElement, useStripe } from "@stripe/react-stripe-js";
+
+export const Card = ({
+  card = {},
+  selectedCard,
+  setSelectedCard,
+  setCard,
+  setStripe,
+}) => {
+  const stripe = useStripe();
+
+  const handleOnChange = (e, cardId) => {
+    if (e.target.checked) {
+      setCard && setCard({ ...card, isNew: 0 });
+      setStripe && setStripe(stripe);
+      setSelectedCard && setSelectedCard(cardId);
+    } else {
+      setSelectedCard && setSelectedCard("");
+      setCard && setCard(null);
+    }
+  };
 
-export const Card = ({ cardIcon, altText }) => {
   return (
     <Container>
-      <img src={cardIcon} alt={altText} />
+      <div className="card-details">
+        <CheckBox
+          id={card.id}
+          label={
+            <>
+              <span className="brand-card">{card.brand}</span>
+              <span>{`**** **** **** ${card.last4}`}</span>
+            </>
+          }
+          checked={selectedCard === card.id}
+          onChange={(e) => handleOnChange(e, card.id)}
+        />
+      </div>
     </Container>
   );
 };

package/src/components/atoms/Card/styles.js

@@ -1,8 +1,44 @@
 import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
-img {
-    width: 100%;
-    margin:auto;
-}
-`;
+  display: flex;
+  cursor: pointer;
+
+  .card-details {
+    label {
+      cursor: pointer;
+      height: 25px;
+      p {
+        margin-left: 40px;
+        span {
+          & + * {
+            margin-left: 20px;
+          }
+        }
+      }
+    }
+    & + * {
+      margin-left: 20px;
+    }
+  }
+
+  .cvc-input {
+    display: flex;
+    align-items: center;
+    color: ${GlobalColors.s4};
+    font-family: ${FontFamily.AvenirNext};
+    font-size: 13px;
+
+    .card-input {
+      border: 1px solid #f0f0f0 !important;
+      border-radius: 5px;
+      padding: 3px;
+      width: 50px;
+    }
+  }
+
+  & + * {
+    margin-top: 15px;
+  }
+`;

package/src/components/atoms/CheckBox/index.js

@@ -7,6 +7,7 @@ export const CheckBox = ({
   isFilter,
   defaultChecked,
   disabled = false,
+  checked,
 }) => {
   return (
     <Container key={`check-${id}`}>
@@ -17,6 +18,7 @@ export const CheckBox = ({
         onChange={onChange}
         defaultChecked={defaultChecked}
         disabled={disabled}
+        checked={checked}
       />
       <label htmlFor={id}>
         {label && <p className={isFilter && "filter-text"}>{label}</p>}

package/src/components/atoms/InputFormatter/styles.js

@@ -37,5 +37,6 @@ export const Container = styled.div`
     font-family: ${FontFamily.AvenirNext};
     color: ${GlobalColors.deep_gray};
     text-align: right;
+    margin-top: 5px;
   }
-`;
+`;

package/src/components/atoms/TabSection/styles.js

@@ -10,7 +10,6 @@ export const Container = styled.div`
   width: 149px;
   padding-bottom: 5px;
   transition: 0.1s all;
-  cursor: pointer;
 
   &.active {
     font-size: 18px;

package/src/components/molecules/CarouselImagesLogin/index.js

@@ -27,7 +27,7 @@ export const CarouselImagesLogin = ({
       img2.src = images[i];
       const circulo_actual = Array.from(circulos).find((el) => el.id === i);
       Array.from(circulos).forEach((cir) => cir.classList.remove("resaltado"));
-      circulo_actual.classList.add("resaltado");
+      circulo_actual?.classList.add("resaltado");
       img1.classList.add("right");
       img2.classList.add("active");
       i++;

package/src/components/molecules/HeaderTop/index.js

@@ -4,10 +4,13 @@ import { Button } from "../../atoms/GeneralButton/index";
 import { useEffect, useRef } from "react";
 import { Chat } from "../../organisms/Chat";
 import auditIcon from "../../../../src/assets/images/generalButton/Icono AB.svg";
+import { useState } from "react";
+import { render } from "@testing-library/react";
 
 export const HeaderTop = ({
   setHeaderTop,
   withChat,
+  chatType,
   productSelected,
   token,
   auditableVersion,
@@ -16,16 +19,51 @@ export const HeaderTop = ({
   activeRetailer,
 }) => {
   const headerTop = useRef();
+  const [chat, setChat] = useState(null);
+  const [chatData, setChatData] = useState(null);
+
+  useEffect(() => {
+    if (activeRetailer.id && productSelected && token.length) {
+      setChatData({
+        id: productSelected?.article?.id_article || productSelected?.id_article,
+        version: productSelected?.version,
+        retailerId: activeRetailer?.id,
+        status: productSelected?.status,
+        userToken: token,
+      });
+    }
+  }, [activeRetailer, productSelected, token]);
+
+  useEffect(() => {
+    if (chatType) renderChat(chatType);
+  }, [chatData, chatType]);
 
   useEffect(() => {
     setHeaderTop && setHeaderTop(headerTop.current.clientHeight);
   }, []);
 
-  return (
-    <Container ref={headerTop}>
-      <ScreenHeader text="Edición de producto" />
-      <div className="buttons-container">
-        {withChat && (
+  const renderChat = (chatType) => {
+    switch (chatType) {
+      case "product_status":
+        chatData &&
+          setChat(
+            <Chat
+              chatType="product_status"
+              chatContainerType="popUp"
+              chatData={{
+                id: chatData?.id,
+                version: chatData?.version,
+                retailerId: chatData?.retailerId,
+                status: chatData?.status,
+                userToken: chatData?.userToken,
+              }}
+              size={18}
+              activeRetailer={activeRetailer}
+            />
+          );
+        break;
+      default:
+        setChat(
           <Chat
             chatType="merchant_product"
             chatContainerType="popUp"
@@ -37,8 +75,16 @@ export const HeaderTop = ({
             size={18}
             activeRetailer={activeRetailer}
           />
-        )}
+        );
+        break;
+    }
+  };
 
+  return (
+    <Container ref={headerTop}>
+      <ScreenHeader text="Edición de producto" />
+      <div className="buttons-container">
+        {withChat && chat}
         {isAuditor && auditableVersion && (
           <Button
             buttonType="general-white-button circular-button"

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

@@ -0,0 +1,13 @@
+import { StripeCardForm } from ".";
+
+export default {
+  title: "Components/molecules/StripeCardForm",
+  component: StripeCardForm,
+};
+
+const Template = (args) => <StripeCardForm {...args} />;
+export const StripeCardFormDefault = Template.bind({});
+StripeCardFormDefault.args = {
+  customerId: "cus_KuEt6R6vwmN09f",
+  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5ZjQzNjAwMC0wYzgyLTRjNzYtYWEzNi1kM2Q1NGJjZTZiMTMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4NTU2OTUyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2ODU1NzMxMjMsImlhdCI6MTY4NTU2OTUyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.EotcxmtkUpBxwlXa3bo25iLAmRcT0kj1G3PVITVB_0ZtF8UC19rJIMTNSc1hYkl8cbfCuB_vkjYCAxi4b2SOru5MdMTRhgNjcQTVbiwIYww-QdUWq0WSv84nW_HaRoxCJ8ezm-wBZgUTpcD3VFuynUICbODKKHUfxVdKdVoAM6GGE6ymSbO7-0C7ZumoWEqaZ22BF4G1H-JvLkR-tL5iqXa2N-QCnNoteFmHstBfH6Sp5UZhPav1VBEGRmwdFfUnC-Xc-aNeIFwgWCXMsOXFWbbmWeh0uNF-Btu-QEJ7VkCu4pbElqHWJKBYLCx1zqDBrKrsrNxyvQlxsJ9NSOae8Q",
+};

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

@@ -0,0 +1,42 @@
+import { Container } from "./styles";
+import { useEffect, useState } from "react";
+import { loadStripe } from "@stripe/stripe-js";
+import { Elements } from "@stripe/react-stripe-js";
+import { PaymentForm } from "./paymentForm";
+import { Loading } from "../../atoms/Loading";
+const stripeApiKey = loadStripe(`${process.env.REACT_APP_KEY_STRIPE}`);
+
+export const StripeCardForm = ({
+  setToken,
+  setCard,
+  setStripe,
+  setModalErrorCard,
+  setMsj,
+}) => {
+  const [stripeLoaded, setStripeLoaded] = useState(false);
+
+  const loadStripeJS = async () => {
+    await stripeApiKey;
+    setStripeLoaded(true);
+  };
+  useEffect(() => {
+    loadStripeJS();
+  }, []);
+
+  return stripeLoaded ? (
+    <Container>
+      <Elements stripe={stripeApiKey}>
+        <PaymentForm
+          labelForm={"Pago con tarjeta"}
+          setToken={setToken}
+          setCard={setCard}
+          setStripe={setStripe}
+          setModalErrorCard={setModalErrorCard}
+          setMsj={setMsj}
+        />
+      </Elements>
+    </Container>
+  ) : (
+    <Loading />
+  );
+};