@capillarytech/creatives-library 8.0.329 → 8.0.330-alpha.1

package/v2Containers/SmsTrai/Edit/index.js

@@ -1102,6 +1102,33 @@ export const SmsTraiEdit = (props) => {
               </CapLabelInline>
             </TraiEditTemplateDetails>
           )}
+          {isRcsSmsFallback &&
+            traiDataRef.current &&
+            !isEmpty(traiDataRef.current) &&
+            !loading && (
+            <TraiEditTemplateDetails className="sms-trai-edit-rcs-fallback__template-meta">
+              <CapLabelInline type="label1">
+                {formatMessage(messages.templateNameLabel)}
+              </CapLabelInline>
+              <CapLabelInline type="label2">
+                {get(traiDataRef.current, 'versions.base.template_name', '')
+                  || get(traiDataRef.current, 'name', '')}
+              </CapLabelInline>
+              {traiDltEnabled ? (
+                <>
+                  <CapLabelInline type="label1">
+                    {formatMessage(messages.traiEditSeperator)}
+                  </CapLabelInline>
+                  <CapLabelInline type="label1">
+                    {formatMessage(messages.senderIdlabel)}
+                  </CapLabelInline>
+                  <CapLabelInline type="label2">
+                    {[...get(traiDataRef.current, 'versions.base.header', [])].join(', ')}
+                  </CapLabelInline>
+                </>
+              ) : null}
+            </TraiEditTemplateDetails>
+          )}
           <CapColumn span={shouldShowPreview ? 14 : 24}>
             <CapRow>
               <CapHeader

package/v2Containers/SmsTrai/Edit/messages.js

@@ -48,6 +48,11 @@ export default defineMessages({
     id: `${prefix}.templateLabel`,
     defaultMessage: 'Template',
   },
+  /** RCS → SMS fallback slidebox: label above selected template metadata. */
+  templateNameLabel: {
+    id: `${prefix}.templateNameLabel`,
+    defaultMessage: 'Template name',
+  },
   traiEditSeperator: {
     id: `${prefix}.traiEditSeperator`,
     defaultMessage: '|',

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

@@ -3292,7 +3292,7 @@ FREE GIFTS-
                     </div>
                   </Edit__TraiEditTemplateDetails>
                   <CapColumn
-                    key=".1"
+                    key=".2"
                     span={14}
                   >
                     <Col
@@ -4552,7 +4552,7 @@ FREE GIFTS-
                     </Col>
                   </CapColumn>
                   <CapColumn
-                    key=".2"
+                    key=".3"
                     offset={1}
                     span={8}
                   >
@@ -14962,7 +14962,7 @@ FREE GIFTS-
                     </div>
                   </Edit__TraiEditTemplateDetails>
                   <CapColumn
-                    key=".1"
+                    key=".2"
                     span={14}
                   >
                     <Col
@@ -16222,7 +16222,7 @@ FREE GIFTS-
                     </Col>
                   </CapColumn>
                   <CapColumn
-                    key=".2"
+                    key=".3"
                     offset={1}
                     span={8}
                   >
@@ -26632,7 +26632,7 @@ FREE GIFTS-
                     </div>
                   </Edit__TraiEditTemplateDetails>
                   <CapColumn
-                    key=".1"
+                    key=".2"
                     span={14}
                   >
                     <Col
@@ -27892,7 +27892,7 @@ FREE GIFTS-
                     </Col>
                   </CapColumn>
                   <CapColumn
-                    key=".2"
+                    key=".3"
                     offset={1}
                     span={8}
                   >

package/v2Containers/SmsWrapper/index.js

@@ -32,6 +32,7 @@ const SmsWrapper = (props) => {
     smsRegister,
     onShowTemplates,
     eventContextTags,
+    waitEventContextTags,
     showLiquidErrorInFooter,
     getLiquidTags,
     showTestAndPreviewSlidebox,
@@ -73,6 +74,7 @@ const SmsWrapper = (props) => {
     onPreviewContentClicked,
     onTestContentClicked,
     eventContextTags,
+    waitEventContextTags,
     showLiquidErrorInFooter,
     getLiquidTags,
     showTestAndPreviewSlidebox,

package/v2Containers/TagList/index.js

@@ -22,7 +22,7 @@ import messages, { scope } from './messages';
 // import styled from styled-components;
 import CapTagList from '../../v2Components/CapTagList';
 import './_tagList.scss';
-import { selectCurrentOrgDetails, makeSelectFetchingSchemaError } from '../Cap/selectors';
+import { selectCurrentOrgDetails, makeSelectFetchingSchemaError, makeSelectFetchingSchema } from '../Cap/selectors';
 import {
   handleInjectedData, hasGiftVoucherFeature, hasPromoFeature, hasBadgesFeature, transformBadgeTags,
 } from '../../utils/common';
@@ -35,12 +35,14 @@ const {TreeNode} = Tree;
 export class TagList extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
+    const { tags, injectedTags } = props;
+    const hasInitialData = (tags && tags.length > 0) || !_.isEmpty(injectedTags);
     this.state = {
       loading: false,
       tags: [],
       tagsError: false,
       currentContext: null, // Track current context to detect changes
-      hasTriggeredInitialApiCall: false, // Track if we've triggered API call when popover opens
+      hasTriggeredInitialApiCall: hasInitialData, // Seed from initial props to avoid duplicate fetch on popover open
     };
     this.renderTags = this.renderTags.bind(this);
     this.populateTags = this.populateTags.bind(this);
@@ -52,14 +54,8 @@ 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');
-    }
+    // Initial schema fetch is the parent's responsibility (useTagManagement hook handles it)
+    // This avoids duplicate requests when both parent and child try to fetch on mount
   }
 
   componentWillReceiveProps(nextProps) {
@@ -85,9 +81,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
+      // Tags received (from prefetch or button-click API call) — mark as triggered
+      // so handlePopoverVisibilityChange won't fire a duplicate call on popover open
       if (nextTags && nextTags.length > 0) {
-        this.setState({ hasTriggeredInitialApiCall: false });
+        this.setState({ hasTriggeredInitialApiCall: true });
       }
     }
     if (fetchingSchemaError) {
@@ -97,10 +94,28 @@ 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) {
+    const {
+      tags,
+      injectedTags,
+      selectedOfferDetails,
+      eventContextTags,
+      waitEventContextTags,
+    } = this.props;
+    const {
+      tags: prevTags,
+      injectedTags: prevInjectedTags,
+      selectedOfferDetails: prevSelectedOfferDetails,
+      eventContextTags: prevEventContextTags,
+      waitEventContextTags: prevWaitEventContextTags,
+    } = prevProps;
+
+    if (
+      tags !== prevTags
+      || injectedTags !== prevInjectedTags
+      || selectedOfferDetails !== prevSelectedOfferDetails
+      || !_.isEqual(eventContextTags, prevEventContextTags)
+      || !_.isEqual(waitEventContextTags, prevWaitEventContextTags)
+    ) {
       this.generateTags(this.props);
     }
   }
@@ -155,9 +170,7 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       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');
+        this.getTagsforContext('Outbound'); // Default to Outbound context
       }
     }
   };
@@ -167,7 +180,7 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     let injectedTags = {};
     const eventContextTagsObj = {};
 
-    const {selectedOfferDetails, eventContextTags } = props;
+    const {selectedOfferDetails, eventContextTags, waitEventContextTags } = props;
     if (props.injectedTags && !_.isEmpty(props.injectedTags)) {
       const formattedInjectedTags = handleInjectedData(
         props.injectedTags,
@@ -219,6 +232,43 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
         };
       });
     }
+    // Wait event context tags should be displayed in the Add Labels when node is next to Event based wait node.
+    if (waitEventContextTags && Object.keys(waitEventContextTags)?.length) {
+
+      Object.keys(waitEventContextTags).forEach((blockId) => {
+      const WAIT_EVENT_HEADER_MSG_LABEL = `${waitEventContextTags[blockId].eventName} (${waitEventContextTags[blockId].blockName})`;
+        eventContextTagsObj[blockId] = {
+          "name": WAIT_EVENT_HEADER_MSG_LABEL,
+          "desc": WAIT_EVENT_HEADER_MSG_LABEL,
+          "resolved": true,
+          'tag-header': true,
+          "subtags": {},
+        };
+
+      waitEventContextTags?.[blockId]?.tags?.forEach((tag) => {
+        const {
+          tagName, label, profileId, profileName, blockName, eventName
+        } = tag || {};
+        if (!profileId || !tagName || !label || !profileName) return;
+        // Initializing the tags profile if it doesn't exist
+        if (!eventContextTagsObj?.[blockId]?.subtags?.[profileId]) {
+          eventContextTagsObj[blockId].subtags[profileId] = {
+            "name": profileName,
+            "desc": profileName,
+            "resolved": true,
+            'tag-header': true,
+            "subtags": {},
+          };
+        }
+        // Adding the current tag to the profile group
+        eventContextTagsObj[blockId].subtags[profileId].subtags[tagName] = {
+          name: label,
+          desc: label,
+          resolved: true,
+        };
+      });
+    });
+    }
     this.setState({tags: _.merge( {}, tags, injectedTags, eventContextTagsObj )});
   }
 
@@ -440,6 +490,7 @@ TagList.defaultProps = {
   isNewVersionFlow: false,
   userLocale: 'en',
   eventContextTags: [],
+  waitEventContextTags: {},
 };
 
 TagList.propTypes = {
@@ -460,6 +511,7 @@ TagList.propTypes = {
   disabled: PropTypes.bool,
   fetchingSchemaError: PropTypes.bool,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   popoverPlacement: PropTypes.string,
   // message to show when Add Label button is disabled (e.g. personalization restriction)
   disableTooltipMsg: PropTypes.string,
@@ -477,6 +529,7 @@ const mapStateToProps = createStructuredSelector({
   TagList: makeSelectTagList(),
   currentOrgDetails: selectCurrentOrgDetails(),
   fetchingSchemaError: makeSelectFetchingSchemaError(),
+  fetchingSchema: makeSelectFetchingSchema(),
 });
 
 function mapDispatchToProps(dispatch) {

package/v2Containers/TagList/messages.js

@@ -19,4 +19,8 @@ export default defineMessages({
     id: `${scope}.personalizationNotSupportedAnonymous`,
     defaultMessage: 'Personalization tags are not supported for anonymous customers',
   },
+  waitEvent: {
+    id: `${scope}.waitEvent`,
+    defaultMessage: 'Wait Event',
+  },
 });

package/v2Containers/TagList/tests/TagList.test.js

@@ -5,28 +5,34 @@ import { initialReducer } from '../../../initialReducer';
 import { injectIntl } from "react-intl";
 import { fireEvent } from "@testing-library/react";
 import { TagList } from '../index';
-import { TagListData, eventContextTags } from './mockdata';
+import { TagListData, eventContextTags, waitEventContextTags } from './mockdata';
+import { OfferTag, badgesTags, offer } from '../../../utils/tests/common.mockdata';
+import * as commonUtils from "../../../utils/common";
 import { Provider } from 'react-redux';
 import { screen, render } from '../../../utils/test-utils';
 import history from '../../../utils/history';
 const { getByText, queryByText } = screen;
 
+const buildProps = (props = {}) => ({
+  ...TagListData,
+  onTagSelect: jest.fn(),
+  ...props,
+});
 
-const initializeTagList = (props) => {
+const initializeTagList = (props = {}) => {
   const store = configureStore({}, initialReducer, history);
   const Component = injectIntl(TagList);
-
-  const propsObj = {
-    ...TagListData,
-    onTagSelect: jest.fn(),
-    ...props,
+  const propsObj = buildProps(props);
+  return {
+    ...render(
+      <Provider store={store}>
+        <Component {...propsObj} />
+      </Provider>
+    ),
+    store,
+    Component,
+    propsObj,
   };
-
-  return render(
-    <Provider store={store}>
-      <Component {...propsObj} />
-    </Provider>
-  );
 };
 
 const addLabelBtnAssertion = () => {
@@ -41,19 +47,117 @@ describe("TagList test :  UNIT", () => {
     addLabelBtnAssertion();
   });
 
-  it('should render event context tags correctly from generateTags and show tags under profile', () => {
-    initializeTagList({eventContextTags});
+  it('should render event context tag section from generateTags', () => {
+    initializeTagList({ eventContextTags, moduleFilterEnabled: false });
     addLabelBtnAssertion();
     const EVENT_CONTEXT_TAG_HEADER = getByText(/Entry event/i);
     expect(EVENT_CONTEXT_TAG_HEADER).toBeInTheDocument();
-    fireEvent.click(EVENT_CONTEXT_TAG_HEADER);
-    // Customer profile tags
-    const CUSTOMER_PROFILE = getByText(/Current Customer/i);
-    fireEvent.click(CUSTOMER_PROFILE);
-    expect(getByText(/lifetimePurchases/i)).toBeInTheDocument();
 
     // Behavioural event profile tags should not be visible as label and profile name is not present
     const BEHAVIOURAL_EVENT_PROFILE = queryByText(/Behavioural event/i);
     expect(BEHAVIOURAL_EVENT_PROFILE).not.toBeInTheDocument();
   });
+
+  it('should render wait event context section when waitEventContextTags is provided', () => {
+    initializeTagList({ waitEventContextTags, moduleFilterEnabled: false });
+    addLabelBtnAssertion();
+    const WAIT_EVENT_HEADER = getByText(/Order Placed \(Wait Block\)/i);
+    expect(WAIT_EVENT_HEADER).toBeInTheDocument();
+  });
+
+  it('should merge empty waitEventContextTags with entry event tags', () => {
+    initializeTagList({ eventContextTags, waitEventContextTags: {}, moduleFilterEnabled: false });
+    addLabelBtnAssertion();
+    expect(getByText(/Entry event/i)).toBeInTheDocument();
+  });
+
+  it('calls parent onContextChange with Outbound when tags and injectedTags are empty on popover open', () => {
+    const onContextChange = jest.fn();
+    initializeTagList({
+      tags: [],
+      injectedTags: {},
+      onContextChange,
+      onTagSelect: jest.fn(),
+    });
+    // Default fetch is triggered when the Add Label popover opens (not on mount)
+    addLabelBtnAssertion();
+    expect(onContextChange).toHaveBeenCalledWith('Outbound');
+  });
+
+  it('applies fetchingSchemaError from props via componentWillReceiveProps', () => {
+    const { rerender, Component, propsObj, store } = initializeTagList({ fetchingSchemaError: false });
+    addLabelBtnAssertion();
+    rerender(
+      <Provider store={store}>
+        <Component {...propsObj} fetchingSchemaError />
+      </Provider>
+    );
+    expect(screen.getByText(/add label/i)).toBeInTheDocument();
+  });
+
+  it('disables Add label when restrictPersonalization is true', () => {
+    initializeTagList({
+      restrictPersonalization: true,
+      disabled: false,
+      moduleFilterEnabled: false,
+    });
+    const btn = screen.getByText(/add label/i).closest('button');
+    expect(btn).toBeDisabled();
+  });
+
+  it('calls transformCouponTags when selectedOfferDetails and coupon tags are present', () => {
+    const spy = jest.spyOn(TagList.prototype, 'transformCouponTags');
+    initializeTagList({
+      tags: OfferTag,
+      injectedTags: {},
+      selectedOfferDetails: [{ id: 'c1', couponName: 'Promo Coupon', couponSeriesId: 'c1' }],
+      moduleFilterEnabled: false,
+    });
+    expect(spy).toHaveBeenCalled();
+    spy.mockRestore();
+  });
+
+  it('calls transformBadgeTags from common when badge offer and Badge tags are present', () => {
+    const spy = jest.spyOn(commonUtils, 'transformBadgeTags');
+    initializeTagList({
+      tags: badgesTags,
+      injectedTags: {},
+      selectedOfferDetails: offer,
+      moduleFilterEnabled: false,
+    });
+    expect(spy).toHaveBeenCalled();
+    spy.mockRestore();
+  });
+
+  it('unmounts without throwing', () => {
+    const { unmount } = initializeTagList();
+    expect(() => unmount()).not.toThrow();
+  });
+
+  it('regenerates tags when props.tags change (componentDidUpdate)', () => {
+    const { rerender, Component, store } = initializeTagList({ tags: TagListData.tags });
+    const extra = [
+      ...TagListData.tags,
+      {
+        _id: 'extra-tag',
+        type: 'TAG',
+        definition: {
+          label: { en: 'Extra' },
+          value: 'extra_value',
+          subtags: [],
+          'tag-header': false,
+          supportedModules: [{ context: 'default', layout: 'sms', mandatory: false }],
+        },
+        scope: { tag: 'STANDARD', orgId: -1, verticals: [] },
+        isActive: true,
+      },
+    ];
+    rerender(
+      <Provider store={store}>
+        <Component {...buildProps({ tags: extra })} />
+      </Provider>
+    );
+    addLabelBtnAssertion();
+    expect(screen.getByText(/add label/i)).toBeInTheDocument();
+  });
 });

package/v2Containers/TagList/tests/mockdata.js

@@ -149,3 +149,20 @@ export const eventContextTags = [
         "isDynamicFact": false
     }
 ];
+
+export const waitEventContextTags = {
+  block1: {
+    eventName: 'Order Placed',
+    blockName: 'Wait Block',
+    tags: [
+      {
+        tagName: 'waitEvent.orderId',
+        label: 'Order ID',
+        profileId: 'ORDER_PROFILE',
+        profileName: 'Order Profile',
+        blockName: 'Wait Block',
+        eventName: 'Order Placed',
+      },
+    ],
+  },
+};

package/v2Containers/Templates/_templates.scss

@@ -2,10 +2,13 @@
 
 .ant-tabs-content{
     margin-top: 16px;
+  // .creatives-templates-list.full-mode{
+    .v2-pagination-container, .v2-pagination-container-half {
     .ant-tabs-tabpane-active{
       padding: unset;
     }
   }
+}
 
 @media screen and (max-width: 1172px) {
   .creatives-templates-list.full-mode{
@@ -20,8 +23,11 @@
     }
   }
 }
+// }
 
 @media screen and (min-width: 1172px) {
+  .creatives-templates-list.full-mode{
+    .v2-pagination-container, .v2-pagination-container-half {
   .creatives-templates-list.full-mode{
     .v2-pagination-container {
       .cap-custom-card-list-row {
@@ -33,16 +39,21 @@
       }
     }
   }
+    }
+  }
 }
 
+
 .creatives-templates-list {
 
   .delete-template-confirm {
     .ant-modal-footer {
       padding: $CAP_SPACE_16 $CAP_SPACE_24 $CAP_SPACE_24 $CAP_SPACE_24;
     }
+}
 
     .ant-modal-header {
+  .v2-pagination-container, .v2-pagination-container-half {
       padding: $CAP_SPACE_24 $CAP_SPACE_24 $CAP_SPACE_08 $CAP_SPACE_24;
     }
 
@@ -181,10 +192,13 @@
               .whatsapp-container {
                 background-color: $CAP_WHITE;
                 padding: $CAP_SPACE_12;
+                overflow-y: hidden;
               }
               .scroll-container {
                 overflow-x: auto;
                 display: flex;
+                flex-wrap: nowrap;
+                width: 100%;
                 padding-top: $CAP_SPACE_06;
                 padding-right: $CAP_SPACE_06;
                 white-space: nowrap;
@@ -218,6 +232,91 @@
       }
     }
 
+    // RCS template listing preview: match WhatsApp carousel "peek" behavior
+    .RCS {
+      .cap-custom-card {
+        .ant-card-body {
+          .ant-card-meta {
+            background-color: $CAP_G09;
+            padding: 0;
+            .ant-card-meta-description {
+             .whatsapp-container,.cap-rcs-creatives {
+                background-color: $CAP_WHITE;
+                padding: $CAP_SPACE_12;
+                border-radius: 0.25rem;
+                .cap-divider-v2{
+                  margin: $CAP_SPACE_12 0;
+                }
+              }
+              .scroll-container {
+                overflow-x: auto;
+                display: flex;
+                padding-top: $CAP_SPACE_06;
+                padding-right: $CAP_SPACE_06;
+                white-space: nowrap;
+                scrollbar-width: none; // Hide scrollbar in Firefox
+                &::-webkit-scrollbar {
+                  display: none; // Hide scrollbar in Chrome/Safari/Opera
+                }
+                overflow-y: hidden;
+                .whatsapp-carousel-container {
+                  padding: $CAP_SPACE_04 0px $CAP_SPACE_08;
+                  border-radius: $CAP_SPACE_06;
+                  background-color: $CAP_WHITE;
+                  width: 80%;
+                  flex-shrink: 0;
+                  margin-right: $CAP_SPACE_04;
+                  white-space: pre-wrap;
+                  word-break: break-word;
+                  overflow: auto;
+                  text-align: left;
+                  .whatsapp-carousel-card {
+                    margin: $CAP_SPACE_02 $CAP_SPACE_06 $CAP_SPACE_01 $CAP_SPACE_08;
+                    .whatsapp-carousel-body {
+                      margin-bottom: $CAP_SPACE_08;
+                      white-space: pre-wrap;
+                    }
+                  }
+                }
+              }
+
+              // RCS CTA buttons in listing (reuse WhatsApp-ish look)
+              .rcs-cta-preview {
+                margin: $CAP_SPACE_12 0;
+                display: flex;
+                justify-content: center;
+                font-size: $FONT_SIZE_M;
+                align-items: center;
+                color: #1970DA;
+                svg {
+                  margin-right: $CAP_SPACE_04;
+                }
+              }
+
+              .rcs-video-preview-placeholder {
+                background: #f5f5f5;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              }
+
+              .rcs-video-preview-label {
+                color: #7a7a7a;
+              }
+
+              .rcs-listing-title {
+                font-weight: 600;
+              }
+
+              .whatsapp-divider {
+                margin: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+
     .MOBILEPUSH {
         .ant-card-body {
           padding: 0;