All reports

{ticket.display_number} {ticket.needs_your_reply ? ( Your reply is needed ) : null}

{ticket.issue}

{ticket.status.description}

{ticket.needs_your_reply ? (

The support team has asked you something. Reply at the bottom of this page so the report keeps moving.

) : null}

{step.state === 'done' ? ( ) : ( )}

{index + 1}. {step.label}

{step.description}

{ticket.attachments.length > 0 ? (

Your photos and files

{attachment.name} {attachment.human_size}

) : null} {ticket.job ? (

{ticket.job.job_number}

{ticket.job.title}

{ticket.job.address ? (

{ticket.job.address}

) : null}

{ticket.job.system_size_kw ? `${ticket.job.system_size_kw} kW` : 'View system'} ) : null} {ticket.resolution_html ? (

{ticket.dates.resolved_at ? (

Resolved{' '} {formatDateTime(ticket.dates.resolved_at)}

) : null} ) : null} {ticket.messages.length === 0 ? (

No replies yet. We will answer here, and the status above changes when we do.

) : (

{message.from_customer ? 'You' : message.author}

{formatDateTime(message.posted_at)}

)} {canReply ? (

{({ processing, errors }) => ( <> Add a reply

<InputError
                                        message={errors.body}
                                        className="mt-1.5"
                                    />
                                    <div className="mt-3 flex items-center justify-between gap-3">
                                        <p className="text-[11px] text-muted-foreground">
                                            Replies go to the support desk, not
                                            to an emergency service.
                                        </p>
                                        <Button
                                            type="submit"
                                            disabled={processing}
                                        >
                                            {processing ? (
                                                <Spinner />
                                            ) : (
                                                <Send />
                                            )}
                                            Send reply
                                        </Button>
                                    </div>
                                </>
                            )}
                        </Form>
                    ) : (
                        <p className="mt-4 border-t border-hairline pt-4 text-xs text-muted-foreground">
                            This report is closed. If the issue has come back,{' '}
                            <Link
                                href={`/ticket/tickets/new${ticket.job ? `?job=${ticket.job.id}` : ''}`}
                                className="font-medium text-foreground underline underline-offset-4"
                            >
                                log a new report
                            </Link>{' '}
                            so it is triaged again.
                        </p>
                    )}
                </TicketCard>

<p className="px-1 text-xs text-muted-foreground">
                    Reported {formatDate(ticket.dates.reported_at)}
                    {ticket.dates.acknowledged_at
                        ? ` · acknowledged ${formatDate(ticket.dates.acknowledged_at)}`
                        : ''}
                </p>
            </div>
        </>
    );
}