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

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

@@ -191,49 +191,49 @@ const UnifiedStyling = ({ product }: UnifiedStylingProps) => {
     }
   }, [unifiedStyling]);
 
-  const onSave = async () => {
-    await updateProductAction(product.id, {
-      styling: {
-        unifiedStyling,
-        allowStyleOverwrite,
-        brandColor: {
-          light: brandColor,
-          dark: brandColorDark,
+  const onSave = useCallback(async () => {
+      await updateProductAction(product.id, {
+        styling: {
+          unifiedStyling,
+          allowStyleOverwrite,
+          brandColor: {
+            light: brandColor,
+            dark: brandColorDark,
+          },
+          questionColor: {
+            light: questionColor,
+            dark: questionColorDark,
+          },
+          inputColor: {
+            light: inputColor,
+            dark: inputColorDark,
+          },
+          inputBorderColor: {
+            light: inputBorderColor,
+            dark: inputBorderColorDark,
+          },
+          cardBackgroundColor: {
+            light: cardBackgroundColor,
+            dark: cardBackgroundColorDark,
+          },
+          highlightBorderColor: allowHighlightBorder
+            ? {
+                light: highlightBorderColor,
+                dark: highlightBorderColorDark,
+              }
+            : undefined,
+          isDarkModeEnabled: isDarkMode,
+          roundness,
+          cardArrangement: {
+            linkSurveys: linkSurveysCardArrangement,
+            inAppSurveys: inAppSurveysCardArrangement,
+          },
         },
-        questionColor: {
-          light: questionColor,
-          dark: questionColorDark,
-        },
-        inputColor: {
-          light: inputColor,
-          dark: inputColorDark,
-        },
-        inputBorderColor: {
-          light: inputBorderColor,
-          dark: inputBorderColorDark,
-        },
-        cardBackgroundColor: {
-          light: cardBackgroundColor,
-          dark: cardBackgroundColorDark,
-        },
-        highlightBorderColor: allowHighlightBorder
-          ? {
-              light: highlightBorderColor,
-              dark: highlightBorderColorDark,
-            }
-          : undefined,
-        isDarkModeEnabled: isDarkMode,
-        roundness,
-        cardArrangement: {
-          linkSurveys: linkSurveysCardArrangement,
-          inAppSurveys: inAppSurveysCardArrangement,
-        },
-      },
-    });
-
-    toast.success("Styling updated successfully.");
-    router.refresh();
-  };
+      });
+  
+      toast.success("Styling updated successfully.");
+      router.refresh();
+    }, [unifiedStyling, allowStyleOverwrite, brandColor, brandColorDark, questionColor, questionColorDark, inputColor, inputColorDark, inputBorderColor, inputBorderColorDark, cardBackgroundColor, cardBackgroundColorDark, allowHighlightBorder, highlightBorderColor, highlightBorderColorDark, isDarkMode, roundness, linkSurveysCardArrangement, inAppSurveysCardArrangement]);
 
   return (
     <div className="flex">

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,
+          },
+        });
+      }
+    }
   });
 }