@capillarytech/creatives-library 7.17.39-alpha.2 → 7.17.39-alpha.3

package/package.json

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

package/v2Containers/CreativesContainer/index.js

@@ -500,6 +500,13 @@ export class Creatives extends React.Component {
               },
             },
           };
+          break;
+        }
+        case constants.ZALO: {
+          creativesTemplateData = {
+            ...templateData,
+          };
+          break;
         }
         default:
           break;

package/v2Containers/Templates/messages.js

@@ -504,6 +504,6 @@ export default defineMessages({
   },
   "zaloOnlyApprovedTemplates": {
     id: `${scope}.zaloOnlyApprovedTemplates`,
-    defaultMessage: 'Only enabled templates are shown here',
+    defaultMessage: 'Only enabled/approved templates are shown here',
   },
 });

package/v2Containers/Zalo/index.js

@@ -80,6 +80,7 @@ export const Zalo = (props) => {
   const [textAreaId, updateTextAreaId] = useState('');
   const { zaloTemplateInfoValue = {}, zaloTemplateInfoStatus = REQUEST } =
     editData;
+  const { _id, templateConfigs: { varMapped = {} } = {} } = templateData;
   const ZaloFooter = styled.div`
     background-color: ${CAP_WHITE};
     position: fixed;
@@ -111,39 +112,63 @@ export const Zalo = (props) => {
 
   //gets template details
   useEffect(() => {
-    const { _id: id } = templateData;
-    if (id && oa_id && token && username) {
+    if (_id && oa_id && token && username && isEmpty(varMapped)) {
       actions.getTemplateInfoById({
         username,
         oa_id,
         token,
-        id,
+        id: _id,
         actionCallback,
       });
     }
-  }, [templateData._id, oa_id, token, username]);
+  }, [_id, oa_id, token, username]);
 
-  // here listParams and previewUrl data will be setting in respective states. We got that data by destructring
-  useEffect(() => {
+  const handleSetValues = (paramsData = []) =>
+    paramsData.map((paramData) => {
+      // eslint-disable-next-line no-restricted-syntax
+      for (const key in varMapped) {
+        if (paramData?.name === key) {
+          // eslint-disable-next-line no-param-reassign
+          paramData.value = varMapped[key];
+        }
+      }
+      return paramData;
+    });
+
+  const setDataForEdit = (setValues) => {
     const {
       name = '',
-      _id = '',
+      _id: id = '',
       versions: {
         base: {
           content: {
-            zalo: { listParams = [], previewUrl = '', status = '' } = {},
+            zalo: {
+              listParams: paramsData = [],
+              previewUrl = '',
+              status = '',
+            } = {},
           } = {},
         } = {},
       } = {},
     } = zaloTemplateInfoValue;
     setTemplateName(name);
-    setTemplateId(_id);
-    setTemplateListParams(listParams);
+    setTemplateId(id);
+    setTemplateListParams(setValues ? handleSetValues(paramsData) : paramsData);
     setTemplatePreviewUrl(previewUrl);
     setZaloTemplateStatus(status);
-    updateTextAreaId(listParams[0]?.name);
+    updateTextAreaId(paramsData[0]?.name);
+  };
+
+  // in creatives
+  useEffect(() => {
+    setDataForEdit(false);
   }, [zaloTemplateInfoValue]);
 
+  // in campaigns
+  useEffect(() => {
+    setDataForEdit(true);
+  }, [varMapped]);
+
   useEffect(() => {
     let tag = get(metaEntities, `tags.standard`, []);
     const { type, module } = location?.query || {};
@@ -319,10 +344,10 @@ export const Zalo = (props) => {
     return disableCheck;
   };
   const createPayload = () => {
-    const varMapped = {};
+    const varMap = {};
     templateListParams.forEach((listParam) => {
       const { name, value } = listParam;
-      varMapped[name] = value;
+      varMap[name] = value;
     });
     const payload = {
       channel: ZALO,
@@ -332,7 +357,7 @@ export const Zalo = (props) => {
         _id: templateId,
         name: templateName,
         template: templatePreviewUrl,
-        varMapped,
+        varMapped: varMap,
       },
     };
     return payload;

package/v2Containers/Zalo/tests/mockData.js

@@ -11466,61 +11466,16 @@ export const accountData = {
 
 export const templateData = {
   _id: 463745,
+};
+
+export const templateConfigs = {
+  _id: 268532,
   name: 'Test QR - Thông báo thanh toán thành công',
-  versions: {
-    base: {
-      content: {
-        zalo: {
-          templateId: '268531',
-          templateName: 'Test QR - Thông báo thanh toán thành công',
-          listParams: [
-            {
-              name: 'danh_xung',
-              require: true,
-              type: 'STRING',
-              maxLength: 30,
-              minLength: 0,
-              acceptNull: false,
-              error: '',
-              value: '',
-            },
-            {
-              name: 'name',
-              require: true,
-              type: 'STRING',
-              maxLength: 20,
-              minLength: 0,
-              acceptNull: false,
-              error: '',
-              value: '',
-            },
-            {
-              name: 'ma_so',
-              require: true,
-              type: 'NUMBER',
-              maxLength: 10,
-              minLength: 0,
-              acceptNull: false,
-              error: '',
-              value: '',
-            },
-            {
-              name: 'ma_so1',
-              require: true,
-              type: 'DATE',
-              maxLength: 30,
-              minLength: 0,
-              acceptNull: false,
-              error: '',
-              value: '',
-            },
-          ],
-          previewUrl:
-            'https://account.zalo.cloud/znspreview/-e0cMil4NU5WUUAVzP7T_g==',
-          status: 'ENABLE',
-        },
-      },
-    },
+  template: 'https://account.zalo.cloud/znspreview/-e0cMil4NU5WUUAVzP7T_g==',
+  varMapped: {
+    danh_xung: '1',
+    name: '2',
+    ma_so: '3',
+    ma_so1: '4',
   },
-  type: 'ZALO',
 };

package/v2Containers/Zalo/tests/index.test.js

@@ -1,174 +0,0 @@
-import React from 'react';
-import { injectIntl } from 'react-intl';
-import { browserHistory } from 'react-router';
-import '@testing-library/jest-dom';
-import { Provider } from 'react-redux';
-import configureStore from '../../../store';
-import { Zalo } from '..';
-import {
-  metaEntities,
-  editData,
-  location,
-  getDefaultTags,
-  injectedTags,
-  accountData,
-  templateData,
-} from './mockData';
-import { render, screen, fireEvent } from '../../../utils/test-utils';
-
-const mockActions = {
-  getTemplateInfoById: jest.fn(),
-};
-const mockGlobalActions = {
-  fetchSchemaForEntity: jest.fn(),
-};
-
-let store;
-beforeAll(() => {
-  store = configureStore({}, browserHistory);
-});
-
-const ComponentToRender = injectIntl(Zalo);
-const renderComponent = (props) =>
-  render(
-    <Provider store={store}>
-      <ComponentToRender {...props} />
-    </Provider>,
-  );
-
-describe('Test activity zalo container', () => {
-  it('test case for zalo template', async () => {
-    renderComponent({
-      actions: mockActions,
-      globalActions: mockGlobalActions,
-      editData,
-      metaEntities,
-      location,
-      getDefaultTags,
-      injectedTags,
-      accountData,
-      templateData,
-      isFullMode: true,
-    });
-    const inputBox = await screen.findAllByPlaceholderText(
-      'Add labels or text or combination of both',
-    );
-    fireEvent.change(inputBox[0], { target: { value: 'Hello, welcome' } });
-    inputBox[0].focus();
-    const previewButton = screen.getByTestId('preview-link-button');
-    previewButton.click();
-    expect(
-      screen.getByText('This template has been enabled'),
-    ).toBeInTheDocument();
-  });
-
-  it('test case for text field curly braces error', async () => {
-    renderComponent({
-      actions: mockActions,
-      globalActions: mockGlobalActions,
-      editData,
-      metaEntities,
-      location,
-      getDefaultTags,
-      injectedTags,
-      accountData,
-      templateData,
-      isFullMode: true,
-    });
-    const inputBox = await screen.findAllByPlaceholderText(
-      'Add labels or text or combination of both',
-    );
-    fireEvent.change(inputBox[0], { target: { value: 'Hello, welcome {{' } });
-    inputBox[0].focus();
-    expect(
-      screen.getByText('Invalid label, please close all curly braces'),
-    ).toBeInTheDocument();
-  });
-
-  it('test case for unsupported tag', async () => {
-    renderComponent({
-      actions: mockActions,
-      globalActions: mockGlobalActions,
-      editData,
-      metaEntities,
-      location,
-      getDefaultTags,
-      injectedTags,
-      accountData,
-      templateData,
-      isFullMode: true,
-    });
-    const inputBox = await screen.findAllByPlaceholderText(
-      'Add labels or text or combination of both',
-    );
-    fireEvent.change(inputBox[0], {
-      target: { value: 'Hello, welcome {{fsdaf}}' },
-    });
-    inputBox[0].focus();
-    expect(
-      screen.getByText(
-        'Unsupported tags: fsdaf. Please remove them from this message.',
-      ),
-    ).toBeInTheDocument();
-  });
-
-  it('test case for length check', async () => {
-    renderComponent({
-      actions: mockActions,
-      globalActions: mockGlobalActions,
-      editData,
-      metaEntities,
-      location,
-      getDefaultTags,
-      injectedTags,
-      accountData,
-      templateData,
-      isFullMode: false,
-    });
-    const inputBox = await screen.findAllByPlaceholderText(
-      'Add labels or text or combination of both',
-    );
-    fireEvent.change(inputBox[0], {
-      target: {
-        value:
-          'Hello, welcome user. Habata itara modoranai to ittta Mezashita no wa aoi aoi ano sora',
-      },
-    });
-    inputBox[0].focus();
-    expect(
-      screen.getByText(
-        'Character count for this variable should be in between 0 to 30',
-      ),
-    ).toBeInTheDocument();
-  });
-
-  it('test case for length check', async () => {
-    renderComponent({
-      actions: mockActions,
-      globalActions: mockGlobalActions,
-      editData,
-      metaEntities,
-      location,
-      getDefaultTags,
-      injectedTags,
-      accountData,
-      templateData,
-      isFullMode: true,
-    });
-    const inputBox = await screen.findAllByPlaceholderText(
-      'Add labels or text or combination of both',
-    );
-    fireEvent.change(inputBox[0], {
-      target: {
-        value:
-          'Hello, welcome user. Habata itara modoranai to ittta Mezashita no wa aoi aoi ano sora',
-      },
-    });
-    inputBox[0].focus();
-    expect(
-      screen.getByText(
-        'Character count for this variable should be in between 0 to 30',
-      ),
-    ).toBeInTheDocument();
-  });
-});