@shopgate/engage 7.30.0-alpha.9 → 7.30.0-beta.2

package/locations/components/StoreList/StoreListLocations.js

@@ -11,6 +11,7 @@ import { FULFILLMENT_SHEET_STORE_LIST } from "../../constants/Portals";
  * Renders the locations.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 function StoreListLocations() {
   const {
     locations,
@@ -20,21 +21,25 @@ function StoreListLocations() {
     return null;
   }
   const showPlaceholder = isLoading && (!locations || locations.length === 0);
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
+  return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: FULFILLMENT_SHEET_STORE_LIST,
     portalProps: {
       locations
-    }
-  }, /*#__PURE__*/React.createElement(CardList, {
-    className: stores
-  }, /*#__PURE__*/React.createElement(PlaceholderLabel, {
-    className: storeCardPlaceholder,
-    ready: !showPlaceholder
-  }, locations.map(location => /*#__PURE__*/React.createElement(CardList.Item, {
-    className: storeCard,
-    key: location.code
-  }, /*#__PURE__*/React.createElement(StoreContext.Provider, {
-    value: location
-  }, /*#__PURE__*/React.createElement(StoreCard, null)))))));
+    },
+    children: /*#__PURE__*/_jsx(CardList, {
+      className: stores,
+      children: /*#__PURE__*/_jsx(PlaceholderLabel, {
+        className: storeCardPlaceholder,
+        ready: !showPlaceholder,
+        children: locations.map(location => /*#__PURE__*/_jsx(CardList.Item, {
+          className: storeCard,
+          children: /*#__PURE__*/_jsx(StoreContext.Provider, {
+            value: location,
+            children: /*#__PURE__*/_jsx(StoreCard, {})
+          })
+        }, location.code))
+      })
+    })
+  });
 }
 export default StoreListLocations;

package/locations/components/StoreList/StoreListProduct.js

@@ -11,6 +11,7 @@ import { FULFILLMENT_SHEET_PRODUCT } from "../../constants/Portals";
  * Renders the product information of the store list.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function StoreListProduct() {
   const {
     product
@@ -20,23 +21,28 @@ function StoreListProduct() {
   }
 
   /* eslint-disable jsx-a11y/aria-role */
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
+  return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: FULFILLMENT_SHEET_PRODUCT,
     portalProps: {
       product
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.productContainer,
-    role: "text"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.productContainerInner
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.productImage
-  }, /*#__PURE__*/React.createElement(ProductImage, {
-    src: product.featuredImageBaseUrl
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles.productContent
-  }, /*#__PURE__*/React.createElement(StoreListProductName, null), /*#__PURE__*/React.createElement(StoreListProductInfo, null)))));
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      className: styles.productContainer,
+      role: "text",
+      children: /*#__PURE__*/_jsxs("div", {
+        className: styles.productContainerInner,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: styles.productImage,
+          children: /*#__PURE__*/_jsx(ProductImage, {
+            src: product.featuredImageBaseUrl
+          })
+        }), /*#__PURE__*/_jsxs("div", {
+          className: styles.productContent,
+          children: [/*#__PURE__*/_jsx(StoreListProductName, {}), /*#__PURE__*/_jsx(StoreListProductInfo, {})]
+        })]
+      })
+    })
+  });
   /* eslint-enable jsx-a11y/aria-role */
 }
 export default StoreListProduct;

package/locations/components/StoreList/StoreListProductInfo.js

@@ -8,6 +8,7 @@ import { productInfo, productInfoLeft, priceInfo } from "./StoreListProduct.styl
  * Renders the product information of the store list.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function StoreListProductInfo() {
   const {
     product
@@ -18,18 +19,21 @@ function StoreListProductInfo() {
   const {
     characteristics
   } = product;
-  return /*#__PURE__*/React.createElement(Grid, {
-    className: productInfo
-  }, /*#__PURE__*/React.createElement(Grid.Item, {
-    grow: 1,
-    className: productInfoLeft
-  }, characteristics && /*#__PURE__*/React.createElement(ProductProperties, {
-    properties: characteristics
-  })), /*#__PURE__*/React.createElement(Grid.Item, {
-    shrink: 0,
-    className: priceInfo
-  }, /*#__PURE__*/React.createElement(ProductGridPrice, {
-    product: product
-  })));
+  return /*#__PURE__*/_jsxs(Grid, {
+    className: productInfo,
+    children: [/*#__PURE__*/_jsx(Grid.Item, {
+      grow: 1,
+      className: productInfoLeft,
+      children: characteristics && /*#__PURE__*/_jsx(ProductProperties, {
+        properties: characteristics
+      })
+    }), /*#__PURE__*/_jsx(Grid.Item, {
+      shrink: 0,
+      className: priceInfo,
+      children: /*#__PURE__*/_jsx(ProductGridPrice, {
+        product: product
+      })
+    })]
+  });
 }
 export default StoreListProductInfo;

package/locations/components/StoreList/StoreListProductName.js

@@ -7,6 +7,7 @@ import { productName } from "./StoreListProduct.style";
  * Renders the product's name.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 function StoreListProductName() {
   const {
     baseProduct
@@ -14,12 +15,15 @@ function StoreListProductName() {
   if (!baseProduct) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: productName
-  }, /*#__PURE__*/React.createElement(Ellipsis, null, /*#__PURE__*/React.createElement("span", {
-    dangerouslySetInnerHTML: {
-      __html: baseProduct.name
-    }
-  })));
+  return /*#__PURE__*/_jsx("div", {
+    className: productName,
+    children: /*#__PURE__*/_jsx(Ellipsis, {
+      children: /*#__PURE__*/_jsx("span", {
+        dangerouslySetInnerHTML: {
+          __html: baseProduct.name
+        }
+      })
+    })
+  });
 }
 export default StoreListProductName;

package/locations/components/StoreList/StoreListSearch.js

@@ -15,6 +15,7 @@ import { FULFILLMENT_SHEET_SEARCH } from "../../constants/Portals";
  * @param {Object} search .
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function StoreListSearch({
   postalCode,
   countryCode,
@@ -115,64 +116,74 @@ function StoreListSearch({
   };
   const countries = useCountriesNames(supportedCountries);
   const hasSupportedCountries = supportedCountries && supportedCountries.length > 1;
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
+  return /*#__PURE__*/_jsxs(SurroundPortals, {
     portalName: FULFILLMENT_SHEET_SEARCH,
     portalProps: {
       product
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: container
-  }, hasSupportedCountries && /*#__PURE__*/React.createElement("div", {
-    className: countriesCell
-  }, /*#__PURE__*/React.createElement("div", {
-    className: selectContainer
-  }, /*#__PURE__*/React.createElement("select", {
-    name: "countryCode",
-    value: countryCode,
-    onChange: handleCountrySelectChange,
-    className: select
-  }, Object.keys(countries).map(key => /*#__PURE__*/React.createElement("option", {
-    className: "option",
-    value: key,
-    key: key
-  }, countries[key]))))), /*#__PURE__*/React.createElement("div", {
-    className: inputCell
-  }, /*#__PURE__*/React.createElement("div", {
-    className: inputContainer
-  }, /*#__PURE__*/React.createElement("span", {
-    className: inputIcon,
-    "aria-hidden": true
-  }, /*#__PURE__*/React.createElement(MagnifierIcon, null)), /*#__PURE__*/React.createElement("input", {
-    ref: inputEl,
-    name: "postalCode",
-    className: input,
-    value: inputPostalCode,
-    onChange: handlePostalCodeChange,
-    onBlur: handlePostalCodeBlur,
-    onKeyDown: handlePostalCodeSubmitKeyDown,
-    disabled: isLoading,
-    type: "search",
-    autoComplete: "off",
-    autoCorrect: "off",
-    placeholder: i18n.text('locations.search_placeholder'),
-    "aria-label": i18n.text('locations.search_placeholder')
-  }), /*#__PURE__*/React.createElement("button", {
-    onClick: handleLocateMeButton,
-    type: "button",
-    className: inputIcon,
-    "aria-label": i18n.text('locations.stores_near.location')
-  }, /*#__PURE__*/React.createElement(LocatorIcon, null)))), /*#__PURE__*/React.createElement("div", {
-    className: radiusCell
-  }, isStoreFinder && /*#__PURE__*/React.createElement(StoreListSearchRadius, null))), message && /*#__PURE__*/React.createElement(MessageBar, {
-    messages: [{
-      type: 'error',
-      message,
-      icon: InfoIcon
-    }],
-    classNames: {
-      icon: iconClass
-    }
-  }));
+    },
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: container,
+      children: [hasSupportedCountries && /*#__PURE__*/_jsx("div", {
+        className: countriesCell,
+        children: /*#__PURE__*/_jsx("div", {
+          className: selectContainer,
+          children: /*#__PURE__*/_jsx("select", {
+            name: "countryCode",
+            value: countryCode,
+            onChange: handleCountrySelectChange,
+            className: select,
+            children: Object.keys(countries).map(key => /*#__PURE__*/_jsx("option", {
+              className: "option",
+              value: key,
+              children: countries[key]
+            }, key))
+          })
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: inputCell,
+        children: /*#__PURE__*/_jsxs("div", {
+          className: inputContainer,
+          children: [/*#__PURE__*/_jsx("span", {
+            className: inputIcon,
+            "aria-hidden": true,
+            children: /*#__PURE__*/_jsx(MagnifierIcon, {})
+          }), /*#__PURE__*/_jsx("input", {
+            ref: inputEl,
+            name: "postalCode",
+            className: input,
+            value: inputPostalCode,
+            onChange: handlePostalCodeChange,
+            onBlur: handlePostalCodeBlur,
+            onKeyDown: handlePostalCodeSubmitKeyDown,
+            disabled: isLoading,
+            type: "search",
+            autoComplete: "off",
+            autoCorrect: "off",
+            placeholder: i18n.text('locations.search_placeholder'),
+            "aria-label": i18n.text('locations.search_placeholder')
+          }), /*#__PURE__*/_jsx("button", {
+            onClick: handleLocateMeButton,
+            type: "button",
+            className: inputIcon,
+            "aria-label": i18n.text('locations.stores_near.location'),
+            children: /*#__PURE__*/_jsx(LocatorIcon, {})
+          })]
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: radiusCell,
+        children: isStoreFinder && /*#__PURE__*/_jsx(StoreListSearchRadius, {})
+      })]
+    }), message && /*#__PURE__*/_jsx(MessageBar, {
+      messages: [{
+        type: 'error',
+        message,
+        icon: InfoIcon
+      }],
+      classNames: {
+        icon: iconClass
+      }
+    })]
+  });
 }
 StoreListSearch.defaultProps = {
   postalCode: null,

package/locations/components/StoreList/StoreListSearchRadius.js

@@ -9,6 +9,7 @@ import connector from "./StoreListSearchRadius.connector";
  * @param {Object} props The component props
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const StoreListSearchRadius = ({
   radius,
   unitSystem,
@@ -39,23 +40,25 @@ const StoreListSearchRadius = ({
     return [{
       value: '',
       label: i18n.text('locations.radius')
-    }, ...result];
+    }].concat(result);
   }, [unitSystem]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: selectContainer
-  }, /*#__PURE__*/React.createElement("select", {
-    name: "store_list_search_radius",
-    value: searchRadius || '',
-    className: select,
-    onChange: handleRadiusChange
-  }, options.map(({
-    value,
-    label
-  }) => /*#__PURE__*/React.createElement("option", {
-    className: option,
-    value: value,
-    key: label
-  }, label))));
+  return /*#__PURE__*/_jsx("div", {
+    className: selectContainer,
+    children: /*#__PURE__*/_jsx("select", {
+      name: "store_list_search_radius",
+      value: searchRadius || '',
+      className: select,
+      onChange: handleRadiusChange,
+      children: options.map(({
+        value,
+        label
+      }) => /*#__PURE__*/_jsx("option", {
+        className: option,
+        value: value,
+        children: label
+      }, label))
+    })
+  });
 };
 StoreListSearchRadius.defaultProps = {
   radius: null,

package/locations/components/StoreList/StoreOpeningHours.js

@@ -15,6 +15,7 @@ import { openingHours, detailsSecondary } from "./Store.style";
  * @param {boolean} props.pure Whether to render the opening hours without any wrapper components
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function StoreOpeningHours({
   hours,
   pure
@@ -22,22 +23,27 @@ export function StoreOpeningHours({
   if (!hours || _every(hours, _isEmpty)) {
     return null;
   }
-  const storeHours = /*#__PURE__*/React.createElement("div", {
-    className: openingHours
-  }, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, getWeekDaysOrder().map(weekDay => /*#__PURE__*/React.createElement(StoreOpeningHoursLine, {
-    hours: hours[weekDay],
-    day: weekDay,
-    key: weekDay
-  })))));
+  const storeHours = /*#__PURE__*/_jsx("div", {
+    className: openingHours,
+    children: /*#__PURE__*/_jsx("table", {
+      children: /*#__PURE__*/_jsx("tbody", {
+        children: getWeekDaysOrder().map(weekDay => /*#__PURE__*/_jsx(StoreOpeningHoursLine, {
+          hours: hours[weekDay],
+          day: weekDay
+        }, weekDay))
+      })
+    })
+  });
   if (pure) {
     return storeHours;
   }
-  return /*#__PURE__*/React.createElement(StoreDetailsLine, {
-    icon: TimeIcon
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "locations.hours_details",
-    className: detailsSecondary
-  }), storeHours);
+  return /*#__PURE__*/_jsxs(StoreDetailsLine, {
+    icon: TimeIcon,
+    children: [/*#__PURE__*/_jsx(I18n.Text, {
+      string: "locations.hours_details",
+      className: detailsSecondary
+    }), storeHours]
+  });
 }
 StoreOpeningHours.defaultProps = {
   hours: null,

package/locations/components/StoreList/StoreOpeningHoursLine.js

@@ -10,6 +10,7 @@ import { openingHoursRow, openingHoursDay } from "./Store.style";
  * @param {string} props.hours The hours line.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function StoreOpeningHoursLine({
   day,
   hours
@@ -17,17 +18,20 @@ export function StoreOpeningHoursLine({
   if (!hours || hours === '') {
     return null;
   }
-  return /*#__PURE__*/React.createElement("tr", {
+  return /*#__PURE__*/_jsxs("tr", {
     className: openingHoursRow,
     "aria-label": `${i18n.text(`locations.${day}`)}: ${hours}`,
     tabIndex: 0,
-    role: "row"
-  }, /*#__PURE__*/React.createElement("td", {
-    className: openingHoursDay,
-    "aria-hidden": true
-  }, i18n.text(`locations.${day}`)), /*#__PURE__*/React.createElement("td", {
-    "aria-hidden": true
-  }, hours));
+    role: "row",
+    children: [/*#__PURE__*/_jsx("td", {
+      className: openingHoursDay,
+      "aria-hidden": true,
+      children: i18n.text(`locations.${day}`)
+    }), /*#__PURE__*/_jsx("td", {
+      "aria-hidden": true,
+      children: hours
+    })]
+  });
 }
 StoreOpeningHoursLine.defaultProps = {
   hours: null

package/locations/components/StoreList/StorePhoneNumber.js

@@ -11,27 +11,31 @@ import { detailsPrimary, detailsSecondary } from "./Store.style";
  * @param {string} props.phone The store's phone number.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function StorePhoneNumber({
   phone
 }) {
   if (!phone) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("a", {
+  return /*#__PURE__*/_jsx("a", {
     href: `tel:${phone}`,
     "aria-label": `${i18n.text('locations.phone')}: ${phone}`,
-    tabIndex: 0
-  }, /*#__PURE__*/React.createElement(StoreDetailsLine, {
-    icon: PhoneIcon,
-    linked: true
-  }, /*#__PURE__*/React.createElement("div", {
-    className: detailsPrimary,
-    "aria-hidden": true
-  }, phone), /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "locations.phone",
-    className: detailsSecondary,
-    "aria-hidden": true
-  })));
+    tabIndex: 0,
+    children: /*#__PURE__*/_jsxs(StoreDetailsLine, {
+      icon: PhoneIcon,
+      linked: true,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: detailsPrimary,
+        "aria-hidden": true,
+        children: phone
+      }), /*#__PURE__*/_jsx(I18n.Text, {
+        string: "locations.phone",
+        className: detailsSecondary,
+        "aria-hidden": true
+      })]
+    })
+  });
 }
 StorePhoneNumber.defaultProps = {
   phone: null

package/locations/components/StoreList/StoreSelectLocationButton.js

@@ -12,6 +12,7 @@ import connect from "./StoreListSearch.connector";
  * The StoreSelectLocationButton component.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const StoreSelectLocationButton = ({
   setPostalCode
 }) => {
@@ -35,13 +36,15 @@ const StoreSelectLocationButton = ({
       selectLocation(store);
     }
   }, [isAvailable, noInventory, product, selectLocation, setPostalCode, setUserSearchZipLocationFromSelection, store]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: selectLocationButtonWrapper
-  }, /*#__PURE__*/React.createElement(RippleButton, {
-    onClick: handleClick,
-    className: selectLocationButton.toString(),
-    disabled: isLoading || store?.isComingSoon || !noInventory && !isAvailable
-  }, i18n.text(store?.isComingSoon ? 'location.comingSoon' : 'locations.select_location')));
+  return /*#__PURE__*/_jsx("div", {
+    className: selectLocationButtonWrapper,
+    children: /*#__PURE__*/_jsx(RippleButton, {
+      onClick: handleClick,
+      className: selectLocationButton.toString(),
+      disabled: isLoading || store?.isComingSoon || !noInventory && !isAvailable,
+      children: i18n.text(store?.isComingSoon ? 'location.comingSoon' : 'locations.select_location')
+    })
+  });
 };
 const connectedStoreSelectLocationButton = connect(StoreSelectLocationButton);
 export { connectedStoreSelectLocationButton as StoreSelectLocationButton };

package/locations/providers/FulfillmentProvider.connector.js

@@ -58,11 +58,11 @@ function makeMapStateToProps() {
  * @returns {Object}
  */
 const mapDispatchToProps = dispatch => ({
-  selectLocation: (...params) => dispatch(selectLocation(...params)),
-  submitReservation: (...params) => dispatch(submitReservation(...params)),
-  storeFormInput: (...params) => dispatch(storeFormInput(...params)),
-  addProductsToCart: (...params) => dispatch(addProductsToCart(...params)),
-  updateProductsInCart: (...params) => dispatch(updateProductsInCart(...params)),
-  showModal: (...params) => dispatch(showModal(...params))
+  selectLocation: (...params) => dispatch(selectLocation.apply(void 0, params)),
+  submitReservation: (...params) => dispatch(submitReservation.apply(void 0, params)),
+  storeFormInput: (...params) => dispatch(storeFormInput.apply(void 0, params)),
+  addProductsToCart: (...params) => dispatch(addProductsToCart.apply(void 0, params)),
+  updateProductsInCart: (...params) => dispatch(updateProductsInCart.apply(void 0, params)),
+  showModal: (...params) => dispatch(showModal.apply(void 0, params))
 });
 export default connect(makeMapStateToProps, mapDispatchToProps);