78 lines
2.3 KiB
TypeScript
Executable File
78 lines
2.3 KiB
TypeScript
Executable File
import {useBillingUser} from '../use-billing-user';
|
|
import {BillingPlanPanel} from '../billing-plan-panel';
|
|
import {Trans} from '../../../i18n/trans';
|
|
import {Link} from 'react-router-dom';
|
|
import {EditIcon} from '../../../icons/material/Edit';
|
|
import {Fragment} from 'react';
|
|
import paypalSvg from './paypal.svg';
|
|
import {SvgImage} from '../../../ui/images/svg-image/svg-image';
|
|
|
|
export function PaymentMethodPanel() {
|
|
const {user, subscription} = useBillingUser();
|
|
if (!user || !subscription) return null;
|
|
|
|
const isPaypal = subscription.gateway_name === 'paypal';
|
|
const PaymentMethod = isPaypal ? PaypalPaymentMethod : CardPaymentMethod;
|
|
|
|
return (
|
|
<BillingPlanPanel title={<Trans message="Payment method" />}>
|
|
<PaymentMethod
|
|
methodClassName="whitespace-nowrap text-base max-w-[464px] flex items-center gap-10"
|
|
linkClassName="flex items-center gap-4 text-muted mt-18 block hover:underline"
|
|
/>
|
|
</BillingPlanPanel>
|
|
);
|
|
}
|
|
|
|
interface PaymentMethodProps {
|
|
methodClassName: string;
|
|
linkClassName: string;
|
|
}
|
|
function CardPaymentMethod({
|
|
methodClassName,
|
|
linkClassName,
|
|
}: PaymentMethodProps) {
|
|
const {user} = useBillingUser();
|
|
if (!user) return null;
|
|
return (
|
|
<Fragment>
|
|
<div className={methodClassName}>
|
|
<span className="capitalize">{user.card_brand}</span> ••••
|
|
{user.card_last_four}
|
|
{user.card_expires && (
|
|
<div className="ml-auto">
|
|
<Trans message="Expires :date" values={{date: user.card_expires}} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Link className={linkClassName} to="/billing/change-payment-method">
|
|
<EditIcon size="sm" />
|
|
<Trans message="Change payment method" />
|
|
</Link>
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
function PaypalPaymentMethod({
|
|
methodClassName,
|
|
linkClassName,
|
|
}: PaymentMethodProps) {
|
|
const {subscription} = useBillingUser();
|
|
return (
|
|
<Fragment>
|
|
<div className={methodClassName}>
|
|
<SvgImage src={paypalSvg} />
|
|
</div>
|
|
<a
|
|
className={linkClassName}
|
|
href={`https://www.sandbox.paypal.com/myaccount/autopay/connect/${subscription?.gateway_id}/funding`}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
<EditIcon size="sm" />
|
|
<Trans message="Change payment method" />
|
|
</a>
|
|
</Fragment>
|
|
);
|
|
}
|