@capillarytech/creatives-library 7.10.39 → 7.10.41

package/v2Containers/Whatsapp/index.scss

@@ -0,0 +1,56 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+.whatsapp-render-heading {
+  margin-top: $CAP_SPACE_16;
+  margin-bottom: 6px;
+}
+.whatsapp-template-name-desc {
+  margin-bottom: 6px;
+}
+.whatsapp-create-render-unsubscribe-text {
+  color: $FONT_COLOR_02;
+  margin: $CAP_SPACE_08 0px $CAP_SPACE_08 16px;
+}
+.whatsapp-edit-render-unsubscribe-text {
+  color: $FONT_COLOR_02;
+}
+.whatsapp-render-message-length {
+  text-align: right;
+}
+.whatsapp-create-template-message-input {
+  background-color: #fafbfc;
+  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-category-tag {
+  margin-left: 8px;
+}
+.whatsapp-edit-alert-margin {
+  margin-top: 46px;
+}
+.whatsapp-edit-template-message-input {
+  background-color: #fafbfc;
+  padding: 0 $CAP_SPACE_16;
+}
+.whatsapp-edit-template-message-heading {
+  margin-top: $CAP_SPACE_16;
+  margin-bottom: $CAP_SPACE_08;
+}
+.whatsapp-edit-disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+#whatsapp-create-template-message-input {
+  margin-left: $CAP_SPACE_16;
+  margin-right: $CAP_SPACE_16;
+  width: 95%;
+}
+#select-whatsapp-category {
+  width: 100%;
+}

package/v2Containers/Whatsapp/messages.js

@@ -0,0 +1,221 @@
+import { defineMessages } from 'react-intl';
+const prefix = `creatives.containersV2.Whatsapp`;
+export default defineMessages({
+  templateNameLabel: {
+    id: `${prefix}.templateNameLabel`,
+    defaultMessage: 'Template name',
+  },
+  templateNameDesc: {
+    id: `${prefix}.templateNameDesc`,
+    defaultMessage:
+      'Must be a unique name and can only contain lowercase alphanumeric characters and underscores.',
+  },
+  templateNamePlaceholder: {
+    id: `${prefix}.templateNamePlaceholder`,
+    defaultMessage: 'Enter template name',
+  },
+  templateNameTooltip: {
+    id: `${prefix}.templateNameTooltip`,
+    defaultMessage: `Tip : Use a name that helps WhatsApp's reviewer understand the purpose of your message, for example "order_delivery" rather than "template_1"`,
+  },
+  emptyTemplateNameErrorMessage: {
+    id: `${prefix}.emptyTemplateNameErrorMessage`,
+    defaultMessage: 'Template name cannot be empty',
+  },
+  templateNameRegexErrorMessage: {
+    id: `${prefix}.templateNameRegexErrorMessage`,
+    defaultMessage:
+      'Template name can only contain lowercase alphanumeric characters and underscores',
+  },
+  templateCategoryLabel: {
+    id: `${prefix}.templateCategoryLabel`,
+    defaultMessage: 'Template category',
+  },
+  select: {
+    id: `${prefix}.select`,
+    defaultMessage: 'Select',
+  },
+  accountUpdate: {
+    id: `${prefix}.accountUpdate`,
+    defaultMessage: 'Account update',
+  },
+  accountUpdateTooltip: {
+    id: `${prefix}.accountUpdateTooltip`,
+    defaultMessage:
+      'Let customers know about updates or changes to their accounts.',
+  },
+  alertUpdate: {
+    id: `${prefix}.alertUpdate`,
+    defaultMessage: 'Alert update',
+  },
+  alertUpdateTooltip: {
+    id: `${prefix}.alertUpdateTooltip`,
+    defaultMessage: 'Send important updates or news to customers.',
+  },
+  appointmentUpdate: {
+    id: `${prefix}.appointmentUpdate`,
+    defaultMessage: 'Appointment update',
+  },
+  appointmentUpdateTooltip: {
+    id: `${prefix}.appointmentUpdateTooltip`,
+    defaultMessage:
+      'Send confirmations, reminders, or other updates to customers about their appointments.',
+  },
+  paymentUpdate: {
+    id: `${prefix}.paymentUpdate`,
+    defaultMessage: 'Payment update',
+  },
+  paymentUpdateTooltip: {
+    id: `${prefix}.paymentUpdateTooltip`,
+    defaultMessage: 'Send a message to customers about their payment.',
+  },
+  reservationUpdate: {
+    id: `${prefix}.reservationUpdate`,
+    defaultMessage: 'Reservation update',
+  },
+  reservationUpdateTooltip: {
+    id: `${prefix}.reservationUpdateTooltip`,
+    defaultMessage:
+      'Send confirmations, reminders, or other updates to customers about their reservations.',
+  },
+  messageLanguageLabel: {
+    id: `${prefix}.messageLanguageLabel`,
+    defaultMessage: 'Message language',
+  },
+  templateLanguageEnglish: {
+    id: `${prefix}.templateLanguageEnglish`,
+    defaultMessage: 'English',
+  },
+  mediaLabel: {
+    id: `${prefix}.mediaLabel`,
+    defaultMessage: 'Media',
+  },
+  mediaTextMessage: {
+    id: `${prefix}.mediaTextMessage`,
+    defaultMessage: 'Text Message',
+  },
+  mediaImage: {
+    id: `${prefix}.mediaImage`,
+    defaultMessage: 'Image',
+  },
+  mediaVideo: {
+    id: `${prefix}.mediaVideo`,
+    defaultMessage: 'Video',
+  },
+  disabledMediaTooltip: {
+    id: `${prefix}.disabledMediaTooltip`,
+    defaultMessage: 'Not yet enabled. Coming soon!',
+  },
+  templateMessageLabel: {
+    id: `${prefix}.templateMessageLabel`,
+    defaultMessage: 'Message',
+  },
+  templateMessageTooltip: {
+    id: `${prefix}.templateMessageTooltip`,
+    defaultMessage:
+      'You can write variables by adding two curly brackets before the variable name and two curly brackets after the variable name.{br}{br}Tip :{br}It looks something like this: Hi {var},{br}so 1 is the variable name here.',
+  },
+  emptyTemplateMessageErrorMessage: {
+    id: `${prefix}.emptyTemplateMessageErrorMessage`,
+    defaultMessage: 'Template message cannot be empty',
+  },
+  templateMessagePlaceholder: {
+    id: `${prefix}.templateMessagePlaceholder`,
+    defaultMessage: 'Enter message with variable',
+  },
+  templateMessageLength: {
+    id: `${prefix}.templateMessageLength`,
+    defaultMessage: 'Characters count: {currentLength}/{maxLength}',
+  },
+  templateMessageLengthError: {
+    id: `${prefix}.templateMessageLengthError`,
+    defaultMessage: 'Template message length cannot exceed 1024',
+  },
+  templateMessageUnsubscribeText: {
+    id: `${prefix}.templateMessageUnsubscribeText`,
+    defaultMessage: 'Click {{unsubscribe}} to unsubscribe',
+  },
+  unsubscribeTextTooltip: {
+    id: `${prefix}.unsubscribeTextTooltip`,
+    defaultMessage: 'This is non-editable',
+  },
+  repetativeVars: {
+    id: `${prefix}.repetativeVars`,
+    defaultMessage: 'Variables cannot be repeated',
+  },
+  unknownVars: {
+    id: `${prefix}.unknownVars`,
+    defaultMessage:
+      'Variable name should be numeric value from {{1}} to {{19}}',
+  },
+  noContentBetweenVars: {
+    id: `${prefix}.noContentBetweenVars`,
+    defaultMessage: 'Add atleast 1 character between 2 variables',
+  },
+  sequenceVars: {
+    id: `${prefix}.sequenceVars`,
+    defaultMessage:
+      'Variable name should start from {{1}} and it should be in sequential order',
+  },
+  sendForApprovalButtonLabel: {
+    id: `${prefix}.sendForApprovalButtonLabel`,
+    defaultMessage: 'Send for approval',
+  },
+  cancelButtonLabel: {
+    id: `${prefix}.cancelButtonLabel`,
+    defaultMessage: 'Cancel',
+  },
+  whatsappCreateNotification: {
+    id: `${prefix}.whatsappCreateNotification`,
+    defaultMessage: '{name} has been sent for approval',
+  },
+  awaitingApproval: {
+    id: `${prefix}.awaitingApproval`,
+    defaultMessage: 'Awaiting approval',
+  },
+  approved: {
+    id: `${prefix}.approved`,
+    defaultMessage: 'Approved',
+  },
+  rejected: {
+    id: `${prefix}.rejected`,
+    defaultMessage: 'Rejected',
+  },
+  languageLabel: {
+    id: `${prefix}.languageLabel`,
+    defaultMessage: 'Language',
+  },
+  labelSeperator: {
+    id: `${prefix}.labelSeperator`,
+    defaultMessage: '|',
+  },
+  approvedStatusMsg: {
+    id: `${prefix}.approvedStatusMsg`,
+    defaultMessage: 'This template has been approved',
+  },
+  rejectedStatusMsg: {
+    id: `${prefix}.rejectedStatusMsg`,
+    defaultMessage: 'This template has been rejected',
+  },
+  awaitingStatusMsg: {
+    id: `${prefix}.awaitingStatusMsg`,
+    defaultMessage: 'This template is awaiting approval',
+  },
+  awaitingStatusDesc: {
+    id: `${prefix}.awaitingStatusDesc`,
+    defaultMessage:
+      'The template has been sent for approval at {date}, {time}. It takes up to 48 hrs to get approved.',
+  },
+  addLabels: {
+    id: `${prefix}.addLabels`,
+    defaultMessage: 'Add labels',
+  },
+  inputplaceHolderText: {
+    id: `${prefix}.inputplaceHolderText`,
+    defaultMessage: '{value} Add labels or text or combination of both',
+  },
+  disabledEditTooltip: {
+    id: `${prefix}.disabledEditTooltip`,
+    defaultMessage: 'This template is non-editable as this is {status}',
+  },
+});

package/v2Containers/Whatsapp/reducer.js

@@ -0,0 +1,54 @@
+import { fromJS } from 'immutable';
+import {
+  TEMPLATE_CREATE_REQUEST,
+  TEMPLATE_CREATE_SUCCESS,
+  TEMPLATE_CREATE_FAILURE,
+  CLEAR_CREATE_RESPONSE_REQUEST,
+  GET_TEMPLATE_DETAILS_REQUEST,
+  GET_TEMPLATE_DETAILS_SUCCESS,
+  GET_TEMPLATE_DETAILS_FAILURE,
+  RESET_EDIT_TEMPLATE,
+} from './constants';
+
+const initialState = fromJS({ createTemplateInProgress: false });
+
+function whatsappReducer(state = initialState, action) {
+  switch (action.type) {
+    case TEMPLATE_CREATE_REQUEST:
+      return state
+        .set('createTemplateInProgress', true)
+        .set('createTemplateError', false)
+        .set('createTemplateErrorMessage', fromJS(''));
+    case TEMPLATE_CREATE_SUCCESS:
+      return state
+        .set('createTemplateInProgress', false)
+        .set('response', action.data)
+        .set(
+          'createTemplateError',
+          action.statusCode !== undefined && action.statusCode > 300,
+        )
+        .set('createTemplateErrorMessage', fromJS(action.errorMsg));
+    case TEMPLATE_CREATE_FAILURE:
+      return state
+        .set('createTemplateInProgress', false)
+        .set('createTemplateError', true)
+        .set('createTemplateErrorMessage', fromJS(action.errorMsg));
+    case CLEAR_CREATE_RESPONSE_REQUEST:
+      return state.set('response', {});
+    // FOR EDIT
+    case GET_TEMPLATE_DETAILS_REQUEST:
+      return state.set('getTemplateDetailsInProgress', true);
+    case GET_TEMPLATE_DETAILS_SUCCESS:
+      return state
+        .set('getTemplateDetailsInProgress', false)
+        .set('templateDetails', action.data);
+    case GET_TEMPLATE_DETAILS_FAILURE:
+      return state.set('getTemplateDetailsInProgress', false);
+    case RESET_EDIT_TEMPLATE:
+      return state.set('templateDetails', {});
+    default:
+      return state;
+  }
+}
+
+export default whatsappReducer;

package/v2Containers/Whatsapp/sagas.js

@@ -0,0 +1,77 @@
+import { take, cancel, call, put, takeLatest } from 'redux-saga/effects';
+import { LOCATION_CHANGE } from 'react-router-redux';
+import * as Api from '../../services/api';
+import {
+  TEMPLATE_CREATE_REQUEST,
+  TEMPLATE_CREATE_SUCCESS,
+  TEMPLATE_CREATE_FAILURE,
+  WHATSAPP,
+  GET_TEMPLATE_DETAILS_REQUEST,
+  GET_TEMPLATE_DETAILS_SUCCESS,
+  GET_TEMPLATE_DETAILS_FAILURE,
+} from './constants';
+
+export function* sendForApprovalCreate({ payload, callback }) {
+  let errorMsg;
+  try {
+    const result = yield call(Api.createWhatsappTemplate, { payload });
+    if (result?.status?.code && result.status.code >= 400) {
+      errorMsg = result?.message || result.status.code;
+      throw errorMsg;
+    }
+    yield put({
+      type: TEMPLATE_CREATE_SUCCESS,
+      data: result.response,
+      statusCode: result.status ? result.status.code : '',
+      errorMsg,
+    });
+    if (callback) {
+      callback(result.response);
+    }
+  } catch (error) {
+    yield put({
+      type: TEMPLATE_CREATE_FAILURE,
+      error,
+      errorMsg,
+    });
+    if (callback) {
+      callback(null, errorMsg);
+    }
+  }
+}
+
+function* watchCreateTemplate() {
+  const watcher = yield takeLatest(
+    TEMPLATE_CREATE_REQUEST,
+    sendForApprovalCreate,
+  );
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+// FOR EDIT
+export function* getTemplateDetails({ id }) {
+  try {
+    const result = yield call(Api.getTemplateDetails, {
+      id,
+      channel: WHATSAPP,
+    });
+    yield put({
+      type: GET_TEMPLATE_DETAILS_SUCCESS,
+      data: result.response,
+    });
+  } catch (error) {
+    yield put({ type: GET_TEMPLATE_DETAILS_FAILURE, error });
+  }
+}
+
+function* watchGetTemplateDetails() {
+  const watcher = yield takeLatest(
+    GET_TEMPLATE_DETAILS_REQUEST,
+    getTemplateDetails,
+  );
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+export default [watchCreateTemplate, watchGetTemplateDetails];

package/v2Containers/Whatsapp/selectors.js

@@ -0,0 +1,12 @@
+import { createSelector } from 'reselect';
+
+const selectWhatsappDomain = () => (state) => state.get('whatsapp');
+const selectAccountDomain = () => (state) => state.get('templates');
+
+const makeSelectWhatsapp = () =>
+  createSelector(selectWhatsappDomain(), (substate) => substate.toJS());
+
+const makeSelectAccount = () =>
+  createSelector(selectAccountDomain(), (substate) => substate.toJS());
+
+export { makeSelectWhatsapp, makeSelectAccount };