@evenicanpm/storefront-core 1.0.1 → 1.0.3

package/src/providers/notifications/README.md

@@ -0,0 +1,15 @@
+# Notifications Store
+
+_Example of how to trigger a notification._
+
+```javascript
+// import notification store
+import { useNotificationStore } from "@evenicanpm/storefront-core/src/components-v2/Notifications/useNotificationsStore";
+
+// call hook and destructure trigger function
+const { triggerNotification } = useNotificationStore();
+
+// call trigger function
+// severity options: 'success' | 'info' | 'warning' | 'error';
+triggerNotification({ severity: "warning", message: "This is a warning." });
+```

package/src/providers/notifications/notification-context.tsx

@@ -0,0 +1,82 @@
+import { Alert, Snackbar, SnackbarCloseReason } from "@mui/material";
+import React, { createContext } from "react";
+import { useNotification } from "./use-notification";
+import { DatasourceApis } from "@/api-manager/types/Datasource";
+
+const DEFAULT_ALERT_TIME = 5000;
+
+export type NotificationType = {
+  severity: "success" | "info" | "warning" | "error";
+  message: string;
+  type?: keyof DatasourceApis | "general";
+};
+
+type NotificationContextType = {
+  alert: NotificationType;
+  setNotification(notification: NotificationType): void;
+};
+
+export type WithNotification<T> = {
+  notification: NotificationType;
+  data: T;
+};
+export const NotificationContext =
+  createContext<NotificationContextType | null>(null);
+
+export const NotificationProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [alert, setAlert] = React.useState<NotificationType>({
+    message: "",
+    severity: "info",
+    type: "general",
+  });
+  // const [miniCartOpen, setMiniCartOpen] = React.useState<boolean>(false);
+
+  const setNotification = (notification: NotificationType) => {
+    setAlert(notification);
+  };
+
+  const value = React.useMemo(() => ({ alert, setNotification }), [alert]);
+  return (
+    <NotificationContext.Provider value={value}>
+      {children}
+    </NotificationContext.Provider>
+  );
+};
+
+export const Notification: React.FC = () => {
+  const [open, setOpen] = React.useState<boolean>(false);
+  const { alert, setNotification } = useNotification();
+
+  React.useEffect(() => {
+    if (alert.message) {
+      setOpen(true);
+    }
+  }, [alert]);
+
+  const handleClose = (
+    _event: React.SyntheticEvent | Event,
+    reason?: SnackbarCloseReason,
+  ) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    setOpen(false);
+    setNotification({ message: "", severity: "info", type: "general" });
+  };
+
+  return (
+    <Snackbar
+      open={open}
+      autoHideDuration={DEFAULT_ALERT_TIME}
+      onClose={handleClose}
+    >
+      <Alert onClose={handleClose} severity={alert.severity} variant={"filled"}>
+        {alert.message}
+      </Alert>
+    </Snackbar>
+  );
+};

package/src/providers/notifications/use-notification.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { NotificationContext } from "./notification-context";
+
+export const useNotification = () => {
+  const context = React.useContext(NotificationContext);
+  if (!context) {
+    throw new Error(
+      "Notification Context must be used within the Notification Provider",
+    );
+  }
+  return context;
+};

package/tsconfig.json

@@ -17,12 +17,13 @@
       "@/api-manager/*": ["src/api-manager/*"],
       "@/auth/*": ["src/auth/*"],
       "@/_components/*": ["src/components/_components/*"],
-      "@/cms/*": ["src/cms/*"],
       "@/components/*": ["src/components/*"],
+      "@/cms/*": ["src/cms/*"],
       "@/schemas/*": ["src/api-manager/schemas/*"],
       "@/services/*": ["src/api-manager/services/*"],
       "@/hooks/*": ["src/hooks/*"],
       "@config": ["src/config"]
     }
-  }
+  },
+  "include": ["src"]
 }

package/typedoc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  entryPoints: ["./src/components/product-dimensions/components/*.tsx"],
+  out: "docs",
+  theme: "default",
+  name: "e4 ui",
+  plugin: ["typedoc-plugin-merge-modules"],
+  mergeModulesRenameDefaults: true, // NEW option of TypeDoc added by this plugin
+  mergeModulesMergeMode: "module", // NEW option of TypeDoc added by this plugin
+  excludeInternal: true,
+};

package/src/api-manager/api-manager.config.json

@@ -1,12 +0,0 @@
-{
-  "primary": "d365",
-  "secondary": [],
-  "overrides": {},
-  "d365": {
-    "baseUrl": "https://scui1e8d9zn85030208-rs.su.retail.dynamics.com/",
-    "catalogId": 0,
-    "oun": "128",
-    "baseImageUrl": "https://images-us-prod.cms.commerce.dynamics.com/cms/api/lmrndcmtsl/imageFileData/search?fileName=/",
-    "channelId": 68719478279
-  }
-}

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

@@ -1,355 +0,0 @@
-/**
- * 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,
-  Product as DynProduct,
-} from "@msdyn365-commerce/retail-proxy";
-import { merge } from "object-mapper";
-import {
-  Image,
-  Product,
-  Address as E4Address,
-  CartLine,
-  OrderLine,
-  SelectedDimension,
-  Me,
-} from "./graphqlRequestSdk";
-import unwrapE4Variants from "./utils/unwrap-e4-variants";
-
-/* PRODUCT REMAPS */
-export const dimensionMap = {
-  AttributeId: "DimensionTypeValue",
-  Value: "DimensionValue.Value",
-  ValueId: "DimensionValue.RecordId",
-  _: {
-    key: "TotalAvailableInventoryLevelCode",
-    default: "AVAIL",
-  },
-};
-
-export const productMap = {
-  sku: "ItemId",
-  name: "Name",
-  MasterProductId: "MasterProductId",
-  price: [
-    { key: "Price", default: 0 },
-    { key: "BasePrice", default: 0 },
-    { key: "AdjustedPrice", default: 0 },
-  ],
-  id: [
-    {
-      key: "RecordId",
-      transform: (id: string) => {
-        if (id !== null) return parseInt(id);
-      },
-    },
-  ],
-  img: {
-    key: "PrimaryImageUrl",
-    transform: (img: Image[]) => {
-      if (Array.isArray(img) && img.length > 0) {
-        return img[0].cdnURL ?? null;
-      }
-      return null;
-    },
-  },
-};
-
-export const productPricesMap = {
-  id: [
-    {
-      key: "ProductId",
-      transform: (id: string) => {
-        if (id !== null) return parseInt(id);
-      },
-    },
-    {
-      key: "ListingId",
-      transform: (id: string) => {
-        if (id !== null) return parseInt(id);
-      },
-    },
-  ],
-  price: [
-    { key: "Price", default: 0 },
-    { key: "BasePrice", default: 0 },
-    { key: "AdjustedPrice", default: 0 },
-    { key: "CustomerContextualPrice", default: 0 },
-  ],
-  sku: "ItemId",
-};
-
-export const productDetailsMap = {
-  ...productMap,
-  MasterProductId: "MasterProductId",
-  "img[].cdnURL": "Images[]",
-  description: "Description",
-  "Dimensions[].AttributeId": "Dimensions[].DimensionTypeValue",
-  Variants: {
-    key: "DimensionValues",
-    transform: unwrapE4Variants,
-  },
-  "attributes[].Name": "Attributes[].Name",
-  "attributes[].Value": "Attributes[].TextValue",
-};
-
-/* CART REMAPS */
-export const cartLineMap = {
-  "[].product": {
-    key: "[].Product?",
-    transform: (product: Product) => {
-      // If cart is empty, prevents CartLines[] from having entries
-      if (!product) return;
-
-      // For some reason transform is run multiple times. This prevents merge from running multiple times and overwriting translation.
-      const translated = merge(product, productMap) as DynProduct & {
-        ProductTypeValue?: number;
-      };
-      if (!translated.RecordId) return product;
-      translated.ProductTypeValue = 4; // default for now. Type = Standalone
-      return translated;
-    },
-  },
-  "[].id": "[].LineId",
-  "[].product.id": {
-    key: "[].ProductId",
-    transform: (id: string) => {
-      if (id !== null) return parseInt(id);
-    },
-  },
-  "[].product.code": "[].ItemId",
-  "[].product.name": "[].Product.Name",
-  "[].quantity": "[].Quantity",
-  "[].price": [
-    { key: "[].Price", default: 0 },
-    { key: "[].Product.Price", default: 0 },
-    { key: "[].Product.BasePrice", default: 0 },
-    { key: "[].Product.AdjustedPrice", default: 0 },
-  ],
-  "[].amount": [{ key: "[].TotalAmount" }, { key: "[].NetPrice" }],
-  "[].uom.name": {
-    key: "[].UnitOfMeasureSymbol",
-    transform: (name: string) => {
-      if (name !== null) {
-        if (name === "Each") return "ea";
-        return name;
-      }
-    },
-  },
-  "[].product.productType": {
-    key: "[].Product.ProductTypeValue",
-    default: 4,
-  },
-};
-
-export const addressMap = {
-  "[].id": [
-    { key: "[].Id" },
-    {
-      key: "[].RecordId",
-      transform: (id: string) => {
-        if (id !== null) return parseInt(id);
-      },
-    },
-  ],
-  "[].name": "[].Name",
-  "[].isPrimary": "[].IsPrimary",
-  "[].addressType.id": {
-    key: "[].AddressTypeValue",
-    transform: (id: string) => {
-      if (id !== null) return parseInt(id);
-    },
-  },
-  "[].address1": "[].Street",
-  "[].city": "[].City",
-  "[].stateName": "[].State",
-  "[].countryName": "[].ThreeLetterISORegionName",
-  "[].postalCode": "[].ZipCode",
-  "[].phoneNumber": "[].Phone",
-  "[].address2": {
-    key: "[].FullAddress",
-    transform: (_val: string, _src: E4Address[], dest: Address) => {
-      return `${dest?.Street}, ${dest?.City} ${dest?.State} ${dest?.ZipCode}, ${dest?.ThreeLetterISORegionName}`;
-    },
-  },
-};
-
-export const addressReverseMap = {
-  Name: "name",
-  Street: "address1",
-  City: "city",
-  ZipCode: "postalCode",
-  Phone: "phoneNumber",
-  Id: "id",
-};
-
-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 countriesMap = {
-  isoAlpha3Code: "CountryRegionId",
-  isoAlpha2Code: "ISOCode",
-  name: "ShortName",
-};
-
-export const countryMap = {
-  "state[].code": "[].StateId",
-  "state[].name": "[].StateName",
-  isoAlpha3Code: "[].CountryRegionId",
-};
-
-export const deliveryOptionsMap = {
-  id: ["Code", "RecordId"],
-  name: "Description",
-  total: "TotalChargeAmount",
-};
-
-export const cartMap = {
-  id: "Id",
-  itemCount: "TotalItems",
-
-  lines: {
-    key: "CartLines",
-    transform: (lines: CartLine[]) => {
-      if (lines.length === 0) return [];
-      return merge(lines, cartLineMap);
-    },
-  },
-
-  subtotal: "SubtotalAmountWithoutTax",
-  freightTotal: "ShippingChargeAmount",
-  taxTotal: "TaxAmount",
-  total: "TotalAmount",
-  email: "ReceiptEmail",
-
-  addresses: {
-    key: "ShippingAddress",
-    transform: (addresses: E4Address[]) => {
-      if (addresses.length === 0) return undefined;
-      const translated = merge(addresses, addressMap) as Address[];
-      return translated[addresses.length - 1];
-    },
-  },
-};
-
-const STATUSES = ["Open", "Processing", "Complete", "On Hold", "Cancelled"];
-
-export const orderMap = {
-  id: "Id",
-  orderNumber: "ChannelReferenceId",
-  orderStatus: {
-    key: "StatusValue",
-    transform: (orderStatus: string) => {
-      return STATUSES.indexOf(orderStatus) + 1;
-    },
-  },
-  orderDate: "TransactionDate",
-  freightTotal: "ShippingChargeAmount",
-  promotionTotal: "DiscountAmount",
-  subTotal: "SubtotalAmount",
-  taxTotal: "TaxAmount",
-  itemCount: "NumberOfItems",
-  total: "TotalAmount",
-};
-
-const salesLinesProduct = {
-  productId: "RecordId",
-  productCode: "ItemId",
-  productName: "Name",
-  amount: "TotalAmount",
-  img: {
-    key: "PrimaryImageUrl",
-    transform: (img: Image[]) => {
-      if (Array.isArray(img) && img.length > 0) {
-        return img[0].cdnURL ?? null;
-      }
-      return null;
-    },
-  },
-  selectedDimensions: {
-    key: "Dimensions",
-    transform: (dimensions: SelectedDimension[]) => {
-      if (!(dimensions && dimensions.length)) return [];
-
-      const typeMap: Record<string, number> = {
-        Color: 1,
-        Size: 3,
-        // extend as needed
-        // map to import { ProductDimensionType } from "@msdyn365-commerce/retail-proxy";
-      };
-
-      return dimensions.map((d) => ({
-        DimensionTypeValue: typeMap[d.name ?? ""] ?? 0,
-        DimensionValue: {
-          RecordId: Number(d.id),
-          Value: d.value,
-          DimensionId: d.name,
-        },
-      }));
-    },
-  },
-};
-
-export const orderDetailsMap = {
-  ...orderMap,
-  lines: {
-    key: "SalesLines",
-    transform: (lines: OrderLine[]) => {
-      if (!(lines && lines.length)) return [];
-      return lines.map((line) => {
-        return {
-          Product: merge(line, salesLinesProduct),
-          Price: line?.price,
-          Quantity: line?.quantity,
-        };
-      });
-    },
-  },
-  addresses: {
-    key: "ShippingAddress",
-    transform: (addresses: E4Address[]) => {
-      if (addresses.length === 0) return undefined;
-      const translated = merge(addresses, addressMap) as Address[];
-      return translated[addresses.length - 1];
-    },
-  },
-};

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

@@ -1,202 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { cartTransformValidate } from "./e4.translator";
-import { extendedCartSchema } from "@/api-manager/schemas/cart.schema";
-import {
-  Address,
-  CartLine,
-  E4CartReadMdQuery,
-  Cart,
-  Product,
-  UnitOfMeasure,
-} from "./graphqlRequestSdk";
-
-describe("E4.translator", () => {
-  describe("cartTransformValidate", () => {
-    const cart: E4CartReadMdQuery = {
-      cart: {
-        id: "8837195106817746",
-        orderBillingAddressId: null,
-        orderShippingAddressId: null,
-        itemCount: 0,
-        subtotal: 0,
-        total: 0,
-        taxTotal: 0,
-        freightTotal: 0,
-        shippingMethodId: null,
-        email: null,
-        lines: [] as CartLine[],
-        addresses: [] as Address[],
-      },
-    };
-
-    const cartLine1: CartLine = {
-      id: "7066750212364572",
-      available: null,
-      quantity: 1,
-      amount: 63.5,
-      price: 63.5,
-      product: {
-        id: "1",
-        code: "VE-C304",
-        name: "Classic Vest",
-        img: [
-          {
-            id: "121383336688932",
-            alt: null,
-            cdnURL:
-              "https://images.unsplash.com/photo-1639926784590-ff2ef4757bf3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=679&q=80",
-          },
-        ],
-      } as Product,
-      selectedDimensions: [],
-      uom: {
-        id: "150496240445110",
-        name: "Each",
-      } as UnitOfMeasure,
-      pricing: {
-        amount: 0,
-        id: "",
-        price: 0,
-        quantity: 0,
-      },
-      productId: "1",
-    };
-
-    const cartLine2: CartLine = {
-      id: "5362666448130462",
-      available: null,
-      quantity: 1,
-      amount: 8.99,
-      price: 8.99,
-      product: {
-        id: "2",
-        code: "CA-1098",
-        name: "AWC Logo Cap",
-        img: [
-          {
-            id: "89167204723975",
-            alt: null,
-            cdnURL:
-              "https://images.unsplash.com/photo-1588850561407-ed78c282e89b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80",
-          },
-        ],
-      } as Product,
-      selectedDimensions: [],
-      uom: {
-        id: "150496240445110",
-        name: "Each",
-      } as UnitOfMeasure,
-      pricing: {
-        amount: 0,
-        id: "",
-        price: 0,
-        quantity: 0,
-      },
-      productId: "2",
-    };
-
-    const address = {
-      id: "1",
-      name: "Kai Alami",
-      firstName: "Kai",
-      lastName: "Alami",
-      isPrimary: true,
-      addressType: {
-        id: "1",
-        name: "address type name",
-        displayName: "some-display-name",
-      },
-      address1: "address 1",
-      address2: "address 2",
-      city: "Vancouver",
-      stateId: "12",
-      stateName: "BC",
-      countryId: "1",
-      countryName: "Canada",
-      countryCode: "CA",
-      postalCode: "1A2B3C",
-      phoneNumber: "1234567890",
-    };
-
-    const addToCart = (cart: E4CartReadMdQuery, cartLine: CartLine) => {
-      if (cart.cart) {
-        cart.cart.lines.push(cartLine);
-        cart.cart.itemCount = (cart.cart.itemCount ?? 0) + 1;
-        cart.cart.subtotal = (cart.cart.subtotal ?? 0) + (cartLine.price ?? 0);
-        cart.cart.total = (cart.cart.total ?? 0) + (cartLine.price ?? 0);
-      }
-    };
-
-    it("empty cart", () => {
-      const result = cartTransformValidate(cart?.cart as Cart);
-      try {
-        extendedCartSchema.parse(result);
-      } catch (error) {
-        fail(`error was thrown when not expected\n${error}`);
-      }
-      expect(result.Id).toBe(cart.cart?.id);
-      expect(result.CartLines.length).toBe(0);
-      expect(result.TotalAmount).toBe(0);
-    });
-
-    it("adds one cart line", () => {
-      addToCart(cart, cartLine1);
-      const result = cartTransformValidate(cart?.cart as Cart);
-
-      try {
-        extendedCartSchema.parse(result);
-      } catch (error) {
-        fail(`error was thrown when not expected\n${error}`);
-      }
-      expect(result.CartLines.length).toBe(1);
-      expect(result.CartLines[0].LineId).toBe(cartLine1.id);
-      expect(result.CartLines[0].Quantity).toBe(cartLine1.quantity);
-      expect(result.CartLines[0].Price).toBe(cartLine1.price);
-      expect(result.CartLines[0].Product?.RecordId.toString()).toBe(
-        cartLine1.product.id,
-      );
-      expect(result.TotalAmount).toBe(cartLine1.price);
-    });
-
-    it("two cart lines", () => {
-      addToCart(cart, cartLine2);
-      const result = cartTransformValidate(cart?.cart as Cart);
-
-      try {
-        extendedCartSchema.parse(result);
-      } catch (error) {
-        fail(`error was thrown when not expected\n${error}`);
-      }
-      expect(result.CartLines.length).toBe(2);
-      expect(result.CartLines[1].LineId).toBe(cartLine2.id);
-      expect(result.CartLines[1].Quantity).toBe(cartLine2.quantity);
-      expect(result.CartLines[1].Price).toBe(cartLine2.price);
-      expect(result.CartLines[1].Product?.RecordId.toString()).toBe(
-        cartLine2.product.id,
-      );
-      expect(result.TotalAmount).toBe(
-        (cartLine1.price ?? 0) + (cartLine2.price ?? 0),
-      );
-    });
-
-    it("one address", () => {
-      cart?.cart?.addresses?.push(address);
-      const result = cartTransformValidate(cart?.cart as Cart);
-
-      try {
-        extendedCartSchema.parse(result);
-      } catch (error) {
-        fail(`error was thrown when not expected\n${error}`);
-      }
-      expect(result.ShippingAddress?.Id).toBe(address.id);
-      expect(result.ShippingAddress?.Name).toBe(address.name);
-      expect(result.ShippingAddress?.AddressTypeValue).toBe(
-        parseInt(address.addressType.id),
-      );
-    });
-  });
-});
-
-function fail(message: string) {
-  throw new Error(message);
-}