fix: data migration for styling fixes (#2640)

2025-12-29 18:00:26 -06:00 · 2024-05-16 23:33:21 +05:30
parent 9849a96f32
commit 0b87d35877
9 changed files with 109 additions and 37 deletions
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/BackgroundStylingCard.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/BackgroundStylingCard.tsx
@@ -75,7 +75,7 @@ export const BackgroundStylingCard = ({
        asChild
        disabled={disabled}
        className={cn(
-          "h-full w-full cursor-pointer rounded-lg hover:bg-slate-50",
+          "w-full cursor-pointer rounded-lg hover:bg-slate-50",
          disabled && "cursor-not-allowed opacity-60 hover:bg-white"
        )}>
        <div className="inline-flex px-4 py-4">
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CardStylingSettings.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CardStylingSettings.tsx
@@ -166,7 +166,7 @@ export const CardStylingSettings = ({
        asChild
        disabled={disabled}
        className={cn(
-          "h-full w-full cursor-pointer rounded-lg hover:bg-slate-50",
+          "w-full cursor-pointer rounded-lg hover:bg-slate-50",
          disabled && "cursor-not-allowed opacity-60 hover:bg-white"
        )}>
        <div className="inline-flex px-4 py-4">
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/FormStylingSettings.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/FormStylingSettings.tsx
@@ -130,7 +130,7 @@ export const FormStylingSettings = ({
        asChild
        disabled={disabled}
        className={cn(
-          "h-full w-full cursor-pointer rounded-lg hover:bg-slate-50",
+          "w-full cursor-pointer rounded-lg hover:bg-slate-50",
          disabled && "cursor-not-allowed opacity-60 hover:bg-white"
        )}>
        <div className="inline-flex px-4 py-4">
--- a/apps/web/app/(app)/environments/[environmentId]/product/look/components/ThemeStyling.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/product/look/components/ThemeStyling.tsx
@@ -166,8 +166,8 @@ export const ThemeStyling = ({ product, environmentId, colors, isUnsplashConfigu
  return (
    <div className="flex">
      {/* Styling settings */}
-      <div className="relative w-1/2 pr-6">
-        <div className="flex flex-col gap-4">
+      <div className="relative flex w-1/2 flex-col pr-6">
+        <div className="flex flex-1 flex-col gap-4">
          <div className="flex flex-col gap-4 rounded-lg bg-slate-50 p-4">
            <div className="flex items-center gap-6">
              <Switch
@@ -218,7 +218,7 @@ export const ThemeStyling = ({ product, environmentId, colors, isUnsplashConfigu
          </div>
        </div>

-        <div className="absolute bottom-0 mt-4 flex items-center gap-2">
+        <div className="mt-4 flex items-center gap-2">
          <Button variant="darkCTA" size="sm" onClick={onSave}>
            Save
          </Button>
--- a/apps/web/app/(app)/environments/[environmentId]/product/look/components/ThemeStylingPreviewSurvey.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/product/look/components/ThemeStylingPreviewSurvey.tsx
@@ -214,7 +214,7 @@ export const ThemeStylingPreviewSurvey = ({
        <div
          className={`${isAppSurvey ? "rounded-full bg-slate-200" : ""} cursor-pointer px-3 py-1 text-sm`}
          onClick={() => setPreviewType("app")}>
-          App survey
+          App / Website survey
        </div>
      </div>
    </div>
--- a/packages/database/data-migrations/20240320090315_add_form_styling/data-migration-fix.ts
+++ b/packages/database/data-migrations/20240320090315_add_form_styling/data-migration-fix.ts
@@ -0,0 +1,62 @@
+import { Prisma, PrismaClient } from "@prisma/client";
+
+const prisma = new PrismaClient();
+
+async function main() {
+  await prisma.$transaction(
+    async (tx) => {
+      const startTime = Date.now();
+      console.log("Starting data migration for styling fixes...");
+
+      const surveysWithProductOverwrites = await tx.survey.findMany({
+        where: {
+          productOverwrites: {
+            not: Prisma.JsonNull,
+          },
+        },
+      });
+
+      console.log(`Found ${surveysWithProductOverwrites.length} surveys with product overwrites to process.`);
+
+      for (const survey of surveysWithProductOverwrites) {
+        if (survey.productOverwrites) {
+          const { brandColor, highlightBorderColor, ...rest } = survey.productOverwrites;
+
+          if (!brandColor && !highlightBorderColor) {
+            continue;
+          }
+
+          await tx.survey.update({
+            where: {
+              id: survey.id,
+            },
+            data: {
+              styling: {
+                ...(survey.styling ?? {}),
+                ...(brandColor && { brandColor: { light: brandColor } }),
+                ...(highlightBorderColor && { highlightBorderColor: { light: highlightBorderColor } }),
+                ...((brandColor || highlightBorderColor || Object.keys(survey.styling ?? {}).length > 0) && {
+                  overwriteThemeStyling: true,
+                }),
+              },
+              productOverwrites: {
+                ...rest,
+              },
+            },
+          });
+        }
+      }
+
+      const endTime = Date.now();
+      console.log(`Data migration for styling fixes completed in ${(endTime - startTime) / 1000} seconds.`);
+    },
+    { timeout: 50000 }
+  );
+}
+
+main()
+  .catch(async (e) => {
+    console.error(e);
+    process.exit(1);
+  })
+  .finally(async () => await prisma.$disconnect());
--- a/packages/database/package.json
+++ b/packages/database/package.json
@@ -25,6 +25,7 @@
    "predev": "pnpm generate",
    "data-migration:v1.6": "ts-node ./data-migrations/20240207041922_advanced_targeting/data-migration.ts",
    "data-migration:styling": "ts-node ./data-migrations/20240320090315_add_form_styling/data-migration.ts",
+    "data-migration:styling-fix": "ts-node ./data-migrations/20240320090315_add_form_styling/data-migration-fix.ts",
    "data-migration:website-surveys": "ts-node ./data-migrations/20240410111624_adds_website_and_inapp_survey/data-migration.ts",
    "data-migration:mls": "ts-node ./data-migrations/20240318050527_add_languages_and_survey_languages/data-migration.ts",
    "data-migration:mls-fix": "ts-node ./data-migrations/20240318050527_add_languages_and_survey_languages/data-migration-fix.ts",
@@ -32,7 +33,7 @@
    "data-migration:userId": "ts-node ./data-migrations/20240408123456_userid_migration/data-migration.ts",
    "data-migration:refactor-actions": "ts-node ./data-migrations/20240501111944_refactors_actions_and_removes_inline_triggers/data-migration.ts",
    "data-migration:mls-welcomeCard-fix": "ts-node ./data-migrations/20240318050527_add_languages_and_survey_languages/data-migration-welcomeCard-fix.ts",
-    "data-migration:v2.0": "pnpm data-migration:mls && pnpm data-migration:styling && pnpm data-migration:website-surveys && pnpm data-migration:userId && pnpm data-migration:mls-welcomeCard-fix && pnpm data-migration:refactor-actions"
+    "data-migration:v2.0": "pnpm data-migration:mls && pnpm data-migration:styling && pnpm data-migration:styling-fix && pnpm data-migration:website-surveys && pnpm data-migration:userId && pnpm data-migration:mls-welcomeCard-fix && pnpm data-migration:refactor-actions"
  },
  "dependencies": {
    "@prisma/client": "^5.13.0",
--- a/packages/surveys/src/components/general/Survey.tsx
+++ b/packages/surveys/src/components/general/Survey.tsx
@@ -268,6 +268,7 @@ export const Survey = ({
        <ResponseErrorComponent responseData={responseData} questions={survey.questions} onRetry={onRetry} />
      );
    }
+
    const content = () => {
      if (questionIdx === -1) {
        return (
@@ -328,13 +329,14 @@ export const Survey = ({
        );
      }
    };
+
    return (
      <AutoCloseWrapper survey={survey} onClose={onClose}>
        {getShowSurveyCloseButton(offset) && <SurveyCloseButton onClose={onClose} />}
        <div
          className={cn(
            "no-scrollbar md:rounded-custom rounded-t-custom bg-survey-bg flex h-full w-full flex-col justify-between overflow-hidden transition-all duration-1000 ease-in-out",
-            survey.type === "link" ? "fb-survey-shadow" : "",
+            cardArrangement === "simple" ? "fb-survey-shadow" : "",
            offset === 0 || cardArrangement === "simple" ? "opacity-100" : "opacity-0"
          )}>
          <div ref={contentRef} className={cn(loadingElement ? "animate-pulse opacity-60" : "", "my-auto")}>
--- a/packages/surveys/src/components/wrappers/StackedCardsContainer.tsx
+++ b/packages/surveys/src/components/wrappers/StackedCardsContainer.tsx
@@ -128,34 +128,41 @@ export const StackedCardsContainer = ({
      }}
      onMouseLeave={() => setHovered(false)}>
      <div style={{ height: cardHeight }}></div>
-      {cardArrangement === "simple"
-        ? getCardContent(questionIdx, 0)
-        : questionIdx !== undefined &&
-          cardIndexes.map((_, idx) => {
-            const index = survey.welcomeCard.enabled ? idx - 1 : idx;
-            const offset = index - questionIdx;
-            const isHidden = offset < 0;
-            return (
-              <div
-                ref={(el) => (cardRefs.current[index] = el)}
-                id={`questionCard-${index}`}
-                key={index}
-                style={{
-                  zIndex: 1000 - index,
-                  transform: `${calculateCardTransform(offset)}`,
-                  opacity: isHidden ? 0 : (100 - 30 * offset) / 100,
-                  height: getCardHeight(offset),
-                  transitionDuration: "600ms",
-                  pointerEvents: offset === 0 ? "auto" : "none",
-                  ...borderStyles,
-                  ...straightCardArrangementStyles(offset),
-                  ...getBottomStyles(),
-                }}
-                className="pointer rounded-custom bg-survey-bg absolute inset-x-0 backdrop-blur-md transition-all ease-in-out">
-                {getCardContent(index, offset)}
-              </div>
-            );
-          })}
+      {cardArrangement === "simple" ? (
+        <div
+          style={{
+            ...borderStyles,
+          }}>
+          {getCardContent(questionIdx, 0)}
+        </div>
+      ) : (
+        questionIdx !== undefined &&
+        cardIndexes.map((_, idx) => {
+          const index = survey.welcomeCard.enabled ? idx - 1 : idx;
+          const offset = index - questionIdx;
+          const isHidden = offset < 0;
+          return (
+            <div
+              ref={(el) => (cardRefs.current[index] = el)}
+              id={`questionCard-${index}`}
+              key={index}
+              style={{
+                zIndex: 1000 - index,
+                transform: `${calculateCardTransform(offset)}`,
+                opacity: isHidden ? 0 : (100 - 30 * offset) / 100,
+                height: getCardHeight(offset),
+                transitionDuration: "600ms",
+                pointerEvents: offset === 0 ? "auto" : "none",
+                ...borderStyles,
+                ...straightCardArrangementStyles(offset),
+                ...getBottomStyles(),
+              }}
+              className="pointer rounded-custom bg-survey-bg absolute inset-x-0 backdrop-blur-md transition-all ease-in-out">
+              {getCardContent(index, offset)}
+            </div>
+          );
+        })
+      )}
    </div>
  );
 };