@nosto/nosto-react 2.2.1 → 2.3.0

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 { useRenderCampaigns } from "./useRenderCampaigns"
+import { useNostoApi } from "./useNostoApi"
+import { ToCamelCase } from "../utils/types"
+import { WebsiteOrder as Order } from "@nosto/nosto-js/client"
+
+/**
+ * @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,43 @@
+import { useNostoApi } from "./useNostoApi"
+import { useRenderCampaigns } from "./useRenderCampaigns"
+import { Product } from "@nosto/nosto-js/client"
+
+/**
+ * @group Hooks
+ */
+export type NostoProductProps = {
+  product: string
+  reference?: string
+  tagging?: Product
+  placements?: string[]
+}
+
+/**
+ * You can personalise your product pages by using the useNostoProduct hook.
+ *
+ * @group Hooks
+ */
+export function useNostoProduct({ product, tagging, placements, reference }: NostoProductProps) {
+  const { renderCampaigns } = useRenderCampaigns()
+
+  if (tagging && !tagging.product_id) {
+    throw new Error("The product object must contain a product_id property")
+  }
+
+  const productId = tagging?.product_id ?? product
+
+  useNostoApi(
+    async api => {
+      const action = api
+        .defaultSession()
+        .viewProduct(tagging ?? product)
+        .setPlacements(placements || api.placements.getPlacements())
+      if (reference) {
+        action.setRef(productId, reference)
+      }
+      const data = await action.load()
+      renderCampaigns(data)
+    },
+    [productId, 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,34 @@
+import { snakeize } from "../utils/snakeize"
+import { PushedCustomer as CustomerSnakeCase, Cart as CartSnakeCase } from "@nosto/nosto-js/client"
+import { ToCamelCase } from "../utils/types"
+import { useNostoContext } from "./useNostoContext"
+import { useDeepCompareEffect } from "./useDeepCompareEffect"
+import { nostojs } from "@nosto/nosto-js"
+
+/**
+ * @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) {
+      nostojs(api => {
+        api.defaultSession().setCart(currentCart).setCustomer(currentCustomer).viewOther().load({ skipPageViews: true })
+      })
+    }
+  }, [clientScriptLoaded, cart, customer])
+}

package/src/hooks/useRenderCampaigns.tsx

@@ -1,28 +1,31 @@
 import { cloneElement, useRef } from "react"
 import { createRoot, Root } from "react-dom/client"
-import { ActionResponse, Recommendation } from "../types"
+import { Recommendation } from "../types"
 import { useNostoContext } from "./useNostoContext"
 import { RecommendationComponent } from "../context"
+import { ActionResponse, API } from "@nosto/nosto-js/client"
+import { nostojs } from "@nosto/nosto-js"
 
 type CampaignData = Pick<ActionResponse, "campaigns" | "recommendations">
 
 // RecommendationComponent for client-side rendering:
-function RecommendationComponentWrapper(props: { 
-    recommendationComponent: RecommendationComponent,
-    nostoRecommendation: Recommendation }) {
-
+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: CampaignData) {
+  // @ts-expect-error not defined
   if (!window.nostojs) {
     throw new Error("Nosto has not yet been initialized")
   }
-  window.nostojs(api => {
-    api.placements.injectCampaigns(data.recommendations)
+  nostojs(api => {
+    api.placements.injectCampaigns(data.recommendations as Parameters<API['placements']['injectCampaigns']>[0])
   })
 }
 
@@ -58,4 +61,4 @@ export function useRenderCampaigns() {
   }
 
   return { renderCampaigns }
-}
+}

package/src/index.ts

@@ -1,5 +1,25 @@
-export type { Cart, Customer, Product, Order, Recommendation } from "./types"
-export * from "./components"
+export type { Product, PushedCustomer as Customer, Cart, WebsiteOrder as Order } from "@nosto/nosto-js/client"
+export type { Recommendation } from "./types"
 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"