feat(help-center): useful/useless concept UX (#1020)

Author: mydearxym

src/containers/content/HelpCenterContent/Cover.js

@@ -0,0 +1,54 @@
+import React from 'react'
+
+import LinksCard from '@/components/LinksCard'
+
+import type { TCommunity } from '@/spec'
+import type { THelpArticle, TVisibles } from './spec'
+
+import Footer from './Footer'
+
+import { Wrapper, ContentWrapper } from './styles/cover'
+import { gotoDetail } from './logic'
+
+type TProps = {
+  items: THelpArticle[]
+  community: TCommunity
+  visibles: TVisibles
+}
+
+const Cover: React.FC<TProps> = ({ items, community, visibles }) => {
+  return (
+    <Wrapper>
+      <ContentWrapper>
+        <LinksCard
+          title="常见问题"
+          items={items}
+          onSelect={(item: THelpArticle) => gotoDetail(item)}
+        />
+        <LinksCard
+          title="常见问题"
+          items={items}
+          onSelect={(item) => gotoDetail(item)}
+        />
+        <LinksCard
+          title="常见问题"
+          items={items}
+          onSelect={(item) => gotoDetail(item)}
+        />
+        <LinksCard
+          title="常见问题"
+          items={items}
+          onSelect={(item) => gotoDetail(item)}
+        />
+        <LinksCard
+          title="常见问题"
+          items={items}
+          onSelect={(item) => gotoDetail(item)}
+        />
+      </ContentWrapper>
+      <Footer community={community} visibles={visibles} />
+    </Wrapper>
+  )
+}
+
+export default Cover

src/containers/content/HelpCenterContent/Cover.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import CollapseMenu from '@/components/CollapseMenu'
+
+import type { TCommunity, TVisibles } from './spec'
+import Footer from './Footer'
+
+import {
+  Wrapper,
+  ContentWrapper,
+  ArticleWrapper,
+  MenuWrapper,
+} from './styles/detail'
+
+type TProps = {
+  community: TCommunity
+  visibles: TVisibles
+}
+
+const Detail: React.FC<TProps> = ({ community, visibles }) => {
+  return (
+    <Wrapper>
+      <ContentWrapper>
+        <ArticleWrapper>帮助详情</ArticleWrapper>
+        <Footer community={community} visibles={visibles} />
+      </ContentWrapper>
+      <MenuWrapper>
+        <CollapseMenu />
+      </MenuWrapper>
+    </Wrapper>
+  )
+}
+
+export default Detail

src/containers/content/HelpCenterContent/Detail.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import type { TCommunity } from '@/spec'
+
+import {
+  Wrapper,
+  Title,
+  ContactsWrapper,
+  PostLink,
+  ContactItem,
+} from '../styles/footer/help_info'
+
+type TProps = {
+  community: TCommunity
+}
+
+const HelpInfo: React.FC<TProps> = ({ community }) => {
+  return (
+    <Wrapper>
+      <Title>当前问答都解决不了我的问题?</Title>
+      <div>
+        您可以在 {community.title} 社区{' '}
+        <PostLink href={`/${community.raw}/posts`}>[发帖询问]</PostLink>
+        ，或通过官方渠道联系我们:
+      </div>
+      <ContactsWrapper>
+        <ContactItem>邮箱: xx@gmail.com</ContactItem>
+        <ContactItem>微信: mydearxym</ContactItem>
+      </ContactsWrapper>
+    </Wrapper>
+  )
+}
+
+export default HelpInfo

src/containers/content/HelpCenterContent/Detail.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import type { TVisibles } from '../spec'
+
+import { ICON } from '@/config'
+
+import {
+  Wrapper,
+  Title,
+  BoxWrapper,
+  Button,
+  UsefulIcon,
+  UsefulText,
+  CryIcon,
+  UselessWrapper,
+  UselessButton,
+  UselessText,
+} from '../styles/footer/reaction'
+
+import { usefulOnClick, uselessOnClick } from '../logic'
+
+type TProps = {
+  visibles: TVisibles
+}
+
+const Reaction: React.FC<TProps> = ({ visibles }) => {
+  const { uselessClicked } = visibles
+  return (
+    <Wrapper>
+      <Title>这些信息是否有用？</Title>
+      <BoxWrapper>
+        <Button onClick={usefulOnClick}>
+          <UsefulIcon src={`${ICON}/useful-color.svg`} />
+          <UsefulText>有用</UsefulText>
+        </Button>
+        <UselessWrapper>
+          <UselessButton active={uselessClicked} onClick={uselessOnClick}>
+            <CryIcon src={`${ICON}/shape/cry.svg`} active={uselessClicked} />
+          </UselessButton>
+          <UselessText>没有帮助</UselessText>
+        </UselessWrapper>
+      </BoxWrapper>
+    </Wrapper>
+  )
+}
+
+export default Reaction

src/containers/content/HelpCenterContent/Footer/HelpInfo.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import type { TCommunity } from '@/spec'
+import type { TVisibles } from '../spec'
+
+import Reaction from './Reaction'
+import HelpInfo from './HelpInfo'
+
+import { Wrapper } from '../styles/footer'
+
+type TProps = {
+  community: TCommunity
+  visibles: TVisibles
+}
+
+const Footer: React.FC<TProps> = ({ community, visibles }) => {
+  const { showHelpInfo, showReaction } = visibles
+  return (
+    <Wrapper>
+      {showReaction && <Reaction visibles={visibles} />}
+      {showHelpInfo && <HelpInfo community={community} />}
+    </Wrapper>
+  )
+}
+
+export default Footer

src/containers/content/HelpCenterContent/Footer/Reaction.tsx

@@ -25,6 +25,25 @@ import { useInit } from './logic'
 /* eslint-disable-next-line */
 const log = buildLog('C:HelpCenterContent')
 
+const items = [
+  {
+    id: '0',
+    title: '这是一个什么社区？',
+  },
+  {
+    id: '1',
+    title: 'Wix Bookings: Tips for Marketing',
+  },
+  {
+    id: '2',
+    title: '在哪里可以下载到 iOS 版本的安装包?',
+  },
+  {
+    id: '3',
+    title: '后续会有更多的作品吗',
+  },
+]
+
 type TProps = {
   helpCenterContent?: TStore
   testid?: string
@@ -37,13 +56,17 @@ const HelpCenterContentContainer: React.FC<TProps> = ({
   metric = METRIC.HELP_CENTER,
 }) => {
   useInit(store)
-  const { view, curCommunity } = store
+  const { view, curCommunity, visibles } = store
 
   return (
     <Wrapper testid={testid}>
       <Digest metric={metric} community={curCommunity} />
       <ContentWrapper metric={metric}>
-        {view === VIEW.COVER ? <Cover /> : <Detail />}
+        {view === VIEW.COVER ? (
+          <Cover items={items} community={curCommunity} visibles={visibles} />
+        ) : (
+          <Detail community={curCommunity} visibles={visibles} />
+        )}
       </ContentWrapper>
     </Wrapper>
   )

src/containers/content/HelpCenterContent/Footer/index.tsx

@@ -3,6 +3,7 @@ import { useEffect } from 'react'
 
 import { buildLog } from '@/utils'
 
+import type { THelpArticle } from './spec'
 import type { TStore } from './store'
 import { VIEW } from './constant'
 
@@ -16,10 +17,25 @@ const log = buildLog('L:HelpCenterContent')
 /**
  * goto detail help-center article
  */
-export const gotoDetail = (): void => {
+export const gotoDetail = (article: THelpArticle): void => {
+  log('goto: ', article)
   store?.mark({ view: VIEW.DETAIL })
 }
 
+/**
+ * useful button on click
+ */
+export const usefulOnClick = (): void => {
+  store?.mark({ uselessClicked: false })
+}
+
+/**
+ * uesless button on click
+ */
+export const uselessOnClick = (): void => {
+  store?.mark({ uselessClicked: true })
+}
+
 // ###############################
 // init & uninit handlers
 // ###############################

src/containers/content/HelpCenterContent/index.tsx

@@ -0,0 +1,12 @@
+export type { TCommunity } from '@/spec'
+
+export type THelpArticle = {
+  id: string
+  title: string
+}
+
+export type TVisibles = {
+  showReaction: boolean
+  showHelpInfo: boolean
+  uselessClicked: boolean
+}