@evenicanpm/storefront-core 1.0.2 → 1.0.4

package/src/cms/blocks/Components/ProductCarousel/index.tsx

@@ -0,0 +1,88 @@
+"use client";
+import React from "react";
+import { Light } from "../../Icons/index";
+import { Box } from "@mui/system";
+import { Carousel } from "@evenicanpm/storefront-core/src/components-v2/carousel/index";
+import { Section } from "@evenicanpm/storefront-core/src/components-v2/section";
+
+// CMS
+import ProductCard from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card/product-card";
+import { getImageUrl } from "@/cms/endpoints";
+import getProductByIds from "@/services/product/queries/get-product-by-ids";
+import { SimpleProduct } from "@msdyn365-commerce/retail-proxy";
+import { Product, ProductCarouselBlock } from "../../interfaces";
+
+type CombinedProduct = Product & SimpleProduct;
+
+export default function ProductCarousel(data: ProductCarouselBlock) {
+  const { data: e4Products = [], error } = getProductByIds.useData({
+    id: data?.products?.map((product: Product) => product.sku),
+  });
+
+  if (error || !e4Products.length) {
+    return null;
+  }
+
+  const combinedData: CombinedProduct[] = data?.products
+    ?.map((product: Product) => {
+      const e4Product = e4Products?.find(
+        (e4Product: SimpleProduct) => product.sku === e4Product.ItemId,
+      );
+      if (!e4Product) return null;
+      return {
+        ...e4Product,
+        ...product,
+        id: e4Product.RecordId,
+      };
+    })
+    .filter(Boolean) as CombinedProduct[];
+
+  const responsive = [
+    { breakpoint: 3000, settings: { slidesToShow: 4 } },
+    { breakpoint: 1279, settings: { slidesToShow: 4 } },
+    { breakpoint: 959, settings: { slidesToShow: 3 } },
+    { breakpoint: 650, settings: { slidesToShow: 2 } },
+    { breakpoint: 500, settings: { slidesToShow: 1 } },
+  ];
+
+  return (
+    <Section>
+      <Section.Header>
+        <Section.Header.Title
+          icon={<Light color="primary" />}
+          title={data?.heading}
+        />
+      </Section.Header>
+      <Carousel responsive={responsive} height={445} autoplay={true}>
+        {combinedData?.map((item: CombinedProduct) => (
+          <Box pb={0.6} key={item.id}>
+            <ProductCard
+              product={{
+                id: item?.RecordId,
+                title: item?.Name ?? "",
+                price: item?.Price,
+                rating: 0,
+                imgUrl: getImageUrl(item?.image?.[0]?.formats ?? {}),
+                discount: 0,
+                slug: item?.ItemId ?? "",
+              }}
+            >
+              <ProductCard.Image />
+              <ProductCard.Body>
+                <ProductCard.Info>
+                  <ProductCard.Title />
+                  <ProductCard.Rating />
+                  <ProductCard.Price />
+                </ProductCard.Info>
+                <ProductCard.Actions>
+                  <ProductCard.QuantityButtons />
+                  <ProductCard.HoverActions />
+                </ProductCard.Actions>
+              </ProductCard.Body>
+            </ProductCard>
+          </Box>
+        ))}
+      </Carousel>
+    </Section>
+  );
+}

package/src/cms/blocks/Components/ProductSectionFullWidth/index.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import NextLink from "next/link";
+import Image from "next/image";
+
+// Icons
+import { getIcon } from "../../Icons/index";
+
+// Components
+import Grid from "@mui/material/Grid2";
+import HoverBox from "@evenicanpm/storefront-core/src/components-v2/HoverBox";
+import { H4 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
+import { Section } from "@evenicanpm/storefront-core/src/components-v2/section";
+
+// Utils
+import { currency } from "@/lib/lib";
+import { getImageUrl } from "@/cms/endpoints";
+
+// API
+import getProductByIds from "@/services/product/queries/get-product-by-ids";
+import { getQueryClient } from "@/services/get-query-client";
+import buildDetailUrl from "@/lib/build-detail-url";
+
+import {
+  Product,
+  ProductSectionFullWidthBlock,
+  ProductWrapper,
+} from "../../interfaces";
+import { SimpleProduct } from "@msdyn365-commerce/retail-proxy";
+
+type CombinedProduct = Product & SimpleProduct;
+export default async function ProductSectionFullWidth(
+  data: ProductSectionFullWidthBlock,
+) {
+  const queryClient = getQueryClient();
+
+  const skus = data?.ProductWrapper?.map((element) => element?.product?.sku);
+
+  const e4Products = await getProductByIds.fetchData(queryClient, { id: skus });
+
+  if (!(e4Products && e4Products.length)) {
+    return null;
+  }
+
+  const productData: CombinedProduct[] = data?.ProductWrapper?.map(
+    (Product: ProductWrapper) => {
+      const e4Product = e4Products?.find(
+        (e4Product: SimpleProduct) => Product.product.sku === e4Product.ItemId,
+      );
+      if (!e4Product) return null;
+      return {
+        ...e4Product,
+        ...Product.product,
+        id: e4Product?.RecordId,
+      };
+    },
+  ).filter(Boolean) as CombinedProduct[];
+
+  const Icon = getIcon(data?.icon);
+
+  return (
+    <Section>
+      <Section.Header>
+        <Section.Header.Title title={data.heading} icon={<Icon />} />
+        <Section.Header.SeeMoreLink link="#" />
+      </Section.Header>
+      {/* seeMoreLink should be updated when general product page is built */}
+      <BazaarCard sx={{ padding: "20px" }}>
+        <Grid container spacing={3}>
+          {productData?.map((product, i) => (
+            <Grid
+              size={{ lg: 2, md: 3, sm: 4, xs: 6 }}
+              key={(product.RecordId ?? 0) + i}
+            >
+              <NextLink
+                href={buildDetailUrl(
+                  product?.Name ?? "",
+                  product?.RecordId ?? 0,
+                )}
+                style={{ textDecoration: "none" }}
+                passHref
+              >
+                <HoverBox borderRadius={2} mb={1}>
+                  <Image
+                    src={getImageUrl(product?.image?.[0]?.formats ?? {})}
+                    alt={product.Name ?? "Product"}
+                    width={180}
+                    height={180}
+                    style={{ objectFit: "cover", borderRadius: "8px" }}
+                  />
+                </HoverBox>
+
+                <H4 fontSize={14} mb={0.5} color="black">
+                  {product.Name}
+                </H4>
+
+                <H4 fontSize={14} color="primary.main">
+                  {currency(product.Price ?? 0)}
+                </H4>
+              </NextLink>
+            </Grid>
+          ))}
+        </Grid>
+      </BazaarCard>
+    </Section>
+  );
+}

package/src/cms/blocks/Components/RichText.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import React from "react";
+import Markdown from "marked-react";
+import { Container } from "@mui/material";
+
+interface Props {
+  content: string;
+}
+
+const RichText = ({ content }: Props) => {
+  return (
+    <Container>
+      <Markdown>{content}</Markdown>
+    </Container>
+  );
+};
+
+export default RichText;

package/src/cms/blocks/Components/Seo/index.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import cmsEndPoints from "@/cms/endpoints";
+import { Helmet } from "react-helmet-async";
+import { MetaItem, SeoPageData } from "../../interfaces";
+
+// SEO Component to be populated
+// Included in storefront repo to ensure correct import of react-helmet-async,
+const Seo = (pageData: SeoPageData) => {
+  return (
+    <Helmet>
+      <title>{pageData?.title}</title>
+      <meta name="description" content={pageData?.seo?.metaDescription} />
+      <meta name="title" content={pageData?.seo?.metaTitle} />
+      <meta name="keywords" content={pageData?.seo?.metaKeywords} />
+      <meta
+        property="og:title"
+        content={pageData?.seo?.metaTitle}
+        key="og:title"
+      />
+      <meta
+        property="og:description"
+        content={pageData?.seo?.metaDescription}
+        key="og:description"
+      />
+      <meta
+        property="og:image"
+        content={cmsEndPoints.buildCmsMediaUrl(
+          pageData?.seo?.metaImage?.media?.data?.attributes?.url,
+        )}
+        key="og:image"
+      />
+      {pageData?.seo?.preventIndexing && (
+        <>
+          <meta name="robots" content="noindex"></meta>
+          <meta name="googlebot" content="noindex"></meta>
+        </>
+      )}
+      {pageData?.seo?.meta?.map((metaItem: MetaItem, i: number) => (
+        <meta name={metaItem.name} key={i} content={metaItem.content} />
+      ))}
+      <script type="application/ld+json">
+        {JSON.stringify(pageData?.seo?.structuredData)}
+      </script>
+    </Helmet>
+  );
+};
+
+export default Seo;

package/src/cms/blocks/Components/Services/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import Grid from "@mui/material/Grid2";
+import Container from "@mui/material/Container";
+// LOCAL CUSTOM COMPONENTS
+import ServiceCard from "./service-card";
+import {
+  ServicesBlock,
+  ServiceCard as ServiceCardItem,
+} from "../../interfaces";
+
+export default function Services(data: ServicesBlock) {
+  return (
+    <Container sx={{ marginBottom: "80px", marginTop: "80px" }}>
+      <Grid container spacing={3}>
+        {data?.Services_Card.map((item: ServiceCardItem, i: number) => (
+          <ServiceCard key={item.title + i} service={item} />
+        ))}
+      </Grid>
+    </Container>
+  );
+}

package/src/cms/blocks/Components/Services/service-card.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import React from "react";
+import Fab from "@mui/material/Fab";
+import Grid from "@mui/material/Grid2";
+import Card from "@mui/material/Card";
+import styled from "@mui/material/styles/styled";
+
+// CUSTOM ICON COMPONENTS
+import { getIcon } from "../../Icons/index";
+
+// GLOBAL CUSTOM COMPONENTS
+import {
+  H4,
+  Span,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+
+// CUSTOM DATA MODEL
+interface Service {
+  icon: string;
+  title: string;
+  description?: string;
+}
+
+// STYLED COMPONENTS
+const StyledFab = styled(Fab)(({ theme }) => ({
+  width: 64,
+  height: 64,
+  fontSize: "1.75rem",
+  boxShadow: theme.shadows[0],
+  backgroundColor: theme.palette.grey[200],
+  zIndex: 5,
+}));
+
+const StyledCard = styled(Card)(({ theme }) => ({
+  padding: "1.5rem",
+  //height: "100%",
+  display: "flex",
+  borderRadius: "8px",
+  alignItems: "center",
+  flexDirection: "column",
+  transition: "all 300ms ease-out",
+  ":hover": { boxShadow: theme.shadows[2] },
+}));
+
+// ==================================================
+type Props = { service: Service };
+// ==================================================
+
+export default function ServiceCard({ service }: Props) {
+  const { icon, title, description } = service;
+
+  const Icon = getIcon(icon);
+
+  return (
+    <Grid size={{ lg: 3, sm: 6, xs: 12 }} sx={{ height: 220 }}>
+      <StyledCard>
+        <StyledFab>
+          <Icon fontSize="inherit" />
+        </StyledFab>
+
+        <H4 mt={2.5} mb={1.25} textAlign="center" fontWeight={400}>
+          {title}
+        </H4>
+
+        <Span textAlign="center" color="grey.600" fontSize={14}>
+          {description ||
+            "We offer competitive prices on our 100 million plus product any range."}
+        </Span>
+      </StyledCard>
+    </Grid>
+  );
+}

package/src/cms/blocks/Components/shared/featured-product-card.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+// GLOBAL CUSTOM COMPONENTS
+import HoverBox from "@evenicanpm/storefront-core/src/components-v2/HoverBox";
+import { H4 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import Image from "@evenicanpm/storefront-core/src/components-v2/Image";
+
+// ==========================================================
+type Props = { title: string; imgUrl: string };
+// ==========================================================
+
+export default function FeaturedProductCard({ imgUrl, title }: Props) {
+  return (
+    <div>
+      <HoverBox borderRadius="5px" mb={1}>
+        <Image
+          alt={title}
+          width={831}
+          height={546}
+          src={imgUrl}
+          style={{ objectFit: "cover" }}
+        />
+      </HoverBox>
+
+      <H4 fontSize={14} color={"black"} sx={{ marginBottom: 0 }}>
+        {title}
+      </H4>
+    </div>
+  );
+}

package/src/cms/blocks/Components/shared/product-category-item.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { HtmlHTMLAttributes } from "react";
+import { styled, SxProps, Theme } from "@mui/material/styles";
+// GLOBAL CUSTOM COMPONENTS
+import { H4 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
+import BazaarImage from "@evenicanpm/storefront-core/src/components-v2/BazaarImage";
+
+// STYLED COMPONENT
+const StyledBazaarCard = styled(BazaarCard)(({ theme }) => ({
+  gap: "1rem",
+  display: "flex",
+  borderRadius: 5,
+  cursor: "pointer",
+  alignItems: "center",
+  padding: "0.75rem 1rem",
+  "&:hover": { boxShadow: theme.shadows[2] },
+}));
+
+// ==============================================================================
+interface Props extends HtmlHTMLAttributes<HTMLElement> {
+  title: string;
+  imgUrl?: string;
+  sx?: SxProps<Theme>;
+  isSelected?: boolean;
+}
+// ==============================================================================
+
+export default function ProductCategoryItem({
+  title,
+  imgUrl,
+  isSelected,
+  sx = {},
+  ...others
+}: Props) {
+  return (
+    <StyledBazaarCard
+      elevation={isSelected ? 2 : 0}
+      sx={{ bgcolor: isSelected ? "white" : "grey.100", ...sx }}
+      {...others}
+    >
+      {imgUrl && <BazaarImage alt="" width={30} src={imgUrl} />}
+
+      <H4 lineHeight="1" textTransform="capitalize" ellipsis>
+        {title}
+      </H4>
+    </StyledBazaarCard>
+  );
+}

package/src/cms/blocks/Components/shared/product-grid.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+// GLOBAL CUSTOM COMPONENTS
+import { Section } from "@evenicanpm/storefront-core/src/components-v2/section";
+import ProductCard from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card/index";
+// CUSTOM DATA MODEL
+
+interface Product {
+  id: number;
+  title: string;
+  price: number;
+  rating: number;
+  thumbnail: string;
+  discount?: number;
+  slug: string;
+  uom: string;
+}
+
+type Props = { products: Product[]; heading: string };
+
+export default function ProductGridList({ products, heading }: Props) {
+  return (
+    <Box flex="1 1 0">
+      <Section>
+        <Section.Header>
+          <Section.Header.Title title={heading} />
+          <Section.Header.SeeMoreLink link="#" />
+        </Section.Header>
+        <Grid container spacing={3}>
+          {products.map((item) => (
+            <Grid size={{ lg: 4, sm: 6, xs: 12 }} key={item.id}>
+              <ProductCard
+                product={{
+                  id: item?.id,
+                  title: item?.title ?? "",
+                  price: item?.price,
+                  rating: item.rating ?? 0,
+                  imgUrl: item.thumbnail ?? "",
+                  discount: item.discount ?? 0,
+                  slug: item?.slug ?? "",
+                }}
+              >
+                <ProductCard.Image />
+                <ProductCard.Body>
+                  <ProductCard.Info>
+                    <ProductCard.Title />
+                    <ProductCard.Rating />
+                    <ProductCard.Price />
+                  </ProductCard.Info>
+                  <ProductCard.Actions>
+                    <ProductCard.QuantityButtons />
+                    <ProductCard.HoverActions />
+                  </ProductCard.Actions>
+                </ProductCard.Body>
+              </ProductCard>
+            </Grid>
+          ))}
+        </Grid>
+      </Section>
+    </Box>
+  );
+}

package/src/cms/blocks/Components/shared/top-categories-card.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+
+import Card from "@mui/material/Card";
+import Chip from "@mui/material/Chip";
+import styled from "@mui/material/styles/styled";
+import Image from "@evenicanpm/storefront-core/src/components-v2/Image";
+// GLOBAL CUSTOM COMPONENTS
+import HoverBox from "@evenicanpm/storefront-core/src/components-v2/HoverBox";
+import { lightOrDarkText } from "@/lib/hexToLuma";
+import { useTheme } from "@mui/material/styles";
+
+// STYLED COMPONENT
+const StyledChip = styled(Chip)({
+  zIndex: 2,
+  top: "0.875rem",
+  fontSize: "10px",
+  padding: "0 8px",
+  fontWeight: "600",
+  position: "absolute",
+});
+
+// ========================================================
+interface Props {
+  title: string;
+  imgUrl: string;
+  subtitle: string;
+}
+// ========================================================
+
+export default function TopCategoriesCard({ title, subtitle, imgUrl }: Props) {
+  const theme = useTheme();
+  const color = theme.palette.secondary.main;
+  return (
+    <Card sx={{ position: "relative" }}>
+      <StyledChip
+        size="small"
+        label={title}
+        color="secondary"
+        sx={{
+          backgroundColor: "secondary.main",
+          left: 12,
+          color: lightOrDarkText(color),
+        }}
+      />
+
+      <StyledChip
+        color="default"
+        label={subtitle}
+        size="small"
+        sx={{ right: 12 }}
+      />
+
+      <HoverBox borderRadius={2}>
+        <Image
+          src={imgUrl}
+          width={1035}
+          height={348}
+          alt={title}
+          sx={{
+            objectFit: "cover",
+          }}
+        />
+      </HoverBox>
+    </Card>
+  );
+}

package/src/cms/blocks/Components/shared/top-rating-product-card.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import Rating from "@mui/material/Rating";
+// GLOBAL CUSTOM COMPONENTS
+import HoverBox from "@evenicanpm/storefront-core/src/components-v2/HoverBox";
+import Image from "@evenicanpm/storefront-core/src/components-v2/Image";
+import {
+  H4,
+  Small,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { FlexRowCenter } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+// CUSTOM UTILS LIBRARY FUNCTION
+import { currency } from "@/lib/lib";
+
+// ======================================================
+interface Props {
+  price: number;
+  title: string;
+  imgUrl: string;
+  rating: number;
+  reviewCount?: number;
+}
+// ======================================================
+
+export default function TopRatingProductCard(props: Props) {
+  const { title, price, imgUrl, rating = 5, reviewCount = 10 } = props;
+
+  return (
+    <div>
+      <HoverBox mb={2} mx="auto" borderRadius={2}>
+        <Image
+          alt={title}
+          width={380}
+          height={380}
+          src={imgUrl}
+          style={{ objectFit: "cover", objectPosition: "center center" }}
+        />
+      </HoverBox>
+
+      <FlexRowCenter>
+        <Rating
+          size="small"
+          value={rating}
+          color="warn"
+          readOnly
+          sx={{ fontSize: 12 }}
+        />
+        <Small fontWeight={600} style={{ color: "black" }}>
+          ({reviewCount})
+        </Small>
+      </FlexRowCenter>
+
+      <H4 fontSize={14} textAlign="center" title={title} ellipsis color="black">
+        {title}
+      </H4>
+
+      <H4
+        fontSize={14}
+        textAlign="center"
+        color="primary.main"
+        sx={{ marginBottom: 0 }}
+      >
+        {currency(price)}
+      </H4>
+    </div>
+  );
+}

package/src/cms/blocks/Icons/Components/Category.tsx

@@ -0,0 +1,14 @@
+"use client";
+import { OverridableComponent } from "@mui/material/OverridableComponent";
+import React from "react";
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+import { SvgIconTypeMap } from "@mui/material/SvgIcon";
+
+const Category: OverridableComponent<SvgIconTypeMap> = createSvgIcon(
+  <svg fill="currentColor" viewBox="0 0 64 64">
+    <path d="m29 11v14a4 4 0 0 1 -4 4h-14a4 4 0 0 1 -4-4v-14a4 4 0 0 1 4-4h14a4 4 0 0 1 4 4zm24-4h-14a4 4 0 0 0 -4 4v14a4 4 0 0 0 4 4h14a4 4 0 0 0 4-4v-14a4 4 0 0 0 -4-4zm-28 28h-14a4 4 0 0 0 -4 4v14a4 4 0 0 0 4 4h14a4 4 0 0 0 4-4v-14a4 4 0 0 0 -4-4zm21 0a11 11 0 1 0 11 11 11 11 0 0 0 -11-11z" />
+  </svg>,
+  "Category",
+);
+
+export default Category;