@evenicanpm/storefront-core 1.0.6 → 1.2.0

package/src/cms/blocks/components/seo/index.tsx

@@ -6,43 +6,43 @@ import { MetaItem, SeoPageData } from "@/cms/blocks/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>
-  );
+	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

@@ -4,18 +4,18 @@ import Container from "@mui/material/Container";
 // LOCAL CUSTOM COMPONENTS
 import ServiceCard from "@/cms/blocks/components/services/service-card";
 import {
-  ServicesBlock,
-  ServiceCard as ServiceCardItem,
+	ServicesBlock,
+	ServiceCard as ServiceCardItem,
 } from "@/cms/blocks/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>
-  );
+	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

@@ -11,36 +11,36 @@ import { getIcon } from "@/cms/blocks/icons/index";
 
 // GLOBAL CUSTOM COMPONENTS
 import {
-  H4,
-  Span,
+	H4,
+	Span,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 
 // CUSTOM DATA MODEL
 interface Service {
-  icon: string;
-  title: string;
-  description?: string;
+	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,
+	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] },
+	padding: "1.5rem",
+	//height: "100%",
+	display: "flex",
+	borderRadius: "8px",
+	alignItems: "center",
+	flexDirection: "column",
+	transition: "all 300ms ease-out",
+	":hover": { boxShadow: theme.shadows[2] },
 }));
 
 // ==================================================
@@ -48,26 +48,26 @@ type Props = { service: Service };
 // ==================================================
 
 export default function ServiceCard({ service }: Props) {
-  const { icon, title, description } = service;
+	const { icon, title, description } = service;
 
-  const Icon = getIcon(icon);
+	const Icon = getIcon(icon);
 
-  return (
-    <Grid size={{ lg: 3, sm: 6, xs: 12 }} sx={{ height: 220 }}>
-      <StyledCard>
-        <StyledFab>
-          <Icon fontSize="inherit" />
-        </StyledFab>
+	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>
+				<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>
-  );
+				<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

@@ -9,21 +9,21 @@ 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>
+	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>
-  );
+			<H4 fontSize={14} color={"black"} sx={{ marginBottom: 0 }}>
+				{title}
+			</H4>
+		</div>
+	);
 }

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

@@ -8,42 +8,42 @@ import BazaarImage from "@evenicanpm/storefront-core/src/components-v2/BazaarIma
 
 // 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] },
+	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;
+	title: string;
+	imgUrl?: string;
+	sx?: SxProps<Theme>;
+	isSelected?: boolean;
 }
 // ==============================================================================
 
 export default function ProductCategoryItem({
-  title,
-  imgUrl,
-  isSelected,
-  sx = {},
-  ...others
+	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} />}
+	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>
-  );
+			<H4 lineHeight="1" textTransform="capitalize" ellipsis>
+				{title}
+			</H4>
+		</StyledBazaarCard>
+	);
 }

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

@@ -7,57 +7,60 @@ import ProductCard from "@evenicanpm/storefront-core/src/components-v2/product-c
 // CUSTOM DATA MODEL
 
 interface Product {
-  id: number;
-  title: string;
-  price: number;
-  rating: number;
-  thumbnail: string;
-  discount?: number;
-  slug: string;
-  uom: string;
+	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>
-  );
+	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.QuickViewButton />
+											<ProductCard.FavoriteButton />
+										</ProductCard.HoverActions>
+									</ProductCard.Actions>
+								</ProductCard.Body>
+							</ProductCard>
+						</Grid>
+					))}
+				</Grid>
+			</Section>
+		</Box>
+	);
 }

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

@@ -6,61 +6,61 @@ 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 { lightOrDarkText } from "@evenicanpm/storefront-core/src/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",
+	zIndex: 2,
+	top: "0.875rem",
+	fontSize: "10px",
+	padding: "0 8px",
+	fontWeight: "600",
+	position: "absolute",
 });
 
 // ========================================================
 interface Props {
-  title: string;
-  imgUrl: string;
-  subtitle: string;
+	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),
-        }}
-      />
+	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 }}
-      />
+			<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>
-  );
+			<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

@@ -4,63 +4,63 @@ import Rating from "@mui/material/Rating";
 import HoverBox from "@evenicanpm/storefront-core/src/components-v2/HoverBox";
 import Image from "@evenicanpm/storefront-core/src/components-v2/Image";
 import {
-  H4,
-  Small,
+	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";
+import { currency } from "@evenicanpm/storefront-core/src/lib/lib";
 
 // ======================================================
 interface Props {
-  price: number;
-  title: string;
-  imgUrl: string;
-  rating: number;
-  reviewCount?: number;
+	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;
+	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>
+	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>
+			<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" title={title} ellipsis color="black">
+				{title}
+			</H4>
 
-      <H4
-        fontSize={14}
-        textAlign="center"
-        color="primary.main"
-        sx={{ marginBottom: 0 }}
-      >
-        {currency(price)}
-      </H4>
-    </div>
-  );
+			<H4
+				fontSize={14}
+				textAlign="center"
+				color="primary.main"
+				sx={{ marginBottom: 0 }}
+			>
+				{currency(price)}
+			</H4>
+		</div>
+	);
 }