@kasuvia/sdk 0.0.1

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

@@ -0,0 +1,141 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { fetchEventSource, EventSourceMessage } from '@microsoft/fetch-event-source';
+import { getBackendUrl } from '../config';
+import { logger } from '../utils';
+
+interface ConsultationMessageData {
+  event: string;
+  data: {
+    consultation_id: string;
+    message_id: string;
+    sender_id: string;
+    sender_role: string;
+    message: string;
+    attachments?: Array<{ url: string; type: string; name: string }>;
+    created_at: string;
+  };
+}
+
+interface ConsultationQuoteData {
+  event: string;
+  data: {
+    consultation_id: string;
+    quote_amount: number;
+    deposit_amount?: number;
+    merchant_notes?: string;
+    updated_at: string;
+  };
+}
+
+interface ConsultationStatusData {
+  event: string;
+  data: {
+    consultation_id: string;
+    status: string;
+    updated_at: string;
+  };
+}
+
+interface UseConsultationStreamOptions {
+  consultationId: string;
+  onMessage?: (data: ConsultationMessageData) => void;
+  onQuote?: (data: ConsultationQuoteData) => void;
+  onStatusChange?: (data: ConsultationStatusData) => void;
+  onError?: (error: Error) => void;
+}
+
+export function useConsultationStream({
+  consultationId,
+  onMessage,
+  onQuote,
+  onStatusChange,
+  onError,
+}: UseConsultationStreamOptions) {
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [lastEvent, setLastEvent] = useState<any>(null);
+
+  useEffect(() => {
+    if (!consultationId) {
+      return;
+    }
+
+    const abortController = new AbortController();
+    abortControllerRef.current = abortController;
+
+    const paymentUrl = getBackendUrl('payment');
+    const streamUrl = `${paymentUrl}/events/stream/consultation/${consultationId}`;
+
+    fetchEventSource(streamUrl, {
+      method: 'GET',
+      signal: abortController.signal,
+      onmessage: (event: EventSourceMessage) => {
+        try {
+          if (!event.data || event.data.trim() === '') {
+            return;
+          }
+
+          const data = JSON.parse(event.data);
+          logger.log('[ConsultationStream] Received event:', data);
+          setLastEvent(data);
+
+          if (data.event === 'consultation.message') {
+            logger.log('[ConsultationStream] Message detected, calling onMessage');
+            if (onMessage) {
+              onMessage(data as ConsultationMessageData);
+            }
+          }
+
+          if (data.event === 'consultation.quote') {
+            logger.log('[ConsultationStream] Quote detected, calling onQuote');
+            if (onQuote) {
+              onQuote(data as ConsultationQuoteData);
+            }
+          }
+
+          if (data.event === 'consultation.status') {
+            logger.log('[ConsultationStream] Status change detected, calling onStatusChange');
+            if (onStatusChange) {
+              onStatusChange(data as ConsultationStatusData);
+            }
+          }
+        } catch (error) {
+          logger.error('[ConsultationStream] Error parsing event:', error);
+        }
+      },
+      onerror: (error: Error) => {
+        if (abortController.signal.aborted) {
+          logger.log('[ConsultationStream] Connection closed via AbortController');
+          return;
+        }
+        logger.error('[ConsultationStream] Connection error:', error);
+        setIsConnected(false);
+        if (onError) {
+          onError(error);
+        }
+      },
+      onopen: async (response: Response) => {
+        if (response.ok && response.headers.get('content-type')?.includes('text/event-stream')) {
+          logger.log('[ConsultationStream] Connection established for consultation:', consultationId);
+          setIsConnected(true);
+          return;
+        }
+        throw new Error(`Unexpected response: ${response.status}`);
+      },
+    }).catch(error => {
+      if (abortController.signal.aborted || error.name === 'AbortError') {
+        return;
+      }
+      logger.error('[ConsultationStream] fetchEventSource failed:', error);
+    });
+
+    return () => {
+      abortController.abort();
+      setIsConnected(false);
+    };
+  }, [consultationId, onMessage, onQuote, onStatusChange, onError]);
+
+  return { isConnected, lastEvent };
+}

package/src/hooks/use-consultations.ts

@@ -0,0 +1,76 @@
+/**
+ * Consultations Hooks
+ * 
+ * React Query hooks for consultation operations.
+ */
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { consultationService } from '../services/consultation.service'
+import type {
+  Consultation,
+  ConsultationCreatePayload,
+  ConsultationMessagePayload,
+  ConsultationQuoteAcceptPayload,
+} from '../types/consultations'
+
+export function useConsultations() {
+  return useQuery({
+    queryKey: ['consultations'],
+    queryFn: () => consultationService.getConsultations(),
+  })
+}
+
+export function useConsultation(id: string) {
+  return useQuery({
+    queryKey: ['consultation', id],
+    queryFn: () => consultationService.getConsultation(id),
+    enabled: !!id,
+  })
+}
+
+export function useCreateConsultation() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (payload: ConsultationCreatePayload) =>
+      consultationService.createConsultation(payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['consultations'] })
+    },
+  })
+}
+
+export function useSendMessage(consultationId: string) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (payload: ConsultationMessagePayload) =>
+      consultationService.sendMessage(consultationId, payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['consultation', consultationId] })
+    },
+  })
+}
+
+export function useAcceptQuote(consultationId: string) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (payload: ConsultationQuoteAcceptPayload) =>
+      consultationService.acceptQuote(consultationId, payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['consultation', consultationId] })
+    },
+  })
+}
+
+export function useRejectQuote(consultationId: string) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (reason?: string) =>
+      consultationService.rejectQuote(consultationId, reason),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['consultation', consultationId] })
+    },
+  })
+}

package/src/hooks/use-countries.ts

@@ -0,0 +1,24 @@
+/**
+ * Countries Hook
+ * 
+ * React Query hook for fetching countries list.
+ */
+import { useQuery } from '@tanstack/react-query'
+import { authAxios } from '../client/httpClient'
+import type { Country } from '../types/ui'
+
+export async function getCountries(): Promise<Country[]> {
+  const { data } = await authAxios.get<Country[]>('auth/countries/')
+  return data
+}
+
+export function useCountries() {
+  return useQuery({
+    queryKey: ['countries'],
+    queryFn: () => getCountries(),
+    retry: 1,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    staleTime: 24 * 60 * 60 * 1000, // 24 hours
+  })
+}

package/src/hooks/use-currencies.ts

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+import { useQuery } from '@tanstack/react-query'
+import { getCacheTier } from '../utils/cache'
+import { getSupportedCurrencies } from '../services/config.service'
+import { isInitialized } from '../config'
+import type { Currency } from '../types/payments'
+
+export async function getSupportedCurrenciesList(): Promise<Currency[]> {
+  const data = await getSupportedCurrencies()
+  return data.currencies || []
+}
+
+export function useCurrencies() {
+  return useQuery({
+    queryKey: ['supported-currencies'],
+    queryFn: () => getSupportedCurrenciesList(),
+    enabled: isInitialized(),
+    retry: 1,
+    ...getCacheTier('high'),
+  })
+}

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

@@ -0,0 +1,164 @@
+import { useEffect, useCallback, useState, useRef } from "react";
+import { useSupportedLanguages } from "./use-languages";
+
+interface GoogleTranslateOptions {
+  pageLanguage: string;
+  includedLanguages?: string;
+  autoDisplay?: boolean;
+  layout?: number;
+}
+
+interface GoogleTranslateElement {
+  new(options: GoogleTranslateOptions, elementId: string): void;
+}
+
+interface GoogleNamespace {
+  translate?: {
+    TranslateElement: GoogleTranslateElement;
+  };
+}
+
+declare global {
+  interface Window {
+    googleTranslateElementInit?: () => void;
+    google?: GoogleNamespace;
+  }
+}
+
+const SCRIPT_ID = "google-translate-script";
+const ELEMENT_ID = "google_translate_element";
+
+function fireChange(googleCode: string) {
+  const combo = document.querySelector<HTMLSelectElement>(".goog-te-combo");
+  if (combo) {
+    combo.value = googleCode;
+    combo.dispatchEvent(new Event("change"));
+    return true;
+  }
+  return false;
+}
+
+export function useGoogleTranslate(appLang: string) {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const initRef = useRef(false);
+  const { data: supportedLangs = [] } = useSupportedLanguages();
+
+  const clearCookies = useCallback(() => {
+    if (typeof window === "undefined") return;
+    const domains = [
+      window.location.hostname,
+      "." + window.location.hostname,
+      "." + window.location.hostname.split('.').slice(-2).join('.')
+    ];
+    const path = "/";
+    // Clear googtrans
+    document.cookie = `googtrans=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=${path};`;
+    domains.forEach(domain => {
+      document.cookie = `googtrans=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=${path}; domain=${domain};`;
+    });
+  }, []);
+
+  const resetToEnglish = useCallback(() => {
+    if (typeof window === "undefined") return;
+    // 1. Check if a translation is actually active via cookie
+    const googtrans = document.cookie.split('; ').find(row => row.startsWith('googtrans='))?.split('=')[1];
+
+    // 2. Aggressive cookie clearing
+    const domains = [
+      window.location.hostname,
+      "." + window.location.hostname,
+      window.location.hostname.split('.').slice(-2).join('.'),
+      "." + window.location.hostname.split('.').slice(-2).join('.')
+    ];
+
+    const clear = (name: string) => {
+      document.cookie = `${name}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
+      domains.forEach(d => {
+        document.cookie = `${name}=; Path=/; Domain=${d}; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
+      });
+    };
+
+    clear("googtrans");
+
+    // 3. If we were translated, force a reload to get clean English
+    // We check googtrans existence OR the presence of Google's banner/classes
+    if (googtrans || document.documentElement.classList.contains("translated-ltr") || document.querySelector(".goog-te-banner-frame")) {
+      window.location.reload();
+      return;
+    }
+
+    // 4. UI Cleanup (for cases where reload isn't triggered)
+    document.body.style.top = "0";
+    document.documentElement.classList.remove("translated-ltr", "translated-rtl");
+    const container = document.getElementById(":1.container");
+    if (container) container.style.display = "none";
+  }, []);
+
+  const changeLanguage = useCallback((nextAppCode: string) => {
+    if (nextAppCode === "en") {
+      resetToEnglish();
+      return;
+    }
+
+    const googleCode = nextAppCode;
+
+    // Show container if hidden
+    const container = document.getElementById(":1.container");
+    if (container) container.style.display = "block";
+
+    let tries = 0;
+    const tick = () => {
+      if (fireChange(googleCode)) return;
+      if (tries++ < 30) setTimeout(tick, 200);
+    };
+    tick();
+  }, [resetToEnglish]);
+
+  // Load script only when a translation is requested
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (appLang === "en" && !initRef.current) return;
+    if (initRef.current) return;
+    if (supportedLangs.length === 0) return;
+
+    initRef.current = true;
+
+    if (!document.getElementById(ELEMENT_ID)) {
+      const host = document.createElement("div");
+      host.id = ELEMENT_ID;
+      host.style.display = "none";
+      document.body.appendChild(host);
+    }
+
+    const includedLanguages = supportedLangs.map((l) => l.code).join(",");
+
+    window.googleTranslateElementInit = () => {
+      if (window.google?.translate?.TranslateElement) {
+        new window.google.translate.TranslateElement(
+          { pageLanguage: "en", includedLanguages, autoDisplay: false },
+          ELEMENT_ID,
+        );
+        setIsLoaded(true);
+      }
+    };
+
+    if (!document.getElementById(SCRIPT_ID)) {
+      const script = document.createElement("script");
+      script.id = SCRIPT_ID;
+      script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
+      script.async = true;
+      document.body.appendChild(script);
+    } else {
+      if (window.google?.translate) window.googleTranslateElementInit?.();
+    }
+  }, [appLang, supportedLangs]);
+
+  // Sync language changes
+  useEffect(() => {
+    if (isLoaded || (appLang === "en" && initRef.current)) {
+      changeLanguage(appLang);
+    }
+  }, [appLang, isLoaded, changeLanguage]);
+
+  return { isLoaded };
+}

package/src/hooks/use-is-mounted.ts

@@ -0,0 +1,9 @@
+import { useEffect, useState } from 'react'
+
+export function useIsMounted() {
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+  return mounted
+}

package/src/hooks/use-languages.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 { getCacheTier } from '../utils/cache'
+import { getSupportedLanguages } from '../services/config.service'
+import { isInitialized } from '../config'
+import type { BackendLanguage, SupportedLang } from '../types/payments'
+
+export async function getSupportedLanguagesList(): Promise<SupportedLang[]> {
+  const data = await getSupportedLanguages()
+  return data.languages.map((language: BackendLanguage) => ({
+    code: language.code,
+    appCode: language.code,
+    label: language.label,
+    native: language.label,
+    flag: language.flag,
+  }))
+}
+
+export function useSupportedLanguages() {
+  return useQuery({
+    queryKey: ['supported-languages'],
+    queryFn: () => getSupportedLanguagesList(),
+    enabled: isInitialized(),
+    retry: 1,
+    ...getCacheTier('high'),
+  })
+}

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

@@ -0,0 +1,195 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { fetchEventSource, EventSourceMessage } from '@microsoft/fetch-event-source';
+import { getBackendUrl, getRuntimeConfig, isInitialized } from '../config';
+import { logger } from '../utils';
+
+interface PaymentSuccessData {
+  event: string;
+  data: {
+    transaction_id: string;
+    order_id: string;
+    amount: number;
+    currency: string;
+    status: string;
+  };
+}
+
+interface DigitalReadyData {
+  event: string;
+  data: {
+    order_id: string;
+    business_id: string;
+    customer_id: string;
+    download_links: Array<{
+      item_id: string;
+      product_name: string;
+      url: string;
+      token: string;
+      expires_at: string;
+      max_downloads: number;
+    }>;
+    fulfilled_at: string;
+  };
+}
+
+interface BespokeUpdateData {
+  event: string;
+  data: {
+    order_id: string;
+    business_id: string;
+    update_type: string;
+    message: string;
+    stage?: string;
+    updated_at: string;
+  };
+}
+
+interface ConsultationUpdateData {
+  event: string;
+  data: {
+    consultation_id: string;
+    business_id: string;
+    customer_id: string;
+    status: string;
+    message?: string;
+    updated_at: string;
+  };
+}
+
+interface ServiceBookingUpdateData {
+  event: string;
+  data: {
+    booking_id: string;
+    order_id: string;
+    business_id: string;
+    customer_id: string;
+    status: string;
+    appointment_date?: string;
+    updated_at: string;
+  };
+}
+
+interface UseOrderStreamOptions {
+  orderId: string;
+  onPaymentComplete?: (data: PaymentSuccessData) => void;
+  onDigitalReady?: (data: DigitalReadyData) => void;
+  onBespokeUpdate?: (data: BespokeUpdateData) => void;
+  onConsultationUpdate?: (data: ConsultationUpdateData) => void;
+  onServiceBookingUpdate?: (data: ServiceBookingUpdateData) => void;
+  onError?: (error: Error) => void;
+}
+
+export function useOrderStream({ 
+  orderId, 
+  onPaymentComplete, 
+  onDigitalReady, 
+  onBespokeUpdate, 
+  onConsultationUpdate, 
+  onServiceBookingUpdate, 
+  onError 
+}: UseOrderStreamOptions) {
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    if (!orderId) {
+      return;
+    }
+
+    const abortController = new AbortController();
+    abortControllerRef.current = abortController;
+
+    const paymentUrl = getBackendUrl('payment');
+    const streamUrl = `${paymentUrl}/events/stream/order/${encodeURIComponent(orderId)}`;
+
+    fetchEventSource(streamUrl, {
+      method: 'GET',
+      signal: abortController.signal,
+      onmessage: (event: EventSourceMessage) => {
+        try {
+          if (!event.data || event.data.trim() === '') {
+            return;
+          }
+
+          const data = JSON.parse(event.data);
+          logger.log('[OrderStream] Received event:', data);
+
+          if (data.event === 'payment.success') {
+            logger.log('[OrderStream] Payment success detected, calling onPaymentComplete');
+            if (onPaymentComplete) {
+              onPaymentComplete(data as PaymentSuccessData);
+            }
+            abortController.abort();
+          }
+
+          if (data.event === 'digital.ready') {
+            logger.log('[OrderStream] Digital delivery ready detected, calling onDigitalReady');
+            if (onDigitalReady) {
+              onDigitalReady(data as DigitalReadyData);
+            }
+          }
+
+          if (data.event === 'bespoke.update') {
+            logger.log('[OrderStream] Bespoke update detected, calling onBespokeUpdate');
+            if (onBespokeUpdate) {
+              onBespokeUpdate(data as BespokeUpdateData);
+            }
+          }
+
+          if (data.event === 'consultation.update') {
+            logger.log('[OrderStream] Consultation update detected, calling onConsultationUpdate');
+            if (onConsultationUpdate) {
+              onConsultationUpdate(data as ConsultationUpdateData);
+            }
+          }
+
+          if (data.event === 'service_booking.update') {
+            logger.log('[OrderStream] Service booking update detected, calling onServiceBookingUpdate');
+            if (onServiceBookingUpdate) {
+              onServiceBookingUpdate(data as ServiceBookingUpdateData);
+            }
+          }
+        } catch (error) {
+          logger.error('[OrderStream] Error parsing event:', error);
+        }
+      },
+      onerror: (error: Error) => {
+        if (abortController.signal.aborted) {
+          logger.log('[OrderStream] Connection closed via AbortController');
+          return;
+        }
+        if (error.message?.includes('404') || error.message?.includes('Not Found')) {
+          logger.warn('[OrderStream] Stream endpoint unavailable for order:', orderId);
+          return;
+        }
+        logger.error('[OrderStream] Connection error:', error);
+        if (onError) {
+          onError(error);
+        }
+      },
+      onopen: async (response: Response) => {
+        if (response.ok && response.headers.get('content-type')?.includes('text/event-stream')) {
+          logger.log('[OrderStream] Connection established for order:', orderId);
+          return;
+        }
+        if (response.status === 404) {
+          logger.warn('[OrderStream] Stream endpoint unavailable for order:', orderId);
+          return;
+        }
+        throw new Error(`Unexpected response: ${response.status}`);
+      },
+    }).catch(error => {
+      if (abortController.signal.aborted || error.name === 'AbortError') {
+        return;
+      }
+      logger.error('[OrderStream] fetchEventSource failed:', error);
+    });
+
+    return () => {
+      abortController.abort();
+    };
+  }, [orderId, onPaymentComplete, onDigitalReady, onBespokeUpdate, onConsultationUpdate, onServiceBookingUpdate, onError]);
+
+  return null;
+}