@evenicanpm/storefront-core 1.0.0-alpha → 1.0.1

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

@@ -0,0 +1,161 @@
+import React, { Fragment } from "react";
+import isFunction from "lodash/isFunction";
+import { useTranslations } from "next-intl";
+import { Grid, Button, Dialog, DialogContent } from "@mui/material";
+import { MdFavorite } from "react-icons/md";
+// Global Custom components
+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";
+// API
+import {
+  CopyCartToWishlistInput,
+  Wishlist,
+  WishlistLinesInput,
+} from "@/api-manager/schemas/user.schema";
+import { Cart } from "@/api-manager/schemas/cart.schema";
+import useAddToWishlist from "@/api-manager/services/user/mutations/add-to-wishlist";
+import { useNotification } from "@/components/Notifications/use-notification";
+import useCopyCartToWishlist from "@/api-manager/services/user/mutations/copy-cart-to-wishlist";
+import { useSession } from "next-auth/react";
+import getWishlists from "@/api-manager/services/user/queries/get-wishlists";
+
+interface Props {
+  open: boolean;
+  handleClose: () => void;
+  productId?: number;
+  cart?: Cart;
+  onSuccess?: () => void;
+}
+
+export default function AddToWishlistDialog(props: Props) {
+  const { data: wishlists, isLoading } = getWishlists.useData();
+
+  const t = useTranslations("Account.Wishlists");
+  const { setNotification } = useNotification();
+
+  const { mutateAsync: addToWishlist } = useAddToWishlist();
+  const { mutateAsync: copyCartToWishlist } = useCopyCartToWishlist();
+
+  const { data: session } = useSession();
+  const isAuthenticated = !!session;
+
+  const handleClose = () => {
+    if (isFunction(props.handleClose)) {
+      props.handleClose();
+    }
+  };
+
+  const handleAddToWishlist = async (wishlistId: string) => {
+    if (props.productId) {
+      try {
+        const wishlistLinesInput: WishlistLinesInput = {
+          Id: wishlistId,
+          ProductListLines: [],
+        };
+
+        wishlistLinesInput.ProductListLines.push({
+          ProductListId: wishlistId,
+          ProductId: props.productId,
+          Quantity: 1,
+          UnitOfMeasure: "ea",
+        });
+        await addToWishlist(wishlistLinesInput);
+        setNotification({
+          message: t("wishlistLineAddSuccess"),
+          severity: "success",
+        });
+        if (isFunction(props.onSuccess)) {
+          props.onSuccess();
+        }
+      } catch (error) {
+        setNotification({
+          message: t("wishlistLineAddFailed"),
+          severity: "error",
+        });
+      }
+    } else if (props.cart) {
+      try {
+        const copyCartToWishlistInput: CopyCartToWishlistInput = {
+          Id: wishlistId,
+          CartID: props.cart.Id,
+          IsRewrite: false,
+          IsQuantityAggregate: true,
+        };
+
+        await copyCartToWishlist(copyCartToWishlistInput);
+        setNotification({
+          message: t("wishlistCartCopySuccess"),
+          severity: "success",
+        });
+      } catch (error) {
+        setNotification({
+          message: t("wishlistCartCopyFailed"),
+          severity: "error",
+        });
+      }
+    }
+  };
+
+  return (
+    <Dialog
+      open={props.open}
+      onClose={handleClose}
+      aria-labelledby="form-dialog-title"
+    >
+      <DialogContent>
+        <Fragment>
+          <DashboardHeader
+            title="Account.Wishlists.heading"
+            Icon={MdFavorite}
+            href=""
+            buttonText=""
+            buttons={
+              isAuthenticated && (
+                <CreateWishlistButton path="Account.Wishlists.btnCreateNewList" />
+              )
+            }
+          />
+          {isAuthenticated && !isLoading ? (
+            wishlists && wishlists.length > 0 ? (
+              wishlists?.map((wishlist: Wishlist) => (
+                <WishlistModalItem
+                  key={wishlist.Id}
+                  wishlist={wishlist}
+                  addToWishlist={handleAddToWishlist}
+                />
+              ))
+            ) : (
+              <NoRecords message="Account.Wishlists.noWishlists" />
+            )
+          ) : (
+            <NoRecords message="Account.Wishlists.wishlistAddUnauthenticated" />
+          )}
+        </Fragment>
+        <Grid container spacing={3}>
+          <Grid
+            item
+            sm={12}
+            xs={12}
+            sx={{
+              display: "flex",
+              justifyContent: "flex-start",
+              gap: 2,
+            }}
+          >
+            <Button
+              color="primary"
+              variant="outlined"
+              size="small"
+              onClick={handleClose}
+              sx={{ height: 30.75 }}
+            >
+              {t("btnCancel")}
+            </Button>
+          </Grid>
+        </Grid>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,174 @@
+import React, { Fragment, useCallback, useEffect } from "react";
+import isFunction from "lodash/isFunction";
+import { useTranslations } from "next-intl";
+import { Grid, Button, Dialog, DialogContent } from "@mui/material";
+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";
+// API
+import getWishlists from "@/api-manager/services/user/queries/get-wishlists";
+import {
+  ExtendedProductListLine,
+  Wishlist,
+  WishlistLinesInput,
+} from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
+import { useNotification } from "@evenicanpm/storefront-core/src/components/Notifications/use-notification";
+import { useSession } from "next-auth/react";
+import useRemoveFromWishlist from "@/api-manager/services/user/mutations/remove-from-wishlist";
+
+interface Props {
+  open: boolean;
+  // product?: ProductDetails;
+  productId?: number;
+  onSuccess?: () => void;
+  handleClose: () => void;
+}
+
+export default function RemoveFromWishlistDialog({
+  open,
+  productId,
+  handleClose,
+  onSuccess,
+}: Props) {
+  const { data: wishlists, isLoading } = getWishlists.useSuspenseData();
+  const t = useTranslations("Account.Wishlists");
+  const { setNotification } = useNotification();
+
+  const { mutateAsync: removeFromWishlist } = useRemoveFromWishlist();
+
+  const { data: session } = useSession();
+  const isAuthenticated = !!session;
+
+  const [relevantWishlists, setRelevantWishlists] = React.useState<Wishlist[]>(
+    [],
+  );
+
+  const handleCloseDialog = () => {
+    if (isFunction(handleClose)) {
+      handleClose();
+    }
+  };
+
+  // get wishlists that the product is in
+  const getRelevantWishlists = useCallback(
+    (wishlists: Wishlist[]) => {
+      return wishlists.filter((wishlist) =>
+        wishlist.ProductListLines?.some((line) => line.ProductId === productId),
+      );
+    },
+    [productId],
+  );
+
+  const handleRemoveFromWishlist = useCallback(
+    async (wishlistId: string) => {
+      // get the selected wishlist
+      const wishlist = relevantWishlists.find(
+        (wishlist) => wishlist.Id === wishlistId,
+      );
+      if (wishlist) {
+        try {
+          const extendedWishlistLine = wishlist.ProductListLines?.find(
+            (item: ExtendedProductListLine) => item.ProductId === productId,
+          );
+
+          if (extendedWishlistLine) {
+            const wishlistLinesInput: WishlistLinesInput = {
+              Id: wishlist.Id,
+              ProductListLines: [extendedWishlistLine],
+            };
+
+            await removeFromWishlist(wishlistLinesInput);
+
+            setNotification({
+              message: t("wishlistLineRemoveSuccess"),
+              severity: "success",
+            });
+            if (isFunction(onSuccess)) {
+              onSuccess();
+            }
+          }
+        } catch (error) {
+          setNotification({
+            message: t("wishlistLineRemoveFailed"),
+            severity: "error",
+          });
+        }
+      }
+    },
+    [
+      relevantWishlists,
+      removeFromWishlist,
+      setNotification,
+      t,
+      onSuccess,
+      productId,
+    ],
+  );
+
+  useEffect(() => {
+    const withlistsWithProduct = getRelevantWishlists(wishlists);
+    setRelevantWishlists(withlistsWithProduct);
+    if (open && withlistsWithProduct.length === 1) {
+      // delete right away
+      handleRemoveFromWishlist(withlistsWithProduct[0].Id);
+    }
+  }, [open, getRelevantWishlists, handleRemoveFromWishlist, wishlists]);
+
+  return (
+    <Dialog
+      open={open}
+      onClose={handleCloseDialog}
+      aria-labelledby="form-dialog-title"
+    >
+      <DialogContent>
+        <Fragment>
+          <DashboardHeader
+            title="Account.Wishlists.heading"
+            Icon={MdFavorite}
+            href=""
+            buttonText=""
+          />
+          {isAuthenticated && !isLoading ? (
+            relevantWishlists && relevantWishlists.length > 0 ? (
+              relevantWishlists?.map((wishlist: Wishlist) => (
+                <WishlistModalItem
+                  key={wishlist.Id}
+                  wishlist={wishlist}
+                  removeFromWishlist={handleRemoveFromWishlist}
+                />
+              ))
+            ) : (
+              <NoRecords message="Account.Wishlists.noWishlists" />
+            )
+          ) : (
+            <NoRecords message="Account.Wishlists.wishlistAddUnauthenticated" />
+          )}
+        </Fragment>
+        <Grid container spacing={3}>
+          <Grid
+            item
+            sm={12}
+            xs={12}
+            sx={{
+              display: "flex",
+              justifyContent: "flex-start",
+              gap: 2,
+            }}
+          >
+            <Button
+              color="primary"
+              variant="outlined"
+              size="small"
+              onClick={handleCloseDialog}
+              sx={{ height: 30.75 }}
+            >
+              {t("btnCancel")}
+            </Button>
+          </Grid>
+        </Grid>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/_components/wishlist-modal/wishlist-modal-item.tsx

@@ -0,0 +1,65 @@
+import { Button } from "@mui/material";
+import { format } from "date-fns";
+// MUI ICON COMPONENTS
+// GLOBAL CUSTOM COMPONENTS
+import { Paragraph } from "@/components/_components/Typography";
+// LOCAL CUSTOM COMPONENT
+import TableRow from "../../../pages/account/table-row";
+// API
+import { Wishlist } from "@/api-manager/schemas/user.schema";
+
+interface Props {
+  wishlist: Wishlist;
+  addToWishlist?: (wishlistId: string) => void;
+  removeFromWishlist?: (wishlistId: string) => void;
+}
+
+export default function WishlistModalItem({
+  wishlist,
+  addToWishlist,
+  removeFromWishlist,
+}: Props) {
+  const handleClick = () => {
+    if (addToWishlist) {
+      addToWishlist(wishlist.Id);
+    } else if (removeFromWishlist) {
+      removeFromWishlist(wishlist.Id);
+    }
+  };
+  return (
+    <TableRow
+      sx={{
+        display: "grid",
+        gridTemplateColumns: "2fr 1fr 1fr 1fr", // Define equal column structure
+        alignItems: "center",
+        gap: 2,
+        padding: "10px 15px",
+        width: "500px",
+        cursor: "default",
+      }}
+    >
+      <Paragraph ellipsis sx={{ fontWeight: "bold" }}>
+        {wishlist?.Name ?? ""}
+      </Paragraph>
+      <Paragraph ellipsis>
+        {" "}
+        {format(
+          new Date(wishlist?.CreatedDateTime ?? wishlist?.LastUpdated ?? ""),
+          "MMM dd, yyyy",
+        )}
+      </Paragraph>
+      <Paragraph ellipsis>
+        {" "}
+        {`${wishlist?.ProductListLines?.length} products`}
+      </Paragraph>
+
+      <Button
+        onClick={handleClick}
+        color="primary"
+        sx={{ bgcolor: "primary.light", px: 4 }}
+      >
+        {addToWishlist ? "Add" : "Remove"}
+      </Button>
+    </TableRow>
+  );
+}

package/src/components/countries-input.tsx

@@ -3,7 +3,6 @@ import {
   Autocomplete,
   AutocompleteRenderInputParams,
   Box,
-  InputProps,
   TextField,
 } from "@mui/material";
 import React from "react";
@@ -28,12 +27,14 @@ export default function CountryInput({
   ) => setCountryInputValue(value);
 
   const renderOption = (
-    optionProps: React.HTMLAttributes<HTMLLIElement>,
+    props: React.HTMLAttributes<HTMLLIElement> & {
+      key: any;
+    },
     option: CountryRegionInfo,
-    index: number,
   ) => {
+    const { key, ...optionProps } = props;
     return (
-      <Box key={index} component="li" {...optionProps}>
+      <Box key={key} component="li" {...optionProps}>
         {option.ShortName}
       </Box>
     );
@@ -44,12 +45,8 @@ export default function CountryInput({
       size="small"
       label={label}
       variant="outlined"
+      data-testid="country-input"
       placeholder="Select Country"
-      slotProps={{
-        input: {
-          "data-testid": "country-input",
-        } as InputProps,
-      }}
     />
   );
 
@@ -66,9 +63,7 @@ export default function CountryInput({
       data-testid="country-autocomplete"
       inputValue={countryInputValue}
       onInputChange={handleAutoCompleteChange}
-      renderOption={(props, option, state) =>
-        renderOption(props, option, state?.index)
-      }
+      renderOption={(props, option) => renderOption(props, option)}
       renderInput={renderInput}
       getOptionLabel={getOptionLabel}
     />

package/src/hooks/use-cart.tsx

@@ -0,0 +1,82 @@
+import useDeleteCartLine from "@/api-manager/services/cart/mutations/delete-cart-line";
+import useAddToCart from "@/api-manager/services/cart/mutations/add-to-cart";
+import useUpdateCartLines from "@/api-manager/services/cart/mutations/update-cart-lines";
+import { Cart } from "@/api-manager/schemas/cart.schema";
+import { CartLine } from "@msdyn365-commerce/retail-proxy";
+
+type UseCartProps = {
+  cart: Cart;
+  selectVariantId: number | undefined;
+  recordId: number;
+};
+
+export type AddToCartBopisInput = {
+  deliveryMode: string;
+  warehouseId: string;
+};
+
+export default function useCart({
+  cart,
+  selectVariantId,
+  recordId,
+}: UseCartProps) {
+  const { mutate: deleteCartLine, isPending: deletePending } =
+    useDeleteCartLine();
+  const { mutate: updateCartLine, isPending: updatePending } =
+    useUpdateCartLines();
+  const { mutate: addToCart, isPending: addPending } = useAddToCart();
+
+  const loading = deletePending || updatePending || addPending;
+
+  const handleCartAmountChange = (
+    amount: number,
+    currentCartLine?: CartLine,
+  ) => {
+    if (amount === 0) {
+      deleteCartLine({
+        cartId: cart.Id,
+        version: cart.Version,
+        cartLine: [
+          {
+            LineId: currentCartLine?.LineId,
+            ProductId: selectVariantId,
+          },
+        ],
+      });
+      return;
+    }
+
+    updateCartLine({
+      cartId: cart.Id,
+      version: cart.Version,
+      cartLine: [
+        {
+          LineId: currentCartLine?.LineId,
+          Quantity: amount,
+          ProductId: selectVariantId,
+        },
+      ],
+    });
+  };
+
+  const handleAddToCart = (bopisInput?: AddToCartBopisInput) => {
+    addToCart({
+      cartId: cart.Id,
+      version: cart.Version,
+      cartLine: [
+        {
+          Quantity: 1,
+          ProductId: selectVariantId || recordId,
+          WarehouseId: bopisInput?.warehouseId || "",
+          DeliveryMode: bopisInput?.deliveryMode || "",
+        },
+      ],
+    });
+  };
+
+  return {
+    loading,
+    handleCartAmountChange,
+    handleAddToCart,
+  };
+}

package/src/hooks/use-variants.tsx

@@ -0,0 +1,85 @@
+"use client";
+import { useState } from "react";
+
+// CUSTOM UTILS LIBRARY FUNCTION
+import { ProductDetails } from "@/api-manager/schemas/product.schema";
+import { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
+import getProductById from "@/api-manager/services/product/queries/get-product-by-id";
+
+//=========================================
+type Props = {
+  product: ProductDetails;
+};
+
+type SelectedDimension = Record<
+  number,
+  ProductDimensionValueInventoryAvailability
+>;
+//========================================
+
+/**
+ * This Hook handles the product variant selection and updates the selected variant id
+ * based on the selected dimensions.
+ */
+export default function useVariants({ product }: Props) {
+  const { DimensionValues } = product;
+
+  const [selectVariantId, setSelectVariantId] = useState<number>();
+  const [selectDimensions, setSelectDimensions] = useState<SelectedDimension>(
+    {},
+  );
+
+  const { data: productVariant, isPending: variantPending } =
+    getProductById.useData({ id: selectVariantId });
+
+  // HELPERS
+  const allDimensionsSelected = (currentDimensions: SelectedDimension) =>
+    Object.keys(currentDimensions).length === DimensionValues.length;
+
+  /**
+   * Adds selected dimension to the current selectDimensions state
+   * Updates the selectVariantId if all dimensions are selected
+   * @param dimensionValue dimension that was last change to trigger this function
+   */
+  const handleChangeVariant = async (
+    dimensionValue: ProductDimensionValueInventoryAvailability,
+  ) => {
+    // Wrap the selection logic inside the callback
+    // to ensure we have the correct current value of state
+    setSelectDimensions((state) => {
+      if (!dimensionValue?.DimensionTypeValue) {
+        console.error("DimensionTypeValue is missing");
+        return state;
+      }
+
+      const newDimensionsState = {
+        ...state,
+        [dimensionValue?.DimensionTypeValue]: dimensionValue,
+      };
+
+      if (!allDimensionsSelected(newDimensionsState)) return newDimensionsState;
+
+      const dimensionsArray = Object.values(newDimensionsState);
+
+      // DEDUCE PRODUCT ID FROM SELECTED DIMENSIONS
+      const selectedVariantId = dimensionsArray.reduce(
+        (intersectedIds: number[], { ProductIds }) => {
+          return intersectedIds.filter((id) => ProductIds?.includes(id));
+        },
+        dimensionsArray[0]?.ProductIds || [],
+      );
+
+      setSelectVariantId(selectedVariantId[0]);
+      return newDimensionsState;
+    });
+  };
+
+  return {
+    allDimensionsSelected,
+    handleChangeVariant,
+    productVariant,
+    selectVariantId,
+    variantPending,
+    selectDimensions,
+  };
+}

package/src/lib/cart-cookie-handler-constants.ts

@@ -0,0 +1,8 @@
+export const CART_COOKIE_NAME = "cart_cookie";
+export const CartCookieType = {
+  Auth: "AU",
+  Anon: "AN",
+} as const;
+
+export type CartCookieType =
+  (typeof CartCookieType)[keyof typeof CartCookieType];

package/src/lib/cart-cookie-handler.ts

@@ -1,14 +1,36 @@
 "use server";
 import { cookies } from "next/headers";
+import {
+  CART_COOKIE_NAME,
+  CartCookieType,
+} from "./cart-cookie-handler-constants";
 
-const getCartCookie = async () => (await cookies()).get("cart_cookie")?.value;
+const getCartCookie = async (): Promise<string | null> =>
+  (await getCartCookieWithAuthStatus())?.id ?? null;
 
-const setCartCookie = async (cartId: string) => {
-  (await cookies()).set("cart_cookie", cartId);
+const setCartCookie = async (cartId: string, isAuthenticated?: boolean) => {
+  const cookieValue = `${isAuthenticated ? CartCookieType.Auth : CartCookieType.Anon}:${cartId}`;
+  (await cookies()).set(CART_COOKIE_NAME, cookieValue);
 };
 
 const deleteCartCookie = async () => {
-  (await cookies()).delete("cart_cookie");
+  (await cookies()).delete(CART_COOKIE_NAME);
 };
 
-export { getCartCookie, setCartCookie, deleteCartCookie };
+const getCartCookieWithAuthStatus = async () => {
+  const cartCookie = (await cookies()).get(CART_COOKIE_NAME)?.value;
+  if (!cartCookie) return null;
+  const parts = cartCookie.split(":");
+  if (parts.length !== 2) return null;
+  return {
+    type: parts[0] as CartCookieType,
+    id: parts[1] as string,
+  };
+};
+
+export {
+  getCartCookie,
+  setCartCookie,
+  deleteCartCookie,
+  getCartCookieWithAuthStatus,
+};

package/src/lib/create-graphql-client.ts

@@ -5,7 +5,6 @@ import { GraphQLClient } from "graphql-request";
 // and one here to isntantiate because graphql-request library must be same
 // for this file and the sdk
 import { getSdk } from "@/lib/graphqlRequestSdk";
-import { getConfig } from "@config";
 
 // typescript can't infer type without reference
 export type E4Sdk = ReturnType<typeof getSdk>;
@@ -15,7 +14,7 @@ export type E4Sdk = ReturnType<typeof getSdk>;
  * @returns a new graphql request client with all of E4 queries and mutations
  */
 const createGraphQLClient = async (): Promise<E4Sdk> => {
-  const API_URL = getConfig().E4_API_ENDPOINT;
+  const API_URL = process.env.NEXT_PUBLIC_E4_API_ENDPOINT || "";
   const client = new GraphQLClient(API_URL, {
     credentials: "include", // Ensures cookies are included
     headers: {