From fc6534fa19dae0387434dec27622bf517a31147c Mon Sep 17 00:00:00 2001
From: Moritz Rengert <42251569+moritzrengert@users.noreply.github.com>
Date: Fri, 9 Jun 2023 10:08:23 +0200
Subject: [PATCH] feature/delay survey (#345)

* add delay option to survey trigger
---
 .../[surveyId]/edit/WhenToSendCard.tsx        | 30 +++++++++++++++++++
 apps/web/lib/api/clientSettings.ts            |  2 ++
 .../migration.sql                             |  2 ++
 packages/database/prisma/schema.prisma        |  1 +
 packages/js/src/lib/widget.ts                 | 10 ++++---
 packages/types/js.ts                          |  1 +
 packages/types/surveys.ts                     |  1 +
 7 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 packages/database/prisma/migrations/20230608112129_add_survey_delay/migration.sql

diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/WhenToSendCard.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/WhenToSendCard.tsx
index e17ce9f2f8..aa6e78f282 100644
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/WhenToSendCard.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/WhenToSendCard.tsx
@@ -73,6 +73,12 @@ export default function WhenToSendCard({ environmentId, localSurvey, setLocalSur
     setLocalSurvey(updatedSurvey);
   };
 
+  const handleTriggerDelay = (e: any) => {
+    let value = parseInt(e.target.value);
+    const updatedSurvey: Survey = { ...localSurvey, delay: value };
+    setLocalSurvey(updatedSurvey);
+  };
+
   useEffect(() => {
     if (localSurvey.type === "link") {
       setOpen(false);
@@ -199,6 +205,30 @@ export default function WhenToSendCard({ environmentId, localSurvey, setLocalSur
               Add condition
             </Button>
           </div>
+
+          {localSurvey.type !== "link" && (
+            <div className="ml-2 flex items-center space-x-1 px-4 pb-4">
+              <label
+                htmlFor="triggerDelay"
+                className="flex w-full cursor-pointer items-center rounded-lg  border bg-slate-50 p-4">
+                <div className="">
+                  <p className="text-sm font-semibold text-slate-700">
+                    Wait
+                    <Input
+                      type="number"
+                      min="0"
+                      id="triggerDelay"
+                      value={localSurvey.delay.toString()}
+                      onChange={(e) => handleTriggerDelay(e)}
+                      className="ml-2 mr-2 inline w-16 text-center text-sm"
+                    />
+                    seconds before showing the survey.
+                  </p>
+                </div>
+              </label>
+            </div>
+          )}
+
           <div className="ml-2 flex items-center space-x-1 p-4">
             <Switch id="autoClose" checked={autoClose} onCheckedChange={handleCheckMark} />
             <Label htmlFor="autoClose" className="cursor-pointer">
diff --git a/apps/web/lib/api/clientSettings.ts b/apps/web/lib/api/clientSettings.ts
index 3e4d340d7a..f2dbeb9a25 100644
--- a/apps/web/lib/api/clientSettings.ts
+++ b/apps/web/lib/api/clientSettings.ts
@@ -108,6 +108,7 @@ export const getSettings = async (environmentId: string, personId: string): Prom
       },
       thankYouCard: true,
       autoClose: true,
+      delay: true,
     },
   });
 
@@ -182,6 +183,7 @@ export const getSettings = async (environmentId: string, personId: string): Prom
         triggers: survey.triggers,
         thankYouCard: JSON.parse(JSON.stringify(survey.thankYouCard)),
         autoClose: survey.autoClose,
+        delay: survey.delay,
       };
     });
 
diff --git a/packages/database/prisma/migrations/20230608112129_add_survey_delay/migration.sql b/packages/database/prisma/migrations/20230608112129_add_survey_delay/migration.sql
new file mode 100644
index 0000000000..8a3f3de4a0
--- /dev/null
+++ b/packages/database/prisma/migrations/20230608112129_add_survey_delay/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Survey" ADD COLUMN     "delay" INTEGER NOT NULL DEFAULT 0;
diff --git a/packages/database/prisma/schema.prisma b/packages/database/prisma/schema.prisma
index b925a6ba27..d87b09ddf4 100644
--- a/packages/database/prisma/schema.prisma
+++ b/packages/database/prisma/schema.prisma
@@ -187,6 +187,7 @@ model Survey {
   attributeFilters SurveyAttributeFilter[]
   displays         Display[]
   autoClose        Int?
+  delay            Int                     @default(0)
 }
 
 model Event {
diff --git a/packages/js/src/lib/widget.ts b/packages/js/src/lib/widget.ts
index 788ac922fd..bafd4c52a2 100644
--- a/packages/js/src/lib/widget.ts
+++ b/packages/js/src/lib/widget.ts
@@ -19,10 +19,12 @@ export const renderWidget = (survey: Survey) => {
   }
   surveyRunning = true;
 
-  render(
-    h(App, { config: config.get(), survey, closeSurvey, errorHandler: errorHandler.handle }),
-    document.getElementById(containerId)
-  );
+  setTimeout(() => {
+    render(
+      h(App, { config: config.get(), survey, closeSurvey, errorHandler: errorHandler.handle }),
+      document.getElementById(containerId)
+    );
+  }, survey.delay * 1000);
 };
 
 export const closeSurvey = async (): Promise<void> => {
diff --git a/packages/types/js.ts b/packages/types/js.ts
index 9947ee9312..57800461f7 100644
--- a/packages/types/js.ts
+++ b/packages/types/js.ts
@@ -80,6 +80,7 @@ export interface Survey {
   triggers: Trigger[];
   thankYouCard: ThankYouCard;
   autoClose?: number | null;
+  delay: number;
 }
 
 export interface Trigger {
diff --git a/packages/types/surveys.ts b/packages/types/surveys.ts
index 91a07cbf8d..492a50aa68 100644
--- a/packages/types/surveys.ts
+++ b/packages/types/surveys.ts
@@ -23,6 +23,7 @@ export interface Survey {
   displayOption: "displayOnce" | "displayMultiple" | "respondMultiple";
   attributeFilters: AttributeFilter[];
   autoClose: number | null;
+  delay: number;
 }
 
 export interface AttributeFilter {