Skip to content

Commit 90a8142

Browse files
BetreeBetree
committed
WIP
1 parent ab171a7 commit 90a8142

31 files changed

+3579
-522
lines changed

‎components/RichTextEditor.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ type RichTextEditorContainerProps = {
2828
withStickyToolbar?: boolean;
2929
/** Version of the editor */
3030
version: 'default' | 'simplified';
31+
/** If true, the image upload button will be displayed - even in simplified mode */
32+
imageUploadEnabled?: boolean;
3133
/** If position is sticky, this prop defines the `top` property. Support responsive arrays */
3234
toolbarTop?: number | string | number[] | string[];
3335
/** Useful to compensate the height of the toolbar when editing inline */
@@ -75,6 +77,7 @@ type RichTextEditorProps = RichTextEditorContainerProps & {
7577
disabled?: boolean;
7678

7779
videoEmbedEnabled?: boolean;
80+
imageUploadEnabled?: boolean;
7881
'data-cy': string;
7982
/** Called when an image is being uploaded to set a boolean */
8083
setUploading?: (uploading: boolean) => void;
@@ -179,9 +182,11 @@ const TrixEditorContainer = styled.div<RichTextEditorContainerProps>`
179182
${props =>
180183
props.version === 'simplified' &&
181184
css({
182-
'.trix-button-group--file-tools': {
183-
display: 'none',
184-
},
185+
...(!props.imageUploadEnabled && {
186+
'.trix-button-group--file-tools': {
187+
display: 'none',
188+
},
189+
}),
185190
'.trix-button-group--block-tools .trix-button:not(.trix-button--icon-number-list):not(.trix-button--icon-bullet-list)':
186191
{
187192
display: 'none',
@@ -548,7 +553,7 @@ export default class RichTextEditor extends React.Component<RichTextEditorProps,
548553
}
549554

550555
return;
551-
} else if (this.props.version === 'simplified') {
556+
} else if (this.props.version === 'simplified' && !this.props.imageUploadEnabled) {
552557
// Don't upload files in simplified mode
553558
attachment.remove();
554559
return;
@@ -698,6 +703,7 @@ export default class RichTextEditor extends React.Component<RichTextEditorProps,
698703
showCount,
699704
maxLength,
700705
editorMaxHeight,
706+
imageUploadEnabled,
701707
} = this.props;
702708

703709
return !this.state.id ? (
@@ -715,6 +721,7 @@ export default class RichTextEditor extends React.Component<RichTextEditorProps,
715721
editorMaxHeight={editorMaxHeight}
716722
withBorders={withBorders}
717723
version={version}
724+
imageUploadEnabled={imageUploadEnabled}
718725
isDisabled={disabled}
719726
error={error}
720727
data-cy={this.props['data-cy']}

‎components/contribution-flow/ContributionFlowSuccess.js‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import StyledLink from '../../components/StyledLink';
3838
import { withUser } from '../../components/UserProvider';
3939

4040
import { isValidExternalRedirect } from '../../pages/external-redirect';
41+
import { CustomPayoutMethodInstructions } from '../edit-collective/sections/receive-money/CustomPayoutMethodInstructions';
4142
import { formatAccountDetails } from '../edit-collective/utils';
4243
import Link from '../Link';
4344
import { Survey, SURVEY_KEY } from '../Survey';
@@ -309,8 +310,23 @@ class ContributionFlowSuccess extends React.Component {
309310
};
310311

311312
renderBankTransferInformation = () => {
312-
const instructions = get(this.props.data, 'order.toAccount.host.settings.paymentMethods.manual.instructions', null);
313+
const customPaymentProviderId = get(this.props.data, 'order.data.customPaymentProviderId');
314+
const customPaymentProviders = get(this.props.data, 'order.toAccount.host.settings.customPaymentProviders', []);
315+
const customProvider = customPaymentProviderId
316+
? customPaymentProviders.find(p => p.id === customPaymentProviderId)
317+
: null;
318+
319+
const instructions = customProvider
320+
? customProvider.instructions
321+
: get(this.props.data, 'order.toAccount.host.settings.paymentMethods.manual.instructions', null);
313322
const bankAccount = get(this.props.data, 'order.toAccount.host.bankAccount.data', null);
323+
console.log({
324+
customProvider,
325+
instructions,
326+
bankAccount,
327+
customPaymentProviders,
328+
data: this.props.data,
329+
});
314330

315331
const amount = get(this.props.data, 'order.amount.valueInCents', 0);
316332
const platformTipAmount = get(this.props.data, 'order.platformTipAmount.valueInCents', 0);
@@ -321,8 +337,14 @@ class ContributionFlowSuccess extends React.Component {
321337
currencyDisplay: 'code',
322338
});
323339

340+
const accountDetails = customProvider
341+
? customProvider.accountDetails
342+
: bankAccount
343+
? formatAccountDetails(bankAccount)
344+
: '';
345+
324346
const formattedValues = {
325-
account: bankAccount ? formatAccountDetails(bankAccount) : '',
347+
account: accountDetails,
326348
reference: get(this.props.data, 'order.legacyId', null),
327349
amount: formattedAmount,
328350
collective: get(this.props.data, 'order.toAccount.name', null),
@@ -345,7 +367,7 @@ class ContributionFlowSuccess extends React.Component {
345367
<FormattedMessage id="NewContributionFlow.PaymentInstructions" defaultMessage="Payment instructions" />
346368
</H3>
347369
<Flex mt={2}>
348-
<Flex style={{ whiteSpace: 'pre-wrap' }}>{formatManualInstructions(instructions, formattedValues)}</Flex>
370+
<CustomPayoutMethodInstructions instructions={instructions} formattedValues={formattedValues} />
349371
</Flex>
350372
</BankTransferInfoContainer>
351373
)}

‎components/contribution-flow/utils.js‎

Lines changed: 59 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { StripePaymentMethodsLabels } from '../../lib/stripe/payment-methods';
2323
import { getWebsiteUrl } from '../../lib/utils';
2424

2525
import CreditCardInactive from '../icons/CreditCardInactive';
26+
import { CUSTOM_PAYMEMENT_ICON_MAP } from '../edit-collective/sections/receive-money/constants';
2627

2728
export const NEW_CREDIT_CARD_KEY = 'newCreditCard';
2829
export const STRIPE_PAYMENT_ELEMENT_KEY = 'stripe-payment-element';
@@ -222,30 +223,68 @@ export const generatePaymentMethodOptions = (
222223
}
223224

224225
// Manual (bank transfer)
226+
// if (
227+
// hostHasManual &&
228+
// stepDetails.interval === INTERVALS.oneTime &&
229+
// !disabledPaymentMethodTypes?.includes(PAYMENT_METHOD_TYPE.MANUAL)
230+
// ) {
231+
// uniquePMs.push({
232+
// key: 'manual',
233+
// title: get(collective, 'host.settings.paymentMethods.manual.title', null) || (
234+
// <FormattedMessage defaultMessage="Bank transfer (manual)" id="ycoJnS" />
235+
// ),
236+
// paymentMethod: {
237+
// service: PAYMENT_METHOD_SERVICE.OPENCOLLECTIVE,
238+
// type: PAYMENT_METHOD_TYPE.MANUAL,
239+
// },
240+
// icon: getPaymentMethodIcon({
241+
// service: PAYMENT_METHOD_SERVICE.OPENCOLLECTIVE,
242+
// type: PAYMENT_METHOD_TYPE.MANUAL,
243+
// }),
244+
// instructions: (
245+
// <FormattedMessage
246+
// id="NewContributionFlow.bankInstructions"
247+
// defaultMessage="Instructions to make a transfer will be given on the next page."
248+
// />
249+
// ),
250+
// });
251+
// }
252+
253+
// Custom payment providers
254+
const customPaymentProviders = get(collective, 'host.settings.customPaymentProviders', []);
225255
if (
226-
hostHasManual &&
256+
Array.isArray(customPaymentProviders) &&
257+
customPaymentProviders.length > 0 &&
227258
stepDetails.interval === INTERVALS.oneTime &&
228259
!disabledPaymentMethodTypes?.includes(PAYMENT_METHOD_TYPE.MANUAL)
229260
) {
230-
uniquePMs.push({
231-
key: 'manual',
232-
title: get(collective, 'host.settings.paymentMethods.manual.title', null) || (
233-
<FormattedMessage defaultMessage="Bank transfer (manual)" id="ycoJnS" />
234-
),
235-
paymentMethod: {
236-
service: PAYMENT_METHOD_SERVICE.OPENCOLLECTIVE,
237-
type: PAYMENT_METHOD_TYPE.MANUAL,
238-
},
239-
icon: getPaymentMethodIcon({
240-
service: PAYMENT_METHOD_SERVICE.OPENCOLLECTIVE,
241-
type: PAYMENT_METHOD_TYPE.MANUAL,
242-
}),
243-
instructions: (
244-
<FormattedMessage
245-
id="NewContributionFlow.bankInstructions"
246-
defaultMessage="Instructions to make a transfer will be given on the next page."
247-
/>
248-
),
261+
customPaymentProviders.forEach(provider => {
262+
const IconComponent = CUSTOM_PAYMEMENT_ICON_MAP[provider.icon];
263+
uniquePMs.push({
264+
key: `custom-${provider.id}`,
265+
title: provider.name,
266+
paymentMethod: {
267+
service: PAYMENT_METHOD_SERVICE.OPENCOLLECTIVE,
268+
type: PAYMENT_METHOD_TYPE.MANUAL,
269+
data: {
270+
customPaymentProviderId: provider.id,
271+
},
272+
},
273+
icon: IconComponent ? (
274+
<IconComponent className="h-5 w-5" />
275+
) : (
276+
getPaymentMethodIcon({
277+
service: PAYMENT_METHOD_SERVICE.OPENCOLLECTIVE,
278+
type: PAYMENT_METHOD_TYPE.MANUAL,
279+
})
280+
),
281+
subtitle: (
282+
<FormattedMessage
283+
id="NewContributionFlow.customPaymentInstructions"
284+
defaultMessage="Instructions to complete payment will be given on the next page."
285+
/>
286+
),
287+
});
249288
});
250289
}
251290
}

‎components/dashboard/sections/AccountSettings.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const AccountSettings = ({ account, section }) => {
3030
skip: !LoggedInUser,
3131
context: API_V1_CONTEXT,
3232
});
33+
3334
const collective = data?.Collective;
3435
const [editCollective] = useMutation(editCollectivePageMutation, { context: API_V1_CONTEXT });
3536

‎components/edit-collective/Form.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import Delete from './actions/Delete';
2525
import EmptyBalance from './actions/EmptyBalance';
2626
// Sections
2727
import CollectiveGoals from './sections/CollectiveGoals';
28-
import ConnectedAccounts from './sections/ConnectedAccounts';
2928
import CustomMessage from './sections/CustomMessage';
3029
import EditCollectivePage from './sections/EditCollectivePage';
3130
import Export from './sections/Export';
@@ -78,9 +77,6 @@ class EditCollectiveForm extends React.Component {
7877
case ALL_SECTIONS.COLLECTIVE_PAGE:
7978
return <EditCollectivePage collective={collective} />;
8079

81-
case ALL_SECTIONS.CONNECTED_ACCOUNTS:
82-
return <ConnectedAccounts collective={collective} connectedAccounts={collective.connectedAccounts} />;
83-
8480
case ALL_SECTIONS.EXPORT:
8581
return <Export collective={collective} />;
8682

0 commit comments

Comments
 (0)