Skip to content

Commit

Permalink
feat(Bonus Pagamenti Digitali): [#175329974] Test enable/disable bpd …
Browse files Browse the repository at this point in the history
…on payment method (#2304)

* draft store action reducers

* wip

* complete reducer for bpdPaymentMethodActivation

* wip

* add update logic

* [#175010541] draft layout

* wip

* poc pot!

* rework store

* schedule retry

* wip retry

* better focus handling

* clean code

* refinements

* renaming

* move style to styles

* EnrollPaymentMethodScreen static content

* link to business logic

* add comment

* [#175329974] Add TMPBpdScreen

* fix typescript

* fix test fail

* [#174794326,174794981] support get payment status

* [#174794326,174794981] support update (enroll + delete) payment status

* support 409 http response status code

* use const for loadingState

* fix merge

* [#175329974] sync activationDate&deactivationDate with local type definition

Co-authored-by: Matteo Boschi <mbmaken@gmail.com>
  • Loading branch information
fabriziofff and Undermaken authored Oct 23, 2020
1 parent b26fe2d commit 37938e2
Show file tree
Hide file tree
Showing 7 changed files with 169 additions and 16 deletions.
8 changes: 8 additions & 0 deletions ts/features/bonus/bpd/navigation/action/bpdTestNav.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
// TODO: remove after the introduction of the bpd detail screen
import { NavigationActions } from "react-navigation";
import BPD_ROUTES from "../routes";

export const navigateToBpdTestScreen = () =>
NavigationActions.navigate({
routeName: BPD_ROUTES.TEST
});
5 changes: 5 additions & 0 deletions ts/features/bonus/bpd/navigation/navigator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import EnrollPaymentMethodsScreen from "../screens/onboarding/EnrollPaymentMetho
import LoadActivateBpdScreen from "../screens/onboarding/LoadActivateBpdScreen";
import LoadBpdActivationStatus from "../screens/onboarding/LoadBpdActivationStatus";
import NoPaymentMethodsAvailableScreen from "../screens/onboarding/NoPaymentMethodsAvailableScreen";
import TMPBpdScreen from "../screens/test/TMPBpdScreen";
import BPD_ROUTES from "./routes";

const BpdNavigator = createStackNavigator(
Expand All @@ -30,6 +31,10 @@ const BpdNavigator = createStackNavigator(
},
[BPD_ROUTES.IBAN]: {
screen: MainIbanScreen
},
// TODO: remove after the introduction of the bpd detail screen
[BPD_ROUTES.TEST]: {
screen: TMPBpdScreen
}
},
{
Expand Down
4 changes: 3 additions & 1 deletion ts/features/bonus/bpd/navigation/routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ const BPD_ROUTES = {
ENROLL_PAYMENT_METHODS: "BPD_ENROLL_PAYMENT_METHODS",
NO_PAYMENT_METHODS: "BPD_NO_PAYMENT_METHODS"
},
IBAN: "BPD_IBAN"
IBAN: "BPD_IBAN",
// TODO: remove after the introduction of the bpd detail screen
TEST: "BPD_TEST"
};

export default BPD_ROUTES;
134 changes: 134 additions & 0 deletions ts/features/bonus/bpd/screens/test/TMPBpdScreen.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
import * as pot from "italia-ts-commons/lib/pot";
import { View } from "native-base";
import { useEffect } from "react";
import * as React from "react";
import { SafeAreaView, ScrollView } from "react-native";
import { connect } from "react-redux";
import { Dispatch } from "redux";
import { Body } from "../../../../../components/core/typography/Body";
import { H1 } from "../../../../../components/core/typography/H1";
import { Label } from "../../../../../components/core/typography/Label";
import { LabelSmall } from "../../../../../components/core/typography/LabelSmall";
import { IOStyles } from "../../../../../components/core/variables/IOStyles";
import BaseScreenComponent from "../../../../../components/screens/BaseScreenComponent";
import FooterWithButtons from "../../../../../components/ui/FooterWithButtons";
import { GlobalState } from "../../../../../store/reducers/types";
import { walletsSelector } from "../../../../../store/reducers/wallet/wallets";
import { Wallet } from "../../../../../types/pagopa";
import { cancelButtonProps } from "../../../bonusVacanze/components/buttons/ButtonConfigurations";
import { PaymentMethodBpdList } from "../../components/PaymentMethodBpdList";
import {
fold,
isReady,
isUndefined,
RemoteValue
} from "../../model/RemoteValue";
import { bpdLoadActivationStatus } from "../../store/actions/details";
import { bpdDeleteUserFromProgram } from "../../store/actions/onboarding";
import { bpdEnabledSelector } from "../../store/reducers/details/activation";

export type Props = ReturnType<typeof mapDispatchToProps> &
ReturnType<typeof mapStateToProps>;

const renderBpdActive = (value: RemoteValue<boolean, Error>) =>
fold(
() => <LabelSmall color={"bluegrey"}>Sconosciuta</LabelSmall>,
() => <LabelSmall color={"bluegrey"}>In caricamento</LabelSmall>,
active => (
<LabelSmall color={active ? "blue" : "red"}>
{active ? "Attiva" : "Non attiva"}
</LabelSmall>
),
_ => <LabelSmall color={"red"}>Errore durante il caricamento</LabelSmall>
)(value);

const renderPaymentMethod = (
potWallets: pot.Pot<ReadonlyArray<Wallet>, Error>
) =>
pot.fold(
potWallets,
// TODO: handle error, loading with spinner if needed
() => (
<LabelSmall color={"bluegrey"}>
Metodi di pagamento sconosciuti
</LabelSmall>
),
() => (
<LabelSmall color={"bluegrey"}>
Metodi di pagamento in caricamento
</LabelSmall>
),
_ => null,
_ => (
<LabelSmall color={"red"}>
Errore nel recuperare i metodi di pagamento
</LabelSmall>
),
value => <PaymentMethodBpdList paymentList={value} />,
value => <PaymentMethodBpdList paymentList={value} />,
value => <PaymentMethodBpdList paymentList={value} />,
value => <PaymentMethodBpdList paymentList={value} />
);

/**
* A temp screen created to allow the test of some bpd functionalities waiting for the detail screen.
* TODO: remove after bpd detail screen
* @constructor
*/
const TmpBpdScreen: React.FunctionComponent<Props> = props => {
const bpdActive = renderBpdActive(props.bpdActive);

useEffect(() => {
if (isUndefined(props.bpdActive)) {
props.loadBpdActivation();
}
}, []);

return (
<BaseScreenComponent goBack={true} headerTitle={"Test Bpd"}>
<SafeAreaView style={IOStyles.flex}>
<View style={[IOStyles.horizontalContentPadding, IOStyles.flex]}>
<ScrollView>
<View spacer={true} large={true} />
<H1>Test bpd screen</H1>
<View spacer={true} large={true} />
<Body>La tua iscrizione al cashback è: {bpdActive}</Body>
<View spacer={true} large={true} />
{isReady(props.bpdActive) && props.bpdActive.value ? (
<>
<Label color={"bluegrey"}>Metodi di pagamento:</Label>
{renderPaymentMethod(props.potWallets)}
</>
) : (
<Body>
Iscriviti al cashback per visualizzare la lista dei metodi di
pagamento
</Body>
)}
</ScrollView>
</View>
{isReady(props.bpdActive) && props.bpdActive.value && (
<FooterWithButtons
type={"SingleButton"}
leftButton={cancelButtonProps(
props.cancelBpd,
"Cancella la tua iscrizione al cashback"
)}
/>
)}
</SafeAreaView>
</BaseScreenComponent>
);
};

const mapDispatchToProps = (dispatch: Dispatch) => ({
loadBpdActivation: () => dispatch(bpdLoadActivationStatus.request()),
cancelBpd: () => dispatch(bpdDeleteUserFromProgram.request())
});

const mapStateToProps = (state: GlobalState) => ({
bpdActive: bpdEnabledSelector(state),
potWallets: walletsSelector(state)
});

export default connect(mapStateToProps, mapDispatchToProps)(TmpBpdScreen);
4 changes: 2 additions & 2 deletions ts/features/bonus/bpd/store/actions/paymentMethods.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ export type BpdPmActivationStatus = "active" | "inactive" | "notActivable";
export type BpdPaymentMethodActivation = {
hPan: HPan;
activationStatus: BpdPmActivationStatus;
activationDate?: Date;
deactivationDate?: Date;
activationDate?: string;
deactivationDate?: string;
};

/**
Expand Down
11 changes: 1 addition & 10 deletions ts/screens/profile/ProfileMainScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import { AlertModal } from "../../components/ui/AlertModal";
import { LightModalContextInterface } from "../../components/ui/LightModal";
import Markdown from "../../components/ui/Markdown";
import Switch from "../../components/ui/Switch";
import { bpdEnabled, isPlaygroundsEnabled } from "../../config";
import { isPlaygroundsEnabled } from "../../config";
import I18n from "../../i18n";
import ROUTES from "../../navigation/routes";
import {
Expand Down Expand Up @@ -52,7 +52,6 @@ import { getAppVersion } from "../../utils/appVersion";
import { clipboardSetStringWithFeedback } from "../../utils/clipboard";
import { isDevEnv } from "../../utils/environment";
import { setStatusBarColorAndBackground } from "../../utils/statusBar";
import { bpdDeleteUserFromProgram } from "../../features/bonus/bpd/store/actions/onboarding";

type OwnProps = Readonly<{
navigation: NavigationScreenProp<NavigationState>;
Expand Down Expand Up @@ -484,13 +483,6 @@ class ProfileMainScreen extends React.PureComponent<Props, State> {
this.props.dispatchSessionExpired,
true
)}

{bpdEnabled &&
this.debugListItem(
"Leave BPD",
this.props.dispatchLeaveBpd,
true
)}
</React.Fragment>
)}
</React.Fragment>
Expand Down Expand Up @@ -556,7 +548,6 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
preferencesPagoPaTestEnvironmentSetEnabled({ isPagoPATestEnabled })
),
dispatchSessionExpired: () => dispatch(sessionExpired()),
dispatchLeaveBpd: () => dispatch(bpdDeleteUserFromProgram.request()),
dispatchPreferencesExperimentalFeaturesSetEnabled: (enabled: boolean) =>
dispatch(preferencesExperimentalFeaturesSetEnabled(enabled))
});
Expand Down
19 changes: 16 additions & 3 deletions ts/screens/wallet/WalletHomeScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { fromNullable, fromPredicate, none } from "fp-ts/lib/Option";
import * as pot from "italia-ts-commons/lib/pot";
import { Content, Text, View } from "native-base";
import { Button, Content, Text, View } from "native-base";
import * as React from "react";
import { BackHandler, Image, RefreshControl, StyleSheet } from "react-native";
import {
Expand All @@ -12,6 +12,7 @@ import { connect } from "react-redux";
import { BonusActivationWithQrCode } from "../../../definitions/bonus_vacanze/BonusActivationWithQrCode";
import { TypeEnum } from "../../../definitions/pagopa/Wallet";
import ButtonDefaultOpacity from "../../components/ButtonDefaultOpacity";
import { Label } from "../../components/core/typography/Label";
import { withLightModalContext } from "../../components/helpers/withLightModalContext";
import { withValidatedEmail } from "../../components/helpers/withValidatedEmail";
import { withValidatedPagoPaVersion } from "../../components/helpers/withValidatedPagoPaVersion";
Expand All @@ -23,7 +24,7 @@ import { RotatedCards } from "../../components/wallet/card/RotatedCards";
import SectionCardComponent from "../../components/wallet/card/SectionCardComponent";
import TransactionsList from "../../components/wallet/TransactionsList";
import WalletLayout from "../../components/wallet/WalletLayout";
import { bonusVacanzeEnabled } from "../../config";
import { bonusVacanzeEnabled, bpdEnabled } from "../../config";
import RequestBonus from "../../features/bonus/bonusVacanze/components/RequestBonus";
import {
navigateToAvailableBonusScreen,
Expand All @@ -35,6 +36,7 @@ import {
} from "../../features/bonus/bonusVacanze/store/actions/bonusVacanze";
import { allBonusActiveSelector } from "../../features/bonus/bonusVacanze/store/reducers/allActive";
import { availableBonusTypesSelector } from "../../features/bonus/bonusVacanze/store/reducers/availableBonusesTypes";
import { navigateToBpdTestScreen } from "../../features/bonus/bpd/navigation/action/bpdTestNav";
import I18n from "../../i18n";
import {
navigateBack,
Expand Down Expand Up @@ -510,6 +512,15 @@ class WalletHomeScreen extends React.PureComponent<Props> {
gradientHeader={true}
headerPaddingMin={true}
>
{/* TODO: temp only, for test purpose,to be removed with bpd details */}
{bpdEnabled && (
<Button
style={{ width: "100%" }}
onPress={this.props.navigateToBpdTest}
>
<Label color={"white"}>BPD details</Label>
</Button>
)}
{this.newMethodAdded ? this.newMethodAddedContent : transactionContent}
{bonusVacanzeEnabled && (
<NavigationEvents onWillFocus={this.loadBonusVacanze} />
Expand Down Expand Up @@ -582,7 +593,9 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
dispatch(fetchTransactionsRequest({ start })),
loadWallets: () => dispatch(fetchWalletsRequest()),
dispatchAllTransactionLoaded: (transactions: ReadonlyArray<Transaction>) =>
dispatch(fetchTransactionsLoadComplete(transactions))
dispatch(fetchTransactionsLoadComplete(transactions)),
// TODO: Temp only, remove after bpd details
navigateToBpdTest: () => dispatch(navigateToBpdTestScreen())
});

export default withValidatedPagoPaVersion(
Expand Down

0 comments on commit 37938e2

Please sign in to comment.