@evenicanpm/storefront-core 1.0.6 → 1.2.0

package/src/cms/blocks/components/footer/interfaces.ts

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

package/src/cms/blocks/components/footer/sections/footer-app-store.tsx

@@ -5,41 +5,41 @@ 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" },
+	{ 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>
-  );
+	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/footer-contact.tsx

@@ -6,31 +6,31 @@ import SocialLinks from "@/cms/blocks/components/footer/sections/footer-social-l
 import { SocialLink } from "@/cms/blocks/components/footer/interfaces";
 
 interface Props {
-  isDark?: boolean;
-  title?: string;
-  social?: SocialLink[];
+	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>
+	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">
+				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} color="grey.500">
+				Email: evenica@example.org
+			</Paragraph>
 
-      <Paragraph py={0.6} mb={2} color="grey.500">
-        Phone: +1 1123 456 780
-      </Paragraph>
+			<Paragraph py={0.6} mb={2} color="grey.500">
+				Phone: +1 1123 456 780
+			</Paragraph>
 
-      <SocialLinks socials={props.social} />
-    </Grid>
-  );
+			<SocialLinks socials={props.social} />
+		</Grid>
+	);
 };
 
 export default AboutLinks;

package/src/cms/blocks/components/footer/sections/footer-links.tsx

@@ -1,33 +1,33 @@
 import React, { Fragment } from "react";
 import {
-  Heading,
-  StyledLink,
+	Heading,
+	StyledLink,
 } from "@/cms/blocks/components/footer/styles/index";
 import { Box } from "@mui/material";
 import Grid from "@mui/material/Grid2";
 import { Link } from "@/cms/blocks/components/footer/interfaces";
 
 interface Props {
-  isDark?: boolean;
-  title?: string;
-  links?: Link[];
+	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>
-  );
+	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/footer-logo.tsx

@@ -8,19 +8,19 @@ import useTheme from "@mui/material/styles/useTheme";
 import useMediaQuery from "@mui/material/useMediaQuery";
 
 interface Props {
-  description: string;
+	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" } : {})} />
+	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>
-  );
+			<Paragraph mb={2.5} color="grey.500">
+				{props.description}
+			</Paragraph>
+		</Grid>
+	);
 }

package/src/cms/blocks/components/footer/sections/footer-social-links.tsx

@@ -16,55 +16,55 @@ import { SocialLink } from "@/cms/blocks/components/footer/interfaces";
 
 // Styled Components
 const StyledIconButton = styled(IconButton, {
-  shouldForwardProp: (prop) => prop !== "variant",
+	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" },
+	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[];
+	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;
+	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;
-        }
+				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>
-  );
+				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

@@ -6,34 +6,34 @@ import styled from "@mui/material/styles/styled";
 type LinkProps = { isDark?: boolean };
 
 export const StyledLink = styled(NextLink, {
-  shouldForwardProp: (prop) => prop !== "isDark",
+	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] },
-  }),
+	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" },
+	[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" },
+	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,
+	fontSize: 18,
+	lineHeight: 1,
+	fontWeight: 600,
+	marginBottom: 12,
 });

package/src/cms/blocks/components/footer.tsx

@@ -4,74 +4,74 @@ 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,
+	MdLocationOn as LocationOn,
+	MdPhone as Phone,
+	MdEmail as Email,
 } from "react-icons/md";
 import { useTheme } from "@mui/material/styles";
 import { FooterBlock } from "@/cms/blocks/interfaces";
 
 const contactItemSx = {
-  display: "flex",
-  alignItems: "center",
+	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>
+	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" }}>
+										<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" }}>
+										<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>
-  );
+							<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-carousel/index.tsx

@@ -11,38 +11,38 @@ import { getImageUrl } from "@/cms/endpoints";
 import { HeroCarouselBlock, Slide } from "@/cms/blocks/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>
+	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>
-  );
+							<CarouselCard1.Image
+								imgUrl={
+									data?.image?.formats
+										? getImageUrl(data?.image?.formats)
+										: data?.image?.url
+								}
+							/>
+						</CarouselCard1>
+					))}
+				</Carousel>
+			</Container>
+		</Box>
+	);
 }