@nosto/nosto-react 0.4.1 → 0.5.0

package/src/types.ts

@@ -1,158 +1,173 @@
 declare global {
   interface Window {
     nosto?: {
-      reload(settings: unknown): void;
-    };
+      reload(settings: unknown): void
+    }
     nostojs: {
-      (callback: (api: NostoClient) => void): void;
-      q?: unknown[];
-    };
+      (callback: (api: NostoClient) => void): void
+      q?: unknown[]
+    }
   }
 }
 
 /**
  * @group Types
  */
-export interface NostoClient {
-  addOrder(order: { purchase: Purchase }): NostoClient;
-  defaultSession(): NostoClient;
-  setAutoLoad(autoload: boolean): NostoClient;
-  setCart(cart?: Cart): NostoClient;
-  setCustomer(customer?: Customer): NostoClient;
-  setPlacements(placements: string[]): NostoClient;
-  setResponseMode(mode: string): NostoClient;
-  setVariation(variation: string): NostoClient;
-  viewCategory(category: string): NostoClient;
-  viewProduct(product: string): NostoClient;
-  viewFrontPage(): NostoClient;
-  viewNotFound(): NostoClient;
-  viewOther(): NostoClient;
-  viewSearch(query: string): NostoClient;
-  viewCart(): NostoClient;
+export interface Affinity {
+  name: string
+  score: number
+}
+
+/**
+ * @group Types
+ */
+export interface SessionAction {
+  setPlacements(placements: string[]): SessionAction
   load(): Promise<{
-    affinities: Record<
-      string,
-      {
-        name: string;
-        score: number;
-      }[]
-    >;
-    geo_location?: string[];
-    page_views: number;
-    recommendations: Recommendation[];
-  }>;
+    affinities: Record<string, Affinity[]>
+    geo_location?: string[]
+    page_views: number
+    recommendations: Recommendation[]
+  }>
+}
+
+/**
+ * @group Types
+ */
+export interface NostoClientSession {
+  setCart(cart?: Cart): NostoClientSession
+  setCustomer(customer?: Customer): NostoClientSession
+  setResponseMode(mode: string): NostoClientSession
+  setVariation(variation?: string): NostoClientSession
+  addOrder(order: { purchase: Purchase }): SessionAction
+  viewCategory(category: string): SessionAction
+  viewProduct(product: string): SessionAction
+  viewFrontPage(): SessionAction
+  viewNotFound(): SessionAction
+  viewOther(): SessionAction
+  viewSearch(query: string): SessionAction
+  viewCart(): SessionAction
+}
+
+/**
+ * @group Types
+ */
+export interface NostoClient {
+  setAutoLoad(autoload: boolean): NostoClient
+  defaultSession(): NostoClientSession
   placements: {
-    getPlacements(): string[];
-  };
+    getPlacements(): string[]
+    injectCampaigns(recommendations: Record<string, Recommendation>): void
+  }
 }
 
 /**
  * @group Types
  */
 export interface Recommendation {
-  result_id: string;
-  products: Product[];
-  result_type: string;
-  title: string;
-  div_id: string;
-  source_product_ids: string[];
-  params: unknown;
+  result_id: string
+  products: Product[]
+  result_type: string
+  title: string
+  div_id: string
+  source_product_ids: string[]
+  params: unknown
 }
 
 /**
  * @group Types
  */
 export interface Item {
-  name: string;
-  price_currency_code: string;
-  product_id: string;
-  quantity: number;
-  sku_id: string;
-  unit_price: number;
+  name: string
+  price_currency_code: string
+  product_id: string
+  quantity: number
+  sku_id: string
+  unit_price: number
 }
 
 /**
  * @group Types
  */
 export interface Cart {
-  items: Item[];
+  items: Item[]
 }
 
 /**
  * @group Types
  */
 export interface Customer {
-  customer_reference: string;
-  email: string;
-  first_name: string;
-  last_name: string;
-  newsletter: boolean;
+  customer_reference: string
+  email: string
+  first_name: string
+  last_name: string
+  newsletter: boolean
 }
 
 /**
  * @group Types
  */
 export interface Buyer {
-  first_name: string;
-  last_name: string;
-  email: string;
-  type: string;
-  newsletter: boolean;
+  first_name: string
+  last_name: string
+  email: string
+  type: string
+  newsletter: boolean
 }
 
 /**
  * @group Types
  */
 export interface Purchase {
-  number: string;
-  info: Buyer;
-  items: Item[];
+  number: string
+  info: Buyer
+  items: Item[]
 }
 
 /**
  * @group Types
  */
 export interface SKU {
-  id: string;
-  name: string;
-  price: number;
-  listPrice?: number;
-  url: URL;
-  imageUrl: URL;
-  gtin?: string;
-  availability: "InStock" | "OutOfStock";
-  customFields?: { [key: string]: string };
+  id: string
+  name: string
+  price: number
+  listPrice?: number
+  url: URL
+  imageUrl: URL
+  gtin?: string
+  availability: "InStock" | "OutOfStock"
+  customFields?: { [key: string]: string }
 }
 
 /**
  * @group Types
  */
 export interface Product {
-  alternateImageUrls?: URL[];
-  availability: "InStock" | "OutOfStock";
-  brand?: string;
-  category: string[];
-  categoryIds?: string[];
-  description: string;
-  googleCategory?: string;
-  condition?: string;
-  gender?: string;
-  ageGroup?: string;
-  gtin?: string;
-  imageUrl: URL;
-  listPrice?: number;
-  name: string;
-  price: number;
-  ratingValue?: number;
-  reviewCount?: number;
-  priceCurrencyCode: string;
-  productId: string;
-  tags1?: string[];
-  tags2?: string[];
-  tags3?: string[];
-  thumbUrl?: URL;
-  url: URL;
-  customFields?: { [key: string]: string };
-  variationId?: string;
-  skus?: SKU[];
+  alternateImageUrls?: URL[]
+  availability: "InStock" | "OutOfStock"
+  brand?: string
+  category: string[]
+  categoryIds?: string[]
+  description: string
+  googleCategory?: string
+  condition?: string
+  gender?: string
+  ageGroup?: string
+  gtin?: string
+  imageUrl: URL
+  listPrice?: number
+  name: string
+  price: number
+  ratingValue?: number
+  reviewCount?: number
+  priceCurrencyCode: string
+  productId: string
+  tags1?: string[]
+  tags2?: string[]
+  tags3?: string[]
+  thumbUrl?: URL
+  url: URL
+  customFields?: { [key: string]: string }
+  variationId?: string
+  skus?: SKU[]
 }

package/src/utils/compare.ts

@@ -1,30 +1,30 @@
-import { isPlainObject } from "./object";
+import { isPlainObject } from "./object"
 
 export function deepCompare(a: unknown, b: unknown): boolean {
   if (a === b) {
-    return true;
+    return true
   }
 
   if (a instanceof Date && b instanceof Date) {
-    return a.getTime() === b.getTime();
+    return a.getTime() === b.getTime()
   }
 
   if (a instanceof Array && b instanceof Array) {
     if (a.length !== b.length) {
-      return false;
+      return false
     }
 
-    return a.every((v, i) => deepCompare(v, b[i]));
+    return a.every((v, i) => deepCompare(v, b[i]))
   }
 
   if (isPlainObject(a) && isPlainObject(b)) {
-    const entriesA = Object.entries(a);
+    const entriesA = Object.entries(a)
 
     if (entriesA.length !== Object.keys(b).length) {
-      return false;
+      return false
     }
-    return entriesA.every(([k, v]) => deepCompare(v, b[k]));
+    return entriesA.every(([k, v]) => deepCompare(v, b[k]))
   }
 
-  return false;
+  return false
 }

package/src/utils/hooks.ts

@@ -1,21 +1,41 @@
-import { useEffect, useRef, useMemo } from "react";
-import { deepCompare } from "./compare";
+import { useEffect, useRef, useMemo } from "react"
+import { useNostoContext } from "../components/context"
+import { deepCompare } from "./compare"
+import { NostoClient } from "../types"
 
 export function useDeepCompareEffect(
   callback: Parameters<typeof useEffect>[0],
   dependencies: Parameters<typeof useEffect>[1]
 ): ReturnType<typeof useEffect> {
-  return useEffect(callback, useDeepCompareMemoize(dependencies));
+  return useEffect(callback, useDeepCompareMemoize(dependencies))
 }
 
 function useDeepCompareMemoize<T>(value: T) {
-  const ref = useRef<T>(value);
-  const signalRef = useRef<number>(0);
+  const ref = useRef<T>(value)
+  const signalRef = useRef<number>(0)
 
   if (!deepCompare(value, ref.current)) {
-    ref.current = value;
-    signalRef.current += 1;
+    ref.current = value
+    signalRef.current += 1
   }
 
-  return useMemo(() => ref.current, [signalRef.current]);
+  return useMemo(() => ref.current, [signalRef.current])
+}
+
+export function useNostoApi(
+  cb: (api: NostoClient) => void,
+  deps?: React.DependencyList,
+  flags?: { deep?: boolean }
+): void {
+  const { clientScriptLoaded, currentVariation, responseMode } = useNostoContext()
+  const useEffectFn = flags?.deep ? useDeepCompareEffect : useEffect
+
+  useEffectFn(() => {
+    if (clientScriptLoaded) {
+      window.nostojs(api => {
+        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode)
+        cb(api)
+      })
+    }
+  }, [clientScriptLoaded, currentVariation, responseMode, ...(deps ?? [])])
 }

package/src/utils/object.ts

@@ -1,20 +1,19 @@
-export function isPlainObject<T = Record<keyof any, unknown>>(
-  value: unknown
-): value is T {
-  const isObject = (v: unknown): v is object => String(v) === "[object Object]";
+const isObject = (v: unknown): v is object => String(v) === "[object Object]"
 
-  if (!isObject(value)) return false;
+export function isPlainObject(value: unknown): value is Record<string, unknown> {
+  if (!isObject(value)) return false
 
-  const constructor = value.constructor;
-  if (constructor === undefined) return true;
+  const constructor = value.constructor
+  if (constructor === undefined) return true
 
-  const prototype = constructor.prototype;
-  if (!isObject(prototype)) return false;
+  const prototype = constructor.prototype
+  if (!isObject(prototype)) return false
 
   // Checks if it is not a class
+  // eslint-disable-next-line no-prototype-builtins
   if (!prototype.hasOwnProperty("isPrototypeOf")) {
-    return false;
+    return false
   }
 
-  return true;
+  return true
 }

package/src/utils/snakeize.ts

@@ -1,28 +1,28 @@
 export function snakeize<T>(obj: T): T {
   if (!obj || typeof obj !== "object") {
-    return obj;
+    return obj
   }
   if (isDate(obj) || isRegex(obj)) {
-    return obj;
+    return obj
   }
   if (Array.isArray(obj)) {
-    return obj.map(snakeize) as T;
+    return obj.map(snakeize) as T
   }
   return Object.keys(obj).reduce((acc, key) => {
-    var camel =
+    const camel =
       key[0].toLowerCase() +
       key.slice(1).replace(/([A-Z]+)/g, (_, x) => {
-        return "_" + x.toLowerCase();
-      });
-    acc[camel as keyof typeof acc] = snakeize(obj[key as keyof typeof acc]);
-    return acc;
-  }, {} as T);
+        return "_" + x.toLowerCase()
+      })
+    acc[camel as keyof typeof acc] = snakeize(obj[key as keyof typeof acc])
+    return acc
+  }, {}) as T
 }
 
 function isDate(obj: unknown) {
-  return Object.prototype.toString.call(obj) === "[object Date]";
+  return Object.prototype.toString.call(obj) === "[object Date]"
 }
 
 function isRegex(obj: unknown) {
-  return Object.prototype.toString.call(obj) === "[object RegExp]";
+  return Object.prototype.toString.call(obj) === "[object RegExp]"
 }