@capillarytech/creatives-library 8.0.250-alpha.2 → 8.0.251

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/ChannelTypeIllustration.js

@@ -14,7 +14,7 @@ import inAppIllustration from '@capillarytech/cap-ui-library/assets/images/featu
 import messages from './messages';
 import { FormattedMessage } from 'react-intl';
 import { CapIllustration } from "@capillarytech/cap-ui-library";
-import { MOBILE_PUSH, SMS, EMAIL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS, ZALO, INAPP, WEBPUSH } from '../CreativesContainer/constants';
+import { MOBILE_PUSH, SMS, EMAIL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS, ZALO, INAPP } from '../CreativesContainer/constants';
 
 
 // Configuration object for channel types
@@ -133,18 +133,6 @@ function ChannelTypeIllustration(props) {
       };
     }
 
-    if (type === WEBPUSH) {
-      return {
-        buttonLabel: <FormattedMessage {...messages.newWebPushTemplate} values={{ template: templateText }} />,
-        onClick: createTemplate,
-        illustrationImage: pushIllustration,
-        title: <FormattedMessage {...messages.webPushTitleIllustration} values={{ template: templateText }} />,
-        description: <FormattedMessage {...messages.webPushDescIllustration} />,
-        descriptionPosition: 'bottom',
-        descriptionClassName: 'illustration-desc',
-      };
-    }
-
     // Handle standard channels using configuration
     const config = CHANNEL_CONFIG[type];
     if (!config) {

package/v2Containers/Templates/_templates.scss

@@ -133,20 +133,17 @@
             .ant-card-meta-description{
               display: -webkit-box;
               -webkit-line-clamp: 13;
-              line-clamp: 13;
               -webkit-box-orient: vertical; 
             }
           }
           .truncate-text-with-button{
             .ant-card-meta-description{
             -webkit-line-clamp: 13;
-            line-clamp: 13;
             }
           }
           .truncate-text-with-image{
             .ant-card-meta-description{
             -webkit-line-clamp: 3;
-            line-clamp: 3;
             }
           }
         
@@ -316,131 +313,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 {
-    .cap-custom-card {
-      .ant-card-body {
-        height: 19rem;
-        padding: $CAP_SPACE_16;
-        overflow: hidden;
-
-        .ant-card-meta {
-          height: 100%;
-          
-          .ant-card-meta-description {
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-
-            .sms-template-content.webpush-template-content {
-              height: 100%;
-              overflow: hidden;
-
-              .webpush-template-card {
-                height: 100%;
-                overflow: hidden;
-
-                .webpush-template-meta {
-                  flex-shrink: 0;
-                }
-
-                .webpush-template-text {
-                  flex: 1;
-                  min-height: 0;
-                  overflow: hidden;
-                }
-
-                .webpush-media-image {
-                  max-height: 7.142rem;
-                  flex-shrink: 0;
-                }
-
-                .webpush-template-cta-section {
-                  flex-shrink: 0;
-                  margin-top: $CAP_SPACE_08;
-                  padding-top: $CAP_SPACE_08;
-                  border-top: 1px solid $CAP_G07;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .cap-custom-card.has-hover-option:hover {
-      .sms-template-content.webpush-template-content {
-        opacity: 0.2;
-      }
-    }
-
-    &.no-image .ant-card-meta {
-      background: $CAP_WHITE;
-      padding: $CAP_SPACE_16;
-
-      .ant-card-meta-description {
-        height: 100%;
-      }
-    }
   }
 
   .create-new-link{
@@ -496,136 +368,6 @@
     width: 100%;
 }
 
-.sms-template-content.webpush-template-content {
-  padding: 0;
-  // Font-family override: needed when used in library mode where parent repo's root font-family differs
-  font-family: 'Roboto', open-sans, sans-serif;
-}
-
-.webpush-template-card {
-  display: flex;
-  flex-direction: column;
-
-  .webpush-template-meta {
-    display: flex;
-    align-items: flex-start;
-    gap: $CAP_SPACE_08;
-  }
-
-  .webpush-brand-icon,
-  .webpush-brand-icon-placeholder {
-    width: $CAP_SPACE_20;
-    height: $CAP_SPACE_20;
-    border-radius: 50%;
-    flex-shrink: 0;
-    object-fit: cover;
-  }
-
-  .webpush-brand-icon-placeholder {
-    background-color: $CAP_G07;
-  }
-
-  .webpush-template-text {
-    display: flex;
-    flex-direction: column;
-    gap: $CAP_SPACE_04;
-    width: 100%;
-  }
-
-  .webpush-template-header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: $CAP_SPACE_08;
-  }
-
-  .webpush-template-title {
-    width: 1px; // Required for text truncation with flex: 1
-    font-weight: 600;
-    color: $CAP_G02;
-    font-size: $FONT_SIZE_S;
-    line-height: $CAP_SPACE_16;
-    word-break: break-word;
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .webpush-template-time {
-    color: $CAP_G04;
-    font-size: $FONT_SIZE_VS;
-    line-height: $CAP_SPACE_16;
-    white-space: nowrap;
-    flex-shrink: 0;
-  }
-
-  .webpush-template-message {
-    color: $CAP_G04;
-    font-size: $FONT_SIZE_S;
-    line-height: $CAP_SPACE_16;
-    word-break: break-word;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .webpush-media-image {
-    width: 100%;
-    height: auto;
-    max-height: 8.571rem;
-    border-radius: $CAP_SPACE_08;
-    object-fit: cover;
-    margin-top: $CAP_SPACE_04;
-  }
-
-  .webpush-template-cta-section {
-    display: flex;
-    margin-top: $CAP_SPACE_08;
-    padding-top: $CAP_SPACE_08;
-    width: 100%;
-
-    &.single-cta {
-      justify-content: center;
-
-      .webpush-template-cta-item {
-        flex: 0 1 auto;
-      }
-    }
-
-    .webpush-template-cta-item {
-      flex: 1;
-      padding: 0 $CAP_SPACE_08;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .webpush-template-cta-item + .webpush-template-cta-item {
-      border-left: 1px solid $CAP_G07;
-    }
-
-    .webpush-template-cta-text {
-      font-weight: 600;
-      font-size: $FONT_SIZE_VS;
-      line-height: 1rem;
-      color: $CAP_G02;
-      text-align: center;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      width: 100%;
-      user-select: none;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-    }
-  }
-}
-
 .footer-container{
   padding: 8px 0 8px 16px;
 }
@@ -830,7 +572,6 @@
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 3;
-      line-clamp: 3;
       -webkit-box-orient: vertical;
     }
     .title{
@@ -893,7 +634,6 @@
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 2;
-      line-clamp: 2;
       -webkit-box-orient: vertical;
     }
     .actions{
@@ -955,8 +695,7 @@
 }
 
 .whatsapp-filters,
-.zalo-filters,
-.inapp-filters {
+.zalo-filters {
   display: flex;
   width: 100%;
   padding-left: 8px;
@@ -972,7 +711,6 @@
   overflow: hidden;
   &.desc{
     -webkit-line-clamp: 5;
-    line-clamp: 5;
   }
 }
 
@@ -1070,7 +808,6 @@
 .whatsapp-message-with-media {
   display: -webkit-box;
   -webkit-line-clamp: 3;
-  line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
@@ -1078,7 +815,6 @@
 .whatsapp-message-without-media {
   display: -webkit-box;
   -webkit-line-clamp: 10;
-  line-clamp: 10;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }

package/v2Containers/Templates/actions.js

@@ -6,7 +6,7 @@
 
 import * as types from './constants';
 import {
-  LINE, WHATSAPP, RCS, ZALO, WEBPUSH,
+  LINE, WHATSAPP, RCS, ZALO,
 } from '../CreativesContainer/constants';
 
 export function getAllTemplates(channel, queryParams, intlCopyOf = '') {
@@ -68,7 +68,6 @@ export function setChannelAccount(channel, account) {
     [LINE]: types.SET_LINE_ACCOUNT,
     [WHATSAPP]: types.SET_WHATSAPP_ACCOUNT,
     [ZALO]: types.SET_ZALO_ACCOUNT,
-    [WEBPUSH]: types.SET_WEBPUSH_ACCOUNT,
     [RCS]: types.SET_RCS_ACCOUNT,
   };
   

package/v2Containers/Templates/constants.js

@@ -51,7 +51,6 @@ export const SET_FACEBOOK_ACCOUNT = "app/v2Containers/Templates/SET_FACEBOOK_ACC
 export const SET_WHATSAPP_ACCOUNT = "app/v2Containers/Templates/SET_WHATSAPP_ACCOUNT";
 export const SET_RCS_ACCOUNT = "app/v2Containers/Templates/SET_RCS_ACCOUNT";
 export const SET_ZALO_ACCOUNT = "app/v2Containers/Templates/SET_ZALO_ACCOUNT";
-export const SET_WEBPUSH_ACCOUNT = "app/v2Containers/Templates/SET_WEBPUSH_ACCOUNT";
 
 export const GET_DEAFULT_BEE_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_REQUEST';
 export const GET_DEAFULT_BEE_TEMPLATES_SUCCESS = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_SUCCESS';