@evenicanpm/storefront-core 1.0.1 → 1.0.3

package/src/api-manager/datasources/e4/user/e4-user.datasource.ts

@@ -7,9 +7,10 @@ import {
   WishlistCreateInput,
   WishlistDetailInput,
   WishlistLinesInput,
+  ExtendedWishlist,
 } from "@/api-manager/schemas/user.schema";
-import * as translator from "../e4.translator";
-import { userMap } from "../e4.remaps";
+import * as userTranslator from "./e4-user.translator";
+import { userMap } from "./e4-user.remaps";
 import { merge } from "object-mapper";
 import { UserApi } from "@/api-manager/types/Datasource";
 import { translateWishList } from "./e4-user.translator";
@@ -18,7 +19,7 @@ const user: UserApi = {
   async updateUser(user: User): Promise<User> {
     const e4Api = await getGraphqlClient(true);
 
-    const userInput = translator.userTransformInput(user);
+    const userInput = userTranslator.userTransformInput(user);
 
     const { data, errors } = await e4Api.e4UserUpdateMD({
       user: userInput,
@@ -66,7 +67,9 @@ const user: UserApi = {
     return translateWishList(data);
   },
 
-  async getWishlistDetails(input: WishlistDetailInput): Promise<Wishlist> {
+  async getWishlistDetails(
+    input: WishlistDetailInput,
+  ): Promise<ExtendedWishlist> {
     const e4Api = await getGraphqlClient(true);
 
     const { data, errors } = await e4Api.e4WishListReadMD({ id: input.Id });
@@ -109,29 +112,33 @@ const user: UserApi = {
       throw new Error("No wishlist found");
     }
 
-    return wishList as Wishlist;
+    return wishList as unknown as Wishlist;
   },
   async deleteWishlist(input: WishlistDetailInput): Promise<void> {
     const e4Api = await getGraphqlClient(true);
 
-    const { data, errors } = await e4Api.deleteWishList({ id: input.Id });
+    const { errors } = await e4Api.deleteWishList({ id: input.Id });
 
     if (errors) {
       throw new Error("Error creating wishlist");
     }
   },
+  // @ts-ignore
   async updateWishlist(input: WishlistLinesInput): Promise<Wishlist> {
     throw new Error("updateWishlist not implemented");
   },
 
+  // @ts-ignore
   async addProductsToWishlist(input: WishlistLinesInput): Promise<Wishlist> {
     throw new Error("addProductsToWishlist not implemented");
   },
 
+  // @ts-ignore
   async removeProductsFromWishlist(input: WishlistLinesInput): Promise<void> {
     throw new Error("removeProductsFromWishlist not implemented");
   },
 
+  // @ts-ignore
   async copyCartToWishlist(input: CopyCartToWishlistInput): Promise<Wishlist> {
     throw new Error("copyCartToWishlist not implemented");
   },

package/src/api-manager/datasources/e4/user/e4-user.remaps.ts

@@ -1,3 +1,52 @@
+/**
+ * Maps E4 API responses to the D365 data structure.
+ *
+ * This file uses the `object-mapper` library to transform
+ * API responses into a format compatible with D365.
+ *
+ * https://github.com/wankdanker/node-object-mapper
+ *
+ */
+
+import { Address } from "@msdyn365-commerce/retail-proxy";
+import { merge } from "object-mapper";
+import { Address as E4Address, Me } from "../graphqlRequestSdk";
+import { addressMap } from "../address/e4-address.remaps";
+
+export const userMap = {
+  id: {
+    key: "RecordId",
+    transform: (id: string) => {
+      return Number(id);
+    },
+  },
+  code: {
+    // we don't need AccountNumber in e4 storefront,
+    // if we need it bring account data and map accountId here.
+    key: "AccountNumber",
+    transform: () => {
+      return "";
+    },
+  },
+  firstName: "FirstName",
+  lastName: "LastName",
+  email: "Email",
+  defaultShippingAddressId: "DefaultShippingAddressId",
+  addresses: {
+    key: "Addresses",
+    transform: (addresses: E4Address[], source: Me) => {
+      if (!(addresses && addresses?.length)) return [];
+      const mapped = merge(addresses || [], addressMap) as Address[];
+      return mapped.map((address: Address) => ({
+        ...address,
+        IsPrimary:
+          address?.IsPrimary ||
+          address?.Id === source?.defaultShippingAddressId,
+      }));
+    },
+  },
+};
+
 export const wishListMap = {
   "[].id": "[].Id",
   "[].name": "[].Name",

package/src/api-manager/datasources/e4/user/e4-user.translator.ts

@@ -1,10 +1,31 @@
-import { E4WishListListSmQuery } from "../graphqlRequestSdk";
+import { User } from "@/api-manager/schemas/user.schema";
+import { E4WishListListSmQuery, UserInput } from "../graphqlRequestSdk";
 import { merge } from "object-mapper";
 import { wishListMap } from "./e4-user.remaps";
 import { Wishlist } from "@/api-manager/schemas/user.schema";
 
+export const userTransformInput = (user: User): UserInput => {
+  let formattedUser = {};
+
+  if (user.FirstName && user.LastName) {
+    formattedUser = {
+      firstName: user?.FirstName,
+      lastName: user?.LastName,
+    };
+  }
+
+  if (user?.DefaultShippingAddressId) {
+    const shippingInfo = {
+      defaultShippingAddressId: user?.DefaultShippingAddressId,
+    };
+    formattedUser = { ...formattedUser, ...shippingInfo };
+  }
+
+  return formattedUser;
+};
+
 export const translateWishList = (data: E4WishListListSmQuery) => {
-  const e4WishList = data.wishlistList.nodes;
+  const e4WishList = data?.wishlistList?.nodes || [];
   const translatedData = merge(e4WishList, wishListMap) as Wishlist[];
   return translatedData;
 };

package/src/api-manager/datasources/e4/utils/unwrap-e4-variants.ts

@@ -1,6 +1,6 @@
 import { merge } from "object-mapper";
 import { Attributes, Maybe, Variants } from "../graphqlRequestSdk";
-import { dimensionMap } from "../e4.remaps";
+import { dimensionMap } from "../product/e4-product.remaps";
 
 type DimensionValue = {
   Value: string;

package/src/api-manager/index.ts

@@ -1,7 +1,8 @@
+// @ts-ignore - this will be picked up by webpack
+import rawConfig from "@api-manager-config";
 import { Datasource, DatasourceApis } from "./types/Datasource";
 import E4Datasource from "./datasources/e4/e4.datasource";
 import { D365Datasource } from "./datasources/d365/index";
-import rawConfig from "./api-manager.config.json";
 import { z } from "zod";
 import { getContextFromCookie } from "./datasources/d365/utils/get-context-cookie";
 
@@ -30,6 +31,7 @@ const CORE_DATASOURCES = [
   "address",
   "organization",
 ];
+
 /**
  * Loads up all specified apis/datasources based on parsed config
  * and returns the ApiManager object. Also handles "project" overrides
@@ -38,6 +40,9 @@ const CORE_DATASOURCES = [
  * that from api-manager.
  *
  * In this way, we have two levels of configuration of the api-manager.
+ * 1. actual JSON config
+ * 2. overrides from storefront
+ *
  * @returns ApiManager object.
  */
 async function createApiManager() {
@@ -84,7 +89,7 @@ async function createApiManager() {
 
   const getDatasource = (entityName: EntityNames) => {
     // Project-Level Overrides
-    let projectOverrides = {};
+    let projectOverrides: { [key: string]: any } = {};
     if (storefrontOverrides?.[OVERRIDES_FILE]?.["default"]?.[entityName]) {
       projectOverrides =
         storefrontOverrides[OVERRIDES_FILE]["default"][entityName];
@@ -94,7 +99,7 @@ async function createApiManager() {
     const override = config?.overrides?.[entityName];
 
     // Build the base entity from api-manager config settings
-    let baseEntity = {};
+    let baseEntity: { [key: string]: any } = {};
     if (override) {
       baseEntity =
         secondaryDatasources.find((ds) => ds.name === override) ??
@@ -111,18 +116,18 @@ async function createApiManager() {
     return baseEntity;
   };
 
-  const datasources = {};
+  const datasources: { [key: string]: any } = {};
 
   CORE_DATASOURCES.forEach((entityName) => {
     const datasource = getDatasource(entityName as EntityNames);
-    datasources[entityName] = datasource[entityName];
+    datasources[entityName] = datasource[entityName as keyof Datasource];
   });
 
   storefrontOverrides[OVERRIDES_FILE]?.default &&
     Object.keys(storefrontOverrides[OVERRIDES_FILE]["default"]).forEach(
       (key) => {
         if (!CORE_DATASOURCES.includes(key)) {
-          datasources[key] =
+          datasources[key as keyof Datasource] =
             storefrontOverrides[OVERRIDES_FILE]["default"][key];
         }
       },

package/src/api-manager/schemas/user.schema.ts

@@ -26,7 +26,9 @@ export const extendedProductListLineSchema = productListLineSchema.extend({
 
 export const extendedWishlistSchema = productListSchema
   .omit({ ProductListLines: true })
-  .extend({ ProductListLines: extendedProductListLineSchema.array() });
+  .extend({
+    ProductListLines: extendedProductListLineSchema.array().optional(),
+  });
 
 const wishlistBaseInput = z.object({
   Id: z.string(),

package/src/api-manager/services/cart/mutations/add-to-cart.ts

@@ -1,5 +1,5 @@
 import { AddToCartInput, Cart } from "@/api-manager/schemas/cart.schema";
-import { useNotification } from "@/components/Notifications/use-notification";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
 import { useTranslations } from "next-intl";
 import { useCreateMutation } from "../../create-mutation";
 import getCart from "../queries/get-cart";

package/src/api-manager/services/cart/mutations/checkout.ts

@@ -2,7 +2,6 @@ import { Cart, CheckoutInput } from "@/api-manager/schemas/cart.schema";
 import { createApiPath } from "../../create-query";
 import { useCreateMutation } from "../../create-mutation";
 import { deleteCartCookie } from "@/api-manager/lib/cart-cookie-handler";
-import getCart from "../queries/get-cart";
 import { useQueryClient } from "@tanstack/react-query";
 
 const apiPath = createApiPath("cart", "checkout");
@@ -10,7 +9,7 @@ const apiPath = createApiPath("cart", "checkout");
 const useCheckout = () => {
   const queryClient = useQueryClient();
   return useCreateMutation<CheckoutInput, Cart>(apiPath, {
-    onSuccess: async (_data, variables) => {
+    onSuccess: async (_data) => {
       // Delete old cart cookie
       await deleteCartCookie();
 

package/src/api-manager/services/product/server/product.server.ts

@@ -9,5 +9,8 @@ export const searchProductsServer = async (
   input: searchProductsInput,
 ): Promise<ProductSearchResult[]> => {
   const apiManager = await createApiManager();
-  return parseObject(apiManager.product.searchProducts(input));
+  let searchProducts = apiManager.product.searchProducts
+    ? apiManager.product.searchProducts(input)
+    : Promise.reject("product.searchProducts() is not defined");
+  return parseObject(searchProducts);
 };

package/src/api-manager/types/Datasource.ts

@@ -34,11 +34,7 @@ import {
   ProductWarehouseInventoryAvailability,
   ProductWarehouseInventoryInformation,
 } from "@msdyn365-commerce/retail-proxy";
-import {
-  CategoriesQuery,
-  CreateWishListInput,
-  WishList,
-} from "../datasources/e4/graphqlRequestSdk";
+import { CategoriesQuery } from "../datasources/e4/graphqlRequestSdk";
 
 /**
  * Datasource Interface, defines the methods and I/O types that a datasource must implement.

package/src/cms/blocks/BlockManager.tsx

@@ -0,0 +1,67 @@
+import { Box } from "@mui/material";
+import {
+  Hero,
+  FeaturePill,
+  FeaturedProducts,
+  FeaturedCategories,
+  BrandLogosScroller,
+  HeroCarousel,
+  Services,
+  ProductCarousel,
+  ProductSectionFullWidth,
+  CategoryCarousel,
+  Footer,
+  Image,
+  RichText,
+} from "./index";
+import { Block } from "./interfaces";
+
+const componentMap = {
+  "blocks.hero-section": Hero,
+  "blocks.features-pill": FeaturePill, // Should replace this with bazaar-react-ts/src/pages-sections/market-2/section-2/section-2.tsx
+  "blocks.featured-products": FeaturedProducts,
+  "blocks.featured-categories": FeaturedCategories,
+  "blocks.logo-scroller": BrandLogosScroller, // Not mobile friendly
+  "blocks.footer": Footer, // Adds to only homepage, for all pages use src/Footer component
+  "blocks.image-block": Image,
+  "blocks.rich-text": RichText, // Not mobile friendly
+
+  // Bazaar Template Blocks
+  "blocks.hero-carousel": HeroCarousel,
+  "blocks.services": Services,
+  "blocks.product-carousel": ProductCarousel,
+  "blocks.product-section-full-width": ProductSectionFullWidth,
+  "blocks.category-carousel": CategoryCarousel,
+};
+
+const getBlockComponent: <B extends Block>(
+  block: B,
+  idx: number,
+) => JSX.Element | null = (block: Block, idx: number) => {
+  const Component = componentMap[
+    block.__component as keyof typeof componentMap
+  ] as React.ComponentType<Block>;
+  return <Component key={`block-${idx}`} {...block} />;
+};
+
+interface BlockManagerProps {
+  blocks: Block[];
+}
+
+const BlockManager: React.FC<BlockManagerProps> = ({ blocks }) => {
+  if (!Array.isArray(blocks)) return null;
+  return (
+    <Box>
+      {blocks.map((block, idx) => {
+        const isLast = idx === blocks.length - 1;
+        return (
+          <Box key={`block-wrapper-${idx}`} mb={isLast ? 0 : 6}>
+            {getBlockComponent(block, idx)}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};
+
+export default BlockManager;

package/src/cms/blocks/Components/BrandLogosScroller.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import { Box, Container } from "@mui/material";
+import { keyframes } from "@emotion/react";
+import cmsEndPoints from "@/cms/endpoints";
+import { LogoScrollerBlock } from "../interfaces";
+
+const bounce = keyframes`
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+`;
+
+const outerScroll = {
+  width: "100%",
+  overflow: "hidden",
+  mask: "linear-gradient(90deg, transparent, white 20%, white 80%, transparent)",
+};
+
+const BrandLogosScroller = (data: LogoScrollerBlock) => {
+  const innerSlider = React.useRef<HTMLElement>(null);
+  const logos = data?.image;
+
+  const renderLogo = (logo: (typeof logos)[0]) => (
+    <Box
+      key={logo?.url}
+      sx={{
+        marginLeft: "100px",
+        marginRight: "100px",
+        position: "relative",
+        height: "100px",
+        width: "auto",
+        minWidth: "100px",
+      }}
+    >
+      <Image
+        src={cmsEndPoints.buildCmsMediaUrl(logo?.url)}
+        alt="Brand Logo"
+        fill
+        sizes="100px"
+        style={{ objectFit: "contain" }}
+      />
+    </Box>
+  );
+
+  return (
+    <Container>
+      <Box sx={outerScroll}>
+        <Box
+          sx={{
+            display: "flex",
+            flexWrap: "nowrap",
+            alignItems: "center",
+            width: "fit-content",
+            animation: `${bounce} linear 100s infinite`,
+          }}
+          ref={innerSlider}
+        >
+          {logos?.map(renderLogo)}
+          {logos?.map(renderLogo)}
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default BrandLogosScroller;

package/src/cms/blocks/Components/CategoryCard.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Image from "next/image";
+
+import cmsEndPoints from "@/cms/endpoints";
+
+interface Props {
+  name: string;
+  imgUrl: string;
+}
+
+export default function CategoryCard({ name, imgUrl }: Props) {
+  return (
+    <Card sx={{ width: "100%", boxShadow: 10 }}>
+      <Box
+        sx={{
+          position: "relative",
+          height: 250,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "flex-end",
+          overflow: "hidden",
+        }}
+      >
+        <Image
+          src={cmsEndPoints.buildCmsMediaUrl(imgUrl)}
+          alt={name}
+          fill
+          style={{ objectFit: "cover" }}
+        />
+        <Button
+          sx={{
+            position: "absolute",
+            bottom: "10px",
+            height: "40px",
+            backgroundColor: "rgba(255, 255, 255, 0.8)",
+          }}
+          size="small"
+        >
+          {name}
+        </Button>
+      </Box>
+    </Card>
+  );
+}

package/src/cms/blocks/Components/CategoryCarousel/index.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import React from "react";
+import NextLink from "next/link";
+
+// CUSTOM ICON COMPONENT
+import CategoryIcon from "../../Icons/Components/Category";
+
+// GLOBAL CUSTOM COMPONENT
+import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
+import { Carousel } from "@evenicanpm/storefront-core/src/components-v2/carousel/index";
+import { SectionCreator } from "@evenicanpm/storefront-core/src/components-v2/section-header/index";
+
+// LOCAL CUSTOM COMPONENT
+import TopCategoriesCard from "../shared/top-categories-card";
+import { getImageUrl } from "@/cms/endpoints";
+
+import { CategoryCarouselBlock } from "../../interfaces";
+
+export default function CategoryCarousel(data: CategoryCarouselBlock) {
+  const responsive = [
+    { breakpoint: 959, settings: { slidesToShow: 2 } },
+    { breakpoint: 650, settings: { slidesToShow: 1 } },
+  ];
+
+  // see more link should be updated to categories page when available
+  return (
+    <SectionCreator
+      seeMoreLink=""
+      title="Top Categories"
+      icon={<CategoryIcon color="primary" />}
+    >
+      <Carousel
+        slidesToShow={3}
+        responsive={responsive}
+        autoplay={true}
+        height={200}
+      >
+        {data?.CategoryWrapper?.map((item) => {
+          const category = item.category; // category is nested because of CategoryWrapper to limit minimum and maximum number of items in @/cms
+          return (
+            <NextLink
+              href={`/products/${category.name}`}
+              key={category.id}
+              passHref
+            >
+              <BazaarCard elevation={1} sx={{ padding: "20px" }}>
+                <TopCategoriesCard
+                  title={category?.name}
+                  imgUrl={getImageUrl(category?.image?.formats ?? {})}
+                  subtitle={category?.name}
+                />
+              </BazaarCard>
+            </NextLink>
+          );
+        })}
+      </Carousel>
+    </SectionCreator>
+  );
+}

package/src/cms/blocks/Components/FeaturePill.tsx

@@ -0,0 +1,99 @@
+import { Box, Container, Typography, Divider, Paper } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import {
+  MdLocalOffer as LocalOffer,
+  MdShoppingBag as ShoppingBag,
+  MdAddLocation as AddLocation,
+  MdMonetizationOn as MonetizationOn,
+} from "react-icons/md";
+import { FeaturesPillBlock } from "../interfaces";
+const FeaturePill = (featurePillData: FeaturesPillBlock) => {
+  return (
+    <Box
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      marginTop="50px"
+    >
+      <Container>
+        <Paper
+          sx={{
+            height: "100px",
+            borderRadius: "15px",
+            boxShadow: 24,
+          }}
+          elevation={1}
+        >
+          <Grid container height="100%">
+            <Grid
+              size={3}
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <LocalOffer
+                style={{ fontSize: "50px", marginRight: "20px" }}
+              ></LocalOffer>
+              <Box display="flex" flexDirection="column">
+                <Typography variant="h6">
+                  {featurePillData?.feature_1}
+                </Typography>
+              </Box>
+            </Grid>
+            <Divider orientation="vertical" flexItem sx={{ mr: "-1px" }} />
+            <Grid
+              size={3}
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <ShoppingBag
+                style={{ fontSize: "50px", marginRight: "20px" }}
+              ></ShoppingBag>
+              <Box display="flex" flexDirection="column">
+                <Typography variant="h6">
+                  {featurePillData?.feature_2}
+                </Typography>
+              </Box>
+            </Grid>
+            <Divider orientation="vertical" flexItem sx={{ mr: "-1px" }} />
+            <Grid
+              size={3}
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <MonetizationOn
+                style={{ fontSize: "50px", marginRight: "20px" }}
+              ></MonetizationOn>
+
+              <Box display="flex" flexDirection="column">
+                <Typography variant="h6">
+                  {featurePillData?.feature_3}
+                </Typography>
+              </Box>
+            </Grid>
+            <Divider orientation="vertical" flexItem sx={{ mr: "-1px" }} />
+            <Grid
+              size={3}
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <AddLocation
+                style={{ fontSize: "50px", marginRight: "20px" }}
+              ></AddLocation>
+              <Box display="flex" flexDirection="column">
+                <Typography variant="h6">
+                  {featurePillData?.feature_4}
+                </Typography>
+              </Box>
+            </Grid>
+          </Grid>
+        </Paper>
+      </Container>
+    </Box>
+  );
+};
+
+export default FeaturePill;

package/src/cms/blocks/Components/FeaturedCategories.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Box, Container } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+
+// Local components
+import CategoryCard from "./CategoryCard";
+import { Category, FeaturedCategoriesBlock } from "../interfaces";
+
+const FeaturedCategories = (categoriesData: FeaturedCategoriesBlock) => {
+  return (
+    <Box
+      sx={{
+        marginTop: "80px",
+        marginBottom: "80px",
+      }}
+    >
+      <Container>
+        <h1 style={{ fontSize: "25px" }}>Best Selling Categories</h1>
+        <Grid container spacing={2}>
+          {categoriesData?.categories?.map((category: Category, i: number) => {
+            return (
+              <Grid
+                size={3}
+                display="flex"
+                justifyContent="center"
+                key={"category_index_" + i}
+              >
+                <CategoryCard
+                  name={category.name}
+                  imgUrl={category?.image?.url}
+                ></CategoryCard>
+              </Grid>
+            );
+          })}
+        </Grid>
+      </Container>
+    </Box>
+  );
+};
+
+export default FeaturedCategories;