From 0bc44c36db8e33e500d9525385bf0d5261a19bef Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Tue, 17 Oct 2023 16:03:12 +0100
Subject: [PATCH] feat: added example messages to cal ai post-install (#11944)

* added example messages to cal ai post-install

* Revert yarn.lock changes

* added search plceholder to app store
---
 apps/web/pages/apps/index.tsx                 |  2 +
 packages/app-store/apps.browser.generated.tsx |  1 +
 packages/app-store/cal-ai/components/.gitkeep |  0
 .../components/AppSettingsInterface.tsx       | 73 +++++++++++++++++++
 4 files changed, 76 insertions(+)
 delete mode 100644 packages/app-store/cal-ai/components/.gitkeep
 create mode 100644 packages/app-store/cal-ai/components/AppSettingsInterface.tsx

diff --git a/apps/web/pages/apps/index.tsx b/apps/web/pages/apps/index.tsx
index c5e7c03fba..679957c923 100644
--- a/apps/web/pages/apps/index.tsx
+++ b/apps/web/pages/apps/index.tsx
@@ -45,6 +45,7 @@ function AppsSearch({
   onChange: ChangeEventHandler<HTMLInputElement>;
   className?: string;
 }) {
+  const { t } = useLocale();
   return (
     <TextField
       className="bg-subtle !border-muted !pl-0 focus:!ring-offset-0"
@@ -54,6 +55,7 @@ function AppsSearch({
       type="search"
       autoComplete="false"
       onChange={onChange}
+      placeholder={t("search")}
     />
   );
 }
diff --git a/packages/app-store/apps.browser.generated.tsx b/packages/app-store/apps.browser.generated.tsx
index e8d108c257..f00630685d 100644
--- a/packages/app-store/apps.browser.generated.tsx
+++ b/packages/app-store/apps.browser.generated.tsx
@@ -11,6 +11,7 @@ export const InstallAppButtonMap = {
   vital: dynamic(() => import("./vital/components/InstallAppButton")),
 };
 export const AppSettingsComponentsMap = {
+  "cal-ai": dynamic(() => import("./cal-ai/components/AppSettingsInterface")),
   "general-app-settings": dynamic(() =>
     import("./templates/general-app-settings/components/AppSettingsInterface")
   ),
diff --git a/packages/app-store/cal-ai/components/.gitkeep b/packages/app-store/cal-ai/components/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/app-store/cal-ai/components/AppSettingsInterface.tsx b/packages/app-store/cal-ai/components/AppSettingsInterface.tsx
new file mode 100644
index 0000000000..8c40985f6e
--- /dev/null
+++ b/packages/app-store/cal-ai/components/AppSettingsInterface.tsx
@@ -0,0 +1,73 @@
+import { useSession } from "next-auth/react";
+
+export function MailLink({ subject, body }: { subject: string; body?: string }) {
+  const { data } = useSession();
+
+  return (
+    <a href={`mailto:${data?.user?.username}@cal.ai?subject=${subject}&body=${body ? body : ""}`}>
+      {subject ? subject : body}
+    </a>
+  );
+}
+export default function AppSettings() {
+  return (
+    <>
+      <div className="prose-sm prose prose-a:text-default prose-headings:text-emphasis prose-code:text-default prose-strong:text-default text-default">
+        <h2>Example questions:</h2>
+        <ul>
+          <li>
+            <MailLink subject="Book a meeting with @cal-user this week at a good time" />
+          </li>
+          <li>
+            <MailLink subject="Find a time to meet with not-a-cal-user@gmail.com this week" />
+          </li>
+          <li>
+            <MailLink subject="Move my meeting with [Someone's Name] to next week" />
+          </li>
+          <li>
+            <MailLink subject="What does my week look like?" />
+          </li>
+          <li>
+            <MailLink subject="When is my next meeting?" />
+          </li>
+          <li>
+            <MailLink subject="What is my least busy day next week?" />
+          </li>
+          <li>
+            <MailLink subject="Cancel the meeting with [Someone's Name]" />
+          </li>
+          <li>
+            <MailLink subject="Reschedule the meeting with not-a-cal-user@gmail.com" />
+          </li>
+          <li>
+            <MailLink subject="Is @cal-user busy on Friday at noon?" />
+          </li>
+          <li>
+            <MailLink subject="Move my meeting at 2pm tomorrow to next week on Friday at 5pm" />
+          </li>
+        </ul>
+        <h3>Or, any of that in a thread:</h3>
+        <ul>
+          <li>
+            What meetings do I have this week?
+            <ul>
+              <li>Meeting 1, Meeting 2</li>
+            </ul>
+          </li>
+          <li>Cancel that first meeting</li>
+        </ul>
+        <h3>Or, doing multiple things:</h3>
+        <ul>
+          <li>
+            <MailLink
+              subject=""
+              body="Cancel all my meetings tomorrow then book a quick chat with @joe at noon, a long meeting with
+            @jane at 1 (both tomorrow). Also see if Toby is down to grab dinner this week (toby@gmail.com).
+            Finally send me my updated agenda of everything I have coming up in the next couple days."
+            />
+          </li>
+        </ul>
+      </div>
+    </>
+  );
+}