Skip to content

Commit 2ecd8b7

Browse files
BetreeBetree
committed
iterate
1 parent 06c635a commit 2ecd8b7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+1192
-793
lines changed

‎components/contribution-flow/ContributionFlowSuccess.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import type { QueryResult } from '@apollo/client';
33
import { graphql } from '@apollo/client/react/hoc';
44
import type { PaymentIntentResult } from '@stripe/stripe-js';
55
import { get, uniqBy } from 'lodash';
6-
import { Clock } from 'lucide-react';
76
import type { NextRouter } from 'next/router';
87
import { withRouter } from 'next/router';
98
import type { IntlShape } from 'react-intl';
@@ -40,9 +39,9 @@ import { withUser } from '../../components/UserProvider';
4039

4140
import { isValidExternalRedirect } from '../../pages/external-redirect';
4241
import Avatar from '../Avatar';
43-
import { CustomPaymentMethodInstructions } from '../custom-payment-provider/CustomPaymentMethodInstructions';
44-
import { getCustomPaymentProviderIconComponent } from '../custom-payment-provider/CustomPaymentProviderIcon';
4542
import Link from '../Link';
43+
import { CustomPaymentMethodInstructions } from '../manual-payment-provider/CustomPaymentMethodInstructions';
44+
import { getManualPaymentProviderIconComponent } from '../manual-payment-provider/ManualPaymentProviderIcon';
4645
import { Survey, SURVEY_KEY } from '../Survey';
4746
import { Badge } from '../ui/Badge';
4847
import { Button } from '../ui/Button';
@@ -317,7 +316,7 @@ class ContributionFlowSuccess extends React.Component<
317316
const platformTipAmount = order.platformTipAmount.valueInCents;
318317
const totalAmount = amount + platformTipAmount;
319318
const currency = order.amount.currency;
320-
const IconComponent = manualPaymentProvider && getCustomPaymentProviderIconComponent(manualPaymentProvider);
319+
const IconComponent = manualPaymentProvider && getManualPaymentProviderIconComponent(manualPaymentProvider);
321320

322321
return (
323322
<div

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@ export const orderSuccessFragment = gql`
121121
data
122122
manualPaymentProvider {
123123
id
124+
type
124125
name
125126
instructions
126127
icon

‎components/contribution-flow/utils.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ import {
2222
import { StripePaymentMethodsLabels } from '../../lib/stripe/payment-methods';
2323
import { getWebsiteUrl } from '../../lib/utils';
2424

25-
import { getCustomPaymentProviderIconComponent } from '../custom-payment-provider/CustomPaymentProviderIcon';
2625
import CreditCardInactive from '../icons/CreditCardInactive';
26+
import { getManualPaymentProviderIconComponent } from '../manual-payment-provider/ManualPaymentProviderIcon';
2727

2828
export const NEW_CREDIT_CARD_KEY = 'newCreditCard';
2929
export const STRIPE_PAYMENT_ELEMENT_KEY = 'stripe-payment-element';
@@ -232,7 +232,7 @@ export const generatePaymentMethodOptions = (
232232
!disabledPaymentMethodTypes?.includes(PAYMENT_METHOD_TYPE.MANUAL)
233233
) {
234234
manualPaymentProviders.forEach(provider => {
235-
const Icon = getCustomPaymentProviderIconComponent(provider);
235+
const Icon = getManualPaymentProviderIconComponent(provider);
236236
uniquePMs.push({
237237
key: `custom-${provider.id}`,
238238
title: provider.name,

‎components/edit-collective/sections/ReceivingMoney.test.tsx‎

Lines changed: 108 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
11
import '@testing-library/jest-dom';
22

33
import React from 'react';
4-
import { MockedProvider } from '@apollo/client/testing';
5-
import { render, screen } from '@testing-library/react';
4+
import { MockedProvider, type MockedResponse } from '@apollo/client/testing';
5+
import { render, screen, waitFor } from '@testing-library/react';
66

7-
import { AccountType } from '@/lib/graphql/types/v2/graphql';
7+
import { AccountType, ManualPaymentProviderType } from '@/lib/graphql/types/v2/graphql';
88
import { withRequiredProviders } from '../../../test/providers';
99

10+
import { editCollectiveBankTransferHostQuery } from './receive-money/gql';
1011
import ReceivingMoney from './ReceivingMoney';
1112

1213
// Mock child components that have their own tests
1314
jest.mock('./receive-money/BankTransferMethods', () => ({
1415
__esModule: true,
15-
default: ({ manualBankTransferMethods, canEdit }: any) => (
16+
default: ({ manualPaymentProviders, canEdit }: any) => (
1617
<div data-testid="bank-transfer-methods">
17-
Bank Transfer Methods (canEdit: {String(canEdit)}, count: {manualBankTransferMethods?.length || 0})
18+
Bank Transfer Methods (canEdit: {String(canEdit)}, count: {manualPaymentProviders?.length || 0})
1819
</div>
1920
),
2021
}));
2122

2223
jest.mock('./receive-money/CustomPaymentMethods', () => ({
2324
__esModule: true,
24-
default: ({ customPaymentProviders, canEdit }: any) => (
25+
default: ({ manualPaymentProviders, canEdit }: any) => (
2526
<div data-testid="custom-payment-methods">
26-
Custom Payment Methods (canEdit: {String(canEdit)}, count: {customPaymentProviders?.length || 0})
27+
Custom Payment Methods (canEdit: {String(canEdit)}, count: {manualPaymentProviders?.length || 0})
2728
</div>
2829
),
2930
}));
@@ -40,6 +41,42 @@ jest.mock('../EditPayPalAccount', () => ({
4041

4142
jest.mock('../../../lib/hooks/useLoggedInUser', () => () => ({}));
4243

44+
const createHostQueryMock = (
45+
slug: string,
46+
overrides: {
47+
manualPayments?: boolean;
48+
manualPaymentProviders?: any[];
49+
} = {},
50+
): MockedResponse => ({
51+
request: {
52+
query: editCollectiveBankTransferHostQuery,
53+
variables: { slug },
54+
},
55+
result: {
56+
data: {
57+
host: {
58+
id: 'host-1',
59+
slug,
60+
name: 'Test Host',
61+
legacyId: 1,
62+
currency: 'USD',
63+
settings: {},
64+
connectedAccounts: [],
65+
plan: {
66+
id: 'plan-1',
67+
hostedCollectives: 10,
68+
manualPayments: overrides.manualPayments ?? true,
69+
name: 'Test Plan',
70+
__typename: 'HostPlan',
71+
},
72+
payoutMethods: [],
73+
manualPaymentProviders: overrides.manualPaymentProviders ?? [],
74+
__typename: 'Host',
75+
},
76+
},
77+
},
78+
});
79+
4380
const mockCollective = {
4481
id: 'collective-1',
4582
slug: 'test-collective',
@@ -49,7 +86,6 @@ const mockCollective = {
4986
currency: 'USD',
5087
connectedAccounts: [],
5188
settings: {},
52-
plan: { manualPayments: true },
5389
};
5490

5591
describe('ReceivingMoney', () => {
@@ -63,7 +99,7 @@ describe('ReceivingMoney', () => {
6399

64100
render(
65101
withRequiredProviders(
66-
<MockedProvider mocks={[]}>
102+
<MockedProvider mocks={[createHostQueryMock('test-collective')]}>
67103
<ReceivingMoney collective={collectiveWithoutFeature as any} />
68104
</MockedProvider>,
69105
),
@@ -74,21 +110,23 @@ describe('ReceivingMoney', () => {
74110
});
75111

76112
describe('Automatic Payments Section', () => {
77-
it('renders Stripe section', () => {
113+
it('renders Stripe section', async () => {
78114
render(
79115
withRequiredProviders(
80-
<MockedProvider mocks={[]}>
116+
<MockedProvider mocks={[createHostQueryMock('test-collective')]}>
81117
<ReceivingMoney collective={mockCollective as any} />
82118
</MockedProvider>,
83119
),
84120
);
85121

86-
expect(screen.getByText('Automatic Payments')).toBeInTheDocument();
122+
await waitFor(() => {
123+
expect(screen.getByText('Automatic Payments')).toBeInTheDocument();
124+
});
87125
expect(screen.getByText('Stripe')).toBeInTheDocument();
88126
expect(screen.getByTestId('edit-connected-account-stripe')).toBeInTheDocument();
89127
});
90128

91-
it('renders PayPal section when feature is enabled', () => {
129+
it('renders PayPal section when feature is enabled', async () => {
92130
const collectiveWithPayPal = {
93131
...mockCollective,
94132
features: { PAYPAL_DONATIONS: 'ACTIVE' },
@@ -97,144 +135,152 @@ describe('ReceivingMoney', () => {
97135

98136
render(
99137
withRequiredProviders(
100-
<MockedProvider mocks={[]}>
138+
<MockedProvider mocks={[createHostQueryMock('test-collective')]}>
101139
<ReceivingMoney collective={collectiveWithPayPal as any} />
102140
</MockedProvider>,
103141
),
104142
);
105143

106-
expect(screen.getByText('PayPal')).toBeInTheDocument();
144+
await waitFor(() => {
145+
expect(screen.getByText('PayPal')).toBeInTheDocument();
146+
});
107147
expect(screen.getByTestId('edit-paypal-account')).toBeInTheDocument();
108148
});
109149

110-
it('does not render PayPal section when feature is disabled', () => {
150+
it('does not render PayPal section when feature is disabled', async () => {
111151
render(
112152
withRequiredProviders(
113-
<MockedProvider mocks={[]}>
153+
<MockedProvider mocks={[createHostQueryMock('test-collective')]}>
114154
<ReceivingMoney collective={mockCollective as any} />
115155
</MockedProvider>,
116156
),
117157
);
118158

159+
await waitFor(() => {
160+
expect(screen.getByText('Automatic Payments')).toBeInTheDocument();
161+
});
119162
expect(screen.queryByTestId('edit-paypal-account')).not.toBeInTheDocument();
120163
});
121164
});
122165

123166
describe('Manual Payments Section', () => {
124-
it('renders bank transfers section', () => {
167+
it('renders bank transfers section', async () => {
125168
render(
126169
withRequiredProviders(
127-
<MockedProvider mocks={[]}>
170+
<MockedProvider mocks={[createHostQueryMock('test-collective')]}>
128171
<ReceivingMoney collective={mockCollective as any} />
129172
</MockedProvider>,
130173
),
131174
);
132175

133-
expect(screen.getByText('Manual Payments')).toBeInTheDocument();
176+
await waitFor(() => {
177+
expect(screen.getByText('Manual Payments')).toBeInTheDocument();
178+
});
134179
expect(screen.getByText('Bank Transfers')).toBeInTheDocument();
135180
expect(screen.getByTestId('bank-transfer-methods')).toBeInTheDocument();
136181
});
137182

138-
it('renders custom payment methods section', () => {
183+
it('renders custom payment methods section', async () => {
139184
render(
140185
withRequiredProviders(
141-
<MockedProvider mocks={[]}>
186+
<MockedProvider mocks={[createHostQueryMock('test-collective')]}>
142187
<ReceivingMoney collective={mockCollective as any} />
143188
</MockedProvider>,
144189
),
145190
);
146191

147-
expect(screen.getByText('Custom Payment Methods')).toBeInTheDocument();
192+
await waitFor(() => {
193+
expect(screen.getByText('Custom Payment Methods')).toBeInTheDocument();
194+
});
148195
expect(screen.getByTestId('custom-payment-methods')).toBeInTheDocument();
149196
});
150197

151-
it('passes correct props to BankTransferMethods', () => {
198+
it('passes correct props to BankTransferMethods', async () => {
152199
const bankTransferMethods = [
153-
{ id: '1', type: 'BANK_TRANSFER', name: 'Bank 1' },
154-
{ id: '2', type: 'BANK_TRANSFER', name: 'Bank 2' },
200+
{ id: '1', type: ManualPaymentProviderType.BANK_TRANSFER, name: 'Bank 1', __typename: 'ManualPaymentProvider' },
201+
{ id: '2', type: ManualPaymentProviderType.BANK_TRANSFER, name: 'Bank 2', __typename: 'ManualPaymentProvider' },
155202
];
156-
const collective = {
157-
...mockCollective,
158-
settings: { customPaymentProviders: bankTransferMethods },
159-
};
160203

161204
render(
162205
withRequiredProviders(
163-
<MockedProvider mocks={[]}>
164-
<ReceivingMoney collective={collective as any} />
206+
<MockedProvider
207+
mocks={[createHostQueryMock('test-collective', { manualPaymentProviders: bankTransferMethods })]}
208+
>
209+
<ReceivingMoney collective={mockCollective as any} />
165210
</MockedProvider>,
166211
),
167212
);
168213

214+
await waitFor(() => {
215+
expect(screen.getByTestId('bank-transfer-methods')).toBeInTheDocument();
216+
});
169217
const bankTransferComponent = screen.getByTestId('bank-transfer-methods');
170218
expect(bankTransferComponent).toHaveTextContent('count: 2');
171219
expect(bankTransferComponent).toHaveTextContent('canEdit: true');
172220
});
173221

174-
it('passes correct props to CustomPaymentMethods', () => {
222+
it('passes correct props to CustomPaymentMethods', async () => {
175223
const customMethods = [
176-
{ id: '1', type: 'OTHER', name: 'Venmo' },
177-
{ id: '2', type: 'OTHER', name: 'CashApp' },
224+
{ id: '1', type: ManualPaymentProviderType.OTHER, name: 'Venmo', __typename: 'ManualPaymentProvider' },
225+
{ id: '2', type: ManualPaymentProviderType.OTHER, name: 'CashApp', __typename: 'ManualPaymentProvider' },
178226
];
179-
const collective = {
180-
...mockCollective,
181-
settings: { customPaymentProviders: customMethods },
182-
};
183227

184228
render(
185229
withRequiredProviders(
186-
<MockedProvider mocks={[]}>
187-
<ReceivingMoney collective={collective as any} />
230+
<MockedProvider mocks={[createHostQueryMock('test-collective', { manualPaymentProviders: customMethods })]}>
231+
<ReceivingMoney collective={mockCollective as any} />
188232
</MockedProvider>,
189233
),
190234
);
191235

236+
await waitFor(() => {
237+
expect(screen.getByTestId('custom-payment-methods')).toBeInTheDocument();
238+
});
192239
const customMethodsComponent = screen.getByTestId('custom-payment-methods');
193240
expect(customMethodsComponent).toHaveTextContent('count: 2');
194241
expect(customMethodsComponent).toHaveTextContent('canEdit: true');
195242
});
196243

197-
it('partitions bank transfers and custom payment methods correctly', () => {
244+
it('partitions bank transfers and custom payment methods correctly', async () => {
198245
const mixedMethods = [
199-
{ id: '1', type: 'BANK_TRANSFER', name: 'Bank 1' },
200-
{ id: '2', type: 'OTHER', name: 'Venmo' },
201-
{ id: '3', type: 'BANK_TRANSFER', name: 'Bank 2' },
202-
{ id: '4', type: 'OTHER', name: 'CashApp' },
246+
{ id: '1', type: ManualPaymentProviderType.BANK_TRANSFER, name: 'Bank 1', __typename: 'ManualPaymentProvider' },
247+
{ id: '2', type: ManualPaymentProviderType.OTHER, name: 'Venmo', __typename: 'ManualPaymentProvider' },
248+
{ id: '3', type: ManualPaymentProviderType.BANK_TRANSFER, name: 'Bank 2', __typename: 'ManualPaymentProvider' },
249+
{ id: '4', type: ManualPaymentProviderType.OTHER, name: 'CashApp', __typename: 'ManualPaymentProvider' },
203250
];
204-
const collective = {
205-
...mockCollective,
206-
settings: { customPaymentProviders: mixedMethods },
207-
};
208251

209252
render(
210253
withRequiredProviders(
211-
<MockedProvider mocks={[]}>
212-
<ReceivingMoney collective={collective as any} />
254+
<MockedProvider mocks={[createHostQueryMock('test-collective', { manualPaymentProviders: mixedMethods })]}>
255+
<ReceivingMoney collective={mockCollective as any} />
213256
</MockedProvider>,
214257
),
215258
);
216259

260+
await waitFor(() => {
261+
expect(screen.getByTestId('bank-transfer-methods')).toBeInTheDocument();
262+
});
217263
const bankTransferComponent = screen.getByTestId('bank-transfer-methods');
218264
const customMethodsComponent = screen.getByTestId('custom-payment-methods');
219265

220-
expect(bankTransferComponent).toHaveTextContent('count: 2');
221-
expect(customMethodsComponent).toHaveTextContent('count: 2');
266+
// Both components receive the full manualPaymentProviders array
267+
// The filtering is done inside the child components themselves
268+
expect(bankTransferComponent).toHaveTextContent('count: 4');
269+
expect(customMethodsComponent).toHaveTextContent('count: 4');
222270
});
223271

224-
it('passes canEdit as false when plan does not have manualPayments', () => {
225-
const collectiveWithoutPlan = {
226-
...mockCollective,
227-
plan: { manualPayments: false },
228-
};
229-
272+
it('passes canEdit as false when plan does not have manualPayments', async () => {
230273
render(
231274
withRequiredProviders(
232-
<MockedProvider mocks={[]}>
233-
<ReceivingMoney collective={collectiveWithoutPlan as any} />
275+
<MockedProvider mocks={[createHostQueryMock('test-collective', { manualPayments: false })]}>
276+
<ReceivingMoney collective={mockCollective as any} />
234277
</MockedProvider>,
235278
),
236279
);
237280

281+
await waitFor(() => {
282+
expect(screen.getByTestId('bank-transfer-methods')).toBeInTheDocument();
283+
});
238284
const bankTransferComponent = screen.getByTestId('bank-transfer-methods');
239285
const customMethodsComponent = screen.getByTestId('custom-payment-methods');
240286

0 commit comments

Comments
 (0)