@pelcro/react-pelcro-js 4.0.0-alpha.77 → 4.0.0-alpha.78

package/dist/index.cjs.js

@@ -28596,7 +28596,7 @@ function SubscriptionCreateModal({
   }, 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"
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-6 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", {
@@ -30667,7 +30667,7 @@ const AddressCreateModal = ({
   }, 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"
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-6 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, {
@@ -30699,6 +30699,35 @@ const BillingAddressCreateModal = ({
 
     (_otherProps$onSuccess = otherProps.onSuccess) === null || _otherProps$onSuccess === void 0 ? void 0 : _otherProps$onSuccess.call(otherProps, newAddressId);
 
+    switch (flow) {
+      case "createPaymentSource":
+        switchView("payment-method-create");
+        break;
+
+      case "deletePaymentSource":
+        switchView("payment-method-delete");
+        break;
+
+      default:
+        switchToCheckoutForm();
+        break;
+    }
+  };
+
+  const userHasBillingAddress = () => {
+    var _window$Pelcro$user$r, _window$Pelcro$user$r2;
+
+    const billingAddresses = (_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.filter(address => address.type == "billing")) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
+    return billingAddresses.length > 0;
+  };
+
+  const isUserHasBillingAddress = userHasBillingAddress();
+
+  const goBack = () => {
+    if (isUserHasBillingAddress) {
+      return switchView("billing-address-select");
+    }
+
     switch (flow) {
       case "createPaymentSource":
         switchView("payment-method-create");
@@ -30729,7 +30758,11 @@ const BillingAddressCreateModal = ({
     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", {
+  }, /*#__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-6 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("titleBilling")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(AddressCreateView, Object.assign({}, otherProps, {
     type: "billing",
@@ -34111,7 +34144,7 @@ const AddressSelectModal = ({
   }, 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"
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-6 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", {
@@ -34162,6 +34195,22 @@ const BillingAddressSelectModal = ({
     }
   };
 
+  const goBack = () => {
+    switch (flow) {
+      case "createPaymentSource":
+        switchView("payment-method-create");
+        break;
+
+      case "deletePaymentSource":
+        switchView("payment-method-delete");
+        break;
+
+      default:
+        switchToCheckoutForm();
+        break;
+    }
+  };
+
   const onAddNewAddress = () => {
     switchView("billing-address-create");
   }; // const onGiftRedemptionSuccess = () => {
@@ -34181,7 +34230,11 @@ const BillingAddressSelectModal = ({
     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", {
+  }, /*#__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-6 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"
@@ -34496,7 +34549,7 @@ const PaymentMethodSelectModal = ({
   }, 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"
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-6 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", {

package/dist/index.esm.js

@@ -28566,7 +28566,7 @@ function SubscriptionCreateModal({
   }, 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"
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-6 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", {
@@ -30637,7 +30637,7 @@ const AddressCreateModal = ({
   }, 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"
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-6 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, {
@@ -30669,6 +30669,35 @@ const BillingAddressCreateModal = ({
 
     (_otherProps$onSuccess = otherProps.onSuccess) === null || _otherProps$onSuccess === void 0 ? void 0 : _otherProps$onSuccess.call(otherProps, newAddressId);
 
+    switch (flow) {
+      case "createPaymentSource":
+        switchView("payment-method-create");
+        break;
+
+      case "deletePaymentSource":
+        switchView("payment-method-delete");
+        break;
+
+      default:
+        switchToCheckoutForm();
+        break;
+    }
+  };
+
+  const userHasBillingAddress = () => {
+    var _window$Pelcro$user$r, _window$Pelcro$user$r2;
+
+    const billingAddresses = (_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.filter(address => address.type == "billing")) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
+    return billingAddresses.length > 0;
+  };
+
+  const isUserHasBillingAddress = userHasBillingAddress();
+
+  const goBack = () => {
+    if (isUserHasBillingAddress) {
+      return switchView("billing-address-select");
+    }
+
     switch (flow) {
       case "createPaymentSource":
         switchView("payment-method-create");
@@ -30699,7 +30728,11 @@ const BillingAddressCreateModal = ({
     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", {
+  }, /*#__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-6 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("titleBilling")))), /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(AddressCreateView, Object.assign({}, otherProps, {
     type: "billing",
@@ -34081,7 +34114,7 @@ const AddressSelectModal = ({
   }, 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"
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-6 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", {
@@ -34132,6 +34165,22 @@ const BillingAddressSelectModal = ({
     }
   };
 
+  const goBack = () => {
+    switch (flow) {
+      case "createPaymentSource":
+        switchView("payment-method-create");
+        break;
+
+      case "deletePaymentSource":
+        switchView("payment-method-delete");
+        break;
+
+      default:
+        switchToCheckoutForm();
+        break;
+    }
+  };
+
   const onAddNewAddress = () => {
     switchView("billing-address-create");
   }; // const onGiftRedemptionSuccess = () => {
@@ -34151,7 +34200,11 @@ const BillingAddressSelectModal = ({
     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", {
+  }, /*#__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-6 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"
@@ -34466,7 +34519,7 @@ const PaymentMethodSelectModal = ({
   }, 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"
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-6 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", {

package/dist/pelcro.css

@@ -744,7 +744,7 @@ Add the correct display in Chrome and Safari.
 .pelcro-root .pelcro-modal{
   position: absolute;
   display: flex;
-  max-width: 32rem;
+  max-width: 36rem;
   flex-direction: column;
   align-items: center;
   border-radius: 0.5rem;
@@ -768,8 +768,8 @@ Add the correct display in Chrome and Safari.
   border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
+  padding-left: 3.5rem;
+  padding-right: 3.5rem;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   border-bottom-width: 1.5px;
@@ -832,8 +832,8 @@ Add the correct display in Chrome and Safari.
 
 @media (min-width: 768px){
   .pelcro-root .pelcro-modal-body{
-    padding-left: 2.5rem;
-    padding-right: 2.5rem;
+    padding-left: 3.5rem;
+    padding-right: 3.5rem;
   }
 }
 
@@ -2116,10 +2116,6 @@ apple-pay-button {
   left: 0px;
 }
 
-.pelcro-root .plc-left-2{
-  left: 0.5rem;
-}
-
 .pelcro-root .plc-left-4{
   left: 1rem;
 }

package/package.json

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