diff --git a/locales/de/index.yml b/locales/de/index.yml index 34671e4a016..d0ec5992661 100644 --- a/locales/de/index.yml +++ b/locales/de/index.yml @@ -2121,6 +2121,7 @@ bonus: alert: title: "Karte deaktivieren" message: "Vuoi davvero disattivare la tua Carta Giovani Nazionale? Se confermi, non potrai più accedere alle opportunità e la carta scomparirà dal Portafoglio." + expired: Elimina Carta Giovani Nazionale otp: error: "Aufgrund eines technischen Problems war es uns nicht möglich, einen Rabattcode zu generieren. Bitte versuche es erneut." code: diff --git a/locales/en/index.yml b/locales/en/index.yml index 70dcf73f420..63d7327fda2 100644 --- a/locales/en/index.yml +++ b/locales/en/index.yml @@ -2770,6 +2770,7 @@ bonus: alert: title: "Deactivate card" message: "Do you really want to deactivate your Carta Giovani Nazionale? If you confirm, you will no longer be able to access the opportunities and the card will disappear from your Wallet." + expired: Delete Carta Giovani Nazionale otp: error: "Due to a technical problem we were unable to generate a discount code. Please try again." code: diff --git a/locales/it/index.yml b/locales/it/index.yml index ce0a5c1ab17..3bfc86c9ac7 100644 --- a/locales/it/index.yml +++ b/locales/it/index.yml @@ -2770,6 +2770,7 @@ bonus: alert: title: "Disattiva carta" message: "Vuoi davvero disattivare la tua Carta Giovani Nazionale? Se confermi, non potrai più accedere alle opportunità e la carta scomparirà dal Portafoglio." + expired: Elimina Carta Giovani Nazionale otp: error: "Per un problema tecnico non siamo riusciti a generare un codice sconto. Ti chiediamo di riprovare." code: diff --git a/ts/features/bonus/cgn/components/detail/CgnUnsubscribe.tsx b/ts/features/bonus/cgn/components/detail/CgnUnsubscribe.tsx index aa0432e8d34..53b7cdd954b 100644 --- a/ts/features/bonus/cgn/components/detail/CgnUnsubscribe.tsx +++ b/ts/features/bonus/cgn/components/detail/CgnUnsubscribe.tsx @@ -1,53 +1,11 @@ import * as React from "react"; -import { useEffect, useRef } from "react"; -import { Alert } from "react-native"; -import { IOToast, ListItemAction } from "@pagopa/io-app-design-system"; +import { ListItemAction } from "@pagopa/io-app-design-system"; -import { useIODispatch, useIOSelector } from "../../../../../store/hooks"; -import { cgnUnsubscribeSelector } from "../../store/reducers/unsubscribe"; import I18n from "../../../../../i18n"; -import { cgnUnsubscribe } from "../../store/actions/unsubscribe"; -import { isError, isReady } from "../../../../../common/model/RemoteValue"; -import { cgnDetails } from "../../store/actions/details"; -import { useIONavigation } from "../../../../../navigation/params/AppParamsList"; +import { useCgnUnsubscribe } from "../../hooks/useCgnUnsubscribe"; const CgnUnsubscribe = () => { - const dispatch = useIODispatch(); - const navigation = useIONavigation(); - const unsubscriptionStatus = useIOSelector(cgnUnsubscribeSelector); - const isFirstRender = useRef(true); - - const requestUnsubscription = () => { - Alert.alert( - I18n.t("bonus.cgn.activation.deactivate.alert.title"), - I18n.t("bonus.cgn.activation.deactivate.alert.message"), - [ - { - text: I18n.t("global.buttons.cancel"), - style: "cancel" - }, - { - text: I18n.t("global.buttons.deactivate"), - onPress: () => dispatch(cgnUnsubscribe.request()) - } - ] - ); - }; - - useEffect(() => { - if (isReady(unsubscriptionStatus)) { - navigation.goBack(); - dispatch(cgnDetails.request()); - IOToast.success(I18n.t("bonus.cgn.activation.deactivate.toast")); - } - if (isError(unsubscriptionStatus) && !isFirstRender.current) { - IOToast.error(I18n.t("global.genericError")); - } - - // eslint-disable-next-line functional/immutable-data - isFirstRender.current = false; - }, [unsubscriptionStatus, navigation, dispatch]); - + const { requestUnsubscription } = useCgnUnsubscribe(); return ( (true); + + const requestUnsubscription = () => { + Alert.alert( + I18n.t("bonus.cgn.activation.deactivate.alert.title"), + I18n.t("bonus.cgn.activation.deactivate.alert.message"), + [ + { + text: I18n.t("global.buttons.cancel"), + style: "cancel" + }, + { + text: I18n.t("global.buttons.deactivate"), + onPress: () => dispatch(cgnUnsubscribe.request()) + } + ] + ); + }; + + useEffect(() => { + if (isReady(unsubscriptionStatus)) { + navigation.goBack(); + dispatch(cgnDetails.request()); + IOToast.success(I18n.t("bonus.cgn.activation.deactivate.toast")); + } + if (isError(unsubscriptionStatus) && !isFirstRender.current) { + IOToast.error(I18n.t("global.genericError")); + } + + // eslint-disable-next-line functional/immutable-data + isFirstRender.current = false; + }, [unsubscriptionStatus, navigation, dispatch]); + + return { requestUnsubscription }; +} diff --git a/ts/features/bonus/cgn/screens/CgnDetailScreen.tsx b/ts/features/bonus/cgn/screens/CgnDetailScreen.tsx index d878c28e00a..0f3d612b38e 100644 --- a/ts/features/bonus/cgn/screens/CgnDetailScreen.tsx +++ b/ts/features/bonus/cgn/screens/CgnDetailScreen.tsx @@ -47,6 +47,7 @@ import CgnCardComponent from "../components/detail/CgnCardComponent"; import CgnOwnershipInformation from "../components/detail/CgnOwnershipInformation"; import CgnStatusDetail from "../components/detail/CgnStatusDetail"; import CgnUnsubscribe from "../components/detail/CgnUnsubscribe"; +import { useCgnUnsubscribe } from "../hooks/useCgnUnsubscribe"; import EycaDetailComponent from "../components/detail/eyca/EycaDetailComponent"; import { navigateToCgnMerchantsTabs } from "../navigation/actions"; import { CgnDetailsParamsList } from "../navigation/params"; @@ -79,11 +80,6 @@ const gradientSafeArea: IOSpacingScale = 80; const contentEndMargin: IOSpacingScale = 32; const spaceBetweenActions: IOSpacer = 24; -const getPrimaryactionLabel = (isEycaEnabled: boolean) => - isEycaEnabled - ? I18n.t("bonus.cgn.detail.cta.buyers") - : I18n.t("bonus.cgn.detail.cta.discover"); - /** * Screen to display all the information about the active CGN */ @@ -116,22 +112,6 @@ const CgnDetailScreen = (props: Props): React.ReactElement => { props.isCgnEnabled && CardActivated.is(props.cgnDetails); - const gradientAreaHeight: number = React.useMemo( - () => - bottomMargin + - buttonSolidHeight + - gradientSafeArea + - (canDisplayEycaDetails ? buttonSolidHeight : 0), - [bottomMargin, canDisplayEycaDetails] - ); - - const footerGradientOpacityTransition = useAnimatedStyle(() => ({ - opacity: withTiming(gradientOpacity.value, { - duration: 200, - easing: Easing.ease - }) - })); - const scrollHandler = useAnimatedScrollHandler( ({ contentOffset, layoutMeasurement, contentSize }) => { // eslint-disable-next-line functional/immutable-data @@ -171,14 +151,6 @@ const CgnDetailScreen = (props: Props): React.ReactElement => { return true; }); - const onPressShowCgnDiscounts = () => { - if (props.isMerchantV2Enabled) { - props.navigateToMerchantsTabs(); - } else { - navigation.navigate(CGN_ROUTES.DETAILS.MERCHANTS.CATEGORIES); - } - }; - return ( { - {props.isCgnEnabled && - props.cgnDetails?.status === StatusEnum.ACTIVATED && ( - - openWebUrl(EYCA_WEBSITE_DISCOUNTS_PAGE_URL, () => - IOToast.error(I18n.t("bonus.cgn.generic.linkError")) - ) - } - : undefined - } - transitionAnimStyle={footerGradientOpacityTransition} - dimensions={{ - bottomMargin, - extraBottomMargin: 0, - gradientAreaHeight, - spaceBetweenActions, - safeBackgroundHeight: bottomMargin - }} - /> - )} + )} @@ -320,3 +265,97 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({ }); export default connect(mapStateToProps, mapDispatchToProps)(CgnDetailScreen); + +type FooterActionsProps = Props & { + canDisplayEycaDetails: boolean; + bottomMargin: number; + gradientOpacity: Animated.SharedValue; +}; + +function FooterActions({ + canDisplayEycaDetails, + bottomMargin, + gradientOpacity, + ...props +}: FooterActionsProps) { + const navigation = + useNavigation>(); + + const onPressShowCgnDiscounts = () => { + if (props.isMerchantV2Enabled) { + props.navigateToMerchantsTabs(); + } else { + navigation.navigate(CGN_ROUTES.DETAILS.MERCHANTS.CATEGORIES); + } + }; + + const { requestUnsubscription } = useCgnUnsubscribe(); + + const footerGradientOpacityTransition = useAnimatedStyle(() => ({ + opacity: withTiming(gradientOpacity.value, { + duration: 200, + easing: Easing.ease + }) + })); + + const gradientAreaHeight: number = React.useMemo( + () => + bottomMargin + + buttonSolidHeight + + gradientSafeArea + + (canDisplayEycaDetails ? buttonSolidHeight : 0), + [bottomMargin, canDisplayEycaDetails] + ); + + return props.isCgnEnabled && + props.cgnDetails?.status === StatusEnum.ACTIVATED ? ( + + openWebUrl(EYCA_WEBSITE_DISCOUNTS_PAGE_URL, () => + IOToast.error(I18n.t("bonus.cgn.generic.linkError")) + ) + } + : undefined + } + transitionAnimStyle={footerGradientOpacityTransition} + dimensions={{ + bottomMargin, + extraBottomMargin: 0, + gradientAreaHeight, + spaceBetweenActions, + safeBackgroundHeight: bottomMargin + }} + /> + ) : ( + CardExpired.is(props.cgnDetails) && ( + + ) + ); +}