Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add stripe business accounts #980

Merged
merged 15 commits into from
Jan 7, 2019
Merged
Show file tree
Hide file tree
Changes from all 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
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ way to update this template, but currently, we follow a pattern:

## Upcoming version 2019-XX-XX

- [add] Support for Stripe company accounts. `PayoutDetailsForm` was separated into smaller
subcomponents. Multiple new translation keys were added and they might not be translated into
French yet. [#980](https://github.com/sharetribe/flex-template-web/pull/980)
- Manage availability of listings. This works for listings that have booking unit type:
'line-item/night', or 'line-item/day'. There's also 'manage availability' link in the
ManageListingCards of "your listings" page.
Expand Down
11 changes: 11 additions & 0 deletions src/components/EditListingWizard/EditListingWizard.css
Original file line number Diff line number Diff line change
Expand Up @@ -102,3 +102,14 @@
margin-bottom: 0;
}
}

.modalTitle {
@apply --marketplaceModalTitleStyles;
}

.modalPayoutDetailsWrapper {
@media (--viewportMedium) {
width: 604px;
padding-top: 11px;
}
}
16 changes: 8 additions & 8 deletions src/components/EditListingWizard/EditListingWizard.js
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,7 @@ class EditListingWizard extends Component {
onClose={this.handlePayoutModalClose}
onManageDisableScrolling={onManageDisableScrolling}
>
<div className={css.modalHeaderWrapper}>
<div className={css.modalPayoutDetailsWrapper}>
<h1 className={css.modalTitle}>
<FormattedMessage id="EditListingPhotosPanel.payoutModalTitleOneMoreThing" />
<br />
Expand All @@ -273,14 +273,14 @@ class EditListingWizard extends Component {
<p className={css.modalMessage}>
<FormattedMessage id="EditListingPhotosPanel.payoutModalInfo" />
</p>
<PayoutDetailsForm
className={css.payoutDetails}
inProgress={fetchInProgress}
createStripeAccountError={errors ? errors.createStripeAccountError : null}
onChange={onPayoutDetailsFormChange}
onSubmit={this.handlePayoutSubmit}
/>
</div>
<PayoutDetailsForm
className={css.payoutDetails}
inProgress={fetchInProgress}
createStripeAccountError={errors ? errors.createStripeAccountError : null}
onChange={onPayoutDetailsFormChange}
onSubmit={this.handlePayoutSubmit}
/>
</Modal>
</div>
);
Expand Down
20 changes: 18 additions & 2 deletions src/components/FieldRadioButton/FieldRadioButton.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,16 @@
display: inline;
}

/* Highlight the borders if the checkbox is hovered, focused or checked */
&:hover + label .notChecked,
&:hover + label .required,
&:focus + label .notChecked,
&:focus + label .required,
&:checked + label .notChecked,
&:checked + label .required {
stroke: var(--matterColorDark);
}

/* Hightlight the text on checked, hover and focus */
&:focus + label .text,
&:hover + label .text,
Expand All @@ -26,13 +36,13 @@
.label {
display: flex;
align-items: center;
padding: 0;
padding-top: 6px;
}

.radioButtonWrapper {
/* This should follow line-height */
height: 32px;
margin-top: -1px;
margin-top: -2px;
margin-right: 12px;
align-self: baseline;

Expand All @@ -49,10 +59,16 @@

.notChecked {
stroke: var(--matterColorAnti);
&:hover {
stroke: pink;
}
}

.required {
stroke: var(--attentionColor);
&:hover {
stroke: pink;
}
}

.text {
Expand Down
5 changes: 5 additions & 0 deletions src/components/IconAdd/IconAdd.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@import '../../marketplace.css';

.root {
fill: var(--marketplaceColor);
}
7 changes: 7 additions & 0 deletions src/components/IconAdd/IconAdd.example.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import IconAdd from './IconAdd';

export const Icon = {
component: IconAdd,
props: {},
group: 'icons',
};
33 changes: 33 additions & 0 deletions src/components/IconAdd/IconAdd.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import css from './IconAdd.css';

const IconAdd = props => {
const { className, rootClassName } = props;
const classes = classNames(rootClassName || css.root, className);

return (
<svg className={classes} width="12" height="12" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.89 10.4V6.888h3.509a.889.889 0 1 0 0-1.779H6.89V1.6a.89.89 0 0 0-1.778 0v3.511h-3.51a.888.888 0 1 0 0 1.778h3.51v3.51a.889.889 0 1 0 1.778 0"
fillRule="evenodd"
/>
</svg>
);
};

const { string } = PropTypes;

IconAdd.defaultProps = {
className: null,
rootClassName: null,
};

IconAdd.propTypes = {
className: string,
rootClassName: string,
};

export default IconAdd;
8 changes: 8 additions & 0 deletions src/components/IconClose/IconClose.example.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,11 @@ export const Icon = {
props: {},
group: 'icons',
};

export const IconSmall = {
component: IconClose,
props: {
size: 'small',
},
group: 'icons',
};
14 changes: 13 additions & 1 deletion src/components/IconClose/IconClose.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,23 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';

import css from './IconClose.css';
const SIZE_SMALL = 'small';

const IconClose = props => {
const { className, rootClassName } = props;
const { className, rootClassName, size } = props;
const classes = classNames(rootClassName || css.root, className);

if (size === SIZE_SMALL) {
return (
<svg className={classes} width="9" height="9" xmlns="http://www.w3.org/2000/svg">
<path
d="M2.175 8.396l2.482-2.482 2.482 2.482a.889.889 0 1 0 1.258-1.257L5.914 4.657l2.482-2.483A.89.89 0 0 0 7.139.917L4.657 3.4 2.175.918A.888.888 0 1 0 .917 2.174L3.4 4.657.918 7.139a.889.889 0 1 0 1.257 1.257"
fillRule="evenodd"
/>
</svg>
);
}

return (
<svg
className={classes}
Expand Down
1 change: 1 addition & 0 deletions src/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export { default as FieldSelect } from './FieldSelect/FieldSelect';
export { default as FieldTextInput } from './FieldTextInput/FieldTextInput';
export { default as Footer } from './Footer/Footer';
export { default as Form } from './Form/Form';
export { default as IconAdd } from './IconAdd/IconAdd';
export { default as IconArrowHead } from './IconArrowHead/IconArrowHead';
export { default as IconBannedUser } from './IconBannedUser/IconBannedUser';
export { default as IconCheckmark } from './IconCheckmark/IconCheckmark';
Expand Down
2 changes: 1 addition & 1 deletion src/containers/AuthenticationPage/AuthenticationPage.css
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
padding-top: 40px;

@media (--viewportMedium) {
width: 571px;
width: 604px;
padding-top: 11px;
}
}
Expand Down
74 changes: 58 additions & 16 deletions src/ducks/user.duck.js
Original file line number Diff line number Diff line change
Expand Up @@ -389,28 +389,66 @@ export const createStripeAccount = payoutDetails => (dispatch, getState, sdk) =>

dispatch(stripeAccountCreateRequest());

const { accountType, country } = payoutDetails;

let payoutDetailValues;
if (accountType === 'company') {
payoutDetailValues = payoutDetails['company'];
} else if (accountType === 'individual') {
payoutDetailValues = payoutDetails['individual'];
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is OK but can be achieved with ternary too.


const {
firstName,
lastName,
birthDate,
country,
streetAddress,
postalCode,
city,
state,
province,
address,
bankAccountToken,
personalIdNumber,
} = payoutDetails;
companyName,
companyTaxId,
personalAddress,
additionalOwners,
} = payoutDetailValues;

const hasProvince = address.province && !address.state;

const addressValue = {
city: address.city,
line1: address.streetAddress,
postal_code: address.postalCode,
state: hasProvince ? address.province : address.state ? address.state : '',
};

const hasProvince = province && !state;
let personalAddressValue;
if (personalAddress) {
personalAddressValue = {
city: personalAddress.city,
line1: personalAddress.streetAddress,
postal_code: personalAddress.postalCode,
state: hasProvince
? personalAddress.province
: personalAddress.state
? personalAddress.state
: '',
};
}

const address = {
city,
line1: streetAddress,
postal_code: postalCode,
state: hasProvince ? province : state,
};
const additionalOwnersValue = additionalOwners
? additionalOwners.map(owner => {
return {
first_name: owner.firstName,
last_name: owner.lastName,
dob: owner.birthDate,
address: {
city: owner.city,
line1: owner.streetAddress,
postal_code: owner.postalCode,
state: hasProvince ? owner.province : owner.state ? owner.state : '',
},
};
})
: [];

const idNumber =
country === 'US' ? { ssn_last_4: personalIdNumber } : { personal_id_number: personalIdNumber };
Expand All @@ -420,9 +458,13 @@ export const createStripeAccount = payoutDetails => (dispatch, getState, sdk) =>
legal_entity: {
first_name: firstName,
last_name: lastName,
address: omitBy(address, isUndefined),
address: omitBy(addressValue, isUndefined),
dob: birthDate,
type: 'individual',
type: accountType,
business_name: companyName,
business_tax_id: companyTaxId,
personal_address: personalAddressValue,
additional_owners: additionalOwnersValue,
...idNumber,
},
tos_shown_and_accepted: true,
Expand Down
2 changes: 2 additions & 0 deletions src/examples.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import * as FieldReviewRating from './components/FieldReviewRating/FieldReviewRa
import * as FieldSelect from './components/FieldSelect/FieldSelect.example';
import * as FieldTextInput from './components/FieldTextInput/FieldTextInput.example';
import * as Footer from './components/Footer/Footer.example';
import * as IconAdd from './components/IconAdd/IconAdd.example';
import * as IconBannedUser from './components/IconBannedUser/IconBannedUser.example';
import * as IconCheckmark from './components/IconCheckmark/IconCheckmark.example';
import * as IconClose from './components/IconClose/IconClose.example';
Expand Down Expand Up @@ -118,6 +119,7 @@ export {
FieldSelect,
FieldTextInput,
Footer,
IconAdd,
IconBannedUser,
IconCheckmark,
IconClose,
Expand Down
Loading