@kasuvia/sdk 0.0.2 → 0.0.5

package/src/hooks/use-countries.ts

@@ -2,23 +2,45 @@
  * Countries Hook
  * 
  * React Query hook for fetching countries list.
+ * Stateless - requires config parameter.
  */
 import { useQuery } from '@tanstack/react-query'
-import { authAxios } from '../client/httpClient'
+import type { SdkConfig } from '../config'
 import type { Country } from '../types/ui'
+import { logger } from '../utils'
+import { useSdkContext, resolveHookArgs } from '../context/sdk-context'
 
-export async function getCountries(): Promise<Country[]> {
-  const { data } = await authAxios.get<Country[]>('auth/countries/')
-  return data
+export async function getCountries(config: SdkConfig): Promise<Country[]> {
+  const response = await fetch(`${config.backendUrls.auth}/auth/countries/`, {
+    headers: {
+      "X-Storefront-Key": config.storefrontApiKey,
+      "X-Business-ID": config.businessId,
+    },
+  })
+  if (!response.ok) throw new Error('Failed to fetch countries')
+  return response.json()
 }
 
-export function useCountries() {
-  return useQuery({
-    queryKey: ['countries'],
-    queryFn: () => getCountries(),
-    retry: 1,
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
-    staleTime: 24 * 60 * 60 * 1000, // 24 hours
-  })
+export function useCountries(config?: SdkConfig) {
+  const ctx = useSdkContext()
+  try {
+    const { config: cfg } = resolveHookArgs(config, undefined, ctx)
+    return useQuery({
+      queryKey: ['countries'],
+      queryFn: () => getCountries(cfg),
+      retry: 1,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+      staleTime: 24 * 60 * 60 * 1000,
+    })
+  } catch (error) {
+    logger.warn('[useCountries] Called outside QueryClientProvider, returning empty list')
+    return {
+      data: [],
+      isLoading: false,
+      error: null,
+      isFetching: false,
+      refetch: () => Promise.resolve({ data: [] }),
+    } as any
+  }
 }

package/src/hooks/use-currencies.ts

@@ -2,26 +2,39 @@
  * Currencies Hook
  *
  * React Query hook for fetching supported currencies from the payment service.
- * The query is disabled until the SDK is initialized so that no request fires
- * before tenant credentials (businessId, storefrontApiKey) are available.
+ * Stateless - requires config parameter.
  */
 import { useQuery } from '@tanstack/react-query'
 import { getCacheTier } from '../utils/cache'
 import { getSupportedCurrencies } from '../services/config.service'
-import { isInitialized } from '../config'
+import type { SdkConfig } from '../config'
 import type { Currency } from '../types/payments'
+import { logger } from '../utils'
+import { useSdkContext, resolveHookArgs } from '../context/sdk-context'
 
-export async function getSupportedCurrenciesList(): Promise<Currency[]> {
-  const data = await getSupportedCurrencies()
+export async function getSupportedCurrenciesList(config: SdkConfig): Promise<Currency[]> {
+  const data = await getSupportedCurrencies(config)
   return data.currencies || []
 }
 
-export function useCurrencies() {
-  return useQuery({
-    queryKey: ['supported-currencies'],
-    queryFn: () => getSupportedCurrenciesList(),
-    enabled: isInitialized(),
-    retry: 1,
-    ...getCacheTier('high'),
-  })
+export function useCurrencies(config?: SdkConfig) {
+  const ctx = useSdkContext()
+  try {
+    const { config: cfg } = resolveHookArgs(config, undefined, ctx)
+    return useQuery({
+      queryKey: ['supported-currencies'],
+      queryFn: () => getSupportedCurrenciesList(cfg),
+      retry: 1,
+      ...getCacheTier('high'),
+    })
+  } catch (error) {
+    logger.warn('[useCurrencies] Called outside QueryClientProvider, returning empty list')
+    return {
+      data: [],
+      isLoading: false,
+      error: null,
+      isFetching: false,
+      refetch: () => Promise.resolve({ data: [] }),
+    } as any
+  }
 }

package/src/hooks/use-google-translate.ts

@@ -1,5 +1,7 @@
 import { useEffect, useCallback, useState, useRef } from "react";
 import { useSupportedLanguages } from "./use-languages";
+import type { SdkConfig } from "../config";
+import { useSdkContext, resolveHookArgs } from "../context/sdk-context";
 
 interface GoogleTranslateOptions {
   pageLanguage: string;
@@ -38,10 +40,22 @@ function fireChange(googleCode: string) {
   return false;
 }
 
-export function useGoogleTranslate(appLang: string) {
+export function useGoogleTranslate(configOrLang?: SdkConfig | string, appLang?: string) {
+  const ctx = useSdkContext();
+  let cfg: SdkConfig;
+  let lang: string;
+
+  if (typeof configOrLang === 'string') {
+    lang = configOrLang;
+    cfg = resolveHookArgs(undefined, undefined, ctx).config;
+  } else {
+    lang = appLang ?? 'en';
+    cfg = resolveHookArgs(configOrLang, undefined, ctx).config;
+  }
+
   const [isLoaded, setIsLoaded] = useState(false);
   const initRef = useRef(false);
-  const { data: supportedLangs = [] } = useSupportedLanguages();
+  const { data: supportedLangs = [] } = useSupportedLanguages(cfg);
 
   const clearCookies = useCallback(() => {
     if (typeof window === "undefined") return;
@@ -117,7 +131,7 @@ export function useGoogleTranslate(appLang: string) {
   // Load script only when a translation is requested
   useEffect(() => {
     if (typeof window === "undefined") return;
-    if (appLang === "en" && !initRef.current) return;
+    if (lang === "en" && !initRef.current) return;
     if (initRef.current) return;
     if (supportedLangs.length === 0) return;
 
@@ -130,7 +144,7 @@ export function useGoogleTranslate(appLang: string) {
       document.body.appendChild(host);
     }
 
-    const includedLanguages = supportedLangs.map((l) => l.code).join(",");
+    const includedLanguages = supportedLangs.map((l: { code: string }) => l.code).join(",");
 
     window.googleTranslateElementInit = () => {
       if (window.google?.translate?.TranslateElement) {
@@ -151,14 +165,14 @@ export function useGoogleTranslate(appLang: string) {
     } else {
       if (window.google?.translate) window.googleTranslateElementInit?.();
     }
-  }, [appLang, supportedLangs]);
+  }, [lang, supportedLangs]);
 
   // Sync language changes
   useEffect(() => {
-    if (isLoaded || (appLang === "en" && initRef.current)) {
-      changeLanguage(appLang);
+    if (isLoaded || (lang === "en" && initRef.current)) {
+      changeLanguage(lang);
     }
-  }, [appLang, isLoaded, changeLanguage]);
+  }, [lang, isLoaded, changeLanguage]);
 
   return { isLoaded };
 }

package/src/hooks/use-languages.ts

@@ -1,19 +1,13 @@
-/**
- * Languages Hook
- *
- * React Query hook for fetching supported languages from the payment service.
- * The query is disabled until the SDK is initialized so that no request fires
- * before tenant credentials (businessId, storefrontApiKey) are available.
- */
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, type UseQueryResult } from '@tanstack/react-query'
 import { getCacheTier } from '../utils/cache'
 import { getSupportedLanguages } from '../services/config.service'
-import { isInitialized } from '../config'
+import type { SdkConfig } from '../config'
 import type { BackendLanguage, SupportedLang } from '../types/payments'
+import { useSdkContext, resolveHookArgs } from '../context/sdk-context'
 
-export async function getSupportedLanguagesList(): Promise<SupportedLang[]> {
-  const data = await getSupportedLanguages()
-  return data.languages.map((language: BackendLanguage) => ({
+export async function getSupportedLanguagesList(config: SdkConfig): Promise<SupportedLang[]> {
+  const data = await getSupportedLanguages(config)
+  return (data.languages || []).map((language: BackendLanguage) => ({
     code: language.code,
     appCode: language.code,
     label: language.label,
@@ -22,12 +16,38 @@ export async function getSupportedLanguagesList(): Promise<SupportedLang[]> {
   }))
 }
 
-export function useSupportedLanguages() {
-  return useQuery({
-    queryKey: ['supported-languages'],
-    queryFn: () => getSupportedLanguagesList(),
-    enabled: isInitialized(),
-    retry: 1,
-    ...getCacheTier('high'),
-  })
+export function useSupportedLanguages(config?: SdkConfig): UseQueryResult<SupportedLang[], Error> {
+  const ctx = useSdkContext()
+  try {
+    const { config: cfg } = resolveHookArgs(config, undefined, ctx)
+    return useQuery({
+      queryKey: ['supported-languages'],
+      queryFn: () => getSupportedLanguagesList(cfg),
+      retry: 1,
+      ...getCacheTier('high'),
+    });
+  } catch {
+    return {
+      data: [],
+      isLoading: false,
+      error: null,
+      isFetching: false,
+      isPending: false,
+      isError: false,
+      isSuccess: true,
+      status: 'success',
+      fetchStatus: 'idle',
+      refetch: async () => ({
+        data: [],
+        isLoading: false,
+        error: null,
+        isFetching: false,
+        isPending: false,
+        isError: false,
+        isSuccess: true,
+        status: 'success',
+        fetchStatus: 'idle',
+      } as unknown as UseQueryResult<SupportedLang[], Error>),
+    } as unknown as UseQueryResult<SupportedLang[], Error>;
+  }
 }

package/src/hooks/use-mobile.ts

@@ -0,0 +1,23 @@
+/**
+ * Mobile Detection Hook
+ * 
+ * React hook for detecting mobile viewport using matchMedia.
+ * Generic utility that can be used across different storefronts.
+ */
+import { useEffect, useState } from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false)
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => setIsMobile(mql.matches)
+    mql.addEventListener('change', onChange)
+    setIsMobile(mql.matches)
+    return () => mql.removeEventListener('change', onChange)
+  }, [])
+
+  return isMobile
+}

package/src/hooks/use-order-stream.ts

@@ -2,8 +2,9 @@
 
 import { useEffect, useRef } from 'react';
 import { fetchEventSource, EventSourceMessage } from '@microsoft/fetch-event-source';
-import { getBackendUrl, getRuntimeConfig, isInitialized } from '../config';
+import type { SdkConfig } from '../config';
 import { logger } from '../utils';
+import { useSdkContext } from '../context/sdk-context';
 
 interface PaymentSuccessData {
   event: string;
@@ -71,7 +72,8 @@ interface ServiceBookingUpdateData {
   };
 }
 
-interface UseOrderStreamOptions {
+export interface UseOrderStreamOptions {
+  config?: SdkConfig;
   orderId: string;
   onPaymentComplete?: (data: PaymentSuccessData) => void;
   onDigitalReady?: (data: DigitalReadyData) => void;
@@ -82,6 +84,7 @@ interface UseOrderStreamOptions {
 }
 
 export function useOrderStream({ 
+  config: explicitConfig,
   orderId, 
   onPaymentComplete, 
   onDigitalReady, 
@@ -90,18 +93,19 @@ export function useOrderStream({
   onServiceBookingUpdate, 
   onError 
 }: UseOrderStreamOptions) {
+  const ctx = useSdkContext();
+  const config = explicitConfig ?? ctx?.config;
   const abortControllerRef = useRef<AbortController | null>(null);
 
   useEffect(() => {
-    if (!orderId) {
+    if (!orderId || !config) {
       return;
     }
 
     const abortController = new AbortController();
     abortControllerRef.current = abortController;
 
-    const paymentUrl = getBackendUrl('payment');
-    const streamUrl = `${paymentUrl}/events/stream/order/${encodeURIComponent(orderId)}`;
+    const streamUrl = `${config.backendUrls.payment}/events/stream/order/${encodeURIComponent(orderId)}`;
 
     fetchEventSource(streamUrl, {
       method: 'GET',

package/src/hooks/use-orders.ts

@@ -1,64 +1,119 @@
 /**
  * Orders Hook
- * 
- * React Query hook for order operations.
+ *
+ * React Query hooks for order operations.
+ * config and accessToken are optional — if omitted, they are read from SdkContext.
  */
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { getOrders, findOrder, createOrder, cancelOrder, trackOrder } from '../services/order.service'
-import type { Order, FindOrderParams, CreateOrderParams } from '../types/store'
+import type { FindOrderParams, CreateOrderParams } from '../types/store'
+import type { SdkConfig } from '../config'
+import { logger } from '../utils'
+import { useSdkContext, resolveHookArgs } from '../context/sdk-context'
 
-export function useOrders(params?: { email?: string; page?: number; page_size?: number }) {
-  return useQuery({
-    queryKey: ['orders', params],
-    queryFn: () => getOrders(params),
-  })
-}
+export function useOrders(arg1?: SdkConfig | { page?: number; pageSize?: number }, arg2?: string | null, arg3?: { page?: number; pageSize?: number }) {
+  const ctx = useSdkContext()
+  const isArg1Config = typeof arg1 === 'object' && arg1 !== null && 'businessId' in arg1
+  const explicitConfig = isArg1Config ? (arg1 as SdkConfig) : undefined
+  const explicitToken = isArg1Config ? arg2 : undefined
+  const params = isArg1Config ? arg3 : (arg1 as { page?: number; pageSize?: number } | undefined)
 
-// Alias for useOrders for backward compatibility
-export function useOrdersList(params?: { email?: string; page?: number; page_size?: number }) {
-  return useOrders(params)
+  try {
+    const { config: cfg, accessToken: token } = resolveHookArgs(explicitConfig, explicitToken, ctx)
+    return useQuery({
+      queryKey: ['orders', params],
+      queryFn: () => token ? getOrders(cfg, token, params || {}) : Promise.resolve(undefined),
+      enabled: !!token,
+    })
+  } catch (error) {
+    logger.warn('[useOrders] Called outside QueryClientProvider, returning empty list')
+    return { data: undefined, isLoading: false, error: null, isFetching: false, refetch: () => Promise.resolve({ data: undefined }) } as any
+  }
 }
 
-export function useFindOrder(params: FindOrderParams) {
-  return useQuery({
-    queryKey: ['order', params],
-    queryFn: () => findOrder(params),
-    enabled: !!params.email && !!params.order_id,
-  })
+export function useOrdersList(arg1?: any, arg2?: any, arg3?: any) {
+  return useOrders(arg1, arg2, arg3)
 }
 
-export function useOrder(params: FindOrderParams) {
-  return useFindOrder(params)
+export function useFindOrder(arg1?: SdkConfig | string | FindOrderParams, arg2?: FindOrderParams) {
+  const ctx = useSdkContext()
+  const isArg1Config = typeof arg1 === 'object' && arg1 !== null && 'businessId' in arg1
+  const explicitConfig = isArg1Config ? (arg1 as SdkConfig) : undefined
+  const params: FindOrderParams | undefined = isArg1Config
+    ? arg2
+    : typeof arg1 === 'string'
+      ? { order_id: arg1, email: '' }
+      : (arg1 as FindOrderParams | undefined)
+
+  try {
+    const { config: cfg } = resolveHookArgs(explicitConfig, undefined, ctx)
+    return useQuery({
+      queryKey: ['order', params],
+      queryFn: () => params ? findOrder(cfg, params) : Promise.resolve(undefined),
+      enabled: !!params?.order_id,
+    })
+  } catch (error) {
+    logger.warn('[useFindOrder] Called outside QueryClientProvider, returning undefined')
+    return { data: undefined, isLoading: false, error: null, isFetching: false, refetch: () => Promise.resolve({ data: undefined }) } as any
+  }
 }
 
-export function useOrderTracking(orderId: string, token?: string) {
-  return useQuery({
-    queryKey: ['order-tracking', orderId, token],
-    queryFn: () => trackOrder(orderId, token),
-    enabled: !!orderId,
-    refetchInterval: 30000, // Refetch every 30 seconds for tracking updates
-  })
+export function useOrder(arg1?: SdkConfig | string | FindOrderParams, arg2?: FindOrderParams) {
+  return useFindOrder(arg1, arg2)
 }
 
-export function useCreateOrder() {
-  const queryClient = useQueryClient()
+export function useOrderTracking(arg1?: SdkConfig | string, arg2?: string, arg3?: string) {
+  const ctx = useSdkContext()
+  const isArg1Config = typeof arg1 === 'object' && arg1 !== null && 'businessId' in arg1
+  const explicitConfig = isArg1Config ? (arg1 as SdkConfig) : undefined
+  const orderId = isArg1Config ? arg2 : (typeof arg1 === 'string' ? arg1 : undefined)
+  const guestToken = isArg1Config ? arg3 : (typeof arg2 === 'string' ? arg2 : undefined)
 
-  return useMutation({
-    mutationFn: createOrder,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['orders'] })
-    },
-  })
+  try {
+    const { config: cfg } = resolveHookArgs(explicitConfig, undefined, ctx)
+    return useQuery({
+      queryKey: ['order-tracking', orderId, guestToken],
+      queryFn: () => trackOrder(cfg, orderId!, guestToken),
+      enabled: !!orderId,
+      refetchInterval: 30000,
+    })
+  } catch (error) {
+    logger.warn('[useOrderTracking] Called outside QueryClientProvider, returning undefined')
+    return { data: undefined, isLoading: false, error: null, isFetching: false, refetch: () => Promise.resolve({ data: undefined }) } as any
+  }
 }
 
-export function useCancelOrder() {
-  const queryClient = useQueryClient()
+export function useCreateOrder(config?: SdkConfig, accessToken?: string | null) {
+  const ctx = useSdkContext()
+  try {
+    const { config: cfg, accessToken: token } = resolveHookArgs(config, accessToken, ctx)
+    const queryClient = useQueryClient()
+    return useMutation({
+      mutationFn: (payload: CreateOrderParams) => createOrder(cfg, token || '', payload),
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: ['orders'] })
+      },
+    })
+  } catch (error) {
+    logger.warn('[useCreateOrder] Called outside QueryClientProvider, returning no-op mutation')
+    return { mutate: () => {}, mutateAsync: () => Promise.resolve(undefined) } as any
+  }
+}
 
-  return useMutation({
-    mutationFn: ({ orderId, reason }: { orderId: string; reason: string }) =>
-      cancelOrder(orderId, reason),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['orders'] })
-    },
-  })
+export function useCancelOrder(config?: SdkConfig, accessToken?: string | null) {
+  const ctx = useSdkContext()
+  try {
+    const { config: cfg, accessToken: token } = resolveHookArgs(config, accessToken, ctx)
+    const queryClient = useQueryClient()
+    return useMutation({
+      mutationFn: ({ orderId, reason = '' }: { orderId: string; reason?: string }) =>
+        token ? cancelOrder(cfg, token, orderId, reason) : Promise.reject('No access token'),
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: ['orders'] })
+      },
+    })
+  } catch (error) {
+    logger.warn('[useCancelOrder] Called outside QueryClientProvider, returning no-op mutation')
+    return { mutate: () => {}, mutateAsync: () => Promise.resolve(undefined) } as any
+  }
 }