@defra/forms-engine-plugin 5.0.0-alpha.3 → 5.0.0-alpha.30

package/.server/server/plugins/payment/types.d.ts

@@ -43,6 +43,10 @@ export type CreatePaymentRequest = {
      * - URL to redirect the user to after payment
      */
     return_url: string;
+    /**
+     * - the desired language for translations
+     */
+    language: string;
     /**
      * - Whether to delay capturing the payment
      */

package/.server/server/plugins/payment/types.js

@@ -18,6 +18,7 @@
  * @property {string} reference - Unique reference for the payment
  * @property {string} description - Human-readable description of the payment
  * @property {string} return_url - URL to redirect the user to after payment
+ * @property {string} language - the desired language for translations
  * @property {boolean} [delayed_capture] - Whether to delay capturing the payment
  * @property {{ formId: string, slug: string }} [metadata] - Additional metadata for the payment
  * @property {string} [email] - Email to prepopulate on GOV.UK Pay (max 254 chars)

package/.server/server/plugins/payment/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/server/plugins/payment/types.js"],"sourcesContent":["/**\n * @typedef {object} PaymentResponseState\n * @property {'created' | 'started' | 'submitted' | 'capturable' | 'success' | 'failed' | 'cancelled' | 'error'} status - Current status of the payment\n * @property {boolean} finished - Whether the payment process has completed\n * @property {string} [message] - Human-readable message about the payment state\n * @property {string} [code] - Error or status code for the payment state\n */\n\n/**\n * @typedef {object} PaymentLink\n * @property {string} href - URL of the linked resource\n * @property {string} method - HTTP method to use for the link\n */\n\n/**\n * @typedef {object} CreatePaymentRequest\n * @property {number} amount - Payment amount in pence\n * @property {string} reference - Unique reference for the payment\n * @property {string} description - Human-readable description of the payment\n * @property {string} return_url - URL to redirect the user to after payment\n * @property {boolean} [delayed_capture] - Whether to delay capturing the payment\n * @property {{ formId: string, slug: string }} [metadata] - Additional metadata for the payment\n * @property {string} [email] - Email to prepopulate on GOV.UK Pay (max 254 chars)\n */\n\n/**\n * @typedef {object} CreatePaymentResponse\n * @property {string} payment_id - Unique identifier for the created payment\n * @property {PaymentResponseState} state - Current state of the payment\n * @property {{ next_url: PaymentLink }} _links - HATEOAS links for the payment\n */\n\n/**\n * Base response from GOV.UK Pay GET /v1/payments/{PAYMENT_ID} endpoint\n * @typedef {object} GetPaymentResponseBase\n * @property {PaymentResponseState} state - Current state of the payment\n * @property {{ self: PaymentLink, next_url?: PaymentLink }} _links - HATEOAS links for the payment\n * @property {string} [email] - The paying user's email address\n */\n\n/**\n * Response from GOV.UK Pay GET /v1/payments/{PAYMENT_ID} endpoint - not underscore in property name\n * @typedef {object} GetPaymentApiResponsePaymentProp\n * @property {string} payment_id - Unique identifier for the payment\n * @property {number} amount - amount of the payment\n */\n\n/**\n * Response from GOV.UK Pay GET /v1/payments/{PAYMENT_ID} endpoint\n * @typedef {GetPaymentResponseBase & GetPaymentApiResponsePaymentProp} GetPaymentApiResponse\n */\n\n/**\n * Response returned from getPaymentStatus - subtley different from GetPaymentApiResponse\n * @typedef {object} GetPaymentResponsePaymentProp\n * @property {string} paymentId - Unique identifier for the payment - note no underscore in property name\n * @property {number} amount - amount of the payment\n */\n\n/**\n * Response returned from getPaymentStatus - subtley different from GetPaymentApiResponse\n * @typedef {GetPaymentResponseBase & GetPaymentResponsePaymentProp} GetPaymentResponse\n */\n\n/**\n * Payment session data stored when dispatching to GOV.UK Pay\n * @typedef {object} PaymentSessionData\n * @property {string} uuid - unique identifier for this payment attempt\n * @property {string} formId - id of the form\n * @property {string} reference - form reference number\n * @property {number} amount - amount in pounds\n * @property {string} description - payment description\n * @property {string} paymentId - GOV.UK Pay payment ID\n * @property {string} componentName - name of the PaymentField component\n * @property {string} returnUrl - URL to redirect to after successful payment\n * @property {string} failureUrl - URL to redirect to after failed/cancelled payment\n * @property {boolean} isLivePayment - whether the payment is using live API key\n */\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/server/plugins/payment/types.js"],"sourcesContent":["/**\n * @typedef {object} PaymentResponseState\n * @property {'created' | 'started' | 'submitted' | 'capturable' | 'success' | 'failed' | 'cancelled' | 'error'} status - Current status of the payment\n * @property {boolean} finished - Whether the payment process has completed\n * @property {string} [message] - Human-readable message about the payment state\n * @property {string} [code] - Error or status code for the payment state\n */\n\n/**\n * @typedef {object} PaymentLink\n * @property {string} href - URL of the linked resource\n * @property {string} method - HTTP method to use for the link\n */\n\n/**\n * @typedef {object} CreatePaymentRequest\n * @property {number} amount - Payment amount in pence\n * @property {string} reference - Unique reference for the payment\n * @property {string} description - Human-readable description of the payment\n * @property {string} return_url - URL to redirect the user to after payment\n * @property {string} language - the desired language for translations\n * @property {boolean} [delayed_capture] - Whether to delay capturing the payment\n * @property {{ formId: string, slug: string }} [metadata] - Additional metadata for the payment\n * @property {string} [email] - Email to prepopulate on GOV.UK Pay (max 254 chars)\n */\n\n/**\n * @typedef {object} CreatePaymentResponse\n * @property {string} payment_id - Unique identifier for the created payment\n * @property {PaymentResponseState} state - Current state of the payment\n * @property {{ next_url: PaymentLink }} _links - HATEOAS links for the payment\n */\n\n/**\n * Base response from GOV.UK Pay GET /v1/payments/{PAYMENT_ID} endpoint\n * @typedef {object} GetPaymentResponseBase\n * @property {PaymentResponseState} state - Current state of the payment\n * @property {{ self: PaymentLink, next_url?: PaymentLink }} _links - HATEOAS links for the payment\n * @property {string} [email] - The paying user's email address\n */\n\n/**\n * Response from GOV.UK Pay GET /v1/payments/{PAYMENT_ID} endpoint - not underscore in property name\n * @typedef {object} GetPaymentApiResponsePaymentProp\n * @property {string} payment_id - Unique identifier for the payment\n * @property {number} amount - amount of the payment\n */\n\n/**\n * Response from GOV.UK Pay GET /v1/payments/{PAYMENT_ID} endpoint\n * @typedef {GetPaymentResponseBase & GetPaymentApiResponsePaymentProp} GetPaymentApiResponse\n */\n\n/**\n * Response returned from getPaymentStatus - subtley different from GetPaymentApiResponse\n * @typedef {object} GetPaymentResponsePaymentProp\n * @property {string} paymentId - Unique identifier for the payment - note no underscore in property name\n * @property {number} amount - amount of the payment\n */\n\n/**\n * Response returned from getPaymentStatus - subtley different from GetPaymentApiResponse\n * @typedef {GetPaymentResponseBase & GetPaymentResponsePaymentProp} GetPaymentResponse\n */\n\n/**\n * Payment session data stored when dispatching to GOV.UK Pay\n * @typedef {object} PaymentSessionData\n * @property {string} uuid - unique identifier for this payment attempt\n * @property {string} formId - id of the form\n * @property {string} reference - form reference number\n * @property {number} amount - amount in pounds\n * @property {string} description - payment description\n * @property {string} paymentId - GOV.UK Pay payment ID\n * @property {string} componentName - name of the PaymentField component\n * @property {string} returnUrl - URL to redirect to after successful payment\n * @property {string} failureUrl - URL to redirect to after failed/cancelled payment\n * @property {boolean} isLivePayment - whether the payment is using live API key\n */\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}

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',
@@ -268,6 +269,19 @@ function getManualFields(payload, line1Error, line2Error, townError, countyError
   };
 }
 export const stepSchema = Joi.string().valid(...Object.keys(steps)).required();
+
+/**
+ * Joi object schema factories typed with their payload, as JavaScript files
+ * cannot pass type arguments to `Joi.object<T>()`
+ */
+/** @type {() => ObjectSchema<PostcodeLookupDetailsPayload>} */
+const detailsObjectSchema = Joi.object.bind(Joi);
+
+/** @type {() => ObjectSchema<PostcodeLookupSelectPayload>} */
+const selectObjectSchema = Joi.object.bind(Joi);
+
+/** @type {() => ObjectSchema<PostcodeLookupManualPayload>} */
+const manualObjectSchema = Joi.object.bind(Joi);
 const sharedPayloadSchemaKeys = {
   crumb: crumbSchema,
   step: stepSchema
@@ -279,7 +293,7 @@ const sharedPayloadSchemaKeys = {
  * @returns {ObjectSchema<PostcodeLookupDetailsPayload>}
  */
 export function createDetailsPayloadSchema(language = 'en-GB') {
-  return Joi.object().keys({
+  return detailsObjectSchema().keys({
     ...sharedPayloadSchemaKeys,
     [postcodeQueryFieldName]: Joi.string().pattern(/^[a-zA-Z]{1,2}\d[a-zA-Z\d]?\s?\d[a-zA-Z]{2}$/).trim().required().messages({
       'string.pattern.base': i18nT('postcodeLookup.validation.invalidPostcode', language),
@@ -295,7 +309,7 @@ export function createDetailsPayloadSchema(language = 'en-GB') {
  * @returns {ObjectSchema<PostcodeLookupSelectPayload>}
  */
 export function createSelectPayloadSchema(language = 'en-GB') {
-  return Joi.object().keys({
+  return selectObjectSchema().keys({
     ...sharedPayloadSchemaKeys,
     [uprnFieldName]: Joi.string().required().messages({
       '*': i18nT('postcodeLookup.validation.selectAddress', language)
@@ -309,7 +323,7 @@ export function createSelectPayloadSchema(language = 'en-GB') {
  * @returns {ObjectSchema<PostcodeLookupManualPayload>}
  */
 export function createManualPayloadSchema(language = 'en-GB') {
-  return Joi.object().keys({
+  return manualObjectSchema().keys({
     ...sharedPayloadSchemaKeys,
     [line1FieldName]: Joi.string().trim().required().messages({
       '*': i18nT('postcodeLookup.validation.requiredAddressLine1', language)
@@ -338,56 +352,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 +435,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 +448,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 +503,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 +547,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 +574,10 @@ export function manualViewModel(data, payload, err) {
     buttons: {
       continueButton,
       detailsLink
-    }
+    },
+    t,
+    language: translator.language,
+    ...selector
   };
 }
 
@@ -520,6 +585,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