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

package/locations/components/StoreDetails/components/GetDirectionsButton.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import { Button } from '@shopgate/engage/components';
 import { generateGoogleMapsDirectionsUrl, i18n } from '@shopgate/engage/core';
 import { useDispatch } from 'react-redux';
+import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   container: css({}),
   buttonText: css({
@@ -34,15 +35,18 @@ const GetDirectionsButton = ({
       }
     }));
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.container
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: handleClick,
-    role: "button",
-    type: "plain"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles.buttonText
-  }, i18n.text('location.getDirections'))));
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.container,
+    children: /*#__PURE__*/_jsx(Button, {
+      onClick: handleClick,
+      role: "button",
+      type: "plain",
+      children: /*#__PURE__*/_jsx("span", {
+        className: styles.buttonText,
+        children: i18n.text('location.getDirections')
+      })
+    })
+  });
 };
 GetDirectionsButton.defaultProps = {
   address: null

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

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import moment from 'moment';
 import { StoreDetailsContext } from "../../../providers/StoreDetailsContext";
 import GetDirectionsButton from "./GetDirectionsButton";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const styles = {
   headerWrapper: css({
     display: 'flex'
@@ -102,73 +103,111 @@ const StoreDetails = () => {
   if (!routeLocation) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ConditionalWrapper, {
-    condition: !isRouteLocationPreferred,
-    wrapper: children => /*#__PURE__*/React.createElement(Button, {
-      onClick: () => selectLocation(routeLocation, true),
-      role: "button",
-      type: "plain"
-    }, children)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.headerWrapper
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.headerIcon
-  }, /*#__PURE__*/React.createElement(LocationIcon, {
-    className: styles.icon,
-    size: 20
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles.header
-  }, isRouteLocationPreferred ? i18n.text('location.myStore') : i18n.text('location.makeMyStore')))), /*#__PURE__*/React.createElement("div", {
-    className: styles.locationName
-  }, routeLocation.name), /*#__PURE__*/React.createElement("div", {
-    className: styles.locationRow
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.locationColumn
-  }, /*#__PURE__*/React.createElement("p", null, address?.street), address?.street2 && address.street2 !== '' && /*#__PURE__*/React.createElement("p", null, address.street2), address?.street3 && address.street3 !== '' && /*#__PURE__*/React.createElement("p", null, address.street3), address?.street4 && address.street4 !== '' && /*#__PURE__*/React.createElement("p", null, address.street4), /*#__PURE__*/React.createElement("p", null, i18n.text('locations.address', address)), /*#__PURE__*/React.createElement("div", {
-    className: styles.buttonRow
-  }, /*#__PURE__*/React.createElement(GetDirectionsButton, {
-    address: address
-  }), !isComingSoon && !isRouteLocationPreferred && /*#__PURE__*/React.createElement(Button, {
-    onClick: () => selectLocation(routeLocation, true),
-    role: "button",
-    type: "plain",
-    className: classNames(styles.makeMyStoreButton)
-  }, /*#__PURE__*/React.createElement("span", null, i18n.text('location.makeMyStore'))), isComingSoon && /*#__PURE__*/React.createElement("div", {
-    className: styles.comingSoon
-  }, i18n.text('location.comingSoon'))), address?.phoneNumber && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: styles.phone
-  }, `${i18n.text('location.phone')}: `), /*#__PURE__*/React.createElement("div", {
-    className: styles.phoneNumber
-  }, /*#__PURE__*/React.createElement(Link, {
-    href: `tel:${address.phoneNumber}`,
-    className: classNames(styles.phoneNumber),
-    target: "_blank",
-    role: "button",
-    "aria-label": address.phoneNumber
-  }, address.phoneNumber)))), hasOpeningHours && /*#__PURE__*/React.createElement("div", {
-    className: styles.storeHoursColumn
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.storeHours
-  }, `${i18n.text('location.storeHours')}:`), /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, getWeekDaysOrder().map(weekDay => {
-    if (!operationHours[weekDay]) {
-      return null;
-    }
-    return /*#__PURE__*/React.createElement("tr", {
-      className: styles.storeHoursLine,
-      key: weekDay,
-      "aria-label": `${i18n.text(`locations.${weekDay}`)}: ${operationHours[weekDay]}`,
-      tabIndex: 0
-    }, /*#__PURE__*/React.createElement("td", {
-      className: classNames(styles.storeHoursWeekday, {
-        [styles.bold]: weekDay === currentDay
-      }),
-      "aria-hidden": true
-    }, `${i18n.text(`locations.${weekDay}`)}:`), /*#__PURE__*/React.createElement("td", {
-      className: classNames(styles.storeHoursOpeningTime, {
-        [styles.bold]: weekDay === currentDay
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx(ConditionalWrapper, {
+      condition: !isRouteLocationPreferred,
+      wrapper: children => /*#__PURE__*/_jsx(Button, {
+        onClick: () => selectLocation(routeLocation, true),
+        role: "button",
+        type: "plain",
+        children: children
       }),
-      "aria-hidden": true
-    }, operationHours[weekDay]));
-  }))))));
+      children: /*#__PURE__*/_jsxs("div", {
+        className: styles.headerWrapper,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: styles.headerIcon,
+          children: /*#__PURE__*/_jsx(LocationIcon, {
+            className: styles.icon,
+            size: 20
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: styles.header,
+          children: isRouteLocationPreferred ? i18n.text('location.myStore') : i18n.text('location.makeMyStore')
+        })]
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.locationName,
+      children: routeLocation.name
+    }), /*#__PURE__*/_jsxs("div", {
+      className: styles.locationRow,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: styles.locationColumn,
+        children: [/*#__PURE__*/_jsx("p", {
+          children: address?.street
+        }), address?.street2 && address.street2 !== '' && /*#__PURE__*/_jsx("p", {
+          children: address.street2
+        }), address?.street3 && address.street3 !== '' && /*#__PURE__*/_jsx("p", {
+          children: address.street3
+        }), address?.street4 && address.street4 !== '' && /*#__PURE__*/_jsx("p", {
+          children: address.street4
+        }), /*#__PURE__*/_jsx("p", {
+          children: i18n.text('locations.address', address)
+        }), /*#__PURE__*/_jsxs("div", {
+          className: styles.buttonRow,
+          children: [/*#__PURE__*/_jsx(GetDirectionsButton, {
+            address: address
+          }), !isComingSoon && !isRouteLocationPreferred && /*#__PURE__*/_jsx(Button, {
+            onClick: () => selectLocation(routeLocation, true),
+            role: "button",
+            type: "plain",
+            className: classNames(styles.makeMyStoreButton),
+            children: /*#__PURE__*/_jsx("span", {
+              children: i18n.text('location.makeMyStore')
+            })
+          }), isComingSoon && /*#__PURE__*/_jsx("div", {
+            className: styles.comingSoon,
+            children: i18n.text('location.comingSoon')
+          })]
+        }), address?.phoneNumber && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("div", {
+            className: styles.phone,
+            children: `${i18n.text('location.phone')}: `
+          }), /*#__PURE__*/_jsx("div", {
+            className: styles.phoneNumber,
+            children: /*#__PURE__*/_jsx(Link, {
+              href: `tel:${address.phoneNumber}`,
+              className: classNames(styles.phoneNumber),
+              target: "_blank",
+              role: "button",
+              "aria-label": address.phoneNumber,
+              children: address.phoneNumber
+            })
+          })]
+        })]
+      }), hasOpeningHours && /*#__PURE__*/_jsxs("div", {
+        className: styles.storeHoursColumn,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: styles.storeHours,
+          children: `${i18n.text('location.storeHours')}:`
+        }), /*#__PURE__*/_jsx("table", {
+          children: /*#__PURE__*/_jsx("tbody", {
+            children: getWeekDaysOrder().map(weekDay => {
+              if (!operationHours[weekDay]) {
+                return null;
+              }
+              return /*#__PURE__*/_jsxs("tr", {
+                className: styles.storeHoursLine,
+                "aria-label": `${i18n.text(`locations.${weekDay}`)}: ${operationHours[weekDay]}`,
+                tabIndex: 0,
+                children: [/*#__PURE__*/_jsx("td", {
+                  className: classNames(styles.storeHoursWeekday, {
+                    [styles.bold]: weekDay === currentDay
+                  }),
+                  "aria-hidden": true,
+                  children: `${i18n.text(`locations.${weekDay}`)}:`
+                }), /*#__PURE__*/_jsx("td", {
+                  className: classNames(styles.storeHoursOpeningTime, {
+                    [styles.bold]: weekDay === currentDay
+                  }),
+                  "aria-hidden": true,
+                  children: operationHours[weekDay]
+                })]
+              }, weekDay);
+            })
+          })
+        })]
+      })]
+    })]
+  });
 };
 export default StoreDetails;

package/locations/components/StoreDetails/components/StoreFinderMap.js

@@ -11,6 +11,7 @@ import { historyPush } from '@shopgate/engage/core';
 import { container, markerSelected } from "./StoreFinderMap.style";
 import { MAP_RADIUS_KM } from "../../../constants";
 import { StoreDetailsContext } from "../../../providers/StoreDetailsContext";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 Leaflet.Map.addInitHook('addHandler', 'gestureHandling', GestureHandling);
 
 /**
@@ -52,7 +53,7 @@ const StoreFinderMap = () => {
   const {
     routeLocation
   } = useContext(StoreDetailsContext);
-  const iconHTML = useMemo(() => renderToString(/*#__PURE__*/React.createElement(MapMarkerIcon, null)), []);
+  const iconHTML = useMemo(() => renderToString(/*#__PURE__*/_jsx(MapMarkerIcon, {})), []);
   const markerIconSelected = useMemo(() => Leaflet.divIcon({
     html: iconHTML,
     className: markerSelected,
@@ -94,7 +95,7 @@ const StoreFinderMap = () => {
     const distanceToBoundaryInKm = distanceInKm / 2;
     const latInRadians = lat * (Math.PI / 180);
     const deltaLat = distanceToBoundaryInKm / EARTH_RADIUS_KM * (180 / Math.PI);
-    const deltaLng = distanceToBoundaryInKm / EARTH_RADIUS_KM * (180 / Math.PI) / Math.cos(latInRadians);
+    const deltaLng = distanceToBoundaryInKm / EARTH_RADIUS_KM * (180 / Math.PI / Math.cos(latInRadians));
     return [[lat - deltaLat, lng - deltaLng], [lat + deltaLat, lng + deltaLng]];
   }, []);
   const radiusinMeters = MAP_RADIUS_KM * 1000;
@@ -108,26 +109,27 @@ const StoreFinderMap = () => {
   if (!routeLocation) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: container,
     "aria-hidden": true,
-    ref: mapContainerRef
-  }, /*#__PURE__*/React.createElement(MapContainer, {
-    center: viewport,
-    bounds: bounds,
-    className: container,
-    whenCreated: handleMapCreated
-  }, debug && /*#__PURE__*/React.createElement(Circle, {
-    center: viewport,
-    radius: radiusinMeters,
-    color: "blue"
-  }), /*#__PURE__*/React.createElement(TileLayer, {
-    attribution: "&copy <a href=\"https://osm.org/copyright\">OpenStreetMap</a>",
-    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-  }), /*#__PURE__*/React.createElement(Marker, {
-    key: code,
-    icon: markerIconSelected,
-    position: [latitude, longitude]
-  })));
+    ref: mapContainerRef,
+    children: /*#__PURE__*/_jsxs(MapContainer, {
+      center: viewport,
+      bounds: bounds,
+      className: container,
+      whenCreated: handleMapCreated,
+      children: [debug && /*#__PURE__*/_jsx(Circle, {
+        center: viewport,
+        radius: radiusinMeters,
+        color: "blue"
+      }), /*#__PURE__*/_jsx(TileLayer, {
+        attribution: "&copy <a href=\"https://osm.org/copyright\">OpenStreetMap</a>",
+        url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      }), /*#__PURE__*/_jsx(Marker, {
+        icon: markerIconSelected,
+        position: [latitude, longitude]
+      }, code)]
+    })
+  });
 };
 export default StoreFinderMap;

package/locations/components/StoreDetails/components/StoreLocationMap.js

@@ -4,6 +4,7 @@ import { SurroundPortals } from '@shopgate/engage/components';
 import StoreFinderMap from "./StoreFinderMap";
 import { StoreFinderProvider } from "../../../providers";
 import { STORE_DETAILS_LOCATION_MAP } from "../../../constants/Portals";
+import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   container: css({
     maxHeight: '250px',
@@ -20,12 +21,15 @@ const styles = {
 */
 const StoreLocationMap = () => {
   const storeListRef = useRef(null);
-  return /*#__PURE__*/React.createElement(StoreFinderProvider, {
-    storeListRef: storeListRef
-  }, /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: STORE_DETAILS_LOCATION_MAP
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.container
-  }, /*#__PURE__*/React.createElement(StoreFinderMap, null))));
+  return /*#__PURE__*/_jsx(StoreFinderProvider, {
+    storeListRef: storeListRef,
+    children: /*#__PURE__*/_jsx(SurroundPortals, {
+      portalName: STORE_DETAILS_LOCATION_MAP,
+      children: /*#__PURE__*/_jsx("div", {
+        className: styles.container,
+        children: /*#__PURE__*/_jsx(StoreFinderMap, {})
+      })
+    })
+  });
 };
 export default StoreLocationMap;

package/locations/components/StoreDetails/components/StoresNearby.js

@@ -3,6 +3,7 @@ import { css } from 'glamor';
 import { i18n } from '@shopgate/engage/core/helpers';
 import StoresNearbyListItem from "./StoresNearbyListItem";
 import { StoreDetailsContext } from "../../../providers/StoreDetailsContext";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   title: css({
     fontSize: 20,
@@ -22,13 +23,20 @@ const StoresNearby = () => {
   const {
     nearbyLocations
   } = useContext(StoreDetailsContext);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: styles.title
-  }, i18n.text('location.storesNearby')), nearbyLocations.length > 0 && /*#__PURE__*/React.createElement("table", {
-    className: styles.table
-  }, /*#__PURE__*/React.createElement("tbody", null, nearbyLocations.map(location => /*#__PURE__*/React.createElement(StoresNearbyListItem, {
-    location: location,
-    key: location.code
-  })))), nearbyLocations.length === 0 && /*#__PURE__*/React.createElement("div", null, i18n.text('location.noStoresNearby')));
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: styles.title,
+      children: i18n.text('location.storesNearby')
+    }), nearbyLocations.length > 0 && /*#__PURE__*/_jsx("table", {
+      className: styles.table,
+      children: /*#__PURE__*/_jsx("tbody", {
+        children: nearbyLocations.map(location => /*#__PURE__*/_jsx(StoresNearbyListItem, {
+          location: location
+        }, location.code))
+      })
+    }), nearbyLocations.length === 0 && /*#__PURE__*/_jsx("div", {
+      children: i18n.text('location.noStoresNearby')
+    })]
+  });
 };
 export default StoresNearby;

package/locations/components/StoreDetails/components/StoresNearbyListItem.js

@@ -8,6 +8,7 @@ import { historyPush } from '@shopgate/engage/core';
 import formatDistance from "../../../helpers/formatDistance";
 import { STORE_DETAILS_PATH } from "../../../constants";
 import { StoreDetailsContext } from "../../../providers/StoreDetailsContext";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   button: css({
     fontSize: '14px !important',
@@ -89,52 +90,67 @@ const StoresNearbyListItem = ({
       pathname: `${STORE_DETAILS_PATH}/${locationCode}`
     }));
   };
-  return /*#__PURE__*/React.createElement("tr", {
-    className: styles.locationRow
-  }, /*#__PURE__*/React.createElement("td", {
-    className: styles.cell
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.cellContainer
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.name
-  }, name))), /*#__PURE__*/React.createElement("td", {
-    className: styles.cell
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.cellContainer
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.distance
-  }, formatDistance(distance || 0, unitSystem === 'imperial')))), /*#__PURE__*/React.createElement("td", {
-    className: styles.cell
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.cellContainer
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.buttonContainer
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.makeMyStore
-  }, !isComingSoon && /*#__PURE__*/React.createElement(Button, {
-    className: styles.button,
-    onClick: () => selectLocation(location, true),
-    role: "button",
-    type: "primary",
-    flat: true,
-    disabled: isPreferredLocation,
-    wrapContent: false
-  }, `${i18n.text('location.makeMyStore')}`), isComingSoon && /*#__PURE__*/React.createElement(Button, {
-    className: styles.button,
-    role: "button",
-    type: "primary",
-    flat: true,
-    disabled: true,
-    wrapContent: false
-  }, i18n.text('location.comingSoon'))), /*#__PURE__*/React.createElement("div", {
-    className: styles.storeInfo
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: styles.button,
-    role: "button",
-    type: "primary",
-    flat: true,
-    onClick: () => openStoreDetails(code),
-    wrapContent: false
-  }, i18n.text('locations.details')))))));
+  return /*#__PURE__*/_jsxs("tr", {
+    className: styles.locationRow,
+    children: [/*#__PURE__*/_jsx("td", {
+      className: styles.cell,
+      children: /*#__PURE__*/_jsx("div", {
+        className: styles.cellContainer,
+        children: /*#__PURE__*/_jsx("div", {
+          className: styles.name,
+          children: name
+        })
+      })
+    }), /*#__PURE__*/_jsx("td", {
+      className: styles.cell,
+      children: /*#__PURE__*/_jsx("div", {
+        className: styles.cellContainer,
+        children: /*#__PURE__*/_jsx("div", {
+          className: styles.distance,
+          children: formatDistance(distance || 0, unitSystem === 'imperial')
+        })
+      })
+    }), /*#__PURE__*/_jsx("td", {
+      className: styles.cell,
+      children: /*#__PURE__*/_jsx("div", {
+        className: styles.cellContainer,
+        children: /*#__PURE__*/_jsxs("div", {
+          className: styles.buttonContainer,
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: styles.makeMyStore,
+            children: [!isComingSoon && /*#__PURE__*/_jsx(Button, {
+              className: styles.button,
+              onClick: () => selectLocation(location, true),
+              role: "button",
+              type: "primary",
+              flat: true,
+              disabled: isPreferredLocation,
+              wrapContent: false,
+              children: `${i18n.text('location.makeMyStore')}`
+            }), isComingSoon && /*#__PURE__*/_jsx(Button, {
+              className: styles.button,
+              role: "button",
+              type: "primary",
+              flat: true,
+              disabled: true,
+              wrapContent: false,
+              children: i18n.text('location.comingSoon')
+            })]
+          }), /*#__PURE__*/_jsx("div", {
+            className: styles.storeInfo,
+            children: /*#__PURE__*/_jsx(Button, {
+              className: styles.button,
+              role: "button",
+              type: "primary",
+              flat: true,
+              onClick: () => openStoreDetails(code),
+              wrapContent: false,
+              children: i18n.text('locations.details')
+            })
+          })]
+        })
+      })
+    })]
+  });
 };
 export default StoresNearbyListItem;

package/locations/components/StoreDetails/index.js

@@ -6,6 +6,7 @@ import StoreLocationMap from "./components/StoreLocationMap";
 import StoresNearby from "./components/StoresNearby";
 import FindMoreStores from "./components/FindMoreStores";
 import { StoreDetailsProvider } from "../../providers";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   page: css({
     padding: `${themeConfig.variables.gap.small}px ${themeConfig.variables.gap.big}px`
@@ -16,7 +17,10 @@ const styles = {
  * @param {Object} props .
  * @returns {JSX}
  */
-const StoreDetailsContent = () => /*#__PURE__*/React.createElement(StoreDetailsProvider, null, /*#__PURE__*/React.createElement("div", {
-  className: styles.page
-}, /*#__PURE__*/React.createElement(StoreDetails, null), /*#__PURE__*/React.createElement(StoreLocationMap, null), /*#__PURE__*/React.createElement(StoresNearby, null), /*#__PURE__*/React.createElement(FindMoreStores, null)));
+const StoreDetailsContent = () => /*#__PURE__*/_jsx(StoreDetailsProvider, {
+  children: /*#__PURE__*/_jsxs("div", {
+    className: styles.page,
+    children: [/*#__PURE__*/_jsx(StoreDetails, {}), /*#__PURE__*/_jsx(StoreLocationMap, {}), /*#__PURE__*/_jsx(StoresNearby, {}), /*#__PURE__*/_jsx(FindMoreStores, {})]
+  })
+});
 export default StoreDetailsContent;

package/locations/components/StoreFinder/StoreFinder.js

@@ -7,18 +7,23 @@ import { container, storeSearch, storeList } from "./StoreFinder.style";
 /**
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StoreFinder = () => {
   const storeListRef = useRef(null);
-  return /*#__PURE__*/React.createElement(StoreFinderProvider, {
-    storeListRef: storeListRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: container
-  }, /*#__PURE__*/React.createElement("div", {
-    className: storeSearch
-  }, /*#__PURE__*/React.createElement(StoreFinderSearch, null)), /*#__PURE__*/React.createElement("div", {
-    className: storeList
-  }, /*#__PURE__*/React.createElement(StoreFinderLocations, {
-    ref: storeListRef
-  }))));
+  return /*#__PURE__*/_jsx(StoreFinderProvider, {
+    storeListRef: storeListRef,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: container,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: storeSearch,
+        children: /*#__PURE__*/_jsx(StoreFinderSearch, {})
+      }), /*#__PURE__*/_jsx("div", {
+        className: storeList,
+        children: /*#__PURE__*/_jsx(StoreFinderLocations, {
+          ref: storeListRef
+        })
+      })]
+    })
+  });
 };
 export default StoreFinder;

package/locations/components/StoreFinder/StoreFinderGetDirectionsButton.js

@@ -10,6 +10,7 @@ import connect from "./StoreFinderGetDirectionsButton.connector";
  * @param {Object} props The component props
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const StoreFinderGetDirectionsButton = ({
   address,
   openMap,
@@ -22,12 +23,14 @@ const StoreFinderGetDirectionsButton = ({
   if (!address) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(container, className)
-  }, /*#__PURE__*/React.createElement(RippleButton, {
-    onClick: handleClick,
-    className: button
-  }, i18n.text('locations.get_directions')));
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames(container, className),
+    children: /*#__PURE__*/_jsx(RippleButton, {
+      onClick: handleClick,
+      className: button,
+      children: i18n.text('locations.get_directions')
+    })
+  });
 };
 StoreFinderGetDirectionsButton.defaultProps = {
   address: null,

package/locations/components/StoreFinder/StoreFinderLocation.js

@@ -10,6 +10,7 @@ import StoreFinderStoreInfoButton from "./StoreFinderStoreInfoButton";
 /**
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StoreFinderLocation = () => {
   const store = useContext(StoreContext);
   const {
@@ -21,11 +22,12 @@ const StoreFinderLocation = () => {
     } = selectedLocation || {};
     return store.code === code;
   }, [selectedLocation, store.code]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: classNames(container, {
       [selected]: isSelected
     }),
-    "data-location-code": store.code
-  }, /*#__PURE__*/React.createElement(StoreFinderLocationHeader, null), /*#__PURE__*/React.createElement(StoreFinderSelectLocationButton, null), /*#__PURE__*/React.createElement(StoreFinderStoreInfoButton, null));
+    "data-location-code": store.code,
+    children: [/*#__PURE__*/_jsx(StoreFinderLocationHeader, {}), /*#__PURE__*/_jsx(StoreFinderSelectLocationButton, {}), /*#__PURE__*/_jsx(StoreFinderStoreInfoButton, {})]
+  });
 };
 export default StoreFinderLocation;

package/locations/components/StoreFinder/StoreFinderLocationDetails.js

@@ -9,6 +9,7 @@ import { accordionHeader, accordionContent } from "./StoreFinderLocationDetails.
 /**
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const StoreFinderLocationDetails = () => {
   const {
     operationHours
@@ -16,16 +17,18 @@ const StoreFinderLocationDetails = () => {
   if (!operationHours || _every(operationHours, _isEmpty)) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Accordion, {
+  return /*#__PURE__*/_jsx(Accordion, {
     className: accordionHeader,
-    renderLabel: () => /*#__PURE__*/React.createElement(I18n.Text, {
+    renderLabel: () => /*#__PURE__*/_jsx(I18n.Text, {
       string: "locations.details"
+    }),
+    children: /*#__PURE__*/_jsx("div", {
+      className: accordionContent,
+      children: /*#__PURE__*/_jsx(StoreOpeningHours, {
+        hours: operationHours,
+        pure: true
+      })
     })
-  }, /*#__PURE__*/React.createElement("div", {
-    className: accordionContent
-  }, /*#__PURE__*/React.createElement(StoreOpeningHours, {
-    hours: operationHours,
-    pure: true
-  })));
+  });
 };
 export default StoreFinderLocationDetails;