Refactoring HomeTour Step

Signed-off-by: ClaudeArs <[email protected]>
openwallet-foundation · Feb 7, 2025 · 87ef78a · 87ef78a
1 parent 10b51ab
commit 87ef78a
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 49 deletions.
diff --git a/packages/legacy/core/App/components/tour/CredentialOfferTourSteps.tsx b/packages/legacy/core/App/components/tour/CredentialOfferTourSteps.tsx
@@ -6,7 +6,7 @@ import { useTheme } from '../../contexts/theme'
 import { RenderProps, TourStep } from '../../contexts/tour/tour-context'
 
 import { TourBox } from './TourBox'
-import useHandleStop from '../../hooks/close-modal-tour'
+import useCloseModalTour from '../../hooks/close-modal-tour'
 import { DispatchAction } from '../../contexts/reducers/store'
 
 export const credentialOfferTourSteps: TourStep[] = [
@@ -15,18 +15,18 @@ export const credentialOfferTourSteps: TourStep[] = [
       const { currentTour, currentStep, next, stop, previous } = props
       const { t } = useTranslation()
       const { ColorPallet, TextTheme } = useTheme()
-      const handleStop = useHandleStop()
+      const closeModalTour = useCloseModalTour()
 
       return (
         <TourBox
           title={t('Tour.CredentialOffers')}
           hideLeft
           rightText={t('Tour.Done')}
-          onRight={() => handleStop(stop, DispatchAction.UPDATE_SEEN_CREDENTIAL_OFFER_TOUR)}
+          onRight={() => closeModalTour(stop, DispatchAction.UPDATE_SEEN_CREDENTIAL_OFFER_TOUR)}
           currentTour={currentTour}
           currentStep={currentStep}
           previous={previous}
-          stop={() => handleStop(stop, DispatchAction.UPDATE_SEEN_CREDENTIAL_OFFER_TOUR)}
+          stop={() => closeModalTour(stop, DispatchAction.UPDATE_SEEN_CREDENTIAL_OFFER_TOUR)}
           next={next}
         >
           <Text

diff --git a/packages/legacy/core/App/components/tour/CredentialsTourSteps.tsx b/packages/legacy/core/App/components/tour/CredentialsTourSteps.tsx
@@ -6,7 +6,7 @@ import { useTheme } from '../../contexts/theme'
 import { RenderProps, TourStep } from '../../contexts/tour/tour-context'
 
 import { TourBox } from './TourBox'
-import useHandleStop from '../../hooks/close-modal-tour'
+import useCloseModalTour from '../../hooks/close-modal-tour'
 import { DispatchAction } from '../../contexts/reducers/store'
 
 export const credentialsTourSteps: TourStep[] = [
@@ -15,18 +15,18 @@ export const credentialsTourSteps: TourStep[] = [
       const { currentTour, currentStep, next, stop, previous } = props
       const { t } = useTranslation()
       const { ColorPallet, TextTheme } = useTheme()
-      const handleStop = useHandleStop()
+      const closeModalTour = useCloseModalTour()
 
       return (
         <TourBox
           title={t('Tour.AddCredentials')}
           hideLeft
           rightText={t('Tour.Done')}
-          onRight={() => handleStop(stop, DispatchAction.UPDATE_SEEN_CREDENTIALS_TOUR)}
+          onRight={() => closeModalTour(stop, DispatchAction.UPDATE_SEEN_CREDENTIALS_TOUR)}
           currentTour={currentTour}
           currentStep={currentStep}
           previous={previous}
-          stop={() => handleStop(stop, DispatchAction.UPDATE_SEEN_CREDENTIALS_TOUR)}
+          stop={() => closeModalTour(stop, DispatchAction.UPDATE_SEEN_CREDENTIALS_TOUR)}
           next={next}
         >
           <Text

diff --git a/packages/legacy/core/App/components/tour/HomeTourSteps.tsx b/packages/legacy/core/App/components/tour/HomeTourSteps.tsx
@@ -1,42 +1,47 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Text } from 'react-native'
+import { Text, TextStyle } from 'react-native'
 
 import { useTheme } from '../../contexts/theme'
 import { RenderProps, TourStep } from '../../contexts/tour/tour-context'
 
 import { TourBox } from './TourBox'
-import useHandleStop from '../../hooks/close-modal-tour'
+import useCloseModalTour from '../../hooks/close-modal-tour'
 import { DispatchAction } from '../../contexts/reducers/store'
 
+const useCommonStyles = () => {
+  const { ColorPallet, TextTheme } = useTheme()
+
+  const textStyle: TextStyle = {
+    ...TextTheme.normal,
+    color: ColorPallet.notification.infoText,
+  }
+
+  return { textStyle }
+}
+
 export const homeTourSteps: TourStep[] = [
   {
     Render: (props: RenderProps) => {
       const { currentTour, currentStep, next, stop, previous } = props
       const { t } = useTranslation()
-      const { ColorPallet, TextTheme } = useTheme()
-      const handleStop = useHandleStop()
+      const { textStyle } = useCommonStyles()
+      const closeModalTour = useCloseModalTour()
 
       return (
         <TourBox
           title={t('Tour.AddAndShare')}
           leftText={t('Tour.Skip')}
           rightText={t('Tour.Next')}
-          onLeft={() => handleStop(stop, DispatchAction.UPDATE_SEEN_HOME_TOUR)}
+          onLeft={() => closeModalTour(stop, DispatchAction.UPDATE_SEEN_HOME_TOUR)}
           onRight={next}
           currentTour={currentTour}
           currentStep={currentStep}
           previous={previous}
-          stop={() => handleStop(stop, DispatchAction.UPDATE_SEEN_HOME_TOUR)}
+          stop={() => closeModalTour(stop, DispatchAction.UPDATE_SEEN_HOME_TOUR)}
           next={next}
         >
-          <Text
-            style={{
-              ...TextTheme.normal,
-              color: ColorPallet.notification.infoText,
-            }}
-            allowFontScaling={false}
-          >
+          <Text style={textStyle} allowFontScaling={false}>
             {t('Tour.AddAndShareDescription')}
           </Text>
         </TourBox>
@@ -47,8 +52,8 @@ export const homeTourSteps: TourStep[] = [
     Render: (props: RenderProps) => {
       const { currentTour, currentStep, next, stop, previous } = props
       const { t } = useTranslation()
-      const { ColorPallet, TextTheme } = useTheme()
-      const handleStop = useHandleStop()
+      const { textStyle } = useCommonStyles()
+      const closeModalTour = useCloseModalTour()
 
       return (
         <TourBox
@@ -60,16 +65,10 @@ export const homeTourSteps: TourStep[] = [
           currentTour={currentTour}
           currentStep={currentStep}
           next={next}
-          stop={() => handleStop(stop, DispatchAction.UPDATE_SEEN_HOME_TOUR)}
+          stop={() => closeModalTour(stop, DispatchAction.UPDATE_SEEN_HOME_TOUR)}
           previous={previous}
         >
-          <Text
-            style={{
-              ...TextTheme.normal,
-              color: ColorPallet.notification.infoText,
-            }}
-            allowFontScaling={false}
-          >
+          <Text style={textStyle} allowFontScaling={false}>
             {t('Tour.NotificationsDescription')}
           </Text>
         </TourBox>
@@ -80,29 +79,23 @@ export const homeTourSteps: TourStep[] = [
     Render: (props: RenderProps) => {
       const { currentTour, currentStep, next, stop, previous } = props
       const { t } = useTranslation()
-      const { ColorPallet, TextTheme } = useTheme()
-      const handleStop = useHandleStop()
+      const { textStyle } = useCommonStyles()
+      const closeModalTour = useCloseModalTour()
 
       return (
         <TourBox
           title={t('Tour.YourCredentials')}
           leftText={t('Tour.Back')}
           rightText={t('Tour.Done')}
           onLeft={previous}
-          onRight={() => handleStop(stop, DispatchAction.UPDATE_SEEN_HOME_TOUR)}
+          onRight={() => closeModalTour(stop, DispatchAction.UPDATE_SEEN_HOME_TOUR)}
           currentTour={currentTour}
           currentStep={currentStep}
           next={next}
-          stop={() => handleStop(stop, DispatchAction.UPDATE_SEEN_HOME_TOUR)}
+          stop={() => closeModalTour(stop, DispatchAction.UPDATE_SEEN_HOME_TOUR)}
           previous={previous}
         >
-          <Text
-            style={{
-              ...TextTheme.normal,
-              color: ColorPallet.notification.infoText,
-            }}
-            allowFontScaling={false}
-          >
+          <Text style={textStyle} allowFontScaling={false}>
             {t('Tour.YourCredentialsDescription')}
           </Text>
         </TourBox>

diff --git a/packages/legacy/core/App/components/tour/ProofRequestTourSteps.tsx b/packages/legacy/core/App/components/tour/ProofRequestTourSteps.tsx
@@ -6,7 +6,7 @@ import { useTheme } from '../../contexts/theme'
 import { RenderProps, TourStep } from '../../contexts/tour/tour-context'
 
 import { TourBox } from './TourBox'
-import useHandleStop from '../../hooks/close-modal-tour'
+import useCloseModalTour from '../../hooks/close-modal-tour'
 import { DispatchAction } from '../../contexts/reducers/store'
 
 export const proofRequestTourSteps: TourStep[] = [
@@ -15,18 +15,18 @@ export const proofRequestTourSteps: TourStep[] = [
       const { currentTour, currentStep, next, stop, previous } = props
       const { t } = useTranslation()
       const { ColorPallet, TextTheme } = useTheme()
-      const handleStop = useHandleStop()
+      const closeModalTour = useCloseModalTour()
 
       return (
         <TourBox
           title={t('Tour.ProofRequests')}
           hideLeft
           rightText={t('Tour.Done')}
-          onRight={() => handleStop(stop, DispatchAction.UPDATE_SEEN_PROOF_REQUEST_TOUR)}
+          onRight={() => closeModalTour(stop, DispatchAction.UPDATE_SEEN_PROOF_REQUEST_TOUR)}
           currentTour={currentTour}
           currentStep={currentStep}
           previous={previous}
-          stop={() => handleStop(stop, DispatchAction.UPDATE_SEEN_PROOF_REQUEST_TOUR)}
+          stop={() => closeModalTour(stop, DispatchAction.UPDATE_SEEN_PROOF_REQUEST_TOUR)}
           next={next}
         >
           <Text

diff --git a/packages/legacy/core/App/hooks/close-modal-tour.ts b/packages/legacy/core/App/hooks/close-modal-tour.ts
@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import { DispatchAction } from '../contexts/reducers/store'
 import { useStore } from '../contexts/store'
-const useHandleStop = () => {
+const useCloseModalTour = () => {
   const [, dispatch] = useStore()
 
   const handleStop = useCallback(
@@ -18,4 +18,4 @@ const useHandleStop = () => {
   return handleStop
 }
 
-export default useHandleStop
+export default useCloseModalTour
diff --git a/packages/legacy/core/App/index.ts b/packages/legacy/core/App/index.ts
@@ -55,6 +55,7 @@ import { CredentialListFooterProps } from './types/credential-list-footer'
 import { OpenIDCredentialRecordProvider } from './modules/openid/context/OpenIDCredentialRecordProvider'
 import { defaultConfig, defaultHistoryEventsLogger } from './container-impl'
 import useInitializeAgent from './hooks/initialize-agent'
+import useCloseModalTour from './hooks/close-modal-tour'
 import { DefaultScreenLayoutOptions } from './navigators/defaultLayoutOptions'
 
 export * from './navigators'
@@ -83,7 +84,13 @@ export { BifoldError } from './types/error'
 export { EventTypes } from './constants'
 export { migrateToAskar } from './utils/migration'
 export { createLinkSecretIfRequired, getAgentModules } from './utils/agent'
-export { removeExistingInvitationIfRequired, connectFromScanOrDeepLink, formatTime, useCredentialConnectionLabel, getConnectionName } from './utils/helpers'
+export {
+  removeExistingInvitationIfRequired,
+  connectFromScanOrDeepLink,
+  formatTime,
+  useCredentialConnectionLabel,
+  getConnectionName,
+} from './utils/helpers'
 export { isValidAnonCredsCredential, getCredentialIdentifiers } from './utils/credential'
 export { buildFieldsFromAnonCredsCredential } from './utils/oca'
 
@@ -173,6 +180,7 @@ export {
   NotificationListItem,
   useDefaultStackOptions,
   useInitializeAgent,
+  useCloseModalTour,
   Splash,
   Developer,
   Terms,