@evenicanpm/storefront-core 1.0.6 → 1.2.0

package/src/pages/checkout/checkout-alt-summary/cart-item.tsx

@@ -1,39 +0,0 @@
-// GLOBAL CUSTOM COMPONENTS
-import { FlexBetween } from "@/components/_components/flex-box/index";
-import { Paragraph, Span } from "@/components/_components/Typography";
-import useCurrencyFormatter from "@/lib/currency-formatter";
-import { CartLine } from "@/api-manager/schemas/cart.schema";
-// CUSTOM UTILS LIBRARY FUNCTION
-
-// ==============================================================
-interface Props {
-  cartLine: CartLine;
-}
-// ==============================================================
-
-export default function CartItem({ cartLine }: Props) {
-  const { formatCurrency } = useCurrencyFormatter();
-  const hasDiscount = cartLine.DiscountAmount && cartLine.DiscountAmount > 0;
-  return (
-    <FlexBetween mb={1.5}>
-      <Paragraph>
-        <Span fontWeight="700">{cartLine.Quantity}</Span> x{" "}
-        {cartLine.Product?.Name}
-      </Paragraph>
-
-      <Paragraph>
-        {hasDiscount ? (
-          <s>{formatCurrency(cartLine.NetPrice || 0)}</s>
-        ) : (
-          formatCurrency(cartLine.TotalAmount || 0)
-        )}
-        {hasDiscount ? (
-          <Span color="error.500">
-            {" "}
-            {formatCurrency(cartLine.TotalAmount || 0)}
-          </Span>
-        ) : null}
-      </Paragraph>
-    </FlexBetween>
-  );
-}

package/src/pages/checkout/checkout-alt-summary/checkout-alt-summary.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import Box from "@mui/material/Box";
-import Divider from "@mui/material/Divider";
-// GLOBAL CUSTOM COMPONENTS
-import { Paragraph } from "@/components/_components/Typography";
-// GLOBAL CUSTOM HOOK
-// LOCAL CUSTOM COMPONENTS
-import CartItem from "./cart-item";
-import ListItem from "./list-item";
-import { Cart } from "@/api-manager/schemas/cart.schema";
-import { useTranslations } from "next-intl";
-
-interface Props {
-  cart: Cart;
-}
-
-export default function CheckoutAltSummary({ cart }: Props) {
-  const t = useTranslations("Checkout.Summary");
-  return (
-    <div>
-      <Paragraph color="secondary.900" fontWeight={700} mb={2}>
-        {t("summaryTitle")}
-      </Paragraph>
-
-      {cart.CartLines?.map((cl) => <CartItem cartLine={cl} key={cl.LineId} />)}
-
-      <Box component={Divider} borderColor="grey.300" my={3} />
-
-      <ListItem title={t("subtotal")} value={cart.SubtotalAmount} />
-      <ListItem title={t("shipping")} value={cart.ShippingChargeAmount} />
-      <ListItem title={t("tax")} value={cart.TaxAmount} />
-      <ListItem title={t("discount")} value={cart.DiscountAmount} mb={3} />
-
-      <Box component={Divider} borderColor="grey.300" mb={1} />
-
-      <ListItem title={t("total")} value={cart.TotalAmount} color="inherit" />
-    </div>
-  );
-}

package/src/pages/checkout/checkout-alt-summary/index.ts

@@ -1 +0,0 @@
-export { default as CheckoutAltSummary } from "./checkout-alt-summary";

package/src/pages/checkout/checkout-alt-summary/list-item.tsx

@@ -1,31 +0,0 @@
-// GLOBAL CUSTOM COMPONENTS
-import { Paragraph } from "@/components/_components/Typography";
-import { FlexBetween } from "@/components/_components/flex-box/index";
-import useCurrencyFormatter from "@/lib/currency-formatter";
-// CUSTOM UTILS LIBRARY FUNCTION
-
-// ==============================================================
-interface Props {
-  title: string;
-  value?: number;
-  mb?: number;
-  color?: string;
-}
-// ==============================================================
-
-export default function ListItem({
-  title,
-  value,
-  mb = 0.5,
-  color = "grey.600",
-}: Props) {
-  const { formatCurrency } = useCurrencyFormatter();
-  return (
-    <FlexBetween mb={mb}>
-      <Paragraph color={color}>{title}:</Paragraph>
-      <Paragraph fontWeight="700">
-        {value ? formatCurrency(value) : "-"}
-      </Paragraph>
-    </FlexBetween>
-  );
-}

package/src/pages/confirmation/address.tsx

@@ -1,22 +0,0 @@
-import { Card } from "@mui/material";
-import { Address } from "@/api-manager/schemas/address.schema";
-import { H5, Paragraph } from "@/components/_components/Typography";
-import { useTranslations } from "next-intl";
-
-type Props = { address: Address };
-
-export default function OrderAddress({ address }: Props) {
-  const t = useTranslations("Address");
-  return (
-    <Card sx={{ p: 3 }}>
-      <H5 mt={0} mb={2}>
-        {t("shippingTo")}
-      </H5>
-      <Paragraph>{address.Name}</Paragraph>
-      <Paragraph>{address.City}</Paragraph>
-      <Paragraph>{address.State}</Paragraph>
-      <Paragraph>{address.ZipCode}</Paragraph>
-      <Paragraph>{address.ThreeLetterISORegionName}</Paragraph>
-    </Card>
-  );
-}

package/src/pages/confirmation/confirmation-summary.tsx

@@ -1,52 +0,0 @@
-import { FlexBetween, FlexBox } from "@/components/_components/flex-box";
-import { H6 } from "@/components/_components/Typography";
-import useCurrencyFormatter from "@/lib/currency-formatter";
-import { Card, Divider } from "@mui/material";
-import { Paragraph } from "@/components/_components/Typography";
-import { useTranslations } from "next-intl";
-
-type Props = {
-  subtotal: number;
-  shipping: number;
-  tax: number;
-  discount: number;
-  total: number;
-};
-
-export default function OrderSummary({
-  discount,
-  shipping,
-  subtotal,
-  tax,
-  total,
-}: Props) {
-  const t = useTranslations("Checkout.Summary");
-  const t2 = useTranslations("Confirmation");
-  const { formatCurrency } = useCurrencyFormatter();
-
-  const renderListItem = (title: string, value: number) => (
-    <FlexBetween mb={1}>
-      <Paragraph color="grey.600">{title}</Paragraph>
-      <H6>{formatCurrency(value)}</H6>
-    </FlexBetween>
-  );
-  return (
-    <Card sx={{ px: 3, mb: "30px" }}>
-      <FlexBox
-        justifyContent={"center"}
-        px={3}
-        py={2}
-        borderBottom={"1px solid"}
-        borderColor={"divider"}
-      >
-        {t2("orderSummary")}
-      </FlexBox>
-      {renderListItem(t("subtotal"), subtotal)}
-      {renderListItem(t("shipping"), shipping)}
-      {renderListItem(t("tax"), tax)}
-      {renderListItem(t("discount"), discount)}
-      <Divider sx={{ mb: 1 }} />
-      {renderListItem(t("total"), total)}
-    </Card>
-  );
-}

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

@@ -1,108 +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 "@/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

@@ -1,48 +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 "@/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

@@ -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 "@/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;