From 2213adb24aed27ddd458d2ca7633cad1a4491a89 Mon Sep 17 00:00:00 2001
From: anjy7 <anjyofficial@gmail.com>
Date: Tue, 31 Oct 2023 01:33:34 +0530
Subject: [PATCH] fix: added overlay

---
 .../edit/components/AnimatedSurveyBg.tsx      |  1 +
 .../edit/components/ImageSurveyBg.tsx         |  6 +-
 .../edit/components/StylingCard.tsx           | 65 ++++++++++++++++++-
 .../components/PreviewSurveyBgDeskstop.tsx    | 34 +++++++---
 .../components/PreviewSurveyBgMobile.tsx      | 62 +++++++++++-------
 .../app/s/[surveyId]/components/SurveyBg.tsx  | 55 ++++++++++++----
 packages/types/surveys.ts                     |  1 +
 packages/ui/FileInput/index.tsx               |  2 +-
 8 files changed, 174 insertions(+), 52 deletions(-)

diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/AnimatedSurveyBg.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/AnimatedSurveyBg.tsx
index 92b4a8042b..755ffa566a 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/AnimatedSurveyBg.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/AnimatedSurveyBg.tsx
@@ -95,6 +95,7 @@ export default function AnimatedSurveyBg({ localSurvey, handleBgChange }: Animat
                 className="absolute right-2 top-2 h-4 w-4 rounded-sm bg-white "
                 type="checkbox"
                 checked={color === value}
+                onChange={() => handleBg(value)}
               />
             </div>
           );
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ImageSurveyBg.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ImageSurveyBg.tsx
index ba2c6c51fe..559881c276 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ImageSurveyBg.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ImageSurveyBg.tsx
@@ -14,10 +14,10 @@ export default function ImageSurveyBg({ localSurvey, handleBgChange }: ImageSurv
           id="choices-file-input"
           allowedFileExtensions={["png", "jpeg", "jpg"]}
           environmentId={localSurvey?.environmentId}
-          onFileUpload={(url: string) => {
-            handleBgChange(url, "image");
+          onFileUpload={(url: string[]) => {
+            handleBgChange(url[0], "image");
           }}
-          fileUrl={localSurvey?.welcomeCard?.fileUrl}
+          // fileUrl={localSurvey?.surveyBackground?.bg}
         />
       </div>
     </div>
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingCard.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingCard.tsx
index 26e9db7925..ca9bd5db05 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingCard.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingCard.tsx
@@ -23,10 +23,17 @@ export default function StylingCard({ localSurvey, setLocalSurvey }: StylingCard
 
   const { type, productOverwrites, surveyBackground } = localSurvey;
   const { brandColor, clickOutside, darkOverlay, placement, highlightBorderColor } = productOverwrites ?? {};
-  const { bg, bgType } = surveyBackground ?? {};
+  const { bg, bgType, brightness } = surveyBackground ?? {};
 
   const [tab, setTab] = useState(bgType || "image");
 
+  const [inputValue, setInputValue] = useState(100);
+
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+    handleBrightnessChange(parseInt(e.target.value));
+  };
+
   const togglePlacement = () => {
     setLocalSurvey({
       ...localSurvey,
@@ -58,6 +65,17 @@ export default function StylingCard({ localSurvey, setLocalSurvey }: StylingCard
     });
   };
 
+  const toggleBrightness = () => {
+    setLocalSurvey({
+      ...localSurvey,
+      surveyBackground: {
+        ...localSurvey.surveyBackground,
+        brightness: !!brightness ? undefined : 100,
+      },
+    });
+    setInputValue(100);
+  };
+
   const toggleHighlightBorderColor = () => {
     setLocalSurvey({
       ...localSurvey,
@@ -79,6 +97,7 @@ export default function StylingCard({ localSurvey, setLocalSurvey }: StylingCard
   };
 
   const handleBgChange = (color: string, type: string) => {
+    setInputValue(100);
     setLocalSurvey({
       ...localSurvey,
       surveyBackground: {
@@ -89,6 +108,16 @@ export default function StylingCard({ localSurvey, setLocalSurvey }: StylingCard
     });
   };
 
+  const handleBrightnessChange = (percent: number) => {
+    setLocalSurvey({
+      ...localSurvey,
+      surveyBackground: {
+        ...localSurvey.surveyBackground,
+        brightness: percent,
+      },
+    });
+  };
+
   const handleBorderColorChange = (color: string) => {
     setLocalSurvey({
       ...localSurvey,
@@ -173,8 +202,8 @@ export default function StylingCard({ localSurvey, setLocalSurvey }: StylingCard
           {/* Background */}
           <div className="p-3">
             <div className="ml-2 flex items-center space-x-1">
-              <Switch id="autoComplete" checked={!!bg} onCheckedChange={toggleBackgroundColor} />
-              <Label htmlFor="autoComplete" className="cursor-pointer">
+              <Switch id="autoCompleteBg" checked={!!bg} onCheckedChange={toggleBackgroundColor} />
+              <Label htmlFor="autoCompleteBg" className="cursor-pointer">
                 <div className="ml-2">
                   <h3 className="text-sm font-semibold text-slate-700">Change Background</h3>
                   <p className="text-xs font-normal text-slate-500">
@@ -212,6 +241,36 @@ export default function StylingCard({ localSurvey, setLocalSurvey }: StylingCard
               </div>
             )}
           </div>
+          {/* Overlay */}
+          <div className="p-3">
+            <div className="ml-2 flex items-center space-x-1">
+              <Switch id="autoCompleteOverlay" checked={!!brightness} onCheckedChange={toggleBrightness} />
+              <Label htmlFor="autoCompleteOverlay" className="cursor-pointer">
+                <div className="ml-2">
+                  <h3 className="text-sm font-semibold text-slate-700">Background Overlay</h3>
+                  <p className="text-xs font-normal text-slate-500">
+                    Darken or lighten background of your choice.
+                  </p>
+                </div>
+              </Label>
+            </div>
+            {brightness && (
+              <div>
+                <div className="mt-4 flex flex-col justify-center rounded-lg border bg-slate-50 p-4 px-8">
+                  <h3 className="mb-4 text-sm font-semibold text-slate-700">Transparency</h3>
+                  <input
+                    id="small-range"
+                    type="range"
+                    min="1"
+                    max="200"
+                    value={inputValue}
+                    onChange={handleInputChange}
+                    className="range-sm mb-6 h-1 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700"
+                  />
+                </div>
+              </div>
+            )}
+          </div>
           {/* positioning */}
           {type !== "link" && (
             <div className="p-3 ">
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgDeskstop.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgDeskstop.tsx
index 48802701f0..e28ecf11ec 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgDeskstop.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgDeskstop.tsx
@@ -3,9 +3,13 @@ export default function PreviewSurveyBgDeskstop({ children, survey, ContentRef }
     <div className="flex flex-grow flex-col overflow-y-auto rounded-b-lg" ref={ContentRef}>
       <div
         className="relative flex w-full flex-grow flex-col items-center justify-center p-4 py-6"
-        style={{ backgroundColor: survey.surveyBackground.bg || "#ffff" }}>
-        {children}
-      </div>
+        style={{
+          backgroundColor: survey.surveyBackground.bg || "#ffff",
+          filter: survey.surveyBackground.brightness
+            ? `brightness(${survey.surveyBackground.brightness}%)`
+            : "none",
+        }}></div>
+      <div className="absolute flex h-full w-full items-center justify-center">{children}</div>
     </div>
   ) : survey.surveyBackground && survey.surveyBackground.bgType === "animation" ? (
     <div className="flex flex-grow flex-col overflow-y-auto rounded-b-lg" ref={ContentRef}>
@@ -13,22 +17,34 @@ export default function PreviewSurveyBgDeskstop({ children, survey, ContentRef }
         className="relative flex w-full flex-grow flex-col items-center justify-center p-4 py-6"
         style={{
           background: `url(${survey.surveyBackground.bg}) no-repeat center center fixed`,
-          // backgroundSize: 'cover',
         }}>
-        <video muted loop autoPlay className="absolute inset-0 h-full w-full object-cover">
+        <video
+          muted
+          loop
+          autoPlay
+          className="absolute inset-0 h-full w-full object-cover"
+          style={{
+            filter: survey.surveyBackground.brightness
+              ? `brightness(${survey.surveyBackground.brightness}%)`
+              : "none",
+          }}>
           <source src={survey.surveyBackground.bg} type="video/mp4" />
           Your browser does not support the video tag.
         </video>
-        {children}
+        <div className="flex h-full w-full items-center justify-center">{children}</div>
       </div>
     </div>
   ) : survey.surveyBackground && survey.surveyBackground.bgType === "image" ? (
     <div className="flex flex-grow flex-col overflow-y-auto rounded-b-lg" ref={ContentRef}>
       <div
         className="relative flex w-full flex-grow flex-col items-center justify-center p-4 py-6"
-        style={{ backgroundImage: `url(${survey.surveyBackground.bg})` }}>
-        {children}
-      </div>
+        style={{
+          backgroundImage: `url(${survey.surveyBackground.bg})`,
+          filter: survey.surveyBackground.brightness
+            ? `brightness(${survey.surveyBackground.brightness}%)`
+            : "none",
+        }}></div>
+      <div className="absolute flex h-full w-full items-center justify-center">{children}</div>
     </div>
   ) : (
     <div className="flex flex-grow flex-col overflow-y-auto rounded-b-lg" ref={ContentRef}>
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgMobile.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgMobile.tsx
index fcdfdb32dc..0795e6a3dd 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgMobile.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgMobile.tsx
@@ -1,22 +1,24 @@
 export default function PreviewSurveyBgMobile({ children, survey, ContentRef }) {
-  console.log(survey.surveyBackground);
-
   return survey.surveyBackground && survey.surveyBackground.bgType === "color" ? (
-    <div
-      className="relative h-[90%] max-h-[40rem] w-80 overflow-hidden rounded-[3rem] border-8 border-slate-500"
-      style={{ backgroundColor: survey.surveyBackground.bg }}>
+    <div className="relative h-[90%] max-h-[40rem] w-80 overflow-hidden rounded-[3rem] border-8 border-slate-500">
       <div
-        className="absolute top-0 z-10 flex h-full w-full flex-grow flex-col overflow-y-auto"
-        ref={ContentRef}>
-        <div className="relative flex w-full flex-grow flex-col items-center justify-center">{children}</div>
+        className="absolute top-0 z-10 flex h-full w-full flex-grow flex-col"
+        ref={ContentRef}
+        style={{
+          backgroundColor: survey.surveyBackground.bg,
+          filter: survey.surveyBackground.brightness
+            ? `brightness(${survey.surveyBackground.brightness}%)`
+            : "none",
+        }}></div>
+      <div className="absolute flex h-full w-full items-center justify-center overflow-y-auto">
+        {children}
       </div>
     </div>
   ) : survey.surveyBackground && survey.surveyBackground.bgType === "animation" ? (
     <div className="relative h-[90%] max-h-[40rem] w-80 overflow-hidden rounded-[3rem] border-8 border-slate-500">
       <div
         className="absolute top-0 z-10 flex h-full w-full flex-grow flex-col overflow-y-auto"
-        ref={ContentRef}
-        style={{ position: "relative" }}>
+        ref={ContentRef}>
         <div className="relative flex w-full flex-grow flex-col items-center justify-center">
           <div className="absolute inset-0 h-full w-full object-cover">
             <video
@@ -24,7 +26,13 @@ export default function PreviewSurveyBgMobile({ children, survey, ContentRef })
               loop
               autoPlay
               className="h-full w-full object-cover"
-              style={{ width: "100%", height: "100%" }}>
+              style={{
+                width: "100%",
+                height: "100%",
+                filter: survey.surveyBackground.brightness
+                  ? `brightness(${survey.surveyBackground.brightness}%)`
+                  : "none",
+              }}>
               <source src={survey.surveyBackground.bg} type="video/mp4" />
               Your browser does not support the video tag.
             </video>
@@ -34,23 +42,33 @@ export default function PreviewSurveyBgMobile({ children, survey, ContentRef })
       </div>
     </div>
   ) : survey.surveyBackground && survey.surveyBackground.bgType === "image" ? (
-    <div
-      className="relative h-[90%] max-h-[40rem] w-80 overflow-hidden rounded-[3rem] border-8 border-slate-500"
-      style={{ backgroundImage: `url(${survey.surveyBackground.bg})` }}>
+    <div className="relative h-[90%] max-h-[40rem] w-80 overflow-hidden rounded-[3rem] border-8 border-slate-500">
       <div
         className="absolute top-0 z-10 flex h-full w-full flex-grow flex-col overflow-y-auto"
-        ref={ContentRef}>
-        <div className="relative flex w-full flex-grow flex-col items-center justify-center">{children}</div>
+        ref={ContentRef}
+        style={{
+          backgroundImage: `url(${survey.surveyBackground.bg})`,
+          filter: survey.surveyBackground.brightness
+            ? `brightness(${survey.surveyBackground.brightness}%)`
+            : "none",
+        }}></div>
+      <div className="absolute flex h-full w-full items-center justify-center overflow-y-auto">
+        {children}
       </div>
     </div>
   ) : (
-    <div
-      className="relative h-[90%] max-h-[40rem] w-80 overflow-hidden rounded-[3rem] border-8 border-slate-500"
-      style={{ backgroundColor: "#ffff" }}>
+    <div className="relative h-[90%] max-h-[40rem] w-80 overflow-hidden rounded-[3rem] border-8 border-slate-500">
       <div
-        className="absolute top-0 z-10 flex h-full w-full flex-grow flex-col overflow-y-auto"
-        ref={ContentRef}>
-        <div className="relative flex w-full flex-grow flex-col items-center justify-center">{children}</div>
+        className="absolute top-0 z-10 flex h-full w-full flex-grow flex-col"
+        ref={ContentRef}
+        style={{
+          backgroundColor: "#ffff",
+          filter: survey.surveyBackground.brightness
+            ? `brightness(${survey.surveyBackground.brightness}%)`
+            : "none",
+        }}></div>
+      <div className="absolute flex h-full w-full items-center justify-center overflow-y-auto">
+        {children}
       </div>
     </div>
   );
diff --git a/apps/web/app/s/[surveyId]/components/SurveyBg.tsx b/apps/web/app/s/[surveyId]/components/SurveyBg.tsx
index d6a89afeb0..066e6e06f1 100644
--- a/apps/web/app/s/[surveyId]/components/SurveyBg.tsx
+++ b/apps/web/app/s/[surveyId]/components/SurveyBg.tsx
@@ -1,30 +1,57 @@
 export default async function SurveyBg({ children, survey }) {
   return survey.surveyBackground && survey.surveyBackground.bgType === "color" ? (
-    <div
-      className={`flex h-full items-center justify-center `}
-      style={{ backgroundColor: `${survey.surveyBackground?.bg}` }}>
-      <div className="h-[60%]">{children}</div>
+    <div className={`flex h-full items-center justify-center `}>
+      <div
+        className={`flex h-full w-full`}
+        style={{
+          backgroundColor: `${survey.surveyBackground?.bg}`,
+          filter: survey.surveyBackground.brightness
+            ? `brightness(${survey.surveyBackground.brightness}%)`
+            : "none",
+        }}></div>
+      <div className="absolute h-[60%]">{children}</div>
     </div>
   ) : survey.surveyBackground && survey.surveyBackground.bgType === "animation" ? (
     <div className={`flex h-full items-center justify-center `}>
-      <video muted loop autoPlay className="fixed left-0 top-0 -z-50 h-full w-full object-cover">
+      <video
+        muted
+        loop
+        autoPlay
+        className="fixed left-0 top-0 -z-50 h-full w-full object-cover"
+        style={{
+          filter: survey.surveyBackground.brightness
+            ? `brightness(${survey.surveyBackground.brightness}%)`
+            : "none",
+        }}>
         <source src={survey.surveyBackground?.bg} type="video/mp4" />
         Your browser does not support the video tag.
       </video>
       <div className="h-[60%]">{children}</div>
     </div>
   ) : survey.surveyBackground && survey.surveyBackground.bgType === "image" ? (
-    <div
-      className={`flex h-full items-center justify-center `}
-      style={{
-        backgroundImage: `url(${survey.surveyBackground?.bg})`,
-        backgroundSize: "inherit",
-      }}>
-      <div className="h-[60%]">{children}</div>
+    <div className={`flex h-full items-center justify-center `}>
+      <div
+        className={`flex h-full w-full`}
+        style={{
+          backgroundImage: `url(${survey.surveyBackground?.bg})`,
+          backgroundSize: "inherit",
+          filter: survey.surveyBackground.brightness
+            ? `brightness(${survey.surveyBackground.brightness}%)`
+            : "none",
+        }}></div>
+      <div className="absolute h-[60%]">{children}</div>
     </div>
   ) : (
-    <div className={`flex h-full items-center justify-center `} style={{ backgroundColor: "#ffff" }}>
-      <div className="h-[60%]">{children}</div>
+    <div className={`flex h-full items-center justify-center `}>
+      <div
+        className={`flex h-full w-full`}
+        style={{
+          backgroundColor: "#ffff",
+          filter: survey.surveyBackground.brightness
+            ? `brightness(${survey.surveyBackground.brightness}%)`
+            : "none",
+        }}></div>
+      <div className="absolute h-[60%]">{children}</div>
     </div>
   );
 }
diff --git a/packages/types/surveys.ts b/packages/types/surveys.ts
index 80237d1ed3..17a2d51edd 100644
--- a/packages/types/surveys.ts
+++ b/packages/types/surveys.ts
@@ -44,6 +44,7 @@ export const ZSurveyProductOverwrites = z.object({
 export const ZSurveyBackground = z.object({
   bg: z.string().nullish(),
   bgType: z.string().nullish(),
+  brightness: z.number().nullish(),
   // darkOverlay: z.boolean().nullish(),
 });
 
diff --git a/packages/ui/FileInput/index.tsx b/packages/ui/FileInput/index.tsx
index de5625b758..4cc0f2008e 100644
--- a/packages/ui/FileInput/index.tsx
+++ b/packages/ui/FileInput/index.tsx
@@ -17,7 +17,7 @@ interface FileInputProps {
   id: string;
   allowedFileExtensions: TAllowedFileExtensions[];
   environmentId: string | undefined;
-  onFileUpload: (uploadedUrl: string[] | string | undefined) => void;
+  onFileUpload: (uploadedUrl: string[] | undefined) => void;
   fileUrl?: string | string[];
   multiple?: boolean;
 }