@nosto/nosto-react 2.2.0 → 2.2.2

package/src/hooks/useNosto404.tsx

@@ -0,0 +1,25 @@
+import { useNostoApi } from "./useNostoApi"
+import { useRenderCampaigns } from "./useRenderCampaigns"
+
+/**
+ * @group Hooks
+ */
+export type Nosto404Props = { placements?: string[] }
+
+/**
+ * You can personalise your cart and checkout pages by using the `useNosto404` hook.
+ *
+ * @group Hooks
+ */
+export function useNosto404(props?: Nosto404Props) {
+  const { renderCampaigns } = useRenderCampaigns()
+
+  useNostoApi(async api => {
+    const data = await api
+      .defaultSession()
+      .viewNotFound()
+      .setPlacements(props?.placements || api.placements.getPlacements())
+      .load()
+    renderCampaigns(data)
+  })
+}

package/src/hooks/useNostoApi.ts

@@ -3,20 +3,13 @@ import { useNostoContext } from "./useNostoContext"
 import { NostoClient } from "../types"
 import { useDeepCompareEffect } from "./useDeepCompareEffect"
 
-export function useNostoApi(
-  cb: (api: NostoClient) => void,
-  deps?: DependencyList,
-  flags?: { deep?: boolean }
-): void {
-  const { clientScriptLoaded, currentVariation, responseMode } = useNostoContext()
+export function useNostoApi(cb: (api: NostoClient) => void, deps?: DependencyList, flags?: { deep?: boolean }): void {
+  const { clientScriptLoaded } = useNostoContext()
   const useEffectFn = flags?.deep ? useDeepCompareEffect : useEffect
 
   useEffectFn(() => {
     if (clientScriptLoaded) {
-      window.nostojs(api => {
-        api.defaultSession().setVariation(currentVariation!).setResponseMode(responseMode)
-        cb(api)
-      })
+      window.nostojs(cb)
     }
-  }, [clientScriptLoaded, currentVariation, responseMode, ...(deps ?? [])])
+  }, [clientScriptLoaded, ...(deps ?? [])])
 }

package/src/hooks/useNostoCategory.tsx

@@ -0,0 +1,31 @@
+import { useNostoApi } from "./useNostoApi"
+import { useRenderCampaigns } from "./useRenderCampaigns"
+
+/**
+ * @group Hooks
+ */
+export type NostoCategoryProps = {
+  category: string
+  placements?: string[]
+}
+
+/**
+ * You can personalise your category and collection pages by using the useNostoCategory hook.
+ *
+ * @group Hooks
+ */
+export function useNostoCategory({ category, placements }: NostoCategoryProps) {
+  const { renderCampaigns } = useRenderCampaigns()
+
+  useNostoApi(
+    async api => {
+      const data = await api
+        .defaultSession()
+        .viewCategory(category)
+        .setPlacements(placements || api.placements.getPlacements())
+        .load()
+      renderCampaigns(data)
+    },
+    [category]
+  )
+}

package/src/hooks/useNostoCheckout.tsx

@@ -0,0 +1,25 @@
+import { useNostoApi } from "./useNostoApi"
+import { useRenderCampaigns } from "./useRenderCampaigns"
+
+/**
+ * @group Hooks
+ */
+export type NostoCheckoutProps = { placements?: string[] }
+
+/**
+ * You can personalise your cart and checkout pages by using the useNostoCheckout hook.
+ *
+ * @group Hooks
+ */
+export function useNostoCheckout(props?: NostoCheckoutProps) {
+  const { renderCampaigns } = useRenderCampaigns()
+
+  useNostoApi(async api => {
+    const data = await api
+      .defaultSession()
+      .viewCart()
+      .setPlacements(props?.placements || api.placements.getPlacements())
+      .load()
+    renderCampaigns(data)
+  })
+}

package/src/hooks/useNostoContext.ts

@@ -7,6 +7,5 @@ import { NostoContext, NostoContextType } from "../context"
  * @group Essential Functions
  */
 export function useNostoContext(): NostoContextType {
-    return useContext(NostoContext)
-  }
-  
+  return useContext(NostoContext)
+}

package/src/hooks/useNostoHome.tsx

@@ -0,0 +1,25 @@
+import { useNostoApi } from "./useNostoApi"
+import { useRenderCampaigns } from "./useRenderCampaigns"
+
+/**
+ * @group Hooks
+ */
+export type NostoHomeProps = { placements?: string[] }
+
+/**
+ * You can personalise your home page by using the useNostoHome hook.
+ *
+ * @group Hooks
+ */
+export function useNostoHome(props?: NostoHomeProps) {
+  const { renderCampaigns } = useRenderCampaigns()
+
+  useNostoApi(async api => {
+    const data = await api
+      .defaultSession()
+      .viewFrontPage()
+      .setPlacements(props?.placements || api.placements.getPlacements())
+      .load()
+    renderCampaigns(data)
+  })
+}

package/src/hooks/useNostoOrder.tsx

@@ -0,0 +1,35 @@
+import { snakeize } from "../utils/snakeize"
+import { Order } from "../types"
+import { useRenderCampaigns } from "./useRenderCampaigns"
+import { useNostoApi } from "./useNostoApi"
+import { ToCamelCase } from "../utils/types"
+
+/**
+ * @group Hooks
+ */
+export type NostoOrderProps = {
+  order: Order | ToCamelCase<Order>
+  placements?: string[]
+}
+
+/**
+ * You can personalise your order-confirmation/thank-you page by using the `useNostoOrder` hook.
+ *
+ * @group Hooks
+ */
+export function useNostoOrder({ order, placements }: NostoOrderProps) {
+  const { renderCampaigns } = useRenderCampaigns()
+
+  useNostoApi(
+    async api => {
+      const data = await api
+        .defaultSession()
+        .addOrder(snakeize(order))
+        .setPlacements(placements || api.placements.getPlacements())
+        .load()
+      renderCampaigns(data)
+    },
+    [order],
+    { deep: true }
+  )
+}

package/src/hooks/useNostoOther.tsx

@@ -0,0 +1,25 @@
+import { useNostoApi } from "./useNostoApi"
+import { useRenderCampaigns } from "./useRenderCampaigns"
+
+/**
+ * @group Hooks
+ */
+export type NostoOtherProps = { placements?: string[] }
+
+/**
+ * You can personalise your miscellaneous pages by using the useNostoOther hook.
+ *
+ * @group Hooks
+ */
+export function useNostoOther(props?: NostoOtherProps) {
+  const { renderCampaigns } = useRenderCampaigns()
+
+  useNostoApi(async api => {
+    const data = await api
+      .defaultSession()
+      .viewOther()
+      .setPlacements(props?.placements || api.placements.getPlacements())
+      .load()
+    renderCampaigns(data)
+  })
+}

package/src/hooks/useNostoProduct.tsx

@@ -0,0 +1,37 @@
+import { Product } from "../types"
+import { useNostoApi } from "./useNostoApi"
+import { useRenderCampaigns } from "./useRenderCampaigns"
+
+/**
+ * @group Hooks
+ */
+export type NostoProductProps = {
+  product: string
+  tagging?: Product
+  placements?: string[]
+}
+
+/**
+ * You can personalise your product pages by using the useNostoProduct hook.
+ *
+ * @group Hooks
+ */
+export function useNostoProduct({ product, tagging, placements }: NostoProductProps) {
+  const { renderCampaigns } = useRenderCampaigns()
+
+  if (tagging && !tagging.product_id) {
+    throw new Error("The product object must contain a product_id property")
+  }
+
+  useNostoApi(
+    async api => {
+      const data = await api
+        .defaultSession()
+        .viewProduct(tagging ?? product)
+        .setPlacements(placements || api.placements.getPlacements())
+        .load()
+      renderCampaigns(data)
+    },
+    [product, tagging?.selected_sku_id]
+  )
+}

package/src/hooks/useNostoSearch.tsx

@@ -0,0 +1,31 @@
+import { useNostoApi } from "./useNostoApi"
+import { useRenderCampaigns } from "./useRenderCampaigns"
+
+/**
+ * @group Components
+ */
+export type NostoSearchProps = {
+  query: string
+  placements?: string[]
+}
+
+/**
+ * You can personalise your search pages by using the useNostoSearch hook.
+ *
+ * @group Hooks
+ */
+export function useNostoSearch({ query, placements }: NostoSearchProps) {
+  const { renderCampaigns } = useRenderCampaigns()
+
+  useNostoApi(
+    async api => {
+      const data = await api
+        .defaultSession()
+        .viewSearch(query)
+        .setPlacements(placements || api.placements.getPlacements())
+        .load()
+      renderCampaigns(data)
+    },
+    [query]
+  )
+}

package/src/hooks/useNostoSession.tsx

@@ -0,0 +1,33 @@
+import { snakeize } from "../utils/snakeize"
+import { Cart as CartSnakeCase, Customer as CustomerSnakeCase } from "../types"
+import { ToCamelCase } from "../utils/types"
+import { useNostoContext } from "./useNostoContext"
+import { useDeepCompareEffect } from "./useDeepCompareEffect"
+
+/**
+ * @group Hooks
+ */
+export type NostoSessionProps = {
+  cart?: CartSnakeCase | ToCamelCase<CartSnakeCase>
+  customer?: CustomerSnakeCase | ToCamelCase<CustomerSnakeCase>
+}
+
+/**
+ * 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.
+ *
+ * @group Hooks
+ */
+export function useNostoSession({ cart, customer }: NostoSessionProps = {}) {
+  const { clientScriptLoaded } = useNostoContext()
+
+  useDeepCompareEffect(() => {
+    const currentCart = cart ? snakeize(cart) : undefined
+    const currentCustomer = customer ? snakeize(customer) : undefined
+
+    if (clientScriptLoaded) {
+      window.nostojs(api => {
+        api.defaultSession().setCart(currentCart).setCustomer(currentCustomer).viewOther().load({ skipPageViews: true })
+      })
+    }
+  }, [clientScriptLoaded, cart, customer])
+}

package/src/hooks/useRenderCampaigns.tsx

@@ -4,18 +4,20 @@ import { ActionResponse, Recommendation } from "../types"
 import { useNostoContext } from "./useNostoContext"
 import { RecommendationComponent } from "../context"
 
-// RecommendationComponent for client-side rendering:
-function RecommendationComponentWrapper(props: { 
-    recommendationComponent: RecommendationComponent,
-    nostoRecommendation: Recommendation }) {
+type CampaignData = Pick<ActionResponse, "campaigns" | "recommendations">
 
+// RecommendationComponent for client-side rendering:
+function RecommendationComponentWrapper(props: {
+  recommendationComponent: RecommendationComponent
+  nostoRecommendation: Recommendation
+}) {
   return cloneElement(props.recommendationComponent, {
     // eslint-disable-next-line react/prop-types
-    nostoRecommendation: props.nostoRecommendation,
+    nostoRecommendation: props.nostoRecommendation
   })
 }
 
-function injectCampaigns(data: ActionResponse) {
+function injectCampaigns(data: CampaignData) {
   if (!window.nostojs) {
     throw new Error("Nosto has not yet been initialized")
   }
@@ -32,7 +34,7 @@ export function useRenderCampaigns() {
     return { renderCampaigns: injectCampaigns }
   }
 
-  function renderCampaigns(data: ActionResponse) {
+  function renderCampaigns(data: CampaignData) {
     // render recommendation component into placements:
     const recommendations = data.campaigns?.recommendations ?? {}
     for (const key in recommendations) {
@@ -56,4 +58,4 @@ export function useRenderCampaigns() {
   }
 
   return { renderCampaigns }
-}
+}

package/src/index.ts

@@ -1,5 +1,24 @@
 export type { Cart, Customer, Product, Order, Recommendation } from "./types"
-export * from "./components"
 export { type ScriptLoadOptions } from "./hooks/scriptLoader"
 export { NostoContext, type NostoContextType } from "./context"
-export { useNostoContext } from "./hooks/useNostoContext"
+export { useNostoContext } from "./hooks/useNostoContext"
+export * from "./components/Nosto404"
+export * from "./components/NostoCategory"
+export * from "./components/NostoCheckout"
+export * from "./components/NostoHome"
+export * from "./components/NostoOrder"
+export * from "./components/NostoOther"
+export * from "./components/NostoPlacement"
+export * from "./components/NostoProduct"
+export * from "./components/NostoProvider"
+export * from "./components/NostoSearch"
+export * from "./components/NostoSession"
+export * from "./hooks/useNosto404"
+export * from "./hooks/useNostoCategory"
+export * from "./hooks/useNostoCheckout"
+export * from "./hooks/useNostoHome"
+export * from "./hooks/useNostoOrder"
+export * from "./hooks/useNostoOther"
+export * from "./hooks/useNostoProduct"
+export * from "./hooks/useNostoSearch"
+export * from "./hooks/useNostoSession"