From 6e3de3b1d79ec1f7b4d964448437c73051fe0f9e Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Thu, 23 May 2024 17:04:33 -0400
Subject: [PATCH] show feedback call note

---
 frontend/src/App.tsx                          |  9 +++++++++
 .../user-feedback/FeedbackCallNote.tsx        | 19 +++++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 frontend/src/components/user-feedback/FeedbackCallNote.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1ec6abe..8db8f0a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -42,6 +42,7 @@ import ModelSettingsSection from "./components/ModelSettingsSection";
 import { extractHtml } from "./components/preview/extractHtml";
 import useBrowserTabIndicator from "./hooks/useBrowserTabIndicator";
 import TipLink from "./components/core/TipLink";
+import FeedbackCallNote from "./components/user-feedback/FeedbackCallNote";
 
 const IS_OPENAI_DOWN = false;
 
@@ -104,6 +105,8 @@ function App({ navbarComponent }: Props) {
     selectedCodeGenerationModel !== CodeGenerationModel.GPT_4O_2024_05_13 &&
     appState === AppState.INITIAL;
 
+  const showFeedbackCallNote = subscriberTier !== "free";
+
   // Indicate coding state using the browser tab's favicon and title
   useBrowserTabIndicator(appState === AppState.CODING);
 
@@ -461,6 +464,10 @@ function App({ navbarComponent }: Props) {
             </div>
           )}
 
+          {showFeedbackCallNote && appState === AppState.INITIAL && (
+            <FeedbackCallNote />
+          )}
+
           {(appState === AppState.CODING ||
             appState === AppState.CODE_READY) && (
             <>
@@ -535,6 +542,8 @@ function App({ navbarComponent }: Props) {
                 </div>
               )}
 
+              {showFeedbackCallNote && <FeedbackCallNote />}
+
               {/* Reference image display */}
               <div className="flex gap-x-2 mt-2">
                 {referenceImages.length > 0 && (
diff --git a/frontend/src/components/user-feedback/FeedbackCallNote.tsx b/frontend/src/components/user-feedback/FeedbackCallNote.tsx
new file mode 100644
index 0000000..fb39970
--- /dev/null
+++ b/frontend/src/components/user-feedback/FeedbackCallNote.tsx
@@ -0,0 +1,19 @@
+function FeedbackCallNote() {
+  return (
+    <div className="bg-blue-100 text-blue-800 p-4 rounded-lg">
+      <p className="text-sm">
+        Share your feedback with us on a{" "}
+        <a
+          href="https://dub.sh/DK4JOEY"
+          className="text-blue-800 underline"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          15 min call and get a $50 via Paypal or Amazon gift card.
+        </a>
+      </p>
+    </div>
+  );
+}
+
+export default FeedbackCallNote;