redefined-designs/frontend/src/customer/AuthPromptModal.tsx

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>
  );
}