@evenicanpm/storefront-core 1.0.2 → 1.0.3

package/src/cms/blocks/Components/Footer/sections/FooterLinks.tsx

@@ -0,0 +1,30 @@
+import React, { Fragment } from "react";
+import { Heading, StyledLink } from "../styles/index";
+import { Box } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import { Link } from "../interfaces";
+
+interface Props {
+  isDark?: boolean;
+  title?: string;
+  links?: Link[];
+}
+
+const Links = (props: Props) => {
+  return (
+    <Grid size={{ lg: 3, md: 6, sm: 6, xs: 12 }}>
+      <Heading>{props.title}</Heading>
+      <Box>
+        {props?.links?.map((item, ind) => (
+          <Fragment key={ind}>
+            <StyledLink isDark={props.isDark} href={`pages/${item.slug}`}>
+              {item.title}
+            </StyledLink>
+          </Fragment>
+        ))}
+      </Box>
+    </Grid>
+  );
+};
+
+export default Links;

package/src/cms/blocks/Components/Footer/sections/FooterLogo.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import React from "react";
+import Grid from "@mui/material/Grid2";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import SiteLogo from "@evenicanpm/storefront-core/src/components-v2/site-logo";
+import useTheme from "@mui/material/styles/useTheme";
+import useMediaQuery from "@mui/material/useMediaQuery";
+
+interface Props {
+  description: string;
+}
+
+export default function LogoSection(props: Props) {
+  const theme = useTheme();
+  const downMd = useMediaQuery(theme.breakpoints.down(1150)); // same like in header
+  return (
+    <Grid size={{ lg: 3, md: 6, sm: 6, xs: 12 }}>
+      <SiteLogo {...(downMd ? { height: "2.125rem" } : {})} />
+
+      <Paragraph mb={2.5} color="grey.500">
+        {props.description}
+      </Paragraph>
+    </Grid>
+  );
+}

package/src/cms/blocks/Components/Footer/sections/FooterSocialLinks.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import React from "react";
+import IconButton from "@mui/material/IconButton";
+import styled from "@mui/material/styles/styled";
+
+// Social Icons
+import { MdFacebook as Facebook } from "react-icons/md";
+import { FaGoogle as Google } from "react-icons/fa";
+import { FaTwitter as Twitter } from "react-icons/fa";
+import { FaInstagram as Instagram } from "react-icons/fa";
+
+// Custom Components
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+import { SocialLink } from "../interfaces";
+
+// Styled Components
+const StyledIconButton = styled(IconButton, {
+  shouldForwardProp: (prop) => prop !== "variant",
+})<Props>(({ variant, theme }) => ({
+  margin: 4,
+  fontSize: 12,
+  padding: "10px",
+  ...(variant === "light" && {
+    backgroundColor: "rgba(0,0,0,0.2)",
+  }),
+  ...(variant === "dark" && {
+    backgroundColor: theme.palette.grey[700],
+    ":hover": { backgroundColor: theme.palette.grey[800] },
+  }),
+  ".icon": { color: "white" },
+}));
+
+interface Props {
+  variant?: "light" | "dark";
+  socials?: SocialLink[];
+}
+
+export default function SocialLinks({ variant = "light", socials }: Props) {
+  return (
+    <FlexBox className="flex" mx={-0.625}>
+      {socials?.map(({ name, link }, i) => {
+        let Icon;
+
+        switch (name) {
+          case "Facebook":
+            Icon = Facebook;
+            break;
+          case "Instagram":
+            Icon = Instagram;
+            break;
+          case "Google":
+            Icon = Google;
+            break;
+          case "Twitter":
+            Icon = Twitter;
+            break;
+        }
+
+        return (
+          <a href={link} target="_blank" rel="noreferrer noopenner" key={i}>
+            <StyledIconButton variant={variant}>
+              {Icon && <Icon fontSize="inherit" className="icon" />}
+            </StyledIconButton>
+          </a>
+        );
+      })}
+    </FlexBox>
+  );
+}

package/src/cms/blocks/Components/Footer/styles/index.ts

@@ -0,0 +1,39 @@
+"use client";
+
+import NextLink from "next/link";
+import styled from "@mui/material/styles/styled";
+
+type LinkProps = { isDark?: boolean };
+
+export const StyledLink = styled(NextLink, {
+  shouldForwardProp: (prop) => prop !== "isDark",
+})<LinkProps>(({ theme, isDark }) => ({
+  borderRadius: 4,
+  display: "block",
+  cursor: "pointer",
+  position: "relative",
+  padding: "0.3rem 0rem",
+  ...(!isDark && {
+    color: theme.palette.grey[500],
+    "&:hover": { color: theme.palette.grey[100] },
+  }),
+}));
+
+export const StyledFooter = styled("footer")(({ theme }) => ({
+  [theme.breakpoints.down("md")]: { marginBottom: "4rem" },
+}));
+
+export const StyledRoot = styled("footer")(({ theme }) => ({
+  padding: 40,
+  color: "white",
+  borderRadius: 8,
+  background: theme.palette.primary.main,
+  [theme.breakpoints.down("md")]: { marginBottom: "6rem !important" },
+}));
+
+export const Heading = styled("h6")({
+  fontSize: 18,
+  lineHeight: 1,
+  fontWeight: 600,
+  marginBottom: 12,
+});

package/src/cms/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/cms/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/cms/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 "@evenicanpm/storefront-core/src/components-v2/carousel/index";
+import CarouselCard1 from "@evenicanpm/storefront-core/src/components-v2/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/cms/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/cms/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/cms/blocks/Components/ProductCarousel/index.tsx

@@ -0,0 +1,82 @@
+// Template: Market1
+import React from "react";
+
+// ICONS
+import { Light } from "../../Icons/index";
+import { Box } from "@mui/system";
+
+// GLOBAL COMPONENTS
+import { Carousel } from "@evenicanpm/storefront-core/src/components-v2/carousel/index";
+import { SectionCreator } from "@evenicanpm/storefront-core/src/components-v2/section-header/index";
+import ProductCard1Wrapper from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-1/product-card-1-wrapper";
+
+// 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}>
+              <ProductCard1Wrapper
+                id={item?.RecordId}
+                slug={item?.ItemId ?? ""}
+                title={item?.Name ?? ""}
+                price={item?.Price}
+                rating={0}
+                imgUrl={getImageUrl(item?.image?.[0]?.formats ?? {})}
+                discount={0}
+                mode="PLP"
+                //uom={item?.uom?.nodes[0].id}
+              />
+            </Box>
+          ))}
+        </Carousel>
+      </SectionCreator>
+    </>
+  );
+}

package/src/cms/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 "@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 { SectionCreator } from "@evenicanpm/storefront-core/src/components-v2/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/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;