@evenicanpm/storefront-core 1.0.2 → 1.0.3

package/src/components-v2/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 "@evenicanpm/storefront-core/src/components-v2/Typography";
+// LOCAL CUSTOM COMPONENT
+import TableRow from "@evenicanpm/storefront-core/src/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/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";

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,

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>
+  );
+}