@capillarytech/creatives-library 8.0.353-alpha.2 → 8.0.353-alpha.5

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 && 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;
+    }
+  }
 }
 

package/v2Containers/WebPush/Create/tests/getTemplateContent.test.js

@@ -0,0 +1,338 @@
+/**
+ * Unit tests for getTemplateContent logic used in WebPushCreate
+ *
+ * The getTemplateContent function (useCallback) transforms component state
+ * into a structured content object for TestAndPreviewSlidebox.
+ * Tested here as a pure function matching the exact implementation logic.
+ */
+
+import {
+  WEBPUSH_MEDIA_TYPES,
+  BRAND_ICON_OPTIONS,
+  ON_CLICK_BEHAVIOUR_OPTIONS,
+} from '../../constants';
+
+/**
+ * Mirrors the getTemplateContent useCallback in WebPushCreate/index.js.
+ * Keep in sync if the source function changes.
+ */
+const getTemplateContent = ({
+  notificationTitle = '',
+  message = '',
+  accountId = null,
+  mediaType = WEBPUSH_MEDIA_TYPES.NONE,
+  imageSrc = '',
+  brandIconOption = BRAND_ICON_OPTIONS.DONT_SHOW,
+  brandIconSrc = '',
+  buttons = [],
+  onClickBehaviour = ON_CLICK_BEHAVIOUR_OPTIONS.SITE_URL,
+  redirectUrl = '',
+  websiteLink = '',
+  templateName = '',
+} = {}) => {
+  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 && buttons.length > 0;
+  let expandableDetails = null;
+  if (hasImage || hasCtas) {
+    expandableDetails = {
+      media: hasImage ? [{ url: imageSrc, type: '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: [],
+  };
+};
+
+describe('getTemplateContent (WebPushCreate)', () => {
+  describe('Basic structure', () => {
+    it('should return channel WEBPUSH', () => {
+      const result = getTemplateContent({ notificationTitle: 'T', message: 'M' });
+      expect(result.channel).toBe('WEBPUSH');
+    });
+
+    it('should include accountId', () => {
+      const result = getTemplateContent({ accountId: 'acc-123' });
+      expect(result.accountId).toBe('acc-123');
+    });
+
+    it('should return null accountId when not provided', () => {
+      const result = getTemplateContent({});
+      expect(result.accountId).toBeNull();
+    });
+
+    it('should include title in content', () => {
+      const result = getTemplateContent({ notificationTitle: 'Hello World' });
+      expect(result.content.title).toBe('Hello World');
+    });
+
+    it('should include message in content', () => {
+      const result = getTemplateContent({ message: 'Body text' });
+      expect(result.content.message).toBe('Body text');
+    });
+
+    it('should default title to empty string', () => {
+      const result = getTemplateContent({});
+      expect(result.content.title).toBe('');
+    });
+
+    it('should default message to empty string', () => {
+      const result = getTemplateContent({});
+      expect(result.content.message).toBe('');
+    });
+
+    it('should include offers as empty array', () => {
+      const result = getTemplateContent({});
+      expect(result.offers).toEqual([]);
+    });
+  });
+
+  describe('messageSubject', () => {
+    it('should use templateName as messageSubject', () => {
+      const result = getTemplateContent({ templateName: 'My Template', notificationTitle: 'T' });
+      expect(result.messageSubject).toBe('My Template');
+    });
+
+    it('should fall back to notificationTitle when templateName is empty', () => {
+      const result = getTemplateContent({ templateName: '', notificationTitle: 'Push Title' });
+      expect(result.messageSubject).toBe('Push Title');
+    });
+
+    it('should be empty string when both templateName and notificationTitle are empty', () => {
+      const result = getTemplateContent({ templateName: '', notificationTitle: '' });
+      expect(result.messageSubject).toBe('');
+    });
+  });
+
+  describe('CTA - REDIRECT_TO_URL', () => {
+    it('should set EXTERNAL_URL cta when behaviour is REDIRECT_TO_URL with url', () => {
+      const result = getTemplateContent({
+        onClickBehaviour: ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL,
+        redirectUrl: 'https://redirect.com',
+      });
+      expect(result.content.cta).toEqual({ type: 'EXTERNAL_URL', actionLink: 'https://redirect.com' });
+    });
+
+    it('should trim redirectUrl whitespace', () => {
+      const result = getTemplateContent({
+        onClickBehaviour: ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL,
+        redirectUrl: '  https://redirect.com  ',
+      });
+      expect(result.content.cta.actionLink).toBe('https://redirect.com');
+    });
+
+    it('should NOT set cta when REDIRECT_TO_URL but redirectUrl is empty', () => {
+      const result = getTemplateContent({
+        onClickBehaviour: ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL,
+        redirectUrl: '',
+      });
+      expect(result.content.cta).toBeUndefined();
+    });
+  });
+
+  describe('CTA - SITE_URL', () => {
+    it('should set SITE_URL cta when behaviour is SITE_URL with websiteLink', () => {
+      const result = getTemplateContent({
+        onClickBehaviour: ON_CLICK_BEHAVIOUR_OPTIONS.SITE_URL,
+        websiteLink: 'https://mysite.com',
+      });
+      expect(result.content.cta).toEqual({ type: 'SITE_URL', actionLink: 'https://mysite.com' });
+    });
+
+    it('should NOT set cta when SITE_URL but websiteLink is empty', () => {
+      const result = getTemplateContent({
+        onClickBehaviour: ON_CLICK_BEHAVIOUR_OPTIONS.SITE_URL,
+        websiteLink: '',
+      });
+      expect(result.content.cta).toBeUndefined();
+    });
+
+    it('should NOT include cta key at all when no url configured', () => {
+      const result = getTemplateContent({
+        onClickBehaviour: ON_CLICK_BEHAVIOUR_OPTIONS.SITE_URL,
+        websiteLink: '',
+        redirectUrl: '',
+      });
+      expect(Object.keys(result.content)).not.toContain('cta');
+    });
+  });
+
+  describe('expandableDetails - image', () => {
+    it('should include image media when mediaType is IMAGE and imageSrc is set', () => {
+      const result = getTemplateContent({
+        mediaType: WEBPUSH_MEDIA_TYPES.IMAGE,
+        imageSrc: 'https://example.com/img.jpg',
+      });
+      expect(result.content.expandableDetails).toBeDefined();
+      expect(result.content.expandableDetails.media).toEqual([
+        { url: 'https://example.com/img.jpg', type: 'IMAGE' },
+      ]);
+    });
+
+    it('should NOT include expandableDetails when mediaType is NONE', () => {
+      const result = getTemplateContent({
+        mediaType: WEBPUSH_MEDIA_TYPES.NONE,
+        imageSrc: 'https://example.com/img.jpg',
+      });
+      expect(result.content.expandableDetails).toBeUndefined();
+    });
+
+    it('should NOT include expandableDetails when imageSrc is empty even if mediaType is IMAGE', () => {
+      const result = getTemplateContent({
+        mediaType: WEBPUSH_MEDIA_TYPES.IMAGE,
+        imageSrc: '',
+        buttons: [],
+      });
+      expect(result.content.expandableDetails).toBeUndefined();
+    });
+  });
+
+  describe('expandableDetails - buttons', () => {
+    it('should include ctas when buttons are provided', () => {
+      const result = getTemplateContent({
+        buttons: [{ text: 'Click Me', url: 'https://click.com' }],
+      });
+      expect(result.content.expandableDetails).toBeDefined();
+      expect(result.content.expandableDetails.ctas).toEqual([
+        { type: 'EXTERNAL_URL', action: '', title: 'Click Me', actionLink: 'https://click.com' },
+      ]);
+    });
+
+    it('should map multiple buttons to ctas', () => {
+      const result = getTemplateContent({
+        buttons: [
+          { text: 'Btn1', url: 'https://a.com' },
+          { text: 'Btn2', url: 'https://b.com' },
+        ],
+      });
+      expect(result.content.expandableDetails.ctas).toHaveLength(2);
+    });
+
+    it('should handle button with empty text and url', () => {
+      const result = getTemplateContent({
+        buttons: [{ text: '', url: '' }],
+      });
+      expect(result.content.expandableDetails.ctas[0]).toEqual({
+        type: 'EXTERNAL_URL',
+        action: '',
+        title: '',
+        actionLink: '',
+      });
+    });
+
+    it('should NOT include expandableDetails when buttons array is empty', () => {
+      const result = getTemplateContent({ buttons: [] });
+      expect(result.content.expandableDetails).toBeUndefined();
+    });
+  });
+
+  describe('expandableDetails - image + buttons combined', () => {
+    it('should include both media and ctas when image and buttons present', () => {
+      const result = getTemplateContent({
+        mediaType: WEBPUSH_MEDIA_TYPES.IMAGE,
+        imageSrc: 'https://img.com/a.jpg',
+        buttons: [{ text: 'Go', url: 'https://go.com' }],
+      });
+      expect(result.content.expandableDetails.media).toHaveLength(1);
+      expect(result.content.expandableDetails.ctas).toHaveLength(1);
+    });
+  });
+
+  describe('brandIcon (iconImageUrl)', () => {
+    it('should include iconImageUrl when brandIconOption is not DONT_SHOW and brandIconSrc is set', () => {
+      const result = getTemplateContent({
+        brandIconOption: BRAND_ICON_OPTIONS.UPLOAD_IMAGE,
+        brandIconSrc: 'https://example.com/brand.png',
+      });
+      expect(result.content.iconImageUrl).toBe('https://example.com/brand.png');
+    });
+
+    it('should NOT include iconImageUrl when brandIconOption is DONT_SHOW', () => {
+      const result = getTemplateContent({
+        brandIconOption: BRAND_ICON_OPTIONS.DONT_SHOW,
+        brandIconSrc: 'https://example.com/brand.png',
+      });
+      expect(result.content.iconImageUrl).toBeUndefined();
+    });
+
+    it('should NOT include iconImageUrl when brandIconSrc is empty', () => {
+      const result = getTemplateContent({
+        brandIconOption: BRAND_ICON_OPTIONS.UPLOAD_IMAGE,
+        brandIconSrc: '',
+      });
+      expect(result.content.iconImageUrl).toBeUndefined();
+    });
+
+    it('should NOT include iconImageUrl key when not applicable', () => {
+      const result = getTemplateContent({
+        brandIconOption: BRAND_ICON_OPTIONS.DONT_SHOW,
+        brandIconSrc: '',
+      });
+      expect(Object.keys(result.content)).not.toContain('iconImageUrl');
+    });
+  });
+
+  describe('Full payload with all fields', () => {
+    it('should build complete payload with title, message, cta, expandableDetails, iconImageUrl', () => {
+      const result = getTemplateContent({
+        notificationTitle: 'Full Title',
+        message: 'Full body',
+        accountId: 'acc-full',
+        templateName: 'Full Template',
+        mediaType: WEBPUSH_MEDIA_TYPES.IMAGE,
+        imageSrc: 'https://img.com/full.jpg',
+        brandIconOption: BRAND_ICON_OPTIONS.UPLOAD_IMAGE,
+        brandIconSrc: 'https://icon.com/full.png',
+        buttons: [{ text: 'Action', url: 'https://action.com' }],
+        onClickBehaviour: ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL,
+        redirectUrl: 'https://redirect.com',
+        websiteLink: '',
+      });
+
+      expect(result).toEqual({
+        channel: 'WEBPUSH',
+        accountId: 'acc-full',
+        content: {
+          title: 'Full Title',
+          message: 'Full body',
+          iconImageUrl: 'https://icon.com/full.png',
+          cta: { type: 'EXTERNAL_URL', actionLink: 'https://redirect.com' },
+          expandableDetails: {
+            media: [{ url: 'https://img.com/full.jpg', type: 'IMAGE' }],
+            ctas: [{ type: 'EXTERNAL_URL', action: '', title: 'Action', actionLink: 'https://action.com' }],
+          },
+        },
+        messageSubject: 'Full Template',
+        offers: [],
+      });
+    });
+  });
+});