@pelcro/react-pelcro-js 4.0.0-alpha.74 → 4.0.0-alpha.76

package/dist/index.cjs.js

@@ -3427,7 +3427,8 @@ var messages$16 = {
 	},
 	invoicePayment: {
 		title: "Invoice paid successfully",
-		content: "Please contact us if you have any questions or concerns."
+		content: "Please contact us if you have any questions or concerns.",
+		paymentProcessing: "Invoice payment is currently being processed"
 	}
 };
 var errors$j = {
@@ -23862,13 +23863,10 @@ const PaymentMethodContainerWithoutStripe = ({
           type: LOADING,
           payload: false
         });
-        return dispatch({
-          type: SHOW_ALERT,
-          payload: {
-            type: "success",
-            content: t("messages.paymentProcessing")
-          }
+        set({
+          isProcessingInvoice: true
         });
+        return onSuccess(response);
       } else {
         onSuccess(response);
       }
@@ -27783,7 +27781,8 @@ const getSuccessContent = i18n => {
 
   const flow = getCurrentFlow();
   const {
-    product
+    product,
+    isProcessingInvoice
   } = usePelcro.getStore();
   const wordingDictionary = {
     subscriptionSuccess: {
@@ -27811,7 +27810,7 @@ const getSuccessContent = i18n => {
       successIcon: /*#__PURE__*/React__default['default'].createElement(SvgCheckSolid, {
         className: "plc-w-32 plc-my-4 plc-text-green-500"
       }),
-      successTitle: i18n("messages.invoicePayment.title"),
+      successTitle: isProcessingInvoice ? i18n("messages.invoicePayment.paymentProcessing") : i18n("messages.invoicePayment.title"),
       successContent: i18n("messages.invoicePayment.content")
     }
   };
@@ -27841,7 +27840,9 @@ function PaymentSuccessModal({
     id: "pelcro-subscription-success-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(PaymentSuccessView, {
+  }, /*#__PURE__*/React__default['default'].createElement(ModalBody, {
+    className: "plc-rounded-t-lg"
+  }, /*#__PURE__*/React__default['default'].createElement(PaymentSuccessView, {
     onClose: onClose
   })), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
 }
@@ -28540,7 +28541,9 @@ function SubscriptionCreateModal({
 
   const {
     product,
-    switchView
+    switchView,
+    plan,
+    giftRecipient
   } = usePelcro();
 
   const onSuccess = res => {
@@ -28551,13 +28554,50 @@ function SubscriptionCreateModal({
     return switchView("subscription-success");
   };
 
+  const showBackButton = Boolean(product && plan && !giftRecipient);
+
+  const userHasPaymentMethod = () => {
+    var _window$Pelcro$user$r, _window$Pelcro$user$r2;
+
+    const sources = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.sources) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
+    return sources.length > 0;
+  };
+
+  const userHasAddress = () => {
+    var _window$Pelcro$user$r3, _window$Pelcro$user$r4;
+
+    const addresses = (_window$Pelcro$user$r3 = (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.addresses) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : [];
+    return addresses.length > 0;
+  };
+
+  const isUserHasPaymentMethod = userHasPaymentMethod();
+  const isUserHasAddress = userHasAddress();
+
+  const goBack = () => {
+    if (product && plan && isUserHasPaymentMethod) {
+      return switchView("payment-method-select");
+    }
+
+    if (product && plan && product.address_required && isUserHasAddress) {
+      return switchView("address-select");
+    }
+
+    if (product && plan) {
+      return switchView("plan-select");
+    }
+  };
+
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     id: "pelcro-subscription-create-modal",
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-text-left plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
-  }, /*#__PURE__*/React__default['default'].createElement("h4", {
+  }, showBackButton && /*#__PURE__*/React__default['default'].createElement("button", {
+    type: "button",
+    onClick: goBack,
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-2 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
+  }, /*#__PURE__*/React__default['default'].createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default['default'].createElement("h4", {
     className: "plc-text-xl plc-font-bold"
   }, (_product$paywall$subs = product === null || product === void 0 ? void 0 : (_product$paywall = product.paywall) === null || _product$paywall === void 0 ? void 0 : _product$paywall.subscribe_title) !== null && _product$paywall$subs !== void 0 ? _product$paywall$subs : (_window$Pelcro$paywal = window.Pelcro.paywall.read()) === null || _window$Pelcro$paywal === void 0 ? void 0 : _window$Pelcro$paywal.subscribe_title), " ", /*#__PURE__*/React__default['default'].createElement("p", {
     className: "plc-text-sm"
@@ -30567,7 +30607,9 @@ const AddressCreateModal = ({
     switchView,
     switchToPaymentView,
     resetView,
-    giftRecipient
+    giftRecipient,
+    product,
+    plan
   } = usePelcro();
   const {
     t
@@ -30595,13 +30637,38 @@ const AddressCreateModal = ({
     resetView();
   };
 
+  const showBackButton = Boolean(product && plan && !giftRecipient);
+
+  const userHasAddress = () => {
+    var _window$Pelcro$user$r, _window$Pelcro$user$r2;
+
+    const addresses = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.addresses) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
+    return addresses.length > 0;
+  };
+
+  const isUserHasAddress = userHasAddress();
+
+  const goBack = () => {
+    if (product && plan && isUserHasAddress) {
+      return switchView("address-select");
+    }
+
+    if (product && plan) {
+      return switchView("plan-select");
+    }
+  };
+
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     id: "pelcro-address-create-modal",
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-text-left plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
-  }, /*#__PURE__*/React__default['default'].createElement("h4", {
+  }, showBackButton && /*#__PURE__*/React__default['default'].createElement("button", {
+    type: "button",
+    onClick: goBack,
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-2 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
+  }, /*#__PURE__*/React__default['default'].createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default['default'].createElement("h4", {
     className: "plc-text-xl plc-font-bold"
   }, giftRecipient ? t("titleGifting") : t("title")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(AddressCreateView, Object.assign({}, otherProps, {
     onSuccess: onSuccess,
@@ -33992,7 +34059,10 @@ const AddressSelectModal = ({
   const {
     switchView,
     switchToPaymentView,
-    resetView
+    resetView,
+    product,
+    plan,
+    giftRecipient
   } = usePelcro();
   const {
     t
@@ -34024,13 +34094,25 @@ const AddressSelectModal = ({
     resetView();
   };
 
+  const showBackButton = Boolean(product && plan && !giftRecipient);
+
+  const goBack = () => {
+    if (product && plan) {
+      switchView("plan-select");
+    }
+  };
+
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     onDisplay: onDisplay,
     onClose: onClose,
     id: "pelcro-address-select-modal"
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-text-left plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
-  }, /*#__PURE__*/React__default['default'].createElement("h4", {
+  }, showBackButton && /*#__PURE__*/React__default['default'].createElement("button", {
+    type: "button",
+    onClick: goBack,
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-2 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
+  }, /*#__PURE__*/React__default['default'].createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default['default'].createElement("h4", {
     className: "plc-text-xl plc-font-bold"
   }, t("selectAddressTitle")), /*#__PURE__*/React__default['default'].createElement("p", {
     className: "plc-text-sm"
@@ -34358,7 +34440,10 @@ const PaymentMethodSelectModal = ({
     switchToCheckoutForm,
     set,
     plan,
-    order
+    order,
+    product,
+    switchView,
+    giftRecipient
   } = usePelcro();
   const skipPayment = (_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.skipPaymentForFreePlans;
   React.useEffect(() => {
@@ -34381,13 +34466,38 @@ const PaymentMethodSelectModal = ({
     switchToCheckoutForm();
   };
 
+  const showBackButton = Boolean(product && plan && !giftRecipient);
+
+  const userHasAddress = () => {
+    var _window$Pelcro$user$r, _window$Pelcro$user$r2;
+
+    const addresses = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.addresses) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
+    return addresses.length > 0;
+  };
+
+  const isUserHasAddress = userHasAddress();
+
+  const goBack = () => {
+    if (product && plan && product.address_required && isUserHasAddress) {
+      return switchView("address-select");
+    }
+
+    if (product && plan) {
+      return switchView("plan-select");
+    }
+  };
+
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     onDisplay: onDisplay,
     onClose: onClose,
     id: "pelcro-payment-method-select-modal"
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-text-left plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
-  }, /*#__PURE__*/React__default['default'].createElement("h4", {
+  }, showBackButton && /*#__PURE__*/React__default['default'].createElement("button", {
+    type: "button",
+    onClick: goBack,
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-2 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
+  }, /*#__PURE__*/React__default['default'].createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default['default'].createElement("h4", {
     className: "plc-text-xl plc-font-bold"
   }, t("select.title")), /*#__PURE__*/React__default['default'].createElement("p", {
     className: "plc-text-sm"

package/dist/index.esm.js

@@ -3397,7 +3397,8 @@ var messages$16 = {
 	},
 	invoicePayment: {
 		title: "Invoice paid successfully",
-		content: "Please contact us if you have any questions or concerns."
+		content: "Please contact us if you have any questions or concerns.",
+		paymentProcessing: "Invoice payment is currently being processed"
 	}
 };
 var errors$j = {
@@ -23832,13 +23833,10 @@ const PaymentMethodContainerWithoutStripe = ({
           type: LOADING,
           payload: false
         });
-        return dispatch({
-          type: SHOW_ALERT,
-          payload: {
-            type: "success",
-            content: t("messages.paymentProcessing")
-          }
+        set({
+          isProcessingInvoice: true
         });
+        return onSuccess(response);
       } else {
         onSuccess(response);
       }
@@ -27753,7 +27751,8 @@ const getSuccessContent = i18n => {
 
   const flow = getCurrentFlow();
   const {
-    product
+    product,
+    isProcessingInvoice
   } = usePelcro.getStore();
   const wordingDictionary = {
     subscriptionSuccess: {
@@ -27781,7 +27780,7 @@ const getSuccessContent = i18n => {
       successIcon: /*#__PURE__*/React__default.createElement(SvgCheckSolid, {
         className: "plc-w-32 plc-my-4 plc-text-green-500"
       }),
-      successTitle: i18n("messages.invoicePayment.title"),
+      successTitle: isProcessingInvoice ? i18n("messages.invoicePayment.paymentProcessing") : i18n("messages.invoicePayment.title"),
       successContent: i18n("messages.invoicePayment.content")
     }
   };
@@ -27811,7 +27810,9 @@ function PaymentSuccessModal({
     id: "pelcro-subscription-success-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(PaymentSuccessView, {
+  }, /*#__PURE__*/React__default.createElement(ModalBody, {
+    className: "plc-rounded-t-lg"
+  }, /*#__PURE__*/React__default.createElement(PaymentSuccessView, {
     onClose: onClose
   })), /*#__PURE__*/React__default.createElement(ModalFooter, null));
 }
@@ -28510,7 +28511,9 @@ function SubscriptionCreateModal({
 
   const {
     product,
-    switchView
+    switchView,
+    plan,
+    giftRecipient
   } = usePelcro();
 
   const onSuccess = res => {
@@ -28521,13 +28524,50 @@ function SubscriptionCreateModal({
     return switchView("subscription-success");
   };
 
+  const showBackButton = Boolean(product && plan && !giftRecipient);
+
+  const userHasPaymentMethod = () => {
+    var _window$Pelcro$user$r, _window$Pelcro$user$r2;
+
+    const sources = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.sources) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
+    return sources.length > 0;
+  };
+
+  const userHasAddress = () => {
+    var _window$Pelcro$user$r3, _window$Pelcro$user$r4;
+
+    const addresses = (_window$Pelcro$user$r3 = (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.addresses) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : [];
+    return addresses.length > 0;
+  };
+
+  const isUserHasPaymentMethod = userHasPaymentMethod();
+  const isUserHasAddress = userHasAddress();
+
+  const goBack = () => {
+    if (product && plan && isUserHasPaymentMethod) {
+      return switchView("payment-method-select");
+    }
+
+    if (product && plan && product.address_required && isUserHasAddress) {
+      return switchView("address-select");
+    }
+
+    if (product && plan) {
+      return switchView("plan-select");
+    }
+  };
+
   return /*#__PURE__*/React__default.createElement(Modal, {
     id: "pelcro-subscription-create-modal",
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-text-left plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
-  }, /*#__PURE__*/React__default.createElement("h4", {
+  }, showBackButton && /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    onClick: goBack,
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-2 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
+  }, /*#__PURE__*/React__default.createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default.createElement("h4", {
     className: "plc-text-xl plc-font-bold"
   }, (_product$paywall$subs = product === null || product === void 0 ? void 0 : (_product$paywall = product.paywall) === null || _product$paywall === void 0 ? void 0 : _product$paywall.subscribe_title) !== null && _product$paywall$subs !== void 0 ? _product$paywall$subs : (_window$Pelcro$paywal = window.Pelcro.paywall.read()) === null || _window$Pelcro$paywal === void 0 ? void 0 : _window$Pelcro$paywal.subscribe_title), " ", /*#__PURE__*/React__default.createElement("p", {
     className: "plc-text-sm"
@@ -30537,7 +30577,9 @@ const AddressCreateModal = ({
     switchView,
     switchToPaymentView,
     resetView,
-    giftRecipient
+    giftRecipient,
+    product,
+    plan
   } = usePelcro();
   const {
     t
@@ -30565,13 +30607,38 @@ const AddressCreateModal = ({
     resetView();
   };
 
+  const showBackButton = Boolean(product && plan && !giftRecipient);
+
+  const userHasAddress = () => {
+    var _window$Pelcro$user$r, _window$Pelcro$user$r2;
+
+    const addresses = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.addresses) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
+    return addresses.length > 0;
+  };
+
+  const isUserHasAddress = userHasAddress();
+
+  const goBack = () => {
+    if (product && plan && isUserHasAddress) {
+      return switchView("address-select");
+    }
+
+    if (product && plan) {
+      return switchView("plan-select");
+    }
+  };
+
   return /*#__PURE__*/React__default.createElement(Modal, {
     id: "pelcro-address-create-modal",
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-text-left plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
-  }, /*#__PURE__*/React__default.createElement("h4", {
+  }, showBackButton && /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    onClick: goBack,
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-2 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
+  }, /*#__PURE__*/React__default.createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default.createElement("h4", {
     className: "plc-text-xl plc-font-bold"
   }, giftRecipient ? t("titleGifting") : t("title")))), /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(AddressCreateView, Object.assign({}, otherProps, {
     onSuccess: onSuccess,
@@ -33962,7 +34029,10 @@ const AddressSelectModal = ({
   const {
     switchView,
     switchToPaymentView,
-    resetView
+    resetView,
+    product,
+    plan,
+    giftRecipient
   } = usePelcro();
   const {
     t
@@ -33994,13 +34064,25 @@ const AddressSelectModal = ({
     resetView();
   };
 
+  const showBackButton = Boolean(product && plan && !giftRecipient);
+
+  const goBack = () => {
+    if (product && plan) {
+      switchView("plan-select");
+    }
+  };
+
   return /*#__PURE__*/React__default.createElement(Modal, {
     onDisplay: onDisplay,
     onClose: onClose,
     id: "pelcro-address-select-modal"
   }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-text-left plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
-  }, /*#__PURE__*/React__default.createElement("h4", {
+  }, showBackButton && /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    onClick: goBack,
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-2 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
+  }, /*#__PURE__*/React__default.createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default.createElement("h4", {
     className: "plc-text-xl plc-font-bold"
   }, t("selectAddressTitle")), /*#__PURE__*/React__default.createElement("p", {
     className: "plc-text-sm"
@@ -34328,7 +34410,10 @@ const PaymentMethodSelectModal = ({
     switchToCheckoutForm,
     set,
     plan,
-    order
+    order,
+    product,
+    switchView,
+    giftRecipient
   } = usePelcro();
   const skipPayment = (_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.skipPaymentForFreePlans;
   useEffect(() => {
@@ -34351,13 +34436,38 @@ const PaymentMethodSelectModal = ({
     switchToCheckoutForm();
   };
 
+  const showBackButton = Boolean(product && plan && !giftRecipient);
+
+  const userHasAddress = () => {
+    var _window$Pelcro$user$r, _window$Pelcro$user$r2;
+
+    const addresses = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.addresses) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
+    return addresses.length > 0;
+  };
+
+  const isUserHasAddress = userHasAddress();
+
+  const goBack = () => {
+    if (product && plan && product.address_required && isUserHasAddress) {
+      return switchView("address-select");
+    }
+
+    if (product && plan) {
+      return switchView("plan-select");
+    }
+  };
+
   return /*#__PURE__*/React__default.createElement(Modal, {
     onDisplay: onDisplay,
     onClose: onClose,
     id: "pelcro-payment-method-select-modal"
   }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-text-left plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
-  }, /*#__PURE__*/React__default.createElement("h4", {
+  }, showBackButton && /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    onClick: goBack,
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-2 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
+  }, /*#__PURE__*/React__default.createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default.createElement("h4", {
     className: "plc-text-xl plc-font-bold"
   }, t("select.title")), /*#__PURE__*/React__default.createElement("p", {
     className: "plc-text-sm"

package/dist/pelcro.css

@@ -2116,6 +2116,10 @@ apple-pay-button {
   left: 0px;
 }
 
+.pelcro-root .plc-left-2{
+  left: 0.5rem;
+}
+
 .pelcro-root .plc-left-4{
   left: 1rem;
 }
@@ -2911,6 +2915,11 @@ apple-pay-button {
   border-radius: 9999px;
 }
 
+.pelcro-root .plc-rounded-t-lg{
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+
 .pelcro-root .plc-rounded-b-sm{
   border-bottom-right-radius: 0.125rem;
   border-bottom-left-radius: 0.125rem;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pelcro/react-pelcro-js",
   "description": "Pelcro's React UI Elements",
-  "version": "4.0.0-alpha.74",
+  "version": "4.0.0-alpha.76",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",