From 6e54a66fc0a4654a290092a1d2581dd5adaed5c1 Mon Sep 17 00:00:00 2001
From: Jan <hey@janrietveld.com>
Date: Wed, 20 Nov 2024 18:36:41 +0100
Subject: [PATCH 1/2] fix: it works

Signed-off-by: Jan <hey@janrietveld.com>
---
 apps/easypid/src/features/pid/FunkePidSetupScreen.tsx  | 9 ++++++++-
 apps/easypid/src/features/pid/PidEidCardFetchSlide.tsx | 8 ++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/apps/easypid/src/features/pid/FunkePidSetupScreen.tsx b/apps/easypid/src/features/pid/FunkePidSetupScreen.tsx
index 6cec0466..8a9541f6 100644
--- a/apps/easypid/src/features/pid/FunkePidSetupScreen.tsx
+++ b/apps/easypid/src/features/pid/FunkePidSetupScreen.tsx
@@ -43,6 +43,8 @@ export function FunkePidSetupScreen() {
   const [onIdCardPinReEnter, setOnIdCardPinReEnter] = useState<(idCardPin: string) => Promise<void>>()
   const [userName, setUserName] = useState<string>()
   const [isScanning, setIsScanning] = useState(false)
+  const [isAcquiringAccessToken, setIsAcquiringAccessToken] = useState(false)
+  const [isRetrievingCredential, setIsRetrievingCredential] = useState(false)
 
   const onEnterPin: ReceivePidUseCaseFlowOptions['onEnterPin'] = useCallback(
     (options) => {
@@ -227,12 +229,15 @@ export function FunkePidSetupScreen() {
   }
 
   const onScanningComplete = async () => {
+    if (isAcquiringAccessToken) return
     if (!receivePidUseCase) {
       toast.show('Not ready to receive PID', { customData: { preset: 'danger' } })
       pushToWallet()
       return
     }
 
+    setIsAcquiringAccessToken(true)
+
     try {
       setIdCardScanningState((state) => ({
         ...state,
@@ -261,6 +266,7 @@ export function FunkePidSetupScreen() {
   }
 
   const retrieveCredential = async () => {
+    if (isRetrievingCredential) return
     if (receivePidUseCase?.state !== 'retrieve-credential') {
       toast.show('Not ready to retrieve PID', { customData: { preset: 'danger' } })
       pushToWallet()
@@ -273,6 +279,8 @@ export function FunkePidSetupScreen() {
       return
     }
 
+    setIsRetrievingCredential(true)
+
     try {
       // Retrieve Credential
 
@@ -316,7 +324,6 @@ export function FunkePidSetupScreen() {
         pushToWallet()
         return
       }
-
       toast.show('Something went wrong', { customData: { preset: 'danger' } })
       pushToWallet()
     }
diff --git a/apps/easypid/src/features/pid/PidEidCardFetchSlide.tsx b/apps/easypid/src/features/pid/PidEidCardFetchSlide.tsx
index 1a6be849..591b44aa 100644
--- a/apps/easypid/src/features/pid/PidEidCardFetchSlide.tsx
+++ b/apps/easypid/src/features/pid/PidEidCardFetchSlide.tsx
@@ -1,4 +1,5 @@
 import { Heading, Paragraph, YStack } from '@package/ui'
+import { useWizard } from 'packages/app/src'
 import { useEffect } from 'react'
 import { OnboardingIdCardFetch } from '../onboarding/screens/id-card-fetch'
 
@@ -11,6 +12,7 @@ interface PidIdCardFetchSlideProps {
 }
 
 export function PidIdCardFetchSlide({ title, subtitle, userName, onFetch, onComplete }: PidIdCardFetchSlideProps) {
+  const { completeProgressBar } = useWizard()
   // biome-ignore lint/correctness/useExhaustiveDependencies: We fetch when this slide is mounted
   useEffect(() => {
     // We can't navigate to the next step from the SlideWizard, so we start the fetching of the credential
@@ -18,6 +20,12 @@ export function PidIdCardFetchSlide({ title, subtitle, userName, onFetch, onComp
     void onFetch()
   }, [])
 
+  useEffect(() => {
+    if (userName) {
+      completeProgressBar()
+    }
+  }, [completeProgressBar, userName])
+
   return (
     <YStack fg={1} gap="$6">
       <YStack gap="$3">

From ed7089a4b82be558d718c50119fc55c7df5919b6 Mon Sep 17 00:00:00 2001
From: Jan <hey@janrietveld.com>
Date: Thu, 21 Nov 2024 13:11:18 +0100
Subject: [PATCH 2/2] fix: allow both types

---
 .../src/features/pid/FunkePidSetupScreen.tsx  | 21 +++++++------------
 packages/app/src/components/SlideWizard.tsx   |  4 ++--
 2 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/apps/easypid/src/features/pid/FunkePidSetupScreen.tsx b/apps/easypid/src/features/pid/FunkePidSetupScreen.tsx
index 8a9541f6..47d0a5c5 100644
--- a/apps/easypid/src/features/pid/FunkePidSetupScreen.tsx
+++ b/apps/easypid/src/features/pid/FunkePidSetupScreen.tsx
@@ -43,8 +43,6 @@ export function FunkePidSetupScreen() {
   const [onIdCardPinReEnter, setOnIdCardPinReEnter] = useState<(idCardPin: string) => Promise<void>>()
   const [userName, setUserName] = useState<string>()
   const [isScanning, setIsScanning] = useState(false)
-  const [isAcquiringAccessToken, setIsAcquiringAccessToken] = useState(false)
-  const [isRetrievingCredential, setIsRetrievingCredential] = useState(false)
 
   const onEnterPin: ReceivePidUseCaseFlowOptions['onEnterPin'] = useCallback(
     (options) => {
@@ -229,15 +227,12 @@ export function FunkePidSetupScreen() {
   }
 
   const onScanningComplete = async () => {
-    if (isAcquiringAccessToken) return
     if (!receivePidUseCase) {
       toast.show('Not ready to receive PID', { customData: { preset: 'danger' } })
       pushToWallet()
       return
     }
 
-    setIsAcquiringAccessToken(true)
-
     try {
       setIdCardScanningState((state) => ({
         ...state,
@@ -266,7 +261,6 @@ export function FunkePidSetupScreen() {
   }
 
   const retrieveCredential = async () => {
-    if (isRetrievingCredential) return
     if (receivePidUseCase?.state !== 'retrieve-credential') {
       toast.show('Not ready to retrieve PID', { customData: { preset: 'danger' } })
       pushToWallet()
@@ -279,8 +273,6 @@ export function FunkePidSetupScreen() {
       return
     }
 
-    setIsRetrievingCredential(true)
-
     try {
       // Retrieve Credential
 
@@ -324,6 +316,7 @@ export function FunkePidSetupScreen() {
         pushToWallet()
         return
       }
+
       toast.show('Something went wrong', { customData: { preset: 'danger' } })
       pushToWallet()
     }
@@ -335,12 +328,12 @@ export function FunkePidSetupScreen() {
         {
           step: 'id-card-start',
           progress: 20,
-          screen: () => <PidSetupStartSlide {...getPidSetupSlideContent('id-card-start')} />,
+          screen: <PidSetupStartSlide {...getPidSetupSlideContent('id-card-start')} />,
         },
         {
           step: 'id-card-pin',
           progress: 30,
-          screen: () => (
+          screen: (
             <PidWalletPinSlide
               title="Enter your app PIN code"
               subtitle="Enter the PIN code you use to unlock your wallet."
@@ -352,7 +345,7 @@ export function FunkePidSetupScreen() {
           step: 'id-card-requested-attributes',
           progress: 40,
           backIsCancel: true,
-          screen: () => (
+          screen: (
             <PidReviewRequestSlide
               {...getPidSetupSlideContent('id-card-requested-attributes')}
               requestedAttributes={eidCardRequestedAccessRights}
@@ -363,7 +356,7 @@ export function FunkePidSetupScreen() {
           step: 'id-card-pin',
           progress: 50,
           backIsCancel: true,
-          screen: () => (
+          screen: (
             <PidEidCardPinSlide
               {...getPidSetupSlideContent('id-card-pin')}
               onEnterPin={onIdCardPinReEnter ?? onIdCardPinEnter}
@@ -374,7 +367,7 @@ export function FunkePidSetupScreen() {
           step: 'id-card-start-scan',
           progress: 60,
           backIsCancel: true,
-          screen: () => (
+          screen: (
             <PidCardScanSlide
               {...getPidSetupSlideContent('id-card-start-scan')}
               progress={idCardScanningState.progress}
@@ -393,7 +386,7 @@ export function FunkePidSetupScreen() {
           step: 'id-card-fetch',
           progress: 80,
           backIsCancel: true,
-          screen: () => (
+          screen: (
             <PidIdCardFetchSlide
               {...getPidSetupSlideContent('id-card-fetch')}
               userName={userName}
diff --git a/packages/app/src/components/SlideWizard.tsx b/packages/app/src/components/SlideWizard.tsx
index 310b3334..6fc94c05 100644
--- a/packages/app/src/components/SlideWizard.tsx
+++ b/packages/app/src/components/SlideWizard.tsx
@@ -12,7 +12,7 @@ import { WizardProvider } from './WizardContext'
 export type SlideStep = {
   step: string
   progress: number
-  screen: () => React.ReactNode
+  screen: (() => React.ReactNode) | React.ReactElement
   backIsCancel?: boolean
 }
 
@@ -161,7 +161,7 @@ export function SlideWizard({ steps, onCancel, isError, errorScreen, confirmatio
             fg={1}
             px="$4"
           >
-            <Screen />
+            {typeof Screen === 'function' ? <Screen /> : Screen}
           </ScrollableStack>
         </AnimatedStack>
       </FlexPage>