@capillarytech/creatives-library 8.0.234 → 8.0.236-alpha.0

package/v2Containers/SmsTrai/Edit/tests/__snapshots__/index.test.js.snap

@@ -2281,6 +2281,7 @@ new message content.",
         "email": [Function],
         "facebookPreview": [Function],
         "gallery": [Function],
+        "inApp": [Function],
         "language": [Function],
         "navigationConfig": [Function],
         "previewAndTest": [Function],
@@ -9335,6 +9336,7 @@ new message content.",
         "email": [Function],
         "facebookPreview": [Function],
         "gallery": [Function],
+        "inApp": [Function],
         "language": [Function],
         "navigationConfig": [Function],
         "previewAndTest": [Function],
@@ -16195,6 +16197,7 @@ new message content.",
         "email": [Function],
         "facebookPreview": [Function],
         "gallery": [Function],
+        "inApp": [Function],
         "language": [Function],
         "navigationConfig": [Function],
         "previewAndTest": [Function],
@@ -23055,6 +23058,7 @@ new message content.",
         "email": [Function],
         "facebookPreview": [Function],
         "gallery": [Function],
+        "inApp": [Function],
         "language": [Function],
         "navigationConfig": [Function],
         "previewAndTest": [Function],

package/v2Containers/TagList/index.js

@@ -40,6 +40,7 @@ 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);
@@ -51,6 +52,14 @@ 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) {
@@ -76,6 +85,10 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     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});
@@ -109,6 +122,11 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
   };
 
   getTagsforContext = (data) => {
+    console.log('TagList getTagsforContext called', {
+      data,
+      hasOnContextChange: !!this.props.onContextChange,
+    });
+    
     // Set loading state when context change is requested
     this.setState({loading: true, currentContext: data});
     
@@ -119,9 +137,54 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     }, 5000); // Reduced timeout to 5 seconds for better UX
     
     const { onContextChange } = this.props;
-    onContextChange(data);
+    // Always call onContextChange if available - this triggers the API call
+    // The API call will fetch tags from /meta/TAG endpoint
+    if (onContextChange) {
+      console.log('TagList: Calling onContextChange with data:', data);
+      onContextChange(data);
+    } else {
+      console.warn('TagList: onContextChange is not available. API call will not be triggered.');
+    }
   }
 
+  handlePopoverVisibilityChange = (visible) => {
+    console.log('TagList handlePopoverVisibilityChange called', {
+      visible,
+      hasOnContextChange: !!this.props.onContextChange,
+    });
+    
+    // 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;
+      
+      console.log('TagList: Checking conditions for API call', {
+        hasNoTags,
+        hasNoStateTags,
+        hasNotTriggeredApiCall,
+        willTrigger: (hasNoTags || hasNoStateTags || hasNotTriggeredApiCall),
+      });
+      
+      // 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 });
+        console.log('TagList: Triggering API call with Outbound context');
+        // Trigger API call with default 'Outbound' context to match CapTagList default
+        // This will call onContextChange which triggers handleOnTagsContextChange in InApp
+        this.getTagsforContext('Outbound');
+      } else {
+        console.log('TagList: API call not triggered - conditions not met');
+      }
+    } else {
+      console.log('TagList: API call not triggered - popover not visible or onContextChange not available');
+    }
+  };
+
   generateTags = (props) => {
     let tags = {};
     let injectedTags = {};
@@ -366,6 +429,7 @@ 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}

package/v2Containers/Templates/_templates.scss

@@ -313,6 +313,53 @@
           }
         }
       }
+    .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%;
+        background-color: $CAP_WHITE;
+        border-radius: $CAP_SPACE_08;
+    }
+    
+    // Full Screen Layout
+    .inapp-fullscreen-layout {
+      position: absolute;
+      display: flex;
+      width: 12rem;
+      left: 10%;
+      background-color: $CAP_WHITE;
+      border-radius: $CAP_SPACE_08;
+    }
+    
+    // Top Banner Layout
+    .inapp-top-banner-layout {
+      position: absolute;
+      display: flex;
+      width: 12rem;
+      left: 10%;
+      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%;
+      background-color: $CAP_WHITE;
+      border-radius: $CAP_SPACE_08;
+    }
+    }
   }
 
   .create-new-link{
@@ -695,7 +742,8 @@
 }
 
 .whatsapp-filters,
-.zalo-filters {
+.zalo-filters,
+.inapp-filters {
   display: flex;
   width: 100%;
   padding-left: 8px;

package/v2Containers/Templates/index.js

@@ -125,13 +125,14 @@ import {
   VIDEO,
   GIF,
 } from '../Whatsapp/constants';
-import { INAPP_LAYOUT_DETAILS } from '../InApp/constants';
+import { INAPP_LAYOUT_DETAILS, INAPP_MESSAGE_LAYOUT_TYPES, INAPP_MEDIA_TYPES, BIG_HTML, ANDROID, IOS } 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';
 
@@ -198,6 +199,29 @@ 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();
@@ -248,6 +272,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       selectedWhatsappStatus: '',
       selectedWhatsappCategory: '',
       selectedZaloStatus: '',
+      selectedInAppLayout: '',
       hostName: '',
       searchedZaloTemplates: [],
       searchingZaloTemplate: false,
@@ -782,6 +807,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         const {name, sourceAccountIdentifier, configs } = weCrmAccountsList?.[0] || {};
         if (isSingleAccount) {
           weCrmAccountsList[0].hostName = hostName;
+          this.setState({ selectedAccount: name });
         } else {
           selectedAccount.hostName = hostName;
         }
@@ -1135,6 +1161,19 @@ 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) {
@@ -1221,6 +1260,9 @@ 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;
     }
@@ -1440,9 +1482,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             templateData.isNewMobilePush = commonUtil.hasNewMobilePushFeatureEnabled();
           }
           break;
-        case INAPP:
+        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
           templateData.content = template;
           break;
+        }
         case WECHAT:
           templateData.content = this.prepareWeChatPreviewData(template);
           break;
@@ -1756,7 +1801,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 return (<div>
       {[WECHAT, MOBILE_PUSH, INAPP, WHATSAPP, ZALO].includes(currentChannel) && this.showAccountName()}
       {filterContent}
-      {[WHATSAPP, ZALO].includes(currentChannel) && this.selectedFilters()}
+      {[WHATSAPP, ZALO, INAPP].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"}>
@@ -1966,6 +2011,9 @@ 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);
@@ -2885,6 +2933,7 @@ return (<div>
       fetchingWeCrmAccounts ) &&
     this.state.channel.toLowerCase() === ZALO_LOWERCASE;
     const mobilePushLoader = (((getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'mobilepush');
+    const inAppLoader = (((this.state.selectedAccount !== '' && getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === INAPP_LOWERCASE);
     const emailLoader = (
       (getAllTemplatesInProgress ||
       sendingFile ||
@@ -2901,6 +2950,7 @@ return (<div>
       (lineLoader !== undefined ? lineLoader : false) ||
       (facebookLoader !== undefined ? facebookLoader : false) ||
       (viberLoader !== undefined ? viberLoader : false) ||
+      (inAppLoader !== undefined ? inAppLoader : false) ||
       (rcsLoader !== undefined ? rcsLoader : false);
     return isLoading;
   }
@@ -3134,7 +3184,7 @@ return (<div>
     return (activeMode !== ACCOUNT_CHANGE_MODE &&
     <CapHeader
       title={<CapHeading type="h4">{this.accountNameMessage(channel)}</CapHeading>}
-      description={<><CapHeading type="h3">{selectedAccount} {weCrmAccounts.length > 1 && <CapLink onClick={this.setAccountChangeMode} style={{display: 'inline-block', position: 'relative', top: '3px'}} fontWeight="regular" fontSize="14px" title="change"/>} </CapHeading></>}
+      description={weCrmAccounts.length > 1 && <><CapHeading type="h3">{selectedAccount} <CapLink onClick={this.setAccountChangeMode} style={{display: 'inline-block', position: 'relative', top: '3px'}} fontWeight="regular" fontSize="14px" title="change"/> </CapHeading></>}
       size="regular"
   />);
   }
@@ -3153,14 +3203,19 @@ return (<div>
   }
 
   removeZaloFilter = () => this.setState({ selectedZaloStatus: null });
+  removeInAppLayoutFilter = () => this.setState({ selectedInAppLayout: '' });
 
   selectedFilters = () => {
-    const { selectedWhatsappStatus, selectedWhatsappCategory, selectedZaloStatus } = this.state;
+    const { selectedWhatsappStatus, selectedWhatsappCategory, selectedZaloStatus, selectedInAppLayout } = 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">
         {
@@ -3195,6 +3250,23 @@ 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>
     );
   }
@@ -3205,6 +3277,7 @@ 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();
@@ -3458,6 +3531,21 @@ 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

@@ -526,6 +526,10 @@ 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/Templates/reducer.js

@@ -98,19 +98,32 @@ function templatesReducer(state = initialState, action) {
         .set('weCrmAccountFetchingError', true);
     case types.SET_WECHAT_ACCOUNT:
       return state
-        .set('selectedWeChatAccount', fromJS(action.weChatAccount));
+        .set('selectedWeChatAccount', fromJS(action.weChatAccount))
+        .set('templates', []);
     case types.SET_LINE_ACCOUNT:
-      return state.set('selectedLineAccount', fromJS(action.account));
+      return state
+        .set('selectedLineAccount', fromJS(action.account))
+        .set('templates', []);
     case types.SET_VIBER_ACCOUNT:
-      return state.set('selectedViberAccount', fromJS(action.viberAccount));
+      return state
+        .set('selectedViberAccount', fromJS(action.viberAccount))
+        .set('templates', []);
     case types.SET_WHATSAPP_ACCOUNT:
-      return state.set('selectedWhatsappAccount', fromJS(action.account));
+      return state
+        .set('selectedWhatsappAccount', fromJS(action.account))
+        .set('templates', []);
     case types.SET_ZALO_ACCOUNT:
-      return state.set('selectedZaloAccount', fromJS(action.account));
+      return state
+        .set('selectedZaloAccount', fromJS(action.account))
+        .set('templates', []);
     case types.SET_RCS_ACCOUNT:
-      return state.set('selectedRcsAccount', fromJS(action.rcsAccount));
+      return state
+        .set('selectedRcsAccount', fromJS(action.rcsAccount))
+        .set('templates', []);
     case types.SET_FACEBOOK_ACCOUNT:
-      return state.set('selectedFacebookAccount', fromJS(action.faceBookAccount));
+      return state
+        .set('selectedFacebookAccount', fromJS(action.faceBookAccount))
+        .set('templates', []);
     case types.RESET_ACCOUNT:
       return state
         .remove('selectedWeChatAccount')

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

@@ -390,17 +390,7 @@ exports[`Test Templates container Should render temlates when whatsapp templates
       >
         <div>
           <CapHeader
-            description={
-              <React.Fragment>
-                <CapHeading
-                  type="h3"
-                >
-                  
-                   
-                   
-                </CapHeading>
-              </React.Fragment>
-            }
+            description={false}
             descriptionClass=""
             inline={false}
             size="regular"
@@ -647,17 +637,7 @@ exports[`Test Templates container Should render temlates when whatsapp templates
       >
         <div>
           <CapHeader
-            description={
-              <React.Fragment>
-                <CapHeading
-                  type="h3"
-                >
-                  
-                   
-                   
-                </CapHeading>
-              </React.Fragment>
-            }
+            description={false}
             descriptionClass=""
             inline={false}
             size="regular"
@@ -1072,17 +1052,7 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
       >
         <div>
           <CapHeader
-            description={
-              <React.Fragment>
-                <CapHeading
-                  type="h3"
-                >
-                  
-                   
-                   
-                </CapHeading>
-              </React.Fragment>
-            }
+            description={false}
             descriptionClass=""
             inline={false}
             size="regular"
@@ -1558,17 +1528,7 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
       >
         <div>
           <CapHeader
-            description={
-              <React.Fragment>
-                <CapHeading
-                  type="h3"
-                >
-                  
-                   
-                   
-                </CapHeading>
-              </React.Fragment>
-            }
+            description={false}
             descriptionClass=""
             inline={false}
             size="regular"
@@ -2044,17 +2004,7 @@ exports[`Test Templates container Test max templates warning 1`] = `
       >
         <div>
           <CapHeader
-            description={
-              <React.Fragment>
-                <CapHeading
-                  type="h3"
-                >
-                  
-                   
-                   
-                </CapHeading>
-              </React.Fragment>
-            }
+            description={false}
             descriptionClass=""
             inline={false}
             size="regular"
@@ -2530,17 +2480,7 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
       >
         <div>
           <CapHeader
-            description={
-              <React.Fragment>
-                <CapHeading
-                  type="h3"
-                >
-                  
-                   
-                   
-                </CapHeading>
-              </React.Fragment>
-            }
+            description={false}
             descriptionClass=""
             inline={false}
             size="regular"
@@ -2813,17 +2753,7 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
       >
         <div>
           <CapHeader
-            description={
-              <React.Fragment>
-                <CapHeading
-                  type="h3"
-                >
-                  
-                   
-                   
-                </CapHeading>
-              </React.Fragment>
-            }
+            description={false}
             descriptionClass=""
             inline={false}
             size="regular"
@@ -3070,17 +3000,7 @@ exports[`Test Templates container Test removing single filter 1`] = `
       >
         <div>
           <CapHeader
-            description={
-              <React.Fragment>
-                <CapHeading
-                  type="h3"
-                >
-                  
-                   
-                   
-                </CapHeading>
-              </React.Fragment>
-            }
+            description={false}
             descriptionClass=""
             inline={false}
             size="regular"