fix(dashboard-v2): fix current usage graph on portals without Stripe configured

packages/dashboard-v2/src/components/CurrentUsage/CurrentUsage.js

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import fileSize from "pretty-bytes";
 import { Link } from "gatsby";
+import cn from "classnames";
 import useSWR from "swr";
 
 import { useUser } from "../../contexts/user";
@@ -62,7 +63,9 @@ const ErrorMessage = () => (
 );
 
 export default function CurrentUsage() {
+  const { activePlan, plans } = useActivePlan();
   const { usage, error, loading } = useUsageData();
+  const nextPlan = useMemo(() => plans.find(({ tier }) => tier > activePlan?.tier), [plans, activePlan]);
   const storageUsage = size(usage.storageUsed);
   const storageLimit = size(usage.storageLimit);
   const filesUsedLabel = useMemo(() => ({ value: usage.filesUsed, unit: "files" }), [usage.filesUsed]);
@@ -89,7 +92,7 @@ export default function CurrentUsage() {
           <span>{storageLimit.text}</span>
         </div>
         <UsageGraph>
-          <GraphBar value={usage.storageUsed} limit={usage.storageLimit} label={storageUsage} />
+          <GraphBar value={usage.storageUsed} limit={usage.storageLimit} label={storageUsage} className="normal-case" />
           <GraphBar value={usage.filesUsed} limit={usage.filesLimit} label={filesUsedLabel} />
         </UsageGraph>
         <div className="flex place-content-between">
@@ -97,7 +100,10 @@ export default function CurrentUsage() {
           <span className="inline-flex place-content-between w-[37%]">
             <Link
               to="/upgrade"
-              className="text-primary underline-offset-3 decoration-dotted hover:text-primary-light hover:underline"
+              className={cn(
+                "text-primary underline-offset-3 decoration-dotted hover:text-primary-light hover:underline",
+                { invisible: !nextPlan }
+              )}
             >
               UPGRADE
             </Link>{" "}

packages/dashboard-v2/src/components/CurrentUsage/GraphBar.js

@@ -21,11 +21,11 @@ const BarLabel = styled.span.attrs({
   `}
 `;
 
-export const GraphBar = ({ value, limit, label }) => {
+export const GraphBar = ({ value, limit, label, className }) => {
   const percentage = typeof limit !== "number" || limit === 0 ? 0 : (value / limit) * 100;
 
   return (
-    <div className="relative flex items-center">
+    <div className={`relative flex items-center ${className}`}>
       <Bar $percentage={percentage}>
         <BarTip />
       </Bar>

packages/dashboard-v2/src/components/CurrentUsage/UsageGraph.js

@@ -1,9 +1,11 @@
 import styled from "styled-components";
 
+import usageGraphBg from "../../../static/images/usage-graph-bg.svg";
+
 export const UsageGraph = styled.div.attrs({
   className: "w-full my-3 grid grid-flow-row grid-rows-2",
 })`
   height: 146px;
-  background: url(/images/usage-graph-bg.svg) no-repeat;
+  background: url(${usageGraphBg}) no-repeat;
   background-size: cover;
 `;

packages/dashboard-v2/src/contexts/plans/PlansProvider.js

@@ -19,7 +19,14 @@ const aggregatePlansAndLimits = (plans, limits, { includeFreePlan }) => {
 
   // Decorate each plan with its corresponding limits data, if available.
   if (limits?.length) {
-    return sortedPlans.map((plan) => ({ ...plan, limits: limits[plan.tier] || null }));
+    return limits.map((limitsDescriptor, index) => {
+      const asssociatedPlan = sortedPlans.find((plan) => plan.tier === index) || {};
+
+      return {
+        ...asssociatedPlan,
+        limits: limitsDescriptor || null,
+      };
+    });
   }
 
   // If we don't have the limits data yet, set just return the plans.
@@ -40,10 +47,12 @@ export const PlansProvider = ({ children }) => {
     if (plansError || limitsError) {
       setLoading(false);
       setError(plansError || limitsError);
-    } else if (rawPlans) {
+    } else if (rawPlans || limits) {
       setLoading(false);
       setPlans(
-        aggregatePlansAndLimits(rawPlans, limits?.userLimits, { includeFreePlan: !settings.isSubscriptionRequired })
+        aggregatePlansAndLimits(rawPlans || [], limits?.userLimits, {
+          includeFreePlan: !settings.isSubscriptionRequired,
+        })
       );
     }
   }, [rawPlans, limits, plansError, limitsError, settings.isSubscriptionRequired]);

packages/dashboard-v2/src/hooks/useActivePlan.js

@@ -10,6 +10,7 @@ export default function useActivePlan(user) {
 
   useEffect(() => {
     if (user) {
+      console.log("setActivePlan");
       setActivePlan(plans.find((plan) => plan.tier === user.tier));
     }
   }, [plans, user]);