@evenicanpm/storefront-core 1.0.2 → 1.0.4

package/src/components-v2/wishlist-dialogs/create-wishlist/compound/create-wishlist-dialog.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import isFunction from "lodash/isFunction";
+import { useTranslations } from "next-intl";
+import { Dialog, DialogContent, CircularProgress } from "@mui/material";
+// Global Custom components
+import { H5 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
+// Forms
+import { useFormik } from "formik";
+import { z } from "zod";
+import { withZodSchema } from "formik-validator-zod";
+// API
+import useCreateWishlist from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/create-wishlist";
+import { CreateNewWishlistContext } from "./context";
+import CreateNewWishlistForm from "./create-wishlist-form";
+
+interface Props {
+  open: boolean;
+  handleClose: () => void;
+  children: React.ReactNode;
+}
+
+export default function CreateNewList(props: Props) {
+  const { children } = props;
+  const t = useTranslations("Account.Wishlists");
+  const { setNotification } = useNotification();
+
+  const { mutateAsync: createWishlist } = useCreateWishlist();
+
+  const FormSchema = z.object({
+    Id: z.string(),
+    Name: z.string().nonempty(t("Validation.required", { field: t("name") })),
+    Comment: z.string().optional(),
+    IsPublic: z.boolean().optional(),
+  });
+
+  type FormSchemaType = z.infer<typeof FormSchema>;
+
+  const handleSubmit = async (values: FormSchemaType) => {
+    try {
+      await createWishlist({ ...values, IsPublic: !values.IsPublic });
+      handleClose();
+      setNotification({
+        message: t("wishlistSuccess"),
+        severity: "success",
+      });
+    } catch (error) {
+      setNotification({
+        message: t("wishlistFailed"),
+        severity: "error",
+      });
+    }
+  };
+
+  const formik = useFormik<FormSchemaType>({
+    initialValues: {
+      Id: "",
+      Name: "",
+      Comment: "",
+      IsPublic: false,
+    },
+    onSubmit: handleSubmit,
+    validate: withZodSchema(FormSchema),
+  });
+
+  const { resetForm, isSubmitting } = formik;
+
+  const handleClose = () => {
+    if (isFunction(props.handleClose)) {
+      props.handleClose();
+      resetForm();
+    }
+  };
+
+  return (
+    <CreateNewWishlistContext.Provider value={{ formik, handleClose }}>
+      <Dialog open={props.open} onClose={handleClose}>
+        <DialogContent>
+          {isSubmitting ? <CircularProgress /> : children}
+        </DialogContent>
+      </Dialog>
+    </CreateNewWishlistContext.Provider>
+  );
+}
+
+const FormTitle = () => {
+  const t = useTranslations("Account.Wishlists");
+  return <H5 mb={4}>{t("formTitle")}</H5>;
+};
+
+CreateNewList.Title = FormTitle;
+CreateNewList.Form = CreateNewWishlistForm;

package/src/components-v2/wishlist-dialogs/create-wishlist/compound/create-wishlist-form.tsx

@@ -0,0 +1,96 @@
+/**
+ * @module Create-Wishlist-Dialog
+ */
+import React, { useContext } from "react";
+import { useTranslations } from "next-intl";
+import { Box, TextField, FormControlLabel, Checkbox } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+// Global Custom components
+import BottomUI from "./create-wishlist-bottom-ui";
+import { CreateNewWishlistContext } from "./context";
+
+/*
+ * @category Sub-Component
+ */
+const CreateNewWishlistForm = ({ children }: { children: React.ReactNode }) => {
+  const { formik } = useContext(CreateNewWishlistContext);
+  return (
+    <Box component="form" onSubmit={formik.handleSubmit}>
+      <Grid container spacing={3}>
+        {children}
+      </Grid>
+    </Box>
+  );
+};
+
+/*
+ * @category Sub-Component
+ */
+function NameTextField() {
+  const t = useTranslations("Account.Wishlists");
+  const { formik } = useContext(CreateNewWishlistContext);
+  return (
+    <Grid size={{ sm: 6, xs: 12 }}>
+      <TextField
+        name="Name"
+        fullWidth
+        label={t("name")}
+        value={formik.values.Name}
+        onChange={formik.handleChange}
+        onBlur={formik.handleBlur}
+        error={formik.touched.Name && Boolean(formik.errors.Name)}
+        helperText={formik.touched.Name && formik.errors.Name}
+        required
+      />
+    </Grid>
+  );
+}
+
+/*
+ * @category Sub-Component
+ */
+function DescriptionTextField() {
+  const t = useTranslations("Account.Wishlists");
+  const { formik } = useContext(CreateNewWishlistContext);
+  return (
+    <Grid size={{ sm: 6, xs: 12 }}>
+      <TextField
+        name="Comment"
+        fullWidth
+        label={t("comment")}
+        value={formik.values.Comment}
+        onChange={formik.handleChange}
+        onBlur={formik.handleBlur}
+        error={formik.touched.Comment && Boolean(formik.errors.Comment)}
+        helperText={formik.touched.Comment && formik.errors.Comment}
+      />
+    </Grid>
+  );
+}
+
+function IsPrivateCheckbox() {
+  const t = useTranslations("Account.Wishlists");
+  const { formik } = useContext(CreateNewWishlistContext);
+  return (
+    <Grid size={{ sm: 6, xs: 12 }}>
+      <FormControlLabel
+        control={
+          <Checkbox
+            name="IsPublic"
+            checked={formik.values.IsPublic}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+          />
+        }
+        label={t("private")}
+      />
+    </Grid>
+  );
+}
+
+CreateNewWishlistForm.BottomUI = BottomUI;
+CreateNewWishlistForm.NameTextField = NameTextField;
+CreateNewWishlistForm.IsPrivateCheckBox = IsPrivateCheckbox;
+CreateNewWishlistForm.DescriptionTextField = DescriptionTextField;
+
+export default CreateNewWishlistForm;

package/src/components-v2/wishlist-dialogs/create-wishlist/create-wishlist-button.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@mui/material";
+import T from "@evenicanpm/storefront-core/src/components-v2/T";
+import CreateNewListDialog from "./";
+
+interface Props {
+  path?: string;
+}
+
+const CreateWishlistButton = ({
+  path = "Account.Wishlists.btnCreateNewList",
+}: Props) => {
+  const [openCreateListDialog, setOpenCreateListDialog] = useState(false);
+
+  const handleCloseDialog = () => {
+    setOpenCreateListDialog(false);
+  };
+
+  const handleCreateNewList = () => {
+    setOpenCreateListDialog(true);
+  };
+
+  return (
+    <>
+      <Button
+        onClick={handleCreateNewList}
+        color="primary"
+        sx={{ bgcolor: "primary.light", px: 4 }}
+      >
+        <T path={path} />
+      </Button>
+      <CreateNewListDialog
+        open={openCreateListDialog}
+        handleClose={handleCloseDialog}
+      />
+    </>
+  );
+};
+
+export default CreateWishlistButton;

package/src/components-v2/wishlist-dialogs/create-wishlist/index.tsx

@@ -0,0 +1,22 @@
+import CreateNewList from "./compound/create-wishlist-dialog";
+
+interface Props {
+  open: boolean;
+  handleClose: () => void;
+}
+
+const CreateNewWishlistDialog = ({ open, handleClose }: Props) => {
+  return (
+    <CreateNewList open={open} handleClose={handleClose}>
+      <CreateNewList.Title />
+      <CreateNewList.Form>
+        <CreateNewList.Form.NameTextField />
+        <CreateNewList.Form.DescriptionTextField />
+        <CreateNewList.Form.IsPrivateCheckBox />
+        <CreateNewList.Form.BottomUI />
+      </CreateNewList.Form>
+    </CreateNewList>
+  );
+};
+
+export default CreateNewWishlistDialog;

package/src/components-v2/wishlist-dialogs/styles.ts

@@ -0,0 +1,61 @@
+import Card, { CardProps } from "@mui/material/Card";
+import styled from "@mui/material/styles/styled";
+import NavLink, {
+  NavLinkProps,
+} from "@evenicanpm/storefront-core/src/components-v2/nav-link/nav-link";
+import { ComponentType } from "react";
+
+type ExtendedNavLinkProps = NavLinkProps & {
+  isCurrentPath?: boolean;
+};
+
+export const MainContainer: ComponentType<CardProps> = styled(Card)(
+  ({ theme }) => ({
+    paddingBottom: "1.5rem",
+    [theme.breakpoints.down("md")]: {
+      boxShadow: "none",
+      overflowY: "auto",
+      height: "calc(100vh - 64px)",
+    },
+  }),
+) as typeof Card;
+
+export const StyledNavLink: ComponentType<ExtendedNavLinkProps> = styled(
+  NavLink,
+  {
+    shouldForwardProp: (prop) => prop !== "isCurrentPath",
+  },
+)<ExtendedNavLinkProps>(({ theme, isCurrentPath }) => ({
+  display: "flex",
+  alignItems: "center",
+  borderLeft: "4px solid",
+  paddingLeft: "1.5rem",
+  paddingRight: "1.5rem",
+  marginBottom: "1.25rem",
+  justifyContent: "space-between",
+  borderColor: isCurrentPath ? theme.palette.primary.main : "transparent",
+  "& .nav-icon": {
+    color: isCurrentPath ? theme.palette.primary.main : theme.palette.grey[600],
+  },
+  "&:hover": {
+    borderColor: theme.palette.primary.main,
+    "& .nav-icon": { color: theme.palette.primary.main },
+  },
+}));
+
+export const StyledTableRow: ComponentType<CardProps> = styled(Card)(
+  ({ theme }) => ({
+    gap: 16,
+    marginBlock: 16,
+    display: "grid",
+    borderRadius: 10,
+    cursor: "pointer",
+    alignItems: "center",
+    padding: ".6rem 1.2rem",
+    gridTemplateColumns: "1.5fr 2fr 1.5fr auto",
+    [theme.breakpoints.down("sm")]: {
+      gap: 8,
+      gridTemplateColumns: "repeat(2, 1fr)",
+    },
+  }),
+);

package/src/hooks/{use-cart.tsx → use-cart.ts}

@@ -1,25 +1,29 @@
-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 = {
+"use client";
+import useDeleteCartLine from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/delete-cart-line";
+import useAddToCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/add-to-cart";
+import useUpdateCartLines from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/update-cart-lines";
+import getCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/queries/get-cart";
+/**
+ * Optional input for BOPIS
+ */
+export interface AddToCartBopisInput {
   deliveryMode: string;
   warehouseId: string;
-};
+}
 
-export default function useCart({
-  cart,
-  selectVariantId,
-  recordId,
-}: UseCartProps) {
+/**
+ * TODO: Why does this take variant id and record id.... no need. just take a single ID
+ *
+ * Handles adding and changing product in cart. To be re-used across the app.
+ * @param selectVariantId the variant id of the product's cartline.
+ * @param recordId the record id of the product's cartline to modify.
+ *
+ */
+export default function useCart(
+  recordId: number,
+  selectVariantId?: number | undefined,
+) {
+  const { data: cart } = getCart.useData();
   const { mutate: deleteCartLine, isPending: deletePending } =
     useDeleteCartLine();
   const { mutate: updateCartLine, isPending: updatePending } =
@@ -28,10 +32,11 @@ export default function useCart({
 
   const loading = deletePending || updatePending || addPending;
 
-  const handleCartAmountChange = (
-    amount: number,
-    currentCartLine?: CartLine,
-  ) => {
+  const currentCartLine = cart?.CartLines?.find((item) => {
+    return item?.ProductId === (Number(selectVariantId) || recordId);
+  });
+
+  const handleCartAmountChange = (amount: number) => {
     if (amount === 0) {
       deleteCartLine({
         cartId: cart.Id,
@@ -78,5 +83,6 @@ export default function useCart({
     loading,
     handleCartAmountChange,
     handleAddToCart,
+    currentCartLine,
   };
 }

package/src/hooks/use-variants.ts

@@ -0,0 +1,138 @@
+"use client";
+// react and react-query
+import { useReducer } from "react";
+import { QueryClient, useQueryClient } from "@tanstack/react-query";
+
+// Types
+import { ProductDetails } from "@/api-manager/schemas/product.schema";
+import { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
+
+// Data fetching
+import getProductById from "@/api-manager/services/product/queries/get-product-by-id";
+import getProductPrices from "@/api-manager/services/product/queries/get-product-prices";
+import getProductAvailability from "@/api-manager/services/product/queries/get-product-availability";
+
+// Define Types for Hook
+export type SelectedDimensions = Record<
+  number,
+  ProductDimensionValueInventoryAvailability
+>;
+
+type VariantState = {
+  selectDimensions: SelectedDimensions;
+  selectedVariantRecordId: number | undefined;
+};
+
+type VariantAction = {
+  type: "SELECT_DIMENSION";
+  dimensionValue: ProductDimensionValueInventoryAvailability;
+  totalDimensions: number;
+};
+
+/**
+ * This Hook handles the product variant selection and updates the selected variant id
+ * based on the selected dimensions.
+ */
+export default function useVariants(product: ProductDetails) {
+  const { DimensionValues } = product;
+  const queryClient = useQueryClient();
+  const [state, dispatch] = useReducer(variantReducer, {
+    selectDimensions: {},
+    selectedVariantRecordId: undefined,
+  });
+
+  // Query is disabled if no variant selected
+  const { data: selectedVariant, isLoading: variantPending } =
+    getProductById.useData({ id: state.selectedVariantRecordId });
+
+  const allDimensionsSelected =
+    Object.keys(state.selectDimensions).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 changed to trigger this function
+   */
+  const handleSelectDimension = async (
+    dimensionValue: ProductDimensionValueInventoryAvailability,
+  ) => {
+    prefetchPDPData(dimensionValue, queryClient);
+    dispatch({
+      type: "SELECT_DIMENSION",
+      dimensionValue,
+      totalDimensions: DimensionValues.length,
+    });
+  };
+
+  return {
+    allDimensionsSelected,
+    handleChangeVariant: handleSelectDimension,
+    selectedVariant,
+    selectDimensions: state.selectDimensions,
+    variantPending,
+  };
+}
+
+/**
+ * To minimize loading time for the PDP dimensions.
+ */
+const prefetchPDPData = (
+  dimensionValue: ProductDimensionValueInventoryAvailability,
+  queryClient: QueryClient,
+) => {
+  dimensionValue.ProductIds.map((id) => {
+    getProductById.prefetchData(queryClient, { id: id });
+    getProductPrices.prefetchData(queryClient, {
+      productIds: [id],
+    });
+
+    const shippingInventorySearchCriteria = {
+      searchCriteria: {
+        defaultWarehouseOnly: true,
+        productIds: [id],
+      },
+    };
+
+    getProductAvailability.prefetchData(
+      queryClient,
+      shippingInventorySearchCriteria,
+    );
+  });
+};
+
+/**
+ * Reducer synchronizes selected dimensions and variant ID
+ */
+const variantReducer = (state: VariantState, action: VariantAction) => {
+  switch (action.type) {
+    case "SELECT_DIMENSION":
+      const newDimensionsState: SelectedDimensions = {
+        ...state.selectDimensions,
+        [action.dimensionValue?.DimensionTypeValue]: action.dimensionValue,
+      };
+
+      const allDimensionsSelected =
+        Object.keys(newDimensionsState).length === action.totalDimensions;
+
+      // We cannot select a variant until all dimensions are selected
+      if (!allDimensionsSelected)
+        return {
+          ...state,
+          selectDimensions: newDimensionsState,
+          selectedVariantRecordId: undefined,
+        };
+
+      const dimensionsArray = Object.values(newDimensionsState);
+
+      // Deduce product id from selected dimensions
+      const intersectedVariantIds = dimensionsArray.reduce((ids, dimension) => {
+        return ids.filter((id) => dimension.ProductIds?.includes(id));
+      }, dimensionsArray[0]?.ProductIds || []);
+
+      return {
+        ...state,
+        selectDimensions: newDimensionsState,
+        selectedVariantRecordId: intersectedVariantIds[0], // There can be only one!
+      };
+  }
+};

package/src/lib/build-detail-url.ts

@@ -3,6 +3,7 @@ import { PageSlug } from "./page-slugs";
 const buildDetailUrl = (name: string, id: number) =>
   `/${PageSlug.ProductDetail}/${normalizeName(name)}/${id}`;
 
-const normalizeName = (name: string) => name.toLowerCase().replace(/ /g, "-");
+const normalizeName = (name: string) =>
+  name ? name.toLowerCase().replace(/ /g, "-") : "";
 
 export default buildDetailUrl;

package/src/pages/README.md

@@ -0,0 +1,4 @@
+# Pages V1 Folder
+
+- Keeping this temporarily to maintain compatability for OLCC while we create the new component system
+- OLCC will start moving over to components-v2 and pages-v2 and then we will remove this folder

package/src/pages/product-details/product-intro/product-intro.tsx

@@ -25,7 +25,9 @@ import getProductAvailability from "@/api-manager/services/product/queries/get-p
 
 // LOCAL HOOKS
 import useVariants from "../../../hooks/use-variants";
-import useCart, { AddToCartBopisInput } from "@/hooks/use-cart";
+import useCart, {
+  AddToCartBopisInput,
+} from "@evenicanpm/storefront-core/src/hooks/use-cart";
 
 // LOCAL COMPONENTS
 import ProductDimensions from "@/_components/product-dimensions/product-dimensions";
@@ -54,37 +56,40 @@ export default function ProductIntro({ product, cart }: Props) {
 
   // HOOKS
   const {
-    productVariant,
-    selectVariantId,
+    selectedVariant,
     selectDimensions,
     handleChangeVariant,
     allDimensionsSelected,
-  } = useVariants({ product });
+  } = useVariants(product);
 
-  const { handleCartAmountChange, handleAddToCart, loading } = useCart({
-    cart,
-    selectVariantId,
-    recordId: RecordId,
-  });
+  const { handleCartAmountChange, handleAddToCart, loading } = useCart(
+    selectedVariant.RecordId,
+    RecordId,
+  );
 
   const { formatCurrency } = useCurrencyFormatter();
 
   const searchCriteria = useMemo<InventorySearchCriteriaInput>(
     () => ({
-      allDimensionsSelected: allDimensionsSelected(selectDimensions),
+      allDimensionsSelected: allDimensionsSelected,
       searchCriteria: {
         defaultWarehouseOnly: true,
-        productIds: [selectVariantId || RecordId],
+        productIds: [selectedVariant?.RecordId || RecordId],
       },
     }),
-    [allDimensionsSelected, selectDimensions, selectVariantId, RecordId],
+    [
+      allDimensionsSelected,
+      selectDimensions,
+      selectedVariant?.RecordId,
+      RecordId,
+    ],
   );
 
   const { data: shippingInventoryData, isLoading: inventoryLoading } =
     getProductAvailability.useData(searchCriteria);
   // HELPERS
   const currentCartLine = cart?.CartLines?.find((item) => {
-    return item?.ProductId === (Number(selectVariantId) || RecordId);
+    return item?.ProductId === (Number(selectedVariant?.RecordId) || RecordId);
   });
 
   const getInventoryLabel = (): string | null => {
@@ -100,7 +105,7 @@ export default function ProductIntro({ product, cart }: Props) {
 
   const shouldDisableAddToCart = () => {
     //TODO: Incorporate global inventory enabled flag.
-    if (!allDimensionsSelected(selectDimensions)) {
+    if (!allDimensionsSelected) {
       return false; // Don't disable add to cart if dimensions are not selected, so clicking the button will provide an error message showing the user what to do.
     }
     const OOSCode = "OOS"; // Always means out of stock
@@ -120,8 +125,8 @@ export default function ProductIntro({ product, cart }: Props) {
   };
 
   const images =
-    Array.isArray(productVariant?.Images) && productVariant.Images.length > 0
-      ? productVariant.Images
+    Array.isArray(selectedVariant?.Images) && selectedVariant.Images.length > 0
+      ? selectedVariant.Images
       : Array.isArray(Images) && Images.length > 0
         ? Images
         : [];
@@ -136,7 +141,7 @@ export default function ProductIntro({ product, cart }: Props) {
   };
 
   const onAddToCart = (bopisInput?: AddToCartBopisInput) => {
-    if (!allDimensionsSelected(selectDimensions)) {
+    if (!allDimensionsSelected) {
       setShowDimensionError(true);
       return;
     }
@@ -145,7 +150,7 @@ export default function ProductIntro({ product, cart }: Props) {
   };
 
   const shouldOpenHelperModal = () => {
-    if (!allDimensionsSelected(selectDimensions)) {
+    if (!allDimensionsSelected) {
       setShowDimensionError(true);
       return false;
     }
@@ -160,9 +165,9 @@ export default function ProductIntro({ product, cart }: Props) {
           name={Name}
           selectedImageIndex={selectedImageIndex}
           primaryImageUrl={
-            Array.isArray(productVariant?.Images) &&
-            productVariant.Images.length > 0
-              ? productVariant.Images[0]
+            Array.isArray(selectedVariant?.Images) &&
+            selectedVariant.Images.length > 0
+              ? selectedVariant.Images[0]
               : Array.isArray(Images) && Images.length > 0
                 ? Images[0]
                 : ""
@@ -178,7 +183,7 @@ export default function ProductIntro({ product, cart }: Props) {
 
           {/* PRODUCT BRAND */}
           <FlexBox alignItems="center" mb={1}>
-            <H6>SKU: {productVariant?.ItemId || ItemId}</H6>
+            <H6>SKU: {selectedVariant?.ItemId || ItemId}</H6>
           </FlexBox>
 
           {/* PRODUCT RATING */}
@@ -232,10 +237,10 @@ export default function ProductIntro({ product, cart }: Props) {
                 isOOS={shouldDisableAddToCart()}
               />
               <FindInStoreButton
-                productId={selectVariantId || RecordId}
+                productId={selectedVariant?.RecordId || RecordId}
                 canOpenModal={shouldOpenHelperModal}
                 handleAddToCart={handleAddToCart}
-                allDimensionsSelected={allDimensionsSelected(selectDimensions)}
+                allDimensionsSelected={allDimensionsSelected}
               />
               <AddToWishlistButton
                 path="Account.Wishlists.btnAddToWishlist"