{t("only_owner_change")}
@@ -182,6 +202,148 @@ const OrgAppearanceView = () => {
);
};
-OrgAppearanceView.getLayout = getLayout;
+const BrandColorsForm = ({
+ onSubmit,
+ orgBrandColor,
+ orgDarkBrandColor,
+}: {
+ onSubmit: (values: BrandColorsFormValues) => void;
+ orgBrandColor: string | undefined;
+ orgDarkBrandColor: string | undefined;
+}) => {
+ const { t } = useLocale();
+ const brandColorsFormMethods = useFormContext();
+ const {
+ formState: { isSubmitting: isBrandColorsFormSubmitting, isDirty: isBrandColorsFormDirty },
+ handleSubmit,
+ } = brandColorsFormMethods;
-export default OrgAppearanceView;
+ const [isCustomBrandColorChecked, setIsCustomBrandColorChecked] = useState(
+ orgBrandColor !== DEFAULT_LIGHT_BRAND_COLOR || orgDarkBrandColor !== DEFAULT_DARK_BRAND_COLOR
+ );
+ const [darkModeError, setDarkModeError] = useState(false);
+ const [lightModeError, setLightModeError] = useState(false);
+ return (
+
+
{
+ setIsCustomBrandColorChecked(checked);
+ if (!checked) {
+ onSubmit({
+ brandColor: DEFAULT_LIGHT_BRAND_COLOR,
+ darkBrandColor: DEFAULT_DARK_BRAND_COLOR,
+ });
+ }
+ }}
+ childrenClassName="lg:ml-0"
+ switchContainerClassName={classNames(
+ "py-6 px-4 sm:px-6 border-subtle rounded-xl border",
+ isCustomBrandColorChecked && "rounded-b-none"
+ )}>
+
+
(
+
+
{t("light_brand_color")}
+
{
+ try {
+ checkWCAGContrastColor("#ffffff", value);
+ setLightModeError(false);
+ brandColorsFormMethods.setValue("brandColor", value, { shouldDirty: true });
+ } catch (err) {
+ setLightModeError(false);
+ }
+ }}
+ />
+ {lightModeError ? (
+
+ ) : null}
+
+
{t("dark_brand_color")}
+
{
+ try {
+ checkWCAGContrastColor("#101010", value);
+ setDarkModeError(false);
+ brandColorsFormMethods.setValue("darkBrandColor", value, { shouldDirty: true });
+ } catch (err) {
+ setDarkModeError(true);
+ }
+ }}
+ />
+ {darkModeError ? (
+
+ ) : null}
+
+
+ );
+};
+
+const OrgAppearanceViewWrapper = () => {
+ const router = useRouter();
+ const { t } = useLocale();
+ const { data: currentOrg, isLoading } = trpc.viewer.organizations.listCurrent.useQuery(undefined, {
+ onError: () => {
+ router.push("/settings");
+ },
+ });
+
+ if (isLoading) {
+ return
;
+ }
+
+ if (!currentOrg) return null;
+
+ const isAdminOrOwner =
+ currentOrg &&
+ (currentOrg.user.role === MembershipRole.OWNER || currentOrg.user.role === MembershipRole.ADMIN);
+
+ return
;
+};
+
+OrgAppearanceViewWrapper.getLayout = getLayout;
+
+export default OrgAppearanceViewWrapper;
diff --git a/packages/features/ee/organizations/pages/settings/general.tsx b/packages/features/ee/organizations/pages/settings/general.tsx
index c0be3c1c3f..f38c63b491 100644
--- a/packages/features/ee/organizations/pages/settings/general.tsx
+++ b/packages/features/ee/organizations/pages/settings/general.tsx
@@ -2,6 +2,7 @@ import { useRouter } from "next/navigation";
import { Controller, useForm } from "react-hook-form";
import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
+import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { nameOfDay } from "@calcom/lib/weekday";
@@ -24,7 +25,7 @@ import {
const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
return (
-
+
@@ -131,68 +132,76 @@ const GeneralView = ({ currentOrg, isAdminOrOwner, localeProp }: GeneralViewProp
weekStart: values.weekStart.value,
});
}}>
-
-
-
(
- <>
-
- {
- if (event) formMethods.setValue("timeZone", event.value, { shouldDirty: true });
- }}
- />
-
- )}
+
- (
- <>
-
-