zecfoundation
/
zcash-grant-system
mirror of https://github.com/ZcashFoundation/zcash-grant-system.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

move tipping into payment create flow tab (#84)

This commit is contained in:
Danny Skubak 2019-12-02 11:40:24 -05:00 committed by Daniel Ternyak
parent 7936b418f4
commit 94dc22b879
4 changed files with 38 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/client/components/CreateFlow/Payment.tsx
View File

@ -6,6 +6,7 @@ import { DONATION } from 'utils/constants';
interface State {
payoutAddress: string;
tipJarAddress: string;
}
interface Props {
@ -18,18 +19,24 @@ export default class CreateFlowPayment extends React.Component<Props, State> {
super(props);
this.state = {
payoutAddress: '',
tipJarAddress: '',
...(props.initialState || {}),
};
}
render() {
const { payoutAddress } = this.state;
const { payoutAddress, tipJarAddress } = this.state;
const errors = getCreateErrors(this.state, true);
const payoutHelp =
errors.payoutAddress ||
`
This must be a Sapling Z address
`;
const tipJarHelp =
errors.tipJarAddress ||
`
Allows your proposal to receive tips. Must be a Sapling Z address
`;
return (
<Form layout="vertical" style={{ maxWidth: 600, margin: '0 auto' }}>
@ -45,14 +52,39 @@ export default class CreateFlowPayment extends React.Component<Props, State> {
placeholder={DONATION.ZCASH_SAPLING}
type="text"
value={payoutAddress}
onChange={this.handleInputChange}
onChange={this.handlePaymentInputChange}
/>
</Form.Item>
<Form.Item
label="Tip address (optional)"
validateStatus={errors.tipJarAddress ? 'error' : undefined}
help={tipJarHelp}
style={{ marginBottom: '2rem' }}
>
<Input
size="large"
name="tipJarAddress"
placeholder={DONATION.ZCASH_SAPLING}
type="text"
value={tipJarAddress}
onChange={this.handleTippingInputChange}
/>
</Form.Item>
</Form>
);
}
private handleInputChange = (
private handlePaymentInputChange = (
event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
) => {
const { value, name } = event.currentTarget;
this.setState({ [name]: value } as any, () => {
this.props.updateForm(this.state);
});
};
private handleTippingInputChange = (
event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
) => {
const { value, name } = event.currentTarget;

2
frontend/client/components/CreateFlow/Review.tsx
View File

@ -109,7 +109,7 @@ class CreateReview extends React.Component<Props> {
],
},
{
step: CREATE_STEP.TIPPING,
step: CREATE_STEP.PAYMENT,
name: 'Tipping',
fields: [
{

63
frontend/client/components/CreateFlow/Tipping.tsx
View File

@ -1,63 +0,0 @@
import React from 'react';
import { Input, Form } from 'antd';
import { ProposalDraft } from 'types';
import { getCreateErrors } from 'modules/create/utils';
import { DONATION } from 'utils/constants';
interface State {
tipJarAddress: string;
}
interface Props {
initialState?: Partial<State>;
updateForm(form: Partial<ProposalDraft>): void;
}
export default class CreateFlowPayment extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
tipJarAddress: '',
...(props.initialState || {}),
};
}
render() {
const { tipJarAddress } = this.state;
const errors = getCreateErrors(this.state, true);
const tipJarHelp =
errors.payoutAddress ||
`
This must be a Sapling Z address
`;
return (
<Form layout="vertical" style={{ maxWidth: 600, margin: '0 auto' }}>
<Form.Item
label="Tip address"
validateStatus={errors.tipJarAddress ? 'error' : undefined}
help={tipJarHelp}
style={{ marginBottom: '2rem' }}
>
<Input
size="large"
name="tipJarAddress"
placeholder={DONATION.ZCASH_SAPLING}
type="text"
value={tipJarAddress}
onChange={this.handleInputChange}
/>
</Form.Item>
</Form>
);
}
private handleInputChange = (
event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
) => {
const { value, name } = event.currentTarget;
this.setState({ [name]: value } as any, () => {
this.props.updateForm(this.state);
});
};
}

15
frontend/client/components/CreateFlow/index.tsx
View File

@ -11,7 +11,6 @@ import Team from './Team';
import Details from './Details';
import Milestones from './Milestones';
import Payment from './Payment';
import Tipping from './Tipping';
import Review from './Review';
import Preview from './Preview';
import Final from './Final';
@ -33,7 +32,6 @@ export enum CREATE_STEP {
DETAILS = 'DETAILS',
MILESTONES = 'MILESTONES',
PAYMENT = 'PAYMENT',
TIPPING = 'TIPPING',
REVIEW = 'REVIEW',
}
@ -43,7 +41,6 @@ const STEP_ORDER = [
CREATE_STEP.DETAILS,
CREATE_STEP.MILESTONES,
CREATE_STEP.PAYMENT,
CREATE_STEP.TIPPING,
CREATE_STEP.REVIEW,
];
@ -94,20 +91,12 @@ const STEP_INFO: { [key in CREATE_STEP]: StepInfo } = {
},
[CREATE_STEP.PAYMENT]: {
short: 'Payment',
title: 'Set your payout address',
title: 'Set your payout and tip addresses',
subtitle: '',
help:
'Double check your address, and make sure it’s secure. Once sent, payments are irreversible!',
'Double check your addresses, and make sure they’re secure. Once sent, transactions are irreversible!',
component: Payment,
},
[CREATE_STEP.TIPPING]: {
short: 'Tipping',
title: 'Set your proposal tip address (optional)',
subtitle: 'Setting this address allows your team to receive tips for this proposal',
help:
'Double check your address, and make sure it’s secure. Once sent, tips are irreversible!',
component: Tipping,
},
[CREATE_STEP.REVIEW]: {
short: 'Review',
title: 'Review your proposal',