@defra/forms-engine-plugin 5.0.0-alpha.2 → 5.0.0-alpha.20

package/.server/server/plugins/postcode-lookup/models/index.d.ts

@@ -19,17 +19,86 @@ export function createManualPayloadSchema(language?: string): Joi.ObjectSchema<P
 /**
  * The postcode lookup details form view model
  * @param {PostcodeLookupSessionData} data
+ * @param {Translator} translator
  * @param {PostcodeLookupDetailsData} [payload]
  * @param {Error} [err]
  */
-export function detailsViewModel(data: PostcodeLookupSessionData, payload?: PostcodeLookupDetailsData, err?: Error): {
+export function detailsViewModel(data: PostcodeLookupSessionData, translator: Translator, payload?: PostcodeLookupDetailsData, err?: Error): {
+    languages: {
+        name: string;
+        code: string;
+    }[];
     step: string;
     showTitle: boolean;
     name: string;
     serviceUrl: string;
     pageTitle: string;
+    hint: "" | {
+        text: string;
+    } | undefined;
+    backLink: {
+        href: string;
+        text: string;
+    };
+    errors: {
+        text: string;
+        href: string;
+    }[] | undefined;
+    fields: {
+        postcodeQuery: {
+            id: string;
+            name: string;
+            label: {
+                text: string;
+            };
+            hint: {
+                text: string;
+            };
+            value: string | undefined;
+            errorMessage: {
+                text: string;
+            } | undefined;
+        };
+        buildingNameQuery: {
+            id: string;
+            name: string;
+            label: {
+                text: string;
+            };
+            hint: {
+                text: string;
+            };
+            value: string | undefined;
+            errorMessage: {
+                text: string;
+            } | undefined;
+        };
+    };
+    buttons: {
+        continueButton: {
+            text: string;
+            classes: string;
+        };
+        manualLink: {
+            text: string;
+            href: string;
+        };
+    };
+    t: (key: string, opts?: Record<string, unknown>) => string;
+    language: string;
+} | {
+    languages?: undefined;
+    step: string;
+    showTitle: boolean;
+    name: string;
+    serviceUrl: string;
+    pageTitle: string;
+    hint: "" | {
+        text: string;
+    } | undefined;
     backLink: {
         href: string;
+        text: string;
     };
     errors: {
         text: string;
@@ -75,17 +144,93 @@ export function detailsViewModel(data: PostcodeLookupSessionData, payload?: Post
             href: string;
         };
     };
+    t: (key: string, opts?: Record<string, unknown>) => string;
+    language: string;
 };
 /**
  * The postcode lookup select form view model
  * @param {{ session: PostcodeLookupSessionData, apiKey: string }} data
+ * @param {Translator} translator
  * @param {PostcodeLookupSelectPayload} [payload]
  * @param {Error} [err]
  */
 export function selectViewModel(data: {
     session: PostcodeLookupSessionData;
     apiKey: string;
-}, payload?: PostcodeLookupSelectPayload, err?: Error): Promise<{
+}, translator: Translator, payload?: PostcodeLookupSelectPayload, err?: Error): Promise<{
+    languages: {
+        name: string;
+        code: string;
+    }[];
+    step: string;
+    showTitle: boolean;
+    name: string;
+    serviceUrl: string;
+    pageTitle: string;
+    backLink: {
+        href: string;
+        text: string;
+    };
+    errors: {
+        text: string;
+        href: string;
+    }[] | undefined;
+    searchAgainLink: {
+        text: string;
+        href: string;
+    };
+    fields: {
+        postcodeQuery: {
+            id: string;
+            name: string;
+            type: string;
+            value: string;
+        };
+        buildingNameQuery: {
+            id: string;
+            name: string;
+            type: string;
+            value: string;
+        };
+        uprn: {
+            id: string;
+            name: string;
+            label: {
+                text: string;
+            } | undefined;
+            value: string | undefined;
+            errorMessage: {
+                text: string;
+            } | undefined;
+            items: {
+                text: string;
+                value: string;
+            }[] | undefined;
+            type: string | undefined;
+        };
+    };
+    details: PostcodeLookupDetailsData;
+    addressCount: number;
+    singleAddress: Address | undefined;
+    hasAddresses: boolean;
+    hasMultipleAddresses: boolean;
+    addressesFoundText: string | undefined;
+    noAddressFoundText: string | undefined;
+    buttons: {
+        continueButton: {
+            href: string | undefined;
+            text: string;
+            classes: string;
+        };
+        manualLink: {
+            text: string;
+            href: string;
+        };
+    };
+    t: (key: string, opts?: Record<string, unknown>) => string;
+    language: string;
+} | {
+    languages?: undefined;
     step: string;
     showTitle: boolean;
     name: string;
@@ -93,6 +238,7 @@ export function selectViewModel(data: {
     pageTitle: string;
     backLink: {
         href: string;
+        text: string;
     };
     errors: {
         text: string;
@@ -150,14 +296,110 @@ export function selectViewModel(data: {
             href: string;
         };
     };
+    t: (key: string, opts?: Record<string, unknown>) => string;
+    language: string;
 }>;
 /**
  * The postcode lookup manual form view model
  * @param {PostcodeLookupSessionData} data
+ * @param {Translator} translator
  * @param {PostcodeLookupManualPayload} [payload]
  * @param {Error} [err]
  */
-export function manualViewModel(data: PostcodeLookupSessionData, payload?: PostcodeLookupManualPayload, err?: Error): {
+export function manualViewModel(data: PostcodeLookupSessionData, translator: Translator, payload?: PostcodeLookupManualPayload, err?: Error): {
+    languages: {
+        name: string;
+        code: string;
+    }[];
+    step: string;
+    showTitle: boolean;
+    name: string;
+    serviceUrl: string;
+    pageTitle: string;
+    backLink: {
+        href: string;
+        text: string;
+    };
+    errors: {
+        text: string;
+        href: string;
+    }[] | undefined;
+    hint: "" | {
+        text: string;
+    } | undefined;
+    fields: {
+        addressLine1: {
+            id: string;
+            name: string;
+            label: {
+                text: string;
+            };
+            value: string | undefined;
+            errorMessage: {
+                text: string;
+            } | undefined;
+        };
+        addressLine2: {
+            id: string;
+            name: string;
+            label: {
+                text: string;
+            };
+            value: string | undefined;
+            errorMessage: {
+                text: string;
+            } | undefined;
+        };
+        town: {
+            id: string;
+            name: string;
+            label: {
+                text: string;
+            };
+            classes: string;
+            value: string | undefined;
+            errorMessage: {
+                text: string;
+            } | undefined;
+        };
+        county: {
+            id: string;
+            name: string;
+            label: {
+                text: string;
+            };
+            value: string | undefined;
+            errorMessage: {
+                text: string;
+            } | undefined;
+        };
+        postcode: {
+            id: string;
+            name: string;
+            label: {
+                text: string;
+            };
+            classes: string;
+            value: string | undefined;
+            errorMessage: {
+                text: string;
+            } | undefined;
+        };
+    };
+    buttons: {
+        continueButton: {
+            text: string;
+            classes: string;
+        };
+        detailsLink: {
+            text: string;
+            href: string;
+        };
+    };
+    t: (key: string, opts?: Record<string, unknown>) => string;
+    language: string;
+} | {
+    languages?: undefined;
     step: string;
     showTitle: boolean;
     name: string;
@@ -165,6 +407,7 @@ export function manualViewModel(data: PostcodeLookupSessionData, payload?: Postc
     pageTitle: string;
     backLink: {
         href: string;
+        text: string;
     };
     errors: {
         text: string;
@@ -242,6 +485,8 @@ export function manualViewModel(data: PostcodeLookupSessionData, payload?: Postc
             href: string;
         };
     };
+    t: (key: string, opts?: Record<string, unknown>) => string;
+    language: string;
 };
 export namespace steps {
     let details: string;
@@ -256,5 +501,6 @@ import Joi from 'joi';
 import type { PostcodeLookupSelectPayload } from '../../../../server/plugins/postcode-lookup/types.js';
 import type { PostcodeLookupManualPayload } from '../../../../server/plugins/postcode-lookup/types.js';
 import type { PostcodeLookupSessionData } from '../../../../server/plugins/postcode-lookup/types.js';
+import type { Translator } from '../../../../server/plugins/engine/i18n/types.js';
 import type { PostcodeLookupDetailsData } from '../../../../server/plugins/postcode-lookup/types.js';
 import type { Address } from '../../../../server/plugins/postcode-lookup/types.js';

package/.server/server/plugins/postcode-lookup/models/index.js

@@ -13,6 +13,7 @@ const townFieldName = 'town';
 const countyFieldName = 'county';
 const postcodeFieldName = 'postcode';
 const GOVUK_MARGIN_RIGHT_1 = 'govuk-!-margin-right-1';
+const COMMON_BACK = 'common.back';
 export const steps = {
   // Step 1: Postcode/building name input
   details: 'details',
@@ -338,56 +339,77 @@ function getHref(step) {
 /**
  * The postcode lookup details form view model
  * @param {PostcodeLookupSessionData} data
+ * @param {Translator} translator
  * @param {PostcodeLookupDetailsData} [payload]
  * @param {Error} [err]
  */
-export function detailsViewModel(data, payload, err) {
+export function detailsViewModel(data, translator, payload, err) {
   const {
-    componentTitle: pageTitle,
-    formName,
+    componentId,
+    componentHint,
     sourceUrl,
-    language = 'en-GB'
+    languages
   } = data.initial;
+  const {
+    t,
+    tComponent,
+    tForm
+  } = translator;
+  const component = /** @type {ComponentDef} */{
+    id: componentId
+  };
   const backLink = {
-    href: sourceUrl
+    href: sourceUrl,
+    text: t(COMMON_BACK)
   };
   const {
     errors,
     postcodeQueryError,
     buildingNameQueryError
   } = buildErrors(err);
-  const fields = getDetailsFields(payload ?? data.details, postcodeQueryError, buildingNameQueryError, language);
+  const fields = getDetailsFields(payload ?? data.details, postcodeQueryError, buildingNameQueryError, translator.language);
+  const hint = componentHint && {
+    text: tComponent(component, 'hint')
+  };
   const continueButton = {
-    text: i18nT('postcodeLookup.findAddress', language),
+    text: t('postcodeLookup.findAddress'),
     classes: GOVUK_MARGIN_RIGHT_1
   };
   const manualLink = {
-    text: i18nT('postcodeLookup.enterManually', language),
+    text: t('postcodeLookup.enterManually'),
     href: getHref(steps.manual)
   };
+  const selector = languages?.length ? {
+    languages
+  } : {};
   return {
     step: steps.details,
     showTitle: true,
-    name: formName,
+    name: tForm('title'),
     serviceUrl: sourceUrl,
-    pageTitle,
+    pageTitle: tComponent(component, 'title'),
+    hint,
     backLink,
     errors,
     fields,
     buttons: {
       continueButton,
       manualLink
-    }
+    },
+    t,
+    language: translator.language,
+    ...selector
   };
 }
 
 /**
  * The postcode lookup select form view model
  * @param {{ session: PostcodeLookupSessionData, apiKey: string }} data
+ * @param {Translator} translator
  * @param {PostcodeLookupSelectPayload} [payload]
  * @param {Error} [err]
  */
-export async function selectViewModel(data, payload, err) {
+export async function selectViewModel(data, translator, payload, err) {
   const {
     session,
     apiKey
@@ -400,7 +422,12 @@ export async function selectViewModel(data, payload, err) {
     postcodeQuery,
     buildingNameQuery
   } = details;
-  const language = initial.language ?? 'en-GB';
+  const {
+    language,
+    t,
+    tComponent,
+    tForm
+  } = translator;
   const {
     hasAddresses,
     hasMultipleAddresses,
@@ -408,39 +435,45 @@ export async function selectViewModel(data, payload, err) {
     addresses,
     addressCount
   } = await getAddresses(postcodeQuery, buildingNameQuery, apiKey);
-  const title = hasAddresses ? initial.componentTitle : i18nT('postcodeLookup.noAddressFoundTitle', language);
+  const title = hasAddresses ? tComponent(/** @type {ComponentDef} */{
+    id: initial.componentId
+  }, 'title') : t('postcodeLookup.noAddressFoundTitle');
   const formPath = initial.sourceUrl;
   const href = getHref();
   const backLink = {
-    href
+    href,
+    text: t(COMMON_BACK)
   };
   const {
     errors,
     uprnError
   } = buildErrors(err);
   const fields = getSelectFields(details, hasMultipleAddresses, singleAddress, payload, uprnError, addresses, language);
-  const searchAgainText = i18nT('postcodeLookup.searchAgain', language);
+  const searchAgainText = t('postcodeLookup.searchAgain');
   const searchAgainLink = {
     text: searchAgainText,
     href
   };
   const continueButton = {
     href: hasAddresses ? undefined : href,
-    text: hasAddresses ? i18nT('postcodeLookup.useThisAddress', language) : searchAgainText,
+    text: hasAddresses ? t('postcodeLookup.useThisAddress') : searchAgainText,
     classes: GOVUK_MARGIN_RIGHT_1
   };
   const manualLink = {
-    text: i18nT('postcodeLookup.enterManually', language),
+    text: t('postcodeLookup.enterManually'),
     href: `${href}?step=${steps.manual}`
   };
-  const addressesFoundText = hasAddresses ? i18nT('postcodeLookup.addressFound', language, {
+  const addressesFoundText = hasAddresses ? t('postcodeLookup.addressFound', {
     count: addressCount
   }) : undefined;
-  const noAddressFoundText = !hasAddresses ? i18nT('postcodeLookup.noAddressFoundBody', language) : undefined;
+  const noAddressFoundText = !hasAddresses ? t('postcodeLookup.noAddressFoundBody') : undefined;
+  const selector = initial.languages?.length ? {
+    languages: initial.languages
+  } : {};
   return {
     step: steps.select,
     showTitle: true,
-    name: title,
+    name: tForm('title'),
     serviceUrl: formPath,
     pageTitle: title,
     backLink,
@@ -457,27 +490,40 @@ export async function selectViewModel(data, payload, err) {
     buttons: {
       continueButton,
       manualLink
-    }
+    },
+    t,
+    language,
+    ...selector
   };
 }
 
 /**
  * The postcode lookup manual form view model
  * @param {PostcodeLookupSessionData} data
+ * @param {Translator} translator
  * @param {PostcodeLookupManualPayload} [payload]
  * @param {Error} [err]
  */
-export function manualViewModel(data, payload, err) {
+export function manualViewModel(data, translator, payload, err) {
   const {
-    componentTitle,
+    componentId,
     sourceUrl,
     componentHint,
-    language = 'en-GB'
+    languages
   } = data.initial;
   const formPath = sourceUrl;
   const href = getHref();
+  const {
+    t,
+    tComponent,
+    tForm
+  } = translator;
+  const component = /** @type {ComponentDef} */{
+    id: componentId
+  };
   const backLink = {
-    href
+    href,
+    text: t(COMMON_BACK)
   };
   const {
     errors,
@@ -488,23 +534,26 @@ export function manualViewModel(data, payload, err) {
     postcodeError
   } = buildErrors(err);
   const hint = componentHint && {
-    text: componentHint
+    text: tComponent(component, 'hint')
   };
-  const fields = getManualFields(payload, line1Error, line2Error, townError, countyError, postcodeError, language);
+  const fields = getManualFields(payload, line1Error, line2Error, townError, countyError, postcodeError, translator.language);
   const continueButton = {
-    text: i18nT('postcodeLookup.useThisAddress', language),
+    text: t('postcodeLookup.useThisAddress'),
     classes: GOVUK_MARGIN_RIGHT_1
   };
   const detailsLink = {
-    text: i18nT('postcodeLookup.findAnAddressInstead', language),
+    text: t('postcodeLookup.findAnAddressInstead'),
     href
   };
+  const selector = languages?.length ? {
+    languages
+  } : {};
   return {
     step: steps.manual,
     showTitle: true,
-    name: componentTitle,
+    name: tForm('title'),
     serviceUrl: formPath,
-    pageTitle: componentTitle,
+    pageTitle: tComponent(component, 'title'),
     backLink,
     errors,
     hint,
@@ -512,7 +561,10 @@ export function manualViewModel(data, payload, err) {
     buttons: {
       continueButton,
       detailsLink
-    }
+    },
+    t,
+    language: translator.language,
+    ...selector
   };
 }
 
@@ -520,6 +572,8 @@ export function manualViewModel(data, payload, err) {
 
 /**
  * @import { ObjectSchema, ValidationErrorItem } from 'joi'
+ * @import { ComponentDef } from '@defra/forms-model'
  * @import { Address, PostcodeLookupDetailsData, PostcodeLookupDetailsPayload, PostcodeLookupManualPayload, PostcodeLookupSelectPayload, PostcodeLookupSessionData } from '../../../../server/plugins/postcode-lookup/types.js'
+ * @import { Translator } from '../../../../server/plugins/engine/i18n/types.js'
  */
 //# sourceMappingURL=index.js.map