feat: Service provider detail and create static pages (#615)

openpitrix · Dec 25, 2018 · c6b9fa1 · c6b9fa1
1 parent 8b98199
commit c6b9fa1
Show file tree

Hide file tree

Showing 17 changed files with 464 additions and 122 deletions.
diff --git a/src/components/Layout/SideNav/index.jsx b/src/components/Layout/SideNav/index.jsx
@@ -27,6 +27,7 @@ const keys = [
   'category',
   'user',
   'create',
+  'provider-detail',
   'provider'
 ];
 const changeKey = {
@@ -91,6 +92,7 @@ class SideNav extends React.Component {
 
   isLinkActive = activeName => {
     const key = this.getMatchKey();
+
     return activeName === key;
   };
 
@@ -99,7 +101,8 @@ class SideNav extends React.Component {
     const { isISV } = user;
     const role = isISV ? 'isv' : user.role;
     const key = this.getMatchKey();
-    return (_.isObject(subNavMap[role]) && subNavMap[role][key]) || {};
+
+    return _.get(subNavMap, `${role}.${key}`, {});
   };
 
   renderSubsDev() {

diff --git a/src/components/Layout/SideNav/navMap.js b/src/components/Layout/SideNav/navMap.js
@@ -88,9 +88,9 @@ export const getNavs = {
       title: 'Team Members'
     },
     {
-      link: '#',
+      link: '/dashboard/provider-detail',
       iconName: 'shield',
-      active: '',
+      active: 'provider-detail',
       title: '服务商详情'
     }
   ],

diff --git a/src/components/Layout/Stepper/index.jsx b/src/components/Layout/Stepper/index.jsx
@@ -111,7 +111,11 @@ class LayoutStepper extends Component {
   renderFooter() {
     const { t, stepOption, name } = this.props;
     const {
-      activeStep, steps, nextStep, disableNextStep
+      activeStep,
+      steps,
+      nextStep,
+      disableNextStep,
+      btnText
     } = stepOption;
 
     if (activeStep > steps) {
@@ -139,8 +143,8 @@ class LayoutStepper extends Component {
           type="primary"
           onClick={nextStep}
         >
-          <span>{buttonText}</span>
           <Icon className={styles.icon} name={iconName} size={20} />
+          <span>{t(btnText || buttonText)}</span>
         </button>
       </div>
     );

diff --git a/src/components/Status/index.scss b/src/components/Status/index.scss
@@ -2,7 +2,7 @@
 
 .status {
   text-transform: capitalize;
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
   height: 100%;
   align-items: center;

diff --git a/src/locales/zh/translation.json b/src/locales/zh/translation.json
@@ -264,7 +264,7 @@
 
   "Store": "商店",
   "Platform": "平台",
-  "All Apps": "所有应用",
+  "All Apps": "全部应用",
   "App Reviews": "应用审核",
   "All Clusters": "所有集群",
   "Categroies": "分类",
@@ -498,5 +498,9 @@
   "Delete runtime credential successfully": "删除授权信息成功",
   "invalid kebeconfig": "错误的kubeconfig",
   "Update cluster env successfully": "修改集群环境成功",
-  "Helm runtime namespace is empty": "命名空间为空"
+  "Helm runtime namespace is empty": "命名空间为空",
+
+  "STEPPER_NAME_CREATE_PROVIDER_HEADER": "成为认证服务商",
+  "STEPPER_TITLE_CREATE_PROVIDER_1": "提交认证信息",
+  "STEPPER_FOOTER_CREATE_PROVIDER_1": "以上是平台审核的重要信息，请准确填写。"
 }
diff --git a/src/pages/Dashboard/Providers/Applications/Detail/index.jsx b/src/pages/Dashboard/Providers/Applications/Detail/index.jsx
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
 import { observer, inject } from 'mobx-react';
 import { translate } from 'react-i18next';
 
@@ -11,40 +12,77 @@ import styles from './index.scss';
 
 @translate()
 @inject(({ rootStore }) => ({
-  rootStore
+  rootStore,
+  providerStore: rootStore.providerStore,
+  user: rootStore.user
 }))
 @observer
 export default class Applications extends Component {
   // todo
   async componentDidMount() {}
 
-  renderBaseInfo() {
-    const { t } = this.props;
+  renderStatusInfo() {
+    const { user, t } = this.props;
+    const { isISV } = user;
 
-    return (
-      <Card className={styles.baseInfo}>
-        <div className={styles.number}>{t('申请编号')}：3920204948</div>
-        <div className={styles.name}>杭州映云科技有限公司</div>
-        <div className={styles.info}>
+    if (isISV) {
+      return (
+        <div className={styles.statusInfo}>
           <dl className={styles.status}>
             <dt>{t('申请状态')}:&nbsp;</dt>
             <dd>
-              <Status type={'rejected'} name={'rejected'} />
+              <Status type={'draft'} name={'未认证'} />
+              <Link to="/dashboard/provider/create">{t('立即提交')}</Link>
             </dd>
           </dl>
           <dl>
-            <dt>{t('拒绝时间')}:&nbsp;</dt>
+            <dt>{t('保证金')}:&nbsp;</dt>
+            <dd>
+              未缴纳<Link to="#">{t('查看缴纳方式')}</Link>
+            </dd>
+          </dl>
+          <dl>
+            <dt>{t('创建时间：')}:&nbsp;</dt>
             <dd>2018年10月29日</dd>
           </dl>
-          {/* <dl>
+        </div>
+      );
+    }
+
+    return (
+      <div className={styles.statusInfo}>
+        <dl className={styles.status}>
+          <dt>{t('申请状态')}:&nbsp;</dt>
+          <dd>
+            <Status type={'rejected'} name={'rejected'} />
+          </dd>
+        </dl>
+        <dl>
+          <dt>{t('拒绝时间')}:&nbsp;</dt>
+          <dd>2018年10月29日</dd>
+        </dl>
+        {/* <dl>
             <dt>{t('审核人员')}:&nbsp;</dt>
             <dd><label>Grace</label> grace@yunify.com</dd>
           </dl> */}
-          <dl>
-            <Button type="delete">{t('Reject')} </Button>
-            <Button type="primary">{t('Pass')} </Button>
-          </dl>
-        </div>
+        <dl>
+          <Button type="delete">{t('Reject')} </Button>
+          <Button type="primary">{t('Pass')} </Button>
+        </dl>
+      </div>
+    );
+  }
+
+  renderBaseInfo() {
+    const { user, t } = this.props;
+    const { isISV } = user;
+    const numberTitle = isISV ? t('服务商编号') : t('申请编号');
+
+    return (
+      <Card className={styles.baseInfo}>
+        <div className={styles.number}>{numberTitle}：3920204948</div>
+        <div className={styles.name}>杭州映云科技有限公司</div>
+        {this.renderStatusInfo()}
         <div className={styles.reason}>
           <label>{t('原因')}:&nbsp;</label>
           <pre>介绍内容与官网地址不一致</pre>
@@ -54,10 +92,18 @@ export default class Applications extends Component {
   }
 
   render() {
-    const { t } = this.props;
+    const { user, t } = this.props;
+    const { isISV } = user;
+    const pagetTitle = isISV ? t('服务商详情') : t('入驻申请详情');
 
     return (
-      <Layout pageTitle={t('入驻申请详情')} hasBack centerWidth={660}>
+      <Layout
+        pageTitle={pagetTitle}
+        hasBack={!isISV}
+        isCenterPage
+        noSubMenu
+        centerWidth={660}
+      >
         {this.renderBaseInfo()}
         <CertificateInfo />
       </Layout>

diff --git a/src/pages/Dashboard/Providers/Applications/Detail/index.scss b/src/pages/Dashboard/Providers/Applications/Detail/index.scss
@@ -10,60 +10,66 @@
     margin-bottom: 24px;
   }
 
-  .info {
-    display: flex;
-
-    dl,
-    dt,
-    dd {
-      display: inline-block;
-    }
-
-    dl {
-      flex: 1;
-      margin-bottom: 12px;
-      line-height: 20px;
-      font-size: 12px;
-
-      >button {
-        float: right;
-        margin-top: -12px;
-        margin-left: 12px;
-      }
-    }
+  .reason {
+    line-height: 20px;
+    font-size: 12px;
+    color: $N300;
 
-    dt {
+    >label {
+      float: left;
       color: $N75;
     }
 
-    dd {
-      color: $N300;
-      >label {
-        color: $N500;
-        font-weight: 500;
-      }
+    >pre {
+      margin-left: 40px;
     }
+  }
+}
 
-    .status {
-      font-size: 12px;
-      dt  {
-        float: left;
-      }
-    }
+.statusInfo {
+  display: flex;
+
+  dl,
+  dt,
+  dd {
+    display: inline-block;
   }
 
-  .reason {
+  dl {
+    flex: 1;
+    margin-bottom: 12px;
     line-height: 20px;
     font-size: 12px;
+
+    >button {
+      float: right;
+      margin-top: -12px;
+      margin-left: 12px;
+    }
+  }
+
+  dt {
+    color: $N75;
+  }
+
+  dd {
     color: $N300;
 
     >label {
-      float: left;
-      color: $N75;
+      color: $N500;
+      font-weight: 500;
     }
 
-    >pre {
-      margin-left: 40px;
+    >a {
+      display: inline-block;
+      margin-left: 8px;
+    }
+  }
+
+  .status {
+    font-size: 12px;
+    dt  {
+      float: left;
     }
   }
 }
diff --git a/src/pages/Dashboard/Providers/Applications/index.jsx b/src/pages/Dashboard/Providers/Applications/index.jsx
@@ -23,13 +23,9 @@ const types = [
 }))
 @observer
 export default class Applications extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      activeType: 'processed'
-    };
-  }
+  state = {
+    activeType: 'processed'
+  };
 
   async componentDidMount() {}