@capillarytech/creatives-library 8.0.168-alpha.0 → 8.0.168-alpha.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.168-alpha.0",
+  "version": "8.0.168-alpha.1",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

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 TemplatePreview from '../TemplatePreview';
 import TagList from '../../v2Containers/TagList';
+import CapTagListWithInput from '../CapTagListWithInput';
 import SlideBox from '../SlideBox';
 import CardGrid from '../CardGrid';
 import CKEditor from "../Ckeditor/";
@@ -2743,6 +2744,40 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             </CapColumn>
           );
           break;
+        case "cap-tag-list-with-input":
+          ifError = this.state.checkValidation && this.state.errorData[val.id];
+          columns.push(
+            <CapColumn key={`input-${val.id}`} span={val.width || 10} offset={val.offset}>
+              <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.props.userLocale}
+                selectedOfferDetails={this.props.selectedOfferDetails}
+                eventContextTags={this.props?.eventContextTags}
+                moduleFilterEnabled={this.props.location && this.props.location.query && this.props.location.query.type !== 'embedded'}
+                containerStyle={val.style || {}}
+                inputProps={val.inputProps || {}}
+                showInput={val.showInput !== false}
+                showTagList={val.showTagList !== false}
+              />
+            </CapColumn>
+          );
+          break;
         case "tabs":
           columns.push(
             <CapColumn key="input" span={10}>
@@ -3372,6 +3407,57 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               );
             }
             break;
+          case "cap-tag-list-with-input":
+            let moduleFilterEnabledForCapTagList = this.props.location && this.props.location.query && this.props.location.query.type !== 'embedded';
+            const channelForCapTagList = _.get(this.props, 'schema.channel', "");
+            if (channelForCapTagList === 'EMAIL') {
+              moduleFilterEnabledForCapTagList = this.props.isFullMode;
+            }
+            const langIndexForCapTagList = 0;
+            const currentLangForCapTagList = (!_.isEmpty(this.state.formData) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`]) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages) && this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndexForCapTagList]) ? this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndexForCapTagList] : this.props.baseLanguage;
+            const isBEEAppEnableForCapTagList = this.checkBeeEditorAllowedForLibrary();
+            ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+
+            // Always render Subject CapTagListWithInput even when Bee editor is active for EMAIL channel
+            if (
+              val.id === 'template-subject' ||
+              !(_.get(this.state, `formData[${this.state.currentTab - 1}][${currentLangForCapTagList}].is_drag_drop`, false)) ||
+              isBEEAppEnableForCapTagList === false ||
+              channelForCapTagList !== 'EMAIL'
+            ) {
+              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}
+                    moduleFilterEnabled={moduleFilterEnabledForCapTagList}
+                    containerStyle={val.style || {}}
+                    inputProps={val.inputProps || {}}
+                    showInput={val.showInput !== false}
+                    showTagList={val.showTagList !== false}
+                  />
+                </CapColumn>
+              );
+            }
+            break;
           case "button":
             if (styling === 'semantic' && val.metaType === 'submit-button') {
               columns.push(

package/v2Containers/Email/index.js

@@ -104,6 +104,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       "title-tagList": {
         onTagSelect: this.onTagSelect,
       },
+      // unified subject field with input and tag selection
+      "template-subject": {
+        onTagSelect: this.onTagSelect,
+      },
       "template-version": {
         onSelect: this.handleVersionSelect,
         addVersion: this.addVersion,
@@ -651,8 +655,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   }
 
   onTagSelect = (data, currentTab, sourceVal) => {
-    // If tag is selected from Subject's TagList, insert into subject input
-    if (sourceVal && sourceVal.id === 'title-tagList') {
+    // If tag is selected from Subject's TagList or unified subject field, insert into subject input
+    if (sourceVal && (sourceVal.id === 'title-tagList' || sourceVal.id === 'template-subject')) {
       const tagToInsert = `{{${data}}}`;
       const formData = _.cloneDeep(this.state.formData);
       const fieldId = 'template-subject';
@@ -1587,8 +1591,24 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     if (schema.standalone) {
       if ((this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs" || this.props.location.query.module === "timeline" || this.props.location.query.module === "coupon_expiry" ||
       this.props.location.query.module === "library")) {
-        _.set(schema, 'standalone.sections[0].inputFields[0].style.display', "" );
-        _.set(schema, 'standalone.sections[0].inputFields[0].labelStyle.display', "");
+        // For the new unified cap-tag-list-with-input component, we want to show the Add label button
+        // but hide the input field in library mode
+        const subjectField = schema.standalone.sections[0].inputFields[0];
+        if (subjectField && subjectField.type === "cap-tag-list-with-input") {
+          // Only hide input in library mode, keep it visible in other modes
+          if (this.props.location.query.module === "library") {
+            _.set(schema, 'standalone.sections[0].inputFields[0].showInput', false);
+            _.set(schema, 'standalone.sections[0].inputFields[0].showTagList', true);
+          } else {
+            // In other modes (loyalty, dvs, timeline, coupon_expiry), keep both input and tag list visible
+            _.set(schema, 'standalone.sections[0].inputFields[0].showInput', true);
+            _.set(schema, 'standalone.sections[0].inputFields[0].showTagList', true);
+          }
+        } else {
+          // For backward compatibility with old separate fields
+          _.set(schema, 'standalone.sections[0].inputFields[0].style.display', "" );
+          _.set(schema, 'standalone.sections[0].inputFields[0].labelStyle.display', "");
+        }
       }
       this.setState({schema});
     }

package/v2Containers/Email/initialSchema.js

@@ -20,7 +20,7 @@ export const response = {
                     {
                       id: "template-subject",
                       placeholder: "Enter Email Subject",
-                      type: "input",
+                      type: "cap-tag-list-with-input",
                       metaType: "text",
                       datatype: "string",
                       required: true,
@@ -28,32 +28,12 @@ export const response = {
                       styling: "semantic",
                       order: 1,
                       width: 16,
-                      customComponent: false,
+                      customComponent: true,
                       standalone: true,
                       onlyDisplay: false,
                       errorMessage: "Email Subject cannot be empty.",
-                    },
-                    {
-                      // Add label control for subject input
-                      id: "title-tagList",
-                      label: "Add label",
-                      type: "tag-list",
-                      metaType: "List",
-                      datatype: "select",
-                      required: true,
-                      fluid: true,
-                      onlyDisplay: true,
-                      style: {
-                        float: "none",
-                        marginTop: "2%",
-                        marginRight: "20%",
-                      },
-                      styling: "semantic",
-                      order: 2,
-                      customComponent: true,
-                      // Helps handler identify the destination input
-                      target: "template-subject",
                       supportedEvents: [
+                        "onChange",
                         "onTagSelect",
                       ],
                     },
@@ -289,7 +269,7 @@ export const response = {
                           metaType: "label",
                           type: "div",
                           primitive: true,
-                          value: <CapButton isAddBtn type="flat"><FormattedMessage {...messages.image}/></CapButton>,
+                          value: <CapButton isAddBtn type="flat"><FormattedMessage {...messages.image} /></CapButton>,
                           fluid: true,
                           onlyDisplay: false,
                           styling: "semantic",