feat: support us page (#1148)

* chore: wip

* chore: wip

* style: adjust

* refactor: cashier js -> ts

* chore: update header menu

* chore: cashier workflow adjust

Author: mydearxym

cypress/integration/friends/layout.spec.js

@@ -1,15 +1,15 @@
-describe('friends page: ', () => {
+describe('support-us page: ', () => {
   // beforeEach(() => {
   before(() => {
-    cy.visit('/friends')
+    cy.visit('/support-us')
   })
 
   it('basic layout', () => {
     cy.id('header').should('be.visible')
     cy.id('header-search').should('be.visible')
     cy.id('header-search-icon').should('be.visible')
 
-    cy.id('friends-content').should('be.visible')
+    cy.id('support-us-content').should('be.visible')
 
     // cypress can not load dynamic Footer
     // cy.id('footer').should('be.visible')

server/routes.js

@@ -37,9 +37,9 @@ router.route('/sponsor/:slug?').get((req, res) => {
   return renderAndCache({ req, res, path: '/sponsor' })
 })
 
-// 友情链接
-router.route('/friends/:slug?').get((req, res) => {
-  return renderAndCache({ req, res, path: '/friends' })
+// 支持我们
+router.route('/support-us/:slug?').get((req, res) => {
+  return renderAndCache({ req, res, path: '/support-us' })
 })
 
 // 升级账户

src/components/BuyMeChuanChuan/ChuanSelector.js

@@ -0,0 +1,36 @@
+import { FC, memo } from 'react'
+
+import { ICON_CMD } from '@/config'
+import {
+  SelectBox,
+  ChuanChuanIcon,
+  Selectors,
+  By,
+  Circle,
+} from './styles/chuan_selector'
+
+type TProps = {
+  active: number
+  onSelect: (howMany: number) => void
+}
+
+const ChuanSelector: FC<TProps> = ({ active, onSelect }) => {
+  const options = [1, 5, 10, 50, 100]
+
+  return (
+    <SelectBox>
+      <ChuanChuanIcon src={`${ICON_CMD}/chuanchuan.svg`} />
+
+      <Selectors>
+        <By>x</By>
+        {options.map((item) => (
+          <Circle key={item} active={item === 1} onClick={() => onSelect(item)}>
+            1
+          </Circle>
+        ))}
+      </Selectors>
+    </SelectBox>
+  )
+}
+
+export default memo(ChuanSelector)

src/components/BuyMeChuanChuan/ChuanSelector.tsx

@@ -0,0 +1,40 @@
+import { FC, memo } from 'react'
+
+import { ICON_CMD } from '@/config'
+import Button from '@/components/Buttons/Button'
+
+import {
+  Wrapper,
+  PayDesc,
+  AliPay,
+  Weixin,
+  MoneyNum,
+  PaymentIcon,
+} from './styles/payment_footer'
+
+type TProps = {
+  num: number
+  onPay: (m: number) => void
+}
+
+const PaymentFooter: FC<TProps> = ({ num, onPay }) => {
+  return (
+    <Wrapper>
+      <PayDesc>
+        支持:
+        <AliPay>
+          <PaymentIcon src={`${ICON_CMD}/alipay-color.svg`} />
+        </AliPay>
+        |
+        <Weixin>
+          <PaymentIcon src={`${ICON_CMD}/weichat-color.svg`} />
+        </Weixin>
+      </PayDesc>
+      <Button type="red" onClick={() => onPay(num * 10.24)}>
+        资助 <MoneyNum>￥{num * 10.24} 元</MoneyNum>
+      </Button>
+    </Wrapper>
+  )
+}
+
+export default memo(PaymentFooter)

src/components/BuyMeChuanChuan/PaymentFooter.js

@@ -0,0 +1,20 @@
+import { FC, memo } from 'react'
+
+// import { ICON_CMD } from '@/config'
+import { Wrapper, LoginLabel } from './styles/unlogin_note'
+
+type TProps = {
+  onLogin: () => void
+}
+
+const UnLoginNote: FC<TProps> = ({ onLogin }) => {
+  return (
+    <Wrapper>
+      下一步操作前, 请先
+      <LoginLabel onClick={onLogin}>登录</LoginLabel>
+      你的账号
+    </Wrapper>
+  )
+}
+
+export default memo(UnLoginNote)

src/components/BuyMeChuanChuan/PaymentFooter.tsx

@@ -4,16 +4,16 @@
  *
  */
 
-import React, { useState } from 'react'
-import T from 'prop-types'
+import { FC, useState, memo } from 'react'
 
 import { ICON_CMD, GITHUB_CPS_TEAM } from '@/config'
 import { buildLog } from '@/utils/logger'
+import { useAccount } from '@/stores/init'
 
 import Modal from '@/components/Modal'
 import UserCell from '@/components/UserCell'
 
-import UnLoginNote from './UnloginNote'
+import UnLoginNote from './UnLoginNote'
 import ChuanSelector from './ChuanSelector'
 import PaymentFooter from './PaymentFooter'
 
@@ -34,7 +34,20 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('c:Footer:index')
 
-const BuyMeChuanChuan = ({ show, accountInfo, onClose, onLogin, onPay }) => {
+type TProps = {
+  show?: boolean
+  onClose?: () => void
+  onLogin?: () => void
+  onPay?: (m: number) => void
+}
+
+const BuyMeChuanChuan: FC<TProps> = ({
+  show = false,
+  onClose = log,
+  onLogin = log,
+  onPay = log,
+}) => {
+  const accountInfo = useAccount()
   const [activeChuan, setActiveChuan] = useState(1)
 
   return (
@@ -66,8 +79,7 @@ const BuyMeChuanChuan = ({ show, accountInfo, onClose, onLogin, onPay }) => {
             </SelectTitle>
 
             <SelectDesc>
-              你的资助将主要用于 coderplanets
-              网站的开发和维护，使之更加稳定可靠。开源项目的巨大时间和物质成本无法仅靠情怀支撑，望理解。
+              你的远程投喂将有助于开发团队在饱腹状态下工作， Cheers!
             </SelectDesc>
 
             <ChuanSelector active={activeChuan} onSelect={setActiveChuan} />
@@ -81,26 +93,4 @@ const BuyMeChuanChuan = ({ show, accountInfo, onClose, onLogin, onPay }) => {
   )
 }
 
-BuyMeChuanChuan.propTypes = {
-  // https://www.npmjs.com/package/prop-types
-  accountInfo: T.shape({
-    id: T.string,
-    avatar: T.string,
-    nickname: T.string,
-    isLogin: T.bool,
-  }),
-  show: T.bool,
-  onClose: T.func,
-  onLogin: T.func,
-  onPay: T.func,
-}
-
-BuyMeChuanChuan.defaultProps = {
-  accountInfo: {},
-  show: false,
-  onClose: log,
-  onLogin: log,
-  onPay: log,
-}
-
-export default React.memo(BuyMeChuanChuan)
+export default memo(BuyMeChuanChuan)

src/components/BuyMeChuanChuan/UnLoginNote.tsx

@@ -33,25 +33,27 @@ export const Selectors = styled.div`
   ${css.flex()};
 `
 export const By = styled.div`
+  ${css.size(40)};
   ${css.flex('align-both')};
 
-  ${css.size(40)};
-  font-size: 1.6rem;
-  color: ${theme('font')};
-  margin-left: -10px;
+  font-size: 30px;
+  color: ${theme('thread.articleDigest')};
+  margin-left: -20px;
+  padding-bottom: 8px;
+  transform: scaleY(0.8);
+  opacity: 0.9;
 `
-
 export const Circle = styled.div<TActive>`
-  ${css.flex('align-both')};
   ${css.circle(38)};
+  ${css.flex('align-both')};
   border: 1px solid;
   border-color: ${theme('font')};
   margin-right: 10px;
-  color: ${({ active }) => (active ? 'white' : '#51abb2')};
+  color: ${({ active }) => (active ? 'white' : theme('thread.articleTitle'))};
   background-color: ${({ active }) => (active ? theme('font') : '')};
   &:hover {
     cursor: pointer;
-    animation: ${animate.pulse} 0.4s linear;
+    animation: ${animate.pulse} 0.3s linear;
   }
-  transition: background-color 0.3s ease-out;
+  transition: background-color 0.2s ease-out;
 `