From 31682c71443f35c5126f470e16b678a9b9f3e394 Mon Sep 17 00:00:00 2001 From: Anik Dhabal Babu Date: Fri, 3 May 2024 18:47:37 +0000 Subject: [PATCH 1/7] chore: remove personal branding if in an org and use org branding --- .../pages/settings/my-account/appearance.tsx | 8 +- .../pages/settings/appearance.tsx | 203 ++++++------------ .../organizations/pages/settings/profile.tsx | 50 ++++- .../settings/layouts/SettingsLayout.tsx | 14 +- 4 files changed, 136 insertions(+), 139 deletions(-) diff --git a/apps/web/pages/settings/my-account/appearance.tsx b/apps/web/pages/settings/my-account/appearance.tsx index 53bde759cfcf37..b43215ef43d8d3 100644 --- a/apps/web/pages/settings/my-account/appearance.tsx +++ b/apps/web/pages/settings/my-account/appearance.tsx @@ -1,5 +1,7 @@ "use client"; +import { useSession } from "next-auth/react"; +import { useRouter } from "next/navigation"; import { useState } from "react"; import { Controller, useForm } from "react-hook-form"; import type { z } from "zod"; @@ -430,7 +432,11 @@ const AppearanceView = ({ const AppearanceViewWrapper = () => { const { data: user, isPending } = trpc.viewer.me.useQuery(); const { isPending: isTeamPlanStatusLoading, hasPaidPlan } = useHasPaidPlan(); - + const session = useSession(); + const router = useRouter(); + if (!!session.data?.user?.org?.id) { + router.replace("settings/organizations/profile"); + } const { t } = useLocale(); if (isPending || isTeamPlanStatusLoading || !user) diff --git a/packages/features/ee/organizations/pages/settings/appearance.tsx b/packages/features/ee/organizations/pages/settings/appearance.tsx index 7c9c76e19dee92..9067f4008ea97a 100644 --- a/packages/features/ee/organizations/pages/settings/appearance.tsx +++ b/packages/features/ee/organizations/pages/settings/appearance.tsx @@ -5,20 +5,17 @@ import { useRouter } from "next/navigation"; import { useState, useEffect } from "react"; import { useForm } from "react-hook-form"; -import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired"; import BrandColorsForm from "@calcom/features/ee/components/BrandColorsForm"; import { AppearanceSkeletonLoader } from "@calcom/features/ee/components/CommonSkeletonLoaders"; import SectionBottomActions from "@calcom/features/settings/SectionBottomActions"; import ThemeLabel from "@calcom/features/settings/ThemeLabel"; -import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout"; import { DEFAULT_LIGHT_BRAND_COLOR, DEFAULT_DARK_BRAND_COLOR } from "@calcom/lib/constants"; import { APP_NAME } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { MembershipRole } from "@calcom/prisma/enums"; import { trpc } from "@calcom/trpc/react"; import type { RouterOutputs } from "@calcom/trpc/react"; -import { Button, Form, Meta, showToast, SettingsToggle, Avatar, ImageUploader } from "@calcom/ui"; -import { Icon } from "@calcom/ui"; +import { Button, Form, showToast, SettingsToggle } from "@calcom/ui"; type BrandColorsFormValues = { brandColor: string; @@ -27,7 +24,6 @@ type BrandColorsFormValues = { const OrgAppearanceView = ({ currentOrg, - isAdminOrOwner, }: { currentOrg: RouterOutputs["viewer"]["organizations"]["listCurrent"]; isAdminOrOwner: boolean; @@ -79,134 +75,79 @@ const OrgAppearanceView = ({ }; return ( - - - {isAdminOrOwner ? ( -
-
-
- } - size="lg" - /> -
-
- { - mutation.mutate({ - calVideoLogo: newLogo, - }); - }} - disabled={mutation.isPending} - imageSrc={currentOrg?.calVideoLogo ?? undefined} - uploadInstruction={t("cal_video_logo_upload_instruction")} - triggerButtonColor={currentOrg?.calVideoLogo ? "secondary" : "primary"} - /> - {currentOrg?.calVideoLogo && ( - - )} -
-
-
+
+
{ + mutation.mutate({ + theme: value.theme ?? null, + }); + }}> +
+
+

{t("theme")}

+

{t("theme_applies_note")}

- { - mutation.mutate({ - theme: value.theme ?? null, - }); - }}> -
-
-

{t("theme")}

-

{t("theme_applies_note")}

-
-
-
- - - -
- - - - - -
{ - onBrandColorsFormSubmit(values); - }}> - - - - { - setHideBrandingValue(checked); - mutation.mutate({ hideBranding: checked }); - }} - switchContainerClassName="mt-6" - />
- ) : ( -
- {t("only_owner_change")} +
+ + +
- )} - + + + + + +
{ + onBrandColorsFormSubmit(values); + }}> + + + + { + setHideBrandingValue(checked); + mutation.mutate({ hideBranding: checked }); + }} + switchContainerClassName="mt-6" + /> +
); }; @@ -237,6 +178,4 @@ const OrgAppearanceViewWrapper = () => { return ; }; -OrgAppearanceViewWrapper.getLayout = getLayout; - export default OrgAppearanceViewWrapper; diff --git a/packages/features/ee/organizations/pages/settings/profile.tsx b/packages/features/ee/organizations/pages/settings/profile.tsx index c16e15065ed8e0..6596dc41ac1e3e 100644 --- a/packages/features/ee/organizations/pages/settings/profile.tsx +++ b/packages/features/ee/organizations/pages/settings/profile.tsx @@ -9,6 +9,7 @@ import { z } from "zod"; import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired"; import { subdomainSuffix } from "@calcom/features/ee/organizations/lib/orgDomains"; +import OrgAppearanceViewWrapper from "@calcom/features/ee/organizations/pages/settings/appearance"; import SectionBottomActions from "@calcom/features/settings/SectionBottomActions"; import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage"; import { useLocale } from "@calcom/lib/hooks/useLocale"; @@ -16,6 +17,7 @@ import { md } from "@calcom/lib/markdownIt"; import turndown from "@calcom/lib/turndownService"; import { MembershipRole } from "@calcom/prisma/enums"; import { trpc } from "@calcom/trpc/react"; +import { Icon } from "@calcom/ui"; import { Avatar, BannerUploader, @@ -125,7 +127,10 @@ const OrgProfileView = () => { <> {isOrgAdminOrOwner ? ( - + <> + + + ) : (
@@ -165,6 +170,7 @@ const OrgProfileForm = ({ defaultValues }: { defaultValues: FormValues }) => { const utils = trpc.useUtils(); const { t } = useLocale(); const [firstRender, setFirstRender] = useState(true); + const { data: currentOrg } = trpc.viewer.organizations.listCurrent.useQuery(undefined, {}); const form = useForm({ defaultValues, @@ -288,6 +294,48 @@ const OrgProfileForm = ({ defaultValues }: { defaultValues: FormValues }) => { }} />
+
+
+ } + size="lg" + /> +
+
+ { + mutation.mutate({ + calVideoLogo: newLogo, + }); + }} + disabled={mutation.isPending} + imageSrc={currentOrg?.calVideoLogo ?? undefined} + uploadInstruction={t("cal_video_logo_upload_instruction")} + triggerButtonColor={currentOrg?.calVideoLogo ? "secondary" : "primary"} + /> + {currentOrg?.calVideoLogo && ( + + )} +
+
+
+
{ // The following keys are assigned to admin only const adminRequiredKeys = ["admin"]; const organizationRequiredKeys = ["organization"]; -const organizationAdminKeys = ["privacy", "appearance", "billing", "OAuth Clients", "SSO", "directory_sync"]; +const organizationAdminKeys = ["privacy", "billing", "OAuth Clients", "SSO", "directory_sync"]; const useTabs = () => { const session = useSession(); @@ -185,6 +181,14 @@ const useTabs = () => { return tab; }); + if (!!session.data?.user?.org?.id) { + processedTabs.forEach((tab) => { + if (tab.href === "/settings/my-account") { + tab.children = tab.children.filter((child) => child.href !== "/settings/my-account/appearance"); + } + }); + } + // check if name is in adminRequiredKeys return processedTabs.filter((tab) => { if (organizationRequiredKeys.includes(tab.name)) return !!orgBranding; From a84008ec7530ece63a0c75a656cfd62ccbaed15e Mon Sep 17 00:00:00 2001 From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com> Date: Sat, 4 May 2024 00:22:47 +0530 Subject: [PATCH 2/7] fix: minor fix --- apps/web/pages/settings/my-account/appearance.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/pages/settings/my-account/appearance.tsx b/apps/web/pages/settings/my-account/appearance.tsx index b43215ef43d8d3..8cacf45526cc2d 100644 --- a/apps/web/pages/settings/my-account/appearance.tsx +++ b/apps/web/pages/settings/my-account/appearance.tsx @@ -435,7 +435,7 @@ const AppearanceViewWrapper = () => { const session = useSession(); const router = useRouter(); if (!!session.data?.user?.org?.id) { - router.replace("settings/organizations/profile"); + router.replace("/settings/organizations/profile"); } const { t } = useLocale(); From ee3171ae43882c9df11d944783d55adcbacd9392 Mon Sep 17 00:00:00 2001 From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com> Date: Sat, 4 May 2024 00:53:19 +0530 Subject: [PATCH 3/7] Update SettingsLayout.tsx --- packages/features/settings/layouts/SettingsLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx index ac259601e95679..f149ff96e11c03 100644 --- a/packages/features/settings/layouts/SettingsLayout.tsx +++ b/packages/features/settings/layouts/SettingsLayout.tsx @@ -184,7 +184,7 @@ const useTabs = () => { if (!!session.data?.user?.org?.id) { processedTabs.forEach((tab) => { if (tab.href === "/settings/my-account") { - tab.children = tab.children.filter((child) => child.href !== "/settings/my-account/appearance"); + tab.children = tab?.children?.filter((child) => child.href !== "/settings/my-account/appearance"); } }); } From 923e4daadbe4fce340e1eaac8c1f77f5fae28c71 Mon Sep 17 00:00:00 2001 From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com> Date: Wed, 8 May 2024 21:41:54 +0530 Subject: [PATCH 4/7] Update SettingsLayout.tsx --- packages/features/settings/layouts/SettingsLayout.tsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx index f149ff96e11c03..8062d35794e52b 100644 --- a/packages/features/settings/layouts/SettingsLayout.tsx +++ b/packages/features/settings/layouts/SettingsLayout.tsx @@ -151,6 +151,9 @@ const useTabs = () => { const processTabsMemod = useMemo(() => { const processedTabs = tabs.map((tab) => { if (tab.href === "/settings/my-account") { + if (!!session.data?.user?.org?.id) { + tab.children = tab?.children?.filter((child) => child.href !== "/settings/my-account/appearance"); + } return { ...tab, name: user?.name || "my_account", @@ -181,14 +184,6 @@ const useTabs = () => { return tab; }); - if (!!session.data?.user?.org?.id) { - processedTabs.forEach((tab) => { - if (tab.href === "/settings/my-account") { - tab.children = tab?.children?.filter((child) => child.href !== "/settings/my-account/appearance"); - } - }); - } - // check if name is in adminRequiredKeys return processedTabs.filter((tab) => { if (organizationRequiredKeys.includes(tab.name)) return !!orgBranding; From e14fdf4ea44ec300977c6c7a4cdc0b46b545e9fd Mon Sep 17 00:00:00 2001 From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com> Date: Thu, 9 May 2024 22:24:43 +0530 Subject: [PATCH 5/7] Update profile.tsx --- .../organizations/pages/settings/profile.tsx | 70 +++++++++---------- 1 file changed, 33 insertions(+), 37 deletions(-) diff --git a/packages/features/ee/organizations/pages/settings/profile.tsx b/packages/features/ee/organizations/pages/settings/profile.tsx index 6596dc41ac1e3e..a725ce5acd4519 100644 --- a/packages/features/ee/organizations/pages/settings/profile.tsx +++ b/packages/features/ee/organizations/pages/settings/profile.tsx @@ -294,45 +294,41 @@ const OrgProfileForm = ({ defaultValues }: { defaultValues: FormValues }) => { }} />
-
-
- } - size="lg" - /> -
-
- { +
+ } + size="lg" + /> +
+
+ { + mutation.mutate({ + calVideoLogo: newLogo, + }); + }} + disabled={mutation.isPending} + imageSrc={currentOrg?.calVideoLogo ?? undefined} + uploadInstruction={t("cal_video_logo_upload_instruction")} + triggerButtonColor={currentOrg?.calVideoLogo ? "secondary" : "primary"} + /> + {currentOrg?.calVideoLogo && ( + - )} -
+ }}> + {t("remove")} + + )}
From a27d1667e1cf35462dfe982262cc4766617f2d89 Mon Sep 17 00:00:00 2001 From: Anik Dhabal Babu Date: Thu, 13 Jun 2024 05:16:06 +0000 Subject: [PATCH 6/7] some fixes and e2e test --- .../pages/settings/my-account/appearance.tsx | 8 +- .../organizations/pages/settings/profile.tsx | 76 ++++++++++--------- .../image-uploader/ImageUploader.tsx | 8 +- 3 files changed, 46 insertions(+), 46 deletions(-) diff --git a/apps/web/pages/settings/my-account/appearance.tsx b/apps/web/pages/settings/my-account/appearance.tsx index 8cacf45526cc2d..53bde759cfcf37 100644 --- a/apps/web/pages/settings/my-account/appearance.tsx +++ b/apps/web/pages/settings/my-account/appearance.tsx @@ -1,7 +1,5 @@ "use client"; -import { useSession } from "next-auth/react"; -import { useRouter } from "next/navigation"; import { useState } from "react"; import { Controller, useForm } from "react-hook-form"; import type { z } from "zod"; @@ -432,11 +430,7 @@ const AppearanceView = ({ const AppearanceViewWrapper = () => { const { data: user, isPending } = trpc.viewer.me.useQuery(); const { isPending: isTeamPlanStatusLoading, hasPaidPlan } = useHasPaidPlan(); - const session = useSession(); - const router = useRouter(); - if (!!session.data?.user?.org?.id) { - router.replace("/settings/organizations/profile"); - } + const { t } = useLocale(); if (isPending || isTeamPlanStatusLoading || !user) diff --git a/packages/features/ee/organizations/pages/settings/profile.tsx b/packages/features/ee/organizations/pages/settings/profile.tsx index e5cfa322c1a19e..bbdb9a22d16ade 100644 --- a/packages/features/ee/organizations/pages/settings/profile.tsx +++ b/packages/features/ee/organizations/pages/settings/profile.tsx @@ -43,6 +43,7 @@ const orgProfileFormSchema = z.object({ name: z.string(), logoUrl: z.string().nullable(), banner: z.string().nullable(), + calVideoLogo: z.string().nullable(), bio: z.string(), }); @@ -52,6 +53,7 @@ type FormValues = { banner: string | null; bio: string; slug: string; + calVideoLogo: string | null; }; const SkeletonLoader = ({ title, description }: { title: string; description: string }) => { @@ -116,6 +118,7 @@ const OrgProfileView = () => { logoUrl: currentOrganisation?.logoUrl, banner: currentOrganisation?.bannerUrl || "", bio: currentOrganisation?.bio || "", + calVideoLogo: currentOrganisation?.calVideoLogo || "", slug: currentOrganisation?.slug || ((currentOrganisation?.metadata as Prisma.JsonObject)?.requestedSlug as string) || @@ -170,7 +173,6 @@ const OrgProfileForm = ({ defaultValues }: { defaultValues: FormValues }) => { const utils = trpc.useUtils(); const { t } = useLocale(); const [firstRender, setFirstRender] = useState(true); - const { data: currentOrg } = trpc.viewer.organizations.listCurrent.useQuery(undefined, {}); const form = useForm({ defaultValues, @@ -188,6 +190,7 @@ const OrgProfileForm = ({ defaultValues }: { defaultValues: FormValues }) => { bio: (res.data?.bio || "") as string, slug: defaultValues["slug"], banner: (res.data?.bannerUrl || "") as string, + calVideoLogo: (res.data?.calVideoLogo || "") as string, }); await utils.viewer.teams.get.invalidate(); await utils.viewer.organizations.listCurrent.invalidate(); @@ -212,6 +215,7 @@ const OrgProfileForm = ({ defaultValues }: { defaultValues: FormValues }) => { slug: values.slug, bio: values.bio, banner: values.banner, + calVideoLogo: values.calVideoLogo, }; mutation.mutate(variables); @@ -295,42 +299,42 @@ const OrgProfileForm = ({ defaultValues }: { defaultValues: FormValues }) => { />
- } - size="lg" + { + const showRemoveLogoButton = !!value; + return ( + <> + } + size="lg" + /> +
+
+ + {showRemoveLogoButton && ( + + )} +
+
+ + ); + }} /> -
-
- { - mutation.mutate({ - calVideoLogo: newLogo, - }); - }} - disabled={mutation.isPending} - imageSrc={currentOrg?.calVideoLogo ?? undefined} - uploadInstruction={t("cal_video_logo_upload_instruction")} - triggerButtonColor={currentOrg?.calVideoLogo ? "secondary" : "primary"} - /> - {currentOrg?.calVideoLogo && ( - - )} -
-
(null); @@ -125,7 +127,7 @@ export default function ImageUploader({ color={triggerButtonColor ?? "secondary"} type="button" disabled={disabled} - data-testid="open-upload-avatar-dialog" + data-testid={testId ? `open-upload-${testId}-dialog` : "open-upload-avatar-dialog"} className="cursor-pointer py-1 text-sm"> {buttonMsg} @@ -147,7 +149,7 @@ export default function ImageUploader({ )} {result && }
-