@capillarytech/creatives-library 9.0.15-alpha.3 → 9.0.16-beta.0

package/v2Components/TemplatePreview/index.js

@@ -52,7 +52,6 @@ import { QUICK_REPLY, WHATSAPP_CATEGORIES, PHONE_NUMBER, TEMPLATE_VARIABLE_REGEX
 import { RCS_BUTTON_TYPES, LEFT, HORIZONTAL, VERTICAL, RIGHT} from '../../v2Containers/Rcs/constants';
 import { ANDROID, INAPP_MESSAGE_LAYOUT_TYPES } from '../../v2Containers/InApp/constants';
 import { CAROUSEL } from '../../v2Containers/MobilePushNew/constants';
-import { TEMPLATE_VAR_REGEX } from './constants';
 
 const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
 const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
@@ -237,23 +236,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
     const { formatMessage } = intl;
     const { rcsPreviewContent, inAppPreviewContent, viberPreviewContent, isBeeFreeTemplate } = content || {};
-    const normalizedRcsPreviewContent = Array.isArray(rcsPreviewContent)
-      ? { carouselData: rcsPreviewContent }
-      : (rcsPreviewContent || {});
-    const {
-      rcsImageSrc,
-      rcsVideoSrc,
-      rcsTitle,
-      rcsDesc,
-      rcsSuggestions,
-      carouselData: rcsCarouselData,
-      rcsCarouselData: rcsCarouselDataAlt,
-      cardVarMapped: rcsCardVarMapped,
-    } = normalizedRcsPreviewContent;
-    const resolvedRcsCarouselData =
-      Array.isArray(rcsCarouselData) && rcsCarouselData.length > 0
-        ? rcsCarouselData
-        : rcsCarouselDataAlt;
+    const { rcsImageSrc, rcsVideoSrc, rcsTitle, rcsDesc, rcsSuggestions } = rcsPreviewContent || {};
     const {
       videoParams,
       imageURL,
@@ -334,18 +317,6 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       'flex-shrink': 0,
       'left': 0,
     };
-
-    const resolveVarsWithMap = (input, varMap) => {
-      if (input === null || input === undefined) return '';
-      const str = typeof input === 'string' ? input : String(input);
-      return str.replace(TEMPLATE_VAR_REGEX, (token, varName) => {
-        const mappedValue = varMap?.[varName];
-        if (mappedValue === null || mappedValue === undefined || String(mappedValue) === '') {
-          return token;
-        }
-        return String(mappedValue);
-      });
-    };
     const getVideoContent = ({
       video,
       actionUrl,
@@ -502,15 +473,13 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
     const whatsappUpdatedAccountName = whatsappAccountName || templateData?.versions?.base?.content?.whatsapp?.accountName || '';
     const whatsappUpdatedLen = whatsappContentLen !== undefined ? whatsappContentLen : content?.charCount;
 
-    const renderRcsSuggestionsPreview = (suggestionsArg) => {
+    const renderRcsSuggestionsPreview = () => {
       const renderArray = [];
-      const suggestions = Array.isArray(suggestionsArg) ? suggestionsArg : (rcsSuggestions || []);
-      (suggestions || []).forEach((suggestion, idx) => {
-        const suggestionKey = `${suggestion?.type || 'unknown'}-${suggestion?.text || ''}-${idx}`;
-        renderArray.push(<CapDivider key={`rcs-divider-${suggestionKey}`} className="whatsapp-divider" />);
+      (rcsSuggestions || []).forEach((suggestion) => {
+        renderArray.push(<CapDivider className="whatsapp-divider" />);
         if (suggestion.type === RCS_BUTTON_TYPES.QUICK_REPLY) {
           renderArray.push(
-            <CapLabel key={`rcs-suggestion-${suggestionKey}`} type="label21" className="rcs-cta-preview">
+            <CapLabel type="label21" className="rcs-cta-preview">
               <CapIcon
                 type='small-link'
                 size="xs"
@@ -520,17 +489,14 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
           );
         } else if (suggestion.type === RCS_BUTTON_TYPES.CTA) {
           renderArray.push(
-            <CapLabel key={`rcs-suggestion-${suggestionKey}`} type="label21" className="rcs-cta-preview">
-              {/* "launch" icon's hardcoded SVG <defs>/<mask> ids collide when 2+
-                  CTA buttons render together, showing as a solid square — "open-in-new"
-                  is a single flat path with no ids, so it can't collide. */}
-              <CapIcon type="open-in-new" size="xs" />
+            <CapLabel type="label21" className="rcs-cta-preview">
+              <CapIcon type="launch" size="xs" />
               {suggestion.text}
             </CapLabel>,
           );
         } else if (suggestion.type === RCS_BUTTON_TYPES.PHONE_NUMBER) {
           renderArray.push(
-            <CapLabel key={`rcs-suggestion-${suggestionKey}`} type="label21" className="rcs-cta-preview">
+            <CapLabel type="label21" className="rcs-cta-preview">
               <CapIcon type="call" size="xs" />
               {suggestion.text}
             </CapLabel>,
@@ -543,20 +509,23 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
     const renderTextPreviewContent = () => (
       <>
          {rcsTitle && (
+      <>
         <CapLabel
           type="label5"
           className="message-pop-item align-left rcs-content"
           fontWeight="bold"
         >
-          {resolveVarsWithMap(rcsTitle, rcsCardVarMapped)}
+          {rcsTitle}
         </CapLabel>
+        <CapDivider className="whatsapp-divider" />
+      </>
     )}
         {rcsDesc && (
           <CapLabel
             type="label5"
             className="message-pop-item align-left rcs-desc rcs-content"
           >
-            {resolveVarsWithMap(rcsDesc, rcsCardVarMapped)}
+            {rcsDesc}
           </CapLabel>
         )}
         {renderRcsSuggestionsPreview()}
@@ -573,134 +542,50 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
           />
         )}
         {rcsVideoSrc && (
-          <CapRow className="video-preview">
+          <div className="video-preview">
             <CapImage
               src={rcsVideoSrc}
               className="rcs-image"
               alt={formatMessage(messages.previewGenerated)}
             />
-            <CapRow className="icon-position">
+            <div className="icon-position">
               <CapImage
                 className="video-icon"
                 src={videoPlay}
               />
-            </CapRow>
-          </CapRow>
+            </div>
+          </div>
         )}   
       </>
     );
 
     const renderRcsPreviewContent = () => {
-      const carouselCards = Array.isArray(resolvedRcsCarouselData) ? resolvedRcsCarouselData : [];
-      if (carouselCards.length > 0) {
-        return (
-          <CapRow className="msg-container sms">
-            <CapRow className="message-pop sms">
-              <CapRow className="msg-container-carousel">
-                <CapRow className="scroll-container">
-                  {carouselCards.map((card, idx) => {
-                    const key = `rcs-carousel-${idx}-${card?.bodyText || card?.imageSrc || card?.videoPreviewImg || ''}`;
-                    const isVideo = (card?.mediaType || '').toLowerCase() === VIDEO;
-                    const cardSuggestions = Array.isArray(card?.suggestions) ? card.suggestions : [];
-                    const effectiveCardVarMap = { ...rcsCardVarMapped, ...(card?.cardVarMapped || {}) };
-                    const suggestionsNode = cardSuggestions.length > 0
-                      ? renderRcsSuggestionsPreview(cardSuggestions)
-                      : null;
-
-                    const resolvedCardTitle = resolveVarsWithMap(card?.title, effectiveCardVarMap);
-                    const resolvedCardBodyText = resolveVarsWithMap(card?.bodyText, effectiveCardVarMap);
-
-                    return (
-                      <CapRow
-                        key={key}
-                        className="message-pop align-left message-pop-carousel rcs-carousel-card"
-                      >
-                        <CapRow className="whatsapp-content">
-                          {!isVideo && (
-                            <CapImage
-                              src={card?.imageSrc ? card.imageSrc : whatsappImageEmptyPreview}
-                              className="whatsapp-image"
-                              alt={formatMessage(messages.previewGenerated)}
-                            />
-                          )}
-                          {isVideo && (
-                            <CapTooltip title={formatMessage(messages.videoPreviewTooltip)}>
-                              <CapRow className="video-preview">
-                                <CapImage
-                                  src={card?.videoPreviewImg ? card.videoPreviewImg : whatsappVideoEmptyPreview}
-                                  className="whatsapp-image"
-                                  alt={formatMessage(messages.previewGenerated)}
-                                />
-                                <CapRow className="icon-position">
-                                  <CapImage className="video-icon" src={videoPlay} alt="Play" />
-                                </CapRow>
-                              </CapRow>
-                            </CapTooltip>
-                          )}
-
-                          {(resolvedCardTitle || resolvedCardBodyText) && (
-                            <CapRow className="carousel-content">
-                              {!!resolvedCardTitle && (
-                                <CapLabel
-                                  type={card?.titleLabelType || 'label1'}
-                                  className="carousel-title"
-                                >
-                                  {resolvedCardTitle}
-                                </CapLabel>
-                              )}
-                              {!!resolvedCardBodyText && (
-                                <CapLabel
-                                  type={card?.bodyLabelType || 'label2'}
-                                  className="carousel-message"
-                                >
-                                  {resolvedCardBodyText}
-                                </CapLabel>
-                              )}
-                            </CapRow>
-                          )}
-
-                          {!!suggestionsNode && (
-                            <>
-                              {suggestionsNode}
-                            </>
-                          )}
-                        </CapRow>
-                      </CapRow>
-                    );
-                  })}
-                </CapRow>
-              </CapRow>
-            </CapRow>
-          </CapRow>
-        );
-      }
-
       if (rcsOrientation === HORIZONTAL) {
         return rcsType === RIGHT ? (
-          <CapRow className="msg-container sms">
-            <CapRow className="message-pop sms horizontal">
+          <div className="msg-container sms">
+            <div className="message-pop sms horizontal">
               <CapColumn className="rcs-preview-text" span={12}>{renderTextPreviewContent()}</CapColumn>
               <CapColumn span={12}>{renderMediaPreviewContent()}</CapColumn>
-            </CapRow>
-          </CapRow>
+            </div>
+          </div>
 
         ) : (
-          <CapRow className="msg-container sms">
-            <CapRow className="message-pop sms horizontal">
+          <div className="msg-container sms">
+            <div className="message-pop sms horizontal">
               <CapColumn span={12}>{renderMediaPreviewContent()}</CapColumn>
               <CapColumn className="rcs-preview-text" span={12}>{renderTextPreviewContent()}</CapColumn>
-            </CapRow>
-          </CapRow>
+            </div>
+          </div>
         );
       }
     
       return (
-        <CapRow className="msg-container sms">
-          <CapRow className="message-pop sms">
+        <div className="msg-container sms">
+          <div className="message-pop sms">
             {renderMediaPreviewContent()}
             {renderTextPreviewContent()}
-          </CapRow>
-        </CapRow>
+          </div>
+        </div>
       );
     };
 
@@ -1421,14 +1306,14 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
               ""
             )}
             {channel?.toUpperCase() === RCS && (
-              <CapRow className="shell-v2 align-center rcs-preview">
+              <div className="shell-v2 align-center rcs-preview">
                 <CapImage
                   className="preview-image"
                   src={rcsIosPreview ? smsMobileIos : smsMobileAndroid}
                   alt={formatMessage(messages.previewGenerated)}
                 />
                 {renderRcsPreviewContent()}
-              </CapRow>
+              </div>
                 
             )}
             {channel?.toUpperCase() === ZALO && (
@@ -1630,4 +1515,4 @@ TemplatePreview.propTypes = {
   rcsOrientation: PropTypes.string,
 };
 
-export default (injectIntl(TemplatePreview));
+export default (injectIntl(TemplatePreview));

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

@@ -2,9 +2,6 @@ import React from 'react';
 import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
 
 import { TemplatePreview } from '../index';
-import { RCS } from '../../../v2Containers/CreativesContainer/constants';
-import whatsappImageEmptyPreview from '../assets/images/empty_image_preview.svg';
-import whatsappVideoEmptyPreview from '../assets/images/empty_video_preview.svg';
 
 describe('Test Templates container', () => {
   let renderedComponent;
@@ -72,143 +69,4 @@ describe('Test Templates container', () => {
     });
     expect(renderedComponent).toMatchSnapshot();
   });
-
-  describe('RCS carousel preview branches', () => {
-    const buildRcsContent = (cards) => ({
-      rcsPreviewContent: {
-        carouselData: cards,
-      },
-    });
-
-    const getNodesByClassName = (className) =>
-      renderedComponent.findWhere((node) => node.prop('className') === className);
-
-    it('renders image and video cards with proper media-specific markup', () => {
-      renderFunction(
-        RCS,
-        buildRcsContent([
-          {
-            mediaType: 'image',
-            imageSrc: 'https://example.com/image-card.jpg',
-            bodyText: 'image body',
-            suggestions: [],
-          },
-          {
-            mediaType: 'video',
-            videoPreviewImg: 'https://example.com/video-thumb.jpg',
-            bodyText: 'video body',
-            suggestions: [],
-          },
-        ]),
-        '',
-        0,
-      );
-
-      // Video card should render tooltip/video icon path; image-only card should not.
-      expect(renderedComponent.find('CapTooltip')).toHaveLength(1);
-      expect(
-        renderedComponent.findWhere((node) => node.prop('className') === 'video-icon')
-      ).toHaveLength(1);
-
-      // Both cards render media containers.
-      expect(
-        renderedComponent.findWhere((node) => node.prop('className') === 'whatsapp-image')
-      ).toHaveLength(2);
-    });
-
-    it('renders per-card suggestions only for cards that provide suggestions', () => {
-      renderFunction(
-        RCS,
-        buildRcsContent([
-          {
-            mediaType: 'image',
-            imageSrc: 'https://example.com/with-suggestions.jpg',
-            bodyText: 'has suggestions',
-            suggestions: [
-              { type: 'QUICK_REPLY', text: 'Reply 1' },
-              { type: 'CTA', text: 'Visit' },
-            ],
-          },
-          {
-            mediaType: 'image',
-            imageSrc: 'https://example.com/no-suggestions.jpg',
-            bodyText: 'no suggestions',
-            suggestions: [],
-          },
-        ]),
-        '',
-        0,
-      );
-
-      // Suggestion labels/icons should be rendered only from first card.
-      expect(getNodesByClassName('rcs-cta-preview')).toHaveLength(2);
-      expect(getNodesByClassName('whatsapp-divider')).not.toHaveLength(0);
-    });
-
-    it('falls back to empty preview assets when image/video media src is missing', () => {
-      renderFunction(
-        RCS,
-        buildRcsContent([
-          {
-            mediaType: 'image',
-            bodyText: 'fallback image',
-            suggestions: [],
-          },
-          {
-            mediaType: 'video',
-            bodyText: 'fallback video',
-            suggestions: [],
-          },
-        ]),
-        '',
-        0,
-      );
-
-      const mediaImageNodes = renderedComponent.findWhere(
-        (node) => node.name() === 'CapImage' && node.prop('className') === 'whatsapp-image'
-      );
-      const mediaSrcs = mediaImageNodes.map((node) => node.prop('src'));
-
-      expect(mediaSrcs).toContain(whatsappImageEmptyPreview);
-      expect(mediaSrcs).toContain(whatsappVideoEmptyPreview);
-    });
-
-    it('generates unique carousel keys using rcs-carousel-<idx>-<bodyText|imageSrc|videoPreviewImg>', () => {
-      renderFunction(
-        RCS,
-        buildRcsContent([
-          {
-            mediaType: 'image',
-            imageSrc: 'https://example.com/one.jpg',
-            bodyText: 'same body',
-            suggestions: [],
-          },
-          {
-            mediaType: 'image',
-            imageSrc: 'https://example.com/two.jpg',
-            bodyText: 'same body',
-            suggestions: [],
-          },
-          {
-            mediaType: 'video',
-            videoPreviewImg: 'https://example.com/three-thumb.jpg',
-            bodyText: 'same body',
-            suggestions: [],
-          },
-        ]),
-        '',
-        0,
-      );
-
-      const cardNodes = getNodesByClassName('message-pop align-left message-pop-carousel rcs-carousel-card');
-      const keys = cardNodes.map((node) => node.key());
-
-      expect(keys).toEqual([
-        'rcs-carousel-0-same body',
-        'rcs-carousel-1-same body',
-        'rcs-carousel-2-same body',
-      ]);
-      expect(new Set(keys).size).toBe(keys.length);
-    });
-  });
 });

package/v2Components/TestAndPreviewSlidebox/CustomValuesEditor.js

@@ -88,12 +88,12 @@ const CustomValuesEditor = ({
                 </CapLabel>
               </CapRow>
               {requiredTags.map((tag) => (
-                <CapRow key={tag.fullPath} type="flex" noWrap className="value-row">
-                  <CapRow type="flex" className="tag-name">
+                <CapRow key={tag.fullPath} className="value-row">
+                  <CapRow className="tag-name">
                     {tag.fullPath}
                     <span className="required-tag-indicator">*</span>
                   </CapRow>
-                  <CapRow type="flex" className="tag-input">
+                  <CapRow className="tag-input">
                     <CapInput
                       type="text"
                       isRequired
@@ -107,9 +107,9 @@ const CustomValuesEditor = ({
                 </CapRow>
               ))}
               {optionalTags.map((tag) => (
-                <CapRow key={tag.fullPath} type="flex" noWrap className="value-row">
-                  <CapRow type="flex" className="tag-name">{tag.fullPath}</CapRow>
-                  <CapRow type="flex" className="tag-input">
+                <CapRow key={tag.fullPath} className="value-row">
+                  <CapRow className="tag-name">{tag.fullPath}</CapRow>
+                  <CapRow className="tag-input">
                     <CapInput
                       type="text"
                       className="tag-input-field"

package/v2Components/TestAndPreviewSlidebox/index.js

@@ -18,7 +18,7 @@ import injectReducer from '../../utils/injectReducer';
 import injectSaga from '../../utils/injectSaga';
 
 import CommonTestAndPreview from '../CommonTestAndPreview';
-import { CHANNELS, RCS_SMS_FALLBACK_VAR_MAPPED_PROP } from '../CommonTestAndPreview/constants';
+import { CHANNELS } from '../CommonTestAndPreview/constants';
 import * as commonTestAndPreviewActions from '../CommonTestAndPreview/actions';
 import { commonTestAndPreviewSaga } from '../CommonTestAndPreview/sagas';
 import commonTestAndPreviewReducer from '../CommonTestAndPreview/reducer';
@@ -78,16 +78,6 @@ TestAndPreviewSlidebox.propTypes = {
   content: PropTypes.string,
   beeInstance: PropTypes.object,
   currentTab: PropTypes.number,
-  smsFallbackContent: PropTypes.shape({
-    templateContent: PropTypes.string,
-    senderId: PropTypes.string,
-    templateName: PropTypes.string,
-    [RCS_SMS_FALLBACK_VAR_MAPPED_PROP]: PropTypes.object,
-  }),
-  /** Passed to CommonTestAndPreview for RCS test-meta resolution (slot semantics vs full-mode). */
-  rcsTestPreviewOptions: PropTypes.shape({
-    isLibraryMode: PropTypes.bool,
-  }),
   // Redux props are passed through
   actions: PropTypes.object.isRequired,
   extractedTags: PropTypes.array.isRequired,
@@ -119,12 +109,10 @@ TestAndPreviewSlidebox.defaultProps = {
   currentTab: 1,
   messageMetaConfigId: null,
   prefilledValues: {},
-  rcsTestPreviewOptions: undefined,
   senderDetailsByChannel: {},
   wecrmAccounts: [],
   isLoadingSenderDetails: false,
   orgUnitId: -1,
-  smsFallbackContent: null,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Components/TestAndPreviewSlidebox/sagas.js

@@ -34,7 +34,6 @@ import {
   GET_PREFILLED_VALUES_SUCCESS,
   GET_PREFILLED_VALUES_FAILURE,
 } from './constants';
-import { extractPreviewFromLiquidResponse } from '../CommonTestAndPreview/previewApiUtils';
 
 // Search Customers Saga
 export function* searchCustomersSaga(action) {
@@ -81,12 +80,11 @@ export function* updatePreviewSaga(action) {
     const customValues = action.payload.resolvedTags;
 
     const response = yield call(Api.updateEmailPreview, action.payload);
-    const previewPayload = extractPreviewFromLiquidResponse(response);
-    if (previewPayload) {
+    if (response?.data) {
       yield put({
         type: UPDATE_PREVIEW_SUCCESS,
         payload: {
-          previewData: previewPayload,
+          previewData: response.data,
           customValues, // Pass custom values to be preserved
         },
       });
@@ -223,13 +221,8 @@ export function* createMessageMetaSaga(action) {
 export function* getPrefilledValuesSaga(action) {
   try {
     const response = yield call(Api.updateEmailPreview, action.payload);
-    const body =
-      response?.data !== undefined && response?.data !== null
-        ? response.data
-        : response;
-    const resolvedTagValues = body?.resolvedTagValues;
-    if (resolvedTagValues != null) {
-      yield put({ type: GET_PREFILLED_VALUES_SUCCESS, payload: { values: resolvedTagValues } });
+    if (response?.data) {
+      yield put({ type: GET_PREFILLED_VALUES_SUCCESS, payload: { values: response?.data?.resolvedTagValues } });
     } else {
       yield put({ type: GET_PREFILLED_VALUES_FAILURE, payload: { error: response.error || 'Failed to fetch prefilled values' } });
     }

package/v2Components/TestAndPreviewSlidebox/tests/saga.test.js

@@ -136,9 +136,7 @@ describe('TestAndPreviewSlidebox Sagas', () => {
   describe('updatePreviewSaga', () => {
     it('should handle successful preview update', () => {
       const mockResponse = {
-        data: {
-          resolvedBody: 'Test Preview Data',
-        },
+        data: 'Test Preview Data',
       };
       const customValues = { test: 'value' };
       return expectSaga(sagas.updatePreviewSaga, {

package/v2Containers/Cap/constants.js

@@ -56,6 +56,7 @@ export const SUCCESS = 'SUCCESS';
 export const FAILURE = 'FAILURE';
 
 export const ENABLE_PRODUCT_SUPPORT_VIDEOS = 'ENABLE_PRODUCT_SUPPORT_VIDEOS';
+export const ENABLE_NEW_LEFT_NAVIGATION = 'ENABLE_NEW_LEFT_NAVIGATION';
 export const DEFAULT = 'default';
 export const DEFAULT_MODULE = 'creatives';