@capillarytech/creatives-library 8.0.355 → 8.0.356

package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/index.test.js

@@ -119,6 +119,21 @@ jest.mock('../../UnifiedPreview/ZaloPreviewContent', () => ({
   ),
 }));
 
+jest.mock('../../UnifiedPreview/WebPushPreviewContent', () => ({
+  __esModule: true,
+  default: (props) => (
+    <div data-testid="webpush-preview">
+      <div data-testid="webpush-title">{props.notificationTitle}</div>
+      <div data-testid="webpush-body">{props.notificationBody}</div>
+      <div data-testid="webpush-image">{props.imageSrc}</div>
+      <div data-testid="webpush-icon">{props.brandIconSrc}</div>
+      <div data-testid="webpush-url">{props.url}</div>
+      <div data-testid="webpush-buttons">{JSON.stringify(props.buttons)}</div>
+      <div data-testid="webpush-fullscreen">{props.isFullscreenOpen ? 'true' : 'false'}</div>
+    </div>
+  ),
+}));
+
 jest.mock('../../UnifiedPreview/PreviewHeader', () => ({
   __esModule: true,
   default: (props) => (
@@ -976,4 +991,244 @@ describe('UnifiedPreview', () => {
       consoleSpy.mockRestore();
     });
   });
+
+  describe('Channel Routing - WEBPUSH', () => {
+    it('should render WebPushPreviewContent for WEBPUSH channel with object content', () => {
+      const content = {
+        content: {
+          title: 'Hello World',
+          message: 'This is a notification',
+          iconImageUrl: 'https://example.com/icon.png',
+          cta: { actionLink: 'https://example.com' },
+          expandableDetails: {
+            media: [{ url: 'https://example.com/image.jpg' }],
+            ctas: [{ title: 'Click me', actionLink: 'https://example.com/btn', type: 'EXTERNAL_URL' }],
+          },
+        },
+      };
+      const props = { ...defaultProps, channel: CHANNELS.WEBPUSH, content };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('webpush-preview')).toBeTruthy();
+      expect(screen.getByTestId('webpush-title')).toHaveTextContent('Hello World');
+      expect(screen.getByTestId('webpush-body')).toHaveTextContent('This is a notification');
+      expect(screen.getByTestId('webpush-icon')).toHaveTextContent('https://example.com/icon.png');
+      expect(screen.getByTestId('webpush-url')).toHaveTextContent('https://example.com');
+    });
+
+    it('should render WebPushPreviewContent for WEBPUSH channel with JSON string content', () => {
+      const contentObj = {
+        content: {
+          title: 'Push Title',
+          message: 'Push message body',
+          iconImageUrl: 'https://example.com/brand.png',
+        },
+      };
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        content: JSON.stringify(contentObj),
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('webpush-preview')).toBeTruthy();
+      expect(screen.getByTestId('webpush-title')).toHaveTextContent('Push Title');
+      expect(screen.getByTestId('webpush-body')).toHaveTextContent('Push message body');
+      expect(screen.getByTestId('webpush-icon')).toHaveTextContent('https://example.com/brand.png');
+    });
+
+    it('should fallback to empty object when JSON parse fails', () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        content: 'INVALID_JSON{{{{',
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('webpush-preview')).toBeTruthy();
+      expect(screen.getByTestId('webpush-title')).toHaveTextContent('');
+      expect(screen.getByTestId('webpush-body')).toHaveTextContent('');
+    });
+
+    it('should fallback to empty object when content is null', () => {
+      const props = { ...defaultProps, channel: CHANNELS.WEBPUSH, content: null };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('webpush-preview')).toBeTruthy();
+      expect(screen.getByTestId('webpush-title')).toHaveTextContent('');
+    });
+
+    it('should extract imageSrc from expandableDetails.media[0].url', () => {
+      const content = {
+        content: {
+          title: 'T',
+          message: 'M',
+          expandableDetails: {
+            media: [{ url: 'https://example.com/media.jpg' }],
+            ctas: [],
+          },
+        },
+      };
+      const props = { ...defaultProps, channel: CHANNELS.WEBPUSH, content };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('webpush-image')).toHaveTextContent('https://example.com/media.jpg');
+    });
+
+    it('should pass empty imageSrc when media array is empty', () => {
+      const content = {
+        content: {
+          title: 'T',
+          message: 'M',
+          expandableDetails: { media: [], ctas: [] },
+        },
+      };
+      const props = { ...defaultProps, channel: CHANNELS.WEBPUSH, content };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('webpush-image')).toHaveTextContent('');
+    });
+
+    it('should map CTA buttons from expandableDetails.ctas', () => {
+      const content = {
+        content: {
+          title: 'T',
+          message: 'M',
+          expandableDetails: {
+            media: [],
+            ctas: [
+              { title: 'Btn1', actionLink: 'https://a.com', type: 'EXTERNAL_URL' },
+              { title: 'Btn2', actionLink: 'https://b.com', type: 'SITE_URL' },
+            ],
+          },
+        },
+      };
+      const props = { ...defaultProps, channel: CHANNELS.WEBPUSH, content };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      const buttons = JSON.parse(screen.getByTestId('webpush-buttons').textContent);
+      expect(buttons).toHaveLength(2);
+      expect(buttons[0]).toEqual({ text: 'Btn1', url: 'https://a.com', type: 'EXTERNAL_URL' });
+      expect(buttons[1]).toEqual({ text: 'Btn2', url: 'https://b.com', type: 'SITE_URL' });
+    });
+
+    it('should pass empty buttons array when no ctas', () => {
+      const content = { content: { title: 'T', message: 'M' } };
+      const props = { ...defaultProps, channel: CHANNELS.WEBPUSH, content };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      const buttons = JSON.parse(screen.getByTestId('webpush-buttons').textContent);
+      expect(buttons).toEqual([]);
+    });
+
+    it('should NOT show device toggle for WEBPUSH channel', () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        showDeviceToggle: true,
+        showHeader: true,
+        selectedCustomer: { name: 'Alice' },
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      // PreviewHeader is mocked - verify it receives showDeviceToggle=false for WEBPUSH
+      const header = screen.getByTestId('preview-header');
+      expect(header).toBeTruthy();
+    });
+
+    it('should include WEBPUSH in supported channels list', () => {
+      const props = { ...defaultProps, channel: CHANNELS.WEBPUSH, content: {} };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      // WEBPUSH should render WebPushPreviewContent, not the unsupported placeholder
+      expect(screen.getByTestId('webpush-preview')).toBeTruthy();
+      expect(screen.queryByText(/Coming Soon/)).toBeNull();
+    });
+
+    it('should pass isUpdating to WebPushPreviewContent in loading state', () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        content: { content: { title: 'T', message: 'M' } },
+        isUpdating: true,
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      // When isUpdating, component shows loading spinner, not WebPushPreviewContent
+      expect(screen.queryByTestId('webpush-preview')).toBeNull();
+    });
+
+    it('should pass error to WebPushPreviewContent in error state', () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        content: { content: { title: 'T', message: 'M' } },
+        error: 'Network error',
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      // When error, component shows error state, not WebPushPreviewContent
+      expect(screen.queryByTestId('webpush-preview')).toBeNull();
+    });
+  });
 });

package/v2Components/CommonTestAndPreview/tests/constants.test.js

@@ -179,10 +179,11 @@ describe('CommonTestAndPreview Constants', () => {
       expect(CHANNELS.MOBILEPUSH).toBe('MOBILEPUSH');
       expect(CHANNELS.VIBER).toBe('VIBER');
       expect(CHANNELS.ZALO).toBe('ZALO');
+      expect(CHANNELS.WEBPUSH).toBe('WEBPUSH');
     });
 
     it('should have all required channel keys', () => {
-      const expectedChannels = ['EMAIL', 'SMS', 'RCS', 'WHATSAPP', 'INAPP', 'MOBILEPUSH', 'VIBER', 'ZALO'];
+      const expectedChannels = ['EMAIL', 'SMS', 'RCS', 'WHATSAPP', 'INAPP', 'MOBILEPUSH', 'VIBER', 'ZALO', 'WEBPUSH'];
       expect(Object.keys(CHANNELS)).toEqual(expect.arrayContaining(expectedChannels));
       expect(Object.keys(CHANNELS).length).toBe(expectedChannels.length);
     });

package/v2Components/CommonTestAndPreview/tests/index.test.js

@@ -1174,6 +1174,50 @@ describe('CommonTestAndPreview', () => {
         expect(screen.getByTestId('preview-section')).toBeTruthy();
       });
     });
+
+    it('should handle WEBPUSH channel', async () => {
+      const webpushContent = {
+        content: { title: 'Web Push', message: 'Hello from web push' },
+        accountId: 'acc-001',
+      };
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        content: webpushContent,
+      };
+
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('left-panel')).toBeTruthy();
+        expect(screen.getByTestId('preview-section')).toBeTruthy();
+      });
+    });
+
+    it('should treat WEBPUSH content as object (same branch as WHATSAPP)', async () => {
+      // The WEBPUSH channel uses the same contentObj branch as WHATSAPP (JSON string or object)
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        content: JSON.stringify({
+          content: { title: 'Stringified', message: 'Content' },
+        }),
+      };
+
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('preview-section')).toBeTruthy();
+      });
+    });
   });
 
   describe('Device Initialization', () => {
@@ -2629,6 +2673,156 @@ describe('CommonTestAndPreview', () => {
         });
       });
     });
+
+    describe('preparePreviewPayload - WEBPUSH', () => {
+      it('should build WEBPUSH payload with title and message', async () => {
+        const webpushContent = {
+          content: {
+            title: 'Push Title',
+            message: 'Push message body',
+          },
+          accountId: 'acc-123',
+          messageSubject: 'Push Title',
+        };
+        const props = {
+          ...defaultProps,
+          channel: CHANNELS.WEBPUSH,
+          content: JSON.stringify(webpushContent),
+        };
+
+        render(
+          <TestWrapper>
+            <CommonTestAndPreview {...props} />
+          </TestWrapper>
+        );
+
+        await waitFor(() => {
+          expect(screen.getByTestId('left-panel')).toBeTruthy();
+          expect(screen.getByTestId('preview-section')).toBeTruthy();
+        });
+      });
+
+      it('should handle WEBPUSH content with iconImageUrl', async () => {
+        const webpushContent = {
+          content: {
+            title: 'Hello',
+            message: 'World',
+            iconImageUrl: 'https://example.com/icon.png',
+          },
+          accountId: 'acc-123',
+        };
+        const props = {
+          ...defaultProps,
+          channel: CHANNELS.WEBPUSH,
+          content: webpushContent,
+        };
+
+        render(
+          <TestWrapper>
+            <CommonTestAndPreview {...props} />
+          </TestWrapper>
+        );
+
+        await waitFor(() => {
+          expect(screen.getByTestId('preview-section')).toBeTruthy();
+        });
+      });
+
+      it('should handle WEBPUSH content with cta', async () => {
+        const webpushContent = {
+          content: {
+            title: 'Hello',
+            message: 'World',
+            cta: { type: 'EXTERNAL_URL', actionLink: 'https://example.com' },
+          },
+          accountId: 'acc-123',
+        };
+        const props = {
+          ...defaultProps,
+          channel: CHANNELS.WEBPUSH,
+          content: webpushContent,
+        };
+
+        render(
+          <TestWrapper>
+            <CommonTestAndPreview {...props} />
+          </TestWrapper>
+        );
+
+        await waitFor(() => {
+          expect(screen.getByTestId('preview-section')).toBeTruthy();
+        });
+      });
+
+      it('should handle WEBPUSH content with expandableDetails', async () => {
+        const webpushContent = {
+          content: {
+            title: 'Hello',
+            message: 'World',
+            expandableDetails: {
+              media: [{ url: 'https://example.com/image.jpg', type: 'IMAGE' }],
+              ctas: [{ title: 'Click', actionLink: 'https://example.com', type: 'EXTERNAL_URL' }],
+            },
+          },
+          accountId: 'acc-123',
+        };
+        const props = {
+          ...defaultProps,
+          channel: CHANNELS.WEBPUSH,
+          content: webpushContent,
+        };
+
+        render(
+          <TestWrapper>
+            <CommonTestAndPreview {...props} />
+          </TestWrapper>
+        );
+
+        await waitFor(() => {
+          expect(screen.getByTestId('preview-section')).toBeTruthy();
+        });
+      });
+
+      it('should handle WEBPUSH with null formData gracefully', async () => {
+        const props = {
+          ...defaultProps,
+          channel: CHANNELS.WEBPUSH,
+          formData: null,
+          content: null,
+        };
+
+        render(
+          <TestWrapper>
+            <CommonTestAndPreview {...props} />
+          </TestWrapper>
+        );
+
+        await waitFor(() => {
+          expect(screen.getByTestId('preview-section')).toBeTruthy();
+        });
+      });
+
+      it('should handle WEBPUSH channel with object content (non-string)', async () => {
+        const props = {
+          ...defaultProps,
+          channel: CHANNELS.WEBPUSH,
+          content: {
+            content: { title: 'ObjTitle', message: 'ObjMessage' },
+            accountId: 'acc-999',
+          },
+        };
+
+        render(
+          <TestWrapper>
+            <CommonTestAndPreview {...props} />
+          </TestWrapper>
+        );
+
+        await waitFor(() => {
+          expect(screen.getByTestId('preview-section')).toBeTruthy();
+        });
+      });
+    });
   });
 
   describe('Tag Extraction', () => {

package/v2Components/TestAndPreviewSlidebox/index.js

@@ -69,8 +69,8 @@ const TestAndPreviewSlidebox = (props) => {
 
 TestAndPreviewSlidebox.propTypes = {
   // Channel prop - supports all channels
-  channel: PropTypes.oneOf([CHANNELS.EMAIL, CHANNELS.SMS, CHANNELS.RCS, CHANNELS.WHATSAPP, CHANNELS.INAPP, CHANNELS.MOBILEPUSH]),
-  currentChannel: PropTypes.oneOf([CHANNELS.EMAIL, CHANNELS.SMS, CHANNELS.RCS, CHANNELS.WHATSAPP, CHANNELS.INAPP, CHANNELS.MOBILEPUSH]), // Alternative prop name for backward compatibility
+  channel: PropTypes.oneOf([CHANNELS.EMAIL, CHANNELS.SMS, CHANNELS.RCS, CHANNELS.WHATSAPP, CHANNELS.INAPP, CHANNELS.MOBILEPUSH, CHANNELS.VIBER, CHANNELS.ZALO, CHANNELS.WEBPUSH]),
+  currentChannel: PropTypes.oneOf([CHANNELS.EMAIL, CHANNELS.SMS, CHANNELS.RCS, CHANNELS.WHATSAPP, CHANNELS.INAPP, CHANNELS.MOBILEPUSH, CHANNELS.VIBER, CHANNELS.ZALO, CHANNELS.WEBPUSH]), // Alternative prop name for backward compatibility
   // All original props are passed through
   show: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,

package/v2Containers/App/constants.js

@@ -124,3 +124,6 @@ export const LOYALTY = 'loyalty';
 export const FAILURE = 'FAILURE';
 export const DATE_DISPLAY_FORMAT = 'D MMM YYYY';
 export const TIME_DISPLAY_FORMAT = 'hh:mm A';
+export const EXTERNAL_URL = 'EXTERNAL_URL';
+export const URL = 'URL';
+export const SITE_URL = 'SITE_URL';

package/v2Containers/App/tests/constants.test.js

@@ -0,0 +1,61 @@
+/**
+ * Tests for App container constants
+ *
+ * Covers newly added URL type constants: EXTERNAL_URL, URL, SITE_URL
+ */
+
+import {
+  EXTERNAL_URL,
+  URL,
+  SITE_URL,
+  LOYALTY,
+  FAILURE,
+  DATE_DISPLAY_FORMAT,
+  TIME_DISPLAY_FORMAT,
+} from '../constants';
+
+describe('App constants', () => {
+  describe('URL type constants', () => {
+    it('should export EXTERNAL_URL with correct value', () => {
+      expect(EXTERNAL_URL).toBe('EXTERNAL_URL');
+    });
+
+    it('should export URL with correct value', () => {
+      expect(URL).toBe('URL');
+    });
+
+    it('should export SITE_URL with correct value', () => {
+      expect(SITE_URL).toBe('SITE_URL');
+    });
+
+    it('should have distinct values for all three URL constants', () => {
+      expect(EXTERNAL_URL).not.toBe(URL);
+      expect(EXTERNAL_URL).not.toBe(SITE_URL);
+      expect(URL).not.toBe(SITE_URL);
+    });
+
+    it('should be strings', () => {
+      expect(typeof EXTERNAL_URL).toBe('string');
+      expect(typeof URL).toBe('string');
+      expect(typeof SITE_URL).toBe('string');
+    });
+  });
+
+  describe('Other existing constants still exported correctly', () => {
+    it('should export LOYALTY', () => {
+      expect(LOYALTY).toBe('loyalty');
+    });
+
+    it('should export FAILURE', () => {
+      expect(FAILURE).toBe('FAILURE');
+    });
+
+    it('should export DATE_DISPLAY_FORMAT', () => {
+      expect(DATE_DISPLAY_FORMAT).toBe('D MMM YYYY');
+    });
+
+    it('should export TIME_DISPLAY_FORMAT', () => {
+      expect(TIME_DISPLAY_FORMAT).toBe('hh:mm A');
+    });
+  });
+});

package/v2Containers/Templates/index.js

@@ -104,6 +104,9 @@ import {
   VIBER as VIBER_CHANNEL,
   FACEBOOK as FACEBOOK_CHANNEL,
   CREATE,
+  EXTERNAL_URL,
+  URL,
+  SITE_URL,
 } from '../App/constants';
 import {MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES , ACCOUNT_MAPPING_ON_CHANNEL, noFilteredWhatsappZaloTemplatesTitle, noFilteredWhatsappZaloTemplatesDesc, noApprovedWhatsappZaloTemplatesTitle, noApprovedWhatsappTemplatesDesc, zaloDescIllustration, noApprovedRcsTemplatesTitle, noApprovedRcsTemplatesDesc, ARCHIVE_STATUS_ACTIVE, ARCHIVE_STATUS_ARCHIVED, ARCHIVE_REFRESH_TYPE_ARCHIVE, ARCHIVE_REFRESH_TYPE_UNARCHIVE} from './constants';
 import { COPY_OF, EMBEDDED } from '../../constants/unified';
@@ -1399,6 +1402,73 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         };
       }
 
+      case WEBPUSH: {
+        // WebPush content is stored in creatives format (brandIcon, onClickAction, ctas)
+        // Must be transformed to campaign/test-message format matching getTemplateContent() in WebPush/Create/index.js
+        const webpushContent = get(baseContent, 'content.webpush', {});
+        const {
+          title = '',
+          message = '',
+          brandIcon,
+          iconImageUrl: existingIconImageUrl,
+          onClickAction,
+          cta: existingCta,
+          image,
+          ctas: rawCtas,
+          expandableDetails: existingExpandable,
+        } = webpushContent;
+        const accountId = get(template, 'definition.accountId', null);
+        const templateName = template?.name || '';
+
+        // iconImageUrl stored as brandIcon in creatives format
+        const iconImageUrl = brandIcon || existingIconImageUrl || undefined;
+
+        // cta stored as onClickAction in creatives format (type: URL|SITE_URL, url)
+        // or already as cta in campaign format (type: EXTERNAL_URL|SITE_URL, actionLink)
+        let cta = null;
+        if (onClickAction) {
+          const ctaType = onClickAction.type === URL ? EXTERNAL_URL : (onClickAction.type || SITE_URL);
+          cta = { type: ctaType, actionLink: onClickAction.url || '' };
+        } else if (existingCta) {
+          cta = { type: existingCta.type || EXTERNAL_URL, actionLink: existingCta.actionLink || '' };
+        }
+
+        // expandableDetails: image → media[], ctas[] → mapped ctas
+        let expandableDetails = null;
+        const hasImage = !!image;
+        const hasCtas = Array.isArray(rawCtas) && rawCtas.length > 0;
+        if (hasImage || hasCtas) {
+          expandableDetails = {
+            media: hasImage ? [{ url: image, type: IMAGE }] : [],
+            ctas: hasCtas ? rawCtas.map((ctaItem) => ({
+              type: ctaItem?.type === URL ? EXTERNAL_URL : (ctaItem?.type || EXTERNAL_URL),
+              action: ctaItem?.action || '',
+              title: ctaItem?.actionText || ctaItem?.title || '',
+              actionLink: ctaItem?.actionLink || '',
+            })) : [],
+          };
+        } else if (existingExpandable) {
+          expandableDetails = {
+            media: existingExpandable?.media || [],
+            ctas: existingExpandable?.ctas || [],
+          };
+        }
+
+        return {
+          channel: WEBPUSH,
+          accountId,
+          content: {
+            title,
+            message,
+            ...(iconImageUrl ? { iconImageUrl } : {}),
+            ...(cta ? { cta } : {}),
+            ...(expandableDetails ? { expandableDetails } : {}),
+          },
+          messageSubject: templateName || title,
+          offers: [],
+        };
+      }
+
       default:
         console.warn(`Unsupported channel for content extraction: ${channelUpper}`);
         return null;
@@ -1411,7 +1481,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
    * @returns {Boolean} - True if channel supports Test and Preview
    */
   isTestAndPreviewSupported = () => {
-    const supportedChannels = [EMAIL, SMS, INAPP, MOBILE_PUSH, VIBER, ZALO];
+    const supportedChannels = [EMAIL, SMS, INAPP, MOBILE_PUSH, VIBER, ZALO, WEBPUSH];
     return supportedChannels.includes(this.state.channel.toUpperCase());
   }
 
@@ -1971,7 +2041,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           // Show preview icon only for channels that don't support Test and Preview
           (() => {
             // Channels that have Test and Preview integrated
-            const testAndPreviewChannels = [EMAIL, SMS, WHATSAPP, RCS, INAPP, MOBILE_PUSH, VIBER, ZALO];
+            const testAndPreviewChannels = [EMAIL, SMS, WHATSAPP, RCS, INAPP, MOBILE_PUSH, VIBER, ZALO, WEBPUSH];
             const isTestAndPreviewSupported = testAndPreviewChannels.includes(currentChannel.toUpperCase());
 
             // Don't show preview icon if channel supports Test and Preview

package/v2Containers/Templates/sagas.js

@@ -6,7 +6,7 @@ import { CapNotification } from '@capillarytech/cap-ui-library';
 // import { schema, normalize } from 'normalizr';
 import * as Api from '../../services/api';
 import * as types from './constants';
-import { saveCdnConfigs, removeAllCdnLocalStorageItems, initCdnConfigFromEnv } from '../../utils/cdnTransformation';
+import { saveCdnConfigs, removeAllCdnLocalStorageItems } from '../../utils/cdnTransformation';
 import { COPY_OF } from '../../constants/unified';
 import { ZALO_TEMPLATE_INFO_REQUEST } from '../Zalo/constants';
 import { getTemplateInfoById } from '../Zalo/saga';
@@ -107,11 +107,6 @@ export function* getOrgLevelCampaignSettings() {
 
 export function* getCdnTransformationConfig() {
   try {
-    // VAPT CAP-183204: prefer env vars injected via window.APP_ENV — avoids the
-    // API response that leaked CDN/S3 infrastructure details. Fallback to API
-    // keeps clusters that haven't received the env vars yet working during rollout.
-    if (initCdnConfigFromEnv()) return;
-
     const res = yield call(Api.getCdnTransformationConfig);
     if (res?.success && res?.status?.code === 200) {
       const cdnConfigs = res?.response;