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

import { useEffect, useState } from 'react';
import { Typography, Switch, Button, Table, Modal, message, Space, Divider } from 'antd';
import { useNavigate } from 'react-router-dom';
import { fetchMyOrders, OrderHistoryItem, updateConsent, exportMyData, deleteMyAccount } from './customerApi';
import { setFavoriteAlerts } from './favoritesApi';
import { useCustomerAuth } from './CustomerAuthContext';

const { Title, Text } = Typography;

interface Props {
  // Supplied by the route, which decides where closing lands: back to the page
  // the customer came from, or to the storefront when they arrived directly.
  onClose: () => void;
}

export default function Account({ onClose }: Props) {
  const { customer, loading, refresh, logout } = useCustomerAuth();
  const [orders, setOrders] = useState<OrderHistoryItem[]>([]);
  const navigate = useNavigate();

  useEffect(() => {
    if (customer) void fetchMyOrders().then(setOrders).catch(() => message.error('Could not load your orders'));
  }, [customer]);

  useEffect(() => {
    if (!loading && !customer) navigate('/login');
  }, [loading, customer, navigate]);

  if (!customer) return null;

  async function handleFavoriteAlertsToggle(checked: boolean) {
    try {
      await setFavoriteAlerts(checked);
    } catch (err) {
      message.error((err as Error).message);
      return;
    }
    refresh();
    message.success(checked ? 'We will email you when a favorite sells' : 'Turned off');
  }

  async function handleConsentToggle(checked: boolean) {
    await updateConsent(checked);
    message.success(checked ? 'Subscribed to emails' : 'Unsubscribed from emails');
    refresh();
  }

  async function handleLogout() {
    try {
      await logout();
    } catch (err) {
      message.error(`Couldn't log out — ${(err as Error).message}`);
      return;
    }
    // replace, so Back doesn't return to the account page — which would only
    // bounce to /login now that the session is gone.
    navigate('/', { replace: true });
  }

  function handleDelete() {
    Modal.confirm({
      title: 'Delete your account?',
      content: 'This permanently removes your account and personal data. Your past orders are kept for accounting purposes but disconnected from your identity. This cannot be undone.',
      okText: 'Delete my account',
      okButtonProps: { danger: true },
      onOk: async () => {
        await deleteMyAccount();
        // The storefront is rendered behind this modal, so without clearing the
        // session it goes on showing "My Account" and hiding Sign up for an
        // account that no longer exists — visibly stale, not merely stale in
        // state. replace, so Back cannot return to /account and bounce to
        // /login.
        refresh();
        message.success('Account deleted');
        navigate('/', { replace: true });
      }
    });
  }

  return (
    <Modal
      open
      // The account view is a place a customer can be sent by an email link or
      // a bookmark, so it is titled and closable rather than relying on the
      // page behind it to say where they are.
      title="My Account"
      onCancel={onClose}
      footer={null}
      width={700}
      // The view holds profile, two consents, order history, and the account
      // controls, which is taller than a phone. Capping the body and letting it
      // scroll keeps the title and close control in reach instead of pushing
      // them off-screen.
      style={{ maxWidth: 'calc(100vw - 32px)', top: 24 }}
      styles={{ body: { maxHeight: '70vh', overflowY: 'auto' } }}
      destroyOnHidden
    >
      <div>
        <Text>{customer.email}</Text>
        {!customer.email_verified && (
          <div style={{ marginTop: 8 }}>
            <Text type="warning">Email not verified — check your inbox for a verification link.</Text>
          </div>
        )}

        <Divider />
        <Space align="center">
          <Switch checked={customer.marketing_consent} onChange={handleConsentToggle} />
          <Text>Receive emails about new items</Text>
        </Space>

        {/* A separate consent from marketing above, and shown separately so a
            customer can hold one without the other. */}
        <div style={{ marginTop: 12 }}>
          <Space align="center">
            <Switch checked={customer.favorite_alerts} onChange={handleFavoriteAlertsToggle} />
            <Text>Email me when an item I favorited is sold</Text>
          </Space>
        </div>

        <Divider />
        <Title level={5}>Order History</Title>
        <Table
          rowKey="id"
          size="small"
          dataSource={orders}
          pagination={false}
          // Scrolls within itself rather than widening the modal past the
          // viewport on a phone.
          scroll={{ x: 'max-content' }}
          columns={[
            { title: 'Item', dataIndex: 'item_name' },
            { title: 'Amount', dataIndex: 'amount_cents', render: (v: number) => `$${(v / 100).toFixed(2)}` },
            { title: 'Processor', dataIndex: 'processor' },
            { title: 'Date', dataIndex: 'created_at', render: (v: string) => new Date(v).toLocaleDateString() }
          ]}
        />

        <Divider />
        <Space wrap>
          <Button onClick={exportMyData}>Download my data</Button>
          <Button onClick={handleLogout}>Log out</Button>
          <Button danger onClick={handleDelete}>Delete my account</Button>
        </Space>
      </div>
    </Modal>
  );
}