@nosto/nosto-react 2.2.1 → 2.2.2

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

@@ -7,13 +7,13 @@ import { RecommendationComponent } from "../context"
 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
   })
 }
 
@@ -58,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"