@pelcro/react-pelcro-js 3.26.0-beta.43 → 3.26.0-beta.45

package/dist/index.cjs.js

@@ -3251,7 +3251,8 @@ var validation$3 = {
 	confirmPassword: "Confirm password is required.",
 	enterFirstName: "First name is required.",
 	enterLastName: "Last name is required.",
-	enterPhone: "Phone number is required."
+	enterPhone: "Phone number is required.",
+	enterFieldName: "{{fieldName}} is required."
 };
 var buttons$n = {
 	account: "My account",
@@ -4204,7 +4205,8 @@ var validation$2 = {
 	confirmPassword: "Confirmer le mot de passe requis.",
 	enterFirstName: "Le prénom est requis.",
 	enterLastName: "Le nom de famille est requis.",
-	enterPhone: "Le numéro de téléphone est requis."
+	enterPhone: "Le numéro de téléphone est requis.",
+	enterFieldName: "{{fieldName}} est requis."
 };
 var buttons$h = {
 	account: "Accès abonné(e)s",
@@ -5147,7 +5149,8 @@ var validation$1 = {
 	enterPassword: "비밀번호는 필수 항목입니다.",
 	enterFirstName: "이름은 필수 항목입니다.",
 	enterLastName: "성은 필수 항목입니다.",
-	enterPhone: "전화번호는 필수 항목입니다."
+	enterPhone: "전화번호는 필수 항목입니다.",
+	enterFieldName: "{{fieldName}} 필수."
 };
 var buttons$b = {
 	account: "내 계정",
@@ -6196,7 +6199,8 @@ var validation = {
 	confirmPassword: "Confirmar la contraseña es obligatorio.",
 	enterFirstName: "El nombre es obligatorio.",
 	enterLastName: "El apellido es obligatorio.",
-	enterPhone: "El número de teléfono es obligatorio."
+	enterPhone: "El número de teléfono es obligatorio.",
+	enterFieldName: "{{fieldName}} es obligatorio."
 };
 var buttons$5 = {
 	account: "Mi cuenta",
@@ -12890,6 +12894,7 @@ const SET_FIRST_NAME_ERROR = "SET_FIRST_NAME_ERROR";
 const SET_LAST_NAME_ERROR = "SET_LAST_NAME_ERROR";
 const SET_PHONE_ERROR = "SET_PHONE_ERROR";
 const SET_TEXT_FIELD = "SET_TEXT_FIELD";
+const SET_TEXT_FIELD_ERROR = "SET_TEXT_FIELD_ERROR";
 const SET_MONTH = "SET_MONTH";
 const SET_YEAR = "SET_YEAR";
 const SET_TOKEN = "SET_TOKEN";
@@ -13839,6 +13844,11 @@ const RegisterContainer = _ref => {
           phoneError: action.payload,
           phone: null
         });
+      case SET_TEXT_FIELD_ERROR:
+        return lib_7({
+          ...state,
+          ...action.payload
+        });
       case SET_CONFIRM_PASSWORD_ERROR:
         return lib_7({
           ...state,
@@ -14989,26 +14999,69 @@ function TextInput(_ref) {
     fieldName,
     ...otherProps
   } = _ref;
+  const {
+    t
+  } = useTranslation("common");
   const {
     dispatch,
-    state
+    state: {
+      [fieldName]: stateFieldName,
+      [fieldName + "Error"]: fieldNameError,
+      loading
+    }
   } = React.useContext(store);
-  const handleInputChange = value => {
-    dispatch({
-      type: SET_TEXT_FIELD,
-      payload: {
-        [fieldName]: value
+  const [fieldNameState, setFieldNameState] = React.useState(stateFieldName);
+  const [finishedTyping, setFinishedTyping] = React.useState(false);
+  const handleInputChange = React.useCallback(value => {
+    setFieldNameState(value);
+    if (finishedTyping) {
+      if (fieldNameState !== null && fieldNameState !== void 0 && fieldNameState.length) {
+        dispatch({
+          type: SET_TEXT_FIELD,
+          payload: {
+            [fieldName]: value,
+            [fieldName + "Error"]: null
+          }
+        });
+      } else {
+        if (otherProps.required) {
+          dispatch({
+            type: SET_TEXT_FIELD_ERROR,
+            payload: {
+              [fieldName + "Error"]: t("validation.enterFieldName", {
+                fieldName: otherProps.label
+              }),
+              [fieldName]: null
+            }
+          });
+        } else {
+          dispatch({
+            type: SET_TEXT_FIELD,
+            payload: {
+              [fieldName]: value,
+              [fieldName + "Error"]: null
+            }
+          });
+        }
       }
-    });
-  };
-  if (state.loading) {
+    }
+  }, [dispatch, fieldNameState, finishedTyping] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  React.useEffect(() => {
+    handleInputChange(fieldNameState);
+  }, [finishedTyping, fieldNameState, handleInputChange]);
+  if (loading) {
     return /*#__PURE__*/React__default['default'].createElement(Loader, null);
   }
   return /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
     type: "text",
-    value: state[fieldName],
+    error: fieldNameError,
+    value: fieldNameState,
     defaultValue: (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : (_window$Pelcro$user$r2 = _window$Pelcro$user$r.metadata) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2[fieldName],
-    onChange: e => handleInputChange(e.target.value)
+    onChange: e => handleInputChange(e.target.value),
+    onBlur: () => setFinishedTyping(true),
+    onFocus: () => setFinishedTyping(false)
   }, otherProps));
 }
 
@@ -19615,6 +19668,102 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       onSuccess(response);
     }
   };
+  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
@@ -19900,7 +20049,6 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     return stripe.createSource({
       type: "card"
     }).then(_ref8 => {
-      var _source$card2;
       let {
         source,
         error
@@ -19910,17 +20058,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       }
 
       // We don't support source creation for 3D secure yet
-      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")
-          }
-        });
-      }
+      // if (source?.card?.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
@@ -19939,14 +20089,18 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             }
           });
         }
-        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);
+        }
       });
     });
   };
@@ -19967,6 +20121,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       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
@@ -19985,14 +20140,18 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           }
         });
       }
-      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);
+      }
     });
   };
   const replacePaymentSource = (state, dispatch) => {
@@ -20002,7 +20161,6 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     return stripe.createSource({
       type: "card"
     }).then(_ref9 => {
-      var _source$card3;
       let {
         source,
         error
@@ -20012,17 +20170,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       }
 
       // We don't support source creation for 3D secure yet
-      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")
-          }
-        });
-      }
+      // if (source?.card?.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({
@@ -20033,7 +20193,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             }
           });
         }
-        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,
@@ -20196,12 +20358,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         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

package/dist/index.esm.js

@@ -3221,7 +3221,8 @@ var validation$3 = {
 	confirmPassword: "Confirm password is required.",
 	enterFirstName: "First name is required.",
 	enterLastName: "Last name is required.",
-	enterPhone: "Phone number is required."
+	enterPhone: "Phone number is required.",
+	enterFieldName: "{{fieldName}} is required."
 };
 var buttons$n = {
 	account: "My account",
@@ -4174,7 +4175,8 @@ var validation$2 = {
 	confirmPassword: "Confirmer le mot de passe requis.",
 	enterFirstName: "Le prénom est requis.",
 	enterLastName: "Le nom de famille est requis.",
-	enterPhone: "Le numéro de téléphone est requis."
+	enterPhone: "Le numéro de téléphone est requis.",
+	enterFieldName: "{{fieldName}} est requis."
 };
 var buttons$h = {
 	account: "Accès abonné(e)s",
@@ -5117,7 +5119,8 @@ var validation$1 = {
 	enterPassword: "비밀번호는 필수 항목입니다.",
 	enterFirstName: "이름은 필수 항목입니다.",
 	enterLastName: "성은 필수 항목입니다.",
-	enterPhone: "전화번호는 필수 항목입니다."
+	enterPhone: "전화번호는 필수 항목입니다.",
+	enterFieldName: "{{fieldName}} 필수."
 };
 var buttons$b = {
 	account: "내 계정",
@@ -6166,7 +6169,8 @@ var validation = {
 	confirmPassword: "Confirmar la contraseña es obligatorio.",
 	enterFirstName: "El nombre es obligatorio.",
 	enterLastName: "El apellido es obligatorio.",
-	enterPhone: "El número de teléfono es obligatorio."
+	enterPhone: "El número de teléfono es obligatorio.",
+	enterFieldName: "{{fieldName}} es obligatorio."
 };
 var buttons$5 = {
 	account: "Mi cuenta",
@@ -12860,6 +12864,7 @@ const SET_FIRST_NAME_ERROR = "SET_FIRST_NAME_ERROR";
 const SET_LAST_NAME_ERROR = "SET_LAST_NAME_ERROR";
 const SET_PHONE_ERROR = "SET_PHONE_ERROR";
 const SET_TEXT_FIELD = "SET_TEXT_FIELD";
+const SET_TEXT_FIELD_ERROR = "SET_TEXT_FIELD_ERROR";
 const SET_MONTH = "SET_MONTH";
 const SET_YEAR = "SET_YEAR";
 const SET_TOKEN = "SET_TOKEN";
@@ -13809,6 +13814,11 @@ const RegisterContainer = _ref => {
           phoneError: action.payload,
           phone: null
         });
+      case SET_TEXT_FIELD_ERROR:
+        return lib_7({
+          ...state,
+          ...action.payload
+        });
       case SET_CONFIRM_PASSWORD_ERROR:
         return lib_7({
           ...state,
@@ -14959,26 +14969,69 @@ function TextInput(_ref) {
     fieldName,
     ...otherProps
   } = _ref;
+  const {
+    t
+  } = useTranslation("common");
   const {
     dispatch,
-    state
+    state: {
+      [fieldName]: stateFieldName,
+      [fieldName + "Error"]: fieldNameError,
+      loading
+    }
   } = useContext(store);
-  const handleInputChange = value => {
-    dispatch({
-      type: SET_TEXT_FIELD,
-      payload: {
-        [fieldName]: value
+  const [fieldNameState, setFieldNameState] = useState(stateFieldName);
+  const [finishedTyping, setFinishedTyping] = useState(false);
+  const handleInputChange = useCallback(value => {
+    setFieldNameState(value);
+    if (finishedTyping) {
+      if (fieldNameState !== null && fieldNameState !== void 0 && fieldNameState.length) {
+        dispatch({
+          type: SET_TEXT_FIELD,
+          payload: {
+            [fieldName]: value,
+            [fieldName + "Error"]: null
+          }
+        });
+      } else {
+        if (otherProps.required) {
+          dispatch({
+            type: SET_TEXT_FIELD_ERROR,
+            payload: {
+              [fieldName + "Error"]: t("validation.enterFieldName", {
+                fieldName: otherProps.label
+              }),
+              [fieldName]: null
+            }
+          });
+        } else {
+          dispatch({
+            type: SET_TEXT_FIELD,
+            payload: {
+              [fieldName]: value,
+              [fieldName + "Error"]: null
+            }
+          });
+        }
       }
-    });
-  };
-  if (state.loading) {
+    }
+  }, [dispatch, fieldNameState, finishedTyping] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  useEffect(() => {
+    handleInputChange(fieldNameState);
+  }, [finishedTyping, fieldNameState, handleInputChange]);
+  if (loading) {
     return /*#__PURE__*/React__default.createElement(Loader, null);
   }
   return /*#__PURE__*/React__default.createElement(Input, Object.assign({
     type: "text",
-    value: state[fieldName],
+    error: fieldNameError,
+    value: fieldNameState,
     defaultValue: (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : (_window$Pelcro$user$r2 = _window$Pelcro$user$r.metadata) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2[fieldName],
-    onChange: e => handleInputChange(e.target.value)
+    onChange: e => handleInputChange(e.target.value),
+    onBlur: () => setFinishedTyping(true),
+    onFocus: () => setFinishedTyping(false)
   }, otherProps));
 }
 
@@ -19585,6 +19638,102 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       onSuccess(response);
     }
   };
+  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
@@ -19870,7 +20019,6 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     return stripe.createSource({
       type: "card"
     }).then(_ref8 => {
-      var _source$card2;
       let {
         source,
         error
@@ -19880,17 +20028,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       }
 
       // We don't support source creation for 3D secure yet
-      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")
-          }
-        });
-      }
+      // if (source?.card?.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
@@ -19909,14 +20059,18 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             }
           });
         }
-        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);
+        }
       });
     });
   };
@@ -19937,6 +20091,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       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
@@ -19955,14 +20110,18 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           }
         });
       }
-      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);
+      }
     });
   };
   const replacePaymentSource = (state, dispatch) => {
@@ -19972,7 +20131,6 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     return stripe.createSource({
       type: "card"
     }).then(_ref9 => {
-      var _source$card3;
       let {
         source,
         error
@@ -19982,17 +20140,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       }
 
       // We don't support source creation for 3D secure yet
-      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")
-          }
-        });
-      }
+      // if (source?.card?.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({
@@ -20003,7 +20163,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             }
           });
         }
-        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,
@@ -20166,12 +20328,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pelcro/react-pelcro-js",
   "description": "Pelcro's React UI Elements",
-  "version": "3.26.0-beta.43",
+  "version": "3.26.0-beta.45",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",