From 73cfc3a43b785f2e543a46c5ddf631b9d2499486 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Sat, 30 Sep 2023 14:22:11 +0800
Subject: [PATCH] Account limits UX test

---
 packages/web/pages/settings/account.tsx | 41 ++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/packages/web/pages/settings/account.tsx b/packages/web/pages/settings/account.tsx
index 3e34236aa..6c5d26a56 100644
--- a/packages/web/pages/settings/account.tsx
+++ b/packages/web/pages/settings/account.tsx
@@ -16,7 +16,9 @@ import { Button } from '../../components/elements/Button'
 import { useValidateUsernameQuery } from '../../lib/networking/queries/useValidateUsernameQuery'
 import { updateUserMutation } from '../../lib/networking/mutations/updateUserMutation'
 import { updateUserProfileMutation } from '../../lib/networking/mutations/updateUserProfileMutation'
-import { styled } from '../../components/tokens/stitches.config'
+import { styled, theme } from '../../components/tokens/stitches.config'
+import { ProgressBar } from '../../components/elements/ProgressBar'
+import { useGetLibraryItemsQuery } from '../../lib/networking/queries/useGetLibraryItemsQuery'
 
 const StyledLabel = styled('label', {
   fontWeight: 600,
@@ -54,6 +56,16 @@ export default function Account(): JSX.Element {
     isUsernameValidationLoading,
   ])
 
+  const { itemsPages, isValidating } = useGetLibraryItemsQuery({
+    limit: 0,
+    searchQuery: 'in:all',
+    sortDescending: false,
+  })
+
+  const libraryCount = useMemo(() => {
+    return itemsPages?.find(() => true)?.search.pageInfo.totalCount
+  }, [itemsPages, isValidating])
+
   useEffect(() => {
     if (viewerData?.me?.profile.username) {
       setUsername(viewerData?.me?.profile.username)
@@ -250,6 +262,33 @@ export default function Account(): JSX.Element {
               <Button style="ctaDarkYellow">Update Username</Button>
             </form>
           </VStack>
+
+          <VStack
+            css={{
+              padding: '24px',
+              width: '100%',
+              height: '100%',
+              bg: '$grayBg',
+              gap: '10px',
+              borderRadius: '5px',
+            }}
+          >
+            <StyledLabel>Account Storage</StyledLabel>
+            {!isValidating && (
+              <>
+                <ProgressBar
+                  fillPercentage={(libraryCount ?? 0) / 50000}
+                  fillColor={theme.colors.omnivoreCtaYellow.toString()}
+                  backgroundColor={theme.colors.grayText.toString()}
+                  borderRadius={'2px'}
+                />
+                <StyledText style="footnote" css={{ mt: '0px', mb: '20px' }}>
+                  {`${libraryCount} of 50K library items used.`}
+                </StyledText>
+              </>
+            )}
+            <Button style="ctaDarkYellow">Upgrade</Button>
+          </VStack>
         </VStack>
       </VStack>
     </SettingsLayout>