botatoh

[queen prawn]

export function BillingForm({
  subscriptionPlan,
  className,
  ...props
}: BillingFormProps) {
  const [isLoading, setIsLoading] = React.useState<boolean>(false);
  async function onSubmit(event) {
    event.preventDefault();
    setIsLoading(!isLoading);


    const response = await fetch('/api/users/stripe');

    if (!response?.ok) {
      return toast({
        title: 'Something went wrong.',
        description: 'Please refresh the page and try again.',
        variant: 'destructive',
      });
    }
    const session = await response.json();
    if (session) {
      window.location.href = session.url;
    }
  }

  return (
    <form className={cn(className)} onSubmit={onSubmit} {...props}>
      <Card>
        <CardHeader>
          <CardTitle>Subscription Plan</CardTitle>
          <CardDescription>
            You are currently on the <strong>{subscriptionPlan.name}</strong>{' '}
            plan.
          </CardDescription>
        </CardHeader>
        <CardContent>{subscriptionPlan.description}</CardContent>
        <CardFooter className="flex flex-col items-start space-y-2 md:flex-row md:justify-between md:space-x-0">
          <button
            type="submit"
            className={cn(buttonVariants())}
            disabled={isLoading}
          >
            {isLoading && (
              <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
            )}
            {subscriptionPlan.isPro ? 'Manage Subscription' : 'Upgrade to PRO'}
          </button>
          {subscriptionPlan.isPro ? (
            <p className="rounded-full text-xs font-medium">
              {subscriptionPlan.isCanceled
                ? 'Your plan will be canceled on '
                : 'Your plan renews on '}
              {formatDate(subscriptionPlan.stripeCurrentPeriodEnd)}.
            </p>
          ) : null}
        </CardFooter>
      </Card>
    </form>
  );
}

This is the component where i make the GET call Currently i have just one card, but will have 3

I think i might need to give the days as parameter for the fetch function? so i can use that in the stripeSession?
ChatGpt suggested me this kind solutation But to be real i do not trust chatgpt with this kind stuff. Im afraid that i make some mistake and it might cause some major bug.
Where determinePriceIdBasedOnUserSelection() is a function you'll implement to choose the correct Stripe price ID based on user input.

line_items: [
  {
    price: determinePriceIdBasedOnUserSelection(), // Implement this function
    quantity: 1,
  },
],

Handling Different Access Durations:

if (event.type === 'checkout.session.completed') {
  // Assuming accessDuration is set in metadata like '2days', '14days', '30days'
  const accessDuration = session.metadata.accessDuration;
  
  let accessEndDate = new Date();
  switch (accessDuration) {
    case '2days':
      accessEndDate.setDate(accessEndDate.getDate() + 2);
      break;
    case '14days':
      accessEndDate.setDate(accessEndDate.getDate() + 14);
      break;
    case '30days':
      accessEndDate.setDate(accessEndDate.getDate() + 30);
      break;
    default:
      // Handle unknown duration or set a default
      accessEndDate.setDate(accessEndDate.getDate() + 30); // default to 30 days?
  }

  // Retrieve the payment details from Stripe
  // ... other code remains the same ...

  await db.user.update({
    where: {
      id: session.metadata.userId,
    },
    data: {
      // ... other data remains the same ...
      stripeCurrentPeriodEnd: accessEndDate,
    },
  });
}

[proud escarp]

having the user pick the duration they want in the frontend, passing that selection to the backend, and then having logic to pick the correct Price ID to pass to the Session Create API call is what I would have suggested too, yes.