feat: implement pre-selection for nationality and nation fields by repurposing the placeholder field to store default values

apps/backoffice/src/app/features/certificate-requirements/components/FieldEditorDrawer.tsx

@@ -13,7 +13,13 @@ import {
 } from '@mantine/core';
 import { IconPlus, IconTrash } from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
-import { BilingualInput, ModalFooter } from '@ema-platform/ui';
+import {
+  BilingualInput,
+  CountrySelect,
+  countryCodeToValue,
+  countryValueToCode,
+  ModalFooter,
+} from '@ema-platform/ui';
 import type { FormFieldConfig, FormSchemaPalette } from '@ema-platform/api';
 import { ConditionBuilder, type ConditionValue } from './ConditionBuilder';
 import type { ConditionTarget } from '../config/schema-paths';
@@ -74,6 +80,8 @@ export function FieldEditorDrawer({
 
   const typeInfo = fieldTypes.find((f) => f.type === draft.type);
   const isNew = !field;
+  const isCountryType = draft.type === 'NATIONALITY' || draft.type === 'NATION';
+  const isDemonym = draft.type === 'NATIONALITY';
 
   function save() {
     if (!draft.key.trim() || !KEY_PATTERN.test(draft.key.trim())) {
@@ -170,11 +178,28 @@ export function FieldEditorDrawer({
           }}
         />
 
-        <BilingualInput
-          label={t('certReq.field.placeholder', 'Placeholder')}
-          value={{ en: draft.placeholder?.en ?? '', am: draft.placeholder?.am ?? '' }}
-          onChange={(v) => setDraft((d) => ({ ...d, placeholder: v }))}
-        />
+        {isCountryType ? (
+          // The picker has its own placeholder, so this slot chooses what is
+          // pre-selected instead. It travels in `placeholder.en` — the one
+          // optional text slot the schema already has — as the English name,
+          // the same form the applicant's answer takes (countryCodeToValue).
+          <CountrySelect
+            label={t('certReq.field.defaultValue', 'Default value')}
+            description={t('certReq.field.defaultValueHelp', 'Pre-selected for the applicant, who can still change it')}
+            demonym={isDemonym}
+            value={countryValueToCode(draft.placeholder?.en, isDemonym)}
+            onChange={(code) => {
+              const name = countryCodeToValue(code, isDemonym);
+              setDraft((d) => ({ ...d, placeholder: name ? { en: name, am: '' } : undefined }));
+            }}
+          />
+        ) : (
+          <BilingualInput
+            label={t('certReq.field.placeholder', 'Placeholder')}
+            value={{ en: draft.placeholder?.en ?? '', am: draft.placeholder?.am ?? '' }}
+            onChange={(v) => setDraft((d) => ({ ...d, placeholder: v }))}
+          />
+        )}
 
         <BilingualInput
           label={t('certReq.field.helpText', 'Help text')}

apps/backoffice/src/app/i18n/locales/am.ts

@@ -1956,6 +1956,8 @@ export const am: Translations = {
       typeNation: "አመልካቹ ከሙሉ የአገር ዝርዝር ይመርጣል (ኢትዮጵያ፣ ኬንያ፣ …)",
       required: "የግድ ያስፈልጋል",
       placeholder: "ምሳሌ ጽሑፍ",
+      defaultValue: "ነባሪ ዋጋ",
+      defaultValueHelp: "ለአመልካቹ አስቀድሞ ይመረጣል፤ አሁንም መቀየር ይችላል",
       helpText: "የእገዛ ጽሑፍ",
       min: "ዝቅተኛ",
       max: "ከፍተኛ",

apps/backoffice/src/app/i18n/locales/en.ts

@@ -1971,6 +1971,8 @@ export const en = {
       typeNation: 'Applicant picks from the full country list (Ethiopia, Kenya, …)',
       required: 'Required',
       placeholder: 'Placeholder',
+      defaultValue: 'Default value',
+      defaultValueHelp: 'Pre-selected for the applicant, who can still change it',
       helpText: 'Help text',
       min: 'Minimum',
       max: 'Maximum',