@shopify/shop-minis-react 0.0.0-snapshot.20251219164319 → 0.0.0-snapshot.20251222174301

package/src/hooks/intents/useProductSelection.ts

@@ -0,0 +1,45 @@
+import {
+  useHandleIntent,
+  HandleIntentOptions,
+} from '../../internal/useHandleIntent'
+import {useShopIntents} from '../../internal/useShopIntents'
+
+import type {
+  SelectProductIntentParams,
+  SelectProductIntentResult,
+} from '@shopify/shop-minis-platform'
+
+/**
+ * Hook to request user to select products
+ *
+ * This intent shows a product selection screen where the user can browse
+ * and select one or more products from the Shop catalog.
+ *
+ * @example
+ * const selectProducts = useProductSelection({
+ *   onCancel: () => console.log('User cancelled'),
+ * })
+ *
+ * const result = await selectProducts({
+ *   multiSelect: true,
+ *   maxSelections: 5,
+ *   title: 'Choose your favorites'
+ * })
+ *
+ * if (result) {
+ *   console.log('Selected products:', result.products)
+ * }
+ */
+export const useProductSelection = (
+  options?: HandleIntentOptions<SelectProductIntentResult>
+) => {
+  const intents = useShopIntents()
+  return useHandleIntent(intents.selectProduct, options)
+}
+
+/**
+ * Type helper for the product selection function
+ */
+export type ProductSelectionFunction = (
+  params: SelectProductIntentParams
+) => Promise<SelectProductIntentResult | void>

package/src/hooks/navigation/useNavigateWithTransition.test.ts

@@ -290,29 +290,15 @@ describe('useNavigateWithTransition', () => {
       })
     })
 
-    it('handles navigation to root path using history delta', async () => {
-      // Mock history state with idx
-      const originalHistoryState = window.history.state
-      Object.defineProperty(window.history, 'state', {
-        value: {idx: 3},
-        writable: true,
-        configurable: true,
-      })
-
+    it('handles navigation to root path', async () => {
       const {result} = renderHook(() => useNavigateWithTransition())
 
       await act(async () => {
         result.current('/')
       })
 
-      // Should navigate back using delta based on history index
-      expect(mockNavigate).toHaveBeenCalledWith(-3)
-
-      // Restore original state
-      Object.defineProperty(window.history, 'state', {
-        value: originalHistoryState,
-        writable: true,
-        configurable: true,
+      expect(mockNavigate).toHaveBeenCalledWith('/', {
+        replace: false,
       })
     })
 

package/src/hooks/navigation/useNavigateWithTransition.ts

@@ -38,19 +38,14 @@ export function useNavigateWithTransition(): UseNavigateWithTransitionReturns {
     }
 
     const isSameRoute = to === location.pathname
-    const isNavigatingToHomeRoute = to === '/'
 
     // Path navigation - with options
     if (document.startViewTransition) {
       const transition = document.startViewTransition(() => {
-        if (isNavigatingToHomeRoute) {
-          navigate(-window.history.state.idx)
-        } else {
-          navigate(to, {
-            replace: isSameRoute,
-            ...options,
-          })
-        }
+        navigate(to, {
+          replace: isSameRoute,
+          ...options,
+        })
 
         if (options?.preventScrollReset !== true) {
           window.scrollTo(0, 0)

package/src/internal/useHandleIntent.ts

@@ -0,0 +1,101 @@
+import {useCallback} from 'react'
+
+import {IntentResultCode} from '@shopify/shop-minis-platform'
+
+import type {ShopIntentResult} from '@shopify/shop-minis-platform'
+
+/**
+ * Options for handling intent results
+ */
+export interface HandleIntentOptions<T> {
+  /**
+   * Handler called when user cancels the intent
+   * If not provided, cancellation is treated as a no-op (returns undefined)
+   */
+  onCancel?: () => T | void
+  /**
+   * Handler called when intent fails
+   * If not provided, throws the error
+   */
+  onError?: (error: {message: string; code?: string}) => T | void
+}
+
+/**
+ * Wrapper to handle intent results
+ *
+ * Unlike actions which can reject, intents ALWAYS resolve with a result code.
+ * This hook provides a cleaner API for handling intent results:
+ *
+ * - SUCCESS: Returns the data
+ * - CANCELLED: Calls onCancel or returns undefined
+ * - FAILED: Calls onError or throws the error
+ *
+ * @example
+ * const selectProduct = useHandleIntent(intents.selectProduct, {
+ *   onCancel: () => console.log('User cancelled'),
+ *   onError: (error) => console.error('Selection failed:', error)
+ * })
+ *
+ * const result = await selectProduct({multiSelect: true})
+ * // result is the data, or undefined if cancelled
+ */
+export const useHandleIntent = <T, Args extends unknown[]>(
+  intent: (...args: Args) => Promise<ShopIntentResult<T>>,
+  options?: HandleIntentOptions<T>
+) => {
+  return useCallback(
+    async (...args: Args): Promise<T | void> => {
+      const result = await intent(...args)
+
+      switch (result.resultCode) {
+        case IntentResultCode.SUCCESS:
+          return result.data!
+
+        case IntentResultCode.CANCELLED:
+          if (options?.onCancel) {
+            return options.onCancel()
+          }
+          return undefined
+
+        case IntentResultCode.FAILED:
+          if (options?.onError) {
+            return options.onError(result.error!)
+          }
+
+          throw new Error(result.error?.message || 'Intent failed')
+
+        default: {
+          // Exhaustiveness check
+          const _exhaustive: never = result.resultCode
+          throw new Error(`Unhandled result code: ${_exhaustive}`)
+        }
+      }
+    },
+    [intent, options]
+  )
+}
+
+/**
+ * Alternative: Manual result handling without throwing
+ *
+ * Use this when you want to handle all result codes explicitly
+ * without throwing errors.
+ *
+ * @example
+ * const selectProduct = useHandleIntentManual(intents.selectProduct)
+ *
+ * const result = await selectProduct({multiSelect: true})
+ * if (result.resultCode === 'SUCCESS') {
+ *   console.log(result.data)
+ * }
+ */
+export const useHandleIntentManual = <T, Args extends unknown[]>(
+  intent: (...args: Args) => Promise<ShopIntentResult<T>>
+) => {
+  return useCallback(
+    (...args: Args) => {
+      return intent(...args)
+    },
+    [intent]
+  )
+}

package/src/internal/useShopIntents.ts

@@ -0,0 +1,13 @@
+import type {ShopIntents} from '@shopify/shop-minis-platform'
+
+/**
+ * Internal hook to access Shop Intents
+ *
+ * This provides direct access to window.minisIntents
+ * Use specific intent hooks (like useProductSelection) instead of this hook directly
+ *
+ * @internal
+ */
+export function useShopIntents(): ShopIntents {
+  return window.minisIntents
+}

package/src/mocks.ts

@@ -551,7 +551,6 @@ export function makeMockActions(): ShopActions {
     },
     reportError: undefined,
     reportFetch: undefined,
-    reportNavigationState: undefined,
   } as const
 
   const mock: Partial<ShopActions> = {}

package/dist/hooks/events/useOnNavigateBack.js

@@ -1,14 +0,0 @@
-import { useRef as i, useEffect as o } from "react";
-function s(n) {
-  const e = i(n);
-  e.current = n, o(() => {
-    const t = window.minisEvents.on("NAVIGATE_BACK", () => {
-      e.current();
-    });
-    return () => window.minisEvents.off(t);
-  }, []);
-}
-export {
-  s as useOnNavigateBack
-};
-//# sourceMappingURL=useOnNavigateBack.js.map

package/dist/hooks/events/useOnNavigateBack.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useOnNavigateBack.js","sources":["../../../src/hooks/events/useOnNavigateBack.ts"],"sourcesContent":["import {useEffect, useRef} from 'react'\n\nexport function useOnNavigateBack(callback: () => void) {\n  // Using a ref allows the callback to be updated without triggering a re-render\n  // This makes the hook nicer to use because developers don't need useCallback\n  const callbackRef = useRef(callback)\n  callbackRef.current = callback\n\n  useEffect(() => {\n    const listenerId = window.minisEvents.on('NAVIGATE_BACK', () => {\n      callbackRef.current()\n    })\n\n    return () => window.minisEvents.off(listenerId)\n  }, [])\n}\n"],"names":["useOnNavigateBack","callback","callbackRef","useRef","useEffect","listenerId"],"mappings":";AAEO,SAASA,EAAkBC,GAAsB;AAGhD,QAAAC,IAAcC,EAAOF,CAAQ;AACnC,EAAAC,EAAY,UAAUD,GAEtBG,EAAU,MAAM;AACd,UAAMC,IAAa,OAAO,YAAY,GAAG,iBAAiB,MAAM;AAC9D,MAAAH,EAAY,QAAQ;AAAA,IAAA,CACrB;AAED,WAAO,MAAM,OAAO,YAAY,IAAIG,CAAU;AAAA,EAChD,GAAG,EAAE;AACP;"}

package/dist/internal/navigation-manager.js

@@ -1,28 +0,0 @@
-import { useEffect as e } from "react";
-import { useLocation as a } from "../shop-minis-react/node_modules/.pnpm/react-router@7.7.0_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-router/dist/development/chunk-EF7DTUVF.js";
-import { useOnNavigateBack as r } from "../hooks/events/useOnNavigateBack.js";
-import { useNavigateWithTransition as s } from "../hooks/navigation/useNavigateWithTransition.js";
-import { useShopActions as h } from "./useShopActions.js";
-function u() {
-  const t = a(), i = s(), { reportNavigationState: o } = h();
-  return e(() => {
-    const n = {
-      location: {
-        pathname: t.pathname,
-        search: t.search,
-        hash: t.hash,
-        key: t.key,
-        state: t.state
-      },
-      historyLength: typeof window > "u" ? 0 : window.history.length,
-      historyIndex: typeof window > "u" || !window.history.state?.idx ? null : window.history.state.idx
-    };
-    o(n);
-  }, [t, o]), r(() => {
-    i(-1);
-  }), null;
-}
-export {
-  u as NavigationManager
-};
-//# sourceMappingURL=navigation-manager.js.map

package/dist/internal/navigation-manager.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"navigation-manager.js","sources":["../../src/internal/navigation-manager.tsx"],"sourcesContent":["import {useEffect} from 'react'\n\nimport {useLocation} from 'react-router'\n\nimport {useOnNavigateBack} from '../hooks/events/useOnNavigateBack'\nimport {useNavigateWithTransition} from '../hooks/navigation/useNavigateWithTransition'\n\nimport {useShopActions} from './useShopActions'\n\nexport function NavigationManager() {\n  const location = useLocation()\n  const navigate = useNavigateWithTransition()\n  const {reportNavigationState} = useShopActions()\n\n  // Report navigation state on location changes\n  useEffect(() => {\n    const navigationState = {\n      location: {\n        pathname: location.pathname,\n        search: location.search,\n        hash: location.hash,\n        key: location.key,\n        state: location.state,\n      },\n      historyLength: typeof window === 'undefined' ? 0 : window.history.length,\n      historyIndex:\n        typeof window === 'undefined' || !window.history.state?.idx\n          ? null\n          : window.history.state.idx,\n    }\n\n    reportNavigationState(navigationState)\n  }, [location, reportNavigationState])\n\n  // Handle native back button press\n  useOnNavigateBack(() => {\n    navigate(-1)\n  })\n\n  return null\n}\n"],"names":["NavigationManager","location","useLocation","navigate","useNavigateWithTransition","reportNavigationState","useShopActions","useEffect","navigationState","useOnNavigateBack"],"mappings":";;;;;AASO,SAASA,IAAoB;AAClC,QAAMC,IAAWC,EAAY,GACvBC,IAAWC,EAA0B,GACrC,EAAC,uBAAAC,EAAqB,IAAIC,EAAe;AAG/C,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAkB;AAAA,MACtB,UAAU;AAAA,QACR,UAAUP,EAAS;AAAA,QACnB,QAAQA,EAAS;AAAA,QACjB,MAAMA,EAAS;AAAA,QACf,KAAKA,EAAS;AAAA,QACd,OAAOA,EAAS;AAAA,MAClB;AAAA,MACA,eAAe,OAAO,SAAW,MAAc,IAAI,OAAO,QAAQ;AAAA,MAClE,cACE,OAAO,SAAW,OAAe,CAAC,OAAO,QAAQ,OAAO,MACpD,OACA,OAAO,QAAQ,MAAM;AAAA,IAC7B;AAEA,IAAAI,EAAsBG,CAAe;AAAA,EAAA,GACpC,CAACP,GAAUI,CAAqB,CAAC,GAGpCI,EAAkB,MAAM;AACtB,IAAAN,EAAS,EAAE;AAAA,EAAA,CACZ,GAEM;AACT;"}

package/src/hooks/events/useOnNavigateBack.ts

@@ -1,16 +0,0 @@
-import {useEffect, useRef} from 'react'
-
-export function useOnNavigateBack(callback: () => void) {
-  // Using a ref allows the callback to be updated without triggering a re-render
-  // This makes the hook nicer to use because developers don't need useCallback
-  const callbackRef = useRef(callback)
-  callbackRef.current = callback
-
-  useEffect(() => {
-    const listenerId = window.minisEvents.on('NAVIGATE_BACK', () => {
-      callbackRef.current()
-    })
-
-    return () => window.minisEvents.off(listenerId)
-  }, [])
-}

package/src/internal/navigation-manager.tsx

@@ -1,41 +0,0 @@
-import {useEffect} from 'react'
-
-import {useLocation} from 'react-router'
-
-import {useOnNavigateBack} from '../hooks/events/useOnNavigateBack'
-import {useNavigateWithTransition} from '../hooks/navigation/useNavigateWithTransition'
-
-import {useShopActions} from './useShopActions'
-
-export function NavigationManager() {
-  const location = useLocation()
-  const navigate = useNavigateWithTransition()
-  const {reportNavigationState} = useShopActions()
-
-  // Report navigation state on location changes
-  useEffect(() => {
-    const navigationState = {
-      location: {
-        pathname: location.pathname,
-        search: location.search,
-        hash: location.hash,
-        key: location.key,
-        state: location.state,
-      },
-      historyLength: typeof window === 'undefined' ? 0 : window.history.length,
-      historyIndex:
-        typeof window === 'undefined' || !window.history.state?.idx
-          ? null
-          : window.history.state.idx,
-    }
-
-    reportNavigationState(navigationState)
-  }, [location, reportNavigationState])
-
-  // Handle native back button press
-  useOnNavigateBack(() => {
-    navigate(-1)
-  })
-
-  return null
-}