Merge pull request #11751 from overleaf/ii-payment-page-stories

[web] Payment page stories

GitOrigin-RevId: 9f8aff0cf839bc811d8612e97bd627b577860cc8

services/web/frontend/js/shared/utils/external-script-loader.ts

@@ -0,0 +1,31 @@
+import { useState, useEffect } from 'react'
+
+type ExternalScriptLoaderProps = {
+  children: JSX.Element
+  src: string
+}
+
+function ExternalScriptLoader({ children, src }: ExternalScriptLoaderProps) {
+  const [loaded, setLoaded] = useState(false)
+
+  useEffect(() => {
+    const body = document.querySelector('body')
+    const script = document.createElement('script')
+
+    script.async = true
+    script.src = src
+    script.onload = () => {
+      setLoaded(true)
+    }
+
+    body?.appendChild(script)
+
+    return () => {
+      body?.removeChild(script)
+    }
+  }, [src])
+
+  return loaded ? children : null
+}
+
+export default ExternalScriptLoader