@evenicanpm/storefront-core 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evenicanpm/storefront-core",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Core module for D365/e4 Headless Storefront",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -31,6 +31,7 @@
     "@tanstack/react-query": "^5.76.1",
     "next": "^15.2.1",
     "next-auth": "^4.24.11",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "object-mapper": "^6.2.0"
   }
 }

package/src/api-manager/datasources/d365/d365-address.datasource.ts

@@ -70,7 +70,7 @@ class D365AddressDatasource extends D365DatasourceBase implements AddressApi {
     }
 
     const updatedCustomer = await updateAsync(context as any, customer);
-    const rec = updatedCustomer.Addresses[idx];
+    const rec = updatedCustomer?.Addresses?.[idx];
     if (!rec || rec.RecordId == null) {
       throw new Error(
         `Failed to update address Id=${address.Id}. Updated address record with a matching id not found.`,

package/src/api-manager/datasources/d365/d365-user.datasource.ts

@@ -282,22 +282,3 @@ class D365UserDatasource extends D365DatasourceBase implements UserApi {
   }
 }
 export default D365UserDatasource;
-
-type TokenData = {
-  aud: string;
-  iss: string;
-  exp: number;
-  nbf: number;
-  oid: string;
-  sub: string;
-  emails: string[];
-  email?: string;
-  newUser: boolean;
-  given_name: string;
-  family_name: string;
-  tfp: string;
-  scp: string;
-  azp: string;
-  ver: string;
-  iat: number;
-};

package/src/api-manager/datasources/e4/e4-cart.datasource.ts

@@ -244,8 +244,8 @@ const cart: CartApi = {
       SalesLines: [],
     };
   },
-  getCartLinesInventory: function (
-    input: cartSchema.InventorySearchCartLinesCriteriaInput,
+  getCartLinesInventory: function(
+    _input: cartSchema.InventorySearchCartLinesCriteriaInput,
   ): Promise<ProductWarehouseInventoryInformation> {
     throw new Error("Function not implemented.");
   },

package/src/api-manager/datasources/e4/e4-product.datasource.ts

@@ -12,7 +12,8 @@ import {
 import * as translator from "./e4.translator";
 import getGraphqlClient from "../../lib/get-graphql-client";
 import { ProductApi } from "../../types/Datasource";
-import { generateCategoryFilterString } from "./e4.translator";
+// See TODO below
+//import { generateCategoryFilterString } from "./e4.translator";
 
 const product: ProductApi = {
   async getProductById(
@@ -61,7 +62,9 @@ const product: ProductApi = {
     const { data, errors } = await e4Api.productTypeaheadSearchByCategory({
       input: {
         search: input.searchText,
-        categoryId: await generateCategoryFilterString(input.category ?? 0),
+        // TODO: investigate why this was added..
+        // it's throwing a type error.
+        //categoryId: await generateCategoryFilterString(input.category ?? 0),
         top: 10,
         skip: 0,
       },
@@ -152,10 +155,22 @@ const product: ProductApi = {
   ): Promise<ProductSearchResult[]> {
     throw new Error(`Function not implemented.${input}`);
   },
-  getProductPrices: function (
+  async getProductPrices(
     input: productSchema.ProductPriceInput,
   ): Promise<productSchema.ProductPrice[]> {
-    throw new Error("Function not implemented.");
+    const e4Api = await getGraphqlClient();
+    const { data, errors } = await e4Api.GetProductsByIds({
+      ids: input.productIds?.map(String),
+    });
+
+    if (errors) {
+      throw new Error("Error getting products");
+    }
+
+    const translatedData = translator.productPricesTransformValidate(
+      data?.getProductsByIds as Product[],
+    );
+    return translatedData;
   },
 };
 

package/src/api-manager/datasources/e4/e4.datasource.ts

@@ -3,7 +3,7 @@ import getGraphqlClient from "../../lib/get-graphql-client";
 import { Category as E4Category } from "./graphqlRequestSdk";
 import * as translator from "./e4.translator";
 // Data source files
-import user from "./e4-user.datasource";
+import user from "./user/e4-user.datasource";
 import session from "./e4-session.datasource";
 import { cart } from "./e4-cart.datasource";
 import order from "./e4-order.datasource";
@@ -14,7 +14,6 @@ import organization from "./e4-organization.datasource";
 
 const E4Datasource: PrimaryDatasource = {
   name: "e4",
-
   user,
   session,
   cart,

package/src/api-manager/datasources/e4/e4.remaps.ts

@@ -63,6 +63,30 @@ export const productMap = {
   },
 };
 
+export const productPricesMap = {
+  id: [
+    {
+      key: "ProductId",
+      transform: (id: string) => {
+        if (id !== null) return parseInt(id);
+      },
+    },
+    {
+      key: "ListingId",
+      transform: (id: string) => {
+        if (id !== null) return parseInt(id);
+      },
+    },
+  ],
+  price: [
+    { key: "Price", default: 0 },
+    { key: "BasePrice", default: 0 },
+    { key: "AdjustedPrice", default: 0 },
+    { key: "CustomerContextualPrice", default: 0 },
+  ],
+  sku: "ItemId",
+};
+
 export const productDetailsMap = {
   ...productMap,
   MasterProductId: "MasterProductId",

package/src/api-manager/datasources/e4/e4.translator.ts

@@ -4,6 +4,7 @@ import {
   productSchema,
   ProductDetails,
   SearchByCriteriaInput,
+  ProductPrice,
 } from "@/api-manager/schemas/product.schema";
 import { Address } from "@/api-manager/schemas/address.schema";
 import { User } from "@/api-manager/schemas/user.schema";
@@ -31,12 +32,14 @@ import {
   cartMap,
   productDetailsMap,
   productMap,
+  productPricesMap,
   addressReverseMap,
   countriesMap,
   countryMap,
   deliveryOptionsMap,
 } from "./e4.remaps";
 import { CategoryHierarchy } from "@/lib/category-helpers";
+import { productPriceSchema } from "@/api-manager/schemas/d365.schema";
 
 interface TransformedRefinerValue {
   RefinerRecordId: number;
@@ -338,6 +341,20 @@ export const productTransformValidate = (
   return translatedData;
 };
 
+export const productPricesTransformValidate = (
+  products: Product[],
+): ProductPrice[] => {
+  const translatedData = products.map(
+    (p) => merge(p, productPricesMap) as ProductPrice,
+  );
+  try {
+    translatedData.map((pp: ProductPrice) => productPriceSchema.parse(pp));
+  } catch (e) {
+    console.warn("ProductPrice data does not match retail-proxy schema", e);
+  }
+  return translatedData;
+};
+
 export const productWithCategoryTransformValidate = (
   productData: Product,
 ): ProductSearchResult => {

package/src/api-manager/datasources/e4/{e4-user.datasource.ts → user/e4-user.datasource.ts}

@@ -1,4 +1,4 @@
-import getGraphqlClient from "../../lib/get-graphql-client";
+import getGraphqlClient from "../../../lib/get-graphql-client";
 import {
   CopyCartToWishlistInput,
   User,
@@ -8,10 +8,11 @@ import {
   WishlistDetailInput,
   WishlistLinesInput,
 } from "@/api-manager/schemas/user.schema";
-import * as translator from "./e4.translator";
-import { userMap } from "./e4.remaps";
+import * as translator from "../e4.translator";
+import { userMap } from "../e4.remaps";
 import { merge } from "object-mapper";
 import { UserApi } from "@/api-manager/types/Datasource";
+import { translateWishList } from "./e4-user.translator";
 
 const user: UserApi = {
   async updateUser(user: User): Promise<User> {
@@ -54,18 +55,15 @@ const user: UserApi = {
       addressCount: data?.getAddressCount ?? 0,
     };
   },
-
-  //TODO: Fix the wishlist return and map to schema.
   async getWishlists(): Promise<Wishlist[]> {
     const e4Api = await getGraphqlClient(true);
 
     const { data, errors } = await e4Api.e4WishListListSM();
-
     if (errors) {
       throw new Error("Error getting wishlists");
     }
 
-    return (data?.wishlistList?.nodes as Wishlist[]) ?? [];
+    return translateWishList(data);
   },
 
   async getWishlistDetails(input: WishlistDetailInput): Promise<Wishlist> {

package/src/api-manager/datasources/e4/user/e4-user.remaps.ts

@@ -0,0 +1,4 @@
+export const wishListMap = {
+  "[].id": "[].Id",
+  "[].name": "[].Name",
+};

package/src/api-manager/datasources/e4/user/e4-user.translator.ts

@@ -0,0 +1,10 @@
+import { E4WishListListSmQuery } from "../graphqlRequestSdk";
+import { merge } from "object-mapper";
+import { wishListMap } from "./e4-user.remaps";
+import { Wishlist } from "@/api-manager/schemas/user.schema";
+
+export const translateWishList = (data: E4WishListListSmQuery) => {
+  const e4WishList = data.wishlistList.nodes;
+  const translatedData = merge(e4WishList, wishListMap) as Wishlist[];
+  return translatedData;
+};

package/src/api-manager/index.ts

@@ -83,26 +83,41 @@ async function createApiManager() {
   );
 
   const getDatasource = (entityName: EntityNames) => {
-    // Overrides from storefront
+    // Project-Level Overrides
+    let projectOverrides = {};
     if (storefrontOverrides?.[OVERRIDES_FILE]?.["default"]?.[entityName]) {
-      return storefrontOverrides[OVERRIDES_FILE]["default"];
+      projectOverrides =
+        storefrontOverrides[OVERRIDES_FILE]["default"][entityName];
     }
 
+    // Config-Level Overrides
     const override = config?.overrides?.[entityName];
+
+    // Build the base entity from api-manager config settings
+    let baseEntity = {};
     if (override) {
-      return (
+      baseEntity =
         secondaryDatasources.find((ds) => ds.name === override) ??
-        primaryDatasource
-      );
+        primaryDatasource;
+    } else {
+      baseEntity = primaryDatasource;
+    }
+
+    // Attach Project Overrides to Entity
+    for (const key in projectOverrides) {
+      baseEntity[entityName][key] = projectOverrides[key];
     }
-    return primaryDatasource;
+
+    return baseEntity;
   };
+
   const datasources = {};
 
   CORE_DATASOURCES.forEach((entityName) => {
     const datasource = getDatasource(entityName as EntityNames);
     datasources[entityName] = datasource[entityName];
   });
+
   storefrontOverrides[OVERRIDES_FILE]?.default &&
     Object.keys(storefrontOverrides[OVERRIDES_FILE]["default"]).forEach(
       (key) => {

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

@@ -59,7 +59,7 @@ export const productWCategorySchema = productSchema.extend({
 });
 
 export const getProductByIdInput = z.object({
-  id: z.number().or(z.string()),
+  id: z.number().or(z.string()).or(z.undefined()),
 });
 
 export const getRelatedProductsInput = z.object({

package/src/api-manager/services/address/queries/get-states.ts

@@ -5,7 +5,7 @@ import { createQuery, createApiPath } from "../../create-query";
 const apiPath = createApiPath("address", "getStates");
 const config = {
   queryKey: "states",
-  disableProperties: ["countryId"],
+  disableProperties: ["countryId"] as Array<keyof GetStatesInput>,
 };
 
 const getStates = createQuery<GetStatesInput, StateProvinceInfo[]>(

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

@@ -13,6 +13,7 @@ import { Mutex } from "async-mutex";
 import { manuallyRetrieveSessionCookie } from "@/auth/next-auth-cookie-manager";
 import { getSession } from "next-auth/react";
 import jwt from "jsonwebtoken";
+import signOut from "@/auth/signout";
 
 const QUERY_ROUTE = "/api";
 const mutex = new Mutex();
@@ -104,6 +105,11 @@ export const createQuery = <TInput, TOutput>(
       body: JSON.stringify({ input, apiManagerPath }),
       headers,
     });
+
+    if (result.status === 401) {
+      // If unauthenticated , sign out the user
+      signOut();
+    }
     return await result.json();
   };
 
@@ -191,6 +197,9 @@ export const createQuery = <TInput, TOutput>(
 
     const currentTime = Math.floor(Date.now() / 1000);
 
+    // Use this for testing - expires after 60 seconds (1 min) from issued-at time
+    // const isExpired = !!decoded && typeof decoded.iat === "number" && currentTime > decoded.iat + 60;
+
     const isExpired =
       !!decoded && typeof decoded.exp === "number" && decoded.exp < currentTime;
 
@@ -220,9 +229,7 @@ export const createQuery = <TInput, TOutput>(
         headers.append("should-refresh-token", "true");
       }
       // Call do fetch with the headers
-      const response = await doFetch(input, apiManagerPath, headers);
-
-      return response.json();
+      return await doFetch(input, apiManagerPath, headers);
     } catch (error) {
       // Handle API Error
       console.error("Error fetching data:", error);

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

@@ -54,16 +54,16 @@ export interface DatasourceApis {
   organization: OrganizationApi;
 }
 
-export abstract class Datasource implements DatasourceApis {
+export abstract class Datasource {
   public name: string;
-  abstract user: UserApi;
-  abstract cart: CartApi;
-  abstract product: ProductApi;
-  abstract categories: CategoryApi;
-  abstract order: OrderApi;
-  abstract address: AddressApi;
-  abstract organization: OrganizationApi;
-  abstract session: SessionApi;
+  abstract user: Partial<UserApi>;
+  abstract cart: Partial<CartApi>;
+  abstract product: Partial<ProductApi>;
+  abstract categories: Partial<CategoryApi>;
+  abstract order: Partial<OrderApi>;
+  abstract address: Partial<AddressApi>;
+  abstract organization: Partial<OrganizationApi>;
+  abstract session: Partial<SessionApi>;
 
   constructor(name: string) {
     this.name = name;

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

@@ -1,23 +1,22 @@
 // Template: Market1
 import React from "react";
 
-// Custom Icon Component
+// ICONS
 import { Light } from "../../Icons/index";
 import { Box } from "@mui/system";
 
-// Global Custom Components
+// GLOBAL COMPONENTS
 import { Carousel } from "@/components/_components/carousel/index";
 import { SectionCreator } from "@/components/_components/section-header/index";
-import ProductCard1 from "@/components/_components/product-cards/product-card-1/index";
+import ProductCard1Wrapper from "@/components/_components/product-cards/product-card-1/product-card-1-wrapper";
 
-// @/cms
+// CMS
 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;
@@ -63,7 +62,7 @@ export default async function ProductCarousel(data: ProductCarouselBlock) {
         <Carousel responsive={responsive} height={445} autoplay={true}>
           {combinedData?.map((item: CombinedProduct) => (
             <Box pb={0.6} key={item.id}>
-              <ProductCard1
+              <ProductCard1Wrapper
                 id={item?.RecordId}
                 slug={item?.ItemId ?? ""}
                 title={item?.Name ?? ""}
@@ -71,6 +70,7 @@ export default async function ProductCarousel(data: ProductCarouselBlock) {
                 rating={0}
                 imgUrl={getImageUrl(item?.image?.[0]?.formats ?? {})}
                 discount={0}
+                mode="PLP"
                 //uom={item?.uom?.nodes[0].id}
               />
             </Box>

package/src/components/_components/navbar/category-based-menu/components/categories.tsx

@@ -1,6 +1,6 @@
 import ChevronRight from "@mui/icons-material/ChevronRight";
 // GLOBAL CUSTOM HOOK
-import useSettings from "@/components/_components/hooks/useSettings";
+import useSettings from "@/hooks/use-settings";
 // STYLED COMPONENTS
 import { CategoryList, CategoryListItem } from "../styles";
 

package/src/components/_components/navbar/mega-menu/mega-menu.tsx

@@ -5,7 +5,7 @@ import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 // GLOBAL CUSTOM COMPONENTS
 import FlexRowCenter from "@/components/_components/flex-box/flex-row-center";
 // GLOBAL CUSTOM HOOKS
-import useOverflowDetect from "@/components/_components/hooks/useOverflowDetect";
+import useOverflowDetect from "@/hooks/use-overflow-detect";
 // LOCAL CUSTOM COMPONENT
 import CategoryList from "./category-list";
 // STYLED COMPONENTS

package/src/components/_components/navbar/nav-list/nav-item-child.tsx

@@ -7,8 +7,8 @@ import MenuItem from "@mui/material/MenuItem";
 import ArrowLeft from "@mui/icons-material/ArrowLeft";
 import ArrowRight from "@mui/icons-material/ArrowRight";
 // GLOBAL CUSTOM HOOKS
-import useOverflowDetect from "@/components/_components/hooks/useOverflowDetect";
-import useSettings from "@/components/_components/hooks/useSettings";
+import useOverflowDetect from "@/hooks/use-overflow-detect";
+import useSettings from "@/hooks/use-settings";
 // GLOBAL CUSTOM COMPONENTS
 import { Span } from "@/components/_components/Typography";
 import BazaarCard from "@/components/_components/BazaarCard";

package/src/components/_components/product-dimensions/product-dimensions.tsx

@@ -0,0 +1,114 @@
+"use client";
+import Box from "@mui/material/Box";
+import Chip from "@mui/material/Chip";
+import { H6 } from "@/components/_components/Typography";
+
+import {
+  ProductDimensionType,
+  ProductDimensionValueInventoryAvailability,
+} from "@msdyn365-commerce/retail-proxy";
+import { useTranslations } from "next-intl";
+
+// ================================================================
+type Props = {
+  dimensionGroups: ProductDimensionValueInventoryAvailability[][];
+  selectDimensions: Record<number, ProductDimensionValueInventoryAvailability>;
+  handleChangeVariant: (
+    dimension: ProductDimensionValueInventoryAvailability,
+  ) => void;
+  showDimensionError?: boolean;
+};
+// ================================================================
+
+export default function ProductDimensions({
+  dimensionGroups,
+  selectDimensions,
+  handleChangeVariant,
+  showDimensionError,
+}: Props) {
+  const t = useTranslations("productDetail.Dimensions");
+  const hasSelectedDimension = (
+    dimension: ProductDimensionValueInventoryAvailability[],
+  ) => {
+    return dimension.some((dim) =>
+      Object.values(selectDimensions).some(
+        (selectedDimension) =>
+          selectedDimension.DimensionValue?.RecordId ===
+          dim.DimensionValue?.RecordId,
+      ),
+    );
+  };
+
+  return (
+    <>
+      {Array.isArray(dimensionGroups) &&
+        dimensionGroups.map((dimensions, i) => (
+          <Box key={i} mb={2}>
+            <H6 mb={1}>
+              {ProductDimensionType[dimensions[0]?.DimensionTypeValue || 0]}
+            </H6>
+            {dimensions.map((dimension) => {
+              // CHECK STOCK
+              const disabled =
+                dimension.TotalAvailableInventoryLevelCode !== "AVAIL";
+              const selected =
+                selectDimensions[dimension.DimensionTypeValue || 0]
+                  ?.DimensionValue === dimension.DimensionValue;
+
+              // SWATCH DIMENSIONS
+              if (
+                ProductDimensionType[dimension.DimensionTypeValue || 0] ===
+                "Color"
+              ) {
+                return (
+                  <Chip
+                    key={dimension.DimensionValue?.RecordId}
+                    onClick={() => {
+                      handleChangeVariant(dimension);
+                    }}
+                    disabled={disabled}
+                    sx={{
+                      borderRadius: "100%",
+                      mr: 1,
+                      cursor: "pointer",
+                      backgroundColor: dimension.DimensionValue?.Value,
+                      width: 32,
+                      height: 32,
+                      border: selected ? "2px solid" : "2px solid transparent",
+                      "&:hover": {
+                        backgroundColor: dimension.DimensionValue?.Value,
+                      },
+                    }}
+                  />
+                );
+              }
+
+              // TEXT DIMENSIONS
+              return (
+                <Chip
+                  key={dimension.DimensionValue?.RecordId}
+                  label={dimension.DimensionValue?.Value}
+                  onClick={() => {
+                    handleChangeVariant(dimension);
+                  }}
+                  disabled={disabled}
+                  sx={{ borderRadius: "4px", mr: 1, cursor: "pointer", mb: 1 }}
+                  color={selected ? "primary" : "default"}
+                />
+              );
+            })}
+            {showDimensionError && !hasSelectedDimension(dimensions) && (
+              <H6 color="error.main" mb={1}>
+                {t("selectError", {
+                  dimension:
+                    ProductDimensionType[
+                      dimensions[0]?.DimensionTypeValue || 0
+                    ],
+                })}
+              </H6>
+            )}
+          </Box>
+        ))}
+    </>
+  );
+}