@evenicanpm/storefront-core 1.0.0-alpha

package/src/api-manager/services/create-mutation.ts

@@ -0,0 +1,65 @@
+import { useMutation } from "@tanstack/react-query";
+import { ApiPath } from "./create-query";
+import { DatasourceApis } from "../types/Datasource";
+
+/**
+ * A wrapper for useMutation that enables passing of api manager path
+ * and handles creating the mutation function in a standardized way
+ *
+ * @param apiManagerPath path to the api manager function
+ * @param options
+ * @returns
+ */
+export const useCreateMutation = <TInput, TOutput>(
+  apiManagerPath: ApiPath<keyof DatasourceApis>,
+  options?: {
+    onSuccess?: (result: TOutput, input: TInput) => void;
+    onError?: (error: unknown, input: TInput) => void;
+    onMutate?: (input: TInput) => void;
+    onSettled?: (
+      result: TOutput | undefined,
+      error: unknown,
+      input: TInput,
+    ) => void;
+  },
+) => {
+  return useMutation<TOutput, unknown, TInput>({
+    // MutationsFn should always point to ApiManager Route Handler
+    mutationFn: async (input: TInput) => {
+      const response = await fetch("/api", {
+        method: "POST",
+        body: JSON.stringify({ input, apiManagerPath }),
+      });
+      if (!response.ok) {
+        throw new Error("Mutation failed");
+      }
+      return response.json();
+    },
+
+    onMutate: (input) => {
+      if (options?.onMutate) {
+        options.onMutate(input);
+      }
+    },
+
+    onSuccess: (result, input) => {
+      if (options?.onSuccess) {
+        options.onSuccess(result, input);
+      }
+    },
+
+    onError: (error, input) => {
+      if (options?.onError) {
+        options.onError(error, input);
+      }
+
+      console.warn(`${apiManagerPath} MUTATION FAILED:`, error);
+    },
+
+    onSettled: (result, error, input) => {
+      if (options?.onSettled) {
+        options.onSettled(result, error, input);
+      }
+    },
+  });
+};

package/src/api-manager/services/create-query.ts

@@ -0,0 +1,305 @@
+/* eslint-disable  @typescript-eslint/no-explicit-any */
+// TODO: use api manager types to remove type any
+import createApiManager from "../index";
+import { isServer, QueryClient } from "@tanstack/query-core";
+import {
+  UseQueryResult,
+  UseSuspenseQueryResult,
+  useQuery,
+  useSuspenseQuery,
+} from "@tanstack/react-query";
+import { DatasourceApis } from "../types/Datasource";
+import { Mutex } from "async-mutex";
+import { manuallyRetrieveSessionCookie } from "@/auth/next-auth-cookie-manager";
+import { getSession } from "next-auth/react";
+import jwt from "jsonwebtoken";
+
+const QUERY_ROUTE = "/api";
+const mutex = new Mutex();
+
+/**
+ * Creates a react-query query with all data access methods exported.
+ * Handles switching between direct api-manager calls and accessing api manager through
+ * route handler. If no query key provided, use api manager path as cache key prefix.
+ * @param queryKey a prefix to add to cache key
+ * @param route the route to the corresponding route handler
+ * @param apiManagerPath a tuple of two items, entity name and method
+ * @param options.disableProperty if these input properties are undefined then disable query
+ * @returns
+ */
+export const createQuery = <TInput, TOutput>(
+  apiManagerPath: ApiPath<keyof DatasourceApis>,
+  config?: {
+    queryKey?: string;
+    disableProperties?: Array<keyof TInput>;
+  },
+) => {
+  /**
+   * Generates the configuration object for a query, including the query function, cache key, and enabled state.
+   *
+   * The query function (`queryFn`) is determined based on the execution environment (server or client):
+   * - On the server, it checks for token expiry, refreshes the token if needed, creates an API manager, and invokes the appropriate API function.
+   * - On the client, it checks for token expiry and either refreshes the token or performs a fetch operation.
+   *
+   * The `enabled` property is computed based on the presence and truthiness of specified properties in the input, if `disableProperties` are provided in options.
+   *
+   * @param input - Optional input parameters for the query and API function.
+   * @returns An object containing:
+   *   - `queryKey`: The cache key for the query, built from the input.
+   *   - `queryFn`: The asynchronous function to execute for the query.
+   *   - `enabled`: A boolean indicating whether the query should be enabled.
+   */
+  const getQueryData = (input?: TInput) => {
+    const queryFn = isServer
+      ? /// Server ///
+        async () => {
+          const apiManager = await createApiManager();
+          const apiFunction = getApiFromPath(apiManager, apiManagerPath);
+          const result = await apiFunction(input);
+          return result;
+        }
+      : /// Client ///
+        async () => {
+          // Check if token is expired
+          const shouldRefreshToken = await checkTokenExpiry();
+          if (shouldRefreshToken) {
+            return await handleTokenRefreshClient(input);
+          } else {
+            return await doFetch(input, apiManagerPath);
+          }
+        };
+
+    // if disable props specified then use them to compute enabled
+    const enabled: boolean = config?.disableProperties
+      ? config.disableProperties.every((prop) => !!input?.[prop])
+      : true;
+
+    const data = {
+      queryKey: buildCacheKey(input),
+      queryFn,
+      enabled,
+    };
+
+    return data;
+  };
+
+  /**
+   * Sends a POST request to the specified route with the provided input and API manager path.
+   *
+   * @template TInput - The type of the input parameter.
+   * @param input - The input data to be sent in the request body. Can be undefined.
+   * @param route - The endpoint URL to which the request is sent.
+   * @param apiManagerPath - The API manager path used to identify the API endpoint.
+   * @returns A promise that resolves to the response of the fetch request.
+   */
+  const doFetch = async (
+    input: TInput | undefined,
+    apiManagerPath: ApiPath<keyof DatasourceApis>,
+    additionalHeaders?: HeadersInit,
+  ) => {
+    // Merge headers
+    const headers = new Headers(additionalHeaders);
+    // generic route handler (new) - will refactor all queries to use this
+    const result = await fetch(QUERY_ROUTE, {
+      method: "POST",
+      body: JSON.stringify({ input, apiManagerPath }),
+      headers,
+    });
+    return await result.json();
+  };
+
+  /**
+   * Client-side hook to call data from react query cache
+   * @returns
+   */
+  const useData = (input?: TInput): UseQueryResult<TOutput> => {
+    return useQuery(getQueryData(input));
+  };
+
+  /**
+   * Client-side hook to call data from react query cache,
+   * used with suspense for suspense loading state handling
+   * @returns
+   */
+  const useSuspenseData = (input?: TInput): UseSuspenseQueryResult<TOutput> => {
+    return useSuspenseQuery(getQueryData(input));
+  };
+
+  /**
+   * Called on server to fetch query and load cache
+   * @param queryClient
+   * @returns
+   */
+  const fetchData = async (queryClient: QueryClient, input?: TInput) => {
+    return await queryClient.fetchQuery(getQueryData(input));
+  };
+
+  /**
+   * Called on server to fetch query and load cache in anticipation
+   * of client using data
+   * @param queryClient
+   */
+  const prefetchData = async (queryClient: QueryClient, input?: TInput) => {
+    return await queryClient.prefetchQuery(getQueryData(input));
+  };
+
+  /**
+   *
+   * @param queryClient react-query client
+   * @param data the data to set the query to
+   * @param input the input of the query that's used to generate cache key
+   * returns a promise of QueryResult for query
+   */
+  const setQueryData = async (
+    queryClient: QueryClient,
+    data: TOutput,
+    input?: TInput,
+  ) => {
+    const key = buildCacheKey(input);
+    return await queryClient.setQueryData(key, data);
+  };
+
+  /**
+   *
+   * @param input the input for the query of TInput
+   * @returns if no input, the query key, if input, query key and input in array
+   */
+  const buildCacheKey = (input?: TInput) => {
+    const prefix = config?.queryKey ?? apiManagerPath;
+    return input ? [prefix, input] : [prefix];
+  };
+
+  /**
+   * Asynchronously checks whether the current session's access token has expired.
+   *
+   * Retrieves the current session and decodes the access token to extract its expiration time.
+   * Compares the token's expiration (`exp`) claim with the current time.
+   *
+   * @returns A promise that resolves to `true` if the token is expired, or `false` otherwise.
+   */
+  const checkTokenExpiry = async () => {
+    let token: string | undefined;
+    if (isServer) {
+      // Server-side: retrieve session from cookies
+      const session = (await manuallyRetrieveSessionCookie()) ?? undefined;
+      token = session?.accessToken;
+    } else {
+      const session = await getSession();
+      token = session?.accessToken;
+    }
+
+    const decoded = token && (jwt.decode(token) as { exp?: number } | null);
+
+    const currentTime = Math.floor(Date.now() / 1000);
+
+    const isExpired =
+      !!decoded && typeof decoded.exp === "number" && decoded.exp < currentTime;
+
+    return isExpired;
+  };
+
+  /**
+   * Handles fetching data with token refresh logic in a thread-safe manner.
+   *
+   * Acquires a mutex lock to ensure only one token refresh operation occurs at a time.
+   * Checks if the token is expired and, if so, adds a header to indicate that the token should be refreshed.
+   * Performs the fetch operation with the appropriate headers and returns the parsed JSON response.
+   * Releases the mutex lock after the operation completes, regardless of success or failure.
+   *
+   * @param input - The input data for the fetch operation, which may be undefined.
+   * @returns A promise that resolves to the parsed JSON response from the fetch operation.
+   * @throws An error if the fetch operation fails.
+   */
+  const handleTokenRefreshClient = async (input: TInput | undefined) => {
+    const release = await mutex.acquire();
+    try {
+      // Check if token is expired again
+      const stillShouldRefreshToken = await checkTokenExpiry();
+      const headers = new Headers();
+      if (stillShouldRefreshToken) {
+        // Add refresh token header
+        headers.append("should-refresh-token", "true");
+      }
+      // Call do fetch with the headers
+      const response = await doFetch(input, apiManagerPath, headers);
+
+      return response.json();
+    } catch (error) {
+      // Handle API Error
+      console.error("Error fetching data:", error);
+      throw new Error("Failed to fetch data");
+    } finally {
+      release();
+    }
+  };
+
+  return {
+    useData,
+    useSuspenseData,
+    setQueryData,
+    fetchData,
+    prefetchData,
+    buildCacheKey,
+  };
+};
+
+/**
+ * A tuple type where api manager entity is first item and second item is method
+ * of first item
+ */
+export type ApiPath<T extends keyof DatasourceApis = keyof DatasourceApis> = [
+  T,
+  keyof DatasourceApis[T],
+];
+
+/// Utilities ///
+/**
+ * Takes an apiManager and reaches into nested sub api's based on array path
+ * @param apiManager
+ * @param path array of path steps
+ * @returns the function at the specified path
+ */
+export function getApiFromPath<TInput, TOutput>(
+  apiManager: any,
+  path: ApiPath,
+): (input?: TInput) => Promise<TOutput> {
+  const [entity, method] = path;
+  // Typescript is doing heavy lifting to ensure correct api path
+  // so safe to call method directly
+  const result = apiManager[entity][method];
+
+  if (process.env.NODE_ENV === "development") {
+    // eslint-disable-next-line no-console
+    console.log(`[CREATE QUERY] Accessing API Path:`, {
+      entity,
+      method,
+      result,
+    });
+  }
+
+  // Function reference loses 'this' context.
+  // Re-bind for d365 classes.
+  if (typeof result === "function") {
+    return result.bind(apiManager[entity]);
+  }
+  return result;
+}
+
+/**
+ *
+ * @param key
+ * @param method
+ * @returns
+ */
+export function createApiPath<T extends keyof DatasourceApis>(
+  key: T,
+  method: keyof DatasourceApis[T],
+) {
+  // have to re-cast to general keyof DatasourceApi after
+  // using stricter type for type narrowing and intellisense
+  return [key, method] as ApiPath<keyof DatasourceApis>;
+}
+
+export type Query<TInput, TOutput> = ReturnType<
+  typeof createQuery<TInput, TOutput>
+>;

package/src/api-manager/services/get-query-client.ts

@@ -0,0 +1,40 @@
+import {
+  isServer,
+  QueryClient,
+  defaultShouldDehydrateQuery,
+  defaultShouldDehydrateMutation,
+} from "@tanstack/react-query";
+
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000,
+      },
+      dehydrate: {
+        serializeData: (data) => JSON.stringify(data),
+        shouldDehydrateMutation: (mutation) =>
+          defaultShouldDehydrateMutation(mutation),
+        // include pending queries in dehydration
+        shouldDehydrateQuery: (query) =>
+          defaultShouldDehydrateQuery(query) ||
+          query.state.status === "pending",
+      },
+      hydrate: {
+        deserializeData: (data) => (data && JSON.parse(data)) || data,
+      },
+    },
+  });
+}
+
+let browserQueryClient: QueryClient | undefined;
+
+export function getQueryClient() {
+  if (isServer) {
+    // Server: always make a new query client
+    return makeQueryClient();
+  } else {
+    if (!browserQueryClient) browserQueryClient = makeQueryClient();
+    return browserQueryClient;
+  }
+}

package/src/api-manager/services/order/queries/get-order-details.ts

@@ -0,0 +1,17 @@
+import {
+  GetSalesOrderDetailsInput,
+  SalesOrder,
+} from "@/api-manager/schemas/order.schema";
+import { createQuery, createApiPath } from "../../create-query";
+
+const apiPath = createApiPath("order", "getSalesOrderDetails");
+const config = {
+  queryKey: "salesOrderDetails",
+};
+
+const getOrderDetails = createQuery<GetSalesOrderDetailsInput, SalesOrder>(
+  apiPath,
+  config,
+);
+
+export default getOrderDetails;

package/src/api-manager/services/order/queries/get-orders.ts

@@ -0,0 +1,14 @@
+import {
+  SalesOrder,
+  SalesOrderInput,
+} from "@/api-manager/schemas/order.schema";
+import { createApiPath, createQuery } from "../../create-query";
+
+const apiPath = createApiPath("order", "getSalesOrders");
+const config = {
+  queryKey: "salesOrderDetails",
+};
+
+const getOrders = createQuery<SalesOrderInput, SalesOrder[]>(apiPath, config);
+
+export default getOrders;

package/src/api-manager/services/organization/queries/get-channel-configuration.ts

@@ -0,0 +1,14 @@
+import { ChannelConfiguration } from "@/api-manager/schemas/organization.schema";
+import { createApiPath, createQuery } from "../../create-query";
+
+const apiPath = createApiPath("organization", "getChannelConfiguration");
+const config = {
+  queryKey: "channelConfiguration",
+};
+
+const getChannelConfiguration = createQuery<null, ChannelConfiguration[]>(
+  apiPath,
+  config,
+);
+
+export default getChannelConfiguration;

package/src/api-manager/services/organization/queries/get-stores.ts

@@ -0,0 +1,17 @@
+import {
+  GetOrgUnitLocationsByAreaInput,
+  OrgUnitLocationReturnType,
+} from "@/api-manager/schemas/organization.schema";
+import { createApiPath, createQuery } from "../../create-query";
+
+const apiPath = createApiPath("organization", "getStoresList");
+const config = {
+  queryKey: "getStores",
+};
+
+const getStoresList = createQuery<
+  GetOrgUnitLocationsByAreaInput,
+  OrgUnitLocationReturnType[]
+>(apiPath, config);
+
+export default getStoresList;

package/src/api-manager/services/product/mutations/search-products.ts

@@ -0,0 +1,23 @@
+import { searchProductsInput } from "@/api-manager/schemas/product.schema";
+import { useMutation } from "@tanstack/react-query";
+import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
+import { searchProductsServer } from "../server/product.server";
+import { UseMutationResult } from "@tanstack/react-query";
+
+// TODO: once migrating to query version this interface is no longer needed
+export type EntityDataManagerMutate<TData, TVariables> =
+  () => UseMutationResult<TData, Error, TVariables, unknown>;
+
+/** DEPRECATED - REPLACE WITH QUERY VERSION */
+const useSearchProducts: EntityDataManagerMutate<
+  ProductSearchResult[],
+  searchProductsInput
+> = () => {
+  return useMutation({
+    mutationFn: (input: searchProductsInput) => {
+      return searchProductsServer(input);
+    },
+  });
+};
+
+export default useSearchProducts;

package/src/api-manager/services/product/queries/get-product-availability.ts

@@ -0,0 +1,15 @@
+import { ProductWarehouseInventoryInformation } from "@msdyn365-commerce/retail-proxy";
+import { InventorySearchCriteriaInput } from "@/api-manager/schemas/product.schema";
+import { createApiPath, createQuery } from "../../create-query";
+
+const apiPath = createApiPath("product", "getInventory");
+
+const getProductAvailability = createQuery<
+  InventorySearchCriteriaInput,
+  ProductWarehouseInventoryInformation
+>(apiPath, {
+  queryKey: "product-inventory",
+  disableProperties: ["allDimensionsSelected", "searchCriteria"],
+});
+
+export default getProductAvailability;

package/src/api-manager/services/product/queries/get-product-by-id.ts

@@ -0,0 +1,17 @@
+import {
+  GetProductByIdInput,
+  ProductDetails,
+} from "../../../schemas/product.schema";
+import { createApiPath, createQuery } from "../../create-query";
+
+const apiPath = createApiPath("product", "getProductById");
+
+const getProductById = createQuery<GetProductByIdInput, ProductDetails>(
+  apiPath,
+  {
+    queryKey: "product",
+    disableProperties: ["id"],
+  },
+);
+
+export default getProductById;

package/src/api-manager/services/product/queries/get-product-by-ids.ts

@@ -0,0 +1,14 @@
+import { GetProductByIdsInput } from "../../../schemas/product.schema";
+import { SimpleProduct } from "@msdyn365-commerce/retail-proxy";
+import { createApiPath, createQuery } from "../../create-query";
+
+const apiPath = createApiPath("product", "getProductByIds");
+
+const getProductByIds = createQuery<GetProductByIdsInput, SimpleProduct[]>(
+  apiPath,
+  {
+    queryKey: "products",
+  },
+);
+
+export default getProductByIds;

package/src/api-manager/services/product/queries/get-product-list.ts

@@ -0,0 +1,16 @@
+import {
+  SearchByCriteriaInput,
+  SearchByCriteriaResponse,
+} from "@/api-manager/schemas/product.schema";
+import { createApiPath, createQuery } from "../../create-query";
+
+const apiPath = createApiPath("product", "getProductsList");
+
+const getProductList = createQuery<
+  SearchByCriteriaInput,
+  SearchByCriteriaResponse
+>(apiPath, {
+  queryKey: "product-list",
+});
+
+export default getProductList;

package/src/api-manager/services/product/queries/get-related-products.ts

@@ -0,0 +1,14 @@
+import { GetRelatedProductsInput } from "../../../schemas/product.schema";
+import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
+import { createApiPath, createQuery } from "../../create-query";
+
+const apiPath = createApiPath("product", "getRelatedProducts");
+
+const getRelatedProducts = createQuery<
+  GetRelatedProductsInput,
+  ProductSearchResult[]
+>(apiPath, {
+  queryKey: "related-products",
+});
+
+export default getRelatedProducts;

package/src/api-manager/services/product/queries/search-products.ts

@@ -0,0 +1,10 @@
+import { searchProductsInput } from "@/api-manager/schemas/product.schema";
+import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
+import { createApiPath, createQuery } from "../../create-query";
+
+const apiPath = createApiPath("product", "searchProducts");
+const searchProducts = createQuery<searchProductsInput, ProductSearchResult[]>(
+  apiPath,
+);
+
+export default searchProducts;

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

@@ -0,0 +1,13 @@
+"use server";
+
+import parseObject from "../../../datasources/d365/utils/parse-object";
+import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
+import { searchProductsInput } from "@/api-manager/schemas/product.schema";
+import createApiManager from "../../../index";
+
+export const searchProductsServer = async (
+  input: searchProductsInput,
+): Promise<ProductSearchResult[]> => {
+  const apiManager = await createApiManager();
+  return parseObject(apiManager.product.searchProducts(input));
+};

package/src/api-manager/services/session/mutations/session-init.ts

@@ -0,0 +1,22 @@
+import { useQueryClient } from "@tanstack/react-query";
+import {
+  Session,
+  SessionInitInput,
+} from "@/api-manager/schemas/session.schema";
+import { useCreateMutation } from "../../create-mutation";
+import { createApiPath } from "../../create-query";
+
+const apiPath = createApiPath("session", "sessionInit");
+
+const useSessionInit = () => {
+  const queryClient = useQueryClient();
+
+  return useCreateMutation<SessionInitInput, Session>(apiPath, {
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["sessionRead"] });
+      queryClient.invalidateQueries({ queryKey: ["me"] });
+    },
+  });
+};
+
+export default useSessionInit;

package/src/api-manager/services/session/mutations/session-logout.ts

@@ -0,0 +1,18 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useCreateMutation } from "../../create-mutation";
+import { createApiPath } from "../../create-query";
+
+const apiPath = createApiPath("session", "sessionLogout");
+
+const useSessionLogout = () => {
+  const queryClient = useQueryClient();
+
+  return useCreateMutation<unknown, boolean>(apiPath, {
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["sessionRead"] });
+      queryClient.invalidateQueries({ queryKey: ["me"] });
+    },
+  });
+};
+
+export default useSessionLogout;

package/src/api-manager/services/session/queries/get-session.ts

@@ -0,0 +1,10 @@
+import { Session } from "@/api-manager/schemas/session.schema";
+import { createApiPath, createQuery } from "../../create-query";
+
+const apiPath = createApiPath("session", "getSession");
+
+const getSession = createQuery<null, Session[]>(apiPath, {
+  queryKey: "session-read",
+});
+
+export default getSession;