@jetshop/template-trend 6.1.4 → 6.1.5

package/dist/src/components/StoreLocator/StoreList.js

@@ -0,0 +1,160 @@
+import t from '@jetshop/intl';
+import React, { useContext } from 'react';
+import { styled } from 'linaria/react';
+import { cx, css } from 'linaria';
+import { StoreMarker } from './StoreMarker';
+import { ReactComponent as CarrotSvg } from '@jetshop/ui/svg/Carrot.svg';
+import { ReactComponent as DirectionsSvg } from '../../svg/Directions.svg';
+import { LocationStateContext } from './StoreLocator';
+import UserLocation from './UserLocation';
+import { theme } from '../Theme';
+const StoreListContainer = styled('ul') `
+  height: calc(100% - 94px);
+  overflow-y: auto;
+
+  .highlight {
+    background: yellow;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+`;
+const StoreContainer = styled('li') `
+  width: 100%;
+  background: ${theme.colors.white};
+  padding: 24px;
+  margin: 8px 0;
+
+  font-size: 14px;
+  line-height: 1.4;
+
+  cursor: pointer;
+
+  &:first-child {
+    margin-top: 0;
+  }
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  > div {
+    display: flex;
+
+    &.expanded-content {
+      padding: 24px 24px 0 36px;
+      max-height: 0;
+      overflow: hidden;
+      transition-property: max-height;
+      transition-duration: 0.2s;
+    }
+  }
+
+  &.expanded {
+    > div.expanded-content {
+      max-height: 600px;
+    }
+
+    svg.carrot {
+      transform: rotate(0deg);
+    }
+  }
+
+  :focus {
+    outline: 1px solid ${theme.colors.blue};
+  }
+
+  svg.carrot {
+    transition-property: transform;
+    transition-duration: 0.2s;
+  }
+`;
+const StoreColumn = styled('div') `
+  flex: 1;
+  margin-top: -4px;
+  position: relative;
+
+  padding: 0 16px 0 0;
+
+  .contact-icon {
+    position: absolute;
+    left: -6px;
+  }
+
+  a {
+    color: #000;
+    padding: 4px 0 8px;
+  }
+`;
+const secondStoreColumn = css `
+  padding: 0 8px 0 16px;
+`;
+const CarrotContainer = styled('div') `
+  flex: 0 0 24px;
+  background: ${theme.colors.background};
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  align-self: center;
+
+  svg {
+    width: 12px;
+    height: 12px;
+    margin: 6px;
+
+    transform: rotate(-90deg);
+  }
+`;
+const humanDistance = distance => distance > 10
+    ? t('{km} km', { km: Math.round(distance) })
+    : distance > 1
+        ? t('{km} km', { km: distance.toFixed(1) })
+        : t('{m} m', { m: Math.round(distance * 1000) });
+const contactParser = html => {
+    var _a;
+    return (_a = html === null || html === void 0 ? void 0 : html.replace('Tel: ', '<span class="contact-icon">📞</span>')) === null || _a === void 0 ? void 0 : _a.replace('Email: ', '<span class="contact-icon">🖂</span>');
+};
+const Carrot = () => (React.createElement(CarrotContainer, null,
+    React.createElement(CarrotSvg, { className: "carrot" })));
+const Store = ({ storeNr, distances, store: { id, name, address1, openHours, description, coordinates, contact } }) => {
+    const locationState = useContext(LocationStateContext);
+    const active = id === locationState.activeLocation;
+    const expanded = id === locationState.expandedLocation;
+    return (React.createElement(StoreContainer, { onMouseEnter: () => locationState.setHighlightedLocation(id), onMouseLeave: () => locationState.setHighlightedLocation(null), onClick: () => locationState.toggleExpandedLocation(id), onKeyPress: e => {
+            if ((e.keyCode || e.which) === 13)
+                locationState.toggleExpandedLocation(id);
+        }, tabIndex: 0, className: cx(expanded ? 'expanded' : null) },
+        React.createElement("div", null,
+            React.createElement(StoreMarker, { nr: storeNr, active: active }),
+            React.createElement(StoreColumn, null,
+                React.createElement("p", null,
+                    React.createElement("strong", { dangerouslySetInnerHTML: { __html: name } })),
+                React.createElement("div", { dangerouslySetInnerHTML: { __html: address1 } })),
+            React.createElement(StoreColumn, { className: secondStoreColumn },
+                React.createElement("p", null,
+                    React.createElement("strong", null, t('Opening hours'))),
+                React.createElement("div", { dangerouslySetInnerHTML: { __html: openHours } }),
+                !expanded && distances[id] && (React.createElement("p", { style: { color: '#8a8a8a' } },
+                    t('Distance'),
+                    ": ",
+                    humanDistance(distances[id])))),
+            React.createElement(Carrot, null)),
+        React.createElement("div", { className: "expanded-content" },
+            React.createElement(StoreColumn, { dangerouslySetInnerHTML: { __html: description } }),
+            React.createElement(StoreColumn, { className: secondStoreColumn },
+                React.createElement("p", null,
+                    React.createElement("strong", null, t('Contact'))),
+                React.createElement("div", { dangerouslySetInnerHTML: { __html: contactParser(contact) }, style: { marginBottom: '24px' } }),
+                coordinates && (React.createElement(React.Fragment, null,
+                    React.createElement("p", null,
+                        React.createElement(DirectionsSvg, { className: "contact-icon" }),
+                        React.createElement("a", { target: "_blank", rel: "noopener noreferrer", href: `https://www.google.com/maps/dir/${coordinates.latitude},${coordinates.longitude}` }, t('Directions'))),
+                    distances[id] && React.createElement("p", null, humanDistance(distances[id]))))))));
+};
+const StoreList = ({ stores, userLocation, setUserLocation, distances }) => (React.createElement(StoreListContainer, null,
+    React.createElement(UserLocation, { setUserLocation: setUserLocation }),
+    stores &&
+        stores.map((store, index) => (React.createElement(Store, { key: index, storeNr: index + 1, store: store, distances: distances })))));
+export default StoreList;
+//# sourceMappingURL=StoreList.js.map

package/dist/src/components/StoreLocator/StoreList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoreList.js","sourceRoot":"","sources":["../../../../src/components/StoreLocator/StoreList.js"],"names":[],"mappings":"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"}

package/dist/src/components/StoreLocator/StoreLocator.js

@@ -0,0 +1,133 @@
+import { Query } from '@apollo/client/react/components';
+import t from '@jetshop/intl';
+import React, { useState } from 'react';
+import { styled } from 'linaria/react';
+import { fuzzySearch } from '@jetshop/ui/fuzzySearch';
+import { Above } from '@jetshop/ui/Breakpoints';
+import { distance } from '@jetshop/core/helpers/distance';
+import MaxWidth from '../Layout/MaxWidth';
+import LoadingPage from '../LoadingPage';
+import storeLocatorQuery from './StoreLocator.gql';
+import StoreSearch from './StoreSearch';
+import StoreList from './StoreList';
+import StoreMap from './StoreMap';
+import { useLocationState } from './useLocationState';
+import Head from '@jetshop/core/components/Head';
+import { Intl } from '@jetshop/intl';
+import { theme } from '../Theme';
+const Flex = styled('div') `
+  display: flex;
+
+  h1 {
+    margin-bottom: 0.5em;
+  }
+
+  > div {
+    flex: 1;
+  }
+
+  ${theme.below.lg} {
+    flex-direction: column;
+  }
+`;
+const Header = styled(Flex) `
+  padding: 3rem 0;
+  background: #fff;
+`;
+const StoreLocatorWrapper = styled(MaxWidth) `
+  ${theme.below.lg} {
+    padding: 0;
+  }
+`;
+const StoreLocatorContent = styled(Flex) `
+  height: 60vh;
+
+  ${theme.below.lg} {
+    height: unset;
+  }
+`;
+const SearchAndListContainer = styled('div') `
+  flex: 0 0 40% !important;
+  height: 100%;
+`;
+export const LocationStateContext = React.createContext(null);
+const StoreLocator = () => {
+    const locationState = useLocationState();
+    const [search, setSearch] = useState('');
+    const [userLocation, setUserLocation] = useState({
+        latitude: null,
+        longitude: null
+    });
+    const [closestStore, setClosestStore] = useState(null);
+    const [distances, setDistances] = useState({});
+    const genDistances = stores => {
+        if (userLocation.latitude == null)
+            return;
+        let distances = {};
+        let closestStore = {};
+        stores
+            .filter(store => store.coordinates)
+            .forEach(store => {
+            const thisDistance = distance(userLocation, store.coordinates);
+            distances[store.id] = thisDistance;
+            // If we haven't got a store in the closestStore obj yet, set it to this one
+            if (!closestStore.distance) {
+                closestStore = Object.assign(Object.assign({}, store), { distance: thisDistance });
+                return;
+            }
+            // If this store is closer than the one currently stored in closestStore,
+            // override it
+            if (thisDistance < closestStore.distance) {
+                closestStore = Object.assign(Object.assign({}, store), { distance: thisDistance });
+            }
+        });
+        setDistances(distances);
+        setClosestStore(closestStore);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Intl, null, t => React.createElement(Head, { data: { title: t('Find store') } })),
+        React.createElement(Header, null,
+            React.createElement(MaxWidth, null,
+                React.createElement("div", null,
+                    React.createElement("h1", null, t('Find store')),
+                    React.createElement("p", null, t('This is where you find our stores. Get informed about the stock status in your local store here. Find and select the store that is closest to you.'))))),
+        React.createElement(StoreLocatorWrapper, null,
+            React.createElement(StoreLocatorContent, null,
+                React.createElement(Query, { query: storeLocatorQuery }, ({ data, loading }) => {
+                    if (loading)
+                        return React.createElement(LoadingPage, null);
+                    if (userLocation.latitude && !closestStore)
+                        genDistances(data.stores);
+                    const stores = search.length === 0
+                        ? data.stores
+                        : fuzzySearch({
+                            data: data.stores,
+                            keys: ['name', 'address1'],
+                            searchTerm: search
+                        });
+                    const storeSearchProps = { search, setSearch };
+                    const storeListProps = {
+                        stores,
+                        userLocation,
+                        setUserLocation,
+                        distances
+                    };
+                    const storeMapProps = {
+                        stores,
+                        userLocation,
+                        closestStore,
+                        distances
+                    };
+                    return (React.createElement(LocationStateContext.Provider, { value: locationState },
+                        React.createElement(Above, { breakpoint: "lg" }, matches => matches ? (React.createElement(React.Fragment, null,
+                            React.createElement(SearchAndListContainer, null,
+                                React.createElement(StoreSearch, Object.assign({}, storeSearchProps)),
+                                React.createElement(StoreList, Object.assign({}, storeListProps))),
+                            React.createElement(StoreMap, Object.assign({}, storeMapProps)))) : (React.createElement(React.Fragment, null,
+                            React.createElement(StoreSearch, Object.assign({}, storeSearchProps)),
+                            React.createElement(StoreMap, Object.assign({}, storeMapProps)),
+                            React.createElement(StoreList, Object.assign({}, storeListProps)))))));
+                })))));
+};
+export default StoreLocator;
+//# sourceMappingURL=StoreLocator.js.map

package/dist/src/components/StoreLocator/StoreLocator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoreLocator.js","sourceRoot":"","sources":["../../../../src/components/StoreLocator/StoreLocator.js"],"names":[],"mappings":"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"}

package/dist/src/components/StoreLocator/StoreLocator.loadable.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import loadable from '@loadable/component';
+import LoadingPage from '../LoadingPage';
+export default loadable(() => import('./StoreLocator'), {
+    fallback: React.createElement(LoadingPage, null)
+});
+//# sourceMappingURL=StoreLocator.loadable.js.map

package/dist/src/components/StoreLocator/StoreLocator.loadable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoreLocator.loadable.js","sourceRoot":"","sources":["../../../../src/components/StoreLocator/StoreLocator.loadable.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,eAAe,QAAQ,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE;IACtD,QAAQ,EAAE,oBAAC,WAAW,OAAG;CAC1B,CAAC,CAAC"}

package/dist/src/components/StoreLocator/StoreMap.js

@@ -0,0 +1,116 @@
+import { GoogleMap, InfoWindow, LoadScript, Marker } from '@react-google-maps/api';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { styled } from 'linaria/react';
+import { LocationStateContext } from './StoreLocator';
+import { useMapState } from './useMapState';
+import { useShopConfig } from '@jetshop/core/hooks/useShopConfig';
+import throwErrorInDev from '@jetshop/core/helpers/throwErrorInDev';
+import { theme } from '../Theme';
+const Wrapper = styled('div') `
+  flex: 0 0 60%;
+
+  .map-container {
+    min-height: 100%;
+
+    ${theme.below.lg} {
+      height: 50vh;
+    }
+  }
+`;
+const LoadingElement = () => React.createElement("div", { style: { height: '100%' } });
+const StoreMap = ({ stores, userLocation, closestStore }) => {
+    const ref = useRef();
+    const locationState = useContext(LocationStateContext);
+    const { isOpen, infoId, showInfo } = useMapState();
+    const [mapsLoaded, setMapsLoaded] = useState(false);
+    const { googleMapsApiKey } = useShopConfig();
+    throwErrorInDev(typeof googleMapsApiKey === 'undefined', 'Make sure googleMapsApiKey is defined in your shop.config.js. See https://developers.google.com/maps/documentation/javascript/get-api-key');
+    useEffect(() => {
+        if (stores && mapsLoaded) {
+            // Stores are loaded, fit bounds
+            const bounds = new window.google.maps.LatLngBounds();
+            stores
+                .filter(store => store.coordinates)
+                .map(store => {
+                var _a, _b;
+                return bounds.extend(new window.google.maps.LatLng((_a = store === null || store === void 0 ? void 0 : store.coordinates) === null || _a === void 0 ? void 0 : _a.latitude, (_b = store === null || store === void 0 ? void 0 : store.coordinates) === null || _b === void 0 ? void 0 : _b.longitude));
+            });
+            // Don't zoom in too far on only one marker
+            if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
+                const extendPoint1 = new window.google.maps.LatLng(bounds.getNorthEast().lat() + 0.01, bounds.getNorthEast().lng() + 0.01);
+                const extendPoint2 = new window.google.maps.LatLng(bounds.getNorthEast().lat() - 0.01, bounds.getNorthEast().lng() - 0.01);
+                bounds.extend(extendPoint1);
+                bounds.extend(extendPoint2);
+            }
+            ref.current.fitBounds(bounds);
+        }
+    }, [mapsLoaded, stores]);
+    useEffect(() => {
+        var _a, _b;
+        if (closestStore && mapsLoaded) {
+            // User has shared its location and the closest store has been calculated
+            const bounds = new window.google.maps.LatLngBounds();
+            bounds.extend(new window.google.maps.LatLng(userLocation.latitude, userLocation.longitude));
+            bounds.extend(new window.google.maps.LatLng((_a = closestStore === null || closestStore === void 0 ? void 0 : closestStore.coordinates) === null || _a === void 0 ? void 0 : _a.latitude, (_b = closestStore === null || closestStore === void 0 ? void 0 : closestStore.coordinates) === null || _b === void 0 ? void 0 : _b.longitude));
+            ref.current.fitBounds(bounds);
+        }
+    }, [userLocation, closestStore, mapsLoaded]);
+    return (React.createElement(Wrapper, null,
+        React.createElement(React.Fragment, null,
+            React.createElement(LoadScript, { loadingElement: React.createElement(LoadingElement, null), preventGoogleFontsLoading: true, googleMapsApiKey: googleMapsApiKey },
+                React.createElement(GoogleMap, { defaultZoom: 6, mapContainerClassName: "map-container", defaultCenter: { lat: 59.247948, lng: 14.755806 }, onLoad: map => {
+                        ref.current = map;
+                        setMapsLoaded(true);
+                    } },
+                    React.createElement(React.Fragment, null,
+                        userLocation.latitude && userLocation.longitude && (React.createElement(Marker, { position: {
+                                lat: userLocation.latitude,
+                                lng: userLocation.longitude
+                            } })),
+                        mapsLoaded &&
+                            stores
+                                .filter(store => store.coordinates)
+                                .map((store, index) => {
+                                var _a, _b, _c, _d;
+                                const isActive = store.id === locationState.activeLocation;
+                                return (React.createElement(React.Fragment, { key: store.id },
+                                    React.createElement(Marker, { icon: {
+                                            path: 'M23.011 12.068C23.011 20.7463 11.8531 28.1849 11.8531 28.1849C11.8531 28.1849 0.695312 20.7463 0.695312 12.068C0.695313 9.10875 1.87087 6.27071 3.96337 4.17821C6.05587 2.08571 8.89391 0.910156 11.8531 0.910156C14.8124 0.910156 17.6504 2.08571 19.7429 4.17821C21.8354 6.27071 23.011 9.10875 23.011 12.068Z',
+                                            fillColor: isActive ? theme.colors.blue : 'white',
+                                            fillOpacity: 1,
+                                            strokeColor: theme.colors.blue,
+                                            anchor: new window.google.maps.Point(12, 32),
+                                            scale: isActive ? 1.25 : 1.2,
+                                            labelOrigin: new window.google.maps.Point(12, 14)
+                                        }, zIndex: index, position: {
+                                            lat: (_a = store === null || store === void 0 ? void 0 : store.coordinates) === null || _a === void 0 ? void 0 : _a.latitude,
+                                            lng: (_b = store === null || store === void 0 ? void 0 : store.coordinates) === null || _b === void 0 ? void 0 : _b.longitude
+                                        }, label: {
+                                            text: `${index + 1}`,
+                                            color: isActive ? 'white' : theme.colors.blue,
+                                            fontSize: '16px'
+                                        }, onMouseOver: () => {
+                                            locationState.setHighlightedLocation(store.id);
+                                        }, onMouseOut: () => locationState.setHighlightedLocation(null), onClick: () => showInfo(store.id) }),
+                                    isOpen && infoId === store.id && (React.createElement(InfoWindow, { key: `infowindow-${store.id}`, onCloseClick: showInfo, position: {
+                                            lat: (_c = store === null || store === void 0 ? void 0 : store.coordinates) === null || _c === void 0 ? void 0 : _c.latitude,
+                                            lng: (_d = store === null || store === void 0 ? void 0 : store.coordinates) === null || _d === void 0 ? void 0 : _d.longitude
+                                        }, options: {
+                                            pixelOffset: new window.google.maps.Size(50, 0)
+                                        } },
+                                        React.createElement("div", { style: {
+                                                background: 'white',
+                                                padding: '1em',
+                                                minWidth: '200px',
+                                                fontSize: '14px',
+                                                lineHeight: 1.5
+                                            } },
+                                            React.createElement("p", null,
+                                                React.createElement("strong", null, store.name)),
+                                            React.createElement("div", { dangerouslySetInnerHTML: {
+                                                    __html: store.address1
+                                                } }))))));
+                            })))))));
+};
+export default StoreMap;
+//# sourceMappingURL=StoreMap.js.map

package/dist/src/components/StoreLocator/StoreMap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoreMap.js","sourceRoot":"","sources":["../../../../src/components/StoreLocator/StoreMap.js"],"names":[],"mappings":"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"}

package/dist/src/components/StoreLocator/StoreMarker.js

@@ -0,0 +1,63 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { styled } from 'linaria/react';
+import { cx } from 'linaria';
+import { ReactComponent as MapPinSvg } from '../../svg/MapPin.svg';
+import { theme } from '../Theme';
+const MarkerContainer = styled('div') `
+  position: relative;
+  width: 24px;
+  height: 29px;
+  margin-right: 12px;
+
+  svg {
+    fill: ${theme.colors.white};
+
+    width: 100%;
+    height: 100%;
+  }
+  &.active {
+    svg {
+      fill: ${theme.colors.blue};
+    }
+
+    span {
+      color: ${theme.colors.white};
+    }
+  }
+
+  span {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 3px;
+    right: 0;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    font-family: 'Source Sans Pro', sans-serif;
+    font-size: 16px;
+    line-height: 1;
+
+    color: ${theme.colors.blue};
+  }
+`;
+export const StoreMarker = (_a) => {
+    var { nr, active, large } = _a, rest = __rest(_a, ["nr", "active", "large"]);
+    return (React.createElement(MarkerContainer, Object.assign({ className: cx(active ? 'active' : null) }, rest),
+        React.createElement(MapPinSvg, null),
+        React.createElement("span", null, nr)));
+};
+//# sourceMappingURL=StoreMarker.js.map

package/dist/src/components/StoreLocator/StoreMarker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoreMarker.js","sourceRoot":"","sources":["../../../../src/components/StoreLocator/StoreMarker.js"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEnE,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;;YAOzB,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;cAOhB,KAAK,CAAC,MAAM,CAAC,IAAI;;;;eAIhB,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;;;;;;;;;;;;aAmBpB,KAAK,CAAC,MAAM,CAAC,IAAI;;CAE7B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAA8B,EAAE,EAAE;QAAlC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,OAAW,EAAN,IAAI,cAA5B,yBAA8B,CAAF;IAAO,OAAA,CAC7D,oBAAC,eAAe,kBAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAM,IAAI;QAChE,oBAAC,SAAS,OAAG;QACb,kCAAO,EAAE,CAAQ,CACD,CACnB,CAAA;CAAA,CAAC"}

package/dist/src/components/StoreLocator/StoreSearch.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { styled } from 'linaria/react';
+import { Intl } from '@jetshop/intl';
+import { ReactComponent as SearchSvg } from '../../svg/Search.svg';
+const SearchContainer = styled('div') `
+  position: relative;
+  width: 100%;
+  padding: 24px;
+
+  label {
+    padding-left: 25px;
+    margin-bottom: 0.25rem;
+    display: block;
+    font-size: 0.875rem;
+    color: #707070;
+  }
+
+  input {
+    width: 100%;
+    height: 46px;
+    padding: 0 48px 0 24px;
+
+    font-size: 16px;
+    border-radius: 27px;
+    border: 1px solid #e0e0e0;
+    outline: none;
+
+    font-family: 'Source Sans Pro', sans-serif;
+  }
+
+  svg {
+    position: absolute;
+    top: 56px;
+    right: 48px;
+    width: 1em;
+    height: 1.2em;
+  }
+`;
+const StoreSearch = ({ search, setSearch }) => (React.createElement(SearchContainer, null,
+    React.createElement(Intl, null, t => (React.createElement(React.Fragment, null,
+        React.createElement("label", { htmlFor: "search-field" }, t('Search')),
+        React.createElement("input", { id: "search-field", value: search, onChange: e => {
+                setSearch(e.target.value);
+            }, placeholder: t('Type your search here') })))),
+    React.createElement(SearchSvg, null)));
+export default StoreSearch;
+//# sourceMappingURL=StoreSearch.js.map

package/dist/src/components/StoreLocator/StoreSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoreSearch.js","sourceRoot":"","sources":["../../../../src/components/StoreLocator/StoreSearch.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEnE,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCpC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC7C,oBAAC,eAAe;IACd,oBAAC,IAAI,QACF,CAAC,CAAC,EAAE,CAAC,CACJ;QACE,+BAAO,OAAO,EAAC,cAAc,IAAE,CAAC,CAAC,QAAQ,CAAC,CAAS;QACnD,+BACE,EAAE,EAAC,cAAc,EACjB,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,CAAC,CAAC,EAAE;gBACZ,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC,EACD,WAAW,EAAE,CAAC,CAAC,uBAAuB,CAAC,GACvC,CACD,CACJ,CACI;IACP,oBAAC,SAAS,OAAG,CACG,CACnB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/src/components/StoreLocator/UserLocation.js

@@ -0,0 +1,76 @@
+import t from '@jetshop/intl';
+import React, { useState } from 'react';
+import { styled } from 'linaria/react';
+import useGeolocation from '@jetshop/core/hooks/useGeolocation';
+import TrendButton from '../ui/Button';
+import { ReactComponent as LocationSvg } from '../../svg/Location.svg';
+import { ReactComponent as CrossSvg } from '../../svg/Cross.svg';
+const UserLocationContainer = styled('li') `
+  position: relative;
+  width: 100%;
+  background: #fff;
+  padding: 32px;
+
+  > div {
+    width: 100%;
+    max-width: 260px;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .ul-icon-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 16px;
+
+    background: transparent;
+    box-shadow: none;
+    border: 0;
+
+    svg {
+      stroke: #878787;
+    }
+
+    &:hover svg {
+      stroke: #000;
+    }
+  }
+
+  .ul-icon-circle {
+    padding: 16px;
+    background: #f2f2f2;
+    border-radius: 50%;
+  }
+
+  h2 {
+    font-family: 'Source Sans Pro', sans-serif;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 23px;
+    margin: 16px 0;
+    text-align: center;
+  }
+`;
+const UserLocation = ({ setUserLocation }) => {
+    const [hide, setHide] = useState(false);
+    const { getPosition, isAvailable, position } = useGeolocation({
+        onSuccess: ({ coords: { latitude, longitude } }) => setUserLocation({ latitude, longitude }),
+        onError: err => console.log(err)
+    });
+    if (hide || !isAvailable || position)
+        return null;
+    return (React.createElement(UserLocationContainer, null,
+        React.createElement("div", null,
+            React.createElement("button", { className: "ul-icon-close", onClick: () => setHide(true) },
+                React.createElement(CrossSvg, null)),
+            React.createElement("span", { className: "ul-icon-circle" },
+                React.createElement(LocationSvg, null)),
+            React.createElement("h2", null, t('Find the closest store using your location')),
+            React.createElement(TrendButton, { onClick: getPosition }, t('Share location')))));
+};
+export default UserLocation;
+//# sourceMappingURL=UserLocation.js.map

package/dist/src/components/StoreLocator/UserLocation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserLocation.js","sourceRoot":"","sources":["../../../../src/components/StoreLocator/UserLocation.js"],"names":[],"mappings":"AAAA,OAAO,CAAC,MAAM,eAAe,CAAC;AAC9B,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,cAAc,MAAM,oCAAoC,CAAC;AAEhE,OAAO,WAAW,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,cAAc,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAE,cAAc,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEjE,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDzC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE;IAC3C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QAC5D,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,CACjD,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;QAC1C,OAAO,EAAE,GAAG,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC;KACjC,CAAC,CAAC;IAEH,IAAI,IAAI,IAAI,CAAC,WAAW,IAAI,QAAQ;QAAE,OAAO,IAAI,CAAC;IAElD,OAAO,CACL,oBAAC,qBAAqB;QACpB;YACE,gCAAQ,SAAS,EAAC,eAAe,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;gBAC5D,oBAAC,QAAQ,OAAG,CACL;YACT,8BAAM,SAAS,EAAC,gBAAgB;gBAC9B,oBAAC,WAAW,OAAG,CACV;YACP,gCAAK,CAAC,CAAC,4CAA4C,CAAC,CAAM;YAC1D,oBAAC,WAAW,IAAC,OAAO,EAAE,WAAW,IAAG,CAAC,CAAC,gBAAgB,CAAC,CAAe,CAClE,CACgB,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}