CTA on success page (#818)

components/booking/pages/BookingPage.tsx

@@ -144,6 +144,7 @@ const BookingPage = (props: BookingPageProps) => {
           user: props.profile.slug,
           reschedule: !!rescheduleUid,
           name: payload.name,
+          email: payload.email,
         };
 
         if (payload["location"]) {

components/ui/Button.tsx

@@ -60,7 +60,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         color === "primary" &&
           (disabled
             ? "border border-transparent bg-gray-400 text-white"
-            : "border border-transparent text-white bg-neutral-900 hover:bg-neutral-800 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900"),
+            : "border border-transparent dark:text-black text-white bg-neutral-900 dark:bg-white hover:bg-neutral-800 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900"),
         color === "secondary" &&
           (disabled
             ? "border border-gray-200 text-gray-400 bg-white"
@@ -92,7 +92,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
           <svg
             className={classNames(
               "w-5 h-5 mx-4 animate-spin",
-              color === "primary" ? "text-white" : "text-black"
+              color === "primary" ? "dark:text-black text-white" : "text-black"
             )}
             xmlns="http://www.w3.org/2000/svg"
             fill="none"

pages/success.tsx

@@ -18,6 +18,7 @@ import prisma from "@lib/prisma";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import { HeadSeo } from "@components/seo/head-seo";
+import Button from "@components/ui/Button";
 
 dayjs.extend(utc);
 dayjs.extend(toArray);
@@ -227,6 +228,25 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
                   {!props.hideBranding && (
                     <div className="mt-4 pt-4 border-t dark:border-gray-900  text-gray-400 text-center text-xs dark:text-white">
                       <a href="https://cal.com/signup">Create your own booking link with Cal.com</a>
+
+                      <form
+                        onSubmit={(e) => {
+                          e.preventDefault();
+                          router.push(`https://cal.com/signup?email=` + (e as any).target.email.value);
+                        }}
+                        className="flex mt-4">
+                        <input
+                          type="email"
+                          name="email"
+                          id="email"
+                          defaultValue={router.query.email}
+                          className="shadow-sm text-gray-600 dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300"
+                          placeholder="rick.astley@cal.com"
+                        />
+                        <Button type="submit" className="min-w-max" color="primary">
+                          Try it for free
+                        </Button>
+                      </form>
                     </div>
                   )}
                 </div>