@pelcro/react-pelcro-js 3.26.0-beta.28 → 3.26.0-beta.29

package/dist/index.cjs.js

@@ -3354,17 +3354,23 @@ var select$6 = {
 		changePaymentMethod: "Change"
 	}
 };
+var create$5 = {
+	title: "Add a new payment method",
+	subtitle: "Enter the fields below to add your credit card information"
+};
 var paymentMethod_en = {
 	update: update$3,
 	select: select$6,
 	"delete": {
-	title: "Active subscriptions are linked to this payment method.",
-	subtitle: "Please choose an existing card or add a new payment method.",
+	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.",
 	options: {
 		select: "Select an existing payment method",
 		add: "Add a new payment method"
-	}
-}
+	},
+	paymentMethodReplaced: "Payment Method Successfully Deleted and Replaced"
+},
+	create: create$5
 };
 
 var title$z = "Enter your email to subscribe to our newsletter";
@@ -4300,9 +4306,23 @@ var select$4 = {
 		changePaymentMethod: "Modifier"
 	}
 };
+var create$4 = {
+	title: "Ajouter un nouveau mode de paiement",
+	subtitle: "Saisissez les champs ci-dessous pour ajouter les informations relatives à votre carte de crédit"
+};
 var paymentMethod_fr = {
 	update: update$2,
-	select: select$4
+	select: select$4,
+	"delete": {
+	title: "Supprimer un mode de paiement",
+	subtitle: "Ce mode de paiement peut être associé à des abonnements actifs ou servir de mode de paiement par défaut. Veuillez choisir parmi les options disponibles ci-dessous pour le remplacement.",
+	options: {
+		select: "Sélectionner un mode de paiement existant",
+		add: "Ajouter un nouveau mode de paiement"
+	},
+	paymentMethodReplaced: "Méthode de paiement supprimée et remplacée avec succès"
+},
+	create: create$4
 };
 
 var title$q = "Entrez votre adresse courriel pour vous abonner à notre infolettre";
@@ -4405,6 +4425,7 @@ var labels$P = {
 	lastName: "Nom de famille",
 	phone: "Téléphoner",
 	freeItems: "Articles gratuits",
+	isDefault: "Défini comme valeur par défaut",
 	order: "Commande",
 	amount: "Montant",
 	email: "Courriel",
@@ -5227,9 +5248,23 @@ var select$2 = {
 		changePaymentMethod: "변경"
 	}
 };
+var create$3 = {
+	title: "새 결제 방법 추가",
+	subtitle: "신용카드 정보를 추가하려면 아래 입력란을 입력하세요."
+};
 var paymentMethod_ko = {
 	update: update$1,
-	select: select$2
+	select: select$2,
+	"delete": {
+	title: "결제 방법 삭제",
+	subtitle: "이 결제 방법은 활성 구독과 연결되거나 기본 결제 방법으로 사용될 수 있습니다. 아래에서 사용 가능한 옵션 중에서 선택하여 대체하세요.",
+	options: {
+		select: "기존 결제 방법 선택",
+		add: "새 결제 방법 추가"
+	},
+	paymentMethodReplaced: "결제 방법 삭제 및 교체 성공"
+},
+	create: create$3
 };
 
 var title$h = "Frieze 뉴스레터를 구독하려면 이메일을 입력하세요.";
@@ -5335,7 +5370,8 @@ var labels$x = {
 	order: "주문",
 	amount: "금액",
 	email: "이메일",
-	password: "비밀번호"
+	password: "비밀번호",
+	isDefault: "기본값으로 설정"
 };
 var checkoutForm_ko = {
 	messages: messages$y,
@@ -6259,9 +6295,23 @@ var select = {
 		changePaymentMethod: "Cambiar"
 	}
 };
+var create$2 = {
+	title: "Añadir un nuevo método de pago",
+	subtitle: "Introduzca los campos siguientes para añadir los datos de su tarjeta de crédito"
+};
 var paymentMethod_es = {
 	update: update,
-	select: select
+	select: select,
+	"delete": {
+	title: "Eliminar método de pago",
+	subtitle: "Este método de pago podría estar asociado a suscripciones activas o servir como método de pago predeterminado. Elija entre las opciones disponibles a continuación para sustituirlo.",
+	options: {
+		select: "Seleccione un método de pago existente",
+		add: "Añadir un nuevo método de pago"
+	},
+	paymentMethodReplaced: "Método de pago eliminado y sustituido correctamente"
+},
+	create: create$2
 };
 
 var title$8 = "Ingresa tu correo para suscribirte a nuestro boletín";
@@ -6367,7 +6417,8 @@ var labels$f = {
 	order: "Pida",
 	amount: "Importe",
 	email: "Correo",
-	password: "Contraseña"
+	password: "Contraseña",
+	isDefault: "Fijar por defecto"
 };
 var checkoutForm_es = {
 	messages: messages$f,
@@ -9407,6 +9458,9 @@ const initialState$o = {
   couponCode: null,
   // memberships
   selectedMembership: null,
+  // paymentMethods
+  paymentMethodToDelete: null,
+  paymentMethodToEdit: null,
   // User
   isAuthenticated: () => window.Pelcro.user.isAuthenticated(),
   selectedPaymentMethodId: null,
@@ -12842,6 +12896,7 @@ const SET_CONFIRM_PASSWORD = "SET_CONFIRM_PASSWORD";
 const CONFIRM_PASSWORD_USED = "CONFIRM_PASSWORD_USED";
 const DISABLE_SUBMIT = "DISABLE_SUBMIT";
 const LOADING = "LOADING";
+const SKELETON_LOADER = "SKELETON_LOADER";
 const SUBMIT_PAYMENT = "SUBMIT_PAYMENT";
 const SUBSCRIBE = "CREATE_SUBSCRIPTION";
 const HANDLE_PAYPAL_SUBSCRIPTION = "HANDLE_PAYPAL_SUBSCRIPTION";
@@ -18292,7 +18347,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       purchase(new CybersourceGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, state, dispatch);
     } else if (type === "invoicePayment") {
       payInvoice(new CybersourceGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, dispatch);
-    } else if (type === "updatePaymentSource") {
+    } else if (type === "createPaymentSource" || type === "updatePaymentSource") {
       createNewCybersourceCard();
     }
     function createNewCybersourceCard() {
@@ -18622,7 +18677,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       purchase(new TapGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, state, dispatch);
     } else if (type === "invoicePayment") {
       payInvoice(new TapGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, dispatch);
-    } else if (type === "updatePaymentSource") {
+    } else if (type === "createPaymentSource" || type === "updatePaymentSource") {
       createNewTapCard();
     }
     function createNewTapCard() {
@@ -18833,12 +18888,10 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       purchase(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, state, dispatch);
     } else if (type === "invoicePayment") {
       payInvoice(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, dispatch);
+    } else if (type === "createPaymentSource") {
+      createNewVantivCard();
     } else if (type === "updatePaymentSource") {
-      if (paymentMethodToEdit) {
-        updateVantivCard();
-      } else {
-        createNewVantivCard();
-      }
+      updateVantivCard();
     } else if (type === "deletePaymentSource") {
       replaceVantivCard();
     }
@@ -18908,15 +18961,15 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           payment_method_id: paymentMethodId
         }, (err, res) => {
           if (err) {
-            return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+            onFailure === null || onFailure === void 0 ? void 0 : 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);
         });
       });
@@ -19807,7 +19860,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       }
     });
   };
-  const updatePaymentSource = (state, dispatch) => {
+  const createPaymentSource = (state, dispatch) => {
     return stripe.createSource({
       type: "card"
     }).then(_ref8 => {
@@ -19861,6 +19914,120 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       });
     });
   };
+  const updatePaymentSource = (state, dispatch) => {
+    const {
+      isDefault,
+      month,
+      year
+    } = state;
+    const {
+      id: paymentMethodId
+    } = paymentMethodToEdit;
+    window.Pelcro.paymentMethods.update({
+      auth_token: window.Pelcro.user.read().auth_token,
+      payment_method_id: paymentMethodId,
+      gateway: "stripe",
+      exp_month: month,
+      exp_year: year,
+      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);
+    });
+  };
+  const replacePaymentSource = (state, dispatch) => {
+    const {
+      id: paymentMethodId
+    } = paymentMethodToDelete;
+    return stripe.createSource({
+      type: "card"
+    }).then(_ref9 => {
+      var _source$card3;
+      let {
+        source,
+        error
+      } = _ref9;
+      if (error) {
+        return handlePaymentError(error);
+      }
+
+      // We don't support source creation for 3D secure yet
+      if ((source === null || source === void 0 ? void 0 : (_source$card3 = source.card) === null || _source$card3 === void 0 ? void 0 : _source$card3.three_d_secure) === "required") {
+        return handlePaymentError({
+          error: {
+            message: t("messages.cardAuthNotSupported")
+          }
+        });
+      }
+      window.Pelcro.paymentMethods.create({
+        auth_token: window.Pelcro.user.read().auth_token,
+        token: source.id
+      }, (err, res) => {
+        if (err) {
+          onFailure(err);
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+        }
+        if (res) {
+          setTimeout(() => {
+            window.Pelcro.paymentMethods.deletePaymentMethod({
+              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({
+                  type: SHOW_ALERT,
+                  payload: {
+                    type: "error",
+                    content: getErrorMessages(err)
+                  }
+                });
+              }
+              onSuccess(res);
+            });
+          }, 1000);
+        }
+      });
+    });
+  };
   const updatePaymentRequest = state => {
     var _state$paymentRequest;
     state === null || state === void 0 ? void 0 : (_state$paymentRequest = state.paymentRequest) === null || _state$paymentRequest === void 0 ? void 0 : _state$paymentRequest.update({
@@ -19940,12 +20107,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     }
     stripe.createSource({
       type: "card"
-    }).then(_ref9 => {
-      var _ref10, _ref11, _state$updatedPrice;
+    }).then(_ref10 => {
+      var _ref11, _ref12, _state$updatedPrice;
       let {
         source,
         error
-      } = _ref9;
+      } = _ref10;
       if (error) {
         return handlePaymentError(error);
       }
@@ -19964,7 +20131,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           return total + item.price * item.quantity;
         }, 0);
       };
-      (_ref10 = (_ref11 = (_state$updatedPrice = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref11 !== void 0 ? _ref11 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref10 !== void 0 ? _ref10 : getOrderItemsTotal();
+      (_ref11 = (_ref12 = (_state$updatedPrice = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref12 !== void 0 ? _ref12 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref11 !== void 0 ? _ref11 : getOrderItemsTotal();
       return handlePayment(source);
     }).catch(error => {
       return handlePaymentError(error);
@@ -20208,9 +20375,15 @@ const PaymentMethodContainerWithoutStripe = _ref => {
               });
             }
           }
+          if (type === "createPaymentSource") {
+            return createPaymentSource(state, dispatch);
+          }
           if (type === "updatePaymentSource") {
             return updatePaymentSource(state, dispatch);
           }
+          if (type === "deletePaymentSource") {
+            return replacePaymentSource(state, dispatch);
+          }
           if (!isAuthenticated() && plan.type === "donation") {
             return sendRegisterRequest(state, () => submitPayment(state));
           } else {
@@ -20598,7 +20771,10 @@ const PelcroPaymentRequestButton = props => {
   }
   return null;
 };
-const CheckoutForm = () => {
+const CheckoutForm = _ref => {
+  let {
+    type
+  } = _ref;
   const {
     selectedPaymentMethodId
   } = usePelcro();
@@ -20635,6 +20811,21 @@ const CheckoutForm = () => {
     }))));
   }
   if (cardProcessor === "stripe") {
+    if (type === "updatePaymentSource") {
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-flex plc-items-end plc-justify-between plc-my-2"
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-w-6/12 plc-pr-4"
+      }, /*#__PURE__*/React__default['default'].createElement(MonthSelect, {
+        store: store$l,
+        placeholder: "Exp Month *"
+      })), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-w-6/12"
+      }, /*#__PURE__*/React__default['default'].createElement(YearSelect, {
+        store: store$l,
+        placeholder: "Exp Year *"
+      })));
+    }
     return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(PelcroCardNumber, {
       autoFocus: true
     }), /*#__PURE__*/React__default['default'].createElement("img", {
@@ -21829,7 +22020,9 @@ function PaymentMethodView(_ref) {
     label: t("labels.email"),
     required: true,
     autoFocus: true
-  })), /*#__PURE__*/React__default['default'].createElement(CheckoutForm, null), showCoupon && /*#__PURE__*/React__default['default'].createElement("div", {
+  })), /*#__PURE__*/React__default['default'].createElement(CheckoutForm, {
+    type: type
+  }), showCoupon && /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-mb-2"
   }, /*#__PURE__*/React__default['default'].createElement(CouponCode, null), /*#__PURE__*/React__default['default'].createElement(DiscountedPrice, null)), /*#__PURE__*/React__default['default'].createElement(TaxAmount, null), type === "updatePaymentSource" && /*#__PURE__*/React__default['default'].createElement(PaymentMethodUpdateSetDefault, {
     id: "pelcro-input-is-default",
@@ -28548,7 +28741,10 @@ const initialState$4 = {
   paymentMethods: [],
   selectedPaymentMethodId: null,
   isSubmitting: false,
-  deleteOption: "add",
+  deleteOption: "",
+  disableSubmit: false,
+  isLoading: false,
+  skeletonLoader: true,
   alert: {
     type: "error",
     content: ""
@@ -28581,28 +28777,32 @@ const PaymentMethodDeleteContainer = _ref => {
           type: SET_PAYMENT_METHODS,
           payload: res.data
         });
-        // if (res.data.length !== 1) {
-        //   dispatch({
-        //     type: SET_DELETE_PAYMENT_METHOD_OPTION,
-        //     payload: "select"
-        //   });
-        // } else {
-        //   dispatch({
-        //     type: SET_DELETE_PAYMENT_METHOD_OPTION,
-        //     payload: "add"
-        //   });
-        // }
+        dispatch({
+          type: SKELETON_LOADER,
+          payload: false
+        });
+        if (res.data.length !== 1) {
+          dispatch({
+            type: SET_DELETE_PAYMENT_METHOD_OPTION,
+            payload: "select"
+          });
+        } else {
+          dispatch({
+            type: SET_DELETE_PAYMENT_METHOD_OPTION,
+            payload: "add"
+          });
+        }
       }
     });
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   const setDefaultPaymentMethod = () => {
     const {
       selectedPaymentMethodId: paymentMethodId
     } = state;
-    window.Pelcro.paymentMethods.update({
+    window.Pelcro.paymentMethods.setDefaultPaymentMethod({
       auth_token: window.Pelcro.user.read().auth_token,
-      payment_method_id: paymentMethodId,
-      is_default: true
+      payment_method_id: paymentMethodId
     }, (err, res) => {
       if (err) {
         onFailure(err);
@@ -28614,7 +28814,9 @@ const PaymentMethodDeleteContainer = _ref => {
           }
         });
       }
-      deletePaymentMethod();
+      setTimeout(() => {
+        deletePaymentMethod();
+      }, 1000);
     });
   };
   const deletePaymentMethod = () => {
@@ -28626,14 +28828,22 @@ const PaymentMethodDeleteContainer = _ref => {
       payment_method_id: paymentMethodId
     }, (err, res) => {
       if (err) {
-        return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+        onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+        return dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "error",
+            content: getErrorMessages(err)
+          }
+        });
       }
       dispatch({
-        type: SHOW_ALERT,
-        payload: {
-          type: "success",
-          content: "messages.sourceUpdated"
-        }
+        type: DISABLE_SUBMIT,
+        payload: false
+      });
+      dispatch({
+        type: LOADING,
+        payload: false
       });
       onSuccess(res);
     });
@@ -28648,7 +28858,8 @@ const PaymentMethodDeleteContainer = _ref => {
       case HANDLE_SUBMIT:
         return lib_5({
           ...state,
-          isSubmitting: true
+          disableSubmit: true,
+          isLoading: true
         }, (state, dispatch) => setDefaultPaymentMethod());
       case SET_DELETE_PAYMENT_METHOD_OPTION:
         return lib_7({
@@ -28660,6 +28871,26 @@ const PaymentMethodDeleteContainer = _ref => {
           ...state,
           paymentMethods: action.payload
         });
+      case SHOW_ALERT:
+        return lib_7({
+          ...state,
+          alert: action.payload
+        });
+      case DISABLE_SUBMIT:
+        return lib_7({
+          ...state,
+          disableSubmit: action.payload
+        });
+      case LOADING:
+        return lib_7({
+          ...state,
+          isLoading: action.payload
+        });
+      case SKELETON_LOADER:
+        return lib_7({
+          ...state,
+          skeletonLoader: action.payload
+        });
       default:
         return state;
     }
@@ -28694,8 +28925,8 @@ const PaymentMethodDeleteSubmit = _ref => {
   const {
     dispatch,
     state: {
-      selectedPaymentMethodId,
-      isSubmitting
+      isLoading,
+      isDisabled
     }
   } = React.useContext(store$4);
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
@@ -28705,8 +28936,8 @@ const PaymentMethodDeleteSubmit = _ref => {
       });
       onClick === null || onClick === void 0 ? void 0 : onClick();
     },
-    disabled: !selectedPaymentMethodId,
-    isLoading: isSubmitting,
+    disabled: isDisabled,
+    isLoading: isLoading,
     className: "plc-w-full"
   }, otherProps), name !== null && name !== void 0 ? name : t("select.buttons.selectPaymentMethod"));
 };
@@ -28720,7 +28951,8 @@ const PaymentMethodDeleteList = props => {
     state: {
       deleteOption,
       selectedPaymentMethodId,
-      paymentMethods
+      paymentMethods,
+      skeletonLoader
     }
   } = React.useContext(store$4);
   const {
@@ -28732,8 +28964,10 @@ const PaymentMethodDeleteList = props => {
       payload: event.target.value
     });
   };
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, paymentMethods && deleteOption === "select" && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-px-3 plc-py-2 plc-space-y-4 plc-overflow-y-scroll plc-max-h-80 pelcro-payment-method-select-wrapper"
+  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);
@@ -28752,10 +28986,12 @@ const PaymentMethodDeleteList = props => {
       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", {
+    }, "\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(PaymentMethodDeleteSubmit, null)), deleteOption === "add" && /*#__PURE__*/React__default['default'].createElement(PaymentMethodView, {
+  })), /*#__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,
@@ -28764,14 +29000,15 @@ const PaymentMethodDeleteList = props => {
     onFailure: props.onFailure,
     onSuccess: props.onSuccess,
     setAsDefault: true
-  }));
+  })));
 };
 
 const PaymentMethodDeleteOptions = _ref => {
   const {
     state: {
       deleteOption,
-      paymentMethods
+      paymentMethods,
+      skeletonLoader
     },
     dispatch
   } = React.useContext(store$4);
@@ -28786,27 +29023,53 @@ const PaymentMethodDeleteOptions = _ref => {
   };
   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")));
+  }, t("delete.options.add"))));
 };
 
-function PaymentMethodDeleteView() {
+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", {
-    className: "plc-mb-2 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+    className: "plc-mb-6 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
   }, /*#__PURE__*/React__default['default'].createElement("h4", {
-    className: "plc-text-2xl plc-font-semibold"
-  }, t("delete.title")), /*#__PURE__*/React__default['default'].createElement("p", null, t("delete.subtitle"))), /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteContainer, null, /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteOptions, null), /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteList, null)));
+    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
+  })));
 }
 
 const PaymentMethodDeleteModal = props => {
   var _window, _window$Pelcro, _window$Pelcro$uiSett;
+  const {
+    t
+  } = useTranslation("paymentMethod");
   const enableReactGA4 = (_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro = _window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.enableReactGA4;
+  const {
+    resetView
+  } = usePelcro();
   const onSuccess = res => {
     var _props$onSuccess;
     (_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(props, res);
@@ -28822,6 +29085,8 @@ const PaymentMethodDeleteModal = props => {
         nonInteraction: true
       });
     }
+    notify.success(t("delete.paymentMethodReplaced"));
+    resetView();
   };
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     id: "pelcro-payment-method-delete-modal",
@@ -28833,6 +29098,64 @@ const PaymentMethodDeleteModal = props => {
 };
 PaymentMethodDeleteModal.viewId = "payment-method-delete";
 
+const PaymentMethodCreateContainer = props => {
+  return /*#__PURE__*/React__default['default'].createElement(PaymentMethodContainer, Object.assign({
+    type: "createPaymentSource",
+    className: "pelcro-payment-create-container"
+  }, props));
+};
+
+/**
+ *
+ */
+function PaymentMethodCreateView(props) {
+  const [t] = useTranslation("paymentMethod");
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    id: "pelcro-payment-method-create-view"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-mb-2 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+  }, /*#__PURE__*/React__default['default'].createElement("h4", {
+    className: "plc-text-2xl plc-font-semibold "
+  }, t("create.title")), /*#__PURE__*/React__default['default'].createElement("p", null, t("create.subtitle"))), /*#__PURE__*/React__default['default'].createElement(PaymentMethodView, {
+    type: "createPaymentSource",
+    showCoupon: false,
+    showExternalPaymentMethods: false,
+    showApplePayButton: false,
+    onDisplay: props.onDisplay,
+    onFailure: props.onFailure,
+    onSuccess: props.onSuccess
+  }));
+}
+
+const PaymentMethodCreateModal = props => {
+  var _window, _window$Pelcro, _window$Pelcro$uiSett;
+  const enableReactGA4 = (_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro = _window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.enableReactGA4;
+  const onSuccess = res => {
+    var _props$onSuccess;
+    (_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(props, res);
+    if (enableReactGA4) {
+      ReactGA4.event("Created payment card", {
+        nonInteraction: true
+      });
+    } else {
+      var _ReactGA$event;
+      ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event = ReactGA.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA, {
+        category: "ACTIONS",
+        action: "Created payment card",
+        nonInteraction: true
+      });
+    }
+  };
+  return /*#__PURE__*/React__default['default'].createElement(Modal, {
+    id: "pelcro-payment-method-create-modal",
+    onDisplay: props.onDisplay,
+    onClose: props.onClose
+  }, /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(PaymentMethodCreateView, Object.assign({}, props, {
+    onSuccess: onSuccess
+  }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, /*#__PURE__*/React__default['default'].createElement(Authorship, null)));
+};
+PaymentMethodCreateModal.viewId = "payment-method-create";
+
 function _extends$i() {
   _extends$i = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -31301,16 +31624,15 @@ class Dashboard extends React.Component {
       } else {
         this.props.setPaymentMethodToDelete(source.id);
         return this.props.setView("payment-method-delete");
-        // this.props.onClose();
-        // notify.warning(
-        //   this.locale("messages.paymentMethodDeletion.nonDeletable")
-        // );
       }
     });
     _defineProperty$3(this, "displayRedeem", () => {
       return this.props.setView("gift-redeem");
     });
-    _defineProperty$3(this, "displaySourceCreate", e => {
+    _defineProperty$3(this, "displaySourceCreate", () => {
+      return this.props.setView("payment-method-create");
+    });
+    _defineProperty$3(this, "displaySourceEdit", e => {
       const source = e.currentTarget.dataset.key;
       this.props.setPaymentMethodToEdit(source);
       return this.props.setView("payment-method-update");
@@ -31590,7 +31912,7 @@ class Dashboard extends React.Component {
           className: "plc-text-white",
           icon: /*#__PURE__*/React__default['default'].createElement(SvgEdit, null),
           "data-key": source.id,
-          onClick: this.displaySourceCreate,
+          onClick: this.displaySourceEdit,
           disabled: this.state.disableSubmit
         }), /*#__PURE__*/React__default['default'].createElement(Button, {
           id: "pelcro-button-delete-source-" + index,
@@ -35808,6 +36130,9 @@ exports.PasswordlessRequestViewButton = PasswordlessRequestViewButton;
 exports.PaymentCreateContainer = PaymentCreateContainer;
 exports.PaymentCreateView = PaymentCreateView;
 exports.PaymentMethodContainer = PaymentMethodContainer;
+exports.PaymentMethodCreateContainer = PaymentMethodCreateContainer;
+exports.PaymentMethodCreateModal = PaymentMethodCreateModal;
+exports.PaymentMethodCreateView = PaymentMethodCreateView;
 exports.PaymentMethodDeleteContainer = PaymentMethodDeleteContainer;
 exports.PaymentMethodDeleteList = PaymentMethodDeleteList;
 exports.PaymentMethodDeleteModal = PaymentMethodDeleteModal;