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

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

@@ -2,7 +2,8 @@
 
 exports[`Test utils test getWhatsappContent 1`] = `
 Object {
-  "buttonsData": Array [
+  "charCount": 151,
+  "ctaData": Array [
     Object {
       "index": 0,
       "phone_number": "+919738752617",
@@ -16,9 +17,8 @@ Object {
       "url": "https://docs.google.com/{{1}}",
     },
   ],
-  "charCount": 151,
-  "footerMsg": "",
-  "headerMsg": "",
+  "templateFooterPreview": "",
+  "templateHeaderPreview": "",
   "templateMsg": <CapLabel
     type="label9"
   >
@@ -32,8 +32,8 @@ Click {{unsubscribe}} to unsubscribe
 exports[`Test utils test getWhatsappContent 2`] = `
 Object {
   "charCount": 36,
-  "footerMsg": "",
-  "headerMsg": "",
+  "templateFooterPreview": "",
+  "templateHeaderPreview": "",
   "templateMsg": <CapLabel
     type="label9"
   >
@@ -44,7 +44,8 @@ Object {
 
 exports[`Test utils test getWhatsappContent 3`] = `
 Object {
-  "buttonsData": Array [
+  "charCount": 151,
+  "ctaData": Array [
     Object {
       "index": 0,
       "phone_number": "+919738752617",
@@ -58,9 +59,8 @@ Object {
       "url": "https://docs.google.com/{{1}}",
     },
   ],
-  "charCount": 151,
-  "footerMsg": "",
-  "headerMsg": "",
+  "templateFooterPreview": "",
+  "templateHeaderPreview": "",
   "templateMsg": <CapLabel
     type="label9"
   >
@@ -73,7 +73,8 @@ Click {{unsubscribe}} to unsubscribe
 
 exports[`Test utils test getWhatsappContent 4`] = `
 Object {
-  "buttonsData": Array [
+  "charCount": 151,
+  "ctaData": Array [
     Object {
       "index": 0,
       "phone_number": "+919738752617",
@@ -87,7 +88,6 @@ Object {
       "url": "https://docs.google.com/{{1}}",
     },
   ],
-  "charCount": 151,
   "docPreview": <React.Fragment>
     <div
       className="pdf-img-box"
@@ -138,8 +138,8 @@ Object {
       </div>
     </div>
   </React.Fragment>,
-  "footerMsg": "",
-  "headerMsg": "",
+  "templateFooterPreview": "",
+  "templateHeaderPreview": "",
   "templateMsg": <CapLabel
     type="label9"
   >
@@ -152,8 +152,8 @@ Click {{unsubscribe}} to unsubscribe
 exports[`Test utils test getWhatsappContent 5`] = `
 Object {
   "charCount": -1,
-  "footerMsg": "",
-  "headerMsg": "",
+  "templateFooterPreview": "",
+  "templateHeaderPreview": "",
   "templateMsg": <CapLabel
     type="label9"
   >
@@ -164,7 +164,8 @@ Object {
 
 exports[`Test utils test getWhatsappContent for preview 1`] = `
 Object {
-  "buttonsData": Array [
+  "charCount": 151,
+  "ctaData": Array [
     Object {
       "index": 0,
       "phone_number": "+919738752617",
@@ -178,9 +179,8 @@ Object {
       "url": "https://docs.google.com/{{1}}",
     },
   ],
-  "charCount": 151,
-  "footerMsg": "",
-  "headerMsg": "",
+  "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/utils.js

@@ -110,15 +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> : '',
+    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 && {
-      buttonsData,
+      ctaData: buttonsData
     }),
     ...(buttonType === QUICK_REPLY && {
-      buttonsData,
+      quickReplyData: buttonsData
     }),
     ...mediaParams,
   };
@@ -154,31 +154,31 @@ export const getWhatsappCta = (template) => {
   return renderArray;
 };
 
-export const getWhatsappQuickReply= (template) => {
-  const { buttonType = NONE, buttons = [] } = get(
+// 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="whatsapp-list-view-divider" />);
-    buttons.forEach((quickReply, index) => {
+    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="whatsapp-list-cta-preview">
+          <CapLabel type="label21" className={templatePreview ? "whatsapp-cta-preview" : "whatsapp-list-quick-reply-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" />);
+      if (index < buttons?.length -1) {
+        renderArray.push(<CapDivider className={templatePreview ? "whatsapp-divider" : "whatsapp-list-view-divider"} />);
       }
     })
   }

package/v2Containers/mockdata.js

@@ -1473,7 +1473,7 @@ export default {
     totalCount: 7,
   },
   whatsappPreviewTemplateData3Result: {
-    buttonsData: [
+    quickReplyData: [
       {
         index: 0,
         type: "QUICK_REPLY",
@@ -1485,14 +1485,14 @@ export default {
         text: "Not Interested",
       },
     ],
-    charCount: 30,
-    footerMsg: (
-      <CapLabel className="whatsapp-template-footer-preview" type="label1">
+    charCount: 49,
+    templateFooterPreview: (
+      <CapLabel className="whatsapp-template-list-footer-preview" type="label1">
         Thanks
       </CapLabel>
     ),
-    headerMsg: (
-      <CapLabel className="whatsapp-template-header-preview" type="label1">
+    templateHeaderPreview: (
+      <CapLabel className="whatsapp-template-list-header-preview" type="label1">
         Hello welcome
       </CapLabel>
     ),
@@ -1502,27 +1502,17 @@ export default {
   },
   whatsappPreviewTemplateData3QuickReplyResult: [
     <CapDivider className="whatsapp-list-view-divider" />,
-    <CapLabel className="whatsapp-list-cta-preview" type="label21">
+    <CapLabel className="whatsapp-list-quick-reply-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">
+    <CapLabel className="whatsapp-list-quick-reply-preview" type="label21">
       <CapIcon
         size="xs"
-        svgProps={{
-          style: {
-            marginRight: "4px",
-          },
-        }}
         type="small-link"
       />
       Not Interested