Add Contact Us links for non-tiered accounts

src/components/team/billing-section.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
-import useSubscriptionDetails from 'hooks/use-subscription-data'
 import get from 'lodash/get'
 import {format} from 'date-fns'
 import Link from 'next/link'
 import {track} from '../../utils/analytics'
 import isEmpty from 'lodash/isEmpty'
+import {recur} from 'hooks/use-subscription-data'
 
 const formatAmountWithCurrency = (
   amountInCents: number,
@@ -20,17 +20,12 @@ const formatAmountWithCurrency = (
 }
 
 const BillingSection = ({
-  stripeCustomerId,
-  slug,
+  subscriptionData,
+  loading,
 }: {
-  stripeCustomerId: string
-  slug: string
+  subscriptionData: any
+  loading: boolean
 }) => {
-  const {subscriptionData, recur, loading} = useSubscriptionDetails({
-    stripeCustomerId,
-    slug,
-  })
-
   if (subscriptionData === undefined) return null
 
   const currency = get(
@@ -76,8 +71,6 @@ const BillingSection = ({
     get(subscriptionData, 'subscription.status') === 'active' &&
     !get(subscriptionData, 'subscription.canceled_at')
 
-  // Figure out what to display for the Next Billing Date.
-  //
   // If it is too early in the billing period or if the subscription was just
   // created, there may not be an upcoming invoice generated yet. In that case,
   // we see the subscription is active and display 'Pending' for now.

src/components/users/subscription-details.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import {track} from '../../utils/analytics'
 import {useViewer} from 'context/viewer-context'
 import get from 'lodash/get'
-import useSubscriptionDetails from 'hooks/use-subscription-data'
+import useSubscriptionDetails, {recur} from 'hooks/use-subscription-data'
 
 type SubscriptionDetailsProps = {
   stripeCustomerId: string
@@ -15,9 +15,8 @@ const SubscriptionDetails: React.FunctionComponent<SubscriptionDetailsProps> = (
   slug,
 }) => {
   const {viewer} = useViewer()
-  const {subscriptionData, recur, loading} = useSubscriptionDetails({
+  const {subscriptionData, loading} = useSubscriptionDetails({
     stripeCustomerId,
-    slug,
   })
 
   const subscriptionName = subscriptionData && subscriptionData.product?.name

src/hooks/use-subscription-data.tsx

@@ -1,27 +1,39 @@
 import * as React from 'react'
 import axios from 'axios'
 
+type SubscriptionData = {
+  portalUrl?: string
+  billingScheme: 'tiered' | 'per_unit'
+  subscription?: any
+  price?: any
+  product?: any
+  latestInvoice?: any
+  upcomingInvoice?: any
+}
+
+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'
+}
+
 const useSubscriptionDetails = ({
   stripeCustomerId,
-  slug,
 }: {
-  stripeCustomerId: string
-  slug: string
-}) => {
+  stripeCustomerId?: string
+}): {subscriptionData: SubscriptionData; loading: boolean} => {
   const [loading, setLoading] = React.useState<boolean>(true)
-  const [subscriptionData, setSubscriptionData] = React.useState<any>()
-  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'
-  }
+  const [
+    subscriptionData,
+    setSubscriptionData,
+  ] = React.useState<SubscriptionData>({billingScheme: 'per_unit'})
 
   React.useEffect(() => {
     if (stripeCustomerId) {
@@ -31,7 +43,6 @@ const useSubscriptionDetails = ({
         .get(`/api/stripe/billing/session`, {
           params: {
             customer_id: stripeCustomerId,
-            account_slug: slug,
           },
         })
         .then(({data}) => {
@@ -43,9 +54,9 @@ const useSubscriptionDetails = ({
           setLoading(false)
         })
     }
-  }, [stripeCustomerId, slug])
+  }, [stripeCustomerId])
 
-  return {subscriptionData, recur, loading}
+  return {subscriptionData, loading}
 }
 
 export default useSubscriptionDetails

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')
 
         const {product: product_id} = price
 
@@ -47,6 +48,7 @@ const StripeCheckoutSession = async (
 
         res.status(200).json({
           portalUrl: session.url,
+          billingScheme,
           subscription,
           price,
           product,

src/pages/team/index.tsx

@@ -4,14 +4,14 @@ import Link from 'next/link'
 import LoginRequired from '../../components/login-required'
 import {useRouter} from 'next/router'
 import CopyToClipboard from '../../components/team/copy-to-clipboard'
-import axios from 'axios'
 import {track} from 'utils/analytics'
 import {loadTeams} from 'lib/teams'
 import TeamName from '../../components/team/team-name'
 import {getTokenFromCookieHeaders} from 'utils/auth'
 import {isEmpty, find} from 'lodash'
 import BillingSection from 'components/team/billing-section'
 import MemberTable from 'components/team/member-table'
+import useSubscriptionDetails from 'hooks/use-subscription-data'
 
 export type TeamData = {
   accountId: number
@@ -45,35 +45,16 @@ const TeamComposition = ({
   }
 }
 
-type SubscriptionData = {
-  portalUrl: string | undefined
-}
-
-const AtCapacityNotice = ({teamData}: {teamData: TeamData}) => {
-  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])
-
-  if (!teamData.isFull) {
+const AtCapacityNotice = ({
+  isFull,
+  billingPortalUrl,
+  billingScheme,
+}: {
+  isFull: boolean
+  billingPortalUrl: string | undefined
+  billingScheme: 'tiered' | 'per_unit'
+}) => {
+  if (!isFull) {
     return null
   }
 
@@ -98,24 +79,44 @@ const AtCapacityNotice = ({teamData}: {teamData: TeamData}) => {
           />
         </svg>
       </span>
-      <div className="ml-8 flex flex-col space-y-2 p-2">
-        <span>
-          Your team account is full. You can add more seats to your account
-          through the Stripe Billing Portal.
-        </span>
-        {subscriptionData?.portalUrl && (
-          <Link href={subscriptionData.portalUrl}>
+      {billingScheme === 'tiered' && (
+        <div className="ml-8 flex flex-col space-y-2 p-2">
+          <span>
+            Your team account is full. You can add more seats to your account
+            through the Stripe Billing Portal.
+          </span>
+          {billingPortalUrl && (
+            <Link href={billingPortalUrl}>
+              <a
+                onClick={() => {
+                  track(`clicked manage membership`)
+                }}
+                className="transition-all duration-150 ease-in-out font-semibold rounded-md dark:text-yellow-400 dark:hover:text-yellow-300"
+              >
+                Visit Stripe Billing Portal
+              </a>
+            </Link>
+          )}
+        </div>
+      )}
+      {billingScheme === 'per_unit' && (
+        <div className="ml-8 flex flex-col space-y-2 p-2">
+          <span>
+            Your team account is full. Our support team can help you add more
+            seats to your account.
+          </span>
+          <Link href="mailto:[email protected]">
             <a
               onClick={() => {
-                track(`clicked manage membership`)
+                track(`clicked contact us for account at capacity`)
               }}
               className="transition-all duration-150 ease-in-out font-semibold rounded-md dark:text-yellow-400 dark:hover:text-yellow-300"
             >
-              Visit Stripe Billing Portal
+              Contact Us
             </a>
           </Link>
-        )}
-      </div>
+        </div>
+      )}
     </div>
   )
 }
@@ -137,6 +138,13 @@ const Team = ({team: teamData}: TeamPageProps) => {
     }
   }, [teamDataNotAvailable])
 
+  const {
+    subscriptionData,
+    loading: subscriptionDataLoading,
+  } = useSubscriptionDetails({
+    stripeCustomerId: teamData?.stripeCustomerId,
+  })
+
   if (teamData === undefined) return null
 
   return (
@@ -165,7 +173,11 @@ const Team = ({team: teamData}: TeamPageProps) => {
             label={true}
           />
         </div>
-        <AtCapacityNotice teamData={teamData} />
+        <AtCapacityNotice
+          isFull={teamData.isFull}
+          billingPortalUrl={subscriptionData.portalUrl}
+          billingScheme={subscriptionData.billingScheme}
+        />
         <h2 className="font-semibold text-xl mt-16">
           Current Team Members{' '}
           <TeamComposition
@@ -179,9 +191,45 @@ const Team = ({team: teamData}: TeamPageProps) => {
           setMembers={setMembers}
         />
         <BillingSection
-          stripeCustomerId={teamData.stripeCustomerId}
-          slug={teamData.accountSlug}
+          subscriptionData={subscriptionData}
+          loading={subscriptionDataLoading}
         />
+        {!subscriptionDataLoading &&
+          subscriptionData.billingScheme === 'per_unit' && (
+            <div
+              className="relative px-4 py-1 mt-4 mb-4 leading-normal text-blue-700 bg-blue-100 dark:text-blue-100 dark:bg-blue-800 rounded"
+              role="alert"
+            >
+              <span className="absolute inset-y-0 left-0 flex items-center ml-4">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-6 w-6"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
+                  />
+                </svg>
+              </span>
+              <div className="ml-8 flex flex-col space-y-2 p-2">
+                <span>
+                  Is the size of your team changing?{' '}
+                  <a
+                    className="transition-all duration-150 ease-in-out underline font-semibold rounded-md"
+                    href="mailto:[email protected]"
+                  >
+                    Contact us
+                  </a>{' '}
+                  at anytime to adjust the number of seats for your account.
+                </span>
+              </div>
+            </div>
+          )}
       </div>
     </LoginRequired>
   )