Add Contact Us links for non-tiered accounts #604

jbranchaud · 2021-04-30T15:43:11Z

This PR does a couple things (for #594):

Primarily, it adds 'Contact Us' messaging/links for the accounts that are still on the non-tiered legacy pricing. Because they won't be able to adjust the number of seats through the stripe billing portal, they should contact support to make those adjustments.

Secondarily, this PR:

Pulls Stripe data fetching up to a single call (before there were two calls happening per page load).
It removes the slug argument that was being passed around and into the Stripe API call because it is not used by that Next API endpoint.

Screens

A persistent info block for customers on the legacy pricing

The adjusted CTA for legacy pricing customers when they reach their seat limit

vercel · 2021-04-30T15:43:13Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

egghead-io-nextjs – ./

🔍 Inspect: https://vercel.com/eggheadio/egghead-io-nextjs/6MDjaFPjsppM6s8zv2z64zhH1igq
✅ Preview: https://egghead-io-nex-git-jb-add-contact-us-messaging-to-team-p-18718e.vercel.app

egghead-next-storybook – ./

🔍 Inspect: https://vercel.com/eggheadio/egghead-next-storybook/HmoJLz9EpKh74GGYiF8LcUs2cvuR
✅ Preview: https://egghead-next-s-git-jb-add-contact-us-messaging-to-team-p-9bbf92.vercel.app

jbranchaud · 2021-04-30T15:43:48Z

src/components/team/billing-section.tsx

+const recur = (price: any) => {
+  if (price === undefined) return ''
+
+  const {
+    recurring: {interval, interval_count},
+  } = price
+
+  if (interval === 'month' && interval_count === 3) return 'quarter'
+  if (interval === 'month' && interval_count === 6) return '6-months'
+  if (interval === 'month' && interval_count === 1) return 'month'
+  if (interval === 'year' && interval_count === 1) return 'year'
+}
+


I pulled this function out of the subscription data hook and placed it here because it was only being used here.

jbranchaud · 2021-04-30T15:44:32Z

src/components/team/billing-section.tsx

-  stripeCustomerId,
-  slug,
+  subscriptionData,
+  loading,
 }: {
-  stripeCustomerId: string
-  slug: string
+  subscriptionData: any
+  loading: boolean
 }) => {
-  const {subscriptionData, recur, loading} = useSubscriptionDetails({
-    stripeCustomerId,
-    slug,
-  })
-


Subscription data is being passed down from the singular call site instead of being requested here.

jbranchaud · 2021-04-30T15:44:58Z

src/hooks/use-subscription-data.tsx

+type SubscriptionData = {
+  portalUrl?: string
+  billingScheme: 'tiered' | 'per_unit'
+  subscription?: any
+  price?: any
+  product?: any
+  latestInvoice?: any
+  upcomingInvoice?: any
+}


I added some typing for the SubscriptionData to get some better type inference and warnings.

jbranchaud · 2021-04-30T15:46:04Z

src/hooks/use-subscription-data.tsx

+  const [
+    subscriptionData,
+    setSubscriptionData,
+  ] = React.useState<SubscriptionData>({billingScheme: 'per_unit'})


The billing scheme will always be either 'tiered' or 'per_unit'. I default it to this, but Stripe should always tell us one or the other.

jbranchaud · 2021-04-30T15:46:49Z

src/pages/api/stripe/billing/session.ts

@@ -30,6 +30,7 @@ const StripeCheckoutSession = async (
      if (subscription) {
        const price = get(first(subscription.items.data), 'price')
        const latestInvoice = get(subscription, 'latest_invoice')
+        const billingScheme = get(subscription, 'plan.billing_scheme')


Extract billing scheme as a top-level value for ease of access in a couple places for conditional rendering.

jbranchaud · 2021-04-30T15:47:02Z

src/pages/team/index.tsx

-type SubscriptionData = {
-  portalUrl: string | undefined
-}


Unused type

jbranchaud · 2021-04-30T15:47:37Z

src/pages/team/index.tsx

-  const {accountSlug, stripeCustomerId} = teamData
-  const [
-    subscriptionData,
-    setSubscriptionData,
-  ] = React.useState<SubscriptionData>({} as SubscriptionData)
-
-  React.useEffect(() => {
-    if (stripeCustomerId) {
-      axios
-        .get(`/api/stripe/billing/session`, {
-          params: {
-            customer_id: stripeCustomerId,
-            account_slug: accountSlug,
-          },
-        })
-        .then(({data}) => {
-          if (data) {
-            setSubscriptionData(data)
-          }
-        })
-    }
-  }, [stripeCustomerId, accountSlug])


This was the duplicate Stripe API call that has been pulled up to a single call site.

jbranchaud · 2021-04-30T15:48:16Z

src/pages/team/index.tsx

-        </span>
-        {subscriptionData?.portalUrl && (
-          <Link href={subscriptionData.portalUrl}>
+      {billingScheme === 'tiered' && (


This second adjusts the copy and CTA of the At Capacity Notice based on the billing scheme.

jbranchaud · 2021-04-30T15:48:59Z

src/pages/team/index.tsx

+          {!subscriptionDataLoading &&
+            subscriptionData.billingScheme === 'per_unit' && (


This section displays an additional note about adding seats to your account based IF this account is on legacy pricing.

There were multiple components in the Team page tree that was firing off the API call that requests subscription data from Stripe. This pulls the call up so that it is made a single time and then passes the needed data down.

jbranchaud · 2021-04-30T20:00:27Z

src/hooks/use-subscription-data.tsx

+export const recur = (price: any) => {
+  if (price === undefined) return ''
+
+  const {
+    recurring: {interval, interval_count},
+  } = price
+
+  if (interval === 'month' && interval_count === 3) return 'quarter'
+  if (interval === 'month' && interval_count === 6) return '6-months'
+  if (interval === 'month' && interval_count === 1) return 'month'
+  if (interval === 'year' && interval_count === 1) return 'year'
+}


Exporting recur instead of passing it around as a prop since it is a static concept.

joelhooks

I think the "manage your account" needs to be removed for legacy accounts too because the portal is WEIRD for them.

jbranchaud commented Apr 30, 2021

View reviewed changes

jbranchaud requested review from theianjones and joelhooks and removed request for theianjones April 30, 2021 15:49

jbranchaud added 3 commits April 30, 2021 14:21

Pull Stripe subscription data call up to index

e964b96

There were multiple components in the Team page tree that was firing off the API call that requests subscription data from Stripe. This pulls the call up so that it is made a single time and then passes the needed data down.

Remove slug which isn't being used

e65fbc8

Display Contact Us links for non-tiered accounts

7a770d8

jbranchaud force-pushed the jb/add-contact-us-messaging-to-team-page branch from 212caac to 7a770d8 Compare April 30, 2021 19:28

vercel bot had a problem deploying to Preview – egghead-io-nextjs April 30, 2021 19:28 Failure

vercel bot deployed to Preview – egghead-next-storybook April 30, 2021 19:28 View deployment

Export recur function for both call sites

2916b34

vercel bot deployed to Preview – egghead-io-nextjs April 30, 2021 19:58 View deployment

vercel bot deployed to Preview – egghead-next-storybook April 30, 2021 19:58 View deployment

jbranchaud commented Apr 30, 2021

View reviewed changes

joelhooks approved these changes May 4, 2021

View reviewed changes

Merge branch 'main' into jb/add-contact-us-messaging-to-team-page

af0ceb5

vercel bot deployed to Preview – egghead-next-storybook May 4, 2021 17:55 View deployment

vercel bot deployed to Preview – egghead-io-nextjs May 4, 2021 17:55 View deployment

kodiakhq bot merged commit 1647ecf into main May 4, 2021

kodiakhq bot deleted the jb/add-contact-us-messaging-to-team-page branch May 4, 2021 18:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Contact Us links for non-tiered accounts #604

Add Contact Us links for non-tiered accounts #604

jbranchaud commented Apr 30, 2021 •

edited

Loading

vercel bot commented Apr 30, 2021 •

edited

Loading

jbranchaud Apr 30, 2021

jbranchaud Apr 30, 2021

jbranchaud Apr 30, 2021

jbranchaud Apr 30, 2021

jbranchaud Apr 30, 2021

jbranchaud Apr 30, 2021

jbranchaud Apr 30, 2021

jbranchaud Apr 30, 2021

jbranchaud Apr 30, 2021

jbranchaud Apr 30, 2021

joelhooks left a comment

		{!subscriptionDataLoading &&
		subscriptionData.billingScheme === 'per_unit' && (

Add Contact Us links for non-tiered accounts #604

Add Contact Us links for non-tiered accounts #604

Conversation

jbranchaud commented Apr 30, 2021 • edited Loading

Screens

vercel bot commented Apr 30, 2021 • edited Loading

egghead-io-nextjs – ./

egghead-next-storybook – ./

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joelhooks left a comment

Choose a reason for hiding this comment

jbranchaud commented Apr 30, 2021 •

edited

Loading

vercel bot commented Apr 30, 2021 •

edited

Loading