@capillarytech/creatives-library 8.0.287-alpha.0 → 8.0.287-alpha.2

package/package.json

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

package/v2Components/FormBuilder/index.js

@@ -2800,7 +2800,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage, this.props.channel === SMS? null: this.state.currentTab);
       });
     }
-    else{
+    // Always render the textarea regardless of the liquid error state update above.
+    // Previously the textarea was inside the `else` branch, so it was not rendered during the
+    // one render cycle when the liquid error message was first set – causing the input to lose
+    // focus whenever a brace/tag error first appeared.
     if (styling === 'semantic') {
       columns.push(
         <CapColumn key="input" span={val.width} offset={offset}>
@@ -2839,7 +2842,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         </CapColumn>
       );
     }
-  }
   };
 
 

package/v2Containers/CreativesContainer/index.js

@@ -1467,11 +1467,12 @@ export class Creatives extends React.Component {
   }
 
   getFormData = (template) => {
+    // Always reset isGetFormData so the child does not re-send form data on every re-render
+    // (e.g. when user fixes validation error by typing, we must not auto-close the slidebox)
+    this.setState({ isGetFormData: false });
     if (template.validity) {
       this.setState(
-        {
-          isGetFormData: false,
-        },
+        {},
         () => {
           const templateData = this.state.templateData ? this.state.templateData : template; //select existing or create new content
           const channel = templateData.type;

package/v2Containers/Line/Container/ImageCarousel/tests/__snapshots__/content.test.js.snap

@@ -3117,7 +3117,6 @@ new message content.",
                                     },
                                   ]
                                 }
-                                showTruncatedTooltip={false}
                                 size="large"
                                 style={
                                   Object {
@@ -3136,7 +3135,6 @@ new message content.",
                                     />
                                   }
                                   onChange={[Function]}
-                                  onDropdownVisibleChange={[Function]}
                                   removeIcon={
                                     <CapIcon
                                       size="s"
@@ -3201,7 +3199,6 @@ new message content.",
                                     onBlur={[Function]}
                                     onChange={[Function]}
                                     onDeselect={[Function]}
-                                    onDropdownVisibleChange={[Function]}
                                     onFocus={[Function]}
                                     onInputKeyDown={[Function]}
                                     onSearch={[Function]}
@@ -3440,11 +3437,7 @@ new message content.",
                                                   }
                                                 }
                                                 title=""
-                                              >
-                                                <div
-                                                  className="cap-select-option-tooltip"
-                                                />
-                                              </div>
+                                              />
                                             </div>
                                             <span
                                               className="ant-select-arrow"
@@ -6947,7 +6940,6 @@ new message content.",
                                     },
                                   ]
                                 }
-                                showTruncatedTooltip={false}
                                 size="large"
                                 style={
                                   Object {
@@ -6966,7 +6958,6 @@ new message content.",
                                     />
                                   }
                                   onChange={[Function]}
-                                  onDropdownVisibleChange={[Function]}
                                   removeIcon={
                                     <CapIcon
                                       size="s"
@@ -7031,7 +7022,6 @@ new message content.",
                                     onBlur={[Function]}
                                     onChange={[Function]}
                                     onDeselect={[Function]}
-                                    onDropdownVisibleChange={[Function]}
                                     onFocus={[Function]}
                                     onInputKeyDown={[Function]}
                                     onSearch={[Function]}
@@ -7270,11 +7260,7 @@ new message content.",
                                                   }
                                                 }
                                                 title=""
-                                              >
-                                                <div
-                                                  className="cap-select-option-tooltip"
-                                                />
-                                              </div>
+                                              />
                                             </div>
                                             <span
                                               className="ant-select-arrow"
@@ -10721,7 +10707,6 @@ new message content.",
                                     },
                                   ]
                                 }
-                                showTruncatedTooltip={false}
                                 size="large"
                                 style={
                                   Object {
@@ -10740,7 +10725,6 @@ new message content.",
                                     />
                                   }
                                   onChange={[Function]}
-                                  onDropdownVisibleChange={[Function]}
                                   removeIcon={
                                     <CapIcon
                                       size="s"
@@ -10805,7 +10789,6 @@ new message content.",
                                     onBlur={[Function]}
                                     onChange={[Function]}
                                     onDeselect={[Function]}
-                                    onDropdownVisibleChange={[Function]}
                                     onFocus={[Function]}
                                     onInputKeyDown={[Function]}
                                     onSearch={[Function]}
@@ -11044,11 +11027,7 @@ new message content.",
                                                   }
                                                 }
                                                 title=""
-                                              >
-                                                <div
-                                                  className="cap-select-option-tooltip"
-                                                />
-                                              </div>
+                                              />
                                             </div>
                                             <span
                                               className="ant-select-arrow"

package/v2Containers/Rcs/tests/__snapshots__/index.test.js.snap

@@ -86505,7 +86505,6 @@ new message content.",
                                           },
                                         ]
                                       }
-                                      showTruncatedTooltip={false}
                                       size="large"
                                       style={
                                         Object {
@@ -86525,7 +86524,6 @@ new message content.",
                                           />
                                         }
                                         onChange={[Function]}
-                                        onDropdownVisibleChange={[Function]}
                                         removeIcon={
                                           <_default
                                             size="s"
@@ -86591,7 +86589,6 @@ new message content.",
                                           onBlur={[Function]}
                                           onChange={[Function]}
                                           onDeselect={[Function]}
-                                          onDropdownVisibleChange={[Function]}
                                           onFocus={[Function]}
                                           onInputKeyDown={[Function]}
                                           onSearch={[Function]}
@@ -86830,13 +86827,9 @@ new message content.",
                                                           "opacity": 1,
                                                         }
                                                       }
-                                                      title=""
+                                                      title="Vertical Medium"
                                                     >
-                                                      <div
-                                                        className="cap-select-option-tooltip"
-                                                      >
-                                                        Vertical Medium
-                                                      </div>
+                                                      Vertical Medium
                                                     </div>
                                                   </div>
                                                   <span
@@ -105854,7 +105847,6 @@ new message content.",
                                           },
                                         ]
                                       }
-                                      showTruncatedTooltip={false}
                                       size="large"
                                       style={
                                         Object {
@@ -105874,7 +105866,6 @@ new message content.",
                                           />
                                         }
                                         onChange={[Function]}
-                                        onDropdownVisibleChange={[Function]}
                                         removeIcon={
                                           <_default
                                             size="s"
@@ -105940,7 +105931,6 @@ new message content.",
                                           onBlur={[Function]}
                                           onChange={[Function]}
                                           onDeselect={[Function]}
-                                          onDropdownVisibleChange={[Function]}
                                           onFocus={[Function]}
                                           onInputKeyDown={[Function]}
                                           onSearch={[Function]}
@@ -106179,13 +106169,9 @@ new message content.",
                                                           "opacity": 1,
                                                         }
                                                       }
-                                                      title=""
+                                                      title="Vertical Medium"
                                                     >
-                                                      <div
-                                                        className="cap-select-option-tooltip"
-                                                      >
-                                                        Vertical Medium
-                                                      </div>
+                                                      Vertical Medium
                                                     </div>
                                                   </div>
                                                   <span

package/v2Containers/Sms/Create/index.js

@@ -51,6 +51,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       modalContent: {title: "Alert", body: "Do you really want to delete this version?", type: 'confirm', id: 'sms-version-modal'},
       showTestAndPreviewSlidebox: false,
       isTestAndPreviewMode: false,
+      pendingGetFormData: false,
     };
     this.saveFormData = this.saveFormData.bind(this);
     this.onFormDataChange = this.onFormDataChange.bind(this);
@@ -140,8 +141,16 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.location.query.module === 'library' && nextProps.isGetFormData) {
-      nextProps.getFormSubscriptionData(this.getFormData());
+    if (!nextProps.isFullMode && nextProps.isGetFormData) {
+      // Trigger validation first; response will be sent in setFormValidity callback so pasted content is validated
+      this.setState({ startValidation: true, pendingGetFormData: true });
+      // Fallback: if FormBuilder never calls onFormValidityChange (e.g. early return), still respond to parent
+      this.pendingGetFormDataTimeout = setTimeout(() => {
+        if (this.state.pendingGetFormData && this.props.getFormSubscriptionData) {
+          this.props.getFormSubscriptionData(this.getFormData());
+          this.setState({ pendingGetFormData: false, startValidation: false });
+        }
+      }, 300);
     } else if (nextProps.isGetFormData && this.props.isFullMode && !this.props.Create.createTemplateInProgress) {
       this.startValidation();
     }
@@ -171,6 +180,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   componentWillUnmount() {
+    if (this.pendingGetFormDataTimeout) {
+      clearTimeout(this.pendingGetFormDataTimeout);
+    }
     if (this.props.setIsLoadingContent) {
       this.props.setIsLoadingContent(true); // setting isLoading of CreativesContainer so that slidebox foot can be hidden till content is loaded
     }
@@ -349,7 +361,16 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   setFormValidity(isFormValid, errorData) {
-    this.setState({isFormValid, errorData});
+    this.setState({ isFormValid, errorData }, () => {
+      if (this.state.pendingGetFormData && this.props.getFormSubscriptionData) {
+        if (this.pendingGetFormDataTimeout) {
+          clearTimeout(this.pendingGetFormDataTimeout);
+          this.pendingGetFormDataTimeout = null;
+        }
+        this.props.getFormSubscriptionData(this.getFormData());
+        this.setState({ pendingGetFormData: false, startValidation: false });
+      }
+    });
   }
 
   injectMessages(elem) {
@@ -970,6 +991,13 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   saveFormData() {
+    // In library mode the template is submitted via getFormSubscriptionData (triggered by startValidation →
+    // onFormValidityChange → setFormValidity). Calling createTemplate API here would set
+    // createTemplateInProgress: true in redux and, because the slidebox closes before the API responds,
+    // that flag would never be reset – causing the spinner to be stuck on the next open.
+    if (!this.props.isFullMode) {
+      return;
+    }
     //Logic to save in db etc
     const formData = _.cloneDeep(this.state.formData);
     const obj = {};

package/v2Containers/Sms/Create/messages.js

@@ -90,6 +90,10 @@ export default defineMessages({
     id: 'creatives.containersV2.Create.validationError',
     defaultMessage: 'Validation error',
   },
+  "unbalancedCurlyBraces": {
+    id: 'creatives.containersV2.Create.unbalancedCurlyBraces',
+    defaultMessage: 'Please close all curly braces in the message.',
+  },
   "smsTemplateCreatedSuccess": {
     id: 'creatives.containersV2.Create.smsTemplateCreatedSuccess',
     defaultMessage: 'SMS Template Created Successfully',

package/v2Containers/Sms/Edit/index.js

@@ -52,6 +52,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       modalContent: {title: "Alert", body: "Do you really want to delete this version?", type: 'confirm', id: 'sms-version-modal'},
       showTestAndPreviewSlidebox: false,
       isTestAndPreviewMode: false,
+      pendingGetFormData: false,
     };
     this.saveFormData = this.saveFormData.bind(this);
     this.onFormDataChange = this.onFormDataChange.bind(this);
@@ -134,8 +135,14 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.location.query.module === 'library' && nextProps.isGetFormData) {
-      nextProps.getFormSubscriptionData(this.getFormData());
+    if (!nextProps.isFullMode && nextProps.isGetFormData) {
+      this.setState({ startValidation: true, pendingGetFormData: true });
+      this.pendingGetFormDataTimeout = setTimeout(() => {
+        if (this.state.pendingGetFormData && this.props.getFormSubscriptionData) {
+          this.props.getFormSubscriptionData(this.getFormData());
+          this.setState({ pendingGetFormData: false, startValidation: false });
+        }
+      }, 300);
     }
     if ( nextProps.location.query.module === 'library' && nextProps.subscriptionTemplateDetails && nextProps.subscriptionTemplateDetails.name && _.isEmpty(this.state.editData) && !_.isEmpty(this.state.schema)) {
       this.setEditState(nextProps.subscriptionTemplateDetails);
@@ -189,6 +196,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   componentWillUnmount() {
+    if (this.pendingGetFormDataTimeout) {
+      clearTimeout(this.pendingGetFormDataTimeout);
+    }
     if (this.props.setIsLoadingContent) {
       this.props.setIsLoadingContent(true); // setting isLoading of CreativesContainer so that slidebox foot can be hidden till content is loaded
     }
@@ -317,7 +327,16 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   setFormValidity(isFormValid, errorData) {
-    this.setState({isFormValid, errorData});
+    this.setState({ isFormValid, errorData }, () => {
+      if (this.state.pendingGetFormData && this.props.getFormSubscriptionData) {
+        if (this.pendingGetFormDataTimeout) {
+          clearTimeout(this.pendingGetFormDataTimeout);
+          this.pendingGetFormDataTimeout = null;
+        }
+        this.props.getFormSubscriptionData(this.getFormData());
+        this.setState({ pendingGetFormData: false, startValidation: false });
+      }
+    });
   }
 
   getFormData(e, value) {
@@ -923,6 +942,13 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.setState({startValidation: false});
   }
   saveFormData() {
+    // In library mode the template is submitted via getFormSubscriptionData, not editTemplate API.
+    // Calling editTemplate here would set editTemplateInProgress: true in redux and, because the
+    // slidebox closes before the API responds, that flag would never be reset – causing the spinner
+    // to be stuck on the next open.
+    if (!this.props.isFullMode) {
+      return;
+    }
     //Logic to save in db etc
     //saveFormData gets called only when validation result is true
 

package/v2Containers/Sms/commonMethods.js

@@ -6,13 +6,18 @@ export function showError() {
   const {errorData} = this.state;
   const errorMessage = {key: 'validation-error', message: intl.formatMessage(messages.validationError)};
   if (!isEmpty(this.state.formData) && !this.state.isFormValid) {
-    const isSmsInvalid = Object.values(errorData[0]).includes(true);
+    const err0 = errorData[0] || {};
+    const isSmsInvalid = Object.values(err0).includes(true);
+    const isBraceError = Boolean(err0['bracket-error']);
     if (isSmsInvalid) {
-      const invalidTags = errorData[0]['invalid-tags'];
+      const invalidTags = err0['invalid-tags'];
       if (!isEmpty(invalidTags)) {
         errorMessage.description = `${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
       }
       CapNotification.error(errorMessage);
+    } else if (isBraceError) {
+      errorMessage.description = intl.formatMessage(messages.unbalancedCurlyBraces);
+      CapNotification.error(errorMessage);
     }
   }
 }