create-brainerce-store 1.4.1 → 1.5.1

package/templates/nextjs/base/src/components/checkout/payment-step.tsx

@@ -1,344 +1,350 @@
-'use client';
-
-import { useEffect, useState, useRef, useCallback } from 'react';
-import type { PaymentIntent } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useTranslations } from '@/lib/translations';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { cn } from '@/lib/utils';
-
-declare global {
-  interface Window {
-    growPayment?: {
-      init: (config: {
-        environment: string;
-        version: number;
-        events: {
-          onSuccess?: (response: unknown) => void;
-          onFailure?: (response: unknown) => void;
-          onError?: (response: unknown) => void;
-          onTimeout?: (response: unknown) => void;
-          onWalletChange?: (state: string) => void;
-          onPaymentStart?: (response: unknown) => void;
-          onPaymentCancel?: (response: unknown) => void;
-        };
-      }) => void;
-      renderPaymentOptions: (authCode: string) => void;
-    };
-  }
-}
-
-const GROW_SDK_URL = 'https://cdn.meshulam.co.il/sdk/gs.min.js';
-const APPLE_PAY_SDK_URL = 'https://meshulam.co.il/_media/js/apple_pay_sdk/sdk.min.js';
-
-interface PaymentStepProps {
-  checkoutId: string;
-  className?: string;
-}
-
-/**
- * Load a script tag if not already present in the DOM.
- * Resolves when the script loads (or immediately if already present).
- */
-function loadScript(src: string, optional = false): Promise<void> {
-  return new Promise((resolve) => {
-    if (document.querySelector(`script[src="${src}"]`)) {
-      resolve();
-      return;
-    }
-    const script = document.createElement('script');
-    script.src = src;
-    script.async = true;
-    script.onload = () => resolve();
-    script.onerror = () => {
-      if (optional) {
-        resolve(); // Non-blocking for optional SDKs
-      } else {
-        resolve(); // Still resolve — caller handles missing global
-      }
-    };
-    document.head.appendChild(script);
-  });
-}
-
-/**
- * Wait for window.growPayment to become available (set by the SDK script).
- */
-function waitForGrowGlobal(timeoutMs = 5000): Promise<boolean> {
-  return new Promise((resolve) => {
-    if (window.growPayment) {
-      resolve(true);
-      return;
-    }
-    const start = Date.now();
-    const check = setInterval(() => {
-      if (window.growPayment) {
-        clearInterval(check);
-        resolve(true);
-      } else if (Date.now() - start > timeoutMs) {
-        clearInterval(check);
-        resolve(false);
-      }
-    }, 50);
-  });
-}
-
-export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
-  const t = useTranslations('checkout');
-  const [paymentIntent, setPaymentIntent] = useState<PaymentIntent | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [growReady, setGrowReady] = useState(false);
-  const [sdkScriptLoaded, setSdkScriptLoaded] = useState(false);
-  const renderAttempted = useRef(false);
-
-  const handleGrowSuccess = useCallback(
-    async (response: unknown) => {
-      console.info('Grow payment success:', response);
-      try {
-        // Notify backend to process the order
-        // Pass full SDK response data for payment metadata storage (transactionId, transactionToken, etc.)
-        const client = getClient();
-        const data = (response as { data?: Record<string, unknown> })?.data;
-        await client.confirmSdkPayment(checkoutId, data || undefined);
-      } catch (err) {
-        console.warn('Failed to confirm payment with backend:', err);
-      }
-      window.location.href = `/order-confirmation?checkout_id=${checkoutId}`;
-    },
-    [checkoutId]
-  );
-
-  const handleGrowFailure = useCallback((response: unknown) => {
-    console.error('Grow payment failure:', response);
-    const msg = (response as { message?: string })?.message || t('paymentError');
-    setError(msg);
-  }, []);
-
-  const handleGrowError = useCallback((response: unknown) => {
-    console.error('Grow payment error:', response);
-    const msg = (response as { message?: string })?.message || t('paymentError');
-    setError(msg);
-  }, []);
-
-  // Step 1: Load SDK scripts (Apple Pay + Grow) — just load, don't init yet
-  useEffect(() => {
-    let cancelled = false;
-
-    async function loadSdkScripts() {
-      // Load Apple Pay SDK first (optional — needed for Apple Pay in Grow wallet)
-      await loadScript(APPLE_PAY_SDK_URL, true);
-
-      // Load Grow SDK script
-      await loadScript(GROW_SDK_URL);
-
-      // Wait for growPayment global to be set by the script
-      const available = await waitForGrowGlobal();
-
-      if (cancelled) return;
-
-      if (!available) {
-        setError(t('failedToLoadPaymentSdk'));
-        return;
-      }
-
-      setSdkScriptLoaded(true);
-    }
-
-    loadSdkScripts();
-
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  // Step 2: Create payment intent (API call)
-  // Use ref to prevent double-creation in React StrictMode
-  const intentCreated = useRef(false);
-  useEffect(() => {
-    if (intentCreated.current) return;
-    intentCreated.current = true;
-
-    async function createIntent() {
-      try {
-        setLoading(true);
-        setError(null);
-        const client = getClient();
-
-        const successUrl = `${window.location.origin}/order-confirmation?checkout_id=${checkoutId}`;
-        const cancelUrl = `${window.location.origin}/checkout?checkout_id=${checkoutId}&canceled=true`;
-
-        const intent = await client.createPaymentIntent(checkoutId, {
-          successUrl,
-          cancelUrl,
-        });
-
-        setPaymentIntent(intent);
-
-        // Auto-redirect for Stripe
-        if (intent.provider === 'stripe') {
-          window.location.href = intent.clientSecret;
-        }
-      } catch (err) {
-        const message = err instanceof Error ? err.message : t('paymentError');
-        setError(message);
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    createIntent();
-  }, [checkoutId]);
-
-  // Step 3: When BOTH SDK script is loaded AND payment intent is ready:
-  //   - init() with the CORRECT environment from the payment intent
-  //   - wait for onWalletChange signal before calling renderPaymentOptions()
-  useEffect(() => {
-    if (!sdkScriptLoaded) return;
-    if (!paymentIntent || paymentIntent.provider !== 'grow') return;
-    if (!window.growPayment) return;
-    if (renderAttempted.current) return;
-
-    renderAttempted.current = true;
-
-    // Parse environment and authCode from clientSecret (format: "ENV|authCode")
-    const pipeIndex = paymentIntent.clientSecret.indexOf('|');
-    const env = pipeIndex !== -1 ? paymentIntent.clientSecret.substring(0, pipeIndex) : 'DEV';
-    const authCode =
-      pipeIndex !== -1
-        ? paymentIntent.clientSecret.substring(pipeIndex + 1)
-        : paymentIntent.clientSecret;
-
-    let rendered = false;
-    let timeoutId: ReturnType<typeof setTimeout>;
-    let pollId: ReturnType<typeof setInterval>;
-
-    function tryRenderPaymentOptions() {
-      if (rendered) return;
-      try {
-        window.growPayment?.renderPaymentOptions(authCode);
-        rendered = true;
-        clearTimeout(timeoutId);
-        clearInterval(pollId);
-        setGrowReady(true);
-        console.info('Grow SDK: renderPaymentOptions succeeded');
-      } catch (err) {
-        console.info('Grow SDK: renderPaymentOptions not ready yet', err);
-      }
-    }
-
-    // Init SDK with the correct environment (must match the authCode's origin)
-    console.info('Grow SDK: init with environment:', env);
-    window.growPayment.init({
-      environment: env,
-      version: 1,
-      events: {
-        onSuccess: handleGrowSuccess,
-        onFailure: handleGrowFailure,
-        onError: handleGrowError,
-        onWalletChange: (state: string) => {
-          console.info('Grow wallet state:', state);
-          // Wallet ready — try to render immediately
-          tryRenderPaymentOptions();
-        },
-      },
-    });
-
-    // Also poll as fallback: wait 1s for init() to finish, then poll every 500ms
-    timeoutId = setTimeout(() => {
-      tryRenderPaymentOptions();
-      if (!rendered) {
-        let attempts = 0;
-        const maxAttempts = 16; // 16 * 500ms = 8 seconds after initial delay
-        pollId = setInterval(() => {
-          attempts++;
-          tryRenderPaymentOptions();
-          if (!rendered && attempts >= maxAttempts) {
-            clearInterval(pollId);
-            console.error('Grow SDK: renderPaymentOptions failed after max attempts');
-            setError(t('paymentError'));
-          }
-        }, 500);
-      }
-    }, 1000);
-
-    return () => {
-      clearTimeout(timeoutId);
-      clearInterval(pollId);
-    };
-  }, [sdkScriptLoaded, paymentIntent, handleGrowSuccess, handleGrowFailure, handleGrowError]);
-
-  if (loading) {
-    return (
-      <div className={cn('flex flex-col items-center justify-center py-12', className)}>
-        <LoadingSpinner size="lg" />
-        <p className="text-muted-foreground mt-4 text-sm">{t('preparingPayment')}</p>
-      </div>
-    );
-  }
-
-  if (error) {
-    const isNotConfigured =
-      error.toLowerCase().includes('not configured') ||
-      error.toLowerCase().includes('no payment') ||
-      error.toLowerCase().includes('provider');
-
-    return (
-      <div className={cn('py-12 text-center', className)}>
-        <svg
-          className="text-muted-foreground mx-auto mb-4 h-12 w-12"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={1.5}
-            d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
-          />
-        </svg>
-        <h3 className="text-foreground mb-2 text-lg font-semibold">
-          {isNotConfigured ? t('paymentNotConfigured') : t('paymentError')}
-        </h3>
-        <p className="text-muted-foreground mx-auto max-w-md text-sm">
-          {isNotConfigured ? t('paymentNotConfiguredDesc') : error}
-        </p>
-      </div>
-    );
-  }
-
-  // Grow: render the SDK wallet container
-  if (paymentIntent?.provider === 'grow') {
-    return (
-      <div className={cn('py-4', className)}>
-        {!growReady && (
-          <div className="flex flex-col items-center justify-center py-8">
-            <LoadingSpinner size="lg" />
-            <p className="text-muted-foreground mt-4 text-sm">{t('loadingPaymentOptions')}</p>
-          </div>
-        )}
-        <div id="grow-payment-container" />
-      </div>
-    );
-  }
-
-  // Stripe/other redirect-based: show redirecting state
-  if (paymentIntent) {
-    return (
-      <div className={cn('flex flex-col items-center justify-center py-12', className)}>
-        <LoadingSpinner size="lg" />
-        <p className="text-muted-foreground mt-4 text-sm">{t('redirectingToPayment')}</p>
-        <p className="text-muted-foreground mt-2 text-xs">
-          {t('redirectingHint')}
-          <a href={paymentIntent.clientSecret} className="text-primary hover:underline">
-            {t('clickHere')}
-          </a>
-          .
-        </p>
-      </div>
-    );
-  }
-
-  return null;
-}
+'use client';
+
+import { useEffect, useState, useRef, useCallback } from 'react';
+import type { PaymentIntent } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { useTranslations } from '@/lib/translations';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { cn } from '@/lib/utils';
+
+// SDK-specific globals injected by external payment scripts
+declare global {
+  interface Window {
+    growPayment?: {
+      init: (config: {
+        environment: string;
+        version: number;
+        events: {
+          onSuccess?: (response: unknown) => void;
+          onFailure?: (response: unknown) => void;
+          onError?: (response: unknown) => void;
+          onTimeout?: (response: unknown) => void;
+          onWalletChange?: (state: string) => void;
+          onPaymentStart?: (response: unknown) => void;
+          onPaymentCancel?: (response: unknown) => void;
+        };
+      }) => void;
+      renderPaymentOptions: (authCode: string) => void;
+    };
+  }
+}
+
+// Payment SDK script URLs — resolved per provider
+const PAYMENT_SDK_URL = 'https://cdn.meshulam.co.il/sdk/gs.min.js';
+const APPLE_PAY_SDK_URL = 'https://meshulam.co.il/_media/js/apple_pay_sdk/sdk.min.js';
+
+interface PaymentStepProps {
+  checkoutId: string;
+  className?: string;
+}
+
+/**
+ * Load a script tag if not already present in the DOM.
+ * Resolves when the script loads (or immediately if already present).
+ */
+function loadScript(src: string, optional = false): Promise<void> {
+  return new Promise((resolve) => {
+    if (document.querySelector(`script[src="${src}"]`)) {
+      resolve();
+      return;
+    }
+    const script = document.createElement('script');
+    script.src = src;
+    script.async = true;
+    script.onload = () => resolve();
+    script.onerror = () => {
+      if (optional) {
+        resolve(); // Non-blocking for optional SDKs
+      } else {
+        resolve(); // Still resolve — caller handles missing global
+      }
+    };
+    document.head.appendChild(script);
+  });
+}
+
+/**
+ * Wait for the payment SDK global to become available (set by the SDK script).
+ */
+function waitForPaymentSdkGlobal(timeoutMs = 5000): Promise<boolean> {
+  return new Promise((resolve) => {
+    if (window.growPayment) {
+      resolve(true);
+      return;
+    }
+    const start = Date.now();
+    const check = setInterval(() => {
+      if (window.growPayment) {
+        clearInterval(check);
+        resolve(true);
+      } else if (Date.now() - start > timeoutMs) {
+        clearInterval(check);
+        resolve(false);
+      }
+    }, 50);
+  });
+}
+
+export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
+  const t = useTranslations('checkout');
+  const [paymentIntent, setPaymentIntent] = useState<PaymentIntent | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [sdkReady, setSdkReady] = useState(false);
+  const [sdkScriptLoaded, setSdkScriptLoaded] = useState(false);
+  const renderAttempted = useRef(false);
+
+  const handleSdkPaymentSuccess = useCallback(
+    async (response: unknown) => {
+      console.info('Payment SDK success:', JSON.stringify(response));
+      try {
+        const client = getClient();
+        // Try response.data first, fall back to response itself
+        const resp = response as Record<string, unknown>;
+        const data = (resp?.data && typeof resp.data === 'object' ? resp.data : resp) as
+          | Record<string, unknown>
+          | undefined;
+        await client.confirmSdkPayment(checkoutId, data || undefined);
+      } catch (err) {
+        console.warn('Failed to confirm payment with backend:', err);
+      }
+      window.location.href = `/order-confirmation?checkout_id=${checkoutId}`;
+    },
+    [checkoutId]
+  );
+
+  const handleSdkPaymentFailure = useCallback((response: unknown) => {
+    console.error('Payment SDK failure:', response);
+    const msg = (response as { message?: string })?.message || t('paymentError');
+    setError(msg);
+  }, []);
+
+  const handleSdkPaymentError = useCallback((response: unknown) => {
+    console.error('Payment SDK error:', response);
+    const msg = (response as { message?: string })?.message || t('paymentError');
+    setError(msg);
+  }, []);
+
+  // Step 1: Load SDK scripts — just load, don't init yet
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadSdkScripts() {
+      // Load Apple Pay SDK (optional)
+      await loadScript(APPLE_PAY_SDK_URL, true);
+
+      // Load payment SDK script
+      await loadScript(PAYMENT_SDK_URL);
+
+      // Wait for SDK global to be set by the script
+      const available = await waitForPaymentSdkGlobal();
+
+      if (cancelled) return;
+
+      if (!available) {
+        setError(t('failedToLoadPaymentSdk'));
+        return;
+      }
+
+      setSdkScriptLoaded(true);
+    }
+
+    loadSdkScripts();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Step 2: Create payment intent (API call)
+  // Use ref to prevent double-creation in React StrictMode
+  const intentCreated = useRef(false);
+  useEffect(() => {
+    if (intentCreated.current) return;
+    intentCreated.current = true;
+
+    async function createIntent() {
+      try {
+        setLoading(true);
+        setError(null);
+        const client = getClient();
+
+        const successUrl = `${window.location.origin}/order-confirmation?checkout_id=${checkoutId}`;
+        const cancelUrl = `${window.location.origin}/checkout?checkout_id=${checkoutId}&canceled=true`;
+
+        const intent = await client.createPaymentIntent(checkoutId, {
+          successUrl,
+          cancelUrl,
+        });
+
+        setPaymentIntent(intent);
+
+        // Auto-redirect for Stripe
+        if (intent.provider === 'stripe') {
+          window.location.href = intent.clientSecret;
+        }
+      } catch (err) {
+        const message = err instanceof Error ? err.message : t('paymentError');
+        setError(message);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    createIntent();
+  }, [checkoutId]);
+
+  // Step 3: When BOTH SDK script is loaded AND payment intent is ready:
+  //   - init() with the CORRECT environment from the payment intent
+  //   - wait for onWalletChange signal before calling renderPaymentOptions()
+  useEffect(() => {
+    if (!sdkScriptLoaded) return;
+    if (!paymentIntent || paymentIntent.provider !== 'grow') return;
+    if (!window.growPayment) return;
+    if (renderAttempted.current) return;
+
+    renderAttempted.current = true;
+
+    // Parse environment and authCode from clientSecret (format: "ENV|authCode")
+    const pipeIndex = paymentIntent.clientSecret.indexOf('|');
+    const env = pipeIndex !== -1 ? paymentIntent.clientSecret.substring(0, pipeIndex) : 'DEV';
+    const authCode =
+      pipeIndex !== -1
+        ? paymentIntent.clientSecret.substring(pipeIndex + 1)
+        : paymentIntent.clientSecret;
+
+    let rendered = false;
+    let pollId: ReturnType<typeof setInterval>;
+
+    function tryRenderPaymentOptions() {
+      if (rendered) return;
+      try {
+        window.growPayment?.renderPaymentOptions(authCode);
+        rendered = true;
+        clearInterval(pollId);
+        setSdkReady(true);
+        console.info('Payment SDK: renderPaymentOptions succeeded');
+      } catch (err) {
+        console.info('Payment SDK: renderPaymentOptions not ready yet', err);
+      }
+    }
+
+    console.info('Payment SDK: init with environment:', env);
+    window.growPayment.init({
+      environment: env,
+      version: 1,
+      events: {
+        onSuccess: handleSdkPaymentSuccess,
+        onFailure: handleSdkPaymentFailure,
+        onError: handleSdkPaymentError,
+        onWalletChange: (state: string) => {
+          console.info('Payment SDK wallet state:', state);
+          tryRenderPaymentOptions();
+        },
+      },
+    });
+
+    // Poll as fallback: wait 1s for init() to finish, then poll every 500ms
+    const timeoutId = setTimeout(() => {
+      tryRenderPaymentOptions();
+      if (!rendered) {
+        let attempts = 0;
+        const maxAttempts = 16; // 16 * 500ms = 8 seconds after initial delay
+        pollId = setInterval(() => {
+          attempts++;
+          tryRenderPaymentOptions();
+          if (!rendered && attempts >= maxAttempts) {
+            clearInterval(pollId);
+            console.error('Payment SDK: renderPaymentOptions failed after max attempts');
+            setError(t('paymentError'));
+          }
+        }, 500);
+      }
+    }, 1000);
+
+    return () => {
+      clearTimeout(timeoutId);
+      clearInterval(pollId);
+    };
+  }, [
+    sdkScriptLoaded,
+    paymentIntent,
+    handleSdkPaymentSuccess,
+    handleSdkPaymentFailure,
+    handleSdkPaymentError,
+  ]);
+
+  if (loading) {
+    return (
+      <div className={cn('flex flex-col items-center justify-center py-12', className)}>
+        <LoadingSpinner size="lg" />
+        <p className="text-muted-foreground mt-4 text-sm">{t('preparingPayment')}</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    const isNotConfigured =
+      error.toLowerCase().includes('not configured') ||
+      error.toLowerCase().includes('no payment') ||
+      error.toLowerCase().includes('provider');
+
+    return (
+      <div className={cn('py-12 text-center', className)}>
+        <svg
+          className="text-muted-foreground mx-auto mb-4 h-12 w-12"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
+          />
+        </svg>
+        <h3 className="text-foreground mb-2 text-lg font-semibold">
+          {isNotConfigured ? t('paymentNotConfigured') : t('paymentError')}
+        </h3>
+        <p className="text-muted-foreground mx-auto max-w-md text-sm">
+          {isNotConfigured ? t('paymentNotConfiguredDesc') : error}
+        </p>
+      </div>
+    );
+  }
+
+  // SDK-based provider: render the payment widget container
+  if (paymentIntent?.provider === 'grow') {
+    return (
+      <div className={cn('py-4', className)}>
+        {!sdkReady && (
+          <div className="flex flex-col items-center justify-center py-8">
+            <LoadingSpinner size="lg" />
+            <p className="text-muted-foreground mt-4 text-sm">{t('loadingPaymentOptions')}</p>
+          </div>
+        )}
+        <div id="grow-payment-container" />
+      </div>
+    );
+  }
+
+  // Stripe/other redirect-based: show redirecting state
+  if (paymentIntent) {
+    return (
+      <div className={cn('flex flex-col items-center justify-center py-12', className)}>
+        <LoadingSpinner size="lg" />
+        <p className="text-muted-foreground mt-4 text-sm">{t('redirectingToPayment')}</p>
+        <p className="text-muted-foreground mt-2 text-xs">
+          {t('redirectingHint')}
+          <a href={paymentIntent.clientSecret} className="text-primary hover:underline">
+            {t('clickHere')}
+          </a>
+          .
+        </p>
+      </div>
+    );
+  }
+
+  return null;
+}