From c5fc3a7e8e47201548aa4e61727213e627e39ef6 Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Thu, 22 Sep 2022 21:03:59 +0530
Subject: [PATCH] Add Billing link (#4668)

---
 packages/app-store/stripepayment/api/portal.ts          | 2 +-
 packages/ui/v2/core/layouts/SettingsLayout.tsx          | 4 ++--
 packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx | 7 ++++++-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/app-store/stripepayment/api/portal.ts b/packages/app-store/stripepayment/api/portal.ts
index 7087c5304f..f04d3b4be8 100644
--- a/packages/app-store/stripepayment/api/portal.ts
+++ b/packages/app-store/stripepayment/api/portal.ts
@@ -4,7 +4,7 @@ import { getStripeCustomerIdFromUserId } from "../lib/customer";
 import stripe from "../lib/server";
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  if (req.method === "POST") {
+  if (req.method === "POST" || req.method === "GET") {
     const customerId = await getStripeCustomerIdFromUserId(req.session!.user.id);
 
     if (!customerId) {
diff --git a/packages/ui/v2/core/layouts/SettingsLayout.tsx b/packages/ui/v2/core/layouts/SettingsLayout.tsx
index 01b01cd5b0..5a2eac445a 100644
--- a/packages/ui/v2/core/layouts/SettingsLayout.tsx
+++ b/packages/ui/v2/core/layouts/SettingsLayout.tsx
@@ -48,8 +48,7 @@ const tabs: VerticalTabItemProps[] = [
     href: "/settings/billing",
     icon: Icon.FiCreditCard,
     children: [
-      //
-      { name: "invoices", href: "/settings/billing" },
+      { name: "Manage Billing", href: "/api/integrations/stripepayment/portal", isExternalLink: true },
     ],
   },
   {
@@ -143,6 +142,7 @@ const SettingsSidebarContainer = ({ className = "" }) => {
                   <VerticalTabItem
                     key={child.href}
                     name={t(child.name)}
+                    isExternalLink={child.isExternalLink}
                     href={child.href || "/"}
                     textClassNames="px-3 text-gray-900 font-medium text-sm"
                     disableChevron
diff --git a/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx b/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx
index 9ddccb538f..16cd2eaea9 100644
--- a/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx
+++ b/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx
@@ -21,6 +21,7 @@ export type VerticalTabItemProps = {
   hidden?: boolean;
   disableChevron?: boolean;
   href: string;
+  isExternalLink?: boolean;
   linkProps?: Omit<ComponentProps<typeof Link>, "href">;
 };
 
@@ -43,6 +44,7 @@ const VerticalTabItem = function ({
         <>
           <Link key={name} href={href} {...linkProps}>
             <a
+              target={props.isExternalLink ? "_blank" : "_self"}
               className={classNames(
                 props.textClassNames || "text-sm font-medium leading-none text-gray-600",
                 "group flex w-64 flex-row items-center rounded-md px-3 py-[10px] hover:bg-gray-100 group-hover:text-gray-700  [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900",
@@ -57,7 +59,10 @@ const VerticalTabItem = function ({
                 <props.icon className="mr-[10px] h-[16px] w-[16px] self-start stroke-[2px] md:mt-0" />
               )}
               <div>
-                <Skeleton as="p">{t(name)}</Skeleton>
+                <span className="flex items-center space-x-2">
+                  <Skeleton as="p">{t(name)}</Skeleton>
+                  {props.isExternalLink ? <Icon.FiExternalLink /> : null}
+                </span>
                 {info && (
                   <Skeleton as="p" className="mt-1 text-xs font-normal">
                     {t(info)}