@capillarytech/creatives-library 8.0.136-alpha.4 → 8.0.136-beta.3

package/containers/LanguageProvider/index.js

@@ -0,0 +1,80 @@
+/*
+ *
+ * LanguageProvider
+ *
+ * this component connects the redux state language locale to the
+ * IntlProvider component and i18n messages (loaded from `app/translations`)
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { connect } from 'react-redux';
+import { IntlProvider } from 'react-intl';
+import { createStructuredSelector } from 'reselect';
+import { bindActionCreators } from 'redux';
+import { DEFAULT_LOCALE } from '../Cap/constants';
+import { makeSelectLocale } from './selectors';
+import makeSelectApp from '../App/selectors';
+import * as appActions from '../App/actions';
+import { getLocale } from '../../utils/ApiCaller';
+export class LanguageProvider extends React.PureComponent {
+  // eslint-disable-line react/prefer-stateless-function
+
+  componentDidMount() {
+    const jlocale = getLocale() || DEFAULT_LOCALE;
+    const locale = this.getReversedMappedLocale(jlocale);
+    this.props.actions.getLocizMessage(locale);
+    moment.locale(jlocale);
+  }
+
+  getReversedMappedLocale = locale => {
+    const map = {
+      en: 'en-US',
+      'zh-cn': 'zh',
+      hi: 'hi',
+      vi: 'vi',
+      tr: 'tr',
+      'ja-JP': 'ja-JP',
+    };
+    return map[locale];
+  };
+
+  render() {
+    const { messagesData } = this.props.messages;
+    return (
+      <IntlProvider
+        locale={this.props.locale}
+        key={this.props.locale}
+        messages={messagesData}
+      >
+        {React.Children.only(this.props.children)}
+      </IntlProvider>
+    );
+  }
+}
+
+LanguageProvider.propTypes = {
+  locale: PropTypes.string,
+  messages: PropTypes.object,
+  children: PropTypes.element.isRequired,
+  actions: PropTypes.object,
+};
+
+const mapStateToProps = createStructuredSelector({
+  messages: makeSelectApp(),
+  locale: makeSelectLocale(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(appActions, dispatch),
+  };
+}
+
+const withConnect = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+);
+
+export default withConnect(LanguageProvider);

package/containers/LanguageProvider/reducer.js

@@ -0,0 +1,30 @@
+/*
+ *
+ * LanguageProvider reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+
+import {
+  CHANGE_LOCALE,
+} from './constants';
+import {
+  DEFAULT_LOCALE,
+} from '../Cap/constants'; // eslint-disable-line
+
+const initialState = fromJS({
+  locale: DEFAULT_LOCALE,
+});
+
+function languageProviderReducer(state = initialState, action) {
+  switch (action.type) {
+    case CHANGE_LOCALE:
+      return state
+        .set('locale', action.locale);
+    default:
+      return state;
+  }
+}
+
+export default languageProviderReducer;

package/containers/LanguageProvider/selectors.js

@@ -0,0 +1,20 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the languageToggle state domain
+ */
+const selectLanguage = (state) => state.get('language');
+
+/**
+ * Select the language locale
+ */
+
+const makeSelectLocale = () => createSelector(
+  selectLanguage,
+  (languageState) => languageState.get('locale')
+);
+
+export {
+  selectLanguage,
+  makeSelectLocale,
+};

package/containers/LanguageProvider/tests/actions.test.js

@@ -0,0 +1,19 @@
+import {
+  changeLocale,
+} from '../actions';
+
+import {
+  CHANGE_LOCALE,
+} from '../constants';
+
+describe('LanguageProvider actions', () => {
+  describe('Change Local Action', () => {
+    test.concurrent('has a type of CHANGE_LOCALE', () => {
+      const expected = {
+        type: CHANGE_LOCALE,
+        locale: 'de',
+      };
+      expect(changeLocale('de')).toEqual(expected);
+    });
+  });
+});

package/containers/LanguageProvider/tests/index.test.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { FormattedMessage, defineMessages } from 'react-intl';
+import { Provider } from 'react-redux';
+import history from '../../../utils/history';
+
+import ConnectedLanguageProvider, { LanguageProvider } from '../index';
+import { configureStore }  from '@capillarytech/vulcan-react-sdk/utils';
+import { initialReducer } from '../../../initialReducer';
+
+import { translationMessages } from '../../../i18n';
+
+const messages = defineMessages({
+  someMessage: {
+    id: 'some.id',
+    defaultMessage: 'This is some default message',
+    en: 'This is some en message',
+  },
+});
+jest.mock('antd/es/locale-provider/en_US', () => 'enUS');
+jest.mock('antd/es/locale-provider/zh_CN', () => 'zhCN');
+jest.mock('antd/es/locale-provider/ja_JP', () => 'jaJP');
+
+describe('<LanguageProvider />', () => {
+  it('should render its children', () => {
+    const children = (<h1>Test</h1>);
+    const mockActions = {
+      getLocizMessage: jest.fn(),
+    };
+
+    const language={
+      locale: 'en',
+    };
+    
+    const props = {
+      messages : messages,
+      language: language,
+      actions: mockActions,
+    };
+    const renderedComponent = shallow(
+      <LanguageProvider {...props}>
+        {children}
+      </LanguageProvider>
+    );
+    expect(renderedComponent.contains(children)).toBe(true);
+  });
+});
+
+describe('<ConnectedLanguageProvider />', () => {
+  let store;
+
+  beforeAll(() => {
+    store = configureStore({}, initialReducer, history);
+  });
+
+  it('should render the default language messages', () => {
+    const mockActions = {
+      getLocizMessage: jest.fn(),
+    };
+    const language = {
+      locale: 'en',
+    }
+    const messages = {translationMessages}
+    const props = {
+      messages: messages,
+      language: language,
+      actions: mockActions,
+    }
+    const renderedComponent = shallow(
+      <Provider store={store}>
+        <ConnectedLanguageProvider {...props}>
+          <FormattedMessage {...messages.someMessage} />
+        </ConnectedLanguageProvider>
+      </Provider>
+    );
+    expect(renderedComponent.contains(<FormattedMessage {...messages.someMessage} />)).toBe(true);
+  });
+});

package/containers/LanguageProvider/tests/reducer.test.js

@@ -0,0 +1,20 @@
+import { fromJS } from 'immutable';
+
+import languageProviderReducer from '../reducer';
+import {
+  CHANGE_LOCALE,
+} from '../constants';
+
+describe('languageProviderReducer', () => {
+  it.concurrent('returns the initial state', () => {
+    expect(languageProviderReducer(undefined, {})).toEqual(fromJS({
+      locale: 'en',
+    }));
+  });
+
+  it.concurrent('changes the locale', () => {
+    expect(languageProviderReducer(undefined, { type: CHANGE_LOCALE, locale: 'de' }).toJS()).toEqual({
+      locale: 'de',
+    });
+  });
+});

package/containers/LanguageProvider/tests/selectors.test.js

@@ -0,0 +1,15 @@
+import { fromJS } from 'immutable';
+
+import {
+  selectLanguage,
+} from '../selectors';
+
+describe('selectLanguage', () => {
+  it.concurrent('should select the global state', () => {
+    const globalState = fromJS({});
+    const mockedState = fromJS({
+      language: globalState,
+    });
+    expect(selectLanguage(mockedState)).toEqual(globalState);
+  });
+});

package/containers/Line/Create/_lineCreate.scss

@@ -0,0 +1,54 @@
+.line-row{
+  margin-bottom: 16px;
+}
+.image-container{
+  display: flex;
+  // height: 150px;
+  // width: 320px;
+  // border: solid 1px #C2C2C2;
+  border-radius: 5px;
+  .image-placeholder{
+    line-height: 150px;
+  }
+  img {
+    object-fit: cover;
+    max-width: 100%;
+    max-height: 100%;
+    height: auto !important;
+    width: auto !important;
+  }
+}
+//.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;
+//}
+//.ant-radio-wrapper{
+//  font-size: 14px;
+//  font-family: 'open-sans';
+//}
+
+.ant-radio-inner::after{
+  top: 3px;
+  left: 3px;
+}
+.ant-radio-inner{
+  border: 1px solid #d9d9d9;
+}
+.ant-radio-checked .ant-radio-inner{
+  border: 1px solid #47af46;
+}
+
+.sms-text {
+  img {
+    display: block;
+    max-width: 100%;
+    object-fit: cover;
+  }
+}

package/containers/Line/Create/actions.js

@@ -0,0 +1,90 @@
+/*
+ *
+ * Create actions
+ *
+ */
+
+import * as types from './constants';
+
+export function createTemplate(template, callback) {
+  
+  return {
+    type: types.CREATE_TEMPLATE_REQUEST, template, callback,
+  };
+}
+
+export function clearCreateResponse() {
+  
+  return {
+    type: types.CLEAR_CREATE_RESPONSE_REQUEST,
+  };
+}
+
+export function defaultAction() {
+  return {
+    type: types.DEFAULT_ACTION,
+  };
+}
+
+export function uploadAsset(file, assetType, fileParams) {
+  return {
+    type: types.UPLOAD_ASSET_REQUEST,
+    file,
+    assetType,
+    fileParams,
+  };
+}
+
+export function clearAsset() {
+  return {
+    type: types.CLEAR_ASSET,
+  };
+}
+
+
+// FOR EDIT
+
+
+export function editTemplate(template) {
+  
+  return {
+    type: types.EDIT_TEMPLATE_REQUEST, template,
+  };
+};
+
+export function getTemplateDetails(id) {
+  
+  return {
+    type: types.GET_TEMPLATE_DETAILS_REQUEST,
+    id,
+    channel: 'LINE',
+  };
+};
+
+export function clearEditResponse() {
+  
+  return {
+    type: types.CLEAR_EDIT_RESPONSE_REQUEST,
+  };
+};
+
+export function clearData() {
+  return {
+    type: types.CLEAR_DATA,
+  };
+}
+
+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,
+  };
+};

package/containers/Line/Create/constants.js

@@ -0,0 +1,39 @@
+/*
+ *
+ * Create constants
+ *
+ */
+
+export const DEFAULT_ACTION = 'app/Create/DEFAULT_ACTION';
+
+
+export const CREATE_TEMPLATE_REQUEST = 'app/containers/Line/Create/CREATE_TEMPLATE_REQUEST';
+export const CREATE_TEMPLATE_SUCCESS = 'app/containers/Line/Create/CREATE_TEMPLATE_SUCCESS';
+export const CREATE_TEMPLATE_FAILURE = 'app/containers/Line/Create/CREATE_TEMPLATE_FAILURE';
+export const UPLOAD_ASSET_REQUEST = 'app/containers/Line/Create/UPLOAD_ASSET_REQUEST';
+export const UPLOAD_ASSET_SUCCESS = 'app/containers/Line/Create/UPLOAD_ASSET_SUCCESS';
+export const UPLOAD_ASSET_FAILURE = 'app/containers/Line/Create/UPLOAD_ASSET_FAILURE';
+export const CLEAR_ASSET = 'app/containers/Line/Create/CLEAR_ASSET';
+
+export const CLEAR_CREATE_RESPONSE_REQUEST = 'app/containers/Line/Create/CLEAR_CREATE_RESPONSE_REQUEST';
+export const CLEAR_CREATE_RESPONSE_SUCCESS = 'app/containers/Line/Create/CLEAR_CREATE_RESPONSE_SUCCESS';
+export const CLEAR_CREATE_RESPONSE_FAILURE = 'app/containers/Line/Create/CLEAR_CREATE_RESPONSE_FAILURE';
+
+
+// edit
+
+export const GET_TEMPLATE_DETAILS_REQUEST = 'app/containers/line/Edit/GET_TEMPLATE_DETAILS_REQUEST';
+export const GET_TEMPLATE_DETAILS_SUCCESS = 'app/containers/line/Edit/GET_TEMPLATE_DETAILS_SUCCESS';
+export const GET_TEMPLATE_DETAILS_FAILURE = 'app/containers/line/Edit/GET_TEMPLATE_DETAILS_FAILURE';
+
+export const EDIT_TEMPLATE_REQUEST = 'app/containers/line/Edit/EDIT_TEMPLATE_REQUEST';
+export const EDIT_TEMPLATE_SUCCESS = 'app/containers/line/Edit/EDIT_TEMPLATE_SUCCESS';
+export const EDIT_TEMPLATE_FAILURE = 'app/containers/line/Edit/EDIT_TEMPLATE_FAILURE';
+
+export const CLEAR_EDIT_RESPONSE_REQUEST = 'app/containers/line/Edit/CLEAR_EDIT_RESPONSE_REQUEST';
+export const CLEAR_DATA = 'app/containers/Line/Edit/CLEAR_DATA';
+export const SET_SELECTED_TEMPLATE = 'app/containers/Line/Edit/SET_SELECTED_TEMPLATE';
+
+export const GET_LINE_TEMPLATES_LIST_REQUEST = 'app/containers/Line/GET_LINE_TEMPLATES_LIST_REQUEST';
+export const GET_LINE_TEMPLATES_LIST_SUCCESS = 'app/containers/Line/GET_LINE_TEMPLATES_LIST_SUCCESS';
+export const GET_LINE_TEMPLATES_LIST_FAILURE = 'app/containers/Line/GET_LINE_TEMPLATES_LIST_FAILURE';