fix: portal-aware amount of free storage on signup page

packages/dashboard-v2/src/contexts/portal-settings/PortalSettingsContext.js

@@ -2,8 +2,8 @@ import { createContext } from "react";
 
 export const defaultSettings = {
   areAccountsEnabled: false,
-  isAuthenticationRequired: true,
+  isAuthenticationRequired: false,
-  isSubscriptionRequired: true,
+  isSubscriptionRequired: false,
 };
 
 export const PortalSettingsContext = createContext(defaultSettings);

packages/dashboard-v2/src/pages/auth/signup.js

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { navigate } from "gatsby";
+import bytes from "pretty-bytes";
 
 import AuthLayout from "../../layouts/AuthLayout";
 
@@ -7,13 +8,21 @@ import { Alert } from "../../components/Alert";
 import HighlightedLink from "../../components/HighlightedLink";
 import { SignUpForm } from "../../components/forms/SignUpForm";
 import { usePortalSettings } from "../../contexts/portal-settings";
+import { PlansProvider, usePlans } from "../../contexts/plans";
 
-const FreePortalHeader = () => (
+const FreePortalHeader = () => {
+  const { plans } = usePlans();
+
+  const freePlan = plans.find(({ price }) => price === 0);
+  const freeStorage = freePlan ? bytes(freePlan.limits?.storageLimit, { binary: true }) : null;
+
+  return (
     <div className="mt-4 mb-8 font-sans">
       <h3>Create your free account</h3>
-    <p className="font-light text-lg">Includes 100 GB storage at basic speed</p>
+      {freeStorage && <p className="font-light text-lg">Includes {freeStorage} storage at basic speed</p>}
     </div>
-);
+  );
+};
 
 const PaidPortalHeader = () => (
   <div className="mt-4 mb-8 font-sans">
@@ -47,6 +56,7 @@ const SignUpPage = () => {
   }, [state, settings.isSubscriptionRequired]);
 
   return (
+    <PlansProvider>
       <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
         <div className="mb-4 md:mb-16">
           <img src="/images/logo-black-text.svg" alt="Skynet" />
@@ -80,6 +90,7 @@ const SignUpPage = () => {
           Already have an account? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>
         </p>
       </div>
+    </PlansProvider>
   );
 };