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

package/dist/index.esm.js

@@ -3324,17 +3324,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";
@@ -4270,9 +4276,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";
@@ -4375,6 +4395,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",
@@ -5197,9 +5218,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 뉴스레터를 구독하려면 이메일을 입력하세요.";
@@ -5305,7 +5340,8 @@ var labels$x = {
 	order: "주문",
 	amount: "금액",
 	email: "이메일",
-	password: "비밀번호"
+	password: "비밀번호",
+	isDefault: "기본값으로 설정"
 };
 var checkoutForm_ko = {
 	messages: messages$y,
@@ -6229,9 +6265,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";
@@ -6337,7 +6387,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,
@@ -9377,6 +9428,9 @@ const initialState$o = {
   couponCode: null,
   // memberships
   selectedMembership: null,
+  // paymentMethods
+  paymentMethodToDelete: null,
+  paymentMethodToEdit: null,
   // User
   isAuthenticated: () => window.Pelcro.user.isAuthenticated(),
   selectedPaymentMethodId: null,
@@ -12812,6 +12866,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";
@@ -18262,7 +18317,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() {
@@ -18592,7 +18647,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() {
@@ -18803,12 +18858,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();
     }
@@ -18878,15 +18931,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);
         });
       });
@@ -19777,7 +19830,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       }
     });
   };
-  const updatePaymentSource = (state, dispatch) => {
+  const createPaymentSource = (state, dispatch) => {
     return stripe.createSource({
       type: "card"
     }).then(_ref8 => {
@@ -19831,6 +19884,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({
@@ -19910,12 +20077,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);
       }
@@ -19934,7 +20101,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);
@@ -20178,9 +20345,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 {
@@ -20568,7 +20741,10 @@ const PelcroPaymentRequestButton = props => {
   }
   return null;
 };
-const CheckoutForm = () => {
+const CheckoutForm = _ref => {
+  let {
+    type
+  } = _ref;
   const {
     selectedPaymentMethodId
   } = usePelcro();
@@ -20605,6 +20781,21 @@ const CheckoutForm = () => {
     }))));
   }
   if (cardProcessor === "stripe") {
+    if (type === "updatePaymentSource") {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "plc-flex plc-items-end plc-justify-between plc-my-2"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "plc-w-6/12 plc-pr-4"
+      }, /*#__PURE__*/React__default.createElement(MonthSelect, {
+        store: store$l,
+        placeholder: "Exp Month *"
+      })), /*#__PURE__*/React__default.createElement("div", {
+        className: "plc-w-6/12"
+      }, /*#__PURE__*/React__default.createElement(YearSelect, {
+        store: store$l,
+        placeholder: "Exp Year *"
+      })));
+    }
     return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(PelcroCardNumber, {
       autoFocus: true
     }), /*#__PURE__*/React__default.createElement("img", {
@@ -21799,7 +21990,9 @@ function PaymentMethodView(_ref) {
     label: t("labels.email"),
     required: true,
     autoFocus: true
-  })), /*#__PURE__*/React__default.createElement(CheckoutForm, null), showCoupon && /*#__PURE__*/React__default.createElement("div", {
+  })), /*#__PURE__*/React__default.createElement(CheckoutForm, {
+    type: type
+  }), showCoupon && /*#__PURE__*/React__default.createElement("div", {
     className: "plc-mb-2"
   }, /*#__PURE__*/React__default.createElement(CouponCode, null), /*#__PURE__*/React__default.createElement(DiscountedPrice, null)), /*#__PURE__*/React__default.createElement(TaxAmount, null), type === "updatePaymentSource" && /*#__PURE__*/React__default.createElement(PaymentMethodUpdateSetDefault, {
     id: "pelcro-input-is-default",
@@ -28518,7 +28711,10 @@ const initialState$4 = {
   paymentMethods: [],
   selectedPaymentMethodId: null,
   isSubmitting: false,
-  deleteOption: "add",
+  deleteOption: "",
+  disableSubmit: false,
+  isLoading: false,
+  skeletonLoader: true,
   alert: {
     type: "error",
     content: ""
@@ -28551,28 +28747,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);
@@ -28584,7 +28784,9 @@ const PaymentMethodDeleteContainer = _ref => {
           }
         });
       }
-      deletePaymentMethod();
+      setTimeout(() => {
+        deletePaymentMethod();
+      }, 1000);
     });
   };
   const deletePaymentMethod = () => {
@@ -28596,14 +28798,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);
     });
@@ -28618,7 +28828,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({
@@ -28630,6 +28841,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;
     }
@@ -28664,8 +28895,8 @@ const PaymentMethodDeleteSubmit = _ref => {
   const {
     dispatch,
     state: {
-      selectedPaymentMethodId,
-      isSubmitting
+      isLoading,
+      isDisabled
     }
   } = useContext(store$4);
   return /*#__PURE__*/React__default.createElement(Button, Object.assign({
@@ -28675,8 +28906,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"));
 };
@@ -28690,7 +28921,8 @@ const PaymentMethodDeleteList = props => {
     state: {
       deleteOption,
       selectedPaymentMethodId,
-      paymentMethods
+      paymentMethods,
+      skeletonLoader
     }
   } = useContext(store$4);
   const {
@@ -28702,8 +28934,10 @@ const PaymentMethodDeleteList = props => {
       payload: event.target.value
     });
   };
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, paymentMethods && deleteOption === "select" && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__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.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);
@@ -28722,10 +28956,12 @@ const PaymentMethodDeleteList = props => {
       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", {
+    }, "\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(PaymentMethodDeleteSubmit, null)), deleteOption === "add" && /*#__PURE__*/React__default.createElement(PaymentMethodView, {
+  })), /*#__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,
@@ -28734,14 +28970,15 @@ const PaymentMethodDeleteList = props => {
     onFailure: props.onFailure,
     onSuccess: props.onSuccess,
     setAsDefault: true
-  }));
+  })));
 };
 
 const PaymentMethodDeleteOptions = _ref => {
   const {
     state: {
       deleteOption,
-      paymentMethods
+      paymentMethods,
+      skeletonLoader
     },
     dispatch
   } = useContext(store$4);
@@ -28756,27 +28993,53 @@ const PaymentMethodDeleteOptions = _ref => {
   };
   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")));
+  }, t("delete.options.add"))));
 };
 
-function PaymentMethodDeleteView() {
+function PaymentMethodDeleteView(props) {
   const [t] = useTranslation("paymentMethod");
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-payment-method-delete-view"
   }, /*#__PURE__*/React__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.createElement("h4", {
-    className: "plc-text-2xl plc-font-semibold"
-  }, t("delete.title")), /*#__PURE__*/React__default.createElement("p", null, t("delete.subtitle"))), /*#__PURE__*/React__default.createElement(PaymentMethodDeleteContainer, null, /*#__PURE__*/React__default.createElement(PaymentMethodDeleteOptions, null), /*#__PURE__*/React__default.createElement(PaymentMethodDeleteList, null)));
+    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
+  })));
 }
 
 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);
@@ -28792,6 +29055,8 @@ const PaymentMethodDeleteModal = props => {
         nonInteraction: true
       });
     }
+    notify.success(t("delete.paymentMethodReplaced"));
+    resetView();
   };
   return /*#__PURE__*/React__default.createElement(Modal, {
     id: "pelcro-payment-method-delete-modal",
@@ -28803,6 +29068,64 @@ const PaymentMethodDeleteModal = props => {
 };
 PaymentMethodDeleteModal.viewId = "payment-method-delete";
 
+const PaymentMethodCreateContainer = props => {
+  return /*#__PURE__*/React__default.createElement(PaymentMethodContainer, Object.assign({
+    type: "createPaymentSource",
+    className: "pelcro-payment-create-container"
+  }, props));
+};
+
+/**
+ *
+ */
+function PaymentMethodCreateView(props) {
+  const [t] = useTranslation("paymentMethod");
+  return /*#__PURE__*/React__default.createElement("div", {
+    id: "pelcro-payment-method-create-view"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-mb-2 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+  }, /*#__PURE__*/React__default.createElement("h4", {
+    className: "plc-text-2xl plc-font-semibold "
+  }, t("create.title")), /*#__PURE__*/React__default.createElement("p", null, t("create.subtitle"))), /*#__PURE__*/React__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.createElement(Modal, {
+    id: "pelcro-payment-method-create-modal",
+    onDisplay: props.onDisplay,
+    onClose: props.onClose
+  }, /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(PaymentMethodCreateView, Object.assign({}, props, {
+    onSuccess: onSuccess
+  }))), /*#__PURE__*/React__default.createElement(ModalFooter, null, /*#__PURE__*/React__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++) {
@@ -31271,16 +31594,15 @@ class Dashboard extends 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");
@@ -31560,7 +31882,7 @@ class Dashboard extends Component {
           className: "plc-text-white",
           icon: /*#__PURE__*/React__default.createElement(SvgEdit, null),
           "data-key": source.id,
-          onClick: this.displaySourceCreate,
+          onClick: this.displaySourceEdit,
           disabled: this.state.disableSubmit
         }), /*#__PURE__*/React__default.createElement(Button, {
           id: "pelcro-button-delete-source-" + index,
@@ -35631,4 +35953,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, 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, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, 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, 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, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };