@tagadapay/plugin-sdk 2.3.13 → 2.4.0

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { CheckoutData } from '../hooks/useCheckout';
+interface ApplePayButtonProps {
+    className?: string;
+    disabled?: boolean;
+    onSuccess?: (payment: any) => void;
+    onError?: (error: string) => void;
+    onCancel?: () => void;
+    storeName?: string;
+    currencyCode?: string;
+    variant?: 'default' | 'outline' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    checkout: CheckoutData | null;
+}
+export declare const ApplePayButton: React.FC<ApplePayButtonProps>;
+export default ApplePayButton;

package/dist/react/components/ApplePayButton.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useApplePay } from '../hooks/useApplePay';
+import { Button } from './Button';
+export const ApplePayButton = ({ className = '', disabled = false, onSuccess, onError, onCancel, storeName, currencyCode = 'USD', variant = 'outline', size = 'lg', checkout, }) => {
+    // Use the Apple Pay hook
+    const { handleApplePayClick, processingPayment, applePayError, isApplePayAvailable } = useApplePay({
+        onSuccess,
+        onError,
+        onCancel,
+        checkoutSessionId: checkout?.checkoutSession?.id,
+        customerId: checkout?.checkoutSession?.customerId,
+    });
+    // Apple Pay button click handler
+    const handleClick = () => {
+        if (processingPayment || !isApplePayAvailable || !checkout)
+            return;
+        const { summary, checkoutSession } = checkout;
+        // Build line items from checkout summary
+        const lineItems = summary.items?.map((item) => ({
+            label: item.product?.name || item.variant?.name || 'Item',
+            amount: (item.adjustedAmount / 100).toFixed(2), // Convert from minor units
+            type: 'final',
+        })) || [];
+        // Add shipping as a line item if present
+        if (checkoutSession.shippingRate && checkoutSession.shippingRate.amount > 0) {
+            lineItems.push({
+                label: checkoutSession.shippingRate.shippingRateName || 'Shipping',
+                amount: (checkoutSession.shippingRate.amount / 100).toFixed(2),
+                type: 'final',
+            });
+        }
+        // Build total
+        const total = {
+            label: storeName || checkoutSession.store.name || 'Total',
+            amount: (summary.totalAdjustedAmount / 100).toFixed(2),
+            type: 'final',
+        };
+        // Apple Pay configuration
+        const config = {
+            countryCode: 'US',
+            supportedNetworks: ['visa', 'masterCard', 'amex', 'discover'],
+            merchantCapabilities: ['supports3DS'],
+        };
+        // Call the Apple Pay handler
+        handleApplePayClick(checkoutSession.id, lineItems, total, config, storeName || checkoutSession.store.name, currencyCode || summary.currency, []);
+    };
+    // Don't render the button if Apple Pay is not available
+    if (!isApplePayAvailable) {
+        return null;
+    }
+    return (_jsxs("div", { className: "w-full", children: [_jsx(Button, { type: "button", variant: variant, size: size, className: `w-full shadow-sm ${className}`, onClick: handleClick, disabled: disabled || processingPayment, children: _jsxs("div", { className: "flex items-center justify-center gap-3", children: [processingPayment ? (_jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent" })) : (_jsx("img", { src: "/brandnetwork/applepay.svg", alt: "Apple Pay", className: "h-6 w-auto" })), _jsx("span", { className: "font-medium", children: processingPayment ? 'Processing...' : 'Pay with Apple Pay' })] }) }), applePayError && (_jsx("div", { className: "mt-2 rounded border border-red-200 bg-red-50 p-2 text-sm text-red-600", children: applePayError }))] }));
+};
+export default ApplePayButton;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'default' | 'outline' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    children: React.ReactNode;
+}
+export declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/react/components/Button.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Button = ({ variant = 'default', size = 'md', className = '', children, ...props }) => {
+    // Determine button size classes
+    const sizeClasses = {
+        sm: 'h-10 px-3 text-sm',
+        md: 'h-11 px-4 text-sm',
+        lg: 'h-12 px-6 text-base',
+    };
+    // Determine button variant classes
+    const variantClasses = {
+        default: 'bg-blue-600 text-white border-blue-600 hover:bg-blue-700 hover:border-blue-700',
+        outline: 'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 hover:border-gray-400',
+        ghost: 'bg-transparent text-gray-700 hover:bg-gray-100 border-transparent',
+    };
+    const baseClasses = 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none';
+    return (_jsx("button", { className: `${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${className}`, ...props, children: children }));
+};
+export default Button;

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

@@ -1 +1,3 @@
 export { default as DebugDrawer } from './DebugDrawer';
+export { default as Button } from './Button';
+export { default as ApplePayButton } from './ApplePayButton';

package/dist/react/components/index.js

@@ -1 +1,3 @@
 export { default as DebugDrawer } from './DebugDrawer';
+export { default as Button } from './Button';
+export { default as ApplePayButton } from './ApplePayButton';

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

@@ -1,2 +1,8 @@
-import { UseApplePayOptions, UseApplePayResult } from '../types/apple-pay';
+import { ApplePayLineItem, UseApplePayOptions, UseApplePayResult } from '../types/apple-pay';
+import { OrderSummaryData } from './useOrderSummary';
+export interface ApplePayOrderSummary extends OrderSummaryData {
+    lineItems: ApplePayLineItem[];
+    total: ApplePayLineItem;
+    shippingMethods: any[];
+}
 export declare function useApplePay(options?: UseApplePayOptions): UseApplePayResult;

package/dist/react/hooks/useApplePay.js

@@ -94,34 +94,73 @@ export function useApplePay(options = {}) {
             throw error;
         }
     }, [apiService, options.customerId]);
+    // Get shipping rates for the checkout session
+    const getShippingRates = useCallback(async () => {
+        try {
+            const response = await apiService.fetch(`/api/v1/checkout-sessions/${options.checkoutSessionId}/shipping-rates`);
+            return response;
+        }
+        catch (error) {
+            console.error('Failed to get shipping rates:', error);
+            throw error;
+        }
+    }, [apiService, options.checkoutSessionId]);
     // Recompute order summary after address/shipping changes
     const reComputeOrderSummary = useCallback(async () => {
         try {
-            const response = await apiService.fetch(`/api/v1/checkout-sessions/${options.checkoutSessionId}/order-summary`, {
+            // Get the order summary data
+            const orderSummary = await apiService.fetch(`/api/v1/checkout-sessions/${options.checkoutSessionId}/order-summary`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
                 body: { checkoutSessionId: options.checkoutSessionId }
             });
-            return response;
+            // Get shipping rates
+            const shippingRates = await getShippingRates();
+            // Construct Apple Pay line items from order summary
+            const lineItems = [
+                {
+                    label: 'Subtotal',
+                    amount: orderSummary.subtotalAdjustedAmount > 0 ? (orderSummary.subtotalAdjustedAmount / 100).toFixed(2) : '0.00',
+                    type: 'final',
+                },
+                {
+                    label: 'Shipping',
+                    amount: orderSummary.shippingCost > 0 ? (orderSummary.shippingCost / 100).toFixed(2) : '0.00',
+                    type: 'final',
+                },
+                {
+                    label: 'Tax',
+                    amount: orderSummary.totalTaxAmount > 0 ? (orderSummary.totalTaxAmount / 100).toFixed(2) : '0.00',
+                    type: 'final',
+                },
+            ];
+            // Construct Apple Pay total
+            const total = {
+                label: 'Total',
+                amount: orderSummary.totalAdjustedAmount > 0 ? (orderSummary.totalAdjustedAmount / 100).toFixed(2) : '0.00',
+                type: 'final',
+            };
+            // Construct Apple Pay shipping methods from shipping rates
+            const shippingMethods = shippingRates?.rates?.map((rate) => ({
+                label: rate.shippingRateName,
+                amount: rate.amount > 0 ? (rate.amount / 100).toFixed(2) : '0.00',
+                identifier: rate.id,
+                detail: rate.description || '',
+            })) || [];
+            return {
+                ...orderSummary,
+                lineItems,
+                total,
+                shippingMethods,
+            };
         }
         catch (error) {
             console.error('Failed to recompute order summary:', error);
             throw error;
         }
-    }, [apiService, options.checkoutSessionId]);
-    // Get shipping rates for the checkout session
-    const getShippingRates = useCallback(async () => {
-        try {
-            const response = await apiService.fetch(`/api/v1/checkout-sessions/${options.checkoutSessionId}/shipping-rates`);
-            return response;
-        }
-        catch (error) {
-            console.error('Failed to get shipping rates:', error);
-            throw error;
-        }
-    }, [apiService, options.checkoutSessionId]);
+    }, [apiService, options.checkoutSessionId, getShippingRates]);
     // Set shipping rate
     const setShippingRate = useCallback(async (shippingRateId) => {
         try {

package/dist/react/index.d.ts

@@ -41,4 +41,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 { convertCurrency, formatMoney, formatMoneyWithoutSymbol, formatSimpleMoney, getCurrencyInfo, minorUnitsToMajorUnits, moneyStringOrNumberToMinorUnits } from './utils/money';

package/dist/react/index.js

@@ -36,6 +36,6 @@ export { useThreedsModal } from './hooks/useThreedsModal';
 // Apple Pay hooks exports
 export { useApplePay } from './hooks/useApplePay';
 // Component exports
-// Apple Pay components removed - use useApplePay hook directly
+export { Button, ApplePayButton } 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.3.13",
+  "version": "2.4.0",
   "description": "Modern React SDK for building Tagada Pay plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",