@nosto/nosto-react 0.2.1 → 0.4.0

package/src/types.ts

@@ -1,3 +1,67 @@
+declare global {
+  interface Window {
+    nosto?: {
+      reload(settings: unknown): void;
+    };
+    nostojs: {
+      (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;
+  load(): Promise<{
+    affinities: Record<
+      string,
+      {
+        name: string;
+        score: number;
+      }[]
+    >;
+    geo_location?: string[];
+    page_views: number;
+    recommendations: Recommendation[];
+  }>;
+  placements: {
+    getPlacements(): string[];
+  };
+}
+
+/**
+ * @group Types
+ */
+export interface Recommendation {
+  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;
@@ -7,10 +71,16 @@ export interface Item {
   unit_price: number;
 }
 
+/**
+ * @group Types
+ */
 export interface Cart {
   items: Item[];
 }
 
+/**
+ * @group Types
+ */
 export interface Customer {
   customer_reference: string;
   email: string;
@@ -19,6 +89,9 @@ export interface Customer {
   newsletter: boolean;
 }
 
+/**
+ * @group Types
+ */
 export interface Buyer {
   first_name: string;
   last_name: string;
@@ -27,12 +100,18 @@ export interface Buyer {
   newsletter: boolean;
 }
 
+/**
+ * @group Types
+ */
 export interface Purchase {
   number: string;
   info: Buyer;
   items: Item[];
 }
 
+/**
+ * @group Types
+ */
 export interface SKU {
   id: string;
   name: string;
@@ -41,13 +120,16 @@ export interface SKU {
   url: URL;
   imageUrl: URL;
   gtin?: string;
-  availability: 'InStock' | 'OutOfStock';
+  availability: "InStock" | "OutOfStock";
   customFields?: { [key: string]: string };
 }
 
+/**
+ * @group Types
+ */
 export interface Product {
   alternateImageUrls?: URL[];
-  availability: 'InStock' | 'OutOfStock';
+  availability: "InStock" | "OutOfStock";
   brand?: string;
   category: string[];
   categoryIds?: string[];

package/src/utils/compare.ts

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

package/src/utils/hooks.ts

@@ -0,0 +1,21 @@
+import { useEffect, useRef, useMemo } from "react";
+import { deepCompare } from "./compare";
+
+export function useDeepCompareEffect(
+  callback: Parameters<typeof useEffect>[0],
+  dependencies: Parameters<typeof useEffect>[1]
+): ReturnType<typeof useEffect> {
+  return useEffect(callback, useDeepCompareMemoize(dependencies));
+}
+
+function useDeepCompareMemoize<T>(value: T) {
+  const ref = useRef<T>(value);
+  const signalRef = useRef<number>(0);
+
+  if (!deepCompare(value, ref.current)) {
+    ref.current = value;
+    signalRef.current += 1;
+  }
+
+  return useMemo(() => ref.current, [signalRef.current]);
+}

package/src/utils/object.ts

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

package/src/utils/snakeize.ts

@@ -0,0 +1,28 @@
+export function snakeize<T>(obj: T): T {
+  if (!obj || typeof obj !== "object") {
+    return obj;
+  }
+  if (isDate(obj) || isRegex(obj)) {
+    return obj;
+  }
+  if (Array.isArray(obj)) {
+    return obj.map(snakeize) as T;
+  }
+  return Object.keys(obj).reduce((acc, key) => {
+    var 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);
+}
+
+function isDate(obj: unknown) {
+  return Object.prototype.toString.call(obj) === "[object Date]";
+}
+
+function isRegex(obj: unknown) {
+  return Object.prototype.toString.call(obj) === "[object RegExp]";
+}

package/src/snakeize.d.ts

@@ -1 +0,0 @@
-declare module "snakeize";

package/src/utils/stringinate.ts

@@ -1,16 +0,0 @@
-export default function stringinate(obj: {
-  [key: string]: any;
-}): { [key: string]: any } {
-  Object.keys(obj).forEach((property) => {
-    if (obj[property] instanceof URL) {
-      obj[property] = obj[property].toString();
-    }
-    if (typeof obj[property] === "object") {
-      stringinate(obj[property]);
-    }
-
-    obj[property] = obj[property];
-  });
-
-  return obj;
-}