@shopgate/engage
Version:
Shopgate's ENGAGE library.
74 lines (73 loc) • 2.75 kB
JavaScript
import React, { useContext, useMemo } from 'react';
import { Grid, LocationIcon } from '@shopgate/engage/components';
import { i18n } from '@shopgate/engage/core/helpers';
import { StoreContext } from "./Store.context";
import { StoreFinderContext } from "../../locations.context";
import { StoreDistance } from "../StoreList/StoreDistance";
import { StoreHoursToday } from "../StoreList/StoreHoursToday";
import { StoreAddress } from "../StoreList/StoreAddress";
import StoreFinderLocationHeaderPhoneNumber from "./StoreFinderLocationHeaderPhoneNumber";
import { container, storeName, storeDistance, storeHoursToday, clickable, storeNameWrapper, myStore, myStoreIcon, myStoreWrapper } from "./StoreFinderLocationHeader.style";
/**
* @returns {JSX}
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const StoreFinderLocationHeader = () => {
const store = useContext(StoreContext);
const {
name,
distance,
unitSystem,
operationHours,
address
} = store;
const {
selectedLocation
} = useContext(StoreFinderContext);
const isSelectedLocation = useMemo(() => selectedLocation?.code === store?.code, [selectedLocation, store]);
return /*#__PURE__*/_jsxs("div", {
className: container,
children: [/*#__PURE__*/_jsxs("div", {
className: clickable,
children: [/*#__PURE__*/_jsxs(Grid, {
children: [/*#__PURE__*/_jsx(Grid.Item, {
grow: 1,
children: /*#__PURE__*/_jsxs("div", {
className: storeNameWrapper,
children: [/*#__PURE__*/_jsx("div", {
className: storeName,
children: name
}), isSelectedLocation && /*#__PURE__*/_jsxs("div", {
className: myStoreWrapper,
children: [/*#__PURE__*/_jsx("div", {
className: myStoreIcon,
children: /*#__PURE__*/_jsx(LocationIcon, {
size: 20
})
}), /*#__PURE__*/_jsx("div", {
className: myStore,
children: i18n.text('location.myStore')
})]
})]
})
}), /*#__PURE__*/_jsx(Grid.Item, {
className: storeDistance,
children: /*#__PURE__*/_jsx(StoreDistance, {
distance: distance,
unitSystem: unitSystem
})
})]
}), /*#__PURE__*/_jsx("div", {
className: storeHoursToday,
children: /*#__PURE__*/_jsx(StoreHoursToday, {
hours: operationHours
})
}), /*#__PURE__*/_jsx(StoreAddress, {
address: address
})]
}), /*#__PURE__*/_jsx(StoreFinderLocationHeaderPhoneNumber, {
phone: address.phoneNumber
})]
});
};
export default StoreFinderLocationHeader;