@capillarytech/creatives-library 8.0.353-alpha.6 → 8.0.353

package/v2Components/FormBuilder/index.js

@@ -37,7 +37,6 @@ import { createStructuredSelector } from 'reselect';
 import { CAP_SPACE_12, CAP_SPACE_08, FONT_COLOR_05, FONT_COLOR_04 } from '@capillarytech/cap-ui-library/styled/variables';
 import UnifiedPreview from '../CommonTestAndPreview/UnifiedPreview';
 import { ANDROID } from '../CommonTestAndPreview/constants';
-import TemplatePreview from '../TemplatePreview';
 import TagList from '../../v2Containers/TagList';
 import CapTagListWithInput from '../CapTagListWithInput';
 import SlideBox from '../SlideBox';
@@ -80,6 +79,69 @@ const errorMessageForTags = {
   TAG_BRACKET_COUNT_MISMATCH_ERROR: 'tagBracketCountMismatchError'
 };
 
+// Isolated input for EMAIL template-name: only this tiny component re-renders on each keystroke.
+// formData is updated only on blur (onCommit), eliminating all re-renders during typing.
+class HighFreqInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { localValue: props.value || '' };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.value !== this.props.value && this.state.localValue !== this.props.value) {
+      this.setState({ localValue: this.props.value || '' });
+    }
+  }
+
+  handleChange = (e) => {
+    this.setState({ localValue: e.target.value });
+  };
+
+  handleBlur = (e) => {
+    this.props.onCommit(this.state.localValue);
+    if (this.props.onBlur) this.props.onBlur(e);
+  };
+
+  render() {
+    const { value: _v, onCommit: _oc, onBlur: _ob, ...rest } = this.props;
+    return <CapInput {...rest} value={this.state.localValue} onChange={this.handleChange} onBlur={this.handleBlur} />;
+  }
+}
+
+// Isolated wrapper for EMAIL template-subject: blur-only commit, same as HighFreqInput.
+class HighFreqTagInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { localInputValue: props.inputValue || '' };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.inputValue !== this.props.inputValue && this.state.localInputValue !== this.props.inputValue) {
+      this.setState({ localInputValue: this.props.inputValue || '' });
+    }
+  }
+
+  handleInputChange = (e) => {
+    this.setState({ localInputValue: e.target.value });
+  };
+
+  handleBlur = () => {
+    this.props.onCommit(this.state.localInputValue);
+  };
+
+  render() {
+    const { inputValue: _iv, onCommit: _oc, inputOnChange: _ic, ...rest } = this.props;
+    return (
+      <CapTagListWithInput
+        {...rest}
+        inputValue={this.state.localInputValue}
+        inputOnChange={this.handleInputChange}
+        inputProps={{ ...(this.props.inputProps || {}), onBlur: this.handleBlur }}
+      />
+    );
+  }
+}
+
 class FormBuilder extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -353,6 +415,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       this.setState({tabCount: nextProps.tabCount});
     }
     if (nextProps.startValidation && nextProps.startValidation !== false && this.props.startValidation !== nextProps.startValidation) {
+      if (this.debouncedUpdateFormData) this.debouncedUpdateFormData.flush();
       this.setState({checkValidation: true});
       this.validateForm(null, null, true, true, () => {
         //triggering the saveFormData or onSubmit when validation sets isFormValid to TRUE
@@ -2990,8 +3053,8 @@ 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}
                 restrictPersonalization={this.props.restrictPersonalization}
+                waitEventContextTags={this.props?.waitEventContextTags}
               />
             </CapColumn>
           );
@@ -3411,26 +3474,25 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               ? formatMessage(messages.personalizationTagsErrorMessage)
               : (errorType === TAG_BRACKET_COUNT_MISMATCH_ERROR ? formatMessage(globalMessages.unbalanacedCurlyBraces) : (val.errorMessage && ifError ? val.errorMessage : ''));
             if (styling === 'semantic') {
-              columns.push(
-              <CapColumn key={val.id} span={val.width} offset={val.offset} style={val.style || {}}>
-                  <CapInput
-                    id={val.id}
-                    errorMessage={errorMessageText}
-                    label={val.label}
-                    inductiveText={val.inductiveText}
-                    className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
-                    // fluid={val.fluid}
-                    style={val.style ? val.style : {}}
-                    placeholder={val.placeholder}
-                    onChange={(e) => this.updateFormData(e.target.value, val)}
-                    onBlur={(e) => this.handleFieldBlur(e, val)}
-                    value={value || ""}
-                    defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
-                    disabled={val.disabled}
-                    size={val.size || "default"}
-                  />
-                  {this.props.schema?.channel === EMAIL &&
-                    !aiContentBotDisabled && (
+              const isEmailStandaloneHighFreq = val.standalone && this.props.schema?.channel?.toUpperCase() === EMAIL;
+              if (isEmailStandaloneHighFreq) {
+                columns.push(
+                  <CapColumn key={val.id} span={val.width} offset={val.offset} style={val.style || {}}>
+                    <HighFreqInput
+                      id={val.id}
+                      errorMessage={errorMessageText}
+                      label={val.label}
+                      inductiveText={val.inductiveText}
+                      className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
+                      style={val.style ? val.style : {}}
+                      placeholder={val.placeholder}
+                      onCommit={(newValue) => this.performFormDataUpdate(newValue, val)}
+                      onBlur={(e) => this.handleFieldBlur(e, val)}
+                      value={value || ""}
+                      disabled={val.disabled}
+                      size={val.size || "default"}
+                    />
+                    {!aiContentBotDisabled && (
                       <CapAskAira.ContentGenerationBot
                         text={value || ""}
                         setText={this.handleSetText.bind(this, val)}
@@ -3439,12 +3501,48 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                         rootStyle={{
                           bottom: "0.2rem",
                           right: "0.2rem",
-                          left: "auto",                           
+                          left: "auto",
                         }}
                       />
                     )}
-                </CapColumn>
-              );
+                  </CapColumn>
+                );
+              } else {
+                columns.push(
+                <CapColumn key={val.id} span={val.width} offset={val.offset} style={val.style || {}}>
+                    <CapInput
+                      id={val.id}
+                      errorMessage={errorMessageText}
+                      label={val.label}
+                      inductiveText={val.inductiveText}
+                      className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
+                      // fluid={val.fluid}
+                      style={val.style ? val.style : {}}
+                      placeholder={val.placeholder}
+                      onChange={(e) => this.updateFormData(e.target.value, val)}
+                      onBlur={(e) => this.handleFieldBlur(e, val)}
+                      value={value || ""}
+                      defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                      disabled={val.disabled}
+                      size={val.size || "default"}
+                    />
+                    {this.props.schema?.channel === EMAIL &&
+                      !aiContentBotDisabled && (
+                        <CapAskAira.ContentGenerationBot
+                          text={value || ""}
+                          setText={this.handleSetText.bind(this, val)}
+                          iconPlacement="float-br"
+                          iconSize="1.6rem"
+                          rootStyle={{
+                            bottom: "0.2rem",
+                            right: "0.2rem",
+                            left: "auto",
+                          }}
+                        />
+                      )}
+                  </CapColumn>
+                );
+              }
             }
             break;
 
@@ -3660,11 +3758,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     selectedOfferDetails={this.props.selectedOfferDetails}
                     channel={channel}
                     eventContextTags={this.props?.eventContextTags}
-                    waitEventContextTags={this.props?.waitEventContextTags}
                     restrictPersonalization={this.props.restrictPersonalization}
-                    getPopupContainer={this.props.tagListGetPopupContainer}
-                    popoverOverlayStyle={this.props.tagListPopoverOverlayStyle}
-                    popoverOverlayClassName={this.props.tagListPopoverOverlayClassName}
+                    waitEventContextTags={this.props?.waitEventContextTags}
                   />
                 </CapColumn>
               );
@@ -3688,37 +3783,48 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               isBEEAppEnableForCapTagList === false ||
               channelForCapTagList !== 'EMAIL'
             ) {
+              const isEmailStandaloneSubject = val.standalone && channelForCapTagList === EMAIL && val.id === 'template-subject';
+              const tagListProps = {
+                key: `input-${val.id}`,
+                inputId: val.id,
+                inputValue: this.state.formData[val.id] || '',
+                inputPlaceholder: val.placeholder || '',
+                inputErrorMessage: val.errorMessage && ifError ? val.errorMessage : '',
+                inputRequired: val.required || false,
+                inputDisabled: val.disabled || false,
+                headingText: val.label || '',
+                headingStyle: val.headingStyle || { marginTop: '3%', marginRight: '79%' },
+                headingType: "h4",
+                onTagSelect: (data) => this.callChildEvent(data, val, 'onTagSelect'),
+                onContextChange: this.props.onContextChange,
+                location: this.props.location,
+                tags: this.props.tags ? this.props.tags : [],
+                injectedTags: this.props.injectedTags ? this.props.injectedTags : {},
+                className: val.className ? val.className : '',
+                userLocale: this.state.translationLang,
+                selectedOfferDetails: this.props.selectedOfferDetails,
+                eventContextTags: this.props?.eventContextTags,
+                waitEventContextTags: this.props?.waitEventContextTags,
+                moduleFilterEnabled: moduleFilterEnabledForCapTagList,
+                containerStyle: val.style || {},
+                inputProps: val.inputProps || {},
+                showInput: val.showInput !== false,
+                showTagList: val.showTagList !== false,
+                restrictPersonalization: this.props.restrictPersonalization,
+              };
               columns.push(
                 <CapColumn key={`input-${val.id}`} offset={val.offset} span={val.width ? val.width : ''} style={val.style ? val.style : {marginBottom: '16px'}}>
-                  <CapTagListWithInput
-                    key={`input-${val.id}`}
-                    inputId={val.id}
-                    inputValue={this.state.formData[val.id] || ''}
-                    inputOnChange={(e) => this.updateFormData(e.target.value, val)}
-                    inputPlaceholder={val.placeholder || ''}
-                    inputErrorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
-                    inputRequired={val.required || false}
-                    inputDisabled={val.disabled || false}
-                    headingText={val.label || ''}
-                    headingStyle={val.headingStyle || { marginTop: '3%', marginRight: '79%' }}
-                    headingType="h4"
-                    onTagSelect={(data) => this.callChildEvent(data, val, 'onTagSelect')}
-                    onContextChange={this.props.onContextChange}
-                    location={this.props.location}
-                    tags={this.props.tags ? this.props.tags : []}
-                    injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
-                    className={val.className ? val.className : ''}
-                    userLocale={this.state.translationLang}
-                    selectedOfferDetails={this.props.selectedOfferDetails}
-                    eventContextTags={this.props?.eventContextTags}
-                    waitEventContextTags={this.props?.waitEventContextTags}
-                    moduleFilterEnabled={moduleFilterEnabledForCapTagList}
-                    containerStyle={val.style || {}}
-                    inputProps={val.inputProps || {}}
-                    showInput={val.showInput !== false}
-                    showTagList={val.showTagList !== false}
-                    restrictPersonalization={this.props.restrictPersonalization}
-                  />
+                  {isEmailStandaloneSubject ? (
+                    <HighFreqTagInput
+                      {...tagListProps}
+                      onCommit={(newValue) => this.performFormDataUpdate(newValue, val)}
+                    />
+                  ) : (
+                    <CapTagListWithInput
+                      {...tagListProps}
+                      inputOnChange={(e) => this.updateFormData(e.target.value, val)}
+                    />
+                  )}
                 </CapColumn>
               );
             }
@@ -4007,6 +4113,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   moduleFilterEnabled={isModuleFilterEnabled}
                   eventContextTags={this.props?.eventContextTags}
                   waitEventContextTags={this.props?.waitEventContextTags}
+                  isGetBeeData={this.props?.isGetBeeData}
+                  getBEEData={this.props?.getBEEData}
                 />
               </CapColumn>
             );
@@ -4309,8 +4417,8 @@ FormBuilder.defaultProps = {
   userLocale: localStorage.getItem('jlocale') || 'en',
   showLiquidErrorInFooter: () => {},
   metaDataStatus: "",
-  isTestAndPreviewMode: false, // Default to false to maintain existing behavior
   waitEventContextTags: {},
+  isTestAndPreviewMode: false, // Default to false to maintain existing behavior
 };
 
 FormBuilder.propTypes = {
@@ -4358,16 +4466,13 @@ FormBuilder.propTypes = {
   type: PropTypes.string.isRequired,
   isEmailLoading: PropTypes.bool.isRequired,
   moduleType: PropTypes.string.isRequired,
-  showLiquidErrorInFooter: PropTypes.func.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
   restrictPersonalization: PropTypes.bool,
-  tagListGetPopupContainer: PropTypes.func,
-  tagListPopoverOverlayStyle: PropTypes.object,
-  tagListPopoverOverlayClassName: PropTypes.string,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -537,21 +537,20 @@
       .unicode-disabled{
         font-size: 16px;
       }
-      position: absolute;
-      overflow: auto;
-      top: 0;
-      left: 17%;
-      white-space: pre-wrap;
-      word-break: break-word;
-      max-height: 100%;
-      line-height: 14px;
-      font-size: 10px;
-      font-family: 'open-sans';
-
       &.sms {
+        max-height: 100%;
+        position: absolute;
         // width: initial;
+        overflow: auto;
+        top: 0;
+        left: 17%;
+        white-space: pre-wrap;
+        word-break: break-word;
+        line-height: 14px;
         padding: 0 8px 8px 8px;
+        font-size: 10px;
         width: 100%;
+        font-family: 'open-sans';
         .rcs-image{
           width: 100%;
           height: 123px;
@@ -583,12 +582,22 @@
       &:not(.sms){
         padding: 4px;
         background: #3F51B5;
+        position: absolute;
         // width: initial;
+        overflow: auto;
+        top: 0;
+        left: 17%;
+        white-space: pre-wrap;
+        word-break: break-word;
         border-radius: 4px;
+        max-height: 100%;
         color: #FFFFFF;
         width: 70%;
         min-height: 26px;
+        line-height: 14px;
         padding: 8px;
+        font-size: 10px;
+        font-family: 'open-sans';
       }
       &.message-pop-carousel {
         position: relative; 
@@ -854,32 +863,6 @@
   }
 }
 
-.shell-v2.rcs-preview {
-  // Collapse the default 8px margin so the divider renders as a clean hairline, not a white gap.
-  .whatsapp-divider {
-    margin: 0;
-  }
-
-  // Override `.message-pop:not(.sms)` (blue background) for RCS carousel cards.
-  .msg-container.sms {
-    .message-pop.sms {
-      .rcs-carousel-card {
-        background: $CAP_WHITE;
-        color: $CAP_G01;
-        width: 10.4rem;
-        left: 0;
-        flex-shrink: 0;
-        padding: $CAP_SPACE_04 0 $CAP_SPACE_08;
-        border-radius: 0.428rem;
-
-        .carousel-title {
-          font-weight: 700 !important;
-        }
-      }
-    }
-  }
-}
-
 .align-center {
   text-align: center;
 }
@@ -1050,7 +1033,9 @@
   top: 0;
 }
 .video-icon {
-  position: sticky;
+  position: absolute;
+  right: -17px;
+  bottom: -17px;
 }
 
 .zalo-preview-container {