@evenicanpm/storefront-core 1.1.0 → 1.2.0

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,97 +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 "@evenicanpm/storefront-core/src/components/_components/Typography";
-import {
-  FlexBox,
-  FlexRowCenter,
-} from "@evenicanpm/storefront-core/src/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,63 +0,0 @@
-import Link from "next/link";
-import Box from "@mui/material/Box";
-// GLOBAL CUSTOM COMPONENTS
-import HoverBox from "@evenicanpm/storefront-core/src/components/_components/HoverBox";
-import LazyImage from "@evenicanpm/storefront-core/src/components/_components/LazyImage";
-import BazaarCard from "@evenicanpm/storefront-core/src/components/_components/BazaarCard";
-import {
-  H6,
-  Span,
-} from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import FlexBox from "@evenicanpm/storefront-core/src/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,49 +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 "@evenicanpm/storefront-core/src/components/_components/flex-box";
-import {
-  H5,
-  H6,
-  Paragraph,
-  Span,
-} from "@evenicanpm/storefront-core/src/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 "@evenicanpm/storefront-core/src/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>
-  );
-}

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

@@ -1,265 +0,0 @@
-"use client";
-
-import { Fragment, useState } from "react";
-// MUI
-import Box from "@mui/material/Box";
-import Rating from "@mui/material/Rating";
-import Divider from "@mui/material/Divider";
-import Collapse from "@mui/material/Collapse";
-import TextField from "@mui/material/TextField";
-import FormGroup from "@mui/material/FormGroup";
-// LOCAL CUSTOM COMPONENTS
-import CheckboxLabel from "./checkbox-label";
-// GLOBAL CUSTOM COMPONENTS
-import {
-  FlexBetween,
-  FlexBox,
-} from "@evenicanpm/storefront-core/src/components/_components/flex-box";
-import {
-  H5,
-  H6,
-  Paragraph,
-  Span,
-} from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import AccordionHeader from "@evenicanpm/storefront-core/src/components/_components/accordion/accordion-header";
-// TYPE
-import {
-  ProductFilterKeys,
-  ProductFilterValues,
-  ProductFilters,
-} from "./types";
-import { Slider } from "@mui/material";
-
-// FILTER OPTIONS
-const categoryList = [
-  {
-    title: "Bath Preparations",
-    subCategories: ["Bubble Bath", "Bath Capsules", "Others"],
-  },
-  { title: "Eye Makeup Preparations" },
-  { title: "Fragrance" },
-  { title: "Hair Preparations" },
-];
-
-const BRANDS = [
-  { label: "Mac", value: "mac" },
-  { label: "Karts", value: "karts" },
-  { label: "Baals", value: "baals" },
-  { label: "Bukks", value: "bukks" },
-  { label: "Luasis", value: "luasis" },
-];
-
-const OTHERS = [
-  { label: "On Sale", value: "sale" },
-  { label: "In Stock", value: "stock" },
-  { label: "Featured", value: "featured" },
-];
-
-const colorList = [
-  "#1C1C1C",
-  "#FF7A7A",
-  "#FFC672",
-  "#84FFB5",
-  "#70F6FF",
-  "#6B7AFF",
-];
-
-// ============================================================================
-interface Props {
-  filters: ProductFilters;
-  changeFilters: (key: ProductFilterKeys, values: ProductFilterValues) => void;
-}
-// ============================================================================
-
-export default function ProductFilterCard({ filters, changeFilters }: Props) {
-  const [collapsed, setCollapsed] = useState(true);
-
-  const handleChangePrice = (values: number[]) => {
-    changeFilters("price", values);
-  };
-
-  const handleChangeColor = (value: string) => {
-    const values = filters.color.includes(value)
-      ? filters.color.filter((item) => item !== value)
-      : [...filters.color, value];
-
-    changeFilters("color", values);
-  };
-
-  const handleChangeBrand = (value: string) => {
-    const values = filters.brand.includes(value)
-      ? filters.brand.filter((item) => item !== value)
-      : [...filters.brand, value];
-
-    changeFilters("brand", values);
-  };
-
-  const handleChangeSales = (value: string) => {
-    const values = filters.sales.includes(value)
-      ? filters.sales.filter((item) => item !== value)
-      : [...filters.sales, value];
-
-    changeFilters("sales", values);
-  };
-
-  const handleChangeRating = (value: number) => {
-    changeFilters("rating", value);
-  };
-
-  return (
-    <div>
-      {/* CATEGORY VARIANT FILTER */}
-      <H6 mb={1.25}>Categories</H6>
-      {categoryList.map((item) =>
-        item.subCategories ? (
-          <Fragment key={item.title}>
-            <AccordionHeader
-              open={collapsed}
-              onClick={() => setCollapsed((state) => !state)}
-              sx={{ padding: ".5rem 0", cursor: "pointer", color: "grey.600" }}
-            >
-              <Span>{item.title}</Span>
-            </AccordionHeader>
-
-            <Collapse in={collapsed}>
-              {item.subCategories.map((name) => (
-                <Paragraph
-                  pl="22px"
-                  py={0.75}
-                  key={name}
-                  fontSize="14px"
-                  color="grey.600"
-                  sx={{ cursor: "pointer" }}
-                >
-                  {name}
-                </Paragraph>
-              ))}
-            </Collapse>
-          </Fragment>
-        ) : (
-          <Paragraph
-            key={item.title}
-            sx={{
-              py: 0.75,
-              fontSize: 14,
-              cursor: "pointer",
-              color: "grey.600",
-            }}
-          >
-            {item.title}
-          </Paragraph>
-        ),
-      )}
-
-      <Box component={Divider} my={3} />
-
-      {/* PRICE VARIANT FILTER */}
-      <H6 mb={2}>Price Range</H6>
-
-      <Slider
-        min={0}
-        max={300}
-        size="small"
-        value={filters.price}
-        valueLabelDisplay="auto"
-        valueLabelFormat={(v) => `$${v}`}
-        onChange={(_, v) => handleChangePrice(v as number[])}
-      />
-      <FlexBetween>
-        <TextField
-          fullWidth
-          size="small"
-          type="number"
-          placeholder="0"
-          value={filters.price[0]}
-          onChange={(e) =>
-            handleChangePrice([+e.target.value, filters.price[1]])
-          }
-        />
-
-        <H5 color="grey.600" px={1}>
-          -
-        </H5>
-
-        <TextField
-          fullWidth
-          size="small"
-          type="number"
-          placeholder="250"
-          value={filters.price[1]}
-          onChange={(e) =>
-            handleChangePrice([filters.price[0], +e.target.value])
-          }
-        />
-      </FlexBetween>
-
-      <Box component={Divider} my={3} />
-
-      {/* BRAND VARIANT FILTER */}
-      <H6 mb={2}>Brands</H6>
-      <FormGroup>
-        {BRANDS.map(({ label, value }) => (
-          <CheckboxLabel
-            key={value}
-            label={label}
-            checked={filters.brand.includes(value)}
-            onChange={() => handleChangeBrand(value)}
-          />
-        ))}
-      </FormGroup>
-
-      <Box component={Divider} my={3} />
-
-      {/* SALES OPTIONS */}
-      <FormGroup>
-        {OTHERS.map(({ label, value }) => (
-          <CheckboxLabel
-            key={value}
-            label={label}
-            checked={filters.sales.includes(value)}
-            onChange={() => handleChangeSales(value)}
-          />
-        ))}
-      </FormGroup>
-
-      <Box component={Divider} my={3} />
-
-      {/* RATINGS FILTER */}
-      <H6 mb={2}>Ratings</H6>
-      <FormGroup>
-        {[5, 4, 3, 2, 1].map((item) => (
-          <CheckboxLabel
-            key={item}
-            checked={filters.rating === item}
-            onChange={() => handleChangeRating(item)}
-            label={<Rating size="small" value={item} color="warn" readOnly />}
-          />
-        ))}
-      </FormGroup>
-
-      <Box component={Divider} my={3} />
-
-      {/* COLORS VARIANT FILTER */}
-      <H6 mb={2}>Colors</H6>
-      <FlexBox mb={2} flexWrap="wrap" gap={1.5}>
-        {colorList.map((item) => (
-          <Box
-            key={item}
-            width={25}
-            height={25}
-            flexShrink={0}
-            bgcolor={item}
-            borderRadius="50%"
-            onClick={() => handleChangeColor(item)}
-            sx={{
-              outlineOffset: 1,
-              cursor: "pointer",
-              outline: filters.color.includes(item) ? 1 : 0,
-              outlineColor: item,
-            }}
-          />
-        ))}
-      </FlexBox>
-    </div>
-  );
-}

package/src/pages/product-details/product-intro/product-intro-images.tsx

@@ -1,90 +0,0 @@
-"use client";
-import Grid from "@mui/material/Grid2";
-import Avatar from "@mui/material/Avatar";
-
-// GLOBAL CUSTOM COMPONENTS
-import {
-  FlexBox,
-  FlexRowCenter,
-} from "@evenicanpm/storefront-core/src/components/_components/flex-box";
-import ImageWithFallback from "@/components/ImageWithFallback";
-
-/**
- * Master product data comes in as prop, selected variant details are called
- * every render, if there is a valid variant id selected.
- */
-
-// ================================================================
-type Props = {
-  selectedImageIndex?: number;
-  primaryImageUrl: string;
-  handleImageClick: (ind: number) => () => void;
-  images: string[];
-  name: string | undefined;
-};
-
-// ================================================================
-
-export default function ProductImages({
-  name,
-  selectedImageIndex,
-  primaryImageUrl,
-  images,
-  handleImageClick,
-}: Props) {
-  return (
-    <>
-      <Grid size={{ md: 6, xs: 12 }} alignItems="center">
-        {/*MAIN IMAGE*/}
-        <FlexBox
-          borderRadius={3}
-          overflow="hidden"
-          justifyContent="center"
-          mb={6}
-        >
-          <ImageWithFallback
-            alt={name ?? "product"}
-            width={300}
-            height={300}
-            loading="eager"
-            src={
-              Array.isArray(images) &&
-              selectedImageIndex !== undefined &&
-              images[selectedImageIndex]
-                ? images[selectedImageIndex]
-                : primaryImageUrl
-            }
-            style={{ objectFit: "contain" }}
-          />
-        </FlexBox>
-
-        {/*THUMBNAIL IMAGES*/}
-        <FlexBox overflow="auto" gap={1} justifyContent="center">
-          {images?.map((url, ind) => (
-            <FlexRowCenter
-              key={ind}
-              width={64}
-              height={64}
-              minWidth={64}
-              bgcolor="white"
-              border="1px solid"
-              borderRadius="10px"
-              style={{ cursor: "pointer" }}
-              onClick={handleImageClick(ind)}
-              borderColor={
-                selectedImageIndex === ind ? "primary.main" : "grey.400"
-              }
-            >
-              <Avatar
-                alt="product"
-                src={url}
-                variant="square"
-                sx={{ height: 40 }}
-              />
-            </FlexRowCenter>
-          ))}
-        </FlexBox>
-      </Grid>
-    </>
-  );
-}