From c4c20cf77dda59e7dcc661dda846e2e3136e4aec Mon Sep 17 00:00:00 2001
From: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
Date: Thu, 16 Jun 2022 12:40:14 -0400
Subject: [PATCH] Add clarification to feedback screen (#3083)

---
 .../ee/components/support/HelpMenuItem.tsx    | 22 +++++++++++++++++++
 apps/web/public/static/locales/en/common.json |  4 +++-
 apps/web/server/routers/viewer.tsx            |  2 +-
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/apps/web/ee/components/support/HelpMenuItem.tsx b/apps/web/ee/components/support/HelpMenuItem.tsx
index bfeec05657..5bc696fe70 100644
--- a/apps/web/ee/components/support/HelpMenuItem.tsx
+++ b/apps/web/ee/components/support/HelpMenuItem.tsx
@@ -1,5 +1,6 @@
 import { ExternalLinkIcon, ExclamationIcon } from "@heroicons/react/solid";
 import { useState } from "react";
+import { HelpScout, useChat } from "react-live-chat-loader";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
@@ -18,6 +19,8 @@ export default function HelpMenuItem({ closeHelp }: HelpMenuItemProps) {
   const [rating, setRating] = useState<null | string>(null);
   const [comment, setComment] = useState("");
   const [disableSubmit, setDisableSubmit] = useState(true);
+  const [active, setActive] = useState(false);
+  const [, loadChat] = useChat();
   const { t } = useLocale();
 
   const mutation = trpc.useMutation("viewer.submitFeedback", {
@@ -190,6 +193,25 @@ export default function HelpMenuItem({ closeHelp }: HelpMenuItemProps) {
           </div>
         )}
       </div>
+      <div className="w-full bg-neutral-50 p-5">
+        <p className="text-neutral-500">{t("specific_issue")}? </p>
+        <span
+          className="font-medium text-neutral-500 underline hover:text-neutral-700"
+          onClick={() => {
+            setActive(true);
+            loadChat({ open: true });
+          }}>
+          {t("contact_support")}
+        </span>
+        <span className="text-neutral-500"> {t("or").toLowerCase()} </span>
+        <a
+          className="font-medium text-neutral-500 underline hover:text-neutral-700"
+          href="https://docs.cal.com/"
+          target="_blank"
+          rel="noreferrer">
+          {t("browse_our_docs")}.
+        </a>
+      </div>
     </div>
   );
 }
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index d99058450e..8e5acbc1e0 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -908,5 +908,7 @@
   "web_conference": "Web conference",
   "requires_confirmation": "Requires confirmation",
   "add_exchange2013": "Connect Exchange 2013 Server",
-  "add_exchange2016": "Connect Exchange 2016 Server"
+  "add_exchange2016": "Connect Exchange 2016 Server",
+  "specific_issue": "Have a specific issue",
+  "browse_our_docs": "browse our docs"
 }
diff --git a/apps/web/server/routers/viewer.tsx b/apps/web/server/routers/viewer.tsx
index 30bfba42d8..d48a3fb46a 100644
--- a/apps/web/server/routers/viewer.tsx
+++ b/apps/web/server/routers/viewer.tsx
@@ -900,7 +900,7 @@ const loggedInViewerRouter = createProtectedRouter()
       const { rating, comment } = input;
 
       const feedback = {
-        username: ctx.user.name || "Nameless",
+        username: ctx.user.username || "Nameless",
         email: ctx.user.email || "No email address",
         rating: rating,
         comment: comment,