@evenicanpm/storefront-core 1.0.0-alpha

package/src/components/_components/subscribe-input/subscribe-input.tsx

@@ -0,0 +1,43 @@
+import { SxProps, Theme } from "@mui/material/styles";
+import TextField, { TextFieldProps } from "@mui/material/TextField";
+// STYLED COMPONENT
+import { StyledButton } from "./styles";
+
+// ==============================================================
+interface Props {
+  buttonText?: string;
+  buttonSx?: SxProps<Theme>;
+}
+// ==============================================================
+
+export default function SubscribeInput({
+  fullWidth,
+  InputProps,
+  buttonSx = {},
+  variant = "outlined",
+  buttonText = "SUBSCRIBE",
+  placeholder = "Enter Your Mail Here",
+  ...props
+}: Props & TextFieldProps) {
+  const INPUT_PROPS = {
+    endAdornment: <StyledButton sx={buttonSx}>{buttonText}</StyledButton>,
+    sx: {
+      border: 0,
+      padding: 0,
+      borderRadius: 2,
+      backgroundColor: "white",
+      ...InputProps?.sx,
+    },
+    ...InputProps,
+  };
+
+  return (
+    <TextField
+      variant={variant}
+      fullWidth={fullWidth}
+      placeholder={placeholder}
+      InputProps={INPUT_PROPS}
+      {...props}
+    />
+  );
+}

package/src/components/_components/topbar/index.ts

@@ -0,0 +1 @@
+export { default } from "./top-bar";

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

@@ -0,0 +1,55 @@
+import Box from "@mui/material/Box";
+import Chip from "@mui/material/Chip";
+import Container from "@mui/material/Container";
+import styled from "@mui/material/styles/styled";
+
+import { layoutConstant } from "@/components/_components/utils/constants";
+
+export const StyledRoot = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "bgColor" && prop !== "expand",
+})<{ bgColor?: string; expand: number }>(({ theme, bgColor, expand }) => ({
+  fontSize: 12,
+  height: layoutConstant.topbarHeight,
+  color: theme.palette.secondary.contrastText,
+  background: bgColor || theme.palette.grey[900],
+  transition: "height 300ms ease",
+  "& .menuItem": { minWidth: 100 },
+  "& .marginRight": { marginRight: "1.25rem" },
+  "& .expand": { display: "none", padding: 0 },
+  "& .handler": { height: layoutConstant.topbarHeight },
+  "& .menuTitle": { fontSize: 12, marginLeft: "0.5rem", fontWeight: 600 },
+
+  [theme.breakpoints.down("sm")]: {
+    height: expand ? 80 : layoutConstant.topbarHeight,
+
+    "& .MuiSvgIcon-root": { color: "white" },
+
+    "& .topbarRight": {
+      paddingBottom: 5,
+      display: expand ? "flex" : "none",
+    },
+
+    "& .expand": {
+      display: "block",
+      height: layoutConstant.topbarHeight,
+    },
+  },
+}));
+
+export const StyledContainer = styled(Container)(({ theme }) => ({
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  [theme.breakpoints.down("sm")]: {
+    alignItems: "start",
+    flexDirection: "column",
+  },
+}));
+
+export const StyledChip = styled(Chip)(({ theme }) => ({
+  color: "white",
+  fontWeight: 700,
+  backgroundColor: theme.palette.primary.main,
+  "& .MuiChip-label": { paddingInline: ".8rem" },
+}));

package/src/components/_components/topbar/top-bar.tsx

@@ -0,0 +1,112 @@
+import Link from "next/link";
+import { useState } from "react";
+// MUI
+import MenuItem from "@mui/material/MenuItem";
+import IconButton from "@mui/material/IconButton";
+import TouchRipple from "@mui/material/ButtonBase";
+// TRANSLATION
+import { useTranslation } from "react-i18next";
+// MUI ICON COMPONENTS
+import Add from "@mui/icons-material/Add";
+import Remove from "@mui/icons-material/Remove";
+import Twitter from "@mui/icons-material/Twitter";
+import Facebook from "@mui/icons-material/Facebook";
+import Instagram from "@mui/icons-material/Instagram";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+// GLOBAL CUSTOM COMPONENTS
+import { Span } from "@/components/_components/Typography";
+import BazaarMenu from "@/components/_components/BazaarMenu";
+import { FlexBetween, FlexBox } from "@/components/_components/flex-box/index";
+// STYLED COMPONENTS
+import { StyledChip, StyledContainer, StyledRoot } from "./styles";
+
+// ==============================================================
+interface LanguageOption {
+  [key: string]: { title: string; value: string };
+}
+// ==============================================================
+
+// LANGUAGE OPTIONS
+const languageOptions: LanguageOption = {
+  en: { title: "EN", value: "en" },
+  es: { title: "DE", value: "de" },
+};
+
+const socialLinks = [
+  { id: 1, Icon: Twitter, url: "#" },
+  { id: 2, Icon: Facebook, url: "#" },
+  { id: 3, Icon: Instagram, url: "#" },
+];
+
+// ===========================================
+type Props = { bgColor?: string };
+// ===========================================
+
+export default function Topbar({ bgColor }: Props) {
+  const { i18n, t } = useTranslation();
+  const [expand, setExpand] = useState<boolean>(false);
+
+  const handleChangeLanguage = (language: string) => {
+    i18n.changeLanguage(language);
+  };
+
+  const selectedLanguage = languageOptions[i18n.language];
+
+  return (
+    <StyledRoot bgColor={bgColor} expand={expand ? 1 : 0}>
+      <StyledContainer>
+        <FlexBetween width="100%">
+          <FlexBox alignItems="center" gap={1}>
+            <StyledChip label={t("HOT")} size="small" />
+            <Span className="title">{t("Free Express Shipping")}</Span>
+          </FlexBox>
+
+          <IconButton
+            disableRipple
+            className="expand"
+            onClick={() => setExpand((state) => !state)}
+          >
+            {expand ? <Remove /> : <Add />}
+          </IconButton>
+        </FlexBetween>
+
+        <FlexBox className="topbarRight" alignItems="center">
+          {/* LANGUAGE MENU SELECTOR */}
+          <BazaarMenu
+            handler={(e) => (
+              <TouchRipple className="handler marginRight" onClick={e}>
+                <Span className="menuTitle">{selectedLanguage.title}</Span>
+                <ExpandMore fontSize="inherit" />
+              </TouchRipple>
+            )}
+            options={(onClose) => {
+              return Object.keys(languageOptions).map((language: string) => (
+                <MenuItem
+                  className="menuItem"
+                  key={languageOptions[language].title}
+                  onClick={() => {
+                    handleChangeLanguage(language);
+                    onClose();
+                  }}
+                >
+                  <Span className="menuTitle">
+                    {languageOptions[language].title}
+                  </Span>
+                </MenuItem>
+              ));
+            }}
+          />
+
+          {/* SOCIAL LINKS AREA */}
+          <FlexBox alignItems="center" gap={1.5}>
+            {socialLinks.map(({ id, Icon, url }) => (
+              <Link href={url} key={id}>
+                <Icon sx={{ fontSize: 16 }} />
+              </Link>
+            ))}
+          </FlexBox>
+        </FlexBox>
+      </StyledContainer>
+    </StyledRoot>
+  );
+}

package/src/components/_components/utils/constants.ts

@@ -0,0 +1,8 @@
+export const layoutConstant = {
+  topbarHeight: 40,
+  headerHeight: 80,
+  mobileNavHeight: 64,
+  containerWidth: 1200,
+  mobileHeaderHeight: 64,
+  grocerySidenavWidth: 280,
+};

package/src/components/countries-input.tsx

@@ -0,0 +1,78 @@
+import { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
+import {
+  Autocomplete,
+  AutocompleteRenderInputParams,
+  Box,
+  InputProps,
+  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 = (
+    optionProps: React.HTMLAttributes<HTMLLIElement>,
+    option: CountryRegionInfo,
+    index: number,
+  ) => {
+    return (
+      <Box key={index} component="li" {...optionProps}>
+        {option.ShortName}
+      </Box>
+    );
+  };
+  const renderInput = (params: AutocompleteRenderInputParams) => (
+    <TextField
+      {...params}
+      size="small"
+      label={label}
+      variant="outlined"
+      placeholder="Select Country"
+      slotProps={{
+        input: {
+          "data-testid": "country-input",
+        } as InputProps,
+      }}
+    />
+  );
+
+  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, state) =>
+        renderOption(props, option, state?.index)
+      }
+      renderInput={renderInput}
+      getOptionLabel={getOptionLabel}
+    />
+  );
+
+  return renderAutocomplete();
+}

package/src/config.ts

@@ -0,0 +1,47 @@
+interface D365Config {
+  baseUrl: string;
+  catalogId: number;
+  oun: string;
+  baseImageUrl: string;
+  channelId: number;
+}
+
+interface ApiManagerConfig {
+  primary: string;
+  secondary: string[];
+  overrides: Record<string, unknown>;
+  d365: D365Config;
+}
+
+export type storefrontCoreConfig = {
+  AZURE_AD_B2C_POST_LOGOUT_REDIRECT: string;
+  AZURE_AD_B2C_KNOWN_AUTHORITY: string;
+  AZURE_AD_B2C_EDIT_AUTHORITY: string;
+  AZURE_AD_B2C_RESET_AUTHORITY: string;
+  AZURE_AD_B2C_CLIENTID: string;
+  AZURE_AD_B2C_API_PERMISSION: string;
+  AZURE_AD_B2C_LOGIN_AUTHORITY: string;
+  AZURE_AD_B2C_REDIRECT: string;
+  E4_API_ENDPOINT: string;
+  CMS_ENDPOINT: string;
+  NEXTAUTH_SECRET: string;
+  apiManagerConfig?: ApiManagerConfig;
+};
+
+// module-level singleton
+let cachedConfig: storefrontCoreConfig | null = null;
+
+// this is called from application entry point -> app/layout.tsx and api/route.ts
+export function initConfig(config: storefrontCoreConfig) {
+  if (!cachedConfig) cachedConfig = config;
+}
+
+export function getConfig(): storefrontCoreConfig {
+  if (!cachedConfig) {
+    console.error(
+      "Storefront core config is not initialized. The init config function must be called at every entry point in the application",
+    );
+    throw new Error("Storefront-core config has not been initialized");
+  }
+  return cachedConfig;
+}

package/src/lib/build-detail-url.ts

@@ -0,0 +1,8 @@
+import { PageSlug } from "./page-slugs";
+
+const buildDetailUrl = (name: string, id: number) =>
+  `/${PageSlug.ProductDetail}/${normalizeName(name)}/${id}`;
+
+const normalizeName = (name: string) => name.toLowerCase().replace(/ /g, "-");
+
+export default buildDetailUrl;

package/src/lib/build-product-detail-url.ts

@@ -0,0 +1,12 @@
+import {
+  ProductSearchResult,
+  SimpleProduct,
+} from "@msdyn365-commerce/retail-proxy";
+
+export const getProductDetailUrl = (
+  product: SimpleProduct | ProductSearchResult,
+) => {
+  return `/product/${product.Name}/${
+    product?.MasterProductId || product?.RecordId
+  }`;
+};

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

@@ -0,0 +1,12 @@
+"use client";
+
+/**
+ * Use this to manually get cart id from cookie on the client.
+ * @returns {string | undefined} the cart id value
+ */
+export const getCartCookieClient = () => {
+  return document.cookie
+    .split(";")
+    .find((cookie) => cookie.includes("cart_cookie"))
+    ?.split("=")[1];
+};

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

@@ -0,0 +1,14 @@
+"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/lib/category-helpers.ts

@@ -0,0 +1,113 @@
+import {
+  Category,
+  TextValueTranslation,
+} from "@msdyn365-commerce/retail-proxy";
+
+export interface CategoryHierarchy extends Category {
+  Children: CategoryHierarchy[];
+  Slug?: string;
+  Url?: string;
+  NeutralizedName?: string;
+  IsCMSPage?: boolean;
+}
+
+export type CategoryMap = {
+  [RecordId: number]: CategoryHierarchy;
+};
+
+const mapCategoryToHierarchy = (
+  categoryList: Category[],
+  locale?: string,
+  includeRootCategory?: boolean,
+): CategoryHierarchy[] => {
+  if (!categoryList || categoryList.length === 0) {
+    return [];
+  }
+
+  const categoryMap: CategoryMap = {};
+
+  for (const category of categoryList) {
+    const localName = getFriendlyName(locale, category.NameTranslations);
+    const categoryHierarchy = <CategoryHierarchy>{ ...category };
+    categoryHierarchy.NeutralizedName = category.Name;
+    categoryHierarchy.Name = localName || categoryHierarchy.NeutralizedName;
+    // Derive Slug from Url or Name for D365
+    categoryHierarchy.Slug =
+      (category as CategoryHierarchy).Url?.split("/")
+        .pop()
+        ?.replace(/\d+$/, "") || normalizeCategoryName(category?.Name ?? "");
+    categoryMap[category.RecordId] = categoryHierarchy;
+  }
+
+  let rootCategory: CategoryHierarchy | undefined;
+  for (const category of Object.values(categoryMap)) {
+    const parentId = category.ParentCategory;
+    if (!category.Url) {
+      category.Url = generateUrl(categoryList, category, locale || "");
+    }
+    if (parentId === 0) {
+      rootCategory = category;
+      continue;
+    }
+
+    const parent = parentId && categoryMap[parentId];
+    if (parent) {
+      parent.Children = parent.Children || [];
+      parent.Children.push(category);
+    }
+  }
+
+  if (!rootCategory) {
+    return [];
+  }
+
+  if (includeRootCategory) {
+    const categoryHierarchy: CategoryHierarchy[] = [];
+    categoryHierarchy.push(rootCategory);
+    return categoryHierarchy;
+  }
+
+  return JSON.parse(JSON.stringify(rootCategory.Children)) ?? [];
+};
+
+const generateUrl = (
+  categoryHierarchy: Category[],
+  currentCategory: CategoryHierarchy,
+  locale: string,
+) => {
+  const categoryNames: string[] = [];
+  let nextCat: CategoryHierarchy | Category | undefined = currentCategory;
+  while (nextCat) {
+    const catName =
+      getFriendlyName(locale, nextCat.NameTranslations) || nextCat.Name || "";
+    categoryNames.push(normalizeCategoryName(catName));
+    nextCat = categoryHierarchy.find(
+      (c) => c.RecordId === nextCat?.ParentCategory,
+    );
+  }
+  categoryNames.unshift(currentCategory.RecordId.toString());
+  return categoryNames.reverse().join("/");
+};
+
+const getFriendlyName = (
+  locale?: string,
+  nameTranslations?: TextValueTranslation[],
+): string | undefined => {
+  let nameTranslation: TextValueTranslation | undefined;
+  if (locale && nameTranslations && nameTranslations.length > 0) {
+    nameTranslation = nameTranslations.find(
+      (item) => item?.Language?.toLowerCase() === locale?.toLowerCase(),
+    );
+  }
+  return nameTranslation && nameTranslation.Text;
+};
+
+const normalizeCategoryName = (string_: string) =>
+  string_.toLowerCase().replaceAll(" ", "-");
+
+export {
+  mapCategoryToHierarchy,
+  generateUrl,
+  getFriendlyName,
+  normalizeCategoryName,
+};

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

@@ -0,0 +1,32 @@
+import { GraphQLClient } from "graphql-request";
+
+// Note: We are keeping two separate versions of the graphqlRequestSdk
+// currently. We need one in the api-manager client packages to get types
+// 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>;
+
+/**
+ * Graphql Request Client
+ * @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 client = new GraphQLClient(API_URL, {
+    credentials: "include", // Ensures cookies are included
+    headers: {
+      "client-name": "storefront",
+      "client-version": "0.1.0",
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+  });
+
+  return getSdk(client as GraphQLClient);
+};
+
+export default createGraphQLClient;

package/src/lib/currency-formatter.ts

@@ -0,0 +1,31 @@
+import { useFormatter, useTranslations } from "next-intl";
+import React from "react";
+
+const useCurrencyFormatter = () => {
+  const { number } = useFormatter();
+  const t = useTranslations("Misc");
+
+  const formatCurrency = React.useCallback(
+    (value: number, showFreeText?: boolean) => {
+      if (!value) value = 0; // handle null, undefined values
+
+      if (value === 0 && showFreeText) {
+        return t("freeText");
+      }
+      // hardcoded to USD for now. Will fix with channel configurations
+      return number(value, { style: "currency", currency: "USD" });
+    },
+    [number, t],
+  );
+
+  const value = React.useMemo(
+    () => ({
+      formatCurrency,
+    }),
+    [formatCurrency],
+  );
+
+  return value;
+};
+
+export default useCurrencyFormatter;

package/src/lib/get-palette-color.ts

@@ -0,0 +1,50 @@
+import { Theme } from "@mui/material";
+
+// Define a union type for possible color values
+type ColorValue = string | number | (() => string);
+
+// Type-safe color getter function
+const getPaletteColor = (
+  theme: Theme,
+  colorName: string,
+  shade?: number | string,
+): string => {
+  const color = theme.palette[colorName as keyof typeof theme.palette];
+
+  // Check if color exists and is an object
+  if (!color || typeof color !== "object" || color === null) {
+    return typeof color === "string" ? color : ""; // If color is a string, return it directly
+  }
+
+  // Now we know color is an object
+  const colorObj = color as Record<string, ColorValue>;
+
+  // If shade is specified, try to get it
+  if (shade !== undefined) {
+    const shadeKey = shade.toString();
+
+    // Try to access the shade
+    if (shadeKey in colorObj) {
+      const value = colorObj[shadeKey];
+      // Handle possible function values
+      return typeof value === "function" ? value() : String(value);
+    }
+
+    // Check if this is a PaletteColor with main/dark/light properties
+    if ("main" in colorObj) {
+      const mainValue = colorObj.main;
+      return typeof mainValue === "function" ? mainValue() : String(mainValue);
+    }
+  }
+
+  // If no shade specified but color has 'main' property
+  if ("main" in colorObj) {
+    const mainValue = colorObj.main;
+    return typeof mainValue === "function" ? mainValue() : String(mainValue);
+  }
+
+  // Last resort fallback
+  return "";
+};
+
+export default getPaletteColor;