@nosto/nosto-react 2.2.1 → 2.2.2

package/src/components/Nosto404.tsx

@@ -1,9 +1,4 @@
-import { useNostoApi, useRenderCampaigns } from "../hooks"
-
-/**
- * @group Components
- */
-export type Nosto404Props = { placements?: string[] }
+import { Nosto404Props, useNosto404 } from "../hooks/useNosto404"
 
 /**
  * You can personalise your cart and checkout pages by using the `Nosto404` component.
@@ -25,25 +20,7 @@ export type Nosto404Props = { placements?: string[] }
  *
  * @group Components
  */
-export default function Nosto404(props: Nosto404Props) {
+export function Nosto404(props: Nosto404Props) {
   useNosto404(props)
   return null
 }
-
-/**
- * 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/components/NostoCategory.tsx

@@ -1,12 +1,4 @@
-import { useNostoApi, useRenderCampaigns } from "../hooks"
-
-/**
- * @group Components
- */
-export type NostoCategoryProps = {
-  category: string
-  placements?: string[]
-}
+import { NostoCategoryProps, useNostoCategory } from "../hooks/useNostoCategory"
 
 /**
  * You can personalise your category and collection pages by using the NostoCategory component.
@@ -30,27 +22,7 @@ export type NostoCategoryProps = {
  *
  * @group Components
  */
-export default function NostoCategory(props: NostoCategoryProps) {
+export function NostoCategory(props: NostoCategoryProps) {
   useNostoCategory(props)
   return null
 }
-
-/**
- * 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/components/NostoCheckout.tsx

@@ -1,9 +1,4 @@
-import { useNostoApi, useRenderCampaigns } from "../hooks"
-
-/**
- * @group Components
- */
-export type NostoCheckoutProps = { placements?: string[] }
+import { NostoCheckoutProps, useNostoCheckout } from "../hooks/useNostoCheckout"
 
 /**
  * You can personalise your cart and checkout pages by using the NostoCheckout component.
@@ -24,25 +19,7 @@ export type NostoCheckoutProps = { placements?: string[] }
  *
  * @group Components
  */
-export default function NostoCheckout(props: NostoCheckoutProps) {
+export function NostoCheckout(props: NostoCheckoutProps) {
   useNostoCheckout(props)
   return null
 }
-
-/**
- * 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/components/NostoHome.tsx

@@ -1,9 +1,4 @@
-import { useRenderCampaigns, useNostoApi } from "../hooks"
-
-/**
- * @group Components
- */
-export type NostoHomeProps = { placements?: string[] }
+import { NostoHomeProps, useNostoHome } from "../hooks/useNostoHome"
 
 /**
  * The `NostoHome` component must be used to personalise the home page. The component does not require any props.
@@ -28,26 +23,7 @@ export type NostoHomeProps = { placements?: string[] }
  *
  * @group Components
  */
-export default function NostoHome(props: NostoHomeProps) {
+export function NostoHome(props: NostoHomeProps) {
   useNostoHome(props)
   return null
 }
-
-/**
- * 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/components/NostoOrder.tsx

@@ -1,14 +1,4 @@
-import { Order } from "../types"
-import { useRenderCampaigns, useNostoApi } from "../hooks"
-import { snakeize } from "../utils/snakeize"
-
-/**
- * @group Components
- */
-export type NostoOrderProps = { 
-  order: Order
-  placements?: string[]
-}
+import { NostoOrderProps, useNostoOrder } from "../hooks/useNostoOrder"
 
 /**
  * You can personalise your order-confirmation/thank-you page by using the `NostoOrder` component.
@@ -29,28 +19,7 @@ export type NostoOrderProps = {
  *
  * @group Components
  */
-export default function NostoOrder(props: NostoOrderProps) {
+export function NostoOrder(props: NostoOrderProps) {
   useNostoOrder(props)
   return null
 }
-
-/**
- * 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/components/NostoOther.tsx

@@ -1,9 +1,4 @@
-import { useRenderCampaigns, useNostoApi } from "../hooks"
-
-/**
- * @group Components
- */
-export type NostoOtherProps = { placements?: string[] }
+import { NostoOtherProps, useNostoOther } from "../hooks/useNostoOther"
 
 /**
  * You can personalise your miscellaneous pages by using the NostoOther component.
@@ -24,25 +19,7 @@ export type NostoOtherProps = { placements?: string[] }
  *
  * @group Components
  */
-export default function NostoOther(props: NostoOtherProps) {
+export function NostoOther(props: NostoOtherProps) {
   useNostoOther(props)
   return null
 }
-
-/**
- * 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/components/NostoPlacement.tsx

@@ -16,6 +16,6 @@ export type NostoPlacementProps = { id: string; pageType?: string }
  *
  * @group Components
  */
-export default function NostoPlacement({ id, pageType }: NostoPlacementProps) {
+export function NostoPlacement({ id, pageType }: NostoPlacementProps) {
   return <div className="nosto_element" id={id} key={id + (pageType || "")} />
 }

package/src/components/NostoProduct.tsx

@@ -1,14 +1,4 @@
-import { useRenderCampaigns, useNostoApi } from "../hooks"
-import { Product } from "../types"
-
-/**
- * @group Components
- */
-export type NostoProductProps = {
-  product: string
-  tagging?: Product
-  placements?: string[]
-}
+import { NostoProductProps, useNostoProduct } from "../hooks/useNostoProduct"
 
 /**
  * The NostoProduct component must be used to personalise the product page.
@@ -34,27 +24,7 @@ export type NostoProductProps = {
  *
  * @group Components
  */
-export default function NostoProduct(props: NostoProductProps) {
+export function NostoProduct(props: NostoProductProps) {
   useNostoProduct(props)
   return null
 }
-
-/**
- * You can personalise your product pages by using the useNostoProduct hook.
- * 
- * @group Hooks
- */
-export function useNostoProduct({ product, tagging, placements }: NostoProductProps) {
-  const { renderCampaigns } = useRenderCampaigns()
-
-  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/components/NostoProvider.tsx

@@ -1,8 +1,8 @@
 import { isValidElement } from "react"
 import { NostoContext, RecommendationComponent } from "../context"
-import { useLoadClientScript } from "../hooks"
 import type { ReactNode } from "react"
 import { ScriptLoadOptions } from "../hooks/scriptLoader"
+import { useLoadClientScript } from "../hooks/useLoadClientScript"
 
 /**
  * @group Components
@@ -70,13 +70,8 @@ export interface NostoProviderProps {
  *
  * @group Components
  */
-export default function NostoProvider(props: NostoProviderProps) {
-  const {
-    account,
-    multiCurrency = false,
-    children,
-    recommendationComponent,
-  } = props
+export function NostoProvider(props: NostoProviderProps) {
+  const { account, multiCurrency = false, children, recommendationComponent } = props
 
   // Pass currentVariation as empty string if multiCurrency is disabled
   const currentVariation = multiCurrency ? props.currentVariation : ""

package/src/components/NostoSearch.tsx

@@ -1,12 +1,4 @@
-import { useRenderCampaigns, useNostoApi } from "../hooks"
-
-/**
- * @group Components
- */
-export type NostoSearchProps = {
-  query: string
-  placements?: string[]
-}
+import { NostoSearchProps, useNostoSearch } from "../hooks/useNostoSearch"
 
 /**
  * You can personalise your search pages by using the NostoSearch component.
@@ -31,27 +23,7 @@ export type NostoSearchProps = {
  *
  * @group Components
  */
-export default function NostoSearch(props: NostoSearchProps) {
+export function NostoSearch(props: NostoSearchProps) {
   useNostoSearch(props)
   return null
 }
-
-/**
- * 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/components/NostoSession.tsx

@@ -1,18 +1,4 @@
-import { useNostoContext, useDeepCompareEffect } from "../hooks"
-import { Cart as CartSnakeCase, Customer as CustomerSnakeCase } from "../types"
-import { snakeize } from "../utils/snakeize"
-import { ToCamelCase } from "../utils/types"
-
-type Cart = CartSnakeCase | ToCamelCase<CartSnakeCase>
-type Customer = CustomerSnakeCase | ToCamelCase<CustomerSnakeCase>
-
-/**
- * @group Components
- */
-export type NostoSessionProps = {
-  cart?: Cart
-  customer?: Customer
-}
+import { NostoSessionProps, useNostoSession } from "../hooks/useNostoSession"
 
 /**
  * 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.
@@ -24,33 +10,7 @@ export type NostoSessionProps = {
  *
  * @group Components
  */
-export default function NostoSession(props?: NostoSessionProps) {
+export function NostoSession(props?: NostoSessionProps) {
   useNostoSession(props)
   return null
 }
-
-/**
- * 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/components/helpers.ts

@@ -1,3 +1,3 @@
 export function isNostoLoaded() {
-  return typeof window.nosto !== "undefined"    
-}
+  return typeof window.nosto !== "undefined"
+}

package/src/context.ts

@@ -28,4 +28,3 @@ export const NostoContext = createContext<NostoContextType>({
   responseMode: "HTML",
   clientScriptLoaded: false
 })
-

package/src/hooks/scriptLoader.ts

@@ -8,9 +8,9 @@ export default function scriptLoader(scriptSrc: string, options?: ScriptLoadOpti
     script.onerror = () => reject()
     Object.entries(options?.attributes ?? {}).forEach(([k, v]) => script.setAttribute(k, v))
     if (options?.position === "head") {
-      document.head.appendChild(script)    
+      document.head.appendChild(script)
     } else {
-      document.body.appendChild(script)    
+      document.body.appendChild(script)
     }
   })
 }
@@ -26,5 +26,5 @@ export type ScriptLoadOptions = {
   /**
    * Indicates the attributes of the script element
    */
-  attributes?: Record<string, string>    
-}  
+  attributes?: Record<string, string>
+}

package/src/hooks/useDeepCompareEffect.ts

@@ -1,10 +1,7 @@
 import { useEffect, useRef, useMemo, type EffectCallback, type DependencyList } from "react"
 import { deepCompare } from "../utils/compare"
 
-export function useDeepCompareEffect(
-  callback: EffectCallback,
-  dependencies: DependencyList
-) {
+export function useDeepCompareEffect(callback: EffectCallback, dependencies: DependencyList) {
   return useEffect(callback, useDeepCompareMemoize(dependencies))
 }
 

package/src/hooks/useLoadClientScript.ts

@@ -7,7 +7,13 @@ import scriptLoaderFn from "./scriptLoader"
 type NostoScriptProps = Pick<NostoProviderProps, "account" | "host" | "shopifyMarkets" | "loadScript" | "scriptLoader">
 
 export function useLoadClientScript(props: NostoScriptProps) {
-  const { host = "connect.nosto.com", scriptLoader = scriptLoaderFn, account, shopifyMarkets, loadScript = true } = props
+  const {
+    host = "connect.nosto.com",
+    scriptLoader = scriptLoaderFn,
+    account,
+    shopifyMarkets,
+    loadScript = true
+  } = props
   const [clientScriptLoaded, setClientScriptLoaded] = useState(false)
 
   useEffect(() => {
@@ -49,8 +55,7 @@ export function useLoadClientScript(props: NostoScriptProps) {
         existingScript?.parentNode?.removeChild(existingScript)
         nostoSandbox?.parentNode?.removeChild(nostoSandbox)
 
-        const urlPartial =
-          `/script/shopify/market/nosto.js?merchant=${account}&market=${marketId}&locale=${language.toLowerCase()}`
+        const urlPartial = `/script/shopify/market/nosto.js?merchant=${account}&market=${marketId}&locale=${language.toLowerCase()}`
         injectScriptElement(urlPartial, { "nosto-language": language, "nosto-market-id": marketId })
       }
     }
@@ -81,4 +86,4 @@ export function useLoadClientScript(props: NostoScriptProps) {
   }, [shopifyMarkets?.marketId, shopifyMarkets?.language])
 
   return { clientScriptLoaded }
-}
+}

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,11 +3,7 @@ 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 {
+export function useNostoApi(cb: (api: NostoClient) => void, deps?: DependencyList, flags?: { deep?: boolean }): void {
   const { clientScriptLoaded } = useNostoContext()
   const useEffectFn = flags?.deep ? useDeepCompareEffect : useEffect
 

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 }
+  )
+}