@pelcro/react-pelcro-js 4.0.0-alpha.63 → 4.0.0-alpha.64

package/dist/index.esm.js

@@ -3330,12 +3330,19 @@ var paymentMethod_en = {
 	select: select$6,
 	"delete": {
 	title: "Delete payment method",
-	subtitle: "This payment method could be associated with active subscriptions or serve as the default payment method. Please choose from the available options below for replacement.",
+	subtitle: "Are you sure you want to delete the selected payment method?",
+	details: "Payment method details",
+	message: "This action is irreversible and will permanently remove the payment method from the system. Please ensure that there are no pending transactions or subscriptions associated with this payment method.",
+	buttons: {
+		"delete": "Delete payment method",
+		back: "Go back"
+	},
 	options: {
-		select: "Select an existing payment method",
+		select: "Select a payment method to be the default",
 		add: "Add a new payment method"
 	},
-	paymentMethodReplaced: "Payment Method Successfully Deleted and Replaced"
+	paymentMethodReplaced: "Payment Method Successfully Deleted and Replaced",
+	deletedSuccessfully: "Payment Method Successfully Deleted"
 },
 	create: create$5
 };
@@ -9841,6 +9848,21 @@ function notifyBugsnag(callback, startOptions) {
 
   callback();
 }
+const refreshUser = () => {
+  var _window$Pelcro6, _window$Pelcro6$user, _window$Pelcro6$user$;
+
+  window.Pelcro.user.refresh({
+    auth_token: (_window$Pelcro6 = window.Pelcro) === null || _window$Pelcro6 === void 0 ? void 0 : (_window$Pelcro6$user = _window$Pelcro6.user) === null || _window$Pelcro6$user === void 0 ? void 0 : (_window$Pelcro6$user$ = _window$Pelcro6$user.read()) === null || _window$Pelcro6$user$ === void 0 ? void 0 : _window$Pelcro6$user$.auth_token
+  }, (err, res) => {
+    if (err) {
+      console.error(err);
+    }
+
+    if (res) {
+      return res.data;
+    }
+  });
+};
 
 const resources = {
   en: {
@@ -12827,8 +12849,8 @@ const SET_CANCEL_SUBSCRIPTION_REASON = "SET_CANCEL_SUBSCRIPTION_REASON";
 const SET_CANCEL_SUBSCRIPTION_OPTION = "SET_CANCEL_SUBSCRIPTION_OPTION";
 const HANDLE_CHECKBOX_CHANGE = "HANDLE_CHECKBOX_CHANGE";
 const SET_IS_DEFAULT_PAYMENT_METHOD = "SET_IS_DEFAULT_PAYMENT_METHOD";
-const SET_DELETE_PAYMENT_METHOD_OPTION = "SET_DELETE_PAYMENT_METHOD_OPTION";
 const SET_PAYMENT_METHODS = "SET_PAYMENT_METHODS";
+const SHOW_PAYMENT_METHOD_SELECT = "SHOW_PAYMENT_METHOD_SELECT";
 const SET_SUBSCRIPTION_SUSPEND_DATE = "SET_SUBSCRIPTION_SUSPEND_DATE";
 const SET_EMAILS = "SET_EMAILS";
 const SET_EMAILS_ERROR = "SET_EMAILS_ERROR";
@@ -23227,6 +23249,7 @@ const PaymentMethodContainerWithoutStripe = ({
             content: t("messages.sourceCreated")
           }
         });
+        refreshUser();
         onSuccess(res);
       });
     }
@@ -23285,6 +23308,7 @@ const PaymentMethodContainerWithoutStripe = ({
                 });
               }
 
+              refreshUser();
               onSuccess(res);
             });
           }, 2000);
@@ -23349,6 +23373,7 @@ const PaymentMethodContainerWithoutStripe = ({
             content: t("messages.sourceUpdated")
           }
         });
+        refreshUser();
         onSuccess(res);
       });
     }
@@ -23755,6 +23780,7 @@ const PaymentMethodContainerWithoutStripe = ({
             type: LOADING,
             payload: false
           });
+          refreshUser();
           onSuccess(res);
           return;
         }
@@ -23771,6 +23797,7 @@ const PaymentMethodContainerWithoutStripe = ({
               content: t("messages.sourceCreated")
             }
           });
+          refreshUser();
           onSuccess(res);
           return;
         }
@@ -23791,6 +23818,7 @@ const PaymentMethodContainerWithoutStripe = ({
               content: t("messages.sourceUpdated")
             }
           });
+          refreshUser();
           onSuccess(res);
           return;
         }
@@ -23821,6 +23849,7 @@ const PaymentMethodContainerWithoutStripe = ({
                 });
               }
 
+              refreshUser();
               onSuccess(res);
             });
           }, 2000);
@@ -24093,6 +24122,7 @@ const PaymentMethodContainerWithoutStripe = ({
                 content: t("messages.sourceCreated")
               }
             });
+            refreshUser();
             onSuccess(res);
           }
         });
@@ -24149,6 +24179,7 @@ const PaymentMethodContainerWithoutStripe = ({
             content: t("messages.sourceUpdated")
           }
         });
+        refreshUser();
         onSuccess(res);
       }
     });
@@ -24224,6 +24255,7 @@ const PaymentMethodContainerWithoutStripe = ({
                   });
                 }
 
+                refreshUser();
                 onSuccess(res);
               });
             }, 2000);
@@ -33717,9 +33749,7 @@ const BillingAddressSelectModal = ({
 BillingAddressSelectModal.viewId = "billing-address-select";
 
 const moveDefaultPaymentMethodToStart = paymentMethods => {
-  var _window$Pelcro$user$r;
-
-  const defaultPaymentMethod = (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.source;
+  const defaultPaymentMethod = getDefaultPaymentMethod(paymentMethods);
   const paymentMethodsWithoutDefault = paymentMethods.filter(paymentMethod => paymentMethod.id !== defaultPaymentMethod.id);
 
   if (defaultPaymentMethod.status !== "chargeable") {
@@ -33729,9 +33759,15 @@ const moveDefaultPaymentMethodToStart = paymentMethods => {
   return [defaultPaymentMethod, ...paymentMethodsWithoutDefault];
 };
 
+const getDefaultPaymentMethod = paymentMethods => {
+  const defaultPaymentMethod = paymentMethods.find(paymentMethod => paymentMethod.is_default);
+  return defaultPaymentMethod;
+};
+
 const initialState$6 = {
   paymentMethods: [],
   selectedPaymentMethodId: null,
+  skeletonLoader: true,
   isSubmitting: false,
   alert: {
     type: "error",
@@ -33763,14 +33799,12 @@ const PaymentMethodSelectContainer = ({
     return onSuccess(selectedPaymentMethodId);
   };
 
-  const getInitialSelectedMethodId = () => {
-    var _window$Pelcro$user$r2;
-
+  const getInitialSelectedMethodId = paymentMethods => {
     if (selectedPaymentMethodIdFromStore) {
       return selectedPaymentMethodIdFromStore;
     }
 
-    const defaultMethod = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.source;
+    const defaultMethod = getDefaultPaymentMethod(paymentMethods);
 
     if (defaultMethod && defaultMethod.status === "chargeable") {
       return String(defaultMethod.id);
@@ -33789,7 +33823,12 @@ const PaymentMethodSelectContainer = ({
       case LOAD_PAYMENT_METHODS:
         return lib_7({ ...state,
           paymentMethods: moveDefaultPaymentMethodToStart(action.payload),
-          selectedPaymentMethodId: getInitialSelectedMethodId()
+          selectedPaymentMethodId: getInitialSelectedMethodId(action.payload)
+        });
+
+      case SKELETON_LOADER:
+        return lib_7({ ...state,
+          skeletonLoader: action.payload
         });
 
       case HANDLE_SUBMIT:
@@ -33802,11 +33841,25 @@ const PaymentMethodSelectContainer = ({
     }
   }, initialState$6);
   useEffect(() => {
-    var _window$Pelcro$user$r3;
+    window.Pelcro.paymentMethods.list({
+      auth_token: window.Pelcro.user.read().auth_token
+    }, (err, res) => {
+      if (err) {
+        return console.error(err);
+      }
 
-    dispatch({
-      type: LOAD_PAYMENT_METHODS,
-      payload: (_window$Pelcro$user$r3 = window.Pelcro.user.read().sources) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : []
+      if (res) {
+        var _res$data;
+
+        dispatch({
+          type: LOAD_PAYMENT_METHODS,
+          payload: (_res$data = res.data) !== null && _res$data !== void 0 ? _res$data : []
+        });
+        dispatch({
+          type: SKELETON_LOADER,
+          payload: false
+        });
+      }
     });
   }, []);
   return /*#__PURE__*/React__default.createElement("div", {
@@ -33834,7 +33887,8 @@ const PaymentMethodSelectList = () => {
     dispatch,
     state: {
       paymentMethods,
-      selectedPaymentMethodId
+      selectedPaymentMethodId,
+      skeletonLoader
     }
   } = useContext(store$6);
 
@@ -33845,7 +33899,9 @@ const PaymentMethodSelectList = () => {
     });
   };
 
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", null, skeletonLoader ? /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-w-full plc-h-20 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
+  }) : /*#__PURE__*/React__default.createElement("div", {
     className: "plc-px-3 plc-py-2 plc-space-y-4 plc-overflow-y-scroll plc-max-h-80 pelcro-payment-method-select-wrapper"
   }, paymentMethods.map(paymentMethod => {
     var _paymentMethod$proper, _paymentMethod$proper2, _paymentMethod$proper3, _paymentMethod$proper4, _paymentMethod$proper5;
@@ -33869,7 +33925,7 @@ const PaymentMethodSelectList = () => {
     }, (paymentMethod === null || paymentMethod === void 0 ? void 0 : (_paymentMethod$proper2 = paymentMethod.properties) === null || _paymentMethod$proper2 === void 0 ? void 0 : _paymentMethod$proper2.brand) === "bacs_debit" ? "••••" : "•••• •••• ••••", " ", paymentMethod === null || paymentMethod === void 0 ? void 0 : (_paymentMethod$proper3 = paymentMethod.properties) === null || _paymentMethod$proper3 === void 0 ? void 0 : _paymentMethod$proper3.last4), paymentMethod.properties.brand !== "bacs_debit" && /*#__PURE__*/React__default.createElement("p", {
       className: "plc-text-sm plc-text-gray-500"
     }, t("select.expires"), " ", (_paymentMethod$proper4 = paymentMethod.properties) === null || _paymentMethod$proper4 === void 0 ? void 0 : _paymentMethod$proper4.exp_month, "/", (_paymentMethod$proper5 = paymentMethod.properties) === null || _paymentMethod$proper5 === void 0 ? void 0 : _paymentMethod$proper5.exp_year))));
-  }));
+  })));
 };
 
 const PaymentMethodSelectSubmit = ({
@@ -33979,10 +34035,10 @@ const initialState$5 = {
   paymentMethods: [],
   selectedPaymentMethodId: null,
   isSubmitting: false,
-  deleteOption: "",
-  disableSubmit: false,
+  disableSubmit: true,
   isLoading: false,
   skeletonLoader: true,
+  showPaymentMethodSelect: false,
   alert: {
     type: "error",
     content: ""
@@ -34021,20 +34077,20 @@ const PaymentMethodDeleteContainer = ({
           payload: false
         });
 
-        if (res.data.length !== 1) {
+        if (res.data.length !== 1 && paymentMethodToDelete.is_default && paymentMethodToDelete.deletable) {
           dispatch({
-            type: SET_DELETE_PAYMENT_METHOD_OPTION,
-            payload: "select"
-          });
-        } else {
-          dispatch({
-            type: SET_DELETE_PAYMENT_METHOD_OPTION,
-            payload: "add"
+            type: SHOW_PAYMENT_METHOD_SELECT,
+            payload: true
           });
         }
+
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
       }
     });
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [paymentMethodToDelete]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const setDefaultPaymentMethod = () => {
     const {
@@ -34046,6 +34102,15 @@ const PaymentMethodDeleteContainer = ({
       is_default: true
     }, (err, res) => {
       if (err) {
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        console.log(err);
         onFailure(err);
         return dispatch({
           type: SHOW_ALERT,
@@ -34070,6 +34135,15 @@ const PaymentMethodDeleteContainer = ({
       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({
@@ -34081,14 +34155,7 @@ const PaymentMethodDeleteContainer = ({
         });
       }
 
-      dispatch({
-        type: DISABLE_SUBMIT,
-        payload: false
-      });
-      dispatch({
-        type: LOADING,
-        payload: false
-      });
+      refreshUser();
       onSuccess(res);
     });
   };
@@ -34104,11 +34171,12 @@ const PaymentMethodDeleteContainer = ({
         return lib_5({ ...state,
           disableSubmit: true,
           isLoading: true
-        }, (state, dispatch) => setDefaultPaymentMethod());
-
-      case SET_DELETE_PAYMENT_METHOD_OPTION:
-        return lib_7({ ...state,
-          deleteOption: action.payload
+        }, (state, dispatch) => {
+          if (state.showPaymentMethodSelect) {
+            setDefaultPaymentMethod();
+          } else {
+            deletePaymentMethod();
+          }
         });
 
       case SET_PAYMENT_METHODS:
@@ -34136,6 +34204,11 @@ const PaymentMethodDeleteContainer = ({
           skeletonLoader: action.payload
         });
 
+      case SHOW_PAYMENT_METHOD_SELECT:
+        return lib_7({ ...state,
+          showPaymentMethodSelect: action.payload
+        });
+
       default:
         return state;
     }
@@ -34157,34 +34230,6 @@ const PaymentMethodDeleteContainer = ({
   })));
 };
 
-const PaymentMethodDeleteSubmit = ({
-  name,
-  onClick,
-  ...otherProps
-}) => {
-  const {
-    t
-  } = useTranslation("paymentMethod");
-  const {
-    dispatch,
-    state: {
-      isLoading,
-      isDisabled
-    }
-  } = useContext(store$5);
-  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
-    onClick: () => {
-      dispatch({
-        type: HANDLE_SUBMIT
-      });
-      onClick === null || onClick === void 0 ? void 0 : onClick();
-    },
-    disabled: isDisabled,
-    isLoading: isLoading,
-    className: "plc-w-full"
-  }, otherProps), name !== null && name !== void 0 ? name : t("select.buttons.selectPaymentMethod"));
-};
-
 const PaymentMethodDeleteList = props => {
   const {
     t
@@ -34192,16 +34237,28 @@ const PaymentMethodDeleteList = props => {
   const {
     dispatch,
     state: {
-      deleteOption,
       selectedPaymentMethodId,
       paymentMethods,
-      skeletonLoader
+      skeletonLoader,
+      showPaymentMethodSelect
     }
   } = useContext(store$5);
   const {
     paymentMethodToDelete
   } = usePelcro();
 
+  const createPaymentMethodItems = () => {
+    if (paymentMethods.length) {
+      return paymentMethods.filter(paymentMethod => (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id) !== (paymentMethodToDelete === null || paymentMethodToDelete === void 0 ? void 0 : paymentMethodToDelete.id)).map(paymentMethod => paymentMethod.properties.brand === "bacs_debit" ? /*#__PURE__*/React__default.createElement("option", {
+        key: paymentMethod.id,
+        value: paymentMethod.id
+      }, "bacs - ", paymentMethod.properties.last4) : /*#__PURE__*/React__default.createElement("option", {
+        key: paymentMethod.id,
+        value: paymentMethod.id
+      }, paymentMethod.properties.brand, " -", " ", paymentMethod.properties.last4, " -", " ", paymentMethod.properties.exp_month, " /", paymentMethod.properties.exp_year));
+    }
+  };
+
   const handlePaymentMethodSelect = event => {
     dispatch({
       type: SELECT_PAYMENT_METHOD,
@@ -34209,102 +34266,124 @@ const PaymentMethodDeleteList = props => {
     });
   };
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, skeletonLoader ? /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-w-full plc-h-40 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
-  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, paymentMethods && deleteOption === "select" && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-px-3 plc-py-2 plc-space-y-4 plc-overflow-y-scroll no-scrollbar plc-max-h-80 pelcro-payment-method-select-wrapper plc-mb-4"
-  }, paymentMethods.filter(paymentMethod => (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id) !== (paymentMethodToDelete === null || paymentMethodToDelete === void 0 ? void 0 : paymentMethodToDelete.id)).map(paymentMethod => {
-    var _paymentMethod$proper, _paymentMethod$proper2, _paymentMethod$proper3, _paymentMethod$proper4, _paymentMethod$proper5;
-
-    const isSelected = selectedPaymentMethodId === String(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id);
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id,
-      className: `plc-p-2 plc-pl-4 plc-shadow-md plc-text-gray-900 plc-rounded pelcro-payment-method-wrapper`
-    }, /*#__PURE__*/React__default.createElement(Radio, {
-      className: "plc-flex plc-items-center pelcro-select-payment-method-radio",
-      labelClassName: "plc-flex plc-items-center plc-space-x-2 plc-cursor-pointer plc-w-full",
-      id: `pelcro-payment-method-select-${paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id}`,
-      name: "paymentMethod",
-      checked: isSelected,
-      value: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id,
-      onChange: handlePaymentMethodSelect
-    }, getPaymentCardIcon((_paymentMethod$proper = paymentMethod.properties) === null || _paymentMethod$proper === void 0 ? void 0 : _paymentMethod$proper.brand), /*#__PURE__*/React__default.createElement("div", {
-      className: "plc-flex plc-flex-col plc-text-lg pelcro-payment-method-details"
-    }, /*#__PURE__*/React__default.createElement("p", {
-      className: "plc-font-semibold"
-    }, (paymentMethod === null || paymentMethod === void 0 ? void 0 : (_paymentMethod$proper2 = paymentMethod.properties) === null || _paymentMethod$proper2 === void 0 ? void 0 : _paymentMethod$proper2.brand) === "bacs_debit" ? "••••" : "•••• •••• ••••", " ", (_paymentMethod$proper3 = paymentMethod.properties) === null || _paymentMethod$proper3 === void 0 ? void 0 : _paymentMethod$proper3.last4), paymentMethod.properties.brand !== "bacs_debit" && /*#__PURE__*/React__default.createElement("p", {
-      className: "plc-text-sm plc-text-gray-500"
-    }, t("select.expires"), " ", (_paymentMethod$proper4 = paymentMethod.properties) === null || _paymentMethod$proper4 === void 0 ? void 0 : _paymentMethod$proper4.exp_month, "/", (_paymentMethod$proper5 = paymentMethod.properties) === null || _paymentMethod$proper5 === void 0 ? void 0 : _paymentMethod$proper5.exp_year))));
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-px-3"
-  }, /*#__PURE__*/React__default.createElement(PaymentMethodDeleteSubmit, null))), deleteOption === "add" && /*#__PURE__*/React__default.createElement(PaymentMethodView, {
-    type: "deletePaymentSource",
-    showCoupon: false,
-    showExternalPaymentMethods: false,
-    showApplePayButton: false,
-    onDisplay: props.onDisplay,
-    onFailure: props.onFailure,
-    onSuccess: props.onSuccess,
-    setAsDefault: true
-  })));
+  if (showPaymentMethodSelect) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, skeletonLoader ? /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-w-full plc-h-8 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
+    }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, paymentMethods && /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-mt-4"
+    }, /*#__PURE__*/React__default.createElement(Select, {
+      label: t("delete.options.select"),
+      name: "default-payment-method",
+      onChange: handlePaymentMethodSelect,
+      value: selectedPaymentMethodId
+    }, /*#__PURE__*/React__default.createElement("option", {
+      value: "",
+      disabled: true,
+      selected: true
+    }), createPaymentMethodItems()))));
+  } else {
+    return null;
+  }
 };
 
-const PaymentMethodDeleteOptions = ({
-  subscription,
-  hasPhases,
-  onClick,
-  className
-}) => {
+const PaymentMethodDetails = () => {
+  var _paymentMethodToDelet, _paymentMethodToDelet2, _paymentMethodToDelet3, _paymentMethodToDelet4, _paymentMethodToDelet5;
+
   const {
     state: {
-      deleteOption,
-      paymentMethods,
       skeletonLoader
-    },
-    dispatch
+    }
   } = useContext(store$5);
   const {
     t
   } = useTranslation("paymentMethod");
-
-  const handleOptionSelect = event => {
-    dispatch({
-      type: SET_DELETE_PAYMENT_METHOD_OPTION,
-      payload: event.target.value
-    });
-  };
-
+  const {
+    paymentMethodToDelete
+  } = usePelcro();
   return /*#__PURE__*/React__default.createElement("div", {
     className: "plc-text-left plc-mr-auto plc-mb-6"
-  }, skeletonLoader ? /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-flex plc-flex-col plc-space-y-3"
-  }, /*#__PURE__*/React__default.createElement(Radio, {
-    className: "plc-animate-puls"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-w-36 plc-bg-gray-300 plc-h-4 plc-rounded-md plc-animate-pulse"
-  })), /*#__PURE__*/React__default.createElement(Radio, {
-    className: "plc-animate-pulse"
+  }, /*#__PURE__*/React__default.createElement("h4", {
+    className: "plc-mb-2"
+  }, t("delete.details")), skeletonLoader ? /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-w-full plc-h-16 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
+  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, paymentMethodToDelete && /*#__PURE__*/React__default.createElement("div", {
+    key: paymentMethodToDelete === null || paymentMethodToDelete === void 0 ? void 0 : paymentMethodToDelete.id,
+    className: `plc-p-2 plc-pl-4 plc-shadow-md_dark plc-text-gray-900 plc-rounded pelcro-payment-method-wrapper`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-w-36 plc-bg-gray-300 plc-h-4 plc-rounded-md plc-animate-pulse"
-  }))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, paymentMethods && paymentMethods.length !== 1 && /*#__PURE__*/React__default.createElement(Radio, {
-    onChange: handleOptionSelect,
-    checked: deleteOption === "select",
-    value: "select"
-  }, t("delete.options.select")), /*#__PURE__*/React__default.createElement(Radio, {
-    onChange: handleOptionSelect,
-    checked: deleteOption === "add",
-    value: "add"
-  }, t("delete.options.add"))));
+    className: "plc-flex plc-items-center plc-space-x-2 plc-w-full pelcro-select-payment-method-radio",
+    id: `pelcro-payment-method-select-${paymentMethodToDelete === null || paymentMethodToDelete === void 0 ? void 0 : paymentMethodToDelete.id}`,
+    name: "paymentMethod"
+  }, getPaymentCardIcon((_paymentMethodToDelet = paymentMethodToDelete.properties) === null || _paymentMethodToDelet === void 0 ? void 0 : _paymentMethodToDelet.brand), /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-flex-col plc-text-lg pelcro-payment-method-details"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "plc-font-semibold"
+  }, (paymentMethodToDelete === null || paymentMethodToDelete === void 0 ? void 0 : (_paymentMethodToDelet2 = paymentMethodToDelete.properties) === null || _paymentMethodToDelet2 === void 0 ? void 0 : _paymentMethodToDelet2.brand) === "bacs_debit" ? "••••" : "•••• •••• ••••", " ", (_paymentMethodToDelet3 = paymentMethodToDelete.properties) === null || _paymentMethodToDelet3 === void 0 ? void 0 : _paymentMethodToDelet3.last4), paymentMethodToDelete.properties.brand !== "bacs_debit" && /*#__PURE__*/React__default.createElement("p", {
+    className: "plc-text-sm plc-text-gray-500"
+  }, t("select.expires"), " ", (_paymentMethodToDelet4 = paymentMethodToDelete.properties) === null || _paymentMethodToDelet4 === void 0 ? void 0 : _paymentMethodToDelet4.exp_month, "/", (_paymentMethodToDelet5 = paymentMethodToDelete.properties) === null || _paymentMethodToDelet5 === void 0 ? void 0 : _paymentMethodToDelet5.exp_year))))));
+};
+
+const PaymentMethodDeleteSubmit = ({
+  name,
+  onClick,
+  ...otherProps
+}) => {
+  const {
+    t
+  } = useTranslation("paymentMethod");
+  const {
+    dispatch,
+    state: {
+      isLoading,
+      disableSubmit,
+      showPaymentMethodSelect,
+      selectedPaymentMethodId
+    }
+  } = useContext(store$5);
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
+    onClick: () => {
+      dispatch({
+        type: HANDLE_SUBMIT
+      });
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    },
+    disabled: showPaymentMethodSelect ? !selectedPaymentMethodId : disableSubmit,
+    isLoading: isLoading,
+    className: "plc-w-full"
+  }, otherProps), name !== null && name !== void 0 ? name : t("delete.buttons.delete"));
+};
+
+const PaymentMethodDeleteBack = ({
+  name,
+  onClick,
+  ...otherProps
+}) => {
+  const {
+    t
+  } = useTranslation("paymentMethod");
+  const {
+    switchView
+  } = usePelcro();
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
+    variant: "outline",
+    onClick: () => {
+      switchView("dashboard");
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    },
+    className: "plc-w-full"
+  }, otherProps), name !== null && name !== void 0 ? name : t("delete.buttons.back"));
 };
 
 function PaymentMethodDeleteView(props) {
+  const {
+    t
+  } = useTranslation("paymentMethod");
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-payment-method-delete-view"
-  }, /*#__PURE__*/React__default.createElement(PaymentMethodDeleteContainer, props, /*#__PURE__*/React__default.createElement(AlertWithContext, {
-    className: "plc-mb-2"
-  }), /*#__PURE__*/React__default.createElement(PaymentMethodDeleteOptions, null), /*#__PURE__*/React__default.createElement(PaymentMethodDeleteList, {
-    onSuccess: props.onSuccess
-  })));
+  }, /*#__PURE__*/React__default.createElement(PaymentMethodDeleteContainer, props, /*#__PURE__*/React__default.createElement(AlertWithContext, null), /*#__PURE__*/React__default.createElement(PaymentMethodDetails, null), /*#__PURE__*/React__default.createElement(PaymentMethodDeleteList, null), /*#__PURE__*/React__default.createElement("p", {
+    className: "plc-text-sm plc-text-justify"
+  }, t("delete.message")), /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-space-x-0 plc-space-y-3 plc-w-full plc-flex plc-flex-col plc-items-center plc-justify-center plc-mt-4"
+  }, /*#__PURE__*/React__default.createElement(PaymentMethodDeleteSubmit, null), /*#__PURE__*/React__default.createElement(PaymentMethodDeleteBack, null))));
 }
 
 const PaymentMethodDeleteModal = props => {
@@ -34337,7 +34416,7 @@ const PaymentMethodDeleteModal = props => {
       });
     }
 
-    notify.success(t("delete.paymentMethodReplaced"));
+    notify.success(t("delete.deletedSuccessfully"));
     resetView();
   };
 
@@ -37187,38 +37266,9 @@ const PaymentCardsMenu = props => {
     return switchView("payment-method-update");
   };
 
-  const deletePaymentMethod = (paymentMethodId, onSuccess, onFailure) => {
-    // disable the Login button to prevent repeated clicks
-    window.Pelcro.paymentMethods.deletePaymentMethod({
-      auth_token: window.Pelcro.user.read().auth_token,
-      payment_method_id: paymentMethodId
-    }, (err, res) => {
-      if (err) {
-        return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
-      }
-
-      onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
-    });
-  };
-
   const onDeletePaymentMethodClick = source => {
-    const isDeletable = source === null || source === void 0 ? void 0 : source.deletable;
-
-    if (isDeletable) {
-      notify.confirm((onSuccess, onFailure) => {
-        deletePaymentMethod(source.id, onSuccess, onFailure);
-      }, {
-        confirmMessage: t("messages.paymentMethodDeletion.isSureToDelete"),
-        loadingMessage: t("messages.paymentMethodDeletion.loading"),
-        successMessage: t("messages.paymentMethodDeletion.success"),
-        errorMessage: t("messages.paymentMethodDeletion.error")
-      }, {
-        closeButtonLabel: t("labels.subCancellation.goBack")
-      });
-    } else {
-      setPaymentMethodToDelete(source.id);
-      return switchView("payment-method-delete");
-    }
+    setPaymentMethodToDelete(source.id);
+    return switchView("payment-method-delete");
   };
 
   return /*#__PURE__*/React__default.createElement(Card, {
@@ -42294,4 +42344,4 @@ const QrCodeModal = ({
 };
 QrCodeModal.viewId = "qrcode";
 
-export { AddNew, AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplePayButton, ApplyCouponButton, Auth0LoginButton, Badge, BankRedirection, BillingAddressCreateModal, BillingAddressSelectModal, BillingAddressUpdateModal, Button, Card, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, Dashboard, DashboardAddresses, DashboardContainer, DashboardContent, DashboardDonations, DashboardGifts, DashboardHeading, DashboardInvoices, DashboardLink, DashboardMemberships, DashboardNewsletters, DashboardOpenButton, DashboardOrders, DashboardPasswordChange, DashboardPaymentCards, DashboardProfile, DashboardQRCode, DashboardSavedItems, DashboardSubscriptions, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, ModalHeader, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateFreeButton, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodCreateContainer, PaymentMethodCreateModal, PaymentMethodCreateView, PaymentMethodDeleteContainer, PaymentMethodDeleteList, PaymentMethodDeleteModal, PaymentMethodDeleteOptions, PaymentMethodDeleteSubmit, PaymentMethodDeleteView, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateSetDefault, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedAddress, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };
+export { AddNew, AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplePayButton, ApplyCouponButton, Auth0LoginButton, Badge, BankRedirection, BillingAddressCreateModal, BillingAddressSelectModal, BillingAddressUpdateModal, Button, Card, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, Dashboard, DashboardAddresses, DashboardContainer, DashboardContent, DashboardDonations, DashboardGifts, DashboardHeading, DashboardInvoices, DashboardLink, DashboardMemberships, DashboardNewsletters, DashboardOpenButton, DashboardOrders, DashboardPasswordChange, DashboardPaymentCards, DashboardProfile, DashboardQRCode, DashboardSavedItems, DashboardSubscriptions, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, ModalHeader, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateFreeButton, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodCreateContainer, PaymentMethodCreateModal, PaymentMethodCreateView, PaymentMethodDeleteContainer, PaymentMethodDeleteList, PaymentMethodDeleteModal, PaymentMethodDeleteSubmit, PaymentMethodDeleteView, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateSetDefault, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedAddress, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };