@capillarytech/creatives-library 8.0.97 → 8.0.99

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.97",
+  "version": "8.0.99",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Containers/Whatsapp/index.js

@@ -405,10 +405,16 @@ export const Whatsapp = (props) => {
             videoSrc: carousel?.videoUrl,
             videoPreviewImg: carousel?.videoPreviewImg,
           }),
+          karixFileHandle: carousel?.karixFileHandle || '',
           buttons: carousel?.buttons?.map((button) => ({
             ...button,
             buttonType: button?.type,
           })),
+          assetList: {
+            previewUrl: carousel?.videoPreviewImg,
+            videoSrc: carousel?.videoUrl,
+            fileHandle: carousel?.karixFileHandle,
+          }
         };
       })
     );
@@ -1130,7 +1136,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       videoSize={WHATSAPP_VIDEO_SIZE}
       isFullMode={isFullMode}
       uploadAsset={uploadWhatsappAsset}
-      uploadedAssetList={carouselData?.[activeIndex]?.assetList || []}
+      uploadedAssetList={isMediaTypeCarousel ? carouselData?.[activeIndex]?.assetList : assetList}
       onVideoUploadUpdateAssestList={setUpdateWhatsappVideoSrc}
       videoData={editData}
       className="cap-custom-video-upload"

package/v2Containers/Whatsapp/tests/utils.test.js

@@ -11,6 +11,7 @@ import {
 } from '../utils';
 import mockdata from '../../mockdata';
 import { HOST_ICS, PHONE_NUMBER, QUICK_REPLY } from '../constants';
+import { WHATSAPP_MEDIA_TYPES } from '../../Whatsapp/constants';
 
 const {
   whatsappPreviewTemplateData,
@@ -179,4 +180,101 @@ describe('Test utils', () => {
       expect(result[3].props.children[0].props.type).toBe('call');
     });
   });
+
+  describe('carousel functionality', () => {
+    const mockTemplate = {
+      versions: {
+        base: {
+          content: {
+            whatsapp: {
+              languages: [{ content: 'Test message' }],
+              carouselData: [
+                {
+                  mediaType: 'image',
+                  imageUrl: 'https://example.com/image.jpg',
+                },
+                {
+                  mediaType: 'video',
+                  videoUrl: 'https://example.com/video.mp4',
+                  videoPreviewImg: 'https://example.com/preview.jpg',
+                },
+              ],
+            },
+          },
+        },
+      },
+    };
+
+    it('should return original carousel data when isPreview is false', () => {
+      const result = getWhatsappContent(mockTemplate, false);
+      expect(result.carouselData).toEqual([
+        {
+          mediaType: 'image',
+          imageUrl: 'https://example.com/image.jpg',
+        },
+        {
+          mediaType: 'video',
+          videoUrl: 'https://example.com/video.mp4',
+          videoPreviewImg: 'https://example.com/preview.jpg',
+        },
+      ]);
+      expect(result.carouselMediaType).toBeUndefined();
+    });
+
+    it('should transform carousel data correctly when isPreview is true', () => {
+      const result = getWhatsappContent(mockTemplate, true);
+
+      expect(result.carouselData).toEqual([
+        {
+          mediaType: 'image',
+          imageUrl: 'https://example.com/image.jpg',
+          imageSrc: 'https://example.com/image.jpg',
+        },
+        {
+          mediaType: 'video',
+          videoUrl: 'https://example.com/video.mp4',
+          videoPreviewImg: 'https://example.com/preview.jpg',
+          videoSrc: 'https://example.com/video.mp4',
+        },
+      ]);
+      expect(result.carouselMediaType).toBe('image');
+    });
+
+    it('should handle empty carousel data', () => {
+      const emptyTemplate = {
+        versions: {
+          base: {
+            content: {
+              whatsapp: {
+                languages: [{ content: 'Test message' }],
+                carouselData: [],
+              },
+            },
+          },
+        },
+      };
+
+      const result = getWhatsappContent(emptyTemplate, true);
+      expect(result.carouselData).toEqual([]);
+      expect(result.carouselMediaType).toBeUndefined();
+    });
+
+    it('should handle undefined carousel data', () => {
+      const undefinedTemplate = {
+        versions: {
+          base: {
+            content: {
+              whatsapp: {
+                languages: [{ content: 'Test message' }],
+              },
+            },
+          },
+        },
+      };
+
+      const result = getWhatsappContent(undefinedTemplate, true);
+      expect(result.carouselData).toEqual([]);
+      expect(result.carouselMediaType).toBeUndefined();
+    });
+  });
 });

package/v2Containers/Whatsapp/utils.js

@@ -114,6 +114,22 @@ export const getWhatsappContent = (template, isPreview) => {
       break;
   }
 
+  const getCarouselData = () => {
+    if (isPreview && carouselData?.length) {
+      return carouselData.map((carousel) => {
+        if (carousel?.mediaType === WHATSAPP_MEDIA_TYPES.IMAGE.toLowerCase()) {
+          carousel.imageSrc = carousel?.imageUrl;
+        }
+        if (carousel?.mediaType === WHATSAPP_MEDIA_TYPES.VIDEO.toLowerCase()) {
+          carousel.videoSrc = carousel?.videoUrl;
+          carousel.videoPreviewImg = carousel?.videoPreviewImg;
+        }
+        return carousel;
+      });
+    }
+    return carouselData;
+  };
+
   return {
     templateHeaderPreview: header ? <CapLabel className="whatsapp-template-list-header-preview">{header}</CapLabel> : '',
     templateFooterPreview: footer ? <CapLabel className="whatsapp-template-list-footer-preview">{footer}</CapLabel> : '',
@@ -126,7 +142,10 @@ export const getWhatsappContent = (template, isPreview) => {
       quickReplyData: buttonsData
     }),
     ...mediaParams,
-    carouselData,
+    carouselData: getCarouselData(),
+    ...(isPreview && carouselData?.length && {
+      carouselMediaType: carouselData[0]?.mediaType,
+    }),
   };
 };