[CCM-11544] Choose alternative letter formats for a message plan

frontend/src/__tests__/app/choose-a-template-type/__snapshots__/page.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`ChooseATemplateTypePage 1`] = `
 <DocumentFragment>
   <a
     class="nhsuk-back-link"
-    data-testid="back-to-templates-link"
+    data-testid="back-link-top"
     href="/message-templates"
   >
     Back to all templates

frontend/src/__tests__/app/choose-templates/page.test.tsx

@@ -183,6 +183,8 @@ describe('ChooseTemplatesPage', () => {
     const appTemplateId = 'd3a2c6ba-438a-4bf4-b94a-7c64c6528e7f';
     const smsTemplateId = '5f7c3e1d-9b1a-4d3a-8f3e-2c6b8e9f1a2b';
     const letterTemplateId = '9a8b7c6d-5e4f-3a2b-1c0d-9e8f7a6b5c4d';
+    const frenchLetterTemplateId = '1a2b3c4d-5e6f-7a8b-9c0d-1e2f3a4b5c6d';
+    const spanishLetterTemplateId = '6d5c4b3a-2f1e-0d9c-8b7a-6f5e4d3c2b1a';
 
     const planWithMultiple: RoutingConfig = {
       ...routingConfig,
@@ -210,6 +212,16 @@ describe('ChooseTemplatesPage', () => {
           channel: 'LETTER',
           channelType: 'primary',
           defaultTemplateId: letterTemplateId,
+          conditionalTemplates: [
+            {
+              language: 'fr',
+              templateId: frenchLetterTemplateId,
+            },
+            {
+              language: 'es',
+              templateId: spanishLetterTemplateId,
+            },
+          ],
         },
       ],
     };
@@ -221,6 +233,16 @@ describe('ChooseTemplatesPage', () => {
         ...LETTER_TEMPLATE,
         id: letterTemplateId,
       },
+      [frenchLetterTemplateId]: {
+        ...LETTER_TEMPLATE,
+        name: 'French Letter Template',
+        id: frenchLetterTemplateId,
+      },
+      [spanishLetterTemplateId]: {
+        ...LETTER_TEMPLATE,
+        name: 'Spanish Letter Template',
+        id: spanishLetterTemplateId,
+      },
     };
 
     getMessagePlanMock.mockResolvedValueOnce(planWithMultiple);

frontend/src/__tests__/app/message-plans/campaign-id-required/__snapshots__/page.test.tsx.snap

@@ -32,7 +32,7 @@ exports[`matches snapshot 1`] = `
         </div>
         <p>
           <a
-            data-testid="back-link"
+            data-testid="back-link-bottom"
             href="/message-plans"
           >
             Go back

frontend/src/__tests__/app/message-plans/choose-email-template/__snapshots__/page.test.tsx.snap

@@ -13,16 +13,20 @@ exports[`ChooseEmailTemplate page renders Email template selection 1`] = `
       <div
         class="nhsuk-grid-column-full"
       >
-        <span
-          class="nhsuk-caption-l"
+        <div
+          class="nhsuk-u-reading-width"
         >
-          Autumn Campaign Plan
-        </span>
-        <h1
-          class="nhsuk-heading-l"
-        >
-          Choose an email template
-        </h1>
+          <span
+            class="nhsuk-caption-l"
+          >
+            Autumn Campaign Plan
+          </span>
+          <h1
+            class="nhsuk-heading-xl"
+          >
+            Choose an email template
+          </h1>
+        </div>
         <form
           action="javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"
         >
@@ -46,7 +50,7 @@ exports[`ChooseEmailTemplate page renders Email template selection 1`] = `
           />
           <dl
             class="nhsuk-summary-list"
-            data-testid="previous-selection-summary"
+            data-testid="previous-selection-details"
           >
             <div
               class="nhsuk-summary-list__row"
@@ -70,7 +74,8 @@ exports[`ChooseEmailTemplate page renders Email template selection 1`] = `
               class="nhsuk-grid-column-full"
             >
               <div
-                class="nhsuk-hint"
+                class="nhsuk-hint nhsuk-u-reading-width"
+                data-testid="table-hint"
               >
                 Choose one option
               </div>
@@ -213,18 +218,15 @@ exports[`ChooseEmailTemplate page renders Email template selection 1`] = `
                           >
 
                           </span>
-                          <div
-                            class="actionLinksWrapper"
+                          <a
+                            aria-label="Preview"
+                            class="nhsuk-u-margin-bottom-2 nhsuk-link"
+                            data-testid="email-template-id-preview-link"
+                            href="/message-plans/choose-email-template/fbb81055-79b9-4759-ac07-d191ae57be34/preview-template/email-template-id?lockNumber=42"
+                            id="preview-template-link-0"
                           >
-                            <a
-                              aria-label="Preview"
-                              data-testid="email-template-id-preview-link"
-                              href="/message-plans/choose-email-template/fbb81055-79b9-4759-ac07-d191ae57be34/preview-template/email-template-id"
-                              id="preview-template-link-0"
-                            >
-                              Preview
-                            </a>
-                          </div>
+                            Preview
+                          </a>
                         </td>
                       </tr>
                     </tbody>
@@ -247,7 +249,8 @@ exports[`ChooseEmailTemplate page renders Email template selection 1`] = `
               Save and continue
             </button>
             <a
-              class="nhsuk-u-font-size-19 inline-block nhsuk-u-margin-left-3 nhsuk-u-padding-top-3"
+              class="nhsuk-u-font-size-19 inline-block nhsuk-u-margin-left-4 nhsuk-u-padding-top-3"
+              data-testid="back-link-bottom"
               href="/message-plans/choose-templates/fbb81055-79b9-4759-ac07-d191ae57be34"
             >
               Go back

frontend/src/__tests__/app/message-plans/choose-email-template/preview-template/__snapshots__/page.test.tsx.snap

@@ -4,7 +4,8 @@ exports[`PreviewEmailTemplateFromMessagePlan page renders Email template preview
 <DocumentFragment>
   <a
     class="nhsuk-back-link"
-    href="/message-plans/choose-email-template/fbb81055-79b9-4759-ac07-d191ae57be34"
+    data-testid="back-link-top"
+    href="/message-plans/choose-email-template/fbb81055-79b9-4759-ac07-d191ae57be34?lockNumber=5"
   >
     Go back
   </a>
@@ -49,7 +50,8 @@ exports[`PreviewEmailTemplateFromMessagePlan page renders Email template preview
                 Template ID
               </dt>
               <dd
-                class="nhsuk-summary-list__value"
+                class="nhsuk-summary-list__value monospace-font"
+                data-testid="preview-template-id"
               >
                 email-template-id
               </dd>
@@ -128,13 +130,13 @@ exports[`PreviewEmailTemplateFromMessagePlan page renders Email template preview
             </div>
           </dl>
         </div>
-        <p>
-          <a
-            href="/message-plans/choose-email-template/fbb81055-79b9-4759-ac07-d191ae57be34"
-          >
-            Go back
-          </a>
-        </p>
+        <a
+          class="nhsuk-link nhsuk-body-m nhsuk-u-display-inline-block"
+          data-testid="back-link-bottom"
+          href="/message-plans/choose-email-template/fbb81055-79b9-4759-ac07-d191ae57be34?lockNumber=5"
+        >
+          Go back
+        </a>
       </div>
     </div>
   </main>

frontend/src/__tests__/app/message-plans/choose-email-template/preview-template/page.test.tsx

@@ -13,6 +13,38 @@ const getTemplateMock = jest.mocked(getTemplate);
 const redirectMock = jest.mocked(redirect);
 
 describe('PreviewEmailTemplateFromMessagePlan page', () => {
+  it('should redirect to choose-templates when lockNumber is invalid', async () => {
+    await PreviewEmailTemplateFromMessagePlan({
+      params: Promise.resolve({
+        routingConfigId: 'routing-config-id',
+        templateId: 'template-id',
+      }),
+      searchParams: Promise.resolve({
+        lockNumber: 'invalid',
+      }),
+    });
+
+    expect(redirectMock).toHaveBeenCalledWith(
+      '/message-plans/choose-templates/routing-config-id',
+      'replace'
+    );
+  });
+
+  it('should redirect to choose-templates when lockNumber is missing', async () => {
+    await PreviewEmailTemplateFromMessagePlan({
+      params: Promise.resolve({
+        routingConfigId: 'routing-config-id',
+        templateId: 'template-id',
+      }),
+      searchParams: Promise.resolve({}),
+    });
+
+    expect(redirectMock).toHaveBeenCalledWith(
+      '/message-plans/choose-templates/routing-config-id',
+      'replace'
+    );
+  });
+
   it('should redirect to invalid page with invalid template id', async () => {
     getTemplateMock.mockResolvedValueOnce(undefined);
 
@@ -21,6 +53,9 @@ describe('PreviewEmailTemplateFromMessagePlan page', () => {
         routingConfigId: 'routing-config-id',
         templateId: 'invalid-template-id',
       }),
+      searchParams: Promise.resolve({
+        lockNumber: '0',
+      }),
     });
 
     expect(getTemplateMock).toHaveBeenCalledWith('invalid-template-id');
@@ -39,6 +74,9 @@ describe('PreviewEmailTemplateFromMessagePlan page', () => {
         routingConfigId: ROUTING_CONFIG.id,
         templateId: EMAIL_TEMPLATE.id,
       }),
+      searchParams: Promise.resolve({
+        lockNumber: '5',
+      }),
     });
 
     const container = render(page);