@tagadapay/plugin-sdk 3.1.11 → 3.1.22

package/dist/v2/core/utils/order.d.ts

@@ -2,6 +2,7 @@
  * Order Utility Functions
  * Pure functions for order data manipulation
  */
+import type { OrderSummary, PromotionSummary, PaymentSummary, Subscription, OrderAddress } from '../types';
 export interface OrderLineItem {
     id: string;
     orderId: string;
@@ -95,7 +96,7 @@ export interface Order {
     paymentInstrumentId: string;
     refundedAt?: string | null;
     refundedAmount?: number | null;
-    metadata?: any;
+    metadata?: Record<string, unknown>;
     customer?: {
         id: string;
         email: string;
@@ -105,27 +106,28 @@ export interface Order {
         lastOrderId: string;
         accountId: string;
         storeId: string;
-        billingAddress?: any;
-        shippingAddress?: any;
+        billingAddress?: OrderAddress | null;
+        shippingAddress?: OrderAddress | null;
         currency: string;
         locale: string;
         draft: boolean;
         acceptsMarketing: boolean;
         createdAt: string;
         updatedAt: string;
-        metadata?: any;
+        metadata?: Record<string, unknown>;
         device?: Record<string, unknown> | null;
     };
     items: OrderLineItem[];
-    summaries?: any[];
-    promotions?: any[];
+    summaries?: OrderSummary[];
+    promotions?: PromotionSummary[];
     checkoutSession?: {
         id: string;
         selectedPresentmentCurrency?: string;
-        [key: string]: any;
+        returnUrl?: string;
+        [key: string]: unknown;
     };
-    payments?: any[];
-    subscriptions?: any[];
+    payments?: PaymentSummary[];
+    subscriptions?: Subscription[];
     store?: {
         name: string;
         chargeCurrencies: string[];

package/dist/v2/core/utils/previewModeIndicator.js

@@ -212,143 +212,143 @@ export function injectPreviewModeIndicator() {
     // Create container
     const container = document.createElement('div');
     container.id = 'tgd-preview-indicator';
-    container.style.cssText = `
-        position: fixed;
-        bottom: 16px;
-        right: 16px;
-        z-index: 999999;
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    container.style.cssText = `
+        position: fixed;
+        bottom: 16px;
+        right: 16px;
+        z-index: 999999;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     `;
     // Create badge
     const badge = document.createElement('div');
-    badge.style.cssText = `
-        background: ${draftMode ? '#ff9500' : '#007aff'};
-        color: white;
-        padding: 8px 12px;
-        border-radius: 8px;
-        font-size: 13px;
-        font-weight: 600;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-        cursor: pointer;
-        transition: all 0.2s ease;
-        display: flex;
-        align-items: center;
-        gap: 6px;
+    badge.style.cssText = `
+        background: ${draftMode ? '#ff9500' : '#007aff'};
+        color: white;
+        padding: 8px 12px;
+        border-radius: 8px;
+        font-size: 13px;
+        font-weight: 600;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        cursor: pointer;
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        gap: 6px;
     `;
-    badge.innerHTML = `
-        <span style="font-size: 16px;">🔍</span>
-        <span>${draftMode ? 'Preview Mode' : 'Dev Mode'}</span>
+    badge.innerHTML = `
+        <span style="font-size: 16px;">🔍</span>
+        <span>${draftMode ? 'Preview Mode' : 'Dev Mode'}</span>
     `;
     // Create details popup (with padding-top to bridge gap with badge)
     const details = document.createElement('div');
-    details.style.cssText = `
-        position: absolute;
-        bottom: calc(100% + 8px);
-        right: 0;
-        background: white;
-        border: 1px solid #e5e5e5;
-        border-radius: 8px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        padding: 12px;
-        min-width: 250px;
-        font-size: 12px;
-        line-height: 1.5;
-        display: none;
+    details.style.cssText = `
+        position: absolute;
+        bottom: calc(100% + 8px);
+        right: 0;
+        background: white;
+        border: 1px solid #e5e5e5;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        padding: 12px;
+        min-width: 250px;
+        font-size: 12px;
+        line-height: 1.5;
+        display: none;
     `;
     details.style.paddingTop = '20px'; // Extra padding to bridge the gap
     // Add invisible bridge between badge and popup to prevent flickering
     const bridge = document.createElement('div');
-    bridge.style.cssText = `
-        position: absolute;
-        bottom: 100%;
-        left: 0;
-        right: 0;
-        height: 8px;
-        display: none;
+    bridge.style.cssText = `
+        position: absolute;
+        bottom: 100%;
+        left: 0;
+        right: 0;
+        height: 8px;
+        display: none;
     `;
     // Build details content
     let detailsHTML = '<div style="margin-bottom: 8px; font-weight: 600; color: #1d1d1f;">Current Environment</div>';
     detailsHTML += '<div style="display: flex; flex-direction: column; gap: 6px;">';
     if (draftMode) {
-        detailsHTML += `
-            <div style="display: flex; justify-content: space-between; color: #86868b;">
-                <span>Draft Mode:</span>
-                <span style="color: #ff9500; font-weight: 600;">ON</span>
-            </div>
+        detailsHTML += `
+            <div style="display: flex; justify-content: space-between; color: #86868b;">
+                <span>Draft Mode:</span>
+                <span style="color: #ff9500; font-weight: 600;">ON</span>
+            </div>
         `;
     }
     if (trackingDisabled) {
-        detailsHTML += `
-            <div style="display: flex; justify-content: space-between; color: #86868b;">
-                <span>Tracking:</span>
-                <span style="color: #ff3b30; font-weight: 600;">DISABLED</span>
-            </div>
+        detailsHTML += `
+            <div style="display: flex; justify-content: space-between; color: #86868b;">
+                <span>Tracking:</span>
+                <span style="color: #ff3b30; font-weight: 600;">DISABLED</span>
+            </div>
         `;
     }
     if (params.funnelEnv) {
-        detailsHTML += `
-            <div style="display: flex; justify-content: space-between; color: #86868b;">
-                <span>Funnel Env:</span>
-                <span style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 11px;">
-                    ${params.funnelEnv}
-                </span>
-            </div>
+        detailsHTML += `
+            <div style="display: flex; justify-content: space-between; color: #86868b;">
+                <span>Funnel Env:</span>
+                <span style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 11px;">
+                    ${params.funnelEnv}
+                </span>
+            </div>
         `;
     }
     if (params.tagadaClientEnv) {
-        detailsHTML += `
-            <div style="display: flex; justify-content: space-between; color: #86868b;">
-                <span>API Env:</span>
-                <span style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 11px;">
-                    ${params.tagadaClientEnv}
-                </span>
-            </div>
+        detailsHTML += `
+            <div style="display: flex; justify-content: space-between; color: #86868b;">
+                <span>API Env:</span>
+                <span style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 11px;">
+                    ${params.tagadaClientEnv}
+                </span>
+            </div>
         `;
     }
     if (params.tagadaClientBaseUrl) {
-        detailsHTML += `
-            <div style="color: #86868b;">
-                <div style="margin-bottom: 4px;">API URL:</div>
-                <div style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 10px; word-break: break-all; background: #f5f5f7; padding: 4px 6px; border-radius: 4px;">
-                    ${params.tagadaClientBaseUrl}
-                </div>
-            </div>
+        detailsHTML += `
+            <div style="color: #86868b;">
+                <div style="margin-bottom: 4px;">API URL:</div>
+                <div style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 10px; word-break: break-all; background: #f5f5f7; padding: 4px 6px; border-radius: 4px;">
+                    ${params.tagadaClientBaseUrl}
+                </div>
+            </div>
         `;
     }
     if (params.funnelId) {
-        detailsHTML += `
-            <div style="color: #86868b; margin-top: 4px; padding-top: 8px; border-top: 1px solid #e5e5e5;">
-                <div style="margin-bottom: 4px;">Funnel ID:</div>
-                <div style="color: #1d1d1f; font-family: monospace; font-size: 10px; word-break: break-all; background: #f5f5f7; padding: 4px 6px; border-radius: 4px;">
-                    ${params.funnelId}
-                </div>
-            </div>
+        detailsHTML += `
+            <div style="color: #86868b; margin-top: 4px; padding-top: 8px; border-top: 1px solid #e5e5e5;">
+                <div style="margin-bottom: 4px;">Funnel ID:</div>
+                <div style="color: #1d1d1f; font-family: monospace; font-size: 10px; word-break: break-all; background: #f5f5f7; padding: 4px 6px; border-radius: 4px;">
+                    ${params.funnelId}
+                </div>
+            </div>
         `;
     }
     detailsHTML += '</div>';
-    detailsHTML += `
-        <div style="margin-top: 12px; padding-top: 8px; border-top: 1px solid #e5e5e5; font-size: 11px; color: #86868b; text-align: center;">
-            Add <code style="background: #f5f5f7; padding: 2px 4px; border-radius: 3px;">?forceReset=true</code> to reset
-        </div>
+    detailsHTML += `
+        <div style="margin-top: 12px; padding-top: 8px; border-top: 1px solid #e5e5e5; font-size: 11px; color: #86868b; text-align: center;">
+            Add <code style="background: #f5f5f7; padding: 2px 4px; border-radius: 3px;">?forceReset=true</code> to reset
+        </div>
     `;
     // Add action button
-    detailsHTML += `
-        <div style="margin-top: 12px; padding-top: 8px; border-top: 1px solid #e5e5e5;">
-            <button id="tgd-leave-preview" style="
-                background: #ff3b30;
-                color: white;
-                border: none;
-                border-radius: 6px;
-                padding: 10px 12px;
-                font-size: 13px;
-                font-weight: 600;
-                cursor: pointer;
-                transition: opacity 0.2s;
-                width: 100%;
-            ">
-                🚪 Leave Preview Mode
-            </button>
-        </div>
+    detailsHTML += `
+        <div style="margin-top: 12px; padding-top: 8px; border-top: 1px solid #e5e5e5;">
+            <button id="tgd-leave-preview" style="
+                background: #ff3b30;
+                color: white;
+                border: none;
+                border-radius: 6px;
+                padding: 10px 12px;
+                font-size: 13px;
+                font-weight: 600;
+                cursor: pointer;
+                transition: opacity 0.2s;
+                width: 100%;
+            ">
+                🚪 Leave Preview Mode
+            </button>
+        </div>
     `;
     details.innerHTML = detailsHTML;
     // Hover behavior - keep popup visible when hovering over badge, bridge, or popup

package/dist/v2/index.d.ts

@@ -14,7 +14,7 @@ export * from './core/utils/previewMode';
 export { injectPreviewModeIndicator, isIndicatorInjected, removePreviewModeIndicator } from './core/utils/previewModeIndicator';
 export * from './core/utils/products';
 export { getAssignedPaymentFlowId, getAssignedScripts, getAssignedStaticResources, getAssignedStepConfig, getLocalFunnelConfig, loadLocalFunnelConfig } from './core/funnelClient';
-export type { LocalFunnelConfig, RuntimeStepConfig } from './core/funnelClient';
+export type { LocalFunnelConfig, PixelsConfig, RuntimeStepConfig } from './core/funnelClient';
 export * from './core/pathRemapping';
 export type { CheckoutData, CheckoutInitParams, CheckoutLineItem, CheckoutSession, CheckoutSessionPreview, Promotion } from './core/resources/checkout';
 export type { Order, OrderLineItem } from './core/utils/order';
@@ -28,7 +28,7 @@ export type { ToggleOrderBumpResponse, VipOffer, VipPreviewResponse } from './co
 export type { StoreConfig } from './core/resources/storeConfig';
 export { FunnelActionType } from './core/resources/funnel';
 export type { BackNavigationActionData, CartUpdatedActionData, DirectNavigationActionData, FormSubmitActionData, FunnelContextUpdateRequest, FunnelContextUpdateResponse, FunnelAction as FunnelEvent, FunnelInitializeRequest, FunnelInitializeResponse, FunnelNavigateRequest, FunnelNavigateResponse, FunnelNavigationAction, FunnelNavigationResult, NextAction, OfferAcceptedActionData, OfferDeclinedActionData, PaymentFailedActionData, PaymentSuccessActionData, SimpleFunnelContext } from './core/resources/funnel';
-export { ApplePayButton, ExpressPaymentMethodsProvider, formatMoney, getAvailableLanguages, GooglePayButton, PreviewModeIndicator, queryKeys, TagadaProvider, useApiMutation, useApiQuery, useApplePayCheckout, useAuth, useCheckout, useCheckoutToken, useClubOffers, useCountryOptions, useCredits, useCurrency, useCustomer, useCustomerInfos, useCustomerOrders, useCustomerSubscriptions, useDiscounts, useExpressPaymentMethods, useFunnel, useFunnelLegacy, useGeoLocation, useGoogleAutocomplete, useGooglePayCheckout, useInvalidateQuery, useISOData, useLanguageImport, useLogin, useOffer, useOrder, useOrderBump, usePayment, usePaymentRetrieve, usePixelTracking, usePluginConfig, usePostPurchases, usePreloadQuery, usePreviewOffer, useProducts, usePromotions, useRegionOptions, useRemappableParams, useShippingRates, useSimpleFunnel, useStepConfig, useStoreConfig, useTagadaContext, useThreeds, useThreedsModal, useTranslation, useVipOffers } from './react';
+export { ApplePayButton, ExpressPaymentMethodsProvider, formatMoney, getAvailableLanguages, GooglePayButton, PreviewModeIndicator, queryKeys, TagadaProvider, useApiMutation, useApiQuery, useApplePayCheckout, useAuth, useCheckout, useCheckoutToken, useClubOffers, useCountryOptions, useCredits, useCurrency, useCustomer, useCustomerInfos, useCustomerOrders, useCustomerSubscriptions, useDiscounts, useExpressPaymentMethods, useFunnel, useFunnelLegacy, useGeoLocation, useGoogleAutocomplete, useGooglePayCheckout, useInvalidateQuery, useISOData, useLanguageImport, useLogin, useOffer, useOrder, useOrderBump, usePayment, usePaymentRetrieve, usePixelTracking, usePluginConfig, usePostPurchases, usePreloadQuery, usePreviewOffer, useProducts, usePromotions, useRegionOptions, useRemappableParams, useShippingRates, useSimpleFunnel, useStepConfig, useStoreConfig, useTagadaContext, useThreeds, useThreedsModal, useTranslation, useVipOffers, WhopCheckout, useWhopPaymentPolling } from './react';
 export type { DebugScript } from './react';
 export type { TranslateFunction, TranslationText, UseTranslationOptions, UseTranslationResult } from './react/hooks/useTranslation';
 export type { FunnelContextValue } from './react/hooks/useFunnel';
@@ -37,6 +37,8 @@ export type { ClubOffer, ClubOfferItem, ClubOfferLineItem, ClubOfferSummary, Use
 export type { UseCreditsOptions, UseCreditsResult } from './react/hooks/useCredits';
 export type { UseGooglePayCheckoutOptions } from './react/hooks/useGooglePayCheckout';
 export type { UseLoginOptions, UseLoginResult } from './react/hooks/useLogin';
+export type { WhopCheckoutHandle, WhopCheckoutProps } from './react/components/WhopCheckout';
+export type { WhopPayment, UseWhopPaymentPollingOptions, UseWhopPaymentPollingReturn } from './react/hooks/useWhopPaymentPolling';
 export type { CustomerAddress, CustomerInfos, CustomerOrderSummary, OrderWithRelations, Subscription, SubscriptionsResponse } from './core/resources/customer';
 export type { UseCustomerResult } from './react/hooks/useCustomer';
 export type { UseCustomerInfosOptions, UseCustomerInfosResult } from './react/hooks/useCustomerInfos';

package/dist/v2/index.js

@@ -22,4 +22,4 @@ loadLocalFunnelConfig } from './core/funnelClient';
 export * from './core/pathRemapping';
 export { FunnelActionType } from './core/resources/funnel';
 // React exports (hooks and components only, types are exported above)
-export { ApplePayButton, ExpressPaymentMethodsProvider, formatMoney, getAvailableLanguages, GooglePayButton, PreviewModeIndicator, queryKeys, TagadaProvider, useApiMutation, useApiQuery, useApplePayCheckout, useAuth, useCheckout, useCheckoutToken, useClubOffers, useCountryOptions, useCredits, useCurrency, useCustomer, useCustomerInfos, useCustomerOrders, useCustomerSubscriptions, useDiscounts, useExpressPaymentMethods, useFunnel, useFunnelLegacy, useGeoLocation, useGoogleAutocomplete, useGooglePayCheckout, useInvalidateQuery, useISOData, useLanguageImport, useLogin, useOffer, useOrder, useOrderBump, usePayment, usePaymentRetrieve, usePixelTracking, usePluginConfig, usePostPurchases, usePreloadQuery, usePreviewOffer, useProducts, usePromotions, useRegionOptions, useRemappableParams, useShippingRates, useSimpleFunnel, useStepConfig, useStoreConfig, useTagadaContext, useThreeds, useThreedsModal, useTranslation, useVipOffers } from './react';
+export { ApplePayButton, ExpressPaymentMethodsProvider, formatMoney, getAvailableLanguages, GooglePayButton, PreviewModeIndicator, queryKeys, TagadaProvider, useApiMutation, useApiQuery, useApplePayCheckout, useAuth, useCheckout, useCheckoutToken, useClubOffers, useCountryOptions, useCredits, useCurrency, useCustomer, useCustomerInfos, useCustomerOrders, useCustomerSubscriptions, useDiscounts, useExpressPaymentMethods, useFunnel, useFunnelLegacy, useGeoLocation, useGoogleAutocomplete, useGooglePayCheckout, useInvalidateQuery, useISOData, useLanguageImport, useLogin, useOffer, useOrder, useOrderBump, usePayment, usePaymentRetrieve, usePixelTracking, usePluginConfig, usePostPurchases, usePreloadQuery, usePreviewOffer, useProducts, usePromotions, useRegionOptions, useRemappableParams, useShippingRates, useSimpleFunnel, useStepConfig, useStoreConfig, useTagadaContext, useThreeds, useThreedsModal, useTranslation, useVipOffers, WhopCheckout, useWhopPaymentPolling } from './react';

package/dist/v2/react/components/ApplePayButton.js

@@ -41,11 +41,20 @@ export const ApplePayButton = ({ checkout, onSuccess, onError, onCancel }) => {
     // Check Apple Pay availability (matches CMS pattern - useApplePayAvailable hook)
     useEffect(() => {
         const addExpress = () => handleAddExpressId('apple_pay');
-        if (window?.ApplePaySession && ApplePaySession.canMakePayments()) {
-            setIsApplePayAvailable(true);
-            addExpress();
+        try {
+            // Apple Pay requires a secure context (HTTPS). On HTTP (like localhost),
+            // calling canMakePayments() throws InvalidAccessError
+            if (window?.ApplePaySession && ApplePaySession.canMakePayments()) {
+                setIsApplePayAvailable(true);
+                addExpress();
+            }
+            else {
+                setIsApplePayAvailable(false);
+            }
         }
-        else {
+        catch (error) {
+            // Likely "Trying to start an Apple Pay session from an insecure document"
+            console.warn('[ApplePay] Apple Pay not available:', error);
             setIsApplePayAvailable(false);
         }
     }, [handleAddExpressId]);

package/dist/v2/react/components/FunnelScriptInjector.js

@@ -143,6 +143,27 @@ export function FunnelScriptInjector({ context, isInitialized }) {
                     observer.disconnect();
                 }, timeout);
             },
+            waitForElements: (selector, callback, timeout = 10000) => {
+                const elements = document.querySelectorAll(selector);
+                if (elements.length > 0) {
+                    callback(elements);
+                    return;
+                }
+                const observer = new MutationObserver(() => {
+                    const elements = document.querySelectorAll(selector);
+                    if (elements.length > 0) {
+                        observer.disconnect();
+                        callback(elements);
+                    }
+                });
+                observer.observe(document.body, {
+                    childList: true,
+                    subtree: true,
+                });
+                setTimeout(() => {
+                    observer.disconnect();
+                }, timeout);
+            },
             pageType: context?.currentStepId || null,
             isInitialized: isInitialized,
             ressources: context?.resources || null,
@@ -199,27 +220,27 @@ export function FunnelScriptInjector({ context, isInitialized }) {
             existingScript.remove();
         }
         // Wrap script content with error handling and context checks
-        const wrappedScript = `
-      (function() {
-        try {
-          // Check if we have basic DOM access
-          if (typeof document === 'undefined') {
-            console.error('[TagadaPay] Document not available');
-            return;
-          }
-          
-          // Check if we have Tagada
-          if (!window.Tagada) {
-            console.error('[TagadaPay] Tagada not available');
-            return;
-          }
-          
-          // Execute the original script
-          ${scriptBody}
-        } catch (error) {
-          console.error('[TagadaPay] Script execution error:', error);
-        }
-      })();
+        const wrappedScript = `
+      (function() {
+        try {
+          // Check if we have basic DOM access
+          if (typeof document === 'undefined') {
+            console.error('[TagadaPay] Document not available');
+            return;
+          }
+          
+          // Check if we have Tagada
+          if (!window.Tagada) {
+            console.error('[TagadaPay] Tagada not available');
+            return;
+          }
+          
+          // Execute the original script
+          ${scriptBody}
+        } catch (error) {
+          console.error('[TagadaPay] Script execution error:', error);
+        }
+      })();
     `;
         // Create and inject new script element
         const scriptElement = document.createElement('script');
@@ -273,15 +294,15 @@ export function FunnelScriptInjector({ context, isInitialized }) {
             if (!scriptBody)
                 return;
             // Wrap script content with error handling
-            const wrappedScript = `
-        (function() {
-          try {
-            // Script: ${script.name}
-            ${scriptBody}
-          } catch (error) {
-            console.error('[TagadaPay] StepConfig script "${script.name}" error:', error);
-          }
-        })();
+            const wrappedScript = `
+        (function() {
+          try {
+            // Script: ${script.name}
+            ${scriptBody}
+          } catch (error) {
+            console.error('[TagadaPay] StepConfig script "${script.name}" error:', error);
+          }
+        })();
       `;
             // Create script element
             const scriptElement = document.createElement('script');

package/dist/v2/react/components/WhopCheckout.d.ts

@@ -0,0 +1,24 @@
+import type { WhopPayment } from '../hooks/useWhopPaymentPolling';
+export interface WhopCheckoutHandle {
+    submit: () => Promise<void>;
+}
+export interface WhopCheckoutProps {
+    checkoutSessionId: string;
+    storeId: string;
+    customerEmail?: string;
+    shippingAddress?: {
+        firstName?: string;
+        lastName?: string;
+        country?: string;
+        address1?: string;
+        city?: string;
+        state?: string;
+        postal?: string;
+    };
+    orderItemsCount?: number;
+    orderTotalAmount?: number;
+    onPaymentCompleted?: (payment: WhopPayment) => void;
+    onPaymentFailed?: (error: string) => void;
+    onReady?: () => void;
+}
+export declare const WhopCheckout: import("react").NamedExoticComponent<WhopCheckoutProps & import("react").RefAttributes<WhopCheckoutHandle>>;