@evenicanpm/storefront-core 1.0.0 → 1.0.1

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/pages/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 "@/components/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/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 "@/components/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 "@/components/_components/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/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 "@/components/_components/side-nav/index";
+import { H2 } from "@/components/_components/Typography";
+import FlexBox from "@/components/_components/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/account/navigation.tsx

@@ -0,0 +1,84 @@
+"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 "@/components/_components/flex-box/flex-box";
+import { Paragraph, Span } from "@/components/_components/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>
+  );
+}