@evenicanpm/storefront-core 1.0.0 → 1.0.1

package/src/pages/confirmation/ordered-products.tsx

@@ -0,0 +1,108 @@
+import useCurrencyFormatter from "@/lib/currency-formatter";
+import { ProductDimensionType } from "@msdyn365-commerce/retail-proxy";
+import { Card, Avatar, Box } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import { SalesLine } from "@/api-manager/schemas/order.schema";
+import { FlexBetween, FlexBox } from "@/components/_components/flex-box/index";
+import { H6, Paragraph, Span } from "@/components/_components/Typography";
+import { useFormatter, useTranslations } from "next-intl";
+import React from "react";
+import { Fragment } from "react";
+
+type Props = {
+  salesLines: SalesLine[];
+  orderId: string;
+  transactionDate: Date;
+  receiptEmail: string;
+};
+
+export default function OrderedProducts({
+  salesLines,
+  orderId,
+  transactionDate,
+  receiptEmail,
+}: Props) {
+  const t = useTranslations("Confirmation");
+  const { dateTime } = useFormatter();
+  const { formatCurrency } = useCurrencyFormatter();
+
+  const checkValidDate = (date: Date | string) => {
+    return new Date(date) instanceof Date;
+  };
+
+  const renderItem = (title: string, value: string) => (
+    <FlexBox gap={1} alignItems="center">
+      <Paragraph color="grey.600">{title}</Paragraph>
+      <Paragraph>{value}</Paragraph>
+    </FlexBox>
+  );
+  return (
+    <Card sx={{ p: 0, mb: "30px" }}>
+      <FlexBetween
+        px={3}
+        py={2}
+        flexWrap="wrap"
+        borderBottom="1px solid"
+        borderColor="divider"
+      >
+        {renderItem(t("orderNumber"), orderId)}
+        {checkValidDate(transactionDate)
+          ? renderItem(
+              t("orderDate"),
+              dateTime(new Date(transactionDate), { dateStyle: "medium" }),
+            )
+          : null}
+        {renderItem(t("orderEmail"), receiptEmail)}
+      </FlexBetween>
+
+      <Grid container spacing={2} alignItems={"center"} padding={"15px 5px"}>
+        {salesLines.map((item, ind) => (
+          <Fragment key={ind}>
+            <Grid size={{ xs: 12, sm: 6 }}>
+              <FlexBox gap={2.5} alignItems="center">
+                <Avatar
+                  alt={item.Product?.Name}
+                  src={item.Product?.PrimaryImageUrl}
+                  sx={{ mx: 1, width: 75, height: 75 }}
+                />
+                <div>
+                  <H6>{item.Product?.Name}</H6>
+                  <Paragraph color="grey.600">
+                    {formatCurrency(item.Price ?? 0)} x {item.Quantity}
+                  </Paragraph>
+                  {item.Comment ? (
+                    <Paragraph mt={1}>
+                      <H6 sx={{ display: "inline" }}>{t("commentLabel")}: </H6>
+                      {item.Comment}
+                    </Paragraph>
+                  ) : null}
+                </div>
+              </FlexBox>
+            </Grid>
+
+            <Grid size={{ xs: 8, sm: 4 }}>
+              {item.Product?.Dimensions?.length ? (
+                item.Product.Dimensions.map((dim, dimInd) => (
+                  <Paragraph key={dimInd} paddingLeft={"15px"}>
+                    <Span>
+                      {ProductDimensionType[dim.DimensionTypeValue || 0]}:
+                    </Span>
+                    <Span sx={{ ml: 1 }}>{dim.DimensionValue?.Value}</Span>
+                  </Paragraph>
+                ))
+              ) : (
+                <Box />
+              )}
+            </Grid>
+
+            <Grid size={{ xs: 4, sm: 2 }}>
+              <Box justifySelf={"end"} paddingRight={"15px"}>
+                <Paragraph>{formatCurrency(item.TotalAmount ?? 0)}</Paragraph>
+              </Box>
+            </Grid>
+          </Fragment>
+        ))}
+      </Grid>
+    </Card>
+  );
+}

package/src/pages/product-details/available-shops.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import Link from "next/link";
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import Grid from "@mui/material/Grid2";
+import Avatar from "@mui/material/Avatar";
+// GLOBAL CUSTOM COMPONENTS
+import { H3, H4 } from "@/components/_components/Typography";
+import FlexRowCenter from "@/components/_components/flex-box/flex-row-center";
+
+export default function AvailableShops() {
+  return (
+    <Box mb={7.5}>
+      <H3 mb={3}>Also Available at</H3>
+
+      <Grid container spacing={4}>
+        {shopList.map((item) => (
+          <Grid size={{ lg: 2, md: 3, sm: 4, xs: 12 }} key={item.name}>
+            <Link href="/shops/scarlett-beauty">
+              <FlexRowCenter
+                p={3.25}
+                width="100%"
+                component={Card}
+                flexDirection="column"
+              >
+                <Avatar
+                  alt={item.name}
+                  src={item.imgUrl}
+                  sx={{ width: 48, height: 48 }}
+                />
+                <H4 mt={1.5} color="grey.800">
+                  {item.name}
+                </H4>
+              </FlexRowCenter>
+            </Link>
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+}
+
+const shopList = [
+  { name: "Tech Friend", imgUrl: "/assets/images/faces/propic.png" },
+  { name: "Smart Shop", imgUrl: "/assets/images/faces/propic(1).png" },
+  { name: "Gadget 360", imgUrl: "/assets/images/faces/propic(8).png" },
+];

package/src/pages/product-details/bopis/find-in-store-button.tsx

@@ -0,0 +1,63 @@
+import { Button } from "@mui/material";
+import React from "react";
+import FindInStoreModal from "./find-in-store-modal";
+import { AddToCartBopisInput } from "../../../hooks/use-cart";
+import { useTranslations } from "next-intl";
+
+type Props = {
+  productId: number;
+  canOpenModal(): boolean;
+  handleAddToCart: (bopisInput: AddToCartBopisInput) => void;
+  allDimensionsSelected: boolean;
+};
+
+/**
+ * A button component that triggers a "Find in Store" modal for BOPIS (Buy Online, Pickup In Store) functionality.
+ *
+ * @param props - The component props
+ * @param props.productId - The ID of the product to find in stores
+ * @param props.canOpenModal - Optional function that determines if the modal can be opened; if undefined, modal can always open
+ * @param props.handleAddToCart - Function to call when adding the item to cart with BOPIS information
+ * @param props.allDimensionsSelected - Flag indicating if all product dimensions/variations have been selected
+ *
+ * @returns A React component with a button that opens a modal for finding the product in nearby stores
+ */
+const FindInStoreButton = ({
+  productId,
+  canOpenModal,
+  handleAddToCart,
+  allDimensionsSelected,
+}: Props) => {
+  const [open, setOpen] = React.useState(false);
+  const t = useTranslations("productDetail.Bopis");
+  const modalShouldOpen = () => canOpenModal === undefined || canOpenModal();
+  const handleOpen = () => {
+    if (modalShouldOpen()) {
+      setOpen(true);
+    }
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const onAddToCart = (bopisInput: AddToCartBopisInput) => {
+    handleAddToCart(bopisInput);
+    handleClose();
+  };
+  return (
+    <React.Fragment>
+      <Button onClick={handleOpen} variant={"contained"} color={"secondary"}>
+        {t("findStoresBtn")}
+      </Button>
+      <FindInStoreModal
+        open={open}
+        handleClose={handleClose}
+        handleAddToCart={onAddToCart}
+        productId={productId}
+        allDimensionsSelected={allDimensionsSelected}
+      />
+    </React.Fragment>
+  );
+};
+
+export default FindInStoreButton;

package/src/pages/product-details/bopis/find-in-store-modal.tsx

@@ -0,0 +1,257 @@
+import {
+  CircularProgress,
+  Dialog,
+  DialogContent,
+  FormControlLabel,
+  FormGroup,
+  Switch,
+  Typography,
+} from "@mui/material";
+import { Box } from "@mui/system";
+import React from "react";
+import SearchHeader from "./search-header";
+import ShopCard from "@/components/_components/shop-card";
+import {
+  DeliveryOption,
+  ProductWarehouseInventoryAvailability,
+  QueryResultSettings,
+  SearchArea,
+} from "@msdyn365-commerce/retail-proxy";
+import PickupOptionSelect from "./pickup-option-select";
+import { geolocate } from "@/lib/map-helper";
+import getStores from "@/api-manager/services/organization/queries/get-stores";
+import { AddToCartBopisInput } from "../../../hooks/use-cart";
+import getProductAvailability from "@/api-manager/services/product/queries/get-product-availability";
+import { InventorySearchCriteriaInput } from "@/api-manager/schemas/product.schema";
+import { OrgUnitLocationReturnType } from "@/api-manager/schemas/organization.schema";
+import { useTranslations } from "next-intl";
+import getChannelConfiguration from "@/api-manager/services/organization/queries/get-channel-configuration";
+
+type Props = {
+  open: boolean;
+  handleClose: () => void;
+  handleAddToCart: (bopisInput: AddToCartBopisInput) => void;
+  productId: number;
+  allDimensionsSelected: boolean;
+};
+
+const qrs: QueryResultSettings = {
+  Paging: {
+    Skip: 0,
+    Top: 1000,
+  },
+};
+const initialSearchArea: SearchArea = {
+  DistanceUnitValue: 0,
+  Latitude: 0,
+  Longitude: 0,
+  Radius: 0,
+};
+
+/**
+ * Modal component that allows users to find a product in physical stores.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {Function} props.handleClose - Function to close the modal
+ * @param {boolean} props.open - Whether the modal is open or not
+ * @param {Function} props.handleAddToCart - Function to handle adding the product to cart
+ * @param {number} props.productId - ID of the product being searched
+ * @param {boolean} props.allDimensionsSelected - Whether all product dimensions (size, color, etc.) are selected
+ *
+ * @returns {JSX.Element} - Rendered modal component that displays available stores with inventory information
+ *
+ * @example
+ * <FindInStoreModal
+ *   handleClose={() => setModalOpen(false)}
+ *   open={modalOpen}
+ *   handleAddToCart={handleAddItemToCart}
+ *   productId={123456}
+ *   allDimensionsSelected={true}
+ * />
+ */
+const FindInStoreModal = ({
+  handleClose,
+  open,
+  handleAddToCart,
+  productId,
+  allDimensionsSelected,
+}: Props): JSX.Element => {
+  const t = useTranslations("productDetail");
+  const [hideOutOfStock, setHideOutOfStock] = React.useState(false);
+  const { data: channelConfig } = getChannelConfiguration.useSuspenseData();
+  const [searchArea, setSearchArea] =
+    React.useState<SearchArea>(initialSearchArea);
+  const { data: stores, isLoading: storesLoading } = getStores.useData({
+    queryResultSettings: qrs,
+    searchArea,
+  });
+
+  const inventoryInput: InventorySearchCriteriaInput = React.useMemo(
+    () => ({
+      allDimensionsSelected,
+      searchCriteria: {
+        defaultWarehouseOnly: false,
+        productIds: [productId],
+        searchArea,
+      },
+    }),
+    [allDimensionsSelected, productId, searchArea],
+  );
+
+  const { data: inventoryData } =
+    getProductAvailability.useData(inventoryInput);
+
+  const renderTitle = () => (
+    <Box
+      display={"flex"}
+      justifyContent="flex-start"
+      alignItems="center"
+      sx={{ padding: 2 }}
+    >
+      <Typography variant="h6" sx={{ fontWeight: 600 }}>
+        {t("Bopis.findInStoreLabel")}
+      </Typography>
+    </Box>
+  );
+
+  const toggleOutOfStock = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setHideOutOfStock(event.target.checked);
+  };
+
+  const renderOutOfStockToggle = () => {
+    return (
+      <FormGroup>
+        <FormControlLabel
+          control={
+            <Switch checked={hideOutOfStock} onChange={toggleOutOfStock} />
+          }
+          label={t("Bopis.hideOutOfStockLabel")}
+        />
+      </FormGroup>
+    );
+  };
+  const getInventoryRecordByStoreId = (
+    storeId: string,
+  ): ProductWarehouseInventoryAvailability | undefined => {
+    const inventoryRecord =
+      inventoryData?.ProductWarehouseInventoryAvailabilities?.find(
+        (record) => record.InventLocationId === storeId,
+      );
+    return inventoryRecord;
+  };
+
+  const isOutOfStock = (storeId: string): boolean => {
+    const OUT_OF_STOCK_LABEL = "OOS"; // Always means out of stock
+    const inventoryRecord = getInventoryRecordByStoreId(storeId);
+    if (inventoryRecord) {
+      return (
+        inventoryRecord.PhysicalAvailableInventoryLevelCode ===
+        OUT_OF_STOCK_LABEL
+      );
+    }
+    return true;
+  };
+
+  const getStoreList = () => {
+    if (!stores) {
+      return [];
+    }
+    const _stores = [...Object.values(stores)];
+    if (hideOutOfStock) {
+      return _stores.filter(
+        (store) => !isOutOfStock(store.location.OrgUnitNumber || ""),
+      );
+    }
+    return _stores;
+  };
+
+  const handleSearch = async (searchTerm: string) => {
+    if (!channelConfig) {
+      console.error("Channel configuration is not available.");
+      return;
+    }
+    const [lat, lng] = await geolocate(
+      searchTerm,
+      channelConfig?.[0]?.BingMapsApiKey || "",
+    );
+    setSearchArea({
+      ...searchArea,
+      Latitude: lat,
+      Longitude: lng,
+      DistanceUnitValue: 0,
+      Radius: 0,
+    });
+  };
+
+  const renderActionArea = (
+    storeId: string,
+    pickupOptions: DeliveryOption[],
+    inventoryLabel: string,
+  ) => (
+    <PickupOptionSelect
+      pickupOptions={pickupOptions || []}
+      storeId={storeId}
+      onPickupClick={handleAddToCart}
+      isOutOfStock={isOutOfStock(storeId)}
+      inventoryLabel={inventoryLabel}
+    />
+  );
+
+  const renderShopCard = (store: OrgUnitLocationReturnType) => {
+    const { location, storeHours, pickupOptions } = store;
+    if (!location.OrgUnitNumber) {
+      return null;
+    }
+    const inventoryRecord = getInventoryRecordByStoreId(location.OrgUnitNumber);
+    return (
+      <ShopCard
+        key={location.OrgUnitNumber}
+        name={location.OrgUnitName || ""}
+        address={location.Address || ""}
+        actionArea={renderActionArea(
+          location.OrgUnitNumber || "",
+          // @ts-ignore TODO: ??
+          pickupOptions || [],
+          inventoryRecord?.TotalAvailableInventoryLevelLabel || "",
+        )}
+        openFrom={location.OpenFrom || 0}
+        openTo={location.OpenTo || 0}
+        storeHours={storeHours}
+        inventoryRecord={inventoryRecord}
+      />
+    );
+  };
+
+  return (
+    <Dialog open={open} onClose={handleClose} fullWidth={true} maxWidth={"md"}>
+      <DialogContent>
+        {storesLoading && (
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100px",
+              direction: "row",
+            }}
+          >
+            <CircularProgress />
+          </Box>
+        )}
+        {!storesLoading && (
+          <React.Fragment>
+            {renderTitle()}
+            <SearchHeader handleSearch={handleSearch} />
+            {renderOutOfStockToggle()}
+            <Box sx={{ padding: 2, marginBottom: 2 }}>
+              {getStoreList().map((store) => renderShopCard(store))}
+            </Box>
+          </React.Fragment>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default FindInStoreModal;

package/src/pages/product-details/bopis/pickup-option-select.tsx

@@ -0,0 +1,127 @@
+import { FlexBox } from "@/components/_components/flex-box";
+import { DeliveryOption } from "@msdyn365-commerce/retail-proxy";
+import {
+  Box,
+  Button,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  Typography,
+} from "@mui/material";
+import React from "react";
+import { AddToCartBopisInput } from "../../../hooks/use-cart";
+import { useTranslations } from "next-intl";
+
+type Props = {
+  pickupOptions: DeliveryOption[];
+  storeId: string;
+  onPickupClick: (bopisInput: AddToCartBopisInput) => void;
+  isOutOfStock: boolean;
+  inventoryLabel: string;
+};
+
+/**
+ * A component that renders pickup options for a BOPIS (Buy Online, Pickup In Store) flow.
+ *
+ * @component
+ * @param {Object} props - The component props
+ * @param {DeliveryOption[]} props.pickupOptions - Array of available pickup options for the store
+ * @param {string} props.storeId - ID of the store for pickup
+ * @param {Function} props.onPickupClick - Callback function called when user clicks the pickup button
+ * @param {boolean} props.isOutOfStock - Flag indicating if the product is out of stock at this location
+ * @param {string} props.inventoryLabel - Label to display when product is out of stock
+ *
+ * @returns {JSX.Element} The rendered pickup option selection component
+ *
+ * @example
+ * <PickupOptionSelect
+ *   pickupOptions={storePickupOptions}
+ *   storeId="store123"
+ *   onPickupClick={handleAddToCart}
+ *   isOutOfStock={false}
+ *   inventoryLabel="Out of stock"
+ * />
+ */
+const PickupOptionSelect = ({
+  pickupOptions,
+  storeId,
+  onPickupClick,
+  isOutOfStock,
+  inventoryLabel,
+}: Props): JSX.Element => {
+  const [selectedOption, setSelectedOption] =
+    React.useState<DeliveryOption | null>(pickupOptions[0] || null);
+  const handlePickupOptionChange = (event: SelectChangeEvent) => {
+    const _selectedOption = pickupOptions.find(
+      (option) => option.Code === event.target.value,
+    );
+    setSelectedOption(_selectedOption || null);
+  };
+  const t = useTranslations("productDetail");
+
+  const renderOptions = () => (
+    <Select
+      labelId={`pickup-option-select-${storeId}`}
+      id={`pickup-option-select-${storeId}`}
+      onChange={handlePickupOptionChange}
+      value={selectedOption?.Code || ""}
+    >
+      {pickupOptions.map((option) => (
+        <MenuItem key={option.Code} value={option.Code}>
+          {option.Description}
+        </MenuItem>
+      ))}
+    </Select>
+  );
+
+  const handlePickupClick = () => {
+    if (selectedOption && selectedOption.Code) {
+      const bopisInput: AddToCartBopisInput = {
+        warehouseId: storeId,
+        deliveryMode: selectedOption.Code,
+      };
+      onPickupClick(bopisInput);
+    }
+  };
+
+  if (pickupOptions.length === 0) {
+    return (
+      <Box sx={{ minHeight: "40px", padding: 2 }}>
+        <Typography variant={"body2"} sx={{ fontWeight: 600 }}>
+          {t("Bopis.noPickupAvailable")}
+        </Typography>
+      </Box>
+    );
+  }
+
+  if (isOutOfStock) {
+    return (
+      <Box sx={{ minHeight: "40px", padding: 2 }}>
+        <Typography variant={"body2"} sx={{ fontWeight: 600 }}>
+          {inventoryLabel}
+        </Typography>
+      </Box>
+    );
+  }
+
+  return (
+    <FlexBox alignItems={"center"} gap={1} sx={{ padding: 2 }}>
+      {pickupOptions.length > 1 ? (
+        renderOptions()
+      ) : (
+        <Box>{selectedOption?.Description}</Box>
+      )}
+      <Box>
+        <Button
+          variant={"contained"}
+          color={"primary"}
+          onClick={handlePickupClick}
+        >
+          {t("btnAddToCart")}
+        </Button>
+      </Box>
+    </FlexBox>
+  );
+};
+
+export default PickupOptionSelect;

package/src/pages/product-details/bopis/search-header.tsx

@@ -0,0 +1,69 @@
+import {
+  FormControl,
+  IconButton,
+  InputAdornment,
+  OutlinedInput,
+} from "@mui/material";
+import React from "react";
+import SearchIcon from "@mui/icons-material/Search";
+import { useTranslations } from "next-intl";
+type Props = {
+  handleSearch: (searchTerm: string) => void;
+};
+
+/**
+ * Component for rendering a search header with a search input and submit functionality.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {Function} props.handleSearch - Callback function that handles the search action with the search term
+ *
+ * @returns {JSX.Element} A form with a search input field that triggers the search on submit or Enter key
+ *
+ * @example
+ * ```tsx
+ * <SearchHeader handleSearch={(term) => console.log(`Searching for ${term}`)} />
+ * ```
+ */
+const SearchHeader = ({ handleSearch }: Props): JSX.Element => {
+  const [searchTerm, setSearchTerm] = React.useState<string>("");
+  const t = useTranslations("productDetail.Bopis");
+  const renderSearchAdornment = () => (
+    <InputAdornment position="end">
+      <IconButton type="submit" aria-label="search" edge="end">
+        <SearchIcon />
+      </IconButton>
+    </InputAdornment>
+  );
+
+  const handleSubmit = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && searchTerm) {
+      e.preventDefault();
+      e.stopPropagation();
+      handleSearch(searchTerm);
+    }
+  };
+
+  const onSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (searchTerm) {
+      handleSearch(searchTerm);
+    }
+  };
+
+  return (
+    <form onSubmit={onSearch}>
+      <FormControl sx={{ m: 1, width: "100%" }} variant="outlined">
+        <OutlinedInput
+          endAdornment={renderSearchAdornment()}
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          placeholder={t("searchPlaceholder")}
+          onKeyUp={handleSubmit}
+        />
+      </FormControl>
+    </form>
+  );
+};
+
+export default SearchHeader;

package/src/pages/product-details/checkbox-label.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+// MUI
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox, { CheckboxProps } from "@mui/material/Checkbox";
+
+// ==============================================================
+interface Props extends CheckboxProps {
+  label: ReactNode;
+}
+// ==============================================================
+
+export default function CheckboxLabel({ label, ...props }: Props) {
+  return (
+    <FormControlLabel
+      label={label}
+      control={<Checkbox size="small" color="primary" {...props} />}
+      slotProps={{ typography: { fontSize: 14, lineHeight: 1 } }}
+    />
+  );
+}