@shopgate/engage 7.30.0-alpha.8 → 7.30.0-beta.1

package/locations/components/GlobalLocationSwitcher/GlobalLocationSwitcherBar.js

@@ -8,31 +8,38 @@ import { wrapper, inner, innerStandalone, heading, name, button } from "./Global
 /**
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GlobalLocationSwitcherBar = ({
   locationName,
   handleChange,
   standalone
-}) => /*#__PURE__*/React.createElement("div", {
-  className: wrapper
-}, /*#__PURE__*/React.createElement("div", {
-  className: classNames(inner, {
-    [innerStandalone]: standalone
+}) => /*#__PURE__*/_jsx("div", {
+  className: wrapper,
+  children: /*#__PURE__*/_jsxs("div", {
+    className: classNames(inner, {
+      [innerStandalone]: standalone
+    }),
+    children: [/*#__PURE__*/_jsxs("span", {
+      "aria-label": `${i18n.text('locations.your_current_location.heading')}: ${locationName}`,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: heading,
+        children: `${i18n.text('locations.your_current_location.heading')}:`
+      }), /*#__PURE__*/_jsx("span", {
+        className: name,
+        children: locationName
+      })]
+    }), /*#__PURE__*/_jsx(RippleButton, {
+      onClick: handleChange,
+      type: "secondary",
+      className: button,
+      "aria-haspopup": true,
+      flat: true,
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "locations.your_current_location.change"
+      })
+    })]
   })
-}, /*#__PURE__*/React.createElement("span", {
-  "aria-label": `${i18n.text('locations.your_current_location.heading')}: ${locationName}`
-}, /*#__PURE__*/React.createElement("span", {
-  className: heading
-}, `${i18n.text('locations.your_current_location.heading')}:`), /*#__PURE__*/React.createElement("span", {
-  className: name
-}, locationName)), /*#__PURE__*/React.createElement(RippleButton, {
-  onClick: handleChange,
-  type: "secondary",
-  className: button,
-  "aria-haspopup": true,
-  flat: true
-}, /*#__PURE__*/React.createElement(I18n.Text, {
-  string: "locations.your_current_location.change"
-}))));
+});
 GlobalLocationSwitcherBar.defaultProps = {
   standalone: false
 };

package/locations/components/GlobalLocationSwitcher/GlobalLocationSwitcherDefault.js

@@ -7,23 +7,30 @@ import { wrapper, heading, name, button } from "./GlobalLocationSwitcherDefault.
 /**
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GlobalLocationSwitcherDefault = ({
   locationName,
   handleChange,
   editable
-}) => /*#__PURE__*/React.createElement("div", {
-  className: wrapper
-}, /*#__PURE__*/React.createElement("div", {
-  className: heading
-}, i18n.text('locations.your_current_location.heading')), /*#__PURE__*/React.createElement("div", {
-  className: name
-}, /*#__PURE__*/React.createElement("span", null, locationName), /*#__PURE__*/React.createElement(RippleButton, {
-  onClick: handleChange,
-  type: "secondary",
-  className: button,
-  disabled: !editable,
-  flat: true
-}, /*#__PURE__*/React.createElement(I18n.Text, {
-  string: "locations.your_current_location.change"
-}))));
+}) => /*#__PURE__*/_jsxs("div", {
+  className: wrapper,
+  children: [/*#__PURE__*/_jsx("div", {
+    className: heading,
+    children: i18n.text('locations.your_current_location.heading')
+  }), /*#__PURE__*/_jsxs("div", {
+    className: name,
+    children: [/*#__PURE__*/_jsx("span", {
+      children: locationName
+    }), /*#__PURE__*/_jsx(RippleButton, {
+      onClick: handleChange,
+      type: "secondary",
+      className: button,
+      disabled: !editable,
+      flat: true,
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "locations.your_current_location.change"
+      })
+    })]
+  })]
+});
 export default GlobalLocationSwitcherDefault;

package/locations/components/ReservationResponses/ReservationError.js

@@ -6,12 +6,16 @@ import { container, heading, body } from "./ReservationResponse.style";
  * Renders the reservation error screen.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function ReservationError() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: container
-  }, /*#__PURE__*/React.createElement("h2", {
-    className: heading
-  }, i18n.text('locations.error_title')), /*#__PURE__*/React.createElement("p", {
-    className: body
-  }, i18n.text('locations.error_copy')));
+  return /*#__PURE__*/_jsxs("div", {
+    className: container,
+    children: [/*#__PURE__*/_jsx("h2", {
+      className: heading,
+      children: i18n.text('locations.error_title')
+    }), /*#__PURE__*/_jsx("p", {
+      className: body,
+      children: i18n.text('locations.error_copy')
+    })]
+  });
 }

package/locations/components/ReservationResponses/ReservationSuccess.js

@@ -7,19 +7,25 @@ import { container, heading, body, orderNum } from "./ReservationResponse.style"
  * Renders the reservation success screen.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function ReservationSuccess() {
   const {
     orderNumbers
   } = useContext(FulfillmentContext);
-  return /*#__PURE__*/React.createElement("div", {
-    className: container
-  }, /*#__PURE__*/React.createElement("h2", {
-    className: heading
-  }, i18n.text('locations.success_title')), /*#__PURE__*/React.createElement("p", {
-    className: body
-  }, i18n.text('locations.success_copy')), /*#__PURE__*/React.createElement("p", {
-    className: body
-  }, i18n.text('locations.success_order_num')), orderNumbers !== null && /*#__PURE__*/React.createElement("p", {
-    className: orderNum
-  }, orderNumbers[0]));
+  return /*#__PURE__*/_jsxs("div", {
+    className: container,
+    children: [/*#__PURE__*/_jsx("h2", {
+      className: heading,
+      children: i18n.text('locations.success_title')
+    }), /*#__PURE__*/_jsx("p", {
+      className: body,
+      children: i18n.text('locations.success_copy')
+    }), /*#__PURE__*/_jsx("p", {
+      className: body,
+      children: i18n.text('locations.success_order_num')
+    }), orderNumbers !== null && /*#__PURE__*/_jsx("p", {
+      className: orderNum,
+      children: orderNumbers[0]
+    })]
+  });
 }

package/locations/components/ReserveForm/ReserveForm.js

@@ -10,7 +10,7 @@ import { form, fieldset, formField, formHeading, pickerSwitch, pickerItem, butto
 
 // eslint-disable-next-line max-len
 /** @typedef {import('@shopgate/engage/locations/locations.types').ReservationFormValues} ReservationFormValues */
-
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const PICKUP_PERSON_ME = 'me';
 const PICKUP_PERSON_OTHER = 'someoneelse';
 
@@ -108,93 +108,103 @@ function ReserveFormUnwrapped() {
       });
     }
   }, [picker, someoneElseRef]);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: progressBar
-  }, /*#__PURE__*/React.createElement(ProgressBar, {
-    isVisible: isSubmitting
-  })), /*#__PURE__*/React.createElement("form", {
-    onSubmit: handleSubmit,
-    className: form
-  }, /*#__PURE__*/React.createElement("fieldset", {
-    className: fieldset
-  }, /*#__PURE__*/React.createElement(TextField, {
-    name: "firstName",
-    value: values.firstName,
-    onChange: handleChange,
-    label: i18n.text('locations.firstName'),
-    className: formField,
-    errorText: i18n.text(validationErrors.firstName)
-  }), /*#__PURE__*/React.createElement(TextField, {
-    name: "lastName",
-    value: values.lastName,
-    onChange: handleChange,
-    label: i18n.text('locations.lastName'),
-    className: formField,
-    errorText: i18n.text(validationErrors.lastName)
-  }), /*#__PURE__*/React.createElement(ReserveFormPhone, {
-    name: "cellPhone",
-    value: values.cellPhone,
-    onChange: handleChange,
-    label: i18n.text('locations.cellPhone'),
-    errorText: i18n.text(validationErrors.cellPhone)
-  }), /*#__PURE__*/React.createElement(TextField, {
-    name: "email",
-    value: values.email,
-    onChange: handleChange,
-    label: i18n.text('locations.emailAddress'),
-    className: formField,
-    errorText: i18n.text(validationErrors.email)
-  })), /*#__PURE__*/React.createElement("p", {
-    className: formHeading
-  }, i18n.text('locations.who_will_pickup')), /*#__PURE__*/React.createElement("div", {
-    className: pickerSwitch
-  }, /*#__PURE__*/React.createElement(RadioGroup, {
-    name: "picker",
-    direction: "row",
-    value: picker,
-    onChange: setPicker
-  }, /*#__PURE__*/React.createElement(RadioGroupItem, {
-    label: i18n.text('locations.me'),
-    name: PICKUP_PERSON_ME,
-    className: pickerItem
-  }), /*#__PURE__*/React.createElement(RadioGroupItem, {
-    label: i18n.text('locations.someone_else'),
-    name: PICKUP_PERSON_OTHER,
-    className: pickerItem
-  }))), picker === PICKUP_PERSON_OTHER && /*#__PURE__*/React.createElement("fieldset", {
-    className: fieldset,
-    ref: someoneElseRef
-  }, /*#__PURE__*/React.createElement(TextField, {
-    name: "firstName2",
-    value: values.firstName2,
-    onChange: handleChange,
-    label: i18n.text('locations.firstName'),
-    className: formField,
-    errorText: i18n.text(validationErrors.firstName2)
-  }), /*#__PURE__*/React.createElement(TextField, {
-    name: "lastName2",
-    value: values.lastName2,
-    onChange: handleChange,
-    label: i18n.text('locations.lastName'),
-    className: formField,
-    errorText: i18n.text(validationErrors.lastName2)
-  }), /*#__PURE__*/React.createElement(ReserveFormPhone, {
-    name: "cellPhone2",
-    value: values.cellPhone2,
-    onChange: handleChange,
-    label: i18n.text('locations.cellPhone'),
-    errorText: i18n.text(validationErrors.cellPhone2)
-  }), /*#__PURE__*/React.createElement(TextField, {
-    name: "email2",
-    value: values.email2,
-    onChange: handleChange,
-    label: i18n.text('locations.emailAddress'),
-    className: formField,
-    errorText: i18n.text(validationErrors.email2)
-  })), /*#__PURE__*/React.createElement(RippleButton, {
-    type: "secondary",
-    disabled: changed || valid === false || isSubmitting,
-    className: button
-  }, i18n.text('locations.place_reservation'))));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: progressBar,
+      children: /*#__PURE__*/_jsx(ProgressBar, {
+        isVisible: isSubmitting
+      })
+    }), /*#__PURE__*/_jsxs("form", {
+      onSubmit: handleSubmit,
+      className: form,
+      children: [/*#__PURE__*/_jsxs("fieldset", {
+        className: fieldset,
+        children: [/*#__PURE__*/_jsx(TextField, {
+          name: "firstName",
+          value: values.firstName,
+          onChange: handleChange,
+          label: i18n.text('locations.firstName'),
+          className: formField,
+          errorText: i18n.text(validationErrors.firstName)
+        }), /*#__PURE__*/_jsx(TextField, {
+          name: "lastName",
+          value: values.lastName,
+          onChange: handleChange,
+          label: i18n.text('locations.lastName'),
+          className: formField,
+          errorText: i18n.text(validationErrors.lastName)
+        }), /*#__PURE__*/_jsx(ReserveFormPhone, {
+          name: "cellPhone",
+          value: values.cellPhone,
+          onChange: handleChange,
+          label: i18n.text('locations.cellPhone'),
+          errorText: i18n.text(validationErrors.cellPhone)
+        }), /*#__PURE__*/_jsx(TextField, {
+          name: "email",
+          value: values.email,
+          onChange: handleChange,
+          label: i18n.text('locations.emailAddress'),
+          className: formField,
+          errorText: i18n.text(validationErrors.email)
+        })]
+      }), /*#__PURE__*/_jsx("p", {
+        className: formHeading,
+        children: i18n.text('locations.who_will_pickup')
+      }), /*#__PURE__*/_jsx("div", {
+        className: pickerSwitch,
+        children: /*#__PURE__*/_jsxs(RadioGroup, {
+          name: "picker",
+          direction: "row",
+          value: picker,
+          onChange: setPicker,
+          children: [/*#__PURE__*/_jsx(RadioGroupItem, {
+            label: i18n.text('locations.me'),
+            name: PICKUP_PERSON_ME,
+            className: pickerItem
+          }), /*#__PURE__*/_jsx(RadioGroupItem, {
+            label: i18n.text('locations.someone_else'),
+            name: PICKUP_PERSON_OTHER,
+            className: pickerItem
+          })]
+        })
+      }), picker === PICKUP_PERSON_OTHER && /*#__PURE__*/_jsxs("fieldset", {
+        className: fieldset,
+        ref: someoneElseRef,
+        children: [/*#__PURE__*/_jsx(TextField, {
+          name: "firstName2",
+          value: values.firstName2,
+          onChange: handleChange,
+          label: i18n.text('locations.firstName'),
+          className: formField,
+          errorText: i18n.text(validationErrors.firstName2)
+        }), /*#__PURE__*/_jsx(TextField, {
+          name: "lastName2",
+          value: values.lastName2,
+          onChange: handleChange,
+          label: i18n.text('locations.lastName'),
+          className: formField,
+          errorText: i18n.text(validationErrors.lastName2)
+        }), /*#__PURE__*/_jsx(ReserveFormPhone, {
+          name: "cellPhone2",
+          value: values.cellPhone2,
+          onChange: handleChange,
+          label: i18n.text('locations.cellPhone'),
+          errorText: i18n.text(validationErrors.cellPhone2)
+        }), /*#__PURE__*/_jsx(TextField, {
+          name: "email2",
+          value: values.email2,
+          onChange: handleChange,
+          label: i18n.text('locations.emailAddress'),
+          className: formField,
+          errorText: i18n.text(validationErrors.email2)
+        })]
+      }), /*#__PURE__*/_jsx(RippleButton, {
+        type: "secondary",
+        disabled: changed || valid === false || isSubmitting,
+        className: button,
+        children: i18n.text('locations.place_reservation')
+      })]
+    })]
+  });
 }
 export const ReserveForm = ReserveFormUnwrapped;

package/locations/components/ReserveForm/ReserveFormPhone.js

@@ -25,7 +25,7 @@ import connect from "./ReserveFormPhone.connector";
 /**
  * @typedef {OwnProps & StateProps} Props
  */
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const builtInCountries = getCountries();
 const locales = {
   en,
@@ -59,7 +59,7 @@ const ReserveFormPhoneUnwrapped = /*#__PURE__*/memo(props => {
     if (!supportedCountries) {
       return builtInCountries;
     }
-    const sortedCountries = [...builtInCountries];
+    const sortedCountries = [].concat(builtInCountries);
     const sanitizedSupportedCountries = supportedCountries.map(country => {
       const pieces = country.split('_');
       return pieces[0];
@@ -67,7 +67,7 @@ const ReserveFormPhoneUnwrapped = /*#__PURE__*/memo(props => {
     sanitizedSupportedCountries.forEach(country => {
       sortedCountries.splice(sortedCountries.indexOf(country), 1);
     });
-    return [...sanitizedSupportedCountries, ...sortedCountries];
+    return [].concat(sanitizedSupportedCountries, sortedCountries);
   }, [supportedCountries]);
   const countriesNames = useCountriesNames(supportedCountries, locales);
   const labels = useMemo(() => {
@@ -106,7 +106,7 @@ const ReserveFormPhoneUnwrapped = /*#__PURE__*/memo(props => {
     [phoneFieldError]: !!errorText
   });
   if (!countries || countries.length === 0) {
-    return /*#__PURE__*/React.createElement(TextField, {
+    return /*#__PURE__*/_jsx(TextField, {
       name: name,
       value: value,
       onChange: onChange,
@@ -115,21 +115,23 @@ const ReserveFormPhoneUnwrapped = /*#__PURE__*/memo(props => {
       errorText: errorText
     });
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: phoneClasses
-  }, /*#__PURE__*/React.createElement(PhoneInput, {
-    defaultCountry: defaultCountry,
-    addInternationalOption: false,
-    flags: flags,
-    name: name,
-    value: value || '',
-    onChange: handleChange,
-    placeholder: label,
-    countries: countries,
-    labels: labels
-  }), !!errorText && /*#__PURE__*/React.createElement("div", {
-    className: phoneFieldErrorText
-  }, errorText));
+  return /*#__PURE__*/_jsxs("div", {
+    className: phoneClasses,
+    children: [/*#__PURE__*/_jsx(PhoneInput, {
+      defaultCountry: defaultCountry,
+      addInternationalOption: false,
+      flags: flags,
+      name: name,
+      value: value || '',
+      onChange: handleChange,
+      placeholder: label,
+      countries: countries,
+      labels: labels
+    }), !!errorText && /*#__PURE__*/_jsx("div", {
+      className: phoneFieldErrorText,
+      children: errorText
+    })]
+  });
 });
 ReserveFormPhoneUnwrapped.defaultProps = {
   errorText: '',

package/locations/components/StockInfo/StockInfo.js

@@ -16,6 +16,7 @@ import { StockInfoInventory } from "./StockInfoInventory";
  * Creates a mapper for redux.
  * @returns {Function}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const makeMapStateToProps = () => {
   const getInventory = makeGetLocationInventory((_, props) => props.location?.code, (_, props) => props.productId || props.product?.id);
   return (state, props) => ({
@@ -59,19 +60,21 @@ const StockInfoUnwrapped = ({
     availabilityText,
     availabilityTextColor
   }), [availabilityText, availabilityTextColor, className, comingSoon, inventory, location, settings]);
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
+  return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PRODUCT_LOCATION_STOCK_INFO,
-    portalProps: portalProps
-  }, /*#__PURE__*/React.createElement("span", {
-    className: classNames(defaultClassName, css(className).toString())
-  }, /*#__PURE__*/React.createElement(StockInfoInventory, {
-    availabilityText: availabilityText,
-    comingSoon: comingSoon,
-    location: location,
-    inventory: inventory,
-    maxNumberVisible: settings.maxNumberOfVisibleInventory,
-    aboveMaxExtension: settings.aboveMaxExtension
-  })));
+    portalProps: portalProps,
+    children: /*#__PURE__*/_jsx("span", {
+      className: classNames(defaultClassName, css(className).toString()),
+      children: /*#__PURE__*/_jsx(StockInfoInventory, {
+        availabilityText: availabilityText,
+        comingSoon: comingSoon,
+        location: location,
+        inventory: inventory,
+        maxNumberVisible: settings.maxNumberOfVisibleInventory,
+        aboveMaxExtension: settings.aboveMaxExtension
+      })
+    })
+  });
 };
 StockInfoUnwrapped.defaultProps = {
   className: null,

package/locations/components/StockInfo/StockInfoInventory.js

@@ -11,6 +11,7 @@ import { I18n } from "../../../components";
  * @param {string} props.aboveMaxExtension The component props.
  * @return {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export function StockInfoInventory(props) {
   const {
     availabilityText,
@@ -32,7 +33,7 @@ export function StockInfoInventory(props) {
   if ((!location || !availabilityText || !inventory) && !comingSoon) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(I18n.Text, {
+  return /*#__PURE__*/_jsx(I18n.Text, {
     string: availabilityText,
     params: {
       visibleInventory

package/locations/components/StockInfoLists/index.js

@@ -14,6 +14,7 @@ import { showInventoryInLists } from "../../helpers/showInventoryInLists";
  * @returns {Function}
  *
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const makeMapStateToProps = () => {
   const getInventory = makeGetLocationInventory((_, props) => getPreferredLocation(_, props)?.code, (_, props) => props.productId || props.product?.id);
   return (state, props) => ({
@@ -56,26 +57,30 @@ const StockInfoLists = ({
     product
   };
   /* eslint-disable jsx-a11y/aria-role */
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
+  return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PRODUCT_LOCATION_STOCK_INFO_LIST,
-    portalProps: portalProps
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.wrapper,
-    role: "text"
-  }, /*#__PURE__*/React.createElement(PlaceholderLabel, {
-    ready: !!inventory
-  }, /*#__PURE__*/React.createElement(StockInfo, {
-    product: product,
-    location: preferredLocation
-  }), ' ', /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "locations.stock_info.pick_up_at",
-    params: {
-      storeName: ''
-    },
-    className: styles.text
-  }), ' ', /*#__PURE__*/React.createElement("span", {
-    className: styles.location
-  }, preferredLocation.name))));
+    portalProps: portalProps,
+    children: /*#__PURE__*/_jsx("div", {
+      className: styles.wrapper,
+      role: "text",
+      children: /*#__PURE__*/_jsxs(PlaceholderLabel, {
+        ready: !!inventory,
+        children: [/*#__PURE__*/_jsx(StockInfo, {
+          product: product,
+          location: preferredLocation
+        }), ' ', /*#__PURE__*/_jsx(I18n.Text, {
+          string: "locations.stock_info.pick_up_at",
+          params: {
+            storeName: ''
+          },
+          className: styles.text
+        }), ' ', /*#__PURE__*/_jsx("span", {
+          className: styles.location,
+          children: preferredLocation.name
+        })]
+      })
+    })
+  });
   /* eslint-enable jsx-a11y/aria-role */
 };
 StockInfoLists.defaultProps = {

package/locations/components/StoreDetails/components/FindMoreStores.js

@@ -5,6 +5,7 @@ import { MagnifierIcon, LocatorIcon, Link } from '@shopgate/engage/components';
 import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import classNames from 'classnames';
 import { STORE_FINDER_PATTERN } from "../../../constants";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   container: css({
     margin: '16px 0px'
@@ -54,33 +55,40 @@ const styles = {
  * Find more stores component.
   * @returns {JSX}
   * */
-const FindMoreStores = () => /*#__PURE__*/React.createElement("div", {
-  className: styles.container
-}, /*#__PURE__*/React.createElement("div", {
-  className: styles.title,
-  "aria-hidden": true
-}, i18n.text('location.findMoreStores')), /*#__PURE__*/React.createElement("div", {
-  className: styles.inputCell
-}, /*#__PURE__*/React.createElement("div", {
-  className: styles.inputContainer
-}, /*#__PURE__*/React.createElement("span", {
-  className: styles.inputIcon,
-  "aria-hidden": true
-}, /*#__PURE__*/React.createElement(MagnifierIcon, null)), /*#__PURE__*/React.createElement("input", {
-  name: "postalCode",
-  className: styles.input,
-  disabled: true,
-  type: "search",
-  autoComplete: "off",
-  autoCorrect: "off",
-  placeholder: "",
-  "aria-hidden": true
-}), /*#__PURE__*/React.createElement("div", {
-  className: styles.inputIcon
-}, /*#__PURE__*/React.createElement(LocatorIcon, null)), /*#__PURE__*/React.createElement(Link, {
-  href: STORE_FINDER_PATTERN,
-  className: classNames(styles.inputOverlay),
-  role: "button",
-  "aria-label": i18n.text('location.findMoreStores')
-}, /*#__PURE__*/React.createElement("div", null)))));
+const FindMoreStores = () => /*#__PURE__*/_jsxs("div", {
+  className: styles.container,
+  children: [/*#__PURE__*/_jsx("div", {
+    className: styles.title,
+    "aria-hidden": true,
+    children: i18n.text('location.findMoreStores')
+  }), /*#__PURE__*/_jsx("div", {
+    className: styles.inputCell,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: styles.inputContainer,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: styles.inputIcon,
+        "aria-hidden": true,
+        children: /*#__PURE__*/_jsx(MagnifierIcon, {})
+      }), /*#__PURE__*/_jsx("input", {
+        name: "postalCode",
+        className: styles.input,
+        disabled: true,
+        type: "search",
+        autoComplete: "off",
+        autoCorrect: "off",
+        placeholder: "",
+        "aria-hidden": true
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.inputIcon,
+        children: /*#__PURE__*/_jsx(LocatorIcon, {})
+      }), /*#__PURE__*/_jsx(Link, {
+        href: STORE_FINDER_PATTERN,
+        className: classNames(styles.inputOverlay),
+        role: "button",
+        "aria-label": i18n.text('location.findMoreStores'),
+        children: /*#__PURE__*/_jsx("div", {})
+      })]
+    })
+  })]
+});
 export default FindMoreStores;