@evenicanpm/storefront-core 1.0.0-alpha

package/src/components/Blocks/Components/Footer.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import React from "react";
+import { Box, Container, Typography } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import {
+  MdLocationOn as LocationOn,
+  MdPhone as Phone,
+  MdEmail as Email,
+} from "react-icons/md";
+import { useTheme } from "@mui/material/styles";
+import { FooterBlock } from "../interfaces";
+
+const contactItemSx = {
+  display: "flex",
+  alignItems: "center",
+};
+
+const Footer = (data: FooterBlock) => {
+  const theme = useTheme();
+  return (
+    <footer
+      style={{
+        backgroundColor: theme?.palette?.primary.main || "navy",
+        color: "#fff",
+        padding: "24px 0",
+        marginTop: "auto",
+      }}
+    >
+      <Container maxWidth="lg">
+        <Grid container spacing={3}>
+          <Grid size={{ xs: 12, sm: 6 }}>
+            <Typography variant="h4" gutterBottom>
+              {data?.companyName}
+            </Typography>
+            <Typography variant="body2">{data?.companyDescription}</Typography>
+          </Grid>
+          <Grid size={{ xs: 12, sm: 6 }}>
+            <Grid size={{ xs: 12, sm: 6 }}>
+              <Typography variant="h6" gutterBottom>
+                Contact Us
+              </Typography>
+
+              <Box sx={contactItemSx}>
+                <Typography variant="body2">
+                  <span style={{ paddingRight: "15px" }}>
+                    <LocationOn />
+                  </span>{" "}
+                  {data?.address}
+                </Typography>
+              </Box>
+
+              <Box sx={contactItemSx}>
+                <Typography variant="body2">
+                  <span style={{ paddingRight: "15px" }}>
+                    <Phone />
+                  </span>{" "}
+                  {data?.phoneNumber}
+                </Typography>
+              </Box>
+
+              <Box sx={contactItemSx}>
+                <Typography variant="body2">
+                  <span style={{ paddingRight: "15px" }}>
+                    <Email />
+                  </span>{" "}
+                  {data?.email}
+                </Typography>
+              </Box>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Container>
+    </footer>
+  );
+};
+export default Footer;

package/src/components/Blocks/Components/Hero.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import NextLink from "next/link";
+import Image from "next/image";
+import { Box, Container, Button, Typography } from "@mui/material";
+
+import cmsEndPoints from "@/cms/endpoints";
+import { HeroSectionBlock } from "../interfaces";
+
+const sxBanner = {
+  position: "relative",
+  backgroundColor: "white",
+  color: "white",
+  height: 500,
+  width: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  overflow: "hidden", // Ensure the image stays within the box
+  marginBottom: "50px",
+};
+
+const contentContainer = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  zIndex: 2, // text on top
+  textAlign: "center",
+  padding: "0 20px", // Padding for smaller screens
+};
+
+const Hero = ({
+  heading,
+  subheading,
+  buttonText,
+  backgroundImage,
+}: HeroSectionBlock) => {
+  const imageUrl = cmsEndPoints.buildCmsMediaUrl(backgroundImage?.url);
+
+  return (
+    <Box sx={sxBanner}>
+      {/* Background Image */}
+      <Image
+        src={imageUrl}
+        alt={heading}
+        fill
+        style={{ objectFit: "cover", objectPosition: "top" }}
+        priority
+      />
+      {/* Overlay Content */}
+      <Container sx={contentContainer}>
+        <Typography variant="h1" gutterBottom>
+          {heading}
+        </Typography>
+        <Typography variant="h5" gutterBottom sx={{ marginBottom: "30px" }}>
+          {subheading}
+        </Typography>
+        <NextLink href="products/women/tights" passHref>
+          <Button color="primary" size="large" variant="contained">
+            {buttonText}
+          </Button>
+        </NextLink>
+      </Container>
+    </Box>
+  );
+};
+
+export default Hero;

package/src/components/Blocks/Components/HeroCarousel/index.tsx

@@ -0,0 +1,42 @@
+// Template: Market1
+// This component works best with cutout product images
+import React from "react";
+import { Box, Container } from "@mui/material";
+
+// GLOBAL CUSTOM COMPONENTS
+import { Carousel } from "@/components/_components/carousel/index";
+import CarouselCard1 from "@/components/_components/carousel-cards/carousel-card-1/index";
+
+import { getImageUrl } from "@/cms/endpoints";
+import { HeroCarouselBlock, Slide } from "../../interfaces";
+
+export default function HeroCarousel(data: HeroCarouselBlock) {
+  return (
+    <Box sx={{ backgroundColor: "white" }}>
+      <Container className="pt-2 pb-2">
+        <Carousel slidesToShow={1} arrows={false} autoplay={true} dots>
+          {data.Slides.map((data: Slide, ind: number) => (
+            <CarouselCard1
+              key={ind}
+              title={data?.heading}
+              description={data?.description}
+              imgUrl={
+                data?.image?.formats
+                  ? getImageUrl(data?.image?.formats)
+                  : data?.image?.url
+              }
+              buttonText={data?.buttonText}
+              buttonLink={
+                data?.linkToPage?.slug
+                  ? `/pages/${data?.linkToPage?.slug}`
+                  : data?.linkToProduct?.sku
+                    ? `/product/${data?.linkToProduct?.sku}`
+                    : ""
+              }
+            />
+          ))}
+        </Carousel>
+      </Container>
+    </Box>
+  );
+}

package/src/components/Blocks/Components/Image.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import NextImage from "next/image";
+import { getImageUrl } from "@/cms/endpoints";
+import { sizes } from "@/cms/endpoints";
+import { Container, Paper } from "@mui/material";
+import { Media } from "../interfaces";
+
+interface Props {
+  media: Media;
+  size: sizes;
+  justify: "center" | "flex-start" | "flex-end";
+}
+
+const Image = ({ media, size, justify = "center" }: Props) => {
+  const imageUrl = media?.formats
+    ? getImageUrl(media?.formats, size)
+    : media?.url;
+
+  return (
+    <Container sx={{ display: "flex", justifyContent: justify }}>
+      <Paper
+        sx={{
+          position: "relative",
+          width: "100%",
+          height: media?.height ?? 300,
+        }}
+      >
+        <NextImage
+          src={imageUrl}
+          alt={media?.alternativeText || "image"}
+          fill
+          style={{ objectFit: "cover" }}
+        />
+      </Paper>
+    </Container>
+  );
+};
+
+export default Image;

package/src/components/Blocks/Components/MediaCard.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Image from "next/image";
+
+import cmsEndPoints from "@/cms/endpoints";
+
+interface Props {
+  name: string;
+  imgUrl: string;
+}
+
+export default function MediaCard({ name, imgUrl }: Props) {
+  return (
+    <Card sx={{ width: "100%" }}>
+      <Box
+        sx={{
+          position: "relative",
+          width: "100%",
+          height: 200,
+        }}
+      >
+        <Image
+          src={cmsEndPoints.buildCmsMediaUrl(imgUrl)}
+          alt={name}
+          fill
+          sizes="200px"
+          style={{ objectFit: "contain" }}
+          priority
+        />
+      </Box>
+      <CardContent>
+        <Typography gutterBottom component="div">
+          {name}
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/Blocks/Components/ProductCarousel/index.tsx

@@ -0,0 +1,82 @@
+// Template: Market1
+import React from "react";
+
+// Custom Icon Component
+import { Light } from "../../Icons/index";
+import { Box } from "@mui/system";
+
+// Global Custom Components
+import { Carousel } from "@/components/_components/carousel/index";
+import { SectionCreator } from "@/components/_components/section-header/index";
+import ProductCard1 from "@/components/_components/product-cards/product-card-1/index";
+
+// @/cms
+import { getImageUrl } from "@/cms/endpoints";
+
+// API
+import getProductByIds from "@/services/product/queries/get-product-by-ids";
+import { getQueryClient } from "@/services/get-query-client";
+import { SimpleProduct } from "@msdyn365-commerce/retail-proxy";
+
+import { Product, ProductCarouselBlock } from "../../interfaces";
+
+type CombinedProduct = Product & SimpleProduct;
+
+export default async function ProductCarousel(data: ProductCarouselBlock) {
+  const queryClient = getQueryClient();
+  const e4Products = await getProductByIds.fetchData(queryClient, {
+    id: data?.products?.map((product: Product) => product.sku),
+  });
+
+  if (!(e4Products && e4Products.length)) {
+    return null;
+  }
+
+  // join data
+  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 (
+    <>
+      <SectionCreator icon={<Light color="primary" />} title={data?.heading}>
+        <Carousel responsive={responsive} height={445} autoplay={true}>
+          {combinedData?.map((item: CombinedProduct) => (
+            <Box pb={0.6} key={item.id}>
+              <ProductCard1
+                id={item?.RecordId}
+                slug={item?.ItemId ?? ""}
+                title={item?.Name ?? ""}
+                price={item?.Price}
+                rating={0}
+                imgUrl={getImageUrl(item?.image?.[0]?.formats ?? {})}
+                discount={0}
+                //uom={item?.uom?.nodes[0].id}
+              />
+            </Box>
+          ))}
+        </Carousel>
+      </SectionCreator>
+    </>
+  );
+}

package/src/components/Blocks/Components/ProductSectionFullWidth/index.tsx

@@ -0,0 +1,103 @@
+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 "@/components/_components/HoverBox";
+import { H4 } from "@/components/_components/Typography";
+import BazaarCard from "@/components/_components/BazaarCard";
+import { SectionCreator } from "@/components/_components/section-header/index";
+
+// 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 (
+    <SectionCreator icon={<Icon />} title={data.heading} seeMoreLink="#">
+      {/* 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>
+    </SectionCreator>
+  );
+}

package/src/components/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/components/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/components/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/components/Blocks/Components/Services/service-card.tsx

@@ -0,0 +1,70 @@
+"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 "@/components/_components/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/components/Blocks/Components/shared/featured-product-card.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+// GLOBAL CUSTOM COMPONENTS
+import HoverBox from "@/components/_components/HoverBox";
+import { H4 } from "@/components/_components/Typography";
+import Image from "@/components/Shared/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>
+  );
+}