Edit apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/UnifiedStyling.tsx

apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/UnifiedStyling.tsx

@@ -122,23 +122,23 @@ const previewSurvey = {
   segment: null,
 };
 
+const StylingSettings = ({...props}) => {
+  // ... styling settings code ...
+};
+
+const SurveyPreview = ({...props}) => {
+  // ... survey preview code ...
+};
+
 const UnifiedStyling = ({ product }: UnifiedStylingProps) => {
-  const router = useRouter();
-  const [unifiedStyling, setUnifiedStyling] = useState(product.styling?.unifiedStyling ?? false);
-  const [allowStyleOverwrite, setAllowStyleOverwrite] = useState(
-    product.styling?.allowStyleOverwrite ?? false
+  // ...
+  return (
+    <div className="flex">
+      <StylingSettings {...props} />
+      <SurveyPreview {...props} />
+    </div>
   );
-  const [brandColor, setBrandColor] = useState(
-    product.styling?.brandColor?.light ?? colorDefaults.brandColor
-  );
-  const [questionColor, setQuestionColor] = useState(
-    product.styling?.questionColor?.light ?? colorDefaults.questionColor
-  );
-  const [inputColor, setInputColor] = useState(
-    product.styling?.inputColor?.light ?? colorDefaults.inputColor
-  );
-  const [inputBorderColor, setInputBorderColor] = useState(
-    product.styling?.inputBorderColor?.light ?? colorDefaults.inputBorderColor
+};
   );
   const [cardBackgroundColor, setCardBackgroundColor] = useState(
     product.styling?.cardBackgroundColor?.light ?? colorDefaults.cardBackgroundColor

packages/database/migrations/20240229062232_adds_styling_column_to_product_model/data-migration.ts

@@ -15,37 +15,37 @@ async function main() {
       return;
     }
 
-    const updates = products.map(product => {
-      if (product.styling !== null) {
-        // styling object already exists for this product
-        return;
-      }
-    
-      const styling: TStyling = {
-        unifiedStyling: true,
-        allowStyleOverwrite: true,
-        brandColor: {
-          light: product.brandColor,
-        },
-        ...(product.highlightBorderColor && {
-          highlightBorderColor: {
-            light: product.highlightBorderColor,
-            dark: product.highlightBorderColor,
+    if (products.length) {
+      for (const product of products) {
+        if (product.styling !== null) {
+          // styling object already exists for this product
+          continue;
+        }
+
+        const styling: TStyling = {
+          unifiedStyling: true,
+          allowStyleOverwrite: true,
+          brandColor: {
+            light: product.brandColor,
           },
-        }),
-      };
-    
-      return tx.product.update({
-        where: {
-          id: product.id,
-        },
-        data: {
-          styling,
-        },
-      });
-    });
-    
-    await tx.$transaction(updates);
+          ...(product.highlightBorderColor && {
+            highlightBorderColor: {
+              light: product.highlightBorderColor,
+              dark: product.highlightBorderColor,
+            },
+          }),
+        };
+
+        await tx.product.update({
+          where: {
+            id: product.id,
+          },
+          data: {
+            styling,
+          },
+        });
+      }
+    }
   });
 }