@tagadapay/plugin-sdk 1.0.2

package/dist/react/hooks/useThreedsModal.js

@@ -0,0 +1,328 @@
+import { useCallback } from 'react';
+export function useThreedsModal() {
+    // Close the 3DS modal
+    const closeThreedsModal = useCallback((containerId = 'threedscontainer') => {
+        const container = document.getElementById(containerId);
+        const backdrop = document.getElementById(`${containerId}-backdrop`);
+        if (container && backdrop) {
+            // Animate out
+            container.style.transform = 'scale(0.95)';
+            container.style.opacity = '0';
+            backdrop.style.opacity = '0';
+            setTimeout(() => {
+                if (backdrop && document.body.contains(backdrop)) {
+                    document.body.removeChild(backdrop);
+                }
+                // Remove escape key listener
+                document.removeEventListener('keydown', (e) => {
+                    if (e.key === 'Escape')
+                        closeThreedsModal(containerId);
+                });
+            }, 300);
+        }
+    }, []);
+    // Create and open a modal for 3DS authentication
+    const createThreedsModal = useCallback((options = {}) => {
+        const { containerId = 'threedscontainer', mode = 'auto-fit', onClose } = options;
+        // Remove any existing modal first
+        const existingContainer = document.getElementById(containerId);
+        const existingBackdrop = document.getElementById(`${containerId}-backdrop`);
+        if (existingContainer)
+            document.body.removeChild(existingContainer);
+        if (existingBackdrop)
+            document.body.removeChild(existingBackdrop);
+        // Create backdrop
+        const backdrop = document.createElement('div');
+        backdrop.id = `${containerId}-backdrop`;
+        Object.assign(backdrop.style, {
+            position: 'fixed',
+            top: '0',
+            left: '0',
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'rgba(0, 0, 0, 0.6)',
+            zIndex: '9998',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            transition: 'opacity 0.3s ease',
+            opacity: '0',
+        });
+        // Create modal container
+        const container = document.createElement('div');
+        container.id = containerId;
+        // Check if mobile initially
+        let isMobile = window.innerWidth < 768;
+        // Base styles for both modes
+        const baseStyles = {
+            position: 'relative',
+            backgroundColor: 'white',
+            borderRadius: '12px',
+            boxShadow: '0 10px 25px rgba(0, 0, 0, 0.2)',
+            maxWidth: '100%',
+            overflow: 'hidden',
+            zIndex: '9999',
+            transition: 'transform 0.3s ease, opacity 0.3s ease, width 0.3s ease, height 0.3s ease',
+            transform: 'scale(0.95)',
+            opacity: '0',
+        };
+        // Function to apply styles based on screen size and mode
+        const applyResponsiveStyles = () => {
+            isMobile = window.innerWidth < 768;
+            backdrop.style.alignItems = 'center';
+            backdrop.style.justifyContent = 'center';
+            if (mode === 'fixed') {
+                if (isMobile) {
+                    Object.assign(container.style, {
+                        ...baseStyles,
+                        position: 'fixed',
+                        top: '0',
+                        left: '0',
+                        right: '0',
+                        bottom: '0',
+                        width: '100%',
+                        height: '100%',
+                        borderRadius: '0',
+                        margin: '0',
+                        backgroundColor: 'white',
+                        transform: 'scale(0.95)',
+                        opacity: '0',
+                        maxHeight: '100%',
+                    });
+                }
+                else {
+                    Object.assign(container.style, {
+                        ...baseStyles,
+                        width: '550px',
+                        height: '600px',
+                        maxHeight: '85vh',
+                        position: 'relative',
+                        borderRadius: '12px',
+                        margin: 'auto',
+                        backgroundColor: 'white',
+                        transform: 'scale(0.95)',
+                        opacity: '0',
+                    });
+                }
+            }
+            else {
+                // auto-fit mode
+                if (isMobile) {
+                    Object.assign(container.style, {
+                        ...baseStyles,
+                        position: 'fixed',
+                        top: '0',
+                        left: '0',
+                        right: '0',
+                        bottom: '0',
+                        width: '100%',
+                        height: '100%',
+                        borderRadius: '0',
+                        margin: '0',
+                        backgroundColor: 'white',
+                        transform: 'scale(0.95)',
+                        opacity: '0',
+                        maxHeight: '100%',
+                    });
+                }
+                else {
+                    Object.assign(container.style, {
+                        ...baseStyles,
+                        width: '550px',
+                        maxHeight: '85vh',
+                        height: 'auto',
+                        minHeight: '250px',
+                        position: 'relative',
+                        borderRadius: '12px',
+                        margin: 'auto',
+                        backgroundColor: 'white',
+                        transform: 'scale(0.95)',
+                        opacity: '0',
+                    });
+                }
+            }
+        };
+        // Apply initial styles
+        applyResponsiveStyles();
+        // Create header
+        const header = document.createElement('div');
+        Object.assign(header.style, {
+            padding: '16px 20px',
+            borderBottom: '1px solid #eaeaea',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            backgroundColor: 'white',
+        });
+        // Add title
+        const title = document.createElement('h3');
+        title.textContent = 'Secure Authentication';
+        Object.assign(title.style, {
+            margin: '0',
+            fontSize: '18px',
+            fontWeight: '600',
+            color: '#333',
+        });
+        // Add close button
+        const closeButton = document.createElement('button');
+        closeButton.innerHTML = '&times;';
+        Object.assign(closeButton.style, {
+            background: 'none',
+            border: 'none',
+            fontSize: '24px',
+            cursor: 'pointer',
+            color: '#666',
+            padding: '0 5px',
+            lineHeight: '1',
+        });
+        // Create content area
+        const content = document.createElement('div');
+        content.id = `${containerId}-content`;
+        // Function to update content styles based on mode and screen size
+        const updateContentStyles = () => {
+            if (mode === 'fixed') {
+                Object.assign(content.style, {
+                    height: isMobile ? 'calc(100% - 60px)' : 'calc(100% - 60px)',
+                    width: '100%',
+                    overflow: 'hidden',
+                    backgroundColor: 'white',
+                });
+            }
+            else {
+                // auto-fit mode
+                if (isMobile) {
+                    Object.assign(content.style, {
+                        width: '100%',
+                        height: 'calc(100% - 60px)',
+                        overflow: 'auto',
+                        padding: '16px',
+                        backgroundColor: 'white',
+                    });
+                }
+                else {
+                    Object.assign(content.style, {
+                        width: '100%',
+                        overflow: 'auto',
+                        padding: '20px',
+                        maxHeight: 'calc(85vh - 60px)',
+                        backgroundColor: 'white',
+                    });
+                }
+            }
+        };
+        // Apply initial content styles
+        updateContentStyles();
+        // Update close handlers to call onClose callback
+        const handleClose = () => {
+            onClose?.();
+            closeThreedsModal(containerId);
+        };
+        // Update event listeners
+        closeButton.onclick = handleClose;
+        backdrop.onclick = (e) => {
+            if (e.target === backdrop) {
+                handleClose();
+            }
+        };
+        // Update escape key listener
+        const escKeyHandler = (e) => {
+            if (e.key === 'Escape') {
+                handleClose();
+            }
+        };
+        document.addEventListener('keydown', escKeyHandler);
+        // Assemble the modal
+        header.appendChild(title);
+        header.appendChild(closeButton);
+        container.appendChild(header);
+        container.appendChild(content);
+        backdrop.appendChild(container);
+        document.body.appendChild(backdrop);
+        // Animate in with a slight delay to ensure proper rendering
+        setTimeout(() => {
+            backdrop.style.opacity = '1';
+            container.style.transform = 'scale(1)';
+            container.style.opacity = '1';
+        }, 50);
+        // Function to adjust height in auto-fit mode
+        const adjustAutoFitHeight = () => {
+            if (!content)
+                return;
+            if (isMobile) {
+                content.style.height = 'calc(100% - 60px)';
+                content.style.overflowY = 'auto';
+            }
+            else {
+                const viewportHeight = window.innerHeight;
+                const contentHeight = content.scrollHeight;
+                const headerHeight = header.offsetHeight;
+                const maxModalHeight = viewportHeight * 0.85;
+                if (contentHeight + headerHeight < maxModalHeight) {
+                    container.style.height = 'auto';
+                    content.style.overflowY = 'visible';
+                }
+                else {
+                    container.style.height = `${maxModalHeight}px`;
+                    content.style.height = `${maxModalHeight - headerHeight}px`;
+                    content.style.overflowY = 'auto';
+                }
+            }
+        };
+        // Handle window resize
+        const handleResize = () => {
+            const currentOpacity = container.style.opacity;
+            const currentTransform = container.style.transform;
+            applyResponsiveStyles();
+            updateContentStyles();
+            container.style.opacity = currentOpacity;
+            container.style.transform = currentTransform;
+            if (mode === 'auto-fit') {
+                adjustAutoFitHeight();
+            }
+        };
+        // Set up mutation observer to detect content changes
+        const contentObserver = new MutationObserver(() => {
+            if (mode === 'auto-fit') {
+                setTimeout(adjustAutoFitHeight, 50);
+            }
+        });
+        contentObserver.observe(content, {
+            childList: true,
+            subtree: true,
+            characterData: true,
+            attributes: true,
+        });
+        // For auto-fit mode, set up resize observer for content element
+        let resizeObserver = null;
+        if (mode === 'auto-fit') {
+            resizeObserver = new ResizeObserver(() => {
+                adjustAutoFitHeight();
+            });
+            resizeObserver.observe(content);
+        }
+        // Add window resize listener
+        window.addEventListener('resize', handleResize);
+        // Create a function to manually trigger height adjustment
+        const updateModalSize = () => {
+            if (mode === 'auto-fit') {
+                adjustAutoFitHeight();
+            }
+        };
+        return {
+            containerId,
+            getContentElement: () => document.getElementById(`${containerId}-content`),
+            updateModalSize,
+            cleanup: () => {
+                window.removeEventListener('resize', handleResize);
+                if (resizeObserver) {
+                    resizeObserver.disconnect();
+                }
+                contentObserver.disconnect();
+            },
+        };
+    }, [closeThreedsModal]);
+    return {
+        createThreedsModal,
+        closeThreedsModal,
+    };
+}

package/dist/react/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * React SDK exports
+ */
+export { TagadaProvider } from './providers/TagadaProvider';
+export { useCheckout } from './hooks/useCheckout';
+export { useProducts } from './hooks/useProducts';
+export { useOffers } from './hooks/useOffers';
+export { useSession } from './hooks/useSession';
+export { useCurrency } from './hooks/useCurrency';
+export { useCustomer } from './hooks/useCustomer';
+export { useEnvironment } from './hooks/useEnvironment';
+export { useLocale } from './hooks/useLocale';
+export { useAuth } from './hooks/useAuth';
+export { useOrder } from './hooks/useOrder';
+export type { UseOrderOptions, UseOrderResult } from './hooks/useOrder';
+export { usePayment } from './hooks/usePayment';
+export { usePaymentPolling } from './hooks/usePaymentPolling';
+export { useThreeds } from './hooks/useThreeds';
+export { useThreedsModal } from './hooks/useThreedsModal';
+export type { Customer, Session, AuthState, Locale, Currency, Store, Environment, EnvironmentConfig, Order, OrderItem, OrderSummary, OrderAddress, PickupPoint, } from './types';
+export type { UseCheckoutOptions, UseCheckoutResult, CheckoutInitParams, CheckoutLineItem, CheckoutSession, CheckoutData, Promotion, } from './hooks/useCheckout';
+export type { Payment, PollingOptions, PaymentPollingHook } from './hooks/usePaymentPolling';
+export type { PaymentInstrument, ThreedsSession, ThreedsChallenge, ThreedsOptions, ThreedsHook, ThreedsProvider, } from './hooks/useThreeds';
+export type { ThreedsModalOptions, ThreedsModalInstance, ThreedsModalHook } from './hooks/useThreedsModal';
+export type { ApplePayToken, CardPaymentMethod, PaymentResponse, PaymentOptions, PaymentInstrumentResponse, PaymentHook, } from './hooks/usePayment';
+export { formatMoney, formatMoneyWithoutSymbol, getCurrencyInfo, minorUnitsToMajorUnits, moneyStringOrNumberToMinorUnits, convertCurrency, formatSimpleMoney, } from './utils/money';

package/dist/react/index.js

@@ -0,0 +1,27 @@
+/**
+ * React SDK exports
+ */
+// Main entry point for Tagada Pay React SDK
+// Provider exports
+export { TagadaProvider } from './providers/TagadaProvider';
+// Hook exports
+export { useCheckout } from './hooks/useCheckout';
+export { useProducts } from './hooks/useProducts';
+export { useOffers } from './hooks/useOffers';
+export { useSession } from './hooks/useSession';
+export { useCurrency } from './hooks/useCurrency';
+export { useCustomer } from './hooks/useCustomer';
+export { useEnvironment } from './hooks/useEnvironment';
+export { useLocale } from './hooks/useLocale';
+export { useAuth } from './hooks/useAuth';
+// Order hook exports
+export { useOrder } from './hooks/useOrder';
+// Payment hooks exports
+export { usePayment } from './hooks/usePayment';
+export { usePaymentPolling } from './hooks/usePaymentPolling';
+export { useThreeds } from './hooks/useThreeds';
+export { useThreedsModal } from './hooks/useThreedsModal';
+// Component exports (if any)
+// export { SomeComponent } from './components/SomeComponent';
+// Utility exports
+export { formatMoney, formatMoneyWithoutSymbol, getCurrencyInfo, minorUnitsToMajorUnits, moneyStringOrNumberToMinorUnits, convertCurrency, formatSimpleMoney, } from './utils/money';

package/dist/react/providers/TagadaProvider.d.ts

@@ -0,0 +1,55 @@
+/**
+ * TagadaProvider - Main provider component for the Tagada Pay React SDK
+ */
+import { ReactNode } from 'react';
+import { Customer, Session, AuthState, Locale, Currency, Store, Environment, EnvironmentConfig } from '../types';
+import { ApiService } from '../services/apiService';
+import { formatMoney, getCurrencyInfo, moneyStringOrNumberToMinorUnits, minorUnitsToMajorUnits, formatMoneyWithoutSymbol, convertCurrency, formatSimpleMoney } from '../utils/money';
+interface TagadaContextValue {
+    auth: AuthState;
+    session: Session | null;
+    customer: Customer | null;
+    locale: Locale;
+    currency: Currency;
+    store: Store | null;
+    environment: EnvironmentConfig;
+    apiService: ApiService;
+    isLoading: boolean;
+    isInitialized: boolean;
+    debugMode: boolean;
+    debugCheckout: {
+        isActive: boolean;
+        data: any;
+        error: Error | null;
+        isLoading: boolean;
+        lastUpdated: Date | null;
+    };
+    updateCheckoutDebugData: (data: any, error?: Error | null, isLoading?: boolean) => void;
+    money: {
+        formatMoney: typeof formatMoney;
+        getCurrencyInfo: typeof getCurrencyInfo;
+        moneyStringOrNumberToMinorUnits: typeof moneyStringOrNumberToMinorUnits;
+        minorUnitsToMajorUnits: typeof minorUnitsToMajorUnits;
+        formatMoneyWithoutSymbol: typeof formatMoneyWithoutSymbol;
+        convertCurrency: typeof convertCurrency;
+        formatSimpleMoney: typeof formatSimpleMoney;
+    };
+}
+interface TagadaProviderProps {
+    children: ReactNode;
+    environment?: Environment;
+    customApiConfig?: Partial<EnvironmentConfig>;
+    developmentMode?: boolean;
+    debugMode?: boolean;
+    storeId?: string;
+    accountId?: string;
+    mockData?: {
+        customer?: Partial<Customer>;
+        session?: Partial<Session>;
+        store?: Partial<Store>;
+    };
+}
+export declare function TagadaProvider({ children, environment, customApiConfig, developmentMode, debugMode, // Remove default, will be set based on environment
+storeId, accountId, mockData, }: TagadaProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useTagadaContext(): TagadaContextValue;
+export {};