@pelcro/react-pelcro-js 3.36.0 → 3.37.0

package/dist/index.cjs.js

@@ -3363,12 +3363,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
 };
@@ -9589,6 +9596,17 @@ const getPaymentCardIcon$1 = name => {
     }), /*#__PURE__*/React__default['default'].createElement("path", {
       fill: "#FFF",
       d: "M22.255 20l-2.113 4.683L18.039 20h-2.695v6.726L12.341 20h-2.274L7 26.981h1.815l.671-1.558h3.432l.682 1.558h3.465v-5.185l2.299 5.185h1.563l2.351-5.095v5.095H25V20H22.255zM10.135 23.915l1.026-2.44 1.066 2.44H10.135zM37.883 23.413L41 20.018h-2.217l-1.994 2.164L34.86 20H28v6.982h6.635l2.092-2.311L38.767 27h2.21L37.883 23.413zM33.728 25.516h-4.011v-1.381h3.838v-1.323h-3.838v-1.308l4.234.012 1.693 1.897L33.728 25.516z"
+    })),
+    amex: /*#__PURE__*/React__default['default'].createElement("svg", {
+      className: "plc-w-16",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 48 48"
+    }, /*#__PURE__*/React__default['default'].createElement("path", {
+      fill: "#1976D2",
+      d: "M45,35c0,2.209-1.791,4-4,4H7c-2.209,0-4-1.791-4-4V13c0-2.209,1.791-4,4-4h34c2.209,0,4,1.791,4,4V35z"
+    }), /*#__PURE__*/React__default['default'].createElement("path", {
+      fill: "#FFF",
+      d: "M22.255 20l-2.113 4.683L18.039 20h-2.695v6.726L12.341 20h-2.274L7 26.981h1.815l.671-1.558h3.432l.682 1.558h3.465v-5.185l2.299 5.185h1.563l2.351-5.095v5.095H25V20H22.255zM10.135 23.915l1.026-2.44 1.066 2.44H10.135zM37.883 23.413L41 20.018h-2.217l-1.994 2.164L34.86 20H28v6.982h6.635l2.092-2.311L38.767 27h2.21L37.883 23.413zM33.728 25.516h-4.011v-1.381h3.838v-1.323h-3.838v-1.308l4.234.012 1.693 1.897L33.728 25.516z"
     }))
   };
   return name ? icons[name.toLowerCase()] : /*#__PURE__*/React__default['default'].createElement("svg", {
@@ -9640,6 +9658,19 @@ 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: {
@@ -12610,8 +12641,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";
@@ -18125,6 +18156,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             content: t("messages.sourceCreated")
           }
         });
+        refreshUser();
         onSuccess(res);
       });
     }
@@ -18179,6 +18211,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
                   }
                 });
               }
+              refreshUser();
               onSuccess(res);
             });
           }, 2000);
@@ -18240,6 +18273,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             content: t("messages.sourceUpdated")
           }
         });
+        refreshUser();
         onSuccess(res);
       });
     }
@@ -18798,6 +18832,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             type: LOADING,
             payload: false
           });
+          refreshUser();
           onSuccess(res);
           return;
         }
@@ -18813,6 +18848,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
               content: t("messages.sourceCreated")
             }
           });
+          refreshUser();
           onSuccess(res);
           return;
         }
@@ -18832,6 +18868,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
               content: t("messages.sourceUpdated")
             }
           });
+          refreshUser();
           onSuccess(res);
           return;
         }
@@ -18859,6 +18896,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
                   }
                 });
               }
+              refreshUser();
               onSuccess(res);
             });
           }, 2000);
@@ -18890,7 +18928,8 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
         address_id: product.address_required ? selectedAddressId : null
       }, (err, res) => {
-        if (res.data.setup_intent) {
+        var _res$data;
+        if (res !== null && res !== void 0 && (_res$data = res.data) !== null && _res$data !== void 0 && _res$data.setup_intent) {
           return confirmStripeIntentSetup(res, "subCreate");
         }
         confirmStripeCardPayment(res, err, true);
@@ -19156,7 +19195,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         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;
+        var _res$data2, _res$data2$setup_inte, _res$data3, _res$data3$setup_inte;
         if (err) {
           dispatch({
             type: DISABLE_SUBMIT,
@@ -19175,7 +19214,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             }
           });
         }
-        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") {
+        if (((_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_action" || ((_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_confirmation") {
           confirmStripeIntentSetup(res, "create");
         } else {
           dispatch({
@@ -19189,6 +19228,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
               content: t("messages.sourceCreated")
             }
           });
+          refreshUser();
           onSuccess(res);
         }
       });
@@ -19211,7 +19251,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;
+      var _res$data4, _res$data4$setup_inte, _res$data5, _res$data5$setup_inte;
       dispatch({
         type: DISABLE_SUBMIT,
         payload: false
@@ -19230,7 +19270,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           }
         });
       }
-      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") {
+      if (((_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_action" || ((_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_confirmation") {
         confirmStripeIntentSetup(res, "update");
       } else {
         dispatch({
@@ -19240,6 +19280,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             content: t("messages.sourceUpdated")
           }
         });
+        refreshUser();
         onSuccess(res);
       }
     });
@@ -19272,7 +19313,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         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;
+        var _res$data6, _res$data6$setup_inte, _res$data7, _res$data7$setup_inte;
         if (err) {
           onFailure(err);
           return dispatch({
@@ -19283,7 +19324,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             }
           });
         }
-        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") {
+        if (((_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_action" || ((_res$data7 = res.data) === null || _res$data7 === void 0 ? void 0 : (_res$data7$setup_inte = _res$data7.setup_intent) === null || _res$data7$setup_inte === void 0 ? void 0 : _res$data7$setup_inte.status) === "requires_confirmation") {
           confirmStripeIntentSetup(res, "replace", paymentMethodId);
         } else {
           setTimeout(() => {
@@ -19309,6 +19350,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
                   }
                 });
               }
+              refreshUser();
               onSuccess(res);
             });
           }, 2000);
@@ -19404,12 +19446,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         coupon_code: state === null || state === void 0 ? void 0 : state.couponCode,
         address_id: selectedAddressId
       }, (error, res) => {
-        var _res$data7, _res$data8;
+        var _res$data8, _res$data9;
         if (error) {
           return reject(error);
         }
-        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;
+        const taxAmount = (_res$data8 = res.data) === null || _res$data8 === void 0 ? void 0 : _res$data8.taxes;
+        const totalAmountWithTax = (_res$data9 = res.data) === null || _res$data9 === void 0 ? void 0 : _res$data9.total;
         resolve({
           totalAmountWithTax,
           taxAmount
@@ -25335,7 +25377,8 @@ const PasswordResetContainer = _ref => {
       email,
       password,
       password_confirmation: confirmPassword,
-      token
+      token,
+      referer: window.location.origin
     }, (err, res) => {
       dispatch({
         type: DISABLE_SUBMIT,
@@ -25567,7 +25610,8 @@ const PasswordForgotContainer = _ref => {
       email
     } = _ref2;
     window.Pelcro.password.forgot({
-      email
+      email,
+      referer: window.location.origin
     }, (err, res) => {
       dispatch({
         type: DISABLE_SUBMIT,
@@ -27692,17 +27736,21 @@ const AddressSelectModal = _ref => {
 AddressSelectModal.viewId = "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") {
     return paymentMethodsWithoutDefault;
   }
   return [defaultPaymentMethod, ...paymentMethodsWithoutDefault];
 };
+const getDefaultPaymentMethod = paymentMethods => {
+  const defaultPaymentMethod = paymentMethods.find(paymentMethod => paymentMethod.is_default);
+  return defaultPaymentMethod;
+};
 const initialState$5 = {
   paymentMethods: [],
   selectedPaymentMethodId: null,
+  skeletonLoader: true,
   isSubmitting: false,
   alert: {
     type: "error",
@@ -27733,12 +27781,11 @@ const PaymentMethodSelectContainer = _ref => {
     });
     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);
     }
@@ -27755,7 +27802,12 @@ const PaymentMethodSelectContainer = _ref => {
         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:
         return lib_5({
@@ -27767,10 +27819,23 @@ const PaymentMethodSelectContainer = _ref => {
     }
   }, initialState$5);
   React.useEffect(() => {
-    var _window$Pelcro$user$r3;
-    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 : []
+    window.Pelcro.paymentMethods.list({
+      auth_token: window.Pelcro.user.read().auth_token
+    }, (err, res) => {
+      if (err) {
+        return console.error(err);
+      }
+      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", {
@@ -27799,7 +27864,8 @@ const PaymentMethodSelectList = () => {
     dispatch,
     state: {
       paymentMethods,
-      selectedPaymentMethodId
+      selectedPaymentMethodId,
+      skeletonLoader
     }
   } = React.useContext(store$5);
   const handlePaymentMethodSelect = event => {
@@ -27808,7 +27874,9 @@ const PaymentMethodSelectList = () => {
       payload: event.target.value
     });
   };
-  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;
@@ -27831,7 +27899,7 @@ const PaymentMethodSelectList = () => {
     }, "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ", (_paymentMethod$proper2 = paymentMethod.properties) === null || _paymentMethod$proper2 === void 0 ? void 0 : _paymentMethod$proper2.last4), /*#__PURE__*/React__default['default'].createElement("p", {
       className: "plc-text-sm plc-text-gray-500"
     }, t("select.expires"), " ", (_paymentMethod$proper3 = paymentMethod.properties) === null || _paymentMethod$proper3 === void 0 ? void 0 : _paymentMethod$proper3.exp_month, "/", (_paymentMethod$proper4 = paymentMethod.properties) === null || _paymentMethod$proper4 === void 0 ? void 0 : _paymentMethod$proper4.exp_year))));
-  }));
+  })));
 };
 
 const PaymentMethodSelectSubmit = _ref => {
@@ -27933,10 +28001,10 @@ const initialState$4 = {
   paymentMethods: [],
   selectedPaymentMethodId: null,
   isSubmitting: false,
-  deleteOption: "",
-  disableSubmit: false,
+  disableSubmit: true,
   isLoading: false,
   skeletonLoader: true,
+  showPaymentMethodSelect: false,
   alert: {
     type: "error",
     content: ""
@@ -27973,20 +28041,19 @@ const PaymentMethodDeleteContainer = _ref => {
           type: SKELETON_LOADER,
           payload: false
         });
-        if (res.data.length !== 1) {
-          dispatch({
-            type: SET_DELETE_PAYMENT_METHOD_OPTION,
-            payload: "select"
-          });
-        } else {
+        if (res.data.length !== 1 && paymentMethodToDelete.is_default && paymentMethodToDelete.deletable) {
           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 {
@@ -27998,6 +28065,15 @@ const PaymentMethodDeleteContainer = _ref => {
       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,
@@ -28020,6 +28096,14 @@ const PaymentMethodDeleteContainer = _ref => {
       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({
@@ -28030,14 +28114,6 @@ const PaymentMethodDeleteContainer = _ref => {
           }
         });
       }
-      dispatch({
-        type: DISABLE_SUBMIT,
-        payload: false
-      });
-      dispatch({
-        type: LOADING,
-        payload: false
-      });
       onSuccess(res);
     });
   };
@@ -28053,11 +28129,12 @@ const PaymentMethodDeleteContainer = _ref => {
           ...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:
         return lib_7({
@@ -28084,6 +28161,11 @@ const PaymentMethodDeleteContainer = _ref => {
           ...state,
           skeletonLoader: action.payload
         });
+      case SHOW_PAYMENT_METHOD_SELECT:
+        return lib_7({
+          ...state,
+          showPaymentMethodSelect: action.payload
+        });
       default:
         return state;
     }
@@ -28106,6 +28188,91 @@ const PaymentMethodDeleteContainer = _ref => {
   })));
 };
 
+const PaymentMethodDeleteList = props => {
+  const {
+    t
+  } = useTranslation("paymentMethod");
+  const {
+    dispatch,
+    state: {
+      selectedPaymentMethodId,
+      paymentMethods,
+      skeletonLoader,
+      showPaymentMethodSelect
+    }
+  } = React.useContext(store$4);
+  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 => /*#__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,
+      payload: event.target.value
+    });
+  };
+  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 PaymentMethodDetails = () => {
+  var _paymentMethodToDelet, _paymentMethodToDelet2, _paymentMethodToDelet3, _paymentMethodToDelet4;
+  const {
+    state: {
+      skeletonLoader
+    }
+  } = React.useContext(store$4);
+  const {
+    t
+  } = useTranslation("paymentMethod");
+  const {
+    paymentMethodToDelete
+  } = usePelcro();
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-text-left plc-mr-auto plc-mb-6"
+  }, /*#__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-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$1((_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"
+  }, "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022", " ", (_paymentMethodToDelet2 = paymentMethodToDelete.properties) === null || _paymentMethodToDelet2 === void 0 ? void 0 : _paymentMethodToDelet2.last4), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-text-sm plc-text-gray-500"
+  }, t("select.expires"), " ", (_paymentMethodToDelet3 = paymentMethodToDelete.properties) === null || _paymentMethodToDelet3 === void 0 ? void 0 : _paymentMethodToDelet3.exp_month, "/", (_paymentMethodToDelet4 = paymentMethodToDelete.properties) === null || _paymentMethodToDelet4 === void 0 ? void 0 : _paymentMethodToDelet4.exp_year))))));
+};
+
 const PaymentMethodDeleteSubmit = _ref => {
   let {
     name,
@@ -28119,7 +28286,9 @@ const PaymentMethodDeleteSubmit = _ref => {
     dispatch,
     state: {
       isLoading,
-      isDisabled
+      disableSubmit,
+      showPaymentMethodSelect,
+      selectedPaymentMethodId
     }
   } = React.useContext(store$4);
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
@@ -28129,116 +28298,38 @@ const PaymentMethodDeleteSubmit = _ref => {
       });
       onClick === null || onClick === void 0 ? void 0 : onClick();
     },
-    disabled: isDisabled,
+    disabled: showPaymentMethodSelect ? !selectedPaymentMethodId : disableSubmit,
     isLoading: isLoading,
     className: "plc-w-full"
-  }, otherProps), name !== null && name !== void 0 ? name : t("select.buttons.selectPaymentMethod"));
+  }, otherProps), name !== null && name !== void 0 ? name : t("delete.buttons.delete"));
 };
 
-const PaymentMethodDeleteList = props => {
+const PaymentMethodDeleteBack = _ref => {
+  let {
+    name,
+    onClick,
+    ...otherProps
+  } = _ref;
   const {
     t
   } = useTranslation("paymentMethod");
   const {
-    dispatch,
-    state: {
-      deleteOption,
-      selectedPaymentMethodId,
-      paymentMethods,
-      skeletonLoader
-    }
-  } = React.useContext(store$4);
-  const {
-    paymentMethodToDelete
+    switchView
   } = usePelcro();
-  const handlePaymentMethodSelect = event => {
-    dispatch({
-      type: SELECT_PAYMENT_METHOD,
-      payload: event.target.value
-    });
-  };
-  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;
-    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$1((_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"
-    }, "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022", " ", (_paymentMethod$proper2 = paymentMethod.properties) === null || _paymentMethod$proper2 === void 0 ? void 0 : _paymentMethod$proper2.last4), /*#__PURE__*/React__default['default'].createElement("p", {
-      className: "plc-text-sm plc-text-gray-500"
-    }, t("select.expires"), " ", (_paymentMethod$proper3 = paymentMethod.properties) === null || _paymentMethod$proper3 === void 0 ? void 0 : _paymentMethod$proper3.exp_month, "/", (_paymentMethod$proper4 = paymentMethod.properties) === null || _paymentMethod$proper4 === void 0 ? void 0 : _paymentMethod$proper4.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
-  })));
+  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"));
 };
 
-const PaymentMethodDeleteOptions = _ref => {
-  const {
-    state: {
-      deleteOption,
-      paymentMethods,
-      skeletonLoader
-    },
-    dispatch
-  } = React.useContext(store$4);
+function PaymentMethodDeleteView(props) {
   const {
     t
   } = useTranslation("paymentMethod");
-  const handleOptionSelect = event => {
-    dispatch({
-      type: SET_DELETE_PAYMENT_METHOD_OPTION,
-      payload: event.target.value
-    });
-  };
-  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("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"))));
-};
-
-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("div", {
@@ -28246,12 +28337,12 @@ function PaymentMethodDeleteView(props) {
   }, /*#__PURE__*/React__default['default'].createElement("h4", {
     className: "plc-text-2xl plc-font-semibold plc-mb-2"
   }, t("delete.title")), /*#__PURE__*/React__default['default'].createElement("p", {
-    className: ""
-  }, t("delete.subtitle"))), /*#__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
-  })));
+    className: "plc-text-sm"
+  }, t("delete.subtitle"))), /*#__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 => {
@@ -28278,7 +28369,7 @@ const PaymentMethodDeleteModal = props => {
         nonInteraction: true
       });
     }
-    notify$1.success(t("delete.paymentMethodReplaced"));
+    notify$1.success(t("delete.deletedSuccessfully"));
     resetView();
   };
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
@@ -29464,6 +29555,14 @@ const getPaymentCardIcon = name => {
       viewBox: "0 0 50 50"
     }, /*#__PURE__*/React__default['default'].createElement("path", {
       d: "M 5 7 C 2.25 7 0 9.25 0 12 L 0 38 C 0 40.75 2.25 43 5 43 L 45 43 C 47.75 43 50 40.75 50 38 L 50 12 C 50 9.25 47.75 7 45 7 Z M 5 9 L 45 9 C 46.667969 9 48 10.332031 48 12 L 48 38 C 48 39.667969 46.667969 41 45 41 L 5 41 C 3.332031 41 2 39.667969 2 38 L 2 12 C 2 10.332031 3.332031 9 5 9 Z M 8.5625 19.90625 L 4.84375 28.40625 L 7.0625 28.40625 L 7.875 26.5 L 12.0625 26.5 L 12.875 28.40625 L 17.09375 28.40625 L 17.09375 22.09375 L 19.90625 28.40625 L 21.8125 28.40625 L 24.65625 22.1875 L 24.65625 28.40625 L 26.75 28.40625 L 26.75 19.90625 L 23.40625 19.90625 L 20.84375 25.625 L 18.28125 19.90625 L 15 19.90625 L 15 28.09375 L 11.34375 19.90625 Z M 29.5 19.90625 L 29.5 28.4375 L 37.5 28.4375 L 40 25.59375 L 42.46875 28.4375 L 45.125 28.4375 L 41.375 24.0625 L 45.125 19.90625 L 42.46875 19.90625 L 40.0625 22.5625 L 37.75 19.90625 Z M 9.90625 21.6875 L 11.21875 24.6875 L 8.65625 24.6875 Z M 31.5625 21.71875 L 36.65625 21.75 L 38.6875 24.0625 L 36.40625 26.625 L 31.5625 26.625 L 31.5625 24.9375 L 36.1875 24.9375 L 36.1875 23.3125 L 31.5625 23.3125 Z"
+    })),
+    amex: /*#__PURE__*/React__default['default'].createElement("svg", {
+      className: "plc-w-12",
+      fill: "#ffffff",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 50 50"
+    }, /*#__PURE__*/React__default['default'].createElement("path", {
+      d: "M 5 7 C 2.25 7 0 9.25 0 12 L 0 38 C 0 40.75 2.25 43 5 43 L 45 43 C 47.75 43 50 40.75 50 38 L 50 12 C 50 9.25 47.75 7 45 7 Z M 5 9 L 45 9 C 46.667969 9 48 10.332031 48 12 L 48 38 C 48 39.667969 46.667969 41 45 41 L 5 41 C 3.332031 41 2 39.667969 2 38 L 2 12 C 2 10.332031 3.332031 9 5 9 Z M 8.5625 19.90625 L 4.84375 28.40625 L 7.0625 28.40625 L 7.875 26.5 L 12.0625 26.5 L 12.875 28.40625 L 17.09375 28.40625 L 17.09375 22.09375 L 19.90625 28.40625 L 21.8125 28.40625 L 24.65625 22.1875 L 24.65625 28.40625 L 26.75 28.40625 L 26.75 19.90625 L 23.40625 19.90625 L 20.84375 25.625 L 18.28125 19.90625 L 15 19.90625 L 15 28.09375 L 11.34375 19.90625 Z M 29.5 19.90625 L 29.5 28.4375 L 37.5 28.4375 L 40 25.59375 L 42.46875 28.4375 L 45.125 28.4375 L 41.375 24.0625 L 45.125 19.90625 L 42.46875 19.90625 L 40.0625 22.5625 L 37.75 19.90625 Z M 9.90625 21.6875 L 11.21875 24.6875 L 8.65625 24.6875 Z M 31.5625 21.71875 L 36.65625 21.75 L 38.6875 24.0625 L 36.40625 26.625 L 31.5625 26.625 L 31.5625 24.9375 L 36.1875 24.9375 L 36.1875 23.3125 L 31.5625 23.3125 Z"
     }))
   };
   return (_icons$name$toLowerCa = icons[name === null || name === void 0 ? void 0 : name.toLowerCase()]) !== null && _icons$name$toLowerCa !== void 0 ? _icons$name$toLowerCa : /*#__PURE__*/React__default['default'].createElement("svg", {
@@ -30790,23 +30889,8 @@ class Dashboard extends React.Component {
       });
     });
     _defineProperty$3(this, "onDeletePaymentMethodClick", source => {
-      const isDeletable = source === null || source === void 0 ? void 0 : source.deletable;
-      if (isDeletable) {
-        this.props.onClose();
-        notify$1.confirm((onSuccess, onFailure) => {
-          this.deletePaymentMethod(source.id, onSuccess, onFailure);
-        }, {
-          confirmMessage: this.locale("messages.paymentMethodDeletion.isSureToDelete"),
-          loadingMessage: this.locale("messages.paymentMethodDeletion.loading"),
-          successMessage: this.locale("messages.paymentMethodDeletion.success"),
-          errorMessage: this.locale("messages.paymentMethodDeletion.error")
-        }, {
-          closeButtonLabel: this.locale("labels.subCancellation.goBack")
-        });
-      } else {
-        this.props.setPaymentMethodToDelete(source.id);
-        return this.props.setView("payment-method-delete");
-      }
+      this.props.setPaymentMethodToDelete(source.id);
+      return this.props.setView("payment-method-delete");
     });
     _defineProperty$3(this, "displayRedeem", () => {
       return this.props.setView("gift-redeem");
@@ -35303,7 +35387,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;