packages/types/styling.ts (1)

5-5: Consider documenting the nullish value handling strategy.

The introduction of nullish values across styling schemas provides more flexibility but also increases complexity in how undefined states should be handled. Consider adding documentation about:

1. When nullish values are expected/allowed
2. How they should be handled in the UI
3. Default value fallback strategy

Also applies to: 14-15

packages/ui/components/PreviewSurvey/components/Modal.tsx (2)

Line range hint 127-151: Consider strengthening modal visibility management.

Given the reported issue #4265 about survey preview disappearing, the visibility management logic could be improved. While the current implementation handles basic show/hide states, it might benefit from additional safeguards.

Consider these improvements:

 useEffect(() => {
+  let timeoutId: NodeJS.Timeout;
   if (!clickOutsideClose || placement !== "center") return;
   const handleClickOutside = (e: MouseEvent) => {
     const previewBase = document.getElementById("preview-survey-base");

     if (
       clickOutsideClose &&
       modalRef.current &&
       previewBase &&
       previewBase.contains(e.target as Node) &&
       !modalRef.current.contains(e.target as Node)
     ) {
       setShow(false);
-      setTimeout(() => {
+      timeoutId = setTimeout(() => {
         setShow(true);
       }, 1000);
     }
   };

   document.addEventListener("mousedown", handleClickOutside);
   return () => {
     document.removeEventListener("mousedown", handleClickOutside);
+    if (timeoutId) clearTimeout(timeoutId);
   };
 }, [clickOutsideClose, placement]);

Additionally, consider adding a state guard:

 useEffect(() => {
+  if (!isOpen) return;
   if (modalRef.current) {
     modalRef.current.scrollTop = 0;
   }
 }, [children]);

---

Line range hint 152-190: Enhance style handling robustness.

The style application logic could be made more robust to prevent potential rendering issues.

Consider this improvement:

 style={{
   ...scalingClasses,
-  ...(borderRadius && {
+  ...(typeof borderRadius === 'number' && {
     borderRadius: `${borderRadius}px`,
   }),
-  ...(background && {
+  ...(background !== null && background !== undefined && {
     background,
   }),
 }}

packages/surveys/src/lib/styles.ts (1)

Line range hint 36-124: Consider refactoring color manipulation logic for better maintainability.

The code contains repeated patterns for color mixing and lightness checks. Consider extracting these into helper functions to improve maintainability and reduce duplication.

Consider creating these helper functions:

const getTextColorForBackground = (bgColor: string) => 
  isLight(bgColor) ? "black" : "white";

const getMixedColor = (baseColor: string, mixWith: string, opacity: number) => 
  mixColor(baseColor, mixWith, opacity);

const getContrastColors = (baseColor: string) => ({
  signature: isLight(baseColor) 
    ? mixColor(baseColor, "#000000", 0.2)
    : mixColor(baseColor, "#ffffff", 0.2),
  branding: isLight(baseColor)
    ? mixColor(baseColor, "#000000", 0.3)
    : mixColor(baseColor, "#ffffff", 0.3)
});

This would simplify the main code and make it easier to maintain consistent color calculations throughout the application.

apps/web/app/(app)/environments/[environmentId]/product/look/loading.tsx (1)

Line range hint 1-185: Consider enhancing loading state feedback.

While the loading component provides a good skeleton UI, consider adding aria-labels or status messages for screen readers to improve accessibility. Additionally, the loading state could benefit from progressive loading indicators to better communicate the loading progress to users.

Example enhancement:

 <PageContentWrapper>
+  <div role="status" aria-live="polite" className="sr-only">
+    {t("common.loading_styling_page")}
+  </div>
   <PageHeader pageTitle={t("common.configuration")}>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingView.tsx (3)

Line range hint 126-171: Consider refactoring the styling toggle logic for better maintainability.

The handleOverwriteToggle function handles multiple state updates and complex conditional logic. This makes it harder to track state changes and could lead to inconsistencies.

Consider breaking it down into smaller, focused functions:

const handleStylingToggleOn = () => {
  if (!styling) {
    setStyling({
      ...defaultProductStyling,
      overwriteThemeStyling: true,
    });
    return;
  }

  setStyling(localStylingChanges ?? {
    ...defaultProductStyling,
    overwriteThemeStyling: true,
  });
};

const handleStylingToggleOff = () => {
  setLocalStylingChanges(styling);
  setStyling({
    ...defaultProductStyling,
    overwriteThemeStyling: false,
  });
};

const handleOverwriteToggle = (value: boolean) => {
  setOverwriteThemeStyling(value);
  value ? handleStylingToggleOn() : handleStylingToggleOff();
};

---

Line range hint 87-98: Add error handling for theme reset operation.

The onResetThemeStyling function performs multiple state updates without error handling. If any of these operations fail, it could leave the styling in an inconsistent state.

Consider wrapping the operations in a try-catch block:

const onResetThemeStyling = async () => {
  try {
    const { styling: productStyling } = product;
    const { allowStyleOverwrite, ...baseStyling } = productStyling ?? {};

    await Promise.all([
      setStyling({
        ...baseStyling,
        overwriteThemeStyling: true,
      }),
      form.reset({
        ...baseStyling,
        overwriteThemeStyling: true,
      })
    ]);

    setConfirmResetStylingModalOpen(false);
    toast.success(t("environments.surveys.edit.styling_set_to_theme_styles"));
  } catch (error) {
    toast.error(t("common.error_saving_changes"));
    // Consider logging the error
  }
};

---

Line range hint 102-108: Add cleanup logic for form state.

The useEffect hook that handles card states doesn't clean up form state when overwriteThemeStyling is disabled. This could lead to stale form values when re-enabling styling.

Consider resetting form values:

useEffect(() => {
  if (!overwriteThemeStyling) {
    setFormStylingOpen(false);
    setCardStylingOpen(false);
    setStylingOpen(false);
    // Reset form values to prevent stale state
    form.reset(product.styling);
  }
}, [overwriteThemeStyling, product.styling, form]);

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Search for card arrangement default value assignments
rg -A 2 "linkSurveys:|appSurveys:" --type ts

# Search for direct usage of these properties
ast-grep --pattern 'cardArrangement.$_(linkSurveys|appSurveys)'

#!/bin/bash
# Search for direct usage of the light property in styling colors
rg -l "\.light\b" --type ts

#!/bin/bash
# Search for direct usage of the light property in styling colors
rg -A 2 "\.light\b" --type ts

-    endings: [
-      {
-        id: "cltyqp5ng000108l9dmxw6nde",
-        type: "endScreen",
-        headline: { default: translate("default_ending_card_headline", locale) },
-        subheader: { default: translate("default_ending_card_subheader", locale) },
-        buttonLabel: { default: translate("default_ending_card_button_label", locale) },
-        buttonLink: "https://formbricks.com",
-      },
-    ],
+    endings: [
+      {
+        id: crypto.randomUUID(),
+        type: "endScreen",
+        headline: { default: translate("default_ending_card_headline", locale) },
+        subheader: { default: translate("default_ending_card_subheader", locale) },
+        buttonLabel: { default: translate("default_ending_card_button_label", locale) },
+        buttonLink: process.env.NEXT_PUBLIC_DEFAULT_THANK_YOU_URL || "https://formbricks.com",
+      },
+    ],

#!/bin/bash
# Search for Modal component usage with background prop
rg -A 2 '<Modal.*background=' 

#!/bin/bash
# Let's try a broader search for Modal component usage and its imports
rg -l "Modal" --type typescript --type tsx

# Then let's look for any usage of background prop in these files
rg "background.*?=" --type typescript --type tsx

# Also search for the Modal component definition
ast-grep --pattern 'interface ModalProps {
  $$$
}'

#!/bin/bash
# Let's look at the implementation of PreviewSurvey Modal to see how background is used
ast-grep --pattern 'const Modal = ({ $$$, background, $$$ }: ModalProps) => {
  $$$
}'

# Also search for any usage of this specific Modal component
rg -B2 -A2 "from.*PreviewSurvey.*Modal"

#!/bin/bash
# Description: Search for potential null assignments to styling properties

# Look for direct null assignments to style properties
echo "Checking for null style assignments..."
rg -g '*.{ts,tsx}' '(?i)style.*=.*null'

# Look for potential null values in styling objects
echo "Checking styling object definitions..."
ast-grep --pattern 'styling: {
  $$$
  $_: null,
  $$$
}'

#!/bin/bash
# Search for usage of appendCssVariable function and related styling patterns
echo "Checking appendCssVariable usage..."
rg -A 3 "appendCssVariable\(" 

echo -e "\nChecking style-related files for null handling..."
fd -e ts -e tsx -H | xargs rg "null.*style|style.*null" -l

echo -e "\nChecking for CSS variable definitions and usage..."
rg "fb-" -A 2 -g "*.{ts,tsx,css,scss}"

-    defaultValues: localSurvey.styling ?? product.styling,
+    defaultValues: localSurvey.styling ?? product.styling ?? {
+      // Provide essential fallback values
+      overwriteThemeStyling: false,
+      // Add other necessary styling defaults
+    },

#!/bin/bash
# Search for other instances of default styling configuration
ast-grep --pattern 'const $_ = {
  $$$
  cardArrangement: {
    $$$
  }
  $$$
}'

#!/bin/bash
# Look for related preview visibility issues or fixes
rg -A 5 "sticky|preview|ThemeStylingPreviewSurvey" --type typescript

# Check for any z-index or positioning styles that might affect visibility
rg "z-index|absolute|relative|sticky" --type css --type typescript

#!/bin/bash
# Search for any hardcoded "simple" values that might need updating
rg -i "simple.*cardArrangement|cardArrangement.*simple" --type typescript

# Look for any migration scripts that might be needed
fd -e ts -e js --full-path "migration|migrate" -x grep -l "cardArrangement"

#!/bin/bash
# Search for cardArrangement usage across the codebase
rg "cardArrangement" -A 3 -B 3

# Search for any references to "simple" or "straight" in relation to surveys or card styling
rg "(simple|straight).*(survey|card)" -A 2 -B 2

# Look for any type definitions or interfaces related to card arrangement
ast-grep --pattern 'interface $_ {
  $$$
  cardArrangement
  $$$
}'

#!/bin/bash
# Search for existing card arrangement configurations
rg -A 5 'cardArrangement' --type ts --type tsx

#!/bin/bash
# Search for existing card arrangement configurations with ripgrep
# Note: Using --type typescript to include both .ts and .tsx files
rg -A 5 'cardArrangement' --type typescript

#!/bin/bash
# Find all TypeScript/TSX files that might contain card arrangement logic
fd -e ts -e tsx | xargs rg -l 'cardArrangement'

#!/bin/bash
# Search for any schema or type definitions related to card arrangement
rg -A 5 'cardArrangement|CardArrangement' --type typescript

#!/bin/bash
# Look for form schema definitions that might define card arrangement
ast-grep --pattern 'const $_ = z.object({
  $$$
  cardArrangement: $$$
  $$$
})'

#!/bin/bash
# Let's check the definition of ZCardArrangement and its usage
rg -p 'ZCardArrangement' packages/types/styling.ts

# Also check the actual content of CardArrangementTabs component
cat packages/ui/components/CardArrangementTabs/index.tsx

# And check the StackedCardsContainer implementation
cat packages/ui/components/StackedCardsContainer/index.tsx

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingView.tsx (1)

97-102: Improved state management for styling updates.

Using form.getValues() instead of watchedValues provides more reliable state updates, which could help prevent the survey preview disappearance issue (#4265). However, consider adding error boundaries to handle potential state update failures gracefully.

Consider wrapping the state update in a try-catch block:

-    const newValues = form.getValues();
-    setLocalSurvey((prev) => ({
-      ...prev,
-      styling: {
-        ...prev.styling,
-        ...newValues,
-      },
-    }));
+    try {
+      const newValues = form.getValues();
+      setLocalSurvey((prev) => ({
+        ...prev,
+        styling: {
+          ...prev.styling,
+          ...newValues,
+        },
+      }));
+    } catch (error) {
+      console.error('Failed to update survey styling:', error);
+      toast.error(t('environments.surveys.edit.styling_update_failed'));
+    }

packages/lib/messages/en-US.json (2)

1938-1941: Consider making the initial prompt more specific and action-oriented.

The initial prompt is clear but could be more engaging and specific about the value proposition.

Consider this alternative wording:

-    "card_abandonment_survey_question_1_button_label": "Sure!",
-    "card_abandonment_survey_question_1_dismiss_button_label": "No, thanks.",
-    "card_abandonment_survey_question_1_headline": "Do you have 2 minutes to help us improve?",
-    "card_abandonment_survey_question_1_html": "<p class=\"fb-editor-paragraph\" dir=\"ltr\"><span>We noticed you left some items in your cart. We would love to understand why.</span></p>",
+    "card_abandonment_survey_question_1_button_label": "Help improve",
+    "card_abandonment_survey_question_1_dismiss_button_label": "Not now",
+    "card_abandonment_survey_question_1_headline": "Help us improve your shopping experience",
+    "card_abandonment_survey_question_1_html": "<p class=\"fb-editor-paragraph\" dir=\"ltr\"><span>We noticed you left items in your cart. Your quick feedback will help us make shopping easier for you.</span></p>",

---

1948-1965: Consider adding more context to some follow-up questions.

The follow-up questions are good but some could benefit from more context to encourage detailed responses.

Consider these improvements:

-    "card_abandonment_survey_question_3_headline": "Please elaborate on your reason for not completing the purchase:",
+    "card_abandonment_survey_question_3_headline": "Could you tell us more about what specifically prevented you from completing your purchase?",

-    "card_abandonment_survey_question_8_headline": "Any additional comments or suggestions?",
+    "card_abandonment_survey_question_8_headline": "What else could we do to improve your shopping experience?",

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Search for any remaining complex styling calculations or defaults
rg -A 5 "stylingDefaults|defaultStyling" --type typescript

# Look for any other components that might affect styling initialization
ast-grep --pattern 'useForm<$_>({
  defaultValues: $_
})'

#!/bin/bash
# Search for any remaining complex styling calculations or defaults in TypeScript files
rg -A 5 "stylingDefaults|defaultStyling" --glob "*.ts"

# Look for any other components that might affect styling initialization
ast-grep --pattern 'useForm<$_>({
  defaultValues: $_
})'

packages/lib/messages/en-US.json (1)

1940-1967: LGTM! Well-structured cart abandonment survey translations.

The new translation keys for the cart abandonment survey are well-organized and provide a complete user journey from initial engagement through feedback collection. The tone is professional yet approachable.

Consider these minor improvements:

1. Add placeholder text for the open-ended questions (e.g., lines 1952, 1967) to guide users on expected input
2. Consider adding "aria-label" translations for better accessibility

 "card_abandonment_survey_question_3_headline": "Please elaborate on your reason for not completing the purchase:",
+"card_abandonment_survey_question_3_placeholder": "E.g., shipping costs were higher than expected...",
 
 "card_abandonment_survey_question_8_headline": "Any additional comments or suggestions?",
+"card_abandonment_survey_question_8_placeholder": "Share any thoughts that could help us improve..."

packages/lib/messages/pt-BR.json (1)

Line range hint 1-3000: Consider standardizing the level of formality across translations.

There are inconsistencies in the use of formal ("você") vs informal ("tu") pronouns across different sections. Consider standardizing to "você" throughout the translations as it's more commonly used in Brazilian Portuguese.

Configuration used: CodeRabbit UI
Review profile: CHILL