diff --git a/browser-tests/snapshot-tests/snapshot.spec.ts-snapshots/need-app-cy-chromium-linux.jpeg b/browser-tests/snapshot-tests/snapshot.spec.ts-snapshots/need-app-cy-chromium-linux.jpeg new file mode 100644 index 000000000..90b4be477 Binary files /dev/null and b/browser-tests/snapshot-tests/snapshot.spec.ts-snapshots/need-app-cy-chromium-linux.jpeg differ diff --git a/browser-tests/snapshot-tests/snapshot.spec.ts-snapshots/need-app-en-chromium-linux.jpeg b/browser-tests/snapshot-tests/snapshot.spec.ts-snapshots/need-app-en-chromium-linux.jpeg new file mode 100644 index 000000000..92daef530 Binary files /dev/null and b/browser-tests/snapshot-tests/snapshot.spec.ts-snapshots/need-app-en-chromium-linux.jpeg differ diff --git a/browser-tests/snapshot-tests/snapshot.spec.ts-snapshots/need-biometric-passport-cy-chromium-linux.jpeg b/browser-tests/snapshot-tests/snapshot.spec.ts-snapshots/need-biometric-passport-cy-chromium-linux.jpeg new file mode 100644 index 000000000..69034b7a3 Binary files /dev/null and b/browser-tests/snapshot-tests/snapshot.spec.ts-snapshots/need-biometric-passport-cy-chromium-linux.jpeg differ diff --git a/browser-tests/snapshot-tests/snapshot.spec.ts-snapshots/need-biometric-passport-en-chromium-linux.jpeg b/browser-tests/snapshot-tests/snapshot.spec.ts-snapshots/need-biometric-passport-en-chromium-linux.jpeg new file mode 100644 index 000000000..cbfd21a74 Binary files /dev/null and b/browser-tests/snapshot-tests/snapshot.spec.ts-snapshots/need-biometric-passport-en-chromium-linux.jpeg differ diff --git a/browser-tests/snapshot-tests/snapshot.spec.ts-snapshots/passport-biometric-chip-cy-chromium-linux.jpeg b/browser-tests/snapshot-tests/snapshot.spec.ts-snapshots/passport-biometric-chip-cy-chromium-linux.jpeg new file mode 100644 index 000000000..325de1d1f Binary files /dev/null and b/browser-tests/snapshot-tests/snapshot.spec.ts-snapshots/passport-biometric-chip-cy-chromium-linux.jpeg differ diff --git a/browser-tests/snapshot-tests/snapshot.spec.ts-snapshots/passport-biometric-chip-en-chromium-linux.jpeg b/browser-tests/snapshot-tests/snapshot.spec.ts-snapshots/passport-biometric-chip-en-chromium-linux.jpeg new file mode 100644 index 000000000..ad79a7f38 Binary files /dev/null and b/browser-tests/snapshot-tests/snapshot.spec.ts-snapshots/passport-biometric-chip-en-chromium-linux.jpeg differ diff --git a/locales/cy/translation.json b/locales/cy/translation.json index 19d042cfb..a50d12946 100644 --- a/locales/cy/translation.json +++ b/locales/cy/translation.json @@ -388,6 +388,23 @@ } } }, + "needApp": { + "title": "Mae angen i chi ddefnyddio’r ap GOV.UK One Login i brofi pwy ydych chi", + "header": "Mae angen i chi ddefnyddio’r ap GOV.UK One Login i brofi pwy ydych chi", + "content": { + "paragraph1": "Os nad ydych chi’n byw yn y DU, gallwch ond defnyddio’r ap a ffôn clyfar i brofi pwy ydych chi gyda GOV.UK One Login.", + "subHeading1": "Beth hoffech chi ei wneud?", + "formRadioButtons": { + "continueToServiceButtonText": "Mynd i’r gwasanaeth roeddech chi’n ceisio ei ddefnyddio i chwilio am ffyrdd eraill o’i gyrchu", + "appSmartphoneButtonText": "Defnyddio’r ap a ffôn clyfar i brofi pwy ydych chi" + }, + "formErrorMessage": { + "errorSummaryTitleText": "Mae problem", + "errorSummaryDescriptionText": "Dewiswch beth hoffech chi ei wneud", + "errorRadioMessage": "Dewiswch beth hoffech chi ei wneud" + } + } + }, "pyiContinueWithPassport": { "title": "Parhau profi eich hunaniaeth ar-lein", "header": "Parhau profi eich hunaniaeth ar-lein", @@ -1447,6 +1464,23 @@ } } }, + "passportBiometricChip": { + "title": "Oes gennych chi basbort gyda sglodyn biometrig?", + "header": "Oes gennych chi basbort gyda sglodyn biometrig?", + "content": { + "hintText": "Mae gan eich pasbort sglodyn biometrig os yw’r clawr blaen yn dangos symbol hirsgwar gyda chylch yn y canol.", + "passportImageAltText": "Clawr blaen pasbort gyda’r symbol sglodyn biometrig wedi’i chwyddo.", + "formRadioButtons": { + "nextButtonText": "Oes", + "abandonButtonText": "Na" + }, + "formErrorMessage": { + "errorSummaryTitleText": "Mae problem", + "errorSummaryDescriptionText": "Dewiswch oes os oes gennych chi basbort gyda sglodyn biometrig", + "errorRadioMessage": "Dewiswch oes os oes gennych chi basbort gyda sglodyn biometrig" + } + } + }, "nonUkNoPassport": { "title": "Mae angen i chi ddefnyddio pasbort gyda sglodyn biometrig i brofi eich hunaniaeth", "header": "Mae angen i chi ddefnyddio pasbort gyda sglodyn biometrig i brofi eich hunaniaeth", @@ -1464,6 +1498,23 @@ } } }, + "needBiometricPassport": { + "title": "Mae angen i chi ddefnyddio pasbort gyda sglodyn biometrig i brofi eich hunaniaeth", + "header": "Mae angen i chi ddefnyddio pasbort gyda sglodyn biometrig i brofi eich hunaniaeth", + "content": { + "paragraph1": "Os nad ydych yn byw yn y DU, gallwch ond profi eich hunaniaeth gydag ap GOV.UK One Login drwy ddefnyddio pasbort gyda sglodyn biometrig.", + "subHeading1": "Beth hoffech chi ei wneud?", + "formRadioButtons": { + "returnToRpButtonText": "Mynd i’r gwasanaeth roeddech yn ceisio ei ddefnyddio i chwilio am ffyrdd eraill o gael mynediad ato", + "useAppButtonText": "Defnyddio pasbort gyda sglodyn biometrig i brofi pwy ydych chi" + }, + "formErrorMessage": { + "errorSummaryTitleText": "Mae problem", + "errorSummaryDescriptionText": "Dewiswch beth hoffech chi ei wneud", + "errorRadioMessage": "Dewiswch beth hoffech chi ei wneud" + } + } + }, "weMatchedYouToYourOneLogin": { "title": "Rydym wedi eich paru â’ch GOV.UK One Login", "header": "Rydym wedi eich paru â’ch GOV.UK One Login", diff --git a/locales/en/translation.json b/locales/en/translation.json index e66813a5e..9800deb03 100644 --- a/locales/en/translation.json +++ b/locales/en/translation.json @@ -359,6 +359,23 @@ } } }, + "needApp": { + "title": "You need to use the GOV.UK One Login app to prove your identity", + "header": "You need to use the GOV.UK One Login app to prove your identity", + "content": { + "paragraph1": "If you do not live in the UK, you can only use the app and a smartphone to prove your identity with GOV.UK One Login.", + "subHeading1": "What would you like to do?", + "formRadioButtons": { + "continueToServiceButtonText": "Go to the service you were trying to use to look for other ways to access it", + "appSmartphoneButtonText": "Use the app and a smartphone to prove your identity" + }, + "formErrorMessage": { + "errorSummaryTitleText": "There is a problem", + "errorSummaryDescriptionText": "Select what you would like to do", + "errorRadioMessage": "Select what you would like to do" + } + } + }, "pyiContinueWithPassport": { "title": "Continue proving your identity online", "header": "Continue proving your identity online", @@ -1447,6 +1464,23 @@ } } }, + "passportBiometricChip": { + "title": "Do you have a passport with a biometric chip?", + "header": "Do you have a passport with a biometric chip?", + "content": { + "hintText": "Your passport has a biometric chip if the front cover shows a rectangular symbol with a circle in the middle.", + "passportImageAltText": "The front cover of a passport with the biometric chip symbol enlarged.", + "formRadioButtons": { + "nextButtonText": "Yes", + "abandonButtonText": "No" + }, + "formErrorMessage": { + "errorSummaryTitleText": "There is a problem", + "errorSummaryDescriptionText": "Select yes if you have a passport with a biometric chip", + "errorRadioMessage": "Select yes if you have a passport with a biometric chip" + } + } + }, "nonUkNoPassport": { "title": "You need to use a passport with a biometric chip to prove your identity", "header": "You need to use a passport with a biometric chip to prove your identity", @@ -1464,6 +1498,23 @@ } } }, + "needBiometricPassport": { + "title": "You need to use a passport with a biometric chip to prove your identity", + "header": "You need to use a passport with a biometric chip to prove your identity", + "content": { + "paragraph1": "If you do not live in the UK, you can only prove your identity with GOV.UK One Login using a passport with a biometric chip.", + "subHeading1": "What would you like to do?", + "formRadioButtons": { + "returnToRpButtonText": "Go to the service you were trying to use to look for other ways to access it", + "useAppButtonText": "Use a passport with a biometric chip to prove your identity" + }, + "formErrorMessage": { + "errorSummaryTitleText": "There is a problem", + "errorSummaryDescriptionText": "Select what you would like to do", + "errorRadioMessage": "Select what you would like to do" + } + } + }, "weMatchedYouToYourOneLogin": { "title": "We’ve matched you to your GOV.UK One Login", "header": "We’ve matched you to your GOV.UK One Login", diff --git a/src/constants/ipv-pages.ts b/src/constants/ipv-pages.ts index 9b9b8c188..d440a05fb 100644 --- a/src/constants/ipv-pages.ts +++ b/src/constants/ipv-pages.ts @@ -5,6 +5,8 @@ const IPV_PAGES = Object.freeze({ LIVE_IN_UK: "live-in-uk", PROBLEM_DIFFERENT_BROWSER: "problem-different-browser", IDENTIFY_DEVICE: "identify-device", + NEED_APP: "need-app", + NEED_BIOMETRIC_PASSPORT: "need-biometric-passport", NEED_ID_PROVE_IDENTITY_AGAIN_APP: "need-id-prove-identity-again-app", NEED_MORE_INFORMATION_CONFIRM_CHANGE_DETAILS: "need-more-information-confirm-change-details", @@ -34,6 +36,7 @@ const IPV_PAGES = Object.freeze({ PAGE_PRE_EXPERIAN_KBV_TRANSITION: "page-pre-experian-kbv-transition", PAGE_UPDATE_NAME: "page-update-name", PAGE_PRE_DWP_KBV_TRANSITION: "page-pre-dwp-kbv-transition", + PASSPORT_BIOMETRIC_CHIP: "passport-biometric-chip", PERSONAL_INDEPENDENCE_PAYMENT: "personal-independence-payment", PHOTO_ID_SECURITY_QUESTIONS_FIND_ANOTHER_WAY: "photo-id-security-questions-find-another-way", diff --git a/src/test-utils/pages-and-contexts.ts b/src/test-utils/pages-and-contexts.ts index 373dea0a1..65858144a 100644 --- a/src/test-utils/pages-and-contexts.ts +++ b/src/test-utils/pages-and-contexts.ts @@ -21,6 +21,8 @@ export const pagesAndContexts: PagesAndContexts = { NO_CONTEXT_VARIANT, ], "live-in-uk": [], + "need-app": [], + "need-biometric-passport": [], "need-id-prove-identity-again-app": [], "need-prove-identity-again-app": [], "need-prove-identity-again-no-app": [], @@ -68,6 +70,7 @@ export const pagesAndContexts: PagesAndContexts = { ], "page-different-security-questions": [], "page-not-found": [], + "passport-biometric-chip": [], "personal-independence-payment": [], "photo-id-security-questions-find-another-way": [ { dropout: { reason: "dropout" } }, diff --git a/views/README.md b/views/README.md index 444612a81..b734c7aff 100644 --- a/views/README.md +++ b/views/README.md @@ -151,6 +151,13 @@ Breaking this example down: handleJourneyActionRequest, ); ``` +### Add new page to constants: + +When adding new pages make sure those are also added to the required constants + +- In [ipv-pages.ts](../src/constants/ipv-pages.ts) file update IPV_PAGES object with new page + +- In [pages-and-contexts.ts](../src/test-utils/pages-and-contexts.ts) file update pagesAndContexts object with new page and contexts values ### Notes diff --git a/views/ipv/page/need-app.njk b/views/ipv/page/need-app.njk new file mode 100644 index 000000000..4bdee87b7 --- /dev/null +++ b/views/ipv/page/need-app.njk @@ -0,0 +1,53 @@ +{% extends "shared/base.njk" %} +{% from "govuk/components/button/macro.njk" import govukButton %} +{% from "govuk/components/radios/macro.njk" import govukRadios %} +{% set pageTitleKey = 'pages.needApp.title' %} +{% set googleTagManagerPageId = "needApp" %} + +{% set errorState = pageErrorState %} +{% set errorTitle = 'pages.needApp.content.formErrorMessage.errorSummaryTitleText' | translate %} +{% set errorText = 'pages.needApp.content.formErrorMessage.errorSummaryDescriptionText' | translate %} +{% set errorHref = "#needAppForm" %} + +{% set isPageDataSensitive = false %} +{% set contentID = 'aa01d261-c2de-41cb-b3de-205c56716ea4'%} + +{% block content %} +

{{ 'pages.needApp.header' | translate }}

+

{{ 'pages.needApp.content.paragraph1' | translate }}

+ +
+ + {% set radiosConfig = { + idPrefix: "journey", + name: "journey", + fieldset: { + legend: { + text: 'pages.needApp.content.subHeading1' | translate, + classes: "govuk-fieldset__legend--m" + } + }, + items: [ + { + value: "returnToRp", + text: 'pages.needApp.content.formRadioButtons.continueToServiceButtonText' | translate + }, + { + value: "useApp", + text: 'pages.needApp.content.formRadioButtons.appSmartphoneButtonText' | translate + } + ] + } %} + + {% if errorState %} + {% set errorMessageObject = { 'text': 'pages.needApp.content.formErrorMessage.errorRadioMessage' | translate } %} + {% set radiosConfig = radiosConfig | setAttribute('errorMessage', errorMessageObject) %} + {% endif %} + + {{ govukRadios(radiosConfig) }} + {{ govukButton({ + id: "submitButton", + text: 'general.buttons.next' | translate + }) }} +
+{% endblock %} diff --git a/views/ipv/page/need-biometric-passport.njk b/views/ipv/page/need-biometric-passport.njk new file mode 100644 index 000000000..6ce725382 --- /dev/null +++ b/views/ipv/page/need-biometric-passport.njk @@ -0,0 +1,57 @@ +{% extends "shared/base.njk" %} +{% from "govuk/components/button/macro.njk" import govukButton %} +{% from "govuk/components/details/macro.njk" import govukDetails %} +{% from "govuk/components/radios/macro.njk" import govukRadios %} +{% set pageTitleKey = 'pages.needBiometricPassport.title' %} +{% set googleTagManagerPageId = "needBiometricPassport" %} + +{% set errorState = pageErrorState %} +{% set errorTitle = 'pages.needBiometricPassport.content.formErrorMessage.errorSummaryTitleText' | translate %} +{% set errorText = 'pages.needBiometricPassport.content.formErrorMessage.errorSummaryDescriptionText' | translate %} +{% set errorHref = "#needBiometricPassportForm" %} + +{% set isPageDataSensitive = false %} +{% set contentID = '059cc6c8-6e04-4de9-a6c0-5d26cd9e53c0'%} + +{% set showBack = true %} +{% set hrefBack = "/ipv/journey/need-biometric-passport/back" %} + +{% block content %} +

{{ 'pages.needBiometricPassport.header' | translate }}

+

{{ 'pages.needBiometricPassport.content.paragraph1' | translate }}

+ +
+ + {% set radiosConfig = { + idPrefix: "journey", + name: "journey", + fieldset: { + legend: { + text: 'pages.needBiometricPassport.content.subHeading1' | translate, + classes: "govuk-fieldset__legend--m" + } + }, + items: [ + { + value: "returnToRp", + text: 'pages.needBiometricPassport.content.formRadioButtons.returnToRpButtonText' | translate + }, + { + value: "useApp", + text: 'pages.needBiometricPassport.content.formRadioButtons.useAppButtonText' | translate + } + ] + } %} + + {% if errorState %} + {% set errorMessageObject = { 'text': 'pages.needBiometricPassport.content.formErrorMessage.errorRadioMessage' | translate } %} + {% set radiosConfig = radiosConfig | setAttribute('errorMessage', errorMessageObject) %} + {% endif %} + + {{ govukRadios(radiosConfig) }} + {{ govukButton({ + id: "submitButton", + text: 'general.buttons.next' | translate + }) }} +
+{% endblock %} diff --git a/views/ipv/page/passport-biometric-chip.njk b/views/ipv/page/passport-biometric-chip.njk new file mode 100644 index 000000000..2e597e919 --- /dev/null +++ b/views/ipv/page/passport-biometric-chip.njk @@ -0,0 +1,68 @@ +{% extends "shared/base.njk" %} +{% from "govuk/components/button/macro.njk" import govukButton %} +{% from "govuk/components/details/macro.njk" import govukDetails %} +{% from "govuk/components/radios/macro.njk" import govukRadios %} +{% set pageTitleKey = 'pages.passportBiometricChip.title' %} +{% set googleTagManagerPageId = "passportBiometricChip" %} + +{% set errorState = pageErrorState %} +{% set errorTitle = 'pages.passportBiometricChip.content.formErrorMessage.errorSummaryTitleText' | translate %} +{% set errorText = 'pages.passportBiometricChip.content.formErrorMessage.errorSummaryDescriptionText' | translate %} +{% set errorHref = "#passportBiometricChipForm" %} + + +{% set isPageDataSensitive = false %} +{% set contentID = 'caf75ee8-82fe-455b-9559-57087f009867'%} + +{% set showBack = true %} +{% set hrefBack = "/ipv/journey/passport-biometric-chip/back" %} + +{% block content %} + + {% set radioHintHtml %} + {{ 'pages.passportBiometricChip.content.hintText' | translate }} + + + {{ 'pages.passportBiometricChip.content.passportImageAltText' | translate }} + + {% endset -%} + +
+ + {% set radiosConfig = { + idPrefix: "journey", + name: "journey", + fieldset: { + legend: { + text: 'pages.passportBiometricChip.header' | translate, + isPageHeading: true, + classes: "govuk-fieldset__legend--l" + } + }, + hint: { + html: radioHintHtml + }, + items: [ + { + value: "next", + text: 'pages.passportBiometricChip.content.formRadioButtons.nextButtonText' | translate + }, + { + value: "abandon", + text: 'pages.passportBiometricChip.content.formRadioButtons.abandonButtonText' | translate + } + ] + } %} + + {% if errorState %} + {% set errorMessageObject = { 'text': 'pages.passportBiometricChip.content.formErrorMessage.errorRadioMessage' | translate } %} + {% set radiosConfig = radiosConfig | setAttribute('errorMessage', errorMessageObject) %} + {% endif %} + + {{ govukRadios(radiosConfig) }} + {{ govukButton({ + id: "submitButton", + text: 'general.buttons.next' | translate + }) }} +
+{% endblock %}