[Storage] Restricted mode banner and flow

packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx

@@ -895,6 +895,7 @@ const FilesList = ({ isShared = false }: Props) => {
                       onClick={() => setCreateFolderModalOpen(true)}
                       variant="outline"
                       size="large"
+                      disabled={accountRestricted}
                     >
                       <PlusCircleIcon />
                       <span className={classes.buttonWrap}>
@@ -906,6 +907,7 @@ const FilesList = ({ isShared = false }: Props) => {
                       onClick={() => setIsUploadModalOpen(true)}
                       variant="outline"
                       size="large"
+                      disabled={accountRestricted}
                     >
                       <UploadIcon />
                       <span className={classes.buttonWrap}>

packages/storage-ui/src/Components/Elements/RestrictedModeBanner.tsx

@@ -0,0 +1,49 @@
+import { Typography, Button, useHistory } from "@chainsafe/common-components"
+import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme"
+import { Trans } from "@lingui/macro"
+import React from "react"
+import { CSSTheme } from "../../Themes/types"
+import { ROUTE_LINKS } from "../StorageRoutes"
+
+const useStyles = makeStyles(
+  ({ breakpoints, constants, palette }: CSSTheme) => {
+    return createStyles({
+      accountRestrictedNotification: {
+        position: "fixed",
+        bottom: 0,
+        backgroundColor: palette.additional["gray"][10],
+        color: palette.additional["gray"][1],
+        padding: `${constants.generalUnit * 2}px ${constants.generalUnit * 3}px`,
+        left: 0,
+        width: "100vw",
+        [breakpoints.up("md")]: {
+          left: `${constants.navWidth}px`,
+          width:`calc(100vw - ${constants.navWidth}px)`,
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        }
+      }
+    })
+  }
+)
+
+const RestrictedModeBanner = () => {
+  const classes = useStyles()
+  const { desktop } = useThemeSwitcher()
+  const { redirect } = useHistory()
+
+  return (
+    <div className={classes.accountRestrictedNotification}>
+      <Typography variant={desktop ? "body1" : "body2"}>
+        <Trans>You&apos;ve got a payment due. Until you&apos;ve settled up, we&apos;ve placed your account in restricted mode</Trans>
+      </Typography>
+      <Button
+        onClick={() => redirect(ROUTE_LINKS.SettingsPath("plan"))}
+        fullsize={!desktop}>
+        <Trans>Go to Payments</Trans>
+      </Button>
+    </div>)
+}
+
+export default RestrictedModeBanner

packages/storage-ui/src/Components/Modules/FilesList/FilesList.tsx

@@ -44,6 +44,8 @@ import MimeMatcher from "../../../Utils/MimeMatcher"
 import { useLanguageContext } from "../../../Contexts/LanguageContext"
 import { ISelectedFile, useFileBrowser } from "../../../Contexts/FileBrowserContext"
 import SurveyBanner from "../SurveyBanner"
+import { useStorageApi } from "../../../Contexts/StorageApiContext"
+import RestrictedModeBanner from "../../Elements/RestrictedModeBanner"
 
 interface IStyleProps {
   themeKey: string
@@ -69,6 +71,10 @@ const useStyles = makeStyles(
           minHeight: `calc(100vh - ${Number(constants.contentTopPadding)}px)`,
           "&.droppable": {
             borderColor: palette.primary.main
+          },
+          "&.bottomBanner": {
+            minHeight: `calc(100vh - ${Number(constants.contentTopPadding) + Number(constants.bottomBannerHeight)}px)`,
+            paddingBottom: constants.bottomBannerHeight
           }
         }
       },
@@ -287,7 +293,7 @@ const sortFoldersFirst = (a: FileSystemItemType, b: FileSystemItemType) =>
 
 const FilesList = () => {
   const { themeKey, desktop } = useThemeSwitcher()
-
+  const { accountRestricted } = useStorageApi()
   const {
     heading,
     controls = true,
@@ -566,6 +572,8 @@ const FilesList = () => {
     <article
       className={clsx(classes.root, {
         droppable: isOverUploadable && allowDropUpload
+      }, {
+        bottomBanner: accountRestricted
       })}
       ref={!isUploadModalOpen && allowDropUpload ? dropBrowserRef : null}
     >
@@ -605,6 +613,7 @@ const FilesList = () => {
                 onClick={() => setCreateFolderModalOpen(true)}
                 variant="outline"
                 size="large"
+                disabled={accountRestricted}
               >
                 <PlusCircleIcon />
                 <span>
@@ -616,6 +625,7 @@ const FilesList = () => {
                 onClick={() => setIsUploadModalOpen(true)}
                 variant="outline"
                 size="large"
+                disabled={accountRestricted}
               >
                 <UploadIcon />
                 <span>
@@ -654,6 +664,7 @@ const FilesList = () => {
                           size="large"
                           className={classes.mobileButton}
                           fullsize
+                          disabled={accountRestricted}
                         >
                           <PlusCircleIcon />
                           <span>
@@ -669,6 +680,7 @@ const FilesList = () => {
                           variant="primary"
                           fullsize
                           className={classes.mobileButton}
+                          disabled={accountRestricted}
                         >
                           <UploadIcon />
                           <span>
@@ -1018,11 +1030,9 @@ const FilesList = () => {
           </>
         )
       }
-      {/* 
-      <FileInfoModal
-        fileInfoPath={fileInfoPath}
-        close={() => setFileInfoPath(undefined)}
-      /> */}
+      {accountRestricted &&
+        <RestrictedModeBanner />
+      }
     </article>
   )
 }

packages/storage-ui/src/Components/Pages/BucketPage.tsx

@@ -22,7 +22,7 @@ import { DISMISSED_SURVEY_KEY } from "../Modules/SurveyBanner"
 
 const BucketPage: React.FC<IFileBrowserModuleProps> = () => {
   const { storageBuckets, uploadFiles, uploadsInProgress, getStorageSummary, downloadFile } = useStorage()
-  const { storageApiClient } = useStorageApi()
+  const { storageApiClient, accountRestricted } = useStorageApi()
   const { addToast } = useToasts()
   const [loadingCurrentPath, setLoadingCurrentPath] = useState(false)
   const [pathContents, setPathContents] = useState<FileSystemItem[]>([])
@@ -160,9 +160,19 @@ const BucketPage: React.FC<IFileBrowserModuleProps> = () => {
 
   const handleUploadOnDrop = useCallback(async (files: File[], fileItems: DataTransferItemList, path: string) => {
     if (!bucket) return
+
+    if (accountRestricted) {
+      addToast({
+        type:"error",
+        title: t`Uploads disabled`,
+        subtitle: t`Oops! You need to pay for this month to upload more content.`
+      })
+      return
+    }
+
     let hasFolder = false
     for (let i = 0; i < files.length; i++) {
-      if (fileItems[i].webkitGetAsEntry().isDirectory) {
+      if (fileItems[i].webkitGetAsEntry()?.isDirectory) {
         hasFolder = true
       }
     }
@@ -176,7 +186,7 @@ const BucketPage: React.FC<IFileBrowserModuleProps> = () => {
         .then(() => refreshContents())
         .catch(console.error)
     }
-  }, [addToast, uploadFiles, bucket, refreshContents])
+  }, [bucket, accountRestricted, addToast, uploadFiles, refreshContents])
 
   const viewFolder = useCallback((toView: ISelectedFile) => {
     const fileSystemItem = pathContents.find(f => f.cid === toView.cid && f.name === toView.name)

packages/storage-ui/src/Components/Pages/BucketsPage.tsx

@@ -20,6 +20,8 @@ import CustomModal from "../Elements/CustomModal"
 import { Form, FormikProvider, useFormik } from "formik"
 import { bucketNameValidator } from "../../Utils/validationSchema"
 import { useCallback } from "react"
+import RestrictedModeBanner from "../Elements/RestrictedModeBanner"
+import { useStorageApi } from "../../Contexts/StorageApiContext"
 
 export const desktopGridSettings = "3fr 190px 70px !important"
 export const mobileGridSettings = "3fr 190px 70px !important"
@@ -115,6 +117,7 @@ const useStyles = makeStyles(({ breakpoints, animation, constants, typography }:
 const BucketsPage = () => {
   const classes = useStyles()
   const { storageBuckets, createBucket, refreshBuckets } = useStorage()
+  const { accountRestricted } = useStorageApi()
   const [isCreateBucketModalOpen, setIsCreateBucketModalOpen] = useState(false)
   const bucketsToShow = useMemo(() =>     storageBuckets.filter(b => b.status === "created"), [storageBuckets])
   const bucketNameValidationSchema = useMemo(
@@ -168,6 +171,7 @@ const BucketsPage = () => {
             data-cy="button-create-bucket"
             onClick={() => setIsCreateBucketModalOpen(true)}
             variant="outline"
+            disabled={accountRestricted}
           >
             <PlusIcon />
             <Trans>Create Bucket</Trans>
@@ -211,6 +215,9 @@ const BucketsPage = () => {
             )}
         </TableBody>
       </Table>
+      {accountRestricted &&
+        <RestrictedModeBanner />
+      }
       <CustomModal
         active={isCreateBucketModalOpen}
         className={classes.createBucketModal}

packages/storage-ui/src/Components/Pages/CidsPage.tsx

@@ -7,6 +7,8 @@ import CidRow from "../Elements/CidRow"
 import { CSSTheme } from "../../Themes/types"
 import AddCIDModal from "../Modules/AddCIDModal"
 import { PinStatus } from "@chainsafe/files-api-client"
+import RestrictedModeBanner from "../Elements/RestrictedModeBanner"
+import { useStorageApi } from "../../Contexts/StorageApiContext"
 
 export const desktopGridSettings = "3fr 180px 120px 120px 140px 70px !important"
 export const mobileGridSettings = "3fr 180px 120px 120px 140px 70px !important"
@@ -56,6 +58,7 @@ type SortDirection = "ascend" | "descend"
 const CidsPage = () => {
   const classes = useStyles()
   const { pins } = useStorage()
+  const { accountRestricted } = useStorageApi()
   const [addCIDOpen, setAddCIDOpen] = useState(false)
   const [sortColumn, setSortColumn] = useState<SortColumn>("date_uploaded")
   const [sortDirection, setSortDirection] = useState<SortDirection>("descend")
@@ -112,6 +115,7 @@ const CidsPage = () => {
               onClick={() => setAddCIDOpen(true)}
               variant="outline"
               size="large"
+              disabled={accountRestricted}
             >
               <PlusIcon />
               <span>
@@ -184,6 +188,9 @@ const CidsPage = () => {
         close={() => setAddCIDOpen(false)}
         modalOpen={addCIDOpen}
       />
+      {accountRestricted &&
+        <RestrictedModeBanner />
+      }
     </>
   )
 }

packages/storage-ui/src/Contexts/BillingContext.tsx

@@ -58,9 +58,7 @@ const BillingContext = React.createContext<IBillingContext | undefined>(
 )
 
 const BillingProvider = ({ children }: BillingContextProps) => {
-  const { storageApiClient, isLoggedIn
-    // accountRestricted 
-  } = useStorageApi()
+  const { storageApiClient, isLoggedIn, accountRestricted } = useStorageApi()
   const { redirect } = useHistory()
   const { addNotification, removeNotification } = useNotifications()
   const { refreshBuckets } = useStorage()
@@ -69,7 +67,7 @@ const BillingProvider = ({ children }: BillingContextProps) => {
   const [invoices, setInvoices] = useState<InvoiceResponse[] | undefined>()
   const isPendingInvoice = useMemo(() => currentSubscription?.status === "pending_update", [currentSubscription])
   const openInvoice = useMemo(() => invoices?.find((i) => i.status === "open"), [invoices])
-  // const [restrictedNotification, setRestrictedNotification] = useState<string | undefined>()
+  const [restrictedNotification, setRestrictedNotification] = useState<string | undefined>()
   const [unpaidInvoiceNotification, setUnpaidInvoiceNotification] = useState<string | undefined>()
   const [cardExpiringNotification, setCardExpiringNotification] = useState<string | undefined>()
   const [isBillingEnabled, setIsBillingEnabled] = useState(false)
@@ -99,19 +97,19 @@ const BillingProvider = ({ children }: BillingContextProps) => {
       .catch(console.error)
   }, [storageApiClient, isLoggedIn])
 
-  // useEffect(() => {
-  //   if (accountRestricted && !restrictedNotification) {
-  //     const notif = addNotification({
-  //       createdAt: dayjs().unix(),
-  //       title: t`Account is restricted`,
-  //       onClick: () => redirect(ROUTE_LINKS.SettingsPath("plan"))
-  //     })
-  //     setRestrictedNotification(notif)
-  //   } else if (accountRestricted === false && restrictedNotification) {
-  //     removeNotification(restrictedNotification)
-  //     setRestrictedNotification(undefined)
-  //   }
-  // }, [accountRestricted, addNotification, redirect, removeNotification, restrictedNotification])
+  useEffect(() => {
+    if (accountRestricted && !restrictedNotification) {
+      const notif = addNotification({
+        createdAt: dayjs().unix(),
+        title: t`Account is restricted`,
+        onClick: () => redirect(ROUTE_LINKS.SettingsPath("plan"))
+      })
+      setRestrictedNotification(notif)
+    } else if (accountRestricted === false && restrictedNotification) {
+      removeNotification(restrictedNotification)
+      setRestrictedNotification(undefined)
+    }
+  }, [accountRestricted, addNotification, redirect, removeNotification, restrictedNotification])
 
   useEffect(() => {
     if (!!openInvoice && !unpaidInvoiceNotification) {

packages/storage-ui/src/Contexts/StorageApiContext.tsx

@@ -69,6 +69,7 @@ type StorageApiContext = {
   logout: () => void
   status: DirectAuthContextStatus
   resetStatus(): void
+  accountRestricted?: boolean
 }
 
 const StorageApiContext = React.createContext<StorageApiContext | undefined>(undefined)
@@ -103,6 +104,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora
   const [decodedRefreshToken, setDecodedRefreshToken] = useState<
   { exp: number; enckey?: string; mps?: string; uuid: string } | undefined
   >(undefined)
+  const [accountRestricted, setAccountRestricted] = useState(false)
 
   // returning user
   const isReturningUserLocal = localStorageGet(isReturningUserStorageKey)
@@ -228,6 +230,22 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [canUseLocalStorage])
 
+
+  useEffect(() => {
+    if (accessToken && accessToken.token && storageApiClient) {
+      storageApiClient?.setToken(accessToken.token)
+      const decodedAccessToken = jwtDecode<{ perm: { secured?: string; files?: string } }>(
+        accessToken.token
+      )
+
+      if (decodedAccessToken.perm.files === "restricted") {
+        setAccountRestricted(true)
+      } else {
+        setAccountRestricted(false)
+      }
+    }
+  }, [accessToken, storageApiClient])
+
   const selectWallet = async () => {
     if (onboard && !isReady) {
       let walletSelected = !!wallet
@@ -259,12 +277,6 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora
     }
   }, [refreshToken])
 
-  useEffect(() => {
-    if (accessToken && accessToken.token && storageApiClient) {
-      storageApiClient?.setToken(accessToken.token)
-    }
-  }, [accessToken, storageApiClient])
-
   const isLoggedIn = () => {
     if (isLoadingUser) {
       return undefined
@@ -409,7 +421,8 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora
         userInfo,
         selectWallet,
         resetAndSelectWallet,
-        logout
+        logout,
+        accountRestricted
       }}
     >
       {children}