@evenicanpm/storefront-core 1.1.0 → 1.2.0

package/src/components/_components/wishlist/styles.ts

@@ -1,61 +0,0 @@
-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/_components/wishlist-modal/TODO.md

@@ -1,10 +0,0 @@
-# Wish List Component Dedupe
-
-Found these components inside of the /app directory in storefront,
-seems like someone created duplicates of components that were already
-inside of our client packages wishlist folder.
-
-Todo: Audit two folders and amalgamate duplicate code.
-
-Date: 2025-07-10  
-By: Sam Forderer

package/src/components/_components/wishlist-modal/add-to-wishlist-button.tsx

@@ -1,68 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button, ButtonProps } from "@mui/material";
-import T from "@/components/T";
-import AddToWishlistDialog from "./add-to-wishlist-dialog";
-import { ProductDetails } from "@/api-manager/schemas/product.schema";
-import { Cart } from "@/api-manager/schemas/cart.schema";
-
-interface Props {
-  path: string;
-  product?: ProductDetails;
-  cart?: Cart;
-  variant?: string;
-}
-
-const AddToWishlistButton = (props: Props) => {
-  const [openAddListDialog, setOpenAddListDialog] = useState(false);
-
-  const handleCloseDialog = () => {
-    setOpenAddListDialog(false);
-  };
-
-  const handleCreateNewList = () => {
-    setOpenAddListDialog(true);
-  };
-
-  // conditionally render button styles based on variant (pdp or minicart)
-  let style, btnFullwidth;
-  let btnColor: ButtonProps["color"];
-  let btnVariant: ButtonProps["variant"];
-  switch (props.variant) {
-    case "minicart":
-      style = {
-        px: 4,
-      };
-      btnFullwidth = true;
-      btnVariant = "outlined";
-      btnColor = "primary";
-      break;
-    default:
-      btnFullwidth = false;
-      btnVariant = "contained";
-      btnColor = "secondary";
-      break;
-  }
-
-  return (
-    <>
-      <Button
-        onClick={handleCreateNewList}
-        sx={style}
-        fullWidth={btnFullwidth}
-        color={btnColor}
-      >
-        <T path={props.path} />
-      </Button>
-      <AddToWishlistDialog
-        open={openAddListDialog}
-        handleClose={handleCloseDialog}
-        productId={props.product?.RecordId}
-        cart={props.cart}
-      />
-    </>
-  );
-};
-
-export default AddToWishlistButton;

package/src/components/_components/wishlist-modal/add-to-wishlist-dialog.tsx

@@ -1,161 +0,0 @@
-import React, { Fragment } 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 "../../../pages/account/dashboard-header";
-import CreateWishlistButton from "../../../pages/account/wishlist/create-wishlist-button";
-import WishlistModalItem from "./wishlist-modal-item";
-import NoRecords from "@evenicanpm/storefront-core/src/components-v2/no-records";
-// API
-import {
-  CopyCartToWishlistInput,
-  Wishlist,
-  WishlistLinesInput,
-} from "@/api-manager/schemas/user.schema";
-import { Cart } from "@/api-manager/schemas/cart.schema";
-import useAddToWishlist from "@/api-manager/services/user/mutations/add-to-wishlist";
-import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
-import useCopyCartToWishlist from "@/api-manager/services/user/mutations/copy-cart-to-wishlist";
-import { useSession } from "next-auth/react";
-import getWishlists from "@/api-manager/services/user/queries/get-wishlists";
-
-interface Props {
-  open: boolean;
-  handleClose: () => void;
-  productId?: number;
-  cart?: Cart;
-  onSuccess?: () => void;
-}
-
-export default function AddToWishlistDialog(props: Props) {
-  const { data: wishlists, isLoading } = getWishlists.useData();
-
-  const t = useTranslations("Account.Wishlists");
-  const { setNotification } = useNotification();
-
-  const { mutateAsync: addToWishlist } = useAddToWishlist();
-  const { mutateAsync: copyCartToWishlist } = useCopyCartToWishlist();
-
-  const { data: session } = useSession();
-  const isAuthenticated = !!session;
-
-  const handleClose = () => {
-    if (isFunction(props.handleClose)) {
-      props.handleClose();
-    }
-  };
-
-  const handleAddToWishlist = async (wishlistId: string) => {
-    if (props.productId) {
-      try {
-        const wishlistLinesInput: WishlistLinesInput = {
-          Id: wishlistId,
-          ProductListLines: [],
-        };
-
-        wishlistLinesInput.ProductListLines.push({
-          ProductListId: wishlistId,
-          ProductId: props.productId,
-          Quantity: 1,
-          UnitOfMeasure: "ea",
-        });
-        await addToWishlist(wishlistLinesInput);
-        setNotification({
-          message: t("wishlistLineAddSuccess"),
-          severity: "success",
-        });
-        if (isFunction(props.onSuccess)) {
-          props.onSuccess();
-        }
-      } catch (error) {
-        setNotification({
-          message: t("wishlistLineAddFailed"),
-          severity: "error",
-        });
-      }
-    } else if (props.cart) {
-      try {
-        const copyCartToWishlistInput: CopyCartToWishlistInput = {
-          Id: wishlistId,
-          CartID: props.cart.Id,
-          IsRewrite: false,
-          IsQuantityAggregate: true,
-        };
-
-        await copyCartToWishlist(copyCartToWishlistInput);
-        setNotification({
-          message: t("wishlistCartCopySuccess"),
-          severity: "success",
-        });
-      } catch (error) {
-        setNotification({
-          message: t("wishlistCartCopyFailed"),
-          severity: "error",
-        });
-      }
-    }
-  };
-
-  return (
-    <Dialog
-      open={props.open}
-      onClose={handleClose}
-      aria-labelledby="form-dialog-title"
-    >
-      <DialogContent>
-        <Fragment>
-          <DashboardHeader
-            title="Account.Wishlists.heading"
-            Icon={MdFavorite}
-            href=""
-            buttonText=""
-            buttons={
-              isAuthenticated && (
-                <CreateWishlistButton path="Account.Wishlists.btnCreateNewList" />
-              )
-            }
-          />
-          {isAuthenticated && !isLoading ? (
-            wishlists && wishlists.length > 0 ? (
-              wishlists?.map((wishlist: Wishlist) => (
-                <WishlistModalItem
-                  key={wishlist.Id}
-                  wishlist={wishlist}
-                  addToWishlist={handleAddToWishlist}
-                />
-              ))
-            ) : (
-              <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={handleClose}
-              sx={{ height: 30.75 }}
-            >
-              {t("btnCancel")}
-            </Button>
-          </Grid>
-        </Grid>
-      </DialogContent>
-    </Dialog>
-  );
-}

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

@@ -1,174 +0,0 @@
-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 "../../../pages/account/dashboard-header";
-import WishlistModalItem from "./wishlist-modal-item";
-import NoRecords from "@evenicanpm/storefront-core/src/components-v2/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/providers/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-modal/wishlist-modal-item.tsx

@@ -1,65 +0,0 @@
-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
-import TableRow from "../../../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/components/countries-input.tsx

@@ -1,72 +0,0 @@
-import { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
-import {
-  Autocomplete,
-  AutocompleteRenderInputParams,
-  Box,
-  TextField,
-} from "@mui/material";
-import React from "react";
-
-interface Props {
-  countries: CountryRegionInfo[];
-  label: string;
-  selectedCountry: CountryRegionInfo | null;
-  setSelectedCountry: (country: CountryRegionInfo | null) => void;
-}
-
-export default function CountryInput({
-  countries,
-  label,
-  setSelectedCountry,
-  selectedCountry,
-}: Props) {
-  const [countryInputValue, setCountryInputValue] = React.useState<string>("");
-  const handleAutoCompleteChange = (
-    _event: React.SyntheticEvent<Element, Event>,
-    value: string,
-  ) => setCountryInputValue(value);
-
-  const renderOption = (
-    props: React.HTMLAttributes<HTMLLIElement> & {
-      key: any;
-    },
-    option: CountryRegionInfo,
-  ) => {
-    const { key, ...optionProps } = props;
-    return (
-      <Box key={key} component="li" {...optionProps}>
-        {option.ShortName}
-      </Box>
-    );
-  };
-  const renderInput = (params: AutocompleteRenderInputParams) => (
-    <TextField
-      {...params}
-      size="small"
-      label={label}
-      variant="outlined"
-      placeholder="Select Country"
-    />
-  );
-
-  const getOptionLabel = (option: CountryRegionInfo) => option.ShortName || "";
-
-  const renderAutocomplete = () => (
-    <Autocomplete
-      fullWidth
-      value={selectedCountry}
-      options={countries}
-      onChange={(_event, newValue) => {
-        setSelectedCountry(newValue);
-      }}
-      data-testid="country-autocomplete"
-      inputValue={countryInputValue}
-      onInputChange={handleAutoCompleteChange}
-      renderOption={(props, option) => renderOption(props, option)}
-      renderInput={renderInput}
-      getOptionLabel={getOptionLabel}
-    />
-  );
-
-  return renderAutocomplete();
-}

package/src/components-v2/accordion/accordion-header.stories.tsx

@@ -1,28 +0,0 @@
-// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
-import type { Meta, StoryObj } from "@storybook/react";
-import ThemeProvider from "../../theme/theme-provider";
-
-import AccordionHeader from "./accordion-header";
-
-const meta = {
-  component: AccordionHeader,
-} satisfies Meta<typeof AccordionHeader>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  decorators: [
-    (Story) => (
-      <ThemeProvider baseTheme={null}>
-        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
-        <Story />
-      </ThemeProvider>
-    ),
-  ],
-  args: {
-    open: false,
-    showIcon: true,
-    children: <h1>hello</h1>,
-  },
-};

package/src/pages/README.md

@@ -1,4 +0,0 @@
-# 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