contentoh-components-library 21.3.72 → 21.3.74

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

@@ -18,11 +18,14 @@ var Card = function Card(_ref) {
       card = _ref$card === void 0 ? {} : _ref$card,
       selectedCard = _ref.selectedCard,
       setSelectedCard = _ref.setSelectedCard,
-      setCard = _ref.setCard;
+      setCard = _ref.setCard,
+      setStripe = _ref.setStripe;
+  var stripe = (0, _reactStripeJs.useStripe)();
 
   var handleIputChange = function handleIputChange(event) {
     if (event.complete) {
       setCard && setCard(card);
+      setStripe && setStripe(stripe);
     }
   };
 

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

@@ -31,7 +31,8 @@ var stripeApiKey = (0, _stripeJs.loadStripe)("".concat(process.env.REACT_APP_KEY
 
 var StripeCardForm = function StripeCardForm(_ref) {
   var setToken = _ref.setToken,
-      setCard = _ref.setCard;
+      setCard = _ref.setCard,
+      setStripe = _ref.setStripe;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -72,7 +73,8 @@ var StripeCardForm = function StripeCardForm(_ref) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_paymentForm.PaymentForm, {
         labelForm: "Pago con tarjeta",
         setToken: setToken,
-        setCard: setCard
+        setCard: setCard,
+        setStripe: setStripe
       })
     })
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {});

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

@@ -27,7 +27,8 @@ 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;
+      setCard = _ref.setCard,
+      setStripe = _ref.setStripe;
   var stripe = (0, _reactStripeJs.useStripe)();
   var elements = (0, _reactStripeJs.useElements)();
 
@@ -128,6 +129,7 @@ var PaymentForm = function PaymentForm(_ref) {
       return val;
     });
     allValuesComplete ? createToken() : "le falta algo oiga";
+    setStripe && setStripe(stripe);
   }, [valuesComplete]);
 
   var handleCardNameChange = function handleCardNameChange(event) {

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

@@ -33,7 +33,8 @@ var stripeApiKey = (0, _stripeJs.loadStripe)("".concat(process.env.REACT_APP_KEY
 
 var CardSelector = function CardSelector(_ref) {
   var jwt = _ref.jwt,
-      setCard = _ref.setCard;
+      setCard = _ref.setCard,
+      setStripe = _ref.setStripe;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -95,7 +96,8 @@ var CardSelector = function CardSelector(_ref) {
           card: card,
           selectedCard: selectedCard,
           setSelectedCard: setSelectedCard,
-          setCard: setCard
+          setCard: setCard,
+          setStripe: setStripe
         }, card.id);
       })
     })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.3.72",
+  "version": "21.3.74",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

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

@@ -1,11 +1,19 @@
 import { Container } from "./styles";
 import { CheckBox } from "../CheckBox";
-import { CardCvcElement } from "@stripe/react-stripe-js";
+import { CardCvcElement, useStripe } from "@stripe/react-stripe-js";
 
-export const Card = ({ card = {}, selectedCard, setSelectedCard, setCard }) => {
+export const Card = ({
+  card = {},
+  selectedCard,
+  setSelectedCard,
+  setCard,
+  setStripe,
+}) => {
+  const stripe = useStripe();
   const handleIputChange = (event) => {
     if (event.complete) {
       setCard && setCard(card);
+      setStripe && setStripe(stripe);
     }
   };
   const handleOnChange = (e, cardId) => {

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

@@ -6,7 +6,7 @@ import { PaymentForm } from "./paymentForm";
 import { Loading } from "../../atoms/Loading";
 const stripeApiKey = loadStripe(`${process.env.REACT_APP_KEY_STRIPE}`);
 
-export const StripeCardForm = ({ setToken, setCard }) => {
+export const StripeCardForm = ({ setToken, setCard, setStripe }) => {
   const [stripeLoaded, setStripeLoaded] = useState(false);
 
   const loadStripeJS = async () => {
@@ -24,6 +24,7 @@ export const StripeCardForm = ({ setToken, setCard }) => {
           labelForm={"Pago con tarjeta"}
           setToken={setToken}
           setCard={setCard}
+          setStripe={setStripe}
         />
       </Elements>
     </Container>

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

@@ -13,6 +13,7 @@ export const PaymentForm = ({
   labelForm = "Pago con tarjeta",
   setToken,
   setCard,
+  setStripe,
 }) => {
   const stripe = useStripe();
   const elements = useElements();
@@ -73,8 +74,8 @@ export const PaymentForm = ({
   useEffect(() => {
     const valuesArray = Object.values(valuesComplete);
     const allValuesComplete = valuesArray?.every((val) => val);
-
     allValuesComplete ? createToken() : "le falta algo oiga";
+    setStripe && setStripe(stripe);
   }, [valuesComplete]);
 
   const handleCardNameChange = (event) => {

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

@@ -7,7 +7,7 @@ import { Card } from "../../atoms/Card";
 import { Loading } from "../../atoms/Loading";
 const stripeApiKey = loadStripe(`${process.env.REACT_APP_KEY_STRIPE}`);
 
-export const CardSelector = ({ jwt, setCard }) => {
+export const CardSelector = ({ jwt, setCard, setStripe }) => {
   const [stripeLoaded, setStripeLoaded] = useState(false);
   const [cards, setCards] = useState([]);
   const [selectedCard, setSelectedCard] = useState("");
@@ -33,6 +33,7 @@ export const CardSelector = ({ jwt, setCard }) => {
             selectedCard={selectedCard}
             setSelectedCard={setSelectedCard}
             setCard={setCard}
+            setStripe={setStripe}
           />
         ))}
       </Elements>