1
- import { useState , useEffect } from 'react'
2
1
import { useTranslation } from 'react-i18next'
3
2
4
- import { BEFORE_BEGINNING , BLOWOUT_SUCCESS , DT_ROUTES } from './constants'
5
3
import { WizardHeader } from '/app/molecules/WizardHeader'
6
4
7
5
import type { DropTipWizardProps } from './DropTipWizard'
8
- import type { DropTipFlowsRoute , DropTipFlowsStep , ErrorDetails } from './types'
6
+ import type { ErrorDetails } from './types'
9
7
10
8
type DropTipWizardHeaderProps = DropTipWizardProps & {
11
9
isExitInitiated : boolean
@@ -16,9 +14,6 @@ type DropTipWizardHeaderProps = DropTipWizardProps & {
16
14
17
15
export function DropTipWizardHeader ( {
18
16
confirmExit,
19
- currentStep,
20
- currentRoute,
21
- currentStepIdx,
22
17
isExitInitiated,
23
18
isFinalWizardStep,
24
19
errorDetails,
@@ -36,73 +31,14 @@ export function DropTipWizardHeader({
36
31
handleCleanUpAndClose,
37
32
} )
38
33
39
- const { totalSteps, currentStepNumber } = useSeenBlowoutSuccess ( {
40
- currentStep,
41
- currentRoute,
42
- currentStepIdx,
43
- } )
44
-
45
34
return (
46
35
< WizardHeader
47
36
title = { i18n . format ( t ( 'drop_tips' ) , 'capitalize' ) }
48
- currentStep = { currentStepNumber }
49
- totalSteps = { totalSteps }
50
37
onExit = { ! showConfirmExit ? wizardHeaderOnExit : null }
51
38
/>
52
39
)
53
40
}
54
41
55
- interface UseSeenBlowoutSuccessProps {
56
- currentStep : DropTipFlowsStep
57
- currentRoute : DropTipFlowsRoute
58
- currentStepIdx : number
59
- }
60
-
61
- interface UseSeenBlowoutSuccessResult {
62
- currentStepNumber : number | null
63
- totalSteps : number | null
64
- }
65
-
66
- // Calculate the props used for determining step count based on the route. Because blowout and drop tip are separate routes,
67
- // there's a need for state to track whether we've seen blowout, so the step counter is accurate when the drop tip route is active.
68
- export function useSeenBlowoutSuccess ( {
69
- currentStep,
70
- currentRoute,
71
- currentStepIdx,
72
- } : UseSeenBlowoutSuccessProps ) : UseSeenBlowoutSuccessResult {
73
- const [ hasSeenBlowoutSuccess , setHasSeenBlowoutSuccess ] = useState ( false )
74
-
75
- useEffect ( ( ) => {
76
- if ( currentStep === BLOWOUT_SUCCESS ) {
77
- setHasSeenBlowoutSuccess ( true )
78
- } else if ( currentStep === BEFORE_BEGINNING ) {
79
- setHasSeenBlowoutSuccess ( false )
80
- }
81
- } , [ currentStep ] )
82
-
83
- const shouldRenderStepCounter = currentRoute !== DT_ROUTES . BEFORE_BEGINNING
84
-
85
- let totalSteps : null | number
86
- if ( ! shouldRenderStepCounter ) {
87
- totalSteps = null
88
- } else if ( currentRoute === DT_ROUTES . BLOWOUT || hasSeenBlowoutSuccess ) {
89
- totalSteps = DT_ROUTES . BLOWOUT . length + DT_ROUTES . DROP_TIP . length
90
- } else {
91
- totalSteps = currentRoute . length
92
- }
93
-
94
- let currentStepNumber : null | number
95
- if ( ! shouldRenderStepCounter ) {
96
- currentStepNumber = null
97
- } else if ( hasSeenBlowoutSuccess && currentRoute === DT_ROUTES . DROP_TIP ) {
98
- currentStepNumber = DT_ROUTES . BLOWOUT . length + currentStepIdx + 1
99
- } else {
100
- currentStepNumber = currentStepIdx + 1
101
- }
102
-
103
- return { currentStepNumber, totalSteps }
104
- }
105
-
106
42
export interface UseWizardExitHeaderProps {
107
43
isFinalStep : boolean
108
44
hasInitiatedExit : boolean
0 commit comments