-
-
Notifications
You must be signed in to change notification settings - Fork 386
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Skeleton for the contribution flow update (#4648)
* feat(ContributionFlowUpdate): Initial layout/code/routes skeleton * feat(ContributionFlowUpdate): General layout/code/routes update * GraphQL schema update & lint Co-authored-by: Benjamin Piouffle <benjamin@opencollective.com>
- Loading branch information
1 parent
99c6f2a
commit a34c29a
Showing
40 changed files
with
2,025 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import React from 'react'; | ||
| import { FormattedMessage } from 'react-intl'; | ||
|
|
||
| import { Box } from '../Grid'; | ||
| import StyledLink from '../StyledLink'; | ||
|
|
||
| import FAQ, { Content, Entry, Title } from './FAQ'; | ||
|
|
||
| /** | ||
| * FAQ associated to the new contribution flow. | ||
| */ | ||
| const ContributeAsFAQ = props => ( | ||
| <FAQ withBorderLeft withNewButtons {...props}> | ||
| <Entry> | ||
| <Title> | ||
| <FormattedMessage id="NewContributionFlow.FAQ.Secure.Title" defaultMessage="Is my contribution secure?" /> | ||
| </Title> | ||
| <Content> | ||
| Quam nemo umquam voluptatem appellavit, appellat; Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi | ||
| nescio quem illum anteponebas? | ||
| </Content> | ||
| </Entry> | ||
| <Entry> | ||
| <Title> | ||
| <FormattedMessage | ||
| id="createProfile.faq.persoVSOrg.title" | ||
| defaultMessage="What's the difference between a personal and an organization profile?" | ||
| /> | ||
| </Title> | ||
| <Content> | ||
| <FormattedMessage | ||
| id="createProfile.faq.persoVsOrg.content" | ||
| defaultMessage="Create an organization profile if you want to make a financial contribution in the name of your company or organization. An organization profile allows you to enable other members of your organization to make financial contributions within certain limits that you can define. Organizations can also issue gift cards." | ||
| /> | ||
| </Content> | ||
| </Entry> | ||
| <Entry> | ||
| <Title> | ||
| <FormattedMessage | ||
| id="ContributeDetails.faq.isIncognito.title" | ||
| defaultMessage="What is an incognito contribution?" | ||
| /> | ||
| </Title> | ||
| <Content> | ||
| <FormattedMessage | ||
| id="ContributeDetails.faq.isIncognito.content" | ||
| defaultMessage={ | ||
| 'If you chose to contribute as "incognito", your financial contribution will show up publicly as an incognito donation and it won\'t link to your public profile. However, in the effort of being transparent and compliant with KYC regulations (Know Your Customer), the fiscal host and the administrators of the collective can export a list of all the financial contributors with their personal information.' | ||
| } | ||
| /> | ||
| </Content> | ||
| </Entry> | ||
| <Box mt={2}> | ||
| <StyledLink | ||
| as={StyledLink} | ||
| href="https://www.opencollective.com" | ||
| openInNewTab | ||
| fontSize="Caption" | ||
| color="black.700" | ||
| > | ||
| <FormattedMessage id="moreInfo" defaultMessage="More info" /> | ||
| → | ||
| </StyledLink> | ||
| </Box> | ||
| </FAQ> | ||
| ); | ||
|
|
||
| export default ContributeAsFAQ; |
48 changes: 48 additions & 0 deletions
48
components/new-contribution-flow/ContributionFlowButtons.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import React, { Fragment } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { FormattedMessage } from 'react-intl'; | ||
|
|
||
| import { Flex } from '../../components/Grid'; | ||
| import StyledButton from '../../components/StyledButton'; | ||
|
|
||
| class NewContributionFlowButtons extends React.Component { | ||
| static propTypes = { | ||
| goNext: PropTypes.func, | ||
| goBack: PropTypes.func, | ||
| currentStep: PropTypes.shape({ name: PropTypes.string }), | ||
| prevStep: PropTypes.shape({ name: PropTypes.string }), | ||
| nextStep: PropTypes.shape({ name: PropTypes.string }), | ||
| isRecurringContributionLoggedOut: PropTypes.bool, | ||
| }; | ||
|
|
||
| getNextButtonLabel() { | ||
| const { currentStep, nextStep, isRecurringContributionLoggedOut } = this.props; | ||
| if (!nextStep) { | ||
| return <FormattedMessage id="contribute.submit" defaultMessage="Make contribution" />; | ||
| } else if (currentStep === 'profile' && isRecurringContributionLoggedOut) { | ||
| return <FormattedMessage id="NewContributionFlow.JoinAndGoNext" defaultMessage="Join and go next" />; | ||
| } else { | ||
| return <FormattedMessage id="contribute.nextStep" defaultMessage="Next step" />; | ||
| } | ||
| } | ||
|
|
||
| render() { | ||
| const { goBack, goNext } = this.props; | ||
| return ( | ||
| <Flex justifyContent={'center'} mt={3}> | ||
| <Fragment> | ||
| {goBack && ( | ||
| <StyledButton onClick={goBack} color="black.600"> | ||
| ← <FormattedMessage id="Pagination.Prev" defaultMessage="Previous" /> | ||
| </StyledButton> | ||
| )} | ||
| <StyledButton ml={17} buttonStyle="primary" onClick={goNext} disabled={!goNext}> | ||
| {this.getNextButtonLabel()} → | ||
| </StyledButton> | ||
| </Fragment> | ||
| </Flex> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default NewContributionFlowButtons; |
97 changes: 97 additions & 0 deletions
97
components/new-contribution-flow/ContributionFlowHeader.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import React, { Fragment } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { FormattedMessage, injectIntl } from 'react-intl'; | ||
|
|
||
| import Avatar, { ContributorAvatar } from '../../components/Avatar'; | ||
| import Container from '../../components/Container'; | ||
| import FormattedMoneyAmount from '../../components/FormattedMoneyAmount'; | ||
| import { Box, Flex } from '../../components/Grid'; | ||
| import { H3, P } from '../../components/Text'; | ||
| import { withUser } from '../../components/UserProvider'; | ||
|
|
||
| class NewContributionFlowHeader extends React.Component { | ||
| static propTypes = { | ||
| collective: PropTypes.shape({ | ||
| currency: PropTypes.string, | ||
| name: PropTypes.string, | ||
| contributors: PropTypes.shape({ | ||
| totalCount: PropTypes.number, | ||
| nodes: PropTypes.arrayOf( | ||
| PropTypes.shape({ | ||
| id: PropTypes.string, | ||
| name: PropTypes.string, | ||
| }), | ||
| ), | ||
| }), | ||
| }).isRequired, | ||
| LoggedInUser: PropTypes.object, | ||
| intl: PropTypes.object, | ||
| }; | ||
|
|
||
| render() { | ||
| const { collective } = this.props; | ||
| const contributors = collective.contributors.nodes; | ||
| const loggedInUserIsContributor = false; // TODO | ||
| const loggedInUserTotalDonations = 0; // TODO | ||
|
|
||
| return ( | ||
| <Flex flexDirection="column" alignItems="center" maxWidth={500}> | ||
| <Avatar collective={collective} radius={65} /> | ||
| <H3 textAlign="center" fontWeight={500} py={2}> | ||
| <FormattedMessage | ||
| id="CreateOrder.Title" | ||
| defaultMessage="Contribute to {collective}" | ||
| values={{ collective: collective.name }} | ||
| /> | ||
| </H3> | ||
| {loggedInUserIsContributor ? ( | ||
| <P py={2}> | ||
| <FormattedMessage | ||
| id="NewContributionFlow.ContributedSoFar" | ||
| defaultMessage="You have contributed {amount} to {collective} so far. Keep it going!" | ||
| values={{ | ||
| collective: collective.name, | ||
| amount: ( | ||
| <FormattedMoneyAmount | ||
| precision={2} | ||
| amount={loggedInUserTotalDonations * 100} | ||
| currency={collective.currency} | ||
| amountStyles={{ fontWeight: 'bold', color: 'black.900' }} | ||
| /> | ||
| ), | ||
| }} | ||
| /> | ||
| </P> | ||
| ) : ( | ||
| <Fragment> | ||
| {contributors?.length > 0 && ( | ||
| <Fragment> | ||
| <P fontSize="LeadParagraph" lineHeight="24px" fontWeight={400} color="black.500" py={2}> | ||
| <FormattedMessage | ||
| id="NewContributionFlow.Join" | ||
| defaultMessage="Join {numberOfContributors} other fellow contributors" | ||
| values={{ numberOfContributors: collective.contributors.totalCount }} | ||
| /> | ||
| </P> | ||
| <Flex py={2} alignItems="center"> | ||
| {contributors.map(contributor => ( | ||
| <Box key={contributor.id} mx={1}> | ||
| <ContributorAvatar contributor={contributor} radius={24} /> | ||
| </Box> | ||
| ))} | ||
| {collective.contributors.totalCount > contributors.length && ( | ||
| <Container fontSize="Caption" color="black.600"> | ||
| + {collective.contributors.totalCount - contributors.length} | ||
| </Container> | ||
| )} | ||
| </Flex> | ||
| </Fragment> | ||
| )} | ||
| </Fragment> | ||
| )} | ||
| </Flex> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default injectIntl(withUser(NewContributionFlowHeader)); |
Oops, something went wrong.
a34c29aThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to following URLs: