@evenicanpm/storefront-core 1.0.2 → 1.0.4

package/src/pages/product-list/quick-view-dialog-content.tsx

@@ -16,11 +16,13 @@ import {
 import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
 import ProductRating from "./product-rating";
-import useCart, { AddToCartBopisInput } from "@/hooks/use-cart";
+import useCart, {
+  AddToCartBopisInput,
+} from "@evenicanpm/storefront-core/src/hooks/use-cart";
 import useCurrencyFormatter from "@/lib/currency-formatter";
 import ProductDimensions from "@/components/_components/product-dimensions/product-dimensions";
 import QuantityButtons from "@/components/_components/product-quantity-buttons/product-quantity-buttons";
-import useVariants from "@/hooks/use-variants";
+import useVariants from "@evenicanpm/storefront-core/src/hooks/use-variants";
 import {
   InventorySearchCriteriaInput,
   ProductDetails,
@@ -47,11 +49,12 @@ export default function QuickViewContent({
 }: Props) {
   const [showDimensionError, setShowDimensionError] = useState(false);
   const {
-    selectVariantId,
+    selectedVariant,
     selectDimensions,
     handleChangeVariant,
     allDimensionsSelected,
-  } = useVariants({ product: productDetails });
+  } = useVariants(productDetails);
+
   const t = useTranslations("ProductList.QuickView");
   const { formatCurrency } = useCurrencyFormatter();
   const { handleCartAmountChange, handleAddToCart, loading } = useCart(
@@ -59,35 +62,43 @@ export default function QuickViewContent({
       ? {
           cart,
           recordId: product.RecordId,
-          selectVariantId: selectVariantId,
+          selectVariantId: selectedVariant?.RecordId,
         }
       : {
           cart: { Id: "", CartLines: [] },
           recordId: product.RecordId,
-          selectVariantId: selectVariantId,
+          selectVariantId: selectedVariant?.RecordId,
         },
   );
 
   const searchCriteria = useMemo<InventorySearchCriteriaInput>(
     () => ({
-      allDimensionsSelected: allDimensionsSelected(selectDimensions),
+      allDimensionsSelected: allDimensionsSelected,
       searchCriteria: {
         defaultWarehouseOnly: true,
-        productIds: [selectVariantId || product.RecordId],
+        productIds: [selectedVariant?.RecordId || product.RecordId],
       },
     }),
-    [allDimensionsSelected, selectDimensions, product, selectVariantId],
+    [
+      allDimensionsSelected,
+      selectDimensions,
+      product,
+      selectedVariant?.RecordId,
+    ],
   );
 
   const { data: shippingInventoryData, isLoading: inventoryLoading } =
     getProductAvailability.useData(searchCriteria);
 
   const currentCartLine = cart?.CartLines?.find((item) => {
-    return item?.ProductId === (Number(selectVariantId) || product.RecordId);
+    return (
+      item?.ProductId ===
+      (Number(selectedVariant?.RecordId) || product.RecordId)
+    );
   });
 
   const onAddToCart = (bopisInput?: AddToCartBopisInput) => {
-    if (!allDimensionsSelected(selectDimensions)) {
+    if (!allDimensionsSelected) {
       setShowDimensionError(true);
       return;
     }

package/src/pages-v2/README.md

@@ -0,0 +1,4 @@
+# Pages V2
+
+- This is new pages structure, the only difference between this and v1 is the updated imports to use
+  the new components folder.

package/src/pages-v2/account/addresses/address-form.tsx

@@ -0,0 +1,289 @@
+import React from "react";
+import {
+  Box,
+  Button,
+  FormControl,
+  InputLabel,
+  TextField,
+  MenuItem,
+  Select,
+  OutlinedInput,
+} from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import { useLocale, useTranslations } from "next-intl";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
+import { useRouter } from "next/navigation";
+// Forms
+import { useFormik } from "formik";
+import { z } from "zod";
+import { withZodSchema } from "formik-validator-zod";
+// API and Interfaces
+import { Address } from "@/api-manager/schemas/address.schema";
+import { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
+import getCountries from "@/api-manager/services/address/queries/get-countries";
+import getStates from "@/api-manager/services/address/queries/get-states";
+import useCreateAddress from "@/api-manager/services/address/mutations/create-address";
+import useUpdateAddress from "@/api-manager/services/address/mutations/update-address";
+
+// =============================================================
+type Props = { address: Address };
+// =============================================================
+export default function AddressForm({ address }: Props) {
+  const [tn, t] = ["Account.Addresses", "Address"].map(useTranslations);
+  const { setNotification } = useNotification();
+  const router = useRouter();
+  const locale = useLocale();
+
+  const { data: countries } = getCountries.useData({ locale });
+  const defaultCountry = countries?.find(
+    (c) => c.CountryRegionId === address?.ThreeLetterISORegionName,
+  );
+  const [selectedCountry, setSelectedCountry] =
+    React.useState<CountryRegionInfo | null>(defaultCountry ?? null);
+  const { data: states } = getStates.useData({
+    countryId: selectedCountry?.CountryRegionId,
+  });
+
+  const { mutateAsync: createAddress } = useCreateAddress();
+  const { mutateAsync: updateAddress } = useUpdateAddress();
+
+  React.useEffect(() => {
+    if (!selectedCountry && defaultCountry) {
+      setSelectedCountry(defaultCountry);
+    }
+  }, [defaultCountry, selectedCountry]);
+
+  const FormSchema = z.object({
+    Name: z.string().nonempty(t("Validation.required", { field: t("name") })),
+    Street: z
+      .string()
+      .nonempty(t("Validation.required", { field: t("street") })),
+    City: z.string().nonempty(t("Validation.required", { field: t("city") })),
+    State: z.string().nonempty(t("Validation.required", { field: t("state") })),
+    ZipCode: z
+      .string()
+      .nonempty(t("Validation.required", { field: t("zipCode") })),
+    Country: z
+      .string()
+      .nonempty(t("Validation.required", { field: t("country") })),
+    Phone: z.string().optional().default(""),
+  });
+  type FormSchemaType = z.infer<typeof FormSchema>;
+
+  const handleSubmit = async (values: FormSchemaType) => {
+    let newAddress: Address = {
+      Name: values.Name,
+      Street: values.Street,
+      City: values.City,
+      State: values.State,
+      ZipCode: values.ZipCode,
+      TwoLetterISORegionName: selectedCountry?.ISOCode,
+      ThreeLetterISORegionName: selectedCountry?.CountryRegionId,
+      Phone: values.Phone || undefined,
+    };
+
+    try {
+      if (address?.Id && address?.Id !== "new") {
+        newAddress = { ...newAddress, Id: address?.Id };
+        await updateAddress(newAddress);
+      } else {
+        await createAddress(newAddress);
+      }
+      setNotification({
+        message: tn("addressSuccess"),
+        severity: "success",
+      });
+      router.push("/account/addresses");
+    } catch (error) {
+      setNotification({
+        message: tn("addressFailed"),
+        severity: "error",
+      });
+    }
+  };
+
+  const setValues = (address: Address) => {
+    return {
+      Name: address?.Name || "",
+      Street: address?.Street || "",
+      City: address?.City || "",
+      State: address?.State || "",
+      ZipCode: address?.ZipCode || "",
+      Country: address?.ThreeLetterISORegionName || "",
+      Phone: address?.Phone || "",
+    };
+  };
+
+  const intialValues = setValues(address);
+
+  const formik = useFormik<FormSchemaType>({
+    initialValues: intialValues,
+    onSubmit: handleSubmit,
+    validate: withZodSchema(FormSchema),
+  });
+
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      <Grid container spacing={3}>
+        <Grid size={{ sm: 6, xs: 12 }}>
+          <TextField
+            name="Name"
+            fullWidth
+            autoComplete="off"
+            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>
+        <Grid size={{ sm: 6, xs: 12 }}>
+          <TextField
+            name="Street"
+            fullWidth
+            autoComplete="off"
+            label={t("street")}
+            value={formik.values.Street}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={formik.touched.Street && Boolean(formik.errors.Street)}
+            helperText={formik.touched.Street && formik.errors.Street}
+            required
+          />
+        </Grid>
+        <Grid size={{ sm: 6, xs: 12 }}>
+          <TextField
+            name="City"
+            fullWidth
+            autoComplete="off"
+            label={t("city")}
+            value={formik.values.City}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={formik.touched.City && Boolean(formik.errors.City)}
+            helperText={formik.touched.City && formik.errors.City}
+            required
+          />
+        </Grid>
+        <Grid size={{ sm: 6, xs: 12 }}>
+          <FormControl
+            fullWidth
+            size="small"
+            error={formik.touched.Country && Boolean(formik.errors.Country)}
+          >
+            <InputLabel required id="Country">
+              {t("country")}
+            </InputLabel>
+            <Select
+              labelId="Country"
+              name="Country"
+              input={<OutlinedInput label={t("country")} />}
+              value={formik.values.Country}
+              onChange={(event) => {
+                const countryId = event.target.value;
+
+                // Update selected country
+                const selected =
+                  countries?.find((c) => c.CountryRegionId === countryId) ||
+                  null;
+                setSelectedCountry(selected);
+
+                formik.setFieldValue("Country", countryId);
+                // Reset state field when country changes
+                formik.setFieldValue("State", "");
+              }}
+              onBlur={formik.handleBlur}
+              required
+            >
+              <MenuItem value="">Select Country</MenuItem>
+              {countries?.map(({ ShortName, CountryRegionId }, index) => (
+                <MenuItem value={CountryRegionId} key={index}>
+                  {ShortName}
+                </MenuItem>
+              ))}
+            </Select>
+            {formik.touched.Country && formik.errors.Country && (
+              <Box
+                component="span"
+                sx={{ color: "error.main", fontSize: "0.75rem", mt: 0.5 }}
+              >
+                {formik.errors.Country}
+              </Box>
+            )}
+          </FormControl>
+        </Grid>
+        <Grid size={{ sm: 6, xs: 12 }}>
+          <FormControl
+            fullWidth
+            size="small"
+            error={formik.touched.State && Boolean(formik.errors.State)}
+          >
+            <InputLabel required id="State">
+              {t("state")}
+            </InputLabel>
+            <Select
+              labelId="State"
+              name="State"
+              input={<OutlinedInput label={t("state")} />}
+              value={formik.values.State}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              required
+            >
+              <MenuItem value="">Select a state</MenuItem>
+              {states?.map(({ StateName, StateId }, index) => (
+                <MenuItem value={StateId} key={index}>
+                  {StateName}
+                </MenuItem>
+              ))}
+            </Select>
+            {formik.touched.State && formik.errors.State && (
+              <Box
+                component="span"
+                sx={{ color: "error.main", fontSize: "0.75rem", mt: 0.5 }}
+              >
+                {formik.errors.State}
+              </Box>
+            )}
+          </FormControl>
+        </Grid>
+
+        <Grid size={{ sm: 6, xs: 12 }}>
+          <TextField
+            name="ZipCode"
+            fullWidth
+            autoComplete="off"
+            label={t("zipCode")}
+            value={formik.values.ZipCode}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={formik.touched.ZipCode && Boolean(formik.errors.ZipCode)}
+            helperText={formik.touched.ZipCode && formik.errors.ZipCode}
+            required
+          />
+        </Grid>
+        <Grid size={{ sm: 6, xs: 12 }}>
+          <TextField
+            name="Phone"
+            fullWidth
+            autoComplete="off"
+            label={t("phone")}
+            value={formik.values.Phone}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={formik.touched.Phone && Boolean(formik.errors.Phone)}
+            helperText={formik.touched.Phone && formik.errors.Phone}
+            required
+          />
+        </Grid>
+      </Grid>
+      <Grid size={{ sm: 6, xs: 12 }} sx={{ mt: 3 }}>
+        <Button type="submit" variant="contained" color="primary">
+          {t("save")}
+        </Button>
+      </Grid>
+    </form>
+  );
+}

package/src/pages-v2/account/addresses/address-item.tsx

@@ -0,0 +1,104 @@
+import IconButton from "@mui/material/IconButton";
+import { Button, Box, Chip } from "@mui/material";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
+// MUI ICON COMPONENTS
+import { MdEdit as Edit } from "react-icons/md";
+import { MdDelete as Delete } from "react-icons/md";
+// GLOBAL CUSTOM COMPONENTS
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// LOCAL CUSTOM COMPONENT
+import TableRow from "../table-row";
+// API
+import useDeleteAddress from "@/api-manager/services/address/mutations/delete-address";
+import useUpdateUser from "@/api-manager/services/user/mutations/update-user";
+import { Address } from "@/api-manager/schemas/address.schema";
+
+interface Props {
+  address: Address;
+}
+
+export default function AddressListItem({ address }: Props) {
+  const router = useRouter();
+  const t = useTranslations("Account.Addresses");
+  const { setNotification } = useNotification();
+
+  const { mutateAsync: updateUser } = useUpdateUser();
+  const { mutateAsync: deleteAddress } = useDeleteAddress();
+
+  const setPrimaryAddress = (id: string) => {
+    updateUser({ AccountNumber: "", DefaultShippingAddressId: id });
+  };
+
+  const editAddress = (id: string) => {
+    router.push(`/account/addresses/${id}`);
+  };
+  const handleDelete = async (id: string) => {
+    try {
+      await deleteAddress(id);
+      setNotification({
+        message: t("deleteAddressSuccess"),
+        severity: "success",
+      });
+    } catch (error) {
+      setNotification({
+        message: t("deleteAddressFailed"),
+        severity: "error",
+      });
+    }
+  };
+
+  return (
+    <TableRow
+      sx={{
+        display: "grid",
+        gridTemplateColumns: "1fr 2fr 1fr 1.5fr", // Define equal column structure
+        alignItems: "center",
+        gap: 2,
+        padding: "10px 15px",
+      }}
+    >
+      <Paragraph ellipsis>{address?.Name}</Paragraph>
+      <Paragraph ellipsis>{address?.FullAddress}</Paragraph>
+      <Paragraph ellipsis>{address?.Phone}</Paragraph>
+
+      {/* Actions Column */}
+      <Box display="flex" alignItems="center" gap={1} justifySelf="end">
+        {address?.IsPrimary ? (
+          <Chip size="small" label={t("primaryFlag")} color="primary" />
+        ) : (
+          <Button
+            color="secondary"
+            variant="outlined"
+            size="small"
+            onClick={() => {
+              const rid = address.RecordId?.toString();
+              setPrimaryAddress(address.Id ?? rid ?? "");
+            }}
+          >
+            {t("btnPrimaryAddress")}
+          </Button>
+        )}
+
+        <IconButton
+          onClick={() => {
+            const rid = address.RecordId?.toString();
+            editAddress(address.Id ?? rid ?? "");
+          }}
+        >
+          <Edit fontSize="large" color="inherit" />
+        </IconButton>
+
+        <IconButton
+          onClick={() => {
+            const rid = address.RecordId?.toString();
+            handleDelete(address.Id ?? rid ?? "");
+          }}
+        >
+          <Delete fontSize="large" color="inherit" />
+        </IconButton>
+      </Box>
+    </TableRow>
+  );
+}

package/src/pages-v2/account/dashboard-header.tsx

@@ -0,0 +1,123 @@
+import React, { ReactNode } from "react";
+import Link from "next/link";
+import { Box, Button, IconButton, Theme, styled } from "@mui/material";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useTranslations } from "next-intl";
+// ICON COMPONENTS
+import { MdMenu as Menu } from "react-icons/md";
+// GLOBAL CUSTOM COMPONENTS
+import SideNav from "@evenicanpm/storefront-core/src/components-v2/side-nav/index";
+import { H2 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+// LOCAL CUSTOM COMPONENTS
+import Navigation from "./navigation";
+import { IconType } from "react-icons";
+
+// STYLED COMPONENT
+const StyledBox = styled("div")(({ theme }) => ({
+  display: "flex",
+  marginTop: theme.spacing(-2),
+  marginBottom: theme.spacing(3),
+  "& .headerHold": {
+    flexGrow: 1,
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  [theme.breakpoints.up("md")]: {
+    "& .sidenav": { display: "none" },
+  },
+  [theme.breakpoints.down("md")]: {
+    flexDirection: "column",
+  },
+}));
+
+// ==============================================================
+
+type WithButtons = {
+  title: string;
+  titleMessage?: string;
+  buttons: ReactNode;
+  Icon: IconType;
+  href?: never;
+  buttonText?: never;
+};
+
+type WithGeneratedButton = {
+  title: string;
+  titleMessage?: string;
+  href?: string;
+  buttonText?: string;
+  Icon: IconType;
+  buttons?: ReactNode;
+};
+
+type Props = WithButtons | WithGeneratedButton;
+
+// ==============================================================
+
+export default function DashboardHeader({
+  title,
+  titleMessage,
+  buttons,
+  href,
+  buttonText,
+  Icon,
+}: Props) {
+  const t = useTranslations();
+  const isTablet = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.down(1025),
+  );
+
+  const GENERATED_BUTTON = href ? (
+    <Button
+      href={href}
+      color="primary"
+      LinkComponent={Link}
+      sx={{ bgcolor: "primary.light", px: 4 }}
+    >
+      {t(buttonText)}
+    </Button>
+  ) : null;
+
+  const HEADER_LINKS = (
+    <FlexBox gap={1} justifyContent="flex-end">
+      {buttons || GENERATED_BUTTON}
+    </FlexBox>
+  );
+
+  return (
+    <StyledBox>
+      <FlexBox mt={2} className="headerHold">
+        <FlexBox alignItems="center" gap={0.5}>
+          {Icon && (
+            <IconButton color="primary">
+              <Icon />
+            </IconButton>
+          )}
+          <H2 my={0} lineHeight={1} ellipsis>
+            {titleMessage ? titleMessage : t(title)}
+          </H2>
+        </FlexBox>
+
+        <FlexBox className="button-container" justifyContent="flex-end">
+          {!isTablet && HEADER_LINKS}
+        </FlexBox>
+
+        <div className="sidenav">
+          <SideNav
+            position="left"
+            handler={(close) => (
+              <IconButton onClick={close}>
+                <Menu fontSize="small" />
+              </IconButton>
+            )}
+          >
+            <Navigation />
+          </SideNav>
+        </div>
+      </FlexBox>
+
+      {isTablet ? <Box mt={2}>{HEADER_LINKS}</Box> : null}
+    </StyledBox>
+  );
+}

package/src/pages-v2/account/navigation.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { Fragment } from "react";
+import { useTranslations } from "next-intl";
+
+// ICON COMPONENTS
+import {
+  MdOutlineShoppingBag as ShoppingBagOutlined,
+  MdFavoriteBorder as FavoriteBorder,
+  MdPerson as Person,
+  MdPlace as Place,
+} from "react-icons/md";
+
+// GLOBAL CUSTOM COMPONENTS
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+import {
+  Paragraph,
+  Span,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+
+// API
+import getUser from "@/api-manager/services/user/queries/get-user";
+import getUserCounts from "@/api-manager/services/user/queries/get-user-counts";
+
+// STYLED COMPONENTS
+import { MainContainer, StyledNavLink } from "./styles";
+
+const MENU_ITEMS = [
+  {
+    title: "DASHBOARD",
+    list: [
+      {
+        href: "/account/orders",
+        title: "orders",
+        Icon: ShoppingBagOutlined,
+        count: 0,
+      },
+      { href: "/account/wish-lists", title: "wishlists", Icon: FavoriteBorder },
+    ],
+  },
+  {
+    title: "ACCOUNT SETTINGS",
+    list: [
+      { href: "/account/profile", title: "profile", Icon: Person },
+      { href: "/account/addresses", title: "addresses", Icon: Place, count: 0 },
+    ],
+  },
+];
+
+export default function Navigation() {
+  const pathname = usePathname();
+  const t = useTranslations("Account.Menu");
+
+  const { data: user } = getUser.useData();
+  const { data: counts } = getUserCounts.useData(String(user?.RecordId) || "");
+
+  MENU_ITEMS[0].list[0].count = counts?.orderCount;
+  MENU_ITEMS[1].list[1].count = counts?.addressCount;
+
+  return (
+    <MainContainer>
+      {MENU_ITEMS.map((item) => (
+        <Fragment key={item.title}>
+          <Paragraph p="26px 30px 1rem" color="grey.600" fontSize={12}>
+            {item.title}
+          </Paragraph>
+
+          {item.list.map(({ Icon, count, href, title }) => (
+            <StyledNavLink
+              href={href}
+              key={title}
+              isCurrentPath={pathname.includes(href)}
+            >
+              <FlexBox alignItems="center" gap={1}>
+                <Icon color="inherit" fontSize="large" className="nav-icon" />
+                <Span>{t(title)}</Span>
+              </FlexBox>
+
+              <Span>{count}</Span>
+            </StyledNavLink>
+          ))}
+        </Fragment>
+      ))}
+    </MainContainer>
+  );
+}