@pelcro/react-pelcro-js 4.0.0-alpha.50 → 4.0.0-alpha.52

package/dist/index.cjs.js

@@ -24213,6 +24213,113 @@ const PaymentMethodContainerWithoutStripe = ({
     }
   };
 
+  const confirmStripeIntentSetup = (response, flow, paymentMethodId) => {
+    var _response$data2;
+
+    const setupIntent = (_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : _response$data2.setup_intent;
+
+    if (setupIntent !== null && setupIntent !== void 0 && setupIntent.client_secret) {
+      var _response$data3, _response$data3$sourc;
+
+      stripe.confirmCardSetup(setupIntent.client_secret, {
+        payment_method: (_response$data3 = response.data) === null || _response$data3 === void 0 ? void 0 : (_response$data3$sourc = _response$data3.source) === null || _response$data3$sourc === void 0 ? void 0 : _response$data3$sourc.object_id
+      }).then(res => {
+        var _response$data4;
+
+        if (res.error) {
+          dispatch({
+            type: LOADING,
+            payload: false
+          });
+          onFailure(res.error);
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(res.error)
+            }
+          });
+        }
+
+        if (flow === "create") {
+          dispatch({
+            type: DISABLE_SUBMIT,
+            payload: false
+          });
+          dispatch({
+            type: LOADING,
+            payload: false
+          });
+          dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "success",
+              content: t("messages.sourceCreated")
+            }
+          });
+          onSuccess(res);
+          return;
+        }
+
+        if (flow === "update") {
+          dispatch({
+            type: DISABLE_SUBMIT,
+            payload: false
+          });
+          dispatch({
+            type: LOADING,
+            payload: false
+          });
+          dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "success",
+              content: t("messages.sourceUpdated")
+            }
+          });
+          onSuccess(res);
+          return;
+        }
+
+        if (flow === "replace") {
+          setTimeout(() => {
+            window.Pelcro.paymentMethods.deletePaymentMethod({
+              auth_token: window.Pelcro.user.read().auth_token,
+              payment_method_id: paymentMethodId
+            }, (err, res) => {
+              dispatch({
+                type: DISABLE_SUBMIT,
+                payload: false
+              });
+              dispatch({
+                type: LOADING,
+                payload: false
+              });
+
+              if (err) {
+                onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+                return dispatch({
+                  type: SHOW_ALERT,
+                  payload: {
+                    type: "error",
+                    content: getErrorMessages(err)
+                  }
+                });
+              }
+
+              onSuccess(res);
+            });
+          }, 2000);
+          return;
+        }
+
+        return handlePayment(response === null || response === void 0 ? void 0 : (_response$data4 = response.data) === null || _response$data4 === void 0 ? void 0 : _response$data4.source);
+      });
+    } else {
+      onSuccess(response);
+    }
+  };
+
   const subscribe = (stripeSource, state, dispatch) => {
     const {
       couponCode
@@ -24496,25 +24603,24 @@ const PaymentMethodContainerWithoutStripe = ({
       source,
       error
     }) => {
-      var _source$card2;
-
       if (error) {
         return handlePaymentError(error);
       } // We don't support source creation for 3D secure yet
+      // if (source?.card?.three_d_secure === "required") {
+      //   return handlePaymentError({
+      //     error: {
+      //       message: t("messages.cardAuthNotSupported")
+      //     }
+      //   });
+      // }
 
 
-      if ((source === null || source === void 0 ? void 0 : (_source$card2 = source.card) === null || _source$card2 === void 0 ? void 0 : _source$card2.three_d_secure) === "required") {
-        return handlePaymentError({
-          error: {
-            message: t("messages.cardAuthNotSupported")
-          }
-        });
-      }
-
       window.Pelcro.paymentMethods.create({
         auth_token: window.Pelcro.user.read().auth_token,
         token: source.id
       }, (err, res) => {
+        var _res$data, _res$data$setup_inten, _res$data2, _res$data2$setup_inte;
+
         dispatch({
           type: DISABLE_SUBMIT,
           payload: false
@@ -24535,14 +24641,18 @@ const PaymentMethodContainerWithoutStripe = ({
           });
         }
 
-        dispatch({
-          type: SHOW_ALERT,
-          payload: {
-            type: "success",
-            content: t("messages.sourceCreated")
-          }
-        });
-        onSuccess(res);
+        if (((_res$data = res.data) === null || _res$data === void 0 ? void 0 : (_res$data$setup_inten = _res$data.setup_intent) === null || _res$data$setup_inten === void 0 ? void 0 : _res$data$setup_inten.status) === "requires_action" || ((_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : (_res$data2$setup_inte = _res$data2.setup_intent) === null || _res$data2$setup_inte === void 0 ? void 0 : _res$data2$setup_inte.status) === "requires_confirmation") {
+          confirmStripeIntentSetup(res, "create");
+        } else {
+          dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "success",
+              content: t("messages.sourceCreated")
+            }
+          });
+          onSuccess(res);
+        }
       });
     });
   };
@@ -24564,6 +24674,8 @@ const PaymentMethodContainerWithoutStripe = ({
       exp_year: year,
       is_default: isDefault
     }, (err, res) => {
+      var _res$data3, _res$data3$setup_inte, _res$data4, _res$data4$setup_inte;
+
       dispatch({
         type: DISABLE_SUBMIT,
         payload: false
@@ -24584,14 +24696,18 @@ const PaymentMethodContainerWithoutStripe = ({
         });
       }
 
-      dispatch({
-        type: SHOW_ALERT,
-        payload: {
-          type: "success",
-          content: t("messages.sourceUpdated")
-        }
-      });
-      onSuccess(res);
+      if (((_res$data3 = res.data) === null || _res$data3 === void 0 ? void 0 : (_res$data3$setup_inte = _res$data3.setup_intent) === null || _res$data3$setup_inte === void 0 ? void 0 : _res$data3$setup_inte.status) === "requires_action" || ((_res$data4 = res.data) === null || _res$data4 === void 0 ? void 0 : (_res$data4$setup_inte = _res$data4.setup_intent) === null || _res$data4$setup_inte === void 0 ? void 0 : _res$data4$setup_inte.status) === "requires_confirmation") {
+        confirmStripeIntentSetup(res, "update");
+      } else {
+        dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "success",
+            content: t("messages.sourceUpdated")
+          }
+        });
+        onSuccess(res);
+      }
     });
   };
 
@@ -24605,25 +24721,24 @@ const PaymentMethodContainerWithoutStripe = ({
       source,
       error
     }) => {
-      var _source$card3;
-
       if (error) {
         return handlePaymentError(error);
       } // We don't support source creation for 3D secure yet
+      // if (source?.card?.three_d_secure === "required") {
+      //   return handlePaymentError({
+      //     error: {
+      //       message: t("messages.cardAuthNotSupported")
+      //     }
+      //   });
+      // }
 
 
-      if ((source === null || source === void 0 ? void 0 : (_source$card3 = source.card) === null || _source$card3 === void 0 ? void 0 : _source$card3.three_d_secure) === "required") {
-        return handlePaymentError({
-          error: {
-            message: t("messages.cardAuthNotSupported")
-          }
-        });
-      }
-
       window.Pelcro.paymentMethods.create({
         auth_token: window.Pelcro.user.read().auth_token,
         token: source.id
       }, (err, res) => {
+        var _res$data5, _res$data5$setup_inte, _res$data6, _res$data6$setup_inte;
+
         if (err) {
           onFailure(err);
           return dispatch({
@@ -24635,7 +24750,9 @@ const PaymentMethodContainerWithoutStripe = ({
           });
         }
 
-        if (res) {
+        if (((_res$data5 = res.data) === null || _res$data5 === void 0 ? void 0 : (_res$data5$setup_inte = _res$data5.setup_intent) === null || _res$data5$setup_inte === void 0 ? void 0 : _res$data5$setup_inte.status) === "requires_action" || ((_res$data6 = res.data) === null || _res$data6 === void 0 ? void 0 : (_res$data6$setup_inte = _res$data6.setup_intent) === null || _res$data6$setup_inte === void 0 ? void 0 : _res$data6$setup_inte.status) === "requires_confirmation") {
+          confirmStripeIntentSetup(res, "replace", paymentMethodId);
+        } else {
           setTimeout(() => {
             window.Pelcro.paymentMethods.deletePaymentMethod({
               auth_token: window.Pelcro.user.read().auth_token,
@@ -24771,14 +24888,14 @@ const PaymentMethodContainerWithoutStripe = ({
         coupon_code: state === null || state === void 0 ? void 0 : state.couponCode,
         address_id: selectedAddressId
       }, (error, res) => {
-        var _res$data, _res$data2;
+        var _res$data7, _res$data8;
 
         if (error) {
           return reject(error);
         }
 
-        const taxAmount = (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.taxes;
-        const totalAmountWithTax = (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.total;
+        const taxAmount = (_res$data7 = res.data) === null || _res$data7 === void 0 ? void 0 : _res$data7.taxes;
+        const totalAmountWithTax = (_res$data8 = res.data) === null || _res$data8 === void 0 ? void 0 : _res$data8.total;
         resolve({
           totalAmountWithTax,
           taxAmount
@@ -26712,7 +26829,7 @@ function PaymentMethodView({
   const isUserLastName = Boolean(window.Pelcro.user.read().last_name);
   const isUserPhone = Boolean(window.Pelcro.user.read().phone);
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-flex plc-flex-col plc-items-center plc-mt-4 sm:plc-px-8 pelcro-payment-block"
+    className: "plc-flex plc-flex-col plc-items-center plc-mt-4 plc-px-8 md:plc-px-0 pelcro-payment-block"
   }, order && /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-w-full plc-p-2 plc-mb-4 plc-font-semibold plc-text-center plc-text-gray-900 plc-bg-gray-100 plc-border plc-border-gray-200"
   }, /*#__PURE__*/React__default['default'].createElement("p", {

package/dist/index.esm.js

@@ -24183,6 +24183,113 @@ const PaymentMethodContainerWithoutStripe = ({
     }
   };
 
+  const confirmStripeIntentSetup = (response, flow, paymentMethodId) => {
+    var _response$data2;
+
+    const setupIntent = (_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : _response$data2.setup_intent;
+
+    if (setupIntent !== null && setupIntent !== void 0 && setupIntent.client_secret) {
+      var _response$data3, _response$data3$sourc;
+
+      stripe.confirmCardSetup(setupIntent.client_secret, {
+        payment_method: (_response$data3 = response.data) === null || _response$data3 === void 0 ? void 0 : (_response$data3$sourc = _response$data3.source) === null || _response$data3$sourc === void 0 ? void 0 : _response$data3$sourc.object_id
+      }).then(res => {
+        var _response$data4;
+
+        if (res.error) {
+          dispatch({
+            type: LOADING,
+            payload: false
+          });
+          onFailure(res.error);
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(res.error)
+            }
+          });
+        }
+
+        if (flow === "create") {
+          dispatch({
+            type: DISABLE_SUBMIT,
+            payload: false
+          });
+          dispatch({
+            type: LOADING,
+            payload: false
+          });
+          dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "success",
+              content: t("messages.sourceCreated")
+            }
+          });
+          onSuccess(res);
+          return;
+        }
+
+        if (flow === "update") {
+          dispatch({
+            type: DISABLE_SUBMIT,
+            payload: false
+          });
+          dispatch({
+            type: LOADING,
+            payload: false
+          });
+          dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "success",
+              content: t("messages.sourceUpdated")
+            }
+          });
+          onSuccess(res);
+          return;
+        }
+
+        if (flow === "replace") {
+          setTimeout(() => {
+            window.Pelcro.paymentMethods.deletePaymentMethod({
+              auth_token: window.Pelcro.user.read().auth_token,
+              payment_method_id: paymentMethodId
+            }, (err, res) => {
+              dispatch({
+                type: DISABLE_SUBMIT,
+                payload: false
+              });
+              dispatch({
+                type: LOADING,
+                payload: false
+              });
+
+              if (err) {
+                onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+                return dispatch({
+                  type: SHOW_ALERT,
+                  payload: {
+                    type: "error",
+                    content: getErrorMessages(err)
+                  }
+                });
+              }
+
+              onSuccess(res);
+            });
+          }, 2000);
+          return;
+        }
+
+        return handlePayment(response === null || response === void 0 ? void 0 : (_response$data4 = response.data) === null || _response$data4 === void 0 ? void 0 : _response$data4.source);
+      });
+    } else {
+      onSuccess(response);
+    }
+  };
+
   const subscribe = (stripeSource, state, dispatch) => {
     const {
       couponCode
@@ -24466,25 +24573,24 @@ const PaymentMethodContainerWithoutStripe = ({
       source,
       error
     }) => {
-      var _source$card2;
-
       if (error) {
         return handlePaymentError(error);
       } // We don't support source creation for 3D secure yet
+      // if (source?.card?.three_d_secure === "required") {
+      //   return handlePaymentError({
+      //     error: {
+      //       message: t("messages.cardAuthNotSupported")
+      //     }
+      //   });
+      // }
 
 
-      if ((source === null || source === void 0 ? void 0 : (_source$card2 = source.card) === null || _source$card2 === void 0 ? void 0 : _source$card2.three_d_secure) === "required") {
-        return handlePaymentError({
-          error: {
-            message: t("messages.cardAuthNotSupported")
-          }
-        });
-      }
-
       window.Pelcro.paymentMethods.create({
         auth_token: window.Pelcro.user.read().auth_token,
         token: source.id
       }, (err, res) => {
+        var _res$data, _res$data$setup_inten, _res$data2, _res$data2$setup_inte;
+
         dispatch({
           type: DISABLE_SUBMIT,
           payload: false
@@ -24505,14 +24611,18 @@ const PaymentMethodContainerWithoutStripe = ({
           });
         }
 
-        dispatch({
-          type: SHOW_ALERT,
-          payload: {
-            type: "success",
-            content: t("messages.sourceCreated")
-          }
-        });
-        onSuccess(res);
+        if (((_res$data = res.data) === null || _res$data === void 0 ? void 0 : (_res$data$setup_inten = _res$data.setup_intent) === null || _res$data$setup_inten === void 0 ? void 0 : _res$data$setup_inten.status) === "requires_action" || ((_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : (_res$data2$setup_inte = _res$data2.setup_intent) === null || _res$data2$setup_inte === void 0 ? void 0 : _res$data2$setup_inte.status) === "requires_confirmation") {
+          confirmStripeIntentSetup(res, "create");
+        } else {
+          dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "success",
+              content: t("messages.sourceCreated")
+            }
+          });
+          onSuccess(res);
+        }
       });
     });
   };
@@ -24534,6 +24644,8 @@ const PaymentMethodContainerWithoutStripe = ({
       exp_year: year,
       is_default: isDefault
     }, (err, res) => {
+      var _res$data3, _res$data3$setup_inte, _res$data4, _res$data4$setup_inte;
+
       dispatch({
         type: DISABLE_SUBMIT,
         payload: false
@@ -24554,14 +24666,18 @@ const PaymentMethodContainerWithoutStripe = ({
         });
       }
 
-      dispatch({
-        type: SHOW_ALERT,
-        payload: {
-          type: "success",
-          content: t("messages.sourceUpdated")
-        }
-      });
-      onSuccess(res);
+      if (((_res$data3 = res.data) === null || _res$data3 === void 0 ? void 0 : (_res$data3$setup_inte = _res$data3.setup_intent) === null || _res$data3$setup_inte === void 0 ? void 0 : _res$data3$setup_inte.status) === "requires_action" || ((_res$data4 = res.data) === null || _res$data4 === void 0 ? void 0 : (_res$data4$setup_inte = _res$data4.setup_intent) === null || _res$data4$setup_inte === void 0 ? void 0 : _res$data4$setup_inte.status) === "requires_confirmation") {
+        confirmStripeIntentSetup(res, "update");
+      } else {
+        dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "success",
+            content: t("messages.sourceUpdated")
+          }
+        });
+        onSuccess(res);
+      }
     });
   };
 
@@ -24575,25 +24691,24 @@ const PaymentMethodContainerWithoutStripe = ({
       source,
       error
     }) => {
-      var _source$card3;
-
       if (error) {
         return handlePaymentError(error);
       } // We don't support source creation for 3D secure yet
+      // if (source?.card?.three_d_secure === "required") {
+      //   return handlePaymentError({
+      //     error: {
+      //       message: t("messages.cardAuthNotSupported")
+      //     }
+      //   });
+      // }
 
 
-      if ((source === null || source === void 0 ? void 0 : (_source$card3 = source.card) === null || _source$card3 === void 0 ? void 0 : _source$card3.three_d_secure) === "required") {
-        return handlePaymentError({
-          error: {
-            message: t("messages.cardAuthNotSupported")
-          }
-        });
-      }
-
       window.Pelcro.paymentMethods.create({
         auth_token: window.Pelcro.user.read().auth_token,
         token: source.id
       }, (err, res) => {
+        var _res$data5, _res$data5$setup_inte, _res$data6, _res$data6$setup_inte;
+
         if (err) {
           onFailure(err);
           return dispatch({
@@ -24605,7 +24720,9 @@ const PaymentMethodContainerWithoutStripe = ({
           });
         }
 
-        if (res) {
+        if (((_res$data5 = res.data) === null || _res$data5 === void 0 ? void 0 : (_res$data5$setup_inte = _res$data5.setup_intent) === null || _res$data5$setup_inte === void 0 ? void 0 : _res$data5$setup_inte.status) === "requires_action" || ((_res$data6 = res.data) === null || _res$data6 === void 0 ? void 0 : (_res$data6$setup_inte = _res$data6.setup_intent) === null || _res$data6$setup_inte === void 0 ? void 0 : _res$data6$setup_inte.status) === "requires_confirmation") {
+          confirmStripeIntentSetup(res, "replace", paymentMethodId);
+        } else {
           setTimeout(() => {
             window.Pelcro.paymentMethods.deletePaymentMethod({
               auth_token: window.Pelcro.user.read().auth_token,
@@ -24741,14 +24858,14 @@ const PaymentMethodContainerWithoutStripe = ({
         coupon_code: state === null || state === void 0 ? void 0 : state.couponCode,
         address_id: selectedAddressId
       }, (error, res) => {
-        var _res$data, _res$data2;
+        var _res$data7, _res$data8;
 
         if (error) {
           return reject(error);
         }
 
-        const taxAmount = (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.taxes;
-        const totalAmountWithTax = (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.total;
+        const taxAmount = (_res$data7 = res.data) === null || _res$data7 === void 0 ? void 0 : _res$data7.taxes;
+        const totalAmountWithTax = (_res$data8 = res.data) === null || _res$data8 === void 0 ? void 0 : _res$data8.total;
         resolve({
           totalAmountWithTax,
           taxAmount
@@ -26682,7 +26799,7 @@ function PaymentMethodView({
   const isUserLastName = Boolean(window.Pelcro.user.read().last_name);
   const isUserPhone = Boolean(window.Pelcro.user.read().phone);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-flex plc-flex-col plc-items-center plc-mt-4 sm:plc-px-8 pelcro-payment-block"
+    className: "plc-flex plc-flex-col plc-items-center plc-mt-4 plc-px-8 md:plc-px-0 pelcro-payment-block"
   }, order && /*#__PURE__*/React__default.createElement("div", {
     className: "plc-w-full plc-p-2 plc-mb-4 plc-font-semibold plc-text-center plc-text-gray-900 plc-bg-gray-100 plc-border plc-border-gray-200"
   }, /*#__PURE__*/React__default.createElement("p", {

package/dist/pelcro.css

@@ -3966,6 +3966,11 @@ apple-pay-button {
   .pelcro-root .md\:plc-p-8{
     padding: 2rem;
   }
+
+  .pelcro-root .md\:plc-px-0{
+    padding-left: 0px;
+    padding-right: 0px;
+  }
 }
 
 @media (min-width: 1024px){

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pelcro/react-pelcro-js",
   "description": "Pelcro's React UI Elements",
-  "version": "4.0.0-alpha.50",
+  "version": "4.0.0-alpha.52",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",