@nosto/nosto-react 0.4.1 → 0.5.0

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

@@ -1,6 +1,6 @@
-import { Product } from "../../types";
-import { useNostoContext } from "../Provider/context.client";
-import { useDeepCompareEffect } from "../../utils/hooks";
+import { Product } from "../types"
+import { useNostoContext } from "./context"
+import { useNostoApi } from "../utils/hooks"
 
 /**
  * The NostoProduct component must be used to personalise the product page.
@@ -24,45 +24,29 @@ import { useDeepCompareEffect } from "../../utils/hooks";
  * </div>
  * ```
  *
- * @group Personalisation Components
+ * @group Components
  */
 export default function NostoProduct(props: {
-  product: string;
-  tagging?: Product;
-  placements?: string[];
-}): JSX.Element {
-  const { product, tagging } = props;
-  const {
-    clientScriptLoaded,
-    currentVariation,
-    responseMode,
-    recommendationComponent,
-    useRenderCampaigns,
-  } = useNostoContext();
+  product: string
+  tagging?: Product
+  placements?: string[]
+}) {
+  const { product, tagging, placements } = props
+  const { recommendationComponent, useRenderCampaigns } = useNostoContext()
 
-  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("product");
+  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("product")
 
-  useDeepCompareEffect(() => {
-    if (clientScriptLoaded && pageTypeUpdated) {
-      window.nostojs((api) => {
-        api
-          .defaultSession()
-          .setResponseMode(responseMode)
-          .viewProduct(product)
-          .setPlacements(props.placements || api.placements.getPlacements())
-          .load()
-          .then((data) => {
-            renderCampaigns(data, api);
-          });
-      });
-    }
-  }, [
-    clientScriptLoaded,
-    currentVariation,
-    product,
-    recommendationComponent,
-    pageTypeUpdated,
-  ]);
+  useNostoApi(
+    async (api) => {
+      const data = await api.defaultSession()
+        .viewProduct(product)
+        .setPlacements(placements || api.placements.getPlacements())
+        .load()
+      renderCampaigns(data, api)
+    },
+    [product, recommendationComponent, pageTypeUpdated],
+    { deep: true }
+  )
 
   return (
     <>
@@ -70,41 +54,23 @@ export default function NostoProduct(props: {
         product
       </div>
       <div className="nosto_product" style={{ display: "none" }}>
-        {tagging?.variationId && (
-          <span className="variation_id">{tagging.variationId}</span>
-        )}
+        {tagging?.variationId && <span className="variation_id">{tagging.variationId}</span>}
         {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 && (
-          <span className="availability">{tagging.availability}</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?.listPrice && <span className="list_price">{tagging.listPrice}</span>}
         {tagging?.priceCurrencyCode && (
-          <span className="price_currency_code">
-            {tagging.priceCurrencyCode}
-          </span>
+          <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?.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?.ageGroup && <span className="age_group">{tagging.ageGroup}</span>}
         {tagging?.gtin && <span className="gtin">{tagging.gtin}</span>}
         {tagging?.category &&
           tagging?.category.map((category, index) => (
@@ -130,12 +96,8 @@ export default function NostoProduct(props: {
               {tag}
             </span>
           ))}
-        {tagging?.ratingValue && (
-          <span className="rating_value">{tagging.ratingValue}</span>
-        )}
-        {tagging?.reviewCount && (
-          <span className="review_count">{tagging.reviewCount}</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}>
@@ -158,17 +120,11 @@ export default function NostoProduct(props: {
               {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?.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?.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?.availability && <span className="availability">{sku.availability}</span>}
               {sku?.customFields &&
                 Object.keys(sku.customFields).map(
                   (field, index) =>
@@ -183,5 +139,5 @@ export default function NostoProduct(props: {
           ))}
       </div>
     </>
-  );
+  )
 }

package/src/components/NostoProvider.tsx

@@ -0,0 +1,220 @@
+import React, { useEffect, isValidElement, useState, useRef } from "react"
+import { NostoContext } from "./context"
+import { createRoot, Root } from "react-dom/client"
+import { NostoClient, Recommendation } from "../types"
+
+/**
+ * @group Components
+ */
+export interface NostoProviderProps {
+  /**
+   * Indicates merchant id
+   */
+  account: string
+  /**
+   * Indicates currency
+   */
+  currentVariation?: string
+  /**
+   * Indicates an url of a server
+   */
+  host?: string
+  children: React.ReactElement
+  /**
+   * Indicates if merchant uses multiple currencies
+   */
+  multiCurrency?: boolean
+  /**
+   * Recommendation component which holds nostoRecommendation object
+   */
+  recommendationComponent?: React.ReactElement<{
+    nostoRecommendation: Recommendation
+  }>
+  /**
+   * Enables Shopify markets with language and market id
+   */
+  shopifyMarkets?: {
+    language?: string
+    marketId?: string | number
+  }
+}
+
+/**
+ * This widget is what we call the Nosto root widget, which is responsible for adding the actual Nosto script and the JS API stub.
+ * This widget wraps all other React Nosto widgets.
+ *
+ * ```
+ * <NostoProvider account="your-nosto-account-id" recommendationComponent={<NostoSlot />}>
+ *   <App />
+ * </NostoProvider>
+ * ```
+ *
+ * **Note:** the component also accepts a prop to configure the host `host="connect.nosto.com"`.
+ * In advanced use-cases, the need to configure the host may surface.
+ *
+ * In order to implement client-side rendering, the requires a designated component to render the recommendations provided by Nosto.
+ * This component should be capable of processing the JSON response received from our backend.
+ * Notice the `recommendationComponent` prop passed to `<NostoProvider>` above.
+ *
+ * Learn more [here](https://github.com/Nosto/shopify-hydrogen/blob/main/README.md#client-side-rendering-for-recommendations) and see a [live example](https://github.com/Nosto/shopify-hydrogen-demo) on our demo store.
+ *
+ * @group Components
+ */
+export default function NostoProvider(props: NostoProviderProps) {
+  const {
+    account,
+    multiCurrency = false,
+    host,
+    children,
+    recommendationComponent,
+    shopifyMarkets,
+  } = props
+  const [clientScriptLoadedState, setClientScriptLoadedState] = React.useState(false)
+  const clientScriptLoaded = React.useMemo(() => clientScriptLoadedState, [clientScriptLoadedState])
+
+  // Pass currentVariation as empty string if multiCurrency is disabled
+  const currentVariation = multiCurrency ? props.currentVariation : ""
+
+  // Set responseMode for loading campaigns:
+  const responseMode = isValidElement(recommendationComponent) ? "JSON_ORIGINAL" : "HTML"
+
+  // RecommendationComponent for client-side rendering:
+  function RecommendationComponentWrapper(props: { nostoRecommendation: Recommendation }) {
+    return React.cloneElement(recommendationComponent!, {
+      // eslint-disable-next-line react/prop-types
+      nostoRecommendation: props.nostoRecommendation,
+    })
+  }
+
+  // custom hook for rendering campaigns (CSR/SSR):
+  const [pageType, setPageType] = useState("")
+  function useRenderCampaigns(type: string = "") {
+    const placementRefs = useRef<Record<string, Root>>({})
+    useEffect(() => {
+      if (pageType !== type) {
+        setPageType(type)
+      }
+    }, [])
+
+    const pageTypeUpdated = type === pageType
+
+    function renderCampaigns(
+      data: {
+        recommendations: Record<string, Recommendation>
+        campaigns: {
+          recommendations: Record<string, Recommendation>
+        }
+      },
+      api: NostoClient
+    ) {
+      if (responseMode == "HTML") {
+        // inject content campaigns as usual:
+        api.placements.injectCampaigns(data.recommendations)
+      } else {
+        // render recommendation component into placements:
+        const recommendations = data.campaigns.recommendations
+        for (const key in recommendations) {
+          const recommendation = recommendations[key]
+          const placementSelector = "#" + key
+          const placement = () => document.querySelector(placementSelector)
+
+          if (placement()) {
+            if (!placementRefs.current[key]) placementRefs.current[key] = createRoot(placement()!)
+            const root = placementRefs.current[key]!
+            root.render(
+              <RecommendationComponentWrapper
+                nostoRecommendation={recommendation}
+              ></RecommendationComponentWrapper>
+            )
+          }
+        }
+      }
+    }
+    return { renderCampaigns, pageTypeUpdated }
+  }
+
+  useEffect(() => {
+    if (!window.nostojs) {
+      window.nostojs = (cb: (api: NostoClient) => void) => {
+        (window.nostojs.q = window.nostojs.q || []).push(cb)
+      }
+      window.nostojs(api => api.setAutoLoad(false))
+    }
+
+    if (!document.querySelectorAll("[nosto-client-script]").length && !shopifyMarkets) {
+      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 = () => {
+        if (typeof jest !== "undefined") {
+          window.nosto?.reload({
+            site: "localhost",
+          })
+        }
+        setClientScriptLoadedState(true)
+      }
+      document.body.appendChild(script)
+    }
+
+    // Enable Shopify markets functionality:
+    if (shopifyMarkets) {
+      const existingScript = document.querySelector("[nosto-client-script]")
+      const nostoSandbox = document.querySelector("#nosto-sandbox")
+
+      if (
+        !existingScript ||
+        existingScript?.getAttribute("nosto-language") !== shopifyMarkets?.language ||
+        existingScript?.getAttribute("nosto-market-id") !== shopifyMarkets?.marketId
+      ) {
+        if (clientScriptLoadedState) {
+          setClientScriptLoadedState(false)
+        }
+
+        existingScript?.parentNode?.removeChild(existingScript)
+        nostoSandbox?.parentNode?.removeChild(nostoSandbox)
+
+        const script = document.createElement("script")
+        script.type = "text/javascript"
+        script.src =
+          "//" +
+          (host || "connect.nosto.com") +
+          `/script/shopify/market/nosto.js?merchant=${account}&market=${
+            shopifyMarkets.marketId || ""
+          }&locale=${shopifyMarkets?.language?.toLowerCase() || ""}`
+        script.async = true
+        script.setAttribute("nosto-client-script", "")
+        script.setAttribute("nosto-language", shopifyMarkets?.language || "")
+        script.setAttribute("nosto-market-id", String(shopifyMarkets?.marketId))
+
+        script.onload = () => {
+          if (typeof jest !== "undefined") {
+            window.nosto?.reload({
+              site: "localhost",
+            })
+          }
+          setClientScriptLoadedState(true)
+        }
+        document.body.appendChild(script)
+      }
+    }
+  }, [clientScriptLoadedState, shopifyMarkets])
+
+  return (
+    <NostoContext.Provider
+      value={{
+        account,
+        clientScriptLoaded,
+        currentVariation,
+        responseMode,
+        recommendationComponent,
+        useRenderCampaigns,
+        pageType,
+      }}
+    >
+      {children}
+    </NostoContext.Provider>
+  )
+}

package/src/components/{Search/index.client.tsx → NostoSearch.tsx}

@@ -1,5 +1,5 @@
-import { useEffect } from "react";
-import { useNostoContext } from "../Provider/context.client";
+import { useNostoContext } from "./context"
+import { useNostoApi } from "../utils/hooks"
 
 /**
  * You can personalise your search pages by using the NostoSearch component.
@@ -22,45 +22,24 @@ import { useNostoContext } from "../Provider/context.client";
  * A query for `black shoes` must be provided as-is and not as `black+shoes`.
  * Doing so will lead to invalid results.
  *
- * @group Personalisation Components
+ * @group Components
  */
-export default function NostoSearch(props: {
-  query: string,
-  placements?: string[];
-}): JSX.Element {
-  const { query } = props;
-  const {
-    clientScriptLoaded,
-    currentVariation,
-    responseMode,
-    recommendationComponent,
-    useRenderCampaigns,
-  } = useNostoContext();
+export default function NostoSearch(props: { query: string; placements?: string[] }) {
+  const { query, placements } = props
+  const { recommendationComponent, useRenderCampaigns } = useNostoContext()
 
-  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("search");
+  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("search")
 
-  useEffect(() => {
-    if (clientScriptLoaded && pageTypeUpdated) {
-      window.nostojs((api) => {
-        api
-          .defaultSession()
-          .setVariation(currentVariation)
-          .setResponseMode(responseMode)
-          .viewSearch(query)
-          .setPlacements(props.placements || api.placements.getPlacements())
-          .load()
-          .then((data) => {
-            renderCampaigns(data, api);
-          });
-      });
-    }
-  }, [
-    clientScriptLoaded,
-    currentVariation,
-    query,
-    recommendationComponent,
-    pageTypeUpdated,
-  ]);
+  useNostoApi(
+    async (api) => {
+      const data = await api.defaultSession()
+        .viewSearch(query)
+        .setPlacements(placements || api.placements.getPlacements())
+        .load()
+      renderCampaigns(data, api)
+    },
+    [query, recommendationComponent, pageTypeUpdated]
+  )
 
   return (
     <>
@@ -71,5 +50,5 @@ export default function NostoSearch(props: {
         {query}
       </div>
     </>
-  );
+  )
 }

package/src/components/{Session/index.client.tsx → NostoSession.tsx}

@@ -1,7 +1,7 @@
-import { useNostoContext } from "../Provider/context.client";
-import { Cart, Customer } from "../../types";
-import { snakeize } from "../../utils/snakeize";
-import { useDeepCompareEffect } from "../../utils/hooks";
+import { useNostoContext } from "./context"
+import { Cart, Customer } from "../types"
+import { snakeize } from "../utils/snakeize"
+import { useDeepCompareEffect } from "../utils/hooks"
 
 /**
  * Nosto React requires that you pass it the details of current cart contents and the details of the currently logged-in customer, if any, on every route change.
@@ -13,29 +13,26 @@ import { useDeepCompareEffect } from "../../utils/hooks";
  *
  * @group Essential Functions
  */
-export default function NostoSession(props: {
-  cart: Cart;
-  customer: Customer;
-}): JSX.Element {
-  const { cart, customer } = props;
-  const { clientScriptLoaded } = useNostoContext();
+export default function NostoSession(props: { cart: Cart; customer: Customer }) {
+  const { cart, customer } = props
+  const { clientScriptLoaded } = useNostoContext()
 
   useDeepCompareEffect(() => {
-    const currentCart = cart ? snakeize(cart) : undefined;
-    const currentCustomer = customer ? snakeize(customer) : undefined;
+    const currentCart = cart ? snakeize(cart) : undefined
+    const currentCustomer = customer ? snakeize(customer) : undefined
 
     if (clientScriptLoaded) {
-      window.nostojs((api) => {
+      window.nostojs(api => {
         api
           .defaultSession()
           .setResponseMode("HTML")
           .setCart(currentCart)
           .setCustomer(currentCustomer)
           .viewOther()
-          .load();
-      });
+          .load()
+      })
     }
-  }, [clientScriptLoaded, cart, customer]);
+  }, [clientScriptLoaded, cart, customer])
 
-  return <></>;
+  return <></>
 }

package/src/components/context.ts

@@ -0,0 +1,55 @@
+import { createContext, useContext } from "react"
+import { NostoClient, Recommendation } from "../types"
+
+type AnyFunction = (...args: unknown[]) => unknown
+
+/**
+ * @group Types
+ */
+export interface NostoContextType {
+  account: string
+  clientScriptLoaded: boolean
+  currentVariation?: string
+  renderFunction?: AnyFunction
+  responseMode: string
+  recommendationComponent?: React.ReactElement<{
+    nostoRecommendation: Recommendation
+  }>
+  useRenderCampaigns(type: string): {
+    renderCampaigns(data: unknown, api: NostoClient): void
+    pageTypeUpdated: boolean
+  }
+  pageType: string
+}
+
+/**
+ * @group Essential Functions
+ */
+export const NostoContext = createContext<NostoContextType>({
+  account: "",
+  currentVariation: "",
+  pageType: "",
+  responseMode: "HTML",
+  clientScriptLoaded: false,
+  useRenderCampaigns: () => {
+    return {
+      renderCampaigns: () => {},
+      pageTypeUpdated: false,
+    }
+  },
+})
+
+/**
+ * A hook that allows you to access the NostoContext and retrieve Nosto-related data from it in React components.
+ *
+ * @group Essential Functions
+ */
+export function useNostoContext(): NostoContextType {
+  const context = useContext(NostoContext)
+
+  if (!context) {
+    throw new Error("No nosto context found")
+  }
+
+  return context
+}

package/src/components/index.ts

@@ -0,0 +1,14 @@
+export { default as Nosto404 } from "./Nosto404"
+export { default as NostoOther } from "./NostoOther"
+export { default as NostoCheckout } from "./NostoCheckout"
+export { default as NostoProduct } from "./NostoProduct"
+export { default as NostoCategory } from "./NostoCategory"
+export { default as NostoSearch } from "./NostoSearch"
+export { default as NostoOrder } from "./NostoOrder"
+export { default as NostoHome } from "./NostoHome"
+export { default as NostoPlacement } from "./NostoPlacement"
+export { default as NostoProvider } from "./NostoProvider"
+
+export { NostoContext, useNostoContext } from "./context"
+export type { NostoContextType } from "./context"
+export { default as NostoSession } from "./NostoSession"

package/src/index.ts

@@ -0,0 +1,3 @@
+export type { Buyer, Cart, Customer, Item, Product, Purchase, Recommendation, SKU } from "./types"
+
+export * from "./components"