refactor(membership): re-org

src/containers/content/MembershipContent/InviteBox/QA.tsx

@@ -12,7 +12,7 @@ const QA: FC<TProps> = ({ testid = 'membership-qa' }) => {
     <Wrapper testid={testid}>
       <Title>说明：</Title>
       <Desc>
-        内侧阶段，所有新注册用户都会收到一个额外的朋友码，欢迎将它分享给身边的朋友。
+        内侧阶段所有功能开放，此阶段注册的用户还会收到一个额外的朋友码，欢迎将它分享给身边的朋友。
       </Desc>
       <Br top={2} />
       <Desc>验证通过后将自动升级为高级账户，为期一年。</Desc>

src/containers/content/MembershipContent/InviteBox/index.tsx

@@ -12,6 +12,7 @@ import {
   Header,
   HandIcon,
   Title,
+  Content,
 } from '../styles/invite_box'
 import { closeInviteBox } from '../logic'
 
@@ -39,16 +40,18 @@ const InviteBox: FC<TProps> = ({ testid = 'membership-invite-box', show }) => {
       <Wrapper testid={testid}>
         <Header>
           <HandIcon src={`${ICON}/shape/handshake.svg`} />
-          <Title>朋友码</Title>
+          <Title>交个朋友</Title>
         </Header>
-        <PinCodeWrapper>
-          <ReactPinField
-            ref={ref}
-            length={6}
-            onChange={(v) => console.log('v: ', v)}
-          />
-        </PinCodeWrapper>
-        <QA />
+        <Content>
+          <PinCodeWrapper>
+            <ReactPinField
+              ref={ref}
+              length={6}
+              onChange={(v) => console.log('v: ', v)}
+            />
+          </PinCodeWrapper>
+          <QA />
+        </Content>
       </Wrapper>
     </Modal>
   )

src/containers/content/MembershipContent/QA.tsx

@@ -1,7 +1,20 @@
 import { FC, memo } from 'react'
 
 import { ICON } from '@/config'
-import { Wrapper, Header, Icon, Content, QTitle, ABody } from './styles/qa'
+import { ROUTE } from '@/constant'
+import Linker from '@/widgets/Linker'
+
+import {
+  Wrapper,
+  Header,
+  Icon,
+  Content,
+  QTitle,
+  ABody,
+  Bold,
+  Ul,
+  Li,
+} from './styles/qa'
 
 type TProps = {
   testid?: string
@@ -17,17 +30,44 @@ const QA: FC<TProps> = ({ testid = 'membership-qa' }) => {
       <Content>
         <QTitle>为什么要推出付费服务 ？</QTitle>
         <ABody>
-          简单来讲，为了活下去。总体而言，免费服务和付费服务只有体验上的差别，没有内容上和访问限制上的区别对待。
+          简单来讲，我们希望能够健康的生存下去，物质基础对于社区的维护与功能开发（尤其是这些高级功能）
+          是不可缺少的。需要特别说明的是，免费服务和付费服务只有体验上的差别，
+          <Bold>没有内容上和访问限制上的区别对待</Bold>
+          ，你也可以通过
+          <Linker
+            src={ROUTE.SUPPORT_US}
+            external={false}
+            text="其他渠道"
+            inline
+            left={4}
+            right={4}
+          />
+          支持我们。
         </ABody>
 
-        <QTitle>wip 是什么意思 ？</QTitle>
+        <QTitle>这些功能都已经实现了吗 ？</QTitle>
         <ABody>
-          wip(work in progress)
-          表示目前正在开发中的功能，周期一般在一个月之内。如果已经购买包含此功能的会员服务，在开发完成后不会重复收费。
+          Nope.
+          很多高级功能还没有实现或目前还不完善，因此所有功能在内测阶段都是开放的，内测阶段结束后根据完成情况，所列出条目可能会有所调整。
         </ABody>
 
-        <QTitle>不小心手抖订阅后，可以退款吗 ？</QTitle>
-        <ABody>当然可以，付费后若不满意，你可以在 7 天内随时退款。</ABody>
+        <QTitle>不小心手抖，可以退款吗 ？</QTitle>
+        <ABody>
+          选择高级服务后的 15
+          以内都是「试吃」阶段，你可以在这段时间内评估体验是否符合你的预期，再决定是否付费。
+        </ABody>
+        <QTitle>一些基本承诺</QTitle>
+        <ABody>
+          <Ul>
+            <Li>这里遵循古典的互联网精神，尊重并践行 Open Web 的价值观。</Li>
+            <Li>
+              认同知识共享，不会在任何阶段，以任何形式参与或鼓励「卖课」。
+            </Li>
+            <Li>
+              相信长期主义，会持续用技术、组织形式等各种手段守住社区下限。
+            </Li>
+          </Ul>
+        </ABody>
       </Content>
     </Wrapper>
   )

src/containers/content/MembershipContent/Support.tsx

@@ -1,23 +1,14 @@
 import { FC, Fragment, memo } from 'react'
 
-import { ICON, ICON_CMD } from '@/config'
+import { ICON } from '@/config'
 
 import {
   PkgItem,
   PkgItemTitle,
   PkgItemYesIcon,
-  PkgItemNoIcon,
   ArrowIcon,
 } from './styles/support'
 
-const MarkIcon = ({ not }) => {
-  return not ? (
-    <PkgItemNoIcon src={`${ICON_CMD}/cross.svg`} />
-  ) : (
-    <PkgItemYesIcon src={`${ICON_CMD}/check.svg`} />
-  )
-}
-
 type TProps = {
   active: boolean
   items: any // TODO:
@@ -35,7 +26,7 @@ const Support: FC<TProps> = ({ active, items, not, pkgType }) => (
     )}
     {items.map((item) => (
       <PkgItem key={item.title} active={active}>
-        <MarkIcon not={not} />
+        <PkgItemYesIcon />
         <PkgItemTitle not={not}>{item.title}</PkgItemTitle>
       </PkgItem>
     ))}

src/containers/content/MembershipContent/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/accessible-emoji */
 /*
  *
  * MembershipContent
@@ -10,8 +11,9 @@ import type { TMetric } from '@/spec'
 import { buildLog } from '@/utils/logger'
 import { pluggedIn } from '@/utils/mobx'
 import OrButton from '@/widgets/Buttons/OrButton'
-import Button from '@/widgets/Buttons/Button'
+// import Button from '@/widgets/Buttons/Button'
 import Checker from '@/widgets/Checker'
+import NoticeBar from '@/widgets/NoticeBar'
 
 import type { TStore } from './store'
 import { PAY, PACKAGE } from './constant'
@@ -52,21 +54,21 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('C:MembershipContent')
 
-const PayButton = ({ pkgType, payType }) => {
-  if (pkgType === PACKAGE.GIRL) {
-    return (
-      <Button type="primary" ghost>
-        验证
-      </Button>
-    )
-  }
+// const PayButton = ({ pkgType, payType }) => {
+//   if (pkgType === PACKAGE.GIRL) {
+//     return (
+//       <Button type="primary" ghost>
+//         验证
+//       </Button>
+//     )
+//   }
 
-  return (
-    <Button type="primary" ghost>
-      {payType === PAY.YEARLY ? '扫码' : '试试看'}
-    </Button>
-  )
-}
+//   return (
+//     <Button type="primary" ghost>
+//       {payType === PAY.YEARLY ? '扫码' : '试试看'}
+//     </Button>
+//   )
+// }
 
 type TProps = {
   membershipContent?: TStore
@@ -87,7 +89,7 @@ const MembershipContentContainer: FC<TProps> = ({
     <Wrapper testid={testid}>
       <InnerWrapper metric={metric}>
         <BannerWrapper>
-          <Title>Hi, mydearxym</Title>
+          <Title>Hi，你好哇 👋</Title>
           <Desc>欢迎来到 CoderPlanets，选择一个适合你的会员类型吧</Desc>
           <PayButtonWrapper>
             <OrButton
@@ -149,7 +151,13 @@ const MembershipContentContainer: FC<TProps> = ({
                 {item.pkgType === PACKAGE.FREE ? (
                   <FreeNote>当前为免费账户无需支付</FreeNote>
                 ) : (
-                  <PayButton pkgType={item.pkgType} payType={payType} />
+                  <NoticeBar
+                    type="info"
+                    content="内测阶段开放"
+                    right={10}
+                    noBg
+                  />
+                  // <PayButton pkgType={item.pkgType} payType={payType} />
                 )}
               </PayBtnWrapper>
             </Dashboard>

src/containers/content/MembershipContent/store.ts

@@ -29,21 +29,30 @@ const MembershipContent = T.model('MembershipContent', {
           yearlyPrice: '0',
           monthlyPrice: '0',
           illustration: PACKAGE.FREE,
-          serviceItems: [{ title: '发布各种内容' }, { title: '创建子社区' }],
+          serviceItems: [
+            { title: '发布各种内容' },
+            { title: '参与编辑公共内容' },
+            { title: '申请创建子社区' },
+            { title: '查看社区基础统计' },
+          ],
         },
         {
           pkgType: PACKAGE.ADVANCE,
-          desc: '更好更全面的阅读、交互体验。优先参与社区规划共建',
-          yearlyPrice: '59',
-          monthlyPrice: '5.9',
+          desc: '更好更全面的阅读、交互体验。更丰富的交流工具',
+          yearlyPrice: '99',
+          monthlyPrice: '9.9',
           illustration: PACKAGE.ADVANCE,
           serviceItems: [
             { title: '主题设置' },
-            { title: '头像特殊标识' },
-            { title: '发起投票' },
+            { title: '自定义社区布局' },
+            { title: '自定义快速跳转' },
+            { title: '评论表情包' },
             { title: '设置文章打赏' },
-            // { title: '订阅栏分组' },
-            { title: '需求优先响应' },
+            { title: '发起投票' },
+            { title: '头像特殊标识' },
+            { title: '自定义背景' },
+            { title: '社区详细统计数据' },
+            { title: '免除广告' },
           ],
         },
         {
@@ -53,35 +62,43 @@ const MembershipContent = T.model('MembershipContent', {
           monthlyPrice: '0',
           illustration: PACKAGE.GIRL,
           serviceItems: [
-            { title: '主题设置' },
-            { title: '头像特殊标识' },
+            { title: '女生头像标识' },
             { title: '发起投票' },
-            { title: '设置文章打赏' },
-            // { title: '订阅栏分组' },
             { title: '需求优先响应' },
+            { title: '个别场景更高权重' },
+            { title: '不定期周边礼品' },
           ],
         },
         {
           pkgType: PACKAGE.TEAM,
-          desc: '全部功能。适合独立开发者、小团队等需要独立空间的场景',
-          yearlyPrice: '199',
-          monthlyPrice: '19.9',
+          desc: '社区 SaaS 服务。适合独立开发者、小团队等需要独立社区的场景',
+          yearlyPrice: '1999',
+          monthlyPrice: '199.9',
           illustration: PACKAGE.TEAM,
           serviceItems: [
+            {
+              title: '看板等个性化版块',
+            },
             {
               title: '自定义二级域名',
             },
+            {
+              title: '第三方平台集成',
+            },
+            {
+              title: '设置自定义广告',
+            },
             {
               title: '隐藏主站其他入口',
             },
             {
-              title: '8 小时工单支持',
+              title: 'Github 主页特别鸣谢',
             },
             {
-              title: 'Github 主页鸣谢',
+              title: '站内特别鸣谢',
             },
             {
-              title: '站内鸣谢',
+              title: '工作日客服支持',
             },
           ],
         },

src/containers/content/MembershipContent/styles/index.ts

@@ -64,7 +64,7 @@ export const Dashboard = styled.div<TActive>`
   padding-bottom: 30px;
   border: 2px solid;
   border-color: ${({ active }) =>
-    active ? theme('banner.desc') : 'transparent'};
+    active ? theme('button.primary') : 'transparent'};
   border-radius: 5px;
   box-shadow: ${({ active }) =>
     active ? '1px 1px 20px 0px rgb(37 37 37 / 42%)' : 'none'};

src/containers/content/MembershipContent/styles/invite_box/index.ts

@@ -11,11 +11,16 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   color: ${theme('thread.articleDigest')};
   ${css.flexColumn('align-center')};
   width: 100%;
-  padding: 20px;
 `
 export const Header = styled.div`
   ${css.flex('align-center')};
-  margin-bottom: 22px;
+  filter: ${theme('modal.subPanelShadow')};
+  margin-bottom: 15px;
+  padding-top: 12px;
+`
+export const Content = styled.div`
+  background: ${theme('modal.subPanel')};
+  padding-top: 20px;
 `
 export const HandIcon = styled(Img)`
   fill: ${theme('thread.articleTitle')};

src/containers/content/MembershipContent/styles/invite_box/qa.ts

@@ -11,6 +11,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   ${css.flexColumn('align-start')};
   width: 100%;
   margin-top: 30px;
+  margin-bottom: 30px;
   padding: 0 25px;
 `
 export const Title = styled.div`

src/containers/content/MembershipContent/styles/qa.ts

@@ -32,10 +32,23 @@ export const Content = styled.div`
 export const QTitle = styled.div`
   font-size: 16px;
   color: ${theme('thread.articleTitle')};
-  margin-bottom: 8px;
+  margin-bottom: 15px;
 `
 export const ABody = styled.div`
   font-size: 14px;
   color: ${theme('thread.articleDigest')};
   margin-bottom: 30px;
+  line-height: 1.6;
+`
+export const Ul = styled.ul`
+  list-style: disc;
+  margin-left: 16px;
+`
+export const Li = styled.li`
+  margin-bottom: 3px;
+  line-height: 1.6;
+`
+export const Bold = styled.span`
+  color: ${theme('thread.articleTitle')};
+  font-weight: bold;
 `