fix/team-billing-update-publish-form (#5476)

* Display team slug on form when saved on metadata

* remove button disabled prop

* update mutation to latest trcp style

* Update packages/trpc/server/routers/viewer/teams.tsx

Co-authored-by: Omar López <zomars@me.com>

packages/features/ee/teams/pages/team-profile-view.tsx

@@ -1,10 +1,10 @@
-import { MembershipRole } from "@prisma/client";
+import { MembershipRole, Prisma } from "@prisma/client";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
 
-import { WEBAPP_URL } from "@calcom/lib/constants";
+import { IS_TEAM_BILLING_ENABLED, WEBAPP_URL } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import objectKeys from "@calcom/lib/objectKeys";
@@ -56,6 +56,9 @@ const ProfileView = () => {
           form.setValue("url", team.slug || "");
           form.setValue("logo", team.logo || "");
           form.setValue("bio", team.bio || "");
+          if (team.slug === null && (team?.metadata as Prisma.JsonObject)?.requestedSlug) {
+            form.setValue("url", ((team?.metadata as Prisma.JsonObject)?.requestedSlug as string) || "");
+          }
         }
       },
     }
@@ -86,6 +89,17 @@ const ProfileView = () => {
     },
   });
 
+  const publishMutation = trpc.viewer.teams.publish.useMutation({
+    async onSuccess(data: { url?: string }) {
+      if (data.url) {
+        router.push(data.url);
+      }
+    },
+    async onError(err) {
+      showToast(err.message, "error");
+    },
+  });
+
   function deleteTeam() {
     if (team?.id) deleteTeamMutation.mutate({ teamId: team.id });
   }
@@ -199,6 +213,19 @@ const ProfileView = () => {
               <Button color="primary" className="mt-8" type="submit" loading={mutation.isLoading}>
                 {t("update")}
               </Button>
+              {IS_TEAM_BILLING_ENABLED &&
+                team.slug === null &&
+                (team.metadata as Prisma.JsonObject)?.requestedSlug && (
+                  <Button
+                    color="secondary"
+                    className="ml-2 mt-8"
+                    type="button"
+                    onClick={() => {
+                      publishMutation.mutate({ teamId: team.id });
+                    }}>
+                    Publish
+                  </Button>
+                )}
             </Form>
           ) : (
             <div className="flex">

packages/lib/server/queries/teams/index.ts

@@ -22,6 +22,7 @@ export async function getTeamWithMembers(id?: number, slug?: string, userId?: nu
     logo: true,
     bio: true,
     hideBranding: true,
+    metadata: true,
     members: {
       select: {
         accepted: true,

packages/trpc/server/routers/viewer/teams.tsx

@@ -154,14 +154,24 @@ export const viewerTeamsRouter = router({
       if (
         input.slug &&
         IS_TEAM_BILLING_ENABLED &&
-        /** If the team doesn't have a slug we can assume that it hasn't been published yet. */ !prevTeam.slug
+        /** If the team doesn't have a slug we can assume that it hasn't been published yet. */
+        !prevTeam.slug
       ) {
-        throw new TRPCError({
-          code: "FORBIDDEN",
-          message: "You cannot change the slug until you publish your team",
-        });
+        // Save it on the metadata so we can use it later
+        data.metadata = {
+          requestedSlug: input.slug,
+        };
       } else {
         data.slug = input.slug;
+
+        // If we save slug, we don't need the requestedSlug anymore
+        const metadataParse = teamMetadataSchema.safeParse(prevTeam.metadata);
+        if (metadataParse.success) {
+          const { requestedSlug, ...cleanMetadata } = metadataParse.data || {};
+          data.metadata = {
+            ...cleanMetadata,
+          };
+        }
       }
 
       const updatedTeam = await ctx.prisma.team.update({
@@ -582,7 +592,7 @@ export const viewerTeamsRouter = router({
       if (!metadata.success || !metadata.data?.requestedSlug)
         throw new TRPCError({ code: "BAD_REQUEST", message: "Can't publish team without `requestedSlug`" });
 
-      // if payment needed, responed with checkout url
+      // if payment needed, respond with checkout url
       if (IS_TEAM_BILLING_ENABLED) {
         const checkoutSession = await purchaseTeamSubscription({
           teamId: prevTeam.id,