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

package/dist/index.cjs.js

@@ -3360,12 +3360,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
 };
@@ -9871,6 +9878,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: {
@@ -12857,8 +12879,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";
@@ -23257,6 +23279,7 @@ const PaymentMethodContainerWithoutStripe = ({
             content: t("messages.sourceCreated")
           }
         });
+        refreshUser();
         onSuccess(res);
       });
     }
@@ -23315,6 +23338,7 @@ const PaymentMethodContainerWithoutStripe = ({
                 });
               }
 
+              refreshUser();
               onSuccess(res);
             });
           }, 2000);
@@ -23379,6 +23403,7 @@ const PaymentMethodContainerWithoutStripe = ({
             content: t("messages.sourceUpdated")
           }
         });
+        refreshUser();
         onSuccess(res);
       });
     }
@@ -23785,6 +23810,7 @@ const PaymentMethodContainerWithoutStripe = ({
             type: LOADING,
             payload: false
           });
+          refreshUser();
           onSuccess(res);
           return;
         }
@@ -23801,6 +23827,7 @@ const PaymentMethodContainerWithoutStripe = ({
               content: t("messages.sourceCreated")
             }
           });
+          refreshUser();
           onSuccess(res);
           return;
         }
@@ -23821,6 +23848,7 @@ const PaymentMethodContainerWithoutStripe = ({
               content: t("messages.sourceUpdated")
             }
           });
+          refreshUser();
           onSuccess(res);
           return;
         }
@@ -23851,6 +23879,7 @@ const PaymentMethodContainerWithoutStripe = ({
                 });
               }
 
+              refreshUser();
               onSuccess(res);
             });
           }, 2000);
@@ -24123,6 +24152,7 @@ const PaymentMethodContainerWithoutStripe = ({
                 content: t("messages.sourceCreated")
               }
             });
+            refreshUser();
             onSuccess(res);
           }
         });
@@ -24179,6 +24209,7 @@ const PaymentMethodContainerWithoutStripe = ({
             content: t("messages.sourceUpdated")
           }
         });
+        refreshUser();
         onSuccess(res);
       }
     });
@@ -24254,6 +24285,7 @@ const PaymentMethodContainerWithoutStripe = ({
                   });
                 }
 
+                refreshUser();
                 onSuccess(res);
               });
             }, 2000);
@@ -33747,9 +33779,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") {
@@ -33759,9 +33789,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",
@@ -33793,14 +33829,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);
@@ -33819,7 +33853,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:
@@ -33832,11 +33871,25 @@ const PaymentMethodSelectContainer = ({
     }
   }, initialState$6);
   React.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['default'].createElement("div", {
@@ -33864,7 +33917,8 @@ const PaymentMethodSelectList = () => {
     dispatch,
     state: {
       paymentMethods,
-      selectedPaymentMethodId
+      selectedPaymentMethodId,
+      skeletonLoader
     }
   } = React.useContext(store$6);
 
@@ -33875,7 +33929,9 @@ const PaymentMethodSelectList = () => {
     });
   };
 
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement("div", null, skeletonLoader ? /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-w-full plc-h-20 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
+  }) : /*#__PURE__*/React__default['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;
@@ -33899,7 +33955,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['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 = ({
@@ -34009,10 +34065,10 @@ const initialState$5 = {
   paymentMethods: [],
   selectedPaymentMethodId: null,
   isSubmitting: false,
-  deleteOption: "",
-  disableSubmit: false,
+  disableSubmit: true,
   isLoading: false,
   skeletonLoader: true,
+  showPaymentMethodSelect: false,
   alert: {
     type: "error",
     content: ""
@@ -34051,20 +34107,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 {
@@ -34076,6 +34132,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,
@@ -34100,6 +34165,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({
@@ -34111,14 +34185,7 @@ const PaymentMethodDeleteContainer = ({
         });
       }
 
-      dispatch({
-        type: DISABLE_SUBMIT,
-        payload: false
-      });
-      dispatch({
-        type: LOADING,
-        payload: false
-      });
+      refreshUser();
       onSuccess(res);
     });
   };
@@ -34134,11 +34201,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:
@@ -34166,6 +34234,11 @@ const PaymentMethodDeleteContainer = ({
           skeletonLoader: action.payload
         });
 
+      case SHOW_PAYMENT_METHOD_SELECT:
+        return lib_7({ ...state,
+          showPaymentMethodSelect: action.payload
+        });
+
       default:
         return state;
     }
@@ -34187,34 +34260,6 @@ const PaymentMethodDeleteContainer = ({
   })));
 };
 
-const PaymentMethodDeleteSubmit = ({
-  name,
-  onClick,
-  ...otherProps
-}) => {
-  const {
-    t
-  } = useTranslation("paymentMethod");
-  const {
-    dispatch,
-    state: {
-      isLoading,
-      isDisabled
-    }
-  } = React.useContext(store$5);
-  return /*#__PURE__*/React__default['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
@@ -34222,16 +34267,28 @@ const PaymentMethodDeleteList = props => {
   const {
     dispatch,
     state: {
-      deleteOption,
       selectedPaymentMethodId,
       paymentMethods,
-      skeletonLoader
+      skeletonLoader,
+      showPaymentMethodSelect
     }
   } = React.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['default'].createElement("option", {
+        key: paymentMethod.id,
+        value: paymentMethod.id
+      }, "bacs - ", paymentMethod.properties.last4) : /*#__PURE__*/React__default['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,
@@ -34239,102 +34296,124 @@ const PaymentMethodDeleteList = props => {
     });
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, skeletonLoader ? /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-w-full plc-h-40 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
-  }) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, paymentMethods && deleteOption === "select" && /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['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['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['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['default'].createElement("div", {
-      className: "plc-flex plc-flex-col plc-text-lg pelcro-payment-method-details"
-    }, /*#__PURE__*/React__default['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['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['default'].createElement("div", {
-    className: "plc-px-3"
-  }, /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteSubmit, null))), deleteOption === "add" && /*#__PURE__*/React__default['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['default'].createElement(React__default['default'].Fragment, null, skeletonLoader ? /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-w-full plc-h-8 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
+    }) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, paymentMethods && /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-mt-4"
+    }, /*#__PURE__*/React__default['default'].createElement(Select, {
+      label: t("delete.options.select"),
+      name: "default-payment-method",
+      onChange: handlePaymentMethodSelect,
+      value: selectedPaymentMethodId
+    }, /*#__PURE__*/React__default['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
+    }
   } = React.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['default'].createElement("div", {
     className: "plc-text-left plc-mr-auto plc-mb-6"
-  }, skeletonLoader ? /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-flex plc-flex-col plc-space-y-3"
-  }, /*#__PURE__*/React__default['default'].createElement(Radio, {
-    className: "plc-animate-puls"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-w-36 plc-bg-gray-300 plc-h-4 plc-rounded-md plc-animate-pulse"
-  })), /*#__PURE__*/React__default['default'].createElement(Radio, {
-    className: "plc-animate-pulse"
+  }, /*#__PURE__*/React__default['default'].createElement("h4", {
+    className: "plc-mb-2"
+  }, t("delete.details")), skeletonLoader ? /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-w-full plc-h-16 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
+  }) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, paymentMethodToDelete && /*#__PURE__*/React__default['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['default'].createElement("div", {
-    className: "plc-w-36 plc-bg-gray-300 plc-h-4 plc-rounded-md plc-animate-pulse"
-  }))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, paymentMethods && paymentMethods.length !== 1 && /*#__PURE__*/React__default['default'].createElement(Radio, {
-    onChange: handleOptionSelect,
-    checked: deleteOption === "select",
-    value: "select"
-  }, t("delete.options.select")), /*#__PURE__*/React__default['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['default'].createElement("div", {
+    className: "plc-flex plc-flex-col plc-text-lg pelcro-payment-method-details"
+  }, /*#__PURE__*/React__default['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['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
+    }
+  } = React.useContext(store$5);
+  return /*#__PURE__*/React__default['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['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['default'].createElement("div", {
     id: "pelcro-payment-method-delete-view"
-  }, /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteContainer, props, /*#__PURE__*/React__default['default'].createElement(AlertWithContext, {
-    className: "plc-mb-2"
-  }), /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteOptions, null), /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteList, {
-    onSuccess: props.onSuccess
-  })));
+  }, /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteContainer, props, /*#__PURE__*/React__default['default'].createElement(AlertWithContext, null), /*#__PURE__*/React__default['default'].createElement(PaymentMethodDetails, null), /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteList, null), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-text-sm plc-text-justify"
+  }, t("delete.message")), /*#__PURE__*/React__default['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['default'].createElement(PaymentMethodDeleteSubmit, null), /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteBack, null))));
 }
 
 const PaymentMethodDeleteModal = props => {
@@ -34367,7 +34446,7 @@ const PaymentMethodDeleteModal = props => {
       });
     }
 
-    notify.success(t("delete.paymentMethodReplaced"));
+    notify.success(t("delete.deletedSuccessfully"));
     resetView();
   };
 
@@ -37217,38 +37296,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['default'].createElement(Card, {
@@ -42495,7 +42545,6 @@ exports.PaymentMethodCreateView = PaymentMethodCreateView;
 exports.PaymentMethodDeleteContainer = PaymentMethodDeleteContainer;
 exports.PaymentMethodDeleteList = PaymentMethodDeleteList;
 exports.PaymentMethodDeleteModal = PaymentMethodDeleteModal;
-exports.PaymentMethodDeleteOptions = PaymentMethodDeleteOptions;
 exports.PaymentMethodDeleteSubmit = PaymentMethodDeleteSubmit;
 exports.PaymentMethodDeleteView = PaymentMethodDeleteView;
 exports.PaymentMethodSelectContainer = PaymentMethodSelectContainer;