@capillarytech/creatives-library 8.0.125 → 8.0.127-alpha.0

package/v2Components/CustomerSearchSection/tests/utils.test.js

@@ -0,0 +1,334 @@
+import {
+  checkForData,
+  removeExtraIdentifiers,
+  identifiersHighlight,
+  getNamingIcon,
+} from '../utils';
+
+describe('CustomerSearchSection Utils', () => {
+  describe('checkForData', () => {
+    it('should return filtered data based on source', () => {
+      const mockData = [
+        { source: 'INSTORE', value: 'test1' },
+        { source: 'ONLINE', value: 'test2' },
+        { source: 'INSTORE', value: 'test3' },
+      ];
+
+      const result = checkForData(mockData, 'INSTORE');
+
+      expect(result).toEqual([
+        { source: 'INSTORE', value: 'test1' },
+        { source: 'INSTORE', value: 'test3' },
+      ]);
+      expect(result).toHaveLength(2);
+    });
+
+    it('should return empty array when no matching source found', () => {
+      const mockData = [
+        { source: 'ONLINE', value: 'test1' },
+        { source: 'MOBILE', value: 'test2' },
+      ];
+
+      const result = checkForData(mockData, 'INSTORE');
+
+      expect(result).toEqual([]);
+      expect(result).toHaveLength(0);
+    });
+
+    it('should handle null/undefined data gracefully', () => {
+      expect(checkForData(null, 'INSTORE')).toBeUndefined();
+      expect(checkForData(undefined, 'INSTORE')).toBeUndefined();
+      expect(checkForData([], 'INSTORE')).toEqual([]);
+    });
+
+    it('should handle empty data array', () => {
+      const result = checkForData([], 'INSTORE');
+      expect(result).toEqual([]);
+    });
+
+    it('should handle case when source parameter is null/undefined', () => {
+      const mockData = [
+        { source: 'INSTORE', value: 'test1' },
+        { source: 'ONLINE', value: 'test2' },
+      ];
+
+      expect(checkForData(mockData, null)).toEqual([]);
+      expect(checkForData(mockData, undefined)).toEqual([]);
+    });
+  });
+
+  describe('removeExtraIdentifiers', () => {
+    const mockData = [
+      { idType: 'FIRSTNAME', idValue: 'John' },
+      { idType: 'LASTNAME', idValue: 'Doe' },
+      { idType: 'EMAIL', idValue: 'john@example.com' },
+      { idType: 'PHONE', idValue: '123456789' },
+      { idType: 'FIRSTNAME', idValue: 'Jane' },
+    ];
+
+    it('should remove identifiers with specified types', () => {
+      const result = removeExtraIdentifiers(mockData, 'FIRSTNAME', 'LASTNAME');
+
+      expect(result).toEqual([
+        { idType: 'EMAIL', idValue: 'john@example.com' },
+        { idType: 'PHONE', idValue: '123456789' },
+      ]);
+      expect(result).toHaveLength(2);
+    });
+
+    it('should return original data when no matching identifiers found', () => {
+      const result = removeExtraIdentifiers(mockData, 'NONEXISTENT', 'ALSO_NONEXISTENT');
+
+      expect(result).toEqual(mockData);
+      expect(result).toHaveLength(5);
+    });
+
+    it('should handle empty data array', () => {
+      const result = removeExtraIdentifiers([], 'FIRSTNAME', 'LASTNAME');
+      expect(result).toEqual([]);
+    });
+
+    it('should handle null/undefined data gracefully', () => {
+      expect(removeExtraIdentifiers(null, 'FIRSTNAME', 'LASTNAME')).toBeNull();
+      expect(removeExtraIdentifiers(undefined, 'FIRSTNAME', 'LASTNAME')).toBeUndefined();
+    });
+
+    it('should handle single identifier type to remove', () => {
+      const result = removeExtraIdentifiers(mockData, 'EMAIL', 'NONEXISTENT');
+
+      expect(result).toEqual([
+        { idType: 'FIRSTNAME', idValue: 'John' },
+        { idType: 'LASTNAME', idValue: 'Doe' },
+        { idType: 'PHONE', idValue: '123456789' },
+        { idType: 'FIRSTNAME', idValue: 'Jane' },
+      ]);
+      expect(result).toHaveLength(4);
+    });
+
+    it('should handle case when all identifiers match removal criteria', () => {
+      const onlyFirstLastData = [
+        { idType: 'FIRSTNAME', idValue: 'John' },
+        { idType: 'LASTNAME', idValue: 'Doe' },
+      ];
+
+      const result = removeExtraIdentifiers(onlyFirstLastData, 'FIRSTNAME', 'LASTNAME');
+
+      expect(result).toEqual([]);
+      expect(result).toHaveLength(0);
+    });
+  });
+
+  describe('identifiersHighlight', () => {
+    const mockData = [
+      { idValue: 'john@example.com' },
+      { idValue: 'jane.doe@test.com' },
+      { idValue: 'abcdefghijk' },
+    ];
+
+    it('should highlight search string in identifiers', () => {
+      const result = identifiersHighlight('john', mockData);
+
+      expect(result).toEqual([
+        {
+          firstString: '',
+          secondString: 'john',
+          thirdString: '@example.com',
+        },
+        {
+          firstString: '',
+          secondString: 'jan',
+          thirdString: 'e.doe@test.com',
+        },
+        {
+          firstString: '',
+          secondString: 'abc',
+          thirdString: 'defghijk',
+        },
+      ]);
+    });
+
+    it('should handle search string in middle of identifier', () => {
+      const result = identifiersHighlight('example', mockData);
+
+      expect(result).toEqual([
+        {
+          firstString: 'john@',
+          secondString: 'example',
+          thirdString: '.com',
+        },
+        {
+          firstString: '',
+          secondString: 'jane.d',
+          thirdString: 'oe@test.com',
+        },
+        {
+          firstString: '',
+          secondString: 'abcdef',
+          thirdString: 'ghijk',
+        },
+      ]);
+    });
+
+    it('should handle search string at end of identifier', () => {
+      const result = identifiersHighlight('com', mockData);
+
+      expect(result).toEqual([
+        {
+          firstString: 'john@example.',
+          secondString: 'com',
+          thirdString: '',
+        },
+        {
+          firstString: 'jane.doe@test.',
+          secondString: 'com',
+          thirdString: '',
+        },
+        {
+          firstString: '',
+          secondString: 'ab',
+          thirdString: 'cdefghijk',
+        },
+      ]);
+    });
+
+    it('should handle empty data array', () => {
+      const result = identifiersHighlight('john', []);
+      expect(result).toBeUndefined();
+    });
+
+    it('should handle null/undefined data gracefully', () => {
+      expect(identifiersHighlight('john', null)).toBeUndefined();
+      expect(identifiersHighlight('john', undefined)).toBeUndefined();
+    });
+
+    it('should handle empty search string', () => {
+      const result = identifiersHighlight('', mockData);
+
+      expect(result).toEqual([
+        {
+          firstString: '',
+          secondString: '',
+          thirdString: 'john@example.com',
+        },
+        {
+          firstString: '',
+          secondString: '',
+          thirdString: 'jane.doe@test.com',
+        },
+        {
+          firstString: '',
+          secondString: '',
+          thirdString: 'abcdefghijk',
+        },
+      ]);
+    });
+
+    it('should handle case when search string is not found', () => {
+      const result = identifiersHighlight('xyz', mockData);
+
+      expect(result).toEqual([
+        {
+          firstString: '',
+          secondString: 'jo',
+          thirdString: 'hn@example.com',
+        },
+        {
+          firstString: '',
+          secondString: 'ja',
+          thirdString: 'ne.doe@test.com',
+        },
+        {
+          firstString: '',
+          secondString: 'ab',
+          thirdString: 'cdefghijk',
+        },
+      ]);
+    });
+
+    it('should handle data with null/undefined idValue', () => {
+      const dataWithNullValues = [
+        { idValue: null },
+        { idValue: undefined },
+        { idValue: 'valid@email.com' },
+      ];
+
+      const result = identifiersHighlight('valid', dataWithNullValues);
+
+      expect(result).toEqual([
+        {
+          firstString: undefined,
+          secondString: undefined,
+          thirdString: undefined,
+        },
+        {
+          firstString: undefined,
+          secondString: undefined,
+          thirdString: undefined,
+        },
+        {
+          firstString: '',
+          secondString: 'valid',
+          thirdString: '@email.com',
+        },
+      ]);
+    });
+  });
+
+  describe('getNamingIcon', () => {
+    it('should return two uppercase initials for full name', () => {
+      expect(getNamingIcon('John Doe')).toBe('JD');
+      expect(getNamingIcon('Jane Smith')).toBe('JS');
+      expect(getNamingIcon('Mary Jane Watson')).toBe('MJ');
+    });
+
+    it('should return first two letters for single name', () => {
+      expect(getNamingIcon('John')).toBe('JO');
+      expect(getNamingIcon('Jane')).toBe('JA');
+      expect(getNamingIcon('Ab')).toBe('AB');
+    });
+
+    it('should handle names with extra spaces', () => {
+      expect(getNamingIcon('John Doe')).toBe('JD');
+      expect(getNamingIcon('Jane Smith')).toBe('JS');
+    });
+
+    it('should handle empty string', () => {
+      expect(getNamingIcon('')).toBe('');
+    });
+
+    it('should handle null/undefined gracefully', () => {
+      expect(() => getNamingIcon(null)).toThrow();
+      expect(() => getNamingIcon(undefined)).toThrow();
+    });
+
+    it('should handle lowercase names', () => {
+      expect(getNamingIcon('john doe')).toBe('JD');
+      expect(getNamingIcon('jane smith')).toBe('JS');
+    });
+
+    it('should handle mixed case names', () => {
+      expect(getNamingIcon('jOhN dOe')).toBe('JD');
+      expect(getNamingIcon('JaNe SmItH')).toBe('JS');
+    });
+
+    it('should handle special characters in names', () => {
+      expect(getNamingIcon('John-Doe')).toBe('JO');
+      expect(getNamingIcon("O'Connor Smith")).toBe('OS');
+    });
+
+    it('should handle very long names', () => {
+      expect(getNamingIcon('Johnathon Christopher')).toBe('JC');
+      expect(getNamingIcon('A B C D E F G')).toBe('AB');
+    });
+
+    it('should handle names with numbers', () => {
+      expect(getNamingIcon('John2 Doe3')).toBe('JD');
+      expect(getNamingIcon('User123')).toBe('US');
+    });
+
+    it('should handle single character names', () => {
+      expect(getNamingIcon('A')).toBe('A');
+      expect(getNamingIcon('X')).toBe('X');
+    });
+  });
+});

package/v2Components/CustomerSearchSection/utils.js

@@ -0,0 +1,49 @@
+export const checkForData = (data, source) => {
+  const expectedData = data?.filter((d) => d?.source === source);
+  return expectedData;
+};
+
+export const removeExtraIdentifiers = (
+  data,
+  identiferFirstKey,
+  identifiersSecondKey,
+) => {
+  let finalResult = data;
+  const extraIdentifiers = data?.filter(
+    (d) => d?.idType === identiferFirstKey || d?.idType === identifiersSecondKey,
+  );
+  finalResult = extraIdentifiers?.length > 0
+    ? data?.filter((item) => extraIdentifiers?.indexOf(item) === -1)
+    : data;
+
+  return finalResult;
+};
+
+export const identifiersHighlight = (searchString, data) => {
+  let finalResult;
+  if (data?.length > 0) {
+    finalResult = data?.map((d) => {
+      const searchedStringIndex = d?.idValue?.indexOf(searchString);
+      const searchStringLength = searchString?.length;
+      const sliceString = searchedStringIndex + searchStringLength;
+      return {
+        firstString: d?.idValue?.substring(0, searchedStringIndex),
+        secondString: d?.idValue?.substring(searchedStringIndex, sliceString),
+        thirdString: d?.idValue?.substring(sliceString),
+      };
+    });
+  }
+  return finalResult;
+};
+
+// Name breaking icon
+export const getNamingIcon = (data) => {
+  let returnedString;
+  const splitStrings = data?.split(' ');
+  returnedString = splitStrings?.length > 1
+    ? splitStrings[0].charAt(0).toUpperCase()
+      + splitStrings[1].charAt(0).toUpperCase()
+    : splitStrings[0].charAt(0).toUpperCase()
+      + splitStrings[0].charAt(1).toUpperCase();
+  return returnedString;
+};

package/v2Components/ErrorInfoNote/style.scss

@@ -1,6 +1,7 @@
 @import "~@capillarytech/cap-ui-library/styles/_variables.scss";
 
 .error-container {
+  width: max-content;
   margin-bottom: $CAP_SPACE_08;
   margin-top: $CAP_SPACE_12;
   background-color: $CAP_COLOR_05;

package/v2Components/MobilePushPreviewV2/index.js

@@ -15,6 +15,7 @@ import { MOBILE_PUSH } from '../../v2Containers/CreativesContainer/constants';
 import { INAPP } from '../../v2Containers/App/constants';
 import { ANDROID, IOS } from '../../v2Containers/InApp/constants';
 import { getCtaObject } from '../../v2Containers/InApp/utils';
+import { VIDEO } from '../../v2Containers/MobilePushNew/constants';
 
 class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -64,14 +65,40 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
       const androidContent = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent');
       const iosContent = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent');
 
-      const data = device === "android" ? androidContent : iosContent;
-      const { title = '', message = '', expandableDetails: { ctas = [], image = '' } = {}} = data || {};
+      const data = device?.toLowerCase() === "android" ? androidContent : iosContent;
+      const { title = '', message = '', expandableDetails: { ctas = [], image = '', media = [], carouselData = [] } = {}} = data || {};
+
+      // Handle video/GIF content from expandableDetails.media array (new format)
+      let bodyVideo = {};
+      let bodyGif = '';
+      let bodyImage = image;
+
+      if (media && Array.isArray(media) && media.length > 0) {
+        const mediaItem = media[0];
+        if (mediaItem.type === VIDEO) {
+          // Distinguish between actual video and GIF based on URL extension
+          if (mediaItem.url && mediaItem.url.toLowerCase().includes('.gif')) {
+            bodyGif = mediaItem.url;
+          } else {
+            bodyVideo = {
+              videoSrc: mediaItem.url,
+              videoPreview: mediaItem.url,
+            };
+          }
+          // Clear bodyImage when we have video/GIF content
+          bodyImage = '';
+        }
+      }
+
       content = {
         header: title,
         bodyText: message,
-        bodyImage: image,
+        bodyImage,
+        bodyVideo,
+        bodyGif,
         actions: [],
         appName: templateData?.appName,
+        carouselData,
       };
       if (ctas && ctas?.length) {
         if (device === "android" ) {
@@ -83,6 +110,7 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     }
     return content;
   }
+
   getPreview(device) {
     const deviceParam = device === ANDROID.toLowerCase() ? ANDROID : IOS;
     return (
@@ -95,17 +123,21 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
       />
     );
   }
+
   goToDuplicate() {
     this.props.onDuplicateClick(this.props.templateData);
     this.props.handleClose();
   }
+
   changeDevice(device) {
     const content = this.setContent(this.props.templateData, device, this.props.channel);
     this.setState({device, content });
   }
+
   goToEdit(e, path) {
     this.props.onEditClick(e, this.props.templateData._id, this.props.templateData.modeType, path);
   }
+
   render() {
     const {templateData} = this.props;
     let hasAndroid;
@@ -121,8 +153,8 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     return (
       <div>
         <div className="devices">
-          {!isEmpty(templateData) &&
-            ( hasBothAndroidAndIos ? (
+          {!isEmpty(templateData)
+            && ( hasBothAndroidAndIos ? (
               <CapTab
                 panes={[
                   {