diff --git a/ts/components/FooterTopShadow.tsx b/ts/components/FooterTopShadow.tsx deleted file mode 100644 index 1eeeae0cbfb..00000000000 --- a/ts/components/FooterTopShadow.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { IOStyles } from "@pagopa/io-app-design-system"; -import * as React from "react"; -import { StyleSheet, View } from "react-native"; -import variables from "../theme/variables"; - -// TODO: after bonus vacanze,create a common style for footer, atm duplicated in FooterWithButtons -const styles = StyleSheet.create({ - container: { - overflow: "hidden", - marginTop: -variables.footerShadowOffsetHeight, - paddingTop: variables.footerShadowOffsetHeight - } -}); - -/** - * A generic component that can be used to draw shadow on top - * @param props - * @constructor - */ -export const FooterTopShadow = (props: React.PropsWithChildren) => ( - - {props.children} - -); diff --git a/ts/components/TosWebviewErrorComponent.tsx b/ts/components/TosWebviewErrorComponent.tsx index 38bcb856a45..cc578e3cb0c 100644 --- a/ts/components/TosWebviewErrorComponent.tsx +++ b/ts/components/TosWebviewErrorComponent.tsx @@ -1,11 +1,11 @@ -import React from "react"; import { - FooterWithButtons, + FooterActions, H3, IOStyles, Pictogram, VSpacer } from "@pagopa/io-app-design-system"; +import React from "react"; import { View } from "react-native"; import I18n from "../i18n"; @@ -32,11 +32,10 @@ const TosWebviewErrorComponent = ({ {I18n.t("onboarding.tos.error")} - { it("The footer should not render", () => { const renderAPI = commonSetup({ shouldRenderFooter: false }); // The footer should be rendered - const footerWithButtonsViewRTI = - renderAPI.queryByTestId("FooterWithButtons"); + const footerWithButtonsViewRTI = renderAPI.queryByTestId("FooterActions"); expect(footerWithButtonsViewRTI).toBeFalsy(); }); }); @@ -74,7 +73,7 @@ describe("TosWebviewComponent", () => { onRightButton: rightButtonHandlerMock }); // Find the right button and press it - const footerDefined = renderAPI.queryByTestId("FooterWithButtons"); + const footerDefined = renderAPI.queryByTestId("FooterActions"); expect(footerDefined).toBeDefined(); const footerWithButtonsViewRTI = renderAPI.queryByTestId("AcceptToSButton"); diff --git a/ts/components/buttons/FooterStackButtons.tsx b/ts/components/buttons/FooterStackButtons.tsx deleted file mode 100644 index 97d683839a6..00000000000 --- a/ts/components/buttons/FooterStackButtons.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { - ButtonOutline, - ButtonSolid, - VSpacer -} from "@pagopa/io-app-design-system"; -import * as React from "react"; -import { ComponentProps } from "react"; -import { FooterTopShadow } from "../FooterTopShadow"; - -type FooterStackButtonProps = { - primaryActionProps: Omit, "fullWidth">; - secondaryActionProps?: Omit< - ComponentProps, - "fullWidth" - >; -}; - -/** - * A generic component to render a stack of buttons in the footer - * @deprecated As a replacement, you have two options: - * - Use `IOScrollView` if you need a pleasant gradient effect - * - Use `FooterActions` if you need to set a custom `scrollHandler` to `ScrollView` - */ -export const FooterStackButton = ({ - primaryActionProps, - secondaryActionProps -}: FooterStackButtonProps) => ( - - - {secondaryActionProps && ( - - - - - )} - -); diff --git a/ts/components/error/WorkunitGenericFailure.tsx b/ts/components/error/WorkunitGenericFailure.tsx index 1a2f1a8ef0f..ccfa0b58d4a 100644 --- a/ts/components/error/WorkunitGenericFailure.tsx +++ b/ts/components/error/WorkunitGenericFailure.tsx @@ -1,4 +1,4 @@ -import { FooterWithButtons } from "@pagopa/io-app-design-system"; +import { FooterActions } from "@pagopa/io-app-design-system"; import * as React from "react"; import { SafeAreaView } from "react-native"; import { connect } from "react-redux"; @@ -35,13 +35,11 @@ const WorkunitGenericFailure = (props: Props): React.ReactElement => { title={title} /> - { const renderFooterButtons = () => props.onCancel ? ( - ) : ( - { )} /> - { - { - navigation.getParent()?.goBack(); - } + { + navigation.getParent()?.goBack(); } }} - secondary={{ - type: "Solid", - buttonProps: { - label: I18n.t("global.buttons.continue"), - accessibilityLabel: I18n.t("global.buttons.continue"), - onPress: () => { - navigation.navigate(CDC_ROUTES.SELECT_BONUS_YEAR); - } + endAction={{ + color: "primary", + label: I18n.t("global.buttons.continue"), + onPress: () => { + navigation.navigate(CDC_ROUTES.SELECT_BONUS_YEAR); } }} /> diff --git a/ts/features/bonus/cdc/screens/CdcBonusRequestSelectResidence.tsx b/ts/features/bonus/cdc/screens/CdcBonusRequestSelectResidence.tsx index d6582939b9a..b2d846048c6 100644 --- a/ts/features/bonus/cdc/screens/CdcBonusRequestSelectResidence.tsx +++ b/ts/features/bonus/cdc/screens/CdcBonusRequestSelectResidence.tsx @@ -1,5 +1,5 @@ import { - FooterWithButtons, + FooterActionsInline, H2, H6, HSpacer, @@ -93,36 +93,29 @@ const CdcBonusRequestSelectResidence = () => { ))} - { - navigation.getParent()?.goBack(); - } + { + navigation.getParent()?.goBack(); } }} - secondary={{ - type: "Solid", - buttonProps: { - label: I18n.t("global.buttons.continue"), - accessibilityLabel: I18n.t("global.buttons.continue"), - onPress: () => { - dispatch( - cdcSelectedBonusAction( - cdcSelectedBonus?.map(b => ({ - year: b.year, - residence: isResidentInItaly[b.year] - })) - ) - ); - navigation.navigate(CDC_ROUTES.BONUS_REQUESTED); - }, - disabled: cdcSelectedBonus.some(b => !isResidentInItaly[b.year]) - } + endAction={{ + color: "primary", + label: I18n.t("global.buttons.continue"), + onPress: () => { + dispatch( + cdcSelectedBonusAction( + cdcSelectedBonus?.map(b => ({ + year: b.year, + residence: isResidentInItaly[b.year] + })) + ) + ); + navigation.navigate(CDC_ROUTES.BONUS_REQUESTED); + }, + disabled: cdcSelectedBonus.some(b => !isResidentInItaly[b.year]) }} /> diff --git a/ts/features/bonus/cdc/screens/CdcBonusRequestSelectYear.tsx b/ts/features/bonus/cdc/screens/CdcBonusRequestSelectYear.tsx index 0b1168d9b10..b6e665a584c 100644 --- a/ts/features/bonus/cdc/screens/CdcBonusRequestSelectYear.tsx +++ b/ts/features/bonus/cdc/screens/CdcBonusRequestSelectYear.tsx @@ -1,6 +1,6 @@ import { CheckboxLabel, - FooterWithButtons, + FooterActionsInline, H2, H6, VSpacer @@ -89,30 +89,23 @@ const CdcBonusRequestSelectYear = () => { ))} - { - navigation.getParent()?.goBack(); - } + { + navigation.getParent()?.goBack(); } }} - secondary={{ - type: "Solid", - buttonProps: { - label: I18n.t("global.buttons.continue"), - accessibilityLabel: I18n.t("global.buttons.continue"), - onPress: () => { - dispatch(cdcSelectedBonus(years.map(y => ({ year: y })))); - navigation.navigate(CDC_ROUTES.SELECT_RESIDENCE); - }, - disabled: years.length === 0, - testID: "continueButton" - } + endAction={{ + color: "primary", + label: I18n.t("global.buttons.continue"), + onPress: () => { + dispatch(cdcSelectedBonus(years.map(y => ({ year: y })))); + navigation.navigate(CDC_ROUTES.SELECT_RESIDENCE); + }, + disabled: years.length === 0, + testID: "continueButton" }} /> diff --git a/ts/features/bonus/cgn/components/merchants/CgnMerchantsFilters.tsx b/ts/features/bonus/cgn/components/merchants/CgnMerchantsFilters.tsx index 8a3e42c5cc9..dc08faf7441 100644 --- a/ts/features/bonus/cgn/components/merchants/CgnMerchantsFilters.tsx +++ b/ts/features/bonus/cgn/components/merchants/CgnMerchantsFilters.tsx @@ -1,5 +1,5 @@ import { - FooterWithButtons, + FooterActionsInline, H4, HeaderSecondLevel, VSpacer @@ -189,25 +189,16 @@ const CgnMerchantsFilters: React.FunctionComponent = (props: Props) => { - diff --git a/ts/features/bonus/cgn/screens/merchants/CgnMerchantsTabsScreen.tsx b/ts/features/bonus/cgn/screens/merchants/CgnMerchantsTabsScreen.tsx index 1544e4b096c..57b81194ab1 100644 --- a/ts/features/bonus/cgn/screens/merchants/CgnMerchantsTabsScreen.tsx +++ b/ts/features/bonus/cgn/screens/merchants/CgnMerchantsTabsScreen.tsx @@ -111,14 +111,7 @@ const CgnMerchantsTabsScreen: React.FunctionComponent = (_: Props) => {

{`${I18n.t("bonus.cgn.merchantsList.places")} TAB`}

- - */} + */} ); diff --git a/ts/features/bonus/common/components/TosBonusComponent.tsx b/ts/features/bonus/common/components/TosBonusComponent.tsx index f83524c64c7..d5ae9d02d11 100644 --- a/ts/features/bonus/common/components/TosBonusComponent.tsx +++ b/ts/features/bonus/common/components/TosBonusComponent.tsx @@ -1,7 +1,7 @@ import { ButtonOutline, ButtonSolidProps, - FooterWithButtons, + FooterActions, H2, IconButton, Pictogram, @@ -68,8 +68,7 @@ const TosBonusComponent: React.FunctionComponent = props => { const closeButtonProps: ButtonSolidProps = { onPress: props.onClose, - label: I18n.t("global.buttons.close"), - accessibilityLabel: I18n.t("global.buttons.close") + label: I18n.t("global.buttons.close") }; const handleLoadEnd = () => setOnLoadEnd(true); @@ -132,12 +131,12 @@ const TosBonusComponent: React.FunctionComponent = props => { )} {isLoadEnd && ( - - - + )} )); diff --git a/ts/features/bonus/common/screens/AvailableBonusScreen.tsx b/ts/features/bonus/common/screens/AvailableBonusScreen.tsx index 4d2593e18c3..e3aa7e4de62 100644 --- a/ts/features/bonus/common/screens/AvailableBonusScreen.tsx +++ b/ts/features/bonus/common/screens/AvailableBonusScreen.tsx @@ -1,8 +1,4 @@ -import { - Divider, - FooterWithButtons, - IOToast -} from "@pagopa/io-app-design-system"; +import { Divider, FooterActions, IOToast } from "@pagopa/io-app-design-system"; import * as O from "fp-ts/lib/Option"; import { pipe } from "fp-ts/lib/function"; import * as React from "react"; @@ -17,6 +13,7 @@ import { import { connect } from "react-redux"; import { ServiceId } from "../../../../../definitions/backend/ServiceId"; import { BonusAvailable } from "../../../../../definitions/content/BonusAvailable"; +import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; import BaseScreenComponent, { ContextualHelpPropsMarkdown @@ -34,6 +31,7 @@ import { } from "../../../../store/reducers/backendStatus/remoteConfig"; import { GlobalState } from "../../../../store/reducers/types"; import { storeUrl } from "../../../../utils/appVersion"; +import { ServiceDetailsScreenRouteParams } from "../../../services/details/screens/ServiceDetailsScreen"; import { loadServiceDetail } from "../../../services/details/store/actions/details"; import { cgnActivationStart } from "../../cgn/store/actions/activation"; import { @@ -50,8 +48,6 @@ import { supportedAvailableBonusSelector } from "../store/selectors"; import { ID_CDC_TYPE, ID_CGN_TYPE } from "../utils"; -import { ServiceDetailsScreenRouteParams } from "../../../services/details/screens/ServiceDetailsScreen"; -import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay"; export type Props = ReturnType & ReturnType; @@ -204,14 +200,12 @@ class AvailableBonusScreen extends React.PureComponent { /> - diff --git a/ts/features/fci/components/DocumentViewer.tsx b/ts/features/fci/components/DocumentViewer.tsx index 7937258155c..ab0be392a4a 100644 --- a/ts/features/fci/components/DocumentViewer.tsx +++ b/ts/features/fci/components/DocumentViewer.tsx @@ -1,6 +1,7 @@ import { ButtonSolidProps, - FooterWithButtons, + FooterActions, + FooterActionsInline, IOColors, IOToast } from "@pagopa/io-app-design-system"; @@ -81,35 +82,17 @@ const renderFooter = (url: string, filePath: string) => { accessibilityLabel: I18n.t("messagePDFPreview.save") }; - const openButtonProps: ButtonSolidProps = { - onPress: () => { - ReactNativeBlobUtil.android - .actionViewIntent( - FciDownloadPreviewDirectoryPath + "/" + getFileNameFromUrl(url), - "application/pdf" - ) - .catch(_ => { - IOToast.error(I18n.t("messagePDFPreview.errors.opening")); - }); - }, - label: I18n.t("messagePDFPreview.open"), - accessibilityLabel: I18n.t("messagePDFPreview.open") - }; - return isIos ? ( - ) : ( - ); }; diff --git a/ts/features/fci/components/DocumentWithSignature.tsx b/ts/features/fci/components/DocumentWithSignature.tsx index 15eec9f1ccd..021c472873a 100644 --- a/ts/features/fci/components/DocumentWithSignature.tsx +++ b/ts/features/fci/components/DocumentWithSignature.tsx @@ -1,12 +1,6 @@ -import * as React from "react"; -import Pdf from "react-native-pdf"; -import { constNull, pipe } from "fp-ts/lib/function"; -import * as O from "fp-ts/lib/Option"; -import * as pot from "@pagopa/ts-commons/lib/pot"; -import { StyleSheet, View } from "react-native"; import { ButtonSolidProps, - FooterWithButtons, + FooterActions, H5, HSpacer, IconButton, @@ -14,16 +8,22 @@ import { IOStyles, VSpacer } from "@pagopa/io-app-design-system"; +import * as pot from "@pagopa/ts-commons/lib/pot"; +import { constNull, pipe } from "fp-ts/lib/function"; +import * as O from "fp-ts/lib/Option"; +import * as React from "react"; +import { StyleSheet, View } from "react-native"; +import Pdf from "react-native-pdf"; import { SafeAreaView } from "react-native-safe-area-context"; -import I18n from "../../../i18n"; import { ExistingSignatureFieldAttrs } from "../../../../definitions/fci/ExistingSignatureFieldAttrs"; import { SignatureFieldToBeCreatedAttrs } from "../../../../definitions/fci/SignatureFieldToBeCreatedAttrs"; -import { fciSignatureDetailDocumentsSelector } from "../store/reducers/fciSignatureRequest"; +import I18n from "../../../i18n"; import { useIODispatch, useIOSelector } from "../../../store/hooks"; import { WithTestID } from "../../../types/WithTestID"; import { useOnFirstRender } from "../../../utils/hooks/useOnFirstRender"; import { fciDocumentSignatureFields } from "../store/actions"; import { fciSignatureFieldDrawingSelector } from "../store/reducers/fciSignatureFieldDrawing"; +import { fciSignatureDetailDocumentsSelector } from "../store/reducers/fciSignatureRequest"; import DocumentsNavigationBar from "./DocumentsNavigationBar"; import LoadingComponent from "./LoadingComponent"; @@ -62,12 +62,10 @@ const DocumentWithSignature = (props: Props) => { const { attrs, currentDoc } = props; const dispatch = useIODispatch(); const onContinuePress = () => props.onClose(); + const continueButtonProps: ButtonSolidProps = { onPress: onContinuePress, - label: I18n.t("features.fci.documents.footer.backToSignFieldsList"), - accessibilityLabel: I18n.t( - "features.fci.documents.footer.backToSignFieldsList" - ) + label: I18n.t("features.fci.documents.footer.backToSignFieldsList") }; /** @@ -220,9 +218,11 @@ const DocumentWithSignature = (props: Props) => { testID={"FciDocumentsNavBarTestID"} /> - ); diff --git a/ts/features/fci/components/__tests__/DocumentWithSignature.test.tsx b/ts/features/fci/components/__tests__/DocumentWithSignature.test.tsx index ac5cd174896..44bfcb50033 100644 --- a/ts/features/fci/components/__tests__/DocumentWithSignature.test.tsx +++ b/ts/features/fci/components/__tests__/DocumentWithSignature.test.tsx @@ -46,7 +46,7 @@ describe("Test DocumentWithSignature", () => { const component = renderComponent({ ...props }, store); expect(component).toBeTruthy(); }); - it("with all props should render a FooterWithButtons correctly", () => { + it("with all props should render a FooterActions correctly", () => { const props = { attrs: { unique_name: "Signature1" as NonEmptyString }, currentDoc: 0, diff --git a/ts/features/fci/hooks/useFciCheckService.tsx b/ts/features/fci/hooks/useFciCheckService.tsx index 098fa81a1ed..fb7e87e47cc 100644 --- a/ts/features/fci/hooks/useFciCheckService.tsx +++ b/ts/features/fci/hooks/useFciCheckService.tsx @@ -1,21 +1,18 @@ -import * as React from "react"; +import { Body, FooterActionsInline } from "@pagopa/io-app-design-system"; import * as pot from "@pagopa/ts-commons/lib/pot"; -import { - Body, - ButtonSolidProps, - FooterWithButtons -} from "@pagopa/io-app-design-system"; +import * as React from "react"; +import { ComponentProps } from "react"; +import { ServiceId } from "../../../../definitions/backend/ServiceId"; import I18n from "../../../i18n"; import { useIODispatch, useIOSelector } from "../../../store/hooks"; -import { fciStartSigningRequest } from "../store/actions"; +import { useIOBottomSheetModal } from "../../../utils/hooks/bottomSheet"; import { upsertServicePreference } from "../../services/details/store/actions/preference"; -import { ServiceId } from "../../../../definitions/backend/ServiceId"; -import { isServicePreferenceResponseSuccess } from "../../services/details/types/ServicePreferenceResponse"; import { servicePreferencePotSelector } from "../../services/details/store/reducers"; -import { fciMetadataServiceIdSelector } from "../store/reducers/fciMetadata"; +import { isServicePreferenceResponseSuccess } from "../../services/details/types/ServicePreferenceResponse"; import { trackFciUxConversion } from "../analytics"; -import { useIOBottomSheetModal } from "../../../utils/hooks/bottomSheet"; +import { fciStartSigningRequest } from "../store/actions"; import { fciEnvironmentSelector } from "../store/reducers/fciEnvironment"; +import { fciMetadataServiceIdSelector } from "../store/reducers/fciMetadata"; /** * A hook that returns a function to present the abort signature flow bottom sheet @@ -26,15 +23,21 @@ export const useFciCheckService = () => { const servicePreferencePot = useIOSelector(servicePreferencePotSelector); const fciEnvironment = useIOSelector(fciEnvironmentSelector); const servicePreferenceValue = pot.getOrElse(servicePreferencePot, undefined); - const cancelButtonProps: ButtonSolidProps = { + const cancelButtonProps: ComponentProps< + typeof FooterActionsInline + >["startAction"] = { + color: "primary", onPress: () => { dispatch(fciStartSigningRequest()); dismiss(); }, - label: I18n.t("features.fci.checkService.cancel"), - accessibilityLabel: I18n.t("features.fci.checkService.cancel") + label: I18n.t("features.fci.checkService.cancel") }; - const confirmButtonProps: ButtonSolidProps = { + + const confirmButtonProps: ComponentProps< + typeof FooterActionsInline + >["endAction"] = { + color: "primary", onPress: () => { if ( fciServiceId && @@ -53,8 +56,7 @@ export const useFciCheckService = () => { dispatch(fciStartSigningRequest()); dismiss(); }, - label: I18n.t("features.fci.checkService.confirm"), - accessibilityLabel: I18n.t("features.fci.checkService.confirm") + label: I18n.t("features.fci.checkService.confirm") }; const { present, bottomSheet, dismiss } = useIOBottomSheetModal({ component: ( @@ -65,13 +67,9 @@ export const useFciCheckService = () => { title: I18n.t("features.fci.checkService.title"), snapPoint: [320], footer: ( - ) }); diff --git a/ts/features/fci/hooks/useFciNoSignatureFields.tsx b/ts/features/fci/hooks/useFciNoSignatureFields.tsx index cc94bd9374c..bbd6d0bbb36 100644 --- a/ts/features/fci/hooks/useFciNoSignatureFields.tsx +++ b/ts/features/fci/hooks/useFciNoSignatureFields.tsx @@ -1,19 +1,16 @@ -import * as React from "react"; +import { Body, FooterActionsInline } from "@pagopa/io-app-design-system"; import { StackActions } from "@react-navigation/native"; import { increment } from "fp-ts/lib/function"; -import { - Body, - ButtonSolidProps, - FooterWithButtons -} from "@pagopa/io-app-design-system"; +import * as React from "react"; +import { ComponentProps } from "react"; import I18n from "../../../i18n"; -import { FCI_ROUTES } from "../navigation/routes"; -import { fciSignatureDetailDocumentsSelector } from "../store/reducers/fciSignatureRequest"; +import { useIONavigation } from "../../../navigation/params/AppParamsList"; import { useIOSelector } from "../../../store/hooks"; -import { trackFciStartSignature } from "../analytics"; import { useIOBottomSheetModal } from "../../../utils/hooks/bottomSheet"; +import { trackFciStartSignature } from "../analytics"; +import { FCI_ROUTES } from "../navigation/routes"; import { fciEnvironmentSelector } from "../store/reducers/fciEnvironment"; -import { useIONavigation } from "../../../navigation/params/AppParamsList"; +import { fciSignatureDetailDocumentsSelector } from "../store/reducers/fciSignatureRequest"; type Props = { currentDoc: number; @@ -27,14 +24,21 @@ export const useFciNoSignatureFields = (props: Props) => { const documents = useIOSelector(fciSignatureDetailDocumentsSelector); const fciEnvironment = useIOSelector(fciEnvironmentSelector); const { currentDoc } = props; - const readButtonProps: ButtonSolidProps = { + + const readButtonProps: ComponentProps< + typeof FooterActionsInline + >["startAction"] = { + color: "primary", onPress: () => { dismiss(); }, - label: I18n.t("features.fci.noFields.leftButton"), - accessibilityLabel: I18n.t("features.fci.noFields.leftButton") + label: I18n.t("features.fci.noFields.leftButton") }; - const confirmButtonProps: ButtonSolidProps = { + + const confirmButtonProps: ComponentProps< + typeof FooterActionsInline + >["endAction"] = { + color: "primary", onPress: () => { dismiss(); if (currentDoc < documents.length - 1) { @@ -51,9 +55,9 @@ export const useFciNoSignatureFields = (props: Props) => { }); } }, - label: I18n.t("features.fci.noFields.rightButton"), - accessibilityLabel: I18n.t("features.fci.noFields.rightButton") + label: I18n.t("features.fci.noFields.rightButton") }; + const { present, bottomSheet, dismiss } = useIOBottomSheetModal({ component: ( {I18n.t("features.fci.noFields.content")} @@ -61,16 +65,9 @@ export const useFciNoSignatureFields = (props: Props) => { title: I18n.t("features.fci.noFields.title"), snapPoint: [280], footer: ( - ) }); diff --git a/ts/features/fci/screens/valid/FciDataSharingScreen.tsx b/ts/features/fci/screens/valid/FciDataSharingScreen.tsx index 783c50053ea..931dd5680da 100644 --- a/ts/features/fci/screens/valid/FciDataSharingScreen.tsx +++ b/ts/features/fci/screens/valid/FciDataSharingScreen.tsx @@ -1,7 +1,6 @@ import { Body, - ButtonSolidProps, - FooterWithButtons, + FooterActionsInline, H2, H6, HSpacer, @@ -14,6 +13,7 @@ import * as pot from "@pagopa/ts-commons/lib/pot"; import { useRoute } from "@react-navigation/native"; import * as O from "fp-ts/lib/Option"; import * as React from "react"; +import { ComponentProps } from "react"; import { ScrollView, StyleSheet, View } from "react-native"; import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel"; import I18n from "../../../../i18n"; @@ -69,21 +69,24 @@ const FciDataSharingScreen = (): React.ReactElement => { const { present, bottomSheet: fciAbortSignature } = useFciAbortSignatureFlow(); - const cancelButtonProps: ButtonSolidProps = { + const cancelButtonProps: ComponentProps< + typeof FooterActionsInline + >["startAction"] = { + color: "primary", onPress: () => present(), - label: I18n.t("features.fci.shareDataScreen.cancel"), - accessibilityLabel: I18n.t("features.fci.shareDataScreen.cancel") + label: I18n.t("features.fci.shareDataScreen.cancel") }; - const confirmButtonProps: ButtonSolidProps = { + const confirmButtonProps: ComponentProps< + typeof FooterActionsInline + >["endAction"] = { onPress: () => { trackFciUserDataConfirmed(fciEnvironment); navigation.navigate(FCI_ROUTES.MAIN, { screen: FCI_ROUTES.QTSP_TOS }); }, - label: I18n.t("features.fci.shareDataScreen.confirm"), - accessibilityLabel: I18n.t("features.fci.shareDataScreen.confirm") + label: I18n.t("features.fci.shareDataScreen.confirm") }; const AlertTextComponent = () => ( @@ -192,13 +195,11 @@ const FciDataSharingScreen = (): React.ReactElement => { )} - - - + {fciAbortSignature} diff --git a/ts/features/fci/screens/valid/FciDocumentsScreen.tsx b/ts/features/fci/screens/valid/FciDocumentsScreen.tsx index 528a4142581..73f1e482e41 100644 --- a/ts/features/fci/screens/valid/FciDocumentsScreen.tsx +++ b/ts/features/fci/screens/valid/FciDocumentsScreen.tsx @@ -1,10 +1,8 @@ -import * as React from "react"; -import Pdf from "react-native-pdf"; -import { pipe } from "fp-ts/lib/function"; -import * as RA from "fp-ts/lib/ReadonlyArray"; -import * as O from "fp-ts/lib/Option"; -import * as S from "fp-ts/lib/string"; -import { StyleSheet, View } from "react-native"; +import { + FooterActionsInline, + IOColors, + IOStyles +} from "@pagopa/io-app-design-system"; import { RouteProp, StackActions, @@ -12,40 +10,41 @@ import { useNavigation, useRoute } from "@react-navigation/native"; -import { - BlockButtonProps, - ButtonSolidProps, - FooterWithButtons, - IOColors, - IOStyles -} from "@pagopa/io-app-design-system"; +import { pipe } from "fp-ts/lib/function"; +import * as O from "fp-ts/lib/Option"; +import * as RA from "fp-ts/lib/ReadonlyArray"; +import * as S from "fp-ts/lib/string"; +import * as React from "react"; +import { ComponentProps } from "react"; +import { StyleSheet, View } from "react-native"; +import Pdf from "react-native-pdf"; +import { TypeEnum as ClauseType } from "../../../../../definitions/fci/Clause"; +import { DocumentToSign } from "../../../../../definitions/fci/DocumentToSign"; +import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel"; import I18n from "../../../../i18n"; -import DocumentsNavigationBar from "../../components/DocumentsNavigationBar"; +import { useIODispatch, useIOSelector } from "../../../../store/hooks"; import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; +import { trackFciDocOpeningSuccess, trackFciSigningDoc } from "../../analytics"; +import DocumentsNavigationBar from "../../components/DocumentsNavigationBar"; +import LoadingComponent from "../../components/LoadingComponent"; import { useFciAbortSignatureFlow } from "../../hooks/useFciAbortSignatureFlow"; -import { fciSignatureDetailDocumentsSelector } from "../../store/reducers/fciSignatureRequest"; -import { FCI_ROUTES } from "../../navigation/routes"; -import { TypeEnum as ClauseType } from "../../../../../definitions/fci/Clause"; +import { useFciNoSignatureFields } from "../../hooks/useFciNoSignatureFields"; import { FciParamsList } from "../../navigation/params"; -import { DocumentToSign } from "../../../../../definitions/fci/DocumentToSign"; +import { FCI_ROUTES } from "../../navigation/routes"; import { fciClearStateRequest, fciDownloadPreview, fciUpdateDocumentSignaturesRequest } from "../../store/actions"; import { fciDocumentSignaturesSelector } from "../../store/reducers/fciDocumentSignatures"; -import { useIODispatch, useIOSelector } from "../../../../store/hooks"; import { fciDownloadPathSelector } from "../../store/reducers/fciDownloadPreview"; -import { trackFciDocOpeningSuccess, trackFciSigningDoc } from "../../analytics"; +import { fciEnvironmentSelector } from "../../store/reducers/fciEnvironment"; +import { fciSignatureDetailDocumentsSelector } from "../../store/reducers/fciSignatureRequest"; import { getOptionalSignatureFields, getRequiredSignatureFields, getSignatureFieldsLength } from "../../utils/signatureFields"; -import { useFciNoSignatureFields } from "../../hooks/useFciNoSignatureFields"; -import { fciEnvironmentSelector } from "../../store/reducers/fciEnvironment"; -import LoadingComponent from "../../components/LoadingComponent"; -import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel"; const styles = StyleSheet.create({ pdf: { @@ -136,29 +135,31 @@ const FciDocumentsScreen = () => { const onCancelPress = () => present(); - const cancelButtonProps: ButtonSolidProps = { + const cancelButtonProps: ComponentProps< + typeof FooterActionsInline + >["startAction"] = { onPress: onCancelPress, - label: I18n.t("features.fci.documents.footer.cancel"), - accessibilityLabel: I18n.t("features.fci.documents.footer.cancel") + label: I18n.t("features.fci.documents.footer.cancel") }; - const continueButtonProps: ButtonSolidProps = { + const continueButtonProps: ComponentProps< + typeof FooterActionsInline + >["endAction"] = { onPress: onContinuePress, - label: I18n.t("features.fci.documents.footer.continue"), - accessibilityLabel: I18n.t("features.fci.documents.footer.continue") + label: I18n.t("features.fci.documents.footer.continue") }; - const keepReadingButtonProps: ButtonSolidProps = { + const keepReadingButtonProps: ComponentProps< + typeof FooterActionsInline + >["endAction"] = { onPress: () => pointToPage(totalPages), - label: I18n.t("global.buttons.continue"), - accessibilityLabel: I18n.t("global.buttons.continue") + label: I18n.t("global.buttons.continue") }; - const secondaryButtonProps: BlockButtonProps = { - type: currentPage < totalPages ? "Outline" : "Solid", - buttonProps: - currentPage < totalPages ? keepReadingButtonProps : continueButtonProps - }; + const endActionButtonProps: ComponentProps< + typeof FooterActionsInline + >["endAction"] = + currentPage < totalPages ? keepReadingButtonProps : continueButtonProps; const pointToPage = (page: number) => pipe( @@ -247,10 +248,9 @@ const FciDocumentsScreen = () => { {documents.length > 0 && ( <> {renderPager()} - )} diff --git a/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx b/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx index 8154a29627b..b2552794b9c 100644 --- a/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx +++ b/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx @@ -1,45 +1,45 @@ -import * as React from "react"; -import { FlatList, View, ScrollView } from "react-native"; -import * as pot from "@pagopa/ts-commons/lib/pot"; import { Body, - ButtonSolidProps, Divider, - FooterWithButtons, + FooterActionsInline, H2, IOStyles, VSpacer } from "@pagopa/io-app-design-system"; +import * as pot from "@pagopa/ts-commons/lib/pot"; +import * as React from "react"; +import { ComponentProps } from "react"; +import { FlatList, ScrollView, View } from "react-native"; +import { ServiceId } from "../../../../../definitions/backend/ServiceId"; +import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel"; import I18n from "../../../../i18n"; -import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; -import { - fciQtspClausesSelector, - fciQtspPrivacyTextSelector, - fciQtspPrivacyUrlSelector -} from "../../store/reducers/fciQtspClauses"; -import { useFciAbortSignatureFlow } from "../../hooks/useFciAbortSignatureFlow"; +import { useIONavigation } from "../../../../navigation/params/AppParamsList"; +import { useIODispatch, useIOSelector } from "../../../../store/hooks"; import customVariables from "../../../../theme/variables"; +import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; +import { loadServicePreference } from "../../../services/details/store/actions/preference"; +import { servicePreferencePotSelector } from "../../../services/details/store/reducers"; +import { isServicePreferenceResponseSuccess } from "../../../services/details/types/ServicePreferenceResponse"; +import { trackFciUxConversion } from "../../analytics"; +import GenericErrorComponent from "../../components/GenericErrorComponent"; +import LinkedText from "../../components/LinkedText"; +import LoadingComponent from "../../components/LoadingComponent"; import QtspClauseListItem from "../../components/QtspClauseListItem"; +import { useFciAbortSignatureFlow } from "../../hooks/useFciAbortSignatureFlow"; +import { useFciCheckService } from "../../hooks/useFciCheckService"; import { FCI_ROUTES } from "../../navigation/routes"; -import { useIODispatch, useIOSelector } from "../../../../store/hooks"; import { fciEndRequest, fciStartSigningRequest } from "../../store/actions"; +import { fciEnvironmentSelector } from "../../store/reducers/fciEnvironment"; +import { fciMetadataServiceIdSelector } from "../../store/reducers/fciMetadata"; import { fciPollFilledDocumentErrorSelector, fciPollFilledDocumentReadySelector } from "../../store/reducers/fciPollFilledDocument"; -import GenericErrorComponent from "../../components/GenericErrorComponent"; -import LinkedText from "../../components/LinkedText"; -import { servicePreferencePotSelector } from "../../../services/details/store/reducers"; -import { loadServicePreference } from "../../../services/details/store/actions/preference"; -import { ServiceId } from "../../../../../definitions/backend/ServiceId"; -import { useFciCheckService } from "../../hooks/useFciCheckService"; -import { isServicePreferenceResponseSuccess } from "../../../services/details/types/ServicePreferenceResponse"; -import { fciMetadataServiceIdSelector } from "../../store/reducers/fciMetadata"; -import { trackFciUxConversion } from "../../analytics"; -import LoadingComponent from "../../components/LoadingComponent"; -import { fciEnvironmentSelector } from "../../store/reducers/fciEnvironment"; -import { useIONavigation } from "../../../../navigation/params/AppParamsList"; -import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel"; +import { + fciQtspClausesSelector, + fciQtspPrivacyTextSelector, + fciQtspPrivacyUrlSelector +} from "../../store/reducers/fciQtspClauses"; const FciQtspClausesScreen = () => { const dispatch = useIODispatch(); @@ -147,14 +147,20 @@ const FciQtspClausesScreen = () => { ); - const cancelButtonProps: ButtonSolidProps = { + const cancelButtonProps: ComponentProps< + typeof FooterActionsInline + >["startAction"] = { + color: "primary", onPress: showAbort, - label: I18n.t("global.buttons.cancel"), - accessibilityLabel: I18n.t("global.buttons.cancel") + label: I18n.t("global.buttons.cancel") }; - const continueButtonProps: ButtonSolidProps = { + const continueButtonProps: ComponentProps< + typeof FooterActionsInline + >["endAction"] = { + color: "primary", disabled: clausesChecked !== qtspClausesSelector.length, + label: I18n.t("global.buttons.continue"), onPress: () => { if (isServiceActive) { trackFciUxConversion(fciEnvironment); @@ -162,9 +168,7 @@ const FciQtspClausesScreen = () => { } else { showCheckService(); } - }, - label: I18n.t("global.buttons.continue"), - accessibilityLabel: I18n.t("global.buttons.continue") + } }; return ( @@ -176,10 +180,9 @@ const FciQtspClausesScreen = () => { {I18n.t("features.fci.qtspTos.subTitle")} {renderClausesFields()} - {fciAbortSignature} diff --git a/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx b/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx index 0af32f420db..ee10603ea03 100644 --- a/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx +++ b/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx @@ -1,12 +1,5 @@ -import * as React from "react"; -import { View, SectionList, ScrollView } from "react-native"; -import { Route, StackActions, useRoute } from "@react-navigation/native"; -import * as RA from "fp-ts/lib/ReadonlyArray"; -import * as O from "fp-ts/lib/Option"; -import { constFalse, increment, pipe } from "fp-ts/lib/function"; import { - ButtonSolidProps, - FooterWithButtons, + FooterActionsInline, H2, H4, IconButton, @@ -14,45 +7,52 @@ import { IOStyles, VSpacer } from "@pagopa/io-app-design-system"; -import I18n from "../../../../i18n"; -import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; -import { useIODispatch, useIOSelector } from "../../../../store/hooks"; +import { Route, StackActions, useRoute } from "@react-navigation/native"; +import * as O from "fp-ts/lib/Option"; +import * as RA from "fp-ts/lib/ReadonlyArray"; +import { constFalse, increment, pipe } from "fp-ts/lib/function"; +import * as React from "react"; +import { ComponentProps } from "react"; +import { ScrollView, SectionList, View } from "react-native"; import { - fciDocumentSignatureFieldsSelector, - fciSignatureDetailDocumentsSelector -} from "../../store/reducers/fciSignatureRequest"; + Clause, + TypeEnum as ClausesTypeEnum +} from "../../../../../definitions/fci/Clause"; import { DocumentDetailView } from "../../../../../definitions/fci/DocumentDetailView"; +import { DocumentToSign } from "../../../../../definitions/fci/DocumentToSign"; +import { SignatureField } from "../../../../../definitions/fci/SignatureField"; +import { LightModalContext } from "../../../../components/ui/LightModal"; +import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel"; +import I18n from "../../../../i18n"; import { useIONavigation } from "../../../../navigation/params/AppParamsList"; +import { useIODispatch, useIOSelector } from "../../../../store/hooks"; +import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; +import { + trackFciShowSignatureFields, + trackFciStartSignature +} from "../../analytics"; +import DocumentWithSignature from "../../components/DocumentWithSignature"; +import GenericErrorComponent from "../../components/GenericErrorComponent"; import SignatureFieldItem from "../../components/SignatureFieldItem"; -import { SignatureField } from "../../../../../definitions/fci/SignatureField"; +import { useFciAbortSignatureFlow } from "../../hooks/useFciAbortSignatureFlow"; +import { useFciSignatureFieldInfo } from "../../hooks/useFciSignatureFieldInfo"; import { FCI_ROUTES } from "../../navigation/routes"; -import { fciDocumentSignaturesSelector } from "../../store/reducers/fciDocumentSignatures"; import { fciEndRequest, fciUpdateDocumentSignaturesRequest } from "../../store/actions"; -import { useFciAbortSignatureFlow } from "../../hooks/useFciAbortSignatureFlow"; +import { fciDocumentSignaturesSelector } from "../../store/reducers/fciDocumentSignatures"; +import { fciEnvironmentSelector } from "../../store/reducers/fciEnvironment"; import { - Clause, - TypeEnum as ClausesTypeEnum -} from "../../../../../definitions/fci/Clause"; -import { DocumentToSign } from "../../../../../definitions/fci/DocumentToSign"; + fciDocumentSignatureFieldsSelector, + fciSignatureDetailDocumentsSelector +} from "../../store/reducers/fciSignatureRequest"; import { getClauseLabel, getRequiredSignatureFields, getSectionListData, orderSignatureFields } from "../../utils/signatureFields"; -import { LightModalContext } from "../../../../components/ui/LightModal"; -import DocumentWithSignature from "../../components/DocumentWithSignature"; -import GenericErrorComponent from "../../components/GenericErrorComponent"; -import { - trackFciShowSignatureFields, - trackFciStartSignature -} from "../../analytics"; -import { useFciSignatureFieldInfo } from "../../hooks/useFciSignatureFieldInfo"; -import { fciEnvironmentSelector } from "../../store/reducers/fciEnvironment"; -import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel"; export type FciSignatureFieldsScreenNavigationParams = Readonly<{ documentId: DocumentDetailView["id"]; @@ -222,13 +222,18 @@ const FciSignatureFieldsScreen = () => { /> ); - const cancelButtonProps: ButtonSolidProps = { + const cancelButtonProps: ComponentProps< + typeof FooterActionsInline + >["startAction"] = { + color: "primary", onPress: present, - label: I18n.t("global.buttons.cancel"), - accessibilityLabel: I18n.t("global.buttons.cancel") + label: I18n.t("global.buttons.cancel") }; - const continueButtonProps: ButtonSolidProps = { + const continueButtonProps: ComponentProps< + typeof FooterActionsInline + >["endAction"] = { + color: "primary", disabled: !isClausesChecked, onPress: () => { if (currentDoc < documentsSelector.length - 1) { @@ -245,10 +250,6 @@ const FciSignatureFieldsScreen = () => { }); } }, - accessibilityLabel: - currentDoc < documentsSelector.length - 1 - ? I18n.t("global.buttons.continue") - : "Firma", label: currentDoc < documentsSelector.length - 1 ? I18n.t("global.buttons.continue") @@ -279,10 +280,9 @@ const FciSignatureFieldsScreen = () => { {renderSignatureFields()} - {fciAbortSignature} diff --git a/ts/features/fci/screens/valid/FciThankyouScreen.tsx b/ts/features/fci/screens/valid/FciThankyouScreen.tsx index 35c6a8f7b2e..854902d2eb7 100644 --- a/ts/features/fci/screens/valid/FciThankyouScreen.tsx +++ b/ts/features/fci/screens/valid/FciThankyouScreen.tsx @@ -1,24 +1,24 @@ -import * as React from "react"; -import * as pot from "@pagopa/ts-commons/lib/pot"; import { ButtonSolidProps, - FooterWithButtons, + FooterActions, IOStyles, Pictogram } from "@pagopa/io-app-design-system"; +import * as pot from "@pagopa/ts-commons/lib/pot"; +import * as React from "react"; import { View } from "react-native"; +import { TypeEnum as ClauseTypeEnum } from "../../../../../definitions/fci/Clause"; +import I18n from "../../../../i18n"; import { useIODispatch, useIOSelector } from "../../../../store/hooks"; -import { fciSignatureSelector } from "../../store/reducers/fciSignature"; +import { trackFciUxSuccess } from "../../analytics"; import GenericErrorComponent from "../../components/GenericErrorComponent"; -import I18n from "../../../../i18n"; +import { InfoScreenComponent } from "../../components/InfoScreenComponent"; +import LoadingComponent from "../../components/LoadingComponent"; import { fciEndRequest, fciStartRequest } from "../../store/actions"; -import { trackFciUxSuccess } from "../../analytics"; -import { TypeEnum as ClauseTypeEnum } from "../../../../../definitions/fci/Clause"; import { fciDocumentSignaturesSelector } from "../../store/reducers/fciDocumentSignatures"; -import { getClausesCountByTypes } from "../../utils/signatureFields"; -import LoadingComponent from "../../components/LoadingComponent"; -import { InfoScreenComponent } from "../../components/InfoScreenComponent"; import { fciEnvironmentSelector } from "../../store/reducers/fciEnvironment"; +import { fciSignatureSelector } from "../../store/reducers/fciSignature"; +import { getClausesCountByTypes } from "../../utils/signatureFields"; const FciThankyouScreen = () => { const fciCreateSignatureSelector = useIOSelector(fciSignatureSelector); @@ -45,9 +45,9 @@ const FciThankyouScreen = () => { const continueButtonProps: ButtonSolidProps = { onPress: () => dispatch(fciEndRequest()), label: I18n.t("features.fci.thankYouPage.cta"), - accessibilityLabel: I18n.t("features.fci.thankYouPage.cta"), testID: "FciTypCloseButton" }; + return ( { title={I18n.t("features.fci.thankYouPage.title")} body={I18n.t("features.fci.thankYouPage.content")} /> - ); diff --git a/ts/features/idpay/configuration/screens/IbanEnrollmentScreen.tsx b/ts/features/idpay/configuration/screens/IbanEnrollmentScreen.tsx index f129d0f4654..ddf9a11e27b 100644 --- a/ts/features/idpay/configuration/screens/IbanEnrollmentScreen.tsx +++ b/ts/features/idpay/configuration/screens/IbanEnrollmentScreen.tsx @@ -1,8 +1,9 @@ import { - H2, Body, FeatureInfo, - FooterWithButtons, + FooterActions, + FooterActionsInline, + H2, VSpacer } from "@pagopa/io-app-design-system"; import { RouteProp, useFocusEffect, useRoute } from "@react-navigation/native"; @@ -101,11 +102,10 @@ export const IbanEnrollmentScreen = () => { const renderFooter = () => { if (isIbanOnly) { return ( - { } return ( - ); diff --git a/ts/features/idpay/configuration/screens/IbanOnboardingScreen.tsx b/ts/features/idpay/configuration/screens/IbanOnboardingScreen.tsx index 0aa417f2c1e..0b0cb80d3ef 100644 --- a/ts/features/idpay/configuration/screens/IbanOnboardingScreen.tsx +++ b/ts/features/idpay/configuration/screens/IbanOnboardingScreen.tsx @@ -1,6 +1,6 @@ import { Body, - FooterWithButtons, + FooterActions, H2, HSpacer, Icon, @@ -90,11 +90,10 @@ export const IbanOnboardingScreen = () => { - { - { ), title: I18n.t("idpay.configuration.instruments.enrollmentSheet.header"), footer: ( - { + enrollmentBottomSheetModal.dismiss(); } }} - secondary={{ - type: "Outline", - buttonProps: { - label: I18n.t( - "idpay.configuration.instruments.enrollmentSheet.buttons.cancel" - ), - accessibilityLabel: I18n.t( - "idpay.configuration.instruments.enrollmentSheet.buttons.cancel" - ), - onPress: () => { - enrollmentBottomSheetModal.dismiss(); - } - } + endAction={{ + color: "primary", + label: I18n.t( + "idpay.configuration.instruments.enrollmentSheet.buttons.activate" + ), + onPress: handleEnrollConfirm }} /> ), @@ -177,17 +167,13 @@ export const InstrumentsEnrollmentScreen = () => { const renderFooterButtons = () => { if (isInstrumentsOnlyMode) { return ( - { } return ( - ); diff --git a/ts/features/idpay/onboarding/screens/BoolValuePrerequisitesScreen.tsx b/ts/features/idpay/onboarding/screens/BoolValuePrerequisitesScreen.tsx index 80a51189161..c2b6872e5a7 100644 --- a/ts/features/idpay/onboarding/screens/BoolValuePrerequisitesScreen.tsx +++ b/ts/features/idpay/onboarding/screens/BoolValuePrerequisitesScreen.tsx @@ -1,6 +1,6 @@ import { Body, - FooterWithButtons, + FooterActionsInline, H2, VSpacer } from "@pagopa/io-app-design-system"; @@ -89,24 +89,16 @@ const InitiativeSelfDeclarationsScreen = () => { ))} - diff --git a/ts/features/idpay/onboarding/screens/CompletionScreen.tsx b/ts/features/idpay/onboarding/screens/CompletionScreen.tsx index b011518144a..04934d1a450 100644 --- a/ts/features/idpay/onboarding/screens/CompletionScreen.tsx +++ b/ts/features/idpay/onboarding/screens/CompletionScreen.tsx @@ -1,6 +1,6 @@ import { Body, - FooterWithButtons, + FooterActions, H6, Pictogram, VSpacer @@ -12,8 +12,8 @@ import { IOStyles } from "../../../../components/core/variables/IOStyles"; import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; import I18n from "../../../../i18n"; import themeVariables from "../../../../theme/variables"; -import { IdPayOnboardingMachineContext } from "../machine/provider"; import { isLoadingSelector } from "../../common/machine/selectors"; +import { IdPayOnboardingMachineContext } from "../machine/provider"; const CompletionScreen = () => { const { useActorRef, useSelector } = IdPayOnboardingMachineContext; @@ -49,15 +49,11 @@ const CompletionScreen = () => { - - diff --git a/ts/features/idpay/onboarding/screens/PDNDPrerequisitesScreen.tsx b/ts/features/idpay/onboarding/screens/PDNDPrerequisitesScreen.tsx index 5f5c88d9c1d..94de1ac7d30 100644 --- a/ts/features/idpay/onboarding/screens/PDNDPrerequisitesScreen.tsx +++ b/ts/features/idpay/onboarding/screens/PDNDPrerequisitesScreen.tsx @@ -2,7 +2,7 @@ import { Body, ButtonSolid, ContentWrapper, - FooterWithButtons, + FooterActionsInline, H2, ModuleSummary, VSpacer @@ -127,21 +127,16 @@ export const PDNDPrerequisitesScreen = () => { ))} - {bottomSheet} diff --git a/ts/features/idpay/payment/screens/IDPayPaymentAuthorizationScreen.tsx b/ts/features/idpay/payment/screens/IDPayPaymentAuthorizationScreen.tsx index 8236b9272b6..9d1d9ca8633 100644 --- a/ts/features/idpay/payment/screens/IDPayPaymentAuthorizationScreen.tsx +++ b/ts/features/idpay/payment/screens/IDPayPaymentAuthorizationScreen.tsx @@ -1,7 +1,7 @@ import { ContentWrapper, Divider, - FooterWithButtons, + FooterActionsInline, H2, H6, HSpacer, @@ -22,6 +22,7 @@ import { identificationRequest } from "../../../../store/actions/identification" import { useIODispatch } from "../../../../store/hooks"; import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; import { Skeleton } from "../../common/components/Skeleton"; +import { isLoadingSelector } from "../../common/machine/selectors"; import { formatDateOrDefault, formatNumberCurrencyCents, @@ -34,7 +35,6 @@ import { transactionDataSelector } from "../machine/selectors"; import { IdPayPaymentParamsList } from "../navigation/params"; -import { isLoadingSelector } from "../../common/machine/selectors"; export type IDPayPaymentAuthorizationScreenRouteParams = { trxCode?: string; @@ -107,24 +107,19 @@ const IDPayPaymentAuthorizationScreen = () => { - diff --git a/ts/features/idpay/payment/screens/IDPayPaymentCodeInputScreen.tsx b/ts/features/idpay/payment/screens/IDPayPaymentCodeInputScreen.tsx index 7e3d136bfa9..1f3ba4f5c89 100644 --- a/ts/features/idpay/payment/screens/IDPayPaymentCodeInputScreen.tsx +++ b/ts/features/idpay/payment/screens/IDPayPaymentCodeInputScreen.tsx @@ -1,6 +1,6 @@ import { Body, - FooterWithButtons, + FooterActions, H2, IOColors, IOStyles, @@ -82,13 +82,11 @@ const IDPayPaymentCodeInputScreen = () => { counterLimit={8} /> - { ), footer: ( - { - confirmModal.dismiss(); - handleConfirmPress(); - }, - color: "danger" + { + confirmModal.dismiss(); } }} - secondary={{ - type: "Outline", - buttonProps: { - label: I18n.t("global.buttons.cancel"), - accessibilityLabel: I18n.t("global.buttons.cancel"), - onPress: () => { - confirmModal.dismiss(); - } + endAction={{ + color: "danger", + label: I18n.t("idpay.unsubscription.button.continue"), + onPress: () => { + confirmModal.dismiss(); + handleConfirmPress(); } }} /> @@ -174,23 +164,17 @@ const UnsubscriptionConfirmationScreen = () => { - diff --git a/ts/features/messages/components/MessageAttachment/MessageAttachment.tsx b/ts/features/messages/components/MessageAttachment/MessageAttachment.tsx index 7a6260bb4be..7ed25652889 100644 --- a/ts/features/messages/components/MessageAttachment/MessageAttachment.tsx +++ b/ts/features/messages/components/MessageAttachment/MessageAttachment.tsx @@ -1,31 +1,35 @@ +import { + FooterActions, + FooterActionsInline, + IOToast +} from "@pagopa/io-app-design-system"; +import * as B from "fp-ts/lib/boolean"; +import { pipe } from "fp-ts/lib/function"; import React, { useCallback, useState } from "react"; import ReactNativeBlobUtil from "react-native-blob-util"; -import { FooterWithButtons, IOToast } from "@pagopa/io-app-design-system"; -import { pipe } from "fp-ts/lib/function"; -import * as B from "fp-ts/lib/boolean"; +import { ServiceId } from "../../../../../definitions/backend/ServiceId"; +import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent"; import I18n from "../../../../i18n"; import { useIOSelector } from "../../../../store/hooks"; -import { downloadedMessageAttachmentSelector } from "../../store/reducers/downloads"; -import { UIMessageId } from "../../types"; import { isIos } from "../../../../utils/platform"; import { share } from "../../../../utils/share"; -import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent"; import { - attachmentContentType, - attachmentDisplayName -} from "../../store/reducers/transformers"; + trackPNAttachmentOpeningSuccess, + trackPNAttachmentSave, + trackPNAttachmentSaveShare, + trackPNAttachmentShare +} from "../../../pn/analytics"; import { trackThirdPartyMessageAttachmentCorruptedFile, trackThirdPartyMessageAttachmentPreviewSuccess, trackThirdPartyMessageAttachmentUserAction } from "../../analytics"; +import { downloadedMessageAttachmentSelector } from "../../store/reducers/downloads"; import { - trackPNAttachmentOpeningSuccess, - trackPNAttachmentSave, - trackPNAttachmentSaveShare, - trackPNAttachmentShare -} from "../../../pn/analytics"; -import { ServiceId } from "../../../../../definitions/backend/ServiceId"; + attachmentContentType, + attachmentDisplayName +} from "../../store/reducers/transformers"; +import { UIMessageId } from "../../types"; import { PdfViewer } from "./PdfViewer"; type MessageAttachmentFooterProps = { @@ -44,65 +48,59 @@ const MessageAttachmentFooter = ({ name }: MessageAttachmentFooterProps) => isIos ? ( - { onShare(isPN, attachmentCategory); ReactNativeBlobUtil.ios.presentOptionsMenu(downloadPath); - }, - label: I18n.t("messagePDFPreview.singleBtn") + } } }} /> ) : ( - { - onShare(isPN, attachmentCategory); - share(`file://${downloadPath}`, undefined, false)().catch(_ => { - IOToast.show(I18n.t("messagePDFPreview.errors.sharing")); - }); - }, - label: I18n.t("messagePDFPreview.share") + { + onShare(isPN, attachmentCategory); + share(`file://${downloadPath}`, undefined, false)().catch(_ => { + IOToast.show(I18n.t("messagePDFPreview.errors.sharing")); + }); } }} - primary={{ - type: "Solid", - buttonProps: { - accessibilityLabel: I18n.t("messagePDFPreview.saveAccessibility"), - onPress: () => { - onDownload(isPN, attachmentCategory); - ReactNativeBlobUtil.MediaCollection.copyToMediaStore( - { - name, - parentFolder: "", - mimeType - }, - "Download", - downloadPath - ) - .then(_ => { - IOToast.show( - I18n.t("messagePDFPreview.savedAtLocation", { - name - }) - ); - }) - .catch(_ => { - IOToast.error(I18n.t("messagePDFPreview.errors.saving")); - }); - }, - label: I18n.t("messagePDFPreview.save") + endAction={{ + color: "primary", + label: I18n.t("messagePDFPreview.save"), + accessibilityLabel: I18n.t("messagePDFPreview.saveAccessibility"), + onPress: () => { + onDownload(isPN, attachmentCategory); + ReactNativeBlobUtil.MediaCollection.copyToMediaStore( + { + name, + parentFolder: "", + mimeType + }, + "Download", + downloadPath + ) + .then(_ => { + IOToast.show( + I18n.t("messagePDFPreview.savedAtLocation", { + name + }) + ); + }) + .catch(_ => { + IOToast.error(I18n.t("messagePDFPreview.errors.saving")); + }); } }} /> diff --git a/ts/features/messages/screens/MessageCalendarScreen.tsx b/ts/features/messages/screens/MessageCalendarScreen.tsx index 9ce615d961c..3b5949f1105 100644 --- a/ts/features/messages/screens/MessageCalendarScreen.tsx +++ b/ts/features/messages/screens/MessageCalendarScreen.tsx @@ -1,27 +1,27 @@ -import React, { useCallback, useEffect, useState } from "react"; -import { ScrollView, View } from "react-native"; -import { Calendar } from "react-native-calendar-events"; -import { RouteProp, useRoute } from "@react-navigation/native"; import { - FooterWithButtons, + FooterActions, IOStyles, ModalBSHeader, VSpacer } from "@pagopa/io-app-design-system"; import * as pot from "@pagopa/ts-commons/lib/pot"; +import { RouteProp, useRoute } from "@react-navigation/native"; import { pipe } from "fp-ts/lib/function"; import * as O from "fp-ts/lib/Option"; import * as TE from "fp-ts/lib/TaskEither"; +import React, { useCallback, useEffect, useState } from "react"; +import { ScrollView, View } from "react-native"; +import { Calendar } from "react-native-calendar-events"; +import { CalendarList } from "../../../components/CalendarList"; +import { OperationResultScreenContent } from "../../../components/screens/OperationResultScreenContent"; import I18n from "../../../i18n"; -import { UIMessageId } from "../types"; import { useIONavigation } from "../../../navigation/params/AppParamsList"; -import { MessagesParamsList } from "../navigation/params"; -import { OperationResultScreenContent } from "../../../components/screens/OperationResultScreenContent"; -import { CalendarList } from "../../../components/CalendarList"; import { useIOSelector } from "../../../store/hooks"; import { findDeviceCalendarsTask } from "../../../utils/calendar"; -import { messageDetailsByIdSelector } from "../store/reducers/detailsById"; import { useMessageCalendar } from "../hooks/useMessageCalendar"; +import { MessagesParamsList } from "../navigation/params"; +import { messageDetailsByIdSelector } from "../store/reducers/detailsById"; +import { UIMessageId } from "../types"; export type MessageCalendarScreenRouteParams = { messageId: UIMessageId; @@ -131,13 +131,11 @@ export const MessageCalendarScreen = () => { /> - navigation.goBack() } }} diff --git a/ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap b/ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap index 034c61990d4..47698b328a2 100644 --- a/ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap +++ b/ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap @@ -467,164 +467,160 @@ exports[`MessageAttachment Should match the snapshot when everything went fine 1 + - - - - Save or share - - - + Save or share + diff --git a/ts/features/pushNotifications/screens/OnboardingNotificationsInfoScreenConsent.tsx b/ts/features/pushNotifications/screens/OnboardingNotificationsInfoScreenConsent.tsx index fc57afcd9e1..46b04c809ad 100644 --- a/ts/features/pushNotifications/screens/OnboardingNotificationsInfoScreenConsent.tsx +++ b/ts/features/pushNotifications/screens/OnboardingNotificationsInfoScreenConsent.tsx @@ -1,36 +1,34 @@ -import React, { useCallback, useEffect, useMemo } from "react"; -import { AppState, FlatList, View, Platform, StyleSheet } from "react-native"; import { Body, Divider, - FooterWithButtons, + FooterActions, H2, H6, - IOStyles, IOVisualCostants, IconButton, ListItemInfo, VSpacer } from "@pagopa/io-app-design-system"; +import React, { useCallback, useEffect, useMemo } from "react"; +import { AppState, FlatList, Platform, StyleSheet, View } from "react-native"; import I18n from "../../../i18n"; import { useIODispatch, useIOSelector } from "../../../store/hooks"; -import { - checkNotificationPermissions, - openSystemNotificationSettingsScreen -} from "../utils"; import { pushNotificationPreviewEnabledSelector, pushNotificationRemindersEnabledSelector } from "../../../store/reducers/profile"; -import { notificationsInfoScreenConsent } from "../store/actions/profileNotificationPermissions"; import { trackNotificationsOptInOpenSettings, trackNotificationsOptInReminderOnPermissionsOff, trackNotificationsOptInSkipSystemPermissions } from "../analytics"; +import { notificationsInfoScreenConsent } from "../store/actions/profileNotificationPermissions"; +import { + checkNotificationPermissions, + openSystemNotificationSettingsScreen +} from "../utils"; const styles = StyleSheet.create({ - footer: { paddingBottom: IOStyles.footer.paddingBottom }, header: { alignSelf: "flex-end", flexDirection: "row", @@ -199,19 +197,16 @@ export const OnboardingNotificationsInfoScreenConsent = () => { ItemSeparatorComponent={() => } ListHeaderComponent={ListHeader} /> - - - + ); }; diff --git a/ts/features/pushNotifications/screens/__tests__/__snapshots__/OnboardingNotificationsInfoScreenConsent.test.tsx.snap b/ts/features/pushNotifications/screens/__tests__/__snapshots__/OnboardingNotificationsInfoScreenConsent.test.tsx.snap index da4aa5324ec..b94f4f476c6 100644 --- a/ts/features/pushNotifications/screens/__tests__/__snapshots__/OnboardingNotificationsInfoScreenConsent.test.tsx.snap +++ b/ts/features/pushNotifications/screens/__tests__/__snapshots__/OnboardingNotificationsInfoScreenConsent.test.tsx.snap @@ -1239,172 +1239,160 @@ exports[`OnboardingNotificationsInfoScreenConsent should match snapshot 1`] = ` + - - - - - Go to Settings - - - - + Go to Settings + diff --git a/ts/screens/authentication/cie/CieAuthorizeDataUsageScreen.tsx b/ts/screens/authentication/cie/CieAuthorizeDataUsageScreen.tsx index 730dc434828..e8b52ca4676 100644 --- a/ts/screens/authentication/cie/CieAuthorizeDataUsageScreen.tsx +++ b/ts/screens/authentication/cie/CieAuthorizeDataUsageScreen.tsx @@ -3,7 +3,7 @@ */ import { ContentWrapper, - FooterWithButtons, + FooterActionsInline, H2, VSpacer } from "@pagopa/io-app-design-system"; @@ -49,23 +49,14 @@ class CieAuthorizeDataUsageScreen extends React.PureComponent { {this.state.isLoadingCompleted && ( - Alert.alert(I18n.t("global.notImplemented")) - } + endAction={{ + label: I18n.t("global.buttons.retry"), + onPress: () => Alert.alert(I18n.t("global.notImplemented")) }} /> )} diff --git a/ts/screens/profile/components/services/ManualConfigBottomSheet.tsx b/ts/screens/profile/components/services/ManualConfigBottomSheet.tsx index 7d6d8ffc0e5..a85ad56900c 100644 --- a/ts/screens/profile/components/services/ManualConfigBottomSheet.tsx +++ b/ts/screens/profile/components/services/ManualConfigBottomSheet.tsx @@ -1,5 +1,5 @@ +import { FooterActionsInline, VSpacer } from "@pagopa/io-app-design-system"; import * as React from "react"; -import { VSpacer, FooterWithButtons } from "@pagopa/io-app-design-system"; import LegacyMarkdown from "../../../../components/ui/Markdown/LegacyMarkdown"; import I18n from "../../../../i18n"; import { useIOBottomSheetAutoresizableModal } from "../../../../utils/hooks/bottomSheet"; @@ -28,26 +28,18 @@ export const useManualConfigBottomSheet = (onConfirm: () => void) => { component: , fullScreen: true, footer: ( - dismiss(), - accessibilityLabel: I18n.t("global.buttons.cancel") - } + dismiss() }} - secondary={{ - type: "Solid", - buttonProps: { - color: "danger", - label: I18n.t("global.buttons.confirm"), - accessibilityLabel: I18n.t("global.buttons.confirm"), - onPress: () => { - onConfirm(); - dismiss(); - } + endAction={{ + color: "danger", + label: I18n.t("global.buttons.confirm"), + onPress: () => { + onConfirm(); + dismiss(); } }} />