@capillarytech/creatives-library 8.0.125 → 8.0.126

package/config/app.js

@@ -7,6 +7,9 @@ const config = {
     campaigns_api_endpoint: '/iris/v2/campaigns',
     campaigns_api_org_endpoint: '/iris/v2/org/campaign',
     liquid_endpoint:'/iris/v2/template',
+    membercare_api_endpoint: '/member-care/api/v1',
+    iris_api_endpoint: '/iris/v2',
+    adiona_api_endpoint: '/adiona/api/v1',
     auth_endpoint: '/arya/api/v1/auth',
     arya_endpoint: '/arya/api/v1',
     login_url: '/auth/login',
@@ -27,6 +30,9 @@ const config = {
     login_url: '/auth/login',
     dashboard_url: '/sms',
     liquid_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/template',
+    membercare_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/member-care/api/v1',
+    iris_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2',
+    adiona_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/adiona/api/v1',
     dashboard_url_v2: '/v2',
   },
   testing: {

package/initialReducer.js

@@ -14,6 +14,7 @@ import ftpReducer from 'v2Containers/FTP/reducer';
 import galleryReducer from './v2Containers/Assets/Gallery/reducer';
 import CapCollapsibleLeftNavigationReducer from '@capillarytech/cap-ui-library/CapCollapsibleLeftNavigation/reducer';
 import { AIRA_REDUCER_DOMAIN, askAiraReducer } from '@capillarytech/cap-ui-library/CapAskAira';
+import previewAndTestReducer from './v2Components/TestAndPreviewSlidebox/reducer';
 
 export const initialReducer = {
   language: languageProviderReducer,
@@ -31,4 +32,5 @@ export const initialReducer = {
   [AIRA_REDUCER_DOMAIN]: askAiraReducer,
   gallery: galleryReducer,
   navigationConfig: CapCollapsibleLeftNavigationReducer,
+  previewAndTest: previewAndTestReducer,
 };

package/package.json

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

package/services/api.js

@@ -16,6 +16,9 @@ let EXPORT_API_ENDPOINT = config.development.exports_api_endpoint;
 let CAMPAIGNS_API_ENDPOINT = config.development.campaigns_api_endpoint;
 let CAMPAIGNS_API_ORG_ENDPOINT = config.development.campaigns_api_org_endpoint;
 let LIQUID_API_ENDPOINT = config.development.liquid_endpoint;
+let MEMBERCARE_API_ENDPOINT = config.development.membercare_api_endpoint;
+let IRIS_API_ENDPOINT = config.development.iris_api_endpoint;
+let ADIONA_API_ENDPOINT = config.development.adiona_api_endpoint;
 
 let API_AUTH_ENDPOINT = config.development.auth_endpoint;
 let ARYA_ENDPOINT = config.development.arya_endpoint;
@@ -29,6 +32,9 @@ if (process.env.NODE_ENV === 'production') {
   SUBSCRIPTION_API_ENDPOINT = config.production.subscription_api_endpoint;
   EXPORT_API_ENDPOINT = config.production.exports_api_endpoint;
   LIQUID_API_ENDPOINT = config.production.liquid_endpoint;
+  MEMBERCARE_API_ENDPOINT = config.production.membercare_api_endpoint;
+  IRIS_API_ENDPOINT = config.production.iris_api_endpoint;
+  ADIONA_API_ENDPOINT = config.production.adiona_api_endpoint;
 }
 let requestCallerName = '';
 const isProd = process.env.NODE_ENV === 'production';
@@ -172,6 +178,46 @@ function getAPICallObject(method, body, isFileUpload = false, loadCampaignHeader
   return requestObj;
 }
 
+function get_LOYALTY_API_CallObject(method, body, notStringify) {
+  const token = loadItem('token');
+  const orgID = loadItem('orgID');
+  const user = loadItem('user');
+  const headers = {};
+
+  if (!notStringify) {
+    headers['Content-Type'] = 'application/json';
+  }
+
+  if (user && user.refID) {
+    headers['X-CAP-REMOTE-USER'] = user.refID;
+  }
+
+  if (process.env.NODE_ENV !== 'production' && orgID !== undefined) {
+    headers['X-CAP-API-AUTH-ORG-ID'] = orgID;
+  }
+
+  if (token !== undefined) {
+    headers.Authorization = `Bearer ${token}`;
+  }
+  const requestObj = {
+    method,
+    mode: 'cors',
+    headers: new Headers(headers),
+  };
+
+  if (process.env.NODE_ENV === 'production') {
+    requestObj.credentials = 'same-origin';
+  }
+
+  if (body && !notStringify) {
+    requestObj.body = JSON.stringify(body);
+  } else {
+    requestObj.body = body;
+  }
+
+  return requestObj;
+}
+
 // Authentication
 export const authorize = (user) => {
   const body = {
@@ -584,4 +630,51 @@ export const createCentralCommsMetaId = (payload, metaType = TRANSACTION) => {
   return request(url, getAPICallObject('POST', payload, false, false, false, true));
 };
 
+// Customer Search APIs for Email Test & Preview Feature
+export const searchCustomers = ({ query }) => {
+  const url = `${MEMBERCARE_API_ENDPOINT}/customers/search?q=${encodeURIComponent(query)}&limit=10`;
+  return request(url, get_LOYALTY_API_CallObject('GET'));
+};
+
+export const extractTagsWithMetaData = (payload) => {
+  const url = `${LIQUID_API_ENDPOINT}/extractTagsWithMetaData`;
+  return request(url, getAPICallObject('POST', payload, false, true));
+};
+
+export const updateEmailPreview = (payload) => {
+  const url = `${LIQUID_API_ENDPOINT}/preview`;
+  return request(url, getAPICallObject('POST', payload, false, true));
+};
+
+export const sendTestMessage = (payload) => {
+  const url = `${LIQUID_API_ENDPOINT}/sendTestMessage`;
+  return request(url, getAPICallObject('POST', payload, false, true));
+};
+
+export const fetchTestCustomers = () => {
+  const url = `${IRIS_API_ENDPOINT}/userGroup/default`;
+  return request(url, getAPICallObject('GET', null, false, true));
+};
+
+export const fetchTestGroups = () => {
+  const url = `${IRIS_API_ENDPOINT}/userGroup?isDefault=false`;
+  return request(url, getAPICallObject('GET', null, false, true));
+};
+
+export const getBulkCustomerDetails = (userIds) => {
+  const user = loadItem('user');
+  const url = `${ADIONA_API_ENDPOINT}/journeys/getBulkCustomer?source=ALL&userValue=${user?.loginName}`;
+  return request(url, get_LOYALTY_API_CallObject('POST', userIds));
+};
+
+export const createTestMessageMeta = (payload) => {
+  const url = `${LIQUID_API_ENDPOINT}/TEST/createMessageMeta`;
+  return request(url, getAPICallObject('POST', payload, false, true));
+};
+
+export const updateTestMessageMeta = (payload) => {
+  const url = `${LIQUID_API_ENDPOINT}/TEST/${payload.messageMetaConfigId}/updateMessageMeta`;
+  return request(url, getAPICallObject('POST', payload?.data, false, true));
+};
+
 export {request, getAPICallObject};

package/services/tests/api.test.js

@@ -14,6 +14,15 @@ import {
   fetchSchemaForEntity,
   getDefaultBeeTemplates,
   getEdmTemplates,
+  searchCustomers,
+  extractTagsWithMetaData,
+  updateEmailPreview,
+  sendTestMessage,
+  fetchTestCustomers,
+  fetchTestGroups,
+  getBulkCustomerDetails,
+  createTestMessageMeta,
+  updateTestMessageMeta,
 } from '../api';
 import { mockData } from './mockData';
 import getSchema from '../getSchema';
@@ -613,3 +622,185 @@ describe('Email Template APIs', () => {
     sharedTests(getDefaultBeeTemplates, 'getDefaultBeeTemplates');
   });
 });
+
+describe('searchCustomers', () => {
+  it('should return correct response', async () => {
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({
+        status: 200,
+        response: 'test',
+      }),
+    }));
+    const result = await searchCustomers({ query: 'test' });
+    expect(result).toEqual({
+      status: 200,
+      response: 'test',
+    });
+  });
+  it('should handle fetch failure', async () => {
+    global.fetch.mockRejectedValue({ error: 'Network error' });
+    const result = await searchCustomers({ query: 'test' });
+    expect(result).toEqual({
+      error: 'Network error',
+    });
+  });
+});
+describe('extractTagsWithMetaData', () => {
+  it('should return correct response', async () => {
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({
+        status: 200,
+        response: 'test',
+      }),
+    }));
+    const result = await extractTagsWithMetaData({ query: 'test' });
+    expect(result).toEqual({
+      status: 200,
+      response: 'test',
+    });
+  });
+  it('should handle fetch failure', async () => {
+    global.fetch.mockRejectedValue({ error: 'Network error' });
+    const result = await extractTagsWithMetaData({ query: 'test' });
+    expect(result).toEqual({
+      error: 'Network error',
+    });
+  });
+});
+
+describe('updateEmailPreview', () => {
+  it('should return correct response', async () => {
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({
+        status: 200,
+        response: 'test',
+      }),
+    }));
+    const result = await updateEmailPreview({ query: 'test' });
+    expect(result).toEqual({
+      status: 200,
+      response: 'test',
+    });
+  });
+  it('should handle fetch failure', async () => {
+    global.fetch.mockRejectedValue({ error: 'Network error' });
+    const result = await updateEmailPreview({ query: 'test' });
+    expect(result).toEqual({
+      error: 'Network error',
+    });
+  });
+});
+
+describe('sendTestMessage', () => {
+  it('should return correct response', async () => {
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({
+        status: 200,
+        response: 'test',
+      }),
+    }));
+    const result = await sendTestMessage({ query: 'test' });
+    expect(result).toEqual({
+      status: 200,
+      response: 'test',
+    });
+  });
+});
+describe('fetchTestCustomers', () => {
+  it('should return correct response', async () => {
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({
+        status: 200,
+        response: 'test',
+      }),
+    }));
+    const result = await fetchTestCustomers({ query: 'test' });
+    expect(result).toEqual({
+      status: 200,
+      response: 'test',
+    });
+  });
+  it('should handle fetch failure', async () => {
+    global.fetch.mockRejectedValue({ error: 'Network error' });
+    const result = await fetchTestCustomers({ query: 'test' });
+    expect(result).toEqual({
+      error: 'Network error',
+    });
+  });
+});
+describe('fetchTestGroups', () => {
+  it('should return correct response', async () => {
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({
+        status: 200,
+        response: 'test',
+      }),
+    }));
+    const result = await fetchTestGroups({ query: 'test' });
+    expect(result).toEqual({
+      status: 200,
+      response: 'test',
+    });
+  });
+});
+describe('getBulkCustomerDetails', () => {
+  it('should return correct response', async () => {
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({
+        status: 200,
+        response: 'test',
+      }),
+    }));
+    const result = await getBulkCustomerDetails({ query: 'test' });
+    expect(result).toEqual({
+      status: 200,
+      response: 'test',
+    });
+  });
+  it('should handle fetch failure', async () => {
+    global.fetch.mockRejectedValue({ error: 'Network error' });
+    const result = await getBulkCustomerDetails({ query: 'test' });
+    expect(result).toEqual({
+      error: 'Network error',
+    });
+  });
+});
+describe('createTestMessageMeta', () => {
+  it('should return correct response', async () => {
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({
+        status: 200,
+        response: 'test',
+      }),
+    }));
+    const result = await createTestMessageMeta({ query: 'test' });
+    expect(result).toEqual({
+      status: 200,
+      response: 'test',
+    });
+  });
+});
+describe('updateTestMessageMeta', () => {
+  it('should return correct response', async () => {
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({
+        status: 200,
+        response: 'test',
+      }),
+    }));
+    const result = await updateTestMessageMeta({ query: 'test' });
+    expect(result).toEqual({
+      status: 200,
+      response: 'test',
+    });
+  });
+});

package/v2Components/CustomerSearchSection/_customerSearch.scss

@@ -0,0 +1,309 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.customer-search-section {
+  margin-top: $CAP_SPACE_08;
+  display: flex;
+  flex-direction: column;
+  gap: $CAP_SPACE_04;
+  padding: 0;
+  position: relative;
+
+  .customer-search-label {
+    font-weight: bold;
+    margin-bottom: $CAP_SPACE_04;
+    font-size: $CAP_SPACE_16;
+  }
+
+  .search-container {
+    position: relative;
+  }
+
+  .search-dropdown-container {
+    position: absolute;
+    width: 100%;
+    z-index: 1000;
+  }
+
+  .search-result-card {
+    width: 100%;
+    margin: 0;
+    box-shadow: 0 $CAP_SPACE_04 $CAP_SPACE_12 rgba(0, 0, 0, 0.15);
+    border-radius: $CAP_SPACE_08;
+    border: 1px solid #d9d9d9;
+
+    .ant-card-body {
+      padding: $CAP_SPACE_08;
+    }
+  }
+
+  .link-result {
+    .ant-row.ant-row-flex {
+      padding: $CAP_SPACE_08 $CAP_SPACE_12;
+      border-radius: $CAP_SPACE_06;
+
+      &:hover {
+        background-color: #f0f0f0;
+      }
+    }
+  }
+
+  .customer-common-profile {
+    width: $CAP_SPACE_40;
+    height: $CAP_SPACE_40;
+    border-radius: 50%;
+    background-color: #E7D0FB;
+    color: $CAP_PURPLE;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: $CAP_SPACE_16;
+  }
+
+  .search-text {
+    &.ant-typography {
+      font-weight: bold;
+      color: #262626;
+      margin-bottom: 0;
+    }
+  }
+
+
+  .identifiers-text {
+    margin-top: -0.6rem;
+    color: #8c8c8c;
+    .highlight-background-color {
+      background-color: transparent;
+      font-weight: bold;
+    }
+  }
+  .identifier-desc {
+    margin-top: 0.6rem;
+  }
+
+  .link-result-divider {
+    margin: 0 $CAP_SPACE_12;
+  }
+  
+  .selected-customer-view {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: $CAP_SPACE_04 $CAP_SPACE_12;
+    border: 1px solid #d9d9d9;
+    border-radius: $CAP_SPACE_06;
+    background-color: $CAP_WHITE;
+    height: $CAP_SPACE_40;
+    cursor: default;
+
+    .customer-common-profile {
+      width: $CAP_SPACE_24;
+      height: $CAP_SPACE_24;
+      font-size: $CAP_SPACE_12;
+    }
+
+    .search-text, .identifiers-text {
+      margin-bottom: 0;
+    }
+    .multiple-identifiers {
+      margin: 0.25rem 0;
+    }
+
+    .clear-icon {
+      cursor: pointer;
+      color: #8c8c8c;
+    }
+  }
+
+  .search-input-container {
+    position: relative;
+    .search-error {
+      margin-top: $CAP_SPACE_08;
+    }
+  }
+
+  .validation-card {
+    min-width: 100%;
+    max-width: 100%;
+    margin: 0;
+    box-shadow: 0 $CAP_SPACE_04 $CAP_SPACE_08 -2px rgba(9, 30, 66, 0.25),
+      0 0 1px 0 rgba(9, 30, 66, 0.31);
+    border-top-left-radius: unset;
+    border-top-right-radius: unset;
+    border-top-color: transparent;
+    .ant-card-body {
+      padding: $CAP_SPACE_12 $CAP_SPACE_20;
+    }
+  }
+
+  .search-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: #fff;
+    border: 1px solid #d9d9d9;
+    border-top: none;
+    border-radius: 0 0 $CAP_SPACE_06 $CAP_SPACE_06;
+    box-shadow: 0 $CAP_SPACE_02 $CAP_SPACE_08 rgba(0, 0, 0, 0.1);
+    max-height: 200px;
+    overflow-y: auto;
+    z-index: 1050;
+
+    &.no-results {
+      .no-results-message {
+        display: flex;
+        align-items: center;
+        gap: $CAP_SPACE_08;
+        padding: $CAP_SPACE_16;
+        color: #8c8c8c;
+        font-size: 1rem;
+        
+        .cap-icon {
+          color: #d9d9d9;
+        }
+      }
+    }
+  }
+
+  .customer-result-item {
+    display: flex;
+    align-items: center;
+    gap: $CAP_SPACE_12;
+    padding: $CAP_SPACE_12 $CAP_SPACE_16;
+    cursor: pointer;
+    border-bottom: 1px solid #f0f0f0;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: #f5f5f5;
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .customer-avatar {
+      flex-shrink: 0;
+    }
+
+    .customer-details {
+      flex: 1;
+      min-width: 0;
+
+      .customer-name {
+        font-weight: 500;
+        font-size: 1rem;
+        color: #262626;
+        margin-bottom: 2px;
+      }
+
+      .customer-email {
+        font-size: $CAP_SPACE_12;
+        color: #8c8c8c;
+        margin-bottom: 2px;
+      }
+
+      .customer-phone {
+        font-size: $CAP_SPACE_12;
+        color: #8c8c8c;
+      }
+    }
+
+    .customer-id {
+      flex-shrink: 0;
+      font-size: $CAP_SPACE_12;
+      color: #8c8c8c;
+      font-weight: 500;
+    }
+  }
+
+  .selected-customer {
+    display: flex;
+    flex-direction: column;
+    gap: $CAP_SPACE_16;
+    padding: $CAP_SPACE_16;
+    background: #f8f9fa;
+    border: 1px solid #e8e8e8;
+    border-radius: $CAP_SPACE_06;
+
+    .selected-customer-info {
+      display: flex;
+      align-items: center;
+      gap: $CAP_SPACE_12;
+
+      .customer-details {
+        flex: 1;
+
+        .customer-name {
+          font-weight: 500;
+          font-size: 1rem;
+          color: #262626;
+          margin-bottom: $CAP_SPACE_04;
+        }
+
+        .customer-email {
+          font-size: $CAP_SPACE_12;
+          color: #8c8c8c;
+          margin-bottom: $CAP_SPACE_04;
+        }
+
+        .customer-id {
+          font-size: $CAP_SPACE_12;
+          color: #8c8c8c;
+          font-weight: 500;
+        }
+      }
+    }
+
+    .selected-customer-actions {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+
+    .tag-extraction-success {
+      .extraction-summary {
+        display: flex;
+        align-items: center;
+        gap: $CAP_SPACE_08;
+        margin-bottom: $CAP_SPACE_12;
+        font-size: 1rem;
+        font-weight: 500;
+        color: #52c41a;
+      }
+
+      .required-tags,
+      .optional-tags {
+        margin-bottom: $CAP_SPACE_12;
+
+        .tag-category {
+          display: flex;
+          align-items: center;
+          gap: $CAP_SPACE_08;
+          margin-bottom: $CAP_SPACE_08;
+          font-size: 13px;
+          font-weight: 500;
+        }
+
+        .tag-list {
+          display: flex;
+          flex-wrap: wrap;
+          gap: $CAP_SPACE_06;
+        }
+      }
+
+      .required-tags .tag-category {
+        color: #fa8c16;
+      }
+
+      .optional-tags .tag-category {
+        color: #52c41a;
+      }
+
+      .api-warnings {
+        margin-top: $CAP_SPACE_08;
+      }
+    }
+  }
+}

package/v2Components/CustomerSearchSection/constants.js

@@ -0,0 +1,5 @@
+export const FIRSTNAME = 'firstname';
+export const LASTNAME = 'lastname';
+export const INSTORE = 'instore';
+export const NA = 'N/A';
+export const MINIMUM_IDENTIFIER_LENGTH = 1;