@capillarytech/creatives-library 7.6.12 → 7.6.13

package/v2Containers/Line/Create/reducer.js

@@ -0,0 +1,99 @@
+/*
+ *
+ * Create reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import * as types from './constants';
+
+const initialState = fromJS({
+  createTemplateInProgress: false,
+  response: {},
+  uploadedAssetData: {},
+});
+
+function createReducer(state = initialState, action) {
+  switch (action.type) {
+    case types.DEFAULT_ACTION:
+      return state;
+    case types.CREATE_TEMPLATE_REQUEST:
+      return state
+        .set('createTemplateInProgress', true)
+        .set('createTemplateError', false)
+        .set('createTemplateErrorMessage', fromJS(""));
+    case types.CREATE_TEMPLATE_SUCCESS:
+      return state.set('createTemplateInProgress', false)
+        .set('response', action.data)
+        .set('createTemplateError', (action.statusCode !== undefined && action.statusCode > 300))
+        .set('createTemplateErrorMessage', fromJS(action.errorMsg));
+    case types.CREATE_TEMPLATE_FAILURE:
+      return state
+        .set('createTemplateInProgress', false)
+        .set('createTemplateError', true)
+        .set('createTemplateErrorMessage', fromJS(action.errorMsg));
+    case types.CLEAR_CREATE_RESPONSE_REQUEST:
+      return state.set('response', {});
+    case types.UPLOAD_ASSET_REQUEST:
+      return state
+        .set('uploadAssetSuccess', false)
+        .set('assetUploading', true);
+    case types.UPLOAD_ASSET_SUCCESS:
+      return state
+        .set('uploadAssetSuccess', (action.statusCode !== undefined && action.statusCode !== '' && action.statusCode < 300))
+        .set('assetUploading', false)
+        .set('uploadedAssetData', action.data);
+    case types.UPLOAD_ASSET_FAILURE:
+      return state
+        .set('uploadAssetSuccess', false)
+        .set('assetUploading', false);
+    case types.CLEAR_ASSET:
+      return state
+        .delete('uploadedAssetData');
+      // FOR EDIT
+    case types.EDIT_TEMPLATE_REQUEST:
+      return state
+        .set('editTemplateInProgress', true)
+        .set('editTemplateError', false)
+        .set('editTemplateErrorMessage', fromJS(""));
+    case types.EDIT_TEMPLATE_SUCCESS:
+      return state.set('editTemplateInProgress', false)
+        .set('editResponse', action.data)
+        .set('editTemplateError', (action.statusCode !== undefined && action.statusCode > 300))
+        .set('editTemplateErrorMessage', fromJS(action.errorMsg));
+    case types.EDIT_TEMPLATE_FAILURE:
+      return state
+        .set('editTemplateInProgress', false)
+        .set('editTemplateError', true)
+        .set('editTemplateErrorMessage', fromJS(action.errorMsg));
+    case types.GET_TEMPLATE_DETAILS_REQUEST:
+      return state.set('getTemplateDetailsInProgress', true);
+    case types.GET_TEMPLATE_DETAILS_SUCCESS:
+      return state.set('getTemplateDetailsInProgress', false)
+        .set('templateDetails', action.data);
+    case types.GET_TEMPLATE_DETAILS_FAILURE:
+      return state.set('getTemplateDetailsInProgress', false);
+    case types.CLEAR_EDIT_RESPONSE_REQUEST:
+      return state.set('editResponse', {});
+    case types.CLEAR_DATA:
+      return state
+        .delete('uploadedAssetData')
+        .delete('metaEntities')
+        .delete('templateDetails');
+    case types.GET_LINE_TEMPLATES_LIST_REQUEST:
+      return state
+        .set('fetchingDefaultTemplates', true);
+    case types.GET_LINE_TEMPLATES_LIST_SUCCESS:
+      return state
+        .set('fetchingDefaultTemplates', false)
+        .set('lineTemplates', fromJS(action.data));
+    case types.GET_LINE_TEMPLATES_LIST_FAILURE:
+      return state
+        .set('fetchingDefaultTemplates', false)
+        .set('errorFetchingDefaultTempalte', true);
+    default:
+      return state;
+  }
+}
+
+export default createReducer;

package/v2Containers/Line/Create/sagas.js

@@ -0,0 +1,113 @@
+// Line Sagas
+
+import { take, cancel, call, put, takeLatest } from 'redux-saga/effects';
+import { LOCATION_CHANGE } from 'react-router-redux';
+import * as Api from '../../../services/api';
+import * as types from './constants';
+
+// Individual exports for testing
+export function* createTemplate({ template, callback }) {
+  let errorMsg;
+  try {
+    console.log('inside line saga createTemplate@@@', template);
+    const result = yield call(Api.createLineTemplate, { template });
+    if (result.message || result.status.code === 500) {
+      errorMsg = result.message;
+    }
+    yield put({ type: types.CREATE_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
+    if (callback) {
+      callback(result.response);
+    }
+  } catch (error) {
+    yield put({ type: types.CREATE_TEMPLATE_FAILURE, error, errorMsg });
+  }
+}
+export function* uploadAsset(file, assetType, fileParams) {
+  try {
+    const result = yield call(Api.uploadFile, file, assetType, fileParams);
+    yield put({ type: types.UPLOAD_ASSET_SUCCESS, data: result.response.asset, statusCode: result.status ? result.status.code : '' });
+  } catch (error) {
+    yield put({ type: types.UPLOAD_ASSET_FAILURE, error });
+  }
+}
+
+function* watchCreateTemplate() {
+  console.log('inside watch line saga createTemplate@@@');
+  const watcher = yield takeLatest(types.CREATE_TEMPLATE_REQUEST, createTemplate);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+function* watchUploadAsset() {
+  console.log("inside watchUploadAsset");
+  const watcher = yield takeLatest(types.UPLOAD_ASSET_REQUEST, uploadAsset);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+// edit
+
+export function* editTemplate({ template, callback }) {
+  let errorMsg;
+  try {
+    console.log('saga editTemplate line', template);
+    const result = yield call(Api.createLineTemplate, {template});
+    console.log('saga editTemplate success line', result);
+    if (result.message || result.status.code === 500) {
+      errorMsg = result.message;
+    }
+    if (callback) {
+      callback(result.response);
+    }
+    yield put({ type: types.EDIT_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
+  } catch (error) {
+    yield put({ type: types.EDIT_TEMPLATE_FAILURE, error, errorMsg });
+  }
+}
+
+export function* getTemplateDetails(id) {
+  try {
+    console.log('saga get Template details line', id);
+    const result = yield call(Api.getTemplateDetails, id);
+    // const sidebar = result.response.sidebar;
+    yield put({ type: types.GET_TEMPLATE_DETAILS_SUCCESS, data: result.response });
+  } catch (error) {
+    yield put({ type: types.GET_TEMPLATE_DETAILS_FAILURE, error });
+  }
+}
+
+export function* getLineTemplatesList(params) {
+  try {
+    console.log('Saga param line ', params.channel, params.queryParams);
+    const result = yield call(Api.getAllTemplates, {channel: params.channel, queryParams: params.queryParams});
+    yield put({ type: types.GET_LINE_TEMPLATES_LIST_SUCCESS, data: result.response.templates, templateData: result.response.mapped});
+  } catch (error) {
+    yield put({ type: types.GET_LINE_TEMPLATES_LIST_FAILURE, error });
+  }
+}
+
+function* watchEditTemplate() {
+  const watcher = yield takeLatest(types.EDIT_TEMPLATE_REQUEST, editTemplate);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+function* watchGetTemplateDetails() {
+  const watcher = yield takeLatest(types.GET_TEMPLATE_DETAILS_REQUEST, getTemplateDetails);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+function* watchLineTemplatesList() {
+  const watcher = yield takeLatest(types.GET_LINE_TEMPLATES_LIST_REQUEST, getLineTemplatesList);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+// All sagas to be loaded
+export default [
+  watchCreateTemplate,
+  watchUploadAsset,
+  watchEditTemplate,
+  watchGetTemplateDetails,
+  watchLineTemplatesList,
+];

package/v2Containers/Line/Create/selectors.js

@@ -0,0 +1,30 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the create state domain
+ */
+const selectLineDomain = () => (state) => state.get('templates');
+const selectLineMessageEditDomain = () => (state) => state.get('lineCreate');
+
+/**
+ * Other specific selectors
+ */
+
+
+/**
+ * Default selector used by Create & Edit
+ */
+
+const makeSelectLine = () => createSelector(
+  selectLineDomain(),
+  (substate) => substate && substate.toJS()
+);
+
+const makeSelectCreateLine = () => createSelector(
+  selectLineMessageEditDomain(),
+  (substate) => substate && substate.toJS()
+);
+
+export {
+  makeSelectLine, makeSelectCreateLine,
+};

package/v2Containers/Line/CreateWrapper/constants.js

@@ -0,0 +1,2 @@
+export const TEXT = 'text';
+export const IMAGE = 'image';

package/v2Containers/Line/CreateWrapper/index.js

@@ -0,0 +1,117 @@
+/*
+ *
+ * CreateLineWrapper
+ *
+ */
+import React, {useState} from 'react';
+import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
+import PropTypes from 'prop-types';
+import { CapRadioCard, CapLabel, CapButton } from '@capillarytech/cap-ui-library';
+import ComponentWithLabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
+import styled from 'styled-components';
+import { CAP_SPACE_04, CAP_SPACE_08, CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
+import messages from './messages';
+import mapTemplateImage from "../../../assets/mapTemplate.png";
+import lineImageTemplate from "../../../assets/lineImageTemplate.png";
+import { TEXT, IMAGE } from './constants';
+import LineCreate from '../Create';
+
+const CapRadioCardWithLabel = ComponentWithLabelHOC(CapRadioCard);
+const CardContainer = styled.div`
+  margin-top: ${CAP_SPACE_16};
+  .component-with-label-label{
+    margin-bottom: unset;
+  }
+  .ant-radio-group{
+    .ant-radio-button-wrapper{
+      &:first-child{
+        margin-left: unset;
+        margin-top: unset;
+      }
+    }
+    
+  }
+`;
+
+const CreateLineWrapper = (props) => {
+  const { intl: { formatMessage }, selectedAccount } = props;
+
+  const getModes = (modeList) => (
+    modeList.map(({ label, imageSrc, type, title }) => ({
+      title: <FormattedMessage {...messages[title]}/>,
+      content: (
+        <>
+          <CapLabel type="label1" style={{ paddingTop: CAP_SPACE_04, paddingBottom: CAP_SPACE_08 }}>
+            {formatMessage(messages[label])}
+          </CapLabel>
+          <img alt="" className="template-image" src={imageSrc} />
+        </>
+      ),
+      value: type,
+    }))
+  );
+
+  const modes = [
+    {
+      title: 'textTemplateTitle',
+      label: 'textTemplateDescription',
+      imageSrc: mapTemplateImage,
+      type: TEXT,
+    },
+    {
+      title: 'imageTemplateTitle',
+      label: 'imageTemplateDescription',
+      imageSrc: lineImageTemplate,
+      type: IMAGE,
+    },
+  ];
+
+  const [selectedLineTemplateOption, updateSelectedLineTemplateOption] = useState();
+  const [showOptions, onSelectContinue] = useState(true);
+
+  const onOptionSelect = (event) => updateSelectedLineTemplateOption(event.target.value);
+
+  if (showOptions) {
+    return (
+      <>
+        <CardContainer>
+          <CapRadioCardWithLabel
+            label={<FormattedMessage {...messages.templateType}/>}
+            panes={getModes(modes)}
+            cardHeight={"364px"}
+            onChange={onOptionSelect}
+            selected={selectedLineTemplateOption}
+          />
+        </CardContainer>
+        {
+          selectedLineTemplateOption && (
+            <CapButton
+              key="submit"
+              type="primary"
+              onClick={() => onSelectContinue(false)}
+              style={{marginTop: 10}}
+            >
+              <FormattedMessage {...messages.continue} />
+            </CapButton>
+          )
+        }
+      </>
+    );
+  }
+
+  return (
+    <LineCreate
+      {...props}
+      params={{mode: selectedLineTemplateOption}}
+      route={{name: selectedLineTemplateOption}}
+      selectedAccount={selectedAccount}
+    />
+  );
+};
+
+CreateLineWrapper.propTypes = {
+  intl: intlShape.isRequired,
+  selectedAccount: PropTypes.object,
+};
+
+export default injectIntl(CreateLineWrapper);

package/v2Containers/Line/CreateWrapper/messages.js

@@ -0,0 +1,55 @@
+/*
+ * Create Line Messages
+ *
+ * This contains all the text for the Create component.
+ */
+import { defineMessages } from 'react-intl';
+
+const prefix = 'creatives.containersV2.Line.CreateWrapper';
+
+export default defineMessages({
+  "textTemplateTitle": {
+    id: `${prefix}.textTemplateTitle`,
+    defaultMessage: 'Text template',
+  },
+  "textTemplateDescription": {
+    id: `${prefix}.textTemplateDescription`,
+    defaultMessage: 'Used for announcing offers and transaction related information',
+  },
+  "imageTemplateTitle": {
+    id: `${prefix}.imageTemplateTitle`,
+    defaultMessage: 'Image/video template',
+  },
+  "imageTemplateDescription": {
+    id: `${prefix}.imageTemplateDescription`,
+    defaultMessage: 'Used for creating image or video content',
+  },
+  "hybridTemplateTitle": {
+    id: `${prefix}.hybridTemplateTitle`,
+    defaultMessage: 'Hybrid',
+  },
+  "hybridTemplateDescription": {
+    id: `${prefix}.hybridTemplateDescription`,
+    defaultMessage: 'Used to create combined text & image or video content',
+  },
+  "templateType": {
+    id: `${prefix}.templateType`,
+    defaultMessage: 'Select the type of content',
+  },
+  "continue": {
+    id: `${prefix}.continue`,
+    defaultMessage: 'Continue',
+  },
+  "accountLineListTitle": {
+    id: `${prefix}.accountLineListTitle`,
+    defaultMessage: 'Line accounts',
+  },
+  "accountLineListDescription": {
+    id: `${prefix}.accountLineListDescription`,
+    defaultMessage: 'Choose the account to send content',
+  },
+  "accountLineNoListTitle": {
+    id: `${prefix}.accountLineNoListTitle`,
+    defaultMessage: 'No line accounts present',
+  },
+});

package/v2Containers/Line/Edit/_lineEdit.scss

@@ -0,0 +1,23 @@
+.line-edit {
+  .mobile-push-row{
+    margin-bottom: 16px;
+  }
+  .image-container{
+    border: solid 1px #C2C2C2;
+    border-radius: 5px;
+    .image-placeholder{
+      line-height: 150px;
+    }
+  }
+  .ant-tabs-bar{
+    margin-bottom: 0 !important;
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+  }
+  .ant-tabs-tabpane{
+    padding: 16px 16px 16px 0;
+    border: solid 1px #D6D6D6;
+  }
+}

package/v2Containers/Line/Edit/actions.js

@@ -0,0 +1,79 @@
+/*
+ *
+ * Create actions
+ *
+ */
+
+
+import * as types from "../../Line/Edit/constants";
+
+export function defaultAction() {
+  return {
+    type: types.DEFAULT_ACTION,
+  };
+}
+
+export function editTemplate(template) {
+  console.log('action trigereed editTemplate line @@@');
+  return {
+    type: types.EDIT_TEMPLATE_REQUEST, template,
+  };
+}
+
+export function getTemplateDetails(id) {
+  console.log('getting template line @@@', id);
+  return {
+    type: types.GET_TEMPLATE_DETAILS_REQUEST, id,
+  };
+}
+
+export function uploadAsset(file, assetType, fileParams, mode) {
+  return {
+    type: types.UPLOAD_ASSET_REQUEST,
+    file,
+    assetType,
+    fileParams,
+    mode,
+  };
+}
+
+export function clearEditResponse() {
+  console.log('clearEditResponse');
+  return {
+    type: types.CLEAR_EDIT_RESPONSE_REQUEST,
+  };
+}
+
+export function clearData() {
+  return {
+    type: types.CLEAR_DATA,
+  };
+}
+
+export function clearAsset() {
+  return {
+    type: types.CLEAR_ASSET,
+  };
+}
+
+export function getLineTemplatesList(channel, queryParams) {
+  return {
+    type: types.GET_LINE_TEMPLATES_LIST_REQUEST,
+    channel,
+    queryParams,
+  };
+}
+
+export function setSelectedTemplate(templateData) {
+  return {
+    type: types.SET_SELECTED_TEMPLATE,
+    data: templateData,
+  };
+}
+
+export function setTemplateDetails(templateDetails) {
+  return {
+    type: types.GET_TEMPLATE_DETAILS_SUCCESS,
+    data: templateDetails,
+  };
+}

package/v2Containers/Line/Edit/constants.js

@@ -0,0 +1,27 @@
+/*
+ *
+ * Edit constants
+ *
+ */
+
+export const DEFAULT_ACTION = 'app/Edit/DEFAULT_ACTION';
+
+export const GET_TEMPLATE_DETAILS_REQUEST = 'app/v2Containers/line/Edit/GET_TEMPLATE_DETAILS_REQUEST';
+export const GET_TEMPLATE_DETAILS_SUCCESS = 'app/v2Containers/line/Edit/GET_TEMPLATE_DETAILS_SUCCESS';
+export const GET_TEMPLATE_DETAILS_FAILURE = 'app/v2Containers/line/Edit/GET_TEMPLATE_DETAILS_FAILURE';
+
+export const EDIT_TEMPLATE_REQUEST = 'app/v2Containers/line/Edit/EDIT_TEMPLATE_REQUEST';
+export const EDIT_TEMPLATE_SUCCESS = 'app/v2Containers/line/Edit/EDIT_TEMPLATE_SUCCESS';
+export const EDIT_TEMPLATE_FAILURE = 'app/v2Containers/line/Edit/EDIT_TEMPLATE_FAILURE';
+
+export const CLEAR_EDIT_RESPONSE_REQUEST = 'app/v2Containers/line/Edit/CLEAR_EDIT_RESPONSE_REQUEST';
+export const UPLOAD_ASSET_REQUEST = 'app/v2Containers/Line/Edit/UPLOAD_ASSET_REQUEST';
+export const UPLOAD_ASSET_SUCCESS = 'app/v2Containers/Line/Edit/UPLOAD_ASSET_SUCCESS';
+export const UPLOAD_ASSET_FAILURE = 'app/v2Containers/Line/Edit/UPLOAD_ASSET_FAILURE';
+export const CLEAR_DATA = 'app/v2Containers/Line/Edit/CLEAR_DATA';
+export const CLEAR_ASSET = 'app/v2Containers/Line/Edit/CLEAR_ASSET';
+export const SET_SELECTED_TEMPLATE = 'app/v2Containers/Line/Edit/SET_SELECTED_TEMPLATE';
+
+export const GET_LINE_TEMPLATES_LIST_REQUEST = 'app/v2Containers/Line/GET_LINE_TEMPLATES_LIST_REQUEST';
+export const GET_LINE_TEMPLATES_LIST_SUCCESS = 'app/v2Containers/Line/GET_LINE_TEMPLATES_LIST_SUCCESS';
+export const GET_LINE_TEMPLATES_LIST_FAILURE = 'app/v2Containers/Line/GET_LINE_TEMPLATES_LIST_FAILURE';