feat(membership): invite friend workflow concept (#1071)

* refactor(membership): convert to ts

* refactor(membership): basic pin-code workflow

* refactor(membership): basic pin-code workflow

* refactor(membership): friend-invite basic workflow && styles

Author: mydearxym

package.json

@@ -54,6 +54,7 @@
     "@sentry/browser": "5.17.0",
     "@sentry/node": "5.17.0",
     "@sentry/webpack-plugin": "1.11.1",
+    "@soywod/pin-field": "^0.1.9",
     "@tippyjs/react": "4.2.0",
     "@zeit/next-source-maps": "0.0.4-canary.1",
     "accepts": "^1.3.4",
@@ -112,6 +113,7 @@
     "react-lazy-load-image-component": "1.5.0",
     "react-masonry-component": "^6.0.1",
     "react-masonry-css": "^1.0.14",
+    "react-pin-field": "1.0.6",
     "react-resize-detector": "4.2.3",
     "react-select": "^3.1.0",
     "react-sortable-hoc": "1.7.1",

public/icons/static/shape/handshake.svg

@@ -1,10 +1,14 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { Wrapper, Balloon, Basket } from '../styles/illustrations/air_balloon'
 
-const AirBalloon = () => {
+type TProps = {
+  testid?: string
+}
+
+const AirBalloon: FC<TProps> = ({ testid = 'membership-airballoon' }) => {
   return (
-    <Wrapper>
+    <Wrapper testid={testid}>
       <Balloon />
       <Basket />
     </Wrapper>

src/containers/content/MembershipContent/Illustrations/AirBalloon.js renamed to src/containers/content/MembershipContent/Illustrations/AirBalloon.tsx

@@ -1,8 +1,10 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ICON } from '@/config'
 
+import type { TPackage } from '../spec'
 import { PACKAGE } from '../constant'
+
 import {
   Wrapper,
   Star1,
@@ -17,9 +19,15 @@ import {
   GirlIcon,
 } from '../styles/illustrations/rocket'
 
-const Rocket = ({ type, active }) => {
+type TProps = {
+  testid?: string
+  type?: TPackage
+  active: boolean
+}
+
+const Rocket: FC<TProps> = ({ testid = 'membership-rocket', type, active }) => {
   return (
-    <Wrapper>
+    <Wrapper testid={testid}>
       <Star1 src={`${ICON}/shape/star.svg`} active={active} />
       <Star2 src={`${ICON}/shape/star.svg`} active={active} />
       <Star3 src={`${ICON}/shape/star.svg`} active={active} />

src/containers/content/MembershipContent/Illustrations/Rocket.js renamed to src/containers/content/MembershipContent/Illustrations/Rocket.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ICON } from '@/config'
 
@@ -15,9 +15,14 @@ import {
   Beam,
 } from '../styles/illustrations/ufo'
 
-const UFO = ({ active }) => {
+type TProps = {
+  testid?: string
+  active: boolean
+}
+
+const UFO: FC<TProps> = ({ testid = 'membership-ufo', active }) => {
   return (
-    <Wrapper>
+    <Wrapper testid={testid}>
       <Star1 src={`${ICON}/shape/star.svg`} active={active} />
       <Star2 src={`${ICON}/shape/star.svg`} active={active} />
       <Star3 src={`${ICON}/shape/star.svg`} active={active} />

src/containers/content/MembershipContent/Illustrations/UFO.js renamed to src/containers/content/MembershipContent/Illustrations/UFO.tsx

@@ -1,16 +1,17 @@
-import React from 'react'
+import React, { FC, ReactNode } from 'react'
 
+import type { TPackage } from '../spec'
 import Rocket from './Rocket'
 import UFO from './UFO'
 import AirBalloon from './AirBalloon'
 
 import { PACKAGE } from '../constant'
 import { Wrapper } from '../styles/illustrations'
 
-const renderIllustration = (type, active) => {
+const renderIllustration = (type: TPackage, active: boolean): ReactNode => {
   switch (type) {
     case PACKAGE.FREE: {
-      return <AirBalloon active={active} />
+      return <AirBalloon />
     }
 
     case PACKAGE.GIRL: {
@@ -27,7 +28,11 @@ const renderIllustration = (type, active) => {
   }
 }
 
-const Illustrations = ({ type, active }) => {
+type TProps = {
+  type: TPackage
+  active: boolean
+}
+const Illustrations: FC<TProps> = ({ type, active }) => {
   return <Wrapper active={active}>{renderIllustration(type, active)}</Wrapper>
 }
 

src/containers/content/MembershipContent/Illustrations/index.js renamed to src/containers/content/MembershipContent/Illustrations/index.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from 'react'
+
+import { Br } from '@/components/Common'
+import { Wrapper, Title, Desc } from '../styles/invite_box/qa'
+
+type TProps = {
+  testid?: string
+}
+
+const QA: FC<TProps> = ({ testid = 'membership-qa' }) => {
+  return (
+    <Wrapper testid={testid}>
+      <Title>说明：</Title>
+      <Desc>
+        内侧阶段，所有新注册用户都会收到一个额外的朋友码，欢迎将它分享给身边的朋友。
+      </Desc>
+      <Br top={2} />
+      <Desc>验证通过后将自动升级为高级账户，为期一年。</Desc>
+      <Br top={12} />
+      <Desc>感谢你对 coderplanets 的关注和支持。</Desc>
+    </Wrapper>
+  )
+}
+
+export default QA

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

@@ -0,0 +1,57 @@
+import React, { FC, useEffect, useRef } from 'react'
+import ReactPinField from 'react-pin-field'
+
+import { ICON } from '@/config'
+
+import Modal from '@/components/Modal'
+import QA from './QA'
+
+import {
+  Wrapper,
+  PinCodeWrapper,
+  Header,
+  HandIcon,
+  Title,
+} from '../styles/invite_box'
+import { closeInviteBox } from '../logic'
+
+type TProps = {
+  testid?: string
+  show: boolean
+}
+
+const InviteBox: FC<TProps> = ({ testid = 'membership-invite-box', show }) => {
+  const ref = useRef(null)
+
+  useEffect(() => {
+    if (show && ref) {
+      ref.current[0].focus()
+    }
+  }, [show, ref])
+
+  return (
+    <Modal
+      width="420px"
+      show={show}
+      onClose={() => closeInviteBox()}
+      showCloseBtn
+    >
+      <Wrapper testid={testid}>
+        <Header>
+          <HandIcon src={`${ICON}/shape/handshake.svg`} />
+          <Title>朋友码</Title>
+        </Header>
+        <PinCodeWrapper>
+          <ReactPinField
+            ref={ref}
+            length={6}
+            onChange={(v) => console.log('v: ', v)}
+          />
+        </PinCodeWrapper>
+        <QA />
+      </Wrapper>
+    </Modal>
+  )
+}
+
+export default InviteBox

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

@@ -1,9 +1,9 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ICON } from '@/config'
 import { Wrapper, UpIcon, Number } from './styles/monthly_warning'
 
-const MonthlyWarning = () => {
+const MonthlyWarning: FC = () => {
   return (
     <Wrapper>
       ：较年付费用 <UpIcon src={`${ICON}/shape/grow-up.svg`} />

src/containers/content/MembershipContent/MonthlyWarning.js renamed to src/containers/content/MembershipContent/MonthlyWarning.tsx

@@ -1,13 +1,25 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { PAY } from './constant'
 import { Wrapper, Price, Slash, Unit } from './styles/price_tag'
 
-const PriceTag = ({ active, price, unit = '月' }) => {
+type TProps = {
+  testid?: string
+  active: boolean
+  price: string
+  unit?: string
+}
+
+const PriceTag: FC<TProps> = ({
+  testid = 'membership-price-tag',
+  active,
+  price,
+  unit = '月',
+}) => {
   const localeUnit = unit === PAY.YEARLY ? '每年' : '每月'
 
   return (
-    <Wrapper>
+    <Wrapper testid={testid}>
       ¥ <Price active={active}>{price}</Price>
       <Slash>/</Slash>
       <Unit>{localeUnit}</Unit>

src/containers/content/MembershipContent/PriceTag.js renamed to src/containers/content/MembershipContent/PriceTag.tsx

@@ -1,11 +1,15 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ICON } from '@/config'
 import { Wrapper, Header, Icon, Content, QTitle, ABody } from './styles/qa'
 
-const QA = () => {
+type TProps = {
+  testid?: string
+}
+
+const QA: FC<TProps> = ({ testid = 'membership-qa' }) => {
   return (
-    <Wrapper>
+    <Wrapper testid={testid}>
       <Header>
         <Icon src={`${ICON}/menu/Q-A.svg`} />
         常见问题

src/containers/content/MembershipContent/QA.js renamed to src/containers/content/MembershipContent/QA.tsx

@@ -18,7 +18,14 @@ const MarkIcon = ({ not }) => {
   )
 }
 
-const Support = ({ active, items, not, pkgType }) => (
+type TProps = {
+  active: boolean
+  items: any // TODO:
+  not?: boolean
+  pkgType: string
+}
+
+const Support: React.FC<TProps> = ({ active, items, not, pkgType }) => (
   <React.Fragment>
     {pkgType !== 'free' && (
       <PkgItem active={active}>

src/containers/content/MembershipContent/Support.js renamed to src/containers/content/MembershipContent/Support.tsx

@@ -1,11 +1,13 @@
+import type { TPay, TPackage } from './spec'
+
 export const PAY = {
-  YEARLY: 'yearly',
-  MONTHLY: 'monthly',
+  YEARLY: 'yearly' as TPay,
+  MONTHLY: 'monthly' as TPay,
 }
 
 export const PACKAGE = {
-  GIRL: 'girl',
-  FREE: 'free',
-  ADVANCE: 'advance',
-  TEAM: 'team',
+  GIRL: 'girl' as TPackage,
+  FREE: 'free' as TPackage,
+  ADVANCE: 'advance' as TPackage,
+  TEAM: 'team' as TPackage,
 }