@capillarytech/creatives-library 9.0.13 → 9.0.14

package/v2Containers/CommunicationFlow/steps/ChannelSelectionStep/Tests/ChannelSelectionStep.test.js

@@ -17,6 +17,21 @@ jest.setTimeout(30000);
 // Larger wait budget for individual menu/portal transitions under parallel load.
 const WAIT_OPTIONS = { timeout: 10000 };
 
+jest.mock('v2Components/TestAndPreviewSlidebox', () => function MockTestAndPreviewSlidebox({ show, onClose, channel }) {
+  if (!show) return null;
+  return (
+    <div data-testid="test-and-preview-mock" data-channel={channel}>
+      <button type="button" data-testid="tap-close" onClick={onClose}>Close preview</button>
+    </div>
+  );
+});
+
+jest.mock('../../../../Whatsapp/utils', () => ({
+  getWhatsappDocPreview: jest.fn(() => ({ docType: 'pdf', docUrl: 'http://doc' })),
+  getWhatsappQuickReply: jest.fn(() => null),
+  getWhatsappCarouselButtonView: jest.fn(() => null),
+}));
+
 jest.mock('../../../../CreativesContainer', () => function MockCreativesContainer({
   getCreativesData,
   handleCloseCreatives,
@@ -90,8 +105,7 @@ describe('ChannelSelectionStep', () => {
     );
 
     expect(screen.getAllByText('Content template').length).toBeGreaterThanOrEqual(1);
-    expect(screen.getByText('Add message content and incentive')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /content template/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /add creative/i })).toBeInTheDocument();
     expect(screen.queryByTestId('creatives-mock')).not.toBeInTheDocument();
   });
 
@@ -150,7 +164,7 @@ describe('ChannelSelectionStep', () => {
       />,
     );
 
-    await userEvent.click(screen.getByRole('button', { name: /content template/i }));
+    await userEvent.click(screen.getByRole('button', { name: /add creative/i }));
     await waitFor(() => {
       expect(screen.getByRole('menu')).toBeInTheDocument();
     }, WAIT_OPTIONS);
@@ -188,7 +202,7 @@ describe('ChannelSelectionStep', () => {
       />,
     );
 
-    await userEvent.click(screen.getByRole('button', { name: /content template/i }));
+    await userEvent.click(screen.getByRole('button', { name: /add creative/i }));
     await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
     await userEvent.click(within(screen.getByRole('menu')).getByText('SMS'));
     await waitFor(() => expect(screen.getByTestId('creatives-mock')).toBeInTheDocument(), WAIT_OPTIONS);
@@ -236,7 +250,7 @@ describe('ChannelSelectionStep', () => {
     });
   });
 
-  it('preview menu logs content id', async () => {
+  it('preview menu opens test-and-preview slidebox', async () => {
     renderStep(
       <ChannelSelectionStep
         value={{
@@ -253,7 +267,7 @@ describe('ChannelSelectionStep', () => {
     await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
     await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
 
-    expect(console.log).toHaveBeenCalledWith('Preview content', 'p1');
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
   });
 
   it('delivery settings section forwards onDeliverySettingChange to onChange', async () => {
@@ -285,6 +299,7 @@ describe('ChannelSelectionStep', () => {
         onChange={onChange}
         channels={CHANNELS}
         incentivesData={{
+          enabled: true,
           types: [
             { value: 'badges', label: 'Badges', isActive: true },
             { value: 'coupons', label: 'Coupons', isActive: true },
@@ -316,6 +331,7 @@ describe('ChannelSelectionStep', () => {
         onChange={onChange}
         channels={CHANNELS}
         incentivesData={{
+          enabled: true,
           types: [{ value: 'badges', label: 'Badges', isActive: true }],
         }}
       />,
@@ -342,7 +358,7 @@ describe('ChannelSelectionStep', () => {
             {
               contentId: 'mp1',
               channel: 'MOBILEPUSH',
-              templateData: { notificationTitle: 'Push title here' },
+              templateData: { androidContent: { title: 'Push title here' } },
             },
             {
               contentId: 'em2',
@@ -362,7 +378,7 @@ describe('ChannelSelectionStep', () => {
     expect(screen.getByText('from@example.com')).toBeInTheDocument();
   });
 
-  it('mobile push preview falls back to notification body when title is absent', () => {
+  it('mobile push preview shows message body when title is absent', () => {
     renderStep(
       <ChannelSelectionStep
         value={{
@@ -370,7 +386,7 @@ describe('ChannelSelectionStep', () => {
             {
               contentId: 'mp-body',
               channel: 'MOBILEPUSH',
-              templateData: { notificationBody: 'Body only preview text' },
+              templateData: { androidContent: { message: 'Body only preview text' } },
             },
           ],
         }}
@@ -422,7 +438,7 @@ describe('ChannelSelectionStep', () => {
       />,
     );
 
-    await userEvent.click(screen.getByRole('button', { name: /content template/i }));
+    await userEvent.click(screen.getByRole('button', { name: /add creative/i }));
     expect(screen.queryByRole('menu')).not.toBeInTheDocument();
   });
 
@@ -436,7 +452,7 @@ describe('ChannelSelectionStep', () => {
       />,
     );
 
-    await userEvent.click(screen.getByRole('button', { name: /content template/i }));
+    await userEvent.click(screen.getByRole('button', { name: /add creative/i }));
     expect(screen.queryByRole('menu')).not.toBeInTheDocument();
   });
 
@@ -462,14 +478,14 @@ describe('ChannelSelectionStep', () => {
     renderStep(
       <ChannelSelectionStep value={null} onChange={jest.fn()} channels={CHANNELS} />,
     );
-    expect(screen.getByText('Add message content and incentive')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /add creative/i })).toBeInTheDocument();
   });
 
   it('uses CHANNELS fallback when channels prop is null', async () => {
     renderStep(
       <ChannelSelectionStep value={{ contentItems: [] }} onChange={jest.fn()} channels={null} />,
     );
-    await userEvent.click(screen.getByRole('button', { name: /content template/i }));
+    await userEvent.click(screen.getByRole('button', { name: /add creative/i }));
     await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
     expect(within(screen.getByRole('menu')).getByText('SMS')).toBeInTheDocument();
   });
@@ -492,7 +508,7 @@ describe('ChannelSelectionStep', () => {
         ]}
       />,
     );
-    await userEvent.click(screen.getByRole('button', { name: /content template/i }));
+    await userEvent.click(screen.getByRole('button', { name: /add creative/i }));
     await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
     await userEvent.click(screen.getByText('Custom'));
     expect(onChange).toHaveBeenCalledWith({ channel: 'CUSTOM', channels: [] });
@@ -504,7 +520,7 @@ describe('ChannelSelectionStep', () => {
     renderStep(
       <ChannelSelectionStep value={{ contentItems: [] }} onChange={onChange} channels={CHANNELS} />,
     );
-    await userEvent.click(screen.getByRole('button', { name: /content template/i }));
+    await userEvent.click(screen.getByRole('button', { name: /add creative/i }));
     await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
     await userEvent.click(within(screen.getByRole('menu')).getByText('SMS'));
     await waitFor(() => expect(screen.getByTestId('creatives-mock')).toBeInTheDocument(), WAIT_OPTIONS);
@@ -542,14 +558,14 @@ describe('ChannelSelectionStep', () => {
         value={{ contentItems: [] }}
         onChange={jest.fn()}
         channels={CHANNELS}
-        creativesMode="preview"
+        creativesMode="create"
       />,
     );
-    await userEvent.click(screen.getByRole('button', { name: /content template/i }));
+    await userEvent.click(screen.getByRole('button', { name: /add creative/i }));
     await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
     await userEvent.click(within(screen.getByRole('menu')).getByText('SMS'));
     await waitFor(() => expect(screen.getByTestId('creatives-mock')).toBeInTheDocument(), WAIT_OPTIONS);
-    expect(screen.getByTestId('creatives-mock')).toHaveAttribute('data-creatives-mode', 'preview');
+    expect(screen.getByTestId('creatives-mock')).toHaveAttribute('data-creatives-mode', 'create');
   });
 
   it('appends to selectedOfferDetails when an incentive is already selected', async () => {
@@ -561,6 +577,7 @@ describe('ChannelSelectionStep', () => {
         channels={CHANNELS}
         selectedOfferDetails={[{ type: 'existing' }]}
         incentivesData={{
+          enabled: true,
           types: [{ value: 'badges', label: 'Badges', isActive: true }],
         }}
       />,
@@ -573,12 +590,16 @@ describe('ChannelSelectionStep', () => {
     });
   });
 
-  it('uses template message field and non-string smsBody fallback in preview', () => {
+  it('line message text and non-string smsBody fallback show in preview', () => {
     renderStep(
       <ChannelSelectionStep
         value={{
           contentItems: [
-            { contentId: 'line1', channel: 'LINE', templateData: { message: 'Line message preview' } },
+            {
+              contentId: 'line1',
+              channel: 'LINE',
+              templateData: { messageBody: JSON.stringify({ messages: [{ text: 'Line message preview' }] }) },
+            },
             { contentId: 'sms-num', channel: 'SMS', templateData: { smsBody: 42 } },
           ],
         }}
@@ -598,22 +619,22 @@ describe('ChannelSelectionStep', () => {
             {
               contentId: 'mpush1',
               channel: 'MPUSH',
-              templateData: { notificationTitle: 'Direct MPUSH title' },
+              templateData: { androidContent: { title: 'Direct MPUSH title' } },
             },
             {
               contentId: 'and',
               channel: 'MOBILEPUSH',
-              templateData: { androidContent: { notificationTitle: 'Android title' } },
+              templateData: { androidContent: { title: 'Android title' } },
             },
             {
               contentId: 'ios',
               channel: 'MOBILEPUSH',
-              templateData: { iosContent: { body: 'Ios body text' } },
+              templateData: { iosContent: { message: 'Ios body text' } },
             },
             {
               contentId: 'and-body',
               channel: 'MOBILEPUSH',
-              templateData: { androidContent: { notificationBody: 'Android notif body' } },
+              templateData: { androidContent: { message: 'Android notif body' } },
             },
           ],
         }}
@@ -685,11 +706,11 @@ describe('ChannelSelectionStep', () => {
         channels={CHANNELS}
       />,
     );
-    expect(screen.getByText('VIBER')).toBeInTheDocument();
+    expect(screen.getByLabelText('Show more content options icon')).toBeInTheDocument();
     parseSpy.mockRestore();
   });
 
-  it('Viber preview falls back to channel when parsed JSON has no text (empty messageBody)', () => {
+  it('Viber preview renders card when parsed JSON has no text (empty messageBody)', () => {
     renderStep(
       <ChannelSelectionStep
         value={{
@@ -705,7 +726,7 @@ describe('ChannelSelectionStep', () => {
         channels={CHANNELS}
       />,
     );
-    expect(screen.getByText('VIBER')).toBeInTheDocument();
+    expect(screen.getByLabelText('Show more content options icon')).toBeInTheDocument();
   });
 
   it('does not open creatives when clicked channel is in channelsToDisable', async () => {
@@ -719,7 +740,7 @@ describe('ChannelSelectionStep', () => {
         channelsToDisable={['SMS']}
       />,
     );
-    await userEvent.click(screen.getByRole('button', { name: /content template/i }));
+    await userEvent.click(screen.getByRole('button', { name: /add creative/i }));
     await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
     // SMS is in channelsToDisable — clicking it should not call onChange or show creatives
     await userEvent.click(within(screen.getByRole('menu')).getByText('SMS'));
@@ -774,7 +795,7 @@ describe('ChannelSelectionStep', () => {
         channelsToDisable={['EMAIL']}
       />,
     );
-    await userEvent.click(screen.getByRole('button', { name: /content template/i }));
+    await userEvent.click(screen.getByRole('button', { name: /add creative/i }));
     await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
     // Click the disabled EMAIL menu item — handleChannelSelect should return early
     await userEvent.click(within(screen.getByRole('menu')).getByText('Email'));
@@ -782,8 +803,7 @@ describe('ChannelSelectionStep', () => {
     expect(screen.queryByTestId('creatives-mock')).not.toBeInTheDocument();
   });
 
-  it('ios notification body shows as preview when iosContent.notificationBody is present', () => {
-    // Covers line 125: templateData.iosContent.notificationBody fallback branch
+  it('ios notification body shows as preview when iosContent.message is present', () => {
     renderStep(
       <ChannelSelectionStep
         value={{
@@ -791,7 +811,7 @@ describe('ChannelSelectionStep', () => {
             {
               contentId: 'ios-nb',
               channel: 'MOBILEPUSH',
-              templateData: { iosContent: { notificationBody: 'IOS notif body text' } },
+              templateData: { iosContent: { message: 'IOS notif body text' } },
             },
           ],
         }}
@@ -801,4 +821,1096 @@ describe('ChannelSelectionStep', () => {
     );
     expect(screen.getByText(/IOS notif body text/)).toBeInTheDocument();
   });
+
+  // ── handleCloseTestAndPreview ────────────────────────────────────────────────
+
+  it('closing TestAndPreview via onClose hides the slidebox', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{ contentId: 'c-close', channel: 'SMS', templateData: { smsBody: 'x' } }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+
+    await userEvent.click(screen.getByTestId('tap-close'));
+
+    expect(screen.queryByTestId('test-and-preview-mock')).not.toBeInTheDocument();
+  });
+
+  // ── PREVIEW_TEST_UNSUPPORTED_CHANNELS ────────────────────────────────────────
+
+  it.each(['LINE', 'FACEBOOK', 'CALLTASK'])(
+    '%s content card omits the "Preview and Test" menu item',
+    async (channel) => {
+      renderStep(
+        <ChannelSelectionStep
+          value={{
+            contentItems: [{ contentId: 'unsupported-1', channel, templateData: { messageBody: 'body' } }],
+          }}
+          onChange={jest.fn()}
+          channels={CHANNELS}
+        />,
+      );
+      await userEvent.click(screen.getByLabelText('Show more content options icon'));
+      await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+      expect(within(screen.getByRole('menu')).queryByText('Preview and Test')).not.toBeInTheDocument();
+    },
+  );
+
+  // ── extractContentForPreview — EMAIL ─────────────────────────────────────────
+
+  it('EMAIL preview passes EMAIL channel to TestAndPreview slidebox', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'ep1',
+            channel: 'EMAIL',
+            templateData: { emailSubject: 'Hello', emailBody: '<p>Body</p>' },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+    expect(screen.getByTestId('test-and-preview-mock')).toHaveAttribute('data-channel', 'EMAIL');
+  });
+
+  it('EMAIL preview uses emailHtml when emailBody is absent', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'ep2',
+            channel: 'EMAIL',
+            templateData: { emailHtml: '<b>HTML</b>' },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+  });
+
+  // ── extractContentForPreview — MOBILEPUSH / MPUSH ────────────────────────────
+
+  it('MOBILEPUSH preview passes MOBILEPUSH channel and handles expandableDetails optional chaining', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'mp-ep',
+            channel: 'MOBILEPUSH',
+            templateData: {
+              accountId: 'acc1',
+              androidContent: {
+                title: 'And title',
+                message: 'And msg',
+                expandableDetails: {
+                  image: 'http://img.png',
+                  media: ['http://vid.mp4'],
+                  ctas: [{ label: 'Click', actionLink: 'http://link' }],
+                  carouselData: [{ id: 1 }],
+                },
+              },
+              iosContent: { title: 'iOS title', message: 'iOS msg' },
+            },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+    expect(screen.getByTestId('test-and-preview-mock')).toHaveAttribute('data-channel', 'MOBILEPUSH');
+  });
+
+  it('MOBILEPUSH preview with no expandableDetails uses fallback empty values', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'mp-no-exp',
+            channel: 'MOBILEPUSH',
+            templateData: { androidContent: {}, iosContent: {} },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+  });
+
+  it('MPUSH preview hits the MOBILEPUSH branch (same code path)', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'mpush-ep',
+            channel: 'MPUSH',
+            templateData: { androidContent: { title: 'MPUSH title' } },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+    expect(screen.getByTestId('test-and-preview-mock')).toHaveAttribute('data-channel', 'MPUSH');
+  });
+
+  // ── extractContentForPreview — INAPP ─────────────────────────────────────────
+
+  it('INAPP preview with image sets templateMediaType IMAGE', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'inapp-img',
+            channel: 'INAPP',
+            templateData: {
+              accountId: 'acc-inapp',
+              androidContent: {
+                title: 'InApp title',
+                message: 'InApp msg',
+                bodyType: 'BANNER',
+                expandableDetails: {
+                  image: 'http://inapp-img.png',
+                  ctas: [{ label: 'Go', actionLink: 'http://deep' }],
+                },
+              },
+              iosContent: {
+                expandableDetails: { image: 'http://ios-img.png' },
+              },
+            },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+    expect(screen.getByTestId('test-and-preview-mock')).toHaveAttribute('data-channel', 'INAPP');
+  });
+
+  it('INAPP preview without image sets templateMediaType TEXT and deepLinkValue null when no CTAs', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'inapp-noimg',
+            channel: 'INAPP',
+            templateData: {
+              androidContent: { title: 'Title', expandableDetails: { ctas: [] } },
+              iosContent: {},
+            },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+  });
+
+  // ── extractContentForPreview — WHATSAPP ──────────────────────────────────────
+
+  it('WHATSAPP preview with IMAGE mediaType populates whatsappImageSrc', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'wa-img',
+            channel: 'WHATSAPP',
+            templateData: {
+              messageBody: 'WA body',
+              accountId: 'wa-acc',
+              sourceAccountIdentifier: 'wa-src',
+              accountName: 'WA Name',
+              templateConfigs: {
+                mediaType: 'IMAGE',
+                whatsappMedia: { url: 'http://img.png', header: 'Header', footer: 'Footer' },
+                cards: [],
+              },
+            },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+    expect(screen.getByTestId('test-and-preview-mock')).toHaveAttribute('data-channel', 'WHATSAPP');
+  });
+
+  it('WHATSAPP preview with VIDEO mediaType populates whatsappVideoPreviewImg', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'wa-vid',
+            channel: 'WHATSAPP',
+            templateData: {
+              messageBody: 'WA video',
+              templateConfigs: {
+                mediaType: 'VIDEO',
+                whatsappMedia: { previewUrl: 'http://thumb.png' },
+              },
+            },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+  });
+
+  it('WHATSAPP preview with DOCUMENT + docParams calls getWhatsappDocPreview', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'wa-doc',
+            channel: 'WHATSAPP',
+            templateData: {
+              templateConfigs: {
+                mediaType: 'DOCUMENT',
+                whatsappMedia: {
+                  previewUrl: 'http://doc-thumb.png',
+                  docParams: { fileName: 'file.pdf', fileSize: 100 },
+                },
+              },
+            },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+  });
+
+  it('WHATSAPP preview with DOCUMENT without docParams sets docPreview null', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'wa-doc-null',
+            channel: 'WHATSAPP',
+            templateData: {
+              templateConfigs: {
+                mediaType: 'DOCUMENT',
+                whatsappMedia: {},
+              },
+            },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+  });
+
+  it('WHATSAPP preview with CTA buttons populates ctaData', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'wa-cta',
+            channel: 'WHATSAPP',
+            templateData: {
+              templateConfigs: {
+                buttonType: 'CTA',
+                buttons: [{ label: 'Buy', url: 'http://buy' }],
+              },
+            },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+  });
+
+  it('WHATSAPP preview with QUICK_REPLY buttons populates quickReplyData', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'wa-qr',
+            channel: 'WHATSAPP',
+            templateData: {
+              templateConfigs: {
+                buttonType: 'QUICK_REPLY',
+                buttons: [{ text: 'Yes' }, { text: 'No' }],
+                cards: [{ id: 'card1' }],
+              },
+            },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+  });
+
+  // ── extractContentForPreview — VIBER ─────────────────────────────────────────
+
+  it('VIBER preview with string messageBody containing video and accountDetails object', async () => {
+    const messageBody = JSON.stringify({
+      content: {
+        text: 'Hello from Viber',
+        image: { url: 'http://img.png' },
+        button: { text: 'Click' },
+        video: { url: 'http://vid.mp4', thumbnailUrl: 'http://thumb.jpg' },
+      },
+    });
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'vib-full',
+            channel: 'VIBER',
+            templateData: {
+              messageBody,
+              accountDetails: { name: 'My Brand', accountName: 'fallback' },
+            },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+    expect(screen.getByTestId('test-and-preview-mock')).toHaveAttribute('data-channel', 'VIBER');
+  });
+
+  it('VIBER preview with string accountDetails', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'vib-str-acct',
+            channel: 'VIBER',
+            templateData: {
+              messageBody: JSON.stringify({ content: { text: 'Hi' } }),
+              accountDetails: JSON.stringify({ accountName: 'Brand Name' }),
+            },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+  });
+
+  it('VIBER preview with object messageBody (non-string) uses it directly', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'vib-obj',
+            channel: 'VIBER',
+            templateData: {
+              messageBody: { content: { text: 'Obj message' } },
+              accountDetails: {},
+            },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+  });
+
+  it('VIBER preview: messageBody JSON.parse throws falls back to empty object', async () => {
+    const spy = jest.spyOn(JSON, 'parse').mockImplementationOnce(() => {
+      throw new SyntaxError('bad json');
+    });
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'vib-throws',
+            channel: 'VIBER',
+            templateData: { messageBody: 'invalid json', accountDetails: {} },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+    spy.mockRestore();
+  });
+
+  it('VIBER preview: accountDetails JSON.parse throws falls back to empty object', async () => {
+    const realParse = JSON.parse;
+    let callCount = 0;
+    const spy = jest.spyOn(JSON, 'parse').mockImplementation((...args) => {
+      callCount += 1;
+      // Let messageBody parse succeed, fail on accountDetails parse (second call)
+      if (callCount === 2) throw new SyntaxError('bad acct json');
+      return realParse.apply(JSON, args);
+    });
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'vib-acct-throws',
+            channel: 'VIBER',
+            templateData: {
+              messageBody: JSON.stringify({ content: { text: 'ok' } }),
+              accountDetails: 'bad-json',
+            },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+    spy.mockRestore();
+  });
+
+  it('VIBER preview with no content wrapper uses parsedBody directly', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'vib-nokey',
+            channel: 'VIBER',
+            templateData: {
+              messageBody: JSON.stringify({ text: 'Flat text', image: { url: 'http://img' } }),
+            },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+  });
+
+  // ── extractContentForPreview — RCS ───────────────────────────────────────────
+
+  it('RCS preview with IMAGE media type renders without error', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'rcs-img',
+            channel: 'RCS',
+            templateData: {
+              rcsContent: {
+                cardContent: [{
+                  title: 'RCS title',
+                  description: 'RCS desc',
+                  media: { mediaType: 'IMAGE', mediaUrl: 'http://rcs-img.png' },
+                  suggestions: [{ text: 'Reply1' }],
+                }],
+              },
+            },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+    expect(screen.getByTestId('test-and-preview-mock')).toHaveAttribute('data-channel', 'RCS');
+  });
+
+  it('RCS preview with VIDEO media type includes rcsThumbnailSrc', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'rcs-vid',
+            channel: 'RCS',
+            templateData: {
+              rcsContent: {
+                cardContent: [{
+                  media: { mediaType: 'VIDEO', mediaUrl: 'http://vid.mp4', thumbnailUrl: 'http://thumb.jpg' },
+                  suggestions: [],
+                }],
+              },
+            },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+  });
+
+  it('RCS preview with no rcsContent uses empty fallbacks', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{ contentId: 'rcs-empty', channel: 'RCS', templateData: {} }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+  });
+
+  // ── extractContentForPreview — WEBPUSH ───────────────────────────────────────
+
+  it('WEBPUSH preview passes messageContent.content to slidebox', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'wp-1',
+            channel: 'WEBPUSH',
+            templateData: {
+              messageContent: {
+                content: { title: 'WP title', message: 'WP message', icon: 'http://icon.png' },
+              },
+            },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+    expect(screen.getByTestId('test-and-preview-mock')).toHaveAttribute('data-channel', 'WEBPUSH');
+  });
+
+  it('WEBPUSH preview with missing messageContent uses empty object fallback', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{ contentId: 'wp-empty', channel: 'WEBPUSH', templateData: {} }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+  });
+
+  // ── extractContentForPreview — ZALO ──────────────────────────────────────────
+
+  it('ZALO preview uses templateConfigs.template as templatePreviewUrl', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'zalo-1',
+            channel: 'ZALO',
+            templateData: {
+              templateConfigs: { template: 'http://zalo-template.json' },
+              templatePreviewUrl: 'http://fallback.json',
+            },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+    expect(screen.getByTestId('test-and-preview-mock')).toHaveAttribute('data-channel', 'ZALO');
+  });
+
+  it('ZALO preview falls back to templatePreviewUrl when templateConfigs.template is absent', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'zalo-2',
+            channel: 'ZALO',
+            templateData: { templatePreviewUrl: 'http://preview.json' },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+  });
+
+  // ── extractContentForPreview — fallback (Facebook) ───────────────────────────
+
+  it('fallback: unmapped channel (not in any extractContentForPreview branch) passes templateData directly', async () => {
+    // 'TWITTER' is not in PREVIEW_TEST_UNSUPPORTED_CHANNELS → "Preview and Test" shows.
+    // 'TWITTER' also doesn't match any if-branch in extractContentForPreview → hits line 352 fallback.
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'fallback-twitter',
+            channel: 'TWITTER',
+            templateData: { messageBody: 'Fallback content' },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+  });
+
+  // ── extractContentForPreview — SMS via messageBody ────────────────────────────
+
+  it('SMS preview uses messageBody when smsBody is absent', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'sms-mb',
+            channel: 'SMS',
+            templateData: { messageBody: 'From messageBody' },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+    expect(screen.getByTestId('test-and-preview-mock')).toHaveAttribute('data-channel', 'SMS');
+  });
+
+  // ── getCardType — INAPP and WECHAT return undefined ─────────────────────────
+
+  it('INAPP content card renders without crash (getCardType returns undefined for INAPP)', () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'inapp-card',
+            channel: 'INAPP',
+            templateData: { androidContent: { title: 'InApp Card Title' } },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    expect(screen.getByLabelText('Show more content options icon')).toBeInTheDocument();
+  });
+
+  it('WECHAT content card renders without crash (getCardType returns undefined for WECHAT)', () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'wechat-card',
+            channel: 'WECHAT',
+            templateData: { messageBody: 'WeChat message' },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    expect(screen.getByLabelText('Show more content options icon')).toBeInTheDocument();
+  });
+
+  // ── is_drag_drop → BEE editor ────────────────────────────────────────────────
+
+  it('edit content with is_drag_drop=1 passes BEE as editor to CreativesContainer', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'bee-item',
+            channel: 'EMAIL',
+            templateData: { emailSubject: 'BEE subject', is_drag_drop: 1 },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Edit'));
+    await waitFor(() => expect(screen.getByTestId('creatives-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+  });
+
+  it('edit content with is_drag_drop=true also passes BEE editor', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'bee-bool',
+            channel: 'EMAIL',
+            templateData: { emailSubject: 'BEE bool', is_drag_drop: true },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Edit'));
+    await waitFor(() => expect(screen.getByTestId('creatives-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+  });
+
+  // ── WEBPUSH edit: messageContent.content extraction ──────────────────────────
+
+  it('edit WEBPUSH item extracts messageContent.content for CreativesContainer templateData', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'wp-edit',
+            // templateData has a `channel` field so the WEBPUSH branch in the edit IIFE fires
+            channel: 'WEBPUSH',
+            templateData: {
+              channel: 'WEBPUSH',
+              messageContent: {
+                content: { title: 'WP Edit Title', message: 'WP Edit Msg' },
+              },
+            },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Edit'));
+    await waitFor(() => expect(screen.getByTestId('creatives-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+    expect(screen.getByTestId('creatives-mock')).toHaveAttribute('data-creatives-mode', 'edit');
+  });
+
+  // ── FTP channel filtered from dropdown ───────────────────────────────────────
+
+  it('FTP channel is filtered out of the channel dropdown', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{ contentItems: [] }}
+        onChange={jest.fn()}
+        channels={[
+          {
+            value: 'SMS', label: 'SMS', iconType: 'sms', isActive: true, paneKey: 'sms', channelProp: 'sms',
+          },
+          {
+            value: 'ftp', label: 'FTP', iconType: 'sms', isActive: true, paneKey: 'ftp', channelProp: 'ftp',
+          },
+        ]}
+      />,
+    );
+    await userEvent.click(screen.getByRole('button', { name: /add creative/i }));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    expect(within(screen.getByRole('menu')).getByText('SMS')).toBeInTheDocument();
+    expect(within(screen.getByRole('menu')).queryByText('FTP')).not.toBeInTheDocument();
+  });
+
+  // ── getSenderDetailsDisplay returns null for other channels ──────────────────
+
+  it('WHATSAPP content card has no sender details row (getSenderDetailsDisplay returns null)', () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'wa-no-sender',
+            channel: 'WHATSAPP',
+            templateData: { messageBody: 'WA msg', templateConfigs: {} },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    expect(screen.queryByText(/sender ID/i)).not.toBeInTheDocument();
+  });
+
+  // ── incentive coupons/points keys are skipped ────────────────────────────────
+
+  it('selecting a coupons incentive type from the menu is silently skipped', async () => {
+    const onChange = jest.fn();
+    renderStep(
+      <ChannelSelectionStep
+        value={{ contentItems: [] }}
+        onChange={onChange}
+        channels={CHANNELS}
+        incentivesData={{
+          enabled: true,
+          types: [
+            { value: 'coupons', label: 'Coupons', isActive: true },
+            { value: 'badges', label: 'Badges', isActive: true },
+          ],
+        }}
+      />,
+    );
+    // Only non-coupons/non-points items appear in the dropdown; selecting coupons is impossible
+    // through the rendered dropdown since it's filtered. Verify badges still works.
+    await userEvent.click(screen.getByRole('button', { name: /^add incentive$/i }));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    expect(within(screen.getByRole('menu')).queryByText('Coupons')).not.toBeInTheDocument();
+    expect(within(screen.getByRole('menu')).getByText('Badges')).toBeInTheDocument();
+  });
+
+  it('incentive dropdown on card: selecting points type key is skipped (filtered from menu)', async () => {
+    const onChange = jest.fn();
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{ contentId: 'c1', channel: 'SMS', templateData: {} }],
+        }}
+        onChange={onChange}
+        channels={CHANNELS}
+        incentivesData={{
+          enabled: true,
+          types: [
+            { value: 'points', label: 'Points', isActive: true },
+            { value: 'promotions', label: 'Promotions', isActive: true },
+          ],
+        }}
+      />,
+    );
+    const addIncentiveLinks = screen.getAllByRole('button', { name: /add incentive/i });
+    await userEvent.click(addIncentiveLinks[addIncentiveLinks.length - 1]);
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    expect(within(screen.getByRole('menu')).queryByText('Points')).not.toBeInTheDocument();
+    expect(within(screen.getByRole('menu')).getByText('Promotions')).toBeInTheDocument();
+  });
+
+  // ── Viber getContentPreview with object messageBody (non-string) ──────────────
+
+  it('Viber card preview text uses parsed content.text when messageBody is a non-string object', () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'vib-obj-preview',
+            channel: 'VIBER',
+            templateData: { messageBody: { content: { text: 'Obj viber text for preview' } } },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    // getContentPreview for VIBER parses the object messageBody to extract content.text
+    expect(screen.getByLabelText('Show more content options icon')).toBeInTheDocument();
+  });
+
+  // ── selectedChannelConfig derived from CHANNELS ───────────────────────────────
+
+  it('opening creatives for EMAIL derives correct channelProp from CHANNELS', async () => {
+    const onChange = jest.fn();
+    renderStep(
+      <ChannelSelectionStep
+        value={{ contentItems: [] }}
+        onChange={onChange}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByRole('button', { name: /add creative/i }));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Email'));
+    await waitFor(() => expect(screen.getByTestId('creatives-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+    expect(screen.getByTestId('creatives-mock')).toHaveAttribute('data-creatives-channel', 'email');
+  });
+
+  it('opening creatives for MOBILEPUSH derives correct channelProp', async () => {
+    const onChange = jest.fn();
+    renderStep(
+      <ChannelSelectionStep
+        value={{ contentItems: [] }}
+        onChange={onChange}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByRole('button', { name: /add creative/i }));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Mobile push'));
+    await waitFor(() => expect(screen.getByTestId('creatives-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+    expect(screen.getByTestId('creatives-mock')).toHaveAttribute('data-creatives-channel', 'mobilepush');
+  });
+
+  // ── messageMetaConfigId from templateId ──────────────────────────────────────
+
+  it('preview passes messageMetaConfigId from templateConfigs.templateId', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'sms-tid',
+            channel: 'SMS',
+            templateData: {
+              smsBody: 'Body',
+              templateConfigs: { templateId: 'tmpl-42' },
+            },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Preview and Test'));
+    await waitFor(() => expect(screen.getByTestId('test-and-preview-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+  });
+
+  // ── handleChannelsVisibleChange / handleIncentivesVisibleChange ───────────────
+
+  it('closing the channel dropdown via onVisibleChange(false) hides the overlay', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{ contentItems: [] }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByRole('button', { name: /add creative/i }));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    // Click outside to close
+    await userEvent.keyboard('{Escape}');
+    // After close the menu should not be visible (or at least no crash)
+    expect(screen.getByRole('button', { name: /add creative/i })).toBeInTheDocument();
+  });
+
+  // ── availableIncentiveTypes null/empty guard ─────────────────────────────────
+
+  it('incentivesData with null types does not crash and shows no incentive button', () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{ contentItems: [] }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+        incentivesData={{ enabled: true, types: null }}
+      />,
+    );
+    expect(screen.queryByRole('button', { name: /add incentive/i })).not.toBeInTheDocument();
+  });
+
+  it('incentivesData with empty types array returns null from renderIncentiveDropdownOverlay', () => {
+    // Exercises line 471: availableIncentiveTypes?.length === 0 → return null
+    renderStep(
+      <ChannelSelectionStep
+        value={{ contentItems: [] }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+        incentivesData={{ enabled: true, types: [] }}
+      />,
+    );
+    expect(screen.queryByRole('button', { name: /add incentive/i })).not.toBeInTheDocument();
+  });
+
+  // ── config.context.ouId passed to TestAndPreview ──────────────────────────────
+
+  it('config prop is accepted without crash', () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{ contentItems: [] }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+        config={{ context: { ouId: 'ou-123' } }}
+      />,
+    );
+    expect(screen.getByRole('button', { name: /add creative/i })).toBeInTheDocument();
+  });
 });