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

package/v2Containers/Templates/index.js

@@ -72,6 +72,7 @@ import * as ebillActions from '../Ebill/actions';
 import * as emailActions from '../Email/actions';
 import * as lineActions from '../Line/Container/actions';
 import * as viberActions from '../Viber/actions';
+import { VIBER_MEDIA_TYPES } from '../Viber/constants';
 import * as facebookActions from '../Facebook/actions';
 import * as whatsappActions from '../Whatsapp/actions';
 import * as rcsActions from '../Rcs/actions';
@@ -104,9 +105,6 @@ 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';
@@ -1374,6 +1372,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         const image = viberContent.image || {};
         const video = viberContent.video || {};
         const button = viberContent.button || {};
+        const messageType = viberContent.type || '';
+        const cardsRaw = viberContent.cards;
+        const cards = Array.isArray(cardsRaw) ? cardsRaw : [];
+        const isCarousel =
+          messageType === VIBER_MEDIA_TYPES.CAROUSEL || cards.length > 0;
 
         const viberPreview = {
           messageContent: text,
@@ -1391,81 +1394,39 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           };
         }
 
+        if (isCarousel) {
+          viberPreview.type = VIBER_MEDIA_TYPES.CAROUSEL;
+          viberPreview.cards = cards.map((card) => ({
+            text: card?.text || '',
+            mediaUrl: card?.mediaUrl || '',
+            buttons: (card?.buttons || []).map((btn) => ({
+              title: btn?.title || '',
+              action: btn?.action || '',
+            })),
+          }));
+          viberPreview.showCarouselEditorPreview = true;
+        }
+
         // Extract account name
         const accountName = get(template, 'definition.accountName', '');
 
         // Return Viber content object (same as Viber/index.js getTemplateContent)
         return {
           viberPreviewContent: viberPreview,
-          accountName: accountName ? [accountName] : [],
-          brandName: accountName ? [accountName] : [],
-        };
-      }
-
-      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: [],
+          accountName: accountName || '',
+          brandName: accountName || '',
+          messageContent: text,
+          ...(isCarousel && {
+            type: VIBER_MEDIA_TYPES.CAROUSEL,
+            cards: viberPreview.cards,
+          }),
+          ...(!isCarousel && !isEmpty(button) && button.text && (button.url || viberContent.buttonURL) && {
+            button: {
+              text: button.text,
+              url: button.url || viberContent.buttonURL || '',
+            },
+          }),
+          buttonURL: button.url || viberContent.buttonURL || '',
         };
       }
 
@@ -1481,7 +1442,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, WEBPUSH];
+    const supportedChannels = [EMAIL, SMS, INAPP, MOBILE_PUSH, VIBER, ZALO];
     return supportedChannels.includes(this.state.channel.toUpperCase());
   }
 
@@ -2041,7 +2002,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, WEBPUSH];
+            const testAndPreviewChannels = [EMAIL, SMS, WHATSAPP, RCS, INAPP, MOBILE_PUSH, VIBER, ZALO];
             const isTestAndPreviewSupported = testAndPreviewChannels.includes(currentChannel.toUpperCase());
 
             // Don't show preview icon if channel supports Test and Preview
@@ -2411,10 +2372,52 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 image = {},
                 button = {},
                 video = {},
+                type = '',
+                cards = [],
               } = {},
             } = {},
           } = template.versions.base;
+          const isViberCarousel = type === VIBER_MEDIA_TYPES.CAROUSEL;
           templateData.content = text;
+          if (isViberCarousel) {
+            const previewCards = Array.isArray(cards) ? cards.slice(0, 1) : [];
+            templateData.className = 'viber-carousel-static';
+            templateData.content = (
+              <CapRow className="viber-carousel-static-content">
+                <CapRow className="viber-carousel-static-message-box">
+                  <CapLabel type="label1" className="viber-carousel-static-message">
+                    {text}
+                  </CapLabel>
+                </CapRow>
+                <CapRow className="viber-carousel-static-cards">
+                  {previewCards.map((card, cardIdx) => (
+                    <CapRow className="viber-carousel-static-card" key={`viber-static-card-${cardIdx}`}>
+                      {card?.mediaUrl ? (
+                        <CapImage src={card.mediaUrl} className="viber-carousel-static-image" />
+                      ) : (
+                        <CapRow className="viber-carousel-static-image-placeholder" />
+                      )}
+                      <CapLabel type="label1" className="viber-carousel-static-text">
+                        {card?.text}
+                      </CapLabel>
+                      <CapRow className="viber-carousel-static-buttons">
+                        {(Array.isArray(card?.buttons) && card.buttons.length ? card.buttons : [{}, {}]).slice(0, 2).map((carouselButton, btnIdx) => (
+                          <CapLabel
+                            key={`viber-static-btn-${cardIdx}-${btnIdx}`}
+                            type="label1"
+                            className={`viber-carousel-static-button ${btnIdx === 1 ? 'viber-carousel-static-button-secondary' : ''}`}
+                          >
+                            {(carouselButton?.title || '').trim()}
+                          </CapLabel>
+                        ))}
+                      </CapRow>
+                    </CapRow>
+                  ))}
+                </CapRow>
+              </CapRow>
+            );
+            break;
+          }
           if (!isEmpty(image)) {
             const { url = '' } = image;
             templateData.url = url;
@@ -4976,15 +4979,22 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                   ? this.props.Templates.selectedWhatsappAccount.name
                   : null
               }
-              // Pass formData for EMAIL and SMS channels for tag extraction
+              // Pass formData for tag extraction (EMAIL/SMS use nested formData; VIBER uses content object)
               formData={
-                this.state.testAndPreviewContent &&
-                (this.state.channel?.toUpperCase() === EMAIL || 
-                 this.state.channel?.toUpperCase() === SMS) &&
-                typeof this.state.testAndPreviewContent === 'object' &&
-                this.state.testAndPreviewContent?.formData
-                  ? this.state.testAndPreviewContent.formData
-                  : null
+                (() => {
+                  const previewContent = this.state.testAndPreviewContent;
+                  const channelUpper = this.state.channel?.toUpperCase();
+                  if (!previewContent || typeof previewContent !== 'object') {
+                    return null;
+                  }
+                  if (channelUpper === EMAIL || channelUpper === SMS) {
+                    return previewContent.formData || null;
+                  }
+                  if (channelUpper === VIBER) {
+                    return previewContent;
+                  }
+                  return null;
+                })()
               }
             />
           )}

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;

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

@@ -54,25 +54,10 @@ jest.mock('@capillarytech/cap-ui-library', () => ({
 }));
 
 describe('getCdnTransformationConfig saga', () => {
-  afterEach(() => {
-    delete window.APP_ENV;
-  });
-
-  it("short-circuits to env config and skips the API call when window.APP_ENV is set", async () => {
-    const initSpy = jest.spyOn(cdnUtils, "initCdnConfigFromEnv").mockReturnValue(true);
-    const apiSpy = jest.spyOn(api, "getCdnTransformationConfig");
-
-    await expectSaga(getCdnTransformationConfig).run();
-
-    expect(initSpy).toHaveBeenCalled();
-    expect(apiSpy).not.toHaveBeenCalled();
-  });
-
-  it("handle valid response from api", async () => {
-    jest.spyOn(cdnUtils, "initCdnConfigFromEnv").mockReturnValue(false);
+  it("handle valid response from api", () => {
     const saveCdnConfigsSpy = jest.spyOn(cdnUtils, "saveCdnConfigs");
 
-    await expectSaga(getCdnTransformationConfig)
+    expectSaga(getCdnTransformationConfig)
       .provide([
         [
           call(api.getCdnTransformationConfig),
@@ -83,14 +68,13 @@ describe('getCdnTransformationConfig saga', () => {
     expect(saveCdnConfigsSpy).toHaveBeenCalled();
   });
 
-    it("handle error response from api", async () => {
-      jest.spyOn(cdnUtils, "initCdnConfigFromEnv").mockReturnValue(false);
+    it("handle error response from api", () => {
       const removeAllCdnLocalStorageItemsSpy = jest.spyOn(
         cdnUtils,
         "removeAllCdnLocalStorageItems"
       );
 
-      await expectSaga(getCdnTransformationConfig)
+      expectSaga(getCdnTransformationConfig)
         .provide([
           [
             call(api.getCdnTransformationConfig),
@@ -101,8 +85,7 @@ describe('getCdnTransformationConfig saga', () => {
       expect(removeAllCdnLocalStorageItemsSpy).toHaveBeenCalled();
     });
 
-    it("remove localStorage items when an error is thrown", async () => {
-        jest.spyOn(cdnUtils, "initCdnConfigFromEnv").mockReturnValue(false);
+    it("remove localStorage items when an error is thrown", () => {
         const saveCdnConfigsSpy = jest.spyOn(cdnUtils, "saveCdnConfigs").mockImplementation(()=>{
             throw new Error()
         });
@@ -111,7 +94,7 @@ describe('getCdnTransformationConfig saga', () => {
             "removeAllCdnLocalStorageItems"
           );
 
-        await expectSaga(getCdnTransformationConfig)
+        expectSaga(getCdnTransformationConfig)
           .provide([
             [
               call(api.getCdnTransformationConfig),

package/v2Containers/Viber/constants.js

@@ -47,7 +47,22 @@ export const VIBER_MEDIA_TYPES = {
   TEXT: 'TEXT',
   IMAGE: 'IMAGE',
   VIDEO: 'VIDEO',
+  CAROUSEL: 'CAROUSEL',
 };
+export const VIBER_CAROUSEL_MIN_CARDS = 2;
+export const VIBER_CAROUSEL_MAX_CARDS = 5;
+export const VIBER_CAROUSEL_MAX_BUTTONS = 2;
+export const VIBER_CAROUSEL_CARD_TITLE_MIN_LENGTH = 2;
+export const VIBER_CAROUSEL_CARD_TITLE_MAX_LENGTH = 38;
+export const VIBER_CAROUSEL_FIRST_BUTTON_TITLE_MAX_LENGTH = 10;
+export const VIBER_CAROUSEL_SECOND_BUTTON_TITLE_MAX_LENGTH = 12;
+export const VIBER_CAROUSEL_BUTTON_URL_MAX_LENGTH = 1000;
+/** Recommended / validated carousel image height in pixels (passed to image upload). */
+export const VIBER_CAROUSEL_IMG_HEIGHT = 600;
+/** Recommended / validated carousel image width in pixels (passed to image upload). */
+export const VIBER_CAROUSEL_IMG_WIDTH = 696;
+/** Maximum carousel image file size (bytes). 10_000_000 ≈ 10 MB (decimal). */
+export const VIBER_CAROUSEL_IMG_SIZE = 10000000;
 export const ALLOWED_IMAGE_EXTENSIONS_REGEX_VIBER = /\.(jpe?g|png)$/i;
 export const ALLOWED_EXTENSIONS_VIDEO_REGEX_VIBER = /\.(mp4|3gp|m4v|mov)$/i;
 export const NONE = 'NONE';
@@ -69,6 +84,10 @@ export const mediaRadioOptions = [
     value: VIBER_MEDIA_TYPES.VIDEO,
     label: <FormattedMessage {...messages.mediaVideo} />,
   },
+  {
+    value: VIBER_MEDIA_TYPES.CAROUSEL,
+    label: <FormattedMessage {...messages.mediaCarousel} />,
+  },
 ];
 
 export const buttonRadioOptions = [