@capillarytech/creatives-library 8.0.201 → 8.0.204

package/v2Containers/CreativesContainer/index.js

@@ -11,7 +11,7 @@ import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import classnames from 'classnames';
 import {
-  isEmpty, get, forEach, cloneDeep, debounce,
+  isEmpty, get, forEach, cloneDeep,
 } from 'lodash';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
@@ -105,8 +105,6 @@ export class Creatives extends React.Component {
       // NEW: Test and Preview feature state
       showTestAndPreviewSlidebox: false,
       isTestAndPreviewMode: false, // Add flag to track Test & Preview mode
-      // Performance optimization: Local template name for immediate UI feedback
-      localTemplateName: '',
     };
     this.liquidFlow = Boolean(commonUtil.hasLiquidSupportFeature());
     this.creativesTemplateSteps = {
@@ -114,9 +112,6 @@ export class Creatives extends React.Component {
       2: 'templateSelection', // only for email in current flows wil be used for mpush, line and wechat as well.
       3: 'createTemplateContent',
     };
-
-    // Performance optimization: Debounced template name update
-    this.debouncedTemplateNameUpdate = debounce(this.performTemplateNameUpdate.bind(this), 300);
   }
 
   componentWillUnmount() {
@@ -124,11 +119,6 @@ export class Creatives extends React.Component {
       this.props.templateActions.resetTemplateStoreData();
     }
     this.props.globalActions.clearMetaEntities();
-
-    // Cleanup debounced function
-    if (this.debouncedTemplateNameUpdate) {
-      this.debouncedTemplateNameUpdate.cancel();
-    }
   }
 
   componentDidMount() {
@@ -146,29 +136,6 @@ export class Creatives extends React.Component {
 
   onEnterTemplateName = () => {
     this.setState({ templateNameExists: true });
-  }
-
-  // Performance optimized template name update
-  performTemplateNameUpdate = (value, formData, onFormDataChange) => {
-    const isEmptyTemplateName = !value.trim();
-    const newFormData = { ...formData, 'template-name': value, 'isTemplateNameEdited': true };
-
-    this.setState({ isTemplateNameEmpty: isEmptyTemplateName });
-    onFormDataChange(newFormData);
-  }
-
-  // Update template name immediately for UI feedback
-  updateTemplateNameImmediately = (value, formData, onFormDataChange) => {
-    const isEmptyTemplateName = !value.trim();
-
-    // 1. IMMEDIATE: Update local state for instant UI feedback
-    this.setState({ 
-      isTemplateNameEmpty: isEmptyTemplateName,
-      localTemplateName: value 
-    });
-
-    // 2. DEBOUNCED: Only debounce the expensive onFormDataChange call
-    this.debouncedTemplateNameUpdate(value, formData, onFormDataChange);
   };
 
   onRemoveTemplateName = () => {
@@ -1428,30 +1395,21 @@ export class Creatives extends React.Component {
       } />
   )
 
-  templateNameComponentInput = ({ formData, onFormDataChange, name }) => {
-    // Use local state for immediate UI feedback, fallback to prop value
-    const displayValue = this.state.localTemplateName !== '' ? this.state.localTemplateName : name;
-    
-    return (
-      <CapInput
-        value={displayValue}
-        suffix={<span />}
-        onBlur={() => { 
-          this.setState({ 
-            isEditName: false,
-            localTemplateName: '' // Clear local state on blur
-          }, () => { 
-            this.showTemplateName({ formData, onFormDataChange }); 
-          }); 
-        }}
-        onChange={(ev) => {
-          const { value } = ev.currentTarget;
-          // Use optimized update for better performance
-          this.updateTemplateNameImmediately(value, formData, onFormDataChange);
-        }}
-      />
-    );
-  }
+  templateNameComponentInput = ({ formData, onFormDataChange, name }) => (
+    <CapInput
+      value={name}
+      suffix={<span />}
+      onBlur={() => { this.setState({ isEditName: false }, () => { this.showTemplateName({ formData, onFormDataChange }); }); }}
+      onChange={(ev) => {
+        const { value } = ev.currentTarget;
+        const isEmptyTemplateName = !value.trim();
+
+        const newFormData = { ...formData, 'template-name': value, 'isTemplateNameEdited': true };
+        this.setState({ isTemplateNameEmpty: isEmptyTemplateName });
+        onFormDataChange(newFormData);
+      }}
+    />
+  )
 
   showTemplateName = ({ formData, onFormDataChange }) => { //gets called from email/index after template data is fetched
     const { slidBoxContent, currentChannel, isEditName } = this.state;
@@ -1465,10 +1423,7 @@ export class Creatives extends React.Component {
       if (name && !isEditName) {
         this.setState({ showTemplateNameComponentEdit: false });
       } else if (isEditName) {
-        this.setState({ 
-          showTemplateNameComponentEdit: true,
-          localTemplateName: name || '' // Initialize local state with current value
-        });
+        this.setState({ showTemplateNameComponentEdit: true });
       }
     }
   }

package/v2Containers/CreativesContainer/tests/SlideBoxContent.test.js

@@ -5,7 +5,6 @@ import { SlideBoxContent } from '../SlideBoxContent';
 import mockdata from '../../mockdata';
 import { templateDetailsImage, templateDetailsVideo, templateDetailsText, templateDetails_ } from '../../Viber/tests/mockData';
 import { CREATE, RICH_MEDIA } from '../../WeChat/Wrapper/constants';
-import * as commonUtils from '../../../utils/common';
 
 const {
   whatsappEditTemplateData,
@@ -51,11 +50,6 @@ describe('Test SlideBoxContent container', () => {
     global.Date = originalDate;
   });
 
-  afterEach(() => {
-    // Clean up all mocks after each test
-    jest.restoreAllMocks();
-  });
-
   const renderFunction = (channel, mode, templateData, additionalProps = {}) => {
     renderedComponent = shallowWithIntl(
       <SlideBoxContent
@@ -706,315 +700,4 @@ describe('Test SlideBoxContent container', () => {
       expect(renderedComponent).toMatchSnapshot();
     });
   });
-
-  // Mobile Push Loyalty Module Tests
-  describe('Mobile Push with Loyalty Module', () => {
-    it('Should render MobliPushEdit for loyalty module in library mode (edit)', () => {
-      renderFunction('MOBILEPUSH', 'editTemplate', { 
-        _id: 'test-id', 
-        type: 'MOBILEPUSH' // Use uppercase to match constants.MOBILE_PUSH
-      }, { 
-        isFullMode: false, 
-        isLoyaltyModule: true 
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should render MobilePushNew for loyalty module in full mode (edit)', () => {
-      renderFunction('MOBILEPUSH', 'editTemplate', { 
-        _id: 'test-id', 
-        type: 'MOBILEPUSH' // Use uppercase to match constants.MOBILE_PUSH
-      }, { 
-        isFullMode: true, 
-        isLoyaltyModule: true 
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should render MobilepushWrapper for loyalty module in library mode (create)', () => {
-      renderFunction('MOBILEPUSH', 'createTemplate', { 
-        mode: 'create',
-        type: 'MOBILEPUSH' // Use uppercase to match constants.MOBILE_PUSH
-      }, { 
-        isFullMode: false, 
-        isLoyaltyModule: true 
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should render MobilePushNew for loyalty module in full mode (create)', () => {
-      renderFunction('MOBILEPUSH', 'createTemplate', { 
-        mode: 'create',
-        type: 'MOBILEPUSH' // Use uppercase to match constants.MOBILE_PUSH
-      }, { 
-        isFullMode: true, 
-        isLoyaltyModule: true 
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should render MobilePushNew for non-loyalty module in library mode (edit)', () => {
-      renderFunction('MOBILEPUSH', 'editTemplate', { 
-        _id: 'test-id', 
-        type: 'MOBILEPUSH' // Use uppercase to match constants.MOBILE_PUSH
-      }, { 
-        isFullMode: false, 
-        isLoyaltyModule: false 
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should render MobilePushNew for non-loyalty module in library mode (create)', () => {
-      renderFunction('MOBILEPUSH', 'createTemplate', { 
-        mode: 'create',
-        type: 'MOBILEPUSH' // Use uppercase to match constants.MOBILE_PUSH
-      }, { 
-        isFullMode: false, 
-        isLoyaltyModule: false 
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should render MobilePushNew for non-loyalty module in full mode (edit)', () => {
-      renderFunction('MOBILEPUSH', 'editTemplate', { 
-        _id: 'test-id', 
-        type: 'MOBILEPUSH' // Use uppercase to match constants.MOBILE_PUSH
-      }, { 
-        isFullMode: true, 
-        isLoyaltyModule: false 
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should render MobilePushNew for non-loyalty module in full mode (create)', () => {
-      renderFunction('MOBILEPUSH', 'createTemplate', { 
-        mode: 'create',
-        type: 'MOBILEPUSH' // Use uppercase to match constants.MOBILE_PUSH
-      }, { 
-        isFullMode: true, 
-        isLoyaltyModule: false 
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-  });
-
-  // Additional edge case tests to cover uncovered lines
-  describe('Edge Cases for Uncovered Lines', () => {
-    it('Should handle getLineType with LINE channel and empty templateData', () => {
-      // This should cover lines 72-74 in getLineType function
-      // LINE channel, not full mode, templateData exists but has no _id, no messageBody, and not isDefault
-      const emptyLineTemplateData = {
-        type: 'LINE',
-        isDefault: false,
-        // No _id and no versions.base.content.messages[0]
-      };
-      renderFunction('LINE', 'editTemplate', emptyLineTemplateData, { 
-        isFullMode: false 
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle SMS channel with DLT content processing', () => {
-      // This should cover line 251 in SMS content processing
-      // Need isDltEnabled = true and updatedSmsEditor as array
-      // Mock hasTraiDltFeature to return true
-      jest.spyOn(commonUtils, 'hasTraiDltFeature').mockReturnValue(true);
-      
-      const smsTemplateData = {
-        type: 'SMS',
-        versions: {
-          base: {
-            'updated-sms-editor': ['Line 1', 'Line 2', 'Line 3'], // Array to trigger join()
-            'sms-editor': 'Fallback SMS content'
-          }
-        }
-      };
-      renderFunction('SMS', 'preview', smsTemplateData, { 
-        smsRegister: 'DLT', // Enable DLT for library mode
-        isFullMode: false
-      });
-      
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle LINE channel with video content', () => {
-      // This should cover lines 314-315 for video detection
-      // Need a LINE message with video property but no text, previewImageUrl, selectedSticker, baseUrl, template, or contents
-      const lineTemplateDataWithVideo = {
-        type: 'LINE',
-        versions: {
-          base: {
-            content: {
-              messages: [{
-                video: {
-                  originalContentUrl: 'https://example.com/video.mp4',
-                  externalLink: {
-                    linkUri: 'https://example.com/link'
-                  }
-                }
-                // No text, previewImageUrl, selectedSticker, baseUrl, template, or contents
-              }]
-            }
-          }
-        }
-      };
-      renderFunction('LINE', 'preview', lineTemplateDataWithVideo);
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle default case in getChannelPreviewContent', () => {
-      // This should cover line 395 - default case return
-      const unknownChannelData = {
-        versions: {
-          base: {
-            content: {
-              customField: 'custom content'
-            }
-          }
-        }
-      };
-      renderFunction('UNKNOWN_CHANNEL', 'preview', unknownChannelData);
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle WeChat channel in different modes', () => {
-      const wechatTemplateData = {
-        type: 'WECHAT',
-        versions: {
-          base: {
-            content: {
-              msgcontent: 'RICH_MEDIA_WECHAT'
-            }
-          }
-        }
-      };
-      renderFunction('WECHAT', 'editTemplate', wechatTemplateData);
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle InApp channel preview', () => {
-      const inappTemplateData = {
-        type: 'INAPP',
-        versions: {
-          base: {
-            content: {
-              message: 'Test InApp message'
-            }
-          }
-        }
-      };
-      renderFunction('INAPP', 'preview', inappTemplateData);
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle Email channel with different modes', () => {
-      const emailTemplateData = {
-        type: 'EMAIL',
-        _id: 'email-123',
-        versions: {
-          base: {
-            content: {
-              subject: 'Test Email',
-              html_content: '<p>Test content</p>'
-            }
-          }
-        }
-      };
-      renderFunction('EMAIL', 'editTemplate', emailTemplateData, { 
-        isFullMode: true 
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle Call Task channel', () => {
-      const callTaskData = {
-        type: 'CALL_TASK',
-        versions: {
-          base: {
-            content: {
-              message: 'Call task message'
-            }
-          }
-        }
-      };
-      renderFunction('CALL_TASK', 'editTemplate', callTaskData);
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle FTP channel', () => {
-      const ftpData = {
-        type: 'FTP',
-        versions: {
-          base: {
-            content: {
-              message: 'FTP message'
-            }
-          }
-        }
-      };
-      renderFunction('FTP', 'editTemplate', ftpData);
-      expect(renderedComponent).toMatchSnapshot();
-    });
-  });
-
-  // Additional comprehensive test cases
-  describe('Additional Channel Coverage', () => {
-    it('Should handle Zalo channel', () => {
-      const zaloData = {
-        type: 'ZALO',
-        versions: {
-          base: {
-            content: {
-              message: 'Zalo message'
-            }
-          }
-        }
-      };
-      renderFunction('ZALO', 'editTemplate', zaloData);
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle templates mode for various channels', () => {
-      renderFunction('EMAIL', 'templates', {});
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle createTemplate mode with different options', () => {
-      renderFunction('SMS', 'createTemplate', { mode: 'create' }, {
-        isFullMode: true,
-        smsRegister: 'DLT'
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle complex LINE template with multiple message types', () => {
-      const complexLineData = {
-        type: 'LINE',
-        versions: {
-          base: {
-            content: {
-              messages: [
-                {
-                  text: 'Hello',
-                  previewImageUrl: 'https://example.com/image.jpg'
-                },
-                {
-                  selectedSticker: {
-                    stickerUrl: 'https://example.com/sticker.png',
-                    stickerId: '123',
-                    packageId: '456'
-                  }
-                },
-                {
-                  baseUrl: 'https://example.com/map'
-                }
-              ]
-            }
-          }
-        }
-      };
-      renderFunction('LINE', 'preview', complexLineData);
-      expect(renderedComponent).toMatchSnapshot();
-    });
-  });
 });