show feedback call note

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 && (

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;