From 2fca7509319efc4d2cf17c7086c9b5056c98ff85 Mon Sep 17 00:00:00 2001 From: Shubham Palriwala Date: Wed, 17 Apr 2024 21:01:31 +0530 Subject: [PATCH] fix: overlay & close on click outside to work in survey preview (#2436) --- .../lookandfeel/components/EditPlacement.tsx | 15 ++++-- .../components/ThemeStylingPreviewSurvey.tsx | 6 +++ .../[surveyId]/edit/components/Placement.tsx | 15 ++++-- .../surveys/components/Modal.tsx | 50 ++++++++++++++++--- .../surveys/components/PreviewSurvey.tsx | 8 +++ 5 files changed, 78 insertions(+), 16 deletions(-) diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/EditPlacement.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/EditPlacement.tsx index 4e47e8fcc1..61db000b8d 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/EditPlacement.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/EditPlacement.tsx @@ -31,6 +31,8 @@ export function EditPlacement({ product }: EditPlacementProps) { const [overlay, setOverlay] = useState(product.darkOverlay ? "darkOverlay" : "lightOverlay"); const [clickOutside, setClickOutside] = useState(product.clickOutsideClose ? "allow" : "disallow"); const [updatingPlacement, setUpdatingPlacement] = useState(false); + const overlayStyle = + currentPlacement === "center" && overlay === "darkOverlay" ? "bg-gray-700/80" : "bg-slate-200"; const handleUpdatePlacement = async () => { try { @@ -58,18 +60,21 @@ export function EditPlacement({ product }: EditPlacementProps) { {placements.map((placement) => (
-
))} -
+
diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/ThemeStylingPreviewSurvey.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/ThemeStylingPreviewSurvey.tsx index eb78861327..f7510d931d 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/ThemeStylingPreviewSurvey.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/ThemeStylingPreviewSurvey.tsx @@ -99,8 +99,12 @@ export const ThemeStylingPreviewSurvey = ({ }; const { placement: surveyPlacement } = productOverwrites || {}; + const { darkOverlay: surveyDarkOverlay } = productOverwrites || {}; + const { clickOutsideClose: surveyClickOutsideClose } = productOverwrites || {}; const placement = surveyPlacement || product.placement; + const darkOverlay = surveyDarkOverlay ?? product.darkOverlay; + const clickOutsideClose = surveyClickOutsideClose ?? product.clickOutsideClose; const highlightBorderColor = product.styling.highlightBorderColor?.light; @@ -149,6 +153,8 @@ export const ThemeStylingPreviewSurvey = ({ isOpen placement={placement} highlightBorderColor={highlightBorderColor} + clickOutsideClose={clickOutsideClose} + darkOverlay={darkOverlay} previewMode="desktop" background={product.styling.cardBackgroundColor?.light} borderRadius={product.styling.roundness ?? 8}> diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/Placement.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/Placement.tsx index 2a734e6c47..953ce5c724 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/Placement.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/Placement.tsx @@ -32,6 +32,8 @@ export default function Placement({ setClickOutsideClose, clickOutsideClose, }: TPlacementProps) { + const overlayStyle = + currentPlacement === "center" && overlay === "dark" ? "bg-gray-700/80" : "bg-slate-200"; return ( <>
@@ -39,18 +41,21 @@ export default function Placement({ {placements.map((placement) => (
-
))} -
+
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/components/Modal.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/components/Modal.tsx index 6e04a69520..80b7c051df 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/components/Modal.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/components/Modal.tsx @@ -10,6 +10,8 @@ export default function Modal({ placement, previewMode, highlightBorderColor, + clickOutsideClose, + darkOverlay, borderRadius, background, }: { @@ -18,12 +20,15 @@ export default function Modal({ placement: TPlacement; previewMode: string; highlightBorderColor: string | null | undefined; + clickOutsideClose: boolean; + darkOverlay: boolean; borderRadius?: number; background?: string; }) { - const [show, setShow] = useState(false); + const [show, setShow] = useState(true); const modalRef = useRef(null); const [windowWidth, setWindowWidth] = useState(window.innerWidth); + const [overlayVisible, setOverlayVisible] = useState(true); const calculateScaling = () => { let scaleValue = "1"; @@ -61,6 +66,7 @@ export default function Modal({ }; const scalingClasses = calculateScaling(); + const overlayStyle = overlayVisible && darkOverlay ? "bg-gray-700/80" : "bg-white/50"; useEffect(() => { const handleResize = () => setWindowWidth(window.innerWidth); @@ -68,11 +74,36 @@ export default function Modal({ return () => window.removeEventListener("resize", handleResize); }, []); + useEffect(() => { + if (!clickOutsideClose) { + setOverlayVisible(true); + setShow(true); + } + const previewBase = document.getElementById("preview-survey-base"); + function handleClickOutside(e: MouseEvent) { + // Checks if the positioning is center, clickOutsideClose is set & if the click is inside the preview screen but outside the survey modal + if ( + scalingClasses.transformOrigin === "" && + clickOutsideClose && + modalRef.current && + previewBase && + previewBase.contains(e.target as Node) && + !modalRef.current.contains(e.target as Node) + ) { + setTimeout(() => { + setOverlayVisible(false); + setShow(false); + }, 500); + } + } + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, [clickOutsideClose, scalingClasses.transformOrigin]); + const highlightBorderColorStyle = useMemo(() => { - if (!highlightBorderColor) - return { - overflow: "auto", - }; + if (!highlightBorderColor) return { overflow: "auto" }; return { border: `2px solid ${highlightBorderColor}`, @@ -103,7 +134,14 @@ export default function Modal({ : ""; return ( -
+
{ // allow style overwrite is disabled from the product @@ -224,6 +228,8 @@ export default function PreviewSurvey({ placement={placement} highlightBorderColor={styling.highlightBorderColor?.light} previewMode="mobile" + darkOverlay={darkOverlay} + clickOutsideClose={clickOutsideClose} borderRadius={styling?.roundness ?? 8} background={styling?.cardBackgroundColor?.light}>