Function Billing

apps/start/src/components/organization/billing.tsx:25–253

({ organization }: Props)

};

export default function Billing({ organization }: Props) {
  const [success, setSuccess] = useQueryState('customer_session_token');
  const queryClient = useQueryClient();
  const trpc = useTRPC();
  const number = useNumber();

  const productsQuery = useQuery(
    trpc.subscription.products.queryOptions({
      organizationId: organization.id,
    })
  );

  const currentProductQuery = useQuery(
    trpc.subscription.getCurrent.queryOptions({
      organizationId: organization.id,
    })
  );

  const portalMutation = useMutation(
    trpc.subscription.portal.mutationOptions({
      onSuccess(data) {
        if (data?.url) {
          window.location.href = data.url;
        }
      },
      onError(error) {
        toast.error(error.message);
      },
    })
  );

  useWS(`/live/organization/${organization.id}`, () => {
    queryClient.invalidateQueries(trpc.organization.pathFilter());
    queryClient.invalidateQueries(trpc.subscription.pathFilter());
  });

  const [recurringInterval, setRecurringInterval] = useState<'year' | 'month'>(
    (organization.subscriptionInterval as 'year' | 'month') || 'month'
  );

  const products = useMemo(() => {
    return (productsQuery.data || [])
      .filter((product) => product.recurringInterval === recurringInterval)
      .filter((product) => product.prices.some((p) => p.amountType !== 'free'));
  }, [productsQuery.data, recurringInterval]);

  const currentProduct = currentProductQuery.data ?? null;
  const currentPrice = currentProduct?.prices.flatMap((p) =>
    p.amountType === 'fixed' ? [p] : []
  )[0];

  const renderStatus = () => {
    const meta = getSubscriptionStateMeta(organization.subscriptionState, {
      endsAt: organization.subscriptionEndsAt,
      canceledAt: organization.subscriptionCanceledAt,
    });

    if (!meta.statusLine) {