From c7e2e080266d5b47f8b774190fb5194c108c0e4d Mon Sep 17 00:00:00 2001 From: anjy7 Date: Mon, 30 Oct 2023 18:42:58 +0530 Subject: [PATCH] fix: made changes --- .../edit/components/AnimatedSurveyBg.tsx | 89 ++++++++++--------- .../{BgColour.tsx => ColorSurveyBg.tsx} | 6 +- .../edit/components/ImageSurveyBg.tsx | 36 -------- .../edit/components/SettingsView.tsx | 8 +- .../edit/components/StylingCard.tsx | 59 ++++++------ .../edit/components/SurveyEditor.tsx | 5 -- .../edit/components/SurveyMenuBar.tsx | 1 - .../surveys/[surveyId]/edit/page.tsx | 33 ------- .../surveys/components/PreviewSurvey.tsx | 40 ++++----- .../components/PreviewSurveyBgDeskstop.tsx | 8 +- ...SurveyBg.tsx => PreviewSurveyBgMobile.tsx} | 10 ++- .../app/s/[surveyId]/components/SurveyBg.tsx | 15 ++-- packages/types/common.ts | 4 - packages/types/surveys.ts | 2 +- packages/ui/Badge/index.tsx | 4 +- 15 files changed, 118 insertions(+), 202 deletions(-) rename apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/{BgColour.tsx => ColorSurveyBg.tsx} (90%) rename apps/web/app/(app)/environments/[environmentId]/surveys/components/{PreviewSurveyBg.tsx => PreviewSurveyBgMobile.tsx} (89%) 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 124f000499..6742f5ec46 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 @@ -1,44 +1,41 @@ import { useState } from "react"; -// import fs from 'fs'; -// import {k} from '/animated-bgs/4k/1_4k' -import { useRouter } from "next/navigation"; -export default function AnimatedSurveyBg({ localSurvey, handleBgChange, animationsFiles }) { - const [color, setColor] = useState(localSurvey.surveyBackground?.bgColor || "#ffff"); - const router = useRouter(); + +export default function AnimatedSurveyBg({ localSurvey, handleBgChange }) { + const [color, setColor] = useState(localSurvey.surveyBackground?.bg || "#ffff"); const [hoveredVideo, setHoveredVideo] = useState(null); - // const animationsFiles = [ - // "http://localhost:3000/storage/clobsi16y0009kezgiea5k71o/public/1_4k.mp4", - // "http://localhost:3000/storage/clobsi16y0009kezgiea5k71o/public/2_4k.mp4", - // // "/animated-bgs/4K/3_4k.mp4", - // // "/animated-bgs/4K/4_4k.mp4", - // // "/animated-bgs/4K/5_4k.mp4", - // // "/animated-bgs/4K/6_4k.mp4", - // // "/animated-bgs/4K/7_4k.mp4", - // // "/animated-bgs/4K/8_4k.mp4", - // // "/animated-bgs/4K/9_4k.mp4", - // // "/animated-bgs/4K/10_4k.mp4", - // // "/animated-bgs/4K/11_4k.mp4", - // // "/animated-bgs/4K/12_4k.mp4", - // // "/animated-bgs/4K/13_4k.mp4", - // // "/animated-bgs/4K/14_4k.mp4", - // // "/animated-bgs/4K/15_4k.mp4", - // // "/animated-bgs/4K/16_4k.mp4", - // // "/animated-bgs/4K/17_4k.mp4", - // // "/animated-bgs/4K/18_4k.mp4", - // // "/animated-bgs/4K/19_4k.mp4", - // // "/animated-bgs/4K/20_4k.mp4", - // // "/animated-bgs/4K/21_4k.mp4", - // // "/animated-bgs/4K/22_4k.mp4", - // // "/animated-bgs/4K/23_4k.mp4", - // // "/animated-bgs/4K/24_4k.mp4", - // // "/animated-bgs/4K/25_4k.mp4", - // // "/animated-bgs/4K/26_4k.mp4", - // // "/animated-bgs/4K/27_4k.mp4", - // // "/animated-bgs/4K/28_4k.mp4", - // // "/animated-bgs/4K/29_4k.mp4", - // // "/animated-bgs/4K/30_4k.mp4", - // ]; + const animationFiles = { + "/animated-bgs/Thumbnails/1_Thumb.mp4": "/animated-bgs/4K/1_4k.mp4", + "/animated-bgs/Thumbnails/2_Thumb.mp4": "/animated-bgs/4K/2_4k.mp4", + "/animated-bgs/Thumbnails/3_Thumb.mp4": "/animated-bgs/4K/3_4k.mp4", + "/animated-bgs/Thumbnails/4_Thumb.mp4": "/animated-bgs/4K/4_4k.mp4", + "/animated-bgs/Thumbnails/5_Thumb.mp4": "/animated-bgs/4K/5_4k.mp4", + "/animated-bgs/Thumbnails/6_Thumb.mp4": "/animated-bgs/4K/6_4k.mp4", + "/animated-bgs/Thumbnails/7_Thumb.mp4": "/animated-bgs/4K/7_4k.mp4", + "/animated-bgs/Thumbnails/8_Thumb.mp4": "/animated-bgs/4K/8_4k.mp4", + "/animated-bgs/Thumbnails/9_Thumb.mp4": "/animated-bgs/4K/9_4k.mp4", + "/animated-bgs/Thumbnails/10_Thumb.mp4": "/animated-bgs/4K/10_4k.mp4", + "/animated-bgs/Thumbnails/11_Thumb.mp4": "/animated-bgs/4K/11_4k.mp4", + "/animated-bgs/Thumbnails/12_Thumb.mp4": "/animated-bgs/4K/12_4k.mp4", + "/animated-bgs/Thumbnails/13_Thumb.mp4": "/animated-bgs/4K/13_4k.mp4", + "/animated-bgs/Thumbnails/14_Thumb.mp4": "/animated-bgs/4K/14_4k.mp4", + "/animated-bgs/Thumbnails/15_Thumb.mp4": "/animated-bgs/4K/15_4k.mp4", + "/animated-bgs/Thumbnails/16_Thumb.mp4": "/animated-bgs/4K/16_4k.mp4", + "/animated-bgs/Thumbnails/17_Thumb.mp4": "/animated-bgs/4K/17_4k.mp4", + "/animated-bgs/Thumbnails/18_Thumb.mp4": "/animated-bgs/4K/18_4k.mp4", + "/animated-bgs/Thumbnails/19_Thumb.mp4": "/animated-bgs/4K/19_4k.mp4", + "/animated-bgs/Thumbnails/20_Thumb.mp4": "/animated-bgs/4K/20_4k.mp4", + "/animated-bgs/Thumbnails/21_Thumb.mp4": "/animated-bgs/4K/21_4k.mp4", + "/animated-bgs/Thumbnails/22_Thumb.mp4": "/animated-bgs/4K/22_4k.mp4", + "/animated-bgs/Thumbnails/23_Thumb.mp4": "/animated-bgs/4K/23_4k.mp4", + "/animated-bgs/Thumbnails/24_Thumb.mp4": "/animated-bgs/4K/24_4k.mp4", + "/animated-bgs/Thumbnails/25_Thumb.mp4": "/animated-bgs/4K/25_4k.mp4", + "/animated-bgs/Thumbnails/26_Thumb.mp4": "/animated-bgs/4K/26_4k.mp4", + "/animated-bgs/Thumbnails/27_Thumb.mp4": "/animated-bgs/4K/27_4k.mp4", + "/animated-bgs/Thumbnails/28_Thumb.mp4": "/animated-bgs/4K/28_4k.mp4", + "/animated-bgs/Thumbnails/29_Thumb.mp4": "/animated-bgs/4K/29_4k.mp4", + "/animated-bgs/Thumbnails/30_Thumb.mp4": "/animated-bgs/4K/30_4k.mp4", + }; const handleMouseEnter = (index: number) => { setHoveredVideo(index); @@ -73,20 +70,26 @@ export default function AnimatedSurveyBg({ localSurvey, handleBgChange, animatio return (
- {animationsFiles.map((x, index) => { + {Object.keys(animationFiles).map((key, index) => { + const value = animationFiles[key]; return (
handleMouseEnter(index)} onMouseLeave={() => handleMouseLeave(index)} - onClick={() => handleBg(x)} - className="cursor-pointer"> + onClick={() => handleBg(value)} + className="relative cursor-pointer hover:scale-110"> +
); })} diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/BgColour.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ColorSurveyBg.tsx similarity index 90% rename from apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/BgColour.tsx rename to apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ColorSurveyBg.tsx index 8084ab90a0..f328d19984 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/BgColour.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ColorSurveyBg.tsx @@ -2,7 +2,7 @@ import { useState } from "react"; import { ColorPicker } from "@formbricks/ui/ColorPicker"; import { Label } from "@formbricks/ui/Label"; -export default function BgColour({ localSurvey, handleBgChange }) { +export default function ColorSurveyBg({ localSurvey, handleBgChange }) { const colours = [ "#FFF2D8", "#EAD7BB", @@ -30,7 +30,7 @@ export default function BgColour({ localSurvey, handleBgChange }) { "#CDFAD5", ]; - const [color, setColor] = useState(localSurvey.surveyBackground?.bgColor || "#ffff"); + const [color, setColor] = useState(localSurvey.surveyBackground?.bg || "#ffff"); const handleBg = (x: string) => { setColor(x); @@ -48,7 +48,7 @@ export default function BgColour({ localSurvey, handleBgChange }) { {colours.map((x) => { return (
handleBg(x)}>
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 c2e3f798ee..513800f6b6 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 @@ -1,42 +1,6 @@ -import { useState } from "react"; -import { ColorPicker } from "@formbricks/ui/ColorPicker"; -import { Label } from "@formbricks/ui/Label"; import FileInput from "@formbricks/ui/FileInput"; export default function ImageSurveyBg({ localSurvey, handleBgChange }) { - const colours = [ - "#FFF2D8", - "#EAD7BB", - "#BCA37F", - "#113946", - "#04364A", - "#176B87", - "#64CCC5", - "#DAFFFB", - "#132043", - "#1F4172", - "#F1B4BB", - "#FDF0F0", - "#001524", - "#445D48", - "#D6CC99", - "#FDE5D4", - "#BEADFA", - "#D0BFFF", - "#DFCCFB", - "#FFF8C9", - "#FF8080", - "#FFCF96", - "#F6FDC3", - "#CDFAD5", - ]; - - const [color, setColor] = useState(localSurvey.surveyBackground?.bgColor || "#ffff"); - - // const handleBg = (x: string) => { - // setColor(x); - // handleBgChange(x,"image"); - // }; return (
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SettingsView.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SettingsView.tsx index cb88410efa..ccdefa6e3d 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SettingsView.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SettingsView.tsx @@ -15,7 +15,6 @@ interface SettingsViewProps { setLocalSurvey: (survey: TSurvey) => void; actionClasses: TActionClass[]; attributeClasses: TAttributeClass[]; - animationsFiles: string[]; responseCount: number; } @@ -24,7 +23,6 @@ export default function SettingsView({ localSurvey, setLocalSurvey, actionClasses, - animationsFiles, attributeClasses, responseCount, }: SettingsViewProps) { @@ -58,11 +56,7 @@ export default function SettingsView({ environmentId={environment.id} /> - +
); } 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 b981fa0356..26e9db7925 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 @@ -9,24 +9,23 @@ import { CheckCircleIcon } from "@heroicons/react/24/solid"; import * as Collapsible from "@radix-ui/react-collapsible"; import { useState } from "react"; import Placement from "./Placement"; -import BgColour from "./BgColour"; +import ColorSurveyBg from "./ColorSurveyBg"; import ImageSurveyBg from "./ImageSurveyBg"; import AnimatedSurveyBg from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/AnimatedSurveyBg"; -import { useRouter } from "next/navigation"; + interface StylingCardProps { localSurvey: TSurvey; setLocalSurvey: React.Dispatch>; - animationsFiles: string[]; } -export default function StylingCard({ localSurvey, setLocalSurvey, animationsFiles }: StylingCardProps) { +export default function StylingCard({ localSurvey, setLocalSurvey }: StylingCardProps) { const [open, setOpen] = useState(false); - const [tab, setTab] = useState("image"); - const router = useRouter(); + const { type, productOverwrites, surveyBackground } = localSurvey; - // console.log(productOverwrites) const { brandColor, clickOutside, darkOverlay, placement, highlightBorderColor } = productOverwrites ?? {}; - const { bgColor } = surveyBackground ?? {}; + const { bg, bgType } = surveyBackground ?? {}; + + const [tab, setTab] = useState(bgType || "image"); const togglePlacement = () => { setLocalSurvey({ @@ -53,10 +52,10 @@ export default function StylingCard({ localSurvey, setLocalSurvey, animationsFil ...localSurvey, surveyBackground: { ...localSurvey.surveyBackground, - bgColor: !!bgColor ? undefined : "#ffff", + bg: !!bg ? undefined : "#ffff", + bgType: !!bg ? undefined : "color", }, }); - console.log("++++", localSurvey); }; const toggleHighlightBorderColor = () => { @@ -84,12 +83,10 @@ export default function StylingCard({ localSurvey, setLocalSurvey, animationsFil ...localSurvey, surveyBackground: { ...localSurvey.surveyBackground, - bgColor: color, + bg: color, bgType: type, }, }); - - console.log("++++++", localSurvey); }; const handleBorderColorChange = (color: string) => { @@ -176,7 +173,7 @@ export default function StylingCard({ localSurvey, setLocalSurvey, animationsFil {/* Background */}
- +
- {bgColor && ( -
-
- - - + {bg && ( +
+
+ + +
{tab == "image" ? ( - ) : tab == "animated" ? ( - + ) : tab == "animation" ? ( + ) : ( - + )}
)} diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyEditor.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyEditor.tsx index 790bc088d0..a41e2102a8 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyEditor.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyEditor.tsx @@ -21,14 +21,12 @@ interface SurveyEditorProps { actionClasses: TActionClass[]; attributeClasses: TAttributeClass[]; responseCount: number; - animationsFiles: string[]; } export default function SurveyEditor({ survey, product, environment, - animationsFiles, actionClasses, attributeClasses, responseCount, @@ -61,7 +59,6 @@ export default function SurveyEditor({ return ; } - // console.log(localSurvey) return ( <>
@@ -91,7 +88,6 @@ export default function SurveyEditor({ /> ) : (
)} - + )} {previewMode === "desktop" && ( 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 9bccf02567..48802701f0 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgDeskstop.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgDeskstop.tsx @@ -3,7 +3,7 @@ export default function PreviewSurveyBgDeskstop({ children, survey, ContentRef }
+ style={{ backgroundColor: survey.surveyBackground.bg || "#ffff" }}> {children}
@@ -12,11 +12,11 @@ export default function PreviewSurveyBgDeskstop({ children, survey, ContentRef }
{children} @@ -26,7 +26,7 @@ export default function PreviewSurveyBgDeskstop({ children, survey, ContentRef }
+ style={{ backgroundImage: `url(${survey.surveyBackground.bg})` }}> {children}
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBg.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgMobile.tsx similarity index 89% rename from apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBg.tsx rename to apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgMobile.tsx index c5996ae77a..fcdfdb32dc 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBg.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgMobile.tsx @@ -1,8 +1,10 @@ -export default function PreviewSurveyBg({ children, survey, ContentRef }) { +export default function PreviewSurveyBgMobile({ children, survey, ContentRef }) { + console.log(survey.surveyBackground); + return survey.surveyBackground && survey.surveyBackground.bgType === "color" ? (
+ style={{ backgroundColor: survey.surveyBackground.bg }}>
@@ -23,7 +25,7 @@ export default function PreviewSurveyBg({ children, survey, ContentRef }) { autoPlay className="h-full w-full object-cover" style={{ width: "100%", height: "100%" }}> - + Your browser does not support the video tag.
@@ -34,7 +36,7 @@ export default function PreviewSurveyBg({ children, survey, ContentRef }) { ) : survey.surveyBackground && survey.surveyBackground.bgType === "image" ? (
+ style={{ backgroundImage: `url(${survey.surveyBackground.bg})` }}>
diff --git a/apps/web/app/s/[surveyId]/components/SurveyBg.tsx b/apps/web/app/s/[surveyId]/components/SurveyBg.tsx index f810cfb53f..d6a89afeb0 100644 --- a/apps/web/app/s/[surveyId]/components/SurveyBg.tsx +++ b/apps/web/app/s/[surveyId]/components/SurveyBg.tsx @@ -1,15 +1,14 @@ export default async function SurveyBg({ children, survey }) { - const bgColour = survey.surveyBackground?.bgColor || "#ffff"; - - console.log("----", survey.surveyBackground); return survey.surveyBackground && survey.surveyBackground.bgType === "color" ? ( -
+
{children}
) : survey.surveyBackground && survey.surveyBackground.bgType === "animation" ? (
{children}
@@ -18,13 +17,9 @@ export default async function SurveyBg({ children, survey }) {
-
{children}
) : ( diff --git a/packages/types/common.ts b/packages/types/common.ts index c839e08cc7..b88ad68777 100644 --- a/packages/types/common.ts +++ b/packages/types/common.ts @@ -8,10 +8,6 @@ export const ZOptionalNumber = z.number().optional(); export const ZColor = z.string().regex(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/); -export const ZBgColor = - z.string().regex(/storage\/[a-zA-Z0-9]+\/public\/[a-zA-Z0-9%20-]+\.png \d+ [A-Za-z.]+:\d+:\d+/) || - z.string().regex(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/); - export const ZPlacement = z.enum(["bottomLeft", "bottomRight", "topLeft", "topRight", "center"]); export type TPlacement = z.infer; diff --git a/packages/types/surveys.ts b/packages/types/surveys.ts index 6ef541119f..98137a5b0f 100644 --- a/packages/types/surveys.ts +++ b/packages/types/surveys.ts @@ -42,7 +42,7 @@ export const ZSurveyProductOverwrites = z.object({ }); export const ZSurveyBackground = z.object({ - bgColor: z.string().nullish(), + bg: z.string().nullish(), bgType: z.string().nullish(), // darkOverlay: z.boolean().nullish(), }); diff --git a/packages/ui/Badge/index.tsx b/packages/ui/Badge/index.tsx index 6a85e0a9f7..4be5cee316 100644 --- a/packages/ui/Badge/index.tsx +++ b/packages/ui/Badge/index.tsx @@ -19,7 +19,7 @@ export const Badge: React.FC = ({ startIconClassName, className, }) => { - const bgColor = { + const bg = { warning: "bg-amber-100", success: "bg-green-100", error: "bg-red-100", @@ -45,7 +45,7 @@ export const Badge: React.FC = ({