Add donate button

pbteja1998 · pbteja1998 · commit ad60d23c351c · 2021-02-19T20:49:56.000+05:30
diff --git a/src/components/AppNavBar.tsx b/src/components/AppNavBar.tsx
@@ -1,11 +1,12 @@
 import { NavBar, Button, Menu, Avatar } from '@/ui'
 import { signIn, signOut, useSession } from 'next-auth/client'
-import { Logo } from '@/components'
+import { Logo, DonateModal } from '@/components'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { User } from 'src/pages/members'
 import { Toggle } from '@/ui'
 import { Gear, RocketLaunch, SignOut, UserCircle } from 'phosphor-react'
+import { useState } from 'react'
 
 const navbarItems = [
   {
@@ -23,6 +24,7 @@ const navbarItems = [
 export default function AppNavBar() {
   const [session, loading] = useSession()
   const router = useRouter()
+  const [isDonateModalOpen, setIsDonateModalOpen] = useState(false)
 
   return (
     <NavBar
@@ -43,6 +45,19 @@ export default function AppNavBar() {
       }
       rightDesktopItems={
         <>
+          <Button
+            variant="solid"
+            variantColor="brand"
+            onClick={() => setIsDonateModalOpen(true)}
+          >
+            Donate
+          </Button>
+
+          <DonateModal
+            isOpen={isDonateModalOpen}
+            setIsOpen={setIsDonateModalOpen}
+          />
+
           {loading && <p>loading....</p>}
           {!loading &&
             (session ? (
diff --git a/src/components/modal/Donate.tsx b/src/components/modal/Donate.tsx
@@ -0,0 +1,21 @@
+import { useEffect } from 'react'
+
+export default function Donate() {
+  useEffect(() => {
+    const script = document.createElement('script')
+    const form = document.getElementById('donateForm')
+    script.setAttribute(
+      'src',
+      'https://cdn.razorpay.com/static/widget/subscription-button.js'
+    )
+    script.setAttribute('data-subscription_button_id', 'pl_GdSwtlH5wuoiJS')
+    script.setAttribute('data-button_theme', 'brand-color')
+    form.appendChild(script)
+  }, [])
+
+  return (
+    <>
+      <form id="donateForm"> </form>
+    </>
+  )
+}
diff --git a/src/components/modal/DonateModal.tsx b/src/components/modal/DonateModal.tsx
@@ -0,0 +1,58 @@
+import { Transition } from '@headlessui/react'
+import Donate from './Donate'
+
+export default function DonateModal({
+  isOpen,
+  setIsOpen,
+}: {
+  isOpen: boolean
+  setIsOpen: (open: boolean) => void
+}) {
+  if (!isOpen) {
+    return <></>
+  }
+  return (
+    <div className="fixed z-10 inset-0 overflow-y-auto">
+      <div className="flex items-end justify-center min-h-screen text-center sm:block">
+        <Transition
+          show={isOpen}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+          className="fixed inset-0 transition-opacity"
+          aria-hidden="true"
+        >
+          <div
+            className="absolute inset-0 bg-gray-500 opacity-75"
+            onClick={() => setIsOpen(false)}
+          ></div>
+        </Transition>
+
+        <span
+          className="hidden sm:inline-block sm:align-middle sm:h-screen"
+          aria-hidden="true"
+        >
+          &#8203;
+        </span>
+        <Transition
+          show={isOpen}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          enterTo="opacity-100 translate-y-0 sm:scale-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+          leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          className="inline-block align-bottom rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:align-middle sm:max-w-sm sm:w-full"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="modal-headline"
+        >
+          <Donate />
+        </Transition>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
@@ -1,3 +1,4 @@
 export { default as Modal } from './Modal'
 export { default as FollowModal } from './FollowModal'
 export { default as LikeModal } from './LikeModal'
+export { default as DonateModal } from './DonateModal'
