diff --git a/.env.sample b/.env.sample index 7f4e76d3..d13c0e56 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 00000000..2edc516b --- /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 ( +
+ To manage/cancel your subsciption, visit the billing portal. +
+ ++ If you still need help or encountered any issues, feel free to reach + out to us at:{" "} + + hello@linkwarden.app + +
+You will be redirected to Stripe.
++ feel free to reach out to us at{" "} + + hello@linkwarden.app + {" "} + in case of any issues. +