@tagadapay/plugin-sdk 2.4.3 → 2.4.5

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

@@ -0,0 +1,71 @@
+import React, { ReactNode } from 'react';
+import { CheckoutData } from './useCheckout';
+export interface Address {
+    address1: string;
+    address2?: string;
+    lastName?: string;
+    firstName?: string;
+    city?: string;
+    state?: string;
+    country?: string;
+    postal?: string;
+    phone?: string;
+    email?: string;
+}
+type PaymentMethod = {
+    id: string;
+    type: string;
+    title: string;
+    iconUrl: string;
+    default: boolean;
+    metadata?: Record<string, unknown>;
+};
+type ExpressOrderLineItem = {
+    label: string;
+    amount: string;
+};
+type ExpressShippingMethod = {
+    label: string;
+    amount: string;
+    identifier: string;
+    detail: string;
+};
+export interface ExpressPaymentContextType {
+    applePayPaymentMethod?: PaymentMethod;
+    googlePayPaymentMethod?: PaymentMethod;
+    reComputeOrderSummary: () => Promise<{
+        lineItems: ExpressOrderLineItem[];
+        total: {
+            label: string;
+            amount: string;
+        };
+        shippingMethods: ExpressShippingMethod[];
+    } | undefined>;
+    loading?: boolean;
+    availableExpressPaymentMethodIds: string[];
+    setAvailableExpressPaymentMethodIds: (value: string[]) => void;
+    shippingMethods: ExpressShippingMethod[];
+    lineItems: ExpressOrderLineItem[];
+    handleAddExpressId: (id: string) => void;
+    updateCheckoutSessionValues: (input: {
+        data: {
+            shippingAddress: Address;
+            billingAddress?: Address | null;
+        };
+    }) => Promise<void>;
+    updateCustomerEmail: (input: {
+        data: {
+            email: string;
+        };
+    }) => Promise<void>;
+    error: string | null;
+    setError: (error: string | null) => void;
+}
+interface ExpressPaymentProviderProps {
+    children: ReactNode;
+    customerId?: string;
+    checkout?: CheckoutData;
+}
+export declare const ExpressPaymentProvider: React.FC<ExpressPaymentProviderProps>;
+export declare const useExpressPayment: () => ExpressPaymentContextType;
+export {};

package/dist/react/hooks/useExpressPayment.js

@@ -0,0 +1,158 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { useTagadaContext } from '../providers/TagadaProvider';
+import { useOrderSummary } from './useOrderSummary';
+import { useShippingRates } from './useShippingRates';
+const ExpressPaymentContext = createContext(undefined);
+export const ExpressPaymentProvider = ({ children, customerId, checkout, }) => {
+    const { apiService } = useTagadaContext();
+    const [availableExpressPaymentMethodIds, setAvailableExpressPaymentMethodIds] = useState([]);
+    const [error, setError] = useState(null);
+    const [paymentMethods, setPaymentMethods] = useState(null);
+    const [isLoadingPaymentMethods, setIsLoadingPaymentMethods] = useState(false);
+    const checkoutSessionId = checkout?.checkoutSession.id;
+    // Fetch enabled payment methods for this checkout session
+    React.useEffect(() => {
+        let mounted = true;
+        const fetchPaymentMethods = async () => {
+            try {
+                if (!checkoutSessionId)
+                    return;
+                setIsLoadingPaymentMethods(true);
+                const response = await apiService.fetch(`/api/v1/payment-methods?checkoutSessionId=${encodeURIComponent(checkoutSessionId)}`);
+                if (mounted)
+                    setPaymentMethods(response);
+            }
+            catch (e) {
+                if (mounted)
+                    setPaymentMethods([]);
+            }
+            finally {
+                if (mounted)
+                    setIsLoadingPaymentMethods(false);
+            }
+        };
+        if (checkout)
+            void fetchPaymentMethods();
+        return () => {
+            mounted = false;
+        };
+    }, [apiService, checkoutSessionId]);
+    const handleAddExpressId = (id) => {
+        setAvailableExpressPaymentMethodIds((prev) => (prev.includes(id) ? prev : [...prev, id]));
+    };
+    // Base data hooks
+    const { orderSummary, isLoading: isLoadingOrderSummary, isRefetching: isRefetchingOrderSummary, refetch: refetchOrderSummary, } = useOrderSummary({ sessionId: checkoutSessionId });
+    const { shippingRates, refetch: refetchRates } = useShippingRates({ checkout });
+    const minorUnitsToCurrencyString = (amountMinor, currency) => {
+        if (!amountMinor || !currency)
+            return '0.00';
+        return (amountMinor / 100).toFixed(2);
+    };
+    const shippingMethods = useMemo(() => (shippingRates || []).map((rate) => ({
+        label: rate.shippingRateName,
+        amount: minorUnitsToCurrencyString(rate.amount, rate.currency),
+        identifier: rate.id,
+        detail: rate.description || '',
+    })), [shippingRates]);
+    const lineItems = useMemo(() => [
+        {
+            label: 'Subtotal',
+            amount: minorUnitsToCurrencyString(orderSummary?.subtotalAdjustedAmount, orderSummary?.currency),
+        },
+        {
+            label: 'Shipping',
+            amount: minorUnitsToCurrencyString(orderSummary?.shippingCost ?? 0, orderSummary?.currency),
+        },
+        {
+            label: 'Tax',
+            amount: minorUnitsToCurrencyString(orderSummary?.totalTaxAmount, orderSummary?.currency),
+        },
+    ], [
+        orderSummary?.subtotalAdjustedAmount,
+        orderSummary?.shippingCost,
+        orderSummary?.totalTaxAmount,
+        orderSummary?.currency,
+    ]);
+    const reComputeOrderSummary = useCallback(async () => {
+        try {
+            await refetchOrderSummary();
+            await refetchRates();
+            if (!orderSummary || !shippingRates)
+                return;
+            const recomputedLineItems = [
+                {
+                    label: 'Subtotal',
+                    amount: minorUnitsToCurrencyString(orderSummary.subtotalAdjustedAmount, orderSummary.currency),
+                },
+                {
+                    label: 'Shipping',
+                    amount: minorUnitsToCurrencyString(orderSummary.shippingCost ?? 0, orderSummary.currency),
+                },
+                {
+                    label: 'Tax',
+                    amount: minorUnitsToCurrencyString(orderSummary.totalTaxAmount, orderSummary.currency),
+                },
+            ];
+            const total = {
+                label: 'Order Total',
+                amount: minorUnitsToCurrencyString(orderSummary.totalAdjustedAmount, orderSummary.currency),
+            };
+            const recomputedShippingMethods = (shippingRates || []).map((rate) => ({
+                label: rate.shippingRateName,
+                amount: minorUnitsToCurrencyString(rate.amount, rate.currency),
+                identifier: rate.id,
+                detail: rate.description || '',
+            }));
+            return {
+                lineItems: recomputedLineItems,
+                total,
+                shippingMethods: recomputedShippingMethods,
+            };
+        }
+        catch (e) {
+            return undefined;
+        }
+    }, [orderSummary, shippingRates, refetchOrderSummary, refetchRates]);
+    const updateCheckoutSessionValues = useCallback(async (input) => {
+        await apiService.fetch(`/api/v1/checkout-sessions/${checkoutSessionId}/address`, {
+            method: 'POST',
+            body: input,
+        });
+    }, [apiService, checkoutSessionId]);
+    const updateCustomerEmail = useCallback(async (input) => {
+        if (!customerId)
+            return;
+        await apiService.fetch(`/api/v1/customers/${customerId}`, {
+            method: 'POST',
+            body: input,
+        });
+    }, [apiService, customerId]);
+    const enabledApplePayPaymentMethod = useMemo(() => paymentMethods?.find((p) => p.type === 'apple_pay'), [paymentMethods]);
+    const enabledGooglePayPaymentMethod = useMemo(() => paymentMethods?.find((p) => p.type === 'google_pay'), [paymentMethods]);
+    const loading = !paymentMethods || isLoadingPaymentMethods || isLoadingOrderSummary;
+    const contextValue = {
+        availableExpressPaymentMethodIds,
+        setAvailableExpressPaymentMethodIds,
+        applePayPaymentMethod: enabledApplePayPaymentMethod,
+        googlePayPaymentMethod: enabledGooglePayPaymentMethod,
+        shippingMethods,
+        lineItems,
+        reComputeOrderSummary,
+        loading,
+        handleAddExpressId,
+        updateCheckoutSessionValues,
+        updateCustomerEmail,
+        error,
+        setError,
+    };
+    const hasAnyEnabled = Boolean(enabledApplePayPaymentMethod || enabledGooglePayPaymentMethod);
+    return (_jsx(ExpressPaymentContext.Provider, { value: contextValue, children: hasAnyEnabled ? _jsx(_Fragment, { children: children }) : _jsx(_Fragment, {}) }));
+};
+export const useExpressPayment = () => {
+    const context = useContext(ExpressPaymentContext);
+    if (context === undefined) {
+        throw new Error('useExpressPayment must be used within an ExpressPaymentProvider');
+    }
+    return context;
+};

package/dist/react/hooks/useProducts.js

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTagadaContext } from '../providers/TagadaProvider';
 import { usePluginConfig } from './usePluginConfig';
 export function useProducts(options = {}) {
@@ -42,6 +42,7 @@ export function useProducts(options = {}) {
                             productId,
                             storeId,
                         },
+                        skipAuth: true,
                     });
                 });
                 const fetchedProducts = await Promise.all(fetchPromises);
@@ -56,6 +57,7 @@ export function useProducts(options = {}) {
                         includeVariants,
                         includePrices,
                     },
+                    skipAuth: true,
                 });
                 setProducts(Array.isArray(data) ? data : (data.items ?? []));
             }

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

@@ -1,4 +1,4 @@
-import { PickupPoint } from '../types';
+import { CheckoutData } from './useCheckout';
 export interface ShippingRate {
     id: string;
     shippingRateName: string;
@@ -13,36 +13,19 @@ export interface ShippingRate {
 }
 export interface ShippingRatesResponse {
     rates: ShippingRate[];
-    pickupPoint?: PickupPoint;
     forceCheckoutSessionRefetch?: boolean;
 }
 export interface UseShippingRatesOptions {
     onSuccess?: () => void;
-    disabled?: boolean;
-    checkoutSessionId?: string;
+    checkout?: CheckoutData;
 }
 export interface UseShippingRatesResult {
     shippingRates: ShippingRate[] | undefined;
-    forceCheckoutSessionRefetch: boolean | undefined;
-    handleSelectRate: (rateId: string) => void;
-    isPickupPointSelected: boolean;
-    selectedRateId: string | null;
-    setSelectedRateId: (rateId: string | null) => void;
-    setShippingRate: (data: {
-        shippingRateId: string;
-    }) => Promise<void>;
-    setShippingRateAsync: (data: {
-        shippingRateId: string;
-    }) => Promise<void>;
-    isPending: boolean;
-    isFetching: boolean;
+    selectedRate: ShippingRate | undefined;
+    selectRate: (rateId: string) => Promise<void> | undefined;
     isLoading: boolean;
     error: Error | null;
+    clearError: () => void;
     refetch: () => Promise<void>;
-    setPickupPoint: (data: {
-        checkoutSessionId: string;
-        data: PickupPoint;
-    }) => Promise<void>;
-    selectedRate: ShippingRate | undefined;
 }
-export declare const useShippingRates: ({ onSuccess, disabled, checkoutSessionId }?: UseShippingRatesOptions) => UseShippingRatesResult;
+export declare const useShippingRates: ({ onSuccess, checkout }?: UseShippingRatesOptions) => UseShippingRatesResult;

package/dist/react/hooks/useShippingRates.js

@@ -26,31 +26,34 @@ function useDebounce(callback, delay) {
         }, delay);
     }), [callback, delay]);
 }
-export const useShippingRates = ({ onSuccess, disabled, checkoutSessionId } = {}) => {
+export const useShippingRates = ({ onSuccess, checkout } = {}) => {
     const { apiService } = useTagadaContext();
     const [selectedRateId, setSelectedRateId] = useState(null);
+    // At very first init, set the shipping rate from the checkout if available
     const [shippingRates, setShippingRates] = useState();
-    const [forceCheckoutSessionRefetch, setForceCheckoutSessionRefetch] = useState();
-    const [isLoading, setIsLoading] = useState(false);
     const [isFetching, setIsFetching] = useState(false);
     const [isPending, setIsPending] = useState(false);
     const [error, setError] = useState(null);
     const isMountedRef = useRef(true);
     const isUpdatingRef = useRef(false);
-    // Use checkoutSessionId from props or fall back to session
-    const sessionId = checkoutSessionId;
+    const previousSessionIdRef = useRef(undefined);
+    const isFetchingRef = useRef(false);
+    const hasSyncedSelectionFromCheckoutRef = useRef(false);
+    const sessionId = checkout?.checkoutSession.id;
     // Track mounted state
     useEffect(() => {
         isMountedRef.current = true;
         return () => {
             isMountedRef.current = false;
+            isFetchingRef.current = false;
         };
     }, []);
     // Fetch shipping rates
     const fetchShippingRates = useCallback(async () => {
-        if (!sessionId || !apiService)
+        if (!sessionId || !apiService || isFetchingRef.current)
             return;
         try {
+            isFetchingRef.current = true;
             setIsFetching(true);
             setError(null);
             const response = await apiService.fetch(`/api/v1/checkout-sessions/${sessionId}/shipping-rates`, {
@@ -61,7 +64,6 @@ export const useShippingRates = ({ onSuccess, disabled, checkoutSessionId } = {}
             });
             if (isMountedRef.current) {
                 setShippingRates(response.rates);
-                setForceCheckoutSessionRefetch(response.forceCheckoutSessionRefetch);
             }
         }
         catch (err) {
@@ -71,17 +73,17 @@ export const useShippingRates = ({ onSuccess, disabled, checkoutSessionId } = {}
         }
         finally {
             if (isMountedRef.current) {
+                isFetchingRef.current = false;
                 setIsFetching(false);
             }
         }
     }, [sessionId, apiService]);
-    // Initial fetch of shipping rates when sessionId is available
     useEffect(() => {
-        if (sessionId && !disabled && isMountedRef.current) {
+        if (sessionId && isMountedRef.current && sessionId !== previousSessionIdRef.current) {
+            previousSessionIdRef.current = sessionId;
             fetchShippingRates();
         }
-    }, [sessionId, disabled, fetchShippingRates]);
-    // Debounced success handler to prevent query invalidation storms
+    }, [sessionId]);
     const debouncedOnSuccess = useDebounce(useCallback(async () => {
         if (!isMountedRef.current || isUpdatingRef.current)
             return;
@@ -101,14 +103,15 @@ export const useShippingRates = ({ onSuccess, disabled, checkoutSessionId } = {}
                 isUpdatingRef.current = false;
             }
         }
-    }, [fetchShippingRates, onSuccess]), 300);
+    }, [onSuccess]), // Removed fetchShippingRates from dependencies
+    300);
     // Set shipping rate mutation
     const setShippingRate = useCallback(async (data) => {
         if (!sessionId || !apiService)
             return;
         try {
             setIsPending(true);
-            setError(null);
+            clearError();
             await apiService.fetch(`/api/v1/checkout-sessions/${sessionId}/shipping-rate`, {
                 method: 'POST',
                 body: data,
@@ -129,76 +132,54 @@ export const useShippingRates = ({ onSuccess, disabled, checkoutSessionId } = {}
             }
         }
     }, [sessionId, apiService, debouncedOnSuccess, selectedRateId]);
-    const setShippingRateAsync = setShippingRate; // Alias for consistency
-    // Debounced refetch for country/postal changes
-    const debouncedRefetchRates = useDebounce(fetchShippingRates, 500);
-    // Set pickup point mutation
-    const setPickupPoint = useCallback(async (data) => {
-        if (!apiService)
-            return;
-        try {
-            setIsPending(true);
-            setError(null);
-            await apiService.fetch(`/api/v1/checkout-sessions/${data.checkoutSessionId}/pickup-point`, {
-                method: 'POST',
-                body: { data: data.data },
-            });
-            if (isMountedRef.current) {
-                await debouncedOnSuccess();
-            }
-        }
-        catch (err) {
-            if (isMountedRef.current) {
-                setSelectedRateId(selectedRateId); // Revert to previous selection
-                setError(err instanceof Error ? err : new Error('Failed to update pickup point'));
-            }
-        }
-        finally {
-            if (isMountedRef.current) {
-                setIsPending(false);
-            }
-        }
-    }, [apiService, debouncedOnSuccess, selectedRateId]);
+    // Stable refetch function that can be called externally
+    const refetch = useCallback(() => {
+        return fetchShippingRates();
+    }, [fetchShippingRates]);
     const handleSelectRate = useCallback((rateId) => {
-        if (isPending || disabled || !isMountedRef.current)
+        if (isPending || !isMountedRef.current)
             return;
-        const selectedRate = shippingRates?.find((rate) => rate.id === rateId);
         if (isMountedRef.current) {
             setSelectedRateId(rateId);
-            setShippingRate({ shippingRateId: rateId });
+            return setShippingRate({ shippingRateId: rateId });
+        }
+    }, [setShippingRate, isPending]);
+    const findCheapestShippingRate = useCallback(() => {
+        if (!shippingRates || shippingRates.length === 0)
+            return;
+        if (selectedRateId) {
+            const exists = shippingRates.some((r) => r.id === selectedRateId);
+            if (!exists) {
+                // Find the cheapest shipping rate and select it
+                const cheapest = shippingRates.reduce((min, rate) => {
+                    return rate.amount < min.amount ? rate : min;
+                }, shippingRates[0]);
+                handleSelectRate(cheapest.id);
+            }
         }
-    }, [setShippingRate, isPending, disabled, shippingRates]);
-    // Auto-select shipping rate when only one is available
+    }, [shippingRates, selectedRateId, setShippingRate]);
+    // Sync selectedRateId from checkout only once when checkout data becomes available
     useEffect(() => {
-        if (!shippingRates?.length || selectedRateId || !isMountedRef.current)
+        if (!hasSyncedSelectionFromCheckoutRef.current && checkout?.checkoutSession.shippingRate?.id) {
+            setSelectedRateId(checkout.checkoutSession.shippingRate.id);
+            hasSyncedSelectionFromCheckoutRef.current = true;
             return;
-        const nonPickupRates = shippingRates.filter((rate) => !rate.isPickupPoint);
-        if (nonPickupRates.length === 1) {
-            handleSelectRate(nonPickupRates[0].id);
         }
-        else if (nonPickupRates.length > 1) {
-            const cheapestRate = nonPickupRates.reduce((prev, current) => current.amount < prev.amount ? current : prev);
-            handleSelectRate(cheapestRate.id);
+        else if (shippingRates && shippingRates.length > 0 && !shippingRates.find((rate) => rate.id === selectedRateId)) {
+            findCheapestShippingRate();
         }
-    }, [shippingRates, selectedRateId, handleSelectRate]);
-    // Get the currently selected shipping rate
+    }, [checkout?.checkoutSession.shippingRate?.id, shippingRates]);
     const selectedRate = shippingRates?.find((rate) => rate.id === selectedRateId);
-    const isPickupPointSelected = Boolean(selectedRate?.isPickupPoint);
+    const clearError = useCallback(() => {
+        setError(null);
+    }, []);
     return {
         shippingRates,
-        forceCheckoutSessionRefetch,
-        handleSelectRate,
-        isPickupPointSelected,
-        selectedRateId,
-        setSelectedRateId,
-        setShippingRate,
-        setShippingRateAsync,
-        isPending,
-        isFetching,
-        isLoading,
-        error,
-        refetch: fetchShippingRates,
-        setPickupPoint,
         selectedRate,
+        selectRate: handleSelectRate,
+        isLoading: isFetching || isPending,
+        error,
+        clearError,
+        refetch,
     };
 };

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 { useShippingRates } from './hooks/useShippingRates';
+export type { UseShippingRatesOptions, UseShippingRatesResult } from './hooks/useShippingRates';
 export { useTranslations } from './hooks/useTranslations';
 export { useVipOffers } from './hooks/useVipOffers';
 export { useTagadaContext } from './providers/TagadaProvider';
@@ -31,6 +33,7 @@ export { usePaymentPolling } from './hooks/usePaymentPolling';
 export { useThreeds } from './hooks/useThreeds';
 export { useThreedsModal } from './hooks/useThreedsModal';
 export { useApplePay } from './hooks/useApplePay';
+export { ExpressPaymentProvider, useExpressPayment } from './hooks/useExpressPayment';
 export type { AuthState, Currency, Customer, Environment, EnvironmentConfig, Locale, Order, OrderAddress, OrderItem, OrderSummary, PickupPoint, Session, Store } from './types';
 export type { CheckoutData, CheckoutInitParams, CheckoutLineItem, CheckoutSession, CheckoutSessionPreview, Promotion, UseCheckoutOptions, UseCheckoutResult } from './hooks/useCheckout';
 export type { Discount, DiscountCodeValidation, UseDiscountsOptions, UseDiscountsResult } from './hooks/useDiscounts';
@@ -41,5 +44,5 @@ export type { Payment, PaymentPollingHook, PollingOptions } from './hooks/usePay
 export type { PaymentInstrument, ThreedsChallenge, ThreedsHook, ThreedsOptions, ThreedsProvider, ThreedsSession } from './hooks/useThreeds';
 export type { ApplePayToken, CardPaymentMethod, PaymentHook, PaymentInstrumentResponse, PaymentOptions, PaymentResponse } from './hooks/usePayment';
 export type { ApplePayAddress, ApplePayConfig, ApplePayLineItem, ApplePayPaymentAuthorizedEvent, ApplePayPaymentRequest, ApplePayPaymentToken, ApplePayValidateMerchantEvent, BasisTheorySessionRequest, BasisTheoryTokenizeRequest, PayToken, UseApplePayOptions, UseApplePayResult } from './types/apple-pay';
-export { Button, ApplePayButton } from './components';
+export { ApplePayButton, Button } from './components';
 export { convertCurrency, formatMoney, formatMoneyWithoutSymbol, formatSimpleMoney, getCurrencyInfo, minorUnitsToMajorUnits, moneyStringOrNumberToMinorUnits } from './utils/money';

package/dist/react/index.js

@@ -19,6 +19,7 @@ export { useOrderBump } from './hooks/useOrderBump';
 export { usePostPurchases } from './hooks/usePostPurchases';
 export { useProducts } from './hooks/useProducts';
 export { useSession } from './hooks/useSession';
+export { useShippingRates } from './hooks/useShippingRates';
 export { useTranslations } from './hooks/useTranslations';
 export { useVipOffers } from './hooks/useVipOffers';
 export { useTagadaContext } from './providers/TagadaProvider';
@@ -35,7 +36,9 @@ export { useThreeds } from './hooks/useThreeds';
 export { useThreedsModal } from './hooks/useThreedsModal';
 // Apple Pay hooks exports
 export { useApplePay } from './hooks/useApplePay';
+// Express Payment context exports
+export { ExpressPaymentProvider, useExpressPayment } from './hooks/useExpressPayment';
 // Component exports
-export { Button, ApplePayButton } from './components';
+export { ApplePayButton, Button } from './components';
 // Utility exports
 export { convertCurrency, formatMoney, formatMoneyWithoutSymbol, formatSimpleMoney, getCurrencyInfo, minorUnitsToMajorUnits, moneyStringOrNumberToMinorUnits } from './utils/money';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tagadapay/plugin-sdk",
-  "version": "2.4.3",
+  "version": "2.4.5",
   "description": "Modern React SDK for building Tagada Pay plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",