From 3bcaa9629682a0de091f00a4d7d5642e958f1195 Mon Sep 17 00:00:00 2001
From: Travis Vachon <travis.vachon@gmail.com>
Date: Thu, 18 Jan 2024 16:42:41 -0800
Subject: [PATCH] feat: add a link to the customer self-service billing portal

this will allow customers to change their billing details
---
 .env.tpl                     |  1 +
 .github/workflows/deploy.yml |  2 ++
 src/components/UsageBar.tsx  | 14 ++++++++++++--
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/.env.tpl b/.env.tpl
index 0434f9a..80607cf 100644
--- a/.env.tpl
+++ b/.env.tpl
@@ -5,6 +5,7 @@ NEXT_PUBLIC_W3UP_SERVICE_DID=did:web:staging.web3.storage
 # set these to values from Stripe settings
 NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID=prctbl_1OCeiEF6A5ufQX5vPFlWRkPm
 NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51LO87hF6A5ufQX5viNsPTbuErzfavdrEFoBuaJJPfoIhzQXdOUdefwL70YewaXA32ZrSRbK4U4fqebC7SVtyeNcz00qmgNgueC
+NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL_LINK=https://billing.stripe.com/p/login/test_6oE29Gff99KO6mk8ww
 
 # set this to skip forcing users to pick a Stripe plan
 NEXT_PUBLIC_DISABLE_PLAN_GATE=false
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index e649394..8606f78 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -39,6 +39,7 @@ jobs:
           echo "NEXT_PUBLIC_W3UP_PROVIDER=did:web:staging.web3.storage" >> .env
           echo "NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID=prctbl_1NzhdvF6A5ufQX5vKNZuRhie" >> .env
           echo "NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51LO87hF6A5ufQX5viNsPTbuErzfavdrEFoBuaJJPfoIhzQXdOUdefwL70YewaXA32ZrSRbK4U4fqebC7SVtyeNcz00qmgNgueC" >> .env
+          echo "NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL_LINK=https://billing.stripe.com/p/login/test_6oE29Gff99KO6mk8ww" >> .env
       # as long as this uses https://github.com/cloudflare/next-on-pages/blob/dc529d7efa8f8568ea8f71b5cdcf78df89be6c12/packages/next-on-pages/bin/index.js,
       # env vars won't get passed through to wrangler, so if wrangler will need them, write them to .env like the previous step
       - run: pnpm pages:build
@@ -122,6 +123,7 @@ jobs:
           echo "NEXT_PUBLIC_W3UP_PROVIDER=did:web:web3.storage" >> .env
           echo "NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID=prctbl_1OCJ1qF6A5ufQX5vM5DWg4rA" >> .env
           echo "NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_51LO87hF6A5ufQX5vQTO5BHyz8y9ybJp4kg1GsBjYuqwluuwtQTkbeZzkoQweFQDlv7JaGjuIdUWAyuwXp3tmCfsM005lJK9aS8" >> .env
+          echo "NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL_LINK=https://billing.stripe.com/p/login/cN22aA62U6bO1sA9AA" >> .env
       - run: pnpm pages:build
         # as long as this uses https://github.com/cloudflare/next-on-pages/blob/dc529d7efa8f8568ea8f71b5cdcf78df89be6c12/packages/next-on-pages/bin/index.js,
         # env vars won't get passed through to wrangler, so if wrangler will need them, write them to .env like the previous step
diff --git a/src/components/UsageBar.tsx b/src/components/UsageBar.tsx
index 738aacf..a9c6e92 100644
--- a/src/components/UsageBar.tsx
+++ b/src/components/UsageBar.tsx
@@ -59,8 +59,18 @@ export function UsageBar (): ReactNode {
   return (
     <div className='w-full'>
       {plan?.product ? (
-        <div className='lg:text-right text-xs tracking-wider font-mono'>
-          Plan: <strong>{Plans[plan.product]?.name ?? plan.product}</strong> <a className='underline' href='mailto:support@web3.storage?subject=How%20to%20change%20my%20payment%20plan?' title='Automated support for switching plans is currently in progress. to change your plan, please email support@web3.storage.'>change</a>
+        <div className='lg:text-right text-xs tracking-wider font-mono flex flex-row justify-end space-x-2'>
+          <div>Plan: <strong>{Plans[plan.product]?.name ?? plan.product}</strong></div>
+          <a className='underline'
+            href='mailto:support@web3.storage?subject=How%20to%20change%20my%20payment%20plan?'
+            title='Automated support for switching plans is currently in progress. to change your plan, please email support@web3.storage.'>
+            change plan
+          </a>
+          <a className='underline'
+            href={process.env.NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL_LINK}
+            target='_blank' rel='noopener noreferrer'>
+            update billing
+          </a>
         </div>
       ) : null}
       {usage && limit ? (