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

Jump to bottom

Update transaction details drawer #10374

Merged
merged 1 commit into from
May 13, 2024
Merged

Update transaction details drawer #10374

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
11 changes: 8 additions & 3 deletions components/CopyId.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@ import useClipboard from '../lib/hooks/useClipboard';

import { Tooltip, TooltipContent, TooltipTrigger } from './ui/Tooltip';

export const CopyID = ({ children, tooltipLabel = <FormattedMessage defaultMessage="Copy ID" id="wtLjP6" /> }) => {
export const CopyID = ({
children,
value,
tooltipLabel = <FormattedMessage defaultMessage="Copy ID" id="wtLjP6" />,
}) => {
const { isCopied, copy } = useClipboard();

return (
Expand All @@ -16,11 +20,12 @@ export const CopyID = ({ children, tooltipLabel = <FormattedMessage defaultMessa
tabIndex={-1}
onClick={e => {
e.preventDefault(); // Prevent tooltip from closing when copying
copy(children);
copy(value ?? children);
}}
className="inline-flex w-full cursor-pointer select-text items-center gap-1 rounded-sm bg-slate-50 px-1 text-left font-mono text-muted-foreground transition-colors hover:bg-slate-100 hover:text-foreground"
>
<div className="shrink truncate">{children}</div> <Copy className="shrink-0 select-none" size={12} />
<div className="shrink truncate">{children}</div>
<Copy className="shrink-0 select-none" size={12} />
</button>
</TooltipTrigger>
<TooltipContent
Expand Down
64 changes: 64 additions & 0 deletions components/PaymentMethodLabel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import React from 'react';
import { SiOpencollective, SiPaypal, SiStripe, SiWise } from '@icons-pack/react-simple-icons';
import clsx from 'clsx';
import { useIntl } from 'react-intl';

import { PaymentMethodService, PaymentMethodType } from '../lib/graphql/types/v2/graphql';
import { i18nPaymentMethodService } from '../lib/i18n/payment-method-service';
import { i18nPaymentMethodType } from '../lib/i18n/payment-method-type';

export function PaymentMethodLabel(props: { service?: PaymentMethodService; type?: PaymentMethodType }) {
const intl = useIntl();
return (
<span className="flex items-center gap-1">
<PaymentMethodServiceLabel service={props.service} />
{props.type && <React.Fragment>({i18nPaymentMethodType(intl, props.type)})</React.Fragment>}
</span>
);
}

const ServiceIcon = ({ service, ...props }: { service: PaymentMethodService; size: number }) => {
const iconContainerClasses = 'size-5 flex items-center justify-center rounded';
switch (service) {
case PaymentMethodService.PAYPAL:
return (
<div className={clsx(iconContainerClasses, 'bg-[#003087]')}>
<SiPaypal {...props} color="white" />
</div>
);
case PaymentMethodService.OPENCOLLECTIVE:
return (
<div className={clsx(iconContainerClasses, 'bg-white')}>
<SiOpencollective {...props} color="#7FADF2" />
</div>
);
case PaymentMethodService.STRIPE:
return (
<div className={clsx(iconContainerClasses, 'bg-[#635bff]')}>
<SiStripe {...props} color="white" />
</div>
);
case PaymentMethodService.WISE:
return (
<div className={clsx(iconContainerClasses, 'bg-[#87ea5c]')}>
<SiWise {...props} color="#073400" />
</div>
);
case PaymentMethodService.THEGIVINGBLOCK:
default:
return null;
}
};

export function PaymentMethodServiceLabel(props: { service?: PaymentMethodService }) {
const intl = useIntl();
if (!props.service) {
return null;
}
return (
<span className="flex items-center gap-2">
<ServiceIcon size={14} service={props.service} />
{i18nPaymentMethodService(intl, props.service)}
</span>
);
}
19 changes: 9 additions & 10 deletions components/dashboard/filters/PaymentMethodFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,16 @@ import { PaymentMethodService, PaymentMethodType } from '../../../lib/graphql/ty
import { i18nPaymentMethodService } from '../../../lib/i18n/payment-method-service';
import { i18nPaymentMethodType } from '../../../lib/i18n/payment-method-type';

import { PaymentMethodLabel, PaymentMethodServiceLabel } from '../../PaymentMethodLabel';
import { Label } from '../../ui/Label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../ui/Select';

const schema = z
.object({ service: z.nativeEnum(PaymentMethodService), type: z.nativeEnum(PaymentMethodType).optional() })
.object({
service: z.nativeEnum(PaymentMethodService),
type: z.nativeEnum(PaymentMethodType).optional(),
})
.optional();

type PaymentMethodFilterValue = z.infer<typeof schema>;

const options: Partial<Record<PaymentMethodService, PaymentMethodType[]>> = {
Expand Down Expand Up @@ -53,12 +56,8 @@ export const paymentMethodFilter: FilterConfig<PaymentMethodFilterValue> = {
},
filter: {
labelMsg: defineMessage({ defaultMessage: 'Payment method', id: 'Fields.paymentMethod' }),
valueRenderer: ({ value, intl }) => {
const serviceLabel = i18nPaymentMethodService(intl, value.service);
if (value.type) {
return `${intl.formatMessage({ id: 'withColon', defaultMessage: '{item}:' }, { item: serviceLabel })} ${i18nPaymentMethodType(intl, value.type)}`;
}
return serviceLabel;
valueRenderer: ({ value }) => {
return <PaymentMethodLabel {...value} />;
},
Component: ({ value, intl, onChange, meta }) => {
let filteredOptions = options;
Expand Down Expand Up @@ -102,8 +101,8 @@ export const paymentMethodFilter: FilterConfig<PaymentMethodFilterValue> = {
</SelectTrigger>
<SelectContent>
{serviceOptions.map(option => (
<SelectItem key={option.value} value={option.value}>
{option.label}
<SelectItem key={option.value} value={option.value} asChild>
<PaymentMethodServiceLabel service={option.value as PaymentMethodService} />
</SelectItem>
))}
</SelectContent>
Expand Down
44 changes: 20 additions & 24 deletions components/dashboard/sections/legal-documents/LegalDocumentDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import FormattedMoneyAmount from '../../../FormattedMoneyAmount';
import { getI18nLink } from '../../../I18nFormatters';
import Link from '../../../Link';
import LoadingPlaceholder from '../../../LoadingPlaceholder';
import { DataList, DataListItem } from '../../../ui/DataList';
import { Sheet, SheetBody, SheetContent } from '../../../ui/Sheet';

import { LegalDocumentServiceBadge } from './LegalDocumentServiceBadge';
Expand Down Expand Up @@ -61,15 +62,6 @@ const legalDocumentDrawerQuery = gql`
${accountHoverCardFields}
`;

const DataList = ({ title, value }) => {
return (
<div className="relative flex w-full flex-col gap-1 sm:flex-row">
<div className="min-w-[120px] max-w-[240px] shrink-0 grow-0 basis-1/4 text-muted-foreground">{title}</div>
<div className="max-w-fit overflow-hidden">{value}</div>
</div>
);
};

export default function LegalDocumentDrawer({
open,
onClose,
Expand All @@ -93,7 +85,7 @@ export default function LegalDocumentDrawer({
dropdownTriggerRef={dropdownTriggerRef}
actions={getActions(document, dropdownTriggerRef)}
entityName={intl.formatMessage({ defaultMessage: 'Tax form', id: 'TaxForm' })}
entityIdentifier={<CopyID>{document.id}</CopyID>}
entityIdentifier={<CopyID value={document.id}>{document.id}</CopyID>}
entityLabel={
<AccountHoverCard
account={document.account}
Expand All @@ -110,29 +102,33 @@ export default function LegalDocumentDrawer({
}
/>
<SheetBody>
<div className="flex flex-col gap-3 sm:gap-2">
<DataList
title={intl.formatMessage({ defaultMessage: 'Account Type', id: 'K1uUiB' })}
<DataList>
<DataListItem
label={intl.formatMessage({ defaultMessage: 'Account Type', id: 'K1uUiB' })}
value={formatCollectiveType(intl, document.account.type)}
/>
<DataList
title={intl.formatMessage({ defaultMessage: 'Service', id: 'n7yYXG' })}
<DataListItem
label={intl.formatMessage({ defaultMessage: 'Service', id: 'n7yYXG' })}
value={<LegalDocumentServiceBadge service={document.service} />}
/>{' '}
<DataList
title={intl.formatMessage({ defaultMessage: 'Status', id: 'LegalDocument.Status' })}
/>
<DataListItem
label={intl.formatMessage({ defaultMessage: 'Status', id: 'LegalDocument.Status' })}
value={<LegalDocumentStatusBadge status={document.status} isExpired={document.isExpired} />}
/>
<DataList title={intl.formatMessage({ defaultMessage: 'Year', id: 'IFo1oo' })} value={document.year} />
<DataList
title={intl.formatMessage({ defaultMessage: 'Requested at', id: 'LegalDocument.RequestedAt' })}
<DataListItem
label={intl.formatMessage({ defaultMessage: 'Year', id: 'IFo1oo' })}
value={document.year}
/>
<DataListItem
label={intl.formatMessage({ defaultMessage: 'Requested at', id: 'LegalDocument.RequestedAt' })}
value={<DateTime dateStyle="medium" timeStyle="short" value={document.requestedAt} />}
/>
<DataList
title={intl.formatMessage({ defaultMessage: 'Updated at', id: 'LegalDocument.UpdatedAt' })}
<DataListItem
label={intl.formatMessage({ defaultMessage: 'Updated at', id: 'LegalDocument.UpdatedAt' })}
value={<DateTime dateStyle="medium" timeStyle="short" value={document.updatedAt} />}
/>
</div>
</DataList>

<hr className="my-4 border-t border-slate-300" />
<div className="flex flex-col gap-2">
<div className="text-base font-medium">
Expand Down
Loading
Loading