-
Notifications
You must be signed in to change notification settings - Fork 105
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: [IOBP-498] Adds stepper in payment's screens header (#5525)
## Short description This PR adds the stepper component in payment's screens header. ## List of changes proposed in this pull request - Added `WalltPaymentHeader` component, to handle back navigation and display `Stepper` in the payment flow screens - Added `react-navigation-view-pager` to handle navigation between screens in the payment flow - Added `currentStep` to redux store with actions and selector to read and update it. - Added `WalletPaymentMakeScreen` which displays the `ViewPager` with the payment flow screens. ## How to test Within Wallet Payment Playgrounds, start a new payment flow and check that the stepper is correctly rendered ## Previews | IOs | Android | | --- | --- | | <video src="https://github.com/pagopa/io-app/assets/6160324/71781d0f-801b-47fe-a03d-3a763285d926" /> | <video src="https://github.com/pagopa/io-app/assets/6160324/79af2822-c973-4d4c-a918-26226a033a13" /> | --------- Co-authored-by: Martino Cesari Tomba <[email protected]>
- Loading branch information
Showing
14 changed files
with
197 additions
and
112 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
70 changes: 70 additions & 0 deletions
70
ts/features/payments/payment/components/WalletPaymentHeader.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import { | ||
| ActionProp, | ||
| HeaderSecondLevel, | ||
| Stepper, | ||
| VSpacer | ||
| } from "@pagopa/io-app-design-system"; | ||
| import React from "react"; | ||
| import { useStartSupportRequest } from "../../../../hooks/useStartSupportRequest"; | ||
| import I18n from "../../../../i18n"; | ||
| import { useIONavigation } from "../../../../navigation/params/AppParamsList"; | ||
| import { useIODispatch } from "../../../../store/hooks"; | ||
| import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; | ||
| import { useWalletPaymentGoBackHandler } from "../hooks/useWalletPaymentGoBackHandler"; | ||
| import { walletPaymentSetCurrentStep } from "../store/actions/orchestration"; | ||
| import { useHardwareBackButton } from "../../../../hooks/useHardwareBackButton"; | ||
| import { WALLET_PAYMENT_STEP_MAX } from "../store/reducers"; | ||
|
|
||
| type WalletPaymentHeaderProps = { | ||
| currentStep: number; | ||
| }; | ||
|
|
||
| const WalletPaymentHeader = ({ currentStep }: WalletPaymentHeaderProps) => { | ||
| const navigation = useIONavigation(); | ||
| const dispatch = useIODispatch(); | ||
| const goBackHandler = useWalletPaymentGoBackHandler(); | ||
|
|
||
| const startSupportRequest = useStartSupportRequest({ | ||
| faqCategories: ["payment"], | ||
| contextualHelp: emptyContextualHelp | ||
| }); | ||
|
|
||
| const handleGoBack = React.useCallback(() => { | ||
| if (currentStep === 1 && goBackHandler) { | ||
| return goBackHandler(); | ||
| } | ||
|
|
||
| if (currentStep === 1) { | ||
| return navigation.goBack(); | ||
| } | ||
|
|
||
| dispatch(walletPaymentSetCurrentStep(currentStep - 1)); | ||
| }, [navigation, dispatch, goBackHandler, currentStep]); | ||
|
|
||
| useHardwareBackButton(() => { | ||
| handleGoBack(); | ||
| return true; | ||
| }); | ||
|
|
||
| return ( | ||
| <> | ||
| <HeaderSecondLevel | ||
| title="" | ||
| type="singleAction" | ||
| goBack={handleGoBack} | ||
| backAccessibilityLabel={I18n.t("global.buttons.back")} | ||
| firstAction={{ | ||
| icon: "help" as ActionProp["icon"], | ||
| onPress: startSupportRequest, | ||
| accessibilityLabel: I18n.t( | ||
| "global.accessibility.contextualHelp.open.label" | ||
| ) | ||
| }} | ||
| /> | ||
| <Stepper steps={WALLET_PAYMENT_STEP_MAX} currentStep={currentStep} /> | ||
| <VSpacer size={16} /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export { WalletPaymentHeader }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
ts/features/payments/payment/screens/WalletPaymentMakeScreen.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import React from "react"; | ||
| import { StyleSheet, View } from "react-native"; | ||
| import PagerView from "react-native-pager-view"; | ||
| import { useIOSelector } from "../../../../store/hooks"; | ||
| import { WalletPaymentHeader } from "../components/WalletPaymentHeader"; | ||
| import { selectWalletPaymentCurrentStep } from "../store/selectors"; | ||
| import { WalletPaymentConfirmScreen } from "./WalletPaymentConfirmScreen"; | ||
| import { WalletPaymentPickMethodScreen } from "./WalletPaymentPickMethodScreen"; | ||
| import { WalletPaymentPickPspScreen } from "./WalletPaymentPickPspScreen"; | ||
|
|
||
| const WalletPaymentMakeScreen = () => { | ||
| const ref = React.useRef<PagerView>(null); | ||
| const currentStep = useIOSelector(selectWalletPaymentCurrentStep); | ||
|
|
||
| React.useEffect(() => { | ||
| ref.current?.setPage(currentStep - 1); | ||
| }, [ref, currentStep]); | ||
|
|
||
| return ( | ||
| <> | ||
| <WalletPaymentHeader currentStep={currentStep} /> | ||
| <PagerView | ||
| style={styles.pagerView} | ||
| initialPage={0} | ||
| ref={ref} | ||
| scrollEnabled={false} | ||
| > | ||
| <View key="1"> | ||
| <WalletPaymentPickMethodScreen /> | ||
| </View> | ||
| <View key="2"> | ||
| <WalletPaymentPickPspScreen /> | ||
| </View> | ||
| <View key="3"> | ||
| <WalletPaymentConfirmScreen /> | ||
| </View> | ||
| </PagerView> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| pagerView: { | ||
| flex: 1 | ||
| } | ||
| }); | ||
|
|
||
| export { WalletPaymentMakeScreen }; |
Oops, something went wrong.