add temporary export modal in sidebar

Author: Davy-c

src/cloud/api/teams/export.ts

@@ -0,0 +1,8 @@
+import { callApiBlob } from '../../lib/client'
+
+export async function exportWorkspace(teamId: string) {
+  const data = await callApiBlob(`api/teams/${teamId}/export`, {
+    method: 'get',
+  })
+  return data
+}

src/cloud/components/Application.tsx

@@ -30,7 +30,7 @@ import { mapUsers } from '../../design/lib/mappers/users'
 import {
   mdiCog,
   mdiDownload,
-  mdiGiftOutline,
+  mdiExclamationThick,
   mdiInbox,
   mdiLogoutVariant,
   mdiMagnify,
@@ -49,8 +49,6 @@ import {
 import { useModal } from '../../design/lib/stores/modal'
 import NewDocButton from './buttons/NewDocButton'
 import { useCloudSidebarTree } from '../lib/hooks/sidebar/useCloudSidebarTree'
-import { isTimeEligibleForDiscount } from '../lib/subscription'
-import DiscountModal from './Modal/contents/DiscountModal'
 import { Notification as UserNotification } from '../interfaces/db/notifications'
 import useNotificationState from '../../design/lib/hooks/useNotificationState'
 import { useNotifications } from '../../design/lib/stores/notifications'
@@ -78,6 +76,7 @@ import SidebarSubscriptionCTA from './Subscription/SidebarSubscriptionCTA'
 import { isEmpty } from 'lodash'
 import LoaderTopbar from '../../design/components/atoms/loaders/LoaderTopbar'
 import Icon from '../../design/components/atoms/Icon'
+import ExportModal from './Modal/contents/ExportModal'
 
 interface ApplicationProps {
   className?: string
@@ -101,7 +100,6 @@ const Application = ({
     permissions = [],
     currentUserPermissions,
     currentUserIsCoreMember,
-    subscription,
     navigatingBetweenPage,
   } = usePage()
   const { openModal } = useModal()
@@ -451,30 +449,27 @@ const Application = ({
             },
           ]}
         >
-          {isTimeEligibleForDiscount(team) && subscription == null ? (
-            <SidebarButton
-              variant='subtle'
-              icon={
-                <WithPastille>
-                  <Icon size={16} path={mdiGiftOutline} />
-                </WithPastille>
-              }
-              id='sidebar__button__promo'
-              label={translate(lngKeys.SidebarNewUserDiscount)}
-              labelClick={() => {
-                trackEvent(MixpanelActionTrackTypes.DiscountSidebar)
-                return openModal(<DiscountModal />, {
-                  showCloseIcon: true,
-                  width: 'large',
-                })
-              }}
-            />
-          ) : null}
+          <SidebarButton
+            variant='subtle'
+            icon={
+              <WithPastille>
+                <Icon size={16} path={mdiExclamationThick} />
+              </WithPastille>
+            }
+            id='sidebar__button__promo'
+            label={'Export your data'}
+            labelClick={() => {
+              return openModal(<ExportModal />, {
+                showCloseIcon: true,
+                width: 'large',
+              })
+            }}
+          />
         </SidebarButtonList>
         <SidebarSubscriptionCTA />
       </>
     )
-  }, [team, translate, pathname, subscription, push, sendToElectron, openModal])
+  }, [team, translate, pathname, push, sendToElectron, openModal])
 
   return (
     <>

src/cloud/components/Modal/contents/ExportModal.tsx

@@ -0,0 +1,103 @@
+import React, { useCallback, useState } from 'react'
+import styled from '../../../../design/lib/styled'
+import { usePage } from '../../../lib/stores/pageStore'
+import { LoadingButton } from '../../../../design/components/atoms/Button'
+import { exportWorkspace } from '../../../api/teams/export'
+import Flexbox from '../../../../design/components/atoms/Flexbox'
+
+const ExportModal = () => {
+  const { team } = usePage()
+  const [sending, setSending] = useState(false)
+
+  const handleExportClick = useCallback(async () => {
+    if (team == null || sending) {
+      return
+    }
+
+    setSending(true)
+    try {
+      const blob = await exportWorkspace(team.id)
+
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = `workspace-export.zip`
+      document.body.appendChild(a)
+      a.click()
+      a.remove()
+      window.URL.revokeObjectURL(url)
+    } catch (err) {
+      console.error('Failed to export workspace', err)
+    } finally {
+      setSending(false)
+    }
+  }, [team, sending])
+
+  if (team == null) {
+    return null
+  }
+
+  return (
+    <Container className='export__modal'>
+      <header className='export__modal__header'>
+        <div className='export__modal__title'>Export your workspace data</div>
+      </header>
+      <p className='export__modal__description'>
+        The service for boostnote is planned to be retired at the end of
+        September. We recommend exporting your workspace&apos;s data so that you
+        do not lose any of your information.
+      </p>
+      <p>Here is an overview of what can be exported:</p>
+      <ul>
+        <li>Folders & documents hierarchy</li>
+        <li>Documents&apos; markdown content</li>
+        <li>Documents&apos;ttachments</li>
+      </ul>
+
+      <Flexbox justifyContent='center'>
+        <LoadingButton
+          disabled={sending || team == null}
+          spinning={sending}
+          onClick={handleExportClick}
+        >
+          Download ZIP Export
+        </LoadingButton>
+      </Flexbox>
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  .export__modal__subtitle {
+    span {
+      font-size: ${({ theme }) => theme.sizes.fonts.md}px;
+      display: inline-block;
+      margin-right: ${({ theme }) => theme.sizes.spaces.sm}px;
+    }
+
+    margin-bottom: ${({ theme }) => theme.sizes.spaces.md}px;
+  }
+
+  .export__modal__header {
+    text-align: center;
+  }
+
+  .export__modal__title {
+    margin: 0;
+    margin-top: ${({ theme }) => theme.sizes.spaces.md}px;
+    font-size: ${({ theme }) => theme.sizes.fonts.l}px;
+  }
+
+  .export__modal__header > * + .export__modal__header > * {
+    margin-top: ${({ theme }) => theme.sizes.spaces.df}px;
+  }
+
+  .export__modal__description {
+    margin: ${({ theme }) => theme.sizes.spaces.df}px 0;
+    text-transform: uppercase;
+    color: ${({ theme }) => theme.colors.text.subtle};
+    font-size: ${({ theme }) => theme.sizes.fonts.md};
+  }
+`
+
+export default ExportModal

src/cloud/lib/client.ts

@@ -102,3 +102,38 @@ export async function callPdfApi(
     retry: 0,
   }).blob()
 }
+
+export async function callApiBlob(
+  pathname: string,
+  {
+    method = 'get',
+    search,
+    headers = {},
+    signal,
+    body,
+  }: CallCloudJsonApiParameter = {}
+) {
+  const mergedHeaders = {
+    ...headers,
+  }
+  const accessToken = getAccessToken()
+  if (
+    usingLegacyElectron &&
+    usingElectron &&
+    accessToken != null &&
+    mergedHeaders['Authorization'] == null
+  ) {
+    mergedHeaders['Authorization'] = `Bearer ${accessToken}`
+  }
+  return ky(pathname.startsWith('/') ? pathname.substring(1) : pathname, {
+    prefixUrl: boostHubBaseUrl,
+    headers: mergedHeaders,
+    method,
+    searchParams: search,
+    signal,
+    body,
+    timeout: 60 * 1000,
+    credentials: usingElectron ? undefined : 'include',
+    retry: 0,
+  }).blob()
+}