@evenicanpm/storefront-core 1.0.0-alpha

package/src/cms/interfaces/productData.ts

@@ -0,0 +1,83 @@
+export interface ProductData {
+  data: Array<{
+    id: number;
+    name: string;
+    description: string;
+    sku: string;
+    createdAt: string;
+    keywords: string;
+    updatedAt: string;
+    publishedAt: string;
+    image: ProductImage[];
+  }>;
+  meta: {
+    pagination: {
+      page: number;
+      pageSize: number;
+      pageCount: number;
+      total: number;
+    };
+  };
+}
+
+export interface ProductImage {
+  id: number;
+  name: string;
+  alternativeText: string | null;
+  caption: string | null;
+  width: number;
+  height: number;
+  url: string;
+  ext: string;
+  mime: string;
+  size: number;
+  hash: string;
+  provider: string;
+  provider_metadata: Record<string, unknown> | null;
+  previewUrl: string | null;
+  createdAt: string;
+  updatedAt: string;
+  formats?: Formats;
+}
+
+export interface ImageFormat {
+  ext: string;
+  url: string;
+  hash: string;
+  mime: string;
+  name: string;
+  path: string | null;
+  size: number;
+  width: number;
+  height: number;
+}
+
+export interface Formats {
+  /** Strapi generates only the sizes you configure.  
+        Keep this flexible by using an index signature. */
+  [size: string]: ImageFormat;
+}
+
+interface ImageAttributes {
+  name: string;
+  alternativeText: string | null;
+  caption: string | null;
+  width: number;
+  height: number;
+  formats: Formats;
+  hash: string;
+  ext: string;
+  mime: string;
+  size: number;
+  url: string;
+  previewUrl: string | null;
+  provider: string;
+  provider_metadata: Record<string, unknown> | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ImageData {
+  id: number;
+  attributes: ImageAttributes;
+}

package/src/cms/pages.ts

@@ -0,0 +1,149 @@
+import cmsEndPoints from "./endpoints";
+
+// TODO -> No types should be in CMS folder -> setup strapi codegen
+export interface Pages {
+  data: Array<{
+    id: number;
+    attributes: {
+      title: string;
+      slug: string;
+      content: string;
+      isBlog: boolean;
+      createdAt: string;
+      updatedAt: string;
+      publishedAt: string;
+    };
+  }>;
+  meta: {
+    pagination: {
+      page: number;
+      pageSize: number;
+      pageCount: number;
+      total: number;
+    };
+  };
+}
+
+export interface TransformedPages {
+  __typename: string;
+  recordCount: number;
+  pageInfo: {
+    __typename: string;
+    top: number;
+    skip: number;
+    sort: string;
+    sortDesc: boolean;
+    search: string;
+  };
+  nodes: Array<{
+    __typename: string;
+    id: string;
+    title: string;
+    slug: string;
+    content: string;
+    isBlog: boolean;
+    modified: string;
+    modifiedBy: null;
+    created: string;
+  }>;
+}
+
+export const transformPages = (strapiResponse: Pages): TransformedPages => {
+  const { data, meta } = strapiResponse;
+  const nodes = data.map((item) => ({
+    __typename: "Page",
+    id: item.id.toString(),
+    slug: item.attributes.slug,
+    title: item.attributes.title,
+    content: item.attributes.content,
+    isBlog: item.attributes.isBlog,
+    modified: item.attributes.updatedAt,
+    modifiedBy: null,
+    created: item.attributes.createdAt,
+  }));
+
+  return {
+    __typename: "PageConnection",
+    recordCount: meta.pagination.total,
+    pageInfo: {
+      __typename: "PageInfo",
+      top: 50,
+      skip: 0,
+      sort: "modified",
+      sortDesc: false,
+      search: "",
+    },
+    nodes: nodes,
+  };
+};
+
+export interface Page {
+  data: {
+    id: number;
+    attributes: {
+      title: string;
+      content: string;
+      isBlog: boolean;
+      createdAt: string;
+      updatedAt: string;
+      publishedAt: string;
+    };
+  };
+  meta: {
+    pagination: {
+      page: number;
+      pageSize: number;
+      pageCount: number;
+      total: number;
+    };
+  };
+}
+
+export interface TransformedPage {
+  __typename: string;
+  id: string;
+  title: string;
+  content: string;
+  isBlog: boolean;
+  created: string;
+}
+
+export const transformPage = (response: Page): TransformedPage => {
+  const { data } = response;
+
+  return {
+    __typename: "Page",
+    id: data.id.toString(),
+    title: data.attributes.title,
+    content: data.attributes.content,
+    isBlog: data.attributes.isBlog,
+    created: data.attributes.createdAt,
+  };
+};
+
+interface PageData {
+  title: string;
+  content: string;
+  isBlog: boolean;
+}
+
+export const createPage = async (pageData: PageData) => {
+  try {
+    const response = await fetch(cmsEndPoints.getCmsApiUrl("pages"), {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        data: pageData,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error("Error creating page:", error);
+    throw error;
+  }
+};

package/src/components/Blocks/BlockManager.tsx

@@ -0,0 +1,67 @@
+import { Box } from "@mui/material";
+import {
+  Hero,
+  FeaturePill,
+  FeaturedProducts,
+  FeaturedCategories,
+  BrandLogosScroller,
+  HeroCarousel,
+  Services,
+  ProductCarousel,
+  ProductSectionFullWidth,
+  CategoryCarousel,
+  Footer,
+  Image,
+  RichText,
+} from "./index";
+import { Block } from "./interfaces";
+
+const componentMap = {
+  "blocks.hero-section": Hero,
+  "blocks.features-pill": FeaturePill, // Should replace this with bazaar-react-ts/src/pages-sections/market-2/section-2/section-2.tsx
+  "blocks.featured-products": FeaturedProducts,
+  "blocks.featured-categories": FeaturedCategories,
+  "blocks.logo-scroller": BrandLogosScroller, // Not mobile friendly
+  "blocks.footer": Footer, // Adds to only homepage, for all pages use src/Footer component
+  "blocks.image-block": Image,
+  "blocks.rich-text": RichText, // Not mobile friendly
+
+  // Bazaar Template Blocks
+  "blocks.hero-carousel": HeroCarousel,
+  "blocks.services": Services,
+  "blocks.product-carousel": ProductCarousel,
+  "blocks.product-section-full-width": ProductSectionFullWidth,
+  "blocks.category-carousel": CategoryCarousel,
+};
+
+const getBlockComponent: <B extends Block>(
+  block: B,
+  idx: number,
+) => JSX.Element | null = (block: Block, idx: number) => {
+  const Component = componentMap[
+    block.__component as keyof typeof componentMap
+  ] as React.ComponentType<Block>;
+  return <Component key={`block-${idx}`} {...block} />;
+};
+
+interface BlockManagerProps {
+  blocks: Block[];
+}
+
+const BlockManager: React.FC<BlockManagerProps> = ({ blocks }) => {
+  if (!Array.isArray(blocks)) return null;
+  return (
+    <Box>
+      {blocks.map((block, idx) => {
+        const isLast = idx === blocks.length - 1;
+        return (
+          <Box key={`block-wrapper-${idx}`} mb={isLast ? 0 : 6}>
+            {getBlockComponent(block, idx)}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};
+
+export default BlockManager;

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

@@ -0,0 +1,72 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import { Box, Container } from "@mui/material";
+import { keyframes } from "@emotion/react";
+import cmsEndPoints from "@/cms/endpoints";
+import { LogoScrollerBlock } from "../interfaces";
+
+const bounce = keyframes`
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+`;
+
+const outerScroll = {
+  width: "100%",
+  overflow: "hidden",
+  mask: "linear-gradient(90deg, transparent, white 20%, white 80%, transparent)",
+};
+
+const BrandLogosScroller = (data: LogoScrollerBlock) => {
+  const innerSlider = React.useRef<HTMLElement>(null);
+  const logos = data?.image;
+
+  const renderLogo = (logo: (typeof logos)[0]) => (
+    <Box
+      key={logo?.url}
+      sx={{
+        marginLeft: "100px",
+        marginRight: "100px",
+        position: "relative",
+        height: "100px",
+        width: "auto",
+        minWidth: "100px",
+      }}
+    >
+      <Image
+        src={cmsEndPoints.buildCmsMediaUrl(logo?.url)}
+        alt="Brand Logo"
+        fill
+        sizes="100px"
+        style={{ objectFit: "contain" }}
+      />
+    </Box>
+  );
+
+  return (
+    <Container>
+      <Box sx={outerScroll}>
+        <Box
+          sx={{
+            display: "flex",
+            flexWrap: "nowrap",
+            alignItems: "center",
+            width: "fit-content",
+            animation: `${bounce} linear 100s infinite`,
+          }}
+          ref={innerSlider}
+        >
+          {logos?.map(renderLogo)}
+          {logos?.map(renderLogo)}
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default BrandLogosScroller;

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

@@ -0,0 +1,47 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Image from "next/image";
+
+import cmsEndPoints from "@/cms/endpoints";
+
+interface Props {
+  name: string;
+  imgUrl: string;
+}
+
+export default function CategoryCard({ name, imgUrl }: Props) {
+  return (
+    <Card sx={{ width: "100%", boxShadow: 10 }}>
+      <Box
+        sx={{
+          position: "relative",
+          height: 250,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "flex-end",
+          overflow: "hidden",
+        }}
+      >
+        <Image
+          src={cmsEndPoints.buildCmsMediaUrl(imgUrl)}
+          alt={name}
+          fill
+          style={{ objectFit: "cover" }}
+        />
+        <Button
+          sx={{
+            position: "absolute",
+            bottom: "10px",
+            height: "40px",
+            backgroundColor: "rgba(255, 255, 255, 0.8)",
+          }}
+          size="small"
+        >
+          {name}
+        </Button>
+      </Box>
+    </Card>
+  );
+}

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

@@ -0,0 +1,60 @@
+"use client";
+
+import React from "react";
+import NextLink from "next/link";
+
+// CUSTOM ICON COMPONENT
+import CategoryIcon from "../../Icons/Components/Category";
+
+// GLOBAL CUSTOM COMPONENT
+import BazaarCard from "@/components/_components/BazaarCard";
+import { Carousel } from "@/components/_components/carousel/index";
+import { SectionCreator } from "@/components/_components/section-header/index";
+
+// LOCAL CUSTOM COMPONENT
+import TopCategoriesCard from "../shared/top-categories-card";
+import { getImageUrl } from "@/cms/endpoints";
+
+import { CategoryCarouselBlock } from "../../interfaces";
+
+export default function CategoryCarousel(data: CategoryCarouselBlock) {
+  const responsive = [
+    { breakpoint: 959, settings: { slidesToShow: 2 } },
+    { breakpoint: 650, settings: { slidesToShow: 1 } },
+  ];
+
+  // see more link should be updated to categories page when available
+  return (
+    <SectionCreator
+      seeMoreLink=""
+      title="Top Categories"
+      icon={<CategoryIcon color="primary" />}
+    >
+      <Carousel
+        slidesToShow={3}
+        responsive={responsive}
+        autoplay={true}
+        height={200}
+      >
+        {data?.CategoryWrapper?.map((item) => {
+          const category = item.category; // category is nested because of CategoryWrapper to limit minimum and maximum number of items in @/cms
+          return (
+            <NextLink
+              href={`/products/${category.name}`}
+              key={category.id}
+              passHref
+            >
+              <BazaarCard elevation={1} sx={{ padding: "20px" }}>
+                <TopCategoriesCard
+                  title={category?.name}
+                  imgUrl={getImageUrl(category?.image?.formats ?? {})}
+                  subtitle={category?.name}
+                />
+              </BazaarCard>
+            </NextLink>
+          );
+        })}
+      </Carousel>
+    </SectionCreator>
+  );
+}

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

@@ -0,0 +1,99 @@
+import { Box, Container, Typography, Divider, Paper } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import {
+  MdLocalOffer as LocalOffer,
+  MdShoppingBag as ShoppingBag,
+  MdAddLocation as AddLocation,
+  MdMonetizationOn as MonetizationOn,
+} from "react-icons/md";
+import { FeaturesPillBlock } from "../interfaces";
+const FeaturePill = (featurePillData: FeaturesPillBlock) => {
+  return (
+    <Box
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      marginTop="50px"
+    >
+      <Container>
+        <Paper
+          sx={{
+            height: "100px",
+            borderRadius: "15px",
+            boxShadow: 24,
+          }}
+          elevation={1}
+        >
+          <Grid container height="100%">
+            <Grid
+              size={3}
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <LocalOffer
+                style={{ fontSize: "50px", marginRight: "20px" }}
+              ></LocalOffer>
+              <Box display="flex" flexDirection="column">
+                <Typography variant="h6">
+                  {featurePillData?.feature_1}
+                </Typography>
+              </Box>
+            </Grid>
+            <Divider orientation="vertical" flexItem sx={{ mr: "-1px" }} />
+            <Grid
+              size={3}
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <ShoppingBag
+                style={{ fontSize: "50px", marginRight: "20px" }}
+              ></ShoppingBag>
+              <Box display="flex" flexDirection="column">
+                <Typography variant="h6">
+                  {featurePillData?.feature_2}
+                </Typography>
+              </Box>
+            </Grid>
+            <Divider orientation="vertical" flexItem sx={{ mr: "-1px" }} />
+            <Grid
+              size={3}
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <MonetizationOn
+                style={{ fontSize: "50px", marginRight: "20px" }}
+              ></MonetizationOn>
+
+              <Box display="flex" flexDirection="column">
+                <Typography variant="h6">
+                  {featurePillData?.feature_3}
+                </Typography>
+              </Box>
+            </Grid>
+            <Divider orientation="vertical" flexItem sx={{ mr: "-1px" }} />
+            <Grid
+              size={3}
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <AddLocation
+                style={{ fontSize: "50px", marginRight: "20px" }}
+              ></AddLocation>
+              <Box display="flex" flexDirection="column">
+                <Typography variant="h6">
+                  {featurePillData?.feature_4}
+                </Typography>
+              </Box>
+            </Grid>
+          </Grid>
+        </Paper>
+      </Container>
+    </Box>
+  );
+};
+
+export default FeaturePill;

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

@@ -0,0 +1,41 @@
+import React from "react";
+import { Box, Container } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+
+// Local components
+import CategoryCard from "./CategoryCard";
+import { Category, FeaturedCategoriesBlock } from "../interfaces";
+
+const FeaturedCategories = (categoriesData: FeaturedCategoriesBlock) => {
+  return (
+    <Box
+      sx={{
+        marginTop: "80px",
+        marginBottom: "80px",
+      }}
+    >
+      <Container>
+        <h1 style={{ fontSize: "25px" }}>Best Selling Categories</h1>
+        <Grid container spacing={2}>
+          {categoriesData?.categories?.map((category: Category, i: number) => {
+            return (
+              <Grid
+                size={3}
+                display="flex"
+                justifyContent="center"
+                key={"category_index_" + i}
+              >
+                <CategoryCard
+                  name={category.name}
+                  imgUrl={category?.image?.url}
+                ></CategoryCard>
+              </Grid>
+            );
+          })}
+        </Grid>
+      </Container>
+    </Box>
+  );
+};
+
+export default FeaturedCategories;

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

@@ -0,0 +1,41 @@
+import React from "react";
+import { Box, Container } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+
+// Local components
+import MediaCard from "./MediaCard";
+import { FeaturedProductsBlock, Product } from "../interfaces";
+
+const FeaturedProducts = (productsData: FeaturedProductsBlock) => {
+  return (
+    <Box
+      sx={{
+        marginTop: "80px",
+        marginBottom: "80px",
+      }}
+    >
+      <Container>
+        <h1 style={{ fontSize: "25px" }}>Featured Products</h1>
+        <Grid container spacing={2}>
+          {productsData?.products?.map((product: Product, i: number) => {
+            return (
+              <Grid
+                size={3}
+                display="flex"
+                justifyContent="center"
+                key={"product_index_" + i}
+              >
+                <MediaCard
+                  name={product?.description ?? ""}
+                  imgUrl={product?.image?.[0]?.url}
+                ></MediaCard>
+              </Grid>
+            );
+          })}
+        </Grid>
+      </Container>
+    </Box>
+  );
+};
+
+export default FeaturedProducts;