Merge pull request #214 from authzed/install-reo

Install vendor scripts

components/footer.tsx

@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { LogoIcon } from './logo';
+import Scripts from './scripts';
 
 export default function Footer() {
   return (
@@ -19,6 +20,7 @@ export default function Footer() {
           </div>
         </div>
       </div>
+      <Scripts />
     </div>
   );
 }

components/scripts.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import inEU from '@segment/in-eu';
+import Script from 'next/script';
+import { useEffect, useState } from 'react';
+
+export default function Scripts() {
+  const [loadReo, setLoadReo] = useState(false);
+  const [afterLoad, setAfterLoad] = useState(false);
+  const isProd = process.env.VERCEL_ENV === 'production';
+
+  useEffect(() => {
+    if (window) {
+      setLoadReo(!inEU());
+    }
+  }, [loadReo]);
+
+  useEffect(() => {
+    // @ts-ignore
+    if (afterLoad && window.Reo) {
+      // @ts-ignore
+      window.Reo.init({ clientID: 'bf9727b30a874e3' });
+    }
+  }, [afterLoad]);
+
+  return (
+    <>
+      {isProd && loadReo && (
+        <Script
+          src="https://static.reo.dev/bf9727b30a874e3/reo.js"
+          onLoad={() => setAfterLoad(true)}
+        ></Script>
+      )}
+    </>
+  );
+}

package.json

@@ -17,6 +17,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@segment/in-eu": "^0.4.0",
     "@svgr/webpack": "^8.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",