@evenicanpm/storefront-core 1.0.5 → 1.1.0

package/src/theme/theme-options-sample.ts

@@ -0,0 +1,69 @@
+import { components } from "./components";
+import { typography } from "./typography";
+import { primary, themeColors } from "./theme-colors";
+
+/********************************************
+ * You can delete themeOptions.ts file and
+ * rename this file to `themeOptions.ts`
+ * Follow the documentation for more details
+ *********************************************/
+
+const THEMES = {
+  GIFT: "GIFT",
+  HEALTH: "HEALTH",
+  DEFAULT: "DEFAULT",
+  GROCERY: "GROCERY",
+  FURNITURE: "FURNITURE",
+};
+
+const breakpoints = {
+  values: {
+    xs: 0,
+    sm: 600,
+    md: 960,
+    lg: 1280,
+    xl: 1600,
+    xxl: 1920,
+  },
+};
+
+const themesOptionList = {
+  [THEMES.DEFAULT]: {
+    typography,
+    breakpoints,
+    components: { ...components },
+    palette: { primary: { ...primary, light: primary[100] }, ...themeColors },
+  },
+  //   [THEMES.GROCERY]: {
+  //     typography,
+  //     breakpoints,
+  //     components: { ...components },
+  //     palette: { primary: { ...primary, light: primary[100] }, ...themeColors },
+  //   },
+  //   [THEMES.FURNITURE]: {
+  //     typography,
+  //     breakpoints,
+  //     components: { ...components },
+  //     palette: { primary: { ...paste, light: paste[100] }, ...themeColors },
+  //   },
+  //   [THEMES.HEALTH]: {
+  //     typography,
+  //     breakpoints,
+  //     components: { ...components },
+  //     palette: { primary: { ...blue, light: blue[100] }, ...themeColors },
+  //   },
+  //   [THEMES.GIFT]: {
+  //     typography,
+  //     breakpoints,
+  //     components: { ...components },
+  //     palette: { primary: { ...marron, light: marron[100] }, ...themeColors },
+  //   },
+};
+
+const themeOptions = () => {
+  // YOU CAN SET ANOTHER THEME HERE E.G. [THEMES.GROCERY] OR [THEMES.FURNITURE] ETC.
+  const themeOption = themesOptionList[THEMES.DEFAULT];
+  return themeOption;
+};
+
+export default themeOptions;

package/src/theme/theme-options.ts

@@ -0,0 +1,172 @@
+import { components } from "./components";
+import { typography } from "./typography";
+import {
+  blue,
+  marron,
+  paste,
+  primary,
+  themeColors,
+  orange,
+  bluish,
+  success,
+  warning,
+  gold,
+} from "./theme-colors";
+
+const THEMES = {
+  GIFT: "GIFT",
+  HEALTH: "HEALTH",
+  DEFAULT: "DEFAULT",
+  GROCERY: "GROCERY",
+  PASTE: "PASTE",
+  ORANGE: "ORANGE",
+  GOLD: "GOLD",
+  BLUISH: "BLUISH",
+  GREEN: "GREEN",
+  YELLOW: "YELLOW",
+};
+
+const breakpoints = {
+  values: {
+    xs: 0,
+    sm: 600,
+    md: 960,
+    lg: 1280,
+    xl: 1600,
+    xxl: 1920,
+  },
+};
+
+/*
+WE CREATED MULTIPLE THEME OPTIONS FOR DIFFERENT SHOP VARIATION.
+
+YOU CAN JUST KEEP [THEMES.DEFAULT] AND REMOVE OTHER THEME OPTIONS.
+*/
+const themesOptionList = {
+  [THEMES.DEFAULT]: {
+    typography,
+    components,
+    breakpoints,
+    palette: { primary: { ...primary, light: primary[100] }, ...themeColors },
+  },
+  [THEMES.GROCERY]: {
+    typography,
+    components,
+    breakpoints,
+    palette: { primary: { ...primary, light: primary[100] }, ...themeColors },
+  },
+  [THEMES.PASTE]: {
+    typography,
+    components,
+    breakpoints,
+    palette: { primary: { ...paste, light: paste[100] }, ...themeColors },
+  },
+  [THEMES.HEALTH]: {
+    typography,
+    components,
+    breakpoints,
+    palette: { primary: { ...blue, light: blue[100] }, ...themeColors },
+  },
+  [THEMES.GIFT]: {
+    typography,
+    components,
+    breakpoints,
+    palette: { primary: { ...marron, light: marron[100] }, ...themeColors },
+  },
+  [THEMES.ORANGE]: {
+    typography,
+    components,
+    breakpoints,
+    palette: { primary: { ...orange }, ...themeColors },
+  },
+  [THEMES.GOLD]: {
+    typography,
+    components,
+    breakpoints,
+    palette: { primary: { ...gold }, ...themeColors },
+  },
+  [THEMES.BLUISH]: {
+    typography,
+    components,
+    breakpoints,
+    palette: { primary: { ...bluish }, ...themeColors },
+  },
+  [THEMES.GREEN]: {
+    typography,
+    components,
+    breakpoints,
+    palette: { primary: { ...success }, ...themeColors },
+  },
+
+  [THEMES.YELLOW]: {
+    typography,
+    components,
+    breakpoints,
+    palette: { primary: { ...warning }, ...themeColors },
+  },
+};
+
+const themeOptions = (pathname: string) => {
+  let themeOption;
+
+  const path = pathname || "/"; // Fallback to root if null
+  /*
+    YOU CAN ALSO REMOVE updateTheme function
+    AND FOLLOWING ENTIRE switch case BLOCK.
+  */
+  const updateTheme = (themeName: string) => {
+    themeOption = themesOptionList[themeName];
+  };
+
+  switch (path) {
+    case "/":
+      updateTheme(THEMES.DEFAULT);
+      break;
+
+    case "/furniture-1":
+      updateTheme(THEMES.PASTE);
+      break;
+
+    case "/medical":
+      updateTheme(THEMES.PASTE);
+      break;
+
+    case "/furniture-2":
+      updateTheme(THEMES.ORANGE);
+      break;
+
+    case "/furniture-3":
+      updateTheme(THEMES.GOLD);
+      break;
+
+    case "/health-beauty":
+      updateTheme(THEMES.HEALTH);
+      break;
+
+    case "/gift-shop":
+      updateTheme(THEMES.GIFT);
+      break;
+
+    default:
+      if (path.startsWith("/grocery-4")) {
+        themeOption = themesOptionList[THEMES.GREEN];
+      } else if (path.startsWith("/gadget-3")) {
+        themeOption = themesOptionList[THEMES.HEALTH];
+      } else if (path.startsWith("/admin") || path.startsWith("/vendor")) {
+        themeOption = themesOptionList[THEMES.HEALTH];
+      } else {
+        themeOption = themesOptionList[THEMES.DEFAULT];
+      }
+
+      break;
+  }
+  /*
+        IF YOU REMOVE THE switch case, YOU NEED TO ASSIGN VALUE TO themeOptions
+        E.G. themeOption = themesOptions[THEMES.DEFAULT];
+    */
+  // themeOption = themesOptions[THEMES.DEFAULT];
+
+  return themeOption;
+};
+
+export default themeOptions;

package/src/theme/theme-provider.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { ReactNode } from "react";
+import { usePathname } from "next/navigation";
+import CssBaseline from "@mui/material/CssBaseline";
+import MuiThemeProvider from "@mui/material/styles/ThemeProvider";
+import responsiveFontSizes from "@mui/material/styles/responsiveFontSizes";
+import createTheme, { ThemeOptions } from "@mui/material/styles/createTheme";
+import merge from "lodash/merge";
+import customThemeOptions from "./theme-options";
+import NextAppDirEmotionCacheProvider from "./emotion-cache";
+import { ThemeItem } from "@evenicanpm/storefront-core/src/api-manager/datasources/e4/graphqlRequestSdk";
+
+const ThemeProvider = ({
+  children,
+  baseTheme,
+}: {
+  children: ReactNode;
+  baseTheme: ThemeItem | null | undefined;
+}) => {
+  const pathname = usePathname();
+  const themeOptions = customThemeOptions(pathname);
+  const mergedThemeOptions = merge({}, { ...themeOptions, ...baseTheme });
+  let theme = createTheme(mergedThemeOptions as ThemeOptions);
+
+  theme = responsiveFontSizes(theme);
+
+  // theme shadows
+  theme.shadows[1] = "0px 1px 3px rgba(3, 0, 71, 0.09)";
+  theme.shadows[2] = "0px 4px 16px rgba(43, 52, 69, 0.1)";
+  theme.shadows[3] = "0px 8px 45px rgba(3, 0, 71, 0.09)";
+  theme.shadows[4] = "0px 0px 28px rgba(3, 0, 71, 0.01)";
+
+  return (
+    <NextAppDirEmotionCacheProvider options={{ key: "css" }}>
+      <MuiThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </MuiThemeProvider>
+    </NextAppDirEmotionCacheProvider>
+  );
+};
+
+export default ThemeProvider;

package/src/theme/typography.ts

@@ -0,0 +1,22 @@
+import { Open_Sans } from "next/font/google";
+export const fontSize = 14;
+
+// const roboto = Roboto({
+//   weight: ["400", "500", "700", "900"],
+//   subsets: ["latin-ext"],
+//   variable: "--font-roboto",
+// });
+
+const open_sans = Open_Sans({
+  weight: ["400", "500", "700"],
+  subsets: ["latin-ext"],
+  variable: "--font-open_sans",
+});
+
+export const typography = {
+  fontSize,
+  htmlFontSize: 16,
+  fontFamily: open_sans.style.fontFamily,
+  body1: { fontSize },
+  body2: { fontSize },
+};

package/src/theme/utils.ts

@@ -0,0 +1,17 @@
+export const classes = () => {
+  const obj: Record<string, unknown> = {};
+
+  for (let i = 1; i < 11; i++) {
+    // PADDING
+    obj[`.p-${i}`] = { padding: i + "rem" };
+    obj[`.pt-${i}`] = { paddingTop: i + "rem" };
+    obj[`.pb-${i}`] = { paddingBottom: i + "rem" };
+
+    // MARGIN
+    obj[`.m-${i}`] = { margin: i + "rem" };
+    obj[`.mt-${i}`] = { marginTop: i + "rem" };
+    obj[`.mb-${i}`] = { marginBottom: i + "rem" };
+  }
+
+  return obj;
+};

package/tsconfig.json

@@ -10,9 +10,11 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "outDir": "./dist",
-    "jsx": "preserve",
     "baseUrl": "./",
+    "jsx": "preserve",
+    "typeRoots": ["../../../../storefront/node_modules/@types"],
     "paths": {
+      "*": ["../../../../storefront/node_modules/*"],
       "@/lib/*": ["src/lib/*"],
       "@/api-manager/*": ["src/api-manager/*"],
       "@/auth/*": ["src/auth/*"],

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

@@ -1,14 +0,0 @@
-"use server";
-import { cookies } from "next/headers";
-
-const getCartCookie = async () => (await cookies()).get("cart_cookie")?.value;
-
-const setCartCookie = async (cartId: string) => {
-  (await cookies()).set("cart_cookie", cartId);
-};
-
-const deleteCartCookie = async () => {
-  (await cookies()).delete("cart_cookie");
-};
-
-export { getCartCookie, setCartCookie, deleteCartCookie };

package/src/components-v2/product-cards/product-card/components/hover-actions.tsx

@@ -1,37 +0,0 @@
-import IconButton from "@mui/material/IconButton";
-// MUI ICON COMPONENTS
-import Favorite from "@mui/icons-material/Favorite";
-import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
-import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
-// STYLED COMPONENTS
-import { HoverIconWrapper } from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card/styles/index";
-
-// ==============================================================
-interface Props {
-  isFavorite: boolean;
-  toggleView: () => void;
-  toggleFavorite: () => void;
-}
-// ==============================================================
-
-export default function HoverActions({
-  isFavorite,
-  toggleFavorite,
-  toggleView,
-}: Props) {
-  return (
-    <HoverIconWrapper className="hover-box">
-      <IconButton onClick={toggleView}>
-        <RemoveRedEye color="disabled" fontSize="small" />
-      </IconButton>
-
-      <IconButton onClick={toggleFavorite}>
-        {isFavorite ? (
-          <Favorite color="primary" fontSize="small" />
-        ) : (
-          <FavoriteBorder fontSize="small" color="disabled" />
-        )}
-      </IconButton>
-    </HoverIconWrapper>
-  );
-}

package/src/components-v2/product-cards/product-card-plp/components/quantity-buttons.tsx

@@ -1,54 +0,0 @@
-import { Fragment } from "react";
-import Button from "@mui/material/Button";
-// MUI ICON COMPONENTS
-import Add from "@mui/icons-material/Add";
-import Remove from "@mui/icons-material/Remove";
-// GLOBAL CUSTOM COMPONENTS
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-
-interface Props {
-  quantity: number;
-  handleDecrement: () => void;
-  handleIncrement: () => void;
-}
-
-export default function QuantityButtons(props: Props) {
-  const { quantity, handleDecrement, handleIncrement } = props || {};
-
-  return (
-    <FlexBox
-      width="30px"
-      alignItems="center"
-      className="add-cart"
-      flexDirection="column-reverse"
-      justifyContent={quantity ? "space-between" : "flex-start"}
-    >
-      <Button
-        color="primary"
-        variant="outlined"
-        onClick={handleIncrement}
-        sx={{ padding: "3px" }}
-      >
-        <Add fontSize="small" />
-      </Button>
-
-      {quantity ? (
-        <Fragment>
-          <Paragraph color="text.primary" fontWeight="600">
-            {quantity}
-          </Paragraph>
-
-          <Button
-            color="primary"
-            variant="outlined"
-            onClick={handleDecrement}
-            sx={{ padding: "3px" }}
-          >
-            <Remove fontSize="small" />
-          </Button>
-        </Fragment>
-      ) : null}
-    </FlexBox>
-  );
-}

package/src/components-v2/product-cards/product-card-plp-list/components/add-to-cart.tsx

@@ -1,63 +0,0 @@
-import Button from "@mui/material/Button";
-// MUI ICON COMPONENTS
-import Add from "@mui/icons-material/Add";
-import Remove from "@mui/icons-material/Remove";
-// GLOBAL CUSTOM COMPONENTS
-import { H5 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import {
-  FlexBetween,
-  FlexBox,
-} from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
-
-// ==============================================================
-interface Props {
-  quantity: number;
-  handleDecrement: () => void;
-  handleIncrement: () => void;
-}
-// ==============================================================
-
-export default function AddToCartButton({
-  quantity,
-  handleDecrement,
-  handleIncrement,
-}: Props) {
-  return (
-    <FlexBox mt={1} flexShrink={0}>
-      {quantity ? (
-        <FlexBetween>
-          <Button
-            color="primary"
-            variant="contained"
-            sx={{ padding: 0.5, minHeight: 0 }}
-            onClick={handleIncrement}
-          >
-            <Add fontSize="small" />
-          </Button>
-
-          <H5 fontWeight="600" fontSize="15px" mx={1.5}>
-            {quantity}
-          </H5>
-
-          <Button
-            color="primary"
-            variant="contained"
-            sx={{ padding: 0.5, minHeight: 0 }}
-            onClick={handleDecrement}
-          >
-            <Remove fontSize="small" />
-          </Button>
-        </FlexBetween>
-      ) : (
-        <Button
-          color="primary"
-          variant="contained"
-          onClick={handleIncrement}
-          sx={{ padding: 0.5, minHeight: 0 }}
-        >
-          <Add fontSize="small" />
-        </Button>
-      )}
-    </FlexBox>
-  );
-}

package/src/components-v2/product-cards/product-card-plp-list/components/favorite-button.tsx

@@ -1,27 +0,0 @@
-import IconButton from "@mui/material/IconButton";
-// MUI ICON COMPONENTS
-import Favorite from "@mui/icons-material/Favorite";
-import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
-
-// ==============================================================
-interface Props {
-  isFavorite: boolean;
-  toggleFavorite: () => void;
-}
-// ==============================================================
-
-export default function FavoriteButton({ isFavorite, toggleFavorite }: Props) {
-  return (
-    <IconButton
-      size="small"
-      onClick={toggleFavorite}
-      sx={{ position: "absolute", top: 15, right: 15, zIndex: 1 }}
-    >
-      {isFavorite ? (
-        <Favorite color="primary" fontSize="small" />
-      ) : (
-        <FavoriteBorder fontSize="small" />
-      )}
-    </IconButton>
-  );
-}

package/src/components-v2/product-cards/use-product.ts

@@ -1,35 +0,0 @@
-import getCart from "@/services/cart/queries/get-cart";
-import { useCallback, useState } from "react";
-import { useSnackbar } from "notistack";
-
-export default function useProduct(slug: string) {
-  const { data: cart } = getCart.useData();
-  const { enqueueSnackbar } = useSnackbar();
-  const [openModal, setOpenModal] = useState(false);
-  const [isFavorite, setIsFavorite] = useState(false);
-
-  const cartItem = cart?.CartLines?.find(
-    (cartLine) => String(cartLine.Product?.RecordId) === slug,
-  );
-
-  const toggleFavorite = useCallback(() => setIsFavorite((fav) => !fav), []);
-  const toggleDialog = useCallback(() => setOpenModal((open) => !open), []);
-
-  const handleCartAmountChange = (type?: "remove") => {
-    // TODO Febraury 25, 2025: Implement this function
-    //dispatch({ type: "CHANGE_CART_AMOUNT", payload: product });
-    // SHOW ALERT PRODUCT ADDED OR REMOVE
-    if (type === "remove")
-      enqueueSnackbar("Remove from Cart", { variant: "error" });
-    else enqueueSnackbar("Added to Cart", { variant: "success" });
-  };
-
-  return {
-    cartItem,
-    openModal,
-    isFavorite,
-    toggleDialog,
-    toggleFavorite,
-    handleCartAmountChange,
-  };
-}

package/src/components-v2/products-view/products-grid-view.tsx

@@ -1,65 +0,0 @@
-import { Fragment, ReactNode } from "react";
-import Grid from "@mui/material/Grid2";
-// GLOBAL CUSTOM COMPONENTS
-import { FlexBetween } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
-import ProductCardPlp from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp/product-card";
-// DATA MODEL
-import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
-import { ProductPrice } from "@/api-manager/schemas/product.schema";
-
-// ========================================================
-type Props = {
-  products: Product[];
-  pagination?: ReactNode;
-  productPrices?: ProductPrice[];
-};
-// ========================================================
-
-export default function ProductsGridView({
-  products,
-  pagination,
-  productPrices,
-}: Props) {
-  return (
-    <Fragment>
-      <Grid container spacing={3}>
-        {products.map((item: Product) => {
-          const matchingPrice = productPrices?.find(
-            (price) => price.ProductId === item.RecordId,
-          );
-          return (
-            <Grid size={{ lg: 4, sm: 6, xs: 12 }} key={item.ItemId}>
-              <ProductCardPlp
-                key={item.RecordId}
-                product={{
-                  title: item.Name ?? "",
-                  slug: item.ItemId ?? "",
-                  price: matchingPrice?.CustomerContextualPrice ?? 0,
-                  imgUrl: item.PrimaryImageUrl ?? "",
-                  rating: item.TotalRatings ?? 0,
-                  discount: 0, // Need to get discount info for product.
-                  id: item.RecordId,
-                }}
-              >
-                <ProductCardPlp.Image />
-                <ProductCardPlp.Body>
-                  <ProductCardPlp.Info>
-                    <ProductCardPlp.Title />
-                    <ProductCardPlp.Rating />
-                    <ProductCardPlp.Price />
-                  </ProductCardPlp.Info>
-                  {/* <ProductCardPlp.Actions>
-                    <ProductCardPlp.QuantityButtons />
-                  </ProductCardPlp.Actions> */}
-                </ProductCardPlp.Body>
-              </ProductCardPlp>
-            </Grid>
-          );
-        })}
-      </Grid>
-      <FlexBetween flexWrap="wrap" mt={6}>
-        {pagination}
-      </FlexBetween>
-    </Fragment>
-  );
-}