feat: add branding preferences reset dialog (#3032)

2026-07-24 08:54:20 +10:00 · 2026-07-20 10:40:25 +03:00
parent 4b72e7d546
commit cc5ef3df16
2 changed files with 173 additions and 0 deletions
@@ -7,6 +7,7 @@ import {
 } from '@documenso/lib/constants/branding';
 import { DEFAULT_BRAND_COLORS, DEFAULT_BRAND_RADIUS } from '@documenso/lib/constants/theme';
 import { ZCssVarsSchema } from '@documenso/lib/types/css-vars';
+import { normalizeBrandingColors } from '@documenso/lib/utils/normalize-branding-colors';
 import { cn } from '@documenso/ui/lib/utils';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@documenso/ui/primitives/accordion';
 import { Button } from '@documenso/ui/primitives/button';
@@ -23,6 +24,7 @@ import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';

+import { BrandingPreferencesResetDialog } from '~/components/dialogs/branding-preferences-reset-dialog';
 import { useOptionalCurrentTeam } from '~/providers/team';
 import { useCspNonce } from '~/utils/nonce';

@@ -74,6 +76,7 @@ export function BrandingPreferencesForm({

  const [previewUrl, setPreviewUrl] = useState<string>('');
  const [hasLoadedPreview, setHasLoadedPreview] = useState(false);
+  const [colorPickerKey, setColorPickerKey] = useState(0);

  const parsedColors = ZCssVarsSchema.safeParse(settings.brandingColors);
  const initialColors = parsedColors.success ? parsedColors.data : {};
@@ -96,6 +99,42 @@ export function BrandingPreferencesForm({

  const isBrandingEnabled = form.watch('brandingEnabled');

+  const hasResetBrandingColors =
+    settings.brandingColors === null ||
+    settings.brandingColors === undefined ||
+    (parsedColors.success && normalizeBrandingColors(parsedColors.data) === null);
+
+  // Only show the reset action when the saved settings actually differ from the
+  // defaults, so it never renders as a pointless disabled button.
+  const isResetToDefaultsVisible =
+    settings.brandingEnabled !== (canInherit ? null : false) ||
+    !!settings.brandingLogo ||
+    !!settings.brandingUrl ||
+    !!settings.brandingCompanyDetails ||
+    !!settings.brandingCss ||
+    !hasResetBrandingColors;
+
+  const handleResetToDefaults = async () => {
+    const data: TBrandingPreferencesFormSchema = {
+      brandingEnabled: canInherit ? null : false,
+      brandingLogo: null,
+      brandingUrl: '',
+      brandingCompanyDetails: '',
+      brandingColors: {},
+      brandingCss: '',
+    };
+
+    await onFormSubmit(data);
+
+    if (previewUrl.startsWith('blob:')) {
+      URL.revokeObjectURL(previewUrl);
+    }
+
+    setPreviewUrl('');
+    setColorPickerKey((key) => key + 1);
+    form.reset(data);
+  };
+
  const getSavedLogoPreviewUrl = () => {
    if (!settings.brandingLogo) {
      return '';
@@ -397,6 +436,7 @@ export function BrandingPreferencesForm({
                        </FormDescription>
                        <FormControl>
                          <ColorPicker
+                            key={`background-${colorPickerKey}`}
                            nonce={nonce}
                            value={field.value ?? ''}
                            defaultValue={DEFAULT_BRAND_COLORS.background}
@@ -420,6 +460,7 @@ export function BrandingPreferencesForm({
                        </FormDescription>
                        <FormControl>
                          <ColorPicker
+                            key={`foreground-${colorPickerKey}`}
                            nonce={nonce}
                            value={field.value ?? ''}
                            defaultValue={DEFAULT_BRAND_COLORS.foreground}
@@ -443,6 +484,7 @@ export function BrandingPreferencesForm({
                        </FormDescription>
                        <FormControl>
                          <ColorPicker
+                            key={`primary-${colorPickerKey}`}
                            nonce={nonce}
                            value={field.value ?? ''}
                            defaultValue={DEFAULT_BRAND_COLORS.primary}
@@ -466,6 +508,7 @@ export function BrandingPreferencesForm({
                        </FormDescription>
                        <FormControl>
                          <ColorPicker
+                            key={`primary-foreground-${colorPickerKey}`}
                            nonce={nonce}
                            value={field.value ?? ''}
                            defaultValue={DEFAULT_BRAND_COLORS.primaryForeground}
@@ -489,6 +532,7 @@ export function BrandingPreferencesForm({
                        </FormDescription>
                        <FormControl>
                          <ColorPicker
+                            key={`border-${colorPickerKey}`}
                            nonce={nonce}
                            value={field.value ?? ''}
                            defaultValue={DEFAULT_BRAND_COLORS.border}
@@ -512,6 +556,7 @@ export function BrandingPreferencesForm({
                        </FormDescription>
                        <FormControl>
                          <ColorPicker
+                            key={`ring-${colorPickerKey}`}
                            nonce={nonce}
                            value={field.value ?? ''}
                            defaultValue={DEFAULT_BRAND_COLORS.ring}
@@ -593,6 +638,15 @@ export function BrandingPreferencesForm({
            isDirty={hasUnsavedChanges}
            isSubmitting={form.formState.isSubmitting}
            onReset={handleReset}
+            resetToDefaults={
+              isResetToDefaultsVisible ? (
+                <BrandingPreferencesResetDialog
+                  hasAdvancedBranding={hasAdvancedBranding}
+                  isSubmitting={form.formState.isSubmitting}
+                  onReset={handleResetToDefaults}
+                />
+              ) : undefined
+            }
          />
        </fieldset>
      </form>