@evenicanpm/storefront-core 1.0.0 → 1.0.1

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

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

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

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

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

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

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

@@ -0,0 +1,257 @@
+"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 "@/components/_components/flex-box";
+import { H5, H6, Paragraph, Span } from "@/components/_components/Typography";
+import AccordionHeader from "@/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

@@ -0,0 +1,87 @@
+"use client";
+import Grid from "@mui/material/Grid2";
+import Avatar from "@mui/material/Avatar";
+
+// GLOBAL CUSTOM COMPONENTS
+import { FlexBox, FlexRowCenter } from "@/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>
+    </>
+  );
+}