@capillarytech/creatives-library 8.0.349 → 8.0.351-0

package/constants/unified.js

@@ -52,6 +52,7 @@ export const EXTENDED_TAG = 'ExtendedTagMessage';
 export const BADGES_UI_ENABLED = 'BADGES_UI_ENABLED';
 export const JP_LOCALE_HIDE_FEATURE = 'JP_LOCALE_HIDE_FEATURE';
 export const ENABLE_WECHAT = 'ENABLE_WECHAT';
+export const ENABLE_CREATIVES_ARCHIVAL = 'ENABLE_CREATIVES_ARCHIVAL';
 export const ENABLE_WEBPUSH = 'ENABLE_WEBPUSH';
 export const ENABLE_CUSTOMER_BARCODE_TAG = 'ENABLE_CUSTOMER_BARCODE_TAG';
 export const EMAIL_UNSUBSCRIBE_TAG_MANDATORY = 'EMAIL_UNSUBSCRIBE_TAG_MANDATORY';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.349",
+  "version": "8.0.351-0",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/utils/common.js

@@ -27,6 +27,7 @@ import {
   ENABLE_NEW_MPUSH,
   ENABLE_NEW_EDITOR_FLOW_INAPP,
   SUPPORT_ENGAGEMENT_MODULE,
+  ENABLE_CREATIVES_ARCHIVAL,
 } from '../constants/unified';
 import { apiMessageFormatHandler } from './commonUtils';
 
@@ -122,6 +123,11 @@ export const hasWechatFeatureEnabled = Auth.hasFeatureAccess.bind(
   ENABLE_WECHAT,
 );
 
+export const hasCreativesArchivalEnabled = Auth.hasFeatureAccess.bind(
+  null,
+  ENABLE_CREATIVES_ARCHIVAL,
+);
+
 export const hasWebPushFeatureEnabled = Auth.hasFeatureAccess.bind(
   null,
   ENABLE_WEBPUSH,

package/v2Components/CommonTestAndPreview/UnifiedPreview/WhatsAppPreviewContent.js

@@ -18,7 +18,7 @@ import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import { ANDROID, IOS } from '../constants';
 import messages from '../messages';
 import { getWhatsappQuickReply, getWhatsappCarouselButtonView } from '../../../v2Containers/Whatsapp/utils';
-import { QUICK_REPLY, PHONE_NUMBER, WHATSAPP_CATEGORIES } from '../../../v2Containers/Whatsapp/constants';
+import { QUICK_REPLY, PHONE_NUMBER, WHATSAPP_CATEGORIES, TEMPLATE_VARIABLE_REGEX } from '../../../v2Containers/Whatsapp/constants';
 import videoPlay from '../../../assets/videoPlay.svg';
 import whatsappImageEmptyPreview from '../../TemplatePreview/assets/images/empty_image_preview.svg';
 import whatsappVideoEmptyPreview from '../../TemplatePreview/assets/images/empty_video_preview.svg';
@@ -27,6 +27,8 @@ import whatsappVideoEmptyPreview from '../../TemplatePreview/assets/images/empty
 const whatsappMobileAndroid = require('../../../assets/whatsapp_android.png');
 const whatsappMobileIos = require('../../../assets/whatsapp_ios.png');
 
+const { CapLabelInline } = CapLabel;
+
 const WhatsAppPreviewContent = ({
   content,
   device,
@@ -214,11 +216,21 @@ const WhatsAppPreviewContent = ({
 
         {/* Image Preview */}
         {content?.whatsappImageSrc && (
-          <CapImage
-            src={content.whatsappImageSrc}
-            className="whatsapp-image"
-            alt={formatMessage(messages.previewGenerated)}
-          />
+          TEMPLATE_VARIABLE_REGEX.test(content.whatsappImageSrc) ? (
+            <CapRow className="whatsapp-image-url-placeholder">
+              <CapIcon type="picture" size="s" className="whatsapp-image-url-placeholder-icon" />
+              <CapLabelInline type="label2" className="whatsapp-image-url-placeholder-text">
+                {content.whatsappImageSrc}
+              </CapLabelInline>
+            </CapRow>
+          ) : (
+            <CapImage
+              src={content.whatsappImageSrc}
+              className="whatsapp-image"
+              alt={formatMessage(messages.previewGenerated)}
+              onError={(e) => { e.target.src = whatsappImageEmptyPreview; }}
+            />
+          )
         )}
 
         {/* Video Preview */}

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -940,6 +940,33 @@
       }
     }
 
+    .whatsapp-image-url-placeholder {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: $CAP_SPACE_08;
+      width: 100%;
+      min-height: 5rem;
+      max-height: 8.786rem;
+      margin-bottom: $CAP_SPACE_04;
+      background-color: $CAP_G09;
+      border-radius: $CAP_SPACE_04;
+      padding: $CAP_SPACE_08;
+
+      .whatsapp-image-url-placeholder-icon {
+        color: $CAP_G05;
+        font-size: 1.5rem;
+      }
+
+      .whatsapp-image-url-placeholder-text {
+        font-size: $FONT_SIZE_S;
+        color: $CAP_G04;
+        text-align: center;
+        word-break: break-all;
+      }
+    }
+
     .whatsapp-image {
       width: 100%;
       max-height: 8.786rem;

package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/WhatsAppPreviewContent.test.js

@@ -26,6 +26,7 @@ jest.mock('../../../../v2Containers/Whatsapp/constants', () => ({
   WHATSAPP_CATEGORIES: {
     authentication: 'authentication',
   },
+  TEMPLATE_VARIABLE_REGEX: /\{\{.*?\}\}/,
 }));
 
 // Convert messages object to format expected by IntlProvider
@@ -238,6 +239,53 @@ describe('WhatsAppPreviewContent', () => {
       expect(image.getAttribute('src')).toBe('https://image.url');
     });
 
+    it('should render placeholder when whatsappImageSrc is a template variable', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          templateMsg: 'Message',
+          whatsappImageSrc: '{{imageUrl}}',
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelector('.whatsapp-image-url-placeholder')).toBeTruthy();
+      expect(container.querySelector('.whatsapp-image-url-placeholder-icon')).toBeTruthy();
+      expect(container.querySelector('.whatsapp-image-url-placeholder-text').textContent).toBe('{{imageUrl}}');
+      expect(container.querySelector('img.whatsapp-image')).toBeFalsy();
+    });
+
+    it('should fall back to empty preview image when image fails to load', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          templateMsg: 'Message',
+          whatsappImageSrc: 'https://broken.url/image.jpg',
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      const image = container.querySelector('img.whatsapp-image');
+      expect(image).toBeTruthy();
+      expect(image.getAttribute('src')).toBe('https://broken.url/image.jpg');
+
+      // Trigger onError to swap src to fallback
+      const errorEvent = new Event('error');
+      image.dispatchEvent(errorEvent);
+
+      expect(image.getAttribute('src')).not.toBe('https://broken.url/image.jpg');
+    });
+
     it('should render video preview when whatsappVideoPreviewImg is present', () => {
       const props = {
         ...defaultProps,

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -816,6 +816,27 @@
     }
   }
 
+  .whatsapp-image-url-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: $CAP_G09; 
+    border-radius: $CAP_SPACE_04;
+    width: 100%;
+    min-height: 5rem;
+    max-height: 8.786rem;
+    margin-bottom: $CAP_SPACE_04;
+    .whatsapp-image-url-placeholder-text {
+      font-size: 0.786rem;
+      color: $CAP_G04;
+      margin-top: $CAP_SPACE_04;
+      text-align: center;
+      word-break: break-all;
+      padding: 0 $CAP_SPACE_04;
+    }
+  }
+
   .msg-container-carousel {
     display: flex;
     flex-direction: column;

package/v2Components/TemplatePreview/index.js

@@ -48,7 +48,7 @@ import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP, VIDEO } from
 import CapFacebookPreview from '../../v2Containers/CapFacebookPreview';
 import WhatsappStatusContainer from '../WhatsappStatusContainer';
 import { getWhatsappQuickReply, getWhatsappCarouselButtonView } from '../../v2Containers/Whatsapp/utils';
-import { QUICK_REPLY, WHATSAPP_CATEGORIES, PHONE_NUMBER } from '../../v2Containers/Whatsapp/constants';
+import { QUICK_REPLY, WHATSAPP_CATEGORIES, PHONE_NUMBER, TEMPLATE_VARIABLE_REGEX } from '../../v2Containers/Whatsapp/constants';
 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';
@@ -66,6 +66,8 @@ const lineVideoPlaceholder = require('../../assets/rich-video-placeholder.svg');
 const androidPushMessagePhone = require('./assets/images/Android_With_date_and_time.svg');
 const iPhonePushMessagePhone = require('./assets/images/iOS_With_date_and_time.svg');
 
+const { CapLabelInline } = CapLabel;
+
 export class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   onPreviewContentClicked = (channel) => {
     const IOSContent = (this.props.templateDataRaw && this.props.templateDataRaw.versions.base.IOS) ||
@@ -1194,11 +1196,21 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                         {content?.showUrlPreview
                           && renderUrlPreview(content?.metaTagsDetails)}
                         {content?.whatsappImageSrc && (
-                          <CapImage
-                            src={content.whatsappImageSrc}
-                            className="whatsapp-image"
-                            alt={formatMessage(messages.previewGenerated)}
-                          />
+                          TEMPLATE_VARIABLE_REGEX.test(content.whatsappImageSrc) ? (
+                            <CapRow className="whatsapp-image-url-placeholder">
+                              <CapIcon type="picture" size="s" className="whatsapp-image-url-placeholder-icon" />
+                              <CapLabelInline type="label2" className="whatsapp-image-url-placeholder-text">
+                                {content.whatsappImageSrc}
+                              </CapLabelInline>
+                            </CapRow>
+                          ) : (
+                            <CapImage
+                              src={content.whatsappImageSrc}
+                              className="whatsapp-image"
+                              alt={formatMessage(messages.previewGenerated)}
+                              onError={(e) => { e.target.src = whatsappImageEmptyPreview; }}
+                            />
+                          )
                         )}
                         {content?.whatsappVideoPreviewImg && (
                           <CapTooltip

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

@@ -43,6 +43,7 @@ exports[`Test Templates container Should render correct preview component for wh
               <CapImage
                 alt="Preview is being generated"
                 className="whatsapp-image"
+                onError={[Function]}
                 src="https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg"
               />
               You have received {{1}} points

package/v2Containers/CreativesContainer/index.js

@@ -50,7 +50,7 @@ import { RCS_STATUSES } from '../Rcs/constants';
 import { CREATIVE } from '../Facebook/constants';
 import { LOYALTY } from '../App/constants';
 import {
-  WHATSAPP_STATUSES, WHATSAPP_MEDIA_TYPES, PHONE_NUMBER, URL,
+  WHATSAPP_STATUSES, WHATSAPP_MEDIA_TYPES, PHONE_NUMBER, URL, ADD_IMAGE_URL_PREVIEW_MARKER,
 } from '../Whatsapp/constants';
 import { updateImagesInHtml } from '../../utils/cdnTransformation';
 
@@ -260,7 +260,7 @@ export class Creatives extends React.Component {
   };
 
   onEditTemplate = () => {
-    if (this.props.templateData?.isArchived) {
+    if (commonUtil.hasCreativesArchivalEnabled() && this.props.templateData?.isArchived) {
       CapNotification.error({ message: this.props.intl.formatMessage(messages.cannotEditArchivedTemplate) });
       return;
     }
@@ -688,6 +688,8 @@ export class Creatives extends React.Component {
           switch (mediaType) {
             case (WHATSAPP_MEDIA_TYPES.IMAGE):
               mediaParams.imageUrl = url;
+              // Detect isAddImageUrl from previewUrl marker (previewUrl is unused for IMAGE type)
+              mediaParams.isAddImageUrl = previewUrl === ADD_IMAGE_URL_PREVIEW_MARKER;
               break;
             case (WHATSAPP_MEDIA_TYPES.VIDEO):
               mediaParams.videoUrl = url;
@@ -1146,6 +1148,7 @@ export class Creatives extends React.Component {
               headerTemplate = '',
             } = {},
             isPreviewUrl = false,
+            isAddImageUrl = false,
             carouselData = [],
           } = cloneDeep(versions.base.content.whatsapp);
 
@@ -1182,6 +1185,11 @@ export class Creatives extends React.Component {
           switch (mediaType) {
             case (WHATSAPP_MEDIA_TYPES.IMAGE):
               whatsappMedia.url = imageUrl;
+              // previewUrl is unused for IMAGE type — reuse it to persist isAddImageUrl flag
+              // without adding any new field that the backend would reject
+              if (isAddImageUrl) {
+                whatsappMedia.previewUrl = ADD_IMAGE_URL_PREVIEW_MARKER;
+              }
               break;
             case (WHATSAPP_MEDIA_TYPES.VIDEO):
               whatsappMedia.url = videoUrl;
@@ -2140,7 +2148,7 @@ export class Creatives extends React.Component {
               onSave={this.saveMessage}
               onDiscard={this.discardMessage}
               onEditTemplate={this.onEditTemplate}
-              isTemplateArchived={!!(this.props.templateData && this.props.templateData.isArchived)}
+              isTemplateArchived={!!(commonUtil.hasCreativesArchivalEnabled() && this.props.templateData && this.props.templateData.isArchived)}
               slidBoxContent={slidBoxContent}
               onCreateNextStep={this.onCreateNextStep}
               currentChannel={currentChannel.toUpperCase()}

package/v2Containers/Templates/_templates.scss

@@ -1216,6 +1216,7 @@
   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

@@ -1938,9 +1938,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       // Archive eligibility per template: Zalo never; WhatsApp/RCS not when pending/awaiting
       const cardWhatsappStatus = get(template, `versions.base.content.${WHATSAPP_LOWERCASE}.status`, '');
       const cardRcsStatus = get(template, 'versions.base.content.RCS.rcsContent.cardContent[0].Status', '');
-      const isCardArchiveEligible = this.isChannelArchiveEligible(currentChannel, cardWhatsappStatus, cardRcsStatus);
-      const isArchivedMode = get(this.props, 'Templates.isArchivedMode', false);
-      const isAnyArchiveInProgress = !!(get(this.props, 'Templates.archiveInProgress') || get(this.props, 'Templates.unarchiveInProgress') || get(this.props, 'Templates.bulkArchiveInProgress') || get(this.props, 'Templates.bulkUnarchiveInProgress'));
+      const isArchivalEnabled = commonUtil.hasCreativesArchivalEnabled();
+      const isCardArchiveEligible = isArchivalEnabled && this.isChannelArchiveEligible(currentChannel, cardWhatsappStatus, cardRcsStatus);
+      const isArchivedMode = isArchivalEnabled && get(this.props, 'Templates.isArchivedMode', false);
+      const isAnyArchiveInProgress = isArchivalEnabled && !!(get(this.props, 'Templates.archiveInProgress') || get(this.props, 'Templates.unarchiveInProgress') || get(this.props, 'Templates.bulkArchiveInProgress') || get(this.props, 'Templates.bulkUnarchiveInProgress'));
       const templateData = {
         key: `${currentChannel}-card-${template?.name}`,
         title: (
@@ -2077,7 +2078,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                     </CapMenu.Item>
                   )}
                 {/* Archive/Unarchive menu item (full mode only, not for Zalo, not for WhatsApp/RCS awaiting/pending) */}
-                {(() => {
+                {commonUtil.hasCreativesArchivalEnabled() && (() => {
                   const channelUp = this.state.channel.toUpperCase();
                   if (!this.isChannelArchiveEligible(channelUp, status, rcsStatus)) return null;
                   return !template?.isArchived ? (
@@ -2626,11 +2627,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     
     const noLoaderAndSearchText = isEmpty(this.state.searchText) && !isLoading;
 
-    const isArchivedModeLocal = get(this.props, 'Templates.isArchivedMode', false);
+    const isArchivalEnabledLocal = commonUtil.hasCreativesArchivalEnabled();
+    const isArchivedModeLocal = isArchivalEnabledLocal && get(this.props, 'Templates.isArchivedMode', false);
     const selectedIdsLocal = get(this.props, 'Templates.selectedTemplateIds', []);
     const selectedIdsArrayLocal = selectedIdsLocal && typeof selectedIdsLocal.toJS === 'function' ? selectedIdsLocal.toJS() : (Array.isArray(selectedIdsLocal) ? selectedIdsLocal : []);
     const selectedCountLocal = selectedIdsArrayLocal.length;
-    const hasSelectionLocal = this.props.isFullMode && selectedCountLocal > 0;
+    const hasSelectionLocal = isArchivalEnabledLocal && this.props.isFullMode && selectedCountLocal > 0;
 
     return (<div>
       {[WECHAT, MOBILE_PUSH, WEBPUSH, INAPP, WHATSAPP, ZALO, RCS].includes(currentChannel) && this.showAccountName()}
@@ -3840,7 +3842,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               <span className="template-name" style={{ fontWeight: `${this.state.channel.toLowerCase() === 'wechat' ? '400' : '600'}` }}>
                 { template && template.versions && template.versions.history && template.versions.history.length > 1 && this.state.channel.toLowerCase() !== 'mobilepush' && <i style={{fontSize: '16px', margin: '0 8px 0 0', verticalAlign: 'middle'}} className="material-icons">filter_none</i>}
                 {template?.name}
-                {template.isArchived && <CapColoredTag tagColor={CAP_G08} tagTextColor={CAP_G05} className="archived-tag">{this.props.intl.formatMessage(messages.archivedTag)}</CapColoredTag>}
+                {commonUtil.hasCreativesArchivalEnabled() && template.isArchived && <CapColoredTag tagColor={CAP_G08} tagTextColor={CAP_G05} className="archived-tag">{this.props.intl.formatMessage(messages.archivedTag)}</CapColoredTag>}
               </span>
               {this.props.location.query.type !== EMBEDDED && <CapPopover
                 trigger="click"
@@ -3851,7 +3853,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                         {this.props.intl.formatMessage(messages.duplicateButton)}
                       </CapButton>
                     </div>}
-                    {this.props.isFullMode && isTemplateArchiveEligible && !template.isArchived && <div className="popover-action-container">
+                    {commonUtil.hasCreativesArchivalEnabled() && this.props.isFullMode && isTemplateArchiveEligible && !template.isArchived && <div className="popover-action-container">
                       <CapButton
                         type="link"
                         onClick={() => this.handleTemplateArchiveAction({ templateId: template._id, templateName: template.name })}
@@ -3861,7 +3863,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                         <CapLabel.CapLabelInline type="label1">{this.props.intl.formatMessage(messages.archiveButton)}</CapLabel.CapLabelInline>
                       </CapButton>
                     </div>}
-                    {this.props.isFullMode && isTemplateArchiveEligible && template.isArchived && <div className="popover-action-container">
+                    {commonUtil.hasCreativesArchivalEnabled() && this.props.isFullMode && isTemplateArchiveEligible && template.isArchived && <div className="popover-action-container">
                       <CapButton
                         type="link"
                         onClick={() => this.handleTemplateArchiveAction({ templateId: template._id, templateName: template.name, isUnarchive: true })}
@@ -4478,10 +4480,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (([WHATSAPP_LOWERCASE, ZALO_LOWERCASE, RCS_LOWERCASE].includes(this.state?.channel?.toLocaleLowerCase()) && isEmpty(this.state?.hostName))) {
       isfilterContentVisisble = false;
     }
-    const _isArchivedMode = get(this.props, 'Templates.isArchivedMode', false);
+    const _isArchivalEnabled = commonUtil.hasCreativesArchivalEnabled();
+    const _isArchivedMode = _isArchivalEnabled && get(this.props, 'Templates.isArchivedMode', false);
     const _renderSelectedIds = get(this.props, 'Templates.selectedTemplateIds', []);
     const _renderSelectedIdsArray = _renderSelectedIds && typeof _renderSelectedIds.toJS === 'function' ? _renderSelectedIds.toJS() : (Array.isArray(_renderSelectedIds) ? _renderSelectedIds : []);
-    const _renderHasSelection = this.props.isFullMode && _renderSelectedIdsArray.length > 0;
+    const _renderHasSelection = _isArchivalEnabled && this.props.isFullMode && _renderSelectedIdsArray.length > 0;
 
     const filterContent = (( isfilterContentVisisble || [WECHAT, MOBILE_PUSH, INAPP].includes(this.state.channel.toUpperCase())) && <div className="action-container">
       {isfilterContentVisisble && <CapInput.Search
@@ -4650,8 +4653,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           )
             : isfilterContentVisisble && !isWechatEmbedded && !this.props.isDltFromRcs && createButton
         )}
-        {/* More (⋯) menu: full mode only, not archived mode, not Zalo (no archive support), not when selection active */}
-        {!_isArchivedMode && !_renderHasSelection && this.props.isFullMode && this.props.location.query.type !== EMBEDDED && channelLowerCase !== ZALO_LOWERCASE && (
+        {/* More (⋯) menu: full mode only, not archived mode, not Zalo (no archive support), not when selection active, archive flag enabled */}
+        {commonUtil.hasCreativesArchivalEnabled() && !_isArchivedMode && !_renderHasSelection && this.props.isFullMode && this.props.location.query.type !== EMBEDDED && channelLowerCase !== ZALO_LOWERCASE && (
           <CapDropdown
             trigger={['click']}
             overlay={
@@ -4720,8 +4723,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             }
           />
 
-          {/* Archived mode header with back arrow (full mode only) */}
-          {this.props.isFullMode && get(this.props, 'Templates.isArchivedMode', false) && (
+          {/* Archived mode header with back arrow (full mode only, archive flag enabled) */}
+          {commonUtil.hasCreativesArchivalEnabled() && this.props.isFullMode && get(this.props, 'Templates.isArchivedMode', false) && (
             <CapRow type="flex" align="middle" className="archived-mode-header">
               <CapIcon
                 type="back"

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

@@ -831,37 +831,6 @@ exports[`Test Templates container Should render temlates when whatsapp templates
                   >
                     Create new
                   </CapButton>
-                  <CapDropdown
-                    overlay={
-                      <CapMenu>
-                        <withItemHOC
-                          onClick={[Function]}
-                        >
-                          <FormattedMessage
-                            defaultMessage="Archived templates"
-                            id="creatives.containersV2.Templates.archivedTemplates"
-                            values={Object {}}
-                          />
-                        </withItemHOC>
-                      </CapMenu>
-                    }
-                    placement="bottomRight"
-                    trigger={
-                      Array [
-                        "click",
-                      ]
-                    }
-                  >
-                    <CapButton
-                      className="template-listing-more-btn"
-                      isAddBtn={false}
-                      type="flat"
-                    >
-                      <CapIcon
-                        type="more"
-                      />
-                    </CapButton>
-                  </CapDropdown>
                 </div>
               </div>
             </div>
@@ -1282,37 +1251,6 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
                   >
                     Create new
                   </CapButton>
-                  <CapDropdown
-                    overlay={
-                      <CapMenu>
-                        <withItemHOC
-                          onClick={[Function]}
-                        >
-                          <FormattedMessage
-                            defaultMessage="Archived templates"
-                            id="creatives.containersV2.Templates.archivedTemplates"
-                            values={Object {}}
-                          />
-                        </withItemHOC>
-                      </CapMenu>
-                    }
-                    placement="bottomRight"
-                    trigger={
-                      Array [
-                        "click",
-                      ]
-                    }
-                  >
-                    <CapButton
-                      className="template-listing-more-btn"
-                      isAddBtn={false}
-                      type="flat"
-                    >
-                      <CapIcon
-                        type="more"
-                      />
-                    </CapButton>
-                  </CapDropdown>
                 </div>
               </div>
             </div>
@@ -1786,37 +1724,6 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
                   >
                     Create new
                   </CapButton>
-                  <CapDropdown
-                    overlay={
-                      <CapMenu>
-                        <withItemHOC
-                          onClick={[Function]}
-                        >
-                          <FormattedMessage
-                            defaultMessage="Archived templates"
-                            id="creatives.containersV2.Templates.archivedTemplates"
-                            values={Object {}}
-                          />
-                        </withItemHOC>
-                      </CapMenu>
-                    }
-                    placement="bottomRight"
-                    trigger={
-                      Array [
-                        "click",
-                      ]
-                    }
-                  >
-                    <CapButton
-                      className="template-listing-more-btn"
-                      isAddBtn={false}
-                      type="flat"
-                    >
-                      <CapIcon
-                        type="more"
-                      />
-                    </CapButton>
-                  </CapDropdown>
                 </div>
               </div>
             </div>
@@ -2290,37 +2197,6 @@ exports[`Test Templates container Test max templates warning 1`] = `
                   >
                     Create new
                   </CapButton>
-                  <CapDropdown
-                    overlay={
-                      <CapMenu>
-                        <withItemHOC
-                          onClick={[Function]}
-                        >
-                          <FormattedMessage
-                            defaultMessage="Archived templates"
-                            id="creatives.containersV2.Templates.archivedTemplates"
-                            values={Object {}}
-                          />
-                        </withItemHOC>
-                      </CapMenu>
-                    }
-                    placement="bottomRight"
-                    trigger={
-                      Array [
-                        "click",
-                      ]
-                    }
-                  >
-                    <CapButton
-                      className="template-listing-more-btn"
-                      isAddBtn={false}
-                      type="flat"
-                    >
-                      <CapIcon
-                        type="more"
-                      />
-                    </CapButton>
-                  </CapDropdown>
                 </div>
               </div>
             </div>

package/v2Containers/Whatsapp/constants.js

@@ -319,6 +319,14 @@ export const WHATSAPP_MEDIA_TYPES = {
   DOCUMENT: 'DOCUMENT',
   CAROUSEL: 'CAROUSEL',
 };
+
+export const WHATSAPP_IMAGE_SOURCE = {
+  UPLOAD: 'UPLOAD_IMAGE',
+  URL: 'ADD_IMAGE_URL',
+};
+
+export const ADD_IMAGE_URL_PREVIEW_MARKER = '__add_image_url__';
+export const TEMPLATE_VARIABLE_REGEX = /\{\{.*?\}\}/;
 export const NONE = 'NONE';
 export const CTA = 'CTA';
 export const QUICK_REPLY = 'QUICK_REPLY';

package/v2Containers/Whatsapp/index.js

@@ -104,7 +104,8 @@ import {
   VIDEO,
   URL,
   REQUEST,
-  HOST_KARIX
+  HOST_KARIX,
+  WHATSAPP_IMAGE_SOURCE,
 } from './constants';
 import { transformAssetData, transformToVendorFormat, VENDOR_TYPES, resolveCarouselVideoUpdateFields } from '../../utils/vendorDataTransformers';
 import { validateCarouselCards } from '../../utils/commonUtils';
@@ -252,12 +253,15 @@ export const Whatsapp = (props) => {
   const [headerTextAreaId, setHeaderTextAreaId] = useState('');
   const [isHeaderTagValidationError, updateIsHeaderTagValidationError] =
     useState(false);
+  const [imageURLCursorPosition, setImageURLCursorPosition] = useState(0);
   const [showUrlPreview, setShowUrlPreview] = useState(false);
   const [previewUrl, setPreviewUrl] = useState('');
   const [carouselMediaType, setCarouselMediaType] = useState('image');
   const [carouselData, setCarouselData] = useState(CAROUSEL_INITIAL_DATA);
   const [activeIndex, setActiveIndex] = useState(defaultActiveIndex);
   const [carouselValidateTag, setCarouselValidateTag] = useState(false);
+  const [mediaTypeSelection, setMediaTypeSelection] = useState(WHATSAPP_IMAGE_SOURCE.UPLOAD);
+  const [imageURL, setImageURL] = useState('');
   // TestAndPreviewSlidebox state
   const [showTestAndPreviewSlidebox, setShowTestAndPreviewSlidebox] = useState(false);
   const [isTestAndPreviewMode, setIsTestAndPreviewMode] = useState(false);
@@ -364,6 +368,7 @@ export const Whatsapp = (props) => {
         whatsappMedia: { header = '', footer = '', headerVarMapped = [] } = {},
         isPreviewUrl = false,
         carouselData : editCarouselData = [],
+        isAddImageUrl = false,
       } = editContent;
       setTemplateCategory(category);
       setTemplateStatus(status);
@@ -378,6 +383,14 @@ export const Whatsapp = (props) => {
       });
       setWhatsappDocSource(documentUrl);
       setWhatsappDocParams(whatsappDocParams);
+      if (mediaType === WHATSAPP_MEDIA_TYPES.IMAGE) {
+        if (isAddImageUrl) {
+          setMediaTypeSelection(WHATSAPP_IMAGE_SOURCE.URL);
+          setImageURL(imageUrl);
+        } else {
+          setMediaTypeSelection(WHATSAPP_IMAGE_SOURCE.UPLOAD);
+        }
+      }
       if (host === HOST_HAPTIC) {
         updateAssetList(transformToVendorFormat({
           ...assetList,
@@ -800,6 +813,15 @@ export const Whatsapp = (props) => {
     });
   }
 
+  const onImageURLTagSelect = (data) => {
+    const currentURL = imageURL || '';
+    const tag = `{{${data}}}`;
+    const newURL = currentURL.slice(0, imageURLCursorPosition) + tag + currentURL.slice(imageURLCursorPosition);
+    setImageURL(newURL);
+    setWhatsappImageSrc(newURL);
+    setImageURLCursorPosition(imageURLCursorPosition + tag.length);
+  };
+
   //setting the id of currently selected text area, is used onTagSelect
   const setTextAreaId = ({ target: { id } }, type, carouselIndex) => {
     if (type === HEADER_TEXT) {
@@ -1151,6 +1173,9 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
 				);
 			} else {
 				setWhatsappImageSrc(filePath);
+				if (mediaTypeSelection !== WHATSAPP_IMAGE_SOURCE.URL) {
+					setMediaTypeSelection(WHATSAPP_IMAGE_SOURCE.UPLOAD);
+				}
 				if (isHaptic) {
 					setHapticFileHandle(fileHandle);
 				} else {
@@ -1159,7 +1184,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
 			}
       actions.clearWhatsappAsset(0);
     },
-    [whatsappImageSrc, isMediaTypeCarousel, activeIndex, carouselData, isHaptic],
+    [whatsappImageSrc, isMediaTypeCarousel, activeIndex, carouselData, isHaptic, mediaTypeSelection],
   );
 
   const updateOnWhatsappImageReUpload = useCallback(() => {
@@ -1626,8 +1651,10 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     const { whatsappVideoSrc = '', whatsappVideoPreviewImg = '' } = whatsappVideoSrcAndPreview;
     switch (templateMediaType) {
       case WHATSAPP_MEDIA_TYPES.IMAGE:
+        const isImageUrlMode = mediaTypeSelection === WHATSAPP_IMAGE_SOURCE.URL;
         mediaParams = {
           imageUrl: getCdnUrl({ url: whatsappImageSrc, channelName: WHATSAPP }),
+          ...(isImageUrlMode && { isAddImageUrl: true }),
         };
         break;
       case WHATSAPP_MEDIA_TYPES.VIDEO:
@@ -1646,7 +1673,6 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
         break;
     }
 
-    // Add the correct file handle based on host
     if (isHaptic && hapticFileHandle) {
       mediaParams.hapticFileHandle = hapticFileHandle;
     } else if (!isHaptic && karixFileHandle) {
@@ -1758,7 +1784,21 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       type: WHATSAPP,
     });
   };
-  const isMediatypeValid =()=> ((isMediaTypeImage && whatsappImageSrc === "") || (isMediaTypeVideo && whatsappVideoSrcAndPreview?.whatsappVideoSrc === "") || (isMediaTypeDoc && whatsappDocSource === ""));
+  const isMediatypeValid =()=> {
+    if (isMediaTypeImage) {
+      if (mediaTypeSelection === WHATSAPP_IMAGE_SOURCE.URL) {
+        return isEditFlow ? !imageURL?.trim() : !whatsappImageSrc?.trim();
+      }
+      return !whatsappImageSrc?.trim();
+    }
+    if (isMediaTypeVideo) {
+      return !whatsappVideoSrcAndPreview?.whatsappVideoSrc?.trim();
+    }
+    if (isMediaTypeDoc) {
+      return !whatsappDocSource?.trim();
+    }
+    return false;
+  };
 
   const isDisableDone = () => {
     // Snapshot removed
@@ -1835,9 +1875,107 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     return false;
   };
 
+  const renderImageURLComponent = () => (
+    <>
+      {templateStatus === WHATSAPP_STATUSES.approved && !isAuthenticationTemplate && (
+        <CapRow className="whatsapp-render-heading">
+          <CapHeader
+            title={
+              <CapHeading type="h4">
+                {formatMessage(messages.mediaImage)}
+              </CapHeading>
+            }
+            suffix={
+              <TagList
+                label={formatMessage(globalMessages.addLabels)}
+                onTagSelect={onImageURLTagSelect}
+                location={location}
+                tags={tags || []}
+                onContextChange={handleOnTagsContextChange}
+                injectedTags={injectedTags || {}}
+                selectedOfferDetails={selectedOfferDetails}
+                eventContextTags={eventContextTags}
+              />
+            }
+          />
+        </CapRow>
+      )}
+      <CapRow className="whatsapp-image-url-container">
+        <CapInput
+          id="whatsapp-image-url-input"
+          placeholder={formatMessage(messages.imageUrlPlaceholder)}
+          value={imageURL}
+          disabled={isEditFlow && isFullMode}
+          onChange={e => {
+            setImageURL(e.target.value);
+            setWhatsappImageSrc(e.target.value);
+            setImageURLCursorPosition(e.target.selectionStart || e.target.value.length);
+          }}
+          onFocus={(e) => {
+            setImageURLCursorPosition(e.target.selectionStart || e.target.value.length);
+          }}
+          onSelect={(e) => {
+            setImageURLCursorPosition(e.target.selectionStart || e.target.value.length);
+          }}
+        />
+      </CapRow>
+    </>
+  );
+
+  const handleMediaChange = (e) => {
+    if (templateStatus === WHATSAPP_STATUSES.approved || isEditFlow) {
+      return;
+    }
+    setMediaTypeSelection(e.target.value);
+    if (e.target.value === WHATSAPP_IMAGE_SOURCE.UPLOAD) {
+      setImageURL('');
+    } else if (e.target.value === WHATSAPP_IMAGE_SOURCE.URL) {
+      setWhatsappImageSrc('');
+      if (isHaptic) {
+        setHapticFileHandle('');
+      } else {
+        setKarixFileHandle('');
+      }
+    }
+  };
+
   const renderMediaComponent = () => (
     <>
-      {isMediaTypeImage && renderImageComponent()}
+      {isMediaTypeImage && (
+        <CapRow className="whatsapp-dynamic-url-selection-container">
+          <CapHeading type="h4" className="whatsapp-dynamic-url-selection-heading">
+            {formatMessage(messages.mediaImage)}
+          </CapHeading>
+          <CapRadioGroup
+            options={[
+              {
+                value: WHATSAPP_IMAGE_SOURCE.UPLOAD,
+                label: formatMessage(messages.imageSourceUpload),
+              },
+              {
+                value: WHATSAPP_IMAGE_SOURCE.URL,
+                label: (
+                  <CapLabel.CapLabelInline type="label2">
+                    {formatMessage(messages.imageSourceUrl)}{' '}
+                    <CapTooltip
+                      placement="top"
+                      title={formatMessage(messages.imageSourceUrlTooltip)}
+                    >
+                      <CapIcon type="info-circle" size="s" style={{ cursor: 'pointer' }} />
+                    </CapTooltip>
+                  </CapLabel.CapLabelInline>
+                ),
+              },
+            ]}
+            value={mediaTypeSelection}
+            onChange={handleMediaChange}
+            className="whatsapp-media-radio"
+            disabled={templateStatus === WHATSAPP_STATUSES.approved || isEditFlow}
+          />
+        </CapRow>
+      )}
+      {isMediaTypeImage && (mediaTypeSelection === WHATSAPP_IMAGE_SOURCE.UPLOAD || !isEditFlow) && renderImageComponent()}
+      {isMediaTypeImage && mediaTypeSelection === WHATSAPP_IMAGE_SOURCE.URL && isEditFlow && renderImageURLComponent()}
       {isMediaTypeVideo && renderVideoComonent()}
       {isMediaTypeDoc && renderDocumentComponent()}
     </>

package/v2Containers/Whatsapp/index.scss

@@ -9,6 +9,14 @@
     margin-top: $CAP_SPACE_16;
   }
 
+  .whatsapp-dynamic-url-selection-container {
+    margin-bottom: $CAP_SPACE_08;
+    margin-top: $CAP_SPACE_32;
+    .whatsapp-dynamic-url-selection-heading {
+      margin-bottom: $CAP_SPACE_08;
+    }
+  }
+
   .whatsapp-render-heading {
     margin-top: $CAP_SPACE_16;
     margin-bottom: $CAP_SPACE_06;

package/v2Containers/Whatsapp/messages.js

@@ -138,6 +138,22 @@ export default defineMessages({
     id: `${prefix}.mediaCarousel`,
     defaultMessage: 'Carousel',
   },
+  imageSourceUpload: {
+    id: `${prefix}.imageSourceUpload`,
+    defaultMessage: 'Upload image',
+  },
+  imageSourceUrl: {
+    id: `${prefix}.imageSourceUrl`,
+    defaultMessage: 'Dynamic image',
+  },
+  imageSourceUrlTooltip: {
+    id: `${prefix}.imageSourceUrlTooltip`,
+    defaultMessage: 'Post template approval, the image placeholder is replaceable with image URL',
+  },
+  imageUrlPlaceholder: {
+    id: `${prefix}.imageUrlPlaceholder`,
+    defaultMessage: 'Enter image URL',
+  },
   disabledFeatureTooltip: {
     id: `${prefix}.disabledFeatureTooltip`,
     defaultMessage: 'Not yet enabled. Coming soon!',