@tagadapay/plugin-sdk 2.4.38 → 2.5.0

package/dist/v2/react/hooks/useCheckoutQuery.js

@@ -0,0 +1,208 @@
+/**
+ * Checkout Hook using TanStack Query
+ * Replaces the coordinator pattern with automatic cache invalidation
+ */
+import { useCallback, useState, useEffect, useMemo } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { CheckoutResource } from '../../core/resources/checkout';
+import { useTagadaContext } from '../providers/TagadaProvider';
+import { usePluginConfig } from './usePluginConfig';
+import { useCurrency } from './useCurrency';
+import { getGlobalApiClient } from './useApiQuery';
+export function useCheckoutQuery(options = {}) {
+    const { checkoutToken: providedToken, enabled = true } = options;
+    const { storeId } = usePluginConfig();
+    const currency = useCurrency();
+    const queryClient = useQueryClient();
+    const { isSessionInitialized } = useTagadaContext();
+    // Create checkout resource client
+    const checkoutResource = useMemo(() => {
+        try {
+            return new CheckoutResource(getGlobalApiClient());
+        }
+        catch (error) {
+            throw new Error('Failed to initialize checkout resource: ' + (error instanceof Error ? error.message : 'Unknown error'));
+        }
+    }, []);
+    // Internal token state that can be updated after init
+    const [internalToken, setInternalToken] = useState(providedToken);
+    // Update internal token when provided token changes
+    useEffect(() => {
+        if (providedToken && providedToken !== internalToken) {
+            setInternalToken(providedToken);
+        }
+    }, [providedToken, internalToken]);
+    // Use provided token or internal token
+    const checkoutToken = providedToken || internalToken;
+    console.log('🔍 [useCheckoutQuery] Query setup:', {
+        providedToken: providedToken ? providedToken.substring(0, 8) + '...' : 'none',
+        internalToken: internalToken ? internalToken.substring(0, 8) + '...' : 'none',
+        finalToken: checkoutToken ? checkoutToken.substring(0, 8) + '...' : 'none',
+        enabled: enabled && !!checkoutToken && isSessionInitialized,
+        currentCurrency: currency.code,
+        isSessionInitialized
+    });
+    // Main checkout query
+    const { data: checkout, isLoading, error, isSuccess, refetch, } = useQuery({
+        queryKey: ['checkout', checkoutToken, currency.code],
+        queryFn: () => checkoutResource.getCheckout(checkoutToken, currency.code),
+        enabled: enabled && !!checkoutToken && isSessionInitialized,
+        staleTime: 30000, // 30 seconds
+        refetchOnWindowFocus: false,
+    });
+    console.log('🔍 [useCheckoutQuery] Query result:', {
+        hasCheckout: !!checkout,
+        isLoading,
+        error: error?.message,
+        isSuccess
+    });
+    // Refresh function
+    const refresh = useCallback(async () => {
+        if (checkoutToken) {
+            await refetch();
+        }
+    }, [refetch, checkoutToken]);
+    // Initialize checkout mutation
+    const initMutation = useMutation({
+        mutationFn: (params) => {
+            const requestBody = {
+                ...params,
+                storeId: params.storeId || storeId,
+                returnUrl: params.returnUrl || window.location.origin,
+                customer: {
+                    ...params.customer,
+                    currency: params.customer?.currency ?? currency.code,
+                },
+            };
+            return checkoutResource.initCheckout(requestBody);
+        },
+        onSuccess: (response) => {
+            // Update URL with checkout token
+            if (typeof window !== 'undefined' && response.checkoutToken) {
+                const currentUrl = new URL(window.location.href);
+                if (!currentUrl.searchParams.has('checkoutToken')) {
+                    const newUrl = new URL(window.location.href);
+                    newUrl.searchParams.set('checkoutToken', response.checkoutToken);
+                    window.history.replaceState(null, '', newUrl.toString());
+                }
+            }
+        },
+    });
+    // Order bump functionality removed - use useOrderBumpQuery instead
+    // Line items mutation
+    const lineItemsMutation = useMutation({
+        mutationFn: ({ lineItems }) => {
+            if (!checkout?.checkoutSession?.id) {
+                throw new Error('No checkout session available');
+            }
+            return checkoutResource.updateLineItems(checkout.checkoutSession.id, lineItems);
+        },
+        onSuccess: () => {
+            if (checkoutToken) {
+                void queryClient.invalidateQueries({ queryKey: ['checkout', checkoutToken] });
+            }
+        },
+    });
+    // Item quantity mutation
+    const quantityMutation = useMutation({
+        mutationFn: ({ variantId, quantity, priceId }) => {
+            if (!checkout?.checkoutSession?.id) {
+                throw new Error('No checkout session available');
+            }
+            return checkoutResource.setItemQuantity(checkout.checkoutSession.id, variantId, quantity, priceId);
+        },
+        onSuccess: () => {
+            if (checkoutToken) {
+                void queryClient.invalidateQueries({ queryKey: ['checkout', checkoutToken] });
+            }
+        },
+    });
+    // Customer update mutation
+    const customerMutation = useMutation({
+        mutationFn: (data) => {
+            if (!checkout?.checkoutSession?.id) {
+                throw new Error('No checkout session available');
+            }
+            return checkoutResource.updateCustomer(checkout.checkoutSession.id, data);
+        },
+        onSuccess: () => {
+            if (checkoutToken) {
+                void queryClient.invalidateQueries({ queryKey: ['checkout', checkoutToken] });
+            }
+        },
+    });
+    // Customer and session info update mutation
+    const customerAndSessionMutation = useMutation({
+        mutationFn: (data) => {
+            if (!checkout?.checkoutSession?.id) {
+                throw new Error('No checkout session available');
+            }
+            return checkoutResource.updateCustomerAndSessionInfo(checkout.checkoutSession.id, data);
+        },
+        onSuccess: () => {
+            if (checkoutToken) {
+                void queryClient.invalidateQueries({ queryKey: ['checkout', checkoutToken] });
+            }
+        },
+    });
+    // Promotion code mutation
+    const promotionMutation = useMutation({
+        mutationFn: ({ code }) => {
+            if (!checkout?.checkoutSession?.id) {
+                throw new Error('No checkout session available');
+            }
+            return checkoutResource.applyPromotionCode(checkout.checkoutSession.id, code);
+        },
+        onSuccess: () => {
+            if (checkoutToken) {
+                void queryClient.invalidateQueries({ queryKey: ['checkout', checkoutToken] });
+            }
+            if (checkout?.checkoutSession?.id) {
+                void queryClient.invalidateQueries({ queryKey: ['promotions', checkout.checkoutSession.id] });
+            }
+        },
+    });
+    // Remove promotion mutation
+    const removePromotionMutation = useMutation({
+        mutationFn: ({ promotionId }) => {
+            if (!checkout?.checkoutSession?.id) {
+                throw new Error('No checkout session available');
+            }
+            return checkoutResource.removePromotion(checkout.checkoutSession.id, promotionId);
+        },
+        onSuccess: () => {
+            if (checkoutToken) {
+                void queryClient.invalidateQueries({ queryKey: ['checkout', checkoutToken] });
+            }
+            if (checkout?.checkoutSession?.id) {
+                void queryClient.invalidateQueries({ queryKey: ['promotions', checkout.checkoutSession.id] });
+            }
+        },
+    });
+    return {
+        // Query data
+        checkout,
+        isLoading,
+        error,
+        isSuccess,
+        // Actions
+        init: async (params) => {
+            const result = await initMutation.mutateAsync(params);
+            // Update internal token state so the query can fetch the checkout data
+            setInternalToken(result.checkoutToken);
+            return {
+                checkoutUrl: result.checkoutUrl,
+                checkoutSession: checkout?.checkoutSession ?? {},
+                checkoutToken: result.checkoutToken,
+            };
+        },
+        refresh,
+        // Checkout operations
+        updateLineItems: (lineItems) => lineItemsMutation.mutateAsync({ lineItems }),
+        setItemQuantity: (variantId, quantity, priceId) => quantityMutation.mutateAsync({ variantId, quantity, priceId }),
+        updateCustomer: (data) => customerMutation.mutateAsync(data),
+        updateCustomerAndSessionInfo: (data) => customerAndSessionMutation.mutateAsync(data),
+        applyPromotionCode: (code) => promotionMutation.mutateAsync({ code }),
+        removePromotion: (promotionId) => removePromotionMutation.mutateAsync({ promotionId }),
+    };
+}

package/dist/v2/react/hooks/useCheckoutToken.d.ts

@@ -0,0 +1,17 @@
+export interface UseCheckoutTokenOptions {
+    checkoutToken?: string;
+    autoLoadFromToken?: boolean;
+}
+export interface UseCheckoutTokenResult {
+    checkoutToken: string | null;
+    isLoading: boolean;
+    error: Error | null;
+    isInitialized: boolean;
+    setToken: (token: string | null) => void;
+    clearToken: () => void;
+}
+/**
+ * React hook for managing checkout token state
+ * Handles token management without fetching checkout data
+ */
+export declare function useCheckoutToken(options?: UseCheckoutTokenOptions): UseCheckoutTokenResult;

package/dist/v2/react/hooks/useCheckoutToken.js

@@ -0,0 +1,80 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTagadaContext } from '../providers/TagadaProvider';
+/**
+ * React hook for managing checkout token state
+ * Handles token management without fetching checkout data
+ */
+export function useCheckoutToken(options = {}) {
+    const { isSessionInitialized } = useTagadaContext();
+    const { checkoutToken: providedToken, autoLoadFromToken = true } = options;
+    const [checkoutToken, setCheckoutToken] = useState(providedToken || null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [isInitialized, setIsInitialized] = useState(false);
+    const hasAutoLoadedRef = useRef(false);
+    const isSessionInitializedRef = useRef(isSessionInitialized);
+    // Keep ref in sync with state
+    useEffect(() => {
+        isSessionInitializedRef.current = isSessionInitialized;
+    }, [isSessionInitialized]);
+    // Update token when provided token changes
+    useEffect(() => {
+        if (providedToken && providedToken !== checkoutToken) {
+            console.log('🔧 useCheckoutToken: Token updated from props', {
+                oldToken: checkoutToken ? checkoutToken.substring(0, 8) + '...' : null,
+                newToken: providedToken.substring(0, 8) + '...'
+            });
+            setCheckoutToken(providedToken);
+            setIsInitialized(false);
+            hasAutoLoadedRef.current = false;
+        }
+    }, [providedToken, checkoutToken]);
+    // Auto-load token from URL if no token provided
+    useEffect(() => {
+        if (!providedToken && autoLoadFromToken && !checkoutToken && !hasAutoLoadedRef.current) {
+            const urlParams = new URLSearchParams(window.location.search);
+            const urlToken = urlParams.get('checkoutToken') || urlParams.get('token');
+            if (urlToken) {
+                console.log('🔧 useCheckoutToken: Auto-loading token from URL', {
+                    tokenPreview: urlToken.substring(0, 8) + '...'
+                });
+                setCheckoutToken(urlToken);
+                hasAutoLoadedRef.current = true;
+            }
+        }
+    }, [providedToken, autoLoadFromToken, checkoutToken]);
+    // Wait for session initialization
+    useEffect(() => {
+        if (!isSessionInitialized || !checkoutToken || isInitialized) {
+            return;
+        }
+        console.log('🔧 useCheckoutToken: Session initialized, token ready', {
+            tokenPreview: checkoutToken.substring(0, 8) + '...',
+            isSessionInitialized
+        });
+        setIsInitialized(true);
+    }, [isSessionInitialized, checkoutToken, isInitialized]);
+    const setToken = useCallback((token) => {
+        console.log('🔧 useCheckoutToken: Setting token', {
+            tokenPreview: token ? token.substring(0, 8) + '...' : null
+        });
+        setCheckoutToken(token);
+        setIsInitialized(!!token);
+        setError(null);
+    }, []);
+    const clearToken = useCallback(() => {
+        console.log('🔧 useCheckoutToken: Clearing token');
+        setCheckoutToken(null);
+        setIsInitialized(false);
+        setError(null);
+        hasAutoLoadedRef.current = false;
+    }, []);
+    return {
+        checkoutToken,
+        isLoading,
+        error,
+        isInitialized,
+        setToken,
+        clearToken,
+    };
+}

package/dist/v2/react/hooks/useCurrency.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Currency Hook
+ * Uses CurrencyCore for business logic
+ */
+import { Currency } from '../../core/utils/currency';
+export interface UseCurrencyResult extends Currency {
+    format: (amount: number) => string;
+}
+export declare function useCurrency(defaultCurrency?: string): UseCurrencyResult;

package/dist/v2/react/hooks/useCurrency.js

@@ -0,0 +1,21 @@
+/**
+ * Currency Hook
+ * Uses CurrencyCore for business logic
+ */
+import { useMemo } from 'react';
+import { useTagadaContext } from '../providers/TagadaProvider';
+import { CurrencyUtils } from '../../core/utils/currency';
+export function useCurrency(defaultCurrency = 'USD') {
+    const context = useTagadaContext();
+    const currency = useMemo(() => {
+        return CurrencyUtils.getCurrency(context, defaultCurrency);
+    }, [context, defaultCurrency]);
+    const format = (amount) => {
+        const symbol = currency.symbol || currency.code;
+        return `${symbol}${amount.toFixed(currency.decimalPlaces)}`;
+    };
+    return {
+        ...currency,
+        format,
+    };
+}

package/dist/v2/react/hooks/useGeoLocation.d.ts

@@ -0,0 +1,138 @@
+export interface GeoLocationData {
+    ip_address?: string | null;
+    city?: string | null;
+    city_geoname_id?: number | null;
+    region?: string | null;
+    region_iso_code?: string | null;
+    region_geoname_id?: number | null;
+    postal_code?: string | null;
+    country?: string | null;
+    country_code?: string | null;
+    country_geoname_id?: number | null;
+    country_is_eu?: boolean | null;
+    continent?: string | null;
+    continent_code?: string | null;
+    continent_geoname_id?: number | null;
+    latitude?: number | null;
+    longitude?: number | null;
+    security?: {
+        is_vpn?: boolean | null;
+    } | null;
+    timezone?: {
+        name?: string | null;
+        abbreviation?: string | null;
+        gmt_offset?: number | null;
+        current_time?: string | null;
+        is_dst?: boolean | null;
+    } | null;
+    currency?: {
+        currency_name?: string | null;
+        currency_code?: string | null;
+    } | null;
+    connection?: {
+        autonomous_system_number?: number | null;
+        autonomous_system_organization?: string | null;
+        connection_type?: string | null;
+        isp_name?: string | null;
+        organization_name?: string | null;
+    } | null;
+    flag?: {
+        emoji?: string | null;
+        unicode?: string | null;
+        png?: string | null;
+        svg?: string | null;
+    } | null;
+    as?: string | null;
+    isp?: string | null;
+    lat?: number | null;
+    lon?: number | null;
+    org?: string | null;
+    query?: string | null;
+    regionName?: string | null;
+    status?: string | null;
+    zip?: string | null;
+    error?: string;
+}
+export interface UseGeoLocationOptions {
+    /**
+     * Whether to automatically fetch geolocation data on mount
+     * @default true
+     */
+    autoFetch?: boolean;
+    /**
+     * Custom IP address to fetch geolocation for
+     * If not provided, will use the client's IP
+     */
+    ip?: string;
+    /**
+     * Whether to refetch data when the hook mounts
+     * @default false
+     */
+    refetchOnMount?: boolean;
+}
+export interface UseGeoLocationReturn {
+    /**
+     * The geolocation data
+     */
+    data: GeoLocationData | null;
+    /**
+     * Whether the request is currently loading
+     */
+    isLoading: boolean;
+    /**
+     * Any error that occurred during the request
+     */
+    error: string | null;
+    /**
+     * Function to manually fetch geolocation data
+     */
+    fetchGeoData: (ip?: string) => Promise<void>;
+    /**
+     * Function to clear the current data and error state
+     */
+    clearData: () => void;
+    /**
+     * Whether the data is from localhost/development
+     */
+    isLocalhost: boolean;
+    /**
+     * Whether the current IP is valid
+     */
+    isValidIP: boolean;
+}
+/**
+ * Hook to fetch and manage geolocation data - V2 Implementation
+ * Compatible with V1 interface while using V2 provider architecture
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { data, isLoading, error, fetchGeoData } = useGeoLocation();
+ *
+ *   if (isLoading) return <div>Loading location...</div>;
+ *   if (error) return <div>Error: {error}</div>;
+ *
+ *   return (
+ *     <div>
+ *       <p>Country: {data?.country}</p>
+ *       <p>City: {data?.city}</p>
+ *       <p>IP: {data?.ip_address}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { fetchGeoData } = useGeoLocation({ autoFetch: false });
+ *
+ *   const handleClick = () => {
+ *     fetchGeoData('8.8.8.8'); // Fetch for specific IP
+ *   };
+ *
+ *   return <button onClick={handleClick}>Get Location for Google DNS</button>;
+ * }
+ * ```
+ */
+export declare function useGeoLocation(options?: UseGeoLocationOptions): UseGeoLocationReturn;

package/dist/v2/react/hooks/useGeoLocation.js

@@ -0,0 +1,126 @@
+'use client';
+import { useCallback, useEffect, useState } from 'react';
+import { useTagadaContext } from '../providers/TagadaProvider';
+/**
+ * Hook to fetch and manage geolocation data - V2 Implementation
+ * Compatible with V1 interface while using V2 provider architecture
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { data, isLoading, error, fetchGeoData } = useGeoLocation();
+ *
+ *   if (isLoading) return <div>Loading location...</div>;
+ *   if (error) return <div>Error: {error}</div>;
+ *
+ *   return (
+ *     <div>
+ *       <p>Country: {data?.country}</p>
+ *       <p>City: {data?.city}</p>
+ *       <p>IP: {data?.ip_address}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { fetchGeoData } = useGeoLocation({ autoFetch: false });
+ *
+ *   const handleClick = () => {
+ *     fetchGeoData('8.8.8.8'); // Fetch for specific IP
+ *   };
+ *
+ *   return <button onClick={handleClick}>Get Location for Google DNS</button>;
+ * }
+ * ```
+ */
+export function useGeoLocation(options = {}) {
+    const { autoFetch = true, ip, refetchOnMount = false } = options;
+    const { apiService } = useTagadaContext();
+    const [data, setData] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    // Helper function to check if IP is localhost
+    const isLocalhost = useCallback((ipAddress) => {
+        if (!ipAddress)
+            return false;
+        return ipAddress === '127.0.0.1' || ipAddress === '::1' || ipAddress === 'localhost';
+    }, []);
+    // Helper function to validate IP address format
+    const isValidIP = useCallback((ipAddress) => {
+        if (!ipAddress)
+            return false;
+        // IPv4 regex pattern
+        const ipv4Pattern = /^(\d{1,3}\.){3}\d{1,3}$/;
+        // IPv6 regex pattern (simplified)
+        const ipv6Pattern = /^([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$/;
+        if (!ipv4Pattern.test(ipAddress) && !ipv6Pattern.test(ipAddress)) {
+            return false;
+        }
+        // Additional validation for IPv4
+        if (ipv4Pattern.test(ipAddress)) {
+            const parts = ipAddress.split('.');
+            return parts.every((part) => {
+                const num = parseInt(part, 10);
+                return num >= 0 && num <= 255;
+            });
+        }
+        return true;
+    }, []);
+    // Function to fetch geolocation data
+    const fetchGeoData = useCallback(async (customIp) => {
+        if (!apiService) {
+            setError('API service not available');
+            return;
+        }
+        setIsLoading(true);
+        setError(null);
+        try {
+            const targetIp = customIp || ip;
+            const endpoint = targetIp ? `/api/v1/geo?ip=${encodeURIComponent(targetIp)}` : '/api/v1/geo';
+            console.log('[SDK] Fetching geolocation data for IP:', targetIp || 'client IP');
+            const geoData = await apiService.fetch(endpoint, {
+                method: 'GET',
+                skipAuth: true, // Geolocation endpoint doesn't require authentication
+            });
+            setData(geoData);
+            console.log('[SDK] Geolocation data fetched successfully:', geoData);
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to fetch geolocation data';
+            setError(errorMessage);
+            console.error('[SDK] Error fetching geolocation data:', err);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [apiService, ip]);
+    // Function to clear data and error state
+    const clearData = useCallback(() => {
+        setData(null);
+        setError(null);
+    }, []);
+    // Auto-fetch on mount if enabled
+    useEffect(() => {
+        if (autoFetch && apiService) {
+            void fetchGeoData();
+        }
+    }, [autoFetch, apiService, fetchGeoData]);
+    // Refetch on mount if enabled
+    useEffect(() => {
+        if (refetchOnMount && apiService) {
+            void fetchGeoData();
+        }
+    }, [refetchOnMount, apiService, fetchGeoData]);
+    return {
+        data,
+        isLoading,
+        error,
+        fetchGeoData,
+        clearData,
+        isLocalhost: isLocalhost(data?.ip_address),
+        isValidIP: isValidIP(data?.ip_address),
+    };
+}

package/dist/v2/react/hooks/useGoogleAutocomplete.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Google Autocomplete Hook - V2 Implementation
+ * Compatible with V1 interface while using V2 core architecture
+ */
+declare global {
+    interface Window {
+        google?: {
+            maps?: {
+                places?: {
+                    AutocompleteService: new () => any;
+                    PlacesService: new (map: any) => any;
+                    PlacesServiceStatus: {
+                        OK: string;
+                        ZERO_RESULTS: string;
+                    };
+                };
+                Map: new (element: HTMLElement) => any;
+            };
+        };
+    }
+}
+export interface GooglePrediction {
+    place_id: string;
+    description: string;
+    structured_formatting?: {
+        main_text: string;
+        secondary_text: string;
+    };
+}
+export interface GooglePlaceDetails {
+    place_id: string;
+    formatted_address: string;
+    address_components: {
+        long_name: string;
+        short_name: string;
+        types: string[];
+    }[];
+    geometry?: {
+        location: {
+            lat: number;
+            lng: number;
+        };
+    };
+}
+export interface ExtractedAddress {
+    streetNumber: string;
+    route: string;
+    locality: string;
+    administrativeAreaLevel1: string;
+    administrativeAreaLevel1Long: string;
+    country: string;
+    postalCode: string;
+}
+export interface UseGoogleAutocompleteOptions {
+    apiKey: string;
+    libraries?: string[];
+    version?: string;
+    language?: string;
+    region?: string;
+}
+export interface UseGoogleAutocompleteResult {
+    predictions: GooglePrediction[];
+    isLoading: boolean;
+    isScriptLoaded: boolean;
+    searchPlaces: (input: string, countryRestriction?: string) => void;
+    getPlaceDetails: (placeId: string) => Promise<GooglePlaceDetails | null>;
+    extractAddressComponents: (place: GooglePlaceDetails) => ExtractedAddress;
+    clearPredictions: () => void;
+}
+/**
+ * React hook for Google Places Autocomplete with automatic script injection
+ * Automatically loads the Google Maps JavaScript API with Places library
+ */
+export declare function useGoogleAutocomplete(options: UseGoogleAutocompleteOptions): UseGoogleAutocompleteResult;