Show "Already have account" on first page, hide on second if they hav…

…en't already seen it
holium · Jun 19, 2023 · 0a2cdff · 0a2cdff
1 parent 72892f0
commit 0a2cdff
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 17 deletions.
diff --git a/hosting-holium-com/src/pages/create-account.tsx b/hosting-holium-com/src/pages/create-account.tsx
@@ -1,13 +1,30 @@
 import { useEffect, useState } from 'react';
 import { FormikValues } from 'formik';
+import type { GetServerSideProps } from 'next/types';
 
 import { CreateAccountDialog, OnboardingStorage } from '@holium/shared';
 
 import { Page } from '../components/Page';
 import { thirdEarthApi } from '../util/thirdEarthApi';
 import { useNavigation } from '../util/useNavigation';
 
-export default function CreateAccount() {
+type ServerSideProps = {
+  hideAlreadyHaveAccount: string;
+};
+
+export const getServerSideProps: GetServerSideProps = async ({ query }) => {
+  const hideAlreadyHaveAccount = (query.haha ?? '') as string;
+
+  return {
+    props: {
+      hideAlreadyHaveAccount: hideAlreadyHaveAccount === 'true',
+    },
+  };
+};
+
+export default function CreateAccount({
+  hideAlreadyHaveAccount,
+}: ServerSideProps) {
   const { goToPage } = useNavigation();
 
   const [prefilledEmail, setPrefilledEmail] = useState<string>();
@@ -42,9 +59,11 @@ export default function CreateAccount() {
     <Page title="Create account">
       <CreateAccountDialog
         prefilledEmail={prefilledEmail}
-        onAlreadyHaveAccount={onAlreadyHaveAccount}
         onBack={onBack}
         onNext={onNext}
+        onAlreadyHaveAccount={
+          hideAlreadyHaveAccount ? undefined : onAlreadyHaveAccount
+        }
       />
     </Page>
   );

diff --git a/hosting-holium-com/src/pages/index.tsx b/hosting-holium-com/src/pages/index.tsx
@@ -30,13 +30,21 @@ export default function GetOnRealm({ email }: Props) {
   const onUploadId = () => {
     OnboardingStorage.set({ productType: 'byop-p' });
 
-    return goToPage('/create-account');
+    return goToPage('/create-account', {
+      haha: 'true',
+    });
   };
 
   const onPurchaseId = async () => {
     OnboardingStorage.remove('productType');
 
-    return goToPage('/create-account');
+    return goToPage('/create-account', {
+      haha: 'true',
+    });
+  };
+
+  const onAlreadyHaveAccount = () => {
+    return goToPage('/login');
   };
 
   useEffect(() => {
@@ -50,6 +58,7 @@ export default function GetOnRealm({ email }: Props) {
         onPurchaseId={onPurchaseId}
         // Email query parameter means they're coming from the landing page.
         onBack={email ? onBack : undefined}
+        onAlreadyHaveAccount={onAlreadyHaveAccount}
       />
     </Page>
   );

diff --git a/hosting-holium-com/src/util/useNavigation.ts b/hosting-holium-com/src/util/useNavigation.ts
@@ -38,6 +38,7 @@ export const useNavigation = () => {
         email?: string;
         back_url?: OnboardingPage;
         redirect_url?: OnboardingPage;
+        haha?: string; // Hide "Already have an account"
       }
     ) => {
       const path =

diff --git a/shared/src/onboarding/dialogs/Booting/BootingDialog.tsx b/shared/src/onboarding/dialogs/Booting/BootingDialog.tsx
@@ -6,7 +6,7 @@ import { BootingDialogBody } from './BootingDialogBody';
 type Props = {
   logs: string[];
   isBooting: boolean;
-  isError: boolean;
+  isError?: boolean;
   onNext: () => Promise<boolean>;
 };
 

diff --git a/shared/src/onboarding/dialogs/CreateAccount/CreateAccountDialog.tsx b/shared/src/onboarding/dialogs/CreateAccount/CreateAccountDialog.tsx
@@ -18,16 +18,16 @@ const CreateAccountSchema = Yup.object().shape({
 
 type Props = {
   prefilledEmail?: string;
-  onAlreadyHaveAccount: () => void;
   onBack: () => void;
   onNext: (values: FormikValues) => Promise<boolean>;
+  onAlreadyHaveAccount?: () => void;
 };
 
 export const CreateAccountDialog = ({
   prefilledEmail,
-  onAlreadyHaveAccount,
   onBack,
   onNext,
+  onAlreadyHaveAccount,
 }: Props) => (
   <OnboardDialog
     initialValues={{

diff --git a/shared/src/onboarding/dialogs/CreateAccount/CreateAccountDialogBody.tsx b/shared/src/onboarding/dialogs/CreateAccount/CreateAccountDialogBody.tsx
@@ -17,7 +17,7 @@ type CreateAccountFields = {
 };
 
 type Props = {
-  onAlreadyHaveAccount: () => void;
+  onAlreadyHaveAccount?: () => void;
 };
 
 export const CreateAccountDialogBody = ({ onAlreadyHaveAccount }: Props) => {
@@ -83,10 +83,12 @@ export const CreateAccountDialogBody = ({ onAlreadyHaveAccount }: Props) => {
           }
         />
       </Flex>
-      <OnboardDialogDescription>
-        Already have an account?{' '}
-        <Anchor onClick={onAlreadyHaveAccount}>Log in</Anchor>.
-      </OnboardDialogDescription>
+      {onAlreadyHaveAccount && (
+        <OnboardDialogDescription>
+          Already have an account?{' '}
+          <Anchor onClick={onAlreadyHaveAccount}>Log in</Anchor>.
+        </OnboardDialogDescription>
+      )}
     </>
   );
 };
diff --git a/shared/src/onboarding/dialogs/GetOnRealm/GetOnRealmDialog.tsx b/shared/src/onboarding/dialogs/GetOnRealm/GetOnRealmDialog.tsx
@@ -6,17 +6,23 @@ type Props = {
   onBack?: () => void;
   onUploadId: () => void;
   onPurchaseId: () => void;
+  onAlreadyHaveAccount?: () => void;
 };
 
 export const GetOnRealmDialog = ({
   onBack,
   onUploadId,
   onPurchaseId,
+  onAlreadyHaveAccount,
 }: Props) => (
   <OnboardDialog
     icon={<GetIdIcon size={200} />}
     body={
-      <GetRealmDialogBody onUploadId={onUploadId} onPurchaseId={onPurchaseId} />
+      <GetRealmDialogBody
+        onUploadId={onUploadId}
+        onPurchaseId={onPurchaseId}
+        onAlreadyHaveAccount={onAlreadyHaveAccount}
+      />
     }
     onBack={onBack}
     hideNextButton

diff --git a/shared/src/onboarding/dialogs/GetOnRealm/GetOnRealmDialogBody.tsx b/shared/src/onboarding/dialogs/GetOnRealm/GetOnRealmDialogBody.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@holium/design-system/general';
+import { Anchor, Flex } from '@holium/design-system/general';
 
 import {
   OnboardDialogDescription,
@@ -14,9 +14,14 @@ import {
 type Props = {
   onUploadId: () => void;
   onPurchaseId: () => void;
+  onAlreadyHaveAccount?: () => void;
 };
 
-export const GetRealmDialogBody = ({ onUploadId, onPurchaseId }: Props) => (
+export const GetRealmDialogBody = ({
+  onUploadId,
+  onPurchaseId,
+  onAlreadyHaveAccount,
+}: Props) => (
   <Flex flexDirection="column" gap="32px">
     <Flex flexDirection="column" gap="16px">
       <OnboardDialogTitle>Get on Realm</OnboardDialogTitle>
@@ -33,5 +38,11 @@ export const GetRealmDialogBody = ({ onUploadId, onPurchaseId }: Props) => (
         <ButtonText>Upload ID</ButtonText>
       </UploadIdButton>
     </ButtonsContainer>
+    {onAlreadyHaveAccount && (
+      <OnboardDialogDescription>
+        Already have an account?{' '}
+        <Anchor onClick={onAlreadyHaveAccount}>Log in</Anchor>.
+      </OnboardDialogDescription>
+    )}
   </Flex>
 );
diff --git a/shared/src/onboarding/dialogs/Signup.WEB.stories.tsx b/shared/src/onboarding/dialogs/Signup.WEB.stories.tsx
@@ -53,7 +53,11 @@ export const GetOnRealmDialogStory: ComponentStory<
   typeof GetOnRealmDialog
 > = () => (
   <OnboardingDialogWrapper>
-    <GetOnRealmDialog onPurchaseId={() => {}} onUploadId={() => {}} />
+    <GetOnRealmDialog
+      onPurchaseId={() => {}}
+      onUploadId={() => {}}
+      onAlreadyHaveAccount={() => {}}
+    />
   </OnboardingDialogWrapper>
 );
 
@@ -64,7 +68,6 @@ export const CreateAccountDialogStory: ComponentStory<
 > = () => (
   <OnboardingDialogWrapper>
     <CreateAccountDialog
-      onAlreadyHaveAccount={() => {}}
       onBack={() => {}}
       onNext={() => Promise.resolve(false)}
     />