@evenicanpm/storefront-core 1.1.0 → 1.2.1

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

@@ -1,115 +0,0 @@
-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 "@evenicanpm/storefront-core/src/components/_components/flex-box/index";
-import {
-  H6,
-  Paragraph,
-  Span,
-} from "@evenicanpm/storefront-core/src/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

@@ -1,51 +0,0 @@
-"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 "@evenicanpm/storefront-core/src/components/_components/Typography";
-import FlexRowCenter from "@evenicanpm/storefront-core/src/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

@@ -1,63 +0,0 @@
-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

@@ -1,257 +0,0 @@
-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 "@evenicanpm/storefront-core/src/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

@@ -1,127 +0,0 @@
-import { FlexBox } from "@evenicanpm/storefront-core/src/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

@@ -1,69 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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 } }}
-    />
-  );
-}