feat: add a link to the customer self-service billing portal (#84)

This will allow customers to change their billing details. Might be
worth rethinking where this link goes, but @heyjay44 and I think this
makes sense for now.

<img width="1247" alt="Screenshot 2024-01-18 at 4 41 02 PM"
src="https://github.com/web3-storage/console/assets/1113/2c479b71-b766-41db-909a-17690df722f3">

.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

.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

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:[email protected]?subject=How%20to%20change%20my%20payment%20plan?' title='Automated support for switching plans is currently in progress. to change your plan, please email [email protected].'>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:[email protected]?subject=How%20to%20change%20my%20payment%20plan?'
+            title='Automated support for switching plans is currently in progress. to change your plan, please email [email protected].'>
+            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 ? (