@pelcro/react-pelcro-js 3.26.0-beta.54 → 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";
@@ -29863,10 +29881,10 @@ const initialState$4 = {
   paymentMethods: [],
   selectedPaymentMethodId: null,
   isSubmitting: false,
-  deleteOption: "",
   disableSubmit: false,
   isLoading: false,
   skeletonLoader: true,
+  showPaymentMethodSelect: false,
   alert: {
     type: "error",
     content: ""
@@ -29903,20 +29921,15 @@ const PaymentMethodDeleteContainer = _ref => {
           type: SKELETON_LOADER,
           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
           });
         }
       }
     });
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [paymentMethodToDelete]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const setDefaultPaymentMethod = () => {
     const {
@@ -29927,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,
@@ -29950,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({
@@ -29960,14 +29990,6 @@ const PaymentMethodDeleteContainer = _ref => {
           }
         });
       }
-      dispatch({
-        type: DISABLE_SUBMIT,
-        payload: false
-      });
-      dispatch({
-        type: LOADING,
-        payload: false
-      });
       onSuccess(res);
     });
   };
@@ -29983,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({
@@ -30014,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;
     }
@@ -30036,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,
@@ -30049,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({
@@ -30059,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", {
@@ -30176,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 => {
@@ -30208,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, {
@@ -31394,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", {
@@ -32730,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");
@@ -37259,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;

package/dist/index.esm.js

@@ -3336,12 +3336,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
 };
@@ -9816,6 +9823,17 @@ const getPaymentCardIcon$1 = name => {
     }), /*#__PURE__*/React__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.createElement("svg", {
+      className: "plc-w-16",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 48 48"
+    }, /*#__PURE__*/React__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.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.createElement("svg", {
@@ -12981,8 +12999,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";
@@ -29833,10 +29851,10 @@ const initialState$4 = {
   paymentMethods: [],
   selectedPaymentMethodId: null,
   isSubmitting: false,
-  deleteOption: "",
   disableSubmit: false,
   isLoading: false,
   skeletonLoader: true,
+  showPaymentMethodSelect: false,
   alert: {
     type: "error",
     content: ""
@@ -29873,20 +29891,15 @@ const PaymentMethodDeleteContainer = _ref => {
           type: SKELETON_LOADER,
           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
           });
         }
       }
     });
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [paymentMethodToDelete]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const setDefaultPaymentMethod = () => {
     const {
@@ -29897,7 +29910,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 +29942,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 +29960,6 @@ const PaymentMethodDeleteContainer = _ref => {
           }
         });
       }
-      dispatch({
-        type: DISABLE_SUBMIT,
-        payload: false
-      });
-      dispatch({
-        type: LOADING,
-        payload: false
-      });
       onSuccess(res);
     });
   };
@@ -29953,11 +29975,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 +30007,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 +30034,91 @@ const PaymentMethodDeleteContainer = _ref => {
   })));
 };
 
+const PaymentMethodDeleteList = props => {
+  const {
+    t
+  } = useTranslation("paymentMethod");
+  const {
+    dispatch,
+    state: {
+      selectedPaymentMethodId,
+      paymentMethods,
+      skeletonLoader,
+      showPaymentMethodSelect
+    }
+  } = 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.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.createElement(React__default.Fragment, null, skeletonLoader ? /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-w-full plc-h-8 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
+    }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, paymentMethods && /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-mt-4"
+    }, /*#__PURE__*/React__default.createElement(Select, {
+      label: t("delete.options.select"),
+      name: "default-payment-method",
+      onChange: handlePaymentMethodSelect,
+      value: selectedPaymentMethodId
+    }, /*#__PURE__*/React__default.createElement("option", {
+      value: "",
+      disabled: true,
+      selected: true
+    }), createPaymentMethodItems()))));
+  } else {
+    return null;
+  }
+};
+
+const PaymentMethodDetails = () => {
+  var _paymentMethodToDelet, _paymentMethodToDelet2, _paymentMethodToDelet3, _paymentMethodToDelet4;
+  const {
+    state: {
+      skeletonLoader
+    }
+  } = useContext(store$4);
+  const {
+    t
+  } = useTranslation("paymentMethod");
+  const {
+    paymentMethodToDelete
+  } = usePelcro();
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-text-left plc-mr-auto plc-mb-6"
+  }, /*#__PURE__*/React__default.createElement("h4", {
+    className: "plc-mb-2"
+  }, t("delete.details")), skeletonLoader ? /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-w-full plc-h-16 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
+  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, paymentMethodToDelete && /*#__PURE__*/React__default.createElement("div", {
+    key: paymentMethodToDelete === null || paymentMethodToDelete === void 0 ? void 0 : paymentMethodToDelete.id,
+    className: `plc-p-2 plc-pl-4 plc-shadow-md_dark plc-text-gray-900 plc-rounded pelcro-payment-method-wrapper`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-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.createElement("div", {
+    className: "plc-flex plc-flex-col plc-text-lg pelcro-payment-method-details"
+  }, /*#__PURE__*/React__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.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 +30132,9 @@ const PaymentMethodDeleteSubmit = _ref => {
     dispatch,
     state: {
       isLoading,
-      isDisabled
+      isDisabled,
+      showPaymentMethodSelect,
+      selectedPaymentMethodId
     }
   } = useContext(store$4);
   return /*#__PURE__*/React__default.createElement(Button, Object.assign({
@@ -30029,116 +30144,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
-    }
-  } = useContext(store$4);
-  const {
-    paymentMethodToDelete
+    switchView
   } = usePelcro();
-  const handlePaymentMethodSelect = event => {
-    dispatch({
-      type: SELECT_PAYMENT_METHOD,
-      payload: event.target.value
-    });
-  };
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, skeletonLoader ? /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-w-full plc-h-40 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
-  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, paymentMethods && deleteOption === "select" && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-px-3 plc-py-2 plc-space-y-4 plc-overflow-y-scroll no-scrollbar plc-max-h-80 pelcro-payment-method-select-wrapper plc-mb-4"
-  }, paymentMethods.filter(paymentMethod => (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id) !== (paymentMethodToDelete === null || paymentMethodToDelete === void 0 ? void 0 : paymentMethodToDelete.id)).map(paymentMethod => {
-    var _paymentMethod$proper, _paymentMethod$proper2, _paymentMethod$proper3, _paymentMethod$proper4;
-    const isSelected = selectedPaymentMethodId === String(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id);
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id,
-      className: `plc-p-2 plc-pl-4 plc-shadow-md plc-text-gray-900 plc-rounded pelcro-payment-method-wrapper`
-    }, /*#__PURE__*/React__default.createElement(Radio, {
-      className: "plc-flex plc-items-center pelcro-select-payment-method-radio",
-      labelClassName: "plc-flex plc-items-center plc-space-x-2 plc-cursor-pointer plc-w-full",
-      id: `pelcro-payment-method-select-${paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id}`,
-      name: "paymentMethod",
-      checked: isSelected,
-      value: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id,
-      onChange: handlePaymentMethodSelect
-    }, getPaymentCardIcon$1((_paymentMethod$proper = paymentMethod.properties) === null || _paymentMethod$proper === void 0 ? void 0 : _paymentMethod$proper.brand), /*#__PURE__*/React__default.createElement("div", {
-      className: "plc-flex plc-flex-col plc-text-lg pelcro-payment-method-details"
-    }, /*#__PURE__*/React__default.createElement("p", {
-      className: "plc-font-semibold"
-    }, "\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.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.createElement("div", {
-    className: "plc-px-3"
-  }, /*#__PURE__*/React__default.createElement(PaymentMethodDeleteSubmit, null))), deleteOption === "add" && /*#__PURE__*/React__default.createElement(PaymentMethodView, {
-    type: "deletePaymentSource",
-    showCoupon: false,
-    showExternalPaymentMethods: false,
-    showApplePayButton: false,
-    onDisplay: props.onDisplay,
-    onFailure: props.onFailure,
-    onSuccess: props.onSuccess,
-    setAsDefault: true
-  })));
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
+    variant: "outline",
+    onClick: () => {
+      switchView("dashboard");
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    },
+    className: "plc-w-full"
+  }, otherProps), name !== null && name !== void 0 ? name : t("delete.buttons.back"));
 };
 
-const PaymentMethodDeleteOptions = _ref => {
-  const {
-    state: {
-      deleteOption,
-      paymentMethods,
-      skeletonLoader
-    },
-    dispatch
-  } = 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.createElement("div", {
-    className: "plc-text-left plc-mr-auto plc-mb-6"
-  }, skeletonLoader ? /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-flex plc-flex-col plc-space-y-3"
-  }, /*#__PURE__*/React__default.createElement(Radio, {
-    className: "plc-animate-puls"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-w-36 plc-bg-gray-300 plc-h-4 plc-rounded-md plc-animate-pulse"
-  })), /*#__PURE__*/React__default.createElement(Radio, {
-    className: "plc-animate-pulse"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-w-36 plc-bg-gray-300 plc-h-4 plc-rounded-md plc-animate-pulse"
-  }))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, paymentMethods && paymentMethods.length !== 1 && /*#__PURE__*/React__default.createElement(Radio, {
-    onChange: handleOptionSelect,
-    checked: deleteOption === "select",
-    value: "select"
-  }, t("delete.options.select")), /*#__PURE__*/React__default.createElement(Radio, {
-    onChange: handleOptionSelect,
-    checked: deleteOption === "add",
-    value: "add"
-  }, t("delete.options.add"))));
-};
-
-function PaymentMethodDeleteView(props) {
-  const [t] = useTranslation("paymentMethod");
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-payment-method-delete-view"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -30146,12 +30183,12 @@ function PaymentMethodDeleteView(props) {
   }, /*#__PURE__*/React__default.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold plc-mb-2"
   }, t("delete.title")), /*#__PURE__*/React__default.createElement("p", {
-    className: ""
-  }, t("delete.subtitle"))), /*#__PURE__*/React__default.createElement(PaymentMethodDeleteContainer, props, /*#__PURE__*/React__default.createElement(AlertWithContext, {
-    className: "plc-mb-2"
-  }), /*#__PURE__*/React__default.createElement(PaymentMethodDeleteOptions, null), /*#__PURE__*/React__default.createElement(PaymentMethodDeleteList, {
-    onSuccess: props.onSuccess
-  })));
+    className: "plc-text-sm"
+  }, t("delete.subtitle"))), /*#__PURE__*/React__default.createElement(PaymentMethodDeleteContainer, props, /*#__PURE__*/React__default.createElement(AlertWithContext, null), /*#__PURE__*/React__default.createElement(PaymentMethodDetails, null), /*#__PURE__*/React__default.createElement(PaymentMethodDeleteList, null), /*#__PURE__*/React__default.createElement("p", {
+    className: "plc-text-sm plc-text-justify"
+  }, t("delete.message")), /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-space-x-0 plc-space-y-3 plc-w-full plc-flex plc-flex-col plc-items-center plc-justify-center plc-mt-4"
+  }, /*#__PURE__*/React__default.createElement(PaymentMethodDeleteSubmit, null), /*#__PURE__*/React__default.createElement(PaymentMethodDeleteBack, null))));
 }
 
 const PaymentMethodDeleteModal = props => {
@@ -30178,7 +30215,7 @@ const PaymentMethodDeleteModal = props => {
         nonInteraction: true
       });
     }
-    notify.success(t("delete.paymentMethodReplaced"));
+    notify.success(t("delete.deletedSuccessfully"));
     resetView();
   };
   return /*#__PURE__*/React__default.createElement(Modal, {
@@ -31364,6 +31401,14 @@ const getPaymentCardIcon = name => {
       viewBox: "0 0 50 50"
     }, /*#__PURE__*/React__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.createElement("svg", {
+      className: "plc-w-12",
+      fill: "#ffffff",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 50 50"
+    }, /*#__PURE__*/React__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.createElement("svg", {
@@ -32700,23 +32745,8 @@ class Dashboard extends 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");
@@ -37076,4 +37106,4 @@ const QrCodeModal = _ref => {
 };
 QrCodeModal.viewId = "qrcode";
 
-export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplePayButton, ApplyCouponButton, Auth0LoginButton, Badge, BankAuthenticationSuccess, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, DonationModalWithHook as DonationModal, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, IncludeFirstName, IncludeLastName, IncludePhone, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateFreeButton, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodCreateContainer, PaymentMethodCreateModal, PaymentMethodCreateView, PaymentMethodDeleteContainer, PaymentMethodDeleteList, PaymentMethodDeleteModal, PaymentMethodDeleteOptions, PaymentMethodDeleteSubmit, PaymentMethodDeleteView, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateSetDefault, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, TextInput, Tooltip, UserNameInput, UserUpdateButton, UserUpdateCompany, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateJobTitle, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, initPaywalls, initViewFromURL, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };
+export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplePayButton, ApplyCouponButton, Auth0LoginButton, Badge, BankAuthenticationSuccess, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, DonationModalWithHook as DonationModal, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, IncludeFirstName, IncludeLastName, IncludePhone, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateFreeButton, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodCreateContainer, PaymentMethodCreateModal, PaymentMethodCreateView, PaymentMethodDeleteContainer, PaymentMethodDeleteList, PaymentMethodDeleteModal, PaymentMethodDeleteSubmit, PaymentMethodDeleteView, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateSetDefault, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, TextInput, Tooltip, UserNameInput, UserUpdateButton, UserUpdateCompany, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateJobTitle, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, initPaywalls, initViewFromURL, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };

package/dist/pelcro.css

@@ -2191,6 +2191,10 @@ apple-pay-button {
   height: 3.5rem;
 }
 
+.pelcro-root .plc-h-16 {
+  height: 4rem;
+}
+
 .pelcro-root .plc-h-20 {
   height: 5rem;
 }
@@ -2207,10 +2211,6 @@ apple-pay-button {
   height: 9rem;
 }
 
-.pelcro-root .plc-h-40 {
-  height: 10rem;
-}
-
 .pelcro-root .plc-h-52 {
   height: 13rem;
 }
@@ -2694,6 +2694,11 @@ apple-pay-button {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.pelcro-root .plc-shadow-md_dark {
+  --tw-shadow: 0 0px 6px -1px rgba(0, 0, 0, 0.1), 0 0px 4px -1px rgba(0, 0, 0, 0.4);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .pelcro-root .plc-shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -2801,6 +2806,10 @@ apple-pay-button {
   text-align: center;
 }
 
+.pelcro-root .plc-text-justify {
+  text-align: justify;
+}
+
 .pelcro-root .plc-text-primary-400 {
   color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
 }
@@ -3288,17 +3297,8 @@ apple-pay-button {
 
 /* Hide scrollbar for Chrome, Safari and Opera */
 
-.no-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
 /* Hide scrollbar for IE, Edge and Firefox */
 
-.no-scrollbar {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
-
 @media (min-width: 640px) {
   .pelcro-root .sm\:plc-space-y-0 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-y-reverse: 0;

package/package.json

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