[dashboard] Differentiate usage-based upgrade UI for teams vs users

Author: jankeromnes

components/dashboard/src/components/UsageBasedBillingConfig.tsx

@@ -27,6 +27,7 @@ interface Props {
 
 export default function UsageBasedBillingConfig({ attributionId }: Props) {
     const location = useLocation();
+    const { currency } = useContext(PaymentContext);
     const [showUpdateLimitModal, setShowUpdateLimitModal] = useState<boolean>(false);
     const [showBillingSetupModal, setShowBillingSetupModal] = useState<boolean>(false);
     const [stripeSubscriptionId, setStripeSubscriptionId] = useState<string | undefined>();
@@ -168,7 +169,10 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
 
     const showSpinner = !attributionId || isLoadingStripeSubscription || !!pendingStripeSubscription;
     const showBalance = !showSpinner && !(AttributionId.parse(attributionId)?.kind === "team" && !stripeSubscriptionId);
-    const showUpgradeBilling = !showSpinner && !stripeSubscriptionId;
+    const showUpgradeTeam =
+        !showSpinner && AttributionId.parse(attributionId)?.kind === "team" && !stripeSubscriptionId;
+    const showUpgradeUser =
+        !showSpinner && AttributionId.parse(attributionId)?.kind === "user" && !stripeSubscriptionId;
     const showManageBilling = !showSpinner && !!stripeSubscriptionId;
 
     const updateUsageLimit = async (newLimit: number) => {
@@ -244,15 +248,34 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
                         </div>
                     </div>
                 )}
-                {showUpgradeBilling && (
-                    <div className="flex flex-col mt-4 h-32 p-4 rounded-xl bg-gray-100 dark:bg-gray-800">
-                        <div className="uppercase text-sm text-gray-400 dark:text-gray-500">Billing</div>
-                        <div className="text-xl font-semibold flex-grow text-gray-600 dark:text-gray-400">Inactive</div>
+                {showUpgradeTeam && (
+                    <div className="flex flex-col mt-4 h-32 p-4 rounded-xl bg-gray-50 dark:bg-gray-900">
+                        <div className="uppercase text-sm text-gray-400 dark:text-gray-500">Upgrade Plan</div>
+                        <div className="text-xl font-semibold flex-grow text-gray-600 dark:text-gray-400">
+                            Pay-as-you-go
+                        </div>
                         <button className="self-end" onClick={() => setShowBillingSetupModal(true)}>
                             Upgrade Plan
                         </button>
                     </div>
                 )}
+                {showUpgradeUser && (
+                    <div className="flex flex-col mt-4 h-32 p-4 rounded-xl bg-gray-50 dark:bg-gray-900">
+                        <div className="uppercase text-sm text-gray-400 dark:text-gray-500">Current Plan</div>
+                        <div className="text-xl font-semibold flex-grow text-gray-600 dark:text-gray-400">Free</div>
+                        <div className="bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-800 -m-4 p-4 mt-4 rounded-b-xl">
+                            <div className="uppercase text-sm text-gray-400 dark:text-gray-500">Upgrade Plan</div>
+                            <div className="text-xl font-semibold flex-grow text-gray-600 dark:text-gray-400">
+                                {currency === "EUR" ? "€" : "$"}9 / month
+                            </div>
+                            <div className="flex flex-col">
+                                <button className="self-end" onClick={() => setShowBillingSetupModal(true)}>
+                                    Upgrade Plan
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                )}
                 {showManageBilling && (
                     <div className="max-w-xl flex space-x-4">
                         <div className="flex-grow flex flex-col mt-4 h-32 p-4 rounded-xl bg-gray-50 dark:bg-gray-900">