@capillarytech/creatives-library 8.0.87-alpha.21 → 8.0.87-alpha.22

package/containers/Templates/constants.js

@@ -43,3 +43,9 @@ export const RESET_TEMPLATE = "app/containers/Templates/RESET_TEMPLATE";
 export const RESET_TEMPLATE_DATA = "app/containers/Templates/RESET_TEMPLATE_DATA";
 export const RESET_UPLOAD_DATA = "app/containers/Templates/RESET_UPLOAD_DATA";
 export const CLEAR_TEMPLATE_STORE_DATA = "app/containers/Templates/CLEAR_TEMPLATE_STORE_DATA";
+
+
+export const TRUE = 'true';
+export const FALSE = 'false';
+export const EMAIL = 'email';
+export const TYPE_EMBEDDED = 'embedded';

package/containers/Templates/index.js

@@ -57,6 +57,8 @@ import lineCreateReducer from '../Line/Create/reducer';
 import { ebillSaga } from '../Ebill/sagas';
 import { lineCreateSaga } from '../Line/Create/sagas';
 import { duplicateMPushSaga } from '../MobilePush/Create/sagas';
+import { FALSE, TRUE, TYPE_EMBEDDED } from './constants';
+import { DEFAULT } from '../../v2Containers/Cap/constants';
 
 const MenuItem = Menu.Item;
 const Option = Select.Option;
@@ -914,31 +916,49 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
   handleEdmDefaultTemplateSelection = (isSelected, id) => {
     if (isSelected) {
-      const data = _.find(this.props.Templates.cmsTemplates, {_id: id});
-      const type = this.props.location.query.type
-      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
-      const isLanguageSupport = this.props.location.query.isLanguageSupport ? this.props.location.query.isLanguageSupport : true;
-      const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
+    const template = _.find(this.props?.Templates?.cmsTemplates, (template = []) => {
+        return template?.versions && template?.versions?.base && _.get(template, 'versions.base.drag_drop_id') === id;
+      });
+      const {type,module = DEFAULT} = this.props?.location?.query;
+    const isLanguageSupport = this.props?.location?.query?.isLanguageSupport === TRUE;
+    const isEdmSupport = this.props?.location?.query?.isEdmSupport !== FALSE;
       let getQuery = '';
-      
-      this.props.actions.setEdmTemplate(data);
-      if (this.state.channel && this.state.channel.toLowerCase() === 'email') {
-        getQuery = (type === 'embedded') ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport};
-      } else {
-        getQuery = (type === 'embedded') ? {type: 'embedded', module} : {module};
-      }
-      if (this.isEnabledInLibraryModule("callCreateFromProps")) {
-        this.props.createNew();
-        return;
-      }
+    
+      if (template) {
+    this.props.actions.setEdmTemplate({
+      ...template,
+      isEdmSupport,
+      isLanguageSupport,
+          projectId: template?.versions?.base?.drag_drop_id,
+        });
+
+        if (this.state.channel && this.state.channel.toLowerCase() === EMAIL) {
+          getQuery = (type === TYPE_EMBEDDED) ? {
+            type: TYPE_EMBEDDED, 
+      module,
+      isLanguageSupport: isLanguageSupport ? 1 : 0,
+      isEdmSupport: isEdmSupport ? 1 : 0,
+            projectId: template?.versions?.base?.drag_drop_id,
+    } : {
+      module,
+            isLanguageSupport: isLanguageSupport ? 1 : 0,
+            isEdmSupport: isEdmSupport ? 1 : 0,
+            projectId: template?.versions?.base?.drag_drop_id,
+    };
+        } else {
+          getQuery = (type === TYPE_EMBEDDED) ? {type: TYPE_EMBEDDED, module} : {module};
+        }
 
-      const queryParams = commonUtil.createQueryString(getQuery);
-      // this.props.router.push(`${pathName}${queryParams}`);
+    if (this.isEnabledInLibraryModule("callCreateFromProps")) {
+      this.props.createNew();
+      return;
+    }
 
-      this.props.router.push({
-        pathname: `/${this.state.channel.toLowerCase()}/create`,
-        search: getQuery,
-      });
+    this.props.router.push({
+      pathname: `/${this.state.channel.toLowerCase()}/create`,
+          search: commonUtil.createQueryString(getQuery),
+        });
+      }
     }
   };
 
@@ -1128,7 +1148,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         const imgSrc = template && template.versions && template.versions.base ? template.versions.base.preview_http_url : '';
         const ifPreviewGenerated = template && template.versions && template.versions.base ? template.versions.base.isPreviewGenerated : 0;
         content = <img src={imgSrc || ''} alt={this.props.intl.formatMessage(messages.previewGenerateText)} width="100%" height="100%"/>;
-        
+
         temp.content = (
           <div
             className="sms-template-content">
@@ -1136,7 +1156,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               {content}
             </div>
             {!layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template._id)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
-            {layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={(event) =>{this.handleEdmDefaultTemplateSelection(true, template._id); event.stopPropagation();}} className="select-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectDefaultButton) : this.props.intl.formatMessage(messages.selectDefaultButton)}</CapButton> : ''}
+            {layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={(event) =>{this.handleEdmDefaultTemplateSelection(true, template?.versions?.base?.drag_drop_id); event.stopPropagation();}} className="select-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectDefaultButton) : this.props.intl.formatMessage(messages.selectDefaultButton)}</CapButton> : ''}
             {!layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
           </div>);
       } else if (this.state.channel.toLowerCase() === 'mobilepush') {

package/package.json

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

package/services/api.js

@@ -9,7 +9,7 @@ import config from '../config/app';
 import pathConfig from '../config/path';
 import getSchema from './getSchema';
 import * as API from '../utils/ApiCaller';
-import { addBaseToTemplate } from '../utils/commonUtils';
+import { addBaseToTemplate, transformCustomFieldsData } from '../utils/commonUtils';
 import { EMAIL, SMS } from '../v2Containers/CreativesContainer/constants';
 let API_ENDPOINT = config.development.api_endpoint;
 let EXPORT_API_ENDPOINT = config.development.exports_api_endpoint;
@@ -359,7 +359,13 @@ export const fetchSchemaForEntity = async ({queryParams}) => {
     });
   }
   const url = `${API_ENDPOINT}/meta/${queryParams.type}?query=${JSON.stringify(queryParams)}`;
-  return request(url, getAPICallObject('GET'));// request(url, getAPICallObject('GET'));
+  const result = await request(url, getAPICallObject('GET'));// request(url, getAPICallObject('GET'));
+  const customFields = get(result, 'response.metaEntities.custom', {});
+  if (customFields && Object.keys(customFields)?.length > 0) {
+    const transformedData = transformCustomFieldsData(customFields);
+    result.response.metaEntities.custom = transformedData;
+  }
+  return result;
 };
 
 export const fetchWeCrmAccounts = (sourceName) => {
@@ -471,14 +477,12 @@ export const getUnsubscribeUrl = () => {
   return request(url, getAPICallObject('POST', body));
 };
 
-export const getMarketingObjectives = (channel) =>
-  request(
-    `${CAMPAIGNS_API_ENDPOINT}/socialObjectives?channel=${channel}`,
-    getAPICallObject('GET', null, false, true),
-  );
+export const getMarketingObjectives = (channel) => request(
+  `${CAMPAIGNS_API_ENDPOINT}/socialObjectives?channel=${channel}`,
+  getAPICallObject('GET', null, false, true),
+);
 
-export const getAllLineStickers = () =>
-  request(`${API_ENDPOINT}/meta/sticker`, getAPICallObject('GET'));
+export const getAllLineStickers = () => request(`${API_ENDPOINT}/meta/sticker`, getAPICallObject('GET'));
 
 
 export const createCustomRow = (data) => {
@@ -520,7 +524,13 @@ export const checkBulkDuplicates = (data) => {
 export const createWhatsappTemplate = ({payload, gupshupMediaFile }) => {
   const data = new FormData();
   data.append('payload', JSON.stringify(payload));
-  data.append('gupshupMediaFile', gupshupMediaFile);
+  if (Array.isArray(gupshupMediaFile) && gupshupMediaFile?.length) {
+    gupshupMediaFile.forEach((file, index) => {
+      data.append(`gupshupMediaFile_${index}`, file);
+    });
+  } else {
+    data.append('gupshupMediaFile', gupshupMediaFile);
+  }
   const url = `${API_ENDPOINT}/templates/WHATSAPP`;
   return request(url, getAPICallObject('POST', data, true));
 };

package/services/tests/api.test.js

@@ -86,7 +86,11 @@ describe('uploadFile -- whatsapp image upload', () => {
 describe('createWhatsappTemplate -- Test with valid responses', () => {
   it('Should return correct response', () =>
     expect(
-      createWhatsappTemplate(sampleFile, mockData.createWhatsappPayload),
+      createWhatsappTemplate({gupshupMediaFile: [sampleFile], payload: mockData.createWhatsappPayload}),
+    ).toEqual(Promise.resolve()));
+  it('Should return correct response when single file is present', () =>
+    expect(
+      createWhatsappTemplate({gupshupMediaFile: sampleFile, payload: mockData.createWhatsappPayload}),
     ).toEqual(Promise.resolve()));
 });
 

package/utils/commonUtils.js

@@ -9,23 +9,77 @@ export const apiMessageFormatHandler = (id, fallback) => (
 );
 
 export const addBaseToTemplate = (template) => {
-  const { versions: {
-    history = [],
-  } = {}} = template || {};
+  const {
+    versions: {
+      history = [],
+    } = {},
+  } = template || {};
   if (history?.length) {
     return ({
       ...template,
       versions: {
         ...template.versions,
-        base:{
+        base: {
           ...history[0],
-          ...( !history?.[0]?.subject && { subject: get(template, 'versions.base.subject') })
-      }
-      }
+          ...( !history?.[0]?.subject && { subject: get(template, 'versions.base.subject') }),
+        },
+      },
     });
   }
-    return template;
+  return template;
+};
+
+export const isEmbeddedEditOrPreview = (queryType, creativesMode) => queryType === EMBEDDED && [EDIT, PREVIEW].includes(creativesMode);
+
+export const transformCustomFieldsData = (customFields) => {
+  // Define mapping of scopes to their display names
+  const scopeMapping = {
+    loyalty_registration: 'Registration custom fields',
+    loyalty_transaction: 'Registration custom fields',
+    store_custom_fields: 'Organization custom fields',
+    org_custom_field: 'Organization custom fields',
+  };
+
+  // Initialize result structure with all possible sections
+  const result = Object.values(scopeMapping).reduce((acc, sectionName) => {
+    acc[sectionName] = {
+      name: sectionName,
+      subtags: {},
+    };
+    return acc;
+  }, {});
+
+  // Process each custom field
+  Object.values(customFields).forEach((field) => {
+    const {scope = ''} = field;
+    const sectionName = scopeMapping[scope];
+
+    if (sectionName) {
+      // Determine the prefix based on scope
+      let prefix = 'custom_field';
+      if (scope === 'org_custom_field') {
+        prefix = 'org_custom_field';
+      } else if (scope === 'store_custom_fields') {
+        prefix = 'store_custom_field';
+      }
+
+      const fieldKey = `${prefix}.${field?.name}`;
+      // Add field to appropriate section
+      result[sectionName].subtags[fieldKey] = {
+        name: field?.name,
+        desc: field?.name || field?.label,
+      };
+    }
+  });
+
+  // Remove empty sections (those with no subtags)
+  Object.keys(result).forEach((sectionName) => {
+    if (Object.keys(result[sectionName]?.subtags)?.length === 0) {
+      delete result[sectionName];
+    }
+  });
+
+  return result;
 };
 
-export const isEmbeddedEditOrPreview = (queryType, creativesMode) => queryType === EMBEDDED &&
-  [EDIT, PREVIEW].includes(creativesMode);
+export const isTagIncluded = (value) => value && value.includes('{{') && value.includes('}}');

package/utils/tests/commonUtil.test.js

@@ -2,10 +2,9 @@ import "@testing-library/jest-dom";
 import get from 'lodash/get';
 import { getTreeStructuredTags } from "../common";
 import * as mockdata from "./common.mockdata";
-import { addBaseToTemplate, isEmbeddedEditOrPreview } from "../commonUtils";
+import { addBaseToTemplate, isEmbeddedEditOrPreview, transformCustomFieldsData } from "../commonUtils";
 import { EMBEDDED, FULL } from "../../v2Containers/Whatsapp/constants";
 import { CREATE, EDIT, PREVIEW } from "../../v2Containers/App/constants";
-import { query } from "express";
 
 jest.mock('@capillarytech/cap-ui-utils', () => ({
   Auth: {
@@ -38,7 +37,7 @@ describe('addBaseToTemplate', () => {
       versions: {
         history: ['v1', 'v2', 'v3'],
         base: {
-          "0":"v","1":"1","subject":undefined,
+          0: "v", 1: "1", subject: undefined,
         },
       },
     };
@@ -115,3 +114,109 @@ describe('isEmbeddedEditOrPreview', () => {
     expect(isEmbeddedEditOrPreview(queryType, creativesMode)).toBe(false);
   });
 });
+
+describe('transformCustomFieldsData', () => {
+  it('should transform registration custom fields correctly', () => {
+    const input = {
+      1: {
+        name: 'age_group',
+        label: 'Age Group',
+        scope: 'loyalty_registration',
+      },
+      2: {
+        name: 'gender',
+        label: 'Gender',
+        scope: 'loyalty_registration',
+      },
+    };
+
+    const expected = {
+      'Registration custom fields': {
+        name: 'Registration custom fields',
+        subtags: {
+          'custom_field.age_group': {
+            name: 'age_group',
+            desc: 'age_group',
+          },
+          'custom_field.gender': {
+            name: 'gender',
+            desc: 'gender',
+          },
+        },
+      },
+    };
+
+    expect(transformCustomFieldsData(input)).toEqual(expected);
+  });
+
+  it('should transform organization custom fields correctly', () => {
+    const input = {
+      1: {
+        name: 'org_phone',
+        label: 'Phone',
+        scope: 'org_custom_field',
+      },
+      2: {
+        name: 'store_location',
+        label: 'Location',
+        scope: 'store_custom_fields',
+      },
+    };
+
+    const expected = {
+      'Organization custom fields': {
+        name: 'Organization custom fields',
+        subtags: {
+          'org_custom_field.org_phone': {
+            name: 'org_phone',
+            desc: 'org_phone',
+          },
+          'store_custom_field.store_location': {
+            name: 'store_location',
+            desc: 'store_location',
+          },
+        },
+      },
+    };
+
+    expect(transformCustomFieldsData(input)).toEqual(expected);
+  });
+
+  it('should handle empty input correctly', () => {
+    expect(transformCustomFieldsData({})).toEqual({});
+  });
+
+  it('should handle fields with missing properties', () => {
+    const input = {
+      1: {
+        scope: 'loyalty_registration',
+      },
+    };
+
+    const expected = {
+      'Registration custom fields': {
+        name: 'Registration custom fields',
+        subtags: {
+          'custom_field.undefined': {
+            name: undefined,
+            desc: undefined,
+          },
+        },
+      },
+    };
+
+    expect(transformCustomFieldsData(input)).toEqual(expected);
+  });
+
+  it('should ignore fields with invalid scope', () => {
+    const input = {
+      1: {
+        name: 'test',
+        label: 'Test',
+        scope: 'invalid_scope',
+      },
+    };
+
+    expect(transformCustomFieldsData(input)).toEqual({});
+  });
+});