From 2ce4801565dc571d8811a606979e62771e7bd64c Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Mon, 3 Feb 2025 17:43:03 +0100 Subject: [PATCH 01/20] Adapt `StatusBar` style according to the current color scheme --- .../payments/receipts/screens/ReceiptDetailsScreen.tsx | 2 -- ts/navigation/AppStackNavigator.tsx | 5 ++++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/ts/features/payments/receipts/screens/ReceiptDetailsScreen.tsx b/ts/features/payments/receipts/screens/ReceiptDetailsScreen.tsx index 02e40c105ca..c6b1a07d6ee 100644 --- a/ts/features/payments/receipts/screens/ReceiptDetailsScreen.tsx +++ b/ts/features/payments/receipts/screens/ReceiptDetailsScreen.tsx @@ -5,7 +5,6 @@ import { Dimensions, StyleSheet, View } from "react-native"; import Animated, { useAnimatedRef } from "react-native-reanimated"; import { OriginEnum } from "../../../../../definitions/pagopa/biz-events/InfoNotice"; import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent"; -import FocusAwareStatusBar from "../../../../components/ui/FocusAwareStatusBar"; import { IOScrollView } from "../../../../components/ui/IOScrollView"; import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel"; import I18n from "../../../../i18n"; @@ -175,7 +174,6 @@ const ReceiptDetailsScreen = () => { : undefined } > - {/* The following line is used to show the background color gray that overlay the basic one which is white */} diff --git a/ts/navigation/AppStackNavigator.tsx b/ts/navigation/AppStackNavigator.tsx index 330463a8ec1..ecb50d625f3 100644 --- a/ts/navigation/AppStackNavigator.tsx +++ b/ts/navigation/AppStackNavigator.tsx @@ -7,7 +7,7 @@ import { } from "@react-navigation/native"; import { PropsWithChildren, ReactElement, useEffect, useRef } from "react"; -import { View } from "react-native"; +import { StatusBar, View } from "react-native"; import { useStoredExperimentalDesign } from "../common/context/DSExperimentalContext"; import LoadingSpinnerOverlay from "../components/LoadingSpinnerOverlay"; import { cgnLinkingOptions } from "../features/bonus/cgn/navigation/navigator"; @@ -165,6 +165,9 @@ const InnerNavigationContainer = (props: InnerNavigationContainerProps) => { routeNameRef.current = currentRouteName; }} > + {props.children} ); From 725cf14e1ba07e4b36c38d633c7b68f053ec1664 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Tue, 4 Feb 2025 15:08:24 +0100 Subject: [PATCH 02/20] Update `io-app-design-system` to `4.5.2` --- package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 9a7dacd4c0d..cb8ec1cbf16 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "@babel/plugin-transform-private-property-in-object": "^7.25.9", "@babel/plugin-transform-react-jsx": "^7.25.9", "@gorhom/bottom-sheet": "^4.1.5", - "@pagopa/io-app-design-system": "4.5.1", + "@pagopa/io-app-design-system": "4.5.2", "@pagopa/io-pagopa-commons": "^3.1.0", "@pagopa/io-react-native-cieid": "^0.3.5", "@pagopa/io-react-native-crypto": "^1.0.1", diff --git a/yarn.lock b/yarn.lock index ea77148b11e..b02066a12e3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3753,9 +3753,9 @@ __metadata: languageName: node linkType: hard -"@pagopa/io-app-design-system@npm:4.5.1": - version: 4.5.1 - resolution: "@pagopa/io-app-design-system@npm:4.5.1" +"@pagopa/io-app-design-system@npm:4.5.2": + version: 4.5.2 + resolution: "@pagopa/io-app-design-system@npm:4.5.2" dependencies: "@testing-library/jest-native": ^5.4.2 "@types/react-test-renderer": ^18.0.0 @@ -3779,7 +3779,7 @@ __metadata: react-native-reanimated: "*" react-native-safe-area-context: "*" react-native-svg: "*" - checksum: b19370b3633c48334c112a0b3448a6c83900faea67f941a823c95b44f3e2212a5aba376e12571961b6b6d56545813ff6ae666595cf5dc9f3b14f7c06f59fea3a + checksum: fb7a07d7c4b714220ce5c54870ea9691989cf424f634ff4d7fc3ce4ecd66cdba6b211a86ce0854c6b1ec023027c835e23546f686e06938b78e742df0bfe5858e languageName: node linkType: hard @@ -13657,7 +13657,7 @@ __metadata: "@babel/runtime": ^7.20.0 "@gorhom/bottom-sheet": ^4.1.5 "@jambit/eslint-plugin-typed-redux-saga": ^0.4.0 - "@pagopa/io-app-design-system": 4.5.1 + "@pagopa/io-app-design-system": 4.5.2 "@pagopa/io-pagopa-commons": ^3.1.0 "@pagopa/io-react-native-cieid": ^0.3.5 "@pagopa/io-react-native-crypto": ^1.0.1 From 6503bc764949ecebf38da71009a2fc6fa54e9667 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Tue, 4 Feb 2025 15:46:07 +0100 Subject: [PATCH 03/20] Change logic of the header in the `CgnMerchantsListByCategory` --- .../merchants/ModuleCgnDiscount.tsx | 1 + .../merchants/CgnMerchantsListByCategory.tsx | 68 ++++--------------- ts/features/bonus/cgn/utils/filters.ts | 52 ++++++++++---- 3 files changed, 55 insertions(+), 66 deletions(-) diff --git a/ts/features/bonus/cgn/components/merchants/ModuleCgnDiscount.tsx b/ts/features/bonus/cgn/components/merchants/ModuleCgnDiscount.tsx index 01cd83a696f..a6a5c5bbccf 100644 --- a/ts/features/bonus/cgn/components/merchants/ModuleCgnDiscount.tsx +++ b/ts/features/bonus/cgn/components/merchants/ModuleCgnDiscount.tsx @@ -49,6 +49,7 @@ export const CategoryTag = ({ category }: CategoryTagProps) => { return O.isSome(categorySpecs) ? ( ; const CgnMerchantsListByCategory = () => { - const screenHeight = Dimensions.get("window").height; - const [titleHeight, setTitleHeight] = useState(0); - const translationY = useSharedValue(0); + // const screenHeight = Dimensions.get("window").height; + // const translationY = useSharedValue(0); - const getTitleHeight = (event: LayoutChangeEvent) => { - const { height } = event.nativeEvent.layout; - if (titleHeight === 0) { - setTitleHeight(height - insets.top - IOVisualCostants.headerHeight); - } - }; - - const scrollHandler = useAnimatedScrollHandler(event => { - // eslint-disable-next-line functional/immutable-data - translationY.value = event.contentOffset.y; - }); + const animatedFlatListRef = useAnimatedRef>(); const insets = useSafeAreaInsets(); const dispatch = useIODispatch(); @@ -148,11 +125,11 @@ const CgnMerchantsListByCategory = () => { ) ) ), - scrollValues: { - contentOffsetY: translationY, - triggerOffset: titleHeight - }, - transparent: true, + enableDiscreteTransition: true, + animatedRef: + animatedFlatListRef as unknown as AnimatedRef, + backgroundColor: categorySpecs?.colors, + variant: categorySpecs?.headerVariant, supportRequest: true, secondAction: { icon: "search", @@ -191,7 +168,6 @@ const CgnMerchantsListByCategory = () => { )} {categorySpecs && ( { } ]} > - - { const refreshControl = ( { initLoadingLists(); @@ -243,21 +217,11 @@ const CgnMerchantsListByCategory = () => { /> ); - const getPaddingBottom = () => { - const ELEMENT_HEIGHT = 49; - const totalListElementsHeight = ELEMENT_HEIGHT * merchantsAll.length; - const usedVerticalSpace = - titleHeight + totalListElementsHeight + insets.bottom; - const availableVerticalSpace = screenHeight - usedVerticalSpace; - - return availableVerticalSpace < titleHeight ? availableVerticalSpace : 0; - }; - return ( <> - {isError(onlineMerchants) && isError(offlineMerchants) ? ( { /> ) : ( = { @@ -22,70 +28,90 @@ export const categories: Record = { icon: "categCulture", nameKey: "bonus.cgn.merchantDetail.categories.cultureAndEntertainment", colors: "#AA338B", - textColor: "white" + textColor: "white", + statusBarStyle: "light-content", + headerVariant: "contrast" }, [ProductCategoryEnum.health]: { type: ProductCategoryEnum.health, icon: "categWellness", nameKey: "bonus.cgn.merchantDetail.categories.health", colors: "#B5D666", - textColor: "black" + textColor: "black", + statusBarStyle: "dark-content", + headerVariant: "neutral" }, [ProductCategoryEnum.learning]: { type: ProductCategoryEnum.learning, icon: "categLearning", nameKey: "bonus.cgn.merchantDetail.categories.learning", colors: "#2A61AE", - textColor: "white" + textColor: "white", + statusBarStyle: "light-content", + headerVariant: "contrast" }, [ProductCategoryEnum.sports]: { type: ProductCategoryEnum.sports, icon: "categSport", nameKey: "bonus.cgn.merchantDetail.categories.sport", colors: "#65BE72", - textColor: "black" + textColor: "black", + statusBarStyle: "dark-content", + headerVariant: "neutral" }, [ProductCategoryEnum.home]: { type: ProductCategoryEnum.home, icon: "categHome", nameKey: "bonus.cgn.merchantDetail.categories.home", colors: "#F8D547", - textColor: "black" + textColor: "black", + statusBarStyle: "dark-content", + headerVariant: "neutral" }, [ProductCategoryEnum.telephonyAndInternet]: { type: ProductCategoryEnum.telephonyAndInternet, icon: "categTelco", nameKey: "bonus.cgn.merchantDetail.categories.telco", colors: "#0089C7", - textColor: "white" + textColor: "white", + statusBarStyle: "light-content", + headerVariant: "contrast" }, [ProductCategoryEnum.bankingServices]: { type: ProductCategoryEnum.bankingServices, icon: "categFinance", nameKey: "bonus.cgn.merchantDetail.categories.finance", colors: "#4F51A3", - textColor: "white" + textColor: "white", + statusBarStyle: "light-content", + headerVariant: "contrast" }, [ProductCategoryEnum.travelling]: { type: ProductCategoryEnum.travelling, icon: "categTravel", nameKey: "bonus.cgn.merchantDetail.categories.travel", colors: "#E02F6E", - textColor: "white" + textColor: "white", + statusBarStyle: "light-content", + headerVariant: "contrast" }, [ProductCategoryEnum.sustainableMobility]: { type: ProductCategoryEnum.sustainableMobility, icon: "categMobility", nameKey: "bonus.cgn.merchantDetail.categories.mobility", colors: "#00AEB1", - textColor: "black" + textColor: "black", + statusBarStyle: "dark-content", + headerVariant: "neutral" }, [ProductCategoryEnum.jobOffers]: { type: ProductCategoryEnum.jobOffers, icon: "categJobOffers", nameKey: "bonus.cgn.merchantDetail.categories.job", colors: "#FAAE56", - textColor: "black" + textColor: "black", + statusBarStyle: "dark-content", + headerVariant: "neutral" } }; From 0dde159681ca0c773cde057bc8804171143ccd45 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Tue, 4 Feb 2025 16:15:13 +0100 Subject: [PATCH 04/20] Fix TS errors --- ts/features/design-system/core/DSButtons.tsx | 67 ------------------- ts/features/fci/components/DocumentViewer.tsx | 2 +- ts/features/fci/components/ErrorComponent.tsx | 17 +++-- ts/screens/modal/RootedDeviceModal.tsx | 6 +- 4 files changed, 12 insertions(+), 80 deletions(-) diff --git a/ts/features/design-system/core/DSButtons.tsx b/ts/features/design-system/core/DSButtons.tsx index a042e8e7336..dccf34a37ea 100644 --- a/ts/features/design-system/core/DSButtons.tsx +++ b/ts/features/design-system/core/DSButtons.tsx @@ -372,73 +372,6 @@ const renderButtonOutline = (isExperimental: boolean) => ( - {!isExperimental && ( - <> - - - - - - - - - - - { - alert("Action triggered"); - }} - /> - - - - - { - alert("Action triggered"); - }} - /> - { - alert("Action triggered"); - }} - /> - - - - )} - diff --git a/ts/features/fci/components/DocumentViewer.tsx b/ts/features/fci/components/DocumentViewer.tsx index b765236d437..bafe3f5c401 100644 --- a/ts/features/fci/components/DocumentViewer.tsx +++ b/ts/features/fci/components/DocumentViewer.tsx @@ -57,7 +57,7 @@ const renderFooter = (url: string, filePath: string) => { accessibilityLabel: I18n.t("global.buttons.share") }; - const saveButtonProps: ButtonSolidProps = { + const saveButtonProps = { onPress: () => { ReactNativeBlobUtil.MediaCollection.copyToMediaStore( { diff --git a/ts/features/fci/components/ErrorComponent.tsx b/ts/features/fci/components/ErrorComponent.tsx index ac0b4913d34..08acd5e92bb 100644 --- a/ts/features/fci/components/ErrorComponent.tsx +++ b/ts/features/fci/components/ErrorComponent.tsx @@ -1,20 +1,22 @@ -import { View } from "react-native"; -import { EmailString } from "@pagopa/ts-commons/lib/strings"; import { ButtonOutline, ButtonSolid, - ButtonSolidProps, IOPictograms, IOSpacingScale, IOStyles, Pictogram, VSpacer } from "@pagopa/io-app-design-system"; +import { EmailString } from "@pagopa/ts-commons/lib/strings"; +import { View } from "react-native"; import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context"; +import { ToolEnum } from "../../../../definitions/content/AssistanceToolConfig"; import I18n from "../../../i18n"; +import { useIODispatch, useIOSelector } from "../../../store/hooks"; +import { assistanceToolConfigSelector } from "../../../store/reducers/backendStatus/remoteConfig"; import { WithTestID } from "../../../types/WithTestID"; import { addTicketCustomField, @@ -24,14 +26,11 @@ import { zendeskFCICategory, zendeskFciId } from "../../../utils/supportAssistance"; -import { useIODispatch, useIOSelector } from "../../../store/hooks"; import { zendeskSelectedCategory, zendeskSupportStart } from "../../zendesk/store/actions"; import { fciSignatureRequestIdSelector } from "../store/reducers/fciSignatureRequest"; -import { assistanceToolConfigSelector } from "../../../store/reducers/backendStatus/remoteConfig"; -import { ToolEnum } from "../../../../definitions/content/AssistanceToolConfig"; import { InfoScreenComponent } from "./InfoScreenComponent"; export type Props = WithTestID<{ @@ -76,7 +75,7 @@ const ErrorComponent = (props: Props) => { } }; - const retryButtonProps: ButtonSolidProps = { + const retryButtonProps = { testID: "FciRetryButtonTestID", onPress: props.onPress, fullWidth: true, @@ -84,7 +83,7 @@ const ErrorComponent = (props: Props) => { accessibilityLabel: I18n.t("features.fci.errors.buttons.retry") }; - const closeButtonProps: ButtonSolidProps = { + const closeButtonProps = { testID: "FciCloseButtonTestID", onPress: props.onPress, fullWidth: true, @@ -92,7 +91,7 @@ const ErrorComponent = (props: Props) => { accessibilityLabel: I18n.t("features.fci.errors.buttons.close") }; - const assistanceButtonProps: ButtonSolidProps = { + const assistanceButtonProps = { testID: "FciAssistanceButtonTestID", fullWidth: true, onPress: handleAskAssistance, diff --git a/ts/screens/modal/RootedDeviceModal.tsx b/ts/screens/modal/RootedDeviceModal.tsx index 08f4a25211b..ee57d126466 100644 --- a/ts/screens/modal/RootedDeviceModal.tsx +++ b/ts/screens/modal/RootedDeviceModal.tsx @@ -1,9 +1,9 @@ import { + BodySmall, ButtonLink, - ButtonOutline, + ButtonSolid, ContentWrapper, H3, - BodySmall, Pictogram, VSpacer } from "@pagopa/io-app-design-system"; @@ -75,7 +75,7 @@ const RootedDeviceModal = () => { - Date: Tue, 4 Feb 2025 16:52:42 +0100 Subject: [PATCH 05/20] Update `jest` snapshots --- ...OperationResultScreenContent.test.tsx.snap | 5 +- .../IOScrollViewCentredContent.test.tsx.snap | 60 +- .../IOScrollViewWithListItems.test.tsx.snap | 15 +- .../CGNDiscountExpiredScreen.test.tsx.snap | 5 +- .../CgnDiscountCodeScreen.test.tsx.snap | 5 +- .../CieIdErrorScreen.test.tsx.snap | 10 +- .../CieIdNotInstalled.test.tsx.snap | 5 +- .../CieIdNotInstalledScreen.test.tsx.snap | 5 +- .../__snapshots__/wizards.test.tsx.snap | 20 +- .../CieIdAuthUrlError.test.tsx.snap | 5 +- .../FimsUpdateAppAlert.test.tsx.snap | 5 +- .../FimsHistoryKoScreen.test.tsx.snap | 5 +- ...ntialAsyncContinuationScreen.test.tsx.snap | 20 +- .../__snapshots__/EmptyList.test.tsx.snap | 10 +- .../PreconditionsFooter.test.tsx.snap | 10 +- .../MessageDetailsPaymentButton.test.tsx.snap | 10 +- .../MessageDetailsStickyFooter.test.tsx.snap | 30 +- .../MessageAttachment.test.tsx.snap | 5 +- .../MessageGreenPassScreen.test.tsx.snap | 5 +- .../MessageRouterScreen.test.tsx.snap | 5 +- .../WalletPaymentOutcomeScreen.test.tsx.snap | 135 +- .../__snapshots__/MessageFooter.test.tsx.snap | 8 +- .../PaidPaymentScreen.test.tsx.snap | 5 +- .../NotificationPreviewSample.test.tsx.snap | 284 +- ...ificationsPreferencesPreview.test.tsx.snap | 284 +- ...ProfileNotificationsSettings.test.tsx.snap | 9088 +++-------------- ...tificationsInfoScreenConsent.test.tsx.snap | 5 +- ...tificationsPreferencesScreen.test.tsx.snap | 380 +- ...otificationPermissionsScreen.test.tsx.snap | 5 +- .../WalletEmptyScreenContent.test.tsx.snap | 5 +- .../__snapshots__/LandingScreen.test.tsx.snap | 20 +- .../ActivateNfcScreen.test.tsx.snap | 5 +- ...tificationsPreferencesScreen.test.tsx.snap | 1278 +-- 33 files changed, 2249 insertions(+), 9493 deletions(-) diff --git a/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap b/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap index 85514e8535b..ed47631991f 100644 --- a/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap +++ b/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap @@ -496,15 +496,14 @@ exports[`OperationResultScreenContent should match the snapshot with default pro "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, diff --git a/ts/components/ui/__test__/__snapshots__/IOScrollViewCentredContent.test.tsx.snap b/ts/components/ui/__test__/__snapshots__/IOScrollViewCentredContent.test.tsx.snap index abe6f80b624..96a2563cd70 100644 --- a/ts/components/ui/__test__/__snapshots__/IOScrollViewCentredContent.test.tsx.snap +++ b/ts/components/ui/__test__/__snapshots__/IOScrollViewCentredContent.test.tsx.snap @@ -854,15 +854,14 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -1784,15 +1783,14 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -2943,15 +2941,14 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -3881,15 +3878,14 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -4700,15 +4696,14 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -5748,15 +5743,14 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -6774,15 +6768,14 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -7681,15 +7674,14 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -8817,15 +8809,14 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -9732,15 +9723,14 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -10528,15 +10518,14 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -11553,15 +11542,14 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, diff --git a/ts/components/ui/__test__/__snapshots__/IOScrollViewWithListItems.test.tsx.snap b/ts/components/ui/__test__/__snapshots__/IOScrollViewWithListItems.test.tsx.snap index 541bd82db52..69bd2c462d1 100644 --- a/ts/components/ui/__test__/__snapshots__/IOScrollViewWithListItems.test.tsx.snap +++ b/ts/components/ui/__test__/__snapshots__/IOScrollViewWithListItems.test.tsx.snap @@ -825,15 +825,14 @@ exports[`IOScrollViewWithListItems Rendering renders correctly with default prop "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -1461,15 +1460,14 @@ exports[`IOScrollViewWithListItems Rendering renders correctly without optional "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -2410,15 +2408,14 @@ exports[`IOScrollViewWithListItems Rendering renders subtitle as array correctly "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, diff --git a/ts/features/bonus/cgn/screens/discount/___tests___/__snapshots__/CGNDiscountExpiredScreen.test.tsx.snap b/ts/features/bonus/cgn/screens/discount/___tests___/__snapshots__/CGNDiscountExpiredScreen.test.tsx.snap index 1a923917629..e3ee1f7f262 100644 --- a/ts/features/bonus/cgn/screens/discount/___tests___/__snapshots__/CGNDiscountExpiredScreen.test.tsx.snap +++ b/ts/features/bonus/cgn/screens/discount/___tests___/__snapshots__/CGNDiscountExpiredScreen.test.tsx.snap @@ -650,15 +650,14 @@ exports[`CGNDiscountExpiredScreen should render correctly 1`] = ` "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, diff --git a/ts/features/bonus/cgn/screens/discount/___tests___/__snapshots__/CgnDiscountCodeScreen.test.tsx.snap b/ts/features/bonus/cgn/screens/discount/___tests___/__snapshots__/CgnDiscountCodeScreen.test.tsx.snap index 5fe136b1bf3..2fdfff76cee 100644 --- a/ts/features/bonus/cgn/screens/discount/___tests___/__snapshots__/CgnDiscountCodeScreen.test.tsx.snap +++ b/ts/features/bonus/cgn/screens/discount/___tests___/__snapshots__/CgnDiscountCodeScreen.test.tsx.snap @@ -631,15 +631,14 @@ exports[`CgnDiscountCodeScreen should render correctly 1`] = ` "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, diff --git a/ts/features/cie/__tests__/__snapshots__/CieIdErrorScreen.test.tsx.snap b/ts/features/cie/__tests__/__snapshots__/CieIdErrorScreen.test.tsx.snap index c9529991314..b8650fb0a7a 100644 --- a/ts/features/cie/__tests__/__snapshots__/CieIdErrorScreen.test.tsx.snap +++ b/ts/features/cie/__tests__/__snapshots__/CieIdErrorScreen.test.tsx.snap @@ -299,15 +299,14 @@ exports[`CieIdErrorScreen where device doesn't support NFC Should match the snap "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -789,15 +788,14 @@ Insert the CIE PIN and bring it close to the device to allow the data to be read "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, diff --git a/ts/features/cie/__tests__/__snapshots__/CieIdNotInstalled.test.tsx.snap b/ts/features/cie/__tests__/__snapshots__/CieIdNotInstalled.test.tsx.snap index c2a1e37b4ff..c902b69a5c7 100644 --- a/ts/features/cie/__tests__/__snapshots__/CieIdNotInstalled.test.tsx.snap +++ b/ts/features/cie/__tests__/__snapshots__/CieIdNotInstalled.test.tsx.snap @@ -285,15 +285,14 @@ exports[`CieIdNotInstalled Should match the snapshot 1`] = ` "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, diff --git a/ts/features/cie/__tests__/__snapshots__/CieIdNotInstalledScreen.test.tsx.snap b/ts/features/cie/__tests__/__snapshots__/CieIdNotInstalledScreen.test.tsx.snap index 6c5bb03ec63..d484b1b384b 100644 --- a/ts/features/cie/__tests__/__snapshots__/CieIdNotInstalledScreen.test.tsx.snap +++ b/ts/features/cie/__tests__/__snapshots__/CieIdNotInstalledScreen.test.tsx.snap @@ -285,15 +285,14 @@ exports[`CieIdNotInstalledScreen Should match snapshot 1`] = ` "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, diff --git a/ts/features/cie/__tests__/__snapshots__/wizards.test.tsx.snap b/ts/features/cie/__tests__/__snapshots__/wizards.test.tsx.snap index 0751df9c81e..b1a9e7b66f6 100644 --- a/ts/features/cie/__tests__/__snapshots__/wizards.test.tsx.snap +++ b/ts/features/cie/__tests__/__snapshots__/wizards.test.tsx.snap @@ -405,15 +405,14 @@ To enter the IO app without physically using the Electronic Identity Card, you m "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -1344,15 +1343,14 @@ exports[`CiePinWizard Should match the snapshot 1`] = ` "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -2389,15 +2387,14 @@ exports[`IDActivationWizard Should match the snapshot 1`] = ` "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -2732,15 +2729,14 @@ exports[`SpidWizard Should match the snapshot 1`] = ` "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, diff --git a/ts/features/cieLogin/__tests__/__snapshots__/CieIdAuthUrlError.test.tsx.snap b/ts/features/cieLogin/__tests__/__snapshots__/CieIdAuthUrlError.test.tsx.snap index 0d23de58f25..2b52e361776 100644 --- a/ts/features/cieLogin/__tests__/__snapshots__/CieIdAuthUrlError.test.tsx.snap +++ b/ts/features/cieLogin/__tests__/__snapshots__/CieIdAuthUrlError.test.tsx.snap @@ -284,15 +284,14 @@ exports[`CieIdAuthUrlError Should match the snapshot 1`] = ` "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, diff --git a/ts/features/fims/common/components/__tests__/__snapshots__/FimsUpdateAppAlert.test.tsx.snap b/ts/features/fims/common/components/__tests__/__snapshots__/FimsUpdateAppAlert.test.tsx.snap index d93b51228e3..45e0b20f6a7 100644 --- a/ts/features/fims/common/components/__tests__/__snapshots__/FimsUpdateAppAlert.test.tsx.snap +++ b/ts/features/fims/common/components/__tests__/__snapshots__/FimsUpdateAppAlert.test.tsx.snap @@ -632,15 +632,14 @@ exports[`FimsUpdateAppAlert should match snapshot 1`] = ` "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, diff --git a/ts/features/fims/history/components/__tests__/__snapshots__/FimsHistoryKoScreen.test.tsx.snap b/ts/features/fims/history/components/__tests__/__snapshots__/FimsHistoryKoScreen.test.tsx.snap index 9ac69f3e8fb..75d2fe48121 100644 --- a/ts/features/fims/history/components/__tests__/__snapshots__/FimsHistoryKoScreen.test.tsx.snap +++ b/ts/features/fims/history/components/__tests__/__snapshots__/FimsHistoryKoScreen.test.tsx.snap @@ -680,15 +680,14 @@ exports[`fimshistoryKoScreen should match snapshot 1`] = ` "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, diff --git a/ts/features/itwallet/issuance/screens/__tests__/__snapshots__/ItwIssuanceCredentialAsyncContinuationScreen.test.tsx.snap b/ts/features/itwallet/issuance/screens/__tests__/__snapshots__/ItwIssuanceCredentialAsyncContinuationScreen.test.tsx.snap index d29914eeed6..cab90988ad7 100644 --- a/ts/features/itwallet/issuance/screens/__tests__/__snapshots__/ItwIssuanceCredentialAsyncContinuationScreen.test.tsx.snap +++ b/ts/features/itwallet/issuance/screens/__tests__/__snapshots__/ItwIssuanceCredentialAsyncContinuationScreen.test.tsx.snap @@ -735,15 +735,14 @@ exports[`ItwIssuanceCredentialAsyncContinuationScreen it should render the activ "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -1630,15 +1629,14 @@ exports[`ItwIssuanceCredentialAsyncContinuationScreen it should render the docum "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -2478,15 +2476,14 @@ exports[`ItwIssuanceCredentialAsyncContinuationScreen it should render the gener "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -3206,15 +3203,14 @@ exports[`ItwIssuanceCredentialAsyncContinuationScreen it should render the gener "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, diff --git a/ts/features/messages/components/Home/__tests__/__snapshots__/EmptyList.test.tsx.snap b/ts/features/messages/components/Home/__tests__/__snapshots__/EmptyList.test.tsx.snap index 2db32d5e939..e8b8f155e17 100644 --- a/ts/features/messages/components/Home/__tests__/__snapshots__/EmptyList.test.tsx.snap +++ b/ts/features/messages/components/Home/__tests__/__snapshots__/EmptyList.test.tsx.snap @@ -1183,15 +1183,14 @@ exports[`EmptyList should match snapshot, ARCHIVE category, pot.noneError 1`] = "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -6845,15 +6844,14 @@ exports[`EmptyList should match snapshot, INBOX category, pot.noneError 1`] = "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, diff --git a/ts/features/messages/components/Home/__tests__/__snapshots__/PreconditionsFooter.test.tsx.snap b/ts/features/messages/components/Home/__tests__/__snapshots__/PreconditionsFooter.test.tsx.snap index 8a9c2cb3bfe..1d2565c899a 100644 --- a/ts/features/messages/components/Home/__tests__/__snapshots__/PreconditionsFooter.test.tsx.snap +++ b/ts/features/messages/components/Home/__tests__/__snapshots__/PreconditionsFooter.test.tsx.snap @@ -431,15 +431,14 @@ exports[`PreconditionsFooter should match snapshot for 'content' footer category "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -1404,15 +1403,14 @@ exports[`PreconditionsFooter should match snapshot for 'update' footer category "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsPaymentButton.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsPaymentButton.test.tsx.snap index 620fdb9c640..33c85fc0ac7 100644 --- a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsPaymentButton.test.tsx.snap +++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsPaymentButton.test.tsx.snap @@ -381,15 +381,14 @@ exports[`MessageDetailsPaymentButton should match snapshot when loading 1`] = ` "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -981,15 +980,14 @@ exports[`MessageDetailsPaymentButton should match snapshot when not loading 1`] "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsStickyFooter.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsStickyFooter.test.tsx.snap index 7007f66e829..1347c27f117 100644 --- a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsStickyFooter.test.tsx.snap +++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsStickyFooter.test.tsx.snap @@ -410,15 +410,14 @@ exports[`MessageDetailsStickyFooter should match snapshot with both CTAs and no "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -1015,15 +1014,14 @@ exports[`MessageDetailsStickyFooter should match snapshot with both CTAs and vis "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -2076,15 +2074,14 @@ exports[`MessageDetailsStickyFooter should match snapshot with no CTAs and enabl "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -2907,15 +2904,14 @@ exports[`MessageDetailsStickyFooter should match snapshot with no CTAs and loadi "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -3537,15 +3533,14 @@ exports[`MessageDetailsStickyFooter should match snapshot with one CTA and no pa "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -4022,15 +4017,14 @@ exports[`MessageDetailsStickyFooter should match snapshot with one CTA and visib "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, 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 0a4a0cdcb90..fb96f1f2bc3 100644 --- a/ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap +++ b/ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap @@ -563,15 +563,14 @@ exports[`MessageAttachment Should match the snapshot when everything went fine 1 "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, diff --git a/ts/features/messages/screens/__tests__/__snapshots__/MessageGreenPassScreen.test.tsx.snap b/ts/features/messages/screens/__tests__/__snapshots__/MessageGreenPassScreen.test.tsx.snap index 484348dbcbd..17a4e187c29 100644 --- a/ts/features/messages/screens/__tests__/__snapshots__/MessageGreenPassScreen.test.tsx.snap +++ b/ts/features/messages/screens/__tests__/__snapshots__/MessageGreenPassScreen.test.tsx.snap @@ -588,15 +588,14 @@ exports[`MessageGreenPassScreen Should match snapshost 1`] = ` "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, diff --git a/ts/features/messages/screens/__tests__/__snapshots__/MessageRouterScreen.test.tsx.snap b/ts/features/messages/screens/__tests__/__snapshots__/MessageRouterScreen.test.tsx.snap index d89cd4b9d0b..3af8c4eae55 100644 --- a/ts/features/messages/screens/__tests__/__snapshots__/MessageRouterScreen.test.tsx.snap +++ b/ts/features/messages/screens/__tests__/__snapshots__/MessageRouterScreen.test.tsx.snap @@ -2200,15 +2200,14 @@ exports[`MessageRouterScreen should match snapshot on message data retrieval fai "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, diff --git a/ts/features/payments/checkout/screens/__tests__/__snapshots__/WalletPaymentOutcomeScreen.test.tsx.snap b/ts/features/payments/checkout/screens/__tests__/__snapshots__/WalletPaymentOutcomeScreen.test.tsx.snap index 5516df852b7..f4dc64e1623 100644 --- a/ts/features/payments/checkout/screens/__tests__/__snapshots__/WalletPaymentOutcomeScreen.test.tsx.snap +++ b/ts/features/payments/checkout/screens/__tests__/__snapshots__/WalletPaymentOutcomeScreen.test.tsx.snap @@ -491,15 +491,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -2421,15 +2420,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -4332,15 +4330,14 @@ Controlla di aver seguito correttamente le istruzioni della tua banca. "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -6228,15 +6225,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -8138,15 +8134,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -10004,15 +9999,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -11962,15 +11956,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -13978,15 +13971,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -15824,15 +15816,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -17754,15 +17745,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -19664,15 +19654,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -21594,15 +21583,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -23460,15 +23448,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -25510,15 +25497,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -27440,15 +27426,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -29378,15 +29363,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -31288,15 +31272,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -33156,15 +33139,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -35186,15 +35168,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -37102,15 +37083,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -39286,15 +39266,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -41155,15 +41134,14 @@ Se il problema persiste, prova a usare un altro metodo o gestore del pagamento. "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -43205,15 +43183,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -45221,15 +45198,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -47159,15 +47135,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -49069,15 +49044,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -50999,15 +50973,14 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, diff --git a/ts/features/pn/components/__test__/__snapshots__/MessageFooter.test.tsx.snap b/ts/features/pn/components/__test__/__snapshots__/MessageFooter.test.tsx.snap index 74918b77d9b..dcfab476e3d 100644 --- a/ts/features/pn/components/__test__/__snapshots__/MessageFooter.test.tsx.snap +++ b/ts/features/pn/components/__test__/__snapshots__/MessageFooter.test.tsx.snap @@ -1096,15 +1096,14 @@ exports[`MessageFooter should match snapshot for visibleEnabled button 1`] = ` "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, @@ -1575,6 +1574,7 @@ exports[`MessageFooter should match snapshot for visibleLoading button 1`] = ` "textAlignVertical": "center", }, { + "backgroundColor": "#D2D6E3", "overflow": "hidden", }, false, @@ -1582,7 +1582,7 @@ exports[`MessageFooter should match snapshot for visibleLoading button 1`] = ` "height": 40, }, { - "backgroundColor": "#D2D6E3", + "opacity": 0.5, }, false, false, diff --git a/ts/features/pn/screens/__test__/__snapshots__/PaidPaymentScreen.test.tsx.snap b/ts/features/pn/screens/__test__/__snapshots__/PaidPaymentScreen.test.tsx.snap index 1c8df15fb2d..2432c83f3b4 100644 --- a/ts/features/pn/screens/__test__/__snapshots__/PaidPaymentScreen.test.tsx.snap +++ b/ts/features/pn/screens/__test__/__snapshots__/PaidPaymentScreen.test.tsx.snap @@ -516,15 +516,14 @@ exports[`PaidPaymentScreen should match snapshot 1`] = ` "textAlignVertical": "center", }, { + "backgroundColor": "#0073E6", "overflow": "hidden", }, false, { "height": 40, }, - { - "backgroundColor": "#0073E6", - }, + {}, false, { "backgroundColor": undefined, diff --git a/ts/features/pushNotifications/components/__tests__/__snapshots__/NotificationPreviewSample.test.tsx.snap b/ts/features/pushNotifications/components/__tests__/__snapshots__/NotificationPreviewSample.test.tsx.snap index b07470fa773..9604877eab8 100644 --- a/ts/features/pushNotifications/components/__tests__/__snapshots__/NotificationPreviewSample.test.tsx.snap +++ b/ts/features/pushNotifications/components/__tests__/__snapshots__/NotificationPreviewSample.test.tsx.snap @@ -398,82 +398,37 @@ exports[`NotificationPreviewSample should match snapshot, preview off, reminder } } > - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> - - - - - - - + /> Date: Wed, 5 Feb 2025 17:12:32 +0100 Subject: [PATCH 06/20] Fix `backgroundColor` on Android devices --- ts/navigation/AppStackNavigator.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/ts/navigation/AppStackNavigator.tsx b/ts/navigation/AppStackNavigator.tsx index ecb50d625f3..a280569e52c 100644 --- a/ts/navigation/AppStackNavigator.tsx +++ b/ts/navigation/AppStackNavigator.tsx @@ -166,6 +166,11 @@ const InnerNavigationContainer = (props: InnerNavigationContainerProps) => { }} > {props.children} From 9e92847b6640f89ef5989f52c64e82ced28b4a43 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Thu, 6 Feb 2025 09:53:10 +0100 Subject: [PATCH 07/20] Update `io-app-design-system` to `4.5.3` --- package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 5558483220c..3118ee4002b 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "@babel/plugin-transform-private-property-in-object": "^7.25.9", "@babel/plugin-transform-react-jsx": "^7.25.9", "@gorhom/bottom-sheet": "^4.1.5", - "@pagopa/io-app-design-system": "4.5.2", + "@pagopa/io-app-design-system": "4.5.3", "@pagopa/io-pagopa-commons": "^3.1.0", "@pagopa/io-react-native-cieid": "^0.3.5", "@pagopa/io-react-native-crypto": "^1.0.1", diff --git a/yarn.lock b/yarn.lock index b02066a12e3..483e809ac70 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3753,9 +3753,9 @@ __metadata: languageName: node linkType: hard -"@pagopa/io-app-design-system@npm:4.5.2": - version: 4.5.2 - resolution: "@pagopa/io-app-design-system@npm:4.5.2" +"@pagopa/io-app-design-system@npm:4.5.3": + version: 4.5.3 + resolution: "@pagopa/io-app-design-system@npm:4.5.3" dependencies: "@testing-library/jest-native": ^5.4.2 "@types/react-test-renderer": ^18.0.0 @@ -3779,7 +3779,7 @@ __metadata: react-native-reanimated: "*" react-native-safe-area-context: "*" react-native-svg: "*" - checksum: fb7a07d7c4b714220ce5c54870ea9691989cf424f634ff4d7fc3ce4ecd66cdba6b211a86ce0854c6b1ec023027c835e23546f686e06938b78e742df0bfe5858e + checksum: a751ccb39d5d7868384347b28de74dbdcd975104171eb21da4a1127c0c636407709811d6ea8de4986848342c3e37fc4f40a0c00e8ea7d6d6cfc64666c5cb5216 languageName: node linkType: hard @@ -13657,7 +13657,7 @@ __metadata: "@babel/runtime": ^7.20.0 "@gorhom/bottom-sheet": ^4.1.5 "@jambit/eslint-plugin-typed-redux-saga": ^0.4.0 - "@pagopa/io-app-design-system": 4.5.2 + "@pagopa/io-app-design-system": 4.5.3 "@pagopa/io-pagopa-commons": ^3.1.0 "@pagopa/io-react-native-cieid": ^0.3.5 "@pagopa/io-react-native-crypto": ^1.0.1 From 47c244c801c23c137f2ea8636a54cbd4993aae80 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Thu, 6 Feb 2025 10:47:28 +0100 Subject: [PATCH 08/20] Fix `CGN` main detail screen --- .../BonusCard/BonusCardScreenComponent.tsx | 25 +++++++++++-------- .../bonus/cgn/screens/CgnDetailScreen.tsx | 1 + .../merchants/CgnMerchantsListByCategory.tsx | 5 ++-- 3 files changed, 18 insertions(+), 13 deletions(-) diff --git a/ts/components/BonusCard/BonusCardScreenComponent.tsx b/ts/components/BonusCard/BonusCardScreenComponent.tsx index c1d587d1f38..441d1ee6a04 100644 --- a/ts/components/BonusCard/BonusCardScreenComponent.tsx +++ b/ts/components/BonusCard/BonusCardScreenComponent.tsx @@ -1,6 +1,6 @@ -import { HeaderActionProps } from "@pagopa/io-app-design-system"; +import { HeaderActionProps, IOColors } from "@pagopa/io-app-design-system"; import { ReactNode } from "react"; -import { Dimensions } from "react-native"; +import { Dimensions, StatusBar } from "react-native"; import Animated, { useAnimatedRef } from "react-native-reanimated"; import { useHeaderSecondLevel } from "../../hooks/useHeaderSecondLevel"; import { SupportRequestParams } from "../../hooks/useStartSupportRequest"; @@ -45,6 +45,8 @@ const BonusCardScreenComponent = ({ title: title || "", transparent: true, supportRequest: true, + variant: "neutral", + backgroundColor: IOColors["grey-50"], faqCategories, contextualHelpMarkdown, contextualHelp, @@ -54,14 +56,17 @@ const BonusCardScreenComponent = ({ }); return ( - - - {children} - + <> + + + + {children} + + ); }; diff --git a/ts/features/bonus/cgn/screens/CgnDetailScreen.tsx b/ts/features/bonus/cgn/screens/CgnDetailScreen.tsx index 3eee377fbb6..7125085c9a4 100644 --- a/ts/features/bonus/cgn/screens/CgnDetailScreen.tsx +++ b/ts/features/bonus/cgn/screens/CgnDetailScreen.tsx @@ -196,6 +196,7 @@ const CgnDetailScreen = (props: Props): ReactElement => { } cardFooter={

{ ) ), enableDiscreteTransition: true, - animatedRef: - animatedFlatListRef as unknown as AnimatedRef, + animatedRef: animatedFlatListRef, backgroundColor: categorySpecs?.colors, variant: categorySpecs?.headerVariant, supportRequest: true, From 034b51f11410049e5ef0b99139a8b9b978dbe7a9 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Thu, 6 Feb 2025 11:11:57 +0100 Subject: [PATCH 09/20] Update `io-app-design-system` to `4.5.4` --- package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 3118ee4002b..e3829aea5e6 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "@babel/plugin-transform-private-property-in-object": "^7.25.9", "@babel/plugin-transform-react-jsx": "^7.25.9", "@gorhom/bottom-sheet": "^4.1.5", - "@pagopa/io-app-design-system": "4.5.3", + "@pagopa/io-app-design-system": "4.5.4", "@pagopa/io-pagopa-commons": "^3.1.0", "@pagopa/io-react-native-cieid": "^0.3.5", "@pagopa/io-react-native-crypto": "^1.0.1", diff --git a/yarn.lock b/yarn.lock index 483e809ac70..da097ef0592 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3753,9 +3753,9 @@ __metadata: languageName: node linkType: hard -"@pagopa/io-app-design-system@npm:4.5.3": - version: 4.5.3 - resolution: "@pagopa/io-app-design-system@npm:4.5.3" +"@pagopa/io-app-design-system@npm:4.5.4": + version: 4.5.4 + resolution: "@pagopa/io-app-design-system@npm:4.5.4" dependencies: "@testing-library/jest-native": ^5.4.2 "@types/react-test-renderer": ^18.0.0 @@ -3779,7 +3779,7 @@ __metadata: react-native-reanimated: "*" react-native-safe-area-context: "*" react-native-svg: "*" - checksum: a751ccb39d5d7868384347b28de74dbdcd975104171eb21da4a1127c0c636407709811d6ea8de4986848342c3e37fc4f40a0c00e8ea7d6d6cfc64666c5cb5216 + checksum: c5c49dd90b2e6ff323f8d4efe8caa6365d67c55dbfd8e9bf007385dd343e16ad11b37e6031e02639683a3cf1af34e6b47ab6b8efb63262ba4a55082503be5b08 languageName: node linkType: hard @@ -13657,7 +13657,7 @@ __metadata: "@babel/runtime": ^7.20.0 "@gorhom/bottom-sheet": ^4.1.5 "@jambit/eslint-plugin-typed-redux-saga": ^0.4.0 - "@pagopa/io-app-design-system": 4.5.3 + "@pagopa/io-app-design-system": 4.5.4 "@pagopa/io-pagopa-commons": ^3.1.0 "@pagopa/io-react-native-cieid": ^0.3.5 "@pagopa/io-react-native-crypto": ^1.0.1 From be3271079e54e29739f20fc0725d4e6fe37cb5ec Mon Sep 17 00:00:00 2001 From: Emanuele Dall'Ara <71103219+LeleDallas@users.noreply.github.com> Date: Thu, 6 Feb 2025 12:17:44 +0100 Subject: [PATCH 10/20] style: cards header color based on type and theme --- .../BonusCard/BonusCardScreenComponent.tsx | 25 ++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/ts/components/BonusCard/BonusCardScreenComponent.tsx b/ts/components/BonusCard/BonusCardScreenComponent.tsx index 441d1ee6a04..16fd17b6196 100644 --- a/ts/components/BonusCard/BonusCardScreenComponent.tsx +++ b/ts/components/BonusCard/BonusCardScreenComponent.tsx @@ -1,9 +1,14 @@ -import { HeaderActionProps, IOColors } from "@pagopa/io-app-design-system"; +import { + HeaderActionProps, + IOColors, + useIOThemeContext +} from "@pagopa/io-app-design-system"; import { ReactNode } from "react"; import { Dimensions, StatusBar } from "react-native"; import Animated, { useAnimatedRef } from "react-native-reanimated"; import { useHeaderSecondLevel } from "../../hooks/useHeaderSecondLevel"; import { SupportRequestParams } from "../../hooks/useStartSupportRequest"; +import { isAndroid } from "../../utils/platform"; import { IOScrollView, IOScrollViewActions } from "../ui/IOScrollView"; import { BonusCard } from "./BonusCard"; @@ -41,12 +46,24 @@ const BonusCardScreenComponent = ({ const screenHeight = Dimensions.get("window").height; const shouldHideLogo = screenHeight < MIN_HEIGHT_TO_SHOW_FULL_RENDER; + const { themeType } = useIOThemeContext(); + + const isDark = themeType === "dark"; + // We need to check if the card is a CGN type to set the background color + const isCGNType = !cardProps.isLoading && cardProps.cardBackground; + // Custom background color for CGN based on the platform + const cgnBackgroundColor = isAndroid ? IOColors.white : IOColors["grey-50"]; + // If the card is not a CGN type, we set the default header background color as card color + const backgroundColor = isCGNType + ? cgnBackgroundColor + : IOColors["blueIO-50"]; + useHeaderSecondLevel({ title: title || "", transparent: true, supportRequest: true, variant: "neutral", - backgroundColor: IOColors["grey-50"], + backgroundColor, faqCategories, contextualHelpMarkdown, contextualHelp, @@ -57,7 +74,9 @@ const BonusCardScreenComponent = ({ return ( <> - + Date: Fri, 7 Feb 2025 17:15:39 +0100 Subject: [PATCH 11/20] Remove hardcoded `StatusBar` from legacy components --- ts/RootContainer.tsx | 15 ++++----------- ts/components/ui/AppHeader.tsx | 7 +------ ts/theme/variables.ts | 2 -- 3 files changed, 5 insertions(+), 19 deletions(-) diff --git a/ts/RootContainer.tsx b/ts/RootContainer.tsx index dcab724a737..caa122bd9c3 100644 --- a/ts/RootContainer.tsx +++ b/ts/RootContainer.tsx @@ -6,30 +6,28 @@ import { AppState, AppStateStatus, EmitterSubscription, - NativeEventSubscription, - StatusBar + NativeEventSubscription } from "react-native"; import SplashScreen from "react-native-splash-screen"; import { connect } from "react-redux"; -import configurePushNotifications from "./features/pushNotifications/utils/configurePushNotification"; +import { ReactNavigationInstrumentation } from "./App"; import DebugInfoOverlay from "./components/DebugInfoOverlay"; import PagoPATestIndicatorOverlay from "./components/PagoPATestIndicatorOverlay"; import { LightModalRoot } from "./components/ui/LightModal"; +import configurePushNotifications from "./features/pushNotifications/utils/configurePushNotification"; import { setLocale } from "./i18n"; import { IONavigationContainer } from "./navigation/AppStackNavigator"; import RootModal from "./screens/modal/RootModal"; import { applicationChangeState } from "./store/actions/application"; import { setDebugCurrentRouteName } from "./store/actions/debug"; import { navigateBack } from "./store/actions/navigation"; +import { setScreenReaderEnabled } from "./store/actions/preferences"; import { isDebugModeEnabledSelector } from "./store/reducers/debug"; import { isPagoPATestEnabledSelector, preferredLanguageSelector } from "./store/reducers/persistedPreferences"; import { GlobalState } from "./store/reducers/types"; -import customVariables from "./theme/variables"; -import { ReactNavigationInstrumentation } from "./App"; -import { setScreenReaderEnabled } from "./store/actions/preferences"; type Props = ReturnType & typeof mapDispatchToProps & { @@ -113,11 +111,6 @@ class RootContainer extends PureComponent { return ( <> - - diff --git a/ts/components/ui/AppHeader.tsx b/ts/components/ui/AppHeader.tsx index a50a69799d7..d141b15baaa 100644 --- a/ts/components/ui/AppHeader.tsx +++ b/ts/components/ui/AppHeader.tsx @@ -4,9 +4,8 @@ import { IOStyles, IOVisualCostants } from "@pagopa/io-app-design-system"; import { PropsWithChildren } from "react"; -import { ColorValue, StatusBar, View, ViewProps } from "react-native"; +import { ColorValue, View, ViewProps } from "react-native"; import { useSafeAreaInsets } from "react-native-safe-area-context"; -import variables from "../../theme/variables"; type Props = ViewProps & { backgroundColor?: ColorValue; @@ -23,10 +22,6 @@ const AppHeader = (props: PropsWithChildren) => { backgroundColor: props.backgroundColor }} > - Date: Fri, 7 Feb 2025 17:45:10 +0100 Subject: [PATCH 12/20] Remove other `StatusBar` references --- .../merchants/discount/CgnDiscountHeader.tsx | 4 -- .../discount/CgnDiscountDetailScreen.tsx | 23 +++++----- .../merchants/CgnMerchantsListByCategory.tsx | 1 + ts/features/design-system/DesignSystem.tsx | 43 ++++++++----------- .../components/DesignSystemScreen.tsx | 41 ++++++------------ ts/navigation/AppStackNavigator.tsx | 14 +++--- 6 files changed, 53 insertions(+), 73 deletions(-) diff --git a/ts/features/bonus/cgn/components/merchants/discount/CgnDiscountHeader.tsx b/ts/features/bonus/cgn/components/merchants/discount/CgnDiscountHeader.tsx index 00780d2e482..118be5fea9b 100644 --- a/ts/features/bonus/cgn/components/merchants/discount/CgnDiscountHeader.tsx +++ b/ts/features/bonus/cgn/components/merchants/discount/CgnDiscountHeader.tsx @@ -6,7 +6,6 @@ import { IOStyles, VSpacer } from "@pagopa/io-app-design-system"; -import { useHeaderHeight } from "@react-navigation/elements"; import { StyleSheet, View } from "react-native"; import { Discount } from "../../../../../../../definitions/cgn/merchants/Discount"; import I18n from "../../../../../../i18n"; @@ -26,8 +25,6 @@ export const CgnDiscountHeader = ({ ? styles.backgroundNewItem : styles.backgroundDefault; - const headerHeight = useHeaderHeight(); - const { isNew, discount, name, productCategories } = discountDetails; return ( @@ -36,7 +33,6 @@ export const CgnDiscountHeader = ({ style={[ IOStyles.horizontalContentPadding, { - paddingTop: headerHeight, backgroundColor: discountColor.backgroundColor, paddingBottom: 24 } diff --git a/ts/features/bonus/cgn/screens/discount/CgnDiscountDetailScreen.tsx b/ts/features/bonus/cgn/screens/discount/CgnDiscountDetailScreen.tsx index 66df1ebd725..1899a0ef6a3 100644 --- a/ts/features/bonus/cgn/screens/discount/CgnDiscountDetailScreen.tsx +++ b/ts/features/bonus/cgn/screens/discount/CgnDiscountDetailScreen.tsx @@ -191,17 +191,6 @@ const CgnDiscountDetailScreen = () => { } }; - useHeaderSecondLevel({ - title: discountDetails?.name || "", - scrollValues: { - contentOffsetY: translationY, - triggerOffset: titleHeight - }, - transparent: true, - canGoBack: true, - supportRequest: true - }); - useEffect(() => { dispatch(resetMerchantDiscountCode()); dispatch(resetOtpState()); @@ -253,6 +242,18 @@ const CgnDiscountDetailScreen = () => { ? styles.backgroundNewItem : styles.backgroundDefault; + useHeaderSecondLevel({ + title: discountDetails?.name || "", + scrollValues: { + contentOffsetY: translationY, + triggerOffset: titleHeight + }, + backgroundColor: discountColor.backgroundColor, + variant: "neutral", + canGoBack: true, + supportRequest: true + }); + if (discountDetails && merchantDetails) { return ( <> diff --git a/ts/features/bonus/cgn/screens/merchants/CgnMerchantsListByCategory.tsx b/ts/features/bonus/cgn/screens/merchants/CgnMerchantsListByCategory.tsx index 980384c042e..b15dedb7ce2 100644 --- a/ts/features/bonus/cgn/screens/merchants/CgnMerchantsListByCategory.tsx +++ b/ts/features/bonus/cgn/screens/merchants/CgnMerchantsListByCategory.tsx @@ -219,6 +219,7 @@ const CgnMerchantsListByCategory = () => { return ( <> diff --git a/ts/features/design-system/DesignSystem.tsx b/ts/features/design-system/DesignSystem.tsx index bc42e08a970..9e8ebf0b807 100644 --- a/ts/features/design-system/DesignSystem.tsx +++ b/ts/features/design-system/DesignSystem.tsx @@ -8,7 +8,7 @@ import { VStack, useIOTheme } from "@pagopa/io-app-design-system"; -import { SectionList, StatusBar, useColorScheme } from "react-native"; +import { SectionList } from "react-native"; import { IOStyles } from "../../components/core/variables/IOStyles"; import { useScreenEndMargin } from "../../hooks/useScreenEndMargin"; import { useIONavigation } from "../../navigation/params/AppParamsList"; @@ -85,7 +85,6 @@ const DESIGN_SYSTEM_SECTION_DATA: Array = [ export const DesignSystem = () => { const theme = useIOTheme(); - const colorScheme = useColorScheme(); const navigation = useIONavigation(); const { screenEndMargin } = useScreenEndMargin(); @@ -128,28 +127,22 @@ export const DesignSystem = () => { ) : null; return ( - <> - - `${item.route}-${index}`} - stickySectionHeadersEnabled={false} - contentContainerStyle={[ - IOStyles.horizontalContentPadding, - { - paddingTop: IOVisualCostants.appMarginDefault, - paddingBottom: screenEndMargin - } - ]} - renderSectionHeader={renderDSSection} - renderSectionFooter={renderDSSectionFooter} - SectionSeparatorComponent={() => } - renderItem={renderDSNavItem} - ItemSeparatorComponent={() => } - sections={DESIGN_SYSTEM_SECTION_DATA} - /> - + `${item.route}-${index}`} + stickySectionHeadersEnabled={false} + contentContainerStyle={[ + IOStyles.horizontalContentPadding, + { + paddingTop: IOVisualCostants.appMarginDefault, + paddingBottom: screenEndMargin + } + ]} + renderSectionHeader={renderDSSection} + renderSectionFooter={renderDSSectionFooter} + SectionSeparatorComponent={() => } + renderItem={renderDSNavItem} + ItemSeparatorComponent={() => } + sections={DESIGN_SYSTEM_SECTION_DATA} + /> ); }; diff --git a/ts/features/design-system/components/DesignSystemScreen.tsx b/ts/features/design-system/components/DesignSystemScreen.tsx index 9ef596b7b5e..082bda038d9 100644 --- a/ts/features/design-system/components/DesignSystemScreen.tsx +++ b/ts/features/design-system/components/DesignSystemScreen.tsx @@ -1,11 +1,7 @@ -import { - ContentWrapper, - IOVisualCostants, - useIOTheme -} from "@pagopa/io-app-design-system"; +import { ContentWrapper, IOVisualCostants } from "@pagopa/io-app-design-system"; import { ReactNode } from "react"; -import { ScrollView, StatusBar, View, useColorScheme } from "react-native"; +import { ScrollView, View } from "react-native"; import { useScreenEndMargin } from "../../../hooks/useScreenEndMargin"; type Props = { @@ -15,29 +11,20 @@ type Props = { }; export const DesignSystemScreen = ({ children, noMargin = false }: Props) => { - const colorScheme = useColorScheme(); - const theme = useIOTheme(); - const { screenEndMargin } = useScreenEndMargin(); return ( - <> - - - {noMargin ? ( - {children} - ) : ( - {children} - )} - - + + {noMargin ? ( + {children} + ) : ( + {children} + )} + ); }; diff --git a/ts/navigation/AppStackNavigator.tsx b/ts/navigation/AppStackNavigator.tsx index a280569e52c..8cda44aadb2 100644 --- a/ts/navigation/AppStackNavigator.tsx +++ b/ts/navigation/AppStackNavigator.tsx @@ -1,5 +1,9 @@ /* eslint-disable functional/immutable-data */ -import { useIOThemeContext } from "@pagopa/io-app-design-system"; +import { + IOColors, + useIOTheme, + useIOThemeContext +} from "@pagopa/io-app-design-system"; import { LinkingOptions, NavigationContainer, @@ -90,6 +94,7 @@ const InnerNavigationContainer = (props: InnerNavigationContainerProps) => { // Dark/Light Mode const { themeType } = useIOThemeContext(); + const theme = useIOTheme(); const linking: LinkingOptions = { enabled: !isTestEnv, // disable linking in test env @@ -166,12 +171,9 @@ const InnerNavigationContainer = (props: InnerNavigationContainerProps) => { }} > {props.children} From 65ffb86e4208c34d10d78351fca089fde8a63948 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Tue, 11 Feb 2025 14:33:14 +0100 Subject: [PATCH 13/20] Update `io-app-design-system` to `4.5.5` --- package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index d0e1079f7e2..de3aa54f673 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "@babel/plugin-transform-private-property-in-object": "^7.25.9", "@babel/plugin-transform-react-jsx": "^7.25.9", "@gorhom/bottom-sheet": "^4.1.5", - "@pagopa/io-app-design-system": "4.5.4", + "@pagopa/io-app-design-system": "4.5.5", "@pagopa/io-pagopa-commons": "^3.1.0", "@pagopa/io-react-native-cieid": "^0.3.5", "@pagopa/io-react-native-crypto": "^1.0.1", diff --git a/yarn.lock b/yarn.lock index da097ef0592..ee5f3a6116d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3753,9 +3753,9 @@ __metadata: languageName: node linkType: hard -"@pagopa/io-app-design-system@npm:4.5.4": - version: 4.5.4 - resolution: "@pagopa/io-app-design-system@npm:4.5.4" +"@pagopa/io-app-design-system@npm:4.5.5": + version: 4.5.5 + resolution: "@pagopa/io-app-design-system@npm:4.5.5" dependencies: "@testing-library/jest-native": ^5.4.2 "@types/react-test-renderer": ^18.0.0 @@ -3779,7 +3779,7 @@ __metadata: react-native-reanimated: "*" react-native-safe-area-context: "*" react-native-svg: "*" - checksum: c5c49dd90b2e6ff323f8d4efe8caa6365d67c55dbfd8e9bf007385dd343e16ad11b37e6031e02639683a3cf1af34e6b47ab6b8efb63262ba4a55082503be5b08 + checksum: 01519ebe0e72a572f1298e26d61d754d8126fae217f2b304a0873376b817f3124cac3d630efd6c6c1208f319363505760bb04d3784ff942ced6903815bf4d415 languageName: node linkType: hard @@ -13657,7 +13657,7 @@ __metadata: "@babel/runtime": ^7.20.0 "@gorhom/bottom-sheet": ^4.1.5 "@jambit/eslint-plugin-typed-redux-saga": ^0.4.0 - "@pagopa/io-app-design-system": 4.5.4 + "@pagopa/io-app-design-system": 4.5.5 "@pagopa/io-pagopa-commons": ^3.1.0 "@pagopa/io-react-native-cieid": ^0.3.5 "@pagopa/io-react-native-crypto": ^1.0.1 From 23ef0027d150e339091bf825285b4980c6fcc614 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Wed, 12 Feb 2025 10:09:55 +0100 Subject: [PATCH 14/20] Update `jest` snapshots --- .../TabNavigationContainer.test.tsx.snap | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/ts/features/messages/components/Home/__tests__/__snapshots__/TabNavigationContainer.test.tsx.snap b/ts/features/messages/components/Home/__tests__/__snapshots__/TabNavigationContainer.test.tsx.snap index e526e4ab597..31596218f67 100644 --- a/ts/features/messages/components/Home/__tests__/__snapshots__/TabNavigationContainer.test.tsx.snap +++ b/ts/features/messages/components/Home/__tests__/__snapshots__/TabNavigationContainer.test.tsx.snap @@ -441,7 +441,7 @@ exports[`TabNavigationContainer should match snapshot when shownCategory is ARCH false, { "backgroundColor": undefined, - "borderColor": "#BBC2D6", + "borderColor": undefined, }, false, false, @@ -524,7 +524,6 @@ exports[`TabNavigationContainer should match snapshot when shownCategory is ARCH Date: Mon, 17 Feb 2025 18:07:47 +0100 Subject: [PATCH 15/20] Replace `StatusBar` with `FocusAwareStatusBar` --- .../BonusCard/BonusCardScreenComponent.tsx | 5 +++-- ts/components/ui/FocusAwareStatusBar.tsx | 3 ++- .../merchants/CgnMerchantsListByCategory.tsx | 5 +++-- .../design-system/core/DSDynamicBackground.tsx | 15 ++++++--------- ts/navigation/AppStackNavigator.tsx | 15 ++++++++------- 5 files changed, 22 insertions(+), 21 deletions(-) diff --git a/ts/components/BonusCard/BonusCardScreenComponent.tsx b/ts/components/BonusCard/BonusCardScreenComponent.tsx index 16fd17b6196..500ce5f6361 100644 --- a/ts/components/BonusCard/BonusCardScreenComponent.tsx +++ b/ts/components/BonusCard/BonusCardScreenComponent.tsx @@ -4,11 +4,12 @@ import { useIOThemeContext } from "@pagopa/io-app-design-system"; import { ReactNode } from "react"; -import { Dimensions, StatusBar } from "react-native"; +import { Dimensions } from "react-native"; import Animated, { useAnimatedRef } from "react-native-reanimated"; import { useHeaderSecondLevel } from "../../hooks/useHeaderSecondLevel"; import { SupportRequestParams } from "../../hooks/useStartSupportRequest"; import { isAndroid } from "../../utils/platform"; +import FocusAwareStatusBar from "../ui/FocusAwareStatusBar"; import { IOScrollView, IOScrollViewActions } from "../ui/IOScrollView"; import { BonusCard } from "./BonusCard"; @@ -74,7 +75,7 @@ const BonusCardScreenComponent = ({ return ( <> - { const isFocused = useIsFocused(); - return <>{isFocused && }; + + return isFocused && ; }; export default FocusAwareStatusBar; diff --git a/ts/features/bonus/cgn/screens/merchants/CgnMerchantsListByCategory.tsx b/ts/features/bonus/cgn/screens/merchants/CgnMerchantsListByCategory.tsx index d672582d8a2..bc419fd6f5f 100644 --- a/ts/features/bonus/cgn/screens/merchants/CgnMerchantsListByCategory.tsx +++ b/ts/features/bonus/cgn/screens/merchants/CgnMerchantsListByCategory.tsx @@ -11,7 +11,7 @@ import { pipe } from "fp-ts/lib/function"; import * as O from "fp-ts/lib/Option"; import { useCallback, useEffect, useMemo, useState } from "react"; -import { Platform, RefreshControl, StatusBar, View } from "react-native"; +import { Platform, RefreshControl, View } from "react-native"; import Animated, { useAnimatedRef } from "react-native-reanimated"; import { Merchant } from "../../../../../../definitions/cgn/merchants/Merchant"; import { ProductCategoryEnum } from "../../../../../../definitions/cgn/merchants/ProductCategory"; @@ -22,6 +22,7 @@ import { } from "../../../../../common/model/RemoteValue"; import { IOStyles } from "../../../../../components/core/variables/IOStyles"; import { OperationResultScreenContent } from "../../../../../components/screens/OperationResultScreenContent"; +import FocusAwareStatusBar from "../../../../../components/ui/FocusAwareStatusBar"; import { useHeaderSecondLevel } from "../../../../../hooks/useHeaderSecondLevel"; import I18n from "../../../../../i18n"; import { IOStackNavigationProp } from "../../../../../navigation/params/AppParamsList"; @@ -215,7 +216,7 @@ const CgnMerchantsListByCategory = () => { return ( <> - { return ( <> - + @@ -170,7 +171,7 @@ const InnerNavigationContainer = (props: InnerNavigationContainerProps) => { routeNameRef.current = currentRouteName; }} > - Date: Mon, 17 Feb 2025 18:08:16 +0100 Subject: [PATCH 16/20] Add theme key to the icon in the `CgnMerchantCategory` list item --- .../screens/merchants/CgnMerchantCategoriesListScreen.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/ts/features/bonus/cgn/screens/merchants/CgnMerchantCategoriesListScreen.tsx b/ts/features/bonus/cgn/screens/merchants/CgnMerchantCategoriesListScreen.tsx index 71fbcf10604..f934d6280b8 100644 --- a/ts/features/bonus/cgn/screens/merchants/CgnMerchantCategoriesListScreen.tsx +++ b/ts/features/bonus/cgn/screens/merchants/CgnMerchantCategoriesListScreen.tsx @@ -6,7 +6,8 @@ import { IOStyles, IOToast, ListItemAction, - ListItemNav + ListItemNav, + useIOTheme } from "@pagopa/io-app-design-system"; import * as pot from "@pagopa/ts-commons/lib/pot"; import { useNavigation } from "@react-navigation/native"; @@ -29,6 +30,7 @@ import { getCategorySpecs } from "../../utils/filters"; import { CgnMerchantListSkeleton } from "../../components/merchants/CgnMerchantListSkeleton"; export const CgnMerchantCategoriesListScreen = () => { + const theme = useIOTheme(); const insets = useSafeAreaInsets(); const dispatch = useIODispatch(); const [isPullRefresh, setIsPullRefresh] = useState(false); @@ -115,7 +117,7 @@ export const CgnMerchantCategoriesListScreen = () => { } ); }} - iconColor="grey-300" + iconColor={theme["icon-decorative"]} icon={s.icon} /> ) From 8daeecde3fea925547594be15831faf4ad28fda2 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Tue, 18 Feb 2025 14:26:50 +0100 Subject: [PATCH 17/20] Fix visual appearance of some CGN screens when dark mode is enabled --- .../bonus/cgn/components/merchants/ModuleCgnDiscount.tsx | 2 +- .../components/merchants/discount/CgnDiscountHeader.tsx | 2 +- .../cgn/screens/discount/CgnDiscountDetailScreen.tsx | 8 +++++++- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/ts/features/bonus/cgn/components/merchants/ModuleCgnDiscount.tsx b/ts/features/bonus/cgn/components/merchants/ModuleCgnDiscount.tsx index a6a5c5bbccf..06a8cc41742 100644 --- a/ts/features/bonus/cgn/components/merchants/ModuleCgnDiscount.tsx +++ b/ts/features/bonus/cgn/components/merchants/ModuleCgnDiscount.tsx @@ -109,7 +109,7 @@ export const ModuleCgnDiscount = ({ onPress, discount }: ModuleCgnDiscount) => { )} -
{discount.name}
+
{discount.name}
{discount.productCategories.map(categoryKey => ( diff --git a/ts/features/bonus/cgn/components/merchants/discount/CgnDiscountHeader.tsx b/ts/features/bonus/cgn/components/merchants/discount/CgnDiscountHeader.tsx index 118be5fea9b..fe990133bbe 100644 --- a/ts/features/bonus/cgn/components/merchants/discount/CgnDiscountHeader.tsx +++ b/ts/features/bonus/cgn/components/merchants/discount/CgnDiscountHeader.tsx @@ -59,7 +59,7 @@ export const CgnDiscountHeader = ({ )} -

{name}

+

{name}

{productCategories.map(categoryKey => ( diff --git a/ts/features/bonus/cgn/screens/discount/CgnDiscountDetailScreen.tsx b/ts/features/bonus/cgn/screens/discount/CgnDiscountDetailScreen.tsx index 18777c4cc17..41d8e659ca4 100644 --- a/ts/features/bonus/cgn/screens/discount/CgnDiscountDetailScreen.tsx +++ b/ts/features/bonus/cgn/screens/discount/CgnDiscountDetailScreen.tsx @@ -46,6 +46,7 @@ import { } from "../../store/reducers/merchants"; import { cgnOtpDataSelector } from "../../store/reducers/otp"; import { getCgnUserAgeRange } from "../../utils/dates"; +import FocusAwareStatusBar from "../../../../../components/ui/FocusAwareStatusBar"; const gradientSafeAreaHeight: IOSpacingScale = 96; @@ -203,7 +204,8 @@ const CgnDiscountDetailScreen = () => { }, backgroundColor, canGoBack: true, - supportRequest: true + supportRequest: true, + variant: "neutral" }); useEffect(() => { @@ -256,6 +258,10 @@ const CgnDiscountDetailScreen = () => { if (discountDetails && merchantDetails) { return ( <> + Date: Tue, 18 Feb 2025 14:54:59 +0100 Subject: [PATCH 18/20] =?UTF-8?q?Add=20support=20for=20custom=20`StatusBar?= =?UTF-8?q?`=20to=20`ItwCredential=E2=80=A6`=20screen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../itwallet/common/utils/itwStyleUtils.ts | 21 ++++++++++++++++++- .../ItwPresentationDetailsScreenBase.tsx | 10 ++++++++- 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/ts/features/itwallet/common/utils/itwStyleUtils.ts b/ts/features/itwallet/common/utils/itwStyleUtils.ts index cfa6206e744..bf58e274f11 100644 --- a/ts/features/itwallet/common/utils/itwStyleUtils.ts +++ b/ts/features/itwallet/common/utils/itwStyleUtils.ts @@ -1,4 +1,4 @@ -import { StatusBarStyle } from "react-native"; +import { StatusBarProps, StatusBarStyle } from "react-native"; import { HeaderSecondLevelHookProps } from "../../../../hooks/useHeaderSecondLevel"; import { getCredentialNameFromType } from "./itwCredentialUtils"; import { CredentialType } from "./itwMocksUtils"; @@ -63,3 +63,22 @@ export const getHeaderPropsByCredentialType = ( }; } }; + +export const getStatusBarPropsByCredentialType = ( + credentialType: string +): StatusBarProps => { + const { backgroundColor } = getThemeColorByCredentialType(credentialType); + + switch (credentialType) { + case CredentialType.EUROPEAN_HEALTH_INSURANCE_CARD: + return { + backgroundColor, + barStyle: "dark-content" + }; + default: + return { + backgroundColor, + barStyle: "light-content" + }; + } +}; diff --git a/ts/features/itwallet/presentation/details/components/ItwPresentationDetailsScreenBase.tsx b/ts/features/itwallet/presentation/details/components/ItwPresentationDetailsScreenBase.tsx index 8297992f1e0..2cebfc69964 100644 --- a/ts/features/itwallet/presentation/details/components/ItwPresentationDetailsScreenBase.tsx +++ b/ts/features/itwallet/presentation/details/components/ItwPresentationDetailsScreenBase.tsx @@ -18,8 +18,12 @@ import Animated, { } from "react-native-reanimated"; import { useSafeAreaInsets } from "react-native-safe-area-context"; import { useHeaderSecondLevel } from "../../../../../hooks/useHeaderSecondLevel.tsx"; -import { getHeaderPropsByCredentialType } from "../../../common/utils/itwStyleUtils.ts"; +import { + getHeaderPropsByCredentialType, + getStatusBarPropsByCredentialType +} from "../../../common/utils/itwStyleUtils.ts"; import { StoredCredential } from "../../../common/utils/itwTypesUtils.ts"; +import FocusAwareStatusBar from "../../../../../components/ui/FocusAwareStatusBar.tsx"; export type CredentialCtaProps = Omit; @@ -65,6 +69,9 @@ const ItwPresentationDetailsScreenBase = ({ ); const headerProps = getHeaderPropsByCredentialType(credential.credentialType); + const statusBarProps = getStatusBarPropsByCredentialType( + credential.credentialType + ); useHeaderSecondLevel({ scrollValues: { @@ -114,6 +121,7 @@ const ItwPresentationDetailsScreenBase = ({ return ( + Date: Tue, 18 Feb 2025 15:58:18 +0100 Subject: [PATCH 19/20] =?UTF-8?q?Revert=20"Add=20support=20for=20custom=20?= =?UTF-8?q?`StatusBar`=20to=20`ItwCredential=E2=80=A6`=20screen"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 4ff855bf6bf353b0dbca55b663f4ae525d46e1ad. --- .../itwallet/common/utils/itwStyleUtils.ts | 21 +------------------ .../ItwPresentationDetailsScreenBase.tsx | 10 +-------- 2 files changed, 2 insertions(+), 29 deletions(-) diff --git a/ts/features/itwallet/common/utils/itwStyleUtils.ts b/ts/features/itwallet/common/utils/itwStyleUtils.ts index bf58e274f11..cfa6206e744 100644 --- a/ts/features/itwallet/common/utils/itwStyleUtils.ts +++ b/ts/features/itwallet/common/utils/itwStyleUtils.ts @@ -1,4 +1,4 @@ -import { StatusBarProps, StatusBarStyle } from "react-native"; +import { StatusBarStyle } from "react-native"; import { HeaderSecondLevelHookProps } from "../../../../hooks/useHeaderSecondLevel"; import { getCredentialNameFromType } from "./itwCredentialUtils"; import { CredentialType } from "./itwMocksUtils"; @@ -63,22 +63,3 @@ export const getHeaderPropsByCredentialType = ( }; } }; - -export const getStatusBarPropsByCredentialType = ( - credentialType: string -): StatusBarProps => { - const { backgroundColor } = getThemeColorByCredentialType(credentialType); - - switch (credentialType) { - case CredentialType.EUROPEAN_HEALTH_INSURANCE_CARD: - return { - backgroundColor, - barStyle: "dark-content" - }; - default: - return { - backgroundColor, - barStyle: "light-content" - }; - } -}; diff --git a/ts/features/itwallet/presentation/details/components/ItwPresentationDetailsScreenBase.tsx b/ts/features/itwallet/presentation/details/components/ItwPresentationDetailsScreenBase.tsx index 2cebfc69964..8297992f1e0 100644 --- a/ts/features/itwallet/presentation/details/components/ItwPresentationDetailsScreenBase.tsx +++ b/ts/features/itwallet/presentation/details/components/ItwPresentationDetailsScreenBase.tsx @@ -18,12 +18,8 @@ import Animated, { } from "react-native-reanimated"; import { useSafeAreaInsets } from "react-native-safe-area-context"; import { useHeaderSecondLevel } from "../../../../../hooks/useHeaderSecondLevel.tsx"; -import { - getHeaderPropsByCredentialType, - getStatusBarPropsByCredentialType -} from "../../../common/utils/itwStyleUtils.ts"; +import { getHeaderPropsByCredentialType } from "../../../common/utils/itwStyleUtils.ts"; import { StoredCredential } from "../../../common/utils/itwTypesUtils.ts"; -import FocusAwareStatusBar from "../../../../../components/ui/FocusAwareStatusBar.tsx"; export type CredentialCtaProps = Omit; @@ -69,9 +65,6 @@ const ItwPresentationDetailsScreenBase = ({ ); const headerProps = getHeaderPropsByCredentialType(credential.credentialType); - const statusBarProps = getStatusBarPropsByCredentialType( - credential.credentialType - ); useHeaderSecondLevel({ scrollValues: { @@ -121,7 +114,6 @@ const ItwPresentationDetailsScreenBase = ({ return ( - Date: Mon, 24 Feb 2025 11:33:39 +0100 Subject: [PATCH 20/20] Merge branch 'master' into IOAPPX-476-adapt-status-bar-according-to-color-scheme --- locales/en/index.json | 11 ++ locales/it/index.json | 11 ++ package.json | 2 +- .../IOScrollViewWithListItems.test.tsx.snap | 20 +++ .../components/IOMarkdown/customRules.tsx | 50 +++++-- .../screens/MultiValuePrerequisitesScreen.tsx | 3 + ...wCredentialPreviewClaimsList.test.tsx.snap | 60 +++++++++ .../itwallet/navigation/ItwStackNavigator.tsx | 3 +- ...ItwPresentationClaimsSection.test.tsx.snap | 126 +++++++++++++++++- .../wallet/screens/ItwOfflineWalletScreen.tsx | 29 ++-- .../wallet/utils/withOfflineAlert.tsx | 63 +++++++++ ...tificationsInfoScreenConsent.test.tsx.snap | 15 +++ .../ActivateNfcScreen.test.tsx.snap | 15 +++ .../playgrounds/IOMarkdownPlayground.tsx | 75 +++++++---- yarn.lock | 10 +- 15 files changed, 429 insertions(+), 64 deletions(-) create mode 100644 ts/features/itwallet/wallet/utils/withOfflineAlert.tsx diff --git a/locales/en/index.json b/locales/en/index.json index baee8e96d59..2bde92ccf19 100644 --- a/locales/en/index.json +++ b/locales/en/index.json @@ -4548,6 +4548,17 @@ "content": "Se cambi idea, potrai riattivare Documenti su IO in futuro." } } + }, + "offline": { + "alert": { + "title": "Nessuna connessione", + "action": "Cosa posso fare?" + }, + "modal": { + "title": "Nessuna connessione", + "content": "###### Cosa posso fare?\n\nQuando il tuo dispositivo è offline, alcuni servizi dell'app potrebbero non funzionare.\n\nDocumenti su IO funziona **anche offline**, ma la validità dei tuoi documenti è aggiornata all'ultimo accesso in app con connessione a una rete.\n\nCollegati a internet e ricarica l'app per continuare ad usare tutti i servizi di IO.", + "action": "Ricarica l'app IO" + } } } }, diff --git a/locales/it/index.json b/locales/it/index.json index 20ba049a613..73434eec922 100644 --- a/locales/it/index.json +++ b/locales/it/index.json @@ -4548,6 +4548,17 @@ "content": "Se cambi idea, potrai riattivare Documenti su IO in futuro." } } + }, + "offline": { + "alert": { + "title": "Nessuna connessione", + "action": "Cosa posso fare?" + }, + "modal": { + "title": "Nessuna connessione", + "content": "###### Cosa posso fare?\n\nQuando il tuo dispositivo è offline, alcuni servizi dell'app potrebbero non funzionare.\n\nDocumenti su IO funziona **anche offline**, ma la validità dei tuoi documenti è aggiornata all'ultimo accesso in app con connessione a una rete.\n\nCollegati a internet e ricarica l'app per continuare ad usare tutti i servizi di IO.", + "action": "Ricarica l'app IO" + } } } }, diff --git a/package.json b/package.json index c06c483a0ab..674236573b3 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "@babel/plugin-transform-private-property-in-object": "^7.25.9", "@babel/plugin-transform-react-jsx": "^7.25.9", "@gorhom/bottom-sheet": "^4.1.5", - "@pagopa/io-app-design-system": "4.5.6", + "@pagopa/io-app-design-system": "4.6.0", "@pagopa/io-pagopa-commons": "^3.1.0", "@pagopa/io-react-native-cieid": "^0.3.5", "@pagopa/io-react-native-crypto": "^1.0.1", diff --git a/ts/components/ui/__test__/__snapshots__/IOScrollViewWithListItems.test.tsx.snap b/ts/components/ui/__test__/__snapshots__/IOScrollViewWithListItems.test.tsx.snap index 69bd2c462d1..a32ab6f5e55 100644 --- a/ts/components/ui/__test__/__snapshots__/IOScrollViewWithListItems.test.tsx.snap +++ b/ts/components/ui/__test__/__snapshots__/IOScrollViewWithListItems.test.tsx.snap @@ -502,6 +502,11 @@ exports[`IOScrollViewWithListItems Rendering renders correctly with default prop > + {header.children.map(render)} + {generateAccesibilityLinkViewsIfNeeded( allLinkData, nodeKey, diff --git a/ts/features/idpay/onboarding/screens/MultiValuePrerequisitesScreen.tsx b/ts/features/idpay/onboarding/screens/MultiValuePrerequisitesScreen.tsx index c459888ba63..3989166f4b4 100644 --- a/ts/features/idpay/onboarding/screens/MultiValuePrerequisitesScreen.tsx +++ b/ts/features/idpay/onboarding/screens/MultiValuePrerequisitesScreen.tsx @@ -11,6 +11,7 @@ import { multiRequiredCriteriaSelector, selectCurrentMultiSelfDeclarationPage } from "../machine/selectors"; +import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; const MultiValuePrerequisitesScreen = () => { const pagerRef = useRef(null); @@ -77,6 +78,8 @@ const MultiValuePrerequisiteItemScreenContent = ({ label: I18n.t("idpay.onboarding.multiPrerequisites.header"), section: I18n.t("idpay.onboarding.headerTitle") }} + contextualHelp={emptyContextualHelp} + headerActionsProp={{ showHelp: true }} goBack={handleGoBack} includeContentMargins actions={{ diff --git a/ts/features/itwallet/issuance/components/__tests__/__snapshots__/ItwCredentialPreviewClaimsList.test.tsx.snap b/ts/features/itwallet/issuance/components/__tests__/__snapshots__/ItwCredentialPreviewClaimsList.test.tsx.snap index 959aba266f9..0a8d2eca812 100644 --- a/ts/features/itwallet/issuance/components/__tests__/__snapshots__/ItwCredentialPreviewClaimsList.test.tsx.snap +++ b/ts/features/itwallet/issuance/components/__tests__/__snapshots__/ItwCredentialPreviewClaimsList.test.tsx.snap @@ -369,6 +369,11 @@ exports[`ItwCredentialPreviewClaimsList should match the snapshot 1`] = ` > { name={ITW_ROUTES.OFFLINE.WALLET} component={ItwOfflineWalletScreen} options={{ - gestureEnabled: isGestureEnabled + gestureEnabled: isGestureEnabled, + headerShown: false }} /> {/* DISCOVERY */} diff --git a/ts/features/itwallet/presentation/details/components/__tests__/__snapshots__/ItwPresentationClaimsSection.test.tsx.snap b/ts/features/itwallet/presentation/details/components/__tests__/__snapshots__/ItwPresentationClaimsSection.test.tsx.snap index 7f3aa4f97a9..17ce452db84 100644 --- a/ts/features/itwallet/presentation/details/components/__tests__/__snapshots__/ItwPresentationClaimsSection.test.tsx.snap +++ b/ts/features/itwallet/presentation/details/components/__tests__/__snapshots__/ItwPresentationClaimsSection.test.tsx.snap @@ -573,6 +573,11 @@ exports[`ItwPresentationClaimsSection should match the snapshot when claims are > - Valid + Expired @@ -3758,6 +3853,11 @@ exports[`ItwPresentationClaimsSection should match the snapshot when claims are > { - const navigation = useIONavigation(); - - useLayoutEffect(() => { - navigation.setOptions({ - header: () => - }); - }, [navigation]); - - return ( +const ItwOfflineWalletScreen = () => ( + <> + - ); -}; + +); + +const ItwOfflineWalletScreenWithAlert = withOfflineAlert( + ItwOfflineWalletScreen +); -export { ItwOfflineWalletScreen }; +export { ItwOfflineWalletScreenWithAlert as ItwOfflineWalletScreen }; diff --git a/ts/features/itwallet/wallet/utils/withOfflineAlert.tsx b/ts/features/itwallet/wallet/utils/withOfflineAlert.tsx new file mode 100644 index 00000000000..1d6a78b9195 --- /dev/null +++ b/ts/features/itwallet/wallet/utils/withOfflineAlert.tsx @@ -0,0 +1,63 @@ +import { + AlertEdgeToEdgeWrapper, + FooterActions +} from "@pagopa/io-app-design-system"; +import IOMarkdown from "../../../../components/IOMarkdown"; +import I18n from "../../../../i18n"; +import { startApplicationInitialization } from "../../../../store/actions/application"; +import { useIODispatch } from "../../../../store/hooks"; +import { useIOBottomSheetAutoresizableModal } from "../../../../utils/hooks/bottomSheet"; + +const MODAL_BOTTOM_PADDING = 150; + +/** + * HOC that wraps a screen with an Alert which informs the user that the app is offline + * and allows them to restart the app + * @param Screen - The screen to wrap + * @returns The wrapped screen + */ +export const withOfflineAlert = + (Screen: React.ComponentType) => (props: any) => { + const dispatch = useIODispatch(); + + const handleAppRestart = () => { + dispatch(startApplicationInitialization()); + }; + + const offlineInfoModal = useIOBottomSheetAutoresizableModal( + { + title: I18n.t("features.itWallet.offline.modal.title"), + component: ( + + ), + footer: ( + + ) + }, + MODAL_BOTTOM_PADDING + ); + + return ( + + + {offlineInfoModal.bottomSheet} + + ); + }; 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 f48a52c8834..dbed93fa9e9 100644 --- a/ts/features/pushNotifications/screens/__tests__/__snapshots__/OnboardingNotificationsInfoScreenConsent.test.tsx.snap +++ b/ts/features/pushNotifications/screens/__tests__/__snapshots__/OnboardingNotificationsInfoScreenConsent.test.tsx.snap @@ -660,6 +660,11 @@ exports[`OnboardingNotificationsInfoScreenConsent should match snapshot 1`] = ` > { const [content, setContent] = useState(""); + const [messageSpecificStyle, setMessageSpecificStyle] = useState(true); const { bottom } = useSafeAreaInsets(); const headerHeight = useHeaderHeight(); const { present, bottomSheet } = useIOBottomSheetAutoresizableModal({ title: "Components", component: ( - + <> + + + ) }); @@ -163,7 +173,14 @@ export const IOMarkdownPlayground = () => { - + "") + : undefined + } + />