iterate

Author: Betree

components/contribution-flow/ContributionFlowSuccess.tsx

@@ -3,7 +3,6 @@ import type { QueryResult } from '@apollo/client';
 import { graphql } from '@apollo/client/react/hoc';
 import type { PaymentIntentResult } from '@stripe/stripe-js';
 import { get, uniqBy } from 'lodash';
-import { Clock } from 'lucide-react';
 import type { NextRouter } from 'next/router';
 import { withRouter } from 'next/router';
 import type { IntlShape } from 'react-intl';
@@ -40,9 +39,9 @@ import { withUser } from '../../components/UserProvider';
 
 import { isValidExternalRedirect } from '../../pages/external-redirect';
 import Avatar from '../Avatar';
-import { CustomPaymentMethodInstructions } from '../custom-payment-provider/CustomPaymentMethodInstructions';
-import { getCustomPaymentProviderIconComponent } from '../custom-payment-provider/CustomPaymentProviderIcon';
 import Link from '../Link';
+import { CustomPaymentMethodInstructions } from '../manual-payment-provider/CustomPaymentMethodInstructions';
+import { getManualPaymentProviderIconComponent } from '../manual-payment-provider/ManualPaymentProviderIcon';
 import { Survey, SURVEY_KEY } from '../Survey';
 import { Badge } from '../ui/Badge';
 import { Button } from '../ui/Button';
@@ -317,7 +316,7 @@ class ContributionFlowSuccess extends React.Component<
     const platformTipAmount = order.platformTipAmount.valueInCents;
     const totalAmount = amount + platformTipAmount;
     const currency = order.amount.currency;
-    const IconComponent = manualPaymentProvider && getCustomPaymentProviderIconComponent(manualPaymentProvider);
+    const IconComponent = manualPaymentProvider && getManualPaymentProviderIconComponent(manualPaymentProvider);
 
     return (
       <div
@@ -362,6 +361,7 @@ class ContributionFlowSuccess extends React.Component<
                       amount: { valueInCents: totalAmount, currency },
                       collectiveSlug: get(data, 'order.toAccount.name', ''),
                       OrderId: get(data, 'order.legacyId', 0),
+                      accountDetails: manualPaymentProvider.accountDetails,
                     }}
                   />
                 </div>
@@ -391,7 +391,7 @@ class ContributionFlowSuccess extends React.Component<
     const { order } = data;
     const shareURL = `${getWebsiteUrl()}/${collective.slug}`;
     const isProcessing = order?.status === ORDER_STATUS.PROCESSING;
-    const isPendingBankTransfer = order?.status === ORDER_STATUS.PENDING && !order.paymentMethod;
+    const isPendingManualContribution = order?.status === ORDER_STATUS.PENDING && !order.paymentMethod;
 
     const loading = data.loading || !this.state?.loaded;
 
@@ -406,7 +406,7 @@ class ContributionFlowSuccess extends React.Component<
     }
 
     // Show dedicated pending layout for bank transfer contributions
-    if (!loading && isPendingBankTransfer) {
+    if (!loading && isPendingManualContribution) {
       return this.renderPendingView();
     }
 

components/contribution-flow/graphql/fragments.ts

@@ -121,9 +121,11 @@ export const orderSuccessFragment = gql`
     data
     manualPaymentProvider {
       id
+      type
       name
       instructions
       icon
+      accountDetails
     }
     amount {
       value

components/contribution-flow/utils.js

@@ -22,8 +22,8 @@ import {
 import { StripePaymentMethodsLabels } from '../../lib/stripe/payment-methods';
 import { getWebsiteUrl } from '../../lib/utils';
 
-import { getCustomPaymentProviderIconComponent } from '../custom-payment-provider/CustomPaymentProviderIcon';
 import CreditCardInactive from '../icons/CreditCardInactive';
+import { getManualPaymentProviderIconComponent } from '../manual-payment-provider/ManualPaymentProviderIcon';
 
 export const NEW_CREDIT_CARD_KEY = 'newCreditCard';
 export const STRIPE_PAYMENT_ELEMENT_KEY = 'stripe-payment-element';
@@ -232,7 +232,7 @@ export const generatePaymentMethodOptions = (
       !disabledPaymentMethodTypes?.includes(PAYMENT_METHOD_TYPE.MANUAL)
     ) {
       manualPaymentProviders.forEach(provider => {
-        const Icon = getCustomPaymentProviderIconComponent(provider);
+        const Icon = getManualPaymentProviderIconComponent(provider);
         uniquePMs.push({
           key: `custom-${provider.id}`,
           title: provider.name,