@capillarytech/creatives-library 8.0.339 → 8.0.340-beta.0

package/v2Components/CapMpushCTA/index.js

@@ -234,16 +234,18 @@ export const CapMpushCTA = (props) => {
                         align="middle"
                         type="flex"
                     >
-                        <CapRow className="mpush-cta-row">
-                            <CapColumn>
-                                <CapIcon size="s" type={'launch'} />
-                            </CapColumn>
-                            <CapColumn className="btn-text">
-                                <CapLabel type="label2" className="mpush-saved-cta-button-text">
-                                    {text}
-                                </CapLabel>
-                            </CapColumn>
-                        </CapRow>
+                        <CapColumn>
+                            <CapRow className="mpush-cta-row">
+                                <CapColumn>
+                                    <CapIcon size="s" type={'launch'} />
+                                </CapColumn>
+                                <CapColumn className="btn-text">
+                                    <CapLabel type="label2" className="mpush-saved-cta-button-text">
+                                        {text}
+                                    </CapLabel>
+                                </CapColumn>
+                            </CapRow>
+                        </CapColumn>
                         <CapColumn >
                             {urlType === DEEP_LINK ?
                                 <CapTag className="cta-type-label">{formatMessage(messages.urlDeepLink)}</CapTag>
@@ -254,7 +256,7 @@ export const CapMpushCTA = (props) => {
                         </CapColumn>
                         <CapColumn>
                         </CapColumn>
-                        {(
+                        <CapColumn>
                             <CapRow className="cta-action-grp">
                                 <CapColumn
                                     className="mpush-saved-cta-edit-icon"
@@ -266,7 +268,7 @@ export const CapMpushCTA = (props) => {
                                     <CapIcon size="s" type="delete" className="cta-action" ariaLabel="delete-cta-icon" />
                                 </CapColumn>
                             </CapRow>
-                        )}
+                        </CapColumn>
                     </CapRow>
                 );
             } else {
@@ -290,7 +292,7 @@ export const CapMpushCTA = (props) => {
                             {renderLength(text.length, BTN_MAX_LENGTH)}
                         </CapColumn>
                         <CapColumn className="mpush-cta-buttons">
-                            <CapRow style={{ width: '30%', marginRight: '10px' }}>
+                            <CapRow useLegacy style={{ width: '30%', marginRight: '10px' }}>
                                 <CapHeading type="h4" className="cta-label">
                                     {formatMessage(messages.ctaType)}
                                 </CapHeading>
@@ -303,7 +305,7 @@ export const CapMpushCTA = (props) => {
                                 />
                             </CapRow>
                             {urlType === DEEP_LINK && (
-                                <CapRow style={{ width: '70%' }}>
+                                <CapRow useLegacy style={{ width: '70%' }}>
                                     <CapHeading type="h4" className="cta-deep-link-label">
                                         {formatMessage(messages.urlDeepLink)}
                                     </CapHeading>
@@ -341,59 +343,63 @@ export const CapMpushCTA = (props) => {
                             )}
                         </CapColumn>
                         {urlType === DEEP_LINK && ctaDeepLinkValue && deepLinkKeysFromSelectionArray.length > 0 && (
-                            <CapRow style={{ marginTop: '10px' }}>
-                                <CapHeading type="h4">
-                                    {formatMessage(messages.deepLinkKeys)}
-                                </CapHeading>
-                                <CapLabel type="label2" className="cta-deep-link-keys-value">
-                                    {(() => {
-                                        if (deepLinkKeysFromSelectionArray.length > 0) {
-                                            return deepLinkKeysFromSelectionArray.join(', ');
-                                        }
-                                        if (deepLinkKeysArray.length > 0) {
-                                            return deepLinkKeysArray.join(', ');
-                                        }
-                                    })()}
-                                </CapLabel>
-                                <CapInput
-                                    id="mpush-deep-link-keys"
-                                    className="mpush-deep-link-keys"
-                                    onChange={onDeepLinkKeysChange}
-                                    placeholder={formatMessage(messages.deepLinkKeysPlaceholder, { key: deepLinkKeysFromSelectionArray.join(', ') })}
-                                    value={Array.isArray(ctaDeepLinkKeysValue) ? ctaDeepLinkKeysValue.join(', ') : (ctaDeepLinkKeysValue || '')}
-                                    size="large"
-                                    data-index={index}
-                                    errorMessage={deepLinkKeysError ? formatMessage(messages.deepLinkKeysRequired) : ""}
-                                />
-                            </CapRow>
+                            <CapColumn>
+                                <CapRow useLegacy style={{ marginTop: '10px' }}>
+                                    <CapHeading type="h4">
+                                        {formatMessage(messages.deepLinkKeys)}
+                                    </CapHeading>
+                                    <CapLabel type="label2" className="cta-deep-link-keys-value">
+                                        {(() => {
+                                            if (deepLinkKeysFromSelectionArray.length > 0) {
+                                                return deepLinkKeysFromSelectionArray.join(', ');
+                                            }
+                                            if (deepLinkKeysArray.length > 0) {
+                                                return deepLinkKeysArray.join(', ');
+                                            }
+                                        })()}
+                                    </CapLabel>
+                                    <CapInput
+                                        id="mpush-deep-link-keys"
+                                        className="mpush-deep-link-keys"
+                                        onChange={onDeepLinkKeysChange}
+                                        placeholder={formatMessage(messages.deepLinkKeysPlaceholder, { key: deepLinkKeysFromSelectionArray.join(', ') })}
+                                        value={Array.isArray(ctaDeepLinkKeysValue) ? ctaDeepLinkKeysValue.join(', ') : (ctaDeepLinkKeysValue || '')}
+                                        size="large"
+                                        data-index={index}
+                                        errorMessage={deepLinkKeysError ? formatMessage(messages.deepLinkKeysRequired) : ""}
+                                    />
+                                </CapRow>
+                            </CapColumn>
                         )}
-                        <CapRow className="mpush-cta-save-delete-btn">
-                            <CapTooltip
-                                title={
-                                    ctaSaveDisabled(index)
-                                        ? formatMessage(messages.ctaSaveDisabled)
-                                        : ""
-                                }
-                                placement={"bottom"}
-                            >
-                                <div className="button-disabled-tooltip-wrapper">
-                                    <CapButton
-                                        onClick={() => isSavedCta(index, true)}
-                                        disabled={ctaSaveDisabled(index)}
-                                        className="mpush-cta-save-btn"
-                                    >
-                                        {formatMessage(globalMessages.save)}
-                                    </CapButton>
-                                </div>
-                            </CapTooltip>
-                            <CapButton
-                                onClick={() => deleteHandler(index)}
-                                className="mpush-cta-delete-btn"
-                                type="secondary"
-                            >
-                                {formatMessage(globalMessages.delete)}
-                            </CapButton>
-                        </CapRow>
+                        <CapColumn>
+                            <CapRow useLegacy className="mpush-cta-save-delete-btn">
+                                <CapTooltip
+                                    title={
+                                        ctaSaveDisabled(index)
+                                            ? formatMessage(messages.ctaSaveDisabled)
+                                            : ""
+                                    }
+                                    placement={"bottom"}
+                                >
+                                    <div className="button-disabled-tooltip-wrapper">
+                                        <CapButton
+                                            onClick={() => isSavedCta(index, true)}
+                                            disabled={ctaSaveDisabled(index)}
+                                            className="mpush-cta-save-btn"
+                                        >
+                                            {formatMessage(globalMessages.save)}
+                                        </CapButton>
+                                    </div>
+                                </CapTooltip>
+                                <CapButton
+                                    onClick={() => deleteHandler(index)}
+                                    className="mpush-cta-delete-btn"
+                                    type="secondary"
+                                >
+                                    {formatMessage(globalMessages.delete)}
+                                </CapButton>
+                            </CapRow>
+                        </CapColumn>
                     </CapRow>
                 );
             }

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>
@@ -385,7 +390,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
@@ -404,7 +409,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       },
     ];
     const contentSection = (
-      <CapRow>
+      <CapRow useLegacy className="cap-tag-list-popover-inner">
         <CapSpin tip={formatMessage(messages.gettingTags)} spinning={shouldShowLoading}>
           <Search
             style={{ marginBottom: 8, width: '250px'}}
@@ -424,7 +429,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}
@@ -439,7 +444,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
                 size="s"
               />
               <CapLink>
-                <CapButton id="translationtagfooter" type="flat" onClick={this.openTranslationLink}>
+                <CapButton id="translationtagfooter" type="link" onClick={this.openTranslationLink}>
                   <div className="tag-list-footer-icon">
                     <div>{JAPANESE_HELP_TEXT}</div>
                     <CapIcon
@@ -480,7 +485,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
                 disableTooltipMsg && disabled ? (
                   disableTooltipMsg
                 ) : fetchingSchemaError ? (
-                  <CapRow className="tooltip-text-container">
+                  <CapRow useLegacy className="tooltip-text-container">
                     <CapLabel className="tooltip-text1">
                       {formatMessage(messages.somethingWentWrong)}
                     </CapLabel>
@@ -492,13 +497,13 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
               }
               placement="right"
             >
-              <CapRow className="tooltip-add-label-container">
+              <CapRow useLegacy className="tooltip-add-label-container">
                 <CapButton
                   disabled={
                     this?.props?.disabled || fetchingSchemaError
                   }
                   isAddBtn
-                  type="flat"
+                  type="link"
                 >
                   {label || ""}
                 </CapButton>

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/CapVideoUpload/index.js

@@ -285,7 +285,7 @@ function CapVideoUpload(props) {
           <div style={{ overflow: 'hidden' }}>
             <CapButton
               className="dragger-button video-reupload"
-              type="flat"
+              type="link"
               onClick={onReUpload}
             >
               <FormattedMessage {...messages.imageReUpload} />