Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add payout pending section to individual response page #6214

Merged
merged 1 commit into from
Apr 28, 2023
Merged

fix: add payout pending section to individual response page #6214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 68 additions & 54 deletions frontend/src/features/admin-form/responses/IndividualResponsePage/PaymentSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { BiCheck } from 'react-icons/bi'
import { IconType } from 'react-icons/lib'
import { Box, Divider, Flex, Icon, Link, Text } from '@chakra-ui/react'
import { keyBy } from 'lodash'

Expand All @@ -8,35 +9,6 @@ import { Tag } from '~components/Tag'

import { getPaymentDataView } from '../common/utils/getPaymentDataView'

type PaymentDataItemProps = {
name: string
value: string
isMonospace?: boolean
isUrl?: boolean
}

const PaymentDataItem = ({
name,
value,
isMonospace,
isUrl,
}: PaymentDataItemProps): JSX.Element => {
return (
<Flex flexDir={{ base: 'column', md: 'row' }} gap="0.25rem">
<Text textStyle="subhead-1">{name}:</Text>
<Text textStyle={isMonospace ? 'monospace' : undefined}>
{isUrl ? (
<Link href={value} target="_blank">
Download as PDF
</Link>
) : (
value
)}
</Text>
</Flex>
)
}

type PaymentSectionProps = {
payment: SubmissionPaymentDto
formId: string
Expand All @@ -48,8 +20,6 @@ export const PaymentSection = ({
}: PaymentSectionProps): JSX.Element | null => {
if (!payment) return null

const displayPayoutSection = payment.payoutId || payment.payoutDate

const paymentDataMap = keyBy(
getPaymentDataView(window.location.origin, payment, formId),
'key',
Expand All @@ -66,24 +36,19 @@ export const PaymentSection = ({
? { label: 'Disputed', colorScheme: 'warning' }
: undefined // The remaining options should never appear.

const payoutTagProps =
payment.payoutId || payment.payoutDate
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious but payoutId and payoutDate will always exists together right? i.e. 0 || 0 and 1 || 1?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yup, this is a bit of a deficiency in the dto. but to avoid complication, i think this is fine. In principle, if any one of them is there, we should consider it successful (since a payout is already "known" to occur by ID or by date).

? { label: 'Success', colorScheme: 'success', rightIcon: BiCheck }
: { label: 'Pending', colorScheme: 'secondary' }

// Error: the payment is invalid and should not reach this state
if (!paymentTagProps) return null

return (
<Flex flexDir="column" gap="2rem">
<Flex flexDir="column" gap="4rem">
<Flex flexDir="column" gap="1.25rem">
<Flex gap="1.5rem">
<Text textStyle="h2" as="h2" color="primary.500">
Payment
</Text>
<Tag colorScheme={paymentTagProps.colorScheme}>
<Text textStyle="caption-1">{paymentTagProps.label}</Text>
{paymentTagProps.rightIcon && (
<Icon as={paymentTagProps.rightIcon} ml="0.25rem" />
)}
</Tag>
</Flex>
<Flex flexDir="column" gap="0.5rem">
<PaymentDataHeader name="Payment" {...paymentTagProps} />
<Flex flexDir="column" gap="0.75rem">
<PaymentDataItem {...paymentDataMap['email']} />
<PaymentDataItem {...paymentDataMap['receiptUrl']} isUrl />
<Box py="0.75rem">
Expand All @@ -98,17 +63,66 @@ export const PaymentSection = ({
<PaymentDataItem {...paymentDataMap['transactionFee']} />
</Flex>
</Flex>
{displayPayoutSection && (
<Flex flexDir="column" gap="1rem">
<Text textStyle="h2" as="h2" color="primary.500">
Payout
</Text>
<Flex flexDir="column" gap="0.5rem">
<PaymentDataItem {...paymentDataMap['payoutId']} isMonospace />
<PaymentDataItem {...paymentDataMap['payoutDate']} />
</Flex>
<Flex flexDir="column" gap="1.25rem">
<PaymentDataHeader name="Payout" {...payoutTagProps} />
<Flex flexDir="column" gap="0.75rem">
<PaymentDataItem {...paymentDataMap['payoutId']} isMonospace />
<PaymentDataItem {...paymentDataMap['payoutDate']} />
</Flex>
)}
</Flex>
</Flex>
)
}

type PaymentDataHeaderProps = {
name: string
label: string
colorScheme: string
rightIcon?: IconType
}

const PaymentDataHeader = ({
name,
label,
colorScheme,
rightIcon,
}: PaymentDataHeaderProps) => (
<Flex gap="1.5rem">
<Text textStyle="h2" as="h2" color="primary.500">
{name}
</Text>
<Tag colorScheme={colorScheme}>
<Text textStyle="caption-1">{label}</Text>
{rightIcon && <Icon as={rightIcon} ml="0.25rem" />}
</Tag>
</Flex>
)

type PaymentDataItemProps = {
name: string
value: string
isMonospace?: boolean
isUrl?: boolean
}

const PaymentDataItem = ({
name,
value,
isMonospace,
isUrl,
}: PaymentDataItemProps): JSX.Element => {
return (
<Flex flexDir={{ base: 'column', md: 'row' }} gap="0.25rem">
<Text textStyle="subhead-1">{name}:</Text>
<Text textStyle={isMonospace ? 'monospace' : undefined}>
{isUrl ? (
<Link href={value} target="_blank">
Download as PDF
</Link>
) : (
value
)}
</Text>
</Flex>
)
}
29 changes: 10 additions & 19 deletions frontend/src/features/admin-form/responses/common/utils/getPaymentDataView.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,23 +80,14 @@ export const getPaymentDataView = (
value: centsToDollarString(payment.transactionFee),
},

...(payment.payoutId
? [
{
key: 'payoutId' as keyof SubmissionPaymentDto,
name: 'Payout ID',
value: payment.payoutId,
},
]
: []),

...(payment.payoutDate
? [
{
key: 'payoutDate' as keyof SubmissionPaymentDto,
name: 'Payout date and time',
value: payment.payoutDate,
},
]
: []),
{
key: 'payoutId',
name: 'Payout ID',
value: payment.payoutId ?? '-',
},
{
key: 'payoutDate',
name: 'Payout date and time',
value: payment.payoutDate ?? '-',
},
]