@evenicanpm/storefront-core 1.0.2 → 1.0.4

package/src/api-manager/services/create-query.ts

@@ -148,6 +148,15 @@ export const createQuery = <TInput, TOutput>(
     return await queryClient.prefetchQuery(getQueryData(input));
   };
 
+  /**
+   * Wrapper on getQueryData
+   * TODO: need to fix this naming so we're properly shadowing
+   * the names of tanstack-query
+   */
+  const getData = async (queryClient: QueryClient): Promise<TOutput> => {
+    return await queryClient.getQueryData([config.queryKey]);
+  };
+
   /**
    *
    * @param queryClient react-query client
@@ -246,6 +255,7 @@ export const createQuery = <TInput, TOutput>(
     fetchData,
     prefetchData,
     buildCacheKey,
+    getData,
   };
 };
 

package/src/api-manager/services/product/queries/get-product-availability.ts

@@ -9,7 +9,7 @@ const getProductAvailability = createQuery<
   ProductWarehouseInventoryInformation
 >(apiPath, {
   queryKey: "product-inventory",
-  disableProperties: ["allDimensionsSelected", "searchCriteria"],
+  disableProperties: ["searchCriteria"],
 });
 
 export default getProductAvailability;

package/src/api-manager/services/product/server/product.server.ts

@@ -9,5 +9,8 @@ export const searchProductsServer = async (
   input: searchProductsInput,
 ): Promise<ProductSearchResult[]> => {
   const apiManager = await createApiManager();
-  return parseObject(apiManager.product.searchProducts(input));
+  let searchProducts = apiManager.product.searchProducts
+    ? apiManager.product.searchProducts(input)
+    : Promise.reject("product.searchProducts() is not defined");
+  return parseObject(searchProducts);
 };

package/src/api-manager/services/user/mutations/add-to-wishlist.ts

@@ -5,7 +5,7 @@ import {
 } from "@/api-manager/schemas/user.schema";
 import { createApiPath } from "../../create-query";
 import { useCreateMutation } from "../../create-mutation";
-import { getWishlistsQueryKey } from "../queries/get-wishlists";
+import getWishlists, { getWishlistsQueryKey } from "../queries/get-wishlists";
 
 const apiPath = createApiPath("user", "addProductsToWishlist");
 
@@ -13,11 +13,31 @@ const useAddToWishlist = () => {
   const queryClient = useQueryClient();
 
   return useCreateMutation<WishlistLinesInput, Wishlist>(apiPath, {
-    onSuccess: (_data, variables) => {
+    onSuccess: (_data) => {
       queryClient.invalidateQueries({
-        queryKey: [getWishlistsQueryKey, variables.Id],
+        queryKey: [getWishlistsQueryKey],
       });
     },
+    onMutate: async (input) => {
+      // Based on Tanstack Optimistic Update Pattern
+      // https://tanstack.com/query/latest/docs/reference/QueryClient
+      await queryClient.cancelQueries({ queryKey: [getWishlistsQueryKey] });
+      const previousWishlists = await getWishlists.getData(queryClient);
+      const optimisticData = previousWishlists.map((list) => {
+        if (list.Id === input.Id) {
+          // Add the input product line to list
+          return {
+            ...list,
+            ProductListLines: [
+              ...list.ProductListLines,
+              { ProductId: input.ProductListLines[0].ProductId },
+            ],
+          };
+        }
+        return list;
+      });
+      queryClient.setQueryData([getWishlistsQueryKey], optimisticData);
+    },
   });
 };
 

package/src/api-manager/services/user/mutations/remove-from-wishlist.ts

@@ -3,6 +3,7 @@ import { WishlistLinesInput } from "@/api-manager/schemas/user.schema";
 import { createApiPath } from "../../create-query";
 import { useCreateMutation } from "../../create-mutation";
 import { getWishlistDetailsQueryKey } from "../queries/get-wishlist-details";
+import getWishlists, { getWishlistsQueryKey } from "../queries/get-wishlists";
 
 const apiPath = createApiPath("user", "removeProductsFromWishlist");
 
@@ -14,6 +15,28 @@ const useRemoveFromWishlist = () => {
       queryClient.invalidateQueries({
         queryKey: [getWishlistDetailsQueryKey, { Id: _variables.Id }],
       });
+      queryClient.invalidateQueries({
+        queryKey: [getWishlistsQueryKey],
+      });
+    },
+    onMutate: async (input) => {
+      // Based on Tanstack Optimistic Update Pattern
+      // https://tanstack.com/query/latest/docs/reference/QueryClient
+      await queryClient.cancelQueries({ queryKey: [getWishlistsQueryKey] });
+      const previousWishlists = await getWishlists.getData(queryClient);
+      const optimisticData = previousWishlists.map((list) => {
+        if (list.Id === input.Id) {
+          // Remove the product line of our input id
+          return {
+            ...list,
+            ProductListLines: list.ProductListLines.filter(
+              (item) => item.ProductId !== input.ProductListLines[0].ProductId,
+            ),
+          };
+        }
+        return list;
+      });
+      queryClient.setQueryData([getWishlistsQueryKey], optimisticData);
     },
   });
 };

package/src/api-manager/types/Datasource.ts

@@ -34,11 +34,7 @@ import {
   ProductWarehouseInventoryAvailability,
   ProductWarehouseInventoryInformation,
 } from "@msdyn365-commerce/retail-proxy";
-import {
-  CategoriesQuery,
-  CreateWishListInput,
-  WishList,
-} from "../datasources/e4/graphqlRequestSdk";
+import { CategoriesQuery } from "../datasources/e4/graphqlRequestSdk";
 
 /**
  * Datasource Interface, defines the methods and I/O types that a datasource must implement.

package/src/cms/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/cms/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/cms/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/cms/blocks/Components/CategoryCarousel/index.tsx

@@ -0,0 +1,59 @@
+"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 "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
+import { Carousel } from "@evenicanpm/storefront-core/src/components-v2/carousel/index";
+import { Section } from "@evenicanpm/storefront-core/src/components-v2/section";
+
+// 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 (
+    <Section>
+      <Section.Header>
+        <Section.Header.Title title="Categories" icon={<CategoryIcon />} />
+      </Section.Header>
+      <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>
+    </Section>
+  );
+}

package/src/cms/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/cms/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/cms/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;

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

@@ -0,0 +1,32 @@
+// CUSTOM ICON COMPONENTS
+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";
+
+export const ABOUT_LINKS = [
+  "Careers",
+  "Our Stores",
+  "Our Cares",
+  "Terms & Conditions",
+  "Privacy Policy",
+];
+
+export const CUSTOMER_CARE_LINKS = [
+  "Help Center",
+  "Track Your Order",
+  "Corporate & Bulk Purchasing",
+  "Returns & Refunds",
+];
+
+export const SOCIAL_ICON_LINKS = [
+  { Icon: Facebook, url: "https://www.facebook.com/UILibOfficial" },
+  { Icon: Twitter, url: "https://twitter.com/uilibofficial" },
+  { Icon: Google, url: "https://www.google.com/search?q=ui-lib.com" },
+  { Icon: Instagram, url: "https://www.instagram.com/uilibofficial/" },
+];
+
+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" },
+];