@evenicanpm/storefront-core 1.0.0-alpha → 1.0.0

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

@@ -1,5 +1,6 @@
 import * as cartSchemas from "@/api-manager/schemas/cart.schema";
 import * as productSchemas from "@/api-manager/schemas/product.schema";
+import * as userSchemas from "@/api-manager/schemas/user.schema";
 import { User, UserCounts } from "@/api-manager/schemas/user.schema";
 import {
   Session,
@@ -31,6 +32,7 @@ import {
   SimpleProduct,
   StateProvinceInfo,
   ProductWarehouseInventoryAvailability,
+  ProductWarehouseInventoryInformation,
 } from "@msdyn365-commerce/retail-proxy";
 import {
   CategoriesQuery,
@@ -89,14 +91,34 @@ export interface OrganizationApi {
  * User Data Actions
  */
 export interface UserApi {
+  updateUser(user: userSchemas.User): Promise<userSchemas.User>;
+  getUser(): Promise<userSchemas.User | null>;
+  getUserCounts(userId: string): Promise<UserCounts>;
+  // wishlists
+  getWishlists(): Promise<userSchemas.Wishlist[]>;
+  getWishlistDetails(
+    input: userSchemas.WishlistDetailInput,
+  ): Promise<userSchemas.ExtendedWishlist>;
+  createWishlist(
+    input: userSchemas.WishlistCreateInput,
+  ): Promise<userSchemas.Wishlist>;
+  deleteWishlist(input: userSchemas.WishlistDetailInput): Promise<void>;
+  updateWishlist(
+    // input: userSchemas.UpdateWishlistInput,  // used to change wishlist name
+    input: userSchemas.WishlistLinesInput,
+  ): Promise<userSchemas.Wishlist>;
+  addProductsToWishlist(
+    input: userSchemas.WishlistLinesInput,
+  ): Promise<userSchemas.Wishlist>;
+  removeProductsFromWishlist(
+    input: userSchemas.WishlistLinesInput,
+  ): Promise<void>;
+  copyCartToWishlist(
+    input: userSchemas.CopyCartToWishlistInput,
+  ): Promise<userSchemas.Wishlist>;
   updateUser(user: User): Promise<User>;
   getUser(): Promise<User | null>;
   getUserCounts(userId: string): Promise<UserCounts>;
-  // wishlists
-  getWishlists(): Promise<WishList[]>;
-  getWishlistDetails(id: string): Promise<WishList>;
-  createWishlist(wishlist: CreateWishListInput): Promise<WishList>;
-  deleteWishlist(id: string): Promise<string>;
 }
 
 /**
@@ -142,6 +164,9 @@ export interface CartApi {
     input: cartSchemas.RetrieveCardPaymentAcceptResultInput,
   ): Promise<CardPaymentAcceptResult>;
   checkout(input: cartSchemas.CheckoutInput): Promise<SalesOrder>;
+  getCartLinesInventory(
+    input: cartSchemas.InventorySearchCartLinesCriteriaInput,
+  ): Promise<ProductWarehouseInventoryInformation>;
 }
 
 /**
@@ -167,6 +192,9 @@ export interface ProductApi {
   getInventory(
     input: productSchemas.InventorySearchCriteriaInput,
   ): Promise<ProductWarehouseInventoryAvailability>;
+  getProductPrices(
+    input: productSchemas.ProductPriceInput,
+  ): Promise<productSchemas.ProductPrice[]>;
 }
 
 /**

package/src/auth/auth-options.ts

@@ -8,7 +8,7 @@ import {
 } from "next";
 import { getProviders } from "./providers";
 import { deleteCartCookie } from "@/lib/cart-cookie-handler";
-import { getConfig } from "@config";
+import { getSecret } from "@evenicanpm/common-core/keyvault";
 
 // Split providers into separate array so we can iterate them and match the provider ID
 export type ExtendedJwtToken = JWT & {
@@ -20,7 +20,7 @@ export type ExtendedSession = Session & { token?: JWT };
 
 const createAuthOptions = (): NextAuthOptions => {
   const providers = getProviders();
-  const secret = getConfig().NEXTAUTH_SECRET;
+  const secret = getSecret("NEXTAUTH_SECRET");
   return {
     providers,
     secret,

package/src/auth/msal.ts

@@ -1,15 +1,15 @@
 import { PublicClientApplication, Configuration } from "@azure/msal-browser";
-import { getConfig } from "@config";
 
 const createMsalConfig = (): Configuration => {
   return {
     auth: {
-      clientId: getConfig().AZURE_AD_B2C_CLIENTID, //process.env.NEXT_PUBLIC_AZURE_AD_B2C_CLIENTID || "",
-      authority: getConfig().AZURE_AD_B2C_LOGIN_AUTHORITY, //process.env.NEXT_PUBLIC_AZURE_AD_B2C_LOGIN_AUTHORITY || "",
-      redirectUri: "/", //process.env.NEXT_PUBLIC_AZURE_AD_B2C_REDIRECT || "/",
-      postLogoutRedirectUri: getConfig().AZURE_AD_B2C_POST_LOGOUT_REDIRECT, //process.env.NEXT_PUBLIC_AZURE_AD_B2C_POST_LOGOUT_REDIRECT || "/",
+      clientId: process.env.NEXT_PUBLIC_AZURE_AD_B2C_CLIENTID || "",
+      authority: process.env.NEXT_PUBLIC_AZURE_AD_B2C_LOGIN_AUTHORITY || "",
+      redirectUri: process.env.NEXT_PUBLIC_AZURE_AD_B2C_REDIRECT || "/",
+      postLogoutRedirectUri:
+        process.env.NEXT_PUBLIC_AZURE_AD_B2C_POST_LOGOUT_REDIRECT || "/",
       knownAuthorities: [
-        getConfig().AZURE_AD_B2C_KNOWN_AUTHORITY, //process.env.NEXT_PUBLIC_AZURE_AD_B2C_KNOWN_AUTHORITY || "",
+        process.env.NEXT_PUBLIC_AZURE_AD_B2C_KNOWN_AUTHORITY || "",
       ],
       navigateToLoginRequestUrl: true,
     },
@@ -44,11 +44,11 @@ const getMsalInstance = () => {
 };
 
 const getRequestConfig = (requestType?: string) => {
-  const editAuthority = getConfig().AZURE_AD_B2C_EDIT_AUTHORITY;
-  const resetAuthority = getConfig().AZURE_AD_B2C_RESET_AUTHORITY;
+  const editAuthority = process.env.NEXT_PUBLIC_AZURE_AD_B2C_EDIT_AUTHORITY;
+  const resetAuthority = process.env.NEXT_PUBLIC_AZURE_AD_B2C_RESET_AUTHORITY;
 
   const baseRequest = {
-    scopes: [getConfig().AZURE_AD_B2C_API_PERMISSION],
+    scopes: [process.env.NEXT_PUBLIC_AZURE_AD_B2C_API_PERMISSION],
     authority: createMsalConfig().auth.authority,
   };
 

package/src/auth/next-auth-cookie-manager.ts

@@ -6,6 +6,8 @@ import { ExtendedJwtToken } from "@/auth/auth-options";
 const NEXT_AUTH_COOKIE_NAME = "next-auth.session-token";
 const SECURE_COOKIE_PREFIX = "__Secure-";
 
+import { getSecret } from "@evenicanpm/common-core/keyvault";
+
 /**
  * Retrieves and decodes the NextAuth session cookie from the request.
  *
@@ -28,7 +30,7 @@ const manuallyRetrieveSessionCookie = async () => {
   if (cookie) {
     return decode({
       token: cookie.value,
-      secret: process.env.NEXTAUTH_SECRET || "",
+      secret: getSecret("NEXTAUTH_SECRET") || "",
     });
   }
   //If the cookie is not found, we need to see if there is a chunked cookie
@@ -49,7 +51,7 @@ const manuallyRetrieveSessionCookie = async () => {
   if (cookieValues.length) {
     return decode({
       token: cookieValues.join(""),
-      secret: process.env.NEXTAUTH_SECRET || "",
+      secret: getSecret("NEXTAUTH_SECRET") || "",
     });
   }
 
@@ -73,7 +75,7 @@ const manuallySetSessionCookie = async (token: JWT | ExtendedJwtToken) => {
   // Set the cookie with the name __Secure-next-auth.session-token
   const value = await encode({
     token,
-    secret: process.env.NEXTAUTH_SECRET || "",
+    secret: getSecret("NEXTAUTH_SECRET") || "",
   });
   cookieStore.set({
     name: `${SECURE_COOKIE_PREFIX}${NEXT_AUTH_COOKIE_NAME}`,

package/src/auth/providers/aadb2c-provider.ts

@@ -1,4 +1,3 @@
-import { getConfig } from "@config";
 import AzureADB2CProvider from "next-auth/providers/azure-ad-b2c";
 
 // By default, NextAuth tries to use either PKCE or Client Secret-based authentication, depending on how the provider is configured.
@@ -6,9 +5,9 @@ import AzureADB2CProvider from "next-auth/providers/azure-ad-b2c";
 // If clientSecret is missing, it assumes PKCE.
 // But Azure AD B2C sometimes requires PKCE explicitly, so NextAuth needs to be told to always use PKCE.
 const azureADB2CProvider = () => {
-  const CLIENT_ID = getConfig().AZURE_AD_B2C_CLIENTID;
-  const SCOPE = `${getConfig().AZURE_AD_B2C_API_PERMISSION} offline_access openid`;
-  const LOGIN_AUTHORITY = getConfig().AZURE_AD_B2C_LOGIN_AUTHORITY;
+  const CLIENT_ID = process.env.NEXT_PUBLIC_AZURE_AD_B2C_CLIENTID || "";
+  const SCOPE = `${process.env.NEXT_PUBLIC_AZURE_AD_B2C_API_PERMISSION} offline_access openid`;
+  const LOGIN_AUTHORITY = process.env.NEXT_PUBLIC_AZURE_AD_B2C_LOGIN_AUTHORITY;
 
   return AzureADB2CProvider({
     clientId: CLIENT_ID,

package/src/cms/endpoints.ts

@@ -1,5 +1,4 @@
 import { Formats } from "./interfaces/productData";
-import { getConfig } from "@config";
 
 const apiKeys = {
   pages: "/cms/pages",
@@ -17,12 +16,12 @@ type ApiKeysType = typeof apiKeys;
 type ApiKey = keyof ApiKeysType;
 
 const getCmsApiUrl = (apiKey: ApiKey) => {
-  const cmsApiEndpoint = getConfig().E4_API_ENDPOINT;
+  const cmsApiEndpoint = process.env.NEXT_PUBLIC_E4_API_ENDPOINT;
   return `${cmsApiEndpoint}${apiKeys[apiKey]}`;
 };
 
 const buildCmsMediaUrl = (mediaUrl: string) => {
-  const cmsEndpoint = getConfig().CMS_ENDPOINT;
+  const cmsEndpoint = process.env.NEXT_PUBLIC_CMS_ENDPOINT;
 
   if (mediaUrl === undefined || mediaUrl === null) {
     return "";

package/src/components/_components/LazyImage.tsx

@@ -1,9 +1,12 @@
 "use client";
 
-import NextImage from "next/image";
+import NextImage, { ImageProps } from "next/image";
 import styled from "@mui/material/styles/styled";
+import { ComponentType } from "react";
 
-export default styled(NextImage)({
+const LazyImage: ComponentType<ImageProps> = styled(NextImage)({
   width: "100%",
   height: "auto", //If we use CSS to change the size of image, we should include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.
 });
+
+export default LazyImage;

package/src/components/_components/header/components/user.tsx

@@ -42,7 +42,6 @@ const MENU_ITEMS = [
 interface Props {
   mobile?: boolean;
 }
-
 const User = ({ mobile = false }: Props) => {
   const { data: session, status } = useSession();
 
@@ -115,7 +114,7 @@ const User = ({ mobile = false }: Props) => {
 
   const setAnchorElNull = () => setAnchorEl(null);
 
-  if (status === "loading") return <>Loading...</>;
+  if (status === "loading") return <></>;
 
   if (mobile) {
     return (

package/src/components/_components/product-cards/product-card-1/components/quantity-buttons.tsx

@@ -6,51 +6,60 @@ import Remove from "@mui/icons-material/Remove";
 // GLOBAL CUSTOM COMPONENTS
 import { FlexBox } from "@/components/_components/flex-box/index";
 import { Paragraph } from "@/components/_components/Typography";
+import { CircularProgress } from "@mui/material";
 
 // ==============================================================
 interface Props {
   quantity: number;
   handleDecrement: () => void;
   handleIncrement: () => void;
+  isLineUpdating: boolean;
 }
 // ==============================================================
 
 export default function QuantityButtons(props: Props) {
-  const { quantity, handleDecrement, handleIncrement } = props || {};
+  const { quantity, handleDecrement, handleIncrement, isLineUpdating } =
+    props || {};
 
   return (
     <FlexBox
-      width="30px"
       alignItems="center"
       className="add-cart"
-      flexDirection="column-reverse"
+      flexDirection="row-reverse"
       justifyContent={quantity ? "space-between" : "flex-start"}
+      gap={1}
     >
       <Button
         color="primary"
         variant="outlined"
         onClick={handleIncrement}
         sx={{ padding: "3px" }}
+        disabled={isLineUpdating}
       >
         <Add fontSize="small" />
       </Button>
 
-      {quantity ? (
+      {quantity && (
         <Fragment>
-          <Paragraph color="text.primary" fontWeight="600">
-            {quantity}
-          </Paragraph>
+          {isLineUpdating ? (
+            <CircularProgress size={"10px"} color={"primary"} />
+          ) : (
+            <Paragraph color="text.primary" fontWeight="600">
+              {quantity}
+            </Paragraph>
+          )}
 
           <Button
             color="primary"
             variant="outlined"
             onClick={handleDecrement}
             sx={{ padding: "3px" }}
+            disabled={isLineUpdating}
           >
             <Remove fontSize="small" />
           </Button>
         </Fragment>
-      ) : null}
+      )}
     </FlexBox>
   );
 }

package/src/components/_components/product-cards/product-card-1/product-card-1-wrapper.tsx

@@ -0,0 +1,304 @@
+"use client";
+
+import { IconButton } from "@mui/material";
+import ProductCard1 from "./product-card";
+import { Delete, ShoppingCart } from "@mui/icons-material";
+import {
+  ExtendedProductListLine,
+  ExtendedWishlist,
+  WishlistLinesInput,
+} from "@/api-manager/schemas/user.schema";
+import { useTranslations } from "next-intl";
+import useRemoveFromWishlist from "@/api-manager/services/user/mutations/remove-from-wishlist";
+import HoverActions from "./components/hover-actions";
+import { useState } from "react";
+import useUpdateWishlist from "@/api-manager/services/user/mutations/update-wishlist";
+import useAddToCart from "@/api-manager/services/cart/mutations/add-to-cart";
+import { Cart } from "@/api-manager/schemas/cart.schema";
+import { FlexBox } from "@/_components/flex-box";
+import AddToWishlistDialog from "@/_components/wishlist/add-to-wishlist-dialog";
+import RemoveFromWishlistDialog from "@/_components/wishlist/remove-from-wishlist-dialog";
+import ProductViewDialog from "@/_components/products-view/product-view-dialog";
+import { useNotification } from "@/components/Notifications/use-notification";
+
+type Props = {
+  title: string;
+  slug: string;
+  price: number;
+  imgUrl: string;
+  rating?: number;
+  discount?: number;
+  id: string | number;
+  hideRating?: boolean;
+  hoverEffect?: boolean;
+  showProductSize?: boolean;
+  mode: "PLP" | "WishlistDetail";
+  isFavorite?: boolean; //  when called from PLP, whether the product is in a wishlist
+  wishlist?: ExtendedWishlist; // when called from wishlist detail page
+  cart?: Cart; // for adding wishlist item to cart in wishlist detail page
+};
+export default function ProductCard1Wrapper({
+  id,
+  slug,
+  title,
+  price,
+  imgUrl,
+  rating = 5,
+  hideRating,
+  hoverEffect,
+  discount = 5,
+  showProductSize,
+  mode,
+  isFavorite,
+  wishlist,
+  cart,
+}: Props) {
+  const t = useTranslations("Account.Wishlists");
+  const { setNotification } = useNotification();
+  const { mutateAsync: removeFromWishlist } = useRemoveFromWishlist();
+  const { mutateAsync: updateWishlist } = useUpdateWishlist();
+  const [favorite, setFavorite] = useState(isFavorite || false);
+  const [openAddToWishlistDialog, setOpenAddToWishlistDialog] = useState(false);
+  const [openRemoveFromWishlistDialog, setOpenRemoveFromWishlistDialog] =
+    useState(false);
+  const [openProductModal, setOpenProductModal] = useState(false);
+  const [quantity, setQuantity] = useState(
+    wishlist?.ProductListLines?.find(
+      (item: ExtendedProductListLine) => item.ProductId === id,
+    )?.Quantity || 0,
+  );
+  const [isLineUpdating, setIsLineUpdating] = useState(false);
+  const { mutateAsync: addToCart } = useAddToCart();
+
+  const handleRemoveFromWishlist = async (productId: string | number) => {
+    try {
+      const extendedWishlistLine = wishlist?.ProductListLines?.find(
+        (item: ExtendedProductListLine) => item.ProductId === productId,
+      );
+
+      if (extendedWishlistLine && wishlist) {
+        const { ...wishlistLine } = extendedWishlistLine;
+        delete wishlistLine.Product;
+
+        const wishlistLinesInput: WishlistLinesInput = {
+          Id: wishlist.Id,
+          ProductListLines: [wishlistLine],
+        };
+
+        await removeFromWishlist(wishlistLinesInput);
+        setNotification({
+          message: t("wishlistLineRemoveSuccess"),
+          severity: "success",
+        });
+      }
+    } catch (error) {
+      setNotification({
+        message: t("wishlistLineRemoveFailed"),
+        severity: "error",
+      });
+    }
+  };
+
+  const handleToggleFavorite = () => {
+    if (favorite) {
+      setOpenRemoveFromWishlistDialog(true);
+    } else {
+      setOpenAddToWishlistDialog(true);
+    }
+  };
+
+  const handleToggleProductModal = () => {
+    setOpenProductModal(!openProductModal);
+  };
+
+  const handleCloseDialog = () => {
+    setOpenAddToWishlistDialog(false);
+    setOpenRemoveFromWishlistDialog(false);
+  };
+
+  const handleAddRemoveSuccess = () => {
+    setFavorite(!favorite);
+  };
+
+  const handleWishlistIncrementQuantity = async () => {
+    setIsLineUpdating(true);
+    // update wishlist product list lines
+    if (mode === "WishlistDetail" && wishlist && wishlist.ProductListLines) {
+      try {
+        const updatedProductListLines = wishlist.ProductListLines.map(
+          (line) => {
+            const { ...wishlistLine } = line;
+            delete wishlistLine.Product;
+            if (line.ProductId === Number(id)) {
+              return {
+                ...wishlistLine,
+                Quantity: quantity + 1,
+              };
+            }
+            return wishlistLine;
+          },
+        );
+        await updateWishlist({
+          Id: wishlist.Id,
+          ProductListLines: updatedProductListLines,
+        });
+        setQuantity(quantity + 1);
+      } catch (error) {
+        // Do nothing
+      }
+    } else {
+      // PLP mode
+      setQuantity(quantity + 1);
+    }
+    setIsLineUpdating(false);
+  };
+
+  const handleWishlistDecrementQuantity = async () => {
+    setIsLineUpdating(true);
+    // update wishlist product list lines
+    if (
+      mode === "WishlistDetail" &&
+      wishlist &&
+      wishlist.ProductListLines &&
+      quantity > 0
+    ) {
+      try {
+        const updatedProductListLines = wishlist.ProductListLines.map(
+          (line) => {
+            const { ...wishlistLine } = line;
+            delete wishlistLine.Product;
+            if (line.ProductId === Number(id)) {
+              return {
+                ...wishlistLine,
+                Quantity: quantity - 1,
+              };
+            }
+            return wishlistLine;
+          },
+        );
+        await updateWishlist({
+          Id: wishlist.Id,
+          ProductListLines: updatedProductListLines,
+        });
+        setQuantity(quantity - 1);
+      } catch (error) {
+        // Do nothing
+      }
+    } else {
+      // PLP mode
+      setQuantity(quantity - 1);
+    }
+    setIsLineUpdating(false);
+  };
+
+  const handleAddItemToCart = async () => {
+    if (!cart) return;
+    try {
+      await addToCart({
+        cartId: cart.Id,
+        version: cart.Version,
+        cartLine: [
+          {
+            ProductId: Number(id),
+            Quantity: quantity,
+          },
+        ],
+      });
+      setNotification({
+        message: "Successfully added item to cart",
+        severity: "success",
+      });
+    } catch (error) {
+      setNotification({
+        message: "Failed to add item to cart",
+        severity: "error",
+      });
+    }
+  };
+
+  // render wishlist controls depending on mode
+  const wishlistControls =
+    mode === "WishlistDetail" ? (
+      // render delete button
+      <>
+        <FlexBox
+          width="25px"
+          alignItems="center"
+          flexDirection="row-reverse"
+          justifyContent="space-between"
+        >
+          <IconButton
+            sx={{ padding: "3px" }}
+            onClick={() => handleAddItemToCart()}
+          >
+            <ShoppingCart fontSize="small" color="inherit" />
+          </IconButton>
+        </FlexBox>
+        <FlexBox
+          width="25px"
+          alignItems="center"
+          flexDirection="row-reverse"
+          justifyContent="space-between"
+        >
+          <IconButton
+            sx={{ padding: "3px" }}
+            onClick={() => handleRemoveFromWishlist(id)}
+          >
+            <Delete fontSize="small" color="inherit" />
+          </IconButton>
+        </FlexBox>
+      </>
+    ) : (
+      // render hover actions for PLP
+      <HoverActions
+        isFavorite={favorite}
+        toggleView={handleToggleProductModal}
+        toggleFavorite={handleToggleFavorite}
+      />
+    );
+
+  return (
+    <>
+      <ProductCard1
+        id={id}
+        slug={slug}
+        title={title}
+        price={price}
+        imgUrl={imgUrl}
+        rating={rating}
+        hideRating={hideRating}
+        hoverEffect={hoverEffect}
+        discount={discount}
+        showProductSize={showProductSize}
+        wishlistControls={wishlistControls}
+        quantity={quantity}
+        isLineUpdating={isLineUpdating}
+        handleIncrementQuantity={handleWishlistIncrementQuantity}
+        handleDecrementQuantity={handleWishlistDecrementQuantity}
+      />
+      {openAddToWishlistDialog && (
+        <AddToWishlistDialog
+          open={openAddToWishlistDialog}
+          handleClose={handleCloseDialog}
+          productId={Number(id)}
+          onSuccess={handleAddRemoveSuccess}
+        />
+      )}
+      {openRemoveFromWishlistDialog && (
+        <RemoveFromWishlistDialog
+          open={openRemoveFromWishlistDialog}
+          handleClose={handleCloseDialog}
+          productId={Number(id)}
+          onSuccess={handleAddRemoveSuccess}
+        />
+      )}
+      {openProductModal && (
+        <ProductViewDialog
+          openDialog={openProductModal || false}
+          handleCloseDialog={handleToggleProductModal}
+          product={{ title, price, id, slug, imgGroup: [imgUrl, imgUrl] }}
+        />
+      )}
+    </>
+  );
+}