fix: Use constants.ts for brand colours > db DEFAULT (#13167)

* fix: user proper default values if no brand colour is set.

* fix:default value

* fix: more ?? to defined default as color is possibly null

apps/web/pages/[user].tsx

@@ -18,6 +18,7 @@ import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/or
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { EventTypeDescriptionLazy as EventTypeDescription } from "@calcom/features/eventtypes/components";
 import EmptyPage from "@calcom/features/eventtypes/components/EmptyPage";
+import { DEFAULT_DARK_BRAND_COLOR, DEFAULT_LIGHT_BRAND_COLOR } from "@calcom/lib/constants";
 import { getUsernameList } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
@@ -412,9 +413,9 @@ export const getServerSideProps: GetServerSideProps<UserPageProps> = async (cont
     name: user.name || user.username || "",
     image: user.avatar,
     theme: user.theme,
-    brandColor: user.brandColor,
+    brandColor: user.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR,
     avatarUrl: user.avatarUrl,
-    darkBrandColor: user.darkBrandColor,
+    darkBrandColor: user.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR,
     allowSEOIndexing: user.allowSEOIndexing ?? true,
     username: user.username,
     organization: {

apps/web/pages/settings/my-account/appearance.tsx

@@ -100,10 +100,15 @@ const AppearanceView = ({
     reset: resetBookerLayoutThemeReset,
   } = bookerLayoutFormMethods;
 
+  const DEFAULT_BRAND_COLOURS = {
+    light: user.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR,
+    dark: user.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR,
+  };
+
   const brandColorsFormMethods = useForm({
     defaultValues: {
-      brandColor: user.brandColor || DEFAULT_LIGHT_BRAND_COLOR,
+      brandColor: DEFAULT_BRAND_COLOURS.light,
-      darkBrandColor: user.darkBrandColor || DEFAULT_DARK_BRAND_COLOR,
+      darkBrandColor: DEFAULT_BRAND_COLOURS.dark,
     },
   });
 
@@ -233,12 +238,12 @@ const AppearanceView = ({
               <Controller
                 name="brandColor"
                 control={brandColorsFormMethods.control}
-                defaultValue={user.brandColor}
+                defaultValue={DEFAULT_BRAND_COLOURS.light}
                 render={() => (
                   <div>
                     <p className="text-default mb-2 block text-sm font-medium">{t("light_brand_color")}</p>
                     <ColorPicker
-                      defaultValue={user.brandColor}
+                      defaultValue={DEFAULT_BRAND_COLOURS.light}
                       resetDefaultValue={DEFAULT_LIGHT_BRAND_COLOR}
                       onChange={(value) => {
                         try {
@@ -262,12 +267,12 @@ const AppearanceView = ({
               <Controller
                 name="darkBrandColor"
                 control={brandColorsFormMethods.control}
-                defaultValue={user.darkBrandColor}
+                defaultValue={DEFAULT_BRAND_COLOURS.dark}
                 render={() => (
                   <div className="mt-6 sm:mt-0">
                     <p className="text-default mb-2 block text-sm font-medium">{t("dark_brand_color")}</p>
                     <ColorPicker
-                      defaultValue={user.darkBrandColor}
+                      defaultValue={DEFAULT_BRAND_COLOURS.dark}
                       resetDefaultValue={DEFAULT_DARK_BRAND_COLOR}
                       onChange={(value) => {
                         try {

packages/features/bookings/Booker/Booker.tsx

@@ -10,6 +10,7 @@ import dayjs from "@calcom/dayjs";
 import { useEmbedType, useEmbedUiConfig, useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import { useNonEmptyScheduleDays } from "@calcom/features/schedules";
 import classNames from "@calcom/lib/classNames";
+import { DEFAULT_LIGHT_BRAND_COLOR, DEFAULT_DARK_BRAND_COLOR } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
 import { BookerLayouts, defaultBookerLayoutSettings } from "@calcom/prisma/zod-utils";
@@ -144,8 +145,8 @@ const BookerComponent = ({
     : bookerLayouts.defaultLayout;
 
   useBrandColors({
-    brandColor: event.data?.profile.brandColor,
+    brandColor: event.data?.profile.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR,
-    darkBrandColor: event.data?.profile.darkBrandColor,
+    darkBrandColor: event.data?.profile.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR,
     theme: event.data?.profile.theme,
   });
 

packages/features/ee/components/BrandColorsForm.tsx

@@ -26,7 +26,6 @@ const BrandColorsForm = ({
   const brandColorsFormMethods = useFormContext();
   const {
     formState: { isSubmitting: isBrandColorsFormSubmitting, isDirty: isBrandColorsFormDirty },
-    handleSubmit,
   } = brandColorsFormMethods;
 
   const [isCustomBrandColorChecked, setIsCustomBrandColorChecked] = useState(

packages/features/ee/organizations/pages/settings/appearance.tsx

@@ -180,8 +180,8 @@ const OrgAppearanceView = ({
             }}>
             <BrandColorsForm
               onSubmit={onBrandColorsFormSubmit}
-              brandColor={currentOrg?.brandColor}
+              brandColor={currentOrg?.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR}
-              darkBrandColor={currentOrg?.darkBrandColor}
+              darkBrandColor={currentOrg?.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR}
             />
           </Form>
 

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

@@ -61,7 +61,10 @@ const ProfileView = ({ team }: ProfileViewProps) => {
       await utils.viewer.teams.get.invalidate();
       if (res) {
         resetTheme({ theme: res.theme });
-        resetBrandColors({ brandColor: res.brandColor, darkBrandColor: res.darkBrandColor });
+        resetBrandColors({
+          brandColor: res.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR,
+          darkBrandColor: res.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR,
+        });
       }
 
       showToast(t("your_team_updated_successfully"), "success");
@@ -139,8 +142,8 @@ const ProfileView = ({ team }: ProfileViewProps) => {
             }}>
             <BrandColorsForm
               onSubmit={onBrandColorsFormSubmit}
-              brandColor={team?.brandColor}
+              brandColor={team?.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR}
-              darkBrandColor={team?.darkBrandColor}
+              darkBrandColor={team?.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR}
             />
           </Form>
 

packages/lib/getBrandColours.tsx

@@ -1,7 +1,9 @@
 import { useBrandColors } from "@calcom/embed-core/embed-iframe";
 
-const BRAND_COLOR = "#292929";
+import { DEFAULT_DARK_BRAND_COLOR, DEFAULT_LIGHT_BRAND_COLOR } from "./constants";
-const DARK_BRAND_COLOR = "#fafafa";
+
+const BRAND_COLOR = DEFAULT_LIGHT_BRAND_COLOR;
+const DARK_BRAND_COLOR = DEFAULT_DARK_BRAND_COLOR;
 
 type Rgb = {
   r: number;

packages/prisma/migrations/20240111075727_remove_brand_colours_default/migration.sql

@@ -0,0 +1,17 @@
+ALTER TABLE "Team" ALTER COLUMN "brandColor" DROP NOT NULL,
+ALTER COLUMN "brandColor" DROP DEFAULT,
+ALTER COLUMN "darkBrandColor" DROP NOT NULL,
+ALTER COLUMN "darkBrandColor" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "users" ALTER COLUMN "brandColor" DROP NOT NULL,
+ALTER COLUMN "brandColor" DROP DEFAULT,
+ALTER COLUMN "darkBrandColor" DROP NOT NULL,
+ALTER COLUMN "darkBrandColor" DROP DEFAULT;
+
+UPDATE "Team" SET "brandColor" = NULL WHERE "brandColor" = '#292929';
+UPDATE "Team" SET "darkBrandColor" = NULL WHERE "darkBrandColor" = '#fafafa';
+
+UPDATE "users" SET "brandColor" = NULL WHERE "brandColor" = '#292929';
+UPDATE "users" SET "darkBrandColor" = NULL WHERE "darkBrandColor" = '#fafafa';
+

packages/prisma/schema.prisma

@@ -224,8 +224,8 @@ model User {
   availability        Availability[]
   invitedTo           Int?
   webhooks            Webhook[]
-  brandColor          String               @default("#292929")
+  brandColor          String?
-  darkBrandColor      String               @default("#fafafa")
+  darkBrandColor      String?
   // the location where the events will end up
   destinationCalendar DestinationCalendar?
   away                Boolean              @default(false)
@@ -299,8 +299,8 @@ model Team {
   /// @zod.custom(imports.teamMetadataSchema)
   metadata             Json?
   theme                String?
-  brandColor           String                  @default("#292929")
+  brandColor           String?
-  darkBrandColor       String                  @default("#fafafa")
+  darkBrandColor       String?
   verifiedNumbers      VerifiedNumber[]
   parentId             Int?
   parent               Team?                   @relation("organization", fields: [parentId], references: [id], onDelete: Cascade)