feat: business support (#513)

* feat: business support page

* feat: business support page

* update page size

* update

* fix

package.json

@@ -11,7 +11,7 @@
     "copy:locales": "rm -rf public/locales && cp -r packages/i18n/locales public",
     "deploy:production": "shipit production deploy",
     "deploy:preview": "shipit preview deploy",
-    "dev": "npm run start:i18n && npm run next:dev",
+    "dev": "npm run start:i18n & npm run next:dev",
     "lint": "next lint && eslint . --ext .js,.jsx,.ts,.tsx",
     "postinstall": "lerna bootstrap --ignore=@tidb-community/ui",
     "prepare": "husky install",
@@ -81,7 +81,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "~7.17.0",
     "@pingcap-inc/tidb-community-editor": "0.6.7",
-    "@pingcap-inc/tidb-community-site-components": "^1.8.19",
+    "@pingcap-inc/tidb-community-site-components": "^1.8.20",
     "@pingcap-inc/tidb-community-ui": "^1.3.3",
     "@sentry/webpack-plugin": "~1.18.8",
     "@svgr/webpack": "~6.2.1",

packages/datasource/src/api/index.d.ts

@@ -9,6 +9,7 @@ export * as points from './points';
 export { me } from './me';
 export * as cms from './cms';
 export * as common from './common';
+export * as support from './support';
 
 export type ApiResponse<T, Detail> = {
   detail: Detail;

packages/datasource/src/api/index.js

@@ -11,6 +11,7 @@ export * as asktug from './asktug';
 export * as points from './points';
 export * as cms from './cms';
 export * as common from './common';
+export * as support from './support';
 
 export { default as client } from './client';
 export { default as blogClient } from './blogClient';

packages/datasource/src/api/support/index.ts

@@ -0,0 +1,14 @@
+import client from '../client';
+
+export const sendPhoneCode = ({ phone }: { phone: string }) =>
+  client.post('/api/official/contact-us/sms-code', {
+    phone,
+  });
+
+export const submitSupportForm = (data: {
+  name: string;
+  phone?: string;
+  phone_code?: string;
+  company: string;
+  consult_detail: string;
+}) => client.post('/api/community-contact-us', data);

src/pages/_app.page.js

@@ -7,7 +7,6 @@ import React, { useEffect, useState } from 'react';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import useSWR, { SWRConfig } from 'swr';
-import { Provider } from 'react-redux';
 import { api, useApiErrorListener } from '@tidb-community/datasource';
 import { appWithTranslation } from 'next-i18next';
 import { constants, createAppGlobalStyle, utils } from '@tidb-community/ui';
@@ -22,14 +21,13 @@ import ErrorPage from './_error.page';
 import nextI18NextConfig from '@/next-i18next.config';
 import { authContext, AuthContext, MeContext } from '~/context';
 import { isEmptyOrNil } from '~/utils/common.utils';
-import { store } from '~/redux';
 
 import '@fullcalendar/common/main.css';
 import '@fullcalendar/daygrid/main.css';
 
 // Import Swiper styles
-import "swiper/css";
-import "swiper/css/pagination";
+import 'swiper/css';
+import 'swiper/css/pagination';
 
 import {
   SiteComponentsContext,
@@ -165,16 +163,14 @@ const App = ({ Component, pageProps, router }) => {
         revalidateOnFocus: false,
       }}
     >
-      <Provider store={store}>
-        <GlobalStyle />
-        <AuthContext.Provider value={authContext}>
-          <MeContext.Provider value={{ meData, mutateMe, isMeValidating }}>
-            <SiteComponentsContext.Provider value={siteFetchers}>
-              <WrappedComponent {...pageProps} />
-            </SiteComponentsContext.Provider>
-          </MeContext.Provider>
-        </AuthContext.Provider>
-      </Provider>
+      <GlobalStyle />
+      <AuthContext.Provider value={authContext}>
+        <MeContext.Provider value={{ meData, mutateMe, isMeValidating }}>
+          <SiteComponentsContext.Provider value={siteFetchers}>
+            <WrappedComponent {...pageProps} />
+          </SiteComponentsContext.Provider>
+        </MeContext.Provider>
+      </AuthContext.Provider>
     </SWRConfig>
   );
 };

src/pages/contact-us/index.page.js

@@ -43,9 +43,7 @@ const Page = () => {
               <Styled.CardParagraph>想要获得商业专家产品最高响应级别 7*24 支持服务</Styled.CardParagraph>
               <Styled.CardComment>规划/实施/主动式巡检/故障协查/知识转移/重要时期保障</Styled.CardComment>
               <Styled.CardParagraph>
-                <Anchor href={'https://cn.pingcap.com/contact/?utm_source=tidb-community&utm_medium=referral'}>
-                  &gt; 联系 PingCAP
-                </Anchor>
+                <Anchor href="/support">&gt; 商业支持咨询</Anchor>
               </Styled.CardParagraph>
             </Styled.Card>
             <Styled.Card $color={'#E30C34'}>

src/pages/support/_components/SupportForm.tsx

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+import { colors } from '@tidb-community/ui';
+
+export const SupportContainer = styled.div`
+  margin-top: 24px;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 759px;
+  background: #ffffff;
+  border: 1px solid #ececec;
+  border-radius: 12px;
+  padding: 48px 76px;
+  position: relative;
+`;
+
+export const SupportForm = styled('form')`
+  margin-top: 24px;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 759px;
+  background: #ffffff;
+  border: 1px solid #ececec;
+  border-radius: 12px;
+  padding: 48px 76px;
+  position: relative;
+`;
+
+export const SupportFormDescription = styled('p')`
+  font-size: 16px;
+  line-height: 22.4px;
+  text-align: center;
+`;
+
+export const SupportFormRequiredLabel = styled('span')`
+  &:before {
+    display: inline-block;
+    margin-right: 4px;
+    color: ${colors.AntD.error};
+    font-size: 14px;
+    font-family: 'SimSun,sans-serif';
+    line-height: 1;
+    content: '*';
+  }
+`;