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

package/v2Components/FormBuilder/index.js

@@ -37,6 +37,7 @@ 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';
@@ -79,69 +80,6 @@ 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);
@@ -415,7 +353,6 @@ 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
@@ -3053,8 +2990,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 userLocale={this.props.userLocale}
                 selectedOfferDetails={this.props.selectedOfferDetails}
                 eventContextTags={this.props?.eventContextTags}
-                restrictPersonalization={this.props.restrictPersonalization}
                 waitEventContextTags={this.props?.waitEventContextTags}
+                restrictPersonalization={this.props.restrictPersonalization}
               />
             </CapColumn>
           );
@@ -3474,62 +3411,40 @@ 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') {
-              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"}
-                    />
-                  </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>
-                );
-              }
+              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;
 
@@ -3745,8 +3660,11 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     selectedOfferDetails={this.props.selectedOfferDetails}
                     channel={channel}
                     eventContextTags={this.props?.eventContextTags}
-                    restrictPersonalization={this.props.restrictPersonalization}
                     waitEventContextTags={this.props?.waitEventContextTags}
+                    restrictPersonalization={this.props.restrictPersonalization}
+                    getPopupContainer={this.props.tagListGetPopupContainer}
+                    popoverOverlayStyle={this.props.tagListPopoverOverlayStyle}
+                    popoverOverlayClassName={this.props.tagListPopoverOverlayClassName}
                   />
                 </CapColumn>
               );
@@ -3770,48 +3688,37 @@ 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'}}>
-                  {isEmailStandaloneSubject ? (
-                    <HighFreqTagInput
-                      {...tagListProps}
-                      onCommit={(newValue) => this.performFormDataUpdate(newValue, val)}
-                    />
-                  ) : (
-                    <CapTagListWithInput
-                      {...tagListProps}
-                      inputOnChange={(e) => this.updateFormData(e.target.value, val)}
-                    />
-                  )}
+                  <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}
+                  />
                 </CapColumn>
               );
             }
@@ -4100,8 +4007,6 @@ 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>
             );
@@ -4404,8 +4309,8 @@ FormBuilder.defaultProps = {
   userLocale: localStorage.getItem('jlocale') || 'en',
   showLiquidErrorInFooter: () => {},
   metaDataStatus: "",
-  waitEventContextTags: {},
   isTestAndPreviewMode: false, // Default to false to maintain existing behavior
+  waitEventContextTags: {},
 };
 
 FormBuilder.propTypes = {
@@ -4453,13 +4358,16 @@ FormBuilder.propTypes = {
   type: PropTypes.string.isRequired,
   isEmailLoading: PropTypes.bool.isRequired,
   moduleType: PropTypes.string.isRequired,
-  showLiquidErrorInFooter: PropTypes.bool.isRequired,
+  showLiquidErrorInFooter: PropTypes.func.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/SmsFallback/SmsFallbackLocalSelector.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CreativesContainer from '../../v2Containers/CreativesContainer';
+import CapPageSpinner from '../CapPageSpinner';
+import {
+  EMBEDDED_SMS_CREATIVES_LOCATION,
+  SMS_FALLBACK_CHANNEL_KEY,
+  SMS_FALLBACK_CREATIVE_EDITOR,
+  SMS_FALLBACK_ENABLE_NEW_CHANNELS,
+} from './constants';
+
+/**
+ * Reuse the exact embedded CreativesContainer SMS flow (same as normal SMS create).
+ * Avoid overriding Templates with local config so "Create new" follows built-in createTemplate path.
+ */
+export function SmsFallbackLocalSelector({
+  hidden,
+  fetchDetailsLoading,
+  templateList,
+  channelsToHide,
+  smsRegister,
+  onCloseCreatives,
+  onSelectTemplate,
+  filterContent,
+  location,
+  /** Required when user completes embedded SMS create/edit — `CreativesContainer` calls this on save (see `processCentralCommsMetaId`). */
+  getCreativesData,
+}) {
+  const rootClassName = [
+    'sms-fallback-selector',
+    hidden ? 'sms-fallback-selector--visually-hidden' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div
+      className={rootClassName}
+      aria-hidden={hidden}
+      inert={hidden ? '' : undefined}
+    >
+      {fetchDetailsLoading && (
+        <div className="sms-fallback-selector__loading" aria-busy="true" aria-live="polite">
+          <CapPageSpinner spinning />
+        </div>
+      )}
+      <CreativesContainer
+        creativesMode="create"
+        location={location || EMBEDDED_SMS_CREATIVES_LOCATION}
+        templateData={null}
+        handleCloseCreatives={onCloseCreatives}
+        isFullMode={false}
+        smsRegister={smsRegister}
+        editor={SMS_FALLBACK_CREATIVE_EDITOR}
+        enableNewChannels={SMS_FALLBACK_ENABLE_NEW_CHANNELS}
+        channel={SMS_FALLBACK_CHANNEL_KEY}
+        channelsToHide={channelsToHide}
+        selectedBadges={[]}
+        localTemplatesConfig={{
+          useLocalTemplates: true,
+          localTemplates: templateList.templates,
+          localTemplatesLoading: templateList.loading,
+          localTemplatesFilterContent: filterContent,
+          localTemplatesOnPageChange: templateList.loadMore,
+          localTemplatesUseSkeleton: true,
+        }}
+        onSelectTemplate={onSelectTemplate}
+        getCreativesData={getCreativesData}
+      />
+    </div>
+  );
+}
+
+SmsFallbackLocalSelector.propTypes = {
+  hidden: PropTypes.bool,
+  fetchDetailsLoading: PropTypes.bool,
+  templateList: PropTypes.shape({
+    templates: PropTypes.array,
+    loading: PropTypes.bool,
+    loadMore: PropTypes.func,
+  }).isRequired,
+  channelsToHide: PropTypes.arrayOf(PropTypes.string),
+  smsRegister: PropTypes.any,
+  onCloseCreatives: PropTypes.func.isRequired,
+  onSelectTemplate: PropTypes.func.isRequired,
+  filterContent: PropTypes.node,
+  location: PropTypes.object,
+  getCreativesData: PropTypes.func.isRequired,
+};
+
+export default SmsFallbackLocalSelector;

package/v2Components/SmsFallback/constants.js

@@ -0,0 +1,73 @@
+import {
+  WHATSAPP,
+  RCS,
+  ZALO,
+  WEBPUSH,
+} from '../../v2Containers/CreativesContainer/constants';
+
+/**
+ * View modes for the SMS fallback slidebox (template list, create, edit).
+ * Used by SmsFallback and any channel that reuses it (RCS, etc.).
+ */
+export const SMS_FALLBACK_VIEW = {
+  SELECTING: 'selecting',
+  CREATING: 'creating',
+  EDITING: 'editing',
+};
+
+/**
+ * Channel keys to hide in TemplatesV2 so only SMS tab is shown.
+ * Uses normalized keys matching TemplatesV2 pane.key normalization (lowercase).
+ * Parent can override via channelsToHide prop.
+ */
+export const CHANNELS_TO_HIDE_FOR_SMS_ONLY = [
+  'email',
+  'mobilepush',
+  'webpush',
+  'viber',
+  'whatsapp',
+  'zalo',
+  'facebook',
+  'rcs',
+  'inapp',
+  'line',
+  'wechat',
+  'call_task',
+  'ftp',
+  'assets',
+];
+
+/** DLT category filter values — aligned with Templates `SMS_FILTERS` / `filterSMSTemplates`. */
+export const SMS_CATEGORY_FILTERS = {
+  ALL: 'all',
+  PROMOTIONAL: 'promo',
+  SERVICE_EXPLICIT: 'explicit',
+  SERVICE_IMPLICIT: 'implicit',
+};
+
+/** `location` for embedded SMS creatives picker (CreativesContainer / TemplatesV2). */
+export const EMBEDDED_SMS_CREATIVES_LOCATION = {
+  pathname: '/sms/create',
+  query: { type: 'embedded', module: 'library' },
+  search: '',
+};
+
+/** `location` for embedded SMS TRAI edit inside slidebox. */
+export const EMBEDDED_SMS_CREATIVES_EDIT_LOCATION = {
+  pathname: '/sms/edit',
+  query: { type: 'embedded', module: 'library' },
+  search: '',
+};
+
+/** API `channel` param for `getTemplateDetails` when loading an SMS template by id. */
+export const SMS_TEMPLATE_DETAILS_API_CHANNEL = 'Sms';
+
+export const SMS_FALLBACK_CREATIVE_EDITOR = 'BEE';
+
+export const SMS_FALLBACK_CHANNEL_KEY = 'sms';
+
+/** Route shape passed to SmsWrapper / SmsTraiEdit for embedded SMS flows. */
+export const SMS_FALLBACK_ROUTE = { name: SMS_FALLBACK_CHANNEL_KEY };
+
+/** Channels enabled in the SMS-only embedded picker (hide others via `channelsToHide`). */
+export const SMS_FALLBACK_ENABLE_NEW_CHANNELS = [WHATSAPP, RCS, ZALO, WEBPUSH];