@evenicanpm/storefront-core 1.0.2 → 1.0.4

package/src/pages-v2/product-details/bopis/store-card/shop-card.tsx

@@ -0,0 +1,121 @@
+import Card from "@mui/material/Card";
+
+import AccessTimeFilledIcon from "@mui/icons-material/AccessTimeFilled";
+import Place from "@mui/icons-material/Place";
+import InventoryIcon from "@mui/icons-material/Inventory";
+// GLOBAL CUSTOM COMPONENTS
+import {
+  H3,
+  Span,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import {
+  FlexBetween,
+  FlexBox,
+} from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+// STYLED COMPONENT
+import { ContentWrapper } from "./styles";
+import {
+  ProductWarehouseInventoryAvailability,
+  StoreHours,
+} from "@msdyn365-commerce/retail-proxy";
+import { buildStoreHours, IHoursDisplayInfo } from "@/lib/store-hours-helper";
+import { Box } from "@mui/system";
+import { convertSecondsToTime } from "./utils/convertSecondsToTime";
+import { getDaysResources } from "./utils/getDaysResources";
+
+type Props = {
+  name: string;
+  address: string;
+  actionArea: React.ReactNode;
+  openFrom: number;
+  openTo: number;
+  storeHours: StoreHours;
+  inventoryRecord: ProductWarehouseInventoryAvailability | undefined;
+};
+
+export default function ShopCard(props: Props) {
+  const { name, address, actionArea, openFrom, openTo, storeHours } =
+    props || {};
+
+  const resources = getDaysResources();
+
+  const renderStoreHours = () => {
+    if (storeHours?.RegularStoreHours) {
+      const storeHoursList: IHoursDisplayInfo[] = buildStoreHours(
+        storeHours.RegularStoreHours,
+        resources,
+      );
+      return (
+        <Box>
+          {storeHoursList.map((displayTime) => (
+            <Box key={JSON.stringify(displayTime)}>
+              {displayTime.endDayShort ? (
+                <Box>
+                  <Span>
+                    <abbr title={displayTime.startDayFull}>
+                      {displayTime.startDayShort}
+                    </abbr>
+                  </Span>
+                  –
+                  <Span>
+                    <abbr title={displayTime.endDayFull}>
+                      {displayTime.endDayShort}
+                    </abbr>
+                  </Span>
+                </Box>
+              ) : (
+                <Box>
+                  <Span>
+                    <abbr title={displayTime.startDayFull}>
+                      {displayTime.startDayShort}
+                    </abbr>
+                  </Span>
+                </Box>
+              )}
+              <Box>{displayTime.timeRange}</Box>
+            </Box>
+          ))}
+        </Box>
+      );
+    }
+    return (
+      <Span color="white">
+        {convertSecondsToTime(openFrom)} - {convertSecondsToTime(openTo)}
+      </Span>
+    );
+  };
+
+  return (
+    <Card sx={{ marginBottom: 2 }}>
+      <ContentWrapper img={""}>
+        <H3 fontWeight="600" mb={1}>
+          {name}
+        </H3>
+
+        <FlexBox mb={1} gap={1}>
+          <Place fontSize="small" sx={{ fontSize: 17, mt: "3px" }} />
+          <Span color="white">{address}</Span>
+        </FlexBox>
+
+        <FlexBox alignItems="center" gap={1}>
+          <AccessTimeFilledIcon
+            fontSize="small"
+            sx={{ fontSize: 17, mt: "3px" }}
+          />
+          {renderStoreHours()}
+        </FlexBox>
+
+        <FlexBox my={1} gap={1}>
+          <InventoryIcon fontSize="small" sx={{ fontSize: 17, mt: "3px" }} />
+          <Span color="white">
+            {props.inventoryRecord?.TotalAvailableInventoryLevelLabel}
+          </Span>
+        </FlexBox>
+      </ContentWrapper>
+
+      <FlexBetween pl={3} pr={1} justifyContent={"flex-end"}>
+        {actionArea}
+      </FlexBetween>
+    </Card>
+  );
+}

package/src/pages-v2/product-details/bopis/store-card/styles.ts

@@ -0,0 +1,33 @@
+"use client";
+
+import Avatar from "@mui/material/Avatar";
+import IconButton from "@mui/material/IconButton";
+import { alpha, styled } from "@mui/material/styles";
+
+// STYLED COMPONENT
+export const ContentWrapper = styled("div", {
+  shouldForwardProp: (prop) => prop !== "img",
+})<{ img: string }>(({ theme, img }) => ({
+  color: "white",
+  backgroundSize: "cover",
+  padding: "17px 30px 56px",
+  backgroundPosition: "center",
+  backgroundImage: `linear-gradient(to bottom,
+    ${alpha(theme.palette.grey[900], 0.8)}, ${alpha(theme.palette.grey[900], 0.8)}), 
+    url(${img})`,
+}));
+
+export const StyledAvatar = styled(Avatar)(({ theme }) => ({
+  width: 64,
+  height: 64,
+  marginTop: "-32px",
+  border: `3px solid ${theme.palette.grey[100]}`,
+}));
+
+export const StyledIconButton = styled(IconButton)(({ theme }) => ({
+  marginBlock: 4,
+  ".icon": {
+    fontSize: 19,
+    transform: theme.direction === "rtl" ? "180deg" : "0deg",
+  },
+}));

package/src/pages-v2/product-details/bopis/store-card/utils/convertSecondsToTime.ts

@@ -0,0 +1,8 @@
+export const convertSecondsToTime = (numberinSeconds: number) => {
+  return new Date(numberinSeconds * 1000).toLocaleTimeString("en-US", {
+    hour12: true,
+    hour: "2-digit",
+    minute: "2-digit",
+    timeZone: "UTC",
+  });
+};

package/src/pages-v2/product-details/bopis/store-card/utils/getDaysResources.ts

@@ -0,0 +1,25 @@
+import { IStoreSelectorLocationLineItemResources } from "@/lib/store-hours-helper";
+import { useTranslations } from "next-intl";
+
+export const getDaysResources = (): IStoreSelectorLocationLineItemResources => {
+  const daysTrans = useTranslations("StoreHours");
+  return {
+    days: {
+      monday: daysTrans("mon"),
+      tuesday: daysTrans("tue"),
+      wednesday: daysTrans("wed"),
+      thursday: daysTrans("thu"),
+      friday: daysTrans("fri"),
+      saturday: daysTrans("sat"),
+      sunday: daysTrans("sun"),
+      mondayFull: daysTrans("monday"),
+      tuesdayFull: daysTrans("tuesday"),
+      wednesdayFull: daysTrans("wednesday"),
+      thursdayFull: daysTrans("thursday"),
+      fridayFull: daysTrans("friday"),
+      saturdayFull: daysTrans("saturday"),
+      sundayFull: daysTrans("sunday"),
+    },
+    closedText: daysTrans("closed"),
+  };
+};

package/src/pages-v2/product-details/checkbox-label.tsx

@@ -0,0 +1,20 @@
+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-v2/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-v2/product-details/frequently-bought.tsx

@@ -0,0 +1,97 @@
+"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-v2/Typography";
+import {
+  FlexBox,
+  FlexRowCenter,
+} from "@evenicanpm/storefront-core/src/components-v2/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-v2/product-details/frequently-product-card.tsx

@@ -0,0 +1,63 @@
+import Link from "next/link";
+import Box from "@mui/material/Box";
+// GLOBAL CUSTOM COMPONENTS
+import HoverBox from "@evenicanpm/storefront-core/src/components-v2/HoverBox";
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
+import {
+  H6,
+  Span,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/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-v2/product-details/product-comment.tsx

@@ -0,0 +1,49 @@
+"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-v2/flex-box";
+import {
+  H5,
+  H6,
+  Paragraph,
+  Span,
+} from "@evenicanpm/storefront-core/src/components-v2/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-v2/product-details/product-description.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { H3 } from "@evenicanpm/storefront-core/src/components-v2/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>
+  );
+}