feature/delay survey (#345)

* add delay option to survey trigger

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">

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,
       };
     });
 

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;

packages/database/prisma/schema.prisma

@@ -187,6 +187,7 @@ model Survey {
   attributeFilters SurveyAttributeFilter[]
   displays         Display[]
   autoClose        Int?
+  delay            Int                     @default(0)
 }
 
 model Event {

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> => {

packages/types/js.ts

@@ -80,6 +80,7 @@ export interface Survey {
   triggers: Trigger[];
   thankYouCard: ThankYouCard;
   autoClose?: number | null;
+  delay: number;
 }
 
 export interface Trigger {

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 {