isLoading is not working it is giving error can anyone help

[JayGadhethariya456]

'use client'

import { getUserSubscriptionPlan } from '@/lib/stripe'
import { useToast } from './ui/use-toast'
import { trpc } from '@/app/_trpc/client'
import MaxWidthWrapper from './MaxWidthWrapper'
import {
Card,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from './ui/card'
import { Button } from './ui/button'
import { Loader2 } from 'lucide-react'
import { format } from 'date-fns'

interface BillingFormProps {
subscriptionPlan: Awaited<
ReturnType

}

const BillingForm = ({
subscriptionPlan,
}: BillingFormProps) => {
const { toast } = useToast()

const { mutate: createStripeSession, isLoading } =
trpc.createStripeSession.useMutation({
onSuccess: ({ url }) => {
if (url) window.location.href = url
if (!url) {
toast({
title: 'There was a problem...',
description: 'Please try again in a moment',
variant: 'destructive',
})
}
},
})

return (

<form
className='mt-12'
onSubmit={(e) => {
e.preventDefault()
createStripeSession()
}}>


Subscription Plan

You are currently on the{' '}
{subscriptionPlan.name} plan.

      <CardFooter className='flex flex-col items-start space-y-2 md:flex-row md:justify-between md:space-x-0'>
        <Button type='submit'>
          {isLoading ? (
            <Loader2 className='mr-4 h-4 w-4 animate-spin' />
          ) : null}
          {subscriptionPlan.isSubscribed
            ? 'Manage Subscription'
            : 'Upgrade to PRO'}
        </Button>

        {subscriptionPlan.isSubscribed ? (
          <p className='rounded-full text-xs font-medium'>
            {subscriptionPlan.isCanceled
              ? 'Your plan will be canceled on '
              : 'Your plan renews on'}
            {format(
              subscriptionPlan.stripeCurrentPeriodEnd!,
              'dd.MM.yyyy'
            )}
            .
          </p>
        ) : null}
      </CardFooter>
    </Card>
  </form>
</MaxWidthWrapper>

)
}

export default BillingForm

[noxify]

@JayGadhethariya456 And what is the error?

[JayGadhethariya456]

Property 'isLoading' does not exist on type 'UseTRPCMutationResult<{ url: string | null; }, TRPCClientErrorLike<{ input: void; output: { url: string | null; }; transformer: false; errorShape: DefaultErrorShape; }>, void, unknown>'. i even used chatgpt and copilot both didn't solved the error

[noxify]

@JayGadhethariya456 Did you changed something somewhere in your code or did you just run git clone [email protected]:joschan21/quill.git and got the error?

Tested it quickly via

git clone [email protected]:joschan21/quill.git
cd quill
pnpm i

and can't reproduce your issue ( src/components/BillingForm.tsx ):

[JayGadhethariya456]

this is happening when i hover on isLoading Property 'isLoading' does not exist on type 'UseTRPCMutationResult<{ url: string | null; }, TRPCClientErrorLike<{ input: void; output: { url: string | null; }; transformer: false; errorShape: DefaultErrorShape; }>, void, unknown>'.ts(2339)
const isLoading: any

[JayGadhethariya456]

i have used exact code of josh's code

[noxify]

maybe it helps to restart the typescript server in your VSC ( or whatever you use :) ).

[JayGadhethariya456]

ive done that too. something is wrong with isLoading.

[noxify]

any chance to provide a repro ( e.g. via stackblitz / codesandbox )?

[Sim0n18]

@JayGadhethariya456 @noxify I get the same error. Are there any news on this?

[JayGadhethariya456]

This code worked for me i hope it works for u too.
'use client'

import { useState } from 'react'; // Import useState hook
import { getUserSubscriptionPlan } from '@/lib/stripe';
import { useToast } from './ui/use-toast';
import { trpc } from '@/app/_trpc/client';
import MaxWidthWrapper from './MaxWidthWrapper';
import {
Card,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from './ui/card';
import { Button } from './ui/button';
import { Loader2 } from 'lucide-react';
import { format } from 'date-fns';

interface BillingFormProps {
subscriptionPlan: Awaited<
ReturnType

;
}

const BillingForm = ({
subscriptionPlan,
}: BillingFormProps) => {
const { toast } = useToast();
const [isLoading, setIsLoading] = useState(false); // State to manage loading

const { mutate: createStripeSessionMutation } =
trpc.createStripeSession.useMutation();

const handleMutate = async () => {
setIsLoading(true); // Set loading state to true before mutation
try {
await createStripeSessionMutation(); // Call the mutation function
// If mutation succeeds, redirect
window.location.href = 'redirect-url';
} catch (error) {
console.error('Error creating stripe session:', error);
toast({
title: 'Error',
description: 'An error occurred. Please try again later.',
variant: 'destructive',
});
} finally {
setIsLoading(false); // Set loading state to false after mutation
}
};

return (

<form
className='mt-12'
onSubmit={(e) => {
e.preventDefault();
handleMutate(); // Call custom mutation handler
}}>


Subscription Plan

You are currently on the{' '}
{subscriptionPlan.name} plan.

      <CardFooter className='flex flex-col items-start space-y-2 md:flex-row md:justify-between md:space-x-0'>
        <Button type='submit' disabled={isLoading}>
          {isLoading ? (
            <Loader2 className='mr-4 h-4 w-4 animate-spin' />
          ) : null}
          {subscriptionPlan.isSubscribed
            ? 'Manage Subscription'
            : 'Upgrade to PRO'}
        </Button>

        {subscriptionPlan.isSubscribed ? (
          <p className='rounded-full text-xs font-medium'>
            {subscriptionPlan.isCanceled
              ? 'Your plan will be canceled on '
              : 'Your plan renews on ::'}
            {format(
              subscriptionPlan.stripeCurrentPeriodEnd!,
              'dd.MM.yyyy'
            )}
            .
          </p>
        ) : null}
      </CardFooter>
    </Card>
  </form>
</MaxWidthWrapper>

);
};

export default BillingForm;

[julien-gadonneix]

OR

Replace isLoading by status in the parameters. In the condition use status === "pending"