@capillarytech/creatives-library 8.0.316 → 8.0.317-alpha.0

package/v2Containers/SmsWrapper/index.js

@@ -10,12 +10,14 @@ import { isTraiDLTEnable } from '../../utils/common';
 import SmsEdit from '../Sms/Edit';
 import SmsTraiCreate from '../SmsTrai/Create';
 import SmsTraiEdit from '../SmsTrai/Edit';
+
 const SmsWrapper = (props) => {
   const {
     isCreateSms,
     isEditSms,
     setIsLoadingContent,
     location,
+    route: routeFromProps,
     isGetFormData,
     getFormSubscriptionData,
     isFullMode,
@@ -30,6 +32,7 @@ const SmsWrapper = (props) => {
     smsRegister,
     onShowTemplates,
     eventContextTags,
+    waitEventContextTags,
     showLiquidErrorInFooter,
     getLiquidTags,
     showTestAndPreviewSlidebox,
@@ -37,15 +40,33 @@ const SmsWrapper = (props) => {
     handleCloseTestAndPreview,
     isTestAndPreviewMode,
     onValidationFail,
+    embeddedSmsFallback = false,
+    onEmbeddedSmsFooterValidity,
+    forceFullTagContext = false,
     } = props;
 
+  /** FormBuilder / SMS Create assume `location.query`; connected-router shapes may omit it. */
+  const smsLocation = (() => {
+    const loc = location || {};
+    const q = loc.query;
+    if (q && typeof q === 'object') {
+      return { ...loc, query: { ...q } };
+    }
+    return {
+      pathname: loc.pathname || '/sms/create',
+      search: loc.search || '',
+      query: { type: 'embedded', module: 'library' },
+    };
+  })();
+
   const smsProps = {
     onCreateComplete,
     setIsLoadingContent,
-    location,
-    route: { name: 'sms' },
+    location: smsLocation,
+    route: routeFromProps || { name: 'sms' },
     isGetFormData,
     getFormSubscriptionData,
+    templateData,
     getDefaultTags,
     isFullMode,
     forwardedTags,
@@ -53,6 +74,7 @@ const SmsWrapper = (props) => {
     onPreviewContentClicked,
     onTestContentClicked,
     eventContextTags,
+    waitEventContextTags,
     showLiquidErrorInFooter,
     getLiquidTags,
     showTestAndPreviewSlidebox,
@@ -60,24 +82,33 @@ const SmsWrapper = (props) => {
     handleCloseTestAndPreview,
     isTestAndPreviewMode,
     onValidationFail,
+    forceFullTagContext,
+    embeddedSmsFallback,
+    onEmbeddedSmsFooterValidity,
+    ...(embeddedSmsFallback
+      ? {
+        tagListGetPopupContainer: () => document.body,
+        tagListPopoverOverlayStyle: { zIndex: 10020 },
+        tagListPopoverOverlayClassName: 'sms-fallback-taglist-popover rcs-sms-fallback-taglist-popover',
+      }
+      : {}),
   };
-  const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
+  const useTraiSmsFlow = isTraiDLTEnable(isFullMode, smsRegister);
   return <>
     {
-      isCreateSms && (isTraiDlt ?
+      isCreateSms && (useTraiSmsFlow ?
         <SmsTraiCreate
           isComponent
           {...smsProps}
           onShowTemplates={onShowTemplates}
           /> :
           <SmsCreate
-            isComponent {
-              ...smsProps
-            }
+            isComponent
+            {...smsProps}
           />
       )
     }
-    {isEditSms && (isTraiDlt ?
+    {isEditSms && (useTraiSmsFlow ?
       <SmsTraiEdit
         {...smsProps}
         params={{id: templateData._id}}

package/v2Containers/TagList/index.js

@@ -167,7 +167,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 +219,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 )});
   }
 
@@ -406,7 +443,7 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       isDisabled = true;
       tooltipMsg = intl.formatMessage(messages.personalizationNotSupportedAnonymous);
     }
-    
+
     return (
       <div className={this.props.className ? this.props.className : ''}>
         <CapTagList
@@ -427,6 +464,9 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
           disableTooltipMsg={tooltipMsg}
           fetchingSchemaError={this?.state?.tagsError}
           popoverPlacement={this.props.popoverPlacement}
+          overlayStyle={this.props.popoverOverlayStyle}
+          overlayClassName={this.props.popoverOverlayClassName}
+          getPopupContainer={this.props.getPopupContainer}
         />
       </div>
     );
@@ -437,6 +477,7 @@ TagList.defaultProps = {
   isNewVersionFlow: false,
   userLocale: 'en',
   eventContextTags: [],
+  waitEventContextTags: {},
 };
 
 TagList.propTypes = {
@@ -457,10 +498,14 @@ 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,
   restrictPersonalization: PropTypes.bool,
+  popoverOverlayStyle: PropTypes.object,
+  popoverOverlayClassName: PropTypes.string,
+  getPopupContainer: PropTypes.func,
   intl: PropTypes.shape({
     formatMessage: PropTypes.func.isRequired,
     locale: PropTypes.string,

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,115 @@ 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 mount', () => {
+    const onContextChange = jest.fn();
+    initializeTagList({
+      tags: [],
+      injectedTags: {},
+      onContextChange,
+      onTagSelect: jest.fn(),
+    });
+    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/TemplatesActionBar.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+
+/**
+ * Reusable action bar for template pickers.
+ * Layout and spacing live in `_templates.scss` (`.action-container`, `.action-container__toolbar-row`).
+ * Default search field width: `.action-container__toolbar-row .search-text` (13.125rem).
+ * Pass `searchInputClassName` / `searchInputStyle` to override (defaults match Templates list: 210px per master).
+ */
+const TemplatesActionBar = ({
+  searchValue,
+  onSearchChange,
+  onSearch,
+  onClear,
+  searchPlaceholder,
+  searchInputClassName,
+  searchInputStyle,
+  ctaLabel,
+  onCtaClick,
+  ctaDisabled,
+  ctaClassName,
+  ctaNode,
+  children,
+  showCta = true,
+}) => (
+  <div className="action-container">
+    <div className="action-container__toolbar-row">
+      {searchPlaceholder && (
+        <CapInput.Search
+          className={['search-text', searchInputClassName].filter(Boolean).join(' ')}
+          placeholder={searchPlaceholder}
+          value={searchValue}
+          onChange={onSearchChange}
+          /* antd `Input` (used by CapInput.Search) has no `onSearch`; only `Input.Search` does. */
+          onPressEnter={(e) => {
+            if (onSearch) {
+              const v = e?.target && 'value' in e.target ? e.target.value : searchValue;
+              onSearch(v);
+            }
+          }}
+          onSearch={onSearch}
+          onClear={onClear}
+          onScroll={(e) => e.stopPropagation()}
+        />
+      )}
+      {children}
+    </div>
+    {showCta && (
+      <div>
+        {ctaNode || (
+          <CapButton
+            className={ctaClassName}
+            type="primary"
+            disabled={ctaDisabled}
+            onClick={onCtaClick}
+          >
+            {ctaLabel}
+          </CapButton>
+        )}
+      </div>
+    )}
+  </div>
+);
+
+TemplatesActionBar.propTypes = {
+  searchValue: PropTypes.string,
+  onSearchChange: PropTypes.func,
+  onSearch: PropTypes.func,
+  onClear: PropTypes.func,
+  searchPlaceholder: PropTypes.string,
+  searchInputClassName: PropTypes.string,
+  searchInputStyle: PropTypes.object,
+  ctaLabel: PropTypes.node,
+  onCtaClick: PropTypes.func,
+  ctaDisabled: PropTypes.bool,
+  ctaClassName: PropTypes.string,
+  ctaNode: PropTypes.node,
+  children: PropTypes.node,
+  showCta: PropTypes.bool,
+};
+
+TemplatesActionBar.defaultProps = {
+  searchValue: '',
+  onSearchChange: () => {},
+  onSearch: () => {},
+  onClear: () => {},
+  searchPlaceholder: '',
+  searchInputClassName: '',
+  searchInputStyle: { width: '210px' },
+  ctaLabel: null,
+  onCtaClick: () => {},
+  ctaDisabled: false,
+  ctaClassName: '',
+  ctaNode: null,
+  children: null,
+};
+
+export default TemplatesActionBar;
+

package/v2Containers/Templates/_templates.scss

@@ -659,11 +659,27 @@
 }
 
 .action-container{
-  margin-top: 8px;
-  margin-bottom: 16px;
+  margin-top: $CAP_SPACE_08;
+  margin-bottom: $CAP_SPACE_16;
   display: flex;
   justify-content: space-between;
   align-items: center;
+
+  &__toolbar-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  &__toolbar-row .search-text {
+    width: 13.125rem;
+  }
+
+  &__create-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 }
 
 .popover-action-container:hover{
@@ -1101,4 +1117,47 @@
 .inapp-illustration-parent {
   height: "calc(100vh - 325px)";
   overflow: 'auto';
+}
+
+/* Local SMS / slidebox: viewport-based .v2-pagination-container-half height leaves empty space below and clips cards */
+.creatives-templates-container--local-sms.library-mode {
+  .creatives-templates-list.library-mode > .cap-row:first-of-type > div {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .creatives-templates-list.library-mode > .cap-row:first-of-type > div > div:first-child {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  /* Block below search/filter: grid + skeletons — must grow to use space above footer */
+  .creatives-templates-list.library-mode > .cap-row:first-of-type > div > div:first-child > div:nth-child(2) {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  /*
+   * Scroll needs a definite height. Pure flex + height:auto + max-height:100% often won’t bound (no % base), so no scrollbar.
+   * Use a taller slice than global 100vh-20rem so the grid uses space under search; still overflow-y:auto for long lists.
+   */
+  .v2-pagination-container,
+  .v2-pagination-container-half {
+    flex: 0 1 auto;
+    min-height: 0;
+    height: calc(100vh - 12rem);
+    max-height: calc(100vh - 12rem);
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
 }

package/v2Containers/Templates/actions.js

@@ -15,6 +15,17 @@ export function getAllTemplates(channel, queryParams, intlCopyOf = '') {
   };
 }
 
+
+export function getLocalSmsTemplates(queryParams, intlCopyOf = '', onSuccess, onFailure) {
+  return {
+    type: types.GET_LOCAL_SMS_TEMPLATES_REQUEST,
+    queryParams,
+    intlCopyOf,
+    onSuccess,
+    onFailure,
+  };
+}
+
 export function resetTemplate() {
   return {
     type: types.RESET_TEMPLATE,

package/v2Containers/Templates/constants.js

@@ -10,6 +10,8 @@ export const GET_ALL_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_ALL_TEM
 export const GET_ALL_TEMPLATES_SUCCESS = 'app/v2Containers/Templates/GET_ALL_TEMPLATES_SUCCESS';
 export const GET_ALL_TEMPLATES_FAILURE = 'app/v2Containers/Templates/GET_ALL_TEMPLATES_FAILURE';
 
+export const GET_LOCAL_SMS_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_LOCAL_SMS_TEMPLATES_REQUEST';
+
 export const DELETE_TEMPLATE_REQUEST = 'app/v2Containers/Templates/DELETE_TEMPLATE_REQUEST';
 export const DELETE_RCS_TEMPLATE_REQUEST = 'app/v2Containers/Templates/DELETE_RCS_TEMPLATE_REQUEST';
 export const DELETE_TEMPLATE_SUCCESS = 'app/v2Containers/Templates/DELETE_TEMPLATE_SUCCESS';