{customer?.customer_number ?? 'Your account'}

Your details

Keep your name, contact details and postal address up to date. Every change is checked by our team before it goes on your record.

{pending ? ( ) : lastReviewed ? ( ) : null}

You can save any correction now — we hold it for you straight away. A person on our team reviews it, usually the same working day, and your details update once it is approved. If we cannot approve something we will tell you why here.

{({ processing, errors }) => ( <>

First name

Last name

Email address

This is also how you sign in. If it changes, we will email the new address for you to confirm.

Mobile or phone

Alternate phone

Postal address

Where we send paperwork and invoices. The address of the installation is changed by our team — report it below and we will sort it out.

Street address

Unit, building or level

Suburb

State

Postcode

Anything we should know? (optional)

<div className="flex flex-wrap items-center gap-3">
                                    <Button
                                        type="submit"
                                        disabled={processing}
                                    >
                                        {processing && <Spinner />}
                                        Save for approval
                                    </Button>
                                    <p className="text-xs text-muted-foreground">
                                        Nothing changes on your record until
                                        our team approves it.
                                    </p>
                                </div>
                            </>
                        )}
                    </Form>
                </TicketCard>

<div className="mt-5 flex items-start gap-2 text-xs leading-relaxed text-muted-foreground">
                    <Info className="mt-0.5 size-3.5 shrink-0" />
                    <p>
                        Need the installation address, the system details or the
                        name on the account changed?{' '}
                        <Link
                            href="/ticket/tickets/new"
                            className="font-medium text-foreground underline underline-offset-4"
                        >
                            Report it
                        </Link>{' '}
                        and the support team will take care of it.
                    </p>
                </div>
            </div>
        </>
    );
}

/** A request that is still in the queue. */
function PendingPanel({ request }: { request: CustomerChangeRequest }) {
    return (
        <section className="mt-6 rounded-2xl border border-amber-500/25 bg-amber-500/[0.07] p-5">
            <div className="flex flex-wrap items-center justify-between gap-2">
                <p className="inline-flex items-center gap-2 text-sm font-semibold text-amber-900 dark:text-amber-200">
                    <Clock className="size-4" />
                    Waiting for our team to approve
                </p>
                {request.submitted_at ? (
                    <p className="text-xs text-muted-foreground">
                        Saved {formatDate(request.submitted_at)}
                    </p>
                ) : null}
            </div>

<p className="mt-1 text-xs leading-relaxed text-muted-foreground">
                Your saved details are below. We have your correction and will
                confirm it — your record stays as it is until then.
            </p>

{request.customer_note ? (
                <p className="mt-3 rounded-lg bg-background/60 px-3 py-2 text-xs leading-relaxed">
                    <span className="font-medium">Your note: </span>
                    {request.customer_note}
                </p>
            ) : null}
        </section>
    );
}

/** The answer to the most recent request, so the customer is never left guessing. */
function OutcomePanel({ request }: { request: CustomerChangeRequest }) {
    const approved = request.status.value === 'approved';

return (
        <section
            className={`mt-6 rounded-2xl p-5 ring-1 ${
                approved
                    ? 'bg-emerald-500/[0.07] ring-emerald-500/25'
                    : 'bg-red-500/[0.06] ring-red-500/25'
            }`}
        >
            <div className="flex flex-wrap items-center justify-between gap-2">
                <p
                    className={`inline-flex items-center gap-2 text-sm font-semibold ${
                        approved
                            ? 'text-emerald-900 dark:text-emerald-200'
                            : 'text-red-900 dark:text-red-200'
                    }`}
                >
                    {approved ? (
                        <CheckCircle2 className="size-4" />
                    ) : (
                        <XCircle className="size-4" />
                    )}
                    {approved
                        ? 'Your last change was approved'
                        : 'Your last change was declined'}
                </p>
                {request.reviewed_at ? (
                    <p className="text-xs text-muted-foreground">
                        {formatDate(request.reviewed_at)}
                    </p>
                ) : null}
            </div>

<div className="mt-2">
                <span
                    className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium ${toneClasses(request.status.tone).pill}`}
                >
                    {request.status.label}
                </span>
            </div>

{request.changes.length > 0 ? (
                <ChangeRows changes={request.changes} className="mt-3" />
            ) : null}

{request.review_note ? (
                <p className="mt-3 rounded-lg bg-background/60 px-3 py-2 text-xs leading-relaxed">
                    <span className="font-medium">From our team: </span>
                    {request.review_note}
                </p>
            ) : null}
        </section>
    );
}

/** What was asked for, field by field, with the old value kept visible. */
function ChangeRows({
    changes,
    className,
}: {
    changes: CustomerChangeRow[];
    className?: string;
}) {
    if (changes.length === 0) {
        return null;
    }

return (
        <dl
            className={`divide-y divide-hairline/70 overflow-hidden rounded-xl bg-background/60 ${className ?? ''}`}
        >
            {changes.map((change) => (
                <div
                    key={change.field}
                    className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 px-3 py-2 text-xs"
                >
                    <dt className="font-medium text-muted-foreground">
                        {change.label}
                    </dt>
                    <dd className="flex flex-wrap items-baseline gap-2">
                        <span className="text-muted-foreground line-through">
                            {change.from ?? '—'}
                        </span>
                        <span aria-hidden className="text-muted-foreground">
                            →
                        </span>
                        <span className="font-medium">{change.to ?? '—'}</span>
                    </dd>
                </div>
            ))}
        </dl>
    );
}