From bce62829b794c3275c41b5304b4bc6d6199385a4 Mon Sep 17 00:00:00 2001
From: Leo Giovanetti <hello@leog.me>
Date: Wed, 13 Sep 2023 15:04:36 -0300
Subject: [PATCH] fix: org shell and org user settings avatars + org owner
 username (#11342)

---
 packages/features/settings/layouts/SettingsLayout.tsx    | 9 ++++++---
 packages/features/shell/Shell.tsx                        | 2 +-
 .../routers/viewer/organizations/create.handler.ts       | 3 ++-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx
index aa3fd3a7ee..394ae2d3ed 100644
--- a/packages/features/settings/layouts/SettingsLayout.tsx
+++ b/packages/features/settings/layouts/SettingsLayout.tsx
@@ -5,6 +5,7 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { ComponentProps } from "react";
 import React, { Suspense, useEffect, useState } from "react";
 
+import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
 import Shell from "@calcom/features/shell/Shell";
 import { classNames } from "@calcom/lib";
 import { HOSTED_CAL_FEATURES, WEBAPP_URL } from "@calcom/lib/constants";
@@ -16,7 +17,6 @@ import type { VerticalTabItemProps } from "@calcom/ui";
 import { Badge, Button, ErrorBoundary, Skeleton, useMeta, VerticalTabItem } from "@calcom/ui";
 import {
   ArrowLeft,
-  Building,
   ChevronDown,
   ChevronRight,
   CreditCard,
@@ -76,7 +76,6 @@ const tabs: VerticalTabItemProps[] = [
   {
     name: "organization",
     href: "/settings/organizations",
-    icon: Building,
     children: [
       {
         name: "profile",
@@ -137,6 +136,7 @@ const organizationRequiredKeys = ["organization"];
 const useTabs = () => {
   const session = useSession();
   const { data: user } = trpc.viewer.me.useQuery();
+  const orgBranding = useOrgBranding();
 
   const isAdmin = session.data?.user.role === UserPermissionRole.ADMIN;
 
@@ -144,7 +144,10 @@ const useTabs = () => {
     if (tab.href === "/settings/my-account") {
       tab.name = user?.name || "my_account";
       tab.icon = undefined;
-      tab.avatar = WEBAPP_URL + "/" + session?.data?.user?.username + "/avatar.png";
+      tab.avatar = `${orgBranding?.fullDomain ?? WEBAPP_URL}/${session?.data?.user?.username}/avatar.png`;
+    } else if (tab.href === "/settings/organizations") {
+      tab.name = orgBranding?.name || "organization";
+      tab.avatar = `${orgBranding?.fullDomain}/org/${orgBranding?.slug}/avatar.png`;
     } else if (
       tab.href === "/settings/security" &&
       user?.identityProvider === IdentityProvider.GOOGLE &&
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 004801f69e..773a93c39d 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -833,7 +833,7 @@ function SideBar({ bannersHeight, user }: SideBarProps) {
                 <div className="flex items-center gap-2 font-medium">
                   <Avatar
                     alt={`${orgBranding.name} logo`}
-                    imageSrc={`${orgBranding.fullDomain}/avatar.png`}
+                    imageSrc={`${orgBranding.fullDomain}/org/${orgBranding.slug}/avatar.png`}
                     size="xsm"
                   />
                   <p className="text line-clamp-1 text-sm">
diff --git a/packages/trpc/server/routers/viewer/organizations/create.handler.ts b/packages/trpc/server/routers/viewer/organizations/create.handler.ts
index 772eaf2b5d..743805fd11 100644
--- a/packages/trpc/server/routers/viewer/organizations/create.handler.ts
+++ b/packages/trpc/server/routers/viewer/organizations/create.handler.ts
@@ -14,6 +14,7 @@ import {
   WEBAPP_URL,
 } from "@calcom/lib/constants";
 import { getTranslation } from "@calcom/lib/server/i18n";
+import slugify from "@calcom/lib/slugify";
 import { prisma } from "@calcom/prisma";
 import { MembershipRole, UserPermissionRole } from "@calcom/prisma/enums";
 
@@ -126,7 +127,7 @@ export const createHandler = async ({ input, ctx }: CreateOptions) => {
 
     const createOwnerOrg = await prisma.user.create({
       data: {
-        username: adminUsername,
+        username: slugify(adminUsername),
         email: adminEmail,
         emailVerified: new Date(),
         password: hashedPassword,