From d98df5ed3b80fe1c55821382e8cc005a397a4675 Mon Sep 17 00:00:00 2001
From: Dhruwang Jariwala <67850763+Dhruwang@users.noreply.github.com>
Date: Wed, 8 May 2024 18:36:32 +0530
Subject: [PATCH] fix: close survey button on centerd app survey (#2587)

---
 packages/surveys/src/components/general/Survey.tsx      | 6 +++++-
 packages/surveys/src/components/general/SurveyModal.tsx | 1 +
 packages/types/formbricksSurveys.ts                     | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/surveys/src/components/general/Survey.tsx b/packages/surveys/src/components/general/Survey.tsx
index 6b654d6c9f..c672eff8b8 100644
--- a/packages/surveys/src/components/general/Survey.tsx
+++ b/packages/surveys/src/components/general/Survey.tsx
@@ -37,6 +37,7 @@ export const Survey = ({
   onFileUpload,
   responseCount,
   startAtQuestionId,
+  clickOutside,
 }: SurveyBaseProps) => {
   const isInIframe = window.self !== window.top;
   const [questionId, setQuestionId] = useState(
@@ -72,6 +73,9 @@ export const Survey = ({
   }, [questionId, survey, history]);
   const contentRef = useRef<HTMLDivElement | null>(null);
   const showProgressBar = !styling.hideProgressBar;
+  const getShowSurveyCloseButton = (offset: number) => {
+    return offset === 0 && survey.type !== "link" && (clickOutside === undefined ? true : clickOutside);
+  };
 
   useEffect(() => {
     // scroll to top when question changes
@@ -326,7 +330,7 @@ export const Survey = ({
     };
     return (
       <AutoCloseWrapper survey={survey} onClose={onClose}>
-        {offset === 0 && survey.type !== "link" && <SurveyCloseButton 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",
diff --git a/packages/surveys/src/components/general/SurveyModal.tsx b/packages/surveys/src/components/general/SurveyModal.tsx
index 382ade9716..8ff75563ee 100644
--- a/packages/surveys/src/components/general/SurveyModal.tsx
+++ b/packages/surveys/src/components/general/SurveyModal.tsx
@@ -69,6 +69,7 @@ export function SurveyModal({
           responseCount={responseCount}
           styling={styling}
           isCardBorderVisible={!highlightBorderColor}
+          clickOutside={placement === "center" ? clickOutside : undefined}
         />
       </Modal>
     </div>
diff --git a/packages/types/formbricksSurveys.ts b/packages/types/formbricksSurveys.ts
index ce450c783d..416838c8cb 100644
--- a/packages/types/formbricksSurveys.ts
+++ b/packages/types/formbricksSurveys.ts
@@ -23,6 +23,7 @@ export interface SurveyBaseProps {
   responseCount?: number;
   isCardBorderVisible?: boolean;
   startAtQuestionId?: string;
+  clickOutside?: boolean;
 }
 
 export interface SurveyInlineProps extends SurveyBaseProps {