feat: styling zod schema and data migration

packages/database/jsonTypes.ts

@@ -2,6 +2,7 @@ import { TActionClassNoCodeConfig } from "@formbricks/types/actionClasses";
 import { TIntegrationConfig } from "@formbricks/types/integration";
 import { TResponseData, TResponseMeta, TResponsePersonAttributes } from "@formbricks/types/responses";
 import { TBaseFilters } from "@formbricks/types/segment";
+import { TStyling } from "@formbricks/types/styling";
 import {
   TSurveyClosedMessage,
   TSurveyHiddenFields,
@@ -38,5 +39,6 @@ declare global {
     export type UserNotificationSettings = TUserNotificationSettings;
     export type SegmentFilter = TBaseFilters;
     export type SurveyInlineTriggers = TSurveyInlineTriggers;
+    export type Styling = TStyling;
   }
 }

packages/database/migrations/20240228045810_adds_styling_object_to_product_model/data-migration.ts

@@ -0,0 +1,73 @@
+import { PrismaClient } from "@prisma/client";
+
+import { TStyling } from "@formbricks/types/styling";
+
+const prisma = new PrismaClient();
+
+async function main() {
+  await prisma.$transaction(async (tx) => {
+    // product table with brand color and the highlight border color (if available)
+    // styling object needs to be created for each product
+    const products = await tx.product.findMany({});
+
+    if (!products) {
+      // something went wrong, could not find any products
+      return;
+    }
+
+    if (products.length) {
+      for (const product of products) {
+        if (product.styling !== null) {
+          // styling object already exists for this product
+          continue;
+        }
+
+        const styling: TStyling = {
+          brandColor: {
+            light: product.brandColor,
+          },
+          questionColor: {
+            light: product.brandColor,
+          },
+          inputColor: {
+            light: product.brandColor,
+          },
+          inputBorderColor: {
+            light: product.brandColor,
+          },
+          cardBackgroundColor: {
+            light: product.brandColor,
+          },
+          enableDarkMode: false,
+          roundness: 8,
+          cardArrangement: {
+            linkSurveys: "simple",
+            inAppSurveys: "simple",
+          },
+          ...(product.highlightBorderColor && {
+            highlightBorderColor: {
+              light: product.highlightBorderColor,
+              dark: product.highlightBorderColor,
+            },
+          }),
+        };
+
+        await tx.product.update({
+          where: {
+            id: product.id,
+          },
+          data: {
+            styling,
+          },
+        });
+      }
+    }
+  });
+}
+
+main()
+  .catch(async (e) => {
+    console.error(e);
+    process.exit(1);
+  })
+  .finally(async () => await prisma.$disconnect());

packages/database/migrations/20240228045810_adds_styling_object_to_product_model/migration.sql

@@ -0,0 +1,4 @@
+-- AlterTable
+ALTER TABLE "Product" ADD COLUMN     "allowStyleOverwrite" BOOLEAN DEFAULT true,
+ADD COLUMN     "styling" JSONB,
+ADD COLUMN     "unifiedStyling" BOOLEAN DEFAULT true;

packages/database/package.json

@@ -23,7 +23,8 @@
     "lint": "eslint ./src --fix",
     "post-install": "pnpm generate",
     "predev": "pnpm generate",
-    "data-migration:v1.6": "ts-node ./migrations/20240207041922_advanced_targeting/data-migration.ts"
+    "data-migration:v1.6": "ts-node ./migrations/20240207041922_advanced_targeting/data-migration.ts",
+    "data-migration:styling": "ts-node ./migrations/20240228045810_adds_styling_object_to_product_model/data-migration.ts"
   },
   "dependencies": {
     "@prisma/client": "^5.10.2",

packages/database/schema.prisma

@@ -417,6 +417,11 @@ model Product {
   environments         Environment[]
   brandColor           String          @default("#64748b")
   highlightBorderColor String?
+  /// @zod.custom(imports.ZStyling)
+  /// [Styling]
+  styling              Json?
+  unifiedStyling       Boolean?        @default(true)
+  allowStyleOverwrite  Boolean?        @default(true)
   recontactDays        Int             @default(7)
   linkSurveyBranding   Boolean         @default(true) // Determines if the survey branding should be displayed in link surveys
   inAppSurveyBranding  Boolean         @default(true) // Determines if the survey branding should be displayed in in-app surveys

packages/database/zod-utils.ts

@@ -1,5 +1,7 @@
 import z from "zod";
 
+export { ZStyling } from "@formbricks/types/styling";
+
 export const ZActionProperties = z.record(z.string());
 export { ZActionClassNoCodeConfig } from "@formbricks/types/actionClasses";
 export { ZIntegrationConfig } from "@formbricks/types/integration";