Skip to content

Commit 850c8fd

Browse files
BetreeBetree
committed
WIP
1 parent e9799b9 commit 850c8fd

35 files changed

+3575
-557
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: 17 additions & 33 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';
@@ -308,26 +309,11 @@ class ContributionFlowSuccess extends React.Component {
308309
};
309310

310311
renderBankTransferInformation = () => {
311-
const instructions = get(this.props.data, 'order.toAccount.host.settings.paymentMethods.manual.instructions', null);
312-
const bankAccount = get(this.props.data, 'order.toAccount.host.bankAccount.data', null);
313-
312+
const customPaymentProvider = get(this.props.data, 'order.customPaymentProvider');
314313
const amount = get(this.props.data, 'order.amount.valueInCents', 0);
315314
const platformTipAmount = get(this.props.data, 'order.platformTipAmount.valueInCents', 0);
316315
const totalAmount = amount + platformTipAmount;
317316
const currency = get(this.props.data, 'order.amount.currency');
318-
const formattedAmount = formatCurrency(totalAmount, currency, {
319-
locale: this.props.intl.locale,
320-
currencyDisplay: 'code',
321-
});
322-
323-
const formattedValues = {
324-
account: bankAccount ? formatAccountDetails(bankAccount) : '',
325-
reference: get(this.props.data, 'order.legacyId', null),
326-
amount: formattedAmount,
327-
collective: get(this.props.data, 'order.toAccount.name', null),
328-
// Deprecated but still needed for compatibility
329-
OrderId: get(this.props.data, 'order.legacyId', null),
330-
};
331317

332318
return (
333319
<Flex flexDirection="column" justifyContent="center" width={[1, 3 / 4]} px={[4, 0]} py={[2, 0]}>
@@ -338,31 +324,29 @@ class ContributionFlowSuccess extends React.Component {
338324
values={I18nFormatters}
339325
/>
340326
</MessageBox>
341-
{instructions && (
327+
{this.props.data?.order?.status === ORDER_STATUS.PENDING && customPaymentProvider && (
342328
<BankTransferInfoContainer my={3} p={4}>
343329
<H3>
344330
<FormattedMessage id="NewContributionFlow.PaymentInstructions" defaultMessage="Payment instructions" />
345331
</H3>
346332
<Flex mt={2}>
347-
<Flex style={{ whiteSpace: 'pre-wrap' }}>{formatManualInstructions(instructions, formattedValues)}</Flex>
333+
<CustomPayoutMethodInstructions
334+
instructions={customPaymentProvider.instructions}
335+
formattedValues={{
336+
// TODO account: accountDetails,
337+
reference: get(this.props.data, 'order.legacyId', null),
338+
amount: formatCurrency(totalAmount, currency, {
339+
locale: this.props.intl.locale,
340+
currencyDisplay: 'name',
341+
}),
342+
collective: get(this.props.data, 'order.toAccount.name', null),
343+
// Deprecated but still needed for compatibility
344+
OrderId: get(this.props.data, 'order.legacyId', null),
345+
}}
346+
/>
348347
</Flex>
349348
</BankTransferInfoContainer>
350349
)}
351-
<Flex px={3} mt={2}>
352-
<P fontSize="16px" color="black.700">
353-
<FormattedMessage
354-
id="NewContributionFlow.InTheMeantime"
355-
defaultMessage="In the meantime, you can see what {collective} is up to <CollectiveLink>on their Collective page</CollectiveLink>."
356-
values={{
357-
collective: this.props.data.order.toAccount.name,
358-
CollectiveLink: getI18nLink({
359-
as: Link,
360-
href: `/${this.props.data.order.toAccount.slug}`,
361-
}),
362-
}}
363-
/>
364-
</P>
365-
</Flex>
366350
</Flex>
367351
);
368352
};

‎components/contribution-flow/graphql/fragments.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,12 @@ export const orderSuccessFragment = gql`
120120
status
121121
frequency
122122
data
123+
customPaymentProvider {
124+
id
125+
name
126+
instructions
127+
icon
128+
}
123129
amount {
124130
value
125131
valueInCents

‎components/contribution-flow/index.js‎

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -507,24 +507,7 @@ class ContributionFlow extends React.Component {
507507
return null;
508508
}
509509

510-
const paymentMethod = {
511-
// TODO: cleanup after this version is deployed in production
512-
513-
// Migration Step 1
514-
// type: stepPayment.paymentMethod.providerType,
515-
// legacyType: stepPayment.paymentMethod.providerType,
516-
// service: stepPayment.paymentMethod.service,
517-
// newType: stepPayment.paymentMethod.type,
518-
519-
// Migration Step 2
520-
legacyType: stepPayment.paymentMethod.providerType,
521-
service: stepPayment.paymentMethod.service,
522-
newType: stepPayment.paymentMethod.type,
523-
524-
// Migration Step 3
525-
// service: stepPayment.paymentMethod.service,
526-
// type: stepPayment.paymentMethod.type,
527-
};
510+
const paymentMethod = pick(stepPayment.paymentMethod, ['service', 'type', 'data']);
528511

529512
// Payment Method already registered
530513
if (stepPayment.paymentMethod.id) {
@@ -559,7 +542,7 @@ class ContributionFlow extends React.Component {
559542
paymentMethod.paymentIntentId = stepPayment.paymentMethod.paymentIntentId;
560543
paymentMethod.isSavedForLater = stepPayment.paymentMethod.isSavedForLater;
561544
}
562-
545+
console.log({ paymentMethod, stepPayment });
563546
return paymentMethod;
564547
};
565548

‎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)