Added division into Enterprise and SaaS, added reducer for payments

web/ASC.Web.Client/src/App.js

@@ -18,9 +18,7 @@ const About = lazy(() => import("./components/pages/About"));
 const Confirm = lazy(() => import("./components/pages/Confirm"));
 const Settings = lazy(() => import("./components/pages/Settings"));
 const Wizard = lazy(() => import("./components/pages/Wizard"));
-const PaymentsEnterprise = lazy(() =>
-  import("./components/pages/PaymentsEnterprise")
-);
+const Payments = lazy(() => import("./components/pages/Payments"));
 
 const App = () => {
   return navigator.onLine ? (
@@ -48,7 +46,7 @@ const App = () => {
             />
             <PrivateRoute exact path="/about" component={About} />
             <PrivateRoute restricted path="/settings" component={Settings} />
-            <PrivateRoute path="/payments" component={PaymentsEnterprise} />
+            <PrivateRoute path="/payments" component={Payments} />
             <PrivateRoute
               exact
               path={["/coming-soon"]}

web/ASC.Web.Client/src/components/pages/Payments/index.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+import { withRouter } from "react-router";
+import { connect } from "react-redux";
+import PaymentsEnterprise from "../PaymentsEnterprise";
+import PaymentsSaaS from "../PaymentsSaaS";
+class Payments extends React.Component {
+  render() {
+    const { standAloneMode } = this.props;
+    return standAloneMode ? <PaymentsEnterprise /> : <PaymentsSaaS />;
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    standAloneMode: state.payments.standAloneMode,
+  };
+}
+
+export default connect(mapStateToProps)(withRouter(Payments));

web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { PageLayout, utils } from "asc-web-common";
+import { PageLayout, utils, Error404 } from "asc-web-common";
 import { useTranslation } from "react-i18next";
 
 import { Loader, utils as Utils } from "asc-web-components";
@@ -32,11 +32,11 @@ const StyledBody = styled.div`
   }
   @media ${mobile} {
     width: 343px;
-    margin-right: 0 auto;
+    margin: 0 auto;
   }
 `;
 
-const Body = ({ standAloneMode, isLoaded }) => {
+const Body = ({ standAloneMode, isLoaded, salesEmail, helpUrl, buyUrl }) => {
   const { t } = useTranslation("translation", { i18n });
   useEffect(() => {
     changeLanguage(i18n);
@@ -49,8 +49,8 @@ const Body = ({ standAloneMode, isLoaded }) => {
     <StyledBody>
       <HeaderContainer t={t} />
       <AdvantagesContainer t={t} />
-      <ButtonContainer t={t} />
-      <ContactContainer t={t} />
+      <ButtonContainer t={t} buyUrl={buyUrl} />
+      <ContactContainer t={t} salesEmail={salesEmail} helpUrl={helpUrl} />
     </StyledBody>
   );
 };
@@ -70,8 +70,11 @@ PaymentsEnterprise.propTypes = {
 
 function mapStateToProps(state) {
   return {
-    standAloneMode: state.auth.settings.standAloneMode,
+    standAloneMode: state.payments.standAloneMode,
     isLoaded: state.auth.isLoaded,
+    salesEmail: state.payments.salesEmail,
+    helpUrl: state.payments.helpUrl,
+    buyUrl: state.payments.buyUrl,
   };
 }
 export default connect(mapStateToProps)(withRouter(PaymentsEnterprise));

web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/advantages-container.js

@@ -37,7 +37,7 @@ const StyledBodyAdvantages = styled.div`
     margin: 224px 864px 193px 32px;
   }
   .payments-body {
-    /* margin-right: 609px; */
+    margin-right: 609px;
     margin-bottom: 22px;
     margin-left: 64px;
 
@@ -47,9 +47,9 @@ const StyledBodyAdvantages = styled.div`
   }
   .first-advantages {
     margin-top: 37px;
-    /* width: 247px; */
+    width: 247px;
   }
-  /* .second-advantages {
+  .second-advantages {
     width: 278px;
   }
   .third-advantages {
@@ -60,7 +60,7 @@ const StyledBodyAdvantages = styled.div`
   }
   .five-advantages {
     width: 276px;
-  } */
+  }
   .advantages-enterprise {
     width: 856px;
     height: 30px;

web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/button-container.js

@@ -4,12 +4,11 @@ import styled from "styled-components";
 
 import { Button, utils } from "asc-web-components";
 import { store, history } from "asc-web-common";
-const { getPortalSettings, setIsLoaded } = store.auth.actions;
+// const { getPortalSettings, setIsLoaded } = store.auth.actions;
 const { tablet, mobile } = utils.device;
+
 const onButtonClickBuy = (e) => {
-  getPortalSettings(store.dispatch)
-    .then(() => store.dispatch(setIsLoaded(true)))
-    .catch((e) => history.push(`/login/error=${e}`));
+  window.open(e.target.value, "_blank");
 };
 const StyledButtonContainer = styled.div`
   position: static;
@@ -70,12 +69,13 @@ const StyledButtonContainer = styled.div`
   }
 `;
 
-const ButtonContainer = ({ t }) => {
+const ButtonContainer = ({ t, buyUrl }) => {
   return (
     <StyledButtonContainer>
       <Button
         className="button-payments-enterprise button-buy"
         label="Buy now"
+        value={`${buyUrl}`}
         onClick={onButtonClickBuy}
       />
       <Button

web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/contact-container.js

@@ -3,8 +3,7 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 
 import { Text, Link, utils } from "asc-web-components";
-const supportLinkPurchaseQuestions = "sales@onlyoffice.com";
-const supportLinkTechnicalIssues = "https://helpdesk.onlyoffice.com";
+
 const { tablet, mobile } = utils.device;
 const StyledContactContainer = styled.div`
   .contact-emails {
@@ -24,25 +23,23 @@ const StyledContactContainer = styled.div`
   }
 `;
 
-const ContactContainer = ({ t }) => {
+const ContactContainer = ({ t, salesEmail, helpUrl }) => {
   return (
     <StyledContactContainer>
       <Text className="contact-emails">
         {t("PurchaseQuestions")}{" "}
-        <Link
-          className="contact-emails_link"
-          href={`mailto:${supportLinkPurchaseQuestions}`}
-        >
-          {supportLinkPurchaseQuestions}
+        <Link className="contact-emails_link" href={`mailto:${salesEmail}`}>
+          {salesEmail}
         </Link>
       </Text>
       <Text className="contact-emails">
         {t("TechnicalIssues")}{" "}
         <Link
+          target="\_blank"
           className="contact-emails_link"
-          href={`${supportLinkTechnicalIssues}`}
+          href={`${helpUrl}`}
         >
-          {supportLinkTechnicalIssues}
+          {helpUrl}
         </Link>
       </Text>
     </StyledContactContainer>

web/ASC.Web.Client/src/components/pages/PaymentsSaaS/index.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { Text } from "asc-web-components";
+
+class PaymentsSaaS extends React.Component {
+  render() {
+    return <Text>Comming soon</Text>;
+  }
+}
+
+export default PaymentsSaaS;

web/ASC.Web.Client/src/store/payments/reducer.js

@@ -0,0 +1,18 @@
+// import {} from "./actions";
+
+const initialState = {
+  salesEmail: "sales@onlyoffice.com",
+  helpUrl: "https://helpdesk.onlyoffice.com",
+  buyUrl: "http://www.onlyoffice.com/post.ashx?type=buyenterprise",
+  standAloneMode: true,
+};
+
+const paymentsReducer = (state = initialState, action) => {
+  switch (action.type) {
+    // case
+    default:
+      return state;
+  }
+};
+
+export default paymentsReducer;

web/ASC.Web.Client/src/store/rootReducer.js

@@ -1,16 +1,18 @@
-import { combineReducers } from 'redux';
-import settingsReducer from './settings/reducer';
-import confirmReducer from './confirm/reducer';
-import { store } from 'asc-web-common';
-import wizardReducer from './wizard/reducer';
+import { combineReducers } from "redux";
+import settingsReducer from "./settings/reducer";
+import confirmReducer from "./confirm/reducer";
+import { store } from "asc-web-common";
+import wizardReducer from "./wizard/reducer";
+import paymentsReducer from "./payments/reducer";
 
 const { reducer: authReducer } = store.auth;
 
 const rootReducer = combineReducers({
-    auth: authReducer,
-    settings: settingsReducer,
-    confirm: confirmReducer,
-    wizard: wizardReducer
+  auth: authReducer,
+  settings: settingsReducer,
+  confirm: confirmReducer,
+  wizard: wizardReducer,
+  payments: paymentsReducer,
 });
 
-export default rootReducer;
+export default rootReducer;