From c7cfbc38467ea8413b97fd37c0b648be9b91eff1 Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Sun, 16 Jul 2023 00:18:49 -0400
Subject: [PATCH] added billing portal button

---
 .env.sample                             |  2 +-
 components/Modal/User/BillingPortal.tsx | 43 +++++++++++++++++++++++++
 components/Modal/User/index.tsx         | 22 +++++++++++++
 pages/subscribe.tsx                     |  7 ++++
 types/enviornment.d.ts                  |  2 +-
 5 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 components/Modal/User/BillingPortal.tsx

diff --git a/.env.sample b/.env.sample
index 7f4e76d..d13c0e5 100644
--- a/.env.sample
+++ b/.env.sample
@@ -20,4 +20,4 @@ EMAIL_SERVER=
 # Stripe settings (You don't need these, it's for the cloud instance payments)
 STRIPE_SECRET_KEY=
 PRICE_ID=
-STRIPE_BILLING_PORTAL_URL=
\ No newline at end of file
+NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL=
\ No newline at end of file
diff --git a/components/Modal/User/BillingPortal.tsx b/components/Modal/User/BillingPortal.tsx
new file mode 100644
index 0000000..2edc516
--- /dev/null
+++ b/components/Modal/User/BillingPortal.tsx
@@ -0,0 +1,43 @@
+import { useState } from "react";
+import SubmitButton from "@/components/SubmitButton";
+import { toast } from "react-hot-toast";
+import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
+
+export default function PaymentPortal() {
+  const [submitLoader, setSubmitLoader] = useState(false);
+  const router = useRouter();
+
+  const submit = () => {
+    setSubmitLoader(true);
+    const load = toast.loading("Redirecting to billing portal...");
+
+    router.push(process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL as string);
+  };
+
+  return (
+    <div className="mx-auto sm:w-[35rem] w-80">
+      <div className="max-w-[25rem] w-full mx-auto flex flex-col gap-3 justify-between">
+        <p className="text-md text-gray-500">
+          To manage/cancel your subsciption, visit the billing portal.
+        </p>
+
+        <SubmitButton
+          onClick={submit}
+          loading={submitLoader}
+          label="Go to Billing Portal"
+          icon={faArrowUpRightFromSquare}
+          className="mx-auto mt-2"
+        />
+
+        <p className="text-md text-gray-500">
+          If you still need help or encountered any issues, feel free to reach
+          out to us at:{" "}
+          <a className="font-semibold" href="mailto:hello@linkwarden.app">
+            hello@linkwarden.app
+          </a>
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/components/Modal/User/index.tsx b/components/Modal/User/index.tsx
index 41ea8b9..199d9bb 100644
--- a/components/Modal/User/index.tsx
+++ b/components/Modal/User/index.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import ChangePassword from "./ChangePassword";
 import ProfileSettings from "./ProfileSettings";
 import PrivacySettings from "./PrivacySettings";
+import BillingPortal from "./BillingPortal";
 
 type Props = {
   toggleSettingsModal: Function;
@@ -12,6 +13,9 @@ type Props = {
   defaultIndex?: number;
 };
 
+const STRIPE_BILLING_PORTAL_URL =
+  process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL;
+
 export default function UserModal({
   className,
   defaultIndex,
@@ -53,6 +57,18 @@ export default function UserModal({
           >
             Password
           </Tab>
+
+          {STRIPE_BILLING_PORTAL_URL ? (
+            <Tab
+              className={({ selected }) =>
+                selected
+                  ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
+                  : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
+              }
+            >
+              Billing Portal
+            </Tab>
+          ) : undefined}
         </Tab.List>
         <Tab.Panels>
           <Tab.Panel>
@@ -78,6 +94,12 @@ export default function UserModal({
               user={user}
             />
           </Tab.Panel>
+
+          {STRIPE_BILLING_PORTAL_URL ? (
+            <Tab.Panel>
+              <BillingPortal />
+            </Tab.Panel>
+          ) : undefined}
         </Tab.Panels>
       </Tab.Group>
     </div>
diff --git a/pages/subscribe.tsx b/pages/subscribe.tsx
index ba1223a..4d4697b 100644
--- a/pages/subscribe.tsx
+++ b/pages/subscribe.tsx
@@ -51,6 +51,13 @@ export default function Subscribe() {
           <p className="text-md text-gray-500 mt-1">
             You will be redirected to Stripe.
           </p>
+          <p className="text-md text-gray-500 mt-1">
+            feel free to reach out to us at{" "}
+            <a className="font-semibold" href="mailto:hello@linkwarden.app">
+              hello@linkwarden.app
+            </a>{" "}
+            in case of any issues.
+          </p>
         </div>
 
         <SubmitButton
diff --git a/types/enviornment.d.ts b/types/enviornment.d.ts
index 9b5619a..522221f 100644
--- a/types/enviornment.d.ts
+++ b/types/enviornment.d.ts
@@ -19,7 +19,7 @@ declare global {
 
       STRIPE_SECRET_KEY?: string;
       PRICE_ID?: string;
-      STRIPE_BILLING_PORTAL_URL?: string;
+      NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL?: string;
     }
   }
 }