@tagadapay/plugin-sdk 2.3.6 → 2.3.9

package/dist/react/components/ApplePayUniversalButton.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ApplePayLineItem, ApplePayConfig } from '../types/apple-pay';
+interface ApplePayUniversalButtonProps {
+    checkoutSessionId: string;
+    lineItems: ApplePayLineItem[];
+    total: ApplePayLineItem;
+    config?: ApplePayConfig;
+    onSuccess?: (payment: any) => void;
+    onError?: (error: string) => void;
+    onCancel?: () => void;
+    className?: string;
+    children?: React.ReactNode;
+    disabled?: boolean;
+}
+export declare const ApplePayUniversalButton: React.FC<ApplePayUniversalButtonProps>;
+export default ApplePayUniversalButton;

package/dist/react/components/ApplePayUniversalButton.example.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const ApplePayUniversalButtonExample: React.FC;
+export default ApplePayUniversalButtonExample;

package/dist/react/components/ApplePayUniversalButton.example.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ApplePayUniversalButton } from './ApplePayUniversalButton';
+// Example usage of ApplePayUniversalButton
+export const ApplePayUniversalButtonExample = () => {
+    const checkoutSessionId = 'example-session-123';
+    const lineItems = [
+        {
+            label: 'Product 1',
+            amount: '29.99',
+            type: 'final',
+        },
+        {
+            label: 'Shipping',
+            amount: '5.99',
+            type: 'final',
+        },
+    ];
+    const total = {
+        label: 'Total',
+        amount: '35.98',
+        type: 'final',
+    };
+    const config = {
+        countryCode: 'US',
+        supportedNetworks: ['visa', 'masterCard', 'amex', 'discover'],
+        merchantCapabilities: ['supports3DS'],
+    };
+    const handleSuccess = (payment) => {
+        console.log('Payment successful:', payment);
+    };
+    const handleError = (error) => {
+        console.error('Payment error:', error);
+    };
+    const handleCancel = () => {
+        console.log('Payment cancelled');
+    };
+    return (_jsxs("div", { className: "max-w-md mx-auto p-6 bg-white rounded-lg shadow-lg", children: [_jsx("h2", { className: "text-2xl font-bold mb-4", children: "Apple Pay Universal Button Example" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-semibold mb-2", children: "Order Summary:" }), lineItems.map((item, index) => (_jsxs("div", { className: "flex justify-between text-sm", children: [_jsx("span", { children: item.label }), _jsxs("span", { children: ["$", item.amount] })] }, index))), _jsxs("div", { className: "flex justify-between font-bold border-t pt-2 mt-2", children: [_jsx("span", { children: total.label }), _jsxs("span", { children: ["$", total.amount] })] })] }), _jsx(ApplePayUniversalButton, { checkoutSessionId: checkoutSessionId, lineItems: lineItems, total: total, config: config, onSuccess: handleSuccess, onError: handleError, onCancel: handleCancel, className: "w-full" }), _jsxs("div", { className: "text-xs text-gray-500 mt-4", children: [_jsx("p", { children: "This button will:" }), _jsxs("ul", { className: "list-disc list-inside space-y-1", children: [_jsx("li", { children: "Show Apple Pay on supported devices (Safari iOS/macOS)" }), _jsx("li", { children: "Show QR code on other mobile browsers" }), _jsx("li", { children: "Show \"Unavailable\" on unsupported browsers" })] })] })] })] }));
+};
+export default ApplePayUniversalButtonExample;

package/dist/react/components/ApplePayUniversalButton.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useApplePay } from '../hooks/useApplePay';
+export const ApplePayUniversalButton = ({ checkoutSessionId, lineItems, total, config = {}, onSuccess, onError, onCancel, className = '', children, disabled = false, }) => {
+    const [showQRCode, setShowQRCode] = useState(false);
+    const { handleApplePayClick, processingPayment, applePayError, isApplePayAvailable, shouldShowQRCode, qrCodeData, generateQRCode, } = useApplePay({
+        onSuccess,
+        onError,
+        onCancel,
+        config,
+    });
+    const handleClick = () => {
+        if (isApplePayAvailable) {
+            handleApplePayClick(checkoutSessionId, lineItems, total, config);
+        }
+        else if (shouldShowQRCode) {
+            setShowQRCode(true);
+            // Generate QR code data
+            const qrData = {
+                checkoutSessionId,
+                lineItems,
+                total,
+                config,
+                qrCodeUrl: generateQRCode({ checkoutSessionId, lineItems, total, config }),
+            };
+            handleApplePayClick(checkoutSessionId, lineItems, total, config);
+        }
+        else {
+            onError?.('Apple Pay is not available on this device');
+        }
+    };
+    const getButtonText = () => {
+        if (processingPayment)
+            return 'Processing...';
+        if (isApplePayAvailable)
+            return 'Pay with Apple Pay';
+        if (shouldShowQRCode)
+            return 'Show QR Code';
+        return 'Apple Pay Unavailable';
+    };
+    const getButtonIcon = () => {
+        if (isApplePayAvailable) {
+            return (_jsx("svg", { className: "h-6 w-6", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" }) }));
+        }
+        if (shouldShowQRCode) {
+            return (_jsx("svg", { className: "h-6 w-6", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M3 3h7v7H3V3zm2 2v3h3V5H5zm8-2h7v7h-7V3zm2 2v3h3V5h-3zM3 13h7v7H3v-7zm2 2v3h3v-3H5zm8-2h7v7h-7v-7zm2 2v3h3v-3h-3z" }) }));
+        }
+        return (_jsx("svg", { className: "h-6 w-6", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }));
+    };
+    const getButtonStyle = () => {
+        const baseStyle = "h-10 w-full text-base shadow-sm transition-colors duration-200 flex items-center justify-center gap-2";
+        if (isApplePayAvailable) {
+            return `${baseStyle} bg-black text-white hover:bg-black/80 ${className}`;
+        }
+        if (shouldShowQRCode) {
+            return `${baseStyle} bg-blue-600 text-white hover:bg-blue-700 ${className}`;
+        }
+        return `${baseStyle} bg-gray-400 text-gray-600 cursor-not-allowed ${className}`;
+    };
+    return (_jsxs("div", { className: "w-full", children: [_jsxs("button", { onClick: handleClick, disabled: disabled || processingPayment || (!isApplePayAvailable && !shouldShowQRCode), className: getButtonStyle(), style: { margin: 0 }, children: [getButtonIcon(), children || getButtonText()] }), showQRCode && qrCodeData && (_jsx("div", { className: "mt-4 p-4 bg-white border border-gray-200 rounded-lg shadow-sm", children: _jsxs("div", { className: "text-center", children: [_jsx("h3", { className: "text-lg font-medium text-gray-900 mb-2", children: "Scan QR Code to Pay" }), _jsx("p", { className: "text-sm text-gray-600 mb-4", children: "Use your mobile device to scan this QR code and complete your Apple Pay payment" }), _jsx("div", { className: "flex justify-center", children: _jsx("img", { src: qrCodeData.qrCodeUrl, alt: "Apple Pay QR Code", className: "w-48 h-48 border border-gray-200 rounded" }) }), _jsxs("div", { className: "mt-4 text-xs text-gray-500", children: [_jsxs("p", { children: ["Total: ", total.amount, " ", total.label] }), _jsxs("p", { children: ["Session: ", checkoutSessionId.slice(0, 8), "..."] })] }), _jsx("button", { onClick: () => setShowQRCode(false), className: "mt-3 px-4 py-2 text-sm text-gray-600 hover:text-gray-800 underline", children: "Close QR Code" })] }) })), applePayError && (_jsx("div", { className: "mt-2 p-2 bg-red-50 border border-red-200 rounded text-sm text-red-600", children: applePayError }))] }));
+};
+export default ApplePayUniversalButton;

package/dist/react/hooks/useApplePay.js

@@ -5,11 +5,41 @@ import { usePayment } from './usePayment';
 export function useApplePay(options = {}) {
     const [processingPayment, setProcessingPayment] = useState(false);
     const [error, setError] = useState(null);
+    const [qrCodeData, setQrCodeData] = useState(null);
     const { createApplePayPaymentInstrument, processApplePayPayment } = usePayment();
     const { environment, apiService } = useTagadaContext();
     // Get API key from environment
     const apiKey = getBasisTheoryApiKey(environment?.environment || 'local');
-    // Check if Apple Pay is available
+    // Utility function to convert Apple Pay contact to address
+    const appleContactToAddress = useCallback((contact) => {
+        return {
+            address1: contact?.addressLines?.[0] || '',
+            address2: contact?.addressLines?.[1] || '',
+            lastName: contact?.familyName || '',
+            firstName: contact?.givenName || '',
+            city: contact?.locality || '',
+            state: contact?.administrativeArea || '',
+            country: contact?.countryCode || '',
+            postal: contact?.postalCode || '',
+            phone: contact?.phoneNumber || '',
+            email: contact?.emailAddress || '',
+        };
+    }, []);
+    // Generate QR code URL for Apple Pay fallback
+    const generateQRCode = useCallback((data) => {
+        const qrData = {
+            type: 'apple_pay_fallback',
+            checkoutSessionId: data.checkoutSessionId,
+            total: data.total,
+            lineItems: data.lineItems,
+            config: data.config,
+            timestamp: Date.now(),
+        };
+        // Encode data as base64 for QR code
+        const encodedData = btoa(JSON.stringify(qrData));
+        return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(encodedData)}`;
+    }, []);
+    // Check if Apple Pay is available with enhanced cross-browser support
     const isApplePayAvailable = (() => {
         if (typeof window === 'undefined')
             return false;
@@ -35,6 +65,17 @@ export function useApplePay(options = {}) {
             return false;
         }
     })();
+    // Check if we should show QR code fallback
+    const shouldShowQRCode = (() => {
+        if (typeof window === 'undefined')
+            return false;
+        // Show QR code if Apple Pay is not available but we're in a supported environment
+        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+        const isSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
+        const isChrome = /Chrome/.test(navigator.userAgent);
+        // Show QR code for mobile devices or when Apple Pay is not natively supported
+        return !isApplePayAvailable && (isMobile || isSafari || isChrome);
+    })();
     // Debug logging
     console.log('Apple Pay availability check:', {
         hasWindow: typeof window !== 'undefined',
@@ -94,6 +135,19 @@ export function useApplePay(options = {}) {
     }, [apiKey]);
     const handleApplePayClick = useCallback((checkoutSessionId, lineItems, total, config = {}) => {
         if (!isApplePayAvailable) {
+            if (shouldShowQRCode) {
+                // Generate QR code data for fallback
+                const qrData = {
+                    checkoutSessionId,
+                    lineItems,
+                    total,
+                    config,
+                    qrCodeUrl: generateQRCode({ checkoutSessionId, lineItems, total, config }),
+                };
+                setQrCodeData(qrData);
+                options.onError?.('Apple Pay not available - QR code generated');
+                return;
+            }
             const errorMsg = 'Apple Pay is not available on this device';
             setError(errorMsg);
             options.onError?.(errorMsg);
@@ -106,6 +160,8 @@ export function useApplePay(options = {}) {
             merchantCapabilities: config.merchantCapabilities || ['supports3DS'],
             total,
             lineItems,
+            requiredShippingContactFields: ['name', 'phone', 'email', 'postalAddress'],
+            requiredBillingContactFields: ['postalAddress'],
         };
         try {
             const session = new window.ApplePaySession(3, request);
@@ -130,6 +186,15 @@ export function useApplePay(options = {}) {
                     try {
                         setProcessingPayment(true);
                         setError(null);
+                        // Extract address information
+                        const shippingContact = event.payment.shippingContact;
+                        const billingContact = event.payment.billingContact;
+                        const shippingAddress = shippingContact ? appleContactToAddress(shippingContact) : null;
+                        const billingAddress = billingContact ? appleContactToAddress(billingContact) : null;
+                        console.log('Apple Pay payment authorized with addresses:', {
+                            shipping: shippingAddress,
+                            billing: billingAddress,
+                        });
                         // Tokenize the Apple Pay payment
                         const applePayToken = await tokenizeApplePay(event);
                         // Complete the Apple Pay session
@@ -188,5 +253,8 @@ export function useApplePay(options = {}) {
         processingPayment,
         applePayError: error,
         isApplePayAvailable,
+        shouldShowQRCode,
+        qrCodeData,
+        generateQRCode,
     };
 }

package/dist/react/hooks/useCheckout.js

@@ -182,12 +182,7 @@ export function useCheckout(options = {}) {
         if (!currentCheckoutTokenRef.current) {
             throw new Error('No checkout session to refresh');
         }
-        console.log('🔄 [useCheckout] Refreshing checkout data...', {
-            checkoutToken: currentCheckoutTokenRef.current.substring(0, 8) + '...',
-            timestamp: new Date().toISOString(),
-        });
         await getCheckout(currentCheckoutTokenRef.current);
-        console.log('✅ [useCheckout] Refresh completed, debug data will be updated automatically');
     }, [getCheckout]);
     // Register refresh function with coordinator and cleanup on unmount
     useEffect(() => {

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

@@ -0,0 +1,18 @@
+type Primitive = string | number | boolean | null | undefined;
+export interface TranslateOptions {
+    defaultValue?: string;
+}
+export interface UseTranslationsResult {
+    t: (key: string, vars?: Record<string, Primitive>, options?: TranslateOptions) => string;
+    messages: Record<string, string>;
+    locale: string;
+    language: string;
+    region: string;
+}
+/**
+ * useTranslations - Lightweight translator for SDK plugins
+ * - Reads `locale.messages` populated by TagadaProvider session init
+ * - Provides `t(key, vars, options)` with simple `{var}` interpolation
+ */
+export declare function useTranslations(targetLanguageCode?: string): UseTranslationsResult;
+export {};

package/dist/react/hooks/useTranslations.js

@@ -0,0 +1,77 @@
+'use client';
+import { useEffect, useMemo, useState } from 'react';
+import { useTagadaContext } from '../providers/TagadaProvider';
+function interpolate(template, vars) {
+    if (!vars)
+        return template;
+    return template.replace(/\{(\w+)\}/g, (_, name) => {
+        const value = vars[name];
+        return value === null || value === undefined ? '' : String(value);
+    });
+}
+/**
+ * useTranslations - Lightweight translator for SDK plugins
+ * - Reads `locale.messages` populated by TagadaProvider session init
+ * - Provides `t(key, vars, options)` with simple `{var}` interpolation
+ */
+export function useTranslations(targetLanguageCode) {
+    const { locale, apiService, pluginConfig } = useTagadaContext();
+    const selectedLanguage = targetLanguageCode || locale.language;
+    // Prefer backend messages for the selected language; fall back to provider
+    const [fetchedMessages, setFetchedMessages] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        async function fetchMessages() {
+            const region = locale.region || 'US';
+            const desiredLanguage = selectedLanguage;
+            const targetLocale = `${desiredLanguage}-${region}`;
+            try {
+                const storeId = pluginConfig?.storeId;
+                if (!storeId) {
+                    setFetchedMessages(null);
+                    return;
+                }
+                const data = await apiService.fetch('/api/v1/translation-messages', {
+                    method: 'GET',
+                    params: { locale: targetLocale, storeId },
+                });
+                if (!cancelled) {
+                    setFetchedMessages(data || {});
+                }
+            }
+            catch (_err) {
+                if (!cancelled) {
+                    setFetchedMessages(null);
+                }
+            }
+        }
+        void fetchMessages();
+        return () => {
+            cancelled = true;
+        };
+    }, [selectedLanguage, locale.region, pluginConfig?.storeId, apiService]);
+    const messages = useMemo(() => {
+        if (fetchedMessages)
+            return fetchedMessages;
+        return locale.messages || {};
+    }, [fetchedMessages, locale.messages]);
+    const t = useMemo(() => {
+        return (key, vars, opts) => {
+            const raw = messages[key] ?? opts?.defaultValue ?? key;
+            return interpolate(raw, vars);
+        };
+    }, [messages]);
+    const computedLocale = useMemo(() => {
+        if (selectedLanguage === locale.language)
+            return locale.locale;
+        const region = locale.region || 'US';
+        return `${selectedLanguage}-${region}`;
+    }, [selectedLanguage, locale.locale, locale.language, locale.region]);
+    return {
+        t,
+        messages,
+        locale: computedLocale,
+        language: selectedLanguage,
+        region: computedLocale.split('-')[1] || 'US',
+    };
+}

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

@@ -0,0 +1,69 @@
+export interface VipOffer {
+    id: string;
+    productId: string;
+    variantId: string;
+}
+export interface VipPreviewResponse {
+    savings: number;
+    currency: string;
+    selectedOffers: {
+        productId: string;
+        variantId: string;
+        isSelected: boolean;
+    }[];
+    savingsPct: number;
+}
+export interface UseVipOffersOptions {
+    /**
+     * Checkout session ID for VIP offers
+     */
+    checkoutSessionId: string;
+    /**
+     * Array of VIP offer IDs to manage
+     */
+    vipOfferIds: string[];
+    /**
+     * Whether to automatically fetch VIP preview on mount
+     * @default true
+     */
+    autoPreview?: boolean;
+}
+export interface UseVipOffersResult {
+    /**
+     * Array of VIP offers
+     */
+    vipOffers: VipOffer[];
+    /**
+     * VIP preview data including savings and selected offers
+     */
+    vipPreview: VipPreviewResponse | null;
+    /**
+     * Loading state for VIP preview
+     */
+    isLoadingVipPreview: boolean;
+    /**
+     * Whether any VIP offers are currently selected
+     */
+    hasVip: boolean;
+    /**
+     * Check if a specific VIP offer is selected
+     */
+    isOfferSelected: (offer: VipOffer) => boolean;
+    /**
+     * Select all VIP offers
+     */
+    selectVipOffers: () => Promise<void>;
+    /**
+     * Cancel/deselect all VIP offers
+     */
+    cancelVipOffers: () => Promise<void>;
+    /**
+     * Refresh VIP preview data
+     */
+    refreshVipPreview: () => Promise<void>;
+    /**
+     * Error state
+     */
+    error: Error | null;
+}
+export declare function useVipOffers(options: UseVipOffersOptions): UseVipOffersResult;

package/dist/react/hooks/useVipOffers.js

@@ -0,0 +1,144 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useTagadaContext } from '../providers/TagadaProvider';
+export function useVipOffers(options) {
+    const { apiService, refreshCoordinator } = useTagadaContext();
+    const { checkoutSessionId, vipOfferIds, autoPreview = true } = options;
+    const [vipOffers, setVipOffers] = useState([]);
+    const [vipPreview, setVipPreview] = useState(null);
+    const [isLoadingVipPreview, setIsLoadingVipPreview] = useState(false);
+    const [hasVip, setHasVip] = useState(false);
+    const [error, setError] = useState(null);
+    // Convert offer IDs to VipOffer objects
+    useEffect(() => {
+        const offers = vipOfferIds.map((id) => ({
+            id,
+            productId: '', // These will be populated from the checkout session data
+            variantId: '', // These will be populated from the checkout session data
+        }));
+        setVipOffers(offers);
+    }, [vipOfferIds]);
+    // Fetch VIP preview
+    const refreshVipPreview = useCallback(async () => {
+        if (!checkoutSessionId || vipOfferIds.length === 0)
+            return;
+        setIsLoadingVipPreview(true);
+        setError(null);
+        try {
+            const response = await apiService.fetch(`/api/v1/checkout-sessions/${checkoutSessionId}/vip-preview`, {
+                method: 'POST',
+                body: {
+                    orderBumpOfferIds: vipOfferIds,
+                    orderBumpType: 'vip',
+                },
+            });
+            setVipPreview(response);
+            // Update hasVip based on selected offers
+            const hasSelectedVipOffers = response.selectedOffers?.some((offer) => offer.isSelected) ?? false;
+            setHasVip(hasSelectedVipOffers);
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Failed to fetch VIP preview');
+            setError(error);
+            console.error('VIP preview failed:', error);
+        }
+        finally {
+            setIsLoadingVipPreview(false);
+        }
+    }, [checkoutSessionId, vipOfferIds]);
+    // Check if a specific VIP offer is selected
+    const isOfferSelected = useCallback((offer) => {
+        if (!vipPreview?.selectedOffers)
+            return false;
+        return vipPreview.selectedOffers.some((selected) => selected.productId === offer.productId &&
+            selected.variantId === offer.variantId &&
+            selected.isSelected);
+    }, [vipPreview?.selectedOffers]);
+    // Keep hasVip in sync with actual selected offers
+    useEffect(() => {
+        const hasSelectedVipOffers = vipOffers.some(isOfferSelected);
+        if (hasSelectedVipOffers !== hasVip) {
+            setHasVip(hasSelectedVipOffers);
+        }
+    }, [vipOffers, isOfferSelected, hasVip, vipPreview?.selectedOffers]);
+    // Toggle VIP offers mutation
+    const toggleOrderBump = useCallback(async (orderBumpOfferId, selected) => {
+        try {
+            const response = await apiService.fetch(`/api/v1/checkout-sessions/${checkoutSessionId}/toggle-order-bump`, {
+                method: 'POST',
+                body: {
+                    orderBumpOfferId,
+                    selected,
+                },
+            });
+            if (response.success) {
+                // Notify other hooks that checkout data changed
+                await refreshCoordinator.notifyCheckoutChanged();
+            }
+            return response;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Failed to toggle order bump');
+            throw error;
+        }
+    }, [checkoutSessionId]);
+    // Handle selecting VIP offers
+    const selectVipOffers = useCallback(async () => {
+        try {
+            await Promise.all(vipOffers.map((offer) => {
+                if (!isOfferSelected(offer)) {
+                    return toggleOrderBump(offer.id, true);
+                }
+                return Promise.resolve({ success: true });
+            }));
+            setHasVip(true);
+            await refreshVipPreview();
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Failed to select VIP offers');
+            setError(error);
+            console.error('Failed to select VIP offers:', error);
+            throw error;
+        }
+    }, [vipOffers, isOfferSelected, toggleOrderBump, refreshVipPreview]);
+    // Handle canceling VIP offers
+    const cancelVipOffers = useCallback(async () => {
+        try {
+            setHasVip(false);
+            await Promise.all(vipOffers.map((offer) => toggleOrderBump(offer.id, false)));
+            await refreshVipPreview();
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Failed to cancel VIP offers');
+            setError(error);
+            console.error('Failed to cancel VIP offers:', error);
+            setHasVip(true); // Revert optimistic update
+            throw error;
+        }
+    }, [vipOffers, toggleOrderBump, refreshVipPreview]);
+    // Auto-fetch preview on mount and when dependencies change
+    useEffect(() => {
+        if (autoPreview && checkoutSessionId && vipOfferIds.length > 0) {
+            refreshVipPreview().catch((error) => {
+                console.error('Auto-preview failed:', error);
+            });
+        }
+    }, [autoPreview, refreshVipPreview]);
+    // Register refresh function with coordinator and cleanup on unmount
+    useEffect(() => {
+        refreshCoordinator.registerOrderBumpRefresh(refreshVipPreview);
+        return () => {
+            refreshCoordinator.unregisterOrderBumpRefresh();
+        };
+    }, [refreshVipPreview]);
+    return {
+        vipOffers,
+        vipPreview,
+        isLoadingVipPreview,
+        hasVip,
+        isOfferSelected,
+        selectVipOffers,
+        cancelVipOffers,
+        refreshVipPreview,
+        error,
+    };
+}

package/dist/react/index.d.ts

@@ -16,6 +16,8 @@ export { useOrderBump } from './hooks/useOrderBump';
 export { usePostPurchases } from './hooks/usePostPurchases';
 export { useProducts } from './hooks/useProducts';
 export { useSession } from './hooks/useSession';
+export { useTranslations } from './hooks/useTranslations';
+export { useVipOffers } from './hooks/useVipOffers';
 export { useTagadaContext } from './providers/TagadaProvider';
 export { clearPluginConfigCache, debugPluginConfig, getPluginConfig, useBasePath, usePluginConfig } from './hooks/usePluginConfig';
 export type { PluginConfig } from './hooks/usePluginConfig';
@@ -33,9 +35,11 @@ export type { AuthState, Currency, Customer, Environment, EnvironmentConfig, Loc
 export type { CheckoutData, CheckoutInitParams, CheckoutLineItem, CheckoutSession, CheckoutSessionPreview, Promotion, UseCheckoutOptions, UseCheckoutResult } from './hooks/useCheckout';
 export type { Discount, DiscountCodeValidation, UseDiscountsOptions, UseDiscountsResult } from './hooks/useDiscounts';
 export type { OrderBumpPreview, UseOrderBumpOptions, UseOrderBumpResult } from './hooks/useOrderBump';
+export type { UseVipOffersOptions, UseVipOffersResult, VipOffer, VipPreviewResponse } from './hooks/useVipOffers';
 export type { PostPurchaseOffer, PostPurchaseOfferItem, PostPurchaseOfferLineItem, PostPurchaseOfferSummary, UsePostPurchasesOptions, UsePostPurchasesResult } from './hooks/usePostPurchases';
 export type { Payment, PaymentPollingHook, PollingOptions } from './hooks/usePaymentPolling';
 export type { PaymentInstrument, ThreedsChallenge, ThreedsHook, ThreedsOptions, ThreedsProvider, ThreedsSession } from './hooks/useThreeds';
 export type { ApplePayToken, CardPaymentMethod, PaymentHook, PaymentInstrumentResponse, PaymentOptions, PaymentResponse } from './hooks/usePayment';
-export type { ApplePayConfig, ApplePayLineItem, ApplePayPaymentAuthorizedEvent, ApplePayPaymentRequest, ApplePayPaymentToken, ApplePayValidateMerchantEvent, BasisTheorySessionRequest, BasisTheoryTokenizeRequest, PayToken, UseApplePayOptions, UseApplePayResult } from './types/apple-pay';
+export type { ApplePayConfig, ApplePayLineItem, ApplePayPaymentAuthorizedEvent, ApplePayPaymentRequest, ApplePayPaymentToken, ApplePayValidateMerchantEvent, BasisTheorySessionRequest, BasisTheoryTokenizeRequest, PayToken, UseApplePayOptions, UseApplePayResult, ApplePayAddress, ApplePayQRCodeData } from './types/apple-pay';
+export { ApplePayUniversalButton } from './components/ApplePayUniversalButton';
 export { convertCurrency, formatMoney, formatMoneyWithoutSymbol, formatSimpleMoney, getCurrencyInfo, minorUnitsToMajorUnits, moneyStringOrNumberToMinorUnits } from './utils/money';

package/dist/react/index.js

@@ -19,6 +19,8 @@ export { useOrderBump } from './hooks/useOrderBump';
 export { usePostPurchases } from './hooks/usePostPurchases';
 export { useProducts } from './hooks/useProducts';
 export { useSession } from './hooks/useSession';
+export { useTranslations } from './hooks/useTranslations';
+export { useVipOffers } from './hooks/useVipOffers';
 export { useTagadaContext } from './providers/TagadaProvider';
 // Plugin configuration hooks
 export { clearPluginConfigCache, debugPluginConfig, getPluginConfig, useBasePath, usePluginConfig } from './hooks/usePluginConfig';
@@ -33,7 +35,7 @@ export { useThreeds } from './hooks/useThreeds';
 export { useThreedsModal } from './hooks/useThreedsModal';
 // Apple Pay hooks exports
 export { useApplePay } from './hooks/useApplePay';
-// Component exports (if any)
-// export { SomeComponent } from './components/SomeComponent';
+// Component exports
+export { ApplePayUniversalButton } from './components/ApplePayUniversalButton';
 // Utility exports
 export { convertCurrency, formatMoney, formatMoneyWithoutSymbol, formatSimpleMoney, getCurrencyInfo, minorUnitsToMajorUnits, moneyStringOrNumberToMinorUnits } from './utils/money';

package/dist/react/providers/TagadaProvider.js

@@ -38,11 +38,11 @@ const InitializationLoader = () => (_jsxs("div", { style: {
                 borderTop: '1.5px solid #9ca3af',
                 borderRadius: '50%',
                 animation: 'tagada-spin 1s linear infinite',
-            } }), _jsx("span", { children: "Loading..." }), _jsx("style", { children: `
-        @keyframes tagada-spin {
-          0% { transform: rotate(0deg); }
-          100% { transform: rotate(360deg); }
-        }
+            } }), _jsx("span", { children: "Loading..." }), _jsx("style", { children: `
+        @keyframes tagada-spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
       ` })] }));
 const TagadaContext = createContext(null);
 export function TagadaProvider({ children, environment, customApiConfig, debugMode, // Remove default, will be set based on environment