create-brainerce-store 1.5.7 → 1.6.0

package/templates/nextjs/base/src/components/auth/login-form.tsx

@@ -1,94 +1,101 @@
-'use client';
-
-import { useState } from 'react';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-
-interface LoginFormProps {
-  onSubmit: (email: string, password: string) => Promise<void>;
-  error?: string | null;
-  className?: string;
-}
-
-export function LoginForm({ onSubmit, error, className }: LoginFormProps) {
-  const t = useTranslations('auth');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [loading, setLoading] = useState(false);
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (loading) return;
-
-    try {
-      setLoading(true);
-      await onSubmit(email, password);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  return (
-    <form onSubmit={handleSubmit} className={cn('space-y-4', className)}>
-      {error && (
-        <div className="bg-destructive/10 border-destructive/20 text-destructive rounded-lg border px-4 py-3 text-sm">
-          {error}
-        </div>
-      )}
-
-      <div>
-        <label htmlFor="login-email" className="text-foreground mb-1.5 block text-sm font-medium">
-          {t('email')}
-        </label>
-        <input
-          id="login-email"
-          type="email"
-          required
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          placeholder={t('emailPlaceholder')}
-          autoComplete="email"
-          className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2"
-        />
-      </div>
-
-      <div>
-        <label
-          htmlFor="login-password"
-          className="text-foreground mb-1.5 block text-sm font-medium"
-        >
-          {t('password')}
-        </label>
-        <input
-          id="login-password"
-          type="password"
-          required
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          placeholder={t('passwordPlaceholder')}
-          autoComplete="current-password"
-          className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2"
-        />
-      </div>
-
-      <button
-        type="submit"
-        disabled={loading}
-        className="bg-primary text-primary-foreground flex h-10 w-full items-center justify-center gap-2 rounded text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
-      >
-        {loading ? (
-          <>
-            <LoadingSpinner
-              size="sm"
-              className="border-primary-foreground/30 border-t-primary-foreground"
-            />
-            {t('signingIn')}
-          </>
-        ) : (
-          t('signIn')
-        )}
-      </button>
-    </form>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { useTranslations } from '@/lib/translations';
+import { cn } from '@/lib/utils';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+
+interface LoginFormProps {
+  onSubmit: (email: string, password: string) => Promise<void>;
+  error?: string | null;
+  className?: string;
+}
+
+export function LoginForm({ onSubmit, error, className }: LoginFormProps) {
+  const t = useTranslations('auth');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (loading) return;
+
+    try {
+      setLoading(true);
+      await onSubmit(email, password);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className={cn('space-y-4', className)}>
+      {error && (
+        <div className="bg-destructive/10 border-destructive/20 text-destructive rounded-lg border px-4 py-3 text-sm">
+          {error}
+        </div>
+      )}
+
+      <div>
+        <label htmlFor="login-email" className="text-foreground mb-1.5 block text-sm font-medium">
+          {t('email')}
+        </label>
+        <input
+          id="login-email"
+          type="email"
+          required
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder={t('emailPlaceholder')}
+          autoComplete="email"
+          className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2"
+        />
+      </div>
+
+      <div>
+        <label
+          htmlFor="login-password"
+          className="text-foreground mb-1.5 block text-sm font-medium"
+        >
+          {t('password')}
+        </label>
+        <input
+          id="login-password"
+          type="password"
+          required
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder={t('passwordPlaceholder')}
+          autoComplete="current-password"
+          className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2"
+        />
+      </div>
+
+      <div className="flex justify-end">
+        <Link href="/forgot-password" className="text-primary text-sm hover:underline">
+          {t('forgotPassword')}
+        </Link>
+      </div>
+
+      <button
+        type="submit"
+        disabled={loading}
+        className="bg-primary text-primary-foreground flex h-10 w-full items-center justify-center gap-2 rounded text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        {loading ? (
+          <>
+            <LoadingSpinner
+              size="sm"
+              className="border-primary-foreground/30 border-t-primary-foreground"
+            />
+            {t('signingIn')}
+          </>
+        ) : (
+          t('signIn')
+        )}
+      </button>
+    </form>
+  );
+}

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

@@ -120,9 +120,21 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
   }, []);
 
   const handleSdkPaymentError = useCallback((response: unknown) => {
+    const TRANSIENT_SDK_ERRORS = [
+      'Wallet not initialized',
+      "SDK was not loaded as needed and therefore can't run",
+    ];
+
+    const msg = (response as { message?: string })?.message || '';
+    // Grow SDK fires transient errors during startup before its internal
+    // state is ready. The polling mechanism in Step 3 retries
+    // renderPaymentOptions() until the SDK is fully initialized.
+    if (TRANSIENT_SDK_ERRORS.some((e) => msg.includes(e))) {
+      console.info('Payment SDK: transient startup error, waiting for retry...', msg);
+      return;
+    }
     console.error('Payment SDK error:', response);
-    const msg = (response as { message?: string })?.message || t('paymentError');
-    setError(msg);
+    setError(msg || t('paymentError'));
   }, []);
 
   // Step 1: Load SDK scripts — just load, don't init yet
@@ -214,6 +226,7 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
         : paymentIntent.clientSecret;
 
     let rendered = false;
+    let walletReady = false;
     let pollId: ReturnType<typeof setInterval>;
 
     function tryRenderPaymentOptions() {
@@ -239,20 +252,29 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
         onError: handleSdkPaymentError,
         onWalletChange: (state: string) => {
           console.info('Payment SDK wallet state:', state);
+          walletReady = true;
           tryRenderPaymentOptions();
         },
       },
     });
 
-    // Poll as fallback: wait 1s for init() to finish, then poll every 500ms
+    // Poll as fallback — but respect the SDK's readiness signal:
+    //  - First 4s: only render if onWalletChange has fired (SDK says it's ready)
+    //  - After 4s: force-attempt even without wallet signal (onWalletChange may not fire)
+    const WALLET_GRACE_PERIOD = 4000;
+    const initTime = Date.now();
+
     const timeoutId = setTimeout(() => {
-      tryRenderPaymentOptions();
+      if (walletReady) tryRenderPaymentOptions();
       if (!rendered) {
         let attempts = 0;
-        const maxAttempts = 16; // 16 * 500ms = 8 seconds after initial delay
+        const maxAttempts = 16; // 16 * 500ms = 8s after initial 1s delay
         pollId = setInterval(() => {
           attempts++;
-          tryRenderPaymentOptions();
+          const elapsed = Date.now() - initTime;
+          if (walletReady || elapsed > WALLET_GRACE_PERIOD) {
+            tryRenderPaymentOptions();
+          }
           if (!rendered && attempts >= maxAttempts) {
             clearInterval(pollId);
             console.error('Payment SDK: renderPaymentOptions failed after max attempts');