Adding radio buttons and conditional fields

src/components/contact-us/contact-us-controller.ts

@@ -407,6 +407,7 @@ export function contactUsQuestionsFormPostToSmartAgent(
         ticketIdentifier: ticketIdentifier,
         userAgent: req.get("User-Agent"),
         appErrorCode: getAppErrorCode(req.body.appErrorCode),
+        country: req.body.country,
       },
       feedbackContact: req.body.contact === "true",
       questions: questions,
@@ -462,6 +463,7 @@ export function contactUsQuestionsFormPostToZendesk(
         ticketIdentifier: ticketIdentifier,
         userAgent: req.get("User-Agent"),
         appErrorCode: getAppErrorCode(req.body.appErrorCode),
+        country: req.body.country,
       },
       feedbackContact: req.body.contact === "true",
       questions: questions,

src/components/contact-us/contact-us-questions-validation.ts

@@ -154,6 +154,27 @@ export function validateContactUsQuestionsRequest(): ValidationChainFunc {
           { value, lng: setLanguageToReflectSupportForWelsh(req.i18n.lng) }
         );
       }),
+    body("country")
+      .optional()
+      .custom((value, { req }) => {
+        if (
+          req.body.securityCodeSentMethod ===
+          "text_message_international_number"
+        ) {
+          if (!value) {
+            throw new Error(
+              req.t(
+                "pages.contactUsQuestions.textMessageInternationNumberConditionalSection.errorIfBlank",
+                {
+                  value,
+                  lng: setLanguageToReflectSupportForWelsh(req.i18n.lng),
+                }
+              )
+            );
+          }
+        }
+        return true;
+      }),
     body("countryPhoneNumberFrom")
       .optional()
       .notEmpty()

src/components/contact-us/contact-us-service-smart-agent.ts

@@ -165,6 +165,9 @@ export function contactUsServiceSmartAgent(
     customAttributes["sa-security-code-sent-method"] =
       prepareSecurityCodeSendMethodTitle(contactForm.securityCodeSentMethod);
 
+    customAttributes["sa-security-mobile-country"] =
+      contactForm.optionalData.country;
+
     customAttributes["sa-tag-secondary-reason-user-selection"] =
       contactForm.themeQuestions.subthemeQuestion;
 

src/components/contact-us/contact-us-service.ts

@@ -225,6 +225,11 @@ export function contactUsService(
       htmlBody.push(`<p>${optionalData.appErrorCode}</p>`);
     }
 
+    if (optionalData.country) {
+      htmlBody.push(`<span>[Which Country?]</span>`);
+      htmlBody.push(`<p>${optionalData.country}</p>`);
+    }
+
     htmlBody.push(`<span>[From page]</span>`);
     if (referer) {
       htmlBody.push(`<p>${referer}</p>`);

src/components/contact-us/questions/_security_send_method.njk

@@ -1,3 +1,22 @@
+{% set countryHtml %}
+{{ govukInput({
+    id: "country",
+    name: "country",
+    value: country,
+    spellcheck: false,
+    classes: "govuk-!-width-two-thirds",
+    label: {
+      text: 'pages.contactUsQuestions.textMessageInternationNumberConditionalSection.heading' | translateEnOnly
+    },
+    hint: {
+        text: 'pages.contactUsQuestions.textMessageInternationNumberConditionalSection.hintText' | translateEnOnly
+    },
+    errorMessage:{
+        text: errors['country'].text
+    }if (errors['country'])
+  }) }}
+{% endset -%}
+
 {% if ipnSupport %}
     {% if theme == 'account_creation' %}
         {% set items = [
@@ -14,7 +33,10 @@
             {
                 value: "text_message_international_number",
                 checked: securityCodeSentMethod === 'text_message_international_number',
-                text: 'pages.contactUsQuestions.securityCodeSentMethod.textMessageInternationalNumber' | translateEnOnly
+                text: 'pages.contactUsQuestions.securityCodeSentMethod.textMessageInternationalNumber' | translateEnOnly,
+                conditional:{
+                    html:countryHtml
+                }
             },
             {
                 value: "authenticator_app",
@@ -26,6 +48,11 @@
 
     {% if theme == 'signing_in' %}
         {% set items = [
+            {
+                value: "email",
+                checked: securityCodeSentMethod === 'email',
+                text: 'pages.contactUsQuestions.securityCodeSentMethod.email' | translateEnOnly
+            },
             {
                 value: "text_message_uk_number",
                 checked: securityCodeSentMethod === 'text_message_uk_number',
@@ -34,7 +61,10 @@
             {
                 value: "text_message_international_number",
                 checked: securityCodeSentMethod === 'text_message_international_number',
-                text: 'pages.contactUsQuestions.securityCodeSentMethod.textMessageInternationalNumber' | translateEnOnly
+                text: 'pages.contactUsQuestions.securityCodeSentMethod.textMessageInternationalNumber' | translateEnOnly,
+                conditional:{
+                    html:countryHtml
+                }
             },
             {
                 value: "authenticator_app",
@@ -54,9 +84,17 @@
                 text: 'pages.contactUsQuestions.securityCodeSentMethod.email' | translateEnOnly
             },
             {
-                value: "text_message",
-                checked: securityCodeSentMethod === 'text_message',
-                text: 'pages.contactUsQuestions.securityCodeSentMethod.textMessage' | translateEnOnly
+                value: "text_message_uk_number",
+                checked: securityCodeSentMethod === 'text_message_uk_number',
+                text: 'pages.contactUsQuestions.securityCodeSentMethod.textMessageUkNumber' | translateEnOnly
+            },
+            {
+                value: "text_message_international_number",
+                checked: securityCodeSentMethod === 'text_message_international_number',
+                text: 'pages.contactUsQuestions.securityCodeSentMethod.textMessageInternationalNumber' | translateEnOnly,
+                conditional:{
+                    html:countryHtml
+                }
             },
             {
                 value: "authenticator_app",
@@ -69,9 +107,22 @@
     {% if theme == 'signing_in' %}
         {% set items = [
             {
-                value: "text_message",
-                checked: securityCodeSentMethod === 'text_message',
-                text: 'pages.contactUsQuestions.securityCodeSentMethod.textMessage' | translateEnOnly
+                value: "email",
+                checked: securityCodeSentMethod === 'email',
+                text: 'pages.contactUsQuestions.securityCodeSentMethod.email' | translateEnOnly
+            },
+            {
+                value: "text_message_uk_number",
+                checked: securityCodeSentMethod === 'text_message_uk_number',
+                text: 'pages.contactUsQuestions.securityCodeSentMethod.textMessageUkNumber' | translateEnOnly
+            },
+            {
+                value: "text_message_international_number",
+                checked: securityCodeSentMethod === 'text_message_international_number',
+                text: 'pages.contactUsQuestions.securityCodeSentMethod.textMessageInternationalNumber' | translateEnOnly,
+                conditional:{
+                    html:countryHtml
+                }
             },
             {
                 value: "authenticator_app",

src/components/contact-us/tests/contact-us-controller-integration.test.ts

@@ -241,6 +241,29 @@ describe("Integration:: contact us - public user", () => {
     );
   });
 
+  it("should return validation error when user selected Text message to a phone number from another country and left the Which country field empty", (done) => {
+    request(app)
+      .post("/contact-us-questions?radio_buttons=true")
+      .type("form")
+      .set("Cookie", cookies)
+      .send({
+        _csrf: token,
+        theme: "account_creation",
+        subtheme: "invalid_security_code",
+        additionalDescription: "additional",
+        contact: "false",
+        securityCodeSentMethod: "text_message_international_number",
+        country: " ",
+      })
+      .expect(function (res) {
+        const $ = cheerio.load(res.text);
+        expect($("#country-error").text()).to.contains(
+          "Enter which country your phone number is from"
+        );
+      })
+      .expect(400, done);
+  });
+
   it("should return validation error when user selected yes to contact for feedback but email is in an invalid format", (done) => {
     const data = {
       _csrf: token,

src/components/contact-us/types.ts

@@ -20,6 +20,7 @@ export interface OptionalData {
   ticketIdentifier?: string;
   appSessionId?: string;
   appErrorCode?: string;
+  country?: string;
 }
 
 export interface Questions {
@@ -79,6 +80,7 @@ export interface SmartAgentCustomAttributes {
   "sa-tag-theme"?: string;
   "sa-tag-subtheme"?: string;
   "sa-app-error-code"?: string;
+  "sa-security-mobile-country"?: string;
 }
 
 export interface SmartAgentTicket {

src/locales/cy/translation.json

@@ -1713,6 +1713,11 @@
         "nameLabel": "Enw (Dewisol)",
         "privacyNote": "Darllenwch ein <a href=\"/privacy-notice\" class=\"govuk-link\" rel=\"noreferrer noopener\" target=\"_blank\">hysbysiad preifatrwydd</a> am fwy o wybodaeth am sut rydym yn defnyddio eich gwybodaeth bersonol."
       },
+      "textMessageInternationNumberConditionalSection": { 
+          "heading": "Pa wlad?", 
+          "hintText": "Peidiwch â rhoi eich rhif ffôn", 
+          "errorIfBlank": "Rhowch o ba wlad y mae eich rhif ffôn yn dod" 
+      },
       "anotherProblem": {
         "title": "Problem wrth ddefnyddio eich GOV.UK One Login",
         "header": "Problem wrth ddefnyddio eich GOV.UK One Login",

src/locales/en/translation.json

@@ -1713,6 +1713,11 @@
         "nameLabel": "Name (Optional)",
         "privacyNote": "Read our <a href=\"/privacy-notice\" class=\"govuk-link\" rel=\"noreferrer noopener\" target=\"_blank\">privacy notice</a> for more information on how we use your personal information."
       },
+      "textMessageInternationNumberConditionalSection": {
+        "heading": "Which country?",
+        "hintText": "Do not enter your phone number",
+        "errorIfBlank": "Enter which country your phone number is from"
+      },
       "anotherProblem": {
         "title": "A problem using your GOV.UK One Login",
         "header": "A problem using your GOV.UK One Login",