@nosto/nosto-react 0.1.2 → 0.1.5

package/src/components/Checkout/index.client.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect } from "react";
+import { useNostoContext } from "../Provider/context.client";
+
+const NostoCheckout: React.FC = () => {
+  const { clientScriptLoaded, currentVariation } = useNostoContext();
+  useEffect(() => {
+    // @ts-ignore
+    if (clientScriptLoaded) {
+      window.nostojs((api: any) => {
+        api
+          .defaultSession()
+          .setVariation(currentVariation)
+          .setResponseMode("HTML")
+          .viewCart()
+          .setPlacements(api.placements.getPlacements())
+          .load()
+          .then((data: object) => {
+            // @ts-ignore
+            api.placements.injectCampaigns(data.recommendations);
+          });
+      });
+    }
+  }, [clientScriptLoaded, currentVariation]);
+
+  return (
+    <>
+      <div className="nosto_page_type" style={{ display: "none" }}>
+        cart
+      </div>
+    </>
+  );
+};
+
+export default NostoCheckout;

package/src/components/Fohofo/index.client.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect } from "react";
+import { useNostoContext } from "../Provider/context.client";
+
+const NostoFohofo: React.FC = () => {
+  const { clientScriptLoaded, currentVariation } = useNostoContext();
+  useEffect(() => {
+    // @ts-ignore
+    if (clientScriptLoaded) {
+      window.nostojs((api: any) => {
+        api
+          .defaultSession()
+          .setVariation(currentVariation)
+          .setResponseMode("HTML")
+          .viewNotFound()
+          .setPlacements(api.placements.getPlacements())
+          .load()
+          .then((data: object) => {
+            // @ts-ignore
+            api.placements.injectCampaigns(data.recommendations);
+          });
+      });
+    }
+  }, [clientScriptLoaded, currentVariation]);
+
+  return (
+    <>
+      <div className="nosto_page_type" style={{ display: "none" }}>
+        notfound
+      </div>
+    </>
+  );
+};
+
+export default NostoFohofo;

package/src/components/Home/index.client.tsx

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

package/src/components/Order/index.client.tsx

@@ -0,0 +1,43 @@
+import { Purchase } from "../../types";
+import React, { useEffect } from "react";
+import snakeize from "snakeize";
+import { useNostoContext } from "../Provider/context.client";
+
+export interface OrderProps {
+  purchase: Purchase;
+}
+
+const NostoOrder: React.FC<{ order: OrderProps }> = ({ order }) => {
+  const { clientScriptLoaded, currentVariation } = useNostoContext();
+  useEffect(() => {
+    // @ts-ignore
+    if (clientScriptLoaded) {
+      window.nostojs((api: any) => {
+        api
+          .defaultSession()
+          .setVariation(currentVariation)
+          .setResponseMode("HTML")
+          .addOrder(snakeize(order))
+          .setPlacements(api.placements.getPlacements())
+          .load()
+          .then((data: object) => {
+            // @ts-ignore
+            api.placements.injectCampaigns(data.recommendations);
+          });
+      });
+    }
+  }, [clientScriptLoaded, currentVariation]);
+
+  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.client.tsx

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

package/src/components/Product/{index.tsx → index.client.tsx}

@@ -1,27 +1,33 @@
 import { Product } from "../../types";
-import stringinate from "../../utils/stringinate";
 import React, { useEffect } from "react";
-import snakeize from "snakeize";
+import { useNostoContext } from "../Provider/context.client";
 
 const NostoProduct: React.FC<{ product: string; tagging: Product }> = ({
   product,
   tagging,
 }) => {
+  const { clientScriptLoaded, currentVariation } = useNostoContext();
   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);
-        });
-    });
-  }, []);
+    if (clientScriptLoaded) {
+      window.nostojs(
+        (api: any) => {
+          api
+            .defaultSession()
+            .setVariation(currentVariation)
+            .setResponseMode("HTML")
+            .viewProduct(product)
+            .setPlacements(api.placements.getPlacements())
+            .load()
+            .then((data: object) => {
+              // @ts-ignore
+              api.placements.injectCampaigns(data.recommendations);
+            });
+        },
+        [clientScriptLoaded, currentVariation, product]
+      );
+    }
+  });
 
   return (
     <>
@@ -29,81 +35,79 @@ const NostoProduct: React.FC<{ product: string; tagging: Product }> = ({
         product
       </div>
       <div className="nosto_product" style={{ display: "none" }}>
-        {tagging.variationId && (
+        {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 && (
+        {product && <span className="product_id">{product}</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 && (
+        {tagging?.availability && (
           <span className="availability">{tagging.availability}</span>
         )}
-        {tagging.price && <span className="price">{tagging.price}</span>}
-        {tagging.listPrice && (
+        {tagging?.price && <span className="price">{tagging.price}</span>}
+        {tagging?.listPrice && (
           <span className="list_price">{tagging.listPrice}</span>
         )}
-        {tagging.priceCurrencyCode && (
+        {tagging?.priceCurrencyCode && (
           <span className="price_currency_code">
             {tagging.priceCurrencyCode}
           </span>
         )}
-        {tagging.brand && <span className="brand">{tagging.brand}</span>}
-        {tagging.description && (
+        {tagging?.brand && <span className="brand">{tagging.brand}</span>}
+        {tagging?.description && (
           <span className="description">{tagging.description}</span>
         )}
-        {tagging.googleCategory && (
+        {tagging?.googleCategory && (
           <span className="description">{tagging.googleCategory}</span>
         )}
-        {tagging.condition && (
+        {tagging?.condition && (
           <span className="condition">{tagging.condition}</span>
         )}
-        {tagging.gender && <span className="gender">{tagging.gender}</span>}
-        {tagging.ageGroup && (
+        {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) => (
+        {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 &&
           tagging.tags1.map((tag, index) => (
             <span className="tag1" key={index}>
               {tag}
             </span>
           ))}
-        {tagging.tags2 &&
+        {tagging?.tags2 &&
           tagging.tags2.map((tag, index) => (
             <span className="tag2" key={index}>
               {tag}
             </span>
           ))}
-        {tagging.tags3 &&
+        {tagging?.tags3 &&
           tagging.tags3.map((tag, index) => (
             <span className="tag3" key={index}>
               {tag}
             </span>
           ))}
-        {tagging.ratingValue && (
+        {tagging?.ratingValue && (
           <span className="rating_value">{tagging.ratingValue}</span>
         )}
-        {tagging.reviewCount && (
+        {tagging?.reviewCount && (
           <span className="review_count">{tagging.reviewCount}</span>
         )}
-        {tagging.alternateImageUrls &&
+        {tagging?.alternateImageUrls &&
           tagging.alternateImageUrls.map((url, index) => (
             <span className="alternate_image_url" key={index}>
               {url.toString()}
             </span>
           ))}
-        {tagging.customFields &&
+        {tagging?.customFields &&
           Object.keys(tagging.customFields).map(
             (field, index) =>
               tagging.customFields &&
@@ -113,24 +117,24 @@ const NostoProduct: React.FC<{ product: string; tagging: Product }> = ({
                 </span>
               )
           )}
-        {tagging.skus &&
+        {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 && (
+              {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 && (
+              {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 && (
+              {sku?.gtin && <span className="gtin">{sku.gtin}</span>}
+              {sku?.availability && (
                 <span className="availability">{sku.availability}</span>
               )}
-              {sku.customFields &&
+              {sku?.customFields &&
                 Object.keys(sku.customFields).map(
                   (field, index) =>
                     sku.customFields &&

package/src/components/Provider/context.client.ts

@@ -0,0 +1,25 @@
+import { createContext, useContext } from "react";
+
+export interface NostoInterface {
+  account: string;
+  clientScriptLoaded: boolean;
+  currentVariation: string;
+}
+
+/* tslint:disable:no-empty */
+export const NostoContext = createContext<NostoInterface>({
+  // @ts-ignore
+  account: undefined,
+  currentVariation: "",
+});
+
+/* tslint:enable:no-empty */
+export function useNostoContext() {
+  const context = useContext(NostoContext);
+
+  if (!context) {
+    throw new Error("No nosto context found");
+  }
+
+  return context;
+}

package/src/components/Provider/index.client.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect } from "react";
+import { NostoContext } from "./context.client";
+
+interface NostoProviderProps {
+  account: string;
+  currentVariation: string;
+  host: string;
+  children: React.ReactElement;
+  multiCurrency: boolean;
+}
+
+const NostoProvider: React.FC<NostoProviderProps> = ({
+  account,
+  currentVariation = "",
+  multiCurrency = false,
+  host,
+  children,
+}) => {
+  const [clientScriptLoadedState, setClientScriptLoadedState] =
+    React.useState(false);
+  const clientScriptLoaded = React.useMemo(
+    () => clientScriptLoadedState,
+    [clientScriptLoadedState]
+  );
+
+  //Pass currentVariation as empty string if multiCurrency is disabled
+  currentVariation = multiCurrency ? currentVariation : "";
+
+  useEffect(() => {
+    if (!document.querySelectorAll("[nosto-client-script]").length) {
+      const script = document.createElement("script");
+      script.type = "text/javascript";
+      script.src = "//" + (host || "connect.nosto.com") + "/include/" + account;
+      script.async = true;
+      script.setAttribute("nosto-client-script", "");
+      script.onload = () => {
+        console.log("Nosto client script loaded");
+        setClientScriptLoadedState(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, clientScriptLoaded, currentVariation }}
+    >
+      {children}
+    </NostoContext.Provider>
+  );
+};
+
+export default NostoProvider;

package/src/components/Search/index.client.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from "react";
+import { useNostoContext } from "../Provider/context.client";
+
+const NostoSearch: React.FC<{ query: string }> = ({ query }) => {
+  const { clientScriptLoaded, currentVariation } = useNostoContext();
+  useEffect(() => {
+    // @ts-ignore
+    if (clientScriptLoaded) {
+      window.nostojs((api: any) => {
+        api
+          .defaultSession()
+          .setVariation(currentVariation)
+          .setResponseMode("HTML")
+          .viewSearch(query)
+          .setPlacements(api.placements.getPlacements())
+          .load()
+          .then((data: object) => {
+            // @ts-ignore
+            api.placements.injectCampaigns(data.recommendations);
+          });
+      });
+    }
+  }, [clientScriptLoaded, currentVariation, query]);
+
+  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 → index.client.tsx}

@@ -1,5 +1,6 @@
 import React from "react";
 import snakeize from "snakeize";
+import { useNostoContext } from "../Provider/context.client";
 
 import useDeepCompareEffect from "use-deep-compare-effect";
 import { Cart, Customer } from "../../types";
@@ -10,24 +11,25 @@ interface NostoSessionProps {
 }
 
 const NostoSession: React.FC<NostoSessionProps> = ({ cart, customer }) => {
+  const { clientScriptLoaded } = useNostoContext();
   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 || {}]);
+    if (clientScriptLoaded) {
+      window.nostojs((api: any) => {
+        api
+          .defaultSession()
+          .setResponseMode("HTML")
+          .setCart(snakeize(currentCart))
+          .viewOther()
+          .load();
+      });
+    }
+  }, [clientScriptLoaded, cart || [], customer || {}]);
 
-  return <div />;
+  return <></>;
 };
 
 export default NostoSession;

package/src/index.client.ts

@@ -8,24 +8,30 @@ declare global {
 
 export * from "./types";
 // noinspection JSUnusedGlobalSymbols
-export { default as Nosto404 } from "./components/Fohofo";
+export { default as Nosto404 } from "./components/Fohofo/index.client";
 // noinspection JSUnusedGlobalSymbols
-export { default as NostoOther } from "./components/Other";
+export { default as NostoOther } from "./components/Other/index.client";
 // noinspection JSUnusedGlobalSymbols
-export { default as NostoCheckout } from "./components/Checkout";
+export { default as NostoCheckout } from "./components/Checkout/index.client";
 // noinspection JSUnusedGlobalSymbols
-export { default as NostoProduct } from "./components/Product";
+export { default as NostoProduct } from "./components/Product/index.client";
 // noinspection JSUnusedGlobalSymbols
-export { default as NostoCategory } from "./components/Category";
+export { default as NostoCategory } from "./components/Category/index.client";
 // noinspection JSUnusedGlobalSymbols
-export { default as NostoSearch } from "./components/Search";
+export { default as NostoSearch } from "./components/Search/index.client";
 // noinspection JSUnusedGlobalSymbols
-export { default as NostoOrder } from "./components/Order";
+export { default as NostoOrder } from "./components/Order/index.client";
 // noinspection JSUnusedGlobalSymbols
-export { default as NostoHome } from "./components/Home";
+export { default as NostoHome } from "./components/Home/index.client";
 // noinspection JSUnusedGlobalSymbols
-export { default as NostoPlacement } from "./components/Placement";
+export { default as NostoPlacement } from "./components/Placement/index.client";
 // noinspection JSUnusedGlobalSymbols
-export { default as NostoProvider } from "./components/Provider";
+export { default as NostoProvider } from "./components/Provider/index.client";
 // noinspection JSUnusedGlobalSymbols
-export { default as NostoSession } from "./components/Session";
+export {
+  NostoContext,
+  useNostoContext,
+} from "./components/Provider/context.client";
+// noinspection JSUnusedGlobalSymbols
+export { default as NostoSession } from "./components/Session/index.client";
+//

package/src/components/Category/index.tsx

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

package/src/components/Checkout/index.tsx

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