@nosto/nosto-react 0.1.0

package/src/components/Home/index.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect } from "react";
+
+const NostoHome: React.FC = () => {
+  useEffect(() => {
+    // @ts-ignore
+    window.nostojs((api) => {
+      api
+        .defaultSession()
+        .setResponseMode("HTML")
+        .viewFrontPage()
+        .setPlacements(api.placements.getPlacements())
+        .load()
+        .then((data: object) => {
+          // @ts-ignore
+          api.placements.injectCampaigns(data.recommendations);
+        });
+    });
+  }, []);
+
+  return (
+    <>
+      <div className="nosto_page_type" style={{ display: "none" }}>
+        front
+      </div>
+    </>
+  );
+};
+
+export default NostoHome;

package/src/components/Order/index.tsx

@@ -0,0 +1,38 @@
+import { Purchase } from "../../types";
+import React, { useEffect } from "react";
+import snakeize from "snakeize";
+
+export interface OrderProps {
+  purchase: Purchase;
+}
+
+const NostoOrder: React.FC<{ order: OrderProps }> = ({ order }) => {
+  useEffect(() => {
+    // @ts-ignore
+    window.nostojs((api) => {
+      api
+        .defaultSession()
+        .setResponseMode("HTML")
+        .addOrder(snakeize(order))
+        .setPlacements(api.placements.getPlacements())
+        .load()
+        .then((data: object) => {
+          // @ts-ignore
+          api.placements.injectCampaigns(data.recommendations);
+        });
+    });
+  }, []);
+
+  return (
+    <>
+      <div className="nosto_page_type" style={{ display: "none" }}>
+        order
+      </div>
+      <div className="nosto_order" style={{ display: "none" }}>
+        {order.purchase.number}
+      </div>
+    </>
+  );
+};
+
+export default NostoOrder;

package/src/components/Other/index.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect } from "react";
+
+const NostoOther: React.FC = () => {
+  useEffect(() => {
+    // @ts-ignore
+    window.nostojs((api) => {
+      api
+        .defaultSession()
+        .setResponseMode("HTML")
+        .viewOther()
+        .setPlacements(api.placements.getPlacements())
+        .load()
+        .then((data: object) => {
+          // @ts-ignore
+          api.placements.injectCampaigns(data.recommendations);
+        });
+    });
+  }, []);
+
+  return (
+    <>
+      <div className="nosto_page_type" style={{ display: "none" }}>
+        other
+      </div>
+    </>
+  );
+};
+
+export default NostoOther;

package/src/components/Placement/index.tsx

@@ -0,0 +1,25 @@
+import React, { MouseEvent } from "react";
+
+export interface PlacementProps {
+  id: string;
+}
+
+const NostoPlacement: React.FC<PlacementProps> = ({ id }) => {
+  const handleClick = (e: MouseEvent) => {
+    // noinspection TypeScriptUnresolvedFunction
+    // @ts-ignore
+    const targetLink = e.target.closest("a");
+    if (!targetLink) {
+      return;
+    } else {
+      e.preventDefault();
+      location.href = targetLink.href
+        .toString()
+        .replace(new URL(targetLink.href).origin, "");
+    }
+  };
+
+  return <div className="nosto_element" onClick={handleClick} id={id} />;
+};
+
+export default NostoPlacement;

package/src/components/Product/index.tsx

@@ -0,0 +1,150 @@
+import { Product } from "../../types";
+import stringinate from "../../utils/stringinate";
+import React, { useEffect } from "react";
+import snakeize from "snakeize";
+
+const NostoProduct: React.FC<{ product: string; tagging: Product }> = ({
+  product,
+  tagging,
+}) => {
+  useEffect(() => {
+    // @ts-ignore
+    window.nostojs((api) => {
+      api
+        .defaultSession()
+        .setResponseMode("HTML")
+        .viewProduct(snakeize(stringinate(tagging)))
+        .setPlacements(api.placements.getPlacements())
+        .load()
+        .then((data: object) => {
+          // @ts-ignore
+          api.placements.injectCampaigns(data.recommendations);
+        });
+    });
+  }, []);
+
+  return (
+    <>
+      <div className="nosto_page_type" style={{ display: "none" }}>
+        product
+      </div>
+      <div className="nosto_product" style={{ display: "none" }}>
+        {tagging.variationId && (
+          <span className="variation_id">{tagging.variationId}</span>
+        )}
+        {tagging.productId && (
+          <span className="product_id">{tagging.productId}</span>
+        )}
+        {tagging.name && <span className="name">{tagging.name}</span>}
+        {tagging.url && <span className="url">{tagging.url.toString()}</span>}
+        {tagging.imageUrl && (
+          <span className="image_url">{tagging.imageUrl.toString()}</span>
+        )}
+        {tagging.availability && (
+          <span className="availability">{tagging.availability}</span>
+        )}
+        {tagging.price && <span className="price">{tagging.price}</span>}
+        {tagging.listPrice && (
+          <span className="list_price">{tagging.listPrice}</span>
+        )}
+        {tagging.priceCurrencyCode && (
+          <span className="price_currency_code">
+            {tagging.priceCurrencyCode}
+          </span>
+        )}
+        {tagging.brand && <span className="brand">{tagging.brand}</span>}
+        {tagging.description && (
+          <span className="description">{tagging.description}</span>
+        )}
+        {tagging.googleCategory && (
+          <span className="description">{tagging.googleCategory}</span>
+        )}
+        {tagging.condition && (
+          <span className="condition">{tagging.condition}</span>
+        )}
+        {tagging.gender && <span className="gender">{tagging.gender}</span>}
+        {tagging.ageGroup && (
+          <span className="age_group">{tagging.ageGroup}</span>
+        )}
+        {tagging.gtin && <span className="gtin">{tagging.gtin}</span>}
+        {tagging.category &&
+          tagging.category.map((category, index) => (
+            <span className="category" key={index}>
+              {category}
+            </span>
+          ))}
+        {tagging.tags1 &&
+          tagging.tags1.map((tag, index) => (
+            <span className="tag1" key={index}>
+              {tag}
+            </span>
+          ))}
+        {tagging.tags2 &&
+          tagging.tags2.map((tag, index) => (
+            <span className="tag2" key={index}>
+              {tag}
+            </span>
+          ))}
+        {tagging.tags3 &&
+          tagging.tags3.map((tag, index) => (
+            <span className="tag3" key={index}>
+              {tag}
+            </span>
+          ))}
+        {tagging.ratingValue && (
+          <span className="rating_value">{tagging.ratingValue}</span>
+        )}
+        {tagging.reviewCount && (
+          <span className="review_count">{tagging.reviewCount}</span>
+        )}
+        {tagging.alternateImageUrls &&
+          tagging.alternateImageUrls.map((url, index) => (
+            <span className="alternate_image_url" key={index}>
+              {url.toString()}
+            </span>
+          ))}
+        {tagging.customFields &&
+          Object.keys(tagging.customFields).map(
+            (field, index) =>
+              tagging.customFields &&
+              tagging.customFields[field] && (
+                <span className={field} key={index}>
+                  {tagging.customFields[field]}
+                </span>
+              )
+          )}
+        {tagging.skus &&
+          tagging.skus.map((sku, index) => (
+            <span className="nosto_sku" key={index}>
+              {sku.id && <span className="product_id">{sku.id}</span>}
+              {sku.name && <span className="name">{sku.name}</span>}
+              {sku.price && <span className="price">{sku.price}</span>}
+              {sku.listPrice && (
+                <span className="list_price">{sku.listPrice}</span>
+              )}
+              {sku.url && <span className="url">{sku.url.toString()}</span>}
+              {sku.imageUrl && (
+                <span className="image_url">{sku.imageUrl.toString()}</span>
+              )}
+              {sku.gtin && <span className="gtin">{sku.gtin}</span>}
+              {sku.availability && (
+                <span className="availability">{sku.availability}</span>
+              )}
+              {sku.customFields &&
+                Object.keys(sku.customFields).map(
+                  (field, index) =>
+                    sku.customFields &&
+                    sku.customFields[field] && (
+                      <span className={field} key={index}>
+                        {sku.customFields[field]}
+                      </span>
+                    )
+                )}
+            </span>
+          ))}
+      </div>
+    </>
+  );
+};
+
+export default NostoProduct;

package/src/components/Provider/context.ts

@@ -0,0 +1,12 @@
+import { createContext } from "react";
+
+export interface NostoInterface {
+  account: string;
+}
+
+/* tslint:disable:no-empty */
+export const NostoContext = createContext<NostoInterface>({
+  // @ts-ignore
+  account: undefined
+});
+/* tslint:enable:no-empty */

package/src/components/Provider/index.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect } from "react";
+import { NostoContext } from "./context";
+
+interface NostoProviderProps {
+  account: string;
+  host: string;
+  children: React.ReactElement;
+}
+
+const NostoProvider: React.FC<NostoProviderProps> = ({
+  account,
+  host,
+  children,
+}) => {
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.type = "text/javascript";
+    script.src = "//" + (host || "connect.nosto.com") + "/include/" + account;
+    script.async = true;
+    document.head.appendChild(script);
+
+    window.nostojs = (cb: Function) =>
+      (window.nostojs.q = window.nostojs.q || []).push(cb);
+    // @ts-ignore
+    window.nostojs((api) => api.setAutoLoad(false));
+  }, []);
+
+  return (
+    <NostoContext.Provider value={{ account }}>
+      {children}
+    </NostoContext.Provider>
+  );
+};
+
+export default NostoProvider;

package/src/components/Search/index.tsx

@@ -0,0 +1,32 @@
+import React, { useEffect } from "react";
+
+const NostoSearch: React.FC<{ query: string }> = ({ query }) => {
+  useEffect(() => {
+    // @ts-ignore
+    window.nostojs((api) => {
+      api
+        .defaultSession()
+        .setResponseMode("HTML")
+        .viewSearch(query)
+        .setPlacements(api.placements.getPlacements())
+        .load()
+        .then((data: object) => {
+          // @ts-ignore
+          api.placements.injectCampaigns(data.recommendations);
+        });
+    });
+  }, []);
+
+  return (
+    <>
+      <div className="nosto_page_type" style={{ display: "none" }}>
+        search
+      </div>
+      <div className="nosto_search" style={{ display: "none" }}>
+        {query}
+      </div>
+    </>
+  );
+};
+
+export default NostoSearch;

package/src/components/Session/index.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import snakeize from "snakeize";
+
+import useDeepCompareEffect from "use-deep-compare-effect";
+import { Cart, Customer } from "../../types";
+
+interface NostoSessionProps {
+  cart: Cart;
+  customer: Customer;
+}
+
+const NostoSession: React.FC<NostoSessionProps> = ({ cart, customer }) => {
+  useDeepCompareEffect(() => {
+    const currentUser = customer ? customer : undefined;
+    console.debug(currentUser);
+    const currentCart = cart ? cart : undefined;
+    console.debug(currentCart);
+
+    // @ts-ignore
+    window.nostojs((api) => {
+      api
+        .defaultSession()
+        .setResponseMode("HTML")
+        .setCart(snakeize(currentCart))
+        .viewOther()
+        .load();
+    });
+  }, [cart || [], customer || {}]);
+
+  return <div />;
+};
+
+export default NostoSession;

package/src/index.client.ts

@@ -0,0 +1,31 @@
+declare global {
+  // noinspection JSUnusedGlobalSymbols
+  interface Window {
+    nostojs: any;
+    nosto: any;
+  }
+}
+
+export * from "./types";
+// noinspection JSUnusedGlobalSymbols
+export { default as Nosto404 } from "./components/Fohofo";
+// noinspection JSUnusedGlobalSymbols
+export { default as NostoOther } from "./components/Other";
+// noinspection JSUnusedGlobalSymbols
+export { default as NostoCheckout } from "./components/Checkout";
+// noinspection JSUnusedGlobalSymbols
+export { default as NostoProduct } from "./components/Product";
+// noinspection JSUnusedGlobalSymbols
+export { default as NostoCategory } from "./components/Category";
+// noinspection JSUnusedGlobalSymbols
+export { default as NostoSearch } from "./components/Search";
+// noinspection JSUnusedGlobalSymbols
+export { default as NostoOrder } from "./components/Order";
+// noinspection JSUnusedGlobalSymbols
+export { default as NostoHome } from "./components/Home";
+// noinspection JSUnusedGlobalSymbols
+export { default as NostoPlacement } from "./components/Placement";
+// noinspection JSUnusedGlobalSymbols
+export { default as NostoProvider } from "./components/Provider";
+// noinspection JSUnusedGlobalSymbols
+export { default as NostoSession } from "./components/Session";

package/src/snakeize.d.ts

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

package/src/types.ts

@@ -0,0 +1,76 @@
+export interface Item {
+  name: string;
+  price_currency_code: string;
+  product_id: string;
+  quantity: number;
+  sku_id: string;
+  unit_price: number;
+}
+
+export interface Cart {
+  items: Item[];
+}
+
+export interface Customer {
+  customer_reference: string;
+  email: string;
+  first_name: string;
+  last_name: string;
+  newsletter: boolean;
+}
+
+export interface Buyer {
+  first_name: string;
+  last_name: string;
+  email: string;
+  type: string;
+  newsletter: boolean;
+}
+
+export interface Purchase {
+  number: string;
+  info: Buyer;
+  items: Item[];
+}
+
+export interface SKU {
+  id: string;
+  name: string;
+  price: number;
+  listPrice?: number;
+  url: URL;
+  imageUrl: URL;
+  gtin?: string;
+  availability: 'InStock' | 'OutOfStock';
+  customFields?: { [key: string]: string };
+}
+
+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[];
+}

package/src/utils/stringinate.ts

@@ -0,0 +1,16 @@
+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;
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />