@capillarytech/creatives-library 7.12.41 → 7.12.43

package/package.json

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

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

@@ -3,9 +3,9 @@ import { injectIntl } from 'react-intl';
 
 import * as actions from '../actions';
 import {Cap} from '../index';
-import mockData from '../../mockdata';
+import mockdata from '../../mockdata';
 import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
-const { match, location, capGlobal, language } = mockData;
+const { match, location, capGlobal, language } = mockdata;
 
 jest.mock('@capillarytech/cap-ui-utils', () => ({
   GA: {

package/v2Containers/ChannelTemplates/index.js

@@ -18,7 +18,6 @@ import messages from './messages';
 
 export class ChannelTemplates extends React.Component { // eslint-disable-line react/prefer-stateless-function
   componentDidMount() {
-    debugger;
     this.props.actions.getTemplates(this.props.channel);
   }
   render() {

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -6,6 +6,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import TemplatesV2 from '../TemplatesV2';
 import TemplatePreview from '../../v2Components/TemplatePreview';
 import SmsWrapper from '../SmsWrapper';
+import isEmpty from 'lodash/isEmpty';
 // import SmsEdit from '../Sms/Edit';
 import Email from '../Email';
 import EmailWrapper from '../EmailWrapper';
@@ -239,7 +240,9 @@ export function SlideBoxContent(props) {
           baseUrl,
           video,
           template,
+          contents,
         }) => {
+          const isNewLineFormat = isEmpty(template) && !isEmpty(contents);
           const {
             originalContentUrl,
             externalLink: {
@@ -258,8 +261,14 @@ export function SlideBoxContent(props) {
           previewContent.baseUrl = baseUrl;
           previewContent.video = originalContentUrl;
           previewContent.actionUrl = linkUri;
-          previewContent.imageCarousel = get(template, 'columns', [{}]).map(({ imageUrl, action: { label: actionLabel } = {} }) => ({ imageUrl, actionLabel }) );
-
+          if (isNewLineFormat) {
+            previewContent.imageCarousel = get(contents, 'contents', [{}]).map(({
+              hero: { url = ''} = {},
+              footer: { contents: [{ action: { label = '' } = {} }] = [{}] } = {},
+            }) => ({ imageUrl: url, actionLabel: label }));
+          } else {
+            previewContent.imageCarousel = get(template, 'columns', [{}]).map(({ imageUrl, action: { label: actionLabel } = {} }) => ({ imageUrl, actionLabel }) );
+          }
           const getType = () => {
             if (text) {
               return 'text';
@@ -273,7 +282,7 @@ export function SlideBoxContent(props) {
             if (baseUrl) {
               return 'imagemap';
             }
-            if (template) {
+            if (template || contents) {
               return 'image_carousel';
             }
             if (video) {

package/v2Containers/CreativesContainer/tests/SlideBoxContent.test.js

@@ -4,7 +4,7 @@ import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
 import { SlideBoxContent } from '../SlideBoxContent';
 import mockdata from '../../mockdata';
 
-const { whatsappEditTemplateData, whatsappPreviewTemplateData, rcsEditTemplateData, rcsPreviewTemplateData } = mockdata;
+const { whatsappEditTemplateData, whatsappPreviewTemplateData, rcsEditTemplateData, rcsPreviewTemplateData, lineEditTemplateData, linePreviewTemplateData } = mockdata;
 
 jest.mock("../../../v2Components/FormBuilder", () => ({
   __esModule: true,
@@ -66,4 +66,14 @@ describe('Test SlideBoxContent container', () => {
     expect(renderedComponent).toMatchSnapshot();
   });
 
+  it('Should render correct component for line channel edit mode', () => {
+    renderFunction("LINE", "editTemplate", lineEditTemplateData);
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('Should render correct component for line channel preview mode', () => {
+    renderFunction("LINE", "preview", linePreviewTemplateData);
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
 });

package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap

@@ -1,5 +1,229 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Test SlideBoxContent container Should render correct component for line channel edit mode 1`] = `
+<SlideBoxContent__CreativesWrapper>
+  <Connect(UserIsAuthenticated(Connect(InjectIntl(CreativesCommon))))
+    location={
+      Object {
+        "pathname": "/sms/edit",
+        "query": Object {
+          "isEditFromCampaigns": undefined,
+          "module": "library",
+          "type": "embedded",
+        },
+        "search": "",
+      }
+    }
+    onCreateComplete={[MockFunction]}
+    params={
+      Object {
+        "id": "629f7ecf134738019b2e332e",
+        "mode": undefined,
+      }
+    }
+    route={
+      Object {
+        "name": "edit_text",
+      }
+    }
+    templateData={
+      Object {
+        "_id": "629f7ecf134738019b2e332e",
+        "channel": "LINE",
+        "mode": "edit",
+        "modeType": "",
+        "type": "LINE",
+        "validity": true,
+      }
+    }
+  />
+</SlideBoxContent__CreativesWrapper>
+`;
+
+exports[`Test SlideBoxContent container Should render correct component for line channel preview mode 1`] = `
+<SlideBoxContent__CreativesWrapper>
+  <InjectIntl(TemplatePreview)
+    channel="line"
+    charCounterEnabled={false}
+    content={
+      Array [
+        Object {
+          "actionUrl": undefined,
+          "baseUrl": undefined,
+          "imageCarousel": Array [
+            Object {
+              "actionLabel": "ggg",
+              "imageUrl": "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/b9f2aa7a-3f1a-4a20-a737-8d50841.jpeg",
+            },
+          ],
+          "messageContent": undefined,
+          "previewImageUrl": undefined,
+          "selectedSticker": Object {
+            "animatedStickerUrl": undefined,
+            "packageId": undefined,
+            "stickerId": undefined,
+            "stickerUrl": undefined,
+          },
+          "type": "image_carousel",
+          "video": undefined,
+        },
+      ]
+    }
+    showCount={true}
+    templateData={
+      Object {
+        "_id": "629f7ecf134738019b2e332e",
+        "createdAt": "2022-06-07T16:37:35.447Z",
+        "createdBy": "15000449",
+        "isActive": true,
+        "mode": "preview",
+        "name": "ggg1",
+        "orgId": 1604,
+        "totalCount": 31,
+        "type": "LINE",
+        "updatedAt": "2022-06-07T16:42:02.243Z",
+        "updatedBy": "15000449",
+        "updatedByName": "Ashish Karan fd",
+        "versions": Object {
+          "base": Object {
+            "content": Object {
+              "messages": Array [
+                Object {
+                  "altText": "ggg",
+                  "contents": Object {
+                    "contents": Array [
+                      Object {
+                        "footer": Object {
+                          "contents": Array [
+                            Object {
+                              "action": Object {
+                                "label": "ggg",
+                                "text": "ggg",
+                                "type": "message",
+                              },
+                              "height": "sm",
+                              "style": "link",
+                              "type": "button",
+                            },
+                          ],
+                          "layout": "vertical",
+                          "spacing": "xs",
+                          "type": "box",
+                        },
+                        "hero": Object {
+                          "aspectMode": "cover",
+                          "aspectRatio": "1:1",
+                          "size": "full",
+                          "type": "image",
+                          "url": "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/b9f2aa7a-3f1a-4a20-a737-8d50841.jpeg",
+                        },
+                        "type": "bubble",
+                      },
+                    ],
+                    "type": "carousel",
+                  },
+                  "type": "flex",
+                },
+              ],
+              "to": "{{line_id}}",
+            },
+          },
+          "history": Array [],
+        },
+      }
+    }
+    viberBrandName=""
+  />
+  <Connect(UserIsAuthenticated(Connect(InjectIntl(CreativesCommon))))
+    location={
+      Object {
+        "pathname": "/sms/edit",
+        "query": Object {
+          "isEditFromCampaigns": undefined,
+          "module": "library",
+          "type": "embedded",
+        },
+        "search": "",
+      }
+    }
+    onCreateComplete={[MockFunction]}
+    params={
+      Object {
+        "id": "629f7ecf134738019b2e332e",
+        "mode": undefined,
+      }
+    }
+    route={
+      Object {
+        "name": "edit_text",
+      }
+    }
+    templateData={
+      Object {
+        "_id": "629f7ecf134738019b2e332e",
+        "createdAt": "2022-06-07T16:37:35.447Z",
+        "createdBy": "15000449",
+        "isActive": true,
+        "mode": "preview",
+        "name": "ggg1",
+        "orgId": 1604,
+        "totalCount": 31,
+        "type": "LINE",
+        "updatedAt": "2022-06-07T16:42:02.243Z",
+        "updatedBy": "15000449",
+        "updatedByName": "Ashish Karan fd",
+        "versions": Object {
+          "base": Object {
+            "content": Object {
+              "messages": Array [
+                Object {
+                  "altText": "ggg",
+                  "contents": Object {
+                    "contents": Array [
+                      Object {
+                        "footer": Object {
+                          "contents": Array [
+                            Object {
+                              "action": Object {
+                                "label": "ggg",
+                                "text": "ggg",
+                                "type": "message",
+                              },
+                              "height": "sm",
+                              "style": "link",
+                              "type": "button",
+                            },
+                          ],
+                          "layout": "vertical",
+                          "spacing": "xs",
+                          "type": "box",
+                        },
+                        "hero": Object {
+                          "aspectMode": "cover",
+                          "aspectRatio": "1:1",
+                          "size": "full",
+                          "type": "image",
+                          "url": "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/b9f2aa7a-3f1a-4a20-a737-8d50841.jpeg",
+                        },
+                        "type": "bubble",
+                      },
+                    ],
+                    "type": "carousel",
+                  },
+                  "type": "flex",
+                },
+              ],
+              "to": "{{line_id}}",
+            },
+          },
+          "history": Array [],
+        },
+      }
+    }
+  />
+</SlideBoxContent__CreativesWrapper>
+`;
+
 exports[`Test SlideBoxContent container Should render correct component for rcs channel create mode 1`] = `
 <SlideBoxContent__CreativesWrapper>
   <Connect(UserIsAuthenticated(Connect(InjectIntl(CreativesCommon))))

package/v2Containers/Line/Container/ImageCarousel/Content.js

@@ -47,6 +47,7 @@ export const LineImageCarouselContent = ({
   const [isDrawerRequired, updateDrawerRequirement] = useState(false);
   const [isImageError, updateImageErrorMessage] = useState(false);
   const [imageSrc, updateImageSrc] = useState();
+  const [aspectRatio, updateAspectRatio] = useState();
   const [isImage, updateImageStatus] = useState(false);
   const [selectedActionType, updateActionType] = useState('');
   const [actionLabel, updateActionLabel] = useState('');
@@ -58,16 +59,18 @@ export const LineImageCarouselContent = ({
     const {
       originalContentUrl = '',
       type,
+      aspectRatio: contentAspectRatio = '',
       selectedActionType = '',
       actionLabel = '',
       actionContent = '',
     } = content;
-    if (type === 'image_carousel') {
+    if (type === 'carousel') {
       updateImageStatus(!!originalContentUrl);
       updateImageSrc(originalContentUrl);
       updateActionType(selectedActionType);
       updateActionLabel(actionLabel);
       updateActionContent(actionContent);
+      if (!!contentAspectRatio) updateAspectRatio(contentAspectRatio);
     }
   }, [content]);
 
@@ -76,13 +79,14 @@ export const LineImageCarouselContent = ({
       updateCarouselMessageState({
         activeIndex,
         originalContentUrl: imageSrc,
+        aspectRatio,
         selectedActionType,
         actionContent,
         actionLabel,
         actionContentErrorMessage,
         actionLabelErrorMessage,
         index,
-        type: 'image_carousel',
+        type: 'carousel',
         messageType: 'originalContentUrl',
       });
     }
@@ -120,10 +124,11 @@ export const LineImageCarouselContent = ({
         selectedActionType,
         actionContent,
         actionLabel,
+        aspectRatio,
         actionContentErrorMessage,
         actionLabelErrorMessage,
         index,
-        type: 'image_carousel',
+        type: 'carousel',
         messageType: 'originalContentUrl',
       });
     }
@@ -140,10 +145,12 @@ export const LineImageCarouselContent = ({
       },
       type,
     } = data;
-    if (incorrectFile || size > LINE_IMG_SIZE || height > LINE_IMG_HEIGHT || width > LINE_IMG_WIDTH || height / width !== 1) {
+    if (incorrectFile || size > LINE_IMG_SIZE || height > LINE_IMG_HEIGHT || width > LINE_IMG_WIDTH || height > (width * 3)) {
       updateImageErrorMessage(formatMessage(messages.lineImageIncorrectSize));
     } else {
       updateImageErrorMessage('');
+      const aspectRatio1 = calculateAspectRatio(width, height);
+      updateAspectRatio(aspectRatio1);
       actions.uploadAsset(
         data.file,
         data.type,
@@ -153,7 +160,18 @@ export const LineImageCarouselContent = ({
     }
   }
 
-
+  const calculateGCD = (width, height) => {
+    while (height !== 0 ) {
+      let reminder = width % height;
+        width = height;
+        height = reminder;
+    }
+    return Math.abs(width);
+  };
+  const calculateAspectRatio = (width, height) => {
+    const absValue = calculateGCD(width, height);
+    return `${width / absValue}:${height / absValue}`;
+  }
 
   const uploadImages = (e, { files }) => {
     if (e) {
@@ -240,10 +258,11 @@ export const LineImageCarouselContent = ({
       selectedActionType,
       actionContent,
       actionLabel,
+      aspectRatio,
       actionContentErrorMessage,
       actionLabelErrorMessage,
       index,
-      type: 'image_carousel',
+      type: 'carousel',
       messageType: 'originalContentUrl',
     });
   }
@@ -303,10 +322,11 @@ export const LineImageCarouselContent = ({
     const imageHeight = get(imageTemplate, 'metaInfo.height');
     const imageWidth = get(imageTemplate, 'metaInfo.width');
     const imageSize = get(imageTemplate, 'metaInfo.file_size');
+    const aspectRatio1 = calculateAspectRatio(imageWidth, imageHeight);
     updateDrawerRequirement(false);
     if (
       !ALLOWED_EXTENSIONS_REGEX.test(image)
-      || imageHeight / imageWidth !== 1
+      // || imageHeight / imageWidth !== 1
       || imageHeight > LINE_IMG_HEIGHT
       || imageWidth > LINE_IMG_WIDTH
       || imageSize > LINE_IMG_SIZE
@@ -316,17 +336,19 @@ export const LineImageCarouselContent = ({
       updateImageErrorMessage('');
       updateImageStatus(true);
       updateImageSrc(image);
+      updateAspectRatio(aspectRatio1);
       updateCarouselMessageState({
         activeIndex,
         isError: !image || isImageError,
         originalContentUrl: image,
+        aspectRatio: aspectRatio1,
         selectedActionType,
         actionContent,
         actionLabel,
         actionContentErrorMessage,
         actionLabelErrorMessage,
         index,
-        type: 'image_carousel',
+        type: 'carousel',
         messageType: 'originalContentUrl',
       });
     }
@@ -383,10 +405,11 @@ export const LineImageCarouselContent = ({
       selectedActionType,
       actionContent,
       actionLabel: value,
+      aspectRatio,
       actionContentErrorMessage,
       actionLabelErrorMessage,
       index,
-      type: 'image_carousel',
+      type: 'carousel',
       messageType: 'originalContentUrl',
     });
   }
@@ -400,10 +423,11 @@ export const LineImageCarouselContent = ({
       selectedActionType: type,
       actionContent: '',
       actionLabel,
+      aspectRatio,
       actionContentErrorMessage,
       actionLabelErrorMessage,
       index,
-      type: 'image_carousel',
+      type: 'carousel',
       messageType: 'originalContentUrl',
     });
   }
@@ -430,10 +454,11 @@ export const LineImageCarouselContent = ({
       selectedActionType,
       actionContent: value,
       actionLabel,
+      aspectRatio,
       actionContentErrorMessage,
       actionLabelErrorMessage,
       index,
-      type: 'image_carousel',
+      type: 'carousel',
       messageType: 'originalContentUrl',
     });
   }