@pelcro/react-pelcro-js 4.0.0-alpha.93 → 4.0.0-alpha.95

package/dist/index.cjs.js

@@ -21729,6 +21729,8 @@ var StateManagedSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 var StateManagedSelect$1 = StateManagedSelect;
 
+// Custom option component to show images and labels
+
 const customSingleValue = ({
   data
 }) => /*#__PURE__*/React__default['default'].createElement("div", {
@@ -21752,11 +21754,7 @@ const customOption = props => {
   return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
     ref: innerRef
   }, innerProps, {
-    className: "custom-option",
-    style: {
-      display: "flex",
-      alignItems: "center"
-    }
+    className: "custom-option"
   }), /*#__PURE__*/React__default['default'].createElement("img", {
     src: data.image,
     alt: data.label,
@@ -21772,9 +21770,9 @@ const ImageSelect = ({
   ...props
 }) => {
   const options = optionsArray.map(option => ({
-    value: option.id,
-    label: option.name,
-    image: option.image
+    value: option === null || option === void 0 ? void 0 : option.id,
+    label: option === null || option === void 0 ? void 0 : option.name,
+    image: option === null || option === void 0 ? void 0 : option.image
   }));
   return /*#__PURE__*/React__default['default'].createElement(StateManagedSelect$1, Object.assign({
     className: "plc-px-5",
@@ -26988,13 +26986,16 @@ class SelectModal extends React.Component {
         disableGifting
       } = this.props;
       const items = this.state.planList.map(plan => {
-        var _plan$entitlements, _this$state;
+        var _this$state;
 
         // const isChecked = this.state.plan.id === plan.id ? true : false;
         let itemsArray = [];
 
-        if (plan.entitlements && ((_plan$entitlements = plan.entitlements) === null || _plan$entitlements === void 0 ? void 0 : _plan$entitlements.length) > 0) {
-          itemsArray = plan.entitlements.map(itemSkuId => window.Pelcro.ecommerce.products.getBySkuId(Number(itemSkuId)));
+        if (plan.entitlements && plan.entitlements.length > 0) {
+          itemsArray = plan.entitlements.map(itemSkuId => {
+            const skuNumber = Number(itemSkuId);
+            return isNaN(skuNumber) ? null : window.Pelcro.ecommerce.products.getBySkuId(skuNumber);
+          }).filter(item => item !== null);
         }
 
         return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -27013,7 +27014,7 @@ class SelectModal extends React.Component {
           className: "plc-px-8 plc-py-6 plc-text-center plc-w-full"
         }, /*#__PURE__*/React__default['default'].createElement("p", {
           className: "plc-text-xs plc-mt-1 pelcro-select-plan-description plc-text-gray-500"
-        }, plan.description)), plan.entitlements && /*#__PURE__*/React__default['default'].createElement(ImageSelect, {
+        }, plan.description)), plan.entitlements && itemsArray && itemsArray.length > 0 && /*#__PURE__*/React__default['default'].createElement(ImageSelect, {
           optionsArray: itemsArray,
           onChange: e => {
             console.log(e.value);

package/dist/index.esm.js

@@ -21699,6 +21699,8 @@ var StateManagedSelect = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 var StateManagedSelect$1 = StateManagedSelect;
 
+// Custom option component to show images and labels
+
 const customSingleValue = ({
   data
 }) => /*#__PURE__*/React__default.createElement("div", {
@@ -21722,11 +21724,7 @@ const customOption = props => {
   return /*#__PURE__*/React__default.createElement("div", Object.assign({
     ref: innerRef
   }, innerProps, {
-    className: "custom-option",
-    style: {
-      display: "flex",
-      alignItems: "center"
-    }
+    className: "custom-option"
   }), /*#__PURE__*/React__default.createElement("img", {
     src: data.image,
     alt: data.label,
@@ -21742,9 +21740,9 @@ const ImageSelect = ({
   ...props
 }) => {
   const options = optionsArray.map(option => ({
-    value: option.id,
-    label: option.name,
-    image: option.image
+    value: option === null || option === void 0 ? void 0 : option.id,
+    label: option === null || option === void 0 ? void 0 : option.name,
+    image: option === null || option === void 0 ? void 0 : option.image
   }));
   return /*#__PURE__*/React__default.createElement(StateManagedSelect$1, Object.assign({
     className: "plc-px-5",
@@ -26958,13 +26956,16 @@ class SelectModal extends Component {
         disableGifting
       } = this.props;
       const items = this.state.planList.map(plan => {
-        var _plan$entitlements, _this$state;
+        var _this$state;
 
         // const isChecked = this.state.plan.id === plan.id ? true : false;
         let itemsArray = [];
 
-        if (plan.entitlements && ((_plan$entitlements = plan.entitlements) === null || _plan$entitlements === void 0 ? void 0 : _plan$entitlements.length) > 0) {
-          itemsArray = plan.entitlements.map(itemSkuId => window.Pelcro.ecommerce.products.getBySkuId(Number(itemSkuId)));
+        if (plan.entitlements && plan.entitlements.length > 0) {
+          itemsArray = plan.entitlements.map(itemSkuId => {
+            const skuNumber = Number(itemSkuId);
+            return isNaN(skuNumber) ? null : window.Pelcro.ecommerce.products.getBySkuId(skuNumber);
+          }).filter(item => item !== null);
         }
 
         return /*#__PURE__*/React__default.createElement("div", {
@@ -26983,7 +26984,7 @@ class SelectModal extends Component {
           className: "plc-px-8 plc-py-6 plc-text-center plc-w-full"
         }, /*#__PURE__*/React__default.createElement("p", {
           className: "plc-text-xs plc-mt-1 pelcro-select-plan-description plc-text-gray-500"
-        }, plan.description)), plan.entitlements && /*#__PURE__*/React__default.createElement(ImageSelect, {
+        }, plan.description)), plan.entitlements && itemsArray && itemsArray.length > 0 && /*#__PURE__*/React__default.createElement(ImageSelect, {
           optionsArray: itemsArray,
           onChange: e => {
             console.log(e.value);

package/dist/pelcro.css

@@ -1943,6 +1943,22 @@ Add the correct display in Chrome and Safari.
   display: flex !important;
 }
 
+.custom-option {
+  display: flex;
+  align-items: center;
+  cursor: pointer; /* Show pointer cursor on hover */
+  padding: 10px; /* Add padding for better hover area */
+}
+
+.custom-option:hover {
+  background-color: #f0f0f0; /* Highlight background on hover */
+}
+
+.custom-single-value {
+  display: flex;
+  align-items: center;
+}
+
 /* 
 styling is copied from react-easy-crop/react-easy-crop.css 
 in order to scope selectors under pelcro-root
@@ -4087,6 +4103,45 @@ apple-pay-button {
 
 /* purgecss start ignore */
 
+.custom-single-value {
+  display: flex;
+  align-items: center;
+}
+
+.custom-option {
+  display: flex;
+  align-items: center;
+  padding: 5px;
+}
+
+.custom-option img {
+  margin-right: 10px;
+}
+
+.css-hlgwow {
+  display: flex !important;
+}
+
+.custom-option {
+  display: flex;
+  align-items: center;
+  cursor: pointer; /* Show pointer cursor on hover */
+  padding: 10px; /* Add padding for better hover area */
+}
+
+.custom-option:hover {
+  background-color: #f0f0f0; /* Highlight background on hover */
+}
+
+.custom-single-value {
+  display: flex;
+  align-items: center;
+}
+
+/* purgecss end ignore */
+
+/* purgecss start ignore */
+
 .toggle-switch {
   position: relative;
   display: inline-block;

package/package.json

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