From 0604198ca28aae92b232505330a4e554affcb09d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Tue, 29 Mar 2022 16:05:20 +0200
Subject: [PATCH] feat(dashboard-v2): make /upgrade page compliant with portal
 settings

---
 .../src/components/Slider/Slider.js           |  3 +-
 packages/dashboard-v2/src/pages/upgrade.js    | 35 ++++++++++++++-----
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/packages/dashboard-v2/src/components/Slider/Slider.js b/packages/dashboard-v2/src/components/Slider/Slider.js
index 973b9941..33c3bc2a 100644
--- a/packages/dashboard-v2/src/components/Slider/Slider.js
+++ b/packages/dashboard-v2/src/components/Slider/Slider.js
@@ -40,7 +40,8 @@ const Slider = ({ slides, breakpoints, scrollerClassName, className }) => {
   );
 
   React.useEffect(() => {
-    const maxIndex = slides.length - visibleSlides;
+    // Prevent negative values for activeIndex.
+    const maxIndex = Math.max(slides.length - visibleSlides, 0);
 
     // Make sure to not scroll too far when screen size changes.
     if (activeIndex > maxIndex) {
diff --git a/packages/dashboard-v2/src/pages/upgrade.js b/packages/dashboard-v2/src/pages/upgrade.js
index 894c8273..8e47472e 100644
--- a/packages/dashboard-v2/src/pages/upgrade.js
+++ b/packages/dashboard-v2/src/pages/upgrade.js
@@ -10,13 +10,11 @@ import { Panel } from "../components/Panel";
 import Slider from "../components/Slider/Slider";
 import { CheckmarkIcon } from "../components/Icons";
 import { Button } from "../components/Button";
+import { usePortalSettings } from "../contexts/portal-settings";
+import { Alert } from "../components/Alert";
+import HighlightedLink from "../components/HighlightedLink";
 
-const SLIDER_BREAKPOINTS = [
-  {
-    name: "xl",
-    scrollable: true,
-    visibleSlides: 4,
-  },
+const PAID_PORTAL_BREAKPOINTS = [
   {
     name: "lg",
     scrollable: true,
@@ -33,6 +31,15 @@ const SLIDER_BREAKPOINTS = [
   },
 ];
 
+const FREE_PORTAL_BREAKPOINTS = [
+  {
+    name: "xl",
+    scrollable: true,
+    visibleSlides: 4,
+  },
+  ...PAID_PORTAL_BREAKPOINTS,
+];
+
 const PlanSummaryItem = ({ children }) => (
   <li className="flex items-start gap-1 my-2">
     <CheckmarkIcon size={32} className="text-primary shrink-0" />
@@ -68,6 +75,7 @@ const localizedNumber = (value) => value.toLocaleString();
 const PlansSlider = () => {
   const { user, error: userError } = useUser();
   const { plans, loading, activePlan, error: plansError } = useActivePlan(user);
+  const { settings } = usePortalSettings();
 
   if (userError || plansError) {
     return (
@@ -80,6 +88,18 @@ const PlansSlider = () => {
 
   return (
     <div className="w-full mb-24">
+      {settings.isSubscriptionRequired && !activePlan && (
+        <Alert $variant="info" className="mb-6">
+          <p className="font-semibold mt-0">This Skynet portal requires a paid subscription.</p>
+          <p>
+            If you're not ready for that yet, you can use your account on{" "}
+            <HighlightedLink as="a" href="https://skynetfree.net">
+              SkynetFree.net
+            </HighlightedLink>{" "}
+            to store up to 100GB for free.
+          </p>
+        </Alert>
+      )}
       {!loading && (
         <Slider
           slides={plans.map((plan) => {
@@ -114,8 +134,7 @@ const PlansSlider = () => {
               </Panel>
             );
           })}
-          breakpoints={SLIDER_BREAKPOINTS}
-          scrollerClassName="gap-4 xl:gap-8"
+          breakpoints={settings.isSubscriptionRequired ? PAID_PORTAL_BREAKPOINTS : FREE_PORTAL_BREAKPOINTS}
           className="px-8 sm:px-4 md:px-0 lg:px-0"
         />
       )}