@capillarytech/creatives-library 7.12.1 → 7.12.3

package/v2Containers/Rcs/index.scss

@@ -0,0 +1,72 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+.cap-rcs-creatives {
+  .rcs-scroll-div {
+    margin-bottom: 150px;
+  }
+  .rcs-preview-container {
+    .cap-row-v2 {
+      position: fixed;
+    }
+  }
+  .rcs-optional-label {
+    margin-left: 8px;
+    color: $FONT_COLOR_03;
+    font-weight: normal;
+  }
+  .rcs-radio > label.ant-radio-wrapper {
+    margin-right: 50px;
+  }
+  .rcs-dlt-fallback-card {
+    max-width: 420px;
+  }
+  .rcs-dlt-fallback-card.ant-card-bordered > div {
+    padding: 12px;
+  }
+  .rcs-listing-content {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    &.title{
+      -webkit-line-clamp: 1;
+    }
+    &.desc{
+      -webkit-line-clamp: 5;
+    }
+  }
+  .rcs-listing-image {
+    margin-bottom: 8px;
+    width: 220px;
+    height: 103px;
+  }
+  .fallback-sms-length {
+    margin-top: 13px;
+    float: right;
+  }
+  .rcs-fallback-len-error{
+    margin-top: 8px;
+  }
+  #rcs-template-title-input {
+    padding-right: 10%;
+  }
+  #rcs-template-message-label .ant-btn.cap-button-v2 {
+    height: 32px;
+  }
+  #rcs-template-message-label {
+    margin-top: 20px;
+  }
+  .cap-custom-image-upload {
+    .dragger-button.re-upload {
+      margin-top: 50px;
+      top: 46px;
+      position: absolute;
+      right: 20px;
+      color: $FONT_COLOR_05;
+    }
+  }
+}
+.rcs-fallback-preview > .cap-slide-box-v2-container.size-r{
+    min-width: 430px;
+    max-width: 430px;
+    width: 430px;
+}

package/v2Containers/Rcs/messages.js

@@ -0,0 +1,122 @@
+import { defineMessages } from 'react-intl';
+const prefix = `creatives.containersV2.Rcs`;
+
+export default defineMessages({
+  mediaLabel: {
+    id: `${prefix}.mediaLabel`,
+    defaultMessage: 'Media',
+  },
+  mediaNone: {
+    id: `${prefix}.mediaNone`,
+    defaultMessage: 'None',
+  },
+  mediaImage: {
+    id: `${prefix}.mediaImage`,
+    defaultMessage: 'Image',
+  },
+  image: {
+    id: `${prefix}.image`,
+    defaultMessage: 'image',
+  },
+  mediaVideo: {
+    id: `${prefix}.mediaVideo`,
+    defaultMessage: 'Video/Slideshow',
+  },
+  disabledMediaTooltip: {
+    id: `${prefix}.disabledMediaTooltip`,
+    defaultMessage: 'Not yet enabled. Coming soon!',
+  },
+  templateTitlePlaceholder: {
+    id: `${prefix}.templateTitlePlaceholder`,
+    defaultMessage: 'Enter title',
+  },
+  templateTitle: {
+    id: `${prefix}.templateTitle`,
+    defaultMessage: 'Title',
+  },
+  optional: {
+    id: `${prefix}.optional`,
+    defaultMessage: ' (Optional)',
+  },
+  templateDescPlaceholder: {
+    id: `${prefix}.templateDescPlaceholder`,
+    defaultMessage: 'Enter the text message',
+  },
+  emptyTemplateDescErrorMessage: {
+    id: `${prefix}.emptyTemplateDescErrorMessage`,
+    defaultMessage: 'Template message cannot be empty',
+  },
+  templateDescLabel: {
+    id: `${prefix}.templateDescLabel`,
+    defaultMessage: 'Text message',
+  },
+  textMessage: {
+    id: `${prefix}.textMessage`,
+    defaultMessage: 'text message',
+  },
+  templateDescLengthError: {
+    id: `${prefix}.templateDescLengthError`,
+    defaultMessage: 'Template message length cannot exceed 1000',
+  },
+  rcsDoneBtnToolTip: {
+    id: `${prefix}.rcsDoneBtnToolTip`,
+    defaultMessage: 'Please add template name & {type} to proceed further',
+  },
+  fallbackLabel: {
+    id: `${prefix}.fallbackLabel`,
+    defaultMessage: 'Fallback SMS message',
+  },
+  fallbackDesc: {
+    id: `${prefix}.fallbackDesc`,
+    defaultMessage: 'We would suggest to add fallback SMS',
+  },
+  fallbackToolTip: {
+    id: `${prefix}.fallbackToolTip`,
+    defaultMessage:
+      'This is to deliver an RCS message as an SMS message to end users whose phones do not support RCS',
+  },
+  fallbackMsgLenError: {
+    id: `${prefix}.fallbackMsgLenError`,
+    defaultMessage: 'Only 1 SMS (160 characters) allowed for fallback sms',
+  },
+  fallbackTextAreaLabel: {
+    id: `${prefix}.fallbackTextAreaLabel`,
+    defaultMessage: 'SMS message',
+  },
+  fallbackMsgPlaceholder: {
+    id: `${prefix}.fallbackMsgPlaceholder`,
+    defaultMessage: 'Enter the text message content for fallback SMS',
+  },
+  totalCharacters: {
+    id: `${prefix}.totalCharacters`,
+    defaultMessage: '{smsCount} SMS ({number} characters)',
+  },
+  addSmsCreative: {
+    id: `${prefix}.addSmsCreative`,
+    defaultMessage: 'Add SMS creative',
+  },
+  rcsDltTitle: {
+    id: `${prefix}.rcsDltTitle`,
+    defaultMessage: 'SMS creative templates',
+  },
+  rcsDltDesc: {
+    id: `${prefix}.rcsDltDesc`,
+    defaultMessage: 'Select any of the existing templates',
+  },
+  dltEditHeader: {
+    id: `${prefix}.dltEditHeader`,
+    defaultMessage: 'Edit SMS',
+  },
+  rcsCreateNotification: {
+    id: `${prefix}.rcsCreateNotification`,
+    defaultMessage: 'RCS template created successfully',
+  },
+  rcsEditNotification: {
+    id: `${prefix}.rcsEditNotification`,
+    defaultMessage: 'RCS template updated successfully',
+  },
+  fallbackPreviewtitle: {
+    id: `${prefix}.fallbackPreviewtitle`,
+    defaultMessage: 'Preview of fallback SMS',
+  },
+});

package/v2Containers/Rcs/reducer.js

@@ -0,0 +1,107 @@
+import { fromJS } from 'immutable';
+import {
+  UPLOAD_RCS_ASSET_REQUEST,
+  UPLOAD_RCS_ASSET_SUCCESS,
+  UPLOAD_RCS_ASSET_FAILURE,
+  CLEAR_RCS_ASSET,
+  CREATE_RCS_TEMPLATE_REQUEST,
+  CREATE_RCS_TEMPLATE_SUCCESS,
+  CREATE_RCS_TEMPLATE_FAILURE,
+  CLEAR_CREATE_RESPONSE_REQUEST,
+  GET_RCS_TEMPLATE_DETAILS_REQUEST,
+  GET_RCS_TEMPLATE_DETAILS_SUCCESS,
+  GET_RCS_TEMPLATE_DETAILS_FAILURE,
+  EDIT_RCS_TEMPLATE_REQUEST,
+  EDIT_RCS_TEMPLATE_SUCCESS,
+  EDIT_RCS_TEMPLATE_FAILURE,
+  CLEAR_EDIT_RESPONSE_REQUEST,
+} from './constants';
+
+export const initialState = fromJS({
+  uploadedAssetData: {},
+  createTemplateInProgress: false,
+});
+
+function rcsReducer(state = initialState, action) {
+  const { type, statusCode, templateType, data, errorMsg } = action;
+  switch (type) {
+    case UPLOAD_RCS_ASSET_REQUEST:
+      return state.set('uploadAssetSuccess', false).set('assetUploading', true);
+    case UPLOAD_RCS_ASSET_SUCCESS:
+      return state
+        .set(
+          'uploadAssetSuccess',
+          statusCode !== undefined && statusCode !== '' && statusCode < 300,
+        )
+        .set('assetUploading', false)
+        .set(
+          templateType !== undefined
+            ? `uploadedAssetData${templateType}`
+            : 'uploadedAssetData',
+          data,
+        );
+    case UPLOAD_RCS_ASSET_FAILURE:
+      return state
+        .set('uploadAssetSuccess', false)
+        .set('assetUploading', false);
+    case CLEAR_RCS_ASSET:
+      return state.delete(
+        templateType !== undefined
+          ? `uploadedAssetData${templateType}`
+          : 'uploadedAssetData',
+      );
+    case CREATE_RCS_TEMPLATE_REQUEST:
+      return state
+        .set('createTemplateInProgress', true)
+        .set('createTemplateError', false)
+        .set('createTemplateErrorMessage', fromJS(''));
+    case CREATE_RCS_TEMPLATE_SUCCESS:
+      return state
+        .set('createTemplateInProgress', false)
+        .set('response', data)
+        .set(
+          'createTemplateError',
+          statusCode !== undefined && statusCode > 300,
+        )
+        .set('createTemplateErrorMessage', fromJS(errorMsg));
+    case CREATE_RCS_TEMPLATE_FAILURE:
+      return state
+        .set('createTemplateInProgress', false)
+        .set('createTemplateError', true)
+        .set('createTemplateErrorMessage', fromJS(errorMsg));
+    case CLEAR_CREATE_RESPONSE_REQUEST:
+      return state.set('response', {});
+    // FOR EDIT
+    case GET_RCS_TEMPLATE_DETAILS_REQUEST:
+      return state.set('getTemplateDetailsInProgress', true);
+    case GET_RCS_TEMPLATE_DETAILS_SUCCESS:
+      return state
+        .set('getTemplateDetailsInProgress', false)
+        .set('templateDetails', data);
+    case GET_RCS_TEMPLATE_DETAILS_FAILURE:
+      return state.set('getTemplateDetailsInProgress', false);
+    // FOR EDIT
+    case EDIT_RCS_TEMPLATE_REQUEST:
+      return state
+        .set('editTemplateInProgress', true)
+        .set('editTemplateError', false)
+        .set('editTemplateErrorMessage', fromJS(''));
+    case EDIT_RCS_TEMPLATE_SUCCESS:
+      return state
+        .set('editTemplateInProgress', false)
+        .set('editResponse', data)
+        .set('editTemplateError', statusCode !== undefined && statusCode > 300)
+        .set('editTemplateErrorMessage', fromJS(errorMsg));
+    case EDIT_RCS_TEMPLATE_FAILURE:
+      return state
+        .set('editTemplateInProgress', false)
+        .set('editTemplateError', true)
+        .set('editTemplateErrorMessage', fromJS(errorMsg));
+    case CLEAR_EDIT_RESPONSE_REQUEST:
+      return state.set('templateDetails', {});
+    default:
+      return state;
+  }
+}
+
+export default rcsReducer;

package/v2Containers/Rcs/sagas.js

@@ -0,0 +1,141 @@
+import { take, cancel, call, put, takeLatest } from 'redux-saga/effects';
+import { LOCATION_CHANGE } from 'react-router-redux';
+import * as Api from '../../services/api';
+import {
+  RCS,
+  UPLOAD_RCS_ASSET_REQUEST,
+  UPLOAD_RCS_ASSET_SUCCESS,
+  UPLOAD_RCS_ASSET_FAILURE,
+  CREATE_RCS_TEMPLATE_REQUEST,
+  CREATE_RCS_TEMPLATE_SUCCESS,
+  CREATE_RCS_TEMPLATE_FAILURE,
+  GET_RCS_TEMPLATE_DETAILS_REQUEST,
+  GET_RCS_TEMPLATE_DETAILS_SUCCESS,
+  GET_RCS_TEMPLATE_DETAILS_FAILURE,
+  EDIT_RCS_TEMPLATE_REQUEST,
+  EDIT_RCS_TEMPLATE_SUCCESS,
+  EDIT_RCS_TEMPLATE_FAILURE,
+} from './constants';
+
+export function* uploadRcsAsset(file, assetType, fileParams) {
+  try {
+    const result = yield call(Api.uploadFile, file, assetType, fileParams);
+    yield put({
+      type: UPLOAD_RCS_ASSET_SUCCESS,
+      data: result.response.asset,
+      statusCode: result.status ? result.status.code : '',
+      templateType: file.templateType,
+    });
+  } catch (error) {
+    yield put({ UPLOAD_RCS_ASSET_FAILURE, error });
+  }
+}
+function* watchUploadRcsAsset() {
+  const watcher = yield takeLatest(UPLOAD_RCS_ASSET_REQUEST, uploadRcsAsset);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+export function* createRCSTemplate({ template, callback }) {
+  let errorMsg;
+  try {
+    const result = yield call(Api.createChannelWiseTemplate, {
+      channel: RCS,
+      template,
+    });
+    if (result.status.code >= 400) {
+      errorMsg = result.message;
+      throw errorMsg;
+    }
+    yield put({
+      type: CREATE_RCS_TEMPLATE_SUCCESS,
+      data: result.response,
+      statusCode: result.status ? result.status.code : '',
+      errorMsg,
+    });
+    if (callback) {
+      callback(result.response);
+    }
+  } catch (error) {
+    yield put({ type: CREATE_RCS_TEMPLATE_FAILURE, error, errorMsg });
+    if (callback) {
+      callback(null, errorMsg);
+    }
+  }
+}
+function* watchCreateTemplate() {
+  const watcher = yield takeLatest(
+    CREATE_RCS_TEMPLATE_REQUEST,
+    createRCSTemplate,
+  );
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+// FOR EDIT
+export function* editTemplate({ template, callback }) {
+  let errorMsg;
+  try {
+    const result = yield call(Api.createChannelWiseTemplate, {
+      channel: RCS,
+      template,
+    });
+    if (result.status.code >= 400) {
+      errorMsg = result.message;
+      throw errorMsg;
+    }
+    yield put({
+      type: EDIT_RCS_TEMPLATE_SUCCESS,
+      data: result.response,
+      statusCode: result.status ? result.status.code : '',
+      errorMsg,
+    });
+    if (callback) {
+      callback(result.response);
+    }
+  } catch (error) {
+    yield put({ type: EDIT_RCS_TEMPLATE_FAILURE, error, errorMsg });
+    if (callback) {
+      callback(null, errorMsg);
+    }
+  }
+}
+function* watchEditTemplate() {
+  const watcher = yield takeLatest(EDIT_RCS_TEMPLATE_REQUEST, editTemplate);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+export function* getTemplateDetails({ id, callback }) {
+  try {
+    const result = yield call(Api.getTemplateDetails, {
+      id,
+      channel: RCS,
+    });
+    yield put({
+      type: GET_RCS_TEMPLATE_DETAILS_SUCCESS,
+      data: result.response,
+    });
+    if (callback) {
+      callback(false);
+    }
+  } catch (error) {
+    yield put({ type: GET_RCS_TEMPLATE_DETAILS_FAILURE, error });
+  }
+}
+function* watchGetTemplateDetails() {
+  const watcher = yield takeLatest(
+    GET_RCS_TEMPLATE_DETAILS_REQUEST,
+    getTemplateDetails,
+  );
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+// All sagas to be loaded
+export default [
+  watchUploadRcsAsset,
+  watchCreateTemplate,
+  watchGetTemplateDetails,
+  watchEditTemplate,
+];

package/v2Containers/Rcs/selectors.js

@@ -0,0 +1,8 @@
+import { createSelector } from 'reselect';
+
+const selectRcsDomain = () => (state) => state.get('rcs');
+
+const makeSelectRcs = () =>
+  createSelector(selectRcsDomain(), (substate) => substate && substate.toJS());
+
+export { makeSelectRcs };