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

package/dist/index.cjs.js

@@ -28541,7 +28541,9 @@ function SubscriptionCreateModal({
 
   const {
     product,
-    switchView
+    switchView,
+    plan,
+    giftRecipient
   } = usePelcro();
 
   const onSuccess = res => {
@@ -28552,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"
@@ -30568,7 +30607,9 @@ const AddressCreateModal = ({
     switchView,
     switchToPaymentView,
     resetView,
-    giftRecipient
+    giftRecipient,
+    product,
+    plan
   } = usePelcro();
   const {
     t
@@ -30596,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,
@@ -33993,7 +34059,10 @@ const AddressSelectModal = ({
   const {
     switchView,
     switchToPaymentView,
-    resetView
+    resetView,
+    product,
+    plan,
+    giftRecipient
   } = usePelcro();
   const {
     t
@@ -34025,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"
@@ -34359,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(() => {
@@ -34382,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"
@@ -36242,12 +36351,12 @@ const DashboardLink = ({
   return show ? /*#__PURE__*/React__default['default'].createElement("div", {
     id: name,
     className: `plc-border-l-4 plc-border-transparent plc-border-solid plc-group
-        ${isActive ? "plc-border-solid plc-bg-grey-200 plc-border-primary-400" : "hover:plc-bg-gray-100"}`
+        ${isActive ? "plc-border-solid plc-bg-grey-200 plc-border-primary" : "hover:plc-bg-gray-100"}`
   }, /*#__PURE__*/React__default['default'].createElement("header", {
     onClick: () => setActiveDashboardLink(name),
     className: "plc-flex plc-items-center plc-justify-between plc-p-5 plc-px-4 plc-cursor-pointer plc-select-none sm:plc-px-8"
   }, /*#__PURE__*/React__default['default'].createElement("span", {
-    className: `plc-flex plc-text-lg plc-items-center ${isActive ? "plc-text-primary-400" : "plc-text-gray-500"}`
+    className: `plc-flex plc-text-lg plc-items-center ${isActive ? "plc-text-primary" : "plc-text-gray-500"}`
   }, icon, title))) : null;
 };
 

package/dist/index.esm.js

@@ -28511,7 +28511,9 @@ function SubscriptionCreateModal({
 
   const {
     product,
-    switchView
+    switchView,
+    plan,
+    giftRecipient
   } = usePelcro();
 
   const onSuccess = res => {
@@ -28522,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"
@@ -30538,7 +30577,9 @@ const AddressCreateModal = ({
     switchView,
     switchToPaymentView,
     resetView,
-    giftRecipient
+    giftRecipient,
+    product,
+    plan
   } = usePelcro();
   const {
     t
@@ -30566,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,
@@ -33963,7 +34029,10 @@ const AddressSelectModal = ({
   const {
     switchView,
     switchToPaymentView,
-    resetView
+    resetView,
+    product,
+    plan,
+    giftRecipient
   } = usePelcro();
   const {
     t
@@ -33995,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"
@@ -34329,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(() => {
@@ -34352,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"
@@ -36212,12 +36321,12 @@ const DashboardLink = ({
   return show ? /*#__PURE__*/React__default.createElement("div", {
     id: name,
     className: `plc-border-l-4 plc-border-transparent plc-border-solid plc-group
-        ${isActive ? "plc-border-solid plc-bg-grey-200 plc-border-primary-400" : "hover:plc-bg-gray-100"}`
+        ${isActive ? "plc-border-solid plc-bg-grey-200 plc-border-primary" : "hover:plc-bg-gray-100"}`
   }, /*#__PURE__*/React__default.createElement("header", {
     onClick: () => setActiveDashboardLink(name),
     className: "plc-flex plc-items-center plc-justify-between plc-p-5 plc-px-4 plc-cursor-pointer plc-select-none sm:plc-px-8"
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: `plc-flex plc-text-lg plc-items-center ${isActive ? "plc-text-primary-400" : "plc-text-gray-500"}`
+    className: `plc-flex plc-text-lg plc-items-center ${isActive ? "plc-text-primary" : "plc-text-gray-500"}`
   }, icon, title))) : null;
 };
 

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;
 }

package/package.json

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