fix: add payment method fix - revert hcaptcha changes (#21781)

* revert

* Fix missing hcaptchastore import in _app

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

apps/studio/components/interfaces/Billing/Payment/AddNewPaymentMethodModal.tsx

@@ -8,6 +8,7 @@ import { Modal } from 'ui'
 import { useOrganizationPaymentMethodSetupIntent } from 'data/organizations/organization-payment-method-setup-intent-mutation'
 import { useSelectedOrganization, useStore } from 'hooks'
 import { STRIPE_PUBLIC_KEY } from 'lib/constants'
+import { useIsHCaptchaLoaded } from 'stores/hcaptcha-loaded-store'
 import AddPaymentMethodForm from './AddPaymentMethodForm'
 
 interface AddNewPaymentMethodModalProps {
@@ -30,7 +31,7 @@ const AddNewPaymentMethodModal = ({
   const [intent, setIntent] = useState<any>()
   const selectedOrganization = useSelectedOrganization()
 
-  const [captchaLoaded, setHCaptchaLoaded] = useState(false)
+  const captchaLoaded = useIsHCaptchaLoaded()
   const [captchaToken, setCaptchaToken] = useState<string | null>(null)
   const [captchaRef, setCaptchaRef] = useState<HCaptcha | null>(null)
 
@@ -125,7 +126,6 @@ const AddNewPaymentMethodModal = ({
         onExpire={() => {
           setCaptchaToken(null)
         }}
-        onLoad={() => setHCaptchaLoaded(true)}
       />
 
       <Modal

apps/studio/pages/_app.tsx

@@ -48,13 +48,14 @@ import { StoreProvider } from 'hooks'
 import { AuthProvider } from 'lib/auth'
 import { BASE_PATH, IS_PLATFORM, LOCAL_STORAGE_KEYS } from 'lib/constants'
 
+import { FeaturePreviewContextProvider } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
+import FeaturePreviewModal from 'components/interfaces/App/FeaturePreview/FeaturePreviewModal'
 import { ProfileProvider } from 'lib/profile'
 import { useAppStateSnapshot } from 'state/app-state'
 import { RootStore } from 'stores'
+import HCaptchaLoadedStore from 'stores/hcaptcha-loaded-store'
 import type { AppPropsWithLayout } from 'types'
 import { Toaster } from 'ui'
-import { FeaturePreviewContextProvider } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
-import FeaturePreviewModal from 'components/interfaces/App/FeaturePreview/FeaturePreviewModal'
 
 dayjs.extend(customParseFormat)
 dayjs.extend(utc)
@@ -176,6 +177,7 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
                   </TooltipProvider>
                 </PageTelemetry>
 
+                <HCaptchaLoadedStore />
                 <Toaster />
                 <PortalToast />
                 {!isTestEnv && <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />}

apps/studio/pages/new/index.tsx

@@ -9,6 +9,7 @@ import { NewOrgForm } from 'components/interfaces/Organization'
 import { WizardLayout } from 'components/layouts'
 import { useSetupIntent } from 'data/stripe/setup-intent-mutation'
 import { STRIPE_PUBLIC_KEY } from 'lib/constants'
+import { useIsHCaptchaLoaded } from 'stores/hcaptcha-loaded-store'
 import type { NextPageWithLayout } from 'types'
 
 const stripePromise = loadStripe(STRIPE_PUBLIC_KEY)
@@ -20,7 +21,7 @@ const Wizard: NextPageWithLayout = () => {
   const { resolvedTheme } = useTheme()
 
   const [intent, setIntent] = useState<any>()
-  const [captchaLoaded, setHCaptchaLoaded] = useState(false)
+  const captchaLoaded = useIsHCaptchaLoaded()
 
   const [captchaToken, setCaptchaToken] = useState<string | null>(null)
   const [captchaRef, setCaptchaRef] = useState<HCaptcha | null>(null)
@@ -85,19 +86,13 @@ const Wizard: NextPageWithLayout = () => {
         ref={captchaRefCallback}
         sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
         size="invisible"
-        onOpen={() => {
-          // [Joshen] This is to ensure that hCaptcha popup remains clickable
-          if (document !== undefined) document.body.classList.add('!pointer-events-auto')
-        }}
-        onClose={() => {
-          onLocalCancel()
-          if (document !== undefined) document.body.classList.remove('!pointer-events-auto')
-        }}
         onVerify={(token) => {
           setCaptchaToken(token)
-          if (document !== undefined) document.body.classList.remove('!pointer-events-auto')
         }}
-        onLoad={() => setHCaptchaLoaded(true)}
+        onClose={onLocalCancel}
+        onExpire={() => {
+          setCaptchaToken(null)
+        }}
       />
 
       {intent && (

apps/studio/stores/hcaptcha-loaded-store.tsx

@@ -0,0 +1,31 @@
+import HCaptcha from '@hcaptcha/react-hcaptcha'
+import { proxy, useSnapshot } from 'valtio'
+
+const hCaptchaLoadedStoreState = proxy({
+  loaded: false,
+  setLoaded() {
+    hCaptchaLoadedStoreState.loaded = true
+  },
+})
+
+export const useIsHCaptchaLoaded = () => {
+  const snap = useSnapshot(hCaptchaLoadedStoreState)
+
+  return snap.loaded
+}
+
+const HCaptchaLoadedStore = () => {
+  const onLoad = () => {
+    hCaptchaLoadedStoreState.setLoaded()
+  }
+
+  return (
+    <HCaptcha
+      sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
+      size="invisible"
+      onLoad={onLoad}
+    />
+  )
+}
+
+export default HCaptchaLoadedStore