Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commitbc67a3b

Browse files
authored
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
1 parent89fae40 commitbc67a3b

File tree

23 files changed

+328
-65
lines changed

23 files changed

+328
-65
lines changed

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
"@sentry/browser":"5.17.0",
5555
"@sentry/node":"5.17.0",
5656
"@sentry/webpack-plugin":"1.11.1",
57+
"@soywod/pin-field":"^0.1.9",
5758
"@tippyjs/react":"4.2.0",
5859
"@zeit/next-source-maps":"0.0.4-canary.1",
5960
"accepts":"^1.3.4",
@@ -112,6 +113,7 @@
112113
"react-lazy-load-image-component":"1.5.0",
113114
"react-masonry-component":"^6.0.1",
114115
"react-masonry-css":"^1.0.14",
116+
"react-pin-field":"1.0.6",
115117
"react-resize-detector":"4.2.3",
116118
"react-select":"^3.1.0",
117119
"react-sortable-hoc":"1.7.1",
Lines changed: 1 addition & 0 deletions
Loading

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
importReactfrom'react'
1+
importReact,{FC}from'react'
22

33
import{Wrapper,Balloon,Basket}from'../styles/illustrations/air_balloon'
44

5-
constAirBalloon=()=>{
5+
typeTProps={
6+
testid?:string
7+
}
8+
9+
constAirBalloon:FC<TProps>=({ testid='membership-airballoon'})=>{
610
return(
7-
<Wrapper>
11+
<Wrappertestid={testid}>
812
<Balloon/>
913
<Basket/>
1014
</Wrapper>

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
importReactfrom'react'
1+
importReact,{FC}from'react'
22

33
import{ICON}from'@/config'
44

5+
importtype{TPackage}from'../spec'
56
import{PACKAGE}from'../constant'
7+
68
import{
79
Wrapper,
810
Star1,
@@ -17,9 +19,15 @@ import {
1719
GirlIcon,
1820
}from'../styles/illustrations/rocket'
1921

20-
constRocket=({ type, active})=>{
22+
typeTProps={
23+
testid?:string
24+
type?:TPackage
25+
active:boolean
26+
}
27+
28+
constRocket:FC<TProps>=({ testid='membership-rocket', type, active})=>{
2129
return(
22-
<Wrapper>
30+
<Wrappertestid={testid}>
2331
<Star1src={`${ICON}/shape/star.svg`}active={active}/>
2432
<Star2src={`${ICON}/shape/star.svg`}active={active}/>
2533
<Star3src={`${ICON}/shape/star.svg`}active={active}/>

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
importReactfrom'react'
1+
importReact,{FC}from'react'
22

33
import{ICON}from'@/config'
44

@@ -15,9 +15,14 @@ import {
1515
Beam,
1616
}from'../styles/illustrations/ufo'
1717

18-
constUFO=({ active})=>{
18+
typeTProps={
19+
testid?:string
20+
active:boolean
21+
}
22+
23+
constUFO:FC<TProps>=({ testid='membership-ufo', active})=>{
1924
return(
20-
<Wrapper>
25+
<Wrappertestid={testid}>
2126
<Star1src={`${ICON}/shape/star.svg`}active={active}/>
2227
<Star2src={`${ICON}/shape/star.svg`}active={active}/>
2328
<Star3src={`${ICON}/shape/star.svg`}active={active}/>

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

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
1-
importReactfrom'react'
1+
importReact,{FC,ReactNode}from'react'
22

3+
importtype{TPackage}from'../spec'
34
importRocketfrom'./Rocket'
45
importUFOfrom'./UFO'
56
importAirBalloonfrom'./AirBalloon'
67

78
import{PACKAGE}from'../constant'
89
import{Wrapper}from'../styles/illustrations'
910

10-
constrenderIllustration=(type,active)=>{
11+
constrenderIllustration=(type:TPackage,active:boolean):ReactNode=>{
1112
switch(type){
1213
casePACKAGE.FREE:{
13-
return<AirBalloonactive={active}/>
14+
return<AirBalloon/>
1415
}
1516

1617
casePACKAGE.GIRL:{
@@ -27,7 +28,11 @@ const renderIllustration = (type, active) => {
2728
}
2829
}
2930

30-
constIllustrations=({ type, active})=>{
31+
typeTProps={
32+
type:TPackage
33+
active:boolean
34+
}
35+
constIllustrations:FC<TProps>=({ type, active})=>{
3136
return<Wrapperactive={active}>{renderIllustration(type,active)}</Wrapper>
3237
}
3338

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
importReact,{FC}from'react'
2+
3+
import{Br}from'@/components/Common'
4+
import{Wrapper,Title,Desc}from'../styles/invite_box/qa'
5+
6+
typeTProps={
7+
testid?:string
8+
}
9+
10+
constQA:FC<TProps>=({ testid='membership-qa'})=>{
11+
return(
12+
<Wrappertestid={testid}>
13+
<Title>说明：</Title>
14+
<Desc>
15+
内侧阶段，所有新注册用户都会收到一个额外的朋友码，欢迎将它分享给身边的朋友。
16+
</Desc>
17+
<Brtop={2}/>
18+
<Desc>验证通过后将自动升级为高级账户，为期一年。</Desc>
19+
<Brtop={12}/>
20+
<Desc>感谢你对 coderplanets 的关注和支持。</Desc>
21+
</Wrapper>
22+
)
23+
}
24+
25+
exportdefaultQA
Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
importReact,{FC,useEffect,useRef}from'react'
2+
importReactPinFieldfrom'react-pin-field'
3+
4+
import{ICON}from'@/config'
5+
6+
importModalfrom'@/components/Modal'
7+
importQAfrom'./QA'
8+
9+
import{
10+
Wrapper,
11+
PinCodeWrapper,
12+
Header,
13+
HandIcon,
14+
Title,
15+
}from'../styles/invite_box'
16+
import{closeInviteBox}from'../logic'
17+
18+
typeTProps={
19+
testid?:string
20+
show:boolean
21+
}
22+
23+
constInviteBox:FC<TProps>=({ testid='membership-invite-box', show})=>{
24+
constref=useRef(null)
25+
26+
useEffect(()=>{
27+
if(show&&ref){
28+
ref.current[0].focus()
29+
}
30+
},[show,ref])
31+
32+
return(
33+
<Modal
34+
width="420px"
35+
show={show}
36+
onClose={()=>closeInviteBox()}
37+
showCloseBtn
38+
>
39+
<Wrappertestid={testid}>
40+
<Header>
41+
<HandIconsrc={`${ICON}/shape/handshake.svg`}/>
42+
<Title>朋友码</Title>
43+
</Header>
44+
<PinCodeWrapper>
45+
<ReactPinField
46+
ref={ref}
47+
length={6}
48+
onChange={(v)=>console.log('v: ',v)}
49+
/>
50+
</PinCodeWrapper>
51+
<QA/>
52+
</Wrapper>
53+
</Modal>
54+
)
55+
}
56+
57+
exportdefaultInviteBox

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
importReactfrom'react'
1+
importReact,{FC}from'react'
22

33
import{ICON}from'@/config'
44
import{Wrapper,UpIcon,Number}from'./styles/monthly_warning'
55

6-
constMonthlyWarning=()=>{
6+
constMonthlyWarning:FC=()=>{
77
return(
88
<Wrapper>
99
：较年付费用<UpIconsrc={`${ICON}/shape/grow-up.svg`}/>

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

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,25 @@
1-
importReactfrom'react'
1+
importReact,{FC}from'react'
22

33
import{PAY}from'./constant'
44
import{Wrapper,Price,Slash,Unit}from'./styles/price_tag'
55

6-
constPriceTag=({ active, price, unit='月'})=>{
6+
typeTProps={
7+
testid?:string
8+
active:boolean
9+
price:string
10+
unit?:string
11+
}
12+
13+
constPriceTag:FC<TProps>=({
14+
testid='membership-price-tag',
15+
active,
16+
price,
17+
unit='月',
18+
})=>{
719
constlocaleUnit=unit===PAY.YEARLY ?'每年' :'每月'
820

921
return(
10-
<Wrapper>
22+
<Wrappertestid={testid}>
1123
¥<Priceactive={active}>{price}</Price>
1224
<Slash>/</Slash>
1325
<Unit>{localeUnit}</Unit>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp