redefined-designs/frontend/src/admin/ChangeCustomerEmail.tsx

import { useState } from 'react';
import Modal from 'antd/es/modal';
import Form from 'antd/es/form';
import Input from 'antd/es/input';
import Alert from 'antd/es/alert';
import Button from 'antd/es/button';
import Typography from 'antd/es/typography';
import message from 'antd/es/message';
import { changeCustomerEmail } from './adminCustomersApi';

const { Paragraph, Text } = Typography;

type Props = Readonly<{
  customerId: number;
  currentEmail: string;
  open: boolean;
  onClose: () => void;
  /** Called after a successful change, so the drawer and the table can refresh. */
  onChanged: () => void;
}>;

/**
 * Moving a customer's account to an address they can reach (#337).
 *
 * The last step of the only recovery route available to someone who has lost
 * their mailbox. There is deliberately no self-service equivalent, because the
 * email address is the root of trust for every other route and this shop holds
 * no second proof of identity.
 *
 * The form leads with what this costs rather than burying it, because the
 * operator is about to make a decision on someone else's behalf and the
 * consequences land on that person, not on them.
 */
export default function ChangeCustomerEmail({
  customerId,
  currentEmail,
  open,
  onClose,
  onChanged
}: Props) {
  const [form] = Form.useForm();
  const [saving, setSaving] = useState(false);

  async function submit(values: { email: string; reason: string }) {
    setSaving(true);
    try {
      const result = await changeCustomerEmail(customerId, values.email, values.reason);
      // Named rather than counted, because "moved to that address" is the fact
      // the operator has to repeat back to the customer on the phone.
      message.success(`Account moved to ${result.customer.email}`);
      if (result.passkeysRemoved > 0) {
        // Its own message and a long one. The customer will find their passkeys
        // gone and needs to be told why while they are still on the line —
        // finding out later looks like a second thing going wrong.
        message.warning(
          result.passkeysRemoved === 1
            ? 'Their saved passkey was removed. They will need to set it up again.'
            : `Their ${result.passkeysRemoved} saved passkeys were removed. They will need to set them up again.`,
          10
        );
      }
      form.resetFields();
      onChanged();
      onClose();
    } catch (err) {
      message.error((err as Error).message);
    } finally {
      setSaving(false);
    }
  }

  return (
    <Modal
      title="Move this account to a new email address"
      open={open}
      onCancel={onClose}
      footer={null}
      destroyOnHidden
      style={{ maxWidth: 'calc(100vw - 32px)' }}
    >
      <Alert
        type="warning"
        showIcon
        message="Verify the customer before doing this"
        description="This is the same operation as an account takeover, and nothing here can tell the difference. Check their answers against the order history on the account first — items bought, dates, the shipping address on file."
        style={{ marginBottom: 16 }}
      />

      <Paragraph type="secondary">
        Moving the account signs the customer out everywhere, removes any saved passkeys, and
        cancels reset links already sent to <Text code>{currentEmail}</Text>. A notice goes to that
        address, and a confirmation link goes to the new one.
      </Paragraph>

      <Form form={form} layout="vertical" onFinish={submit}>
        <Form.Item
          name="email"
          label="New email address"
          rules={[{ required: true, type: 'email', message: 'A valid email address is required' }]}
        >
          <Input autoComplete="off" placeholder="what they can actually reach" />
        </Form.Item>
        <Form.Item
          name="reason"
          label="How you verified them"
          // The server requires this too, and refuses without it. Collected here
          // as well so the refusal is not the first the operator hears of it.
          rules={[{ required: true, min: 10, message: 'A sentence, not a word — this is the record' }]}
          extra="Recorded against the account and never shown to the customer. This is what tells a genuine recovery from a takeover afterwards."
        >
          <Input.TextArea rows={3} placeholder="Named the last two items bought and the shipping address on file." />
        </Form.Item>
        <Form.Item style={{ marginBottom: 0 }}>
          <Button type="primary" danger htmlType="submit" loading={saving} block>
            Move the account
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
}