Add Billing link (#4668)

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) {

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

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