@pelcro/react-pelcro-js 4.0.0-alpha.79 → 4.0.0-alpha.80

package/dist/index.cjs.js

@@ -20117,7 +20117,7 @@ class SelectModal extends React.Component {
 
       return /*#__PURE__*/React__default['default'].createElement("div", {
         key: product.id,
-        className: "pelcro-product plc-relative plc-overflow-hidden plc-h-full plc-min-h-card plc-flex plc-flex-col plc-items-center plc-justify-center plc-pt-5 plc-text-gray-900 plc-border plc-border-solid plc-rounded-sm plc-border-gray-200 plc-bg-white pelcro-select-product-wrapper"
+        className: "pelcro-product plc-w-84 plc-relative plc-overflow-hidden plc-h-full plc-min-h-card plc-flex plc-flex-col plc-items-center plc-justify-center plc-pt-5 plc-text-gray-900 plc-border plc-border-solid plc-rounded-sm plc-border-gray-200 plc-bg-white pelcro-select-product-wrapper"
       }, product.image && /*#__PURE__*/React__default['default'].createElement("figure", {
         className: "plc-w-full plc-mb-4 plc-h-28 plc-relative plc-overflow-hidden plc-flex plc-items-stretch"
       }, /*#__PURE__*/React__default['default'].createElement("img", {
@@ -20164,10 +20164,17 @@ class SelectModal extends React.Component {
       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));
-      return /*#__PURE__*/React__default['default'].createElement(Carousel, {
-        slidesCount: items.length,
-        mobileArrowDown: true
-      }, items);
+
+      if (items.length > 3) {
+        return /*#__PURE__*/React__default['default'].createElement(Carousel, {
+          slidesCount: items.length,
+          mobileArrowDown: true
+        }, items);
+      } else {
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "plc-flex plc-flex-col md:plc-flex-row plc-gap-4 plc-items-center sm:plc-px-8 plc-px-0"
+        }, items);
+      }
     });
 
     _defineProperty$4(this, "handleScrollLeft", () => {
@@ -20289,7 +20296,7 @@ class SelectModal extends React.Component {
         // const isChecked = this.state.plan.id === plan.id ? true : false;
         return /*#__PURE__*/React__default['default'].createElement("div", {
           key: plan.id,
-          className: `${((_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.plan.id) === plan.id ? "plc-border-2 plc-border-primary" : "plc-border plc-border-gray-300"} plc-h-full plc-min-h-card plc-flex plc-flex-col plc-items-start plc-text-gray-900 plc-border-solid plc-rounded-sm plc-bg-white pelcro-select-plan-wrapper`
+          className: `${((_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.plan.id) === plan.id ? "plc-border-2 plc-border-primary" : "plc-border plc-border-gray-300"} plc-h-full plc-w-84 plc-min-h-card plc-flex plc-flex-col plc-items-start plc-text-gray-900 plc-border-solid plc-rounded-sm plc-bg-white pelcro-select-plan-wrapper`
         }, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "plc-w-full plc-flex plc-flex-col plc-flex-1 plc-h-full plc-justify-between",
           id: `pelcro-select-plan-${plan.id}`
@@ -20311,7 +20318,7 @@ class SelectModal extends React.Component {
           className: "plc-text-gray-400 plc-text-xs plc-flex plc-flex-col plc-font-normal plc-ml-1"
         }, /*#__PURE__*/React__default['default'].createElement("span", {
           className: "plc-uppercase"
-        }, plan.currency), /*#__PURE__*/React__default['default'].createElement("span", null, "/ ", plan.interval))), /*#__PURE__*/React__default['default'].createElement("div", {
+        }, plan.currency), plan.auto_renew && /*#__PURE__*/React__default['default'].createElement("span", null, "/ ", plan.interval_count, " ", plan.interval))), /*#__PURE__*/React__default['default'].createElement("div", {
           className: `plc-grid plc-bg-primary ${disableGifting ? "plc-grid-cols-1" : "plc-grid-cols-2"}`
         }, /*#__PURE__*/React__default['default'].createElement("button", {
           className: `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-sm plc-border-primary focus:plc-outline-none plc-text-white plc-bg-primary hover:plc-bg-primary-600 hover:plc-border-primary-600 plc-transition-all`,
@@ -20323,10 +20330,17 @@ class SelectModal extends React.Component {
           onClick: e => this.selectPlan(e, true)
         }, this.locale("buttons.gift"))))));
       });
-      return /*#__PURE__*/React__default['default'].createElement(Carousel, {
-        slidesCount: items.length,
-        mobileArrowDown: true
-      }, items);
+
+      if (items.length > 3) {
+        return /*#__PURE__*/React__default['default'].createElement(Carousel, {
+          slidesCount: items.length,
+          mobileArrowDown: true
+        }, items);
+      } else {
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "plc-flex plc-flex-col md:plc-flex-row plc-gap-4 plc-items-center sm:plc-px-8 plc-px-0"
+        }, items);
+      }
     });
 
     _defineProperty$4(this, "selectProduct", e => {
@@ -20461,7 +20475,7 @@ class SelectModal extends React.Component {
     }
 
     return /*#__PURE__*/React__default['default'].createElement(Modal, {
-      className: "plc-max-w-full sm:plc-max-w-90% md:plc-max-w-70%",
+      className: "plc-max-w-full sm:plc-max-w-90% md:plc-max-w-70% plc-w-auto",
       hideCloseButton: !this.closeButton,
       onClose: this.props.onClose,
       id: "pelcro-selection-modal"
@@ -30110,7 +30124,10 @@ const AddressCreateContainer = ({
   })));
 };
 
-function AddressCreateFirstName(props) {
+function AddressCreateFirstName({
+  initWithUserFirstName = true,
+  ...props
+}) {
   const {
     dispatch,
     state: {
@@ -30133,8 +30150,21 @@ function AddressCreateFirstName(props) {
       type: RESET_FIELD_ERROR,
       payload: "firstNameError"
     });
+  }; // Initialize first name field with user's first name
+
+
+  const loadFirstNameIntoField = () => {
+    var _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$r;
+
+    handleInputChange((_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$user = _window$Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : (_window$Pelcro$user$r = _window$Pelcro$user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.first_name);
   };
 
+  React.useEffect(() => {
+    if (initWithUserFirstName) {
+      loadFirstNameIntoField();
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   return /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
     type: "text",
     autoComplete: "given-name",
@@ -30146,7 +30176,10 @@ function AddressCreateFirstName(props) {
   }, props));
 }
 
-function AddressCreateLastName(props) {
+function AddressCreateLastName({
+  initWithUserLastName = true,
+  ...props
+}) {
   const {
     dispatch,
     state: {
@@ -30169,8 +30202,21 @@ function AddressCreateLastName(props) {
       type: RESET_FIELD_ERROR,
       payload: "lastNameError"
     });
+  }; // Initialize first name field with user's first name
+
+
+  const loadLastNameIntoField = () => {
+    var _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$r;
+
+    handleInputChange((_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$user = _window$Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : (_window$Pelcro$user$r = _window$Pelcro$user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.last_name);
   };
 
+  React.useEffect(() => {
+    if (initWithUserLastName) {
+      loadLastNameIntoField();
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   return /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
     type: "text",
     autoComplete: "family-name",

package/dist/index.esm.js

@@ -20087,7 +20087,7 @@ class SelectModal extends Component {
 
       return /*#__PURE__*/React__default.createElement("div", {
         key: product.id,
-        className: "pelcro-product plc-relative plc-overflow-hidden plc-h-full plc-min-h-card plc-flex plc-flex-col plc-items-center plc-justify-center plc-pt-5 plc-text-gray-900 plc-border plc-border-solid plc-rounded-sm plc-border-gray-200 plc-bg-white pelcro-select-product-wrapper"
+        className: "pelcro-product plc-w-84 plc-relative plc-overflow-hidden plc-h-full plc-min-h-card plc-flex plc-flex-col plc-items-center plc-justify-center plc-pt-5 plc-text-gray-900 plc-border plc-border-solid plc-rounded-sm plc-border-gray-200 plc-bg-white pelcro-select-product-wrapper"
       }, product.image && /*#__PURE__*/React__default.createElement("figure", {
         className: "plc-w-full plc-mb-4 plc-h-28 plc-relative plc-overflow-hidden plc-flex plc-items-stretch"
       }, /*#__PURE__*/React__default.createElement("img", {
@@ -20134,10 +20134,17 @@ class SelectModal extends Component {
       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));
-      return /*#__PURE__*/React__default.createElement(Carousel, {
-        slidesCount: items.length,
-        mobileArrowDown: true
-      }, items);
+
+      if (items.length > 3) {
+        return /*#__PURE__*/React__default.createElement(Carousel, {
+          slidesCount: items.length,
+          mobileArrowDown: true
+        }, items);
+      } else {
+        return /*#__PURE__*/React__default.createElement("div", {
+          className: "plc-flex plc-flex-col md:plc-flex-row plc-gap-4 plc-items-center sm:plc-px-8 plc-px-0"
+        }, items);
+      }
     });
 
     _defineProperty$4(this, "handleScrollLeft", () => {
@@ -20259,7 +20266,7 @@ class SelectModal extends Component {
         // const isChecked = this.state.plan.id === plan.id ? true : false;
         return /*#__PURE__*/React__default.createElement("div", {
           key: plan.id,
-          className: `${((_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.plan.id) === plan.id ? "plc-border-2 plc-border-primary" : "plc-border plc-border-gray-300"} plc-h-full plc-min-h-card plc-flex plc-flex-col plc-items-start plc-text-gray-900 plc-border-solid plc-rounded-sm plc-bg-white pelcro-select-plan-wrapper`
+          className: `${((_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.plan.id) === plan.id ? "plc-border-2 plc-border-primary" : "plc-border plc-border-gray-300"} plc-h-full plc-w-84 plc-min-h-card plc-flex plc-flex-col plc-items-start plc-text-gray-900 plc-border-solid plc-rounded-sm plc-bg-white pelcro-select-plan-wrapper`
         }, /*#__PURE__*/React__default.createElement("div", {
           className: "plc-w-full plc-flex plc-flex-col plc-flex-1 plc-h-full plc-justify-between",
           id: `pelcro-select-plan-${plan.id}`
@@ -20281,7 +20288,7 @@ class SelectModal extends Component {
           className: "plc-text-gray-400 plc-text-xs plc-flex plc-flex-col plc-font-normal plc-ml-1"
         }, /*#__PURE__*/React__default.createElement("span", {
           className: "plc-uppercase"
-        }, plan.currency), /*#__PURE__*/React__default.createElement("span", null, "/ ", plan.interval))), /*#__PURE__*/React__default.createElement("div", {
+        }, plan.currency), plan.auto_renew && /*#__PURE__*/React__default.createElement("span", null, "/ ", plan.interval_count, " ", plan.interval))), /*#__PURE__*/React__default.createElement("div", {
           className: `plc-grid plc-bg-primary ${disableGifting ? "plc-grid-cols-1" : "plc-grid-cols-2"}`
         }, /*#__PURE__*/React__default.createElement("button", {
           className: `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-sm plc-border-primary focus:plc-outline-none plc-text-white plc-bg-primary hover:plc-bg-primary-600 hover:plc-border-primary-600 plc-transition-all`,
@@ -20293,10 +20300,17 @@ class SelectModal extends Component {
           onClick: e => this.selectPlan(e, true)
         }, this.locale("buttons.gift"))))));
       });
-      return /*#__PURE__*/React__default.createElement(Carousel, {
-        slidesCount: items.length,
-        mobileArrowDown: true
-      }, items);
+
+      if (items.length > 3) {
+        return /*#__PURE__*/React__default.createElement(Carousel, {
+          slidesCount: items.length,
+          mobileArrowDown: true
+        }, items);
+      } else {
+        return /*#__PURE__*/React__default.createElement("div", {
+          className: "plc-flex plc-flex-col md:plc-flex-row plc-gap-4 plc-items-center sm:plc-px-8 plc-px-0"
+        }, items);
+      }
     });
 
     _defineProperty$4(this, "selectProduct", e => {
@@ -20431,7 +20445,7 @@ class SelectModal extends Component {
     }
 
     return /*#__PURE__*/React__default.createElement(Modal, {
-      className: "plc-max-w-full sm:plc-max-w-90% md:plc-max-w-70%",
+      className: "plc-max-w-full sm:plc-max-w-90% md:plc-max-w-70% plc-w-auto",
       hideCloseButton: !this.closeButton,
       onClose: this.props.onClose,
       id: "pelcro-selection-modal"
@@ -30080,7 +30094,10 @@ const AddressCreateContainer = ({
   })));
 };
 
-function AddressCreateFirstName(props) {
+function AddressCreateFirstName({
+  initWithUserFirstName = true,
+  ...props
+}) {
   const {
     dispatch,
     state: {
@@ -30103,8 +30120,21 @@ function AddressCreateFirstName(props) {
       type: RESET_FIELD_ERROR,
       payload: "firstNameError"
     });
+  }; // Initialize first name field with user's first name
+
+
+  const loadFirstNameIntoField = () => {
+    var _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$r;
+
+    handleInputChange((_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$user = _window$Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : (_window$Pelcro$user$r = _window$Pelcro$user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.first_name);
   };
 
+  useEffect(() => {
+    if (initWithUserFirstName) {
+      loadFirstNameIntoField();
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   return /*#__PURE__*/React__default.createElement(Input, Object.assign({
     type: "text",
     autoComplete: "given-name",
@@ -30116,7 +30146,10 @@ function AddressCreateFirstName(props) {
   }, props));
 }
 
-function AddressCreateLastName(props) {
+function AddressCreateLastName({
+  initWithUserLastName = true,
+  ...props
+}) {
   const {
     dispatch,
     state: {
@@ -30139,8 +30172,21 @@ function AddressCreateLastName(props) {
       type: RESET_FIELD_ERROR,
       payload: "lastNameError"
     });
+  }; // Initialize first name field with user's first name
+
+
+  const loadLastNameIntoField = () => {
+    var _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$r;
+
+    handleInputChange((_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$user = _window$Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : (_window$Pelcro$user$r = _window$Pelcro$user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.last_name);
   };
 
+  useEffect(() => {
+    if (initWithUserLastName) {
+      loadLastNameIntoField();
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   return /*#__PURE__*/React__default.createElement(Input, Object.assign({
     type: "text",
     autoComplete: "family-name",

package/dist/pelcro.css

@@ -2510,6 +2510,14 @@ apple-pay-button {
   width: 14rem;
 }
 
+.pelcro-root .plc-w-84{
+  width: 22.875rem;
+}
+
+.pelcro-root .plc-w-auto{
+  width: auto;
+}
+
 .pelcro-root .plc-w-1\/2{
   width: 50%;
 }
@@ -2793,6 +2801,10 @@ apple-pay-button {
   justify-items: center;
 }
 
+.pelcro-root .plc-gap-4{
+  gap: 1rem;
+}
+
 .pelcro-root .plc-gap-x-3{
   column-gap: 0.75rem;
 }

package/package.json

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