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

package/v2Components/CustomerSearchSection/index.js

@@ -183,9 +183,9 @@ const CustomerSearchSection = ({
   };
 
   return (
-    <CapRow className="customer-search-section">
+    <CapRow useLegacy className="customer-search-section">
       <div ref={searchContainerRef}>
-        <CapRow className="search-container">
+        <CapRow useLegacy className="search-container">
           {selectedCustomer ? (
             <SelectedCustomerView
               customer={selectedCustomer}
@@ -203,7 +203,7 @@ const CustomerSearchSection = ({
             />
           )}
           {showDropdown && !selectedCustomer && (
-            <CapRow className="search-dropdown-container">
+            <CapRow useLegacy className="search-dropdown-container">
               <CapRow type="flex" justify="center" align="middle">
                 {(processedSearchData?.length === 0 && customerSearchValue != null && !isSearchingCustomer) && (
                   <CapCard className="validation-card">
@@ -214,7 +214,7 @@ const CustomerSearchSection = ({
                 )}
                 {(isSearchingCustomer) && (
                   <CapCard className="validation-card">
-                    <CapRow className="spin-card-align">
+                    <CapRow useLegacy className="spin-card-align">
                       <CapSpin />
                     </CapRow>
                   </CapCard>
@@ -232,12 +232,12 @@ const CustomerSearchSection = ({
                               className="search-results-height link-result"
                               title={(
                                 <>
-                                  <CapRow type="flex" align="middle" gutter={16}>
+                                  <CapRow type="flex" align="middle" gap={16}>
                                     <CapColumn data-testid="namingIcon">
                                       <CapRow className="customer-common-profile">{getNamingIcon(d?.name)}</CapRow>
                                     </CapColumn>
                                     <CapColumn>
-                                      <CapRow type="flex" gutter={12}>
+                                      <CapRow type="flex" gap={12}>
                                         <CapColumn data-testid="searchResultName">
                                           <CapHeading className="search-text" type="h4">
                                             {d?.name}
@@ -279,7 +279,7 @@ const SearchInput = ({
   disabled,
   placeholder,
 }) => (
-  <CapRow className="search-input-container">
+  <CapRow useLegacy className="search-input-container">
     <CapInput
       value={value}
       onChange={onChange}
@@ -290,7 +290,7 @@ const SearchInput = ({
       autoComplete="off"
     />
     {error && (
-      <CapRow className="search-error">
+      <CapRow useLegacy className="search-error">
         <CapAlert
           message={error}
           type="error"
@@ -304,7 +304,7 @@ const SearchInput = ({
 
 const SelectedCustomerView = ({ customer, onClear, showIdentifiers }) => (
   <div className="selected-customer-view">
-    <CapRow type="flex" align="middle" gutter={8}>
+    <CapRow type="flex" align="middle" gap={8}>
       <CapColumn>
         <CapRow className="customer-common-profile">{getNamingIcon(customer?.name)}</CapRow>
       </CapColumn>

package/v2Components/EmailMobilePreview/index.js

@@ -89,7 +89,7 @@ class EmailMobilePreview extends React.Component {
                   <div className="email-preview-container">
                     {enableShowAllDevices && (
                       <CapButton
-                        type="flat"
+                        type="link"
                         onClick={this.onClickShowInAllDevices}
                       >
                         View in all devices

package/v2Components/ErrorInfoNote/index.js

@@ -94,7 +94,7 @@ const TabContent = ({ issues, onErrorClick, intl }) => {
   };
 
   return (
-    <CapRow className="error-info-note__content">
+    <CapRow useLegacy className="error-info-note__content">
       {issues.map((issue, index) => {
         const { severity, message } = issue;
         const key = `${message}-${index}`;
@@ -114,10 +114,11 @@ const TabContent = ({ issues, onErrorClick, intl }) => {
 
         return (
           <CapRow
+            useLegacy
             key={key}
             className={`error-info-note__item error-info-note__item--${severity || 'error'}`}
           >
-            <CapRow className="error-info-note__item-content">
+            <CapRow useLegacy className="error-info-note__item-content">
               <CapLabelInline type="label2" className="error-info-note__item-message">
                 {displayMessage}
               </CapLabelInline>
@@ -149,7 +150,7 @@ const TabContent = ({ issues, onErrorClick, intl }) => {
             {onErrorClick && (
               <CapTooltip title={intl?.formatMessage ? intl.formatMessage(messages.navigateToError) : 'Go to error location'}>
                 <CapButton
-                  type="flat"
+                  type="link"
                   className="error-info-note__item-navigate"
                   onClick={(e) => handleNavigateClick({ ...issue, line, column: char }, e)}
                   aria-label={intl?.formatMessage ? intl.formatMessage(messages.navigateToError) : 'Go to error location'}
@@ -348,7 +349,7 @@ export const ErrorInfoNote = (props) => {
   }
 
   return (
-    <CapRow className="error-container error-container--tabs">
+    <CapRow useLegacy className="error-container error-container--tabs">
       <CapRow className="error-info-note__header">
         <CapTab
           activeKey={activeKey || (tabPanes[0]?.key)}
@@ -356,10 +357,10 @@ export const ErrorInfoNote = (props) => {
           panes={tabPanes}
           className="error-info-note__tabs"
         />
-        <CapRow className="error-info-note__actions">
+        <CapRow useLegacy className="error-info-note__actions">
           {hasLiquidErrors && (
             <CapButton
-              type="flat"
+              type="link"
               className="error-info-note__liquid-doc"
               onClick={handleLiquidDocClick}
             >
@@ -369,7 +370,7 @@ export const ErrorInfoNote = (props) => {
           )}
           <CapTooltip title={intl?.formatMessage ? intl.formatMessage(messages.closePanel) : 'Close validation panel'}>
             <CapButton
-              type="flat"
+              type="link"
               className="error-info-note__close"
               onClick={handleClose}
               aria-label={intl?.formatMessage ? intl.formatMessage(messages.closePanel) : 'Close validation panel'}
@@ -393,6 +394,7 @@ const ErrorSection = ({
   <>
     {title && (
       <CapRow
+        useLegacy
         className={`error-header ${
           !liquidError ? 'standard-error-header' : ''
         }`}
@@ -404,7 +406,7 @@ const ErrorSection = ({
         <>
           {liquidError && (
             <CapButton
-              type="flat"
+              type="link"
               className="add-btn"
               onClick={() => window.open(LIQUID_DOC_URL, '_blank')}
             >
@@ -416,13 +418,13 @@ const ErrorSection = ({
       </CapRow>
     )}
     {platformLabel && (
-      <CapRow className="error-header-sub-title">
+      <CapRow useLegacy className="error-header-sub-title">
         <CapLabel type="label2">{platformLabel}</CapLabel>
       </CapRow>
     )}
-    <CapRow className="error-list-legacy">
+    <CapRow useLegacy className="error-list-legacy">
       {(errors || []).map((error) => (
-        <CapRow key={`${error}`} className="error-list-legacy__item">
+        <CapRow useLegacy key={`${error}`} className="error-list-legacy__item">
           <CapLabel type="label2" className="cap-list-v2-error-item">
             <CapLabel type="label2">{error}</CapLabel>
           </CapLabel>

package/v2Components/ErrorInfoNote/style.scss

@@ -252,7 +252,7 @@
   justify-content: space-between;
   font-weight: $FONT_WEIGHT_MEDIUM;
 
-  .ant-btn.cap-button-v2.flat-btn {
+  .ant-btn.cap-button-v2.ant-btn-link {
     display: flex;
     margin-left: auto;
     background-color: inherit;

package/v2Components/FormBuilder/_formBuilder.scss

@@ -20,6 +20,7 @@
   bottom: 4px !important;
 }
 
+/* TODO: cap-react-ui-library class removed — review this override */
 .cap-input {
   .error-message {
     margin-left: initial !important;

package/v2Components/FormBuilder/index.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import _ from 'lodash';
-import { Tabs, Table, Modal} from 'antd';
+import { Table, Modal} from 'antd';
 import { connect } from 'react-redux';
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapDrawer from '@capillarytech/cap-ui-library/CapDrawer';
@@ -24,6 +24,7 @@ import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
 import CapTable from '@capillarytech/cap-ui-library/CapTable';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapTab from '@capillarytech/cap-ui-library/CapTab';
 import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import CapUploader from '@capillarytech/cap-ui-library/CapUploader';
 import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
@@ -64,7 +65,6 @@ import { isEmailUnsubscribeTagOptional, isAiContentBotDisabled } from '../../uti
 import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';
 import { bindActionCreators } from 'redux';
 import { getChannelData, hasPersonalizationTags, validateLiquidTemplateContent, validateMobilePushContent } from '../../utils/commonUtils';
-const TabPane = Tabs.TabPane;
 const {Column} = Table;
 const {TextArea} = CapInput;
 const {CapRadioGroup} = CapRadio;
@@ -2990,6 +2990,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 selectedOfferDetails={this.props.selectedOfferDetails}
                 eventContextTags={this.props?.eventContextTags}
                 restrictPersonalization={this.props.restrictPersonalization}
+                waitEventContextTags={this.props?.waitEventContextTags}
               />
             </CapColumn>
           );
@@ -3019,6 +3020,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 userLocale={this.props.userLocale}
                 selectedOfferDetails={this.props.selectedOfferDetails}
                 eventContextTags={this.props?.eventContextTags}
+                waitEventContextTags={this.props?.waitEventContextTags}
                 moduleFilterEnabled={this.props.location && this.props.location.query && this.props.location.query.type !== 'embedded'}
                 containerStyle={val.style || {}}
                 inputProps={val.inputProps || {}}
@@ -3156,7 +3158,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           break;
       }
       row.push(
-        <CapRow>
+        <CapRow useLegacy>
           {
             _.forEach(columns, (value) => {
               if (value) {
@@ -3205,7 +3207,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       cols.push(<CapColumn style={childSection.colStyle ? childSection.colStyle : {}}offset={childSection.offset} span={childSection.width}>{renderedChildSection}</CapColumn>);
       return true;
     });
-    const row = (<CapRow style={section.rowStyle ? section.rowStyle : {}}>
+    const row = (<CapRow useLegacy style={section.rowStyle ? section.rowStyle : {}}>
       {
         _.forEach(cols, (value) => {
           if (value) {
@@ -3318,7 +3320,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       return (
         <CapButton
           className="dragger-button"
-          type="flat"
+          type="link"
           style={{top: 0, position: 'absolute', right: 0, color: FONT_COLOR_05 }}
           onClick={this.onReUpload}
         >
@@ -3327,7 +3329,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       );
     }
     return (
-      <CapButton disabled={val.disabled ? val.disabled : false} type="flat" prefix={<CapIcon size="s" type="add-photo" />} onClick={(e) => this.openFileDialog(e, val.id)} style={{float: 'right', color: `${val.disabled ? FONT_COLOR_04 : FONT_COLOR_05}`}}>
+      <CapButton disabled={val.disabled ? val.disabled : false} type="link" prefix={<CapIcon size="s" type="add-photo" />} onClick={(e) => this.openFileDialog(e, val.id)} style={{float: 'right', color: `${val.disabled ? FONT_COLOR_04 : FONT_COLOR_05}`}}>
         {val.label}
       </CapButton>
     );
@@ -3658,6 +3660,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     channel={channel}
                     eventContextTags={this.props?.eventContextTags}
                     restrictPersonalization={this.props.restrictPersonalization}
+                    waitEventContextTags={this.props?.waitEventContextTags}
                   />
                 </CapColumn>
               );
@@ -3704,6 +3707,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     userLocale={this.state.translationLang}
                     selectedOfferDetails={this.props.selectedOfferDetails}
                     eventContextTags={this.props?.eventContextTags}
+                    waitEventContextTags={this.props?.waitEventContextTags}
                     moduleFilterEnabled={moduleFilterEnabledForCapTagList}
                     containerStyle={val.style || {}}
                     inputProps={val.inputProps || {}}
@@ -3998,6 +4002,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   onContextChange={this.props.onContextChange}
                   moduleFilterEnabled={isModuleFilterEnabled}
                   eventContextTags={this.props?.eventContextTags}
+                  waitEventContextTags={this.props?.waitEventContextTags}
                   isGetBeeData={this.props?.isGetBeeData}
                   getBEEData={this.props?.getBEEData}
                 />
@@ -4029,7 +4034,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         return true;
       });
       const row = (
-        <CapRow style={field.rowStyle ? field.rowStyle : {}} className={field.rowClassName ? field.rowClassName : ''}>
+        <CapRow useLegacy style={field.rowStyle ? field.rowStyle : {}} className={field.rowClassName ? field.rowClassName : ''}>
           {
             _.forEach(columns, (value) => {
               if (value) {
@@ -4071,7 +4076,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
       });
       const row = (
-        <CapRow>
+        <CapRow useLegacy>
           {
             _.forEach(columns, (value) => {
               if (value) {
@@ -4154,31 +4159,30 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
           const isPaneSupported = typeof pane.isSupported === "boolean" ? pane.isSupported : true; // pane.isSupported field exists only in mpush schema, in other channels it is not
           if (isPaneSupported) {
-            renderedPanes.push(
-              <TabPane
-                forceRender
-                tab={
-                  <div className="form-tab-header" onInput={(e) => e.stopPropagation()}>
-                    { this.state.translationLang !== 'ja-JP' && (
-                    _.forEach(renderedContentSections, (value) => {
-                      if (value) {
-                        return value;
-                      }
-                      return value;
-                    }))
-                    }
-                  </div>
-                }
-                key={paneTabKey && paneTabKey !== '' ? `${paneTabKey}` : index}>
-                {
-                  _.forEach(renderedSections, (value) => {
+            renderedPanes.push({
+              forceRender: true,
+              tab: (
+                <div className="form-tab-header" onInput={(e) => e.stopPropagation()}>
+                  { this.state.translationLang !== 'ja-JP' && (
+                  _.forEach(renderedContentSections, (value) => {
                     if (value) {
                       return value;
                     }
                     return value;
-                  })
-                }
-              </TabPane>);
+                  }))
+                  }
+                </div>
+              ),
+              key: paneTabKey && paneTabKey !== '' ? `${paneTabKey}` : index,
+              content: (
+                _.forEach(renderedSections, (value) => {
+                  if (value) {
+                    return value;
+                  }
+                  return value;
+                })
+              ),
+            });
             paneIndex += 1;
           }
         });
@@ -4191,7 +4195,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           activeTabKey = stateTabKey;
         }
         return (
-          <Tabs
+          <CapTab
             className={`cap-tabs-${container.id}`}
             activeKey={activeTabKey && activeTabKey !== '' ? `${activeTabKey}` : '1'}
             defaultActiveKey={activeTabKey && activeTabKey !== '' ? `${activeTabKey}` : '1'}
@@ -4205,16 +4209,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 }
                 return value;
               })
-            }>
-            {
-            _.forEach(renderedPanes, (value) => {
-              if (value) {
-                return value;
-              }
-              return value;
-            })
             }
-          </Tabs>
+            panes={renderedPanes}
+          />
         );
 
       default:
@@ -4268,7 +4265,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
     return (
       <CapSpin spinning={Boolean((this.isLiquidFlowSupportedByChannel() && this.props.liquidExtractionInProgress) || this.props.metaDataStatus === REQUEST)} tip={this.props.intl.formatMessage(messages.liquidSpinText)} >
-      <CapRow>
+      <CapRow useLegacy>
         {this.props.schema && this.renderForm()}
         <SlideBox
           header={
@@ -4302,6 +4299,7 @@ FormBuilder.defaultProps = {
   userLocale: localStorage.getItem('jlocale') || 'en',
   showLiquidErrorInFooter: () => {},
   metaDataStatus: "",
+  waitEventContextTags: {},
   isTestAndPreviewMode: false, // Default to false to maintain existing behavior
 };
 
@@ -4352,6 +4350,7 @@ FormBuilder.propTypes = {
   moduleType: PropTypes.string.isRequired,
   showLiquidErrorInFooter: PropTypes.bool.isRequired,
   eventContextTags: PropTypes.array.isRequired,
+  waitEventContextTags: PropTypes.object,
   forwardedTags: PropTypes.object.isRequired,
   isLoyaltyModule: PropTypes.bool.isRequired,
   isTestAndPreviewMode: PropTypes.bool, // Add new prop type

package/v2Components/HtmlEditor/HTMLEditor.js

@@ -94,6 +94,7 @@ const HTMLEditor = forwardRef(({
   injectedTags = {},
   location,
   eventContextTags = [],
+  waitEventContextTags,
   selectedOfferDetails = [],
   channel,
   userLocale = 'en',
@@ -361,7 +362,7 @@ const HTMLEditor = forwardRef(({
     const issueCounts = calculateIssueCounts();
     const isContentEmpty = !currentContent || currentContent.trim() === '';
 
-    // hasErrors = only Rule Group #1 (Input & Sanitization) – gates Done/Update/Preview/Test
+    // hasErrors = only Rule Group #1 (Input & Sanitization) - gates Done/Update/Preview/Test
     const newState = {
       isContentEmpty,
       issueCounts,
@@ -608,7 +609,7 @@ const HTMLEditor = forwardRef(({
   // Loading state
   if (!content || !layout) {
     return (
-      <CapRow className="html-editor-loading">
+      <CapRow useLegacy className="html-editor-loading">
         <CapSpin size="large" tip={intl.formatMessage(messages.initializing)} />
       </CapRow>
     );
@@ -632,7 +633,7 @@ const HTMLEditor = forwardRef(({
           />
         ) : (
           /* InApp variant: Device Toggle + Toolbar combined */
-          <CapRow className="html-editor__header">
+          <CapRow useLegacy className="html-editor__header">
             <DeviceToggle
               activeDevice={activeDevice}
               onDeviceChange={switchDevice}
@@ -651,7 +652,7 @@ const HTMLEditor = forwardRef(({
         )}
 
         {/* Main Content Area - Split Container */}
-        <CapRow className="html-editor-content">
+        <CapRow useLegacy className="html-editor-content">
           <SplitContainer className="html-editor-split-container">
             {/* Code Editor Pane */}
             <CodeEditorPane
@@ -663,6 +664,7 @@ const HTMLEditor = forwardRef(({
               injectedTags={injectedTags}
               location={location}
               eventContextTags={eventContextTags}
+              waitEventContextTags={waitEventContextTags}
               selectedOfferDetails={selectedOfferDetails}
               channel={channel}
               userLocale={userLocale}
@@ -689,7 +691,7 @@ const HTMLEditor = forwardRef(({
           width="93vw"
           className="html-editor-fullscreen-modal"
         >
-          <CapRow className={`html-editor-fullscreen html-editor-fullscreen--${variant} ${isLibraryMode ? 'html-editor-fullscreen--library-mode' : ''}`}>
+          <CapRow useLegacy className={`html-editor-fullscreen html-editor-fullscreen--${variant} ${isLibraryMode ? 'html-editor-fullscreen--library-mode' : ''}`}>
             {/* Editor Toolbar - Conditional based on variant */}
             {variant === HTML_EDITOR_VARIANTS.EMAIL ? (
               <EditorToolbar
@@ -734,6 +736,7 @@ const HTMLEditor = forwardRef(({
                   injectedTags={injectedTags}
                   location={location}
                   eventContextTags={eventContextTags}
+                  waitEventContextTags={waitEventContextTags}
                   selectedOfferDetails={selectedOfferDetails}
                   channel={channel}
                   userLocale={userLocale}
@@ -772,6 +775,7 @@ HTMLEditor.propTypes = {
   injectedTags: PropTypes.object,
   location: PropTypes.object,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   selectedOfferDetails: PropTypes.array,
   channel: PropTypes.string,
   userLocale: PropTypes.string,
@@ -805,6 +809,7 @@ HTMLEditor.defaultProps = {
   injectedTags: {},
   location: null,
   eventContextTags: [],
+  waitEventContextTags: {},
   selectedOfferDetails: [],
   channel: null,
   userLocale: 'en',

package/v2Components/HtmlEditor/__tests__/HTMLEditor.apiErrors.test.js

@@ -225,6 +225,7 @@ const defaultProps = {
   injectedTags: {},
   location: { query: {} },
   eventContextTags: [],
+  waitEventContextTags: {},
   selectedOfferDetails: [],
   channel: 'EMAIL',
   userLocale: 'en',