@evenicanpm/storefront-core 1.0.0-alpha → 1.0.0

package/src/components/_components/wishlist/components/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/_components/side-nav/index";
+import { H2 } from "@evenicanpm/storefront-core/src/components/_components/Typography";
+import FlexBox from "@evenicanpm/storefront-core/src/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/components/_components/wishlist/components/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/_components/flex-box/flex-box";
+import {
+  Paragraph,
+  Span,
+} from "@evenicanpm/storefront-core/src/components/_components/Typography";
+
+// API
+import getUser from "@evenicanpm/storefront-core/src/api-manager/services/user/queries/get-user";
+import getUserCounts from "@evenicanpm/storefront-core/src/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>
+  );
+}

package/src/components/_components/wishlist/components/no-records.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { H4 } from "@evenicanpm/storefront-core/src/components/_components/Typography";
+import { useTranslations } from "next-intl";
+
+type Props = { message: string };
+
+export default function NoRecords({ message }: Props) {
+  const t = useTranslations();
+  return (
+    <Box
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      height="50vh"
+    >
+      <H4 color="grey.500">{t(message)}</H4>
+    </Box>
+  );
+}

package/src/components/_components/wishlist/components/wishlist-modal-item.tsx

@@ -0,0 +1,66 @@
+import { Button } from "@mui/material";
+import { format } from "date-fns";
+// MUI ICON COMPONENTS
+// GLOBAL CUSTOM COMPONENTS
+import { Paragraph } from "@evenicanpm/storefront-core/src/components/_components/Typography";
+// LOCAL CUSTOM COMPONENT
+
+// API
+import { Wishlist } from "@/api-manager/schemas/user.schema";
+import { StyledTableRow } from "../styles";
+
+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 (
+    <StyledTableRow
+      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>
+    </StyledTableRow>
+  );
+}

package/src/components/_components/wishlist/remove-from-wishlist-dialog.tsx

@@ -0,0 +1,174 @@
+import React, { Fragment, useCallback, useEffect } from "react";
+import isFunction from "lodash/isFunction";
+import { useTranslations } from "next-intl";
+import { Grid, Button, Dialog, DialogContent } from "@mui/material";
+import { MdFavorite } from "react-icons/md";
+// Global Custom components
+import DashboardHeader from "./components/dashboard-header";
+import WishlistModalItem from "./components/wishlist-modal-item";
+import NoRecords from "./components/no-records";
+// API
+import getWishlists from "@/api-manager/services/user/queries/get-wishlists";
+import {
+  ExtendedProductListLine,
+  Wishlist,
+  WishlistLinesInput,
+} from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
+import { useNotification } from "@evenicanpm/storefront-core/src/components/Notifications/use-notification";
+import { useSession } from "next-auth/react";
+import useRemoveFromWishlist from "@/api-manager/services/user/mutations/remove-from-wishlist";
+
+interface Props {
+  open: boolean;
+  // product?: ProductDetails;
+  productId?: number;
+  onSuccess?: () => void;
+  handleClose: () => void;
+}
+
+export default function RemoveFromWishlistDialog({
+  open,
+  productId,
+  handleClose,
+  onSuccess,
+}: Props) {
+  const { data: wishlists, isLoading } = getWishlists.useSuspenseData();
+  const t = useTranslations("Account.Wishlists");
+  const { setNotification } = useNotification();
+
+  const { mutateAsync: removeFromWishlist } = useRemoveFromWishlist();
+
+  const { data: session } = useSession();
+  const isAuthenticated = !!session;
+
+  const [relevantWishlists, setRelevantWishlists] = React.useState<Wishlist[]>(
+    [],
+  );
+
+  const handleCloseDialog = () => {
+    if (isFunction(handleClose)) {
+      handleClose();
+    }
+  };
+
+  // get wishlists that the product is in
+  const getRelevantWishlists = useCallback(
+    (wishlists: Wishlist[]) => {
+      return wishlists.filter((wishlist) =>
+        wishlist.ProductListLines?.some((line) => line.ProductId === productId),
+      );
+    },
+    [productId],
+  );
+
+  const handleRemoveFromWishlist = useCallback(
+    async (wishlistId: string) => {
+      // get the selected wishlist
+      const wishlist = relevantWishlists.find(
+        (wishlist) => wishlist.Id === wishlistId,
+      );
+      if (wishlist) {
+        try {
+          const extendedWishlistLine = wishlist.ProductListLines?.find(
+            (item: ExtendedProductListLine) => item.ProductId === productId,
+          );
+
+          if (extendedWishlistLine) {
+            const wishlistLinesInput: WishlistLinesInput = {
+              Id: wishlist.Id,
+              ProductListLines: [extendedWishlistLine],
+            };
+
+            await removeFromWishlist(wishlistLinesInput);
+
+            setNotification({
+              message: t("wishlistLineRemoveSuccess"),
+              severity: "success",
+            });
+            if (isFunction(onSuccess)) {
+              onSuccess();
+            }
+          }
+        } catch (error) {
+          setNotification({
+            message: t("wishlistLineRemoveFailed"),
+            severity: "error",
+          });
+        }
+      }
+    },
+    [
+      relevantWishlists,
+      removeFromWishlist,
+      setNotification,
+      t,
+      onSuccess,
+      productId,
+    ],
+  );
+
+  useEffect(() => {
+    const withlistsWithProduct = getRelevantWishlists(wishlists);
+    setRelevantWishlists(withlistsWithProduct);
+    if (open && withlistsWithProduct.length === 1) {
+      // delete right away
+      handleRemoveFromWishlist(withlistsWithProduct[0].Id);
+    }
+  }, [open, getRelevantWishlists, handleRemoveFromWishlist, wishlists]);
+
+  return (
+    <Dialog
+      open={open}
+      onClose={handleCloseDialog}
+      aria-labelledby="form-dialog-title"
+    >
+      <DialogContent>
+        <Fragment>
+          <DashboardHeader
+            title="Account.Wishlists.heading"
+            Icon={MdFavorite}
+            href=""
+            buttonText=""
+          />
+          {isAuthenticated && !isLoading ? (
+            relevantWishlists && relevantWishlists.length > 0 ? (
+              relevantWishlists?.map((wishlist: Wishlist) => (
+                <WishlistModalItem
+                  key={wishlist.Id}
+                  wishlist={wishlist}
+                  removeFromWishlist={handleRemoveFromWishlist}
+                />
+              ))
+            ) : (
+              <NoRecords message="Account.Wishlists.noWishlists" />
+            )
+          ) : (
+            <NoRecords message="Account.Wishlists.wishlistAddUnauthenticated" />
+          )}
+        </Fragment>
+        <Grid container spacing={3}>
+          <Grid
+            item
+            sm={12}
+            xs={12}
+            sx={{
+              display: "flex",
+              justifyContent: "flex-start",
+              gap: 2,
+            }}
+          >
+            <Button
+              color="primary"
+              variant="outlined"
+              size="small"
+              onClick={handleCloseDialog}
+              sx={{ height: 30.75 }}
+            >
+              {t("btnCancel")}
+            </Button>
+          </Grid>
+        </Grid>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/_components/wishlist/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/_components/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/components/countries-input.tsx

@@ -3,7 +3,6 @@ import {
   Autocomplete,
   AutocompleteRenderInputParams,
   Box,
-  InputProps,
   TextField,
 } from "@mui/material";
 import React from "react";
@@ -28,12 +27,14 @@ export default function CountryInput({
   ) => setCountryInputValue(value);
 
   const renderOption = (
-    optionProps: React.HTMLAttributes<HTMLLIElement>,
+    props: React.HTMLAttributes<HTMLLIElement> & {
+      key: any;
+    },
     option: CountryRegionInfo,
-    index: number,
   ) => {
+    const { key, ...optionProps } = props;
     return (
-      <Box key={index} component="li" {...optionProps}>
+      <Box key={key} component="li" {...optionProps}>
         {option.ShortName}
       </Box>
     );
@@ -45,11 +46,6 @@ export default function CountryInput({
       label={label}
       variant="outlined"
       placeholder="Select Country"
-      slotProps={{
-        input: {
-          "data-testid": "country-input",
-        } as InputProps,
-      }}
     />
   );
 
@@ -66,9 +62,7 @@ export default function CountryInput({
       data-testid="country-autocomplete"
       inputValue={countryInputValue}
       onInputChange={handleAutoCompleteChange}
-      renderOption={(props, option, state) =>
-        renderOption(props, option, state?.index)
-      }
+      renderOption={(props, option) => renderOption(props, option)}
       renderInput={renderInput}
       getOptionLabel={getOptionLabel}
     />

package/src/lib/cart-cookie-handler-constants.ts

@@ -0,0 +1,8 @@
+export const CART_COOKIE_NAME = "cart_cookie";
+export const CartCookieType = {
+  Auth: "AU",
+  Anon: "AN",
+} as const;
+
+export type CartCookieType =
+  (typeof CartCookieType)[keyof typeof CartCookieType];

package/src/lib/cart-cookie-handler.ts

@@ -1,14 +1,36 @@
 "use server";
 import { cookies } from "next/headers";
+import {
+  CART_COOKIE_NAME,
+  CartCookieType,
+} from "./cart-cookie-handler-constants";
 
-const getCartCookie = async () => (await cookies()).get("cart_cookie")?.value;
+const getCartCookie = async (): Promise<string | null> =>
+  (await getCartCookieWithAuthStatus())?.id ?? null;
 
-const setCartCookie = async (cartId: string) => {
-  (await cookies()).set("cart_cookie", cartId);
+const setCartCookie = async (cartId: string, isAuthenticated?: boolean) => {
+  const cookieValue = `${isAuthenticated ? CartCookieType.Auth : CartCookieType.Anon}:${cartId}`;
+  (await cookies()).set(CART_COOKIE_NAME, cookieValue);
 };
 
 const deleteCartCookie = async () => {
-  (await cookies()).delete("cart_cookie");
+  (await cookies()).delete(CART_COOKIE_NAME);
 };
 
-export { getCartCookie, setCartCookie, deleteCartCookie };
+const getCartCookieWithAuthStatus = async () => {
+  const cartCookie = (await cookies()).get(CART_COOKIE_NAME)?.value;
+  if (!cartCookie) return null;
+  const parts = cartCookie.split(":");
+  if (parts.length !== 2) return null;
+  return {
+    type: parts[0] as CartCookieType,
+    id: parts[1] as string,
+  };
+};
+
+export {
+  getCartCookie,
+  setCartCookie,
+  deleteCartCookie,
+  getCartCookieWithAuthStatus,
+};

package/src/lib/create-graphql-client.ts

@@ -5,7 +5,6 @@ import { GraphQLClient } from "graphql-request";
 // and one here to isntantiate because graphql-request library must be same
 // for this file and the sdk
 import { getSdk } from "@/lib/graphqlRequestSdk";
-import { getConfig } from "@config";
 
 // typescript can't infer type without reference
 export type E4Sdk = ReturnType<typeof getSdk>;
@@ -15,7 +14,7 @@ export type E4Sdk = ReturnType<typeof getSdk>;
  * @returns a new graphql request client with all of E4 queries and mutations
  */
 const createGraphQLClient = async (): Promise<E4Sdk> => {
-  const API_URL = getConfig().E4_API_ENDPOINT;
+  const API_URL = process.env.NEXT_PUBLIC_E4_API_ENDPOINT || "";
   const client = new GraphQLClient(API_URL, {
     credentials: "include", // Ensures cookies are included
     headers: {

package/src/lib/product-list-types.ts

@@ -0,0 +1,41 @@
+import { ProductRefinerValue } from "@msdyn365-commerce/retail-proxy";
+
+export const PageKey = {
+  TOP: "perPage",
+  PAGE: "page",
+  REFINEMENT: "refiner",
+  VIEW: "view",
+  SORT: "sort",
+  SEARCH: "search",
+} as const;
+
+export type ProductListSearchParams = {
+  perPage?: typeof PageKey.TOP;
+  page?: typeof PageKey.PAGE;
+  refiner: typeof PageKey.REFINEMENT;
+  search: typeof PageKey.SEARCH;
+  sort: typeof PageKey.SORT;
+};
+
+export type PageKey = (typeof PageKey)[keyof typeof PageKey];
+
+export type ViewMode = "grid" | "list";
+
+export type ProductListParamHandlers = {
+  handlePageChange: (page: number) => void;
+  handlePerPageChange: (perPage: number) => void;
+  handleRefinerChange: (refiner: ProductRefinerValue) => void;
+  handleSortChange: (sort: SortOption) => void;
+  handleViewChange: (view: ViewMode) => void;
+  handleSearchChange: (searchTerm: string) => void;
+  handleRefinersClear?: () => void;
+};
+
+export type SortOption = {
+  field: string;
+  code: string;
+  isDefault?: boolean;
+  isDescending: boolean;
+  displayName: string;
+  defaultForSearch?: boolean;
+};