create-brainerce-store 1.27.5 → 1.28.0

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

@@ -1,184 +1,258 @@
-'use client';
-
-import type { CheckoutCustomFieldDefinition } from 'brainerce';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
-
-interface CustomFieldsStepProps {
-  fields: CheckoutCustomFieldDefinition[];
-  values: Record<string, unknown>;
-  onChange: (key: string, value: unknown) => void;
-  onApply: () => void;
-  loading?: boolean;
-  className?: string;
-}
-
-export function CustomFieldsStep({
-  fields,
-  values,
-  onChange,
-  onApply,
-  loading = false,
-  className,
-}: CustomFieldsStepProps) {
-  const t = useTranslations('checkout');
-
-  const isMissing = fields.some((f) => {
-    if (!f.required) return false;
-    const v = values[f.key];
-    return v === undefined || v === null || v === '';
-  });
-
-  return (
-    <div className={cn('space-y-4', className)}>
-      <p className="text-muted-foreground text-sm">{t('customFieldsSubtitle')}</p>
-
-      {fields.map((field) => {
-        const value = values[field.key];
-        const labelEl = (
-          <label
-            htmlFor={`cf-${field.key}`}
-            className="text-foreground mb-1 block text-sm font-medium"
-          >
-            {field.name}
-            {field.required && <span className="text-destructive ms-1">*</span>}
-          </label>
-        );
-        const helpEl = field.description ? (
-          <p className="text-muted-foreground mt-1 text-xs">{field.description}</p>
-        ) : null;
-
-        switch (field.type) {
-          case 'TEXT':
-            return (
-              <div key={field.key}>
-                {labelEl}
-                <input
-                  id={`cf-${field.key}`}
-                  type="text"
-                  value={(value as string) ?? ''}
-                  onChange={(e) => onChange(field.key, e.target.value)}
-                  required={field.required}
-                  minLength={field.minLength ?? undefined}
-                  maxLength={field.maxLength ?? undefined}
-                  className="border-border bg-background text-foreground w-full rounded border px-3 py-2 text-sm"
-                />
-                {helpEl}
-              </div>
-            );
-
-          case 'TEXTAREA':
-            return (
-              <div key={field.key}>
-                {labelEl}
-                <textarea
-                  id={`cf-${field.key}`}
-                  value={(value as string) ?? ''}
-                  onChange={(e) => onChange(field.key, e.target.value)}
-                  required={field.required}
-                  minLength={field.minLength ?? undefined}
-                  maxLength={field.maxLength ?? undefined}
-                  rows={3}
-                  className="border-border bg-background text-foreground w-full rounded border px-3 py-2 text-sm"
-                />
-                {helpEl}
-              </div>
-            );
-
-          case 'NUMBER':
-            return (
-              <div key={field.key}>
-                {labelEl}
-                <input
-                  id={`cf-${field.key}`}
-                  type="number"
-                  value={(value as number | string) ?? ''}
-                  onChange={(e) =>
-                    onChange(field.key, e.target.value === '' ? '' : Number(e.target.value))
-                  }
-                  required={field.required}
-                  min={field.minValue ?? undefined}
-                  max={field.maxValue ?? undefined}
-                  className="border-border bg-background text-foreground w-full rounded border px-3 py-2 text-sm"
-                />
-                {helpEl}
-              </div>
-            );
-
-          case 'BOOLEAN':
-            return (
-              <div key={field.key} className="flex items-start gap-2">
-                <input
-                  id={`cf-${field.key}`}
-                  type="checkbox"
-                  checked={value === true}
-                  onChange={(e) => onChange(field.key, e.target.checked)}
-                  className="mt-1"
-                />
-                <div className="flex-1">
-                  <label
-                    htmlFor={`cf-${field.key}`}
-                    className="text-foreground text-sm font-medium"
-                  >
-                    {field.name}
-                    {field.required && <span className="text-destructive ms-1">*</span>}
-                  </label>
-                  {helpEl}
-                </div>
-              </div>
-            );
-
-          case 'SELECT':
-            return (
-              <div key={field.key}>
-                {labelEl}
-                <select
-                  id={`cf-${field.key}`}
-                  value={(value as string) ?? ''}
-                  onChange={(e) => onChange(field.key, e.target.value)}
-                  required={field.required}
-                  className="border-border bg-background text-foreground w-full rounded border px-3 py-2 text-sm"
-                >
-                  <option value="">{t('customFieldsSelectPlaceholder')}</option>
-                  {field.options?.map((opt) => (
-                    <option key={opt.value} value={opt.value}>
-                      {opt.label}
-                    </option>
-                  ))}
-                </select>
-                {helpEl}
-              </div>
-            );
-
-          case 'DATE':
-            return (
-              <div key={field.key}>
-                {labelEl}
-                <input
-                  id={`cf-${field.key}`}
-                  type="date"
-                  value={(value as string) ?? ''}
-                  onChange={(e) => onChange(field.key, e.target.value)}
-                  required={field.required}
-                  className="border-border bg-background text-foreground w-full rounded border px-3 py-2 text-sm"
-                />
-                {helpEl}
-              </div>
-            );
-
-          default:
-            return null;
-        }
-      })}
-
-      <button
-        type="button"
-        onClick={onApply}
-        disabled={loading || isMissing}
-        className="bg-primary text-primary-foreground w-full rounded px-4 py-3 text-sm font-medium transition-opacity hover:opacity-90 disabled:opacity-50"
-      >
-        {loading ? t('customFieldsApplying') : t('customFieldsApply')}
-      </button>
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import type { CheckoutCustomFieldDefinition } from 'brainerce';
+import { useTranslations } from '@/lib/translations';
+import { cn } from '@/lib/utils';
+
+interface CustomFieldsStepProps {
+  fields: CheckoutCustomFieldDefinition[];
+  values: Record<string, unknown>;
+  onChange: (key: string, value: unknown) => void;
+  onApply: () => void;
+  onUploadFile?: (file: File) => Promise<{ url: string; key: string }>;
+  loading?: boolean;
+  className?: string;
+}
+
+const MAX_IMAGE_SIZE = 5 * 1024 * 1024; // 5 MB
+const ACCEPTED_IMAGE_TYPES = 'image/jpeg,image/png,image/webp,image/gif';
+
+export function CustomFieldsStep({
+  fields,
+  values,
+  onChange,
+  onApply,
+  onUploadFile,
+  loading = false,
+  className,
+}: CustomFieldsStepProps) {
+  const t = useTranslations('checkout');
+  const [uploadingKeys, setUploadingKeys] = useState<Set<string>>(new Set());
+
+  const isMissing = fields.some((f) => {
+    if (!f.required) return false;
+    const v = values[f.key];
+    return v === undefined || v === null || v === '';
+  });
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      <p className="text-muted-foreground text-sm">{t('customFieldsSubtitle')}</p>
+
+      {fields.map((field) => {
+        const value = values[field.key];
+        const labelEl = (
+          <label
+            htmlFor={`cf-${field.key}`}
+            className="text-foreground mb-1 block text-sm font-medium"
+          >
+            {field.name}
+            {field.required && <span className="text-destructive ms-1">*</span>}
+          </label>
+        );
+        const helpEl = field.description ? (
+          <p className="text-muted-foreground mt-1 text-xs">{field.description}</p>
+        ) : null;
+
+        switch (field.type) {
+          case 'TEXT':
+            return (
+              <div key={field.key}>
+                {labelEl}
+                <input
+                  id={`cf-${field.key}`}
+                  type="text"
+                  value={(value as string) ?? ''}
+                  onChange={(e) => onChange(field.key, e.target.value)}
+                  required={field.required}
+                  minLength={field.minLength ?? undefined}
+                  maxLength={field.maxLength ?? undefined}
+                  className="border-border bg-background text-foreground w-full rounded border px-3 py-2 text-sm"
+                />
+                {helpEl}
+              </div>
+            );
+
+          case 'TEXTAREA':
+            return (
+              <div key={field.key}>
+                {labelEl}
+                <textarea
+                  id={`cf-${field.key}`}
+                  value={(value as string) ?? ''}
+                  onChange={(e) => onChange(field.key, e.target.value)}
+                  required={field.required}
+                  minLength={field.minLength ?? undefined}
+                  maxLength={field.maxLength ?? undefined}
+                  rows={3}
+                  className="border-border bg-background text-foreground w-full rounded border px-3 py-2 text-sm"
+                />
+                {helpEl}
+              </div>
+            );
+
+          case 'NUMBER':
+            return (
+              <div key={field.key}>
+                {labelEl}
+                <input
+                  id={`cf-${field.key}`}
+                  type="number"
+                  value={(value as number | string) ?? ''}
+                  onChange={(e) =>
+                    onChange(field.key, e.target.value === '' ? '' : Number(e.target.value))
+                  }
+                  required={field.required}
+                  min={field.minValue ?? undefined}
+                  max={field.maxValue ?? undefined}
+                  className="border-border bg-background text-foreground w-full rounded border px-3 py-2 text-sm"
+                />
+                {helpEl}
+              </div>
+            );
+
+          case 'BOOLEAN':
+            return (
+              <div key={field.key} className="flex items-start gap-2">
+                <input
+                  id={`cf-${field.key}`}
+                  type="checkbox"
+                  checked={value === true}
+                  onChange={(e) => onChange(field.key, e.target.checked)}
+                  className="mt-1"
+                />
+                <div className="flex-1">
+                  <label
+                    htmlFor={`cf-${field.key}`}
+                    className="text-foreground text-sm font-medium"
+                  >
+                    {field.name}
+                    {field.required && <span className="text-destructive ms-1">*</span>}
+                  </label>
+                  {helpEl}
+                </div>
+              </div>
+            );
+
+          case 'SELECT':
+            return (
+              <div key={field.key}>
+                {labelEl}
+                <select
+                  id={`cf-${field.key}`}
+                  value={(value as string) ?? ''}
+                  onChange={(e) => onChange(field.key, e.target.value)}
+                  required={field.required}
+                  className="border-border bg-background text-foreground w-full rounded border px-3 py-2 text-sm"
+                >
+                  <option value="">{t('customFieldsSelectPlaceholder')}</option>
+                  {field.options?.map((opt) => (
+                    <option key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </option>
+                  ))}
+                </select>
+                {helpEl}
+              </div>
+            );
+
+          case 'DATE':
+            return (
+              <div key={field.key}>
+                {labelEl}
+                <input
+                  id={`cf-${field.key}`}
+                  type="date"
+                  value={(value as string) ?? ''}
+                  onChange={(e) => onChange(field.key, e.target.value)}
+                  required={field.required}
+                  className="border-border bg-background text-foreground w-full rounded border px-3 py-2 text-sm"
+                />
+                {helpEl}
+              </div>
+            );
+
+          case 'IMAGE': {
+            const isUploading = uploadingKeys.has(field.key);
+            return (
+              <div key={field.key}>
+                {labelEl}
+                {value ? (
+                  <div className="relative inline-block">
+                    <img
+                      src={value as string}
+                      alt={field.name}
+                      className="border-border max-h-32 rounded border object-contain"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => onChange(field.key, '')}
+                      className="bg-background/80 text-foreground absolute end-1 top-1 rounded-full p-1 text-xs leading-none"
+                      aria-label={t('customFieldsImageRemove')}
+                    >
+                      ✕
+                    </button>
+                  </div>
+                ) : (
+                  <label
+                    htmlFor={`cf-${field.key}`}
+                    className={cn(
+                      'border-border flex cursor-pointer flex-col items-center gap-2 rounded border-2 border-dashed p-6 text-center transition-colors',
+                      isUploading ? 'opacity-50' : 'hover:border-primary/40',
+                    )}
+                  >
+                    <span className="text-muted-foreground text-sm">
+                      {isUploading ? t('customFieldsImageUploading') : t('customFieldsImageUpload')}
+                    </span>
+                    <input
+                      id={`cf-${field.key}`}
+                      type="file"
+                      accept={ACCEPTED_IMAGE_TYPES}
+                      disabled={isUploading || !onUploadFile}
+                      className="hidden"
+                      onChange={async (e) => {
+                        const file = e.target.files?.[0];
+                        if (!file || !onUploadFile) return;
+                        if (file.size > MAX_IMAGE_SIZE) {
+                          alert(t('customFieldsImageTooLarge'));
+                          return;
+                        }
+                        setUploadingKeys((prev) => new Set(prev).add(field.key));
+                        try {
+                          const result = await onUploadFile(file);
+                          onChange(field.key, result.url);
+                        } catch {
+                          // Upload failed — user can retry
+                        } finally {
+                          setUploadingKeys((prev) => {
+                            const next = new Set(prev);
+                            next.delete(field.key);
+                            return next;
+                          });
+                        }
+                      }}
+                    />
+                  </label>
+                )}
+                {helpEl}
+              </div>
+            );
+          }
+
+          default:
+            return null;
+        }
+      })}
+
+      <button
+        type="button"
+        onClick={onApply}
+        disabled={loading || isMissing}
+        className="bg-primary text-primary-foreground w-full rounded px-4 py-3 text-sm font-medium transition-opacity hover:opacity-90 disabled:opacity-50"
+      >
+        {loading ? t('customFieldsApplying') : t('customFieldsApply')}
+      </button>
+    </div>
+  );
+}

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

@@ -2,10 +2,13 @@
 
 import { useEffect, useState, useRef, useCallback } from 'react';
 import type { PaymentIntent, PaymentClientSdk } from 'brainerce';
+import { formatPrice } from 'brainerce';
 import { getClient } from '@/lib/brainerce';
 import { useTranslations } from '@/lib/translations';
 import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { useStoreInfo } from '@/providers/store-provider';
 import { cn } from '@/lib/utils';
+import { isAllowedPaymentUrl, isValidCheckoutId, safePaymentRedirect } from '@/lib/safe-redirect';
 
 /**
  * Backward-compat defaults when backend doesn't return clientSdk.
@@ -67,6 +70,18 @@ function extractMessage(response: unknown): string {
 
 export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
   const t = useTranslations('checkout');
+  const { storeInfo } = useStoreInfo();
+
+  // Defense in depth: the parent already validates checkoutId from URL params,
+  // but we re-check here so the component is safe to render in any context.
+  if (!isValidCheckoutId(checkoutId)) {
+    return (
+      <div className={cn('rounded-md border border-destructive/50 p-4', className)}>
+        <p className="text-sm text-destructive">{t('paymentError')}</p>
+      </div>
+    );
+  }
+
   const [paymentIntent, setPaymentIntent] = useState<PaymentIntent | null>(null);
   const [preloadedSdk, setPreloadedSdk] = useState<PaymentClientSdk | null>(null);
   const [loading, setLoading] = useState(true);
@@ -351,13 +366,21 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
       if (sdk.renderType === 'sandbox') return;
 
       if (sdk.renderType === 'redirect') {
-        window.location.href = intent.clientSecret;
+        if (!isAllowedPaymentUrl(intent.clientSecret)) {
+          setError(t('paymentRedirectBlocked'));
+          return;
+        }
+        safePaymentRedirect(intent.clientSecret);
         return;
       }
 
       // Iframe mode: listen for postMessage from the /payment-complete callback
       // page that loads inside the iframe after the provider redirects on completion.
       if (sdk.renderType === 'iframe') {
+        if (!isAllowedPaymentUrl(intent.clientSecret)) {
+          setError(t('paymentRedirectBlocked'));
+          return;
+        }
         const handleMessage = (event: MessageEvent) => {
           if (event.origin !== window.location.origin) return;
           if (event.data?.type !== 'brainerce:payment-complete') return;
@@ -533,38 +556,79 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
   }
 
   if (sdk.renderType === 'iframe') {
+    if (!isAllowedPaymentUrl(paymentIntent.clientSecret)) return null;
+    const formattedAmount = formatPrice(Number(paymentIntent.amount) || 0, {
+      currency: paymentIntent.currency,
+    }) as string;
     return (
       <>
         {/* Modal overlay */}
         <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/50 py-6 backdrop-blur-sm">
-          <div className="relative mx-4 w-full max-w-md rounded-2xl bg-white shadow-2xl">
-            {/* Close button */}
-            <button
-              onClick={() => {
-                window.location.href = `/checkout?checkout_id=${checkoutId}&canceled=true`;
-              }}
-              className="absolute end-3 top-3 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white/80 text-gray-500 shadow-sm transition-colors hover:bg-gray-100 hover:text-gray-700"
-              aria-label="Close"
-            >
+          <div className="bg-background relative mx-4 flex w-full max-w-lg flex-col overflow-hidden rounded-2xl shadow-2xl">
+            {/* Header */}
+            <div className="border-border flex items-center justify-between gap-4 border-b px-5 py-4">
+              <div className="flex min-w-0 flex-col">
+                <span className="text-foreground truncate text-sm font-semibold">
+                  {storeInfo?.name}
+                </span>
+                <span className="text-muted-foreground text-xs">{t('payment')}</span>
+              </div>
+              <div className="flex items-baseline gap-1.5">
+                <span className="text-foreground text-lg font-bold tabular-nums">
+                  {formattedAmount}
+                </span>
+                <span className="text-muted-foreground text-xs uppercase">
+                  {paymentIntent.currency}
+                </span>
+              </div>
+              <button
+                onClick={() => {
+                  window.location.href = `/checkout?checkout_id=${checkoutId}&canceled=true`;
+                }}
+                className="text-muted-foreground hover:bg-secondary hover:text-foreground flex h-8 w-8 shrink-0 items-center justify-center rounded-full transition-colors"
+                aria-label="Close"
+              >
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 14 14"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                >
+                  <path d="M1 1l12 12M13 1L1 13" />
+                </svg>
+              </button>
+            </div>
+            {/* Iframe body */}
+            <iframe
+              src={paymentIntent.clientSecret}
+              className="w-full border-0"
+              style={{ height: '70vh' }}
+              title={t('payment')}
+              allow="payment"
+            />
+            {/* Footer */}
+            <div className="border-border bg-secondary/30 text-muted-foreground flex items-center justify-center gap-2 border-t px-5 py-3 text-xs">
               <svg
                 width="14"
                 height="14"
-                viewBox="0 0 14 14"
+                viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 strokeWidth="2"
                 strokeLinecap="round"
+                strokeLinejoin="round"
+                aria-hidden="true"
               >
-                <path d="M1 1l12 12M13 1L1 13" />
+                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+                <path d="m9 12 2 2 4-4" />
               </svg>
-            </button>
-            <iframe
-              src={paymentIntent.clientSecret}
-              className="w-full rounded-2xl border-0"
-              style={{ height: '80vh' }}
-              title={t('payment')}
-              allow="payment"
-            />
+              <span>
+                {t('securePayment')} · <span className="font-medium">Brainerce</span>
+              </span>
+            </div>
           </div>
         </div>
         {/* Placeholder so the checkout layout doesn't collapse */}