@tagadapay/plugin-sdk 1.0.2

package/dist/react/hooks/useProducts.js

@@ -0,0 +1,120 @@
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { useTagadaContext } from '../providers/TagadaProvider';
+export function useProducts(options = {}) {
+    const { apiService } = useTagadaContext();
+    const [products, setProducts] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    // Auto-memoize all options to prevent unnecessary re-renders
+    const stableOptions = useMemo(() => {
+        const { productIds = [], enabled = true, includeVariants = true, includePrices = true } = options;
+        return {
+            productIds: [...productIds], // Shallow copy to ensure stable reference
+            enabled: enabled ?? true,
+            includeVariants: includeVariants ?? true,
+            includePrices: includePrices ?? true,
+        };
+    }, [
+        JSON.stringify(options.productIds ?? []),
+        options.enabled,
+        options.includeVariants,
+        options.includePrices,
+    ]);
+    const { productIds, enabled, includeVariants, includePrices } = stableOptions;
+    const fetchProducts = useCallback(async () => {
+        if (!enabled)
+            return;
+        setIsLoading(true);
+        setError(null);
+        try {
+            const storeId = apiService.getStoredStoreId();
+            if (!storeId) {
+                throw new Error('Store ID not found. Make sure the TagadaProvider is properly configured.');
+            }
+            // Use apiService.fetch instead of direct fetch to avoid dependency on environment.apiConfig.baseUrl
+            if (productIds.length > 0) {
+                // Fetch specific products
+                const fetchPromises = productIds.map(async (productId) => {
+                    return apiService.fetch(`/api/v1/products/${productId}`, {
+                        method: 'POST',
+                        body: {
+                            productId,
+                            storeId,
+                        },
+                    });
+                });
+                const fetchedProducts = await Promise.all(fetchPromises);
+                setProducts(fetchedProducts);
+            }
+            else {
+                // Fetch all products for the store
+                const data = await apiService.fetch('/api/v1/products', {
+                    method: 'POST',
+                    body: {
+                        storeId,
+                        includeVariants,
+                        includePrices,
+                    },
+                });
+                setProducts(Array.isArray(data) ? data : (data.items ?? []));
+            }
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Failed to fetch products');
+            setError(error);
+            console.error('Error fetching products:', error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [apiService, productIds, enabled, includeVariants, includePrices]);
+    const getProduct = useCallback((productId) => {
+        return products.find((product) => product.id === productId);
+    }, [products]);
+    const getVariant = useCallback((variantId) => {
+        for (const product of products) {
+            const variant = product.variants?.find((v) => v.id === variantId);
+            if (variant) {
+                return { product, variant };
+            }
+        }
+        return undefined;
+    }, [products]);
+    const getAllVariants = useCallback(() => {
+        const allVariants = [];
+        products.forEach((product) => {
+            if (product.variants) {
+                product.variants.forEach((variant) => {
+                    allVariants.push({ product, variant });
+                });
+            }
+        });
+        return allVariants;
+    }, [products]);
+    const filterVariants = useCallback((predicate) => {
+        const filteredVariants = [];
+        products.forEach((product) => {
+            if (product.variants) {
+                product.variants.forEach((variant) => {
+                    if (predicate(variant, product)) {
+                        filteredVariants.push({ product, variant });
+                    }
+                });
+            }
+        });
+        return filteredVariants;
+    }, [products]);
+    useEffect(() => {
+        void fetchProducts();
+    }, [fetchProducts]);
+    return {
+        products,
+        isLoading,
+        error,
+        refetch: fetchProducts,
+        getProduct,
+        getVariant,
+        getAllVariants,
+        filterVariants,
+    };
+}

package/dist/react/hooks/useSession.d.ts

@@ -0,0 +1,10 @@
+import { Session } from '../types';
+export declare function useSession(): {
+    session: Session | null;
+    sessionId: string | null;
+    storeId: string | null;
+    accountId: string | null;
+    customerId: string | null;
+    isValid: boolean;
+    isLoading: boolean;
+};

package/dist/react/hooks/useSession.js

@@ -0,0 +1,17 @@
+'use client';
+/**
+ * useSession - Hook to access current session data
+ */
+import { useTagadaContext } from '../providers/TagadaProvider';
+export function useSession() {
+    const { session, isLoading } = useTagadaContext();
+    return {
+        session,
+        sessionId: session?.sessionId || null,
+        storeId: session?.storeId || null,
+        accountId: session?.accountId || null,
+        customerId: session?.customerId || null,
+        isValid: session?.isValid || false,
+        isLoading,
+    };
+}

package/dist/react/hooks/useThreeds.d.ts

@@ -0,0 +1,38 @@
+export type ThreedsProvider = 'basis_theory';
+export interface PaymentInstrument {
+    id: string;
+    token: string | null;
+    type: string;
+    card: {
+        maskedCardNumber?: string;
+        expirationMonth?: number;
+        expirationYear?: number;
+        brand?: string;
+        bin?: string;
+        last4?: string;
+    } | null;
+}
+export interface ThreedsSession {
+    id: string;
+    provider: ThreedsProvider;
+    status: string;
+    sessionData: any;
+}
+export interface ThreedsChallenge {
+    sessionId: string;
+    acsChallengeUrl: string;
+    acsTransactionId: string;
+    threeDSVersion: string;
+}
+export interface ThreedsOptions {
+    provider?: ThreedsProvider;
+}
+export interface ThreedsHook {
+    createSession: (paymentInstrument: PaymentInstrument, options?: ThreedsOptions) => Promise<ThreedsSession>;
+    startChallenge: (challengeData: ThreedsChallenge, options?: ThreedsOptions) => Promise<any>;
+    isLoading: boolean;
+    error: Error | null;
+}
+export declare function useThreeds(options?: {
+    defaultProvider?: ThreedsProvider;
+}): ThreedsHook;

package/dist/react/hooks/useThreeds.js

@@ -0,0 +1,162 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useTagadaContext } from '../providers/TagadaProvider';
+import { getBasisTheoryApiKey } from '../config/payment';
+import { useThreedsModal } from './useThreedsModal';
+export function useThreeds(options = {}) {
+    const { defaultProvider = 'basis_theory' } = options;
+    const { apiService, environment } = useTagadaContext();
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const { createThreedsModal, closeThreedsModal } = useThreedsModal();
+    const [basisTheory3ds, setBasisTheory3ds] = useState(null);
+    // Dynamically import BasisTheory3ds on the client side only
+    useEffect(() => {
+        let isMounted = true;
+        const loadBasisTheory = async () => {
+            try {
+                // Get API key from embedded configuration (with env override support)
+                const apiKey = getBasisTheoryApiKey(environment?.environment || 'local');
+                if (!apiKey) {
+                    console.warn('BasisTheory API key not configured');
+                    return;
+                }
+                // Dynamically import the library only on the client side
+                const { BasisTheory3ds } = await import('@basis-theory/web-threeds');
+                if (isMounted) {
+                    setBasisTheory3ds(() => BasisTheory3ds);
+                    console.log('✅ BasisTheory3ds initialized successfully');
+                }
+            }
+            catch (err) {
+                console.error('Failed to load BasisTheory3ds:', err);
+                if (isMounted) {
+                    setError(err instanceof Error ? err : new Error('Failed to load 3DS library'));
+                }
+            }
+        };
+        void loadBasisTheory();
+        return () => {
+            isMounted = false;
+        };
+    }, [environment]);
+    // Create a 3DS session with BasisTheory
+    const createBasisTheorySession = useCallback(async (paymentInstrument) => {
+        try {
+            if (!basisTheory3ds) {
+                throw new Error('BasisTheory3ds not loaded yet');
+            }
+            // Get API key from embedded configuration
+            const apiKey = getBasisTheoryApiKey(environment?.environment || 'local');
+            if (!apiKey) {
+                throw new Error('BasisTheory API key not configured');
+            }
+            const bt3ds = basisTheory3ds(apiKey);
+            console.log('Creating BasisTheory 3DS session for payment instrument:', paymentInstrument.id);
+            const session = await bt3ds.createSession({
+                tokenId: paymentInstrument.token,
+            });
+            // Create session through our API
+            const threedsSession = await apiService.fetch('/api/v1/threeds/create-session', {
+                method: 'POST',
+                body: {
+                    provider: 'basis_theory',
+                    sessionData: session,
+                    paymentInstrumentId: paymentInstrument.id,
+                },
+            });
+            return threedsSession;
+        }
+        catch (error) {
+            console.error('Error creating BasisTheory 3DS session:', error);
+            throw error;
+        }
+    }, [apiService, basisTheory3ds, environment]);
+    // Generic createSession method that supports multiple providers
+    const createSession = useCallback(async (paymentInstrument, options) => {
+        const provider = options?.provider || defaultProvider;
+        setIsLoading(true);
+        setError(null);
+        try {
+            let session;
+            if (provider === 'basis_theory') {
+                session = await createBasisTheorySession(paymentInstrument);
+            }
+            else {
+                throw new Error(`Unsupported 3DS provider: ${String(provider)}`);
+            }
+            return session;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Failed to create 3DS session');
+            setError(error);
+            throw error;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [defaultProvider, createBasisTheorySession]);
+    // Start a 3DS challenge with BasisTheory
+    const startBasisTheoryChallenge = useCallback(async (challengeData) => {
+        try {
+            if (!basisTheory3ds) {
+                throw new Error('BasisTheory3ds not loaded yet');
+            }
+            // Get API key from embedded configuration
+            const apiKey = getBasisTheoryApiKey(environment?.environment || 'local');
+            if (!apiKey) {
+                throw new Error('BasisTheory API key is not configured');
+            }
+            const modal = createThreedsModal({
+                onClose: () => {
+                    throw new Error('Authentication was cancelled by the user');
+                },
+            });
+            const bt3ds = basisTheory3ds(apiKey);
+            console.log('Starting BasisTheory 3DS challenge:', challengeData);
+            const challengeCompletion = await bt3ds.startChallenge({
+                sessionId: challengeData.sessionId,
+                acsChallengeUrl: challengeData.acsChallengeUrl,
+                acsTransactionId: challengeData.acsTransactionId,
+                threeDSVersion: challengeData.threeDSVersion,
+                containerId: modal.containerId + '-content',
+                mode: 'iframe',
+                timeout: 60000 * 3, // 3 minutes
+            });
+            closeThreedsModal();
+            return challengeCompletion;
+        }
+        catch (error) {
+            console.error('Error starting BasisTheory 3DS challenge:', error);
+            closeThreedsModal();
+            throw error;
+        }
+    }, [basisTheory3ds, createThreedsModal, closeThreedsModal, environment]);
+    // Generic startChallenge method that supports multiple providers
+    const startChallenge = useCallback(async (challengeData, options) => {
+        const provider = options?.provider || defaultProvider;
+        setIsLoading(true);
+        setError(null);
+        try {
+            if (provider === 'basis_theory') {
+                return await startBasisTheoryChallenge(challengeData);
+            }
+            else {
+                throw new Error(`Unsupported 3DS provider: ${String(provider)}`);
+            }
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Failed to start 3DS challenge');
+            setError(error);
+            throw error;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [defaultProvider, startBasisTheoryChallenge]);
+    return {
+        createSession,
+        startChallenge,
+        isLoading,
+        error,
+    };
+}

package/dist/react/hooks/useThreedsModal.d.ts

@@ -0,0 +1,16 @@
+export interface ThreedsModalOptions {
+    containerId?: string;
+    mode?: 'fixed' | 'auto-fit';
+    onClose?: () => void;
+}
+export interface ThreedsModalInstance {
+    containerId: string;
+    getContentElement: () => HTMLElement | null;
+    updateModalSize: () => void;
+    cleanup: () => void;
+}
+export interface ThreedsModalHook {
+    createThreedsModal: (options?: ThreedsModalOptions) => ThreedsModalInstance;
+    closeThreedsModal: (containerId?: string) => void;
+}
+export declare function useThreedsModal(): ThreedsModalHook;