@capillarytech/creatives-library 8.0.359-alpha.0 → 8.0.360-alpha.0

package/v2Containers/Templates/tests/webpush.test.js

@@ -0,0 +1,375 @@
+/**
+ * Tests for Templates container - WEBPUSH channel additions
+ *
+ * Covers:
+ * - extractTemplateContentForPreview for WEBPUSH channel
+ * - isTestAndPreviewSupported with WEBPUSH channel
+ */
+
+import React from 'react';
+import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
+import { Templates } from '../index';
+
+jest.mock('../../CreativesContainer', () => ({
+  __esModule: true,
+  default: (props) => (
+    <div className="creatives-container-mock" {...props}>
+      CreativesContainer
+    </div>
+  ),
+}));
+
+// Helper: build a valid template for WEBPUSH
+// extractTemplateContentForPreview reads:
+//   - template.versions.base.content.webpush  → webpushContent
+//   - template.definition.accountId           → accountId
+//   - template.name                            → templateName
+const makeTemplate = (webpush = {}, extra = {}) => ({
+  name: 'My Template',
+  definition: { accountId: 'acc-123' },
+  versions: {
+    base: {
+      content: { webpush },
+    },
+  },
+  ...extra,
+});
+
+describe('Templates - WEBPUSH channel', () => {
+  const mockActions = {
+    getWeCrmAccounts: jest.fn(),
+    setChannelAccount: jest.fn(),
+    getAllTemplates: jest.fn(),
+    getUserList: jest.fn(),
+    getSenderDetails: jest.fn(),
+    resetTemplate: jest.fn(),
+    setArchivedMode: jest.fn(),
+    clearTemplateSelection: jest.fn(),
+    toggleTemplateSelection: jest.fn(),
+  };
+
+  const baseProps = {
+    route: { name: 'webpush' },
+    Templates: { templates: [] },
+    actions: mockActions,
+    location: { pathname: '/webpush', query: {}, search: '' },
+    EmailCreate: { duplicateTemplateInProgress: false },
+    isFullMode: false,
+    intl: { formatMessage: jest.fn((msg) => msg.defaultMessage || '') },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const renderComponent = (channel = 'webpush') => {
+    const props = { ...baseProps, route: { name: channel } };
+    return shallowWithIntl(<Templates {...props} />);
+  };
+
+  // ─────────────────────────────────────────────────────────────────────────
+  describe('isTestAndPreviewSupported', () => {
+    it('should return true for WEBPUSH channel', () => {
+      const component = renderComponent('webpush');
+      component.setState({ channel: 'webpush' });
+      expect(component.instance().isTestAndPreviewSupported()).toBe(true);
+    });
+
+    it('should return true for WEBPUSH in uppercase state', () => {
+      const component = renderComponent('webpush');
+      component.setState({ channel: 'WEBPUSH' });
+      expect(component.instance().isTestAndPreviewSupported()).toBe(true);
+    });
+
+    it('should return true for EMAIL channel', () => {
+      const component = renderComponent('webpush');
+      component.setState({ channel: 'email' });
+      expect(component.instance().isTestAndPreviewSupported()).toBe(true);
+    });
+
+    it('should return true for SMS channel', () => {
+      const component = renderComponent('webpush');
+      component.setState({ channel: 'sms' });
+      expect(component.instance().isTestAndPreviewSupported()).toBe(true);
+    });
+
+    it('should return true for INAPP channel', () => {
+      const component = renderComponent('webpush');
+      component.setState({ channel: 'inapp' });
+      expect(component.instance().isTestAndPreviewSupported()).toBe(true);
+    });
+
+    it('should return true for VIBER channel', () => {
+      const component = renderComponent('webpush');
+      component.setState({ channel: 'viber' });
+      expect(component.instance().isTestAndPreviewSupported()).toBe(true);
+    });
+
+    it('should return true for ZALO channel', () => {
+      const component = renderComponent('webpush');
+      component.setState({ channel: 'zalo' });
+      expect(component.instance().isTestAndPreviewSupported()).toBe(true);
+    });
+
+    it('should return false for WHATSAPP channel', () => {
+      const component = renderComponent('webpush');
+      component.setState({ channel: 'whatsapp' });
+      expect(component.instance().isTestAndPreviewSupported()).toBe(false);
+    });
+
+    it('should return false for RCS channel', () => {
+      const component = renderComponent('webpush');
+      component.setState({ channel: 'rcs' });
+      expect(component.instance().isTestAndPreviewSupported()).toBe(false);
+    });
+  });
+
+  // ─────────────────────────────────────────────────────────────────────────
+  describe('extractTemplateContentForPreview - WEBPUSH channel', () => {
+    it('should return null when template has no versions.base', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      const component = renderComponent('webpush');
+      const result = component.instance().extractTemplateContentForPreview(
+        { name: 'T', definition: {} },
+        'WEBPUSH'
+      );
+      expect(result).toBeNull();
+      consoleSpy.mockRestore();
+    });
+
+    it('should extract title and message from versions.base.content.webpush', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({ title: 'Push Title', message: 'Push body' });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result).toBeDefined();
+      expect(result.channel).toBe('WEBPUSH');
+      expect(result.accountId).toBe('acc-123');
+      expect(result.content.title).toBe('Push Title');
+      expect(result.content.message).toBe('Push body');
+      expect(result.messageSubject).toBe('My Template');
+      expect(result.offers).toEqual([]);
+    });
+
+    it('should fall back to title for messageSubject when template name is empty', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({ title: 'Title Only', message: 'M' }, { name: '' });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.messageSubject).toBe('Title Only');
+    });
+
+    it('should extract brandIcon as iconImageUrl', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        brandIcon: 'https://example.com/brand.png',
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.iconImageUrl).toBe('https://example.com/brand.png');
+    });
+
+    it('should use iconImageUrl field when brandIcon is absent', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        iconImageUrl: 'https://example.com/icon.png',
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.iconImageUrl).toBe('https://example.com/icon.png');
+    });
+
+    it('should NOT include iconImageUrl when neither brandIcon nor iconImageUrl present', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({ title: 'T', message: 'M' });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.iconImageUrl).toBeUndefined();
+    });
+
+    it('should convert onClickAction type URL to EXTERNAL_URL cta', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        onClickAction: { type: 'URL', url: 'https://example.com' },
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.cta).toEqual({ type: 'EXTERNAL_URL', actionLink: 'https://example.com' });
+    });
+
+    it('should preserve onClickAction type SITE_URL as-is', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        onClickAction: { type: 'SITE_URL', url: 'https://site.com' },
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.cta).toEqual({ type: 'SITE_URL', actionLink: 'https://site.com' });
+    });
+
+    it('should use existingCta when onClickAction is absent', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        cta: { type: 'EXTERNAL_URL', actionLink: 'https://existing.com' },
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.cta).toEqual({ type: 'EXTERNAL_URL', actionLink: 'https://existing.com' });
+    });
+
+    it('should default existingCta type to EXTERNAL_URL when type is missing', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        cta: { actionLink: 'https://example.com' },
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.cta.type).toBe('EXTERNAL_URL');
+    });
+
+    it('should NOT include cta when neither onClickAction nor cta present', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({ title: 'T', message: 'M' });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.cta).toBeUndefined();
+    });
+
+    it('should build expandableDetails from image and ctas', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        image: 'https://example.com/image.jpg',
+        ctas: [{ type: 'URL', actionText: 'Click', actionLink: 'https://a.com', action: '' }],
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.expandableDetails).toBeDefined();
+      expect(result.content.expandableDetails.media).toEqual([
+        { url: 'https://example.com/image.jpg', type: 'IMAGE' },
+      ]);
+      expect(result.content.expandableDetails.ctas[0].title).toBe('Click');
+      expect(result.content.expandableDetails.ctas[0].type).toBe('EXTERNAL_URL');
+    });
+
+    it('should convert CTA type URL → EXTERNAL_URL in expandableDetails.ctas', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        ctas: [{ type: 'URL', actionText: 'Go', actionLink: 'https://x.com' }],
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.expandableDetails.ctas[0].type).toBe('EXTERNAL_URL');
+    });
+
+    it('should keep EXTERNAL_URL type unchanged in expandableDetails.ctas', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        ctas: [{ type: 'EXTERNAL_URL', title: 'Go', actionLink: 'https://x.com' }],
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.expandableDetails.ctas[0].type).toBe('EXTERNAL_URL');
+    });
+
+    it('should build image-only expandableDetails when no ctas', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        image: 'https://example.com/img.jpg',
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.expandableDetails.media).toHaveLength(1);
+      expect(result.content.expandableDetails.ctas).toEqual([]);
+    });
+
+    it('should build ctas-only expandableDetails when no image', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        ctas: [{ type: 'EXTERNAL_URL', actionText: 'Btn', actionLink: 'https://b.com' }],
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.expandableDetails.media).toEqual([]);
+      expect(result.content.expandableDetails.ctas).toHaveLength(1);
+    });
+
+    it('should use existingExpandable when no image and no ctas', () => {
+      const component = renderComponent('webpush');
+      const existingExpandable = {
+        media: [{ url: 'https://example.com/existing.jpg', type: 'IMAGE' }],
+        ctas: [{ title: 'Existing', actionLink: 'https://existing.com', type: 'EXTERNAL_URL' }],
+      };
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        expandableDetails: existingExpandable,
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.expandableDetails).toEqual(existingExpandable);
+    });
+
+    it('should NOT include expandableDetails when none present', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({ title: 'T', message: 'M' });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.expandableDetails).toBeUndefined();
+    });
+
+    it('should handle empty webpush content gracefully', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({}, { name: '' });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result).toBeDefined();
+      expect(result.content.title).toBe('');
+      expect(result.content.message).toBe('');
+    });
+
+    it('should handle missing definition.accountId gracefully (returns null)', () => {
+      const component = renderComponent('webpush');
+      const template = {
+        name: 'T',
+        versions: { base: { content: { webpush: { title: 'T', message: 'M' } } } },
+        // no definition
+      };
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result).toBeDefined();
+      expect(result.accountId).toBeNull();
+    });
+
+    it('should return null for unsupported channel', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      const component = renderComponent('webpush');
+      const template = makeTemplate({ title: 'T', message: 'M' });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'UNSUPPORTED_CHANNEL');
+      expect(result).toBeNull();
+      consoleSpy.mockRestore();
+    });
+  });
+});

package/v2Containers/Viber/index.js

@@ -47,7 +47,6 @@ import {
   NONE,
   mediaRadioOptions,
   buttonRadioOptions,
-  AI_CONTENT_BOT_DISABLED,
   VIBER_CAROUSEL_MAX_BUTTONS,
   VIBER_CAROUSEL_MAX_CARDS,
   VIBER_CAROUSEL_MIN_CARDS,
@@ -719,20 +718,23 @@ export const Viber = (props) => {
   };
 
   const removeCarouselButton = (cardIndex, buttonIndex) => {
-    if (buttonIndex === 0) {
-      return;
-    }
     setCarouselCards((prevCards) => prevCards.map((card, index) => {
       if (index !== cardIndex) {
         return card;
       }
+      const buttons = card?.buttons || [];
+      if (buttons.length <= 1) {
+        return card;
+      }
       return {
         ...card,
-        buttons: (card?.buttons || []).filter((_, idx) => idx !== buttonIndex),
+        buttons: buttons.filter((_, idx) => idx !== buttonIndex),
       };
     }));
   };
 
+  const canRemoveCarouselButton = (card) => (card?.buttons || []).length > 1;
+
   const saveCarouselButton = (cardIndex, buttonIndex) => {
     setCarouselCards((prevCards) => prevCards.map((card, index) => {
       if (index !== cardIndex) {
@@ -876,18 +878,19 @@ export const Viber = (props) => {
                   <CapLabel type="label4" className="viber-carousel-saved-button-text">
                     {button?.title}
                   </CapLabel>
-                  <CapColumn className="button-edit-icon" onClick={() => editCarouselButton(cardIndex, buttonIndex)}>
-                    <CapIcon type="edit" size="s" />
-                  </CapColumn>
-                  {buttonIndex > 0 && (
-                    <CapButton
-                      type="flat"
-                      className="viber-carousel-delete-icon-btn"
-                      onClick={() => removeCarouselButton(cardIndex, buttonIndex)}
-                    >
-                      <CapIcon type="delete" size="s" />
-                    </CapButton>
-                  )}
+                  <CapRow className="viber-carousel-saved-button-actions" align="middle" type="flex">
+                    <CapColumn className="button-edit-icon" onClick={() => editCarouselButton(cardIndex, buttonIndex)}>
+                      <CapIcon type="edit" size="s" />
+                    </CapColumn>
+                    {canRemoveCarouselButton(card) && (
+                      <CapColumn
+                        className="button-edit-icon viber-carousel-delete-icon"
+                        onClick={() => removeCarouselButton(cardIndex, buttonIndex)}
+                      >
+                        <CapIcon type="delete" size="s" />
+                      </CapColumn>
+                    )}
+                  </CapRow>
                 </CapRow>
               ) : (
                 <div className="cta-section">
@@ -949,7 +952,7 @@ export const Viber = (props) => {
                     >
                       {formatMessage(messages.save)}
                     </CapButton>
-                    {buttonIndex > 0 && (
+                    {canRemoveCarouselButton(card) && (
                       <CapButton
                         type="secondary"
                         onClick={() => removeCarouselButton(cardIndex, buttonIndex)}
@@ -1466,6 +1469,9 @@ export const Viber = (props) => {
     if ((isMediaTypeImage || isMediaTypeVideo) && viber?.assetUploading) {
       return true;
     }
+    if (isMediaTypeCarousel && (isCarouselCardCountInvalid || hasInvalidCarouselCard || hasInvalidCarouselButton)) {
+      return true;
+    }
     if (isBtnTypeCta && !isCtaSaved) {
       return true;
     }

package/v2Containers/Viber/index.scss

@@ -239,16 +239,43 @@
   border-radius: $CAP_SPACE_04;
   padding: $CAP_SPACE_12 $CAP_SPACE_16;
   margin-top: $CAP_SPACE_12;
+  min-height: 2.75rem;
+  box-sizing: border-box;
 }
 
 .viber-carousel-saved-button-icon {
   margin-right: $CAP_SPACE_12;
   color: $FONT_COLOR_01;
+  flex-shrink: 0;
+  line-height: 1;
 }
 
 .viber-carousel-saved-button-text {
   flex: 1;
   margin-right: $CAP_SPACE_12;
+  min-width: 0;
+  line-height: 1.25rem;
+}
+
+.viber-carousel-saved-button-actions {
+  display: flex;
+  align-items: center;
+  gap: $CAP_SPACE_24;
+  margin-left: auto;
+  flex-shrink: 0;
+  min-height: 1.5rem;
+
+  .button-edit-icon {
+    margin-left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+  }
+}
+
+.viber-carousel-delete-icon {
+  margin-left: 0;
 }
 
 .viber-carousel-delete-icon-btn {

package/v2Containers/Viber/messages.js

@@ -214,6 +214,10 @@ export default defineMessages({
     id: `${scope}.cancel`,
     defaultMessage: 'Cancel',
   },
+  assetIdMissingError: {
+    id: `${scope}.assetIdMissingError`,
+    defaultMessage: 'Asset upload initiated but no asset ID was returned from the server. Unable to track processing status.',
+  },
   carouselCardsLabel: {
     id: `${scope}.carouselCardsLabel`,
     defaultMessage: 'Carousel cards',
@@ -326,8 +330,4 @@ export default defineMessages({
     id: `${scope}.carouselCardTitleMaxLengthError`,
     defaultMessage: 'Title can not be more than 38 characters',
   },
-  assetIdMissingError: {
-    id: `${scope}.assetIdMissingError`,
-    defaultMessage: 'Asset upload initiated but no asset ID was returned from the server. Unable to track processing status.',
-  },
 });

package/v2Containers/WebPush/Create/index.js

@@ -45,6 +45,8 @@ import {
   ACTION_TYPES,
   NOTIFICATION_TITLE_MAX_LENGTH,
   MESSAGE_MAX_LENGTH,
+  EXTERNAL_URL,
+  SITE_URL,
 } from '../constants';
 import * as actions from '../actions';
 import {
@@ -73,6 +75,9 @@ import {
 import './index.scss';
 import { WEBPUSH } from '../../CreativesContainer/constants';
 import { isAiContentBotDisabled } from '../../../utils/common';
+import TestAndPreviewSlidebox from '../../../v2Components/TestAndPreviewSlidebox';
+import creativesMessages from '../../CreativesContainer/messages';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
 
 // Memoized TagList wrapper components for better performance
 const MemoizedTagList = memo(({
@@ -182,6 +187,7 @@ const WebPushCreate = ({
   const [redirectUrlError, setRedirectUrlError] = useState('');
   const [activeUploadField, setActiveUploadField] = useState(null);
   const [templateIdError, setTemplateIdError] = useState('');
+  const [showTestAndPreviewSlidebox, setShowTestAndPreviewSlidebox] = useState(false);
 
   // Refs
   const titleCountRef = useRef(null);
@@ -569,6 +575,67 @@ const WebPushCreate = ({
     return !(templateNameInvalid || titleValidation || messageValidation);
   };
 
+  const getTemplateContent = useCallback(() => {
+    let cta = null;
+    if (onClickBehaviour === ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL && redirectUrl) {
+      cta = { type: EXTERNAL_URL, actionLink: redirectUrl?.trim() };
+    } else if (onClickBehaviour === ON_CLICK_BEHAVIOUR_OPTIONS.SITE_URL && websiteLink) {
+      cta = { type: SITE_URL, actionLink: websiteLink };
+    }
+
+    const hasImage = mediaType === WEBPUSH_MEDIA_TYPES.IMAGE && imageSrc;
+    const hasCtas = buttons?.length > 0;
+    let expandableDetails = null;
+    if (hasImage || hasCtas) {
+      expandableDetails = {
+        media: hasImage ? [{ url: imageSrc, type: WEBPUSH_MEDIA_TYPES.IMAGE }] : [],
+        ctas: hasCtas ? buttons.map((btn) => ({
+          type: EXTERNAL_URL,
+          action: '',
+          title: btn.text || '',
+          actionLink: btn.url || '',
+        })) : [],
+      };
+    }
+
+    const iconImageUrl = brandIconOption !== BRAND_ICON_OPTIONS.DONT_SHOW && brandIconSrc ? brandIconSrc : undefined;
+
+    return {
+      channel: WEBPUSH,
+      accountId,
+      content: {
+        title: notificationTitle || '',
+        message: message || '',
+        ...(iconImageUrl ? { iconImageUrl } : {}),
+        ...(cta ? { cta } : {}),
+        ...(expandableDetails ? { expandableDetails } : {}),
+      },
+      messageSubject: templateName || notificationTitle || '',
+      offers: [],
+    };
+  }, [
+    notificationTitle,
+    message,
+    accountId,
+    mediaType,
+    imageSrc,
+    brandIconOption,
+    brandIconSrc,
+    buttons,
+    onClickBehaviour,
+    redirectUrl,
+    websiteLink,
+    templateName,
+  ]);
+
+  const handleTestAndPreview = useCallback(() => {
+    setShowTestAndPreviewSlidebox(true);
+  }, []);
+
+  const handleCloseTestAndPreview = useCallback(() => {
+    setShowTestAndPreviewSlidebox(false);
+  }, []);
+
   const isFormValid = () => {
     const templateNameInvalid = isFullMode && validateTemplateName(templateName);
     const titleValidation = validateTitle(notificationTitle);
@@ -1040,14 +1107,23 @@ const WebPushCreate = ({
           formatMessage={formatMessage}
           messages={messages}
         />
-        <FormActions
-          onSave={handleSave}
-          isSaveDisabled={isSaveDisabled}
-          errorText={errorText}
-          accountErrorText={accountErrorText}
-          formatMessage={formatMessage}
-          messages={messages}
-        />
+        <CapRow className="webpush-test-preview-action">
+          <FormActions
+            onSave={handleSave}
+            isSaveDisabled={isSaveDisabled}
+            errorText={errorText}
+            accountErrorText={accountErrorText}
+            formatMessage={formatMessage}
+            messages={messages}
+          />
+          <CapButton
+            type="secondary"
+            onClick={handleTestAndPreview}
+            className="webpush-test-preview-btn"
+          >
+            {formatMessage(creativesMessages.testAndPreview)}
+          </CapButton>
+        </CapRow>
       </CapColumn>
       <CapColumn className="preview-section" span={10}>
         <WebPushPreview
@@ -1059,6 +1135,13 @@ const WebPushCreate = ({
           buttons={buttons}
         />
       </CapColumn>
+      <TestAndPreviewSlidebox
+        show={showTestAndPreviewSlidebox}
+        onClose={handleCloseTestAndPreview}
+        content={getTemplateContent()}
+        currentChannel={WEBPUSH}
+        accountId={accountId || null}
+      />
     </CapRow>
   );
 };

package/v2Containers/WebPush/Create/index.scss

@@ -135,5 +135,12 @@
       font-family: 'Roboto', open-sans, sans-serif;
     }
   }
+
+  .webpush-test-preview-action {
+    display: flex;
+    .webpush-test-preview-btn {
+      margin-left: $CAP_SPACE_12;
+    }
+  }
 }