@capillarytech/creatives-library 8.0.259 → 8.0.260-alpha.0

package/v2Containers/TagList/index.js

@@ -40,7 +40,6 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       tags: [],
       tagsError: false,
       currentContext: null, // Track current context to detect changes
-      hasTriggeredInitialApiCall: false, // Track if we've triggered API call when popover opens
     };
     this.renderTags = this.renderTags.bind(this);
     this.populateTags = this.populateTags.bind(this);
@@ -52,14 +51,6 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
 
   componentDidMount() {
     this.generateTags(this.props);
-    // Trigger initial API call if tags are empty (similar to Email/SMS behavior)
-    const { tags, injectedTags, onContextChange } = this.props;
-    const hasNoTags = (!tags || tags.length === 0) && _.isEmpty(injectedTags);
-    if (hasNoTags && onContextChange) {
-      // Trigger API call with default 'Outbound' context to match CapTagList default
-      // This ensures tags are loaded when component mounts
-      this.getTagsforContext('Outbound');
-    }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -68,27 +59,23 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     // 2. Context change is happening (detected by different tag arrays)
     const { injectedTags: currentInjectedTags, tags: currentTags } = this.props;
     const { injectedTags: nextInjectedTags, tags: nextTags, fetchingSchemaError } = nextProps;
-
+    
     const isInitialLoad = _.isEmpty(currentInjectedTags) && _.isEmpty(currentTags);
     const isContextChange = !_.isEqual(nextTags, currentTags) && !_.isEmpty(currentTags);
-
+    
     if (isInitialLoad || isContextChange) {
       this.setState({loading: true});
     }
-
+    
     // Only reset loading for injectedTags changes if we're not currently loading due to context change
     if (!_.isEqual(nextInjectedTags, currentInjectedTags) && !this.state.loading) {
       this.setState({loading: false});
       this.clearLoadingTimeout();
     }
-
+    
     if (!_.isEqual(nextTags, currentTags)) {
       this.setState({loading: false});
       this.clearLoadingTimeout();
-      // Reset the flag when tags are received, so we can trigger API call again if needed
-      if (nextTags && nextTags.length > 0) {
-        this.setState({ hasTriggeredInitialApiCall: false });
-      }
     }
     if (fetchingSchemaError) {
       this.setState({tagsError: fetchingSchemaError, loading: false});
@@ -99,7 +86,7 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
   componentDidUpdate(prevProps) {
     const { tags, injectedTags, selectedOfferDetails } = this.props;
     const { tags: prevTags, injectedTags: prevInjectedTags, selectedOfferDetails: prevSelectedOfferDetails } = prevProps;
-
+    
     if (tags !== prevTags || injectedTags !== prevInjectedTags || selectedOfferDetails !== prevSelectedOfferDetails) {
       this.generateTags(this.props);
     }
@@ -124,44 +111,17 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
   getTagsforContext = (data) => {
     // Set loading state when context change is requested
     this.setState({loading: true, currentContext: data});
-
+    
     // Set a timeout to prevent infinite loading (fallback safety)
     this.clearLoadingTimeout();
     this.loadingTimeout = setTimeout(() => {
       this.setState({loading: false});
     }, 5000); // Reduced timeout to 5 seconds for better UX
-
+    
     const { onContextChange } = this.props;
-    // Always call onContextChange if available - this triggers the API call
-    // The API call will fetch tags from /meta/TAG endpoint
-    if (onContextChange) {
-      onContextChange(data);
-    } else {
-      console.warn('TagList: onContextChange is not available. API call will not be triggered.');
-    }
+    onContextChange(data);
   }
 
-  handlePopoverVisibilityChange = (visible) => {
-    // When popover opens, trigger API call if tags are empty or if we haven't triggered it yet
-    // This ensures API call happens when user clicks "Add Label" button
-    if (visible && this.props.onContextChange) {
-      const { tags, injectedTags } = this.props;
-      // Check if tags array is empty or if state tags are empty
-      const hasNoTags = (!tags || tags.length === 0) && _.isEmpty(injectedTags);
-      const hasNoStateTags = _.isEmpty(this.state.tags);
-      const hasNotTriggeredApiCall = !this.state.hasTriggeredInitialApiCall;
-
-      // Trigger API call if tags are not loaded yet OR if we haven't triggered it yet
-      if ((hasNoTags || hasNoStateTags || hasNotTriggeredApiCall)) {
-        // Mark that we've triggered the API call
-        this.setState({ hasTriggeredInitialApiCall: true });
-        // Trigger API call with default 'Outbound' context to match CapTagList default
-        // This will call onContextChange which triggers handleOnTagsContextChange in InApp
-        this.getTagsforContext('Outbound');
-      }
-    }
-  };
-
   generateTags = (props) => {
     let tags = {};
     let injectedTags = {};
@@ -189,11 +149,11 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     if (eventContextTags?.length) {
       const TAG_HEADER_MSG_LABEL = this.props.intl.formatMessage(messages.entryEvent);
       eventContextTagsObj.eventContextTags = {
-        "name": TAG_HEADER_MSG_LABEL,
-        "desc": TAG_HEADER_MSG_LABEL,
-        "resolved": true,
+        name: TAG_HEADER_MSG_LABEL,
+        desc: TAG_HEADER_MSG_LABEL,
+        resolved: true,
         'tag-header': true,
-        "subtags": {},
+        subtags: {},
       };
 
       eventContextTags.forEach((tag) => {
@@ -204,11 +164,11 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
         // Initializing the tags profile if it doesn't exist
         if (!eventContextTagsObj?.eventContextTags?.subtags?.[profileId]) {
           eventContextTagsObj.eventContextTags.subtags[profileId] = {
-            "name": profileName,
-            "desc": profileName,
-            "resolved": true,
+            name: profileName,
+            desc: profileName,
+            resolved: true,
             'tag-header': true,
-            "subtags": {},
+            subtags: {},
           };
         }
         // Adding the current tag to the profile group
@@ -241,7 +201,7 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     _.forEach(tagsList, (temp) => {
       const tag = temp.definition;
       const { intl } = this.props;
-      const { locale: userLocale } = intl || {};
+    const { locale: userLocale } = intl || {};
 
       // Check if the tag.value should be skipped based on feature control
       if (_.includes(excludedTags, tag.value)) {
@@ -249,8 +209,8 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       }
       if (!tag['tag-header']) {
         mainTags[tag.value] = {
-          name: tag?.label[userLocale] ? tag?.label[userLocale] : tag?.label?.en,
-          desc: tag?.label[userLocale] ? tag?.label[userLocale] : tag?.label?.en,
+          "name": tag?.label[userLocale] ? tag?.label[userLocale] : tag?.label?.en,
+          "desc": tag?.label[userLocale] ? tag?.label[userLocale] : tag?.label?.en,
         };
       } else if (tag['tag-header'] && mainTags[tag.value]) {
         mainTags[tag.value].subtags = _.concat(mainTags[tag.value].subtags, tag.subtags);
@@ -406,14 +366,12 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
           visibleTaglist={this.props.visibleTaglist}
           hidePopover={this.props.hidePopover}
           onContextChange={this.getTagsforContext}
-          onVisibleChange={this.handlePopoverVisibilityChange}
           moduleFilterEnabled={this.props.moduleFilterEnabled}
           modalProps={this.props.modalProps}
           currentOrgDetails={this.props.currentOrgDetails}
           channel={this.props.channel}
           disabled={this.props.disabled}
           fetchingSchemaError={this?.state?.tagsError}
-          popoverPlacement={this.props.popoverPlacement}
         />
       </div>
     );
@@ -444,7 +402,6 @@ TagList.propTypes = {
   disabled: PropTypes.bool,
   fetchingSchemaError: PropTypes.bool,
   eventContextTags: PropTypes.array,
-  popoverPlacement: PropTypes.string,
   intl: PropTypes.shape({
     formatMessage: PropTypes.func.isRequired,
     locale: PropTypes.string,

package/v2Containers/Templates/_templates.scss

@@ -316,64 +316,6 @@
           }
         }
       }
-    .INAPP {
-      margin-bottom: $CAP_SPACE_12;
-      .inapp-container {
-        margin-top: $CAP_SPACE_24;
-      }
-      // Modal Layout - centered
-      .inapp-modal-layout {
-        position: absolute;
-        display: flex;
-        width: 12rem;
-        top: 10%;
-        left: 10%;
-        bottom: 5%;
-        overflow: hidden;
-        background-color: $CAP_WHITE;
-        border-radius: $CAP_SPACE_08;
-    }
-    
-    // Full Screen Layout
-    .inapp-fullscreen-layout {
-      position: absolute;
-      display: flex;
-      width: 12rem;
-      left: 10%;
-      top: 1%;
-      bottom: 1%;
-      overflow: hidden;
-      background-color: $CAP_WHITE;
-      border-radius: $CAP_SPACE_08;
-    }
-    
-    // Top Banner Layout
-    .inapp-top-banner-layout {
-      position: absolute;
-      display: flex;
-      width: 12rem;
-      left: 10%;
-      top: 1%;
-      bottom: 20%;
-      overflow: hidden;
-      background-color: $CAP_WHITE;
-      border-radius: $CAP_SPACE_08;
-    }
-    
-    // Bottom Banner Layout
-    .inapp-bottom-banner-layout {
-      position: absolute;
-      display: flex;
-      justify-content: center;
-      width: 12rem;
-      left: 10%;
-      top: 50%;
-      bottom: 2%;
-      overflow: hidden;
-      background-color: $CAP_WHITE;
-      border-radius: $CAP_SPACE_08;
-    }
-    }
   }
 
   .WEBPUSH {
@@ -955,8 +897,7 @@
 }
 
 .whatsapp-filters,
-.zalo-filters,
-.inapp-filters {
+.zalo-filters {
   display: flex;
   width: 100%;
   padding-left: 8px;

package/v2Containers/Templates/index.js

@@ -128,14 +128,13 @@ import {
   VIDEO,
   GIF,
 } from '../Whatsapp/constants';
-import { INAPP_LAYOUT_DETAILS, INAPP_MESSAGE_LAYOUT_TYPES, INAPP_MEDIA_TYPES, BIG_HTML, ANDROID, IOS } from '../InApp/constants';
+import { INAPP_LAYOUT_DETAILS } from '../InApp/constants';
 import { ZALO_STATUS_OPTIONS, ZALO_STATUSES } from '../Zalo/constants';
 import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory, getWhatsappCta, getWhatsappQuickReply, getWhatsappAutoFill, getWhatsappCarouselButtonView } from '../Whatsapp/utils';
 import { getRCSContent } from '../Rcs/utils';
 import {RCS_STATUSES} from '../Rcs/constants';
 import zaloMessages from '../Zalo/messages';
 import rcsMessages from '../Rcs/messages';
-import inAppMessages from '../InApp/messages';
 import globalMessages from '../../v2Containers/Cap/messages';
 import { handlePreviewInNewTab } from '../../utils/common';
 
@@ -205,29 +204,6 @@ const SMS_FILTERS = {
   SERVICE_IMPLICIT: 'implicit',
 };
 
-const INAPP_LAYOUT_OPTIONS = [
-  {
-    key: 'popup',
-    value: INAPP_MESSAGE_LAYOUT_TYPES.MODAL,
-    label: <FormattedMessage {...inAppMessages.layoutModal} />,
-  },
-  {
-    key: 'topBanner',
-    value: INAPP_MESSAGE_LAYOUT_TYPES.TOPBANNER,
-    label: <FormattedMessage {...inAppMessages.layoutTopBanner} />,
-  },
-  {
-    key: 'bottomBanner',
-    value: INAPP_MESSAGE_LAYOUT_TYPES.BOTTOMBANNER,
-    label: <FormattedMessage {...inAppMessages.layoutBottomBanner} />,
-  },
-  {
-    key: 'fullScreen',
-    value: INAPP_MESSAGE_LAYOUT_TYPES.FULLSCREEN,
-    label: <FormattedMessage {...inAppMessages.layoutFullScreen} />,
-  },
-];
-
 const WHATSAPP_LOWERCASE = WHATSAPP.toLowerCase();
 const RCS_LOWERCASE = RCS.toLowerCase();
 const SMS_LOWERCASE = SMS.toLowerCase();
@@ -279,7 +255,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       selectedWhatsappStatus: '',
       selectedWhatsappCategory: '',
       selectedZaloStatus: '',
-      selectedInAppLayout: '',
       hostName: '',
       searchedZaloTemplates: [],
       searchingZaloTemplate: false,
@@ -1784,19 +1759,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     return templates;
   }
 
-  filterInAppTemplates = (templates) => {
-    const { selectedInAppLayout } = this.state;
-    if (!selectedInAppLayout) {
-      return templates;
-    }
-    return templates.filter((template) => {
-      const androidBodyType = get(template, 'versions.base.content.ANDROID.bodyType');
-      const iosBodyType = get(template, 'versions.base.content.IOS.bodyType');
-      const inappBodyType = androidBodyType || iosBodyType;
-      return inappBodyType === selectedInAppLayout;
-    });
-  }
-
   filterSMSTemplates = (templates) => {
     const { smsFilter } = this.state;
     if (SMS_FILTERS.ALL === smsFilter) {
@@ -1883,9 +1845,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       case ZALO:
         filteredTemplates = this.filterZaloTemplates(templates);
         break;
-      case INAPP:
-        filteredTemplates = this.filterInAppTemplates(templates);
-        break;
       default:
         break;
     }
@@ -2175,12 +2134,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             templateData.isNewMobilePush = commonUtil.hasNewMobilePushFeatureEnabled();
           }
           break;
-        case INAPP: {
-          // Pass the full template object to CapCustomCard so getInAppContent can extract the data
-          // Similar to how MOBILE_PUSH passes the full template when new feature is enabled
+        case INAPP:
           templateData.content = template;
           break;
-        }
         case WECHAT:
           templateData.content = this.prepareWeChatPreviewData(template);
           break;
@@ -2558,7 +2514,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 return (<div>
       {[WECHAT, MOBILE_PUSH, WEBPUSH, INAPP, WHATSAPP, ZALO, RCS].includes(currentChannel) && this.showAccountName()}
       {filterContent}
-      {[WHATSAPP, ZALO, INAPP,RCS].includes(currentChannel) && this.selectedFilters()}
+      {[WHATSAPP, ZALO,RCS].includes(currentChannel) && this.selectedFilters()}
         {<div>
           {!isEmpty(filteredTemplates) || !isEmpty(this.state.searchText) || !isEmpty(this.props.Templates.templateError) ? (
             <div className={!isEmpty(this.state.searchText) && isEmpty(cardDataList) ? '' : this.isFullMode() ? "v2-pagination-container" : "v2-pagination-container-half"}>
@@ -2773,9 +2729,6 @@ return (<div>
 
   prepareWeChatMappedPreviewData(content, templateTags, tagData) {
     let formattedContent = cloneDeep(content);
-    if (!formattedContent || typeof formattedContent !== 'string') {
-      return formattedContent || '';
-    }
     forEach(templateTags, (tag) => {
       if (tagData[tag].value !== undefined) {
         formattedContent = formattedContent.replace(`{{${tag}.DATA}}`, tagData[tag].value);
@@ -4028,19 +3981,14 @@ return (<div>
   }
 
   removeZaloFilter = () => this.setState({ selectedZaloStatus: null });
-  removeInAppLayoutFilter = () => this.setState({ selectedInAppLayout: '' });
 
   selectedFilters = () => {
-    const { selectedWhatsappStatus, selectedWhatsappCategory, selectedZaloStatus, selectedInAppLayout } = this.state;
+    const { selectedWhatsappStatus, selectedWhatsappCategory, selectedZaloStatus } = this.state;
     const {
       intl: {
         formatMessage,
       },
     } = this.props;
-    const getInAppLayoutLabel = (layoutValue) => {
-      const layoutOption = INAPP_LAYOUT_OPTIONS.find(opt => opt.value === layoutValue);
-      return layoutOption ? layoutOption.label : layoutValue;
-    };
     return (
       <CapRow type="flex" align="middle" className="selected-whatsapp-filters">
         {
@@ -4075,23 +4023,6 @@ return (<div>
             </CapTag>
           ) : null
         }
-        {
-          selectedInAppLayout ? (
-            <CapTag closable onClose={this.removeInAppLayoutFilter}>
-              {formatMessage(messages.layout)}: {getInAppLayoutLabel(selectedInAppLayout)}
-            </CapTag>
-          ) : null
-        }
-        {
-          selectedInAppLayout ? (
-            <CapLink
-              onClick={() => {
-                this.removeInAppLayoutFilter();
-              }}
-              title={this.props.intl.formatMessage(messages.clearAll)}
-            />
-          ) : null
-        }
       </CapRow>
     );
   }
@@ -4102,7 +4033,6 @@ return (<div>
   setLineFilter = (e) => this.setState({lineFilter: e.target.value});
   setSMSFilter = (e) => this.setState({smsFilter: e.target.value});
   setZaloStatus = (value) => this.setState({selectedZaloStatus: value?.item?.props?.value});
-  setInAppLayout = (value) => this.setState({selectedInAppLayout: value?.item?.props?.value});
 
   openCreativesFullMode = () => {
     const channelLowerCase = this.state.channel.toLowerCase();
@@ -4355,21 +4285,6 @@ return (<div>
           )
           : () => null
       }
-      {
-        channel.toUpperCase() === INAPP && (
-          <div className="inapp-filters">
-            <CapSelectFilter
-              placement="bottomLeft"
-              data={INAPP_LAYOUT_OPTIONS}
-              onSelect={this.setInAppLayout}
-              selectedValue={this.state.selectedInAppLayout}
-              placeholder="Layout"
-              showBadge
-              width="120px"
-            />
-          </div>
-        )
-      }
       <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
         {
           this.state?.channel?.toLowerCase() === WHATSAPP_LOWERCASE && (isWhatsappCountExeeded)? (

package/v2Containers/Templates/messages.js

@@ -558,10 +558,6 @@ export default defineMessages({
     id: `${scope}.rcsOnlyApprovedTemplates`,
     defaultMessage: 'Only "Approved" templates are available here, as you can use those templates to create a message.',
   },
-  "layout": {
-    id: `${scope}.layout`,
-    defaultMessage: `Layout`,
-  },
   "status": {
     id: `${scope}.status`,
     defaultMessage: 'Status',

package/v2Containers/WebPush/Create/messages.js

@@ -195,6 +195,14 @@ export default defineMessages({
     id: `${scope}.state`,
     defaultMessage: 'State',
   },
+  previewDisclaimer: {
+    id: `${scope}.previewDisclaimer`,
+    defaultMessage: "For the most accurate desktop preview, switch to full screen under 'Preview in all devices'.",
+  },
+  notificationTime: {
+    id: `${scope}.notificationTime`,
+    defaultMessage: '2:29 PM',
+  },
   templateIdMissingError: {
     id: `${scope}.templateIdMissingError`,
     defaultMessage: 'Unable to save template: Template ID is missing. Please refresh the page and try again.',

package/v2Containers/WebPush/Create/preview/PreviewControls.js

@@ -77,7 +77,7 @@ const PreviewControls = ({
   const renderStateDropdown = useMemo(() => {
     if (isStateDropdownDisabled) {
       return (
-        <div style={{ pointerEvents: 'none', opacity: 0.6 }}>
+        <div className="preview-control-disabled-wrapper">
           {stateDropdownContent}
         </div>
       );
@@ -205,7 +205,7 @@ const PreviewControls = ({
     return (
       <div key={key} className={`preview-control ${className}`}>
         {disabled ? (
-          <div style={{ pointerEvents: 'none', opacity: 0.6 }}>
+          <div className="preview-control-disabled-wrapper">
             {controlContent}
           </div>
         ) : (

package/v2Containers/WebPush/Create/preview/PreviewDisclaimer.js

@@ -1,7 +1,9 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
 import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import messages from '../messages';
 import './preview.scss';
 
 /**
@@ -13,7 +15,7 @@ const PreviewDisclaimer = () => (
   <CapRow className="preview-disclaimer">
     <CapColumn span={24}>
       <CapLabel type="label2" className="disclaimer-text">
-        For the most accurate desktop preview, switch to full screen under &apos;Preview in all devices&apos;.
+        <FormattedMessage {...messages.previewDisclaimer} />
       </CapLabel>
     </CapColumn>
   </CapRow>

package/v2Containers/WebPush/Create/preview/components/AndroidMobileChromeHeader.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 import androidArrowDownIcon from '../assets/android-arrow-down.svg';
+import messages from '../../messages';
 
 const AndroidMobileChromeHeader = ({
   icon,
@@ -17,7 +19,9 @@ const AndroidMobileChromeHeader = ({
     <div className="notification-content android-mobile-chrome-content">
       <div className="notification-title-row">
         <div className="notification-title">{notificationTitle}</div>
-        <div className="notification-time">2:29 PM</div>
+        <div className="notification-time">
+          <FormattedMessage {...messages.notificationTime} />
+        </div>
       </div>
       <div className="notification-body">{notificationBody}</div>
     </div>

package/v2Containers/WebPush/Create/preview/components/AndroidMobileExpanded.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 import androidArrowUpIcon from '../assets/android-arrow-up.svg';
 import { BROWSER_DISPLAY_NAMES_ANDROID } from '../constants';
+import messages from '../../messages';
 
 /**
  * AndroidMobileExpanded Component
@@ -53,7 +55,9 @@ const AndroidMobileExpanded = ({
                 </span>
                 <span className="android-mobile-expanded-domain-time">
                   <span className="android-mobile-expanded-domain">{displayUrl}</span>
-                  <span className="android-mobile-expanded-time">2:29 PM</span>
+                  <span className="android-mobile-expanded-time">
+                  <FormattedMessage {...messages.notificationTime} />
+                </span>
                 </span>
               </div>
             </div>

package/v2Containers/WebPush/Create/preview/components/tests/__snapshots__/AndroidMobileExpanded.test.js.snap

@@ -46,7 +46,11 @@ exports[`AndroidMobileExpanded Basic Rendering should render correctly with defa
               <span
                 className="android-mobile-expanded-time"
               >
-                2:29 PM
+                <FormattedMessage
+                  defaultMessage="2:29 PM"
+                  id="creatives.containersV2.WebPush.notificationTime"
+                  values={Object {}}
+                />
               </span>
             </span>
           </div>

package/v2Containers/WebPush/Create/preview/preview.scss

@@ -28,6 +28,13 @@
     }
   }
 
+  // Wrapper for disabled dropdown (State when Windows, or when stateDropdownDisabled)
+  // Scoped under container to avoid conflicts; keeps controls visible but non-interactive
+  .preview-control-disabled-wrapper {
+    pointer-events: none;
+    opacity: 0.6;
+  }
+
   .preview-controls-compact {
     display: block;
     margin-bottom: 16px;