Subscription (#6069)

* subscription api

* subscription page

* subscriptionAPI.js

* buy quota

* add currency icons

---------

Co-authored-by: Michael An <2331806369@qq.com>

frontend/src/subscription.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from './utils/constants';
+import SideNav from './components/user-settings/side-nav';
+import Account from './components/common/account';
+import Notification from './components/common/notification';
+import Subscription from './components/subscription';
+
+import './css/toolbar.css';
+import './css/search.css';
+import './css/user-settings.css';
+
+
+class UserSubscription extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.sideNavItems = [
+      { show: true, href: '#current-plan', text: '当前版本' },
+      { show: true, href: '#asset-quota', text: '空间' },
+      { show: true, href: '#current-subscription-period', text: '订阅有效期' },
+      { show: true, href: '#product-price', text: '云服务付费方案' },
+    ];
+    this.state = {
+      curItemID: this.sideNavItems[0].href.substr(1),
+    };
+  }
+
+  handleContentScroll = (e) => {
+    // Mobile does not display the sideNav, so when scrolling don't update curItemID
+    const scrollTop = e.target.scrollTop;
+    const scrolled = this.sideNavItems.filter((item, index) => {
+      return item.show && document.getElementById(item.href.substr(1)).offsetTop - 45 < scrollTop;
+    });
+    if (scrolled.length) {
+      this.setState({
+        curItemID: scrolled[scrolled.length - 1].href.substr(1)
+      });
+    }
+  };
+
+  render() {
+    let logoUrl = logoPath.startsWith('http') ? logoPath : mediaUrl + logoPath;
+    return (
+      <div className="h-100 d-flex flex-column">
+        <div className="top-header d-flex justify-content-between">
+          <a href={siteRoot}>
+            <img src={logoUrl} height={logoHeight} width={logoWidth} title={siteTitle} alt="logo" />
+          </a>
+          <div className="common-toolbar">
+            <Notification />
+            <Account />
+          </div>
+        </div>
+        <div className="flex-auto d-flex o-hidden">
+          <div className="side-panel o-auto">
+            <SideNav data={this.sideNavItems} curItemID={this.state.curItemID} />
+          </div>
+          <div className="main-panel d-flex flex-column">
+            <h2 className="heading">{'付费管理'}</h2>
+            <Subscription isOrgContext={false} handleContentScroll={this.handleContentScroll}/>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(
+  <UserSubscription />,
+  document.getElementById('wrapper')
+);