@evenicanpm/storefront-core 1.0.3 → 1.0.4

package/src/components-v2/wishlist-dialogs/add-to-wishlist/index.tsx

@@ -0,0 +1,39 @@
+import AddToWishlistDialog from "./compound/add-to-wishlist-dialog";
+import { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
+
+interface Props {
+  open: boolean;
+  handleClose: () => void;
+  productId?: number;
+  cart?: Cart;
+  onSuccess?: () => void;
+}
+
+/**
+ * @category Implementation
+ */
+const AddToWishListDialog1 = ({
+  cart,
+  open,
+  handleClose,
+  productId,
+}: Props) => {
+  return (
+    <>
+      <AddToWishlistDialog
+        cart={cart}
+        open={open}
+        handleClose={handleClose}
+        productId={productId}
+      >
+        <AddToWishlistDialog.Header />
+        <AddToWishlistDialog.List>
+          <AddToWishlistDialog.List.Item />
+        </AddToWishlistDialog.List>
+        <AddToWishlistDialog.BottomUI />
+      </AddToWishlistDialog>
+    </>
+  );
+};
+
+export default AddToWishListDialog1;

package/src/components-v2/wishlist-dialogs/create-wishlist/compound/context.ts

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const CreateNewWishlistContext = createContext(null);

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

@@ -0,0 +1,42 @@
+import React, { useContext } from "react";
+import { useTranslations } from "next-intl";
+import { Button } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import { CreateNewWishlistContext } from "./context";
+
+function BottomUI() {
+  const t = useTranslations("Account.Wishlists");
+  const { handleClose } = useContext(CreateNewWishlistContext);
+  return (
+    <Grid
+      size={{ sm: 6, xs: 12 }}
+      sx={{
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        gap: 2,
+      }}
+    >
+      <Button
+        color="primary"
+        variant="contained"
+        size="small"
+        type="submit"
+        sx={{ height: 30.75 }}
+      >
+        {t("btnSave")}
+      </Button>
+      <Button
+        color="primary"
+        variant="outlined"
+        size="small"
+        onClick={handleClose}
+        sx={{ height: 30.75 }}
+      >
+        {t("btnCancel")}
+      </Button>
+    </Grid>
+  );
+}
+
+export default BottomUI;

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/components → wishlist-dialogs/create-wishlist}/create-wishlist-button.tsx

@@ -3,13 +3,15 @@
 import { useState } from "react";
 import { Button } from "@mui/material";
 import T from "@evenicanpm/storefront-core/src/components-v2/T";
-import CreateNewListDialog from "./create-new-list";
+import CreateNewListDialog from "./";
 
 interface Props {
-  path: string;
+  path?: string;
 }
 
-const CreateWishlistButton = ({ path }: Props) => {
+const CreateWishlistButton = ({
+  path = "Account.Wishlists.btnCreateNewList",
+}: Props) => {
   const [openCreateListDialog, setOpenCreateListDialog] = useState(false);
 
   const handleCloseDialog = () => {

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/hooks/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

@@ -1,85 +1,138 @@
 "use client";
-import { useState } from "react";
+// react and react-query
+import { useReducer } from "react";
+import { QueryClient, useQueryClient } from "@tanstack/react-query";
 
-// CUSTOM UTILS LIBRARY FUNCTION
+// Types
 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;
-};
+// 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";
 
-type SelectedDimension = Record<
+// 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 }: Props) {
+export default function useVariants(product: ProductDetails) {
   const { DimensionValues } = product;
+  const queryClient = useQueryClient();
+  const [state, dispatch] = useReducer(variantReducer, {
+    selectDimensions: {},
+    selectedVariantRecordId: undefined,
+  });
 
-  const [selectVariantId, setSelectVariantId] = useState<number>();
-  const [selectDimensions, setSelectDimensions] = useState<SelectedDimension>(
-    {},
-  );
+  // Query is disabled if no variant selected
+  const { data: selectedVariant, isLoading: variantPending } =
+    getProductById.useData({ id: state.selectedVariantRecordId });
 
-  const { data: productVariant, isPending: variantPending } =
-    getProductById.useData({ id: selectVariantId });
-
-  // HELPERS
-  const allDimensionsSelected = (currentDimensions: SelectedDimension) =>
-    Object.keys(currentDimensions).length === DimensionValues.length;
+  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 change to trigger this function
+   * @param dimensionValue dimension that was last changed to trigger this function
    */
-  const handleChangeVariant = async (
+  const handleSelectDimension = 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;
+    prefetchPDPData(dimensionValue, queryClient);
+    dispatch({
+      type: "SELECT_DIMENSION",
+      dimensionValue,
+      totalDimensions: DimensionValues.length,
     });
   };
 
   return {
     allDimensionsSelected,
-    handleChangeVariant,
-    productVariant,
-    selectVariantId,
+    handleChangeVariant: handleSelectDimension,
+    selectedVariant,
+    selectDimensions: state.selectDimensions,
     variantPending,
-    selectDimensions,
   };
 }
+
+/**
+ * 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;