@pelcro/react-pelcro-js 3.26.0-beta.53 → 3.26.0-beta.55

package/dist/index.cjs.js

@@ -3366,12 +3366,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
 };
@@ -9846,6 +9853,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", {
@@ -13011,8 +13029,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";
@@ -18510,6 +18528,7 @@ class BraintreeGateway {
 const initialState$l = {
   disableSubmit: false,
   isLoading: false,
+  isSkeletonLoaded: false,
   disableCouponButton: false,
   couponObject: null,
   couponCode: "",
@@ -19233,6 +19252,10 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             }
           }
         };
+        dispatch({
+          type: SKELETON_LOADER,
+          payload: true
+        });
         return window.braintree.hostedFields.create(options);
       });
     }
@@ -19310,7 +19333,8 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             }
           });
         }
-        handleBraintreePayment(payload.nonce, state);
+        console.log(payload);
+        handleBraintreePayment(payload, state);
       });
     }).catch(error => {
       if (error) {
@@ -19319,16 +19343,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       }
     });
   };
-  const handleBraintreePayment = (braintreeNonce, state) => {
+  const handleBraintreePayment = (braintreePaymentRequest, state) => {
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+    const braintreeNonce = braintreePaymentRequest === null || braintreePaymentRequest === void 0 ? void 0 : braintreePaymentRequest.nonce;
     if (type === "createPayment") {
       handleBraintreeSubscription();
     } else if (type === "orderCreate") {
       purchase(new BraintreeGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce, state, dispatch);
     } else if (type === "invoicePayment") {
       payInvoice(new BraintreeGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce, dispatch);
-    } else if (type === "createPaymentSource" || type === "updatePaymentSource") {
+    } else if (type === "createPaymentSource") {
       createNewBraintreeCard();
+    } else if (type === "updatePaymentSource") {
+      updateBraintreeCard();
     } else if (type === "deletePaymentSource") {
       replaceBraintreeCard();
     }
@@ -19423,45 +19450,54 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         }
       });
     }
-
-    // TODO: Implement card update
-    // function updateBraintreeCard() {
-    //   const { id: paymentMethodId } = paymentMethodToEdit;
-
-    //   const { isDefault } = state;
-    //   window.Pelcro.paymentMethods.update(
-    //     {
-    //       auth_token: window.Pelcro.user.read().auth_token,
-    //       payment_method_id: paymentMethodId,
-    //       gateway: "braintree",
-    //       is_default: isDefault
-    //     },
-    //     (err, res) => {
-    //       dispatch({ type: DISABLE_SUBMIT, payload: false });
-    //       dispatch({ type: LOADING, payload: false });
-    //       if (err) {
-    //         onFailure(err);
-    //         return dispatch({
-    //           type: SHOW_ALERT,
-    //           payload: {
-    //             type: "error",
-    //             content: getErrorMessages(err)
-    //           }
-    //         });
-    //       }
-
-    //       dispatch({
-    //         type: SHOW_ALERT,
-    //         payload: {
-    //           type: "success",
-    //           content: t("messages.sourceUpdated")
-    //         }
-    //       });
-    //       onSuccess(res);
-    //     }
-    //   );
-    // }
-
+    function updateBraintreeCard() {
+      const {
+        id: paymentMethodId
+      } = paymentMethodToEdit;
+      const {
+        expirationMonth,
+        expirationYear
+      } = braintreePaymentRequest === null || braintreePaymentRequest === void 0 ? void 0 : braintreePaymentRequest.details;
+      const {
+        isDefault
+      } = state;
+      window.Pelcro.paymentMethods.update({
+        auth_token: window.Pelcro.user.read().auth_token,
+        payment_method_id: paymentMethodId,
+        token: braintreeNonce,
+        gateway: "braintree",
+        exp_month: expirationMonth,
+        exp_year: expirationYear,
+        is_default: isDefault
+      }, (err, res) => {
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        if (err) {
+          onFailure(err);
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+        }
+        dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "success",
+            content: t("messages.sourceUpdated")
+          }
+        });
+        onSuccess(res);
+      });
+    }
     function handleBraintreeSubscription() {
       const payment = new Payment(new BraintreeGateway());
       const createSubscription = !isGift && !subscriptionIdToRenew;
@@ -21146,6 +21182,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           ...state,
           isLoading: action.payload
         });
+      case SKELETON_LOADER:
+        return lib_7({
+          ...state,
+          isSkeletonLoaded: action.payload
+        });
       case SHOW_COUPON_FIELD:
         return lib_7({
           ...state,
@@ -21613,6 +21654,11 @@ const CheckoutForm = _ref => {
     paymentMethodToEdit
   } = usePelcro();
   const cardProcessor = getSiteCardProcessor();
+  const {
+    state: {
+      isSkeletonLoaded
+    }
+  } = React.useContext(store$l);
   if (selectedPaymentMethodId) {
     return null;
   }
@@ -21645,7 +21691,7 @@ const CheckoutForm = _ref => {
     }))));
   }
   if (cardProcessor === "braintree") {
-    return /*#__PURE__*/React__default['default'].createElement("div", {
+    return /*#__PURE__*/React__default['default'].createElement("div", null, isSkeletonLoaded ? /*#__PURE__*/React__default['default'].createElement("div", {
       className: "plc-max-w-[50em]"
     }, /*#__PURE__*/React__default['default'].createElement("label", {
       htmlFor: "card-number"
@@ -21664,7 +21710,9 @@ const CheckoutForm = _ref => {
     }, "CVV"), /*#__PURE__*/React__default['default'].createElement("div", {
       id: "cvv",
       className: "pelcro-input-field plc-h-12 plc-bg-white"
-    }))));
+    })))) : /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-w-full plc-h-36 plc-bg-gray-300 plc-rounded plc-animate-pulse"
+    }));
   }
   if (cardProcessor === "stripe") {
     if (type === "updatePaymentSource") {
@@ -29833,10 +29881,10 @@ const initialState$4 = {
   paymentMethods: [],
   selectedPaymentMethodId: null,
   isSubmitting: false,
-  deleteOption: "",
   disableSubmit: false,
   isLoading: false,
   skeletonLoader: true,
+  showPaymentMethodSelect: false,
   alert: {
     type: "error",
     content: ""
@@ -29873,20 +29921,15 @@ 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
           });
         }
       }
     });
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [paymentMethodToDelete]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const setDefaultPaymentMethod = () => {
     const {
@@ -29897,7 +29940,16 @@ const PaymentMethodDeleteContainer = _ref => {
       payment_method_id: paymentMethodId,
       is_default: true
     }, (err, res) => {
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: false
+      });
+      dispatch({
+        type: LOADING,
+        payload: false
+      });
       if (err) {
+        console.log(err);
         onFailure(err);
         return dispatch({
           type: SHOW_ALERT,
@@ -29920,6 +29972,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({
@@ -29930,14 +29990,6 @@ const PaymentMethodDeleteContainer = _ref => {
           }
         });
       }
-      dispatch({
-        type: DISABLE_SUBMIT,
-        payload: false
-      });
-      dispatch({
-        type: LOADING,
-        payload: false
-      });
       onSuccess(res);
     });
   };
@@ -29953,11 +30005,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({
@@ -29984,6 +30037,11 @@ const PaymentMethodDeleteContainer = _ref => {
           ...state,
           skeletonLoader: action.payload
         });
+      case SHOW_PAYMENT_METHOD_SELECT:
+        return lib_7({
+          ...state,
+          showPaymentMethodSelect: action.payload
+        });
       default:
         return state;
     }
@@ -30006,6 +30064,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,
@@ -30019,7 +30162,9 @@ const PaymentMethodDeleteSubmit = _ref => {
     dispatch,
     state: {
       isLoading,
-      isDisabled
+      isDisabled,
+      showPaymentMethodSelect,
+      selectedPaymentMethodId
     }
   } = React.useContext(store$4);
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
@@ -30029,116 +30174,38 @@ const PaymentMethodDeleteSubmit = _ref => {
       });
       onClick === null || onClick === void 0 ? void 0 : onClick();
     },
-    disabled: isDisabled,
+    disabled: showPaymentMethodSelect ? isDisabled || !selectedPaymentMethodId : isDisabled,
     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", {
@@ -30146,12 +30213,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 => {
@@ -30178,7 +30245,7 @@ const PaymentMethodDeleteModal = props => {
         nonInteraction: true
       });
     }
-    notify.success(t("delete.paymentMethodReplaced"));
+    notify.success(t("delete.deletedSuccessfully"));
     resetView();
   };
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
@@ -31364,6 +31431,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", {
@@ -32700,23 +32775,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.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");
@@ -37229,7 +37289,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;