Merge remote-tracking branch 'origin/develop' into release

src/components/common/AppRouter.tsx

@@ -27,6 +27,10 @@ const defaultRoutesMap: RoutesMap = {
     path: '/meets/:username',
     pageName: 'MeetingPage',
   },
+  meetsCompleted: {
+    path: '/meets/us/completed',
+    pageName: 'MeetingCompletedPage',
+  },
   // system
   error: {
     path: '/error',

src/pages/MeetingCompletedPage/MeetingCompletedPage.tsx

@@ -0,0 +1,54 @@
+import { Button, Icon as ChakraIcon } from '@chakra-ui/react'
+import React from 'react'
+import { useHistory } from 'react-router-dom'
+import styled from 'styled-components'
+import { BREAK_POINT } from '../../components/common/Responsive'
+import DefaultLayout from '../../components/layout/DefaultLayout'
+import { ReactComponent as SuccessIcon } from '../../images/status-success.svg'
+
+const StyledContainer = styled.div`
+  padding: 4rem 1rem;
+  color: #585858;
+  text-align: center;
+  @media (min-width: ${BREAK_POINT}px) {
+    padding: 4rem;
+  }
+`
+const StyledTitle = styled.div`
+  margin-bottom: 0.25rem;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 1.3;
+  letter-spacing: 0.77px;
+  color: var(--gray-darker);
+`
+const StyledItemInfo = styled.div`
+  margin-bottom: 1rem;
+  font-size: 16px;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+  color: var(--gray-dark);
+`
+
+const MeetingCompletedPage: React.FC = () => {
+  const history = useHistory()
+
+  return (
+    <DefaultLayout noFooter centeredBox>
+      <StyledContainer>
+        <div className="mb-4">
+          <ChakraIcon as={SuccessIcon} w="64px" h="64px" />
+        </div>
+        <>
+          <StyledTitle>已成功預約專屬諮詢！</StyledTitle>
+          <StyledItemInfo>後續將有專業的顧問在您方便的時段與您聯繫。</StyledItemInfo>
+          <Button variant="outline" borderRadius="5px" onClick={() => history.push('/')}>
+            回首頁
+          </Button>
+        </>
+      </StyledContainer>
+    </DefaultLayout>
+  )
+}
+
+export default MeetingCompletedPage

src/pages/MeetingCompletedPage/index.ts

@@ -0,0 +1,3 @@
+import MeetingCompletedPage from './MeetingCompletedPage'
+
+export default MeetingCompletedPage

src/pages/MeetingPage/MeetingPage.tsx

@@ -5,7 +5,7 @@ import gql from 'graphql-tag'
 import Cookies from 'js-cookie'
 import { useApp } from 'lodestar-app-element/src/contexts/AppContext'
 import { useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useHistory, useParams } from 'react-router-dom'
 import { BooleanParam } from 'serialize-query-params'
 import styled from 'styled-components'
 import { useQueryParams } from 'use-query-params'
@@ -34,6 +34,7 @@ const GetMemberByUsername = gql`
 
 const MeetingPage = () => {
   const { id: appId, settings, loading: loadingAppData } = useApp()
+  const history = useHistory()
   const { username: managerUsername } = useParams<{ username: string }>()
   const [{ noHeader, noFooter }] = useQueryParams({
     noHeader: BooleanParam,
@@ -117,7 +118,7 @@ const MeetingPage = () => {
 
       if (code === 'SUCCESS') {
         Cookies.remove('utm')
-        alert('已成功預約專屬諮詢！')
+        history.push('/meets/us/completed')
       } else {
         alert(`發生錯誤，請聯繫網站管理員。錯誤訊息：${message}`)
       }