fix widget error not showing widget twice, fix bug in get client settings, update demo with feedback button

apps/demo/pages/_app.tsx

@@ -4,6 +4,8 @@ import { useEffect } from "react";
 import { useRouter } from "next/router";
 import "../styles/globals.css";
 
+declare const window: any;
+
 if (typeof window !== "undefined") {
   if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
     formbricks.init({
@@ -11,6 +13,7 @@ if (typeof window !== "undefined") {
       apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST,
       logLevel: "debug",
     });
+    window.formbricks = formbricks;
   }
 }
 

apps/demo/pages/app/index.tsx

@@ -10,6 +10,7 @@ import {
   MagnifyingGlassIcon,
 } from "@heroicons/react/24/solid";
 import Image from "next/image";
+import formbricks from "@formbricks/js";
 
 const cards = [{ name: "Account balance", href: "#", icon: ScaleIcon, amount: "$30,659.45" }];
 const transactions = [
@@ -64,7 +65,11 @@ export default function AppPage({}) {
             </form>
           </div>
           <div className="ml-4 flex items-center md:ml-6">
-            <button className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm  font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50">
+            <button
+              className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm  font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50"
+              onClick={() => {
+                formbricks.track("Feedback Button Click");
+              }}>
               Feedback
             </button>
             <button

apps/web/lib/api/clientSettings.ts

@@ -99,6 +99,10 @@ export const getSettings = async (environmentId: string, personId: string): Prom
       } else if (survey.recontactDays !== null) {
         // if recontactDays is set on survey, use that
         const lastDisplaySurvey = survey.displays[0];
+        if (!lastDisplaySurvey) {
+          // no display yet - always display
+          return true;
+        }
         const lastDisplayDate = new Date(lastDisplaySurvey.createdAt);
         const currentDate = new Date();
         const diffTime = Math.abs(currentDate.getTime() - lastDisplayDate.getTime());

packages/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formbricks/js",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "",
   "source": "src/index.ts",
   "main": "./dist/index.cjs",

packages/js/src/components/MultipleChoiceSingleQuestion.tsx

@@ -52,7 +52,7 @@ export default function MultipleChoiceSingleQuestion({
                       id={choice.id}
                       name={question.id}
                       value={choice.label}
-                      className="fb-h-4 fb-w-4 fb-border fb-border-slate-300 fb-accent-slate-800 fb-bg-white focus:fb-ring-0 focus:fb-ring-offset-0"
+                      className="fb-h-4 fb-w-4 fb-border fb-border-slate-300 focus:fb-ring-0 focus:fb-ring-offset-0"
                       aria-labelledby={`${choice.id}-label`}
                       onChange={(e) => {
                         setSelectedChoice(e.currentTarget.value);

packages/js/src/lib/widget.ts

@@ -20,9 +20,11 @@ export const renderWidget = (survey: Survey) => {
 };
 
 export const closeSurvey = async (): Promise<void> => {
+  console.log("close survey called");
   // remove container element from DOM
   const container = document.getElementById(containerId);
-  container.innerHTML = "";
+  container.remove();
+  addWidgetContainer();
   const settings = await getSettings();
   config.update({ settings });
   surveyRunning = false;