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

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

@@ -17,6 +17,8 @@ Object {
       "url": "https://docs.google.com/{{1}}",
     },
   ],
+  "templateFooterPreview": "",
+  "templateHeaderPreview": "",
   "templateMsg": <CapLabel
     type="label9"
   >
@@ -30,6 +32,8 @@ Click {{unsubscribe}} to unsubscribe
 exports[`Test utils test getWhatsappContent 2`] = `
 Object {
   "charCount": 36,
+  "templateFooterPreview": "",
+  "templateHeaderPreview": "",
   "templateMsg": <CapLabel
     type="label9"
   >
@@ -55,6 +59,8 @@ Object {
       "url": "https://docs.google.com/{{1}}",
     },
   ],
+  "templateFooterPreview": "",
+  "templateHeaderPreview": "",
   "templateMsg": <CapLabel
     type="label9"
   >
@@ -132,6 +138,8 @@ Object {
       </div>
     </div>
   </React.Fragment>,
+  "templateFooterPreview": "",
+  "templateHeaderPreview": "",
   "templateMsg": <CapLabel
     type="label9"
   >
@@ -144,6 +152,8 @@ Click {{unsubscribe}} to unsubscribe
 exports[`Test utils test getWhatsappContent 5`] = `
 Object {
   "charCount": -1,
+  "templateFooterPreview": "",
+  "templateHeaderPreview": "",
   "templateMsg": <CapLabel
     type="label9"
   >
@@ -169,6 +179,8 @@ Object {
       "url": "https://docs.google.com/{{1}}",
     },
   ],
+  "templateFooterPreview": "",
+  "templateHeaderPreview": "",
   "templateMsg": <CapLabel
     type="label5"
   >

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

@@ -38,4 +38,25 @@ describe('Test whatsapp actions', () => {
       actions.createWhatsappTemplate(payload, undefined, undefined),
     ).toStrictEqual(expected);
   });
+
+  it("test getMetaTags", () => {
+    const payload = {
+      previewUrl: 'https://capillarytech.com',
+      callBack: undefined,
+    };
+    const expected = {
+      type: types.URL_META_TAGS_REQUEST,
+      previewUrl: 'https://capillarytech.com',
+      callBack: undefined,
+    };
+    expect(actions.getMetaTags(payload)).toStrictEqual(expected);
+  });
+
+  it("test resetMetaTags", () => {
+    const expected = {
+      type: types.URL_META_TAGS_RESET,
+    };
+    expect(actions.resetMetaTags()).toStrictEqual(expected);
+  });
 });
+

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

@@ -23,6 +23,8 @@ describe('Creatives Whatsapp test1/>', () => {
   const handleClose = jest.fn();
   const onCreateComplete = jest.fn();
   const formatMessage = jest.fn();
+  const getMetaTags = jest.fn();
+  const resetMetaTags = jest.fn();
   const location = mockData.location;
   const params = {
     id: mockData.editData1.templateDetails._id,
@@ -42,6 +44,8 @@ describe('Creatives Whatsapp test1/>', () => {
             clearCreateResponse,
             getTemplateDetails,
             resetEditTemplate,
+            getMetaTags,
+            resetMetaTags,
           }}
           globalActions={{ fetchSchemaForEntity }}
           onCreateComplete={onCreateComplete}
@@ -268,6 +272,8 @@ describe('Creatives Whatsapp test2/>', () => {
   const handleClose = jest.fn();
   const onCreateComplete = jest.fn();
   const formatMessage = jest.fn();
+  const getMetaTags = jest.fn();
+  const resetMetaTags = jest.fn();
   const location = mockData.location;
   const params = {
     id: mockData.editData1.templateDetails._id,
@@ -284,6 +290,8 @@ describe('Creatives Whatsapp test2/>', () => {
             clearCreateResponse,
             getTemplateDetails,
             resetEditTemplate,
+            getMetaTags,
+            resetMetaTags,
           }}
           globalActions={{ fetchSchemaForEntity }}
           onCreateComplete={onCreateComplete}

package/v2Containers/Whatsapp/tests/mockData.js

@@ -245,4 +245,10 @@ export const mockData = {
     },
     search: '',
   },
+  metaTagsMock: {
+    image: 'https://capillarytech.com/assest/capillary.png',
+    title: 'Capillary',
+    description: 'sample',
+    url: "https://capillarytech.com",
+  },
 };

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

@@ -0,0 +1,67 @@
+import { fromJS } from "immutable";
+import whatsappReducer from "../reducer";
+import {
+  URL_META_TAGS_REQUEST,
+  URL_META_TAGS_SUCCESS,
+  URL_META_TAGS_FAILURE,
+  URL_META_TAGS_RESET,
+} from "../constants";
+import { mockData } from "./mockData";
+
+describe("whatsapp reducer", () => {
+  let state;
+  const action = {};
+  beforeEach(() => {
+    state = fromJS({
+      getMetaTagsRequest: false,
+      metaTagsDetails: {},
+      getMetaTagsError: '',
+    });
+  });
+
+  it("Reducer : URL_META_TAGS_REQUEST", () => {
+    action.type = URL_META_TAGS_REQUEST;
+    state = state
+      .set("getMetaTagsRequest", true)
+      .set("metaTagsDetails", {});
+    const expectedResult = state;
+    expect(whatsappReducer(state, action)).toEqual(
+      expectedResult
+    );
+  });
+
+  it("Reducer : URL_META_TAGS_SUCCESS", () => {
+    action.type = URL_META_TAGS_SUCCESS;
+    action.data = mockData.metaTagsMock;
+    state = state
+      .set("getMetaTagsRequest", false)
+      .set("metaTagsDetails", mockData.metaTagsMock);
+    const expectedResult = state;
+    expect(whatsappReducer(state, action)).toEqual(
+      expectedResult
+    );
+  });
+
+  it("Reducer : URL_META_TAGS_FAILURE", () => {
+    action.type = URL_META_TAGS_FAILURE;
+    action.error = 'error';
+    state = state
+      .set("getMetaTagsRequest", false)
+      .set("metaTagsDetails", {})
+      .set("getMetaTagsError", 'error');
+    const expectedResult = state;
+    expect(whatsappReducer(state, action)).toEqual(
+      expectedResult
+    );
+  });
+
+  it("Reducer : URL_META_TAGS_RESET", () => {
+    action.type = URL_META_TAGS_RESET;
+    state = state
+      .set("metaTagsDetails", {});
+    const expectedResult = state;
+    expect(whatsappReducer(state, action)).toEqual(
+      expectedResult
+    );
+  });
+});

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

@@ -0,0 +1,90 @@
+import { expectSaga, testSaga } from "redux-saga-test-plan";
+import * as matchers from "redux-saga-test-plan/matchers";
+import { takeLatest } from "redux-saga/effects";
+import { getMetaTagsDetails, watchGetMetaTagsDetails } from "../sagas";
+import {
+  URL_META_TAGS_REQUEST,
+  URL_META_TAGS_SUCCESS,
+  URL_META_TAGS_FAILURE,
+} from "../constants";
+import * as Api from "../../../services/api";
+
+describe("Whatsapp saga", () => {
+  const error = new Error("error");
+  const callBack = jest.fn();
+  describe("whatsapp test saga", () => {
+    it("handle success response from getMetaTagsDetails", () => {
+      expectSaga(getMetaTagsDetails, {
+        previewUrl: "https://capillarytech.com",
+        callBack,
+      }).provide([
+        [
+          matchers.call.fn(Api.getMetaTags),
+          {
+            success: true,
+            result: [],
+          },
+        ],
+      ])
+      .put({
+        type: URL_META_TAGS_SUCCESS,
+        result: {},
+      })
+      .run();
+    });
+
+    it("handle success false response from getMetaTagsDetails", () => {
+      expectSaga(getMetaTagsDetails, {
+        previewUrl: "https://capillarytech.com",
+        callBack,
+      }).provide([
+        [
+          matchers.call.fn(Api.getMetaTags),
+          {
+            success: false,
+            result: [],
+            message: 'error',
+          },
+        ],
+      ])
+      .put({
+        type: URL_META_TAGS_FAILURE,
+        error: 'error',
+      })
+      .run();
+    });
+
+    it("handle success false response from getMetaTagsDetails when callback not present", () => {
+      expectSaga(getMetaTagsDetails, {
+        previewUrl: "https://capillarytech.com",
+      }).provide([
+        [
+          matchers.call.fn(Api.getMetaTags),
+          {
+            success: false,
+            result: [],
+            message: 'error',
+          },
+        ],
+      ])
+      .put({
+        type: URL_META_TAGS_FAILURE,
+        error: 'error',
+      })
+      .run();
+    });
+
+    it("handles error thrown", () => {
+      testSaga(getMetaTagsDetails, { callBack }).next().throw(error).next().isDone();
+    });
+  });
+
+  describe("watchGetMetaTagsDetails saga", () => {
+    const generator = watchGetMetaTagsDetails();
+    it("should call watchers functions", async () => {
+      expect(generator.next().value).toEqual(
+        takeLatest(URL_META_TAGS_REQUEST, getMetaTagsDetails)
+      );
+    });
+  });
+});

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 {
+    templateHeaderPreview: header ? <CapLabel className="whatsapp-template-list-header-preview">{header}</CapLabel> : '',
+    templateFooterPreview: footer ? <CapLabel className="whatsapp-template-list-footer-preview">{footer}</CapLabel> : '',
     templateMsg: <CapLabel type={isPreview ? 'label5' : 'label9'}>{text}</CapLabel>,
-    charCount: text?.length - 1,
+    charCount: text?.length - 1 + header?.length + footer?.length,
     ...(buttonType === CTA && {
-      ctaData,
+      ctaData: buttonsData
+    }),
+    ...(buttonType === QUICK_REPLY && {
+      quickReplyData: buttonsData
     }),
     ...mediaParams,
   };
@@ -143,6 +154,37 @@ export const getWhatsappCta = (template) => {
   return renderArray;
 };
 
+// It will render all the quick reply button in mobile preview and template list
+export const getWhatsappQuickReply= (template, templatePreview) => {
+  const { buttonType = NONE, buttons = [] } = templatePreview ? template : get(
+    template,
+    `versions.base.content.whatsapp`,
+    {},
+  );
+  const renderArray = [];
+  if (buttonType === QUICK_REPLY && buttons?.length) {
+    renderArray.push(<CapDivider className={templatePreview ? "whatsapp-divider" : "whatsapp-list-view-divider"} />);
+    buttons?.forEach((quickReply, index) => {
+      const { text } = quickReply || {};
+      if (text) {
+        renderArray.push(
+          <CapLabel type="label21" className={templatePreview ? "whatsapp-cta-preview" : "whatsapp-list-quick-reply-preview"}>
+            <CapIcon
+              type='small-link'
+              size="xs"
+            />
+            {text}
+          </CapLabel>
+        )
+      }
+      if (index < buttons?.length -1) {
+        renderArray.push(<CapDivider className={templatePreview ? "whatsapp-divider" : "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,107 @@ 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: {
+    quickReplyData: [
+      {
+        index: 0,
+        type: "QUICK_REPLY",
+        text: "Interested",
+      },
+      {
+        index: 0,
+        type: "QUICK_REPLY",
+        text: "Not Interested",
+      },
+    ],
+    charCount: 49,
+    templateFooterPreview: (
+      <CapLabel className="whatsapp-template-list-footer-preview" type="label1">
+        Thanks
+      </CapLabel>
+    ),
+    templateHeaderPreview: (
+      <CapLabel className="whatsapp-template-list-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-quick-reply-preview" type="label21">
+      <CapIcon
+        size="xs"
+        type="small-link"
+      />
+      Interested
+    </CapLabel>,
+    <CapDivider className="whatsapp-list-view-divider" />,
+    <CapLabel className="whatsapp-list-quick-reply-preview" type="label21">
+      <CapIcon
+        size="xs"
+        type="small-link"
+      />
+      Not Interested
+    </CapLabel>,
+  ],
   rcsPreviewTemplateData: {
     mode: "preview",
     _id: "620e213d39bd394c58aeaaca",
@@ -1758,7 +1859,7 @@ export default {
   },
   zaloEditTemplateData: {
     _id: 42342,
-    name: 'Test sample',
-    type: 'ZALO'
-  }
+    name: "Test sample",
+    type: "ZALO",
+  },
 };