[CCM-11494] Alternative letter formats

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

@@ -182,6 +182,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,
@@ -209,6 +211,16 @@ describe('ChooseTemplatesPage', () => {
           channel: 'LETTER',
           channelType: 'primary',
           defaultTemplateId: letterTemplateId,
+          conditionalTemplates: [
+            {
+              language: 'fr',
+              templateId: frenchLetterTemplateId,
+            },
+            {
+              language: 'es',
+              templateId: spanishLetterTemplateId,
+            },
+          ],
         },
       ],
     };
@@ -220,6 +232,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__/components/molecules/MessagePlanBlock.test.tsx

@@ -3,7 +3,8 @@ import { render, screen } from '@testing-library/react';
 import { MessagePlanBlock } from '@molecules/MessagePlanBlock/MessagePlanBlock';
 import type { CascadeItem, Channel } from 'nhs-notify-backend-client';
 import type { TemplateDto } from 'nhs-notify-backend-client';
-import { EMAIL_TEMPLATE } from '@testhelpers/helpers';
+import { EMAIL_TEMPLATE, LETTER_TEMPLATE } from '@testhelpers/helpers';
+import { MessagePlanTemplates } from '@utils/routing-utils';
 
 function buildCascadeItem(channel: Channel): CascadeItem {
   return {
@@ -19,6 +20,8 @@ const mockTemplate: TemplateDto = {
   name: 'Test email template',
 };
 
+const emptyConditionalTemplates: MessagePlanTemplates = {};
+
 describe('MessagePlanBlock', () => {
   it('should render the step number and the heading for the first cascade item', () => {
     const channelItem = buildCascadeItem('EMAIL');
@@ -28,6 +31,7 @@ describe('MessagePlanBlock', () => {
         index={0}
         channelItem={channelItem}
         routingConfigId='test-routing-config-id'
+        conditionalTemplates={emptyConditionalTemplates}
       />
     );
 
@@ -47,6 +51,7 @@ describe('MessagePlanBlock', () => {
         index={2}
         channelItem={channelItem}
         routingConfigId='test-routing-config-id'
+        conditionalTemplates={emptyConditionalTemplates}
       />
     );
 
@@ -65,6 +70,7 @@ describe('MessagePlanBlock', () => {
         index={0}
         channelItem={channelItem}
         routingConfigId='test-routing-config-id'
+        conditionalTemplates={emptyConditionalTemplates}
       />
     );
 
@@ -81,8 +87,9 @@ describe('MessagePlanBlock', () => {
         <MessagePlanBlock
           index={0}
           channelItem={channelItem}
-          template={mockTemplate}
+          defaultTemplate={mockTemplate}
           routingConfigId='test-routing-config-id'
+          conditionalTemplates={emptyConditionalTemplates}
         />
       );
       expect(screen.getByText('Test email template')).toBeInTheDocument();
@@ -95,8 +102,9 @@ describe('MessagePlanBlock', () => {
         <MessagePlanBlock
           index={0}
           channelItem={channelItem}
-          template={mockTemplate}
+          defaultTemplate={mockTemplate}
           routingConfigId='test-routing-config-id'
+          conditionalTemplates={emptyConditionalTemplates}
         />
       );
 
@@ -121,6 +129,7 @@ describe('MessagePlanBlock', () => {
           index={0}
           channelItem={channelItem}
           routingConfigId='test-routing-config-id'
+          conditionalTemplates={emptyConditionalTemplates}
         />
       );
 
@@ -133,13 +142,105 @@ describe('MessagePlanBlock', () => {
         })
       ).not.toBeInTheDocument();
       expect(
-        screen.queryByRole('link', {
+        screen.queryByRole('button', {
           name: 'Remove Text message (SMS) template',
         })
       ).not.toBeInTheDocument();
     });
   });
 
+  describe('when channel is LETTER', () => {
+    it('should render conditional templates section', () => {
+      const channelItem = buildCascadeItem('LETTER');
+
+      render(
+        <MessagePlanBlock
+          index={0}
+          channelItem={channelItem}
+          routingConfigId='test-routing-config-id'
+          conditionalTemplates={emptyConditionalTemplates}
+        />
+      );
+
+      expect(
+        screen.getByTestId('message-plan-conditional-templates')
+      ).toBeInTheDocument();
+    });
+
+    it('should render accessible format templates', () => {
+      const channelItem = buildCascadeItem('LETTER');
+
+      render(
+        <MessagePlanBlock
+          index={0}
+          channelItem={channelItem}
+          routingConfigId='test-routing-config-id'
+          conditionalTemplates={emptyConditionalTemplates}
+        />
+      );
+
+      expect(
+        screen.getByRole('heading', {
+          level: 3,
+          name: 'Large print letter (optional)',
+        })
+      ).toBeInTheDocument();
+    });
+
+    it('should render language templates section', () => {
+      const channelItem = buildCascadeItem('LETTER');
+
+      render(
+        <MessagePlanBlock
+          index={0}
+          channelItem={channelItem}
+          routingConfigId='test-routing-config-id'
+          conditionalTemplates={emptyConditionalTemplates}
+        />
+      );
+
+      expect(
+        screen.getByRole('heading', {
+          level: 3,
+          name: 'Other language letters (optional)',
+        })
+      ).toBeInTheDocument();
+    });
+
+    it('should display conditional template names when provided', () => {
+      const largePrintTemplate: TemplateDto = {
+        ...LETTER_TEMPLATE,
+        id: 'large-print-id',
+        name: 'Large print template',
+      };
+
+      const channelItem: CascadeItem = {
+        ...buildCascadeItem('LETTER'),
+        conditionalTemplates: [
+          {
+            accessibleFormat: 'x1',
+            templateId: 'large-print-id',
+          },
+        ],
+      };
+
+      const conditionalTemplates: MessagePlanTemplates = {
+        'large-print-id': largePrintTemplate,
+      };
+
+      render(
+        <MessagePlanBlock
+          index={0}
+          channelItem={channelItem}
+          routingConfigId='test-routing-config-id'
+          conditionalTemplates={conditionalTemplates}
+        />
+      );
+
+      expect(screen.getByText('Large print template')).toBeInTheDocument();
+    });
+  });
+
   describe.each(['NHSAPP', 'EMAIL', 'SMS', 'LETTER'] as const)(
     'for channel %s with template',
     (channel) => {
@@ -149,8 +250,9 @@ describe('MessagePlanBlock', () => {
           <MessagePlanBlock
             index={0}
             channelItem={channelItem}
-            template={mockTemplate}
+            defaultTemplate={mockTemplate}
             routingConfigId='test-routing-config-id'
+            conditionalTemplates={emptyConditionalTemplates}
           />
         );
         expect(asFragment()).toMatchSnapshot();
@@ -168,6 +270,7 @@ describe('MessagePlanBlock', () => {
             index={0}
             channelItem={channelItem}
             routingConfigId='test-routing-config-id'
+            conditionalTemplates={emptyConditionalTemplates}
           />
         );
         expect(asFragment()).toMatchSnapshot();