@evenicanpm/storefront-core 1.0.6 → 1.2.0

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

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

@@ -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 } }}
-    />
-  );
-}

package/src/pages/product-details/currency.ts

@@ -1,64 +0,0 @@
-import currencyJs from "currency.js";
-import { formatDistanceStrict } from "date-fns";
-/**
- * NOTE: We can move this to a more appropriate location if needed.
- */
-
-/**
- * GET THE DIFFERENCE DATE FORMAT
- * @param  DATE | NUMBER | STRING
- * @returns FORMATTED DATE STRING
- */
-
-function getDateDifference(date: string | number | Date) {
-  const distance = formatDistanceStrict(new Date(), new Date(date));
-  return distance + " ago";
-}
-
-/**
- * RENDER THE PRODUCT PAGINATION INFO
- * @param page - CURRENT PAGE NUMBER
- * @param perPageProduct - PER PAGE PRODUCT LIST
- * @param totalProduct - TOTAL PRODUCT NUMBER
- * @returns
- */
-
-function renderProductCount(
-  page: number,
-  perPageProduct: number,
-  totalProduct: number,
-) {
-  const startNumber = (page - 1) * perPageProduct;
-  let endNumber = page * perPageProduct;
-
-  if (endNumber > totalProduct) {
-    endNumber = totalProduct;
-  }
-  return `Showing ${startNumber - 1}-${endNumber} of ${totalProduct} products`;
-}
-
-/**
- * CALCULATE PRICE WITH PRODUCT DISCOUNT THEN RETURN NEW PRODUCT PRICES
- * @param  price - PRODUCT PRICE
- * @param  discount - DISCOUNT PERCENT
- * @returns - RETURN NEW PRICE
- */
-
-function calculateDiscount(price: number, discount: number) {
-  const afterDiscount = Number((price - price * (discount / 100)).toFixed(2));
-  return currency(afterDiscount);
-}
-
-/**
- * CHANGE THE CURRENCY FORMAT
- * @param  price - PRODUCT PRICE
- * @param  fraction - HOW MANY FRACTION WANT TO SHOW
- * @returns - RETURN PRICE WITH CURRENCY
- */
-
-function currency(price: number, fraction = 2) {
-  const formatCurrency = currencyJs(price).format({ precision: fraction });
-  return formatCurrency;
-}
-
-export { currency, getDateDifference, calculateDiscount, renderProductCount };

package/src/pages/product-details/frequently-bought.tsx

@@ -1,90 +0,0 @@
-"use client";
-
-import { Fragment } from "react";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import styled from "@mui/material/styles/styled";
-// GLOBAL CUSTOM COMPONENTS
-import { H2, H3, Span } from "@/components/_components/Typography";
-import { FlexBox, FlexRowCenter } from "@/components/_components/flex-box";
-// LOCAL CUSTOM COMPONENT
-import FrequentlyProductCard from "./frequently-product-card";
-// CUSTOM UTILS LIBRARY FUNCTION
-import { currency } from "@/lib/lib";
-// CUSTOM DATA MODEL
-import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
-
-// STYLED COMPONENTS
-const WrapperBox = styled(Box)(({ theme }) => ({
-  [theme.breakpoints.down("sm")]: {
-    "& .card-holder": { flexDirection: "column" },
-  },
-}));
-
-// ============================================================
-type Props = { products: Product[] };
-// ============================================================
-
-export default function FrequentlyBought({ products }: Props) {
-  return (
-    <WrapperBox mb={7.5}>
-      <H3 mb={3}>Frequently Bought Together</H3>
-
-      <FlexBox className="card-holder" flexWrap="wrap" m={-1}>
-        {products.map((item, ind) => (
-          <Fragment key={item.RecordId}>
-            <FrequentlyProductCard
-              id={item.RecordId}
-              key={item.RecordId}
-              slug={item.ItemId ?? ""}
-              price={item.Price}
-              title={item.Name ?? ""}
-              imgUrl={item.PrimaryImageUrl ?? ""}
-            />
-
-            {ind < products.length - 1 && (
-              <FlexRowCenter>
-                <H2 color="grey.600" mx={1}>
-                  +
-                </H2>
-              </FlexRowCenter>
-            )}
-          </Fragment>
-        ))}
-
-        <FlexRowCenter>
-          <H2 color="grey.600" mx={3}>
-            =
-          </H2>
-        </FlexRowCenter>
-
-        <FlexRowCenter
-          m={1}
-          minWidth={300}
-          minHeight={200}
-          border="1px solid"
-          borderRadius="8px"
-          className="gray-box"
-          borderColor="grey.400"
-          flexDirection="column"
-        >
-          <H3 color="primary.main">{currency(2500)}</H3>
-
-          <Span mb={2} fontWeight="600" color="grey.600">
-            Save {currency(500)}
-          </Span>
-
-          <FlexBox gap={1.5}>
-            <Button variant="contained" color="primary">
-              Add to Cart
-            </Button>
-
-            <Button variant="outlined" color="primary">
-              Add to List
-            </Button>
-          </FlexBox>
-        </FlexRowCenter>
-      </FlexBox>
-    </WrapperBox>
-  );
-}

package/src/pages/product-details/frequently-product-card.tsx

@@ -1,60 +0,0 @@
-import Link from "next/link";
-import Box from "@mui/material/Box";
-// GLOBAL CUSTOM COMPONENTS
-import HoverBox from "@/components/_components/HoverBox";
-import LazyImage from "@/components/_components/LazyImage";
-import BazaarCard from "@/components/_components/BazaarCard";
-import { H6, Span } from "@/components/_components/Typography";
-import FlexBox from "@/components/_components/flex-box/flex-box";
-// CUSTOM UTILS LIBRARY FUNCTIONS
-import { calculateDiscount, currency } from "@/lib/lib";
-
-// =======================================================
-interface Props {
-  slug: string;
-  price: number;
-  title: string;
-  imgUrl: string;
-  id: string | number;
-}
-// =======================================================
-
-export default function FrequentlyProductCard(props: Props) {
-  const {
-    imgUrl = "/assets/images/products/Rectangle 116.png",
-    price,
-    title,
-    slug,
-  } = props;
-
-  return (
-    <BazaarCard
-      sx={{
-        p: 2,
-        width: "100%",
-        flex: "1 1 0",
-        minWidth: "160px",
-        margin: { xs: 0, sm: 1 },
-        maxWidth: { xs: "100%", sm: "220px" },
-      }}
-    >
-      <Link href={`/products/${slug}`}>
-        <HoverBox mb={1.5} borderRadius="8px">
-          <LazyImage alt={title} width={500} height={500} src={imgUrl} />
-        </HoverBox>
-
-        <Span title={title} mb={0.5} color="inherit" ellipsis display="block">
-          {title}
-        </Span>
-
-        <FlexBox alignItems="center" gap={1}>
-          <H6 color="primary.main">{currency(price)}</H6>
-
-          <Box component="del" fontWeight={600} color="grey.600">
-            {calculateDiscount(price, 35)}
-          </Box>
-        </FlexBox>
-      </Link>
-    </BazaarCard>
-  );
-}

package/src/pages/product-details/product-comment.tsx

@@ -1,44 +0,0 @@
-"use client";
-
-import Box from "@mui/material/Box";
-import Avatar from "@mui/material/Avatar";
-import Rating from "@mui/material/Rating";
-// GLOBAL CUSTOM COMPONENTS
-import { FlexBox } from "@/components/_components/flex-box";
-import { H5, H6, Paragraph, Span } from "@/components/_components/Typography";
-// CUSTOM UTILS LIBRARY FUNCTION
-import { getDateDifference } from "@/lib/lib";
-
-// ===========================================================
-interface Props {
-  name: string;
-  date: string;
-  imgUrl: string;
-  rating: number;
-  comment: string;
-}
-// ===========================================================
-
-export default function ProductComment(props: Props) {
-  const { name, imgUrl, rating, date, comment } = props || {};
-
-  return (
-    <Box mb={4} maxWidth={600}>
-      <FlexBox alignItems="center" mb={2} gap={2}>
-        <Avatar alt={name} src={imgUrl} sx={{ width: 48, height: 48 }} />
-
-        <div>
-          <H5 mb={1}>{name}</H5>
-
-          <FlexBox alignItems="center" gap={1.25}>
-            <Rating size="small" value={rating} color="warn" readOnly />
-            <H6>{rating}</H6>
-            <Span>{getDateDifference(date)}</Span>
-          </FlexBox>
-        </div>
-      </FlexBox>
-
-      <Paragraph color="grey.700">{comment}</Paragraph>
-    </Box>
-  );
-}

package/src/pages/product-details/product-description.tsx

@@ -1,22 +0,0 @@
-"use client";
-
-import { H3 } from "@/components/_components/Typography";
-import { AttributeValue } from "@msdyn365-commerce/retail-proxy";
-
-type Props = { attributes: AttributeValue[] };
-
-export default function ProductDescription({ attributes }: Props) {
-  return (
-    <div>
-      <H3 mb={2}>Specifications:</H3>
-      {attributes?.map((attr, index) => {
-        if (attr?.TextValue && attr?.Name)
-          return (
-            <div key={index}>
-              {attr.Name}: {attr.TextValue}
-            </div>
-          );
-      })}
-    </div>
-  );
-}