@capillarytech/creatives-library 7.10.39 → 7.10.40

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

@@ -0,0 +1,132 @@
+import React from 'react';
+import { browserHistory } from 'react-router';
+import configureStore from '../../../store';
+import { Provider } from 'react-redux';
+import { mountWithIntl } from '../../../../app/helpers/intl-enzym-test-helpers';
+import { Whatsapp } from '../index';
+import { mockData } from './mockData';
+
+let store;
+beforeAll(() => {
+  store = configureStore({}, browserHistory);
+});
+
+describe('Creatives Whatsapp test/>', () => {
+  let renderedComponent;
+  const createWhatsappTemplate = jest.fn();
+  const clearCreateResponse = jest.fn();
+  const handleClose = jest.fn();
+  const onCreateComplete = jest.fn();
+  const formatMessage = jest.fn();
+  const location = mockData.location;
+  beforeEach(() => {
+    renderedComponent = mountWithIntl(
+      <Provider store={store}>
+        <Whatsapp
+          actions={{ createWhatsappTemplate, clearCreateResponse }}
+          onCreateComplete={onCreateComplete}
+          handleClose={handleClose}
+          location={location}
+          intl={{ formatMessage }}
+          isFullMode={true}
+          selectedWeChatAccount={{
+            name: 'Test Account',
+            configs: { accessToken: '123' },
+            sourceAccountIdentifier: 'A123',
+          }}
+        />
+      </Provider>,
+    );
+  });
+
+  it('should render', () => {
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('template name change', () => {
+    const templateNameRenderHelper = (val) => {
+      let event = { target: { value: val } };
+      renderedComponent
+        .find('#whatsapp_template_name_input')
+        .at(3)
+        .simulate('change', event);
+    };
+    templateNameRenderHelper('template_name');
+    expect(renderedComponent).toMatchSnapshot();
+    templateNameRenderHelper('');
+    expect(renderedComponent).toMatchSnapshot();
+    templateNameRenderHelper('TEMP');
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('template category change', () => {
+    renderedComponent
+      .find('CapSelect#select-whatsapp-category')
+      .props()
+      .onChange('RESERVATION_UPDATE');
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('template message', () => {
+    const templateMessageRenderHelper = (val) => {
+      let event = { target: { value: val } };
+      renderedComponent
+        .find('TextArea#whatsapp-template-message-input')
+        .at(1)
+        .simulate('change', event);
+    };
+    templateMessageRenderHelper('');
+    expect(renderedComponent).toMatchSnapshot();
+    templateMessageRenderHelper('Hi {{1}}');
+    expect(renderedComponent).toMatchSnapshot();
+    templateMessageRenderHelper('Hi {{1}}{{2}}');
+    expect(renderedComponent).toMatchSnapshot();
+    templateMessageRenderHelper('Hi {{var}}');
+    expect(renderedComponent).toMatchSnapshot();
+    templateMessageRenderHelper('Hi {{1}}, offer {{3}}');
+    expect(renderedComponent).toMatchSnapshot();
+    templateMessageRenderHelper('Hi {{1}}{{1}}');
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('send for approval should be disabled', () => {
+    const sendForApprovalBtn = renderedComponent
+      .find('CapButton.whatsapp-create-btn')
+      .props();
+    expect(sendForApprovalBtn.children.props.defaultMessage).toBe(
+      'Send for approval',
+    );
+    expect(sendForApprovalBtn.disabled).toBe(true);
+  });
+
+  it('Cancel Btn', () => {
+    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', () => {
+    let event = { target: { value: 'template_name' } };
+    createWhatsappTemplate.mockImplementation((obj, callback) => {
+      callback();
+    });
+    renderedComponent
+      .find('#whatsapp_template_name_input')
+      .at(3)
+      .simulate('change', event);
+    renderedComponent
+      .find('CapSelect#select-whatsapp-category')
+      .props()
+      .onChange('APPOINTMENT_UPDATE');
+    event = { target: { value: 'Hi {{1}}' } };
+    renderedComponent
+      .find('TextArea#whatsapp-template-message-input')
+      .at(1)
+      .simulate('change', event);
+    renderedComponent.find('CapButton.whatsapp-create-btn').props().onClick();
+    expect(renderedComponent).toMatchSnapshot();
+  });
+});

package/v2Containers/Whatsapp/tests/mockData.js

@@ -0,0 +1,10 @@
+export const mockData = {
+  location: {
+    pathname: '/whatsapp',
+    query: {
+      type: false,
+      module: 'default',
+    },
+    search: '',
+  },
+};

package/v2Containers/Whatsapp/utils.js

@@ -0,0 +1,106 @@
+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,
+} from '../Whatsapp/constants';
+
+export const getWhatsappContent = (template) => {
+    const {
+        versions: {
+            base: {
+                content: {
+                    [WHATSAPP.toLowerCase()]: {
+                        languages = [{}],
+                        'var-mapped': varMapped = {},
+                    } = {},
+                } = {},
+            } = {},
+        } = {},
+    } = template;
+    let text = languages[0]?.content?.slice(2, -1) || '';
+    let searchStartIndex = 0;
+    
+    while (true) {
+        // starting position of {{x}}
+        const openIndex = text.indexOf("{{", searchStartIndex);
+        // closing position of {{x}}
+        const closeIndex = text.indexOf("}}", searchStartIndex);
+        if (openIndex > -1) {
+            // Number inside the current braces
+            const varDigit = text.substring(openIndex + 2, closeIndex);
+            // Var mapped value corresponding to current digit inside braces
+            const mappedValue = varMapped[varDigit];
+            let lengthDifference = 0;
+            if(mappedValue) {
+                // repacing the number inside braces with mapped value
+                text = text.slice(0, openIndex) + mappedValue + text.slice(closeIndex + 2);
+                lengthDifference = (mappedValue?.length - (varDigit?.length + 4));
+            }
+            // incrementing the searchStartIndex by difference between the length of mapped value and length of braces {{xx}}
+            searchStartIndex = closeIndex + lengthDifference + 2;
+        } else {
+            break;
+        }
+    }
+    return text;
+}
+
+export const getWhatsappCategory = (category) => {
+    return CATEGORY_OPTIONS.find((obj) => obj.value === category);
+  }
+
+export const getWhatsappStatus = (status) => {
+    if ([WHATSAPP_STATUSES.pending, WHATSAPP_STATUSES.unsubmitted].includes(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>
+    )
+}