diff --git a/cypress/e2e/purchase-id.cy.ts b/cypress/e2e/purchase-id.cy.ts index f0497478ae..ef0ff1bc72 100644 --- a/cypress/e2e/purchase-id.cy.ts +++ b/cypress/e2e/purchase-id.cy.ts @@ -153,7 +153,7 @@ describe('hosting.holium.com', () => { cy.get('button').contains('Submit').click(); /* --- BOOTING STEP --- */ - // Intercept first GET /get-user-ships, then click button with text 'Next' + // Intercept first 4 GET /get-user-ships, then click button with text 'Next' cy.intercept('GET', `${API_BASE_URL}/get-user-ships`, { statusCode: 200, body: getUserShipsFixture, @@ -161,6 +161,10 @@ describe('hosting.holium.com', () => { // Wait until GET /get-user-ships is called cy.wait('@getUserShips', { timeout: 10000 }); + cy.wait('@getUserShips', { timeout: 10000 }); + cy.wait('@getUserShips', { timeout: 10000 }); + cy.wait('@getUserShips', { timeout: 10000 }); + // Wait until Next button is enabled and click it cy.get('button').contains('Next').should('not.be.disabled').click(); diff --git a/hosting-holium-com/src/pages/account/custom-domain.tsx b/hosting-holium-com/src/pages/account/custom-domain.tsx index a9f1a5f791..2919def048 100644 --- a/hosting-holium-com/src/pages/account/custom-domain.tsx +++ b/hosting-holium-com/src/pages/account/custom-domain.tsx @@ -63,17 +63,17 @@ const CustomDomainPresenter = () => { goToPage(accountPageUrl[section]); }; - const onClickUploadId = () => { + const onClickUploadPier = () => { const byopInProgress = ships.find( (ship) => ship.product_type === 'byop-p' && ship.ship_type !== 'planet' ); if (byopInProgress) { - goToPage('/upload-id', { + goToPage('/upload-pier', { back_url: '/account/custom-domain', }); } else { - goToPage('/upload-id-disclaimer', { + goToPage('/upload-pier-disclaimer', { back_url: '/account/custom-domain', }); } @@ -98,7 +98,7 @@ const CustomDomainPresenter = () => { onChangeDomain={setDomain} onSubmit={onSubmit} onClickPurchaseId={onClickPurchaseId} - onClickUploadId={onClickUploadId} + onClickUploadPier={onClickUploadPier} onClickSidebarSection={onClickSidebarSection} onExit={logout} /> diff --git a/hosting-holium-com/src/pages/account/download-realm.tsx b/hosting-holium-com/src/pages/account/download-realm.tsx index 9f80aca62c..4ecd8150cd 100644 --- a/hosting-holium-com/src/pages/account/download-realm.tsx +++ b/hosting-holium-com/src/pages/account/download-realm.tsx @@ -23,17 +23,17 @@ const DownloadRealmPresenter = () => { } }; - const onClickUploadId = () => { + const onClickUploadPier = () => { const byopInProgress = ships.find( (ship) => ship.product_type === 'byop-p' && ship.ship_type !== 'planet' ); if (byopInProgress) { - goToPage('/upload-id', { + goToPage('/upload-pier', { back_url: '/account/download-realm', }); } else { - goToPage('/upload-id-disclaimer', { + goToPage('/upload-pier-disclaimer', { back_url: '/account/download-realm', }); } @@ -64,7 +64,7 @@ const DownloadRealmPresenter = () => { onDownloadWindows={onDownloadWindows} onDownloadLinux={onDownloadLinux} onClickPurchaseId={onClickPurchaseId} - onClickUploadId={onClickUploadId} + onClickUploadPier={onClickUploadPier} onClickSidebarSection={onClickSidebarSection} onExit={logout} /> diff --git a/hosting-holium-com/src/pages/account/get-realm.tsx b/hosting-holium-com/src/pages/account/get-realm.tsx index 3c357057d1..f22636fd67 100644 --- a/hosting-holium-com/src/pages/account/get-realm.tsx +++ b/hosting-holium-com/src/pages/account/get-realm.tsx @@ -27,8 +27,8 @@ export const joinWaitlist = async (email: string) => { const GetRealmPresenter = () => { const { goToPage, logout } = useNavigation(); - const onClickUploadId = () => { - goToPage('/upload-id-disclaimer', { + const onClickUploadPier = () => { + goToPage('/upload-pier-disclaimer', { back_url: '/account/get-realm', }); }; @@ -52,7 +52,7 @@ const GetRealmPresenter = () => { onClickJoinWaitlist={joinWaitlist} onClickSidebarSection={onClickSidebarSection} onClickPurchaseId={onClickPurchaseId} - onClickUploadId={onClickUploadId} + onClickUploadPier={onClickUploadPier} onExit={logout} /> ); diff --git a/hosting-holium-com/src/pages/account/index.tsx b/hosting-holium-com/src/pages/account/index.tsx index 9ae6474687..b6244c325f 100644 --- a/hosting-holium-com/src/pages/account/index.tsx +++ b/hosting-holium-com/src/pages/account/index.tsx @@ -179,24 +179,24 @@ const HostingPresenter = () => { return false; }; - const onClickUploadId = () => { + const onClickUploadPier = () => { const byopInProgress = ships.find( (ship) => ship.product_type === 'byop-p' && ship.ship_type !== 'planet' ); if (byopInProgress) { - goToPage('/upload-id', { + goToPage('/upload-pier', { back_url: '/account', }); } else { - goToPage('/upload-id-disclaimer', { + goToPage('/upload-pier-disclaimer', { back_url: '/account', }); } }; - const onClickReuploadId = () => { - goToPage('/upload-id', { + const onClickReuploadPier = () => { + goToPage('/upload-pier', { product_type: 'byop-p', back_url: '/account', }); @@ -213,9 +213,9 @@ const HostingPresenter = () => { { serverCode={selectedShip?.code} serverMaintenanceWindow={selectedShip?.maintenance_window} onClickPurchaseId={onClickPurchaseId} - onClickUploadId={onClickUploadId} + onClickUploadPier={onClickUploadPier} setSelectedShipId={setSelectedShipId} onClickChangeEmail={changeEmailModal.toggleOn} onClickChangePassword={changePasswordModal.toggleOn} diff --git a/hosting-holium-com/src/pages/account/storage.tsx b/hosting-holium-com/src/pages/account/storage.tsx index ab931b5f64..931a347b2b 100644 --- a/hosting-holium-com/src/pages/account/storage.tsx +++ b/hosting-holium-com/src/pages/account/storage.tsx @@ -26,17 +26,17 @@ const S3StoragePresenter = () => { goToPage(accountPageUrl[section]); }; - const onClickUploadId = () => { + const onClickUploadPier = () => { const byopInProgress = ships.find( (ship) => ship.product_type === 'byop-p' && ship.ship_type !== 'planet' ); if (byopInProgress) { - goToPage('/upload-id', { + goToPage('/upload-pier', { back_url: '/account/storage', }); } else { - goToPage('/upload-id-disclaimer', { + goToPage('/upload-pier-disclaimer', { back_url: '/account/storage', }); } @@ -90,7 +90,7 @@ const S3StoragePresenter = () => { dataSent={{ networkUsage, minioUsage }} onClickRestartStorage={onClickRestartStorage} onClickPurchaseId={onClickPurchaseId} - onClickUploadId={onClickUploadId} + onClickUploadPier={onClickUploadPier} onClickSidebarSection={onClickSidebarSection} onExit={logout} /> diff --git a/hosting-holium-com/src/pages/account/support.tsx b/hosting-holium-com/src/pages/account/support.tsx index 3739b89e35..85a579d17e 100644 --- a/hosting-holium-com/src/pages/account/support.tsx +++ b/hosting-holium-com/src/pages/account/support.tsx @@ -36,17 +36,17 @@ const SupportPresenter = ({ alerts }: Props) => { } }; - const onClickUploadId = () => { + const onClickUploadPier = () => { const byopInProgress = ships.find( (ship) => ship.product_type === 'byop-p' && ship.ship_type !== 'planet' ); if (byopInProgress) { - goToPage('/upload-id', { + goToPage('/upload-pier', { back_url: '/account/support', }); } else { - goToPage('/upload-id-disclaimer', { + goToPage('/upload-pier-disclaimer', { back_url: '/account/support', }); } @@ -65,7 +65,7 @@ const SupportPresenter = ({ alerts }: Props) => { selectedShipId={selectedShipId} setSelectedShipId={setSelectedShipId} onClickPurchaseId={onClickPurchaseId} - onClickUploadId={onClickUploadId} + onClickUploadPier={onClickUploadPier} onClickSidebarSection={onClickSidebarSection} onExit={logout} /> diff --git a/hosting-holium-com/src/pages/booting.tsx b/hosting-holium-com/src/pages/booting.tsx index 30e61ffe21..a2ab63db68 100644 --- a/hosting-holium-com/src/pages/booting.tsx +++ b/hosting-holium-com/src/pages/booting.tsx @@ -76,25 +76,18 @@ export default function Booting({ product_type }: ServerSideProps) { `${serverId} will be ready in a few minutes.`, ]); } - } else if (logs.length === 2) { - setLogs((logs) => [...logs, 'Go touch some grass.']); } const serverCode = ship.code; - if (serverCode) { + if (serverCode && logs.length === 2) { setLogs((logs) => [...logs, 'Assigning a domain.']); } const serverUrl = ship.link; - const isBooted = serverUrl.includes('https://'); - if (isBooted) { - booting.toggleOff(); - if (intervalRef.current) clearInterval(intervalRef.current); - + if (serverUrl && logs.length === 3) { setLogs((logs) => [ ...logs, `Successfully assigned a domain: ${serverUrl}.`, - 'Booting complete.', ]); // Store credentials for next page. @@ -103,6 +96,14 @@ export default function Booting({ product_type }: ServerSideProps) { serverCode, }); } + + const isBooted = ship.ship_type === 'planet'; + if (isBooted && logs.length === 4) { + booting.toggleOff(); + if (intervalRef.current) clearInterval(intervalRef.current); + + setLogs((logs) => [...logs, 'Booting complete.']); + } }, [logs, booting, isBYOP]); const onNext = () => { diff --git a/hosting-holium-com/src/pages/get-realm.tsx b/hosting-holium-com/src/pages/get-realm.tsx index d2ab80e820..6b726a8e16 100644 --- a/hosting-holium-com/src/pages/get-realm.tsx +++ b/hosting-holium-com/src/pages/get-realm.tsx @@ -46,14 +46,14 @@ export default function GetRealm({ prefilledEmail }: Props) { goToPage('/create-account', { email: prefilledEmail }); }; - const onUploadId = () => {}; + const onUploadPier = () => {}; return ( ); diff --git a/hosting-holium-com/src/pages/index.tsx b/hosting-holium-com/src/pages/index.tsx index 48b65747ef..d4268474be 100644 --- a/hosting-holium-com/src/pages/index.tsx +++ b/hosting-holium-com/src/pages/index.tsx @@ -27,7 +27,7 @@ export default function GetOnRealm({ email }: Props) { window.location.href = 'https://holium.com'; }; - const onUploadId = () => { + const onUploadPier = () => { return goToPage('/create-account', { haha: 'true', product_type: 'byop-p', @@ -51,7 +51,7 @@ export default function GetOnRealm({ email }: Props) { return ( (); - const [progress, setProgress] = useState(); - const [error, setError] = useState(); - const [hint, setHint] = useState(); - - const onUpload = async (file: File) => { - const { token } = OnboardingStorage.get(); - - if (!token) { - setError('Unathorized. Please log in again.'); - return false; - } - - // Get provisional ship ID. - const ships = await thirdEarthApi.getUserShips(token); - const provisionalShip = ships.find((ship) => ship.ship_type === 'host'); - - if (!provisionalShip) { - console.log('ships', JSON.stringify(ships, null, 2)); - setError('No provisional ship found.'); - return false; - } - - const provisionalShipId = provisionalShip.id.toString(); - - setFile(file); - setProgress(0); - setError(undefined); - - // Increment progress by 1% every 2s until 99%. - const interval = setInterval(() => { - setProgress((progress) => { - if (progress === undefined) return 0; - - if (progress < 99) { - return progress + 1; - } else { - clearInterval(interval); - return progress; - } - }); - }, 2000); - - // After 15 minutes, show a hint to try a different browser. - const timeout = setTimeout(() => { - setHint('Upload stuck? Try uploading in a different browser.'); - }, 15 * 60 * 1000); - - const formData = new FormData(); - formData.append('attachment', file); - formData.append('type', 'pier'); - formData.append('desks', 'false'); - formData.append('groups', 'false'); - - await thirdEarthApi.log(token, { - file: 'purchases', - type: 'info', - subject: 'FRONTEND: upload started (email notify)', - message: `Upload of pier file ${file.name} started.`, - }); - const response = await thirdEarthApi.uploadPierFile( - token, - provisionalShipId, - formData - ); - - setHint(undefined); - clearTimeout(timeout); - - if (!response) { - setError('An unknown error occurred.'); - - return false; - } - - if ( - response.ship_type && - Object.keys(uploadErrors).includes(response.ship_type) - ) { - setError(uploadErrors[response.ship_type]); - - return false; - } - - setProgress(100); - clearInterval(interval); - - return true; - }; - - const onBack = () => { - goToPage('/account'); - }; - - const onNext = () => { - return goToPage('/booting', { - product_type: 'byop-p', - }); - }; - - return ( - - - - ); -} diff --git a/hosting-holium-com/src/pages/upload-id-disclaimer.tsx b/hosting-holium-com/src/pages/upload-pier-disclaimer.tsx similarity index 68% rename from hosting-holium-com/src/pages/upload-id-disclaimer.tsx rename to hosting-holium-com/src/pages/upload-pier-disclaimer.tsx index 644a300f41..acfad122e1 100644 --- a/hosting-holium-com/src/pages/upload-id-disclaimer.tsx +++ b/hosting-holium-com/src/pages/upload-pier-disclaimer.tsx @@ -1,9 +1,9 @@ -import { UploadIdDisclaimerDialog } from '@holium/shared'; +import { UploadPierDisclaimerDialog } from '@holium/shared'; import { Page } from '../components/Page'; import { useNavigation } from '../util/useNavigation'; -export default function UploadIdDisclaimer() { +export default function UploadPierDisclaimer() { const { goToPage } = useNavigation(); const onBack = () => { @@ -20,7 +20,7 @@ export default function UploadIdDisclaimer() { return ( - + ); } diff --git a/hosting-holium-com/src/pages/upload-pier.tsx b/hosting-holium-com/src/pages/upload-pier.tsx new file mode 100644 index 0000000000..1e73086f4f --- /dev/null +++ b/hosting-holium-com/src/pages/upload-pier.tsx @@ -0,0 +1,138 @@ +import { useEffect, useState } from 'react'; + +import { OnboardingStorage, UploadPierDialog } from '@holium/shared'; + +import { Page } from '../components/Page'; +import { thirdEarthApi } from '../util/thirdEarthApi'; +import { useNavigation } from '../util/useNavigation'; + +type SftpServer = { + ipAddress: string; + password: string; +}; + +const poll = ( + abortSignal: AbortSignal, + pollingFunction: () => Promise, + timeout: number +) => { + return new Promise((resolve) => { + const executePolling = async () => { + if (abortSignal.aborted) return resolve(false); + const result = await pollingFunction(); + if (result) return resolve(true); + setTimeout(executePolling, timeout); + }; + executePolling(); + }); +}; + +export default function UploadPierPage() { + const { goToPage } = useNavigation(); + + const [sftpServer, setSftpServer] = useState(); + + const [error, setError] = useState(); + + const getUnbootedByopShip = async () => { + const { token } = OnboardingStorage.get(); + + if (!token) { + setError('Unauthorized. Please log in again.'); + return null; + } + + const ships = await thirdEarthApi.getUserShips(token); + return ships.find( + (ship) => ship.product_type === 'byop-p' && ship.ship_type !== 'planet' + ); + }; + + const shipIsReady = async () => { + const ship = await getUnbootedByopShip(); + if (!ship) return false; + return ship.ship_type === 'provisional'; + }; + + const sftpIsReady = async () => { + const ship = await getUnbootedByopShip(); + if (ship && ship.ship_type.includes('dropletReady')) { + const [_status, _pier, password, ipAddress] = ship.ship_type.split('|'); + setSftpServer({ password, ipAddress }); + return true; + } + return false; + }; + + const pierIsUploaded = async () => { + const ship = await getUnbootedByopShip(); + if (!ship) return false; + + return ship.ship_type.includes('pierReceived'); + }; + + const prepareSftpServer = async () => { + const { token } = OnboardingStorage.get(); + if (!token) return false; + + const ship = await getUnbootedByopShip(); + if (!ship) return false; + + try { + const sftpResponse = await thirdEarthApi.prepareSftpServerForPierUpload( + token, + ship.id.toString() + ); + if (!sftpResponse) return false; + + await thirdEarthApi.log(token, { + file: 'purchases', + type: 'info', + subject: 'FRONTEND: SFTP started (email notify)', + message: `Upload with SFTP started.`, + }); + + return true; + } catch (e) { + setError('Failed to start SFTP upload.'); + console.error(e); + return false; + } + }; + + useEffect(() => { + const abortController = new AbortController(); + const { signal } = abortController; + + const executeFlow = async () => { + if (!(await poll(signal, shipIsReady, 1000))) return; + if (!(await prepareSftpServer())) return; + if (!(await poll(signal, sftpIsReady, 1000))) return; + if (!(await poll(signal, pierIsUploaded, 5000))) return; + + setError(undefined); + goToPage('/booting', { product_type: 'byop-p' }); + }; + + executeFlow(); + + return () => { + abortController.abort(); + }; + }, []); + + const onBack = () => { + goToPage('/account'); + }; + + return ( + + + + ); +} diff --git a/hosting-holium-com/src/pages/verify-email.tsx b/hosting-holium-com/src/pages/verify-email.tsx index b891443973..d27afe39ad 100644 --- a/hosting-holium-com/src/pages/verify-email.tsx +++ b/hosting-holium-com/src/pages/verify-email.tsx @@ -55,7 +55,7 @@ export default function VerifyEmail({ product_type }: ServerSideProps) { if (result) { if (product_type === 'byop-p') { - return goToPage('/upload-id-disclaimer'); + return goToPage('/upload-pier-disclaimer'); } else { return goToPage('/choose-id'); } diff --git a/hosting-holium-com/src/util/useNavigation.ts b/hosting-holium-com/src/util/useNavigation.ts index 2fb1dc53a8..755242f5d3 100644 --- a/hosting-holium-com/src/util/useNavigation.ts +++ b/hosting-holium-com/src/util/useNavigation.ts @@ -6,6 +6,7 @@ import { OnboardingPage, OnboardingStorage, SidebarSection, + ThirdEarthProductType, } from '@holium/shared'; export const accountPageUrl: Record = { @@ -41,7 +42,7 @@ export const useNavigation = () => { back_url?: OnboardingPage; redirect_url?: OnboardingPage; haha?: string; // Hide "Already have an account" - product_type?: string; + product_type?: ThirdEarthProductType; } ) => { const path = diff --git a/shared/src/onboarding/components/AccountDialog.tsx b/shared/src/onboarding/components/AccountDialog.tsx index 7e480f3a7a..8da6d6ba3e 100644 --- a/shared/src/onboarding/components/AccountDialog.tsx +++ b/shared/src/onboarding/components/AccountDialog.tsx @@ -18,7 +18,7 @@ type Props = { children?: ReactNode; customBody?: ReactNode; isLoading?: boolean; - onClickUploadId: () => void; + onClickUploadPier: () => void; onClickPurchaseId: () => void; setSelectedShipId: (shipId: number) => void; onClickSidebarSection: (section: SidebarSection) => void; @@ -33,7 +33,7 @@ export const AccountDialog = ({ children, customBody, isLoading, - onClickUploadId, + onClickUploadPier, onClickPurchaseId, setSelectedShipId, onClickSidebarSection, @@ -52,7 +52,7 @@ export const AccountDialog = ({ selectedShipId={selectedShipId} currentSection={currentSection} isLoading={isLoading} - onClickUploadId={onClickUploadId} + onClickUploadPier={onClickUploadPier} onClickPurchaseId={onClickPurchaseId} setSelectedShipId={setSelectedShipId} onClickSidebarSection={onClickSidebarSection} @@ -102,7 +102,7 @@ export const AccountDialogSkeleton = ({ customBody={isBlankBody ? : undefined} setSelectedShipId={() => {}} onClickPurchaseId={() => {}} - onClickUploadId={() => {}} + onClickUploadPier={() => {}} onClickSidebarSection={() => {}} onExit={() => {}} /> diff --git a/shared/src/onboarding/components/AccountDialogSidebar.tsx b/shared/src/onboarding/components/AccountDialogSidebar.tsx index 594ba1e4d9..d095223fb7 100644 --- a/shared/src/onboarding/components/AccountDialogSidebar.tsx +++ b/shared/src/onboarding/components/AccountDialogSidebar.tsx @@ -33,7 +33,7 @@ type Props = { selectedShipId?: number; currentSection?: SidebarSection; isLoading?: boolean; - onClickUploadId: () => void; + onClickUploadPier: () => void; onClickPurchaseId: () => void; setSelectedShipId: (shipId: number) => void; onClickSidebarSection: (section: SidebarSection) => void; @@ -45,7 +45,7 @@ export const AccountDialogSidebar = ({ selectedShipId, currentSection, isLoading, - onClickUploadId, + onClickUploadPier, onClickPurchaseId, setSelectedShipId, onClickSidebarSection, @@ -141,7 +141,7 @@ export const AccountDialogSidebar = ({ gap="8px" borderTop="1px solid rgba(var(--rlm-border-rgba))" > - + Upload Pier diff --git a/shared/src/onboarding/dialogs/AccountCustomDomain/AccountCustomDomainDialog.tsx b/shared/src/onboarding/dialogs/AccountCustomDomain/AccountCustomDomainDialog.tsx index 2dbf95919f..f47925b513 100644 --- a/shared/src/onboarding/dialogs/AccountCustomDomain/AccountCustomDomainDialog.tsx +++ b/shared/src/onboarding/dialogs/AccountCustomDomain/AccountCustomDomainDialog.tsx @@ -15,7 +15,7 @@ type Props = { onChangeDomain: (domain: string) => void; onSubmit: () => Promise; onClickPurchaseId: () => void; - onClickUploadId: () => void; + onClickUploadPier: () => void; onClickSidebarSection: (section: SidebarSection) => void; onExit: () => void; }; @@ -32,7 +32,7 @@ export const AccountCustomDomainDialog = ({ onChangeDomain, onSubmit, onClickPurchaseId, - onClickUploadId, + onClickUploadPier, onClickSidebarSection, onExit, }: Props) => ( @@ -43,7 +43,7 @@ export const AccountCustomDomainDialog = ({ currentSection={SidebarSection.CustomDomain} isLoading={!dropletIp} onClickPurchaseId={onClickPurchaseId} - onClickUploadId={onClickUploadId} + onClickUploadPier={onClickUploadPier} onClickSidebarSection={onClickSidebarSection} onSubmit={onSubmit} onExit={onExit} diff --git a/shared/src/onboarding/dialogs/AccountDownloadRealm/AccountDownloadRealmDialog.tsx b/shared/src/onboarding/dialogs/AccountDownloadRealm/AccountDownloadRealmDialog.tsx index 2641a5354d..8bc52c4d97 100644 --- a/shared/src/onboarding/dialogs/AccountDownloadRealm/AccountDownloadRealmDialog.tsx +++ b/shared/src/onboarding/dialogs/AccountDownloadRealm/AccountDownloadRealmDialog.tsx @@ -17,7 +17,7 @@ type Props = DownloadRealmButtonsProps & { selectedShipId: number | undefined; setSelectedShipId: (newId: number) => void; onClickPurchaseId: () => void; - onClickUploadId: () => void; + onClickUploadPier: () => void; onClickSidebarSection: (section: SidebarSection) => void; onExit: () => void; }; @@ -31,7 +31,7 @@ export const AccountDownloadRealmDialog = ({ onDownloadWindows, onDownloadLinux, onClickPurchaseId, - onClickUploadId, + onClickUploadPier, onClickSidebarSection, onExit, }: Props) => ( @@ -65,7 +65,7 @@ export const AccountDownloadRealmDialog = ({ } onClickPurchaseId={onClickPurchaseId} - onClickUploadId={onClickUploadId} + onClickUploadPier={onClickUploadPier} onClickSidebarSection={onClickSidebarSection} onExit={onExit} /> diff --git a/shared/src/onboarding/dialogs/AccountGetRealm/AccountGetRealmDialog.tsx b/shared/src/onboarding/dialogs/AccountGetRealm/AccountGetRealmDialog.tsx index 532d3c9236..2731c9db22 100644 --- a/shared/src/onboarding/dialogs/AccountGetRealm/AccountGetRealmDialog.tsx +++ b/shared/src/onboarding/dialogs/AccountGetRealm/AccountGetRealmDialog.tsx @@ -10,7 +10,7 @@ import { GetIdIcon } from '../../icons/GetIdIcon'; type Props = { onClickPurchaseId: () => void; - onClickUploadId: () => void; + onClickUploadPier: () => void; onClickJoinWaitlist: (email: string) => Promise; onClickSidebarSection: (section: SidebarSection) => void; onExit: () => void; @@ -18,7 +18,7 @@ type Props = { export const AccountGetRealmDialog = ({ onClickPurchaseId, - onClickUploadId, + onClickUploadPier, onClickJoinWaitlist, onClickSidebarSection, onExit, @@ -44,7 +44,7 @@ export const AccountGetRealmDialog = ({ Purchase ID - Upload Pier + Upload Pier @@ -55,7 +55,7 @@ export const AccountGetRealmDialog = ({ } onClickPurchaseId={onClickPurchaseId} - onClickUploadId={onClickUploadId} + onClickUploadPier={onClickUploadPier} onClickSidebarSection={onClickSidebarSection} onExit={onExit} /> diff --git a/shared/src/onboarding/dialogs/AccountHosting/AccountHostingDialog.tsx b/shared/src/onboarding/dialogs/AccountHosting/AccountHostingDialog.tsx index 30b2044d77..755f6dcd05 100644 --- a/shared/src/onboarding/dialogs/AccountHosting/AccountHostingDialog.tsx +++ b/shared/src/onboarding/dialogs/AccountHosting/AccountHostingDialog.tsx @@ -18,7 +18,7 @@ type Props = { onClickChangeMaintenanceWindow: () => void; onClickEjectId: () => void; onClickPurchaseId: () => void; - onClickUploadId: () => void; + onClickUploadPier: () => void; onClickSidebarSection: (section: SidebarSection) => void; onExit: () => void; }; @@ -38,7 +38,7 @@ export const AccountHostingDialog = ({ onClickChangeMaintenanceWindow, onClickEjectId, onClickPurchaseId, - onClickUploadId, + onClickUploadPier, onClickSidebarSection, onExit, }: Props) => ( @@ -54,7 +54,7 @@ export const AccountHostingDialog = ({ (!serverMaintenanceWindow && serverMaintenanceWindow !== 0) } onClickPurchaseId={onClickPurchaseId} - onClickUploadId={onClickUploadId} + onClickUploadPier={onClickUploadPier} onClickSidebarSection={onClickSidebarSection} onExit={onExit} > diff --git a/shared/src/onboarding/dialogs/AccountStorage/AccountStorageDialog.tsx b/shared/src/onboarding/dialogs/AccountStorage/AccountStorageDialog.tsx index 051390617d..0b6ba5b539 100644 --- a/shared/src/onboarding/dialogs/AccountStorage/AccountStorageDialog.tsx +++ b/shared/src/onboarding/dialogs/AccountStorage/AccountStorageDialog.tsx @@ -20,7 +20,7 @@ type Props = { onClickRestartStorage: () => Promise | undefined; setSelectedShipId: (newId: number) => void; onClickPurchaseId: () => void; - onClickUploadId: () => void; + onClickUploadPier: () => void; onClickSidebarSection: (section: SidebarSection) => void; onExit: () => void; }; @@ -36,7 +36,7 @@ export const AccountStorageDialog = ({ onClickRestartStorage, setSelectedShipId, onClickPurchaseId, - onClickUploadId, + onClickUploadPier, onClickSidebarSection, onExit, }: Props) => ( @@ -47,7 +47,7 @@ export const AccountStorageDialog = ({ isLoading={!storageUrl || !storageBucket || !storagePassword} setSelectedShipId={setSelectedShipId} onClickPurchaseId={onClickPurchaseId} - onClickUploadId={onClickUploadId} + onClickUploadPier={onClickUploadPier} onClickSidebarSection={onClickSidebarSection} onExit={onExit} > diff --git a/shared/src/onboarding/dialogs/AccountSupport/AccountSupportDialog.tsx b/shared/src/onboarding/dialogs/AccountSupport/AccountSupportDialog.tsx index 025b9cf8e6..b468bfa4c5 100644 --- a/shared/src/onboarding/dialogs/AccountSupport/AccountSupportDialog.tsx +++ b/shared/src/onboarding/dialogs/AccountSupport/AccountSupportDialog.tsx @@ -9,7 +9,7 @@ type Props = { selectedShipId: number | undefined; setSelectedShipId: (newId: number) => void; onClickPurchaseId: () => void; - onClickUploadId: () => void; + onClickUploadPier: () => void; onClickSidebarSection: (section: SidebarSection) => void; onExit: () => void; }; @@ -20,7 +20,7 @@ export const AccountSupportDialog = ({ selectedShipId, setSelectedShipId, onClickPurchaseId, - onClickUploadId, + onClickUploadPier, onClickSidebarSection, onExit, }: Props) => ( @@ -30,7 +30,7 @@ export const AccountSupportDialog = ({ setSelectedShipId={setSelectedShipId} currentSection={SidebarSection.Support} onClickPurchaseId={onClickPurchaseId} - onClickUploadId={onClickUploadId} + onClickUploadPier={onClickUploadPier} onClickSidebarSection={onClickSidebarSection} onExit={onExit} > diff --git a/shared/src/onboarding/dialogs/AccountUnfinishedUpload/AccountUnfinishedUploadDialog.tsx b/shared/src/onboarding/dialogs/AccountUnfinishedUpload/AccountUnfinishedUploadDialog.tsx index ef26465d93..1ffff0c132 100644 --- a/shared/src/onboarding/dialogs/AccountUnfinishedUpload/AccountUnfinishedUploadDialog.tsx +++ b/shared/src/onboarding/dialogs/AccountUnfinishedUpload/AccountUnfinishedUploadDialog.tsx @@ -9,8 +9,8 @@ type Props = { setSelectedShipId: (newId: number) => void; onClickSidebarSection: (section: SidebarSection) => void; onClickPurchaseId: () => void; - onClickUploadId: () => void; - onClickReuploadId: () => void; + onClickUploadPier: () => void; + onClickReuploadPier: () => void; onClickExit: () => void; }; @@ -20,8 +20,8 @@ export const AccountUnfinishedUploadDialog = ({ setSelectedShipId, onClickSidebarSection, onClickPurchaseId, - onClickUploadId, - onClickReuploadId, + onClickUploadPier, + onClickReuploadPier, onClickExit, }: Props) => ( ship.id === selectedShipId)?.ship_type} - onClickReuploadId={onClickReuploadId} + onClickReuploadPier={onClickReuploadPier} /> ); diff --git a/shared/src/onboarding/dialogs/AccountUnfinishedUpload/AccountUnfinishedUploadDialogBody.tsx b/shared/src/onboarding/dialogs/AccountUnfinishedUpload/AccountUnfinishedUploadDialogBody.tsx index 2787b317a8..bad77b616a 100644 --- a/shared/src/onboarding/dialogs/AccountUnfinishedUpload/AccountUnfinishedUploadDialogBody.tsx +++ b/shared/src/onboarding/dialogs/AccountUnfinishedUpload/AccountUnfinishedUploadDialogBody.tsx @@ -6,7 +6,7 @@ import { GrayButton } from '../../components/ChangeButton'; import { OnboardDialogDescription } from '../../onboarding'; // These errors are stored as the ship_type of the associated ship row in the database. -export const uploadErrors: Record = { +const uploadErrors: Record = { invalidFileError: 'The uploaded .tar.gz or .zip file failed to be decompressed.', invalidFileFormatError: @@ -24,12 +24,12 @@ export const uploadErrors: Record = { type Props = { shipType?: string; - onClickReuploadId: () => void; + onClickReuploadPier: () => void; }; export const AccountUnfinishedUploadDialogBody = ({ shipType, - onClickReuploadId, + onClickReuploadPier, }: Props) => { const [error, setError] = useState(); @@ -46,28 +46,28 @@ export const AccountUnfinishedUploadDialogBody = ({ <> {error} - Re-upload + Re-upload ); } - if (shipType === 'host') { + if (['pierReceived', 'updating'].includes(shipType ?? '')) { return ( - <> - - You haven't uploaded your pier yet. - - - Continue workflow - - + + Your uploaded identity is booting. It will be ready in 5-10 minutes. + ); } return ( - - Your uploaded identity is booting. It will be ready in 5-10 minutes. - + <> + + You haven't uploaded your pier yet. + + + Continue workflow + + ); }; diff --git a/shared/src/onboarding/dialogs/Claim.WEB.stories.tsx b/shared/src/onboarding/dialogs/Claim.WEB.stories.tsx index 6da4702440..93a0e1e0b8 100644 --- a/shared/src/onboarding/dialogs/Claim.WEB.stories.tsx +++ b/shared/src/onboarding/dialogs/Claim.WEB.stories.tsx @@ -32,7 +32,7 @@ export const AccountGetRealmDialogStory: ComponentStory< Promise.resolve(false)} onClickPurchaseId={() => {}} - onClickUploadId={() => {}} + onClickUploadPier={() => {}} onClickSidebarSection={() => {}} onExit={() => {}} /> diff --git a/shared/src/onboarding/dialogs/GetOnRealm/GetOnRealmDialog.tsx b/shared/src/onboarding/dialogs/GetOnRealm/GetOnRealmDialog.tsx index f9f6cc0216..fdd14204a8 100644 --- a/shared/src/onboarding/dialogs/GetOnRealm/GetOnRealmDialog.tsx +++ b/shared/src/onboarding/dialogs/GetOnRealm/GetOnRealmDialog.tsx @@ -4,14 +4,14 @@ import { GetRealmDialogBody } from './GetOnRealmDialogBody'; type Props = { onBack?: () => void; - onUploadId: () => void; + onUploadPier: () => void; onPurchaseId: () => void; onAlreadyHaveAccount?: () => void; }; export const GetOnRealmDialog = ({ onBack, - onUploadId, + onUploadPier, onPurchaseId, onAlreadyHaveAccount, }: Props) => ( @@ -19,7 +19,7 @@ export const GetOnRealmDialog = ({ icon={} body={ diff --git a/shared/src/onboarding/dialogs/GetOnRealm/GetOnRealmDialogBody.styles.tsx b/shared/src/onboarding/dialogs/GetOnRealm/GetOnRealmDialogBody.styles.tsx index 8f6c04a53f..3ed9b2f6a1 100644 --- a/shared/src/onboarding/dialogs/GetOnRealm/GetOnRealmDialogBody.styles.tsx +++ b/shared/src/onboarding/dialogs/GetOnRealm/GetOnRealmDialogBody.styles.tsx @@ -24,7 +24,7 @@ export const PurchaseIdButton = styled(Button.Primary)` ${CTAButtonCSS} `; -export const UploadIdButton = styled(GrayButton)` +export const UploadPierButton = styled(GrayButton)` ${CTAButtonCSS} `; diff --git a/shared/src/onboarding/dialogs/GetOnRealm/GetOnRealmDialogBody.tsx b/shared/src/onboarding/dialogs/GetOnRealm/GetOnRealmDialogBody.tsx index b74e5983a6..76fdf5426e 100644 --- a/shared/src/onboarding/dialogs/GetOnRealm/GetOnRealmDialogBody.tsx +++ b/shared/src/onboarding/dialogs/GetOnRealm/GetOnRealmDialogBody.tsx @@ -8,17 +8,17 @@ import { ButtonsContainer, ButtonText, PurchaseIdButton, - UploadIdButton, + UploadPierButton, } from './GetOnRealmDialogBody.styles'; type Props = { - onUploadId: () => void; + onUploadPier: () => void; onPurchaseId: () => void; onAlreadyHaveAccount?: () => void; }; export const GetRealmDialogBody = ({ - onUploadId, + onUploadPier, onPurchaseId, onAlreadyHaveAccount, }: Props) => ( @@ -34,9 +34,9 @@ export const GetRealmDialogBody = ({ Purchase ID - + Upload Pier - + {onAlreadyHaveAccount && ( diff --git a/shared/src/onboarding/dialogs/GetRealm/GetRealmDialog.tsx b/shared/src/onboarding/dialogs/GetRealm/GetRealmDialog.tsx index ee1c2247c4..db9855d84b 100644 --- a/shared/src/onboarding/dialogs/GetRealm/GetRealmDialog.tsx +++ b/shared/src/onboarding/dialogs/GetRealm/GetRealmDialog.tsx @@ -4,13 +4,20 @@ import { GetRealmDialogBody } from './GetRealmDialogBody'; type Props = { onBack: () => void; onPurchaseId: () => void; - onUploadId: () => void; + onUploadPier: () => void; }; -export const GetRealmDialog = ({ onBack, onPurchaseId, onUploadId }: Props) => ( +export const GetRealmDialog = ({ + onBack, + onPurchaseId, + onUploadPier, +}: Props) => ( + } hideNextButton onBack={onBack} diff --git a/shared/src/onboarding/dialogs/GetRealm/GetRealmDialogBody.tsx b/shared/src/onboarding/dialogs/GetRealm/GetRealmDialogBody.tsx index 9859dc33c0..7b15a41adf 100644 --- a/shared/src/onboarding/dialogs/GetRealm/GetRealmDialogBody.tsx +++ b/shared/src/onboarding/dialogs/GetRealm/GetRealmDialogBody.tsx @@ -11,10 +11,10 @@ import { GrayBox } from './GetRealmDialogBody.styles'; type Props = { onPurchaseId: () => void; - onUploadId: () => void; + onUploadPier: () => void; }; -export const GetRealmDialogBody = ({ onPurchaseId, onUploadId }: Props) => ( +export const GetRealmDialogBody = ({ onPurchaseId, onUploadPier }: Props) => ( <> Congratulations, you're on the waitlist! @@ -39,7 +39,7 @@ export const GetRealmDialogBody = ({ onPurchaseId, onUploadId }: Props) => ( Purchase ID - + {}} onPurchaseId={() => {}} - onUploadId={() => {}} + onUploadPier={() => {}} /> ); @@ -43,7 +43,7 @@ export const GetOnRealmDialogStory: ComponentStory< {}} - onUploadId={() => {}} + onUploadPier={() => {}} onAlreadyHaveAccount={() => {}} /> diff --git a/shared/src/onboarding/dialogs/Login.WEB.stories.tsx b/shared/src/onboarding/dialogs/Login.WEB.stories.tsx index 33917aa723..be67f7ed80 100644 --- a/shared/src/onboarding/dialogs/Login.WEB.stories.tsx +++ b/shared/src/onboarding/dialogs/Login.WEB.stories.tsx @@ -44,7 +44,7 @@ export const AccountHostingDialogStory: ComponentStory< selectedShipId={0} setSelectedShipId={() => {}} onClickPurchaseId={() => {}} - onClickUploadId={() => {}} + onClickUploadPier={() => {}} email="rubberducky12@protonmail.com" serverUrl="https://pasren-satmex.holium.network/" serverCode="tolnym-rilmug-ricnep-marlyx" @@ -73,7 +73,7 @@ export const AccountStorageDialogStory: ComponentStory< onClickRestartStorage={() => Promise.resolve('')} setSelectedShipId={() => {}} onClickPurchaseId={() => {}} - onClickUploadId={() => {}} + onClickUploadPier={() => {}} storageUrl="https://console.s31.holium.network" storageBucket="pasren-satmex" storagePassword="1234567890" @@ -104,7 +104,7 @@ export const AccountCustomDomainDialogStory: ComponentStory< onChangeDomain={() => {}} onSubmit={() => Promise.resolve()} onClickPurchaseId={() => {}} - onClickUploadId={() => {}} + onClickUploadPier={() => {}} onClickSidebarSection={() => {}} onExit={() => {}} /> @@ -122,7 +122,7 @@ export const AccountDownloadRealmDialogStory: ComponentStory< selectedShipId={0} setSelectedShipId={() => {}} onClickPurchaseId={() => {}} - onClickUploadId={() => {}} + onClickUploadPier={() => {}} onClickSidebarSection={() => {}} onDownloadMacM1={() => {}} onDownloadMacIntel={() => {}} @@ -149,8 +149,8 @@ export const AccountContinueWorkflowDialogStory: ComponentStory< selectedShipId={0} setSelectedShipId={() => {}} onClickPurchaseId={() => {}} - onClickUploadId={() => {}} - onClickReuploadId={() => {}} + onClickUploadPier={() => {}} + onClickReuploadPier={() => {}} onClickSidebarSection={() => {}} onClickExit={() => {}} /> @@ -168,8 +168,8 @@ export const AccountUnfinishedUploadDialogStory: ComponentStory< selectedShipId={0} setSelectedShipId={() => {}} onClickPurchaseId={() => {}} - onClickUploadId={() => {}} - onClickReuploadId={() => {}} + onClickUploadPier={() => {}} + onClickReuploadPier={() => {}} onClickSidebarSection={() => {}} onClickExit={() => {}} /> @@ -192,8 +192,8 @@ export const AccountErroredUploadDialogStory: ComponentStory< selectedShipId={0} setSelectedShipId={() => {}} onClickPurchaseId={() => {}} - onClickUploadId={() => {}} - onClickReuploadId={() => {}} + onClickUploadPier={() => {}} + onClickReuploadPier={() => {}} onClickSidebarSection={() => {}} onClickExit={() => {}} /> diff --git a/shared/src/onboarding/dialogs/PurchaseID.WEB.stories.tsx b/shared/src/onboarding/dialogs/PurchaseID.WEB.stories.tsx index 24f0f051f9..382be8c6c1 100644 --- a/shared/src/onboarding/dialogs/PurchaseID.WEB.stories.tsx +++ b/shared/src/onboarding/dialogs/PurchaseID.WEB.stories.tsx @@ -27,7 +27,7 @@ export const GetOnRealmDialogStory: ComponentStory< {}} - onUploadId={() => {}} + onUploadPier={() => {}} onAlreadyHaveAccount={() => {}} /> @@ -98,7 +98,7 @@ export const BootingDialogStory: ComponentStory = () => ( Promise.resolve(false)} /> @@ -112,7 +112,7 @@ export const BootingDialogCompleteStory: ComponentStory< Promise.resolve(false)} /> diff --git a/shared/src/onboarding/dialogs/UploadId/UploadBox.styles.ts b/shared/src/onboarding/dialogs/UploadId/UploadBox.styles.ts deleted file mode 100644 index 8dc5c5aa67..0000000000 --- a/shared/src/onboarding/dialogs/UploadId/UploadBox.styles.ts +++ /dev/null @@ -1,41 +0,0 @@ -import styled from 'styled-components'; - -import { GrayBox } from '../GetRealm/GetRealmDialogBody.styles'; - -export const UploadBoxContainer = styled(GrayBox)<{ - isEmpty: boolean; -}>` - position: relative; - gap: 0; - height: 80px; - align-items: center; - justify-content: center; - border-style: dashed; - - ${({ isEmpty }) => - isEmpty && - ` - cursor: pointer; - `} -`; - -export const ProgressBar = styled.div<{ progress: number }>` - width: 100%; - height: 10px; - padding: 1px; - background-color: rgba(var(--rlm-border-rgba), 0.9); - border-radius: 36px; - position: relative; - overflow: hidden; - - &:after { - content: ''; - position: absolute; - top: 1px; - left: 1px; - width: ${({ progress }) => progress}%; - height: 8px; - background-color: var(--rlm-accent-color); - border-radius: 36px; - } -`; diff --git a/shared/src/onboarding/dialogs/UploadId/UploadBox.tsx b/shared/src/onboarding/dialogs/UploadId/UploadBox.tsx deleted file mode 100644 index 85a62cb1a7..0000000000 --- a/shared/src/onboarding/dialogs/UploadId/UploadBox.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { useState } from 'react'; -import { useDropzone } from 'react-dropzone'; - -import { ErrorBox, Flex, Icon } from '@holium/design-system/general'; - -import { OnboardDialogDescription } from '../../components/OnboardDialog.styles'; -import { ProgressBar, UploadBoxContainer } from './UploadBox.styles'; - -type Props = { - fileName?: string; - progress?: number; - onUpload: (file: File) => void; -}; - -export const UploadBox = ({ fileName, progress, onUpload }: Props) => { - const [error, setError] = useState(null); - - const onDrop = (acceptedFiles: File[]) => { - acceptedFiles.forEach(onUpload); - }; - - const { isDragActive, getRootProps, getInputProps } = useDropzone({ - accept: { - 'application/zip': ['.zip'], - 'application/gzip': ['.tar.gz'], - }, - maxFiles: 1, - maxSize: 3 * 1024 * 1024 * 1024, // 3GB - disabled: Boolean(fileName), - onDrop, - onError: (err) => setError(err.message), - onDropRejected: () => setError('File type not supported'), - onDropAccepted: () => setError(null), - }); - - return ( - <> - - {fileName && progress !== undefined ? ( - - - {progress === 100 && } - - {fileName} - - - - - {progress}% - - - ) : ( - - - {isDragActive ? ( - 'Drop the file here ...' - ) : ( - <> - Drag and drop pier or click here - - )} - - )} - - {error && {error}} - - ); -}; diff --git a/shared/src/onboarding/dialogs/UploadId/UploadIdDialog.tsx b/shared/src/onboarding/dialogs/UploadId/UploadIdDialog.tsx deleted file mode 100644 index 42d6c216f5..0000000000 --- a/shared/src/onboarding/dialogs/UploadId/UploadIdDialog.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as Yup from 'yup'; - -import { OnboardDialog } from '../../components/OnboardDialog'; -import { UploadIdDialogBody } from './UploadIdDialogBody'; - -const UploadIdSchema = Yup.object().shape({ - uploaded: Yup.boolean().oneOf([true]), - uploading: Yup.boolean().oneOf([false]), -}); - -type Props = { - fileName?: string; - progress?: number; - error?: string; - hint?: string; - onUpload: (file: File) => Promise; - onBack: () => void; - onNext: () => Promise; -}; - -export const UploadIdDialog = ({ - fileName, - progress, - error, - hint, - onUpload, - onBack, - onNext, -}: Props) => ( - - } - onBack={onBack} - onNext={onNext} - /> -); diff --git a/shared/src/onboarding/dialogs/UploadId/UploadIdDialogBody.tsx b/shared/src/onboarding/dialogs/UploadId/UploadIdDialogBody.tsx deleted file mode 100644 index 69f7683d10..0000000000 --- a/shared/src/onboarding/dialogs/UploadId/UploadIdDialogBody.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { useFormikContext } from 'formik'; - -import { Anchor, ErrorBox, Flex, InfoBox } from '@holium/design-system/general'; - -import { - OnboardDialogDescription, - OnboardDialogTitle, -} from '../../components/OnboardDialog.styles'; -import { UploadBox } from './UploadBox'; - -type UploadIdFields = { - uploaded: boolean; - uploading: boolean; -}; - -type Props = { - fileName?: string; - progress?: number; - error?: string; - hint?: string; - onUpload: (file: File) => Promise; -}; - -export const UploadIdDialogBody = ({ - fileName, - progress, - error, - hint, - onUpload, -}: Props) => { - const { - values: { uploaded, uploading }, - setFieldValue, - } = useFormikContext(); - - const handleUpload = async (file: File) => { - if (uploading || uploaded) return; - - setFieldValue('uploading', true); - - const result = await onUpload(file); - - if (result) setFieldValue('uploaded', true); - - setFieldValue('uploading', false); - }; - - return ( - - Upload Pier - - Upload a compressed archive of your existing pier in a .zip{' '} - or .tar.gz format which was created after the ship was shut - down at its current location. - - - Read{' '} - - our guide - {' '} - to learn more. - - - - Planets only - Max file size: 3 GB - - {error && {error}} - {hint && {hint}} - - ); -}; diff --git a/shared/src/onboarding/dialogs/UploadID.WEB.stories.tsx b/shared/src/onboarding/dialogs/UploadPier.WEB.stories.tsx similarity index 63% rename from shared/src/onboarding/dialogs/UploadID.WEB.stories.tsx rename to shared/src/onboarding/dialogs/UploadPier.WEB.stories.tsx index 3034741a54..b68329f7ba 100644 --- a/shared/src/onboarding/dialogs/UploadID.WEB.stories.tsx +++ b/shared/src/onboarding/dialogs/UploadPier.WEB.stories.tsx @@ -5,11 +5,10 @@ import { CreateAccountDialog, GetOnRealmDialog, PaymentDialog, - uploadErrors, VerifyEmailDialog, } from '../onboarding'; -import { UploadIdDialog } from './UploadId/UploadIdDialog'; -import { UploadIdDisclaimerDialog } from './UploadIdDisclaimer/UploadIdDisclaimerDialog'; +import { UploadPierDialog } from './UploadPier/UploadPierDialog'; +import { UploadPierDisclaimerDialog } from './UploadPierDisclaimer/UploadPierDisclaimerDialog'; import { OnboardingDialogWrapper, thirdEarthMockProduct } from './util'; export default { @@ -23,7 +22,7 @@ export const GetOnRealmDialogStory: ComponentStory< {}} - onUploadId={() => {}} + onUploadPier={() => {}} onAlreadyHaveAccount={() => {}} /> @@ -58,20 +57,20 @@ export const VerifyEmailDialogStory: ComponentStory< VerifyEmailDialogStory.storyName = '2. Verify email'; -export const UploadIdDisclaimerDialogStory: ComponentStory< +export const UploadPierDisclaimerDialogStory: ComponentStory< typeof PaymentDialog > = () => ( - {}} onNext={() => Promise.resolve(false)} /> ); -UploadIdDisclaimerDialogStory.storyName = '3. Disclaimer'; +UploadPierDisclaimerDialogStory.storyName = '3. Disclaimer'; -export const UploadIdPaymentDialogStory: ComponentStory< +export const UploadPierPaymentDialogStory: ComponentStory< typeof PaymentDialog > = () => ( @@ -95,87 +94,88 @@ export const UploadIdPaymentDialogStory: ComponentStory< ); -UploadIdPaymentDialogStory.storyName = '4. Payment'; +UploadPierPaymentDialogStory.storyName = '4. Payment'; -export const UploadIdDialogStory: ComponentStory< - typeof UploadIdDialog +export const UploadPierGeneratingDialogStory: ComponentStory< + typeof UploadPierDialog > = () => ( - Promise.resolve(false)} + {}} onNext={() => Promise.resolve(false)} /> ); -UploadIdDialogStory.storyName = '5.1. Upload Pier'; +UploadPierGeneratingDialogStory.storyName = '5.1. Upload Pier – Generating'; -export const UploadIdUploadingDialogStory: ComponentStory< - typeof UploadIdDialog +export const UploadPierDialogStory: ComponentStory< + typeof UploadPierDialog > = () => ( - Promise.resolve(false)} + {}} onNext={() => Promise.resolve(false)} /> ); -UploadIdUploadingDialogStory.storyName = '5.2. Upload Pier – Uploading'; +UploadPierDialogStory.storyName = '5.2. Upload Pier'; -export const UploadIdStuckDialogStory: ComponentStory< - typeof UploadIdDialog +export const UploadPierUploadingDialogStory: ComponentStory< + typeof UploadPierDialog > = () => ( - Promise.resolve(false)} + {}} onNext={() => Promise.resolve(false)} /> ); -UploadIdStuckDialogStory.storyName = '5.3. Upload Pier – Stuck?'; +UploadPierUploadingDialogStory.storyName = '5.3. Upload Pier – Uploading'; -export const UploadIdErrorDialogStory: ComponentStory< - typeof UploadIdDialog +export const UploadPierErrorDialogStory: ComponentStory< + typeof UploadPierDialog > = () => ( - Promise.resolve(false)} + {}} onNext={() => Promise.resolve(false)} /> ); -UploadIdErrorDialogStory.storyName = '5.4. Upload Pier – Error'; +UploadPierErrorDialogStory.storyName = '5.4. Upload Pier – Error'; -export const UploadIdDoneDialogStory: ComponentStory< - typeof UploadIdDialog +export const UploadPierDoneDialogStory: ComponentStory< + typeof UploadPierDialog > = () => ( - Promise.resolve(false)} + {}} onNext={() => Promise.resolve(false)} /> ); -UploadIdDoneDialogStory.storyName = '5.5. Upload an ID – Uploaded'; +UploadPierDoneDialogStory.storyName = '5.5. Upload Pier – Uploaded'; export const BYOPBootingDialogStory: ComponentStory< typeof BootingDialog @@ -183,7 +183,7 @@ export const BYOPBootingDialogStory: ComponentStory< Promise.resolve(false)} /> @@ -197,7 +197,7 @@ export const BYOPBootingDialogCompleteStory: ComponentStory< Promise.resolve(false)} /> diff --git a/shared/src/onboarding/dialogs/UploadPier/UploadPierDialog.tsx b/shared/src/onboarding/dialogs/UploadPier/UploadPierDialog.tsx new file mode 100644 index 0000000000..97499a8dfc --- /dev/null +++ b/shared/src/onboarding/dialogs/UploadPier/UploadPierDialog.tsx @@ -0,0 +1,32 @@ +import * as Yup from 'yup'; + +import { OnboardDialog } from '../../components/OnboardDialog'; +import { UploadPierDialogBody } from './UploadPierDialogBody'; + +type Props = { + ipAddress?: string; + password?: string; + error?: string; + onBack: () => void; +}; + +export const UploadPierDialog = ({ + ipAddress, + password, + error, + onBack, +}: Props) => ( + + } + onBack={onBack} + hideNextButton + /> +); diff --git a/shared/src/onboarding/dialogs/UploadPier/UploadPierDialogBody.tsx b/shared/src/onboarding/dialogs/UploadPier/UploadPierDialogBody.tsx new file mode 100644 index 0000000000..add3c2c393 --- /dev/null +++ b/shared/src/onboarding/dialogs/UploadPier/UploadPierDialogBody.tsx @@ -0,0 +1,86 @@ +import { Anchor, ErrorBox, Flex } from '@holium/design-system/general'; + +import { + OnboardDialogDescription, + OnboardDialogTitle, +} from '../../components/OnboardDialog.styles'; +import { GrayBox } from '../GetRealm/GetRealmDialogBody.styles'; + +type Props = { + ipAddress?: string; + password?: string; + error?: string; +}; + +export const UploadPierDialogBody = ({ ipAddress, password, error }: Props) => ( + + Upload Pier with SFTP + + Upload a compressed archive of your existing pier to the SFTP server. This + page will automatically redirect once the upload is complete. + + + Read the{' '} + + SFTP guide + {' '} + step-by-step instructions. + + + {ipAddress && password ? ( + + + + IP Address + + + {ipAddress} + + + + + Password + + + {password} + + + + ) : ( + + Preparing SFTP (this may take a minute)... + + )} + + + Planets only + Max file size: 3 GB + + {error && {error}} + +); diff --git a/shared/src/onboarding/dialogs/UploadIdDisclaimer/UploadIdDisclaimerDialog.tsx b/shared/src/onboarding/dialogs/UploadPierDisclaimer/UploadPierDisclaimerDialog.tsx similarity index 51% rename from shared/src/onboarding/dialogs/UploadIdDisclaimer/UploadIdDisclaimerDialog.tsx rename to shared/src/onboarding/dialogs/UploadPierDisclaimer/UploadPierDisclaimerDialog.tsx index 6bfb8c625a..52183a5733 100644 --- a/shared/src/onboarding/dialogs/UploadIdDisclaimer/UploadIdDisclaimerDialog.tsx +++ b/shared/src/onboarding/dialogs/UploadPierDisclaimer/UploadPierDisclaimerDialog.tsx @@ -1,9 +1,9 @@ import * as Yup from 'yup'; import { OnboardDialog } from '../../components/OnboardDialog'; -import { UploadIdDisclaimerDialogBody } from './UploadIdDisclaimerDialogBody'; +import { UploadPierDisclaimerDialogBody } from './UploadPierDisclaimerDialogBody'; -const UploadIdDisclaimerSchema = Yup.object().shape({ +const UploadPierDisclaimerSchema = Yup.object().shape({ iHaveRead: Yup.boolean().oneOf([true]), }); @@ -12,11 +12,11 @@ type Props = { onNext: () => Promise; }; -export const UploadIdDisclaimerDialog = ({ onBack, onNext }: Props) => ( +export const UploadPierDisclaimerDialog = ({ onBack, onNext }: Props) => ( } + validationSchema={UploadPierDisclaimerSchema} + body={} onBack={onBack} onNext={onNext} /> diff --git a/shared/src/onboarding/dialogs/UploadIdDisclaimer/UploadIdDisclaimerDialogBody.tsx b/shared/src/onboarding/dialogs/UploadPierDisclaimer/UploadPierDisclaimerDialogBody.tsx similarity index 59% rename from shared/src/onboarding/dialogs/UploadIdDisclaimer/UploadIdDisclaimerDialogBody.tsx rename to shared/src/onboarding/dialogs/UploadPierDisclaimer/UploadPierDisclaimerDialogBody.tsx index 3d2cc2da4f..d76556c13b 100644 --- a/shared/src/onboarding/dialogs/UploadIdDisclaimer/UploadIdDisclaimerDialogBody.tsx +++ b/shared/src/onboarding/dialogs/UploadPierDisclaimer/UploadPierDisclaimerDialogBody.tsx @@ -9,15 +9,15 @@ import { } from '../../components/OnboardDialog.styles'; import { GrayBox } from '../GetRealm/GetRealmDialogBody.styles'; -type UploadIdDisclaimerFields = { +type UploadPierDisclaimerFields = { iHaveRead: boolean; }; -export const UploadIdDisclaimerDialogBody = () => { +export const UploadPierDisclaimerDialogBody = () => { const { values: { iHaveRead }, setFieldValue, - } = useFormikContext(); + } = useFormikContext(); return ( { Disclaimer - Uploading a Pier + Upload Pier with SFTP - This option is for people who want to move their existing pier with - all of its apps, subscriptions, and configurations to Holium hosting, - as opposed to purchasing a fresh ID. + This option is for technical users who want to move their existing + pier with all of its apps, subscriptions, and configurations to Holium + hosting, as opposed to purchasing a fresh ID. Required: A compressed archive of your existing pier in a{' '} .zip or .tar.gz format which was created after - the ship was shut down at its current location. + the ship was shut down at its current location. Max file size is 3GB. @@ -53,28 +53,16 @@ export const UploadIdDisclaimerDialogBody = () => { I have read through the{' '} - our guide - {' '} - and understand that I must have my Urbit updated to the latest - vere and latest OTA. + SFTP guide + + . - - IF THE PIER IS OUT OF DATE, IT WILL NOT START PROPERLY IN OUR SYSTEM. - ); }; diff --git a/shared/src/onboarding/onboarding.ts b/shared/src/onboarding/onboarding.ts index ec759dfa80..f0af75306e 100644 --- a/shared/src/onboarding/onboarding.ts +++ b/shared/src/onboarding/onboarding.ts @@ -30,7 +30,6 @@ export { SUPPORT_EMAIL_ADDRESS, } from './dialogs/AccountSupport/helpers'; export { AccountUnfinishedUploadDialog } from './dialogs/AccountUnfinishedUpload/AccountUnfinishedUploadDialog'; -export { uploadErrors } from './dialogs/AccountUnfinishedUpload/AccountUnfinishedUploadDialogBody'; export { AddIdentityDialog } from './dialogs/AddIdentity/AddIdentityDialog'; export { BootingDialog } from './dialogs/Booting/BootingDialog'; export { ChooseIdentityDialog } from './dialogs/ChooseIdentity/ChooseIdentityDialog'; @@ -47,8 +46,8 @@ export { PassportDialog } from './dialogs/Passport/PassportDialog'; export { PaymentDialog } from './dialogs/Payment/PaymentDialog'; export { ServerSelfHostingDialogBody } from './dialogs/ServerSelfHosting/ServerSelfHostingDialogBody'; export { SomethingWentWrongDialog } from './dialogs/SomethingWentWrong/SomethingWentWrongDialog'; -export { UploadIdDialog } from './dialogs/UploadId/UploadIdDialog'; -export { UploadIdDisclaimerDialog } from './dialogs/UploadIdDisclaimer/UploadIdDisclaimerDialog'; +export { UploadPierDialog } from './dialogs/UploadPier/UploadPierDialog'; +export { UploadPierDisclaimerDialog } from './dialogs/UploadPierDisclaimer/UploadPierDisclaimerDialog'; export { VerifyEmailDialog } from './dialogs/VerifyEmail/VerifyEmailDialog'; export { http } from './services/http'; export { OnboardingStorage } from './services/OnboardingStorage'; diff --git a/shared/src/onboarding/services/ThirdEarthApi.ts b/shared/src/onboarding/services/ThirdEarthApi.ts index c5e92f748f..2e91b20a4f 100644 --- a/shared/src/onboarding/services/ThirdEarthApi.ts +++ b/shared/src/onboarding/services/ThirdEarthApi.ts @@ -131,7 +131,7 @@ type ProvisionalShipEntryResponse = { invoice_id: string; }[]; -type UploadPierFileResponse = { +type PrepareSftpServerForPierUploadResponse = { patp?: string; sigil?: string; arvo_key_file?: { @@ -141,7 +141,6 @@ type UploadPierFileResponse = { sponsor?: string; planet_status?: string; product_ids?: number[]; - ship_type?: string; }; type AlertsResponse = { @@ -471,9 +470,14 @@ export class ThirdEarthApi { }); } - uploadPierFile(token: string, shipId: string, formData: FormData) { - return http( - `${this.apiBaseUrl}/user/host-ship/${shipId}`, + prepareSftpServerForPierUpload(token: string, userId: string) { + const formData = new FormData(); + formData.append('type', 'sftp'); + formData.append('desks', 'false'); + formData.append('groups', 'false'); + + return http( + `${this.apiBaseUrl}/user/host-ship/${userId}`, { method: 'POST', headers: { @@ -483,9 +487,7 @@ export class ThirdEarthApi { version: this.headersVersion, }, body: formData, - }, - // 60 minutes timeout - 3600000 + } ); } @@ -500,7 +502,7 @@ export class ThirdEarthApi { auditTrailCode?: number; } ) { - return http(`${this.apiBaseUrl}/user/raise-alarm`, { + return http(`${this.apiBaseUrl}/user/raise-alarm`, { method: 'POST', headers: this.getHeaders(token), body: JSON.stringify({ ...payload }), diff --git a/shared/src/onboarding/types/index.ts b/shared/src/onboarding/types/index.ts index 46988ee672..1793430509 100644 --- a/shared/src/onboarding/types/index.ts +++ b/shared/src/onboarding/types/index.ts @@ -100,8 +100,8 @@ type OnboardingSignupPage = | '/login' | '/verify-email' | '/choose-id' - | '/upload-id' - | '/upload-id-disclaimer' + | '/upload-pier' + | '/upload-pier-disclaimer' | '/payment' | '/booting' | '/credentials'