From bf6ed3576c7cbfe2d01e6522804e2b98e892e3ed Mon Sep 17 00:00:00 2001
From: Matti Nannt <mail@matthiasnannt.com>
Date: Fri, 8 Sep 2023 14:01:56 +0900
Subject: [PATCH] feat: Add option to customize link survey url using
 NEXT_PUBLIC_SURVEY_BASE_URL (#787)

---
 apps/formbricks-com/next.config.mjs           | 12 +++++++++++
 apps/formbricks-com/tailwind.config.ts        | 12 ++++++++++-
 .../surveys/SurveyDropDownMenu.tsx            |  9 ++++----
 .../(analysis)/summary/LinkSurveyModal.tsx    | 21 ++++++++++---------
 apps/web/env.mjs                              |  1 +
 apps/web/next.config.mjs                      |  3 +++
 packages/lib/constants.ts                     |  4 ++++
 turbo.json                                    |  1 +
 8 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/apps/formbricks-com/next.config.mjs b/apps/formbricks-com/next.config.mjs
index db00c053ce..d88e099cfd 100644
--- a/apps/formbricks-com/next.config.mjs
+++ b/apps/formbricks-com/next.config.mjs
@@ -132,6 +132,18 @@ const nextConfig = {
       },
     ];
   },
+  async rewrites() {
+    return {
+      fallback: [
+        // These rewrites are checked after both pages/public files
+        // and dynamic routes are checked
+        {
+          source: "/:path*",
+          destination: `https://app.formbricks.com/s/:path*`,
+        },
+      ],
+    };
+  },
 };
 
 export default withPlausibleProxy({ customDomain: "https://plausible.formbricks.com" })(
diff --git a/apps/formbricks-com/tailwind.config.ts b/apps/formbricks-com/tailwind.config.ts
index c23c2c0de5..8ed8a85ae8 100644
--- a/apps/formbricks-com/tailwind.config.ts
+++ b/apps/formbricks-com/tailwind.config.ts
@@ -6,7 +6,17 @@ import defaultTheme from "tailwindcss/defaultTheme";
 import typographyStyles from "./typography";
 
 export default {
-  content: ["./**/*.{js,mjs,jsx,ts,tsx,mdx}"],
+  trailingSlash: true,
+  content: [
+    // app content
+    "./app/**/*.{js,mjs,jsx,ts,tsx,mdx}", // Note the addition of the `app` directory.
+    "./pages/**/*.{js,mjs,jsx,ts,tsx,mdx}",
+    "./components/**/*.{js,mjs,jsx,ts,tsx,mdx}",
+    "./lib/**/*.{js,mjs,jsx,ts,tsx,mdx}",
+    "./mdx/**/*.{js,mjs,jsx,ts,tsx,mdx}",
+    // include packages if not transpiling
+    "../../packages/ui/components/**/*.{js,ts,jsx,tsx}",
+  ],
   darkMode: "class",
   theme: {
     fontSize: {
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/SurveyDropDownMenu.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/SurveyDropDownMenu.tsx
index 5b008a787c..047317a96a 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/SurveyDropDownMenu.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/SurveyDropDownMenu.tsx
@@ -14,6 +14,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/shared/DropdownMenu";
 import LoadingSpinner from "@/components/shared/LoadingSpinner";
+import { SURVEY_BASE_URL } from "@formbricks/lib/constants";
 import type { TEnvironment } from "@formbricks/types/v1/environment";
 import type { TSurveyWithAnalytics } from "@formbricks/types/v1/surveys";
 import {
@@ -27,7 +28,7 @@ import {
 } from "@heroicons/react/24/solid";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import toast from "react-hot-toast";
 
 interface SurveyDropDownMenuProps {
@@ -47,6 +48,8 @@ export default function SurveyDropDownMenu({
   const [loading, setLoading] = useState(false);
   const router = useRouter();
 
+  const surveyUrl = useMemo(() => SURVEY_BASE_URL + survey.id, [survey]);
+
   const handleDeleteSurvey = async (survey) => {
     setLoading(true);
     try {
@@ -161,9 +164,7 @@ export default function SurveyDropDownMenu({
                   <button
                     className="flex w-full items-center"
                     onClick={() => {
-                      navigator.clipboard.writeText(
-                        `${window.location.protocol}//${window.location.host}/s/${survey.id}`
-                      );
+                      navigator.clipboard.writeText(surveyUrl);
                       toast.success("Copied link to clipboard");
                     }}>
                     <LinkIcon className="mr-2 h-4 w-4" />
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/LinkSurveyModal.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/LinkSurveyModal.tsx
index b850d24fbb..14a55a0bca 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/LinkSurveyModal.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/LinkSurveyModal.tsx
@@ -1,13 +1,12 @@
 "use client";
 
 import CodeBlock from "@/components/shared/CodeBlock";
-// import Modal from "@/components/shared/Modal";
-import { Dialog, DialogContent } from "@formbricks/ui";
+import { SURVEY_BASE_URL } from "@formbricks/lib/constants";
 import { TSurvey } from "@formbricks/types/v1/surveys";
-import { Button } from "@formbricks/ui";
+import { Button, Dialog, DialogContent } from "@formbricks/ui";
 import { CheckIcon } from "@heroicons/react/24/outline";
 import { CodeBracketIcon, DocumentDuplicateIcon, EyeIcon } from "@heroicons/react/24/solid";
-import { useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import toast from "react-hot-toast";
 
 interface LinkSurveyModalProps {
@@ -20,10 +19,12 @@ export default function LinkSurveyModal({ survey, open, setOpen }: LinkSurveyMod
   const linkTextRef = useRef(null);
   const [showEmbed, setShowEmbed] = useState(false);
 
+  const surveyUrl = useMemo(() => SURVEY_BASE_URL + survey.id, [survey]);
+
   const iframeCode = `<div style="position: relative; height:100vh; max-height:100vh; 
 overflow:auto;"> 
 <iframe 
-src="${window.location.protocol}//${window.location.host}/s/${survey.id}" 
+src="${surveyUrl}" 
 frameborder="0" style="position: absolute; left:0;
 top:0; width:100%; height:100%; border:0;">
 </iframe></div>`;
@@ -67,7 +68,9 @@ top:0; width:100%; height:100%; border:0;">
                 <span
                   style={{
                     wordBreak: "break-all",
-                  }}>{`${window.location.protocol}//${window.location.host}/s/${survey.id}`}</span>
+                  }}>
+                  {surveyUrl}
+                </span>
               </div>
             </div>
           )}
@@ -89,9 +92,7 @@ top:0; width:100%; height:100%; border:0;">
               variant="secondary"
               onClick={() => {
                 setShowEmbed(false);
-                navigator.clipboard.writeText(
-                  `${window.location.protocol}//${window.location.host}/s/${survey.id}`
-                );
+                navigator.clipboard.writeText(surveyUrl);
                 toast.success("URL copied to clipboard!");
               }}
               title="Copy survey link to clipboard"
@@ -105,7 +106,7 @@ top:0; width:100%; height:100%; border:0;">
               title="Preview survey"
               aria-label="Preview survey"
               className="flex justify-center"
-              href={`${window.location.protocol}//${window.location.host}/s/${survey.id}?preview=true`}
+              href={`${surveyUrl}?preview=true`}
               target="_blank"
               EndIcon={EyeIcon}>
               Preview
diff --git a/apps/web/env.mjs b/apps/web/env.mjs
index 678b140370..4722b0fdf4 100644
--- a/apps/web/env.mjs
+++ b/apps/web/env.mjs
@@ -64,6 +64,7 @@ export const env = createEnv({
     NEXT_PUBLIC_POSTHOG_API_KEY: z.string().optional(),
     NEXT_PUBLIC_POSTHOG_API_HOST: z.string().optional(),
     NEXT_PUBLIC_SENTRY_DSN: z.string().optional(),
+    NEXT_PUBLIC_SURVEY_BASE_URL: z.string().optional(),
   },
   /*
    * Due to how Next.js bundles environment variables on Edge and Client,
diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs
index ccb350380a..7b64e8851e 100644
--- a/apps/web/next.config.mjs
+++ b/apps/web/next.config.mjs
@@ -4,7 +4,10 @@ import { createId } from "@paralleldrive/cuid2";
 
 /** @type {import('next').NextConfig} */
 
+const isCloud = process.env.NEXT_PUBLIC_IS_FORMBRICKS_CLOUD === "1";
+
 const nextConfig = {
+  assetPrefix: isCloud ? process.env.NEXT_PUBLIC_WEBAPP_URL : undefined,
   output: "standalone",
   experimental: {
     serverActions: true,
diff --git a/packages/lib/constants.ts b/packages/lib/constants.ts
index 7a6f7bd04e..c09c93ffa6 100644
--- a/packages/lib/constants.ts
+++ b/packages/lib/constants.ts
@@ -16,6 +16,10 @@ export const WEBAPP_URL =
   RENDER_URL ||
   "http://localhost:3000";
 
+export const SURVEY_BASE_URL = process.env.NEXT_PUBLIC_SURVEY_BASE_URL
+  ? process.env.NEXT_PUBLIC_SURVEY_BASE_URL + "/"
+  : `${WEBAPP_URL}/s/`;
+
 // Other
 export const INTERNAL_SECRET = process.env.INTERNAL_SECRET || "";
 export const CRON_SECRET = process.env.CRON_SECRET;
diff --git a/turbo.json b/turbo.json
index 505ff65925..503697abfd 100644
--- a/turbo.json
+++ b/turbo.json
@@ -68,6 +68,7 @@
         "NEXT_PUBLIC_FORMBRICKS_URL",
         "NEXT_PUBLIC_IMPRINT_URL",
         "NEXT_PUBLIC_SENTRY_DSN",
+        "NEXT_PUBLIC_SURVEY_BASE_URL",
         "NEXT_PUBLIC_VERCEL_URL",
         "NODE_ENV",
         "NEXT_PUBLIC_POSTHOG_API_HOST",