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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.17.39-alpha.2",
+  "version": "7.17.39-alpha.4",
   "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(() => {
+    isFullMode && !isEmpty(zaloTemplateInfoValue) && setDataForEdit(false); 
   }, [zaloTemplateInfoValue]);
 
+  // in campaigns
+  useEffect(() => {
+    !isFullMode && !isEmpty(varMapped) && 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/messages.js

@@ -28,7 +28,7 @@ export default defineMessages({
       "Character count for this variable should be in between {minLength} to {maxLength}",
   },
   previewHead: {
-    id: `${prefix}.previewText`,
+    id: `${prefix}.previewHead`,
     defaultMessage: "Preview",
   },
   previewText: {

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

@@ -13,6 +13,7 @@ import {
   injectedTags,
   accountData,
   templateData,
+  templateConfigs,
 } from './mockData';
 import { render, screen, fireEvent } from '../../../utils/test-utils';
 
@@ -112,7 +113,8 @@ describe('Test activity zalo container', () => {
     ).toBeInTheDocument();
   });
 
-  it('test case for length check', async () => {
+  it('test case for set template data', async () => {
+    templateData.templateConfigs = templateConfigs;
     renderComponent({
       actions: mockActions,
       globalActions: mockGlobalActions,
@@ -141,34 +143,4 @@ describe('Test activity zalo container', () => {
       ),
     ).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();
-  });
-});
+});

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',
 };