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

package/v2Components/CapActionButton/index.scss

@@ -1,14 +1,27 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables';
 
-#rcs-cta-type{
-    width: 90%;
+// Horizontal RCS button type radios (Phone number | URL | Quick reply)
+.cap-rcs-cta-type-radio.cap-radio-group-v2 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-top: 0.5rem;
+
+  .ant-radio-wrapper {
+    margin-right: $CAP_SPACE_24;
+    margin-bottom: 0;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
 }
 
 .cap-rcs-saved-cta {
     position: relative;
     border: solid $CAP_SPACE_01 $CAP_G06;
     padding: 0.625rem;
-    border-radius: $CAP_SPACE_04;
+    border-radius: 0.25rem; // 4px
     margin-bottom: $CAP_SPACE_12;
 
     div:not(:last-child) {
@@ -39,9 +52,139 @@
     }
 }
 
-.rcs-button-cta-create-container {
-    border: solid 1px $CAP_G06;
-    padding: 10px;
+// Button text / URL: count via CapInput `suffix` (antd affix, right-aligned inside field).
+// Phone: react-phone-input-2 — overlay count + padding on .form-control
+.rcs-cta-inner-char-count {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  color: $FONT_COLOR_03;
+  white-space: nowrap;
+}
+
+.rcs-cta-input-with-inner-count {
+  position: relative;
+  width: 100%;
+
+  &--phone .rcs-cta-inner-char-count {
+    position: absolute;
+    right: 0.6875rem;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    pointer-events: none;
+  }
+}
+
+// RCS phone field: Figma — one light border, 4px radius, ~antd Input large height, full width, count inside right
+.rcs-button-cta-create-container .rcs-cta-input-with-inner-count--phone {
+  .react-tel-input.rcs-cta-phone-input {
+    width: 100%;
+  }
+
+  .rcs-cta-phone-input .form-control {
+    width: 100% !important;
+    max-width: none;
+    height: 2.5rem;
+    min-height: 2.5rem;
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-left: 3rem;
+    padding-right: 3.5rem;
+    margin: 0;
+    font-size: 0.875rem;
+    line-height: 2.5rem;
+    color: $CAP_G01;
+    background: $CAP_WHITE;
+    border: 1px solid $CAP_G06;
+    border-radius: 0.25rem;
+    box-shadow: none;
+
+    &::placeholder {
+      color: $CAP_G05;
+    }
+
+    &:hover {
+      border-color: $CAP_G11;
+    }
+
+    &:focus {
+      border-color: $CAP_G01;
+      box-shadow: none;
+      outline: none;
+    }
+  }
+
+  .rcs-cta-phone-input .flag-dropdown {
+    top: 1px;
+    bottom: 1px;
+    left: 1px;
+    padding: 0;
+    background: $CAP_WHITE;
+    border: none;
+    border-radius: 0.1875rem 0 0 0.1875rem; // inset from outer 4px radius
+  }
+
+  .rcs-cta-phone-input .flag-dropdown.open {
+    border-radius: 0.1875rem 0 0 0;
+  }
+
+  .rcs-cta-phone-input .selected-flag {
+    width: 2.75rem;
+    padding: 0 0 0 0.5rem;
+    background: transparent;
+    border-radius: 0.1875rem 0 0 0.1875rem;
+  }
+
+  .rcs-cta-phone-input .selected-flag:hover,
+  .rcs-cta-phone-input .selected-flag:focus {
+    background: $CAP_G09;
+  }
+
+  .rcs-cta-phone-input .selected-flag .arrow {
+    left: 1.375rem;
+    border-top-color: $CAP_G04;
+  }
+}
+
+// URL CTA: URL type (narrow) + URL field (~1:3) per Figma
+.rcs-cta-url-fields-row {
+  .rcs-cta-url-type-col .ant-select {
+    width: 100%;
+  }
+}
+
+// RCS “create CTA” card: 0.5rem padding + gaps (Figma-tight; fixes excess space above first label)
+.rcs-button-cta-create-container.cap-row-v2 {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  width: 100%;
+  border: solid 1px $CAP_G06;
+  padding: 1.25rem;
+  border-radius: 0.25rem; // 4px — match .cap-rcs-saved-cta
+
+  // Stack “Button type” (radios) above “Button text”
+  .rcs-button-cta-create.cap-row-v2 {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    margin: 0;
+  }
+
+  // Space after each field label (CapHeading margins are often zeroed by the library)
+  .cta-label {
+    margin-bottom: 0;
+    margin-top: 0.75rem;
+  }
+
+  .cta-label + * {
+    margin-top: 0.5rem;
+  }
+
+  // “Button type” heading has no .cta-label — keep same label→control gap as other fields
+  .rcs-button-cta-create > .ant-col:first-of-type .cap-rcs-cta-type-radio {
+    margin-top: 0.5rem;
+  }
 }   
 
 .disabled {
@@ -55,4 +198,12 @@
 
 .button-disabled-tooltip-wrapper {
     display: inline-block;
+    margin-top: 1.25rem;
+}
+
+// Space between Save and Delete on RCS / carousel CTA rows
+.rcs-cta-save-delete-btn {
+    .rcs-cta-delete-btn {
+        margin-left: 0.75rem;
+    }
 }

package/v2Components/CapActionButton/messages.js

@@ -12,7 +12,7 @@ export default defineMessages({
   },
   ctaQr: {
     id: `${prefix}.ctaQr`,
-    defaultMessage: 'Quick Reply',
+    defaultMessage: 'Quick reply',
   },
   ctaPhoneNo: {
     id: `${prefix}.ctaPhoneNo`,
@@ -47,9 +47,17 @@ export default defineMessages({
     id: `${prefix}.templateMessageLength`,
     defaultMessage: 'Characters count: {currentLength}/{maxLength}',
   },
+  ctaFieldCharCountInline: {
+    id: `${prefix}.ctaFieldCharCountInline`,
+    defaultMessage: '{current}/{max}',
+  },
   ctaType: {
     id: `${prefix}.ctaType`,
-    defaultMessage: 'Type of action',
+    defaultMessage: 'Button type',
+  },
+  ctaUrlRadio: {
+    id: `${prefix}.ctaUrlRadio`,
+    defaultMessage: 'URL',
   },
   templateButtonTextPlaceholder: {
     id: `${prefix}.templateButtonTextPlaceholder`,
@@ -145,7 +153,15 @@ export default defineMessages({
   },
   ctaWebsiteType: {
     id: `${prefix}.ctaWebsiteType`,
-    defaultMessage: 'URL Type',
+    defaultMessage: 'URL type',
+  },
+  ctaUrlField: {
+    id: `${prefix}.ctaUrlField`,
+    defaultMessage: 'URL',
+  },
+  ctaEnterUrlPlaceholder: {
+    id: `${prefix}.ctaEnterUrlPlaceholder`,
+    defaultMessage: 'Enter URL',
   },
   ctaWebsiteTypeStatic: {
     id: `${prefix}.ctaWebsiteTypeStatic`,

package/v2Components/CapActionButton/tests/index.test.js

@@ -4,7 +4,7 @@ import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '../../../utils/test-utils';
 import { CapActionButton } from '../index';
 import { BTN_MAX_LENGTH, PHONE_NUMBER_MAX_LENGTH, URL_MAX_LENGTH } from '../constants';
-import { RCS_BUTTON_TYPES } from '../../../v2Containers/Rcs/constants';
+import { RCS_BUTTON_TYPES, HOST_ICS } from '../../../v2Containers/Rcs/constants';
 
 const updateHandler = jest.fn();
 const deleteHandler = jest.fn();
@@ -12,6 +12,7 @@ const initializeComponent = (
   data,
   isEditFlow = false,
   maxButtons = 3,
+  host = '',
 ) => {
   // Normalize legacy test data shape to match component props
   const normalizeType = (legacyType) => {
@@ -37,6 +38,7 @@ const initializeComponent = (
       isEditFlow={isEditFlow}
       maxButtons={maxButtons}
       isFullMode={true}
+      host={host}
     />,
   );
 };
@@ -59,7 +61,7 @@ describe('CapActionButton', () => {
         isSaved: false,
       },
     ]);
-    expect(screen.getByText('Type of action')).toBeInTheDocument();
+    expect(screen.getByText('Button type')).toBeInTheDocument();
     expect(screen.getByText('Button text')).toBeInTheDocument();
     expect(screen.getAllByText('Phone number')[1]).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
@@ -122,7 +124,7 @@ describe('CapActionButton', () => {
         id: 1,
       },
     };
-    const urlInput = await screen.getByPlaceholderText('Enter website URL');
+    const urlInput = await screen.getByPlaceholderText('Enter URL');
     fireEvent.change(urlInput, urlEvent);
     expect(updateHandler).toHaveBeenCalledWith(
       {
@@ -162,6 +164,27 @@ describe('CapActionButton', () => {
     );
   });
 
+  it('should show delete for quick reply index 0 for non-ICS hosts but hide it for ICS (stop button)', () => {
+    const button = {
+      index: 0,
+      type: RCS_BUTTON_TYPES.QUICK_REPLY,
+      text: 'Reply',
+      phoneNumber: '',
+      url: '',
+      postback: 'Reply',
+      isSaved: false,
+    };
+
+    // Non-ICS (Infobip/others): delete should be available
+    const { unmount } = initializeComponent([button], false, 3, 'rcsinfobipbulk');
+    expect(screen.getByRole('button', { name: /delete/i })).toBeInTheDocument();
+    unmount();
+
+    // ICS: index 0 is reserved; delete should be hidden
+    initializeComponent([button], false, 3, HOST_ICS);
+    expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
+  });
+
   it('should respect character length limits', async () => {
     const initialData = {
       index: 0,
@@ -198,7 +221,7 @@ describe('CapActionButton', () => {
       isSaved: false,
     };
     initializeComponent([initialData]);
-    const urlInput = await screen.getByPlaceholderText('Enter website URL');
+    const urlInput = await screen.getByPlaceholderText('Enter URL');
     const longUrl = 'https://example.com/' + 'a'.repeat(URL_MAX_LENGTH + 1);
     fireEvent.change(urlInput, { target: { value: longUrl, id: 0 } });
     expect(urlInput.value.length).toBeLessThanOrEqual(URL_MAX_LENGTH);
@@ -245,7 +268,8 @@ describe('CapActionButton', () => {
       { index: 0, ctaType: RCS_BUTTON_TYPES.QUICK_REPLY, displayText: 'stop', phoneNumber: '', url: '', postback: 'stop', isSaved: true },
       { index: 1, ctaType: RCS_BUTTON_TYPES.QUICK_REPLY, displayText: 'Saved', phoneNumber: '', url: '', postback: 'Saved', isSaved: true },
     ];
-    const { container } = initializeComponent(suggestions);
+    // Use ICS host so index 0 (STOP) stays non-deletable and we only get delete icon for index 1
+    const { container } = initializeComponent(suggestions, false, 3, HOST_ICS);
     const deleteIcons = container.querySelectorAll('.rcs-saved-cta-delete-icon');
     expect(deleteIcons.length).toBeGreaterThan(0);
     fireEvent.click(deleteIcons[0]);
@@ -303,7 +327,8 @@ describe('CapActionButton', () => {
       postback: 'stop',
       isSaved: true,
     };
-    const { container } = initializeComponent([stopButton]);
+    // Only ICS treats index 0 as a mandatory STOP quick reply
+    const { container } = initializeComponent([stopButton], false, 3, HOST_ICS);
     expect(container.querySelector('.rcs-saved-cta-delete-icon')).not.toBeInTheDocument();
   });
 
@@ -424,7 +449,7 @@ describe('CapActionButton', () => {
       isSaved: false,
     };
     initializeComponent([button]);
-    expect(screen.getByPlaceholderText(/enter website url/i)).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(/enter url/i)).toBeInTheDocument();
   });
 
   it('should update both displayText and postback when button text changes (updateDisplayAndPostback)', () => {
@@ -504,7 +529,7 @@ describe('CapActionButton', () => {
       isSaved: false,
     };
     initializeComponent([initial]);
-    const urlInput = screen.getByPlaceholderText('Enter website URL');
+    const urlInput = screen.getByPlaceholderText('Enter URL');
     fireEvent.change(urlInput, { target: { value: 'http://localhost:3030/creatives/ui/v2', id: 1 } });
     expect(screen.getByText(/url is not valid/i)).toBeInTheDocument();
   });
@@ -590,7 +615,7 @@ describe('CapActionButton', () => {
       isSaved: false,
     };
     initializeComponent([initial]);
-    const urlInput = screen.getByPlaceholderText('Enter website URL');
+    const urlInput = screen.getByPlaceholderText('Enter URL');
     // Enter invalid URL
     fireEvent.change(urlInput, { target: { value: 'badurl', id: 0 } });
     expect(screen.getByText(/url is not valid/i)).toBeInTheDocument();
@@ -849,15 +874,14 @@ describe('CapActionButton function logic', () => {
     expect(renderCtaOptions(label, tooltipLabel, false)).toBe('Test');
   });
 
-  it('renderLength returns correct CapHeading', () => {
-    const CapHeading = ({ type, className, children }) => <div className={className}>{children}</div>;
-    const formatMessage = (msg, values) => `${values.currentLength}/${values.maxLength}`;
-    const renderLength = (len, max) => (
-      <CapHeading type="label1" className="rcs-render-btn-length">
-        {formatMessage({}, { currentLength: len, maxLength: max })}
-      </CapHeading>
+  it('inner char count uses current/max format', () => {
+    const formatMessage = (msg, values) => `${values.current}/${values.max}`;
+    const renderInnerCharCount = (len, max) => (
+      <span className="rcs-cta-inner-char-count">
+        {formatMessage({}, { current: len, max })}
+      </span>
     );
-    const result = renderLength(5, 25);
+    const result = renderInnerCharCount(5, 25);
     expect(result.props.children).toBe('5/25');
   });
 });

package/v2Components/CapTagList/index.js

@@ -44,6 +44,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     super(props);
     this.state = {
       tagValue: '',
+      selectedNodeKey: '',
       expandedKeys: [],
       searchValue: '',
       autoExpandParent: true,
@@ -122,9 +123,11 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     this.handleOnExpand(info.node.props.eventKey);
   };
 
-  getSearchedExpandedKeys(tags, value = '') {
+  getSearchedExpandedKeys(tags, value = '', parentPath = '') {
     let list = [];
     _.forEach(tags, (val = {}, key) => {
+      const rawKey = val?.incentiveSeriesId ? `${key}(${val?.incentiveSeriesId})` : `${key}`;
+      const nodeKey = parentPath ? `${parentPath}.${rawKey}` : rawKey;
       const tagName =
         typeof val?.name === 'string'
           ? _.toLower(_.get(val, "name", ""))
@@ -137,16 +140,16 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           && (tagName.includes(searchStringLower)
             || tagNameWithoutUnderscore.includes(searchStringLower))
         ) {
-          list.push(key);
+          list.push(nodeKey);
         }
-        const temp = this.getSearchedExpandedKeys(val?.subtags, value);
+        const temp = this.getSearchedExpandedKeys(val?.subtags, value, nodeKey);
         list = list.concat(temp);
       } else if (
         val?.name
         && (tagName.includes(searchStringLower)
           || tagNameWithoutUnderscore.includes(searchStringLower))
       ) {
-        list.push(key);
+        list.push(nodeKey);
       }
     });
     return list;
@@ -200,12 +203,17 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   handleOnSelect = (selectedKeys, info) => {
     if (selectedKeys.length > 0) {
       if (info && info.selectedNodes && info.selectedNodes.length > 0 && info.selectedNodes[0].props.isLeaf) {
-        this.setState({tagValue: selectedKeys[0]});
-        const ifDynamicTag = this.checkIfDynamicTag(selectedKeys[0]);
+        const selectedNode = info.selectedNodes[0];
+        const selectedTagValue = selectedNode?.props?.tagKey || selectedKeys[0];
+        this.setState({
+          tagValue: selectedTagValue,
+          selectedNodeKey: selectedKeys[0],
+        });
+        const ifDynamicTag = this.checkIfDynamicTag(selectedTagValue);
         if (ifDynamicTag) {
           this.renderDynamicTagFlow();
         } else {
-          this.props.onSelect(selectedKeys, info);
+          this.props.onSelect([selectedTagValue], info);
           this.setState({visible: false});
         }
       } else if (info && info.selectedNodes && info.selectedNodes.length > 0 && !info.selectedNodes[0].props.isLeaf) {
@@ -237,7 +245,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     this.setState({showModal: true, visible: false});
   };
 
-  renderTags = (tags) => {
+  renderTags = (tags, parentPath = '') => {
     const searchString = this.state.searchValue || '';
     const {
       disableRelatedTags, childTagsToDisable, parentTagstoDisable,
@@ -260,6 +268,8 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       clonedTags = _.omit(clonedTags, CUSTOMER_BARCODE_TAG);
     }
     _.forEach(clonedTags, (val = '', key) => {
+      const rawKey = val?.incentiveSeriesId ? `${key}(${val?.incentiveSeriesId})` : `${key}`;
+      const nodeKey = parentPath ? `${parentPath}.${rawKey}` : rawKey;
       let supportedTagsString = '';
       _.forEach(val.supportedTags, (supportedTag) => {
         supportedTagsString += `${supportedTag} ,`;
@@ -276,13 +286,14 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           || tagNameWithoutUnderscore.includes(searchStringLower));
       if (_.has(val, 'subtags')) {
         const disabled = disableRelatedTags ? parentTagstoDisable.includes(key) : false;
-        const temp = this.renderTags(val?.subtags);
+        const temp = this.renderTags(val?.subtags, nodeKey);
         if (temp?.length) {
           const tagValue = (
             <CapTreeNode
               title={disabled ? <CapTooltip title={loyaltyAttrDisableText}>{val?.name}</CapTooltip> : val?.name}
               tag={val}
-              key={val?.incentiveSeriesId ? `${key}(${val?.incentiveSeriesId})` : `${key}`}
+              tagKey={rawKey}
+              key={nodeKey}
               disabled={disabled}
             >
               {temp}
@@ -317,12 +328,9 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
                   )
                 }
                 tag={val}
+                tagKey={rawKey}
                 isLeaf
-                key={
-                  val?.incentiveSeriesId
-                    ? `${key}(${val?.incentiveSeriesId})`
-                    : `${key}`
-                }
+                key={nodeKey}
                 disabled={childDisabled}
               >
               </CapTreeNode>
@@ -353,12 +361,9 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
                 )
               }
               tag={val}
+              tagKey={rawKey}
               isLeaf
-              key={
-                val?.incentiveSeriesId
-                  ? `${key}(${val?.incentiveSeriesId})`
-                  : `${key}`
-              }
+              key={nodeKey}
               disabled={childDisabled}
             >
             </CapTreeNode>
@@ -388,7 +393,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     } = this.props;
     const {formatMessage} = intl;
     const {
-      tagValue, expandedKeys, autoExpandParent, visible, translationLang, selectedContext, isLoadingLoyaltyTags, isLoadingContextChange,
+      tagValue, selectedNodeKey, expandedKeys, autoExpandParent, visible, translationLang, selectedContext, isLoadingLoyaltyTags, isLoadingContextChange,
     } = this.state;
 
     // Show loading spinner if general loading OR if specifically loading loyalty tags OR if context change is in progress
@@ -407,7 +412,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       },
     ];
     const contentSection = (
-      <CapRow>
+      <CapRow className="cap-tag-list-popover-inner">
         <CapSpin tip={formatMessage(messages.gettingTags)} spinning={shouldShowLoading}>
           <Search
             style={{ marginBottom: 8, width: '250px'}}
@@ -427,7 +432,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           <CapTree
             styling={{height: '350px', overflow: 'auto'}}
             onSelect={this.handleOnSelect}
-            selectedKeys={tagValue}
+            selectedKeys={selectedNodeKey ? [selectedNodeKey] : []}
             expandedKeys={expandedKeys}
             autoExpandParent={autoExpandParent}
             onExpand={this.onExpand}

package/v2Components/CapTagList/style.scss

@@ -1,5 +1,34 @@
 @import "~@capillarytech/cap-ui-library/styles/_variables";
 
+.cap-tag-list-popover-inner {
+  max-width: 20rem;
+  min-width: 0;
+  box-sizing: border-box;
+
+  .ant-tree.cap-tree-v2.ant-tree-icon-hide {
+    width: 100%;
+    max-width: 100%;
+
+    ul {
+      max-width: 100%;
+    }
+
+    li {
+      overflow: hidden;
+      max-width: 100%;
+    }
+
+    li .ant-tree-node-content-wrapper {
+      width: calc(100% - 3.5rem); // leave room for switcher (~24px)
+      max-width: calc(100% - 3.5rem);
+      overflow: hidden;
+      vertical-align: top;
+      box-sizing: border-box;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
 @media (max-height: 25rem) {
   .ant-tree.cap-tree-v2.ant-tree-icon-hide {
     height: 8.5714rem;

package/v2Components/CapTagListWithInput/__tests__/CapTagListWithInput.test.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from 'react-intl';
+import CapTagListWithInput from '../index';
+
+const capturedTagListProps = { current: null };
+
+jest.mock('../../../v2Containers/TagList', () => {
+  const React = require('react');
+  const Mock = (props) => {
+    capturedTagListProps.current = props;
+    return <div data-testid="mock-tag-list">TagList</div>;
+  };
+  return Mock;
+});
+
+jest.mock('@capillarytech/cap-ui-library/CapRow', () => ({ children }) => <div>{children}</div>);
+jest.mock('@capillarytech/cap-ui-library/CapColumn', () => ({ children }) => <div>{children}</div>);
+jest.mock('@capillarytech/cap-ui-library/CapHeading', () => () => null);
+jest.mock('@capillarytech/cap-ui-library/CapInput', () => () => <input data-testid="cap-input" />);
+
+const waitMap = {
+  b1: { eventName: 'Order Placed', blockName: 'Wait', tags: [] },
+};
+
+describe('CapTagListWithInput', () => {
+  beforeEach(() => {
+    capturedTagListProps.current = null;
+  });
+
+  it('forwards waitEventContextTags to TagList', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CapTagListWithInput
+          inputId="test-url"
+          inputOnChange={jest.fn()}
+          waitEventContextTags={waitMap}
+          onTagSelect={jest.fn()}
+          onContextChange={jest.fn()}
+        />
+      </IntlProvider>
+    );
+
+    expect(screen.getByTestId('mock-tag-list')).toBeInTheDocument();
+    expect(capturedTagListProps.current.waitEventContextTags).toEqual(waitMap);
+  });
+
+  it('uses default empty object for waitEventContextTags when omitted', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CapTagListWithInput
+          inputId="test-url"
+          inputOnChange={jest.fn()}
+          onTagSelect={jest.fn()}
+          onContextChange={jest.fn()}
+        />
+      </IntlProvider>
+    );
+
+    expect(capturedTagListProps.current.waitEventContextTags).toEqual({});
+  });
+});

package/v2Components/CapTagListWithInput/index.js

@@ -27,6 +27,7 @@ export const CapTagListWithInput = (props) => {
     userLocale = 'en',
     eventContextTags = [],
     restrictPersonalization = false,
+    waitEventContextTags = {},
     // CapInput props
     inputId,
     inputValue = '',
@@ -77,6 +78,7 @@ export const CapTagListWithInput = (props) => {
             userLocale={userLocale}
             selectedOfferDetails={selectedOfferDetails}
             eventContextTags={eventContextTags}
+            waitEventContextTags={waitEventContextTags}
             style={tagListStyle}
             popoverPlacement={popoverPlacement}
             restrictPersonalization={restrictPersonalization}
@@ -116,6 +118,7 @@ CapTagListWithInput.propTypes = {
   userLocale: PropTypes.string,
   eventContextTags: PropTypes.array,
   restrictPersonalization: PropTypes.bool,
+  waitEventContextTags: PropTypes.object,
 
   // CapInput props
   inputId: PropTypes.string.isRequired,
@@ -154,6 +157,7 @@ CapTagListWithInput.defaultProps = {
   userLocale: 'en',
   eventContextTags: [],
   restrictPersonalization: false,
+  waitEventContextTags: {},
   inputValue: '',
   inputSize: 'default',
   inputRequired: false,

package/v2Components/CapWhatsappCTA/index.js

@@ -52,6 +52,7 @@ export const CapWhatsappCTA = (props) => {
     injectedTags = {},
     selectedOfferDetails = [],
     eventContextTags = [],
+    waitEventContextTags = {},
   } = props;
   const { formatMessage } = intl;
   const invalidVarRegex = /{{(.*?)}}/g;
@@ -283,6 +284,7 @@ export const CapWhatsappCTA = (props) => {
                   injectedTags={injectedTags}
                   selectedOfferDetails={selectedOfferDetails}
                   eventContextTags={eventContextTags}
+                  waitEventContextTags={waitEventContextTags}
                 />
               </CapColumn>
             )}

package/v2Components/CommonTestAndPreview/ExistingCustomerModal.js

@@ -24,6 +24,7 @@ const ExistingCustomerModal = ({ customerModal, onCloseCustomerModal, customerDa
             type="primary"
             onClick={() => onSave({}, setIsLoading)}
             loading={isLoading}
+            disabled={isLoading}
           >
             <FormattedMessage {...messages.saveButton} />
           </CapButton>