@capillarytech/creatives-library 7.14.9 → 7.14.11

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

@@ -39,6 +39,99 @@ Object {
 `;
 
 exports[`Test utils test getWhatsappContent 3`] = `
+Object {
+  "charCount": 151,
+  "ctaData": Array [
+    Object {
+      "index": 0,
+      "phone_number": "+919738752617",
+      "text": "Call",
+      "type": "PHONE_NUMBER",
+    },
+    Object {
+      "index": 1,
+      "text": "Visit",
+      "type": "DYNAMIC_URL",
+      "url": "https://docs.google.com/{{1}}",
+    },
+  ],
+  "templateMsg": <CapLabel
+    type="label9"
+  >
+    Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
+Click {{unsubscribe}} to unsubscribe
+  </CapLabel>,
+  "whatsappVideoSrc": "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213/1040",
+}
+`;
+
+exports[`Test utils test getWhatsappContent 4`] = `
+Object {
+  "charCount": 151,
+  "ctaData": Array [
+    Object {
+      "index": 0,
+      "phone_number": "+919738752617",
+      "text": "Call",
+      "type": "PHONE_NUMBER",
+    },
+    Object {
+      "index": 1,
+      "text": "Visit",
+      "type": "DYNAMIC_URL",
+      "url": "https://docs.google.com/{{1}}",
+    },
+  ],
+  "docPreview": <React.Fragment>
+    <div
+      className="pdf-img-box"
+    >
+      <CapImage
+        alt="upload-document-src"
+        className="pdf-preview-img"
+      />
+    </div>
+    <div
+      className="pdf-label"
+    >
+      <CapImage
+        src="test-file-stub"
+      />
+      <div
+        className="pdf-info"
+      >
+        <div
+          className="pdf-name-div"
+        >
+          <CapLabel
+            className="pdf-name"
+            type="label9"
+          />
+          <CapLabel
+            type="label9"
+          >
+            .pdf
+          </CapLabel>
+        </div>
+        <CapLabel
+          className="pdf-info-sec"
+          type="label1"
+        >
+          undefined page · 0 bytes · PDF
+        </CapLabel>
+      </div>
+    </div>
+  </React.Fragment>,
+  "templateMsg": <CapLabel
+    type="label9"
+  >
+    Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
+Click {{unsubscribe}} to unsubscribe
+  </CapLabel>,
+}
+`;
+
+exports[`Test utils test getWhatsappContent 5`] = `
 Object {
   "charCount": -1,
   "templateMsg": <CapLabel

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

@@ -4,23 +4,31 @@ import {
   getWhatsappCategory,
   getWhatsappCta,
   bytesConversion,
+  getWhatsappDocPreview,
 } from '../utils';
 import mockdata from '../../mockdata';
 
 const {
   whatsappPreviewTemplateData,
   whatsappPreviewTemplateData2,
+  whatsappPreviewTemplateDataVid,
+  whatsappPreviewTemplateDataDoc,
   getWhatsappStatusOutput1,
   getWhatsappCategoryOutput1,
   getWhatsappCategoryOutput2,
+  getWhatsappDocPreviewOutput,
+  getWhatsappDocPreviewOutput1,
 } = mockdata;
 
 describe('Test utils', () => {
   it('test getWhatsappContent', () => {
     expect(getWhatsappContent(whatsappPreviewTemplateData)).toMatchSnapshot();
     expect(getWhatsappContent(whatsappPreviewTemplateData2)).toMatchSnapshot();
+    expect(getWhatsappContent(whatsappPreviewTemplateDataVid)).toMatchSnapshot();
+    expect(getWhatsappContent(whatsappPreviewTemplateDataDoc)).toMatchSnapshot();
     expect(getWhatsappContent({})).toMatchSnapshot();
     expect(bytesConversion(1024)).toEqual('1.0 KB');
+    expect(bytesConversion('abcd')).toEqual('0 bytes');
   });
 
   it('test getWhatsappContent for preview', () => {
@@ -47,4 +55,22 @@ describe('Test utils', () => {
       getWhatsappCategoryOutput2,
     );
   });
+
+  it('test getWhatsappDocPreview', () => {
+    const whatsappDocParams = {
+      whatsappDocName: "java_tutorial__QtdfGkr.pdf",
+      whatsappDocSize: 1089150,
+      whatsappDocPages: 2,
+      whatsappDocImg: "https://play-lh.googleusercontent.com/BkRfMfIRPR9hUnmIYGDgHHKjow-g18-ouP6B2ko__VnyUHSi1spcc78UtZ4sVUtBH4g",
+    };
+    expect(getWhatsappDocPreview(whatsappDocParams)).toEqual(
+      getWhatsappDocPreviewOutput,
+    );
+    expect(getWhatsappDocPreview({
+      ...whatsappDocParams,
+      whatsappDocPages: 1,
+    })).toEqual(
+      getWhatsappDocPreviewOutput1,
+    );
+  });
 });

package/v2Containers/Whatsapp/utils.js

@@ -15,11 +15,17 @@ import {
   WHATSAPP_MEDIA_TYPES,
   HOST_KARIX,
   SIZE_UNITS,
+  PAGES,
+  PAGE,
+  PDF,
 } from '../Whatsapp/constants';
 import './styles.scss';
 import pdfIcon from "../../assets/pdfIcon.svg";
 
 export function bytesConversion(x) {
+  // the function accepts bytes and convert in appropriate size following the,
+  // l variable, this variable holds the size_unit index and displays the
+  // respective size, eg : 5120 bytes gives 5 KB and 5242880 gives 5 MB
   let l;
   l = 0;
   let n;
@@ -45,8 +51,8 @@ export const getWhatsappDocPreview = (whatsappDocParams) =>
           </div>
           <CapLabel className="pdf-info-sec">
             {
-                `${whatsappDocParams?.whatsappDocPages} ${whatsappDocParams?.whatsappDocPages > 1 ? "pages" : "page"} · ${bytesConversion(whatsappDocParams?.whatsappDocSize)} · PDF`
-              }
+                `${whatsappDocParams?.whatsappDocPages} ${whatsappDocParams?.whatsappDocPages > 1 ? PAGES : PAGE} · ${bytesConversion(whatsappDocParams?.whatsappDocSize)} · ${PDF}`
+            }
           </CapLabel>
         </div>
       </div>
@@ -84,21 +90,28 @@ export const getWhatsappContent = (template, isPreview) => {
       '{{unsubscribe}}',
     );
   }
+  let mediaParams = {};
+  switch (mediaType) {
+    case WHATSAPP_MEDIA_TYPES.IMAGE:
+      mediaParams = {whatsappImageSrc: imageUrl};
+      break;
+    case WHATSAPP_MEDIA_TYPES.VIDEO:
+      mediaParams = {whatsappVideoSrc: videoPreviewImg};
+      break;
+    case WHATSAPP_MEDIA_TYPES.DOCUMENT:
+      mediaParams = {docPreview: getWhatsappDocPreview(whatsappDocParams)};
+      break;
+    default:
+      break;
+  }
+
   return {
     templateMsg: <CapLabel type={isPreview ? 'label5' : 'label9'}>{text}</CapLabel>,
     charCount: text?.length - 1,
     ...(buttonType === CTA && {
       ctaData,
     }),
-    ...(mediaType === WHATSAPP_MEDIA_TYPES.IMAGE && {
-      whatsappImageSrc: imageUrl,
-    }),
-    ...(mediaType === WHATSAPP_MEDIA_TYPES.VIDEO && {
-      whatsappImageSrc: videoPreviewImg,
-    }),
-    ...(mediaType === WHATSAPP_MEDIA_TYPES.DOCUMENT && {
-      docPreview: getWhatsappDocPreview(whatsappDocParams),
-    }),
+    ...mediaParams,
   };
 };
 

package/v2Containers/mockdata.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { CapImage, CapLabel } from '@capillarytech/cap-ui-library';
+import pdfIcon from '../assets/pdfIcon.svg';
 
 export default {
   whatsappTemplates: {
@@ -957,6 +959,50 @@ export default {
     type: 'WHATSAPP',
     channel: 'WHATSAPP',
   },
+  getWhatsappDocPreviewOutput:
+    (
+      <>
+        <div className="pdf-img-box">
+          <CapImage src={"https://play-lh.googleusercontent.com/BkRfMfIRPR9hUnmIYGDgHHKjow-g18-ouP6B2ko__VnyUHSi1spcc78UtZ4sVUtBH4g"} alt="upload-document-src" className="pdf-preview-img" />
+        </div>
+        <div className="pdf-label">
+          <CapImage src={pdfIcon} />
+          <div className="pdf-info">
+            <div className="pdf-name-div">
+              <CapLabel type="label9" className="pdf-name">java_tutorial</CapLabel>
+              <CapLabel type="label9">{".pdf"}</CapLabel>
+            </div>
+            <CapLabel className="pdf-info-sec">
+              {
+                  `2 pages · 1.0 MB · PDF`
+                }
+            </CapLabel>
+          </div>
+        </div>
+      </>
+    ),
+  getWhatsappDocPreviewOutput1:
+    (
+      <>
+        <div className="pdf-img-box">
+          <CapImage src={"https://play-lh.googleusercontent.com/BkRfMfIRPR9hUnmIYGDgHHKjow-g18-ouP6B2ko__VnyUHSi1spcc78UtZ4sVUtBH4g"} alt="upload-document-src" className="pdf-preview-img" />
+        </div>
+        <div className="pdf-label">
+          <CapImage src={pdfIcon} />
+          <div className="pdf-info">
+            <div className="pdf-name-div">
+              <CapLabel type="label9" className="pdf-name">java_tutorial</CapLabel>
+              <CapLabel type="label9">{".pdf"}</CapLabel>
+            </div>
+            <CapLabel className="pdf-info-sec">
+              {
+                  `1 page · 1.0 MB · PDF`
+                }
+            </CapLabel>
+          </div>
+        </div>
+      </>
+    ),
   rcsEditTemplateData: {
     mode: 'edit',
     _id: '620e213d39bd394c58aeaaca',
@@ -1075,6 +1121,124 @@ export default {
     updatedAt: '2022-07-17T11:58:45.592Z',
     totalCount: 8,
   },
+  whatsappPreviewTemplateDataVid: {
+    mode: 'preview',
+    _id: '62d3f971b497b671d3bbf8f7',
+    name: 'creatives_whatsapp6',
+    type: 'WHATSAPP',
+    versions: {
+      $init: true,
+      history: [],
+      base: {
+        content: {
+          whatsapp: {
+            status: 'approved',
+            templateId: '720951875646523',
+            hostName: 'karixwhatsappbulk',
+            accessToken: 'Bearer gDwEuRIm9icV6phixociSw==',
+            accountId: '107499611940863',
+            templateEditor: false,
+            karixFileHandle:
+              '4::aW1hZ2UvanBlZw==:ARZpmm0pMfsBvKepIjR-HG2HIw_78ynisr-riY1s4xpi2noK9QsvtvVfnZb5hUxks5HM5JHG0gCn_ZtPuJzya1SH3eq4Upn3M0eqsDLr4CzdPw:e:1658404714:259409122277300:100066839164237:ARbbCRjU-2ksqoUOp4Y',
+            videoUrl:
+              'https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.MP4',
+            videoPreviewImg: 'https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213/1040',
+            mediaType: 'VIDEO',
+            buttons: [
+              {
+                phone_number: '+919738752617',
+                text: 'Call',
+                type: 'PHONE_NUMBER',
+                index: 0,
+              },
+              {
+                url: 'https://docs.google.com/{{1}}',
+                text: 'Visit',
+                type: 'DYNAMIC_URL',
+                index: 1,
+              },
+            ],
+            buttonType: 'CTA',
+            languages: [
+              {
+                content:
+                  'Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}\nClick {{3}} to unsubscribe',
+                language: 'en',
+              },
+            ],
+            category: 'MARKETING',
+            rejection_reason: '',
+          },
+        },
+      },
+    },
+    isActive: true,
+    orgId: 50074,
+    createdBy: '15000449',
+    updatedBy: '15000449',
+    createdAt: '2022-07-17T11:58:45.592Z',
+    updatedAt: '2022-07-17T11:58:45.592Z',
+    totalCount: 8,
+  },
+  whatsappPreviewTemplateDataDoc: {
+    mode: 'preview',
+    _id: '62d3f971b497b671d3bbf8f7',
+    name: 'creatives_whatsapp6',
+    type: 'WHATSAPP',
+    versions: {
+      $init: true,
+      history: [],
+      base: {
+        content: {
+          whatsapp: {
+            status: 'approved',
+            templateId: '720951875646523',
+            hostName: 'karixwhatsappbulk',
+            accessToken: 'Bearer gDwEuRIm9icV6phixociSw==',
+            accountId: '107499611940863',
+            templateEditor: false,
+            karixFileHandle:
+              '4::aW1hZ2UvanBlZw==:ARZpmm0pMfsBvKepIjR-HG2HIw_78ynisr-riY1s4xpi2noK9QsvtvVfnZb5hUxks5HM5JHG0gCn_ZtPuJzya1SH3eq4Upn3M0eqsDLr4CzdPw:e:1658404714:259409122277300:100066839164237:ARbbCRjU-2ksqoUOp4Y',
+            documentUrl:
+              'https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.pdf',
+            whatsappDocParams: {},
+            mediaType: 'DOCUMENT',
+            buttons: [
+              {
+                phone_number: '+919738752617',
+                text: 'Call',
+                type: 'PHONE_NUMBER',
+                index: 0,
+              },
+              {
+                url: 'https://docs.google.com/{{1}}',
+                text: 'Visit',
+                type: 'DYNAMIC_URL',
+                index: 1,
+              },
+            ],
+            buttonType: 'CTA',
+            languages: [
+              {
+                content:
+                  'Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}\nClick {{3}} to unsubscribe',
+                language: 'en',
+              },
+            ],
+            category: 'MARKETING',
+            rejection_reason: '',
+          },
+        },
+      },
+    },
+    isActive: true,
+    orgId: 50074,
+    createdBy: '15000449',
+    updatedBy: '15000449',
+    createdAt: '2022-07-17T11:58:45.592Z',
+    updatedAt: '2022-07-17T11:58:45.592Z',
+    totalCount: 8,
+  },
   whatsappPreviewTemplateData2: {
     mode: 'preview',
     _id: '62d3edc8b497b63ff5bbf8ea',