222 lines
8.5 KiB
TypeScript
222 lines
8.5 KiB
TypeScript
import { Link, useForm } from '@inertiajs/react';
|
|
import { Layout, Field, control, button } from './shared';
|
|
import CountrySelect, { type Country } from '@/components/country-select';
|
|
type Journey = {
|
|
id: string;
|
|
dossier_id: string | null;
|
|
title: string;
|
|
status: string;
|
|
reference: string | null;
|
|
request_status: string | null;
|
|
country: string | null;
|
|
declared_origin: { code: string | null; name: string };
|
|
};
|
|
function JourneyCard({
|
|
journey,
|
|
countries,
|
|
}: {
|
|
journey: Journey;
|
|
countries: Country[];
|
|
}) {
|
|
const form = useForm({
|
|
message: '',
|
|
country: '',
|
|
declared_origin_country_code: '',
|
|
role: 'investir',
|
|
horizon: '',
|
|
privacy_consent: false,
|
|
});
|
|
return (
|
|
<article className="space-y-4 rounded-xl border p-5">
|
|
<h2 className="text-xl font-semibold">
|
|
{journey.dossier_id ? (
|
|
<Link
|
|
className="underline"
|
|
href={`/carteira/${journey.dossier_id}`}
|
|
>
|
|
{journey.title}
|
|
</Link>
|
|
) : (
|
|
journey.title
|
|
)}
|
|
</h2>
|
|
<Link
|
|
className="underline"
|
|
href={`/balcao-virtual/painel?journey_id=${journey.id}`}
|
|
>
|
|
Acompanhar este percurso e preparar um pedido de apoio
|
|
</Link>
|
|
{journey.reference ? (
|
|
<>
|
|
<p>
|
|
Protocolo: <strong>{journey.reference}</strong>
|
|
</p>
|
|
<p>
|
|
País declarado: {journey.country ?? 'Não informado'} ·
|
|
Origem da solicitação: {journey.declared_origin.name}
|
|
{journey.declared_origin.code
|
|
? ` (${journey.declared_origin.code})`
|
|
: ''}
|
|
</p>
|
|
<p>
|
|
Estado:{' '}
|
|
{(
|
|
{
|
|
received: 'Recebido',
|
|
in_review: 'Em análise',
|
|
contacted: 'Contactado',
|
|
closed: 'Encerrado',
|
|
} as Record<string, string>
|
|
)[journey.request_status ?? ''] ?? 'Em acompanhamento'}
|
|
</p>
|
|
<p>
|
|
Próximo passo: aguardar contacto da equipa de
|
|
acompanhamento.
|
|
</p>
|
|
</>
|
|
) : journey.dossier_id ? (
|
|
<form
|
|
className="space-y-3"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
form.post(`/investidor/${journey.id}/interesse`);
|
|
}}
|
|
>
|
|
<p>
|
|
Os seus nome e email verificados acompanham o pedido.
|
|
Indique o objectivo para orientar o atendimento.
|
|
</p>
|
|
<Field label="País">
|
|
<CountrySelect
|
|
countries={countries}
|
|
value={form.data.country}
|
|
label="País do requerente"
|
|
error={form.errors.country}
|
|
onChange={(value) => form.setData('country', value)}
|
|
required
|
|
allowLegacyValue
|
|
/>
|
|
</Field>
|
|
<Field label="País de origem do pedido (opcional)">
|
|
<CountrySelect
|
|
countries={countries}
|
|
value={form.data.declared_origin_country_code}
|
|
label="País de origem do pedido (opcional)"
|
|
error={form.errors.declared_origin_country_code}
|
|
onChange={(value) =>
|
|
form.setData(
|
|
'declared_origin_country_code',
|
|
value,
|
|
)
|
|
}
|
|
/>
|
|
<p className="text-sm">
|
|
País de onde apresenta este pedido. Pode ser
|
|
diferente do país do requerente.
|
|
</p>
|
|
</Field>
|
|
<Field label="Papel pretendido">
|
|
<select
|
|
className={control}
|
|
value={form.data.role}
|
|
onChange={(e) =>
|
|
form.setData('role', e.target.value)
|
|
}
|
|
>
|
|
{[
|
|
'investir',
|
|
'financiar',
|
|
'fornecer',
|
|
'operar',
|
|
'parceria',
|
|
].map((r) => (
|
|
<option key={r} value={r}>
|
|
{r}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</Field>
|
|
<Field label="Horizonte de investimento">
|
|
<input
|
|
className={control}
|
|
placeholder="Ex.: nos próximos 12 meses"
|
|
value={form.data.horizon}
|
|
onChange={(e) =>
|
|
form.setData('horizon', e.target.value)
|
|
}
|
|
required
|
|
/>
|
|
</Field>
|
|
<Field label="Objectivo e capacidade de participação">
|
|
<textarea
|
|
className={control}
|
|
minLength={20}
|
|
value={form.data.message}
|
|
onChange={(e) =>
|
|
form.setData('message', e.target.value)
|
|
}
|
|
required
|
|
/>
|
|
</Field>
|
|
<label className="flex items-start gap-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={form.data.privacy_consent}
|
|
onChange={(e) =>
|
|
form.setData(
|
|
'privacy_consent',
|
|
e.target.checked,
|
|
)
|
|
}
|
|
required
|
|
/>
|
|
Autorizo a reutilização do meu nome e email e o
|
|
tratamento destes dados pela equipa do portal para
|
|
acompanhar este interesse.
|
|
</label>
|
|
{Object.entries(form.errors).map(([k, v]) => (
|
|
<p key={k} role="alert">
|
|
{v}
|
|
</p>
|
|
))}
|
|
<button disabled={form.processing} className={button}>
|
|
Manifestar interesse
|
|
</button>
|
|
</form>
|
|
) : (
|
|
<p>Aguarde a republicação da ficha para iniciar um pedido.</p>
|
|
)}
|
|
</article>
|
|
);
|
|
}
|
|
export default function Workspace({
|
|
journeys,
|
|
countries,
|
|
}: {
|
|
journeys: Journey[];
|
|
countries: Country[];
|
|
}) {
|
|
return (
|
|
<Layout title="O meu painel de investimento">
|
|
<p>
|
|
Oportunidades guardadas, contexto e protocolos das suas
|
|
manifestações.
|
|
</p>
|
|
<Link className={button} href="/carteira">
|
|
Explorar a carteira
|
|
</Link>
|
|
<div className="space-y-5">
|
|
{journeys.map((j) => (
|
|
<JourneyCard key={j.id} journey={j} countries={countries} />
|
|
))}
|
|
</div>
|
|
{!journeys.length && (
|
|
<p>
|
|
Guarde um corredor, cluster ou projecto para preparar o seu
|
|
interesse.
|
|
</p>
|
|
)}
|
|
</Layout>
|
|
);
|
|
}
|