konnosCurrentPaymentMethod.tsx86 lines · main
| 1 | import { PermissionAction, SupportCategories } from '@supabase/shared-types/out/constants' |
| 2 | import { useParams } from 'common' |
| 3 | import { CreditCardIcon } from 'lucide-react' |
| 4 | import Link from 'next/link' |
| 5 | import { Button } from 'ui' |
| 6 | import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' |
| 7 | |
| 8 | import CreditCard from './CreditCard' |
| 9 | import { SupportLink } from '@/components/interfaces/Support/SupportLink' |
| 10 | import { useOrganizationPaymentMethodsQuery } from '@/data/organizations/organization-payment-methods-query' |
| 11 | import { useOrgSubscriptionQuery } from '@/data/subscriptions/org-subscription-query' |
| 12 | import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions' |
| 13 | |
| 14 | const CurrentPaymentMethod = () => { |
| 15 | const { slug } = useParams() |
| 16 | |
| 17 | const { |
| 18 | data: subscription, |
| 19 | isPending: isLoadingSubscription, |
| 20 | isError: isErrorSubscription, |
| 21 | } = useOrgSubscriptionQuery({ |
| 22 | orgSlug: slug, |
| 23 | }) |
| 24 | const { |
| 25 | data: paymentMethods, |
| 26 | isPending: isLoadingOrganizationPaymentMethods, |
| 27 | isError: isErrorOrganizationPaymentMethods, |
| 28 | } = useOrganizationPaymentMethodsQuery({ slug }) |
| 29 | |
| 30 | const isLoading = isLoadingSubscription || isLoadingOrganizationPaymentMethods |
| 31 | const isError = isErrorSubscription || isErrorOrganizationPaymentMethods |
| 32 | |
| 33 | const defaultPaymentMethod = paymentMethods?.data.find((pm) => pm.is_default) |
| 34 | |
| 35 | const { can: canReadPaymentMethods } = useAsyncCheckPermissions( |
| 36 | PermissionAction.BILLING_READ, |
| 37 | 'stripe.payment_methods' |
| 38 | ) |
| 39 | |
| 40 | // since this component is an enhancement, |
| 41 | // if it can't read payment methods, we will just not show it |
| 42 | if (!canReadPaymentMethods || isError) return null |
| 43 | |
| 44 | return ( |
| 45 | <div className="flex justify-between items-center gap-4 w-full text-sm rounded-lg p-4 text-foreground bg-alternative border"> |
| 46 | {isLoading ? ( |
| 47 | <ShimmeringLoader className="flex-1" /> |
| 48 | ) : subscription?.payment_method_type === 'invoice' ? ( |
| 49 | <p className="flex-1 text-sm"> |
| 50 | You get a monthly invoice and payment link via email. To change your payment method, |
| 51 | please contact us via our support form. |
| 52 | </p> |
| 53 | ) : !defaultPaymentMethod ? ( |
| 54 | <div className="flex-1 flex items-center gap-2 opacity-50"> |
| 55 | <CreditCardIcon size={16} strokeWidth={1.5} /> |
| 56 | <p className="text-sm">No payment methods</p> |
| 57 | </div> |
| 58 | ) : ( |
| 59 | <CreditCard |
| 60 | paymentMethod={defaultPaymentMethod} |
| 61 | paymentMethodType={subscription?.payment_method_type} |
| 62 | canUpdatePaymentMethods={false} |
| 63 | paymentMethodCount={paymentMethods?.data.length ?? 0} |
| 64 | subscriptionPlan={subscription?.plan.id} |
| 65 | /> |
| 66 | )} |
| 67 | |
| 68 | <Button type="outline" asChild> |
| 69 | {subscription?.payment_method_type === 'invoice' ? ( |
| 70 | <SupportLink |
| 71 | queryParams={{ |
| 72 | category: SupportCategories.BILLING, |
| 73 | message: 'I would like to change my payment method', |
| 74 | }} |
| 75 | > |
| 76 | Contact support |
| 77 | </SupportLink> |
| 78 | ) : ( |
| 79 | <Link href={`/org/${slug}/billing#payment-methods`}>Manage payment methods</Link> |
| 80 | )} |
| 81 | </Button> |
| 82 | </div> |
| 83 | ) |
| 84 | } |
| 85 | |
| 86 | export default CurrentPaymentMethod |