@evenicanpm/storefront-core 1.0.3 → 1.0.4

package/docs.tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "outDir": "./dist",
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "paths": {
+      "@/lib/*": ["src/lib/*"],
+      "@/api-manager/*": ["src/api-manager/*"],
+      "@/auth/*": ["src/auth/*"],
+      "@/_components/*": ["src/components/_components/*"],
+      "@/components/*": ["src/components/*"],
+      "@/cms/*": ["src/cms/*"],
+      "@/schemas/*": ["src/api-manager/schemas/*"],
+      "@/services/*": ["src/api-manager/services/*"],
+      "@/hooks/*": ["src/hooks/*"],
+      "@config": ["src/config"]
+    }
+  },
+  "include": [
+    "src/components-v2/product-dimensions",
+    "src/components-v2/product-quantity-buttons",
+    "src/components-v2/products-view",
+    "src/components-v2/search-bar",
+    "src/components-v2/section"
+  ]
+}

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@evenicanpm/storefront-core",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Core module for D365/e4 Headless Storefront",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "docs": "typedoc"
   },
   "exports": {
     ".": "./index.js",
@@ -31,7 +32,9 @@
     "@tanstack/react-query": "^5.76.1",
     "next": "^15.2.1",
     "next-auth": "^4.24.11",
+    "object-mapper": "^6.2.0",
     "typescript": "^5.8.3",
-    "object-mapper": "^6.2.0"
+    "typedoc": "^0.28.9",
+    "typedoc-plugin-merge-module": "^7.0.0"
   }
 }

package/src/api-manager/schemas/product.schema.ts

@@ -115,7 +115,6 @@ const InventorySearchCriteriaInput = z.object({
     productIds: z.number().array(),
     searchArea: searchAreaSchema.optional(),
   }),
-  allDimensionsSelected: z.boolean(),
 });
 
 const productPriceInput = z.object({

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

@@ -9,7 +9,7 @@ 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 { SectionCreator } from "@evenicanpm/storefront-core/src/components-v2/section-header/index";
+import { Section } from "@evenicanpm/storefront-core/src/components-v2/section";
 
 // LOCAL CUSTOM COMPONENT
 import TopCategoriesCard from "../shared/top-categories-card";
@@ -25,11 +25,10 @@ export default function CategoryCarousel(data: CategoryCarouselBlock) {
 
   // see more link should be updated to categories page when available
   return (
-    <SectionCreator
-      seeMoreLink=""
-      title="Top Categories"
-      icon={<CategoryIcon color="primary" />}
-    >
+    <Section>
+      <Section.Header>
+        <Section.Header.Title title="Categories" icon={<CategoryIcon />} />
+      </Section.Header>
       <Carousel
         slidesToShow={3}
         responsive={responsive}
@@ -55,6 +54,6 @@ export default function CategoryCarousel(data: CategoryCarouselBlock) {
           );
         })}
       </Carousel>
-    </SectionCreator>
+    </Section>
   );
 }

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

@@ -14,26 +14,32 @@ export default function HeroCarousel(data: HeroCarouselBlock) {
   return (
     <Box sx={{ backgroundColor: "white" }}>
       <Container className="pt-2 pb-2">
-        <Carousel slidesToShow={1} arrows={false} autoplay={true} dots>
+        <Carousel slidesToShow={1} autoplay={true} arrows={false} dots={true}>
           {data.Slides.map((data: Slide, ind: number) => (
-            <CarouselCard1
-              key={ind}
-              title={data?.heading}
-              description={data?.description}
-              imgUrl={
-                data?.image?.formats
-                  ? getImageUrl(data?.image?.formats)
-                  : data?.image?.url
-              }
-              buttonText={data?.buttonText}
-              buttonLink={
-                data?.linkToPage?.slug
-                  ? `/pages/${data?.linkToPage?.slug}`
-                  : data?.linkToProduct?.sku
-                    ? `/product/${data?.linkToProduct?.sku}`
-                    : ""
-              }
-            />
+            <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>

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

@@ -1,45 +1,34 @@
-// Template: Market1
+"use client";
 import React from "react";
-
-// ICONS
 import { Light } from "../../Icons/index";
 import { Box } from "@mui/system";
-
-// GLOBAL COMPONENTS
 import { Carousel } from "@evenicanpm/storefront-core/src/components-v2/carousel/index";
-import { SectionCreator } from "@evenicanpm/storefront-core/src/components-v2/section-header/index";
-import ProductCard1Wrapper from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-1/product-card-1-wrapper";
+import { Section } from "@evenicanpm/storefront-core/src/components-v2/section";
 
 // CMS
+import ProductCard from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card/product-card";
 import { getImageUrl } from "@/cms/endpoints";
-
-// API
 import getProductByIds from "@/services/product/queries/get-product-by-ids";
-import { getQueryClient } from "@/services/get-query-client";
 import { SimpleProduct } from "@msdyn365-commerce/retail-proxy";
 import { Product, ProductCarouselBlock } from "../../interfaces";
 
 type CombinedProduct = Product & SimpleProduct;
 
-export default async function ProductCarousel(data: ProductCarouselBlock) {
-  const queryClient = getQueryClient();
-  const e4Products = await getProductByIds.fetchData(queryClient, {
+export default function ProductCarousel(data: ProductCarouselBlock) {
+  const { data: e4Products = [], error } = getProductByIds.useData({
     id: data?.products?.map((product: Product) => product.sku),
   });
 
-  if (!(e4Products && e4Products.length)) {
+  if (error || !e4Products.length) {
     return null;
   }
 
-  // join data
   const combinedData: CombinedProduct[] = data?.products
     ?.map((product: Product) => {
       const e4Product = e4Products?.find(
         (e4Product: SimpleProduct) => product.sku === e4Product.ItemId,
       );
-
       if (!e4Product) return null;
-
       return {
         ...e4Product,
         ...product,
@@ -57,26 +46,43 @@ export default async function ProductCarousel(data: ProductCarouselBlock) {
   ];
 
   return (
-    <>
-      <SectionCreator icon={<Light color="primary" />} title={data?.heading}>
-        <Carousel responsive={responsive} height={445} autoplay={true}>
-          {combinedData?.map((item: CombinedProduct) => (
-            <Box pb={0.6} key={item.id}>
-              <ProductCard1Wrapper
-                id={item?.RecordId}
-                slug={item?.ItemId ?? ""}
-                title={item?.Name ?? ""}
-                price={item?.Price}
-                rating={0}
-                imgUrl={getImageUrl(item?.image?.[0]?.formats ?? {})}
-                discount={0}
-                mode="PLP"
-                //uom={item?.uom?.nodes[0].id}
-              />
-            </Box>
-          ))}
-        </Carousel>
-      </SectionCreator>
-    </>
+    <Section>
+      <Section.Header>
+        <Section.Header.Title
+          icon={<Light color="primary" />}
+          title={data?.heading}
+        />
+      </Section.Header>
+      <Carousel responsive={responsive} height={445} autoplay={true}>
+        {combinedData?.map((item: CombinedProduct) => (
+          <Box pb={0.6} key={item.id}>
+            <ProductCard
+              product={{
+                id: item?.RecordId,
+                title: item?.Name ?? "",
+                price: item?.Price,
+                rating: 0,
+                imgUrl: getImageUrl(item?.image?.[0]?.formats ?? {}),
+                discount: 0,
+                slug: item?.ItemId ?? "",
+              }}
+            >
+              <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>
+          </Box>
+        ))}
+      </Carousel>
+    </Section>
   );
 }

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

@@ -10,7 +10,7 @@ import Grid from "@mui/material/Grid2";
 import HoverBox from "@evenicanpm/storefront-core/src/components-v2/HoverBox";
 import { H4 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
-import { SectionCreator } from "@evenicanpm/storefront-core/src/components-v2/section-header/index";
+import { Section } from "@evenicanpm/storefront-core/src/components-v2/section";
 
 // Utils
 import { currency } from "@/lib/lib";
@@ -59,7 +59,11 @@ export default async function ProductSectionFullWidth(
   const Icon = getIcon(data?.icon);
 
   return (
-    <SectionCreator icon={<Icon />} title={data.heading} seeMoreLink="#">
+    <Section>
+      <Section.Header>
+        <Section.Header.Title title={data.heading} icon={<Icon />} />
+        <Section.Header.SeeMoreLink link="#" />
+      </Section.Header>
       {/* seeMoreLink should be updated when general product page is built */}
       <BazaarCard sx={{ padding: "20px" }}>
         <Grid container spacing={3}>
@@ -98,6 +102,6 @@ export default async function ProductSectionFullWidth(
           ))}
         </Grid>
       </BazaarCard>
-    </SectionCreator>
+    </Section>
   );
 }

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

@@ -2,8 +2,8 @@ import React from "react";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid2";
 // GLOBAL CUSTOM COMPONENTS
-import { SectionHeader } from "@evenicanpm/storefront-core/src/components-v2/section-header/index";
-import ProductCard1 from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-1/index";
+import { Section } from "@evenicanpm/storefront-core/src/components-v2/section";
+import ProductCard from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card/index";
 // CUSTOM DATA MODEL
 
 interface Product {
@@ -17,32 +17,47 @@ interface Product {
   uom: string;
 }
 
-// ==============================================================
 type Props = { products: Product[]; heading: string };
-// ==============================================================
 
 export default function ProductGridList({ products, heading }: Props) {
   return (
     <Box flex="1 1 0">
-      <SectionHeader title={heading} seeMoreLink="#" />
-
-      <Grid container spacing={3}>
-        {products.map((item) => (
-          <Grid size={{ lg: 4, sm: 6, xs: 12 }} key={item.id}>
-            <ProductCard1
-              hoverEffect
-              id={item.id}
-              slug={item.slug}
-              title={item.title}
-              price={item.price}
-              rating={item.rating}
-              imgUrl={item.thumbnail}
-              discount={item.discount}
-              // TODO: causing ts error => uom={item.uom}
-            />
-          </Grid>
-        ))}
-      </Grid>
+      <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>
   );
 }

package/src/components/_components/wishlist/add-to-wishlist-dialog.tsx

@@ -7,7 +7,7 @@ import { MdFavorite } from "react-icons/md";
 import DashboardHeader from "./components/dashboard-header";
 import CreateWishlistButton from "./components/create-wishlist-button";
 import WishlistModalItem from "./components/wishlist-modal-item";
-import NoRecords from "./components/no-records";
+import NoRecords from "@evenicanpm/storefront-core/src/components-v2/no-records";
 // API
 import {
   CopyCartToWishlistInput,

package/src/components/_components/wishlist/remove-from-wishlist-dialog.tsx

@@ -6,7 +6,7 @@ import { MdFavorite } from "react-icons/md";
 // Global Custom components
 import DashboardHeader from "./components/dashboard-header";
 import WishlistModalItem from "./components/wishlist-modal-item";
-import NoRecords from "./components/no-records";
+import NoRecords from "@evenicanpm/storefront-core/src/components-v2/no-records";
 // API
 import getWishlists from "@/api-manager/services/user/queries/get-wishlists";
 import {

package/src/components/_components/wishlist-modal/add-to-wishlist-dialog.tsx

@@ -7,7 +7,7 @@ import { MdFavorite } from "react-icons/md";
 import DashboardHeader from "../../../pages/account/dashboard-header";
 import CreateWishlistButton from "../../../pages/account/wishlist/create-wishlist-button";
 import WishlistModalItem from "./wishlist-modal-item";
-import NoRecords from "../../../pages/account/no-records";
+import NoRecords from "@evenicanpm/storefront-core/src/components-v2/no-records";
 // API
 import {
   CopyCartToWishlistInput,

package/src/components/_components/wishlist-modal/remove-from-wishlist-dialog.tsx

@@ -6,7 +6,7 @@ import { MdFavorite } from "react-icons/md";
 // Global Custom components
 import DashboardHeader from "../../../pages/account/dashboard-header";
 import WishlistModalItem from "./wishlist-modal-item";
-import NoRecords from "../../../pages/account/no-records";
+import NoRecords from "@evenicanpm/storefront-core/src/components-v2/no-records";
 // API
 import getWishlists from "@/api-manager/services/user/queries/get-wishlists";
 import {