@capillarytech/creatives-library 7.11.8 → 7.11.10

package/v2Containers/Rcs/index.scss

@@ -0,0 +1,54 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+.cap-rcs-creatives {
+  .rcs-scroll-div {
+    margin-bottom: 250px;
+  }
+  .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-description {
+    display: -webkit-box;
+    -webkit-line-clamp: 7;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  .fallback-sms-length {
+    margin-top: 13px;
+    float: right;
+  }
+  #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;
+    }
+  }
+}

package/v2Containers/Rcs/messages.js

@@ -0,0 +1,109 @@
+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: 'Fall-back SMS message',
+  },
+  fallbackDesc: {
+    id: `${prefix}.fallbackDesc`,
+    defaultMessage: 'We would suggest to add fall-back SMS',
+  },
+  fallbackTextAreaLabel: {
+    id: `${prefix}.fallbackTextAreaLabel`,
+    defaultMessage: 'SMS message',
+  },
+  fallbackMsgPlaceholder: {
+    id: `${prefix}.fallbackMsgPlaceholder`,
+    defaultMessage: 'Enter the text message content for fall-back 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',
+  },
+  fallbackPreviewtitle: {
+    id: `${prefix}.fallbackPreviewtitle`,
+    defaultMessage: 'Preview of fall-back SMS',
+  },
+});

package/v2Containers/Rcs/reducer.js

@@ -0,0 +1,72 @@
+import { fromJS } from 'immutable';
+import {
+  UPLOAD_ASSET_REQUEST,
+  UPLOAD_ASSET_SUCCESS,
+  UPLOAD_ASSET_FAILURE,
+  CLEAR_ASSET,
+  CREATE_TEMPLATE_REQUEST,
+  CREATE_TEMPLATE_SUCCESS,
+  CREATE_TEMPLATE_FAILURE,
+  CLEAR_CREATE_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_ASSET_REQUEST:
+      return state.set('uploadAssetSuccess', false).set('assetUploading', true);
+    case UPLOAD_ASSET_SUCCESS:
+      return state
+        .set(
+          'uploadAssetSuccess',
+          statusCode !== undefined && statusCode !== '' && statusCode < 300,
+        )
+        .set('assetUploading', false)
+        .set(
+          templateType !== undefined
+            ? `uploadedAssetData${templateType}`
+            : 'uploadedAssetData',
+          data,
+        );
+    case UPLOAD_ASSET_FAILURE:
+      return state
+        .set('uploadAssetSuccess', false)
+        .set('assetUploading', false);
+    case CLEAR_ASSET:
+      return state.delete(
+        templateType !== undefined
+          ? `uploadedAssetData${templateType}`
+          : 'uploadedAssetData',
+      );
+    case CREATE_TEMPLATE_REQUEST:
+      return state
+        .set('createTemplateInProgress', true)
+        .set('createTemplateError', false)
+        .set('createTemplateErrorMessage', fromJS(''));
+    case CREATE_TEMPLATE_SUCCESS:
+      return state
+        .set('createTemplateInProgress', false)
+        .set('response', data)
+        .set(
+          'createTemplateError',
+          statusCode !== undefined && statusCode > 300,
+        )
+        .set('createTemplateErrorMessage', fromJS(errorMsg));
+    case CREATE_TEMPLATE_FAILURE:
+      return state
+        .set('createTemplateInProgress', false)
+        .set('createTemplateError', true)
+        .set('createTemplateErrorMessage', fromJS(errorMsg));
+    case CLEAR_CREATE_RESPONSE_REQUEST:
+      return state.set('response', {});
+    default:
+      return state;
+  }
+}
+
+export default rcsReducer;

package/v2Containers/Rcs/sagas.js

@@ -0,0 +1,72 @@
+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_ASSET_REQUEST,
+  UPLOAD_ASSET_SUCCESS,
+  UPLOAD_ASSET_FAILURE,
+  CREATE_TEMPLATE_REQUEST,
+  CREATE_TEMPLATE_SUCCESS,
+  CREATE_TEMPLATE_FAILURE,
+} from './constants';
+
+export function* uploadRcsAsset(file, assetType, fileParams) {
+  try {
+    const result = yield call(Api.uploadFile, file, assetType, fileParams);
+    yield put({
+      type: UPLOAD_ASSET_SUCCESS,
+      data: result.response.asset,
+      statusCode: result.status ? result.status.code : '',
+      templateType: file.templateType,
+    });
+  } catch (error) {
+    yield put({ UPLOAD_ASSET_FAILURE, error });
+  }
+}
+
+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_TEMPLATE_SUCCESS,
+      data: result.response,
+      statusCode: result.status ? result.status.code : '',
+      errorMsg,
+    });
+    if (callback) {
+      callback(result.response);
+    }
+  } catch (error) {
+    yield put({ type: CREATE_TEMPLATE_FAILURE, error, errorMsg });
+    if (callback) {
+      callback(null, errorMsg);
+    }
+  }
+}
+
+function* watchUploadRcsAsset() {
+  const watcher = yield takeLatest(UPLOAD_ASSET_REQUEST, uploadRcsAsset);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+function* watchCreateTemplate() {
+  const watcher = yield takeLatest(
+    CREATE_TEMPLATE_REQUEST,
+    createRCSTemplate,
+  );
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+// All sagas to be loaded
+export default [watchUploadRcsAsset, watchCreateTemplate];

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 };

package/v2Containers/Rcs/utils.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import { RCS } from '../CreativesContainer/constants';
+import './index.scss';
+export const getRCSContent = (template) => {
+  const {
+        name,
+        versions: {
+            base: {
+                content: {
+                    [RCS]: {
+                        cardContent = [{}],
+                    } = {},
+                } = {},
+            } = {},
+        } = {},
+    } = template;
+  const {description, media = {}} = cardContent[0];
+  const {mediaUrl} = media;
+  return (
+    <div className="cap-rcs-creatives">
+      <CapLabel type="label19" className="rcs-description">
+        {description}
+      </CapLabel>
+      {mediaUrl && (
+        <img
+          style={{ marginTop: '8px' }}
+          width={220}
+          height={103}
+          alt={''}
+          src={mediaUrl}
+          key={`mediaUrl-${name}`}
+        />
+      )}
+    </div>
+  );
+};

package/v2Containers/Templates/_templates.scss

@@ -574,9 +574,17 @@
   }
 }
 
-.whatsapp-illustration-desc {
+.illustration-desc {
   font-size: 14px;
   color: rgba(0, 0, 0, 0.87);
   margin: 8px 0;
   white-space: pre-wrap;
 }
+.rcs-illustration{
+  width: 25%;
+  text-align: center;
+}
+.channel-specific-illustration-text{
+  text-align: center;
+  margin-top: $CAP_SPACE_44;
+}

package/v2Containers/Templates/actions.js

@@ -5,7 +5,7 @@
  */
 
 import * as types from './constants';
-import { LINE, WHATSAPP } from '../CreativesContainer/constants';
+import { LINE, WHATSAPP, RCS } from '../CreativesContainer/constants';
 
 export function getAllTemplates(channel, queryParams) {
   return {
@@ -59,6 +59,7 @@ export function setChannelAccount(channel, account) {
   const channelTypeMapping = {
     [LINE]: types.SET_LINE_ACCOUNT,
     [WHATSAPP]: types.SET_WHATSAPP_ACCOUNT,
+    [RCS]: types.SET_RCS_ACCOUNT,
   };
   if (channelTypeMapping[channel]) {
     return {

package/v2Containers/Templates/constants.js

@@ -46,6 +46,7 @@ export const SET_LINE_ACCOUNT = "app/v2Containers/Templates/SET_LINE_ACCOUNT";
 export const SET_VIBER_ACCOUNT = "app/v2Containers/Templates/SET_VIBER_ACCOUNT";
 export const SET_FACEBOOK_ACCOUNT = "app/v2Containers/Templates/SET_FACEBOOK_ACCOUNT";
 export const SET_WHATSAPP_ACCOUNT = "app/v2Containers/Templates/SET_WHATSAPP_ACCOUNT";
+export const SET_RCS_ACCOUNT = "app/v2Containers/Templates/SET_RCS_ACCOUNT";
 
 export const GET_DEAFULT_BEE_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_REQUEST';
 export const GET_DEAFULT_BEE_TEMPLATES_SUCCESS = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_SUCCESS';