@capillarytech/creatives-library 7.9.13 → 7.9.15

package/v2Containers/SmsTrai/Create/tests/index.test.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { mountWithIntl } from '../../../../../app/helpers/intl-enzym-test-helpers';
+import { SmsTraiCreate } from '../index';
+import { SAMPLE_CSV, DOWNLOAD_ISSUES_CSV } from '../constants';
+import { mockData } from './mockData';
+
+let file = [];
+const renderHelper = (fileData) => {
+  file = new File(mockData.contents, fileData.name, {
+    type: fileData.type,
+  });
+};
+
+jest.mock('papaparse', () => ({
+  parse: (file, response) => {
+    response.complete({ data: mockData.contents }, file);
+  },
+}));
+
+describe('Creatives SmsTraiCreate test/>', () => {
+  let renderedComponent;
+  const clearCreateResponse = jest.fn();
+  const createSMSTRAITemplates = jest.fn();
+  const onCreateComplete = jest.fn();
+  const setAttribute = jest.fn();
+  beforeEach(() => {
+    renderedComponent = mountWithIntl(
+      <SmsTraiCreate
+        actions={{ clearCreateResponse, createSMSTRAITemplates }}
+        onCreateComplete={onCreateComplete}
+      />,
+    );
+  });
+
+  it('renders UI', () => {
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('clicking on Sample CSV should download sample CSV file', () => {
+    const event = { target: { setAttribute } };
+    renderedComponent.find('.download-sample-link').props().onClick(event);
+    expect(setAttribute).toHaveBeenCalledWith('download', SAMPLE_CSV);
+  });
+
+  it('done button should be disabled initially', () => {
+    const buttonProps = renderedComponent.find('button.done-button').props();
+    expect(buttonProps.disabled).toBe(true);
+  });
+
+  it('invalid file drop', async () => {
+    renderHelper(mockData.invalidFile);
+    const dropZone = renderedComponent.find('Dropzone').props();
+    await dropZone.onDrop([file]);
+    renderedComponent.update();
+    expect(renderedComponent).toMatchSnapshot();
+    expect(renderedComponent.find('button.done-button').props().disabled).toBe(
+      true,
+    );
+  });
+
+  it('valid file drop', async () => {
+    const event = { target: { setAttribute } };
+    renderHelper(mockData.validFile);
+    const dropZone = renderedComponent.find('Dropzone').props();
+    await dropZone.onDrop([file]);
+    renderedComponent.update();
+    expect(renderedComponent).toMatchSnapshot();
+    expect(renderedComponent.find('button.done-button').props().disabled).toBe(
+      false,
+    );
+    renderedComponent.find('a.download-issues-csv-link').props().onClick(event);
+    expect(setAttribute).toHaveBeenCalledWith('download', DOWNLOAD_ISSUES_CSV);
+    renderedComponent.find('button.done-button').props().onClick();
+    renderedComponent.update();
+    expect(renderedComponent).toMatchSnapshot();
+  });
+});

package/v2Containers/SmsTrai/Create/tests/mockData.js

@@ -0,0 +1,58 @@
+export const mockData = {
+  invalidFile: {
+    type: 'application/json',
+    name: 'test.json',
+  },
+  validFile: {
+    type: 'text/csv',
+    name: 'test.csv',
+  },
+  contents: [
+    [
+      'TEMPLATE ID',
+      'TELEMARKETER',
+      'TEMPLATE NAME',
+      'TYPE',
+      'SENDER ID',
+      'CATEGORY',
+      'REGISTERED DLT',
+      'REQUESTED ON',
+      'STATUS DATE',
+      'APPROVAL STATUS',
+      'STATUS',
+      'TEMPLATE MESSAGE',
+      'CONSENT TYPE',
+    ],
+    [
+      "'1107160277332377515'",
+      '--',
+      'CAP71871_12',
+      'Service-Explicit',
+      'VISHMM',
+      '--',
+      'Vodafone Idea',
+      '07/10/20 17:52',
+      '13/10/20 21:55',
+      'Approved',
+      'Active',
+      'DUSSEHRA DEALS@VISHAL\n\nBUY1GET1 FREE\n{#var#}\n{#var#}\n{#var#}\n{#var#}\n+\n{#var#}\n{#var#}\n{#var#}\nTC',
+      'Explicit',
+    ],
+    [
+      "'1107160277332377515'",
+      '--',
+      '',
+      'Service-Explicit',
+      '',
+      '--',
+      'Vodafone Idea',
+      '07/10/20 17:52',
+      '13/10/20 21:55',
+      '',
+      'Active',
+      'DUSSEHRA DEALS@VISHAL\n\nBUY1GET1 FREE\n{#var#}\n{#var#}\n{#var#}\n{#var#}\n+\n{#var#}\n{#var#}\n{#var#}\nTC',
+      'Explicit',
+    ],
+    [''],
+  ],
+};

package/v2Containers/SmsTrai/Edit/constants.js

@@ -0,0 +1,16 @@
+/*
+ *
+ * SmsTrai constants
+ *
+ */
+
+export const DEFAULT_ACTION = 'app/SmsTrai/DEFAULT_ACTION';
+export const CHARLIMIT = 30;
+export const SMS = 'SMS';
+export const SMS_TRAI_VAR = '{#var#}';
+export const TAG = 'TAG';
+export const EMBEDDED = 'embedded';
+export const DEFAULT = 'default';
+export const FULL = 'full';
+export const ALL = 'all';
+export const LIBRARY = 'library';

package/v2Containers/SmsTrai/Edit/index.js

@@ -0,0 +1,483 @@
+import React, { useState, useEffect } from 'react';
+import { createStructuredSelector } from 'reselect';
+import { bindActionCreators } from 'redux';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import { get, cloneDeep, isEmpty } from 'lodash';
+import styled from 'styled-components';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import {
+  CAP_SPACE_16,
+  CAP_SPACE_12,
+  CAP_SPACE_24,
+  CAP_SPACE_32,
+  CAP_SPACE_04,
+  CAP_WHITE,
+  CAP_G10,
+} from '@capillarytech/cap-ui-library/styled/variables';
+import { makeSelectTemplateDetailsResponse } from '../../Sms/Edit/selectors';
+import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
+import * as actions from '../../Sms/Edit/actions';
+import messages from './messages';
+import TagList from '../../TagList';
+import TemplatePreview from '../../../v2Components/TemplatePreview';
+import withCreatives from '../../../hoc/withCreatives';
+
+import {
+  CHARLIMIT,
+  SMS,
+  SMS_TRAI_VAR,
+  TAG,
+  EMBEDDED,
+  DEFAULT,
+  FULL,
+  ALL,
+  LIBRARY,
+} from './constants';
+let varMap = {};
+const { TextArea } = CapInput;
+const { CapLabelInline } = CapLabel;
+export const SmsTraiEdit = (props) => {
+  const {
+    intl,
+    handleClose,
+    params,
+    actions,
+    templateDetails,
+    globalActions,
+    location,
+    getDefaultTags,
+    supportedTags,
+    metaEntities,
+    injectedTags,
+    onCreateComplete,
+  } = props || {};
+  const { formatMessage } = intl;
+  const [loading, updateLoading] = useState(true);
+  const [tempMsgArray, updateTempMsgArray] = useState([]);
+  const [updatedSmsEditor, setUpdatedSmsEditor] = useState([]);
+  const [tags, updateTags] = useState([]);
+  const [textAreaId, updateTextAreaId] = useState();
+  const [isValidationError, updateIsValidationError] = useState(false);
+  let totalVarCount = 0;
+  const SMSTraiFooter = styled.div`
+    background-color: ${CAP_WHITE};
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    margin-left: -32px;
+    padding: ${CAP_SPACE_32} ${CAP_SPACE_24};
+    .ant-btn {
+      margin-right: ${CAP_SPACE_16};
+    }
+    }
+`;
+  const TraiEditTemplateDetails = styled.div`
+    margin-bottom: ${CAP_SPACE_16};
+    ${CapLabelInline} {
+      margin-right: ${CAP_SPACE_12};
+    }
+  `;
+  useEffect(() => {
+    const { id } = params || {};
+    if (id) {
+      actions.getTemplateDetails(id);
+      //fetching tags
+      const query = {
+        layout: SMS,
+        type: TAG,
+        context:
+          location.query.type === EMBEDDED ? location.query.module : DEFAULT,
+        embedded: location.query.type === EMBEDDED ? location.query.type : FULL,
+      };
+      if (getDefaultTags) {
+        query.context = getDefaultTags;
+      }
+      globalActions.fetchSchemaForEntity(query);
+    }
+    return () => {
+      actions.resetEditTemplate();
+    };
+  }, []);
+
+  //computing placeholder array for mapping values and rendering dynamic form
+  useEffect(() => {
+    if (templateDetails && !isEmpty(templateDetails)) {
+      let msg = get(templateDetails, `versions.base.sms-editor`);
+      const templateMessageArray = [];
+      //converting sms-editor string to an array split at '{#var#}'
+      //split and push string before '{#var#}[0 to index]', push '{#var#}',
+      //split and repeat for remaining string[index+7  to length]
+      while (msg.length !== 0) {
+        const index = msg.search(SMS_TRAI_VAR);
+        if (index !== -1) {
+          templateMessageArray.push(msg.substring(0, index));
+          templateMessageArray.push(SMS_TRAI_VAR);
+          msg = msg.substring(index + 7, msg.length);
+        } else {
+          templateMessageArray.push(msg);
+          break;
+        }
+      }
+
+      const filteredTemplateMessageArray = templateMessageArray.filter(
+        (i) => i.trim() !== '',
+      );
+      updateTempMsgArray(filteredTemplateMessageArray);
+      //stop spinner
+      updateLoading(false);
+    }
+  }, [templateDetails]);
+
+  useEffect(() => {
+    if (tempMsgArray.length !== 0) {
+      //if varMapped and updated-sms-editor is already present on non first edits
+      if (!isEmpty(get(templateDetails, `versions.base.var-mapped`))) {
+        varMap = cloneDeep(get(templateDetails, `versions.base.var-mapped`));
+        setUpdatedSmsEditor(
+          get(templateDetails, `versions.base.updated-sms-editor`),
+        );
+      } else {
+        //computing varMap for first edit
+        let counter = 1;
+        for (let i = 0; i < tempMsgArray.length; i++) {
+          if (tempMsgArray[i] === SMS_TRAI_VAR) {
+            const nextElem =
+              tempMsgArray[i === tempMsgArray.length - 1 ? 0 : i + 1];
+            if (tempMsgArray[i] !== nextElem) {
+              varMap[`${tempMsgArray[i]}_${i - counter + 1}`] = {
+                data: '',
+                count: counter,
+              };
+              counter = 1;
+            } else {
+              counter++;
+            }
+          }
+        }
+        setUpdatedSmsEditor(tempMsgArray);
+      }
+    }
+  }, [tempMsgArray]);
+
+  useEffect(() => {
+    const previewCountElem = document.getElementsByClassName(
+      'character-count-col',
+    );
+    if (previewCountElem.length === 1) {
+      previewCountElem[0].style.visibility = 'hidden';
+    }
+  }, []);
+
+  //Saving on done start
+  const onUpdateTemplateComplete = (editResponse, errorMsg) => {
+    if (editResponse?.templateId) {
+      CapNotification.success({
+        message: formatMessage(messages.smsEditNotification),
+      });
+      actions.clearEditResponse();
+      onCreateComplete();
+    } else if (errorMsg) {
+      CapNotification.error({
+        message: errorMsg,
+      });
+    }
+  };
+  const onDoneCallback = () => {
+    if (updatedSmsEditor.includes(SMS_TRAI_VAR)) {
+      //during save textbox should not be empty
+      updateIsValidationError(true);
+    } else {
+      //start spinner
+      updateLoading(true);
+      templateDetails.versions.base['var-mapped'] = varMap;
+      templateDetails.versions.base['updated-sms-editor'] = updatedSmsEditor;
+      templateDetails.versions.history = [templateDetails.versions.base];
+      actions.editTemplate(templateDetails, onUpdateTemplateComplete);
+    }
+  };
+  //Saving on done end
+
+  // tag code start
+  useEffect(() => {
+    let tag =
+      metaEntities && metaEntities.tags ? metaEntities.tags.standard : [];
+    if (
+      location.query.type === EMBEDDED &&
+      location.query.module === LIBRARY &&
+      !getDefaultTags
+    ) {
+      tag = supportedTags;
+    }
+    updateTags(tag);
+  }, [metaEntities]);
+
+  const handleOnTagsContextChange = (data) => {
+    const query = {
+      layout: SMS,
+      type: TAG,
+      context:
+        (data || '').toLowerCase() === ALL
+          ? DEFAULT
+          : (data || '').toLowerCase(),
+      embedded: location.query.type === EMBEDDED ? location.query.type : FULL,
+    };
+    globalActions.fetchSchemaForEntity(query);
+  };
+
+  const onTagSelect = (data) => {
+    if (textAreaId && varMap && updatedSmsEditor) {
+      const tempArr = [...updatedSmsEditor];
+      //when trying to insert tag in empty textarea,{#var#} is replaced with "" and then tag is added
+      if (tempArr[textAreaId] === SMS_TRAI_VAR) {
+        for (
+          let i = 0;
+          i < varMap[`${SMS_TRAI_VAR}_${textAreaId}`].count;
+          i++
+        ) {
+          tempArr[textAreaId + i] = '';
+        }
+      }
+      const messageData = `${tempArr[textAreaId]} {{${data}}}`;
+      tempArr[textAreaId] = messageData;
+      varMap[`${SMS_TRAI_VAR}_${textAreaId}`].data = messageData;
+      setUpdatedSmsEditor(tempArr);
+    }
+  };
+  //setting the id of currently selected text area, is used onTagSelect
+  const setTextAreaId = (event) => {
+    updateTextAreaId(Number(event.target.id));
+  };
+  // tag code end
+
+  // on change event of Text Area
+  const textAreaValueChange = ({ target: { value, id } }) => {
+    id = Number(id);
+    const arr = [...updatedSmsEditor];
+    varMap[`${SMS_TRAI_VAR}_${id}`].data = value;
+    if (value === '') {
+      for (let i = 0; i < varMap[`${SMS_TRAI_VAR}_${id}`].count; i++) {
+        arr[id + i] = SMS_TRAI_VAR;
+      }
+    } else {
+      for (let i = 0; i < varMap[`${SMS_TRAI_VAR}_${id}`].count; i++) {
+        if (i === 0) {
+          arr[id] = varMap[`${SMS_TRAI_VAR}_${id}`].data;
+        } else {
+          arr[id + i] = '';
+        }
+      }
+    }
+    setUpdatedSmsEditor(arr);
+  };
+
+  const textAreaValue = (idValue) => {
+    if (idValue && updatedSmsEditor) {
+      if (
+        updatedSmsEditor[idValue] &&
+        updatedSmsEditor[idValue] !== SMS_TRAI_VAR
+      ) {
+        return updatedSmsEditor[idValue];
+      } else {
+        return '';
+      }
+    }
+    return '';
+  };
+
+  const capHeading = (index, varCount) => {
+    if ((index, varCount)) {
+      return (
+        <CapHeading
+          key={`label${index}`}
+          type="h6"
+          style={{ margin: `${CAP_SPACE_04} 0`, float: 'right' }}
+        >
+          {formatMessage(messages.textAreaCounts, {
+            varCounts: varCount,
+            var: SMS_TRAI_VAR,
+            charCounts: varCount * CHARLIMIT,
+          })}
+        </CapHeading>
+      );
+    }
+  };
+
+  const renderedContent = () => {
+    const renderArray = [];
+    if (tempMsgArray?.length !== 0) {
+      let varCount = 0;
+      tempMsgArray.map((elem, index) => {
+        let prevElem = '';
+        if (elem.includes(SMS_TRAI_VAR)) {
+          prevElem =
+            tempMsgArray[[index === 0 ? tempMsgArray.length - 1 : index - 1]];
+          varCount++;
+          totalVarCount++;
+          if (prevElem !== SMS_TRAI_VAR) {
+            renderArray.push(
+              <TextArea
+                id={index}
+                key={`${elem}${index}`}
+                placeholder={props.intl.formatMessage(
+                  messages.inputplaceHolderText,
+                )}
+                autosize={{ minRows: 1, maxRows: 3 }}
+                onChange={textAreaValueChange}
+                value={textAreaValue(index)}
+                onFocus={setTextAreaId}
+                errorMessage={
+                  isValidationError &&
+                  updatedSmsEditor[index] === SMS_TRAI_VAR &&
+                  formatMessage(messages.textAreaError)
+                }
+              />,
+            );
+          }
+          if (index === tempMsgArray.length - 1) {
+            renderArray.push(capHeading(index, varCount));
+            varCount = 0;
+          }
+        } else if (varCount > 0) {
+          renderArray.push(
+            capHeading(index, varCount),
+            <CapHeading
+              key={`${elem}${index}`}
+              style={{ margin: `${CAP_SPACE_16} 0` }}
+            >
+              {elem}
+            </CapHeading>,
+          );
+          varCount = 0;
+        } else {
+          renderArray.push(
+            <CapHeading
+              key={`${elem}${index}`}
+              style={{ margin: `${CAP_SPACE_16} 0` }}
+            >
+              {elem}
+            </CapHeading>,
+          );
+        }
+      });
+    }
+    return renderArray;
+  };
+
+  // to compute the length of the message
+  //30 characters is blocked per'{#var#}' and the remaining string length is added to it
+  const smsLengthForVar = () => {
+    const msgLenWithoutVar =
+      tempMsgArray?.filter((i) => i !== SMS_TRAI_VAR)?.join('').length || 0;
+    const totalMessageLength = msgLenWithoutVar + totalVarCount * CHARLIMIT;
+    return (
+      <CapHeading type="h5" style={{ marginTop: CAP_SPACE_04, float: 'right' }}>
+        {formatMessage(messages.totalCharacters, {
+          smsCount: Math.ceil(totalMessageLength / 160),
+          number: totalMessageLength,
+        })}
+      </CapHeading>
+    );
+  };
+
+  return (
+    <>
+      <CapSpin spinning={loading}>
+        <CapRow>
+          {templateDetails && !isEmpty(templateDetails) && (
+            <TraiEditTemplateDetails>
+              <CapLabelInline type="label1">
+                {formatMessage(messages.templateLabel)}
+              </CapLabelInline>
+              <CapLabelInline type="label2">
+                {templateDetails.versions.base.template_name}
+              </CapLabelInline>
+              <CapLabelInline type="label1">
+                {formatMessage(messages.traiEditSeperator)}
+              </CapLabelInline>
+              <CapLabelInline type="label1">
+                {formatMessage(messages.senderIdlabel)}
+              </CapLabelInline>
+              <CapLabelInline type="label2">
+                {templateDetails.versions.base.header}
+              </CapLabelInline>
+            </TraiEditTemplateDetails>
+          )}
+          <CapColumn span={14}>
+            <CapRow>
+              <CapHeader
+                title={formatMessage(messages.traiEditTitle)}
+                size="regular"
+                suffix={
+                  <TagList
+                    label={formatMessage(messages.addLabels)}
+                    onTagSelect={onTagSelect}
+                    location={location}
+                    tags={tags || []}
+                    onContextChange={handleOnTagsContextChange}
+                    injectedTags={injectedTags || {}}
+                  />
+                }
+              />
+            </CapRow>
+
+            <CapRow
+              style={{
+                backgroundColor: CAP_G10,
+                padding: CAP_SPACE_16,
+              }}
+            >
+              {renderedContent()}
+            </CapRow>
+            <CapRow>{smsLengthForVar()}</CapRow>
+            <div style={{ marginBottom: '100px' }} />
+          </CapColumn>
+          <CapColumn span={10}>
+            <TemplatePreview
+              channel={SMS}
+              content={[updatedSmsEditor.join('')]}
+            />
+          </CapColumn>
+        </CapRow>
+        <SMSTraiFooter>
+          <CapButton onClick={onDoneCallback} className="create-msg">
+            <FormattedMessage {...messages.saveButtonLabel} />
+          </CapButton>
+          <CapButton
+            onClick={handleClose}
+            className="cancel-msg"
+            type="secondary"
+          >
+            <FormattedMessage {...messages.cancelButtonLabel} />
+          </CapButton>
+        </SMSTraiFooter>
+      </CapSpin>
+    </>
+  );
+};
+
+const mapStateToProps = createStructuredSelector({
+  templateDetails: makeSelectTemplateDetailsResponse(),
+  metaEntities: makeSelectMetaEntities(),
+  injectedTags: setInjectedTags(),
+});
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+  };
+};
+
+export default withCreatives({
+  WrappedComponent: injectIntl(SmsTraiEdit),
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: true,
+});

package/v2Containers/SmsTrai/Edit/messages.js

@@ -0,0 +1,58 @@
+/*
+ * SmsTrai Messages
+ *
+ * This contains all the text for the SmsTrai component.
+ */
+import { defineMessages } from 'react-intl';
+const prefix = 'app.v2containers.SmsTrai.Edit';
+
+export default defineMessages({
+  saveButtonLabel: {
+    id: `${prefix}.saveButtonLabel`,
+    defaultMessage: 'Save',
+  },
+  cancelButtonLabel: {
+    id: `${prefix}.cancelButtonLabel`,
+    defaultMessage: 'Cancel',
+  },
+  traiEditTitle: {
+    id: `${prefix}.traiEditTitle`,
+    defaultMessage: 'Message',
+  },
+  addLabels: {
+    id: `${prefix}.addLabels`,
+    defaultMessage: 'Add labels',
+  },
+  inputplaceHolderText: {
+    id: `${prefix}.inputplaceHolderText`,
+    defaultMessage: 'Add labels or text or combination of both',
+  },
+  textAreaCounts: {
+    id: `${prefix}.textAreaCounts`,
+    defaultMessage: '{varCounts} Variables {var}: max. {charCounts} characters',
+  },
+  totalCharacters: {
+    id: `${prefix}.totalCharacters`,
+    defaultMessage: '{smsCount} SMS ({number} characters)',
+  },
+  smsEditNotification: {
+    id: `${prefix}.smsEditNotification`,
+    defaultMessage: 'Trai SMS template updated successfully',
+  },
+  textAreaError: {
+    id: `${prefix}.textAreaError`,
+    defaultMessage: 'Template cannot be empty',
+  },
+  templateLabel: {
+    id: `${prefix}.templateLabel`,
+    defaultMessage: 'Template',
+  },
+  traiEditSeperator: {
+    id: `${prefix}.traiEditSeperator`,
+    defaultMessage: '|',
+  },
+  senderIdlabel: {
+    id: `${prefix}.senderIdlabel`,
+    defaultMessage: 'Sender ID',
+  },
+});