const { Card, Badge, Eyebrow, Icon, LinkArrow } = window.OppDateDesignSystem_4aa598;
/* Eligibility detail: the questions the assistant asks are generated from the listing, so the
panel shows a short conversational run rather than a static requirement list. */
function EligibilityDetail() {
const qs = ['Which degree are you currently enrolled in?', 'Have you completed at least two years of study?', 'Do you hold citizenship in an eligible country?'];
return (
{qs.map((q, i) =>
{i + 1}
{q}
)}
If you do not qualify, the check returns opportunities you do qualify for in the same session, drawn from the same field, region and funding filters.
{rows.map(([doc, s]) =>
{doc}
{DOC_STATES[s].label}
)}
{DOC_STATES.map((s) =>
{s.label}
{s.note}
)}
{lines.map(([l, note, tag], i) =>
{l}
{note}
{tag}
)}
Total, shown before you pay
Final consent is granted here.
A private thread opens automatically, and an automated first message confirms your application has been received. Everything after this happens in that thread.
{RECEIVED_STATUSES.map((s, i) =>
{s}
)}
);
}
const FLOW = [
{ i: '01', icon: 'shield-check', title: 'Eligibility check', body: "A conversational assistant reads the requirements the listing publishes and asks only the questions those requirements depend on, so the answer is specific to that opportunity.", Detail: EligibilityDetail },
{ i: '02', icon: 'files', title: 'Document review', body: 'You mark each required document Ready, Needs refinement, or Needs creation. Documents already in your credential library are attached automatically, so nothing is uploaded twice.', Detail: DocumentsDetail },
{ i: '03', icon: 'receipt', title: 'Payment and authorization', body: 'The fees and the total are shown in full before you pay. You sign the Representation Authorization Agreement in this step, which authorizes us to prepare and, where permitted, submit your application.', Detail: PaymentDetail },
{ i: '04', icon: 'inbox', title: 'Received by the team', body: 'Your application reaches the team and a private thread opens immediately. Status banners move from Payment Confirmed through Submitted, so the current stage is always visible.', Detail: ReceivedDetail }];
/* Scroll-linked rail, same principle as the landing page's How it works: the fill tracks the
reading line down the section, and each step's badge lights when the fill reaches it. */
function ApplyFlow() {
const wrapRef = React.useRef(null);
const badgeRefs = React.useRef([]);
const [rail, setRail] = React.useState({ top: 0, height: 0, fill: 0, centers: [] });
React.useLayoutEffect(() => {
const measure = () => {
const wrap = wrapRef.current;
const els = badgeRefs.current.filter(Boolean);
if (!wrap || els.length < 2) return;
const wrapTop = wrap.getBoundingClientRect().top + window.scrollY;
const centers = els.map((el) => {
const r = el.getBoundingClientRect();
return r.top + window.scrollY + r.height / 2 - wrapTop;
});
const top = centers[0];
const height = centers[centers.length - 1] - top;
const line = window.scrollY + window.innerHeight * 0.5 - wrapTop;
setRail({ top, height, fill: Math.max(0, Math.min(height, line - top)), centers });
};
measure();
window.addEventListener('scroll', measure, { passive: true });
window.addEventListener('resize', measure);
return () => {window.removeEventListener('scroll', measure);window.removeEventListener('resize', measure);};
}, []);
const reached = (n) => rail.centers.length === FLOW.length && rail.top + rail.fill >= rail.centers[n] - 1;
return (
The flow
How an application moves through OppDate Apply.
{FLOW.map((s, n) =>
badgeRefs.current[n] = el} style={{ position: 'relative', zIndex: 1, width: 56, height: 56, borderRadius: 'var(--radius-pill)', display: 'flex', alignItems: 'center', justifyContent: 'center', background: reached(n) ? 'var(--action)' : 'var(--surface-card)', color: reached(n) ? 'var(--color-text-inverse)' : 'var(--text-quiet)', border: '1.5px solid ' + (reached(n) ? 'var(--action)' : 'var(--line)'), transition: 'background-color .4s var(--ease-out-soft), color .4s var(--ease-out-soft), border-color .4s var(--ease-out-soft)' }}>
)}
);
}
window.OMA = Object.assign(window.OMA || {}, { ApplyFlow });