-
+ // Shared with the officer's review screen, so the applicant and the reviewer
+ // never read the same answer two different ways.
+ const display = (field: FormFieldConfig, raw: unknown) =>
+ displayFieldValue(field, raw, {
+ language: i18n.language,
+ showDate,
+ currency: config.feeCurrency,
+ }) || "—";
+
+ return (
+
+ {sections.map((section) => {
+ const fields = (section.fields ?? []).filter((f) =>
+ conditionHolds(f.showWhen, formData),
+ );
+ if (fields.length === 0) return null;
+
+ return (
+
+
+ {localized(section.title)}
+
+ {fields.length} {fields.length === 1 ? "detail" : "details"}
+
+
+ {localized(section.description) && (
+
+ {localized(section.description)}
+
+ )}
+
+
+ {/* Label above value in two columns — a definition list reads far
+ better than a bordered grid when most answers are short. */}
+
+ {fields.map((field) => {
+ const value = display(
+ field,
+ formData[section.key]?.[field.key],
+ );
+ const answered = value !== "—";
+ return (
+
+
+ {localized(field.label)}
+
+
+ {answered ? value : "Not provided"}
+
+
+ );
+ })}
+
+
+ );
+ })}
+
+
Documents
+
-
-