@capillarytech/creatives-library 1.0.1-alpha.0 → 1.0.2

package/components/pages/Cap/selectors.js

@@ -26,7 +26,6 @@ const makeSelectGlobal = () =>
 const makeSelectOrg = () =>
   createSelector(selectCapDomain, (substate = fromJS({})) => ({
     fetchingUserdata: substate.get('fetchingUserdata'),
-    fetchUserStatusCode: substate.get('fetchUserStatusCode'),
     orgID: substate.get('orgID'),
   }));
 
@@ -96,7 +95,7 @@ const makeSelectProgramFilterType = () =>
 
 const makeSelectFieldData = () =>
   createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    getFieldDataStatus: substate.get('getFieldDataStatus')?.toJS(),
+    getFieldDataStatus: substate.get('getFieldDataStatus'),
     allContributors: substate.get('allContributors')?.toJS(),
     entities: substate.get('entities')?.toJS(),
     getFieldDataError: substate.get('getFieldDataError'),
@@ -145,13 +144,6 @@ const makeSelectEMFStatus = () =>
     EMFStatusError: substate.get('EMFStatusError'),
   }));
 
-const makeSelectDemoVideoAndLink = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    demoVideoAndLinkJSON: substate.get('demoVideoAndLinkJSON'),
-    demoVideoAndLinkJSONStatus: substate.get('demoVideoAndLinkJSONStatus'),
-    demoVideoAndLinkJSONError: substate.get('demoVideoAndLinkJSONError'),
-  }));
-
 const makeSelectUserGroupV2Status = () =>
   createSelector(selectCapDomain, (substate = fromJS({})) => ({
     getUserGroupV2Status: substate.get('getUserGroupV2Status'),
@@ -159,27 +151,6 @@ const makeSelectUserGroupV2Status = () =>
     getUserGroupV2Error: substate.get('getUserGroupV2Error'),
   }));
 
-const makeSelectBulkConfigStatus = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    getBulkConfigStatus: substate.get('getBulkConfigStatus'),
-    bulkConfigStatus: substate.get('bulkConfigStatus'),
-    getBulkConfigError: substate.get('getBulkConfigError'),
-  }));
-
-const makeSelectCDNConfigStatus = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    getCDNConfigStatus: substate.get('getCDNTransformationConfigStatus'),
-    CDNConfigStatus: substate.get('CDNTransformationConfigStatus')?.toJS(),
-    getCDNConfigError: substate.get('getCDNTransformationConfigError'),
-  }));
-
-const makeSelectGroupRedemptionStatus = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    getGroupRedemptionStatus: substate.get('getGroupRedemptionStatus'),
-    groupRedemptionStatus: substate.get('groupRedemptionStatus')?.toJS(),
-    getGroupRedemptionError: substate.get('getGroupRedemptionError'),
-  }));
-
 const makeSelectTierSecondaryCriteria = () =>
   createSelector(selectCapDomain, (substate = fromJS({})) => ({
     tierSecondaryCriteria: substate.get('tierSecondaryCriteria')?.toJS(),
@@ -199,90 +170,6 @@ const makeSelectAllSenderDetails = () =>
     emailSenderDetails: substate.get('emailSenderDetails')?.toJS(),
     getAllSenderDetailsError: substate.get('getAllSenderDetailsError'),
   }));
-
-const makeSelectTimeZone = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    getTimeZoneStatus: substate.get('getTimeZoneStatus'),
-    timezone: substate.get('timezone'),
-  }));
-
-const makeSelectCustomerActivity = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    getCustomerActivityStatus:
-      substate && substate.get('getCustomerActivityStatus'),
-    customerActivity: substate && substate.get('customerActivity')?.toJS(),
-  }));
-
-const makeSelectUsers = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    getUsersByIdsStatus: substate.get('getUsersByIdsStatus'),
-    usersList: substate.get('usersList')?.toJS(),
-    usersObj:
-      substate
-        .get('usersList')
-        ?.toJS()
-        ?.reduce((acc, user) => {
-          acc[user.userId] = `${user.firstName} ${user.lastName}`;
-          return acc;
-        }, {}) || {},
-  }));
-
-const makeSelectTiers = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => substate.toJS());
-
-const makeSelectCustomLabels = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    getCustomLabelsStatus: substate.get('getCustomLabelsStatus'),
-    customLabels: substate.get('customLabels'),
-    upsertCustomLabelStatus: substate.get('upsertCustomLabelStatus'),
-  }));
-
-const makeSelectMessage = () =>
-  createSelector(selectCapDomain, globalState =>
-    globalState.get('messages').toJS(),
-  );
-const makeSelectAlternateCurrencyFlagStatus = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    getAlternateCurrencyStatus: substate.get('getAlternateCurrencyStatus'),
-    alternateCurrencyStatus: substate.get('alternateCurrencyStatus')?.toJS(),
-    getAlternateCurrencyError: substate.get('getAlternateCurrencyError'),
-  }));
-
-const makeSelectSegregatePromotionsFlagStatus = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    getSegregatePromotionsStatus: substate.get('getSegregatePromotionsStatus'),
-    getSegregatePromotionsData: substate
-      .get('getSegregatePromotionsData')
-      ?.toJS(),
-    getSegregatePromotionsError: substate.get('getSegregatePromotionsError'),
-  }));
-
-const makeSelectAdditionalSlabUpgradeAndRenewal = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    getAdditionalSlabStatus: substate.get('getAdditionalSlabStatus'),
-    getAdditionalSlab: substate.get('getAdditionalSlab')?.toJS(),
-    getAdditionalSlabError: substate.get('getAdditionalSlabError'),
-  }));
-
-const makeSelectSavedProgramConfigDetails = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    savingProgramConfigStatus: substate.get('savingProgramConfigStatus'),
-    savedProgramConfigData: substate.get('savedProgramConfigData')?.toJS(),
-  }));
-
-const makeSelectGetProgramConfigDetails = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    fetchingProgramConfigStatus: substate.get('fetchingProgramConfigStatus'),
-    fetchedProgramConfigData: substate.get('fetchedProgramConfigData')?.toJS(),
-    fetchingProgramConfigError: substate.get('fetchingProgramConfigError'),
-  }));
-
-const makeSelectExtendedFields = () =>
-  createSelector(selectCapDomain, (substate = fromJS({})) => ({
-    extendedFields: substate && substate.get('extendedFields'),
-    getExtendedFieldStatus: substate && substate.get('getExtendedFieldStatus'),
-  }));
-
 export {
   selectCapDomain,
   makeSelectOrg,
@@ -306,20 +193,4 @@ export {
   makeSelectPrograms,
   makeSelectAllSenderDetails,
   makeSelectUserGroupV2Status,
-  makeSelectCustomerActivity,
-  makeSelectUsers,
-  makeSelectTiers,
-  makeSelectCustomLabels,
-  makeSelectTimeZone,
-  makeSelectBulkConfigStatus,
-  makeSelectGroupRedemptionStatus,
-  makeSelectDemoVideoAndLink,
-  makeSelectMessage,
-  makeSelectAlternateCurrencyFlagStatus,
-  makeSelectAdditionalSlabUpgradeAndRenewal,
-  makeSelectSavedProgramConfigDetails,
-  makeSelectGetProgramConfigDetails,
-  makeSelectExtendedFields,
-  makeSelectCDNConfigStatus,
-  makeSelectSegregatePromotionsFlagStatus,
 };

package/components/pages/Cap/style.js

@@ -69,11 +69,3 @@ export const Flex = styled.div`
   align-items: ${props => (props.align ? 'flex-start' : 'center')};
 `;
 export const GRAY = '#dcdddf';
-
-export const CenteredDiv = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  width: 100%;
-`;

package/components/pages/ConfigureProgram/ConfigureProgram.js

@@ -1,16 +1,16 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from 'react-intl';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import { Auth } from '@capillarytech/cap-ui-utils';
+import injectSaga from 'utils/injectSaga';
 import { createStructuredSelector } from 'reselect';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import withErrorBoundary from 'utils/withErrorBoundary';
+import creativesSagas from '../../organisms/Creatives/saga';
 import ConfigureProgramSteps from '../../organisms/ConfigureProgramSteps';
 import { makeSelectCap } from '../Cap/selectors';
-//import { LOYALTY_PROMOTION_ENABLED } from '../App/constants';
-import * as programSummaryContext from '../ProgramSummary/context';
-const { getProgramContext } = programSummaryContext;
 
 export const ConfigureProgram = ({
   className,
@@ -19,15 +19,7 @@ export const ConfigureProgram = ({
   pointStrategy = {},
   refreshStrategyData = () => {},
   pointTypeIdData = {},
-  hasLabelCustomisationEnabled = false,
-  setVersion = () => {},
-  configureModeStep,
-  createOrRestoreRulesetsDraft = () => {},
-  isFixedValueEmptyForUntilTierUpgradeValidity,
-  setIsFixedValueEmptyForUntilTierUpgradeValidity,
 }) => {
-  const { mode, version, orgConfigDetailsList } = getProgramContext();
-
   const { currentOrgDetails: { accessibleFeatures = [] } = {} } = userData;
   useEffect(
     () => {
@@ -42,40 +34,23 @@ export const ConfigureProgram = ({
   return (
     <CapRow className={className}>
       <ConfigureProgramSteps
-        configureModeStep={configureModeStep}
         currentProgram={currentProgram}
         refreshStrategyData={refreshStrategyData}
         pointStrategy={pointStrategy}
         pointTypeIdData={pointTypeIdData}
-        /* Commented code to serve as a reference for implementing feature control for promotions in the future. */
-        // hasNewUIPromotionEnabled={accessibleFeatures.includes(
-        //   LOYALTY_PROMOTION_ENABLED,
-        // )}
-        hasNewUIPromotionEnabled
-        hasLabelCustomisationEnabled={hasLabelCustomisationEnabled}
-        orgConfigDetailsList={orgConfigDetailsList}
-        setVersion={setVersion}
-        version={version}
-        mode={mode}
-        createOrRestoreRulesetsDraft={createOrRestoreRulesetsDraft}
-        isFixedValueEmptyForUntilTierUpgradeValidity={isFixedValueEmptyForUntilTierUpgradeValidity}
-        setIsFixedValueEmptyForUntilTierUpgradeValidity={setIsFixedValueEmptyForUntilTierUpgradeValidity}
       />
     </CapRow>
   );
 };
 
 ConfigureProgram.propTypes = {
+  intl: intlShape.isRequired,
   className: PropTypes.string,
   userData: PropTypes.object,
   currentProgram: PropTypes.object,
   pointStrategy: PropTypes.object,
   refreshStrategyData: PropTypes.func,
   pointTypeIdData: PropTypes.object,
-  hasLabelCustomisationEnabled: PropTypes.bool,
-  setVersion: PropTypes.func,
-  configureModeStep: PropTypes.string,
-  createOrRestoreRulesetsDraft: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -83,8 +58,9 @@ const mapStateToProps = createStructuredSelector({
 });
 
 const withConnect = connect(mapStateToProps);
+const withSaga = creativesSagas.map(saga => injectSaga(saga));
 
 export default withErrorBoundary(
-  compose.apply(null, [withConnect])(ConfigureProgram),
+  compose.apply(null, [...withSaga, withConnect])(injectIntl(ConfigureProgram)),
   { showImage: true, useStyle: true },
 );

package/components/pages/ConfigureProgram/messages.js

@@ -0,0 +1,33 @@
+/*
+ * ConfigureProgram Messages
+ *
+ * This contains all the text for the ConfigureProgram component.
+ */
+
+import { defineMessages } from 'react-intl';
+
+export const scope = 'loyaltyPlus.components.pages.ConfigureProgram';
+
+export default defineMessages({
+  bulkFirst: {
+    id: `${scope}.bulkFirst`,
+    defaultMessage: 'Bukl first',
+  },
+  contributors: {
+    id: `${scope}.contributors`,
+    defaultMessage: 'Contributors',
+  },
+  zones: {
+    id: `${scope}.zones`,
+    defaultMessage: 'Zones',
+  },
+  unsavedChanges: {
+    id: `${scope}.unsavedChanges`,
+    defaultMessage: 'Unsaved Changes',
+  },
+  unsavedChangesDesc: {
+    id: `${scope}.unsavedChangesDesc`,
+    defaultMessage:
+      'There are unsaved changes pending to be published. Please publish the changes before proceeding.',
+  },
+});

package/components/pages/Dashboard/Dashboard.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import React, { useLayoutEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import sample from 'lodash/sample';
 import withStyles from 'utils/withStyles';
@@ -7,7 +7,9 @@ import { compose, bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import { connect } from 'react-redux';
 import { isTrue } from 'utils/commonUtils';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import withErrorBoundary from 'utils/withErrorBoundary';
+
 import LoyaltyDetail from '../../organisms/LoyaltyDetail';
 import PerformanceStats from '../../organisms/PerformanceStats';
 import Nudges from '../../organisms/Nudges';
@@ -21,7 +23,6 @@ import * as constants from './constants';
 import styles from './style';
 import * as globalActions from '../Cap/actions';
 import ErrorBoundaryWrapper from '../../molecules/ErrorBoundaryWrapper';
-import CenteredSkeleton from '../../atoms/CenteredSkeleton';
 
 const { PROGRAM_PERFIX_PATH } = globalConstants;
 
@@ -43,8 +44,6 @@ export const Dashboard = ({
   EMFData: { getEMFStatus, EMFStatus: { value: isEMFActive } = {} } = {},
 }) => {
   const [defaultProgramId, setDefaultProgramId] = useState();
-  const [isFirstNonDefaultProgram, setIsFirstNonDefaultProgram] = useState(false);
-
   useLayoutEffect(
     () => {
       const defaultProgram = programDetails.find(({ isDefault }) =>
@@ -68,11 +67,6 @@ export const Dashboard = ({
     [getEMFStatus, getProgramsStatus],
   );
 
-  useEffect(() => {
-    (programDetails.length === 1) && setIsFirstNonDefaultProgram(true);
-  }, [programDetails])
-  
-
   const getProgramDetails = useMemo(
     () =>
       programDetails.map(programData => ({
@@ -109,17 +103,15 @@ export const Dashboard = ({
   };
 
   return (
-    isLoading ? (
-      <CenteredSkeleton width="90vw" height="90vh" borderRadius="5px" />
-    ) :
-      (<ErrorBoundaryWrapper
+    <CapSpin spinning={isLoading}>
+      <ErrorBoundaryWrapper
         showImage
         useStyle
         isApiErrorBoundary
         isApiError={isApiError}
         onRefreshClick={onRefreshClick}
       >
-        {!isLoading ? (
+        {!isLoading && (
           <>
             {!isNoProgramFound ? (
               <PageTemplate className={className}>
@@ -134,17 +126,15 @@ export const Dashboard = ({
                   programDetails={getProgramDetails}
                   isEMFActive={isEMFActiveValue}
                   onRefreshClick={onRefreshClick}
-                  isFirstNonDefaultProgram={isFirstNonDefaultProgram}
                 />
               </PageTemplate>
             ) : (
               <CreateProgramIllustration isEMFActive={isEMFActiveValue} />
             )}
           </>
-        ) : (
-          <CenteredSkeleton width="90vw" height="90vh" borderRadius="5px" />
         )}
-      </ErrorBoundaryWrapper>)
+      </ErrorBoundaryWrapper>
+    </CapSpin>
   );
 };
 

package/components/pages/Dashboard/Loadable.js

@@ -1,12 +1,10 @@
 import React, { Suspense } from 'react';
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
-import CenteredSkeleton from '../../atoms/CenteredSkeleton';
-import { loadable } from '@capillarytech/cap-ui-utils';
 
-const LoadableComponent = loadable(() => import('./Dashboard'));
+const LoadableComponent = React.lazy(() => import('./Dashboard'));
 
-export default props => (
-  <Suspense fallback={<CenteredSkeleton width="90vw" height="90vh" borderRadius="5px" />}>
-    <LoadableComponent {...props} />
+export default () => (
+  <Suspense fallback={<CapSpin />}>
+    <LoadableComponent />
   </Suspense>
 );

package/components/pages/Dashboard/index.js

@@ -1 +1 @@
-export { default } from './Dashboard';
+export { default } from './Loadable';

package/components/pages/Dashboard/messages.js

@@ -0,0 +1,35 @@
+/*
+ * Dashboard Messages
+ *
+ * This contains all the text for the Dashboard container.
+ */
+import { defineMessages } from 'react-intl';
+
+export const scope = 'loyaltyPlus.components.pages.Dashboard';
+
+export default defineMessages({
+  loyaltySales: {
+    id: `${scope}.loyaltySales`,
+    defaultMessage: 'Loyalty sales',
+  },
+  totalLoyaltyBase: {
+    id: `${scope}.totalLoyaltyBase`,
+    defaultMessage: 'Total loyalty base',
+  },
+  activeMembers: {
+    id: `${scope}.activeMembers`,
+    defaultMessage: 'Active members',
+  },
+  totalLoyaltySales: {
+    id: `${scope}.totalLoyaltySales`,
+    defaultMessage: 'Total loyalty sales',
+  },
+  loyaltyLifetimeValue: {
+    id: `${scope}.loyaltyLifetimeValue`,
+    defaultMessage: 'Loyalty lifetime value',
+  },
+  churnRate: {
+    id: `${scope}.churnRate`,
+    defaultMessage: 'Churn rate',
+  },
+});

package/components/pages/LanguageProvider/actions.js

@@ -0,0 +1,27 @@
+/*
+ *
+ * LanguageProvider actions
+ *
+ */
+
+import * as types from './constants';
+
+export function changeLocale(languageLocale) {
+  return {
+    type: types.CHANGE_LOCALE,
+    locale: languageLocale,
+  };
+}
+
+export function getLocizeMessage(locale, isSkip = false, callback) {
+  if (isSkip) {
+    return {
+      type: types.GET_LOCIZE_MESSAGE_SKIP,
+    };
+  }
+  return {
+    type: types.GET_LOCIZE_MESSAGE_REQUEST,
+    locale,
+    callback,
+  };
+}

package/components/pages/LanguageProvider/constants.js

@@ -0,0 +1,16 @@
+/*
+ *
+ * LanguageProvider constants
+ *
+ */
+
+export const CHANGE_LOCALE = 'Cap/LanguageToggle/CHANGE_LOCALE';
+
+export const GET_LOCIZE_MESSAGE_REQUEST =
+  'Cap/LanguageProvider/GET_LOCIZE_MESSAGE_REQUEST';
+export const GET_LOCIZE_MESSAGE_SUCCESS =
+  'Cap/LanguageProvider/GET_LOCIZE_MESSAGE_SUCCESS';
+export const GET_LOCIZE_MESSAGE_FAILURE =
+  'Cap/LanguageProvider/GET_LOCIZE_MESSAGE_FAILURE';
+export const GET_LOCIZE_MESSAGE_SKIP =
+  'Cap/LanguageProvider/GET_LOCIZE_MESSAGE_SKIP';

package/components/pages/LanguageProvider/index.js

@@ -10,44 +10,133 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
-import { compose } from 'redux';
+import { IntlProvider } from 'react-intl';
+import moment from 'moment';
+import { bindActionCreators, compose } from 'redux';
+import { ConfigProvider } from 'antd';
+import enUS from 'antd/es/locale-provider/en_US';
+import zhCN from 'antd/es/locale-provider/zh_CN';
 
 import injectSaga from 'utils/injectSaga';
 import withStyles from 'utils/withStyles';
 
-import CapLanguageProvider from '@capillarytech/cap-ui-library/CapLanguageProvider';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import isEmpty from 'lodash/isEmpty';
 
+import * as selectors from './selectors';
+import * as action from './actions';
 import sagas from './saga';
 import * as globalSelectors from '../Cap/selectors';
+import * as constants from '../App/constants';
 import styles from './style';
-import * as Api from '../../../services/api';
-import CenteredSkeleton from '../../atoms/CenteredSkeleton';
+import { notifyHandledException } from '../../../utils/bugsnag';
+import { DEFAULT_LOCALE, CUSTOM_LOCALES } from '../../../i18n';
 
+const { COMPLETE } = constants;
+const { makeSelectLanguage } = selectors;
 const { makeSelectUser } = globalSelectors;
 
 export class LanguageProvider extends React.PureComponent {
-  constructor() {
-    super();
+  componentDidUpdate(prevProps) {
+    const prevUser = prevProps.user;
+    const user = this.props.user;
+    if (!prevUser && user) {
+      this.updateLocale();
+    }
+  }
+
+  componentDidMount() {
+    this.updateLocale();
+  }
+
+  getReversedMappedLocale = locale => {
+    const map = {
+      // eslint-disable-next-line prettier/prettier
+      'en': 'en-US',
+      'zh-cn': 'zh',
+      'en-US': 'en-US',
+      airlines: 'airlines_US',
+      airlines_US: 'airlines_US',
+    };
+    return map[locale];
+  };
+
+  getLocale = () => {
+    try {
+      const serializedState = localStorage.getItem('jlocale');
+      const userLocale = localStorage.getItem('locale');
+      let userData = localStorage.getItem('user');
+      let locale;
+      // if user data is found then use lang prop to set locale
+      if (!isEmpty(userData)) {
+        userData = JSON.parse(userData);
+        locale = userData?.lang;
+      }
+      // if user locale is set for custom locales only
+      else if (
+        !isEmpty(userLocale) &&
+        CUSTOM_LOCALES.indexOf(userLocale) >= 0
+      ) {
+        locale = userLocale;
+      }
+      // if jlocale if found then use it
+      else if (!isEmpty(serializedState)) {
+        locale = serializedState;
+      }
+      return locale;
+    } catch (err) {
+      notifyHandledException(err);
+      return undefined;
+    }
+  };
+
+  updateLocale() {
+    let locale = this.getLocale() || DEFAULT_LOCALE;
+    locale = this.getReversedMappedLocale(locale);
+    const isLoginPage = window.location.pathname.indexOf('/login') !== -1;
+    this.props.actions.getLocizeMessage(locale, isLoginPage);
+    moment.locale(locale);
   }
 
   // eslint-disable-line react/prefer-stateless-function
   render() {
+    const { language } = this.props;
+    const mappedLocale = {
+      en: enUS,
+      'zh-cn': zhCN,
+      'en-US': enUS,
+      zh: zhCN,
+    };
+    const locale = language.locale || DEFAULT_LOCALE;
+    const file = mappedLocale[locale] || mappedLocale['en'];
+    const isLocalLoaded = language.localeLoading === COMPLETE;
+    const intlLocale =
+      CUSTOM_LOCALES.indexOf(language.locale) > -1
+        ? DEFAULT_LOCALE
+        : language.locale;
     return (
-      <CapLanguageProvider
-        user={this.props.user}
-        locizeApi={Api.getLocizeMessage}
-        supportedLocalesApi={Api.getSupportedLocales}
-        className={this.props.className}
-      >
-        {React.Children.only(this.props.children)}
-      </CapLanguageProvider>
+      <ConfigProvider locale={file}>
+        <IntlProvider
+          locale={intlLocale}
+          key={intlLocale}
+          messages={language.messages}
+          onError={() => {}} // temperory change revert when we have locize project enabled
+        >
+          <CapSpin
+            style={{ marginTop: '200px' }}
+            className={this.props.className}
+            spinning={!isLocalLoaded}
+          >
+            {isLocalLoaded ? React.Children.only(this.props.children) : <></>}
+          </CapSpin>
+        </IntlProvider>
+      </ConfigProvider>
     );
   }
 }
 
 LanguageProvider.propTypes = {
   language: PropTypes.object,
-  messages: PropTypes.object,
   children: PropTypes.element.isRequired,
   actions: PropTypes.object,
   user: PropTypes.object,
@@ -55,10 +144,20 @@ LanguageProvider.propTypes = {
 };
 
 const mapStateToProps = createStructuredSelector({
+  language: makeSelectLanguage(),
   user: makeSelectUser(),
 });
 
-const withConnect = connect(mapStateToProps);
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(action, dispatch),
+  };
+}
+
+const withConnect = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+);
 
 const withSagas = sagas.map(saga => injectSaga(saga));