@capillarytech/creatives-library 7.17.81 → 7.17.82-alpha.0

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

@@ -2,8 +2,7 @@
 
 exports[`Test utils test getWhatsappContent 1`] = `
 Object {
-  "charCount": 151,
-  "ctaData": Array [
+  "buttonsData": Array [
     Object {
       "index": 0,
       "phone_number": "+919738752617",
@@ -17,6 +16,9 @@ Object {
       "url": "https://docs.google.com/{{1}}",
     },
   ],
+  "charCount": 151,
+  "footerMsg": "",
+  "headerMsg": "",
   "templateMsg": <CapLabel
     type="label9"
   >
@@ -30,6 +32,8 @@ Click {{unsubscribe}} to unsubscribe
 exports[`Test utils test getWhatsappContent 2`] = `
 Object {
   "charCount": 36,
+  "footerMsg": "",
+  "headerMsg": "",
   "templateMsg": <CapLabel
     type="label9"
   >
@@ -40,8 +44,7 @@ Object {
 
 exports[`Test utils test getWhatsappContent 3`] = `
 Object {
-  "charCount": 151,
-  "ctaData": Array [
+  "buttonsData": Array [
     Object {
       "index": 0,
       "phone_number": "+919738752617",
@@ -55,6 +58,9 @@ Object {
       "url": "https://docs.google.com/{{1}}",
     },
   ],
+  "charCount": 151,
+  "footerMsg": "",
+  "headerMsg": "",
   "templateMsg": <CapLabel
     type="label9"
   >
@@ -67,8 +73,7 @@ Click {{unsubscribe}} to unsubscribe
 
 exports[`Test utils test getWhatsappContent 4`] = `
 Object {
-  "charCount": 151,
-  "ctaData": Array [
+  "buttonsData": Array [
     Object {
       "index": 0,
       "phone_number": "+919738752617",
@@ -82,6 +87,7 @@ Object {
       "url": "https://docs.google.com/{{1}}",
     },
   ],
+  "charCount": 151,
   "docPreview": <React.Fragment>
     <div
       className="pdf-img-box"
@@ -132,6 +138,8 @@ Object {
       </div>
     </div>
   </React.Fragment>,
+  "footerMsg": "",
+  "headerMsg": "",
   "templateMsg": <CapLabel
     type="label9"
   >
@@ -144,6 +152,8 @@ Click {{unsubscribe}} to unsubscribe
 exports[`Test utils test getWhatsappContent 5`] = `
 Object {
   "charCount": -1,
+  "footerMsg": "",
+  "headerMsg": "",
   "templateMsg": <CapLabel
     type="label9"
   >
@@ -154,8 +164,7 @@ Object {
 
 exports[`Test utils test getWhatsappContent for preview 1`] = `
 Object {
-  "charCount": 151,
-  "ctaData": Array [
+  "buttonsData": Array [
     Object {
       "index": 0,
       "phone_number": "+919738752617",
@@ -169,6 +178,9 @@ Object {
       "url": "https://docs.google.com/{{1}}",
     },
   ],
+  "charCount": 151,
+  "footerMsg": "",
+  "headerMsg": "",
   "templateMsg": <CapLabel
     type="label5"
   >

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

@@ -5,6 +5,7 @@ import {
   getWhatsappCta,
   bytesConversion,
   getWhatsappDocPreview,
+  getWhatsappQuickReply
 } from '../utils';
 import mockdata from '../../mockdata';
 
@@ -18,6 +19,9 @@ const {
   getWhatsappCategoryOutput2,
   getWhatsappDocPreviewOutput,
   getWhatsappDocPreviewOutput1,
+  whatsappPreviewTemplateData3,
+  whatsappPreviewTemplateData3Result,
+  whatsappPreviewTemplateData3QuickReplyResult
 } = mockdata;
 
 describe('Test utils', () => {
@@ -27,10 +31,17 @@ describe('Test utils', () => {
     expect(getWhatsappContent(whatsappPreviewTemplateDataVid)).toMatchSnapshot();
     expect(getWhatsappContent(whatsappPreviewTemplateDataDoc)).toMatchSnapshot();
     expect(getWhatsappContent({})).toMatchSnapshot();
+    expect(getWhatsappContent(whatsappPreviewTemplateData3)).toEqual(whatsappPreviewTemplateData3Result);
     expect(bytesConversion(1024)).toEqual('1.0 KB');
     expect(bytesConversion('abcd')).toEqual('0 bytes');
   });
 
+  it("test getWhatsappQuickReply", () => {
+    expect(getWhatsappQuickReply(whatsappPreviewTemplateData3)).toEqual(
+      whatsappPreviewTemplateData3QuickReplyResult
+    );
+  });
+
   it('test getWhatsappContent for preview', () => {
     expect(
       getWhatsappContent(whatsappPreviewTemplateData, true),

package/v2Containers/Whatsapp/utils.js

@@ -3,6 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapImage from '@capillarytech/cap-ui-library/CapImage';
+import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
 import { get } from 'lodash';
 import { WHATSAPP } from '../CreativesContainer/constants';
 import {
@@ -17,6 +18,7 @@ import {
   WHATSAPP_MEDIA_TYPES,
   HOST_TWILIO,
   SIZE_UNITS,
+  QUICK_REPLY
 } from '../Whatsapp/constants';
 import './styles.scss';
 import pdfIcon from "../../assets/pdfIcon.svg";
@@ -65,11 +67,15 @@ export const getWhatsappContent = (template, isPreview) => {
           [WHATSAPP.toLowerCase()]: {
             languages = [{}],
             buttonType = NONE,
-            buttons: ctaData = [],
+            buttons: buttonsData = [],
             mediaType = WHATSAPP_MEDIA_TYPES.TEXT,
             imageUrl = '',
             videoPreviewImg = '',
             whatsappDocParams = {},
+            whatsappMedia: {
+              header = '',
+              footer = '',
+            } = {},
           } = {},
         } = {},
       } = {},
@@ -104,10 +110,15 @@ export const getWhatsappContent = (template, isPreview) => {
   }
 
   return {
+    headerMsg: header ? <CapLabel className="whatsapp-template-header-preview">{header}</CapLabel> : '',
+    footerMsg: header ? <CapLabel className="whatsapp-template-footer-preview">{footer}</CapLabel> : '',
     templateMsg: <CapLabel type={isPreview ? 'label5' : 'label9'}>{text}</CapLabel>,
     charCount: text?.length - 1,
     ...(buttonType === CTA && {
-      ctaData,
+      buttonsData,
+    }),
+    ...(buttonType === QUICK_REPLY && {
+      buttonsData,
     }),
     ...mediaParams,
   };
@@ -143,6 +154,37 @@ export const getWhatsappCta = (template) => {
   return renderArray;
 };
 
+export const getWhatsappQuickReply= (template) => {
+  const { buttonType = NONE, buttons = [] } = get(
+    template,
+    `versions.base.content.whatsapp`,
+    {},
+  );
+  const renderArray = [];
+  if (buttonType === QUICK_REPLY && buttons?.length) {
+    renderArray.push(<CapDivider className="whatsapp-list-view-divider" />);
+    buttons.forEach((quickReply, index) => {
+      const { text } = quickReply || {};
+      if (text) {
+        renderArray.push(
+          <CapLabel type="label21" className="whatsapp-list-cta-preview">
+            <CapIcon
+              type='small-link'
+              size="xs"
+              svgProps={{ style: { marginRight: '4px' } }}
+            />
+            {text}
+          </CapLabel>
+        )
+      }
+      if (index < buttons.length -1) {
+        renderArray.push(<CapDivider className="whatsapp-list-view-divider" />);
+      }
+    })
+  }
+  return renderArray;
+}
+
 export const getWhatsappCategory = (category, hostName) => (
     hostName === HOST_TWILIO ? TWILIO_CATEGORY_OPTIONS : [...KARIX_GUPSHUP_CATEGORY_OPTIONS, ...KARIX_GUPSHUP_OLDER_CATEGORY_OPTIONS]
   ).find((obj) => obj.value === category);

package/v2Containers/mockdata.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
-import { CapImage, CapLabel } from "@capillarytech/cap-ui-library";
+import { CapImage, CapLabel, CapDivider, CapIcon } from "@capillarytech/cap-ui-library";
 import pdfIcon from "../assets/pdfIcon.svg";
 import messages from "./Whatsapp/messages";
 
@@ -1417,6 +1417,117 @@ export default {
     updatedAt: "2022-07-17T11:08:56.326Z",
     totalCount: 7,
   },
+  whatsappPreviewTemplateData3: {
+    mode: "preview",
+    _id: "62d3edc8b497b63ff5bbf8ea",
+    name: "test_twilio_159425",
+    type: "WHATSAPP",
+    versions: {
+      $init: true,
+      history: [],
+      base: {
+        content: {
+          whatsapp: {
+            status: "approved",
+            templateId: "HTee0274fb8dfdd45427bb678f875b0d54",
+            hostName: "twiliowhatsapptrans",
+            accessToken: "4676323eb5d1f975b0987070c03a8efc",
+            accountId: "AC41030cebba9e2f1ce37c78235da0ee18",
+            templateEditor: false,
+            mediaType: "TEXT",
+            languages: [
+              {
+                content: "Hi, your payment is successful.",
+                language: "en",
+              },
+            ],
+            category: "ALERT_UPDATE",
+            rejection_reason: null,
+            whatsappMedia: {
+              header: "Hello welcome",
+              footer: "Thanks",
+            },
+            buttonType: "QUICK_REPLY",
+            buttons: [
+              {
+                index: 0,
+                type: "QUICK_REPLY",
+                text: "Interested",
+              },
+              {
+                index: 0,
+                type: "QUICK_REPLY",
+                text: "Not Interested",
+              },
+            ],
+          },
+        },
+      },
+    },
+    isActive: true,
+    orgId: 50371,
+    createdBy: "15000449",
+    updatedBy: "15000449",
+    createdAt: "2022-07-17T11:08:56.326Z",
+    updatedAt: "2022-07-17T11:08:56.326Z",
+    totalCount: 7,
+  },
+  whatsappPreviewTemplateData3Result: {
+    buttonsData: [
+      {
+        index: 0,
+        type: "QUICK_REPLY",
+        text: "Interested",
+      },
+      {
+        index: 0,
+        type: "QUICK_REPLY",
+        text: "Not Interested",
+      },
+    ],
+    charCount: 30,
+    footerMsg: (
+      <CapLabel className="whatsapp-template-footer-preview" type="label1">
+        Thanks
+      </CapLabel>
+    ),
+    headerMsg: (
+      <CapLabel className="whatsapp-template-header-preview" type="label1">
+        Hello welcome
+      </CapLabel>
+    ),
+    templateMsg: (
+      <CapLabel type="label9">Hi, your payment is successful.</CapLabel>
+    ),
+  },
+  whatsappPreviewTemplateData3QuickReplyResult: [
+    <CapDivider className="whatsapp-list-view-divider" />,
+    <CapLabel className="whatsapp-list-cta-preview" type="label21">
+      <CapIcon
+        size="xs"
+        svgProps={{
+          style: {
+            marginRight: "4px",
+          },
+        }}
+        type="small-link"
+      />
+      Interested
+    </CapLabel>,
+    <CapDivider className="whatsapp-list-view-divider" />,
+    <CapLabel className="whatsapp-list-cta-preview" type="label21">
+      <CapIcon
+        size="xs"
+        svgProps={{
+          style: {
+            marginRight: "4px",
+          },
+        }}
+        type="small-link"
+      />
+      Not Interested
+    </CapLabel>,
+  ],
   rcsPreviewTemplateData: {
     mode: "preview",
     _id: "620e213d39bd394c58aeaaca",
@@ -1758,7 +1869,7 @@ export default {
   },
   zaloEditTemplateData: {
     _id: 42342,
-    name: 'Test sample',
-    type: 'ZALO'
-  }
+    name: "Test sample",
+    type: "ZALO",
+  },
 };