@evenicanpm/storefront-core 1.0.2 → 1.0.4

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

@@ -0,0 +1,88 @@
+import React from "react";
+
+// MUI
+import { Box, Container } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+
+// Local Custom Components
+import Logo from "./sections/FooterLogo";
+import Links from "./sections/FooterLinks";
+import Contact from "./sections/FooterContact";
+
+import cms from "@/cms/endpoints";
+
+import { FooterBlock, FooterResponse } from "./interfaces";
+
+const getBlockComponent = (block: FooterBlock, index: number) => {
+  let Block;
+
+  switch (block.__component) {
+    case "footer.links":
+      Block = Links;
+      return (
+        <Block key={`index-${index}`} title={block.title} links={block.links} />
+      );
+    case "footer.logo":
+      Block = Logo;
+      return <Block key={`index-${index}`} description={block.description} />;
+    case "footer.contact":
+      Block = Contact;
+      return <Block key={`index-${index}`} social={block.social} />;
+    default:
+      return null;
+  }
+};
+
+const fetchFooterData = async (): Promise<FooterResponse | null> => {
+  try {
+    const response = await fetch(cms.getCmsApiUrl("footer"), {
+      cache: "no-store", // Ensure server-side fetching
+    });
+
+    if (!response.ok) {
+      return null;
+    }
+
+    const text = await response.text();
+
+    if (!text) {
+      return null;
+    }
+
+    return JSON.parse(text) as FooterResponse;
+  } catch (error) {
+    console.error("Error fetching footer data:", error);
+    return null;
+  }
+};
+
+const Footer = async () => {
+  const data = await fetchFooterData();
+  const sections = data?.data?.sections;
+
+  if (!(sections && sections.length)) {
+    return null;
+  }
+
+  return (
+    <Box
+      component="footer"
+      bgcolor="#222935"
+      mt={{ xs: 7 }}
+      mb={{ sm: 0, xs: 7 }}
+    >
+      <Box
+        component={Container}
+        color="white"
+        overflow="hidden"
+        py={{ sm: 10, xs: 4 }}
+      >
+        <Grid container spacing={6}>
+          {sections.map(getBlockComponent)}
+        </Grid>
+      </Box>
+    </Box>
+  );
+};
+
+export default Footer;

package/src/cms/blocks/Components/Footer/interfaces.ts

@@ -0,0 +1,37 @@
+export interface Link {
+  slug: string;
+  title: string;
+}
+export interface SocialLink {
+  name: string;
+  link: string;
+}
+interface FooterLogoBlock {
+  id: number;
+  __component: "footer.logo";
+  description: string;
+}
+
+interface FooterLinksBlock {
+  id: number;
+  __component: "footer.links";
+  title: string;
+  links: Link[];
+}
+
+interface FooterContactBlock {
+  id: number;
+  __component: "footer.contact";
+  social: SocialLink[];
+}
+
+export type FooterBlock =
+  | FooterLogoBlock
+  | FooterLinksBlock
+  | FooterContactBlock;
+
+export interface FooterResponse {
+  data: {
+    sections: FooterBlock[];
+  };
+}

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

@@ -0,0 +1,45 @@
+import React, { Fragment } from "react";
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+import { MdFacebook as Facebook } from "react-icons/md";
+import { Link } from "react-router-dom";
+import { Box } from "@mui/material";
+
+export const PLAY_APP_STORE_DATA = [
+  { url: "/", icon: Facebook, title: "Google Play", subtitle: "Get it on" },
+  { url: "/", icon: Facebook, title: "App Store", subtitle: "Download on the" },
+];
+
+const AppStore = () => {
+  return (
+    <FlexBox flexWrap="wrap" m={-1}>
+      {PLAY_APP_STORE_DATA.map(({ icon: Icon, ...item }, i) => (
+        <Fragment key={i + item.title}>
+          <Link to="/">
+            <Box
+              m={1}
+              gap={1}
+              p="10px 16px"
+              color="white"
+              display="flex"
+              bgcolor="#161d2b"
+              borderRadius="5px"
+              alignItems="center"
+            >
+              <Icon></Icon>
+              <Box>
+                <Box fontSize="8px" fontWeight="600" lineHeight="1">
+                  {item.subtitle}
+                </Box>
+                <Box fontSize="14px" fontWeight="700">
+                  {item.title}
+                </Box>
+              </Box>
+            </Box>
+          </Link>
+        </Fragment>
+      ))}
+    </FlexBox>
+  );
+};
+
+export default AppStore;

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { Heading } from "../styles/index";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import Grid from "@mui/material/Grid2";
+import SocialLinks from "./FooterSocialLinks";
+import { SocialLink } from "../interfaces";
+
+interface Props {
+  isDark?: boolean;
+  title?: string;
+  social?: SocialLink[];
+}
+
+const AboutLinks = (props: Props) => {
+  return (
+    <Grid size={{ lg: 3, md: 6, sm: 6, xs: 12 }}>
+      <Heading>Contact Us</Heading>
+
+      <Paragraph py={0.6} color="grey.500">
+        70 Washington Square South, New York, NY 10012, United States
+      </Paragraph>
+
+      <Paragraph py={0.6} color="grey.500">
+        Email: evenica@example.org
+      </Paragraph>
+
+      <Paragraph py={0.6} mb={2} color="grey.500">
+        Phone: +1 1123 456 780
+      </Paragraph>
+
+      <SocialLinks socials={props.social} />
+    </Grid>
+  );
+};
+
+export default AboutLinks;

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,48 @@
+// 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} autoplay={true} arrows={false} dots={true}>
+          {data.Slides.map((data: Slide, ind: number) => (
+            <CarouselCard1 key={ind}>
+              <CarouselCard1.Info>
+                <CarouselCard1.Title title={data?.heading} />
+                <CarouselCard1.Description description={data?.description} />
+                <CarouselCard1.Button
+                  buttonLink={
+                    data?.linkToPage?.slug
+                      ? `/pages/${data?.linkToPage?.slug}`
+                      : data?.linkToProduct?.sku
+                        ? `/product/${data?.linkToProduct?.sku}`
+                        : ""
+                  }
+                  buttonText={data?.buttonText}
+                />
+              </CarouselCard1.Info>
+
+              <CarouselCard1.Image
+                imgUrl={
+                  data?.image?.formats
+                    ? getImageUrl(data?.image?.formats)
+                    : data?.image?.url
+                }
+              />
+            </CarouselCard1>
+          ))}
+        </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>
+  );
+}