Fix nosto-js-sdk usage

package.json

@@ -31,6 +31,8 @@
     "src"
   ],
   "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "@nosto/nosto-js": "*"
   },
   "devDependencies": {
@@ -47,8 +49,6 @@
     "eslint-plugin-promise": "^7.1.0",
     "eslint-plugin-react": "^7.33.2",
     "prettier": "^3.3.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "react-router": "^6.25.1",
     "react-router-dom": "^6.25.1",
     "rimraf": "^6.0.1",
@@ -65,8 +65,7 @@
     ".": {
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.js"
-    },
-    "./shopify-hydrogen": "./dist/index.es.js"
+    }
   },
   "bugs": {
     "url": "https://github.com/Nosto/nosto-react/issues"

spec/mocks/mock-api.ts

@@ -1,18 +1,18 @@
 import { vi } from "vitest"
 import { jsonMockData } from "./mock-data"
 import { Product } from "../../src"
-import { API, Session, Action, PageType, Data } from "@nosto/nosto-js/client"
+import { API, Session, Action, PageType, TaggingData } from "@nosto/nosto-js/client"
 
 function normalizeProduct(data: Product | string) {
   return typeof data === "string" ? { product_id: data } : data
 }
 
-let latestActionData: Partial<Data>
+let latestActionData: Partial<TaggingData>
 
 function newSession(placements: string[]) {
-  const data: Partial<Data> & { responseMode?: string} = {}
+  const data: Partial<TaggingData> & { responseMode?: string} = {}
 
-  function newAction(pageType: PageType, overrides?: Partial<Data>) {
+  function newAction(pageType: PageType, overrides?: Partial<TaggingData>) {
     const actionData = { ...data, ...overrides,  pageType }
     latestActionData = actionData
 

spec/useLoadClientScript.spec.tsx

@@ -3,7 +3,8 @@ import { renderHook } from "@testing-library/react"
 import { useLoadClientScript } from "../src/hooks/useLoadClientScript"
 import scriptLoader from "../src/hooks/scriptLoader"
 import "@testing-library/jest-dom/vitest"
-import { getNostoWindow, isNostoLoaded, reloadNosto } from "@nosto/nosto-js"
+import { nostojs, getNostoWindow, isNostoLoaded } from "@nosto/nosto-js"
+import { reloadNosto } from "@nosto/nosto-js/testing"
 
 function loadClientScript(merchant: string) {
   const script = document.createElement("script")
@@ -30,7 +31,7 @@ describe("useLoadClientScript", () => {
 
   it("loads client script", async () => {
     const hook = renderHook(() => useLoadClientScript({ account: testAccount }))
-    await new Promise(window.nostojs)
+    await new Promise(nostojs)
 
     hook.rerender()
     expect(hook.result.current.clientScriptLoaded).toBe(true)
@@ -41,7 +42,7 @@ describe("useLoadClientScript", () => {
   it("support custom script loaders", async () => {
     const customScriptLoader = vi.fn(scriptLoader)
     const hook = renderHook(() => useLoadClientScript({ account: testAccount, scriptLoader: customScriptLoader }))
-    await new Promise(window.nostojs)
+    await new Promise(nostojs)
 
     hook.rerender()
     expect(customScriptLoader).toHaveBeenLastCalledWith(`https://connect.nosto.com/include/${testAccount}`, {
@@ -63,7 +64,7 @@ describe("useLoadClientScript", () => {
 
   it("set loaded state to true when client is loaded externally before", async () => {
     await loadClientScript(testAccount)
-    expect(window.nosto).toBeDefined()
+    expect(isNostoLoaded()).toBeTruthy()
 
     const { result } = renderHook(() => useLoadClientScript({ loadScript: false, account: testAccount }))
     expect(result.current.clientScriptLoaded).toBe(true)

src/hooks/useLoadClientScript.ts

@@ -1,7 +1,8 @@
 import { useState, useEffect } from "react"
 import type { NostoProviderProps } from "../components/NostoProvider"
 import scriptLoaderFn from "./scriptLoader"
-import { init, initNostoStub, isNostoLoaded, nostojs, reloadNosto } from "@nosto/nosto-js"
+import { init, initNostoStub, isNostoLoaded, nostojs } from "@nosto/nosto-js"
+import { reloadNosto } from "@nosto/nosto-js/testing"
 
 type NostoScriptProps = Pick<NostoProviderProps, "account" | "host" | "shopifyMarkets" | "loadScript" | "scriptLoader">
 

src/hooks/useNostoOrder.tsx

@@ -1,8 +1,8 @@
 import { snakeize } from "../utils/snakeize"
-import { Order } from "../types"
 import { useRenderCampaigns } from "./useRenderCampaigns"
 import { useNostoApi } from "./useNostoApi"
 import { ToCamelCase } from "../utils/types"
+import { WebsiteOrder as Order } from "@nosto/nosto-js/client"
 
 /**
  * @group Hooks

src/hooks/useNostoProduct.tsx

@@ -1,6 +1,6 @@
-import { Product } from "../types"
 import { useNostoApi } from "./useNostoApi"
 import { useRenderCampaigns } from "./useRenderCampaigns"
+import { Product } from "@nosto/nosto-js/client"
 
 /**
  * @group Hooks

src/hooks/useNostoSession.tsx

@@ -1,5 +1,5 @@
 import { snakeize } from "../utils/snakeize"
-import { Cart as CartSnakeCase, Customer as CustomerSnakeCase } from ".."
+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"

src/hooks/useRenderCampaigns.tsx

@@ -4,7 +4,7 @@ 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"
+import { nostojs, isNostoLoaded } from "@nosto/nosto-js"
 
 type CampaignData = Pick<ActionResponse, "campaigns" | "recommendations">
 
@@ -20,6 +20,7 @@ function RecommendationComponentWrapper(props: {
 }
 
 function injectCampaigns(data: CampaignData) {
+  // @ts-expect-error not defined
   if (!window.nostojs) {
     throw new Error("Nosto has not yet been initialized")
   }

src/index.ts

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

src/types.ts

@@ -1,16 +1,4 @@
-import type { API, CartItem, ConversionItem, OrderCustomer, PushedProduct } from "@nosto/nosto-js/client"
-
-declare global {
-  interface Window {
-    nosto?: {
-      reload(settings: unknown): void
-    }
-    nostojs: {
-      (callback: (api: API) => void): void
-      q?: unknown[]
-    }
-  }
-}
+import type { PushedProduct } from "@nosto/nosto-js/client"
 
 /**
  * @group Types
@@ -24,24 +12,3 @@ export interface Recommendation {
   source_product_ids: string[]
   params: unknown
 }
-
-/**
- * @group Types
- */
-export interface Order {
-  created_at?: Date
-  external_order_ref: string
-  info?: OrderCustomer
-  items: ConversionItem[]
-  order_status?: string
-  order_status_label?: string
-  payment_provider: string
-}
-
-/**
- * @group Types
- */
-export interface Cart {
-  hcid?: string
-  items: CartItem[]
-}