@shopgate/engage
Version:
Shopgate's ENGAGE library.
76 lines (75 loc) • 2.51 kB
JavaScript
import React, { useContext } from 'react';
import classNames from 'classnames';
import { Grid, ResponsiveContainer } from '@shopgate/engage/components';
import { isProductAvailable } from "../../helpers";
import { FulfillmentContext } from "../../locations.context";
import { StoreContext } from "./Store.context";
import { StoreDistance } from "./StoreDistance";
import { StoreHoursToday } from "./StoreHoursToday";
import { StoreSelectLocationButton } from "./StoreSelectLocationButton";
import { StockInfo } from "../StockInfo";
import { storeHeader, storeName, disabled } from "./Store.style";
/**
* Renders a single store headline.
* @returns {JSX}
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function StoreHeader() {
const store = useContext(StoreContext);
const {
product
} = useContext(FulfillmentContext);
const isAvailable = isProductAvailable(store, store?.inventory);
const {
name,
distance,
unitSystem
} = store;
return /*#__PURE__*/_jsxs("div", {
className: classNames(storeHeader, {
[disabled]: !isAvailable
}),
children: [/*#__PURE__*/_jsxs(Grid, {
children: [/*#__PURE__*/_jsxs(Grid.Item, {
grow: 1,
className: storeName,
children: [name, /*#__PURE__*/_jsx(ResponsiveContainer, {
breakpoint: ">=sm",
webOnly: true,
children: /*#__PURE__*/_jsx("ul", {
children: /*#__PURE__*/_jsxs(Grid.Item, {
shrink: 0,
children: [/*#__PURE__*/_jsx(StockInfo, {
location: store,
product: product,
showStoreName: false
}), /*#__PURE__*/_jsx(StoreDistance, {
distance: distance,
unitSystem: unitSystem
})]
})
})
})]
}), /*#__PURE__*/_jsx(ResponsiveContainer, {
breakpoint: "<sm",
appAlways: true,
children: /*#__PURE__*/_jsx(Grid.Item, {
shrink: 0,
children: /*#__PURE__*/_jsx(StoreDistance, {
distance: distance,
unitSystem: unitSystem
})
})
}), /*#__PURE__*/_jsx(ResponsiveContainer, {
breakpoint: ">=sm",
webOnly: true,
children: /*#__PURE__*/_jsx(Grid.Item, {
shrink: 0,
children: /*#__PURE__*/_jsx(StoreSelectLocationButton, {})
})
})]
}), /*#__PURE__*/_jsx(StoreHoursToday, {
hours: store.operationHours
})]
});
}