@capillarytech/creatives-library 8.0.213 → 8.0.214-beta.0

package/v2Containers/EmailWrapper/tests/useEmailWrapper.test.js

@@ -55,11 +55,11 @@ describe('useEmailWrapper', () => {
     mockStopTimer.mockClear();
 
     isEmpty.mockImplementation(val => {
-        if (val === null || val === undefined) return true;
-        if (typeof val === 'object') return Object.keys(val).length === 0;
-        if (typeof val === 'string') return val.trim().length === 0;
-        return !val;
-     });
+      if (val === null || val === undefined) return true;
+      if (typeof val === 'object') return Object.keys(val).length === 0;
+      if (typeof val === 'string') return val.trim().length === 0;
+      return !val;
+    });
 
     mockProps = {
       ...EmailWrapperMockData,
@@ -224,7 +224,7 @@ describe('useEmailWrapper', () => {
     const mockReader = {
       onload: null,
       onerror: null,
-      readAsText: jest.fn(function() {
+      readAsText: jest.fn(function () {
         this.result = mockHtmlContent;
         if (this.onload) {
           this.onload();
@@ -294,7 +294,7 @@ describe('useEmailWrapper', () => {
     });
 
     expect(mockCapNotificationError).toHaveBeenCalledWith(expect.objectContaining({
-       key: "email-upload-error",
+      key: "email-upload-error",
     }));
     expect(mockProps.templatesActions.handleZipUpload).not.toHaveBeenCalled();
   });
@@ -309,14 +309,14 @@ describe('useEmailWrapper', () => {
       result.current.useFileUpload({ file: null });
     });
     expect(mockCapNotificationError).toHaveBeenCalledTimes(1);
-    expect(mockCapNotificationError).toHaveBeenCalledWith(expect.objectContaining({ key: "email-upload-error"}));
+    expect(mockCapNotificationError).toHaveBeenCalledWith(expect.objectContaining({ key: "email-upload-error" }));
 
     mockCapNotificationError.mockClear();
     reactAct(() => {
-       result.current.useFileUpload({ file: { name: 'test.zip', size: 100 } });
+      result.current.useFileUpload({ file: { name: 'test.zip', size: 100 } });
     });
     expect(mockCapNotificationError).toHaveBeenCalledTimes(1);
-    expect(mockCapNotificationError).toHaveBeenCalledWith(expect.objectContaining({ key: "email-upload-error"}));
+    expect(mockCapNotificationError).toHaveBeenCalledWith(expect.objectContaining({ key: "email-upload-error" }));
 
     expect(mockProps.templatesActions.handleZipUpload).not.toHaveBeenCalled();
     expect(mockProps.templatesActions.handleHtmlUpload).not.toHaveBeenCalled();
@@ -397,7 +397,7 @@ describe('useEmailWrapper', () => {
       // selectedCreateMode is initially '' from hook's useState
     };
     const { result, rerender } = renderHook((props) => useEmailWrapper(props), {
-        initialProps: initialProps
+      initialProps: initialProps
     });
 
     // 4. Simulate user selecting a template ID via the exposed callback (useEditor)
@@ -448,11 +448,11 @@ describe('useEmailWrapper', () => {
 
   it('sets selectedCreateMode in useEffect when in UPLOAD mode and CREATE_TEMPLATE_CONTENT step with EmailLayout', async () => {
     const initialRenderProps = {
-        ...mockProps,
-        step: STEPS.MODE_SELECTION,
-        emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
-        EmailLayout: null,
-      };
+      ...mockProps,
+      step: STEPS.MODE_SELECTION,
+      emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
+      EmailLayout: null,
+    };
 
     const { result, rerender } = renderHook((props) => useEmailWrapper(props), {
       initialProps: initialRenderProps
@@ -467,11 +467,11 @@ describe('useEmailWrapper', () => {
 
     // Reset isEmpty to default before setting the specific mock for the effect
     isEmpty.mockImplementation((val) => {
-        if (val === null || val === undefined) return true;
-        if (typeof val === 'object') return Object.keys(val).length === 0;
-        if (typeof val === 'string') return val.trim().length === 0;
-        return !val;
-     });
+      if (val === null || val === undefined) return true;
+      if (typeof val === 'object') return Object.keys(val).length === 0;
+      if (typeof val === 'string') return val.trim().length === 0;
+      return !val;
+    });
     // Mock isEmpty specifically for the EmailLayout check inside the useEffect
     isEmpty.mockImplementationOnce(() => false); // Mock !isEmpty(EmailLayout) to be true
 
@@ -479,16 +479,16 @@ describe('useEmailWrapper', () => {
 
     // Wait for the effect to run, set selectedCreateMode, and isShowEmailCreate to update
     await waitFor(() => {
-        expect(result.current.isShowEmailCreate).toBe(true);
+      expect(result.current.isShowEmailCreate).toBe(true);
     });
 
     // Restore default isEmpty behavior after the specific mock is used
     isEmpty.mockImplementation((val) => {
-        if (val === null || val === undefined) return true;
-        if (typeof val === 'object') return Object.keys(val).length === 0;
-        if (typeof val === 'string') return val.trim().length === 0;
-        return !val;
-     });
+      if (val === null || val === undefined) return true;
+      if (typeof val === 'object') return Object.keys(val).length === 0;
+      if (typeof val === 'string') return val.trim().length === 0;
+      return !val;
+    });
     isEmpty.mockClear(); // Clear any remaining mock state if needed
 
     expect(mockProps.templatesActions.setEdmTemplate).not.toHaveBeenCalled();
@@ -533,11 +533,11 @@ describe('useEmailWrapper', () => {
 
     // Reset isEmpty to default before setting the specific mock for the effect
     isEmpty.mockImplementation((val) => {
-        if (val === null || val === undefined) return true;
-        if (typeof val === 'object') return Object.keys(val).length === 0;
-        if (typeof val === 'string') return val.trim().length === 0;
-        return !val;
-     });
+      if (val === null || val === undefined) return true;
+      if (typeof val === 'object') return Object.keys(val).length === 0;
+      if (typeof val === 'string') return val.trim().length === 0;
+      return !val;
+    });
     // Mock isEmpty specifically for the EmailLayout check inside the useEffect
     isEmpty.mockImplementationOnce(() => false); // Mock !isEmpty(EmailLayout) to be true
 
@@ -545,16 +545,16 @@ describe('useEmailWrapper', () => {
 
     // Wait for the effect to run, set selectedCreateMode, and isShowEmailCreate to update
     await waitFor(() => {
-        expect(result.current.isShowEmailCreate).toBe(true);
+      expect(result.current.isShowEmailCreate).toBe(true);
     });
 
     // Restore default isEmpty behavior after the specific mock is used
     isEmpty.mockImplementation((val) => {
-        if (val === null || val === undefined) return true;
-        if (typeof val === 'object') return Object.keys(val).length === 0;
-        if (typeof val === 'string') return val.trim().length === 0;
-        return !val;
-     });
+      if (val === null || val === undefined) return true;
+      if (typeof val === 'object') return Object.keys(val).length === 0;
+      if (typeof val === 'string') return val.trim().length === 0;
+      return !val;
+    });
     isEmpty.mockClear(); // Clear any remaining mock state if needed
 
     // --- Case 3: EDITOR mode selected, Template becomes available -> true (via effect) ---
@@ -563,11 +563,11 @@ describe('useEmailWrapper', () => {
     find.mockReturnValue(mockTemplate); // Ensure find is mocked for this case
 
     const editorPropsInitial = {
-        ...mockProps,
-        step: STEPS.TEMPLATE_SELECTION,
-        emailCreateMode: EMAIL_CREATE_MODES.EDITOR,
-        CmsTemplates: [mockTemplate],
-        SelectedEdmDefaultTemplate: null,
+      ...mockProps,
+      step: STEPS.TEMPLATE_SELECTION,
+      emailCreateMode: EMAIL_CREATE_MODES.EDITOR,
+      CmsTemplates: [mockTemplate],
+      SelectedEdmDefaultTemplate: null,
     };
     rerender(editorPropsInitial);
 
@@ -579,12 +579,12 @@ describe('useEmailWrapper', () => {
     expect(result.current.modeContent).toEqual({ id: templateId });
 
     const editorPropsFinal = {
-        ...mockProps, // Use fresh props base
-        step: STEPS.CREATE_TEMPLATE_CONTENT, // Move to the create step
-        emailCreateMode: EMAIL_CREATE_MODES.EDITOR,
-        CmsTemplates: [mockTemplate],
-        SelectedEdmDefaultTemplate: null, // Template not yet selected in props
-        // modeContent state ({id: templateId}) should persist internally from the reactAct call
+      ...mockProps, // Use fresh props base
+      step: STEPS.CREATE_TEMPLATE_CONTENT, // Move to the create step
+      emailCreateMode: EMAIL_CREATE_MODES.EDITOR,
+      CmsTemplates: [mockTemplate],
+      SelectedEdmDefaultTemplate: null, // Template not yet selected in props
+      // modeContent state ({id: templateId}) should persist internally from the reactAct call
     };
 
     // Mock isEmpty specifically for the check within the useEffect triggered by rerender

package/v2Containers/TagList/index.js

@@ -372,6 +372,7 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
           channel={this.props.channel}
           disabled={this.props.disabled}
           fetchingSchemaError={this?.state?.tagsError}
+          popoverPlacement={this.props.popoverPlacement}
         />
       </div>
     );
@@ -402,6 +403,7 @@ TagList.propTypes = {
   disabled: PropTypes.bool,
   fetchingSchemaError: PropTypes.bool,
   eventContextTags: PropTypes.array,
+  popoverPlacement: PropTypes.string,
   intl: PropTypes.shape({
     formatMessage: PropTypes.func.isRequired,
     locale: PropTypes.string,

package/v2Containers/Templates/index.js

@@ -931,6 +931,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             const zaloSelectedTemplateData = this.selectTemplate(parseInt(creativesParams._id, 10)) || {};
             const { name = '' } = zaloSelectedTemplateData;
             creativesParams.name = name
+          } else if (this.state.channel?.toLowerCase() === EMAIL_LOWERCASE) {
+            const emailSelectedTemplateData = this.selectTemplate(creativesParams._id) || {};
+            const activeTab = get(emailSelectedTemplateData, 'versions.base.activeTab', 'en');
+            const isDragDrop = get(emailSelectedTemplateData, `versions.base.${activeTab}.is_drag_drop`, false);
+            creativesParams.is_drag_drop = isDragDrop;
           }
         }
         creativesParams.type = this.state.channel.toUpperCase();