@capillarytech/creatives-library 9.0.32 → 9.0.34-alpha.2

package/v2Containers/Cap/index.js

@@ -30,6 +30,7 @@ import {
   REQUEST,
   DEFAULT,
   ENABLE_PRODUCT_SUPPORT_VIDEOS,
+  ENABLE_NEW_LEFT_NAVIGATION,
   CAMPAIGN_SETTINGS_URL,
 } from './constants';
 import './_cap.scss';
@@ -53,7 +54,8 @@ import { v2ViberSagas } from '../Viber/sagas';
 import { v2FacebookSagas } from '../Facebook/sagas';
 import createReducer from '../Line/Container/reducer';
 import { DAEMON } from '@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes';
-const gtm = window.dataLayer || [];
+import { getDataLayer } from '../../utils/getDataLayer';
+const gtm = getDataLayer();
 const {
   logNewTab,
   utilsGetOrgNameFromId,
@@ -72,18 +74,19 @@ const CapWrapper = styled.div`
   min-height: 100%;
   padding: 0;
   flex-direction: column;
+  position: relative;
 `;
 GA.initialize({ accessKey: GTM_TRACKING_ID, trackUIError: true, trackLoadPerformance: 'creatives' });
 
 const MainWrapper = styled.div`
   position: relative;
-  min-height: calc(100vh - 5.29rem);
-  top: 4.72rem;
+  min-height: 100%;
+  top: 0;
 `;
 
 const ContentWrapper = styled.div`
   && {
-    margin-left: ${(props) => (props.leftNavbarExpanded ? '17rem' : '4.475rem')};
+    margin-left: 0;
   }
 `;
 
@@ -118,12 +121,16 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
       const userGtmData = this.getUserGtmData();
       this.setDimensionData(userGtmData);
       gtm.push({ ...userGtmData, event: 'userAuthenticated' });
-      Auth.initialize({
-        permissions: userData.accessiblePermissions,
-        isCapUser: userData.isCapUser,
-        roles: Object.keys(userData.accessRoles),
-        accessibleFeatures,
-      });
+      // In MFE mode the host already initialized auth (window.capAuth is set with
+      // the full superset); skip so we don't clobber it with the basic shape.
+      if (!window.capAuth) {
+        Auth.initialize({
+          permissions: userData.accessiblePermissions,
+          isCapUser: userData.isCapUser,
+          roles: Object.keys(userData.accessRoles),
+          accessibleFeatures,
+        });
+      }
     });
     this.props.actions.getTopbarMenuData(parentModule);
     if (this.props.Global.orgID !== undefined) {
@@ -500,6 +507,8 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     const type = this.props.location.query.type;
     const toastMessages = this.props.Global.messages;
     const { isCreativesAccessible, showOrgChangeModal, showRefreshModal } = this.state;
+    const { accessibleFeatures = [] } = currentOrgDetails;
+    const isLatestLeftNavigationEnabled = accessibleFeatures.includes(ENABLE_NEW_LEFT_NAVIGATION);
     return (
       <CapWrapper>
         { this.props.loader.localeLoading || this.props.Global.fetching_userdata ?
@@ -537,26 +546,47 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
                   campaignOrgV2Status={currentOrgDetails.org_campaign_v2_status}
                   handleLeftNavBarExpanded={this.handleLeftNavBarExpanded}
                   leftNavbarExpandedProp={this.state.leftNavbarExpanded}
-                />) : ''}
-              <MainWrapper className="main">
 
-                <ContentWrapper
-                  className={`main-content ${this.state.leftNavbarExpanded ? "contet-width-collapse" : "content-width-expanded"}`}
-                  leftNavbarExpanded={this.state.leftNavbarExpanded}
                 >
-                  <Switch>
-                    {componentRoutes.map(routeProps => {
-                      return (
-                        <RenderRoute
-                          {...routeProps}
-                          key={routeProps.path}
-                          isLoggedIn={isLoggedIn}
-                        />
+                  <MainWrapper isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled} className="main">
+                    <ContentWrapper
+                      className={`main-content ${this.state.leftNavbarExpanded ? "contet-width-collapse" : "content-width-expanded"}`}
+                      isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled}
+                      leftNavbarExpanded={this.state.leftNavbarExpanded}
+                    >
+                      <Switch>
+                        {componentRoutes.map(routeProps => {
+                          return (
+                            <RenderRoute
+                              {...routeProps}
+                              key={routeProps.path}
+                              isLoggedIn={isLoggedIn}
+                            />
+                          )}
+                        )}
+                      </Switch>
+                    </ContentWrapper>
+                  </MainWrapper>
+                </NavigationBar>) : (
+                <MainWrapper isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled} className="main">
+                  <ContentWrapper
+                    className={`main-content ${this.state.leftNavbarExpanded ? "contet-width-collapse" : "content-width-expanded"}`}
+                    isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled}
+                    leftNavbarExpanded={this.state.leftNavbarExpanded}
+                  >
+                    <Switch>
+                      {componentRoutes.map(routeProps => {
+                        return (
+                          <RenderRoute
+                            {...routeProps}
+                            key={routeProps.path}
+                            isLoggedIn={isLoggedIn}
+                          />
+                        )}
                       )}
-                    )}
-                  </Switch>
-                </ContentWrapper>
-              </MainWrapper>
+                    </Switch>
+                  </ContentWrapper>
+                </MainWrapper>)}
             </div>
             {(toastMessages && toastMessages.length > 0) &&
           toastMessages.map((message) => {

package/v2Containers/Templates/_templates.scss

@@ -1,6 +1,7 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
 .ant-tabs-content{
+   margin-top: $CAP_SPACE_08;
   // .creatives-templates-list.full-mode{
     .v2-pagination-container, .v2-pagination-container-half {
       .ant-tabs-tabpane-active{
@@ -159,6 +160,96 @@
             line-clamp: 3;
             }
           }
+          .viber-carousel-static-content {
+            width: 100%;
+            overflow: hidden;
+            .viber-carousel-static-message-box {
+              width: 100%;
+              height: auto;
+              border-radius: $CAP_SPACE_04;
+              background: $CAP_WHITE;
+              margin-bottom: $CAP_SPACE_08;
+              display: flex;
+              align-items: flex-start;
+            }
+            .viber-carousel-static-message {
+              display: -webkit-box;
+              width: 100%;
+              color: $CAP_G01;
+              line-height: 1.3;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              -webkit-line-clamp: 2;
+              line-clamp: 2;
+              -webkit-box-orient: vertical;
+              white-space: normal;
+              word-break: break-word;
+            }
+            .viber-carousel-static-cards {
+              display: flex;
+              gap: $CAP_SPACE_08;
+              overflow: hidden;
+            }
+            .viber-carousel-static-card {
+              flex: 1;
+              min-width: 0;
+              background: $CAP_WHITE;
+              border-radius: $CAP_SPACE_04;
+              overflow: hidden;
+              display: flex;
+              flex-direction: column;
+            }
+            .viber-carousel-static-image {
+              width: 100%;
+              max-height: 11rem;
+              margin-bottom: $CAP_SPACE_04;
+              border-radius: $CAP_SPACE_04;
+              display: block;
+            }
+            .viber-carousel-static-image-placeholder {
+              width: 100%;
+              height: 7.143rem;
+              border-radius: $CAP_SPACE_04;
+            }
+            .viber-carousel-static-image-placeholder {
+              background: $CAP_G07;
+            }
+            .viber-carousel-static-text {
+              display: block;
+              color: $CAP_G01;
+              margin: $CAP_SPACE_04 0;
+              line-height: 1.3;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: normal;
+              -webkit-line-clamp: 2;
+              line-clamp: 2;
+              -webkit-box-orient: vertical;
+              display: -webkit-box;
+            }
+            .viber-carousel-static-buttons {
+              display: flex;
+              flex-direction: column;
+              gap: $CAP_SPACE_04;
+              margin-top: auto;
+            }
+            .viber-carousel-static-button {
+              display: block;
+              min-height: 1.5rem;
+              border-radius: $CAP_SPACE_12;
+              background: $CAP_PURPLE01;
+              color: $CAP_WHITE;
+              text-align: center;
+              padding: 0.179rem $CAP_SPACE_08;
+              white-space: normal;
+            }
+            .viber-carousel-static-button-secondary {
+              color: $CAP_PURPLE01;
+              background: transparent;
+              border: none;
+              box-shadow: none;
+            }
+          }
         
         }
       
@@ -167,6 +258,30 @@
             word-wrap: break-word;
           }
         }
+
+        &.viber-carousel-static {
+          height: auto;
+          min-height: 21.125rem;
+
+          .ant-card-body {
+            padding-bottom: $CAP_SPACE_12;
+          }
+
+          .truncate-text-viber {
+            .ant-card-meta-description {
+              display: block;
+              overflow: visible;
+              -webkit-line-clamp: unset;
+              line-clamp: unset;
+            }
+          }
+
+          .viber-carousel-static-content,
+          .viber-carousel-static-cards,
+          .viber-carousel-static-card {
+            overflow: visible;
+          }
+        }
     
   
         &.carousel-img-section {
@@ -1427,7 +1542,6 @@
   justify-content: space-between;
   align-items: center;
   gap: $CAP_SPACE_08;
-  margin-right: $CAP_SPACE_32;
 }
 
 .template-listing-more-btn {

package/v2Containers/Templates/index.js

@@ -73,6 +73,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';
@@ -1396,6 +1397,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,
@@ -1413,14 +1419,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] : [],
+          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 || '',
         };
       }
 
@@ -2441,10 +2472,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;
@@ -4603,6 +4676,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         <CapButton
           className={`create-new-${channelLowerCase} margin-l-8 margin-b-12`}
           type={"primary"}
+          isAddBtn
           disabled={this.isCreateDisabled()}
           onClick={this.createTemplate}
         >
@@ -5064,15 +5138,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 ([EMAIL, SMS].includes(channelUpper)) {
+                    return previewContent.formData || null;
+                  }
+                  if (channelUpper === VIBER) {
+                    return previewContent;
+                  }
+                  return null;
+                })()
               }
             />
           )}

package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap

@@ -239,6 +239,7 @@ exports[`Test Templates container Should render sms illustration when no templat
                     <CapButton
                       className="create-new-sms margin-l-8 margin-b-12"
                       disabled={false}
+                      isAddBtn={true}
                       onClick={[Function]}
                       type="primary"
                     >
@@ -813,6 +814,7 @@ exports[`Test Templates container Should render temlates when whatsapp templates
                     <CapButton
                       className="create-new-whatsapp margin-l-8 margin-b-12"
                       disabled={false}
+                      isAddBtn={true}
                       onClick={[Function]}
                       type="primary"
                     >
@@ -1223,6 +1225,7 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
                     <CapButton
                       className="create-new-whatsapp margin-l-8 margin-b-12"
                       disabled={false}
+                      isAddBtn={true}
                       onClick={[Function]}
                       type="primary"
                     >
@@ -1696,6 +1699,7 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
                     <CapButton
                       className="create-new-whatsapp margin-l-8 margin-b-12"
                       disabled={false}
+                      isAddBtn={true}
                       onClick={[Function]}
                       type="primary"
                     >
@@ -2169,6 +2173,7 @@ exports[`Test Templates container Test max templates warning 1`] = `
                     <CapButton
                       className="create-new-whatsapp margin-l-8 margin-b-12"
                       disabled={false}
+                      isAddBtn={true}
                       onClick={[Function]}
                       type="primary"
                     >

package/v2Containers/TemplatesV2/TemplatesV2.style.js

@@ -10,10 +10,9 @@ export default css`
 
   .component-wrapper {
     ${(props) => props.isFullMode ? `
-      max-width: 71.25rem;
       margin: 0 auto;
       width: 100%;
-      padding: 0.714rem 0;
+      padding: 0;
       /* Only main channel tabs content, not HTML Editor validation panel tabs */
       > .cap-tab-v2 > .ant-tabs-content-holder > .ant-tabs-content,
       > .cap-tab-v2 > .ant-tabs-content {
@@ -97,6 +96,12 @@ export default css`
 `;
 
 export const CapTabStyle = css`
-  ${(props) => props.isFullMode ? `margin-top: ${CAP_SPACE_24}` : ``
+  ${(props) => props.isFullMode ? `margin-top: ${CAP_SPACE_24};` : ``
+  }
+  .ant-tabs-nav-list {
+    gap: 2rem;
+  }
+  .ant-tabs-tab + .ant-tabs-tab {
+    margin: 0 !important;
   }
 `;

package/v2Containers/TemplatesV2/index.js

@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators, compose } from 'redux';
-import { CapTab, CapCustomCard, CapButton, CapHeader, CapIcon, CapSpin, CapTooltip } from '@capillarytech/cap-ui-library';
+import { CapTab, CapCustomCard, CapButton, CapIcon, CapSpin, CapTooltip } from '@capillarytech/cap-ui-library';
 import { find, get, pick } from 'lodash';
 import Helmet from 'react-helmet';
 
@@ -47,6 +47,9 @@ import {
   NORMALIZED_CHANNEL_ALIASES,
   SMS,
 } from "../CreativesContainer/constants";
+import { MFEEventBus } from '@capillarytech/cap-ui-utils';
+import { isMFEMode } from '../../utils/mfeDetect';
+import appConfig from '../../app-config';
 
 const { CapCustomCardList } = CapCustomCard;
 
@@ -54,6 +57,7 @@ const StyledCapTab = withStyles(CapTab, CapTabStyle);
 export class TemplatesV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
+    this.lcpReported = false;
     let defaultChannel = get(this, 'props.channel') || get(this, 'props.params.channel') || 'sms';
     if (defaultChannel === LOYALTY) {
       defaultChannel = 'sms';
@@ -222,6 +226,23 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (
+      isMFEMode() &&
+      !this.lcpReported &&
+      !this.props.Templates.getAllTemplatesInProgress &&
+      prevProps.Templates.getAllTemplatesInProgress
+    ) {
+      this.lcpReported = true;
+      MFEEventBus.emit('mfe:segment', {
+        action: 'stop',
+        appId: appConfig.appName,
+        type: 'lcp',
+        timestamp: performance.now(),
+      });
+    }
+  }
+
   componentWillReceiveProps(nextProps) {
     if (this.props.channel !== nextProps.channel) {
       const panes = this.setChannelContent(nextProps.channel, this.state.panes);
@@ -422,14 +443,6 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
             />
           )}
           <section className="component-wrapper">
-            {isFullMode && (
-              <CapHeader
-                title={<FormattedMessage {...messages.creatives} />}
-                {...(!useLocalTemplates && {
-                  description: <FormattedMessage {...messages.creativesDesc} />,
-                })}
-              />
-            )}
             {hideChannelTabsForLocalSms ? (
               <section className="templates-v2-local-sms-pane">{activeLocalPane?.content}</section>
             ) : (

package/v2Containers/Viber/constants.js

@@ -47,7 +47,24 @@ 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;
+export const STATIC_URL = 'STATIC_URL';
+export const DYNAMIC_URL = 'DYNAMIC_URL';
+/** 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 +86,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 = [