added billing portal button

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>
+  );
+}

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>