@capillarytech/creatives-library 8.0.330-alpha.0 → 8.0.330-alpha.2

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;

package/v2Containers/Templates/index.js

@@ -132,7 +132,7 @@ import { INAPP_LAYOUT_DETAILS, INAPP_MESSAGE_LAYOUT_TYPES, INAPP_MEDIA_TYPES, BI
 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 { RCS_STATUSES, HOST_INFOBIP } from '../Rcs/constants';
 import zaloMessages from '../Zalo/messages';
 import rcsMessages from '../Rcs/messages';
 import inAppMessages from '../InApp/messages';
@@ -1781,12 +1781,20 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   filterRcsTemplates = (templates) => {
-    let { selectedRcsStatus } = this.state;
-    selectedRcsStatus = !this.props.isFullMode ? RCS_STATUSES.approved : '';
-    if (selectedRcsStatus) {
-      return templates?.filter((template) => template?.versions?.base?.content?.RCS?.rcsContent?.cardContent?.[0]?.Status === selectedRcsStatus);
+    const selectedRcsAccountName = this.props?.Templates?.selectedRcsAccount?.name || '';
+    const hostName = this.state?.hostName;
+    let nextTemplates = templates || [];
+    if (selectedRcsAccountName) {
+      nextTemplates = nextTemplates.filter(
+        (t) => get(t, 'versions.base.content.RCS.rcsContent.accountName', '') === selectedRcsAccountName
+      );
     }
-    return templates;
+    if (!this.props.isFullMode && hostName !== HOST_INFOBIP) {
+      return nextTemplates.filter(
+        (t) => get(t, 'versions.base.content.RCS.rcsContent.cardContent[0].Status', 'unavailable') === RCS_STATUSES.approved
+      );
+    }
+    return nextTemplates;
   }
 
   filterZaloTemplates = (templates) => {
@@ -2421,13 +2429,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           templateData.title = (
             <CapRow>
               <CapLabel className="whatsapp-rcs-template-name">{name}</CapLabel>
-              <CapRow type="flex" align="middle" className="rcs-status-container zalo-status-color">
+              {this.state.hostName !== HOST_INFOBIP && <CapRow type="flex" align="middle" className="rcs-status-container zalo-status-color">
                 <CapStatus
                   type={statusDisplay}
-                  text={statusDisplay && this.props.intl.formatMessage(rcsMessages?.[`${statusDisplay}_STATUS`])}
-                  labelType="label3"
-                />
-              </CapRow>
+                    text={statusDisplay && this.props.intl.formatMessage(rcsMessages?.[`${statusDisplay}_STATUS`])}
+                    labelType="label3"
+                  />
+                </CapRow>
+              }
             </CapRow>
           );
         
@@ -2951,6 +2960,7 @@ return (<div>
     let routeParams = {};
     const {fbAdManager} = this.props;
     const isLibraryMode = this.isEnabledInLibraryModule("callCreateFromProps");
+
     if (!isLibraryMode) {
       timeTracker.startTimer(CHANNEL_CREATE_TRACK_MAPPING[channel]);
     }
@@ -4209,9 +4219,14 @@ return (<div>
     const isWechatEmbedded = !this.props.isFullMode && channel.toUpperCase() === WECHAT;
     const channelLowerCase = (channel || '').toLowerCase();
     const isTraiDltFeature = this.checkDLTfeatureEnable();
-
     const createButton =
-      ( (channelLowerCase === WHATSAPP_LOWERCASE || channelLowerCase === RCS_LOWERCASE) && !this.props.isFullMode )
+      (
+        (
+          channelLowerCase === WHATSAPP_LOWERCASE
+          || channelLowerCase === RCS_LOWERCASE
+        )
+        && !this.props.isFullMode
+      )
       ? (
         <CapLink
           onClick={this.openCreativesFullMode}
@@ -4483,7 +4498,7 @@ return (<div>
             />
           ) : null}
           
-          {channel.toLowerCase() === RCS_LOWERCASE && !isFullMode ? (
+          {channel.toLowerCase() === RCS_LOWERCASE && !isFullMode && this.state?.hostName !== HOST_INFOBIP ? (
             <CapInfoNote
               message={formatMessage(messages.rcsOnlyApprovedTemplates)}
             />

package/v2Containers/Viber/index.js

@@ -82,6 +82,7 @@ export const Viber = (props) => {
     viberData = {},
     selectedOfferDetails = [],
     eventContextTags,
+    waitEventContextTags,
     // TestAndPreviewSlidebox props
     showTestAndPreviewSlidebox: propsShowTestAndPreviewSlidebox,
     handleTestAndPreview: propsHandleTestAndPreview,
@@ -287,6 +288,7 @@ export const Viber = (props) => {
           userLocale={localStorage.getItem("jlocale") || "en"}
           selectedOfferDetails={selectedOfferDetails}
           eventContextTags={eventContextTags}
+          waitEventContextTags={waitEventContextTags}
         />
       </CapColumn>
       <div className="viber-textarea-wrapper">
@@ -592,6 +594,7 @@ export const Viber = (props) => {
         userLocale={localStorage.getItem("jlocale") || "en"}
         selectedOfferDetails={selectedOfferDetails}
         eventContextTags={eventContextTags}
+        waitEventContextTags={waitEventContextTags}
       />
       <CapColumn className="cta-actions">
         <CapButton

package/v2Containers/WebPush/Create/hooks/useTagManagement.js

@@ -22,8 +22,6 @@ export const useTagManagement = ({
   metaEntities,
   getDefaultTags,
   supportedTags = EMPTY_ARRAY,
-  injectedTags,
-  eventContextTags = EMPTY_ARRAY,
 }) => {
   const [tags, setTags] = useState([]);
   const tagFetchKeyRef = useRef(null);

package/v2Containers/WebPush/Create/index.js

@@ -84,6 +84,7 @@ const MemoizedTagList = memo(({
   injectedTags,
   selectedOfferDetails,
   eventContextTags,
+  waitEventContextTags,
   forwardedTags,
   onTagSelect,
   restrictPersonalization = false,
@@ -99,6 +100,7 @@ const MemoizedTagList = memo(({
     injectedTags={injectedTags}
     selectedOfferDetails={selectedOfferDetails}
     eventContextTags={eventContextTags}
+    waitEventContextTags={waitEventContextTags}
     forwardedTags={forwardedTags}
     onTagSelect={onTagSelect}
     restrictPersonalization={restrictPersonalization}
@@ -116,6 +118,7 @@ const MemoizedTagList = memo(({
     && prevProps.injectedTags === nextProps.injectedTags
     && prevProps.selectedOfferDetails === nextProps.selectedOfferDetails
     && prevProps.eventContextTags === nextProps.eventContextTags
+    && prevProps.waitEventContextTags === nextProps.waitEventContextTags
     && prevProps.forwardedTags === nextProps.forwardedTags
     && prevProps.onTagSelect === nextProps.onTagSelect
     && prevProps.restrictPersonalization === nextProps.restrictPersonalization
@@ -152,6 +155,7 @@ const WebPushCreate = ({
   forwardedTags,
   selectedOfferDetails = [],
   eventContextTags = [],
+  waitEventContextTags = {},
   templateActions: templateActionsProps,
   Templates,
   restrictPersonalization = false,
@@ -232,6 +236,7 @@ const WebPushCreate = ({
     supportedTags: memoizedSupportedTags,
     injectedTags,
     eventContextTags,
+    waitEventContextTags,
   });
   const { tags, handleOnTagsContextChange, validationConfig } = tagState;
   const { weCrmAccounts } = Templates;
@@ -837,12 +842,13 @@ const WebPushCreate = ({
       injectedTags,
       selectedOfferDetails,
       eventContextTags,
+      waitEventContextTags,
       forwardedTags,
       restrictPersonalization,
       disabled: restrictPersonalization,
       disableTooltipMsg: restrictPersonalization ? formatMessage(messages.personalizationNotSupportedAnonymous) : undefined,
     }),
-    [tags, injectedTags, selectedOfferDetails, eventContextTags, forwardedTags, restrictPersonalization, formatMessage],
+    [tags, injectedTags, selectedOfferDetails, eventContextTags, waitEventContextTags, forwardedTags, restrictPersonalization, formatMessage],
   );
 
   // Memoized TagList components with optimized props
@@ -1083,6 +1089,7 @@ WebPushCreate.propTypes = {
   forwardedTags: PropTypes.object,
   selectedOfferDetails: PropTypes.array,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   templateActions: PropTypes.object,
   restrictPersonalization: PropTypes.bool,
 };
@@ -1111,6 +1118,7 @@ WebPushCreate.defaultProps = {
   forwardedTags: {},
   selectedOfferDetails: [],
   eventContextTags: [],
+  waitEventContextTags: {},
   templateActions: {},
   Templates: {},
   restrictPersonalization: false,
@@ -1149,7 +1157,7 @@ const withWebPushSaga = injectSaga({
 });
 
 const withTemplateSaga = injectSaga({
-  key: 'webPushTemplates',
+  key: 'templates',
   saga: v2TemplateSaga,
   mode: DAEMON,
 });

package/v2Containers/Whatsapp/index.js

@@ -181,6 +181,7 @@ export const Whatsapp = (props) => {
     getFormData,
     selectedOfferDetails,
     eventContextTags,
+    waitEventContextTags = {},
     metaDataStatus = "",
     showTestAndPreviewSlidebox: propsShowTestAndPreviewSlidebox,
     handleTestAndPreview: propsHandleTestAndPreview,
@@ -933,6 +934,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
               injectedTags={injectedTags || {}}
               selectedOfferDetails={selectedOfferDetails}
               eventContextTags={eventContextTags}
+              waitEventContextTags={waitEventContextTags}
             />
           )}
         </>
@@ -1934,6 +1936,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
                             injectedTags={injectedTags || {}}
                             selectedOfferDetails={selectedOfferDetails}
                             eventContextTags={eventContextTags}
+                            waitEventContextTags={waitEventContextTags}
                           />
                         )
                       : !isAuthenticationTemplate && (
@@ -2740,6 +2743,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
                 injectedTags={injectedTags || {}}
                 selectedOfferDetails={selectedOfferDetails}
                 eventContextTags={eventContextTags}
+                waitEventContextTags={waitEventContextTags}
               />
             )
           }
@@ -2858,6 +2862,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
               injectedTags={injectedTags || {}}
               selectedOfferDetails={selectedOfferDetails}
               eventContextTags={eventContextTags}
+              waitEventContextTags={waitEventContextTags}
             />
           )}
           {isBtnTypeQuickReply && (

package/v2Containers/Zalo/index.js

@@ -76,6 +76,7 @@ export const Zalo = (props) => {
     selectedOfferDetails,
     hostName: zaloHostName = '',
     eventContextTags,
+    waitEventContextTags,
     metaDataStatus = "",
     // TestAndPreviewSlidebox props
     showTestAndPreviewSlidebox: propsShowTestAndPreviewSlidebox,
@@ -519,6 +520,7 @@ export const Zalo = (props) => {
                     injectedTags={injectedTags || {}}
                     selectedOfferDetails={selectedOfferDetails}
                     eventContextTags={eventContextTags}
+                    waitEventContextTags={waitEventContextTags}
                   />
                 }
               />