feat: add customer cart with expiry, shipping addresses with USPS validation, and multi-item PayPal checkout

2026-08-14 14:02:25 -05:00
parent 433d7e1db5
commit 9ab689e624
18 changed files with 1242 additions and 189 deletions
@@ -0,0 +1,100 @@
+import { useState } from 'react';
+import { Modal, Form, Input, Button, Checkbox, Tabs, Alert } from 'antd';
+import { registerCustomer, loginCustomer } from './customerApi';
+import { useCustomerAuth } from './CustomerAuthContext';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+export default function AuthPromptModal({ open, onClose, onSuccess }: Props) {
+  const [tab, setTab] = useState<'register' | 'login'>('register');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [form] = Form.useForm();
+  const { refresh } = useCustomerAuth();
+
+  async function handleRegister(values: any) {
+    setLoading(true);
+    setError(null);
+    try {
+      await registerCustomer(values.email, values.password, values.name, !!values.marketingConsent);
+      refresh();
+      onSuccess();
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleLogin(values: any) {
+    setLoading(true);
+    setError(null);
+    try {
+      await loginCustomer(values.email, values.password);
+      refresh();
+      onSuccess();
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Modal
+      title="Create an account to continue"
+      open={open}
+      onCancel={onClose}
+      footer={null}
+      destroyOnClose
+    >
+      {error && <Alert type="error" message={error} style={{ marginBottom: 16 }} />}
+      <Tabs
+        activeKey={tab}
+        onChange={(k) => setTab(k as 'register' | 'login')}
+        items={[
+          {
+            key: 'register',
+            label: 'Create Account',
+            children: (
+              <Form form={form} layout="vertical" onFinish={handleRegister}>
+                <Form.Item name="name" label="Name">
+                  <Input />
+                </Form.Item>
+                <Form.Item name="email" label="Email" rules={[{ required: true, type: 'email' }]}>
+                  <Input />
+                </Form.Item>
+                <Form.Item name="password" label="Password" rules={[{ required: true, min: 8, message: 'At least 8 characters' }]}>
+                  <Input.Password />
+                </Form.Item>
+                <Form.Item name="marketingConsent" valuePropName="checked" initialValue={false}>
+                  <Checkbox>Send me occasional emails about new one-of-a-kind items.</Checkbox>
+                </Form.Item>
+                <Button type="primary" htmlType="submit" block loading={loading}>Create account &amp; continue</Button>
+              </Form>
+            )
+          },
+          {
+            key: 'login',
+            label: 'Log In',
+            children: (
+              <Form layout="vertical" onFinish={handleLogin}>
+                <Form.Item name="email" label="Email" rules={[{ required: true, type: 'email' }]}>
+                  <Input />
+                </Form.Item>
+                <Form.Item name="password" label="Password" rules={[{ required: true }]}>
+                  <Input.Password />
+                </Form.Item>
+                <Button type="primary" htmlType="submit" block loading={loading}>Log in &amp; continue</Button>
+              </Form>
+            )
+          }
+        ]}
+      />
+    </Modal>
+  );
+}