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.

feat(membership): invite friend workflow concept#1071

Merged
mydearxym merged 4 commits intodevfrommembership-invitation-code
Apr 27, 2021
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletionspackage.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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",
Expand DownExpand Up@@ -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",
Expand Down
1 change: 1 addition & 0 deletionspublic/icons/static/shape/handshake.svg
View file
Open in desktop
Loading
Sorry, something went wrong.Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line numberDiff line numberDiff line change
@@ -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>
Expand Down
Original file line numberDiff line numberDiff line change
@@ -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,
Expand All@@ -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} />
Expand Down
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
import React from 'react'
import React, { FC } from 'react'

import { ICON } from '@/config'

Expand All@@ -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} />
Expand Down
Original file line numberDiff line numberDiff line change
@@ -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 <AirBalloonactive={active}/>
return <AirBalloon />
}

case PACKAGE.GIRL: {
Expand All@@ -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>
}

Expand Down
25 changes: 25 additions & 0 deletionssrc/containers/content/MembershipContent/InviteBox/QA.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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
57 changes: 57 additions & 0 deletionssrc/containers/content/MembershipContent/InviteBox/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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
Original file line numberDiff line numberDiff line change
@@ -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`} />
Expand Down
Original file line numberDiff line numberDiff line change
@@ -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>
Expand Down
Original file line numberDiff line numberDiff line change
@@ -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`} />
常见问题
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -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}>
Expand Down
14 changes: 8 additions & 6 deletionssrc/containers/content/MembershipContent/constant.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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,
}
Loading
[8]ページ先頭
©2009-2025 Movatter.jp