clients: Support keyboard submission in hero signup

polarsource · Nov 6, 2024 · 2fa4422 · 2fa4422
1 parent 77c63aa
commit 2fa4422
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/clients/apps/web/src/components/Auth/GetStartedButton.tsx b/clients/apps/web/src/components/Auth/GetStartedButton.tsx
@@ -8,7 +8,7 @@ import { Organization } from '@polar-sh/sdk'
 import { Modal } from '../Modal'
 import { useModal } from '../Modal/useModal'
 import { AuthModal } from './AuthModal'
-import { useCallback } from 'react'
+import { useCallback, useMemo, FormEvent } from 'react'
 import { usePostHog } from '@/hooks/posthog'
 
 interface GetStartedButtonProps extends ComponentProps<typeof Button> {
@@ -30,17 +30,25 @@ const GetStartedButton: React.FC<GetStartedButtonProps> = ({
   const { isShown: isModalShown, hide: hideModal, show: showModal } = useModal()
   const text = _text || 'Get Started'
 
-  let signup = {}
-  if (storefrontOrg?.id) {
-    signup = {
+  const signup = useMemo(() => {
+    if (!storefrontOrg) return {}
+
+    return {
       from_storefront: storefrontOrg.id,
     }
-  }
+  }, [storefrontOrg])
 
   const onClick = useCallback(() => {
     posthog.capture('global:user:signup:click', signup)
     showModal()
-  }, [signup])
+  }, [signup, posthog, showModal])
+
+  // Supporting embedding the button in a form
+  const onSubmit = useCallback((e: FormEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    onClick()
+  }, [onClick])
 
   return (
     <>
@@ -51,6 +59,7 @@ const GetStartedButton: React.FC<GetStartedButtonProps> = ({
         )}
         size={size}
         onClick={onClick}
+        onSubmit={onSubmit}
         {...props}
       >
         <div>{text}</div>

diff --git a/clients/apps/web/src/components/Landing/Hero/Hero.tsx b/clients/apps/web/src/components/Landing/Hero/Hero.tsx
@@ -43,9 +43,13 @@ export const Hero = () => {
         </div>
         <div className="flex flex-col items-center gap-y-8">
           <div className="z-20 flex flex-row items-center gap-x-4">
-            <div
+            <form
+              action="/signup"
               className="dark:bg-polar-800 dark:border-polar-700 flex flex-row items-center gap-x-2 rounded-full border bg-gray-50 py-2 pl-6 pr-2"
-              role="form"
+              onSubmit={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+              }}
             >
               <div className="flex flex-row items-center gap-x-0.5">
                 <span className="md:text-xl">polar.sh/</span>
@@ -58,13 +62,14 @@ export const Hero = () => {
                 />
               </div>
               <GetStartedButton
+                type="submit"
                 className="px-3"
                 orgSlug={slug}
                 size="lg"
                 text="Start for free"
                 wrapperClassNames="md:text-lg md:px-4"
               />
-            </div>
+            </form>
           </div>
         </div>
         <p className="dark:text-polar-500 text-balance text-gray-500">