@capillarytech/creatives-library 7.10.50 → 7.10.52

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

@@ -15,35 +15,56 @@ describe('Creatives Whatsapp test/>', () => {
   let renderedComponent;
   const createWhatsappTemplate = jest.fn();
   const clearCreateResponse = jest.fn();
+  const getTemplateDetails = jest.fn();
+  const resetEditTemplate = jest.fn();
+  const fetchSchemaForEntity = jest.fn();
   const handleClose = jest.fn();
   const onCreateComplete = jest.fn();
   const formatMessage = jest.fn();
   const location = mockData.location;
-  beforeEach(() => {
+  const params = {
+    id: mockData.editData1.templateDetails._id,
+  };
+  const editData1 = mockData.editData1;
+  const editData2 = mockData.editData2;
+  const editData3 = mockData.editData3;
+  const accountData = mockData.accountData;
+
+  const renderHelper = (args) => {
     renderedComponent = mountWithIntl(
       <Provider store={store}>
         <Whatsapp
-          actions={{ createWhatsappTemplate, clearCreateResponse }}
+          actions={{
+            createWhatsappTemplate,
+            clearCreateResponse,
+            getTemplateDetails,
+            resetEditTemplate,
+          }}
+          globalActions={{ fetchSchemaForEntity }}
           onCreateComplete={onCreateComplete}
           handleClose={handleClose}
+          params={args.params}
+          editData={args.editData}
+          accountData={accountData}
           location={location}
           intl={{ formatMessage }}
           isFullMode={true}
-          selectedWeChatAccount={{
-            name: 'Test Account',
-            configs: { accessToken: '123' },
-            sourceAccountIdentifier: 'A123',
-          }}
+          isEditFlow={args.isEditFlow || false}
+          loadingTags={args.loadingTags}
+          metaEntities={[]}
+          getDefaultTags={true}
         />
       </Provider>,
     );
-  });
+  }
 
-  it('should render', () => {
+  it('should render create mode', () => {
+    renderHelper({});
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('template name change', () => {
+    renderHelper({});
     const templateNameRenderHelper = (val) => {
       let event = { target: { value: val } };
       renderedComponent
@@ -60,6 +81,7 @@ describe('Creatives Whatsapp test/>', () => {
   });
 
   it('template category change', () => {
+    renderHelper({});
     renderedComponent
       .find('CapSelect#select-whatsapp-category')
       .props()
@@ -68,6 +90,7 @@ describe('Creatives Whatsapp test/>', () => {
   });
 
   it('template message', () => {
+    renderHelper({});
     const templateMessageRenderHelper = (val) => {
       let event = { target: { value: val } };
       renderedComponent
@@ -90,25 +113,26 @@ describe('Creatives Whatsapp test/>', () => {
   });
 
   it('send for approval should be disabled', () => {
+    renderHelper({});
     const sendForApprovalBtn = renderedComponent
       .find('CapButton.whatsapp-create-btn')
       .props();
-    expect(sendForApprovalBtn.children.props.defaultMessage).toBe(
-      'Send for approval',
-    );
     expect(sendForApprovalBtn.disabled).toBe(true);
+    sendForApprovalBtn.onClick();
+    expect(createWhatsappTemplate).toHaveBeenCalled();
   });
 
   it('Cancel Btn', () => {
+    renderHelper({});
     const cancelBtn = renderedComponent
       .find('CapButton.whatsapp-cancel-btn')
       .props();
-    expect(cancelBtn.children.props.defaultMessage).toBe('Cancel');
     cancelBtn.onClick();
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('set all valid values and send for approval', () => {
+    renderHelper({});
     let event = { target: { value: 'template_name' } };
     createWhatsappTemplate.mockImplementation((obj, callback) => {
       callback();
@@ -127,6 +151,20 @@ describe('Creatives Whatsapp test/>', () => {
       .at(1)
       .simulate('change', event);
     renderedComponent.find('CapButton.whatsapp-create-btn').props().onClick();
+  });
+
+  it('should render edit mode in various cases', () => {
+    let event = { target: { value: '5454', id: '{{1}}_1' } };
+    renderHelper({ params, editData: editData1, isEditFlow: true, loadingTags: false });
+    expect(renderedComponent).toMatchSnapshot();
+    renderHelper({ params, editData: editData2, isEditFlow: true, loadingTags: false });
+    expect(renderedComponent).toMatchSnapshot();
+    renderHelper({ params, editData: editData3, isEditFlow: true, loadingTags: false });
+    expect(renderedComponent).toMatchSnapshot();
+    renderHelper({ params, editData: editData1, isEditFlow: true, loadingTags: false });
+    renderedComponent.find('textarea.TextArea__StyledTextArea-sc-177dfyt-2')
+      .at(1)
+      .simulate('change', event);
     expect(renderedComponent).toMatchSnapshot();
   });
 });

package/v2Containers/Whatsapp/tests/mockData.js

@@ -1,6 +1,125 @@
 export const mockData = {
+  accountData: {
+    selectedWhatsappAccount: {
+      name: 'WhatsppTest',
+      sourceAccountIdentifier: 'AC41030cebba9e2f1ce37c78235da0ee18',
+      configs: { accessToken: '4676323eb5d1f975b0987070c03a8efc' },
+    },
+  },
+  editData1: {
+    templateDetails: {
+      "_id": "62034b4683c75608cf2404ec",
+      "name": "points_update",
+      "type": "WHATSAPP",
+      "versions": {
+        "history": [],
+        "base": {
+          "content": {
+            "whatsapp": {
+              "status": "approved",
+              "templateId": "HT9bb4d61eea1699d2dbcaecd1cb558345",
+              "accountName": "WhatsppTest",
+              "accessToken": "4676323eb5d1f975b0987070c03a8efc",
+              "accountId": "AC41030cebba9e2f1ce37c78235da0ee18",
+              "mediaType": "text",
+              "languages": [
+                {
+                  "content": "$'Dear Customer, your{{1}} points are about to expire. Redeem before {{2}} at nearest Vishal Mega Mart and SHOP FOR FREE!\nT&C\nClick {{3}} to unsubscribe'",
+                  "language": "en"
+                }
+              ],
+              "category": "ACCOUNT_UPDATE",
+              "rejection_reason": null,
+              "varMapped": {
+                '{{1}}_1': '500',
+                '{{2}}_3': 'tomorrow',
+              }
+            }
+          }
+        }
+      },
+      "isActive": true,
+      "orgId": 50146,
+      "createdBy": "15000449",
+      "updatedBy": "15000449",
+      "createdAt": "2022-02-09T05:04:06.579Z",
+      "updatedAt": "2022-02-09T05:04:06.579Z"
+    },
+  },
+  editData2: {
+    templateDetails: {
+      "_id": "62034b4683c75608cf2404ec",
+      "name": "points_update",
+      "type": "WHATSAPP",
+      "versions": {
+        "history": [],
+        "base": {
+          "content": {
+            "whatsapp": {
+              "status": "rejected",
+              "templateId": "HT9bb4d61eea1699d2dbcaecd1cb558345",
+              "accountName": "WhatsppTest",
+              "accessToken": "4676323eb5d1f975b0987070c03a8efc",
+              "accountId": "AC41030cebba9e2f1ce37c78235da0ee18",
+              "mediaType": "text",
+              "languages": [
+                {
+                  "content": "$'Dear Customer, your{{1}} points are about to expire. Redeem before {{2}} at nearest Vishal Mega Mart and SHOP FOR FREE!\nT&C\nClick {{3}} to unsubscribe'",
+                  "language": "en"
+                }
+              ],
+              "category": "ACCOUNT_UPDATE",
+              "rejection_reason": 'INVALID_FORMAT'
+            }
+          }
+        }
+      },
+      "isActive": true,
+      "orgId": 50146,
+      "createdBy": "15000449",
+      "updatedBy": "15000449",
+      "createdAt": "2022-02-09T05:04:06.579Z",
+      "updatedAt": "2022-02-09T05:04:06.579Z"
+    },
+  },
+  editData3: {
+    templateDetails: {
+      "_id": "62034b4683c75608cf2404ec",
+      "name": "points_update",
+      "type": "WHATSAPP",
+      "versions": {
+        "history": [],
+        "base": {
+          "content": {
+            "whatsapp": {
+              "status": "rejected",
+              "templateId": "HT9bb4d61eea1699d2dbcaecd1cb558345",
+              "accountName": "WhatsppTest",
+              "accessToken": "4676323eb5d1f975b0987070c03a8efc",
+              "accountId": "AC41030cebba9e2f1ce37c78235da0ee18",
+              "mediaType": "text",
+              "languages": [
+                {
+                  "content": "$'Dear Customer, your{{1}} points are about to expire. Redeem before {{2}} at nearest Vishal Mega Mart and SHOP FOR FREE!\nT&C\nClick {{3}} to unsubscribe'",
+                  "language": "en"
+                }
+              ],
+              "category": "ACCOUNT_UPDATE",
+              "rejection_reason": 'TAG_CONTENT_MISMATCH'
+            }
+          }
+        }
+      },
+      "isActive": true,
+      "orgId": 50146,
+      "createdBy": "15000449",
+      "updatedBy": "15000449",
+      "createdAt": "2022-02-09T05:04:06.579Z",
+      "updatedAt": "2022-02-09T05:04:06.579Z"
+    },
+  },
   location: {
-    pathname: '/whatsapp',
+    pathname: '/whatsapp/edit',
     query: {
       type: false,
       module: 'default',

package/v2Containers/Whatsapp/utils.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import { CapRow, CapStatus, CapColoredTag } from '@capillarytech/cap-ui-library';
 import { WHATSAPP } from '../CreativesContainer/constants';
 import {
-    CATEGORY as WHATSAPP_CATEGORY,
-    STATUS as WHATSAPP_STATUS,
     STATUS_OPTIONS,
     CATEGORY_OPTIONS,
     WHATSAPP_STATUSES,
@@ -42,48 +39,4 @@ export const getWhatsappStatus = (status) => {
         status = WHATSAPP_STATUSES.awaitingApproval;
     }
     return STATUS_OPTIONS.find((obj) => obj.value === status);
-}
-
-export const getWhatsappStatusContainer = (template) => {
-    const {
-        versions: {
-          base: {
-            content: {
-                [WHATSAPP.toLowerCase()]: {
-                [WHATSAPP_STATUS]: status,
-                [WHATSAPP_CATEGORY]: category,
-              } = {},
-            } = {},
-          } = {},
-        } = {},
-    } = template;
-
-    const categoryObj = getWhatsappCategory(category) || {};
-    const {
-        label: categoryLabel,
-        tagColor: categoryTagColor,
-        tagTextColor: categoryTextColor,
-    } = categoryObj;
-    return (
-        <CapRow type="flex" align="middle" className="whatsapp-status-container">
-            <CapStatus
-                type={status}
-                text={getWhatsappStatus(status)?.label}
-                labelType="label3"
-            />
-            {
-            categoryLabel ? (
-                <CapColoredTag
-                    tagColor={categoryTagColor}
-                    tagTextColor={categoryTextColor}
-                    tagHeight="20px"
-                    tagFontSize="12px"
-                    className="whatsapp-category-tag"
-                >
-                    {categoryLabel}
-                </CapColoredTag>
-            ) : null
-            }
-        </CapRow>
-    )
 }