@pelcro/react-pelcro-js 4.0.0-alpha.29 → 4.0.0-alpha.30

package/dist/index.cjs.js

@@ -19116,13 +19116,13 @@ class SelectModal extends React.Component {
         className: "plc-font-medium plc-text-2xl pelcro-select-product-title"
       }, product.name), /*#__PURE__*/React__default['default'].createElement("p", {
         className: "plc-text-sm plc-mt-1 pelcro-select-product-description"
-      }, product.description)), /*#__PURE__*/React__default['default'].createElement("div", {
+      }, product.description))), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-mt-auto plc-w-full"
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
         className: "plc-mt-3 plc-mb-6"
       }, product.plans && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("p", {
         className: "plc-mb-2"
-      }, this.locale("labels.startingAt")), this.countStartPrice(product.plans)))), isPlanMode || /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "plc-mt-auto plc-w-full"
-      }, /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
+      }, this.locale("labels.startingAt")), this.countStartPrice(product.plans))), isPlanMode || /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
         onClick: productButtonCallback,
         "data-key": product.id,
         id: "pelcro-select-product-back-button",
@@ -19133,6 +19133,12 @@ class SelectModal extends React.Component {
     });
 
     _defineProperty$3(this, "renderProducts", () => {
+      const isPlanMode = Boolean(this.state.mode === "plan");
+
+      if (isPlanMode) {
+        return this.renderProductTabs();
+      }
+
       const userDidSelectProduct = Boolean(this.state.mode === "plan");
       const productsToShow = userDidSelectProduct ? [this.state.product] : this.state.productList;
       const items = productsToShow.map((product, index) => this.renderOneProduct(product, index));
@@ -19161,7 +19167,7 @@ class SelectModal extends React.Component {
         }, /*#__PURE__*/React__default['default'].createElement("button", {
           onClick: productButtonCallback,
           "data-key": product.id,
-          className: "plc-px-4 plc-py-2 plc-bg-white plc-border plc-border-gray-200 plc-rounded plc-text-gray-600 focus:plc-outline-none plc-whitespace-nowrap"
+          className: "plc-px-4 plc-py-2 plc-rounded plc-text-gray-600 focus:plc-outline-none plc-whitespace-nowrap"
         }, product.name));
       })), /*#__PURE__*/React__default['default'].createElement("div", {
         className: "selectedProduct plc-flex plc-flex-col plc-items-center plc-justify-center"
@@ -19232,6 +19238,8 @@ class SelectModal extends React.Component {
         }, plan.nickname), /*#__PURE__*/React__default['default'].createElement("p", {
           className: "plc-text-sm plc-mt-1 pelcro-select-plan-description"
         }, plan.description)), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "plc-mt-auto plc-px-4 plc-mb-4"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "plc-pt-4 plc-mb-4 plc-font-semibold pelcro-select-plan-price plc-px-4 plc-text-center plc-flex plc-items-end plc-justify-center"
         }, /*#__PURE__*/React__default['default'].createElement("p", {
           className: "plc-font-bold plc-text-4xl"
@@ -19242,8 +19250,6 @@ class SelectModal extends React.Component {
         }, plan.currency), /*#__PURE__*/React__default['default'].createElement("span", {
           className: "plc-capitalize"
         }, "/ ", plan.interval))), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "plc-mt-auto plc-px-4 plc-mb-4"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
           className: `${((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.plan.id) === plan.id ? "plc-bg-primary-800 plc-text-white" : "plc-text-primary-800"} plc-flex plc-items-center plc-justify-center plc-text-center plc-py-2 plc-px-4 plc-w-full plc-border-2 plc-rounded-md plc-border-primary-800`
         }, this.locale("buttons.select")))));
       });
@@ -19409,7 +19415,7 @@ class SelectModal extends React.Component {
     }, (_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.restrictive_paywall_metatags_enabled ? this.renderMatchingProductsFirst() : this.renderProducts()), this.state.mode === "plan" && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
       className: "pelcro-select-plans-wrapper plc-mt-4"
     }, this.renderPlans()), !disableGifting && /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "plc-flex plc-justify-center plc-mt-8"
+      className: "plc-flex plc-justify-center plc-mt-4"
     }, /*#__PURE__*/React__default['default'].createElement(Checkbox, {
       onChange: this.onIsGiftChange,
       checked: this.state.isGift,
@@ -33601,9 +33607,6 @@ const AddressesItems = props => {
   const {
     t
   } = useTranslation("dashboard");
-  const {
-    switchView
-  } = usePelcro();
   const [selectedAddressId, setSelectedAddressId] = React.useState(null);
   const allAddresses = (_window$Pelcro$user$r = window.Pelcro.user.read().addresses) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
 
@@ -33617,10 +33620,6 @@ const AddressesItems = props => {
     return [defaultAddress, ...addressesWithoutDefault];
   };
 
-  if (!getDefaultAddress(allAddresses)) {
-    switchView("address-select");
-  }
-
   const addresses = moveDefaultAddressToStart(allAddresses);
   if (addresses.length === 0) return null;
   React.useEffect(() => {

package/dist/index.esm.js

@@ -19086,13 +19086,13 @@ class SelectModal extends Component {
         className: "plc-font-medium plc-text-2xl pelcro-select-product-title"
       }, product.name), /*#__PURE__*/React__default.createElement("p", {
         className: "plc-text-sm plc-mt-1 pelcro-select-product-description"
-      }, product.description)), /*#__PURE__*/React__default.createElement("div", {
+      }, product.description))), /*#__PURE__*/React__default.createElement("div", {
+        className: "plc-mt-auto plc-w-full"
+      }, /*#__PURE__*/React__default.createElement("div", {
         className: "plc-mt-3 plc-mb-6"
       }, product.plans && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
         className: "plc-mb-2"
-      }, this.locale("labels.startingAt")), this.countStartPrice(product.plans)))), isPlanMode || /*#__PURE__*/React__default.createElement("div", {
-        className: "plc-mt-auto plc-w-full"
-      }, /*#__PURE__*/React__default.createElement(Button, Object.assign({
+      }, this.locale("labels.startingAt")), this.countStartPrice(product.plans))), isPlanMode || /*#__PURE__*/React__default.createElement(Button, Object.assign({
         onClick: productButtonCallback,
         "data-key": product.id,
         id: "pelcro-select-product-back-button",
@@ -19103,6 +19103,12 @@ class SelectModal extends Component {
     });
 
     _defineProperty$3(this, "renderProducts", () => {
+      const isPlanMode = Boolean(this.state.mode === "plan");
+
+      if (isPlanMode) {
+        return this.renderProductTabs();
+      }
+
       const userDidSelectProduct = Boolean(this.state.mode === "plan");
       const productsToShow = userDidSelectProduct ? [this.state.product] : this.state.productList;
       const items = productsToShow.map((product, index) => this.renderOneProduct(product, index));
@@ -19131,7 +19137,7 @@ class SelectModal extends Component {
         }, /*#__PURE__*/React__default.createElement("button", {
           onClick: productButtonCallback,
           "data-key": product.id,
-          className: "plc-px-4 plc-py-2 plc-bg-white plc-border plc-border-gray-200 plc-rounded plc-text-gray-600 focus:plc-outline-none plc-whitespace-nowrap"
+          className: "plc-px-4 plc-py-2 plc-rounded plc-text-gray-600 focus:plc-outline-none plc-whitespace-nowrap"
         }, product.name));
       })), /*#__PURE__*/React__default.createElement("div", {
         className: "selectedProduct plc-flex plc-flex-col plc-items-center plc-justify-center"
@@ -19202,6 +19208,8 @@ class SelectModal extends Component {
         }, plan.nickname), /*#__PURE__*/React__default.createElement("p", {
           className: "plc-text-sm plc-mt-1 pelcro-select-plan-description"
         }, plan.description)), /*#__PURE__*/React__default.createElement("div", {
+          className: "plc-mt-auto plc-px-4 plc-mb-4"
+        }, /*#__PURE__*/React__default.createElement("div", {
           className: "plc-pt-4 plc-mb-4 plc-font-semibold pelcro-select-plan-price plc-px-4 plc-text-center plc-flex plc-items-end plc-justify-center"
         }, /*#__PURE__*/React__default.createElement("p", {
           className: "plc-font-bold plc-text-4xl"
@@ -19212,8 +19220,6 @@ class SelectModal extends Component {
         }, plan.currency), /*#__PURE__*/React__default.createElement("span", {
           className: "plc-capitalize"
         }, "/ ", plan.interval))), /*#__PURE__*/React__default.createElement("div", {
-          className: "plc-mt-auto plc-px-4 plc-mb-4"
-        }, /*#__PURE__*/React__default.createElement("div", {
           className: `${((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.plan.id) === plan.id ? "plc-bg-primary-800 plc-text-white" : "plc-text-primary-800"} plc-flex plc-items-center plc-justify-center plc-text-center plc-py-2 plc-px-4 plc-w-full plc-border-2 plc-rounded-md plc-border-primary-800`
         }, this.locale("buttons.select")))));
       });
@@ -19379,7 +19385,7 @@ class SelectModal extends Component {
     }, (_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.restrictive_paywall_metatags_enabled ? this.renderMatchingProductsFirst() : this.renderProducts()), this.state.mode === "plan" && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
       className: "pelcro-select-plans-wrapper plc-mt-4"
     }, this.renderPlans()), !disableGifting && /*#__PURE__*/React__default.createElement("div", {
-      className: "plc-flex plc-justify-center plc-mt-8"
+      className: "plc-flex plc-justify-center plc-mt-4"
     }, /*#__PURE__*/React__default.createElement(Checkbox, {
       onChange: this.onIsGiftChange,
       checked: this.state.isGift,
@@ -33571,9 +33577,6 @@ const AddressesItems = props => {
   const {
     t
   } = useTranslation("dashboard");
-  const {
-    switchView
-  } = usePelcro();
   const [selectedAddressId, setSelectedAddressId] = useState(null);
   const allAddresses = (_window$Pelcro$user$r = window.Pelcro.user.read().addresses) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
 
@@ -33587,10 +33590,6 @@ const AddressesItems = props => {
     return [defaultAddress, ...addressesWithoutDefault];
   };
 
-  if (!getDefaultAddress(allAddresses)) {
-    switchView("address-select");
-  }
-
   const addresses = moveDefaultAddressToStart(allAddresses);
   if (addresses.length === 0) return null;
   useEffect(() => {

package/dist/pelcro.css

@@ -1666,7 +1666,7 @@ Add the correct display in Chrome and Safari.
   left: 0px;
   height: 0.25rem;
   width: 100%;
-  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
+  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
 }
 
 /* Firefox */
@@ -1704,7 +1704,7 @@ Add the correct display in Chrome and Safari.
 
 .pelcro-root .productTabs .tabs li#activeTab button {
   border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
-  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
+  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
@@ -2131,10 +2131,6 @@ in order to scope selectors under pelcro-root
   margin-top: 1.5rem;
 }
 
-.pelcro-root .plc-mt-8 {
-  margin-top: 2rem;
-}
-
 .pelcro-root .plc-mt-auto {
   margin-top: auto;
 }

package/package.json

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