fix/premium-username-callback (#9938)

apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx

@@ -5,6 +5,7 @@ import type { RefCallback } from "react";
 import { useEffect, useMemo, useState } from "react";
 
 import { getPremiumPlanPriceValue } from "@calcom/app-store/stripepayment/lib/utils";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { fetchUsername } from "@calcom/lib/fetchUsername";
 import hasKeyInMetadata from "@calcom/lib/hasKeyInMetadata";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -116,7 +117,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
 
   const paymentLink = `/api/integrations/stripepayment/subscription?intentUsername=${
     inputUsernameValue || usernameFromStripe
-  }&action=${usernameChangeCondition}&callbackUrl=${router.asPath}`;
+  }&action=${usernameChangeCondition}&callbackUrl=${WEBAPP_URL}${router.asPath}`;
 
   const ActionButtons = () => {
     if (paymentRequired) {

apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx

@@ -135,7 +135,7 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
           />
           {currentUsername !== inputUsernameValue && (
             <div className="absolute right-[2px] top-6 flex flex-row">
-              <span className={classNames("mx-2 py-2.5")}>
+              <span className={classNames("mx-2 py-3.5")}>
                 {usernameIsAvailable ? <Check className="h-4 w-4" /> : <></>}
               </span>
             </div>

packages/trpc/server/routers/loggedInViewer/stripeCustomer.handler.ts

@@ -30,12 +30,29 @@ export const stripeCustomerHandler = async ({ ctx }: StripeCustomerOptions) => {
   }
 
   const metadata = userMetadata.parse(user.metadata);
-
-  if (!metadata?.stripeCustomerId) {
-    throw new TRPCError({ code: "BAD_REQUEST", message: "No stripe customer id" });
+  let stripeCustomerId = metadata?.stripeCustomerId;
+  if (!stripeCustomerId) {
+    // Create stripe customer
+    const customer = await stripe.customers.create({
+      metadata: {
+        userId: userId.toString(),
+      },
+    });
+    await prisma.user.update({
+      where: {
+        id: userId,
+      },
+      data: {
+        metadata: {
+          ...metadata,
+          stripeCustomerId: customer.id,
+        },
+      },
+    });
+    stripeCustomerId = customer.id;
   }
+
   // Fetch stripe customer
-  const stripeCustomerId = metadata?.stripeCustomerId;
   const customer = await stripe.customers.retrieve(stripeCustomerId);
   if (customer.deleted) {
     throw new TRPCError({ code: "BAD_REQUEST", message: "No stripe customer found" });