@evenicanpm/storefront-core 1.0.0 → 1.0.2

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>
+        ))}
+    </>
+  );
+}

package/src/components/_components/product-quantity-buttons/product-quantity-buttons.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { FlexBox } from "@/components/_components/flex-box";
+import Button from "@mui/material/Button";
+import { H3 } from "@/components/_components/Typography";
+import { MdAdd as Add } from "react-icons/md";
+import { MdRemove as Remove } from "react-icons/md";
+import CircularProgress from "@mui/material/CircularProgress";
+import { CartLine } from "@msdyn365-commerce/retail-proxy";
+import { useTranslations } from "next-intl";
+
+interface Props {
+  loading: boolean;
+  productCartLine: CartLine | undefined;
+  handleCartAmountChange: (amount: number, currentCartLine: CartLine) => void;
+  handleAddToCart: () => void;
+  isOOS: boolean;
+}
+
+export default function QuantityButtons({
+  loading,
+  handleAddToCart,
+  handleCartAmountChange,
+  productCartLine,
+  isOOS,
+}: Props) {
+  const t = useTranslations("productDetail");
+
+  if (!productCartLine?.Quantity || productCartLine.Quantity === 0) {
+    return (
+      <Button
+        color="primary"
+        variant="contained"
+        onClick={handleAddToCart}
+        disabled={isOOS}
+      >
+        {t("btnAddToCart")}
+      </Button>
+    );
+  }
+
+  return (
+    <FlexBox alignItems="center">
+      <Button
+        size="small"
+        sx={{ p: 1 }}
+        color="primary"
+        variant="outlined"
+        disabled={loading}
+        onClick={() =>
+          handleCartAmountChange(
+            (productCartLine?.Quantity || 0) - 1,
+            productCartLine,
+          )
+        }
+      >
+        <Remove fontSize="small" />
+      </Button>
+
+      <H3
+        fontWeight="600"
+        mx={2.5}
+        sx={{ width: "20px", display: "flex", justifyContent: "center" }}
+      >
+        {loading ? (
+          <CircularProgress size={"10px"} />
+        ) : (
+          productCartLine.Quantity.toString().padStart(2, "0")
+        )}
+      </H3>
+
+      <Button
+        size="small"
+        sx={{ p: 1 }}
+        color="primary"
+        variant="outlined"
+        disabled={loading}
+        onClick={() =>
+          handleCartAmountChange(
+            (productCartLine?.Quantity || 0) + 1,
+            productCartLine,
+          )
+        }
+      >
+        <Add fontSize="small" />
+      </Button>
+    </FlexBox>
+  );
+}

package/src/components/_components/section-header/section-header.tsx

@@ -8,7 +8,7 @@ import ArrowRight from "@mui/icons-material/ArrowRight";
 // LOCAL CUSTOM COMPONENTS
 import { H2 } from "../Typography";
 import { FlexBetween, FlexBox } from "../flex-box/index";
-import useSettings from "../hooks/useSettings";
+import useSettings from "../../../hooks/use-settings";
 
 // ===================================================
 interface Props {

package/src/components/_components/settings/setting.tsx

@@ -15,7 +15,7 @@ import { H6 } from "@/components/_components/Typography";
 import Scrollbar from "@/components/_components/scrollbar/scrollbar";
 import FlexBox from "@/components/_components/flex-box/flex-box";
 // GLOBAL CUSTOM HOOK
-import useSettings from "@/components/_components/hooks/useSettings";
+import useSettings from "@/hooks/use-settings";
 // STYLED COMPONENTS
 import {
   BodyWrapper,

package/src/components/_components/wishlist-modal/TODO.md

@@ -0,0 +1,10 @@
+# Wish List Component Dedupe
+
+Found these components inside of the /app directory in storefront,
+seems like someone created duplicates of components that were already
+inside of our client packages wishlist folder.
+
+Todo: Audit two folders and amalgamate duplicate code.
+
+Date: 2025-07-10  
+By: Sam Forderer

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

@@ -0,0 +1,68 @@
+"use client";
+
+import { useState } from "react";
+import { Button, ButtonProps } from "@mui/material";
+import T from "@/components/T";
+import AddToWishlistDialog from "./add-to-wishlist-dialog";
+import { ProductDetails } from "@/api-manager/schemas/product.schema";
+import { Cart } from "@/api-manager/schemas/cart.schema";
+
+interface Props {
+  path: string;
+  product?: ProductDetails;
+  cart?: Cart;
+  variant?: string;
+}
+
+const AddToWishlistButton = (props: Props) => {
+  const [openAddListDialog, setOpenAddListDialog] = useState(false);
+
+  const handleCloseDialog = () => {
+    setOpenAddListDialog(false);
+  };
+
+  const handleCreateNewList = () => {
+    setOpenAddListDialog(true);
+  };
+
+  // conditionally render button styles based on variant (pdp or minicart)
+  let style, btnFullwidth;
+  let btnColor: ButtonProps["color"];
+  let btnVariant: ButtonProps["variant"];
+  switch (props.variant) {
+    case "minicart":
+      style = {
+        px: 4,
+      };
+      btnFullwidth = true;
+      btnVariant = "outlined";
+      btnColor = "primary";
+      break;
+    default:
+      btnFullwidth = false;
+      btnVariant = "contained";
+      btnColor = "secondary";
+      break;
+  }
+
+  return (
+    <>
+      <Button
+        onClick={handleCreateNewList}
+        sx={style}
+        fullWidth={btnFullwidth}
+        color={btnColor}
+      >
+        <T path={props.path} />
+      </Button>
+      <AddToWishlistDialog
+        open={openAddListDialog}
+        handleClose={handleCloseDialog}
+        productId={props.product?.RecordId}
+        cart={props.cart}
+      />
+    </>
+  );
+};
+
+export default AddToWishlistButton;