🚸 app: set account creation as primary onboarding action

co-authored-by: danilo neves cruz <[email protected]>
exactly · Dec 11, 2024 · c6b9bf2 · c6b9bf2
1 parent 58475fe
commit c6b9bf2
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 18 deletions.
diff --git a/.changeset/silver-emus-applaud.md b/.changeset/silver-emus-applaud.md
@@ -0,0 +1,5 @@
+---
+"@exactly/mobile": patch
+---
+
+🚸 set account creation as primary onboarding action
diff --git a/src/components/onboarding/Carousel.tsx b/src/components/onboarding/Carousel.tsx
@@ -1,5 +1,5 @@
 import { Passkey } from "@exactly/common/validation";
-import { ArrowRight } from "@tamagui/lucide-icons";
+import { Key } from "@tamagui/lucide-icons";
 import { useMutation } from "@tanstack/react-query";
 import { router } from "expo-router";
 import React, { type FC, useCallback, useEffect, useRef, useState } from "react";
@@ -153,7 +153,6 @@ export default function Carousel() {
           contentContainerStyle={containerStyle}
         />
       </View>
-
       <View
         padded
         flexGrow={1}
@@ -166,7 +165,6 @@ export default function Carousel() {
           <View flexDirection="row" justifyContent="center">
             <Pagination length={pages.length} x={offsetX} progress={progress} />
           </View>
-
           <View flexDirection="column" gap="$s5">
             <Text emphasized title brand centered>
               {title}
@@ -186,32 +184,33 @@ export default function Carousel() {
               )}
             </View>
           </View>
-
           <View alignItems="stretch" alignSelf="stretch" gap="$s5">
             <View flexDirection="row" alignSelf="stretch">
               <ActionButton
+                disabled={isPending || isConnecting}
                 isLoading={isPending || isConnecting}
                 loadingContent="Logging in..."
                 onPress={() => {
-                  recoverAccount();
+                  if (isPending || isConnecting) return;
+                  router.push("../onboarding/(passkeys)/passkeys");
                 }}
-                iconAfter={<ArrowRight color="$interactiveOnBaseBrandDefault" fontWeight="bold" />}
+                iconAfter={<Key color="$interactiveOnBaseBrandDefault" fontWeight="bold" />}
               >
-                Log in
+                Create an account
               </ActionButton>
             </View>
-
             <View flexDirection="row" justifyContent="center">
               <Pressable
                 hitSlop={ms(15)}
                 onPress={() => {
-                  router.push("../onboarding/(passkeys)/passkeys");
+                  if (isPending) return;
+                  recoverAccount();
                 }}
               >
                 <Text fontSize={ms(13)} textAlign="center" color="$uiNeutralSecondary">
-                  New here?&nbsp;
+                  Already have an account?&nbsp;
                   <Text emphasized color="$interactiveBaseBrandDefault">
-                    Create an account
+                    Log in
                   </Text>
                 </Text>
               </Pressable>

diff --git a/src/components/onboarding/Passkeys.tsx b/src/components/onboarding/Passkeys.tsx
@@ -80,7 +80,6 @@ export default function Passkeys() {
               <PasskeysImage width="100%" height="100%" />
             </View>
           </View>
-
           <View gap="$s5" justifyContent="center">
             <Text emphasized title brand centered>
               A secure and easy way to access your account
@@ -91,7 +90,6 @@ export default function Passkeys() {
             </Text>
           </View>
         </View>
-
         <View alignItems="stretch" alignSelf="stretch">
           <View flexDirection="row" alignSelf="stretch" justifyContent="center">
             <Text fontSize={ms(11)} color="$uiNeutralPlaceholder">
@@ -101,7 +99,6 @@ export default function Passkeys() {
               Terms & Conditions
             </Text>
           </View>
-
           <View>
             <View flexDirection="row" alignSelf="stretch">
               <ActionButton
@@ -110,7 +107,13 @@ export default function Passkeys() {
                 marginBottom="$s5"
                 isLoading={isPending || isConnecting}
                 loadingContent="Creating account..."
-                iconAfter={<Key size={ms(20)} color="$interactiveOnBaseBrandDefault" fontWeight="bold" />}
+                iconAfter={
+                  <Key
+                    size={ms(20)}
+                    color={isPending ? "$interactiveOnDisabled" : "$interactiveOnBaseBrandDefault"}
+                    fontWeight="bold"
+                  />
+                }
                 disabled={isPending}
                 onPress={() => {
                   createAccount();
@@ -119,7 +122,6 @@ export default function Passkeys() {
                 Set passkey and create account
               </ActionButton>
             </View>
-
             <View flexDirection="row" justifyContent="center">
               <Pressable onPress={learnMore}>
                 <Text textAlign="center" fontSize={ms(13)} fontWeight="bold" color="$interactiveBaseBrandDefault">

diff --git a/src/components/shared/ActionButton.tsx b/src/components/shared/ActionButton.tsx
@@ -4,17 +4,24 @@ import { Spinner } from "tamagui";
 import Button from "./Button";
 
 export default function ActionButton({
+  disabled = false,
   isLoading = false,
   loadingContent = "Loading...",
   ...rest
-}: React.ComponentProps<typeof Button> & { isLoading?: boolean; loadingContent?: string }) {
+}: React.ComponentProps<typeof Button> & { disabled?: boolean; isLoading?: boolean; loadingContent?: string }) {
   return (
     <Button
       contained
       main
       spaced
       {...rest}
-      iconAfter={isLoading ? <Spinner color="$interactiveOnBaseBrandDefault" /> : rest.iconAfter}
+      iconAfter={
+        isLoading ? (
+          <Spinner color={disabled ? "$interactiveOnDisabled" : "$interactiveOnBaseBrandDefault"} />
+        ) : (
+          rest.iconAfter
+        )
+      }
     >
       {isLoading ? loadingContent : (rest.children ?? rest.content)}
     </Button>