@capillarytech/creatives-library 7.10.39 → 7.10.40

package/v2Containers/Whatsapp/actions.js

@@ -0,0 +1,17 @@
+import {
+  WHATSAPP_TEMPLATE_CREATE_REQUEST,
+  CLEAR_WHATSAPP_TEMPLATE_REQUEST,
+} from './constants';
+
+export function createWhatsappTemplate(payload, callback) {
+  return {
+    type: WHATSAPP_TEMPLATE_CREATE_REQUEST,
+    payload,
+    callback,
+  };
+}
+export function clearCreateResponse() {
+  return {
+    type: CLEAR_WHATSAPP_TEMPLATE_REQUEST,
+  };
+}

package/v2Containers/Whatsapp/constants.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import messages from './messages';
+import { CAP_ORANGE, CAP_PURPLE02, CAP_PURPLE03, CAP_ORANGE01, CAP_GREEN01, CAP_GREEN02 } from '@capillarytech/cap-ui-library/styled/variables';
+
+export const UNSUBSCRIBE_TEXT_LENGTH = 36;
+export const TEMPLATE_MESSAGE_MAX_LENGTH = 1024;
+export const WHATSAPP = 'WHATSAPP';
+
+export const WHATSAPP_TEMPLATE_CREATE_REQUEST =
+  'app/v2Containers/Whatsapp/WHATSAPP_TEMPLATE_CREATE_REQUEST';
+export const WHATSAPP_TEMPLATE_CREATE_SUCCESS =
+  'app/v2Containers/Whatsapp/WHATSAPP_TEMPLATE_CREATE_SUCCESS';
+export const WHATSAPP_TEMPLATE_CREATE_FAILURE =
+  'app/v2Containers/Whatsapp/WHATSAPP_TEMPLATE_CREATE_FAILURE';
+export const CLEAR_WHATSAPP_TEMPLATE_REQUEST =
+  'app/v2Containers/Whatsapp/CLEAR_WHATSAPP_TEMPLATE_REQUEST';
+
+export const STATUS = 'status';
+export const CATEGORY = 'category';
+const tooltip = 'Tooltip';
+
+export const WHATSAPP_CATEGORIES = {
+  alertUpdate: 'ALERT_UPDATE',
+  accountUpdate: 'ACCOUNT_UPDATE',
+  appointmentUpdate: 'APPOINTMENT_UPDATE',
+  paymentUpdate: 'PAYMENT_UPDATE',
+  reservationUpdate: 'RESERVATION_UPDATE',
+};
+
+export const CATEGORY_OPTIONS = [
+  {
+    key: 'alertUpdate',
+    value: WHATSAPP_CATEGORIES.alertUpdate,
+    label: <FormattedMessage {...messages.alertUpdate} />,
+    tooltipLabel: <FormattedMessage {...messages[`alertUpdate${tooltip}`]} />,
+    tagColor: CAP_PURPLE03,
+    tagTextColor: CAP_PURPLE02,
+  },
+  {
+    key: 'accountUpdate',
+    label: <FormattedMessage {...messages.accountUpdate} />,
+    tooltipLabel: <FormattedMessage {...messages[`accountUpdate${tooltip}`]} />,
+    value: WHATSAPP_CATEGORIES.alertUpdate,
+    tagColor: CAP_ORANGE01,
+    tagTextColor: CAP_ORANGE,
+  },
+  {
+    key: 'appointmentUpdate',
+    value: WHATSAPP_CATEGORIES.appointmentUpdate,
+    label: <FormattedMessage {...messages.appointmentUpdate} />,
+    tooltipLabel: <FormattedMessage {...messages[`appointmentUpdate${tooltip}`]} />,
+    tagColor: CAP_GREEN02,
+    tagTextColor: CAP_GREEN01,
+  },
+  {
+    key: 'paymentUpdate',
+    value: WHATSAPP_CATEGORIES.paymentUpdate,
+    label: <FormattedMessage {...messages.paymentUpdate} />,
+    tooltipLabel: <FormattedMessage {...messages[`paymentUpdate${tooltip}`]} />,
+    tagColor: CAP_ORANGE01,
+    tagTextColor: CAP_ORANGE,
+  },
+  {
+    key: 'reservationUpdate',
+    value: WHATSAPP_CATEGORIES.reservationUpdate,
+    label: <FormattedMessage {...messages.reservationUpdate} />,
+    tooltipLabel: <FormattedMessage {...messages[`reservationUpdate${tooltip}`]} />,
+    tagColor: CAP_ORANGE01,
+    tagTextColor: CAP_ORANGE,
+  },
+];
+
+export const WHATSAPP_STATUSES = {
+  awaitingApproval: 'awaitingApproval',
+  approved: 'approved',
+  rejected: 'rejected',
+  pending: 'pending',
+  unsubmitted: 'unsubmitted',
+};
+
+export const STATUS_OPTIONS = [
+  {
+    key: 'awaitingApproval',
+    value: WHATSAPP_STATUSES.awaitingApproval,
+    label: <FormattedMessage {...messages.awaitingApproval} />,
+  },
+  {
+    key: 'approved',
+    value: WHATSAPP_STATUSES.approved,
+    label: <FormattedMessage {...messages.approved} />,
+  },
+  {
+    key: 'rejected',
+    value: WHATSAPP_STATUSES.rejected,
+    label: <FormattedMessage {...messages.rejected} />,
+  },
+];

package/v2Containers/Whatsapp/index.js

@@ -0,0 +1,469 @@
+/* eslint-disable no-undef */
+import React, { useState } from 'react';
+import { bindActionCreators } from 'redux';
+import { createStructuredSelector } from 'reselect';
+import { injectIntl, FormattedMessage } from 'react-intl';
+import styled from 'styled-components';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
+import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import CapError from '@capillarytech/cap-ui-library/CapError';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import {
+  CAP_SPACE_04,
+  CAP_SPACE_16,
+  CAP_SPACE_24,
+  CAP_SPACE_32,
+  CAP_WHITE,
+} from '@capillarytech/cap-ui-library/styled/variables';
+import {} from './selectors';
+import * as WhatsappActions from './actions';
+import './index.scss';
+import {
+  UNSUBSCRIBE_TEXT_LENGTH,
+  TEMPLATE_MESSAGE_MAX_LENGTH,
+  WHATSAPP,
+  CATEGORY_OPTIONS,
+} from './constants';
+import messages from './messages';
+import withCreatives from '../../hoc/withCreatives';
+import TemplatePreview from '../../v2Components/TemplatePreview';
+
+export const Whatsapp = (props) => {
+  const {
+    intl,
+    isFullMode,
+    handleClose,
+    location,
+    actions,
+    onCreateComplete,
+    selectedWeChatAccount = {},
+  } = props || {};
+  const { formatMessage } = intl;
+  const {
+    name: accountName = '',
+    configs: accountConfigs = {},
+    sourceAccountIdentifier: accountId = '',
+  } = selectedWeChatAccount;
+  const { accessToken = '' } = accountConfigs;
+  const { TextArea } = CapInput;
+  const [templateName, setTemplateName] = useState('');
+  const [templateNameError, setTemplateNameError] = useState(false);
+  const [templateCategory, setTemplateCategory] = useState(
+    formatMessage(messages.select),
+  );
+  const [templateMessage, setTemplateMessage] = useState('');
+  const [templateMessageError, setTemplateMessageError] = useState(false);
+  const [addedVarCount, setAddedVarCount] = useState(0);
+  const [spin, setSpin] = useState(false);
+
+  const StyledSelect = styled(CapSelect)`
+    margin-top: ${CAP_SPACE_16};
+  `;
+
+  const WhatsappFooter = 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 renderTemplateCategoryLabel = (tooltipLabel, title) => (
+    <CapRow>
+      <CapColumn span={23}>{title}</CapColumn>
+      <CapColumn span={1}>
+        <CapTooltipWithInfo
+          infoIconProps={{
+            style: { marginLeft: CAP_SPACE_16 },
+          }}
+          autoAdjustOverflow
+          placement="right"
+          title={tooltipLabel}
+        />
+      </CapColumn>
+    </CapRow>
+  );
+
+  const templateCategoryOptions = CATEGORY_OPTIONS.map((option) => ({
+    value: option.value,
+    label: renderTemplateCategoryLabel(option.tooltipLabel, option.label),
+  }));
+
+  const mediaRadioOptions = [
+    {
+      value: 'text',
+      label: formatMessage(messages.mediaTextMessage),
+    },
+    {
+      value: 'image',
+      label: (
+        <CapTooltip title={formatMessage(messages.disabledMediaTooltip)}>
+          {formatMessage(messages.mediaImage)}
+        </CapTooltip>
+      ),
+      disabled: true,
+    },
+    {
+      value: 'video',
+      label: (
+        <CapTooltip title={formatMessage(messages.disabledMediaTooltip)}>
+          {formatMessage(messages.mediaVideo)}
+        </CapTooltip>
+      ),
+      disabled: true,
+    },
+  ];
+
+  const onTemplateNameChange = ({ target: { value } }) => {
+    setTemplateName(value);
+    templateNameErrorHandler(value);
+  };
+
+  const templateNameErrorHandler = (value) => {
+    let errorMessage = false;
+    //regex to accept only lowercase alphanumeric characters and underscores
+    const templateNameRegex = /^[a-z0-9_]+$/;
+    if (value === '') {
+      errorMessage = formatMessage(messages.emptyTemplateNameErrorMessage);
+    } else if (!templateNameRegex.test(value)) {
+      errorMessage = formatMessage(messages.templateNameRegexErrorMessage);
+    }
+    setTemplateNameError(errorMessage);
+  };
+
+  const onTemplateCategoryChange = (value) => {
+    setTemplateCategory(value);
+  };
+  const renderHeading = (value) => (
+    <CapHeading type="h4" className="whatsapp-render-heading">
+      {formatMessage(messages[value])}
+    </CapHeading>
+  );
+
+  const onTemplateMessageChange = ({ target: { value } }) => {
+    const error = templateMessageErrorHandler(value);
+    setTemplateMessage(value);
+    setTemplateMessageError(error);
+  };
+
+  const templateMessageErrorHandler = (value) => {
+    let errorMessage = false;
+    if (value === '') {
+      errorMessage = formatMessage(messages.emptyTemplateMessageErrorMessage);
+    } else if (
+      UNSUBSCRIBE_TEXT_LENGTH + value?.length >
+      TEMPLATE_MESSAGE_MAX_LENGTH
+    ) {
+      errorMessage = formatMessage(messages.templateMessageLengthError);
+    } else {
+      const validVarRegex = /{{([1-9]|1[0-9])}}/g;
+      const validVarArr = value.match(validVarRegex) || [];
+      const validVarSet = [...new Set(validVarArr)];
+
+      const invalidVarRegex = /{{(.+?)}}/g;
+      const invalidVarArr = value.match(invalidVarRegex) || [];
+      const invalidVarSet = [...new Set(invalidVarArr)];
+
+      const spamVar = /}}[^a-zA-Z]*{{/g;
+
+      if (validVarArr?.length > 0 || invalidVarArr?.length > 0) {
+        if (validVarArr?.length !== validVarSet?.length) {
+          //checks for repetations like Hi {{1}}, offer for you {{1}}
+          errorMessage = formatMessage(messages.repetativeVars);
+        } else if (invalidVarSet?.length !== validVarSet?.length) {
+          //checks for invalid vars like Hi {{abcd}}, offer for you {{^_^}}
+          errorMessage = formatMessage(messages.unknownVars);
+        } else if (value.match(spamVar)?.length > 0) {
+          //checks for text between vars like Hi {{1}}{{2}}
+          errorMessage = formatMessage(messages.noContentBetweenVars);
+        } else {
+          //checks if vars are added sequentially like, Hi {{1}}, offer for you {{2}} today {{3}}
+          const checkSequence = [...validVarSet].filter(
+            (validVar, index) => `{{${index + 1}}}` !== validVar,
+          );
+          if (checkSequence?.length > 0) {
+            errorMessage = formatMessage(messages.sequenceVars);
+          } else {
+            setAddedVarCount(validVarSet?.length || 0);
+          }
+        }
+      }
+    }
+    return errorMessage;
+  };
+
+  const renderUnsubscribeText = () => (
+    <>
+      <CapColumn span={12}>
+        <CapTooltip
+          placement="bottom"
+          title={formatMessage(messages.unsubscribeTextTooltip)}
+        >
+          <CapHeading className="whatsapp-render-unsubscribe-text">
+            {formatMessage(messages.templateMessageUnsubscribeText)}
+          </CapHeading>
+        </CapTooltip>
+      </CapColumn>
+      <CapColumn span={12}></CapColumn>
+    </>
+  );
+
+  const renderMessageLength = () => (
+    <CapHeading type="h6" className="whatsapp-render-message-length">
+      {formatMessage(messages.templateMessageLength, {
+        currentLength: UNSUBSCRIBE_TEXT_LENGTH + templateMessage?.length,
+        maxLength: TEMPLATE_MESSAGE_MAX_LENGTH,
+      })}
+    </CapHeading>
+  );
+
+  const generateVarMapped = () => {
+    const varMappedObj = {};
+    const finalIndex = addedVarCount + 1;
+    for (let i = 1; i <= finalIndex; i += 1) {
+      if (i === addedVarCount + 1) {
+        varMappedObj[i] = '{{unsubscribe}}';
+      } else {
+        varMappedObj[i] = '';
+      }
+    }
+    return varMappedObj;
+  };
+
+  const createPayload = () => ({
+    name: templateName,
+    versions: {
+      base: {
+        content: {
+          whatsapp: {
+            category: templateCategory,
+            languages: [
+              {
+                language: 'en',
+                content: `$'${templateMessage}\nClick {{${
+                  addedVarCount + 1
+                }}} to unsubscribe'`,
+              },
+            ],
+            mediaType: 'text',
+            'var-mapped': generateVarMapped(),
+            accountId,
+            accessToken,
+            accountName,
+          },
+        },
+      },
+    },
+    type: WHATSAPP,
+  });
+
+  const actionCallback = ({ errorMessage, resp }) => {
+    const error = errorMessage?.message || errorMessage;
+    if (!error) {
+      CapNotification.success({
+        message: formatMessage(messages.whatsappCreateNotification, {
+          name: templateName,
+        }),
+      });
+      actions.clearCreateResponse();
+    } else {
+      CapNotification.error({
+        message: error,
+      });
+    }
+  };
+
+  const createApprovalHandler = () => {
+    setSpin(true);
+    actions.createWhatsappTemplate(createPayload(), (resp, errorMessage) => {
+      actionCallback({ resp, errorMessage });
+      if (!errorMessage) {
+        onCreateComplete();
+      } else {
+        setSpin(false);
+      }
+    });
+  };
+
+  const onDoneCallback = () => {
+    if (isFullMode) {
+      return createApprovalHandler;
+    }
+  };
+
+  const isDisableDone = () => {
+    //if template name is not entered
+    if (templateName.trim() === '' || templateNameError) {
+      return true;
+    }
+    //if template category is not selected
+    if (templateCategory === 'Select') {
+      return true;
+    }
+    //if template message is not entered
+    if (templateMessage.trim() === '' || templateMessageError) {
+      return true;
+    }
+    return false;
+  };
+
+  const getPreviewSection = () => {
+    const templateMsg = `${templateMessage}\n${formatMessage(
+      messages.templateMessageUnsubscribeText,
+    )}`;
+    return (
+      <TemplatePreview
+        channel={WHATSAPP}
+        content={{ templateMsg }}
+        whatsappAccountName={accountName}
+      />
+    );
+  };
+  return (
+    <CapSpin spinning={spin}>
+      <CapRow>
+        <CapColumn span={14}>
+          <CapInput
+            id={`whatsapp_template_name_input`}
+            onChange={onTemplateNameChange}
+            errorMessage={templateNameError}
+            placeholder={formatMessage(messages.templateNamePlaceholder)}
+            defaultValue={templateName || ''}
+            value={templateName || ''}
+            size="default"
+            label={
+              <CapHeader
+                title={
+                  <>
+                    {formatMessage(messages.templateNameLabel)}
+                    <CapTooltipWithInfo
+                      infoIconProps={{
+                        style: { marginLeft: CAP_SPACE_04 },
+                      }}
+                      autoAdjustOverflow
+                      title={
+                        <FormattedMessage {...messages.templateNameTooltip} />
+                      }
+                    />
+                  </>
+                }
+                description={formatMessage(messages.templateNameDesc)}
+                size="regular"
+              />
+            }
+          />
+          <StyledSelect
+            id={'select-whatsapp-category'}
+            label={formatMessage(messages.templateCategoryLabel)}
+            options={templateCategoryOptions || []}
+            onChange={onTemplateCategoryChange}
+            value={templateCategory}
+          />
+          {renderHeading('messageLanguageLabel')}
+          <CapInput
+            id={`whatsapp_template_language_input`}
+            defaultValue={'English'}
+            size="default"
+            disabled={true}
+          />
+          {renderHeading('mediaLabel')}
+          <CapRadioGroup
+            options={mediaRadioOptions || []}
+            defaultValue={'text'}
+          />
+          <CapHeading type="h4" className="whatsapp-render-heading">
+            <>
+              {formatMessage(messages.templateMessageLabel)}
+              <CapTooltipWithInfo
+                placement="right"
+                infoIconProps={{
+                  style: { marginLeft: CAP_SPACE_04 },
+                }}
+                autoAdjustOverflow
+                title={
+                  <FormattedMessage
+                    {...messages.templateMessageTooltip}
+                    values={{
+                      br: <br />,
+                      var: '{{1}}',
+                    }}
+                  />
+                }
+              />
+            </>
+          </CapHeading>
+          <CapRow className="whatsapp-template-message-input">
+            <TextArea
+              id={`whatsapp-template-message-input`}
+              autosize={{ minRows: 3, maxRows: 5 }}
+              placeholder={formatMessage(messages.templateMessagePlaceholder)}
+              onChange={onTemplateMessageChange}
+              errorMessage={
+                templateMessageError && (
+                  <CapError className="whatsapp-template-message-error">
+                    {templateMessageError}
+                  </CapError>
+                )
+              }
+              value={templateMessage || ''}
+            />
+            {renderUnsubscribeText()}
+          </CapRow>
+          {renderMessageLength()}
+          <div className="whatsapp-scroll-div" />
+        </CapColumn>
+        <CapColumn span={6}>
+          <CapRow>
+            <CapColumn span={24} offset={9}>
+              {getPreviewSection()}
+            </CapColumn>
+          </CapRow>
+        </CapColumn>
+      </CapRow>
+      <WhatsappFooter>
+        <CapButton
+          onClick={onDoneCallback()}
+          disabled={isDisableDone()}
+          className="whatsapp-create-btn"
+        >
+          <FormattedMessage {...messages.sendForApprovalButtonLabel} />
+        </CapButton>
+        <CapButton
+          onClick={handleClose}
+          className="whatsapp-cancel-btn"
+          type="secondary"
+        >
+          <FormattedMessage {...messages.cancelButtonLabel} />
+        </CapButton>
+      </WhatsappFooter>
+    </CapSpin>
+  );
+};
+
+const mapStateToProps = createStructuredSelector({});
+
+const mapDispatchToProps = (dispatch) => ({
+  actions: bindActionCreators(WhatsappActions, dispatch),
+});
+
+export default withCreatives({
+  WrappedComponent: injectIntl(Whatsapp),
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: true,
+});

package/v2Containers/Whatsapp/index.scss

@@ -0,0 +1,36 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+.whatsapp-render-heading {
+  margin-top: $CAP_SPACE_16;
+  margin-bottom: 6px;
+}
+.whatsapp-render-unsubscribe-text {
+  color: $FONT_COLOR_02;
+  margin: $CAP_SPACE_08 0px $CAP_SPACE_08 16px;
+}
+.whatsapp-render-message-length {
+  text-align: right;
+}
+.whatsapp-template-message-input {
+  background-color: $BG_01;
+  padding-top: $CAP_SPACE_16;
+}
+.whatsapp-template-message-error {
+  margin-left: $CAP_SPACE_16;
+  margin-right: $CAP_SPACE_16;
+}
+.whatsapp-scroll-div {
+  margin-bottom: 250px;
+}
+#whatsapp-template-message-input {
+  margin-left: $CAP_SPACE_16;
+  margin-right: $CAP_SPACE_16;
+  width: 95%;
+}
+#select-whatsapp-category {
+  width: 100%;
+}
+
+.whatsapp-category-tag {
+  margin-left: 8px;
+}