Merge pull request #1006 from sharetribe/additional-owner-info

Add additional owners info text to PayoutDetails form

CHANGELOG.md

@@ -14,7 +14,15 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2019-XX-XX
 
-- [change] Default to English translation if the translation key is missing. After this update, new translation keys will not be added to other translation files with English default texts. We keep providing translations in our supported languages but they might not be up to date all the time. This means if you want to update your translations beforehand or use your own translations file, you can use [translation CLI]((https://github.com/sharetribe/flex-template-web/blob/master/docs/translations.md#managing-translations)) to check if there are translations missing.
+- [add] Add info text about additional owners to `PayoutDetailsForm`.
+  [#1006](https://github.com/sharetribe/flex-template-web/pull/1006)
+- [change] Default to English translation if the translation key is missing. After this update, new
+  translation keys will not be added to other translation files with English default texts. We keep
+  providing translations in our supported languages but they might not be up to date all the time.
+  This means if you want to update your translations beforehand or use your own translations file,
+  you can use
+  [translation CLI](https://github.com/sharetribe/flex-template-web/blob/master/docs/translations.md#managing-translations)
+  to check if there are translations missing.
   [#1005](https://github.com/sharetribe/flex-template-web/pull/1005)
 - [change] Remove `origin` parameter from `default-location-searches.js`
   [#1003](https://github.com/sharetribe/flex-template-web/pull/1003)

src/forms/PayoutDetailsForm/PayoutDetailsForm.css

@@ -162,3 +162,19 @@
   height: 18px;
   padding-top: 1px;
 }
+
+.additionalOwnerInfo {
+  @apply --marketplaceH5FontStyles;
+  color: var(--matterColorAnti);
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 5px;
+  padding-bottom: 1px;
+
+  @media (--viewportMedium) {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 6px;
+    padding-bottom: 2px;
+  }
+}

src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js

@@ -3,7 +3,13 @@ import { bool, string } from 'prop-types';
 import { compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { FieldArray } from 'react-final-form-arrays';
-import { FieldTextInput, IconAdd, IconClose, InlineTextButton } from '../../components';
+import {
+  ExternalLink,
+  FieldTextInput,
+  IconAdd,
+  IconClose,
+  InlineTextButton,
+} from '../../components';
 import * as validators from '../../util/validators';
 
 import PayoutDetailsAddress from './PayoutDetailsAddress';
@@ -74,6 +80,16 @@ const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps }) => {
   const hasMaxNumberOfAdditionalOwners =
     hasAdditionalOwners &&
     values.company.additionalOwners.length >= MAX_NUMBER_OF_ADDITIONAL_OWNERS;
+
+  const additionalOwnersInfoLink = (
+    <ExternalLink
+      href="https://support.stripe.com/questions/owners-and-directors"
+      className={css.termsLink}
+    >
+      <FormattedMessage id="PayoutDetailsForm.additionalOwnersInfoLink" />
+    </ExternalLink>
+  );
+
   return (
     <React.Fragment>
       {country ? (
@@ -174,16 +190,24 @@ const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps }) => {
               </FieldArray>
 
               {!hasAdditionalOwners || !hasMaxNumberOfAdditionalOwners ? (
-                <InlineTextButton
-                  type="button"
-                  className={css.fieldArrayAdd}
-                  onClick={() => push('company.additionalOwners', undefined)}
-                >
-                  <span className={css.additionalOwnerLabel}>
-                    <IconAdd rootClassName={css.addIcon} />
-                    <FormattedMessage id="PayoutDetailsForm.additionalOwnerLabel" />
-                  </span>
-                </InlineTextButton>
+                <React.Fragment>
+                  <InlineTextButton
+                    type="button"
+                    className={css.fieldArrayAdd}
+                    onClick={() => push('company.additionalOwners', undefined)}
+                  >
+                    <span className={css.additionalOwnerLabel}>
+                      <IconAdd rootClassName={css.addIcon} />
+                      <FormattedMessage id="PayoutDetailsForm.additionalOwnerLabel" />
+                    </span>
+                  </InlineTextButton>
+                  <p className={css.additionalOwnerInfo}>
+                    <FormattedMessage
+                      id="PayoutDetailsForm.additionalOwnerInfoText"
+                      values={{ additionalOwnersInfoLink }}
+                    />
+                  </p>
+                </React.Fragment>
               ) : null}
             </div>
           ) : null}

src/translations/en.json

@@ -453,6 +453,8 @@
   "PasswordResetPage.resetFailed": "Reset failed. Please try again.",
   "PasswordResetPage.title": "Reset password",
   "PayoutDetailsForm.accountTypeTitle": "Account type",
+  "PayoutDetailsForm.additionalOwnersInfoLink": "Stripe support.",
+  "PayoutDetailsForm.additionalOwnerInfoText": "For Hong Kong, Singapore, and Single Euro Payments Area member countries, Stripe requires information of every person that owns at least 25% of the company. For more information, see {additionalOwnersInfoLink}",
   "PayoutDetailsForm.additionalOwnerLabel": "Add additional owner",
   "PayoutDetailsForm.additionalOwnerRemove": "Remove additional owner",
   "PayoutDetailsForm.addressTitle": "Address",