diff --git a/package.json b/package.json index f6e1b77c78b..c58d62cd2b3 100644 --- a/package.json +++ b/package.json @@ -109,7 +109,7 @@ "dependencies": { "@babel/plugin-transform-regenerator": "^7.18.6", "@gorhom/bottom-sheet": "^4.1.5", - "@pagopa/io-app-design-system": "4.0.2", + "@pagopa/io-app-design-system": "4.2.0", "@pagopa/io-pagopa-commons": "^3.1.0", "@pagopa/io-react-native-cieid": "^0.3.5", "@pagopa/io-react-native-crypto": "^0.3.0", diff --git a/ts/features/bonus/cgn/components/CgnCard.tsx b/ts/features/bonus/cgn/components/CgnCard.tsx index 55d1584b1e4..8630cdb542b 100644 --- a/ts/features/bonus/cgn/components/CgnCard.tsx +++ b/ts/features/bonus/cgn/components/CgnCard.tsx @@ -44,6 +44,7 @@ export const CgnCard = ({ expireDate, withEycaLogo }: CgnCardProps) => { const expiredTag = ( { -
{I18n.t("bonus.cgn.name")}
+
+ {I18n.t("bonus.cgn.name")} +
{isExpired && expiredTag} ( - - - - - - - - - - - - @@ -389,12 +345,6 @@ const ItwCards = () => ( - - - @@ -442,12 +392,6 @@ const ItwCards = () => ( - - - ( - - - { const isValid = validCredentialStatuses.includes(status); const theme = getThemeColorByCredentialType(credentialType); @@ -38,35 +31,41 @@ export const ItwCredentialCard = ({ const statusTagProps = tagPropsByStatus[status]; return ( - - - - - - - - - {getCredentialNameFromType(credentialType, "").toUpperCase()} - - {statusTagProps && } - - - - + + + + + + {getCredentialNameFromType(credentialType, "").toUpperCase()} + + {statusTagProps && } + + + + ); }; @@ -89,10 +88,6 @@ const credentialCardBackgrounds: { }; const styles = StyleSheet.create({ - previewContainer: { - aspectRatio: 9 / 2, - overflow: "hidden" - }, cardContainer: { aspectRatio: 16 / 10, borderRadius: 8, @@ -116,10 +111,6 @@ const styles = StyleSheet.create({ borderRadius: 8, borderWidth: 2 }, - label: { - flex: 1, - ...makeFontStyleObject(16, "TitilliumSansPro", 20, "Semibold") - }, header: { display: "flex", flexDirection: "row", diff --git a/ts/features/itwallet/common/components/ItwDigitalVersionBadge.tsx b/ts/features/itwallet/common/components/ItwDigitalVersionBadge.tsx index 2d2b58c37cb..39b86ab5ce7 100644 --- a/ts/features/itwallet/common/components/ItwDigitalVersionBadge.tsx +++ b/ts/features/itwallet/common/components/ItwDigitalVersionBadge.tsx @@ -88,10 +88,11 @@ const styles = StyleSheet.create({ } }), borderCurve: "continuous", - borderTopLeftRadius: IOBadgeRadius, - borderBottomLeftRadius: IOBadgeRadius, + borderRadius: IOBadgeRadius, paddingHorizontal: IOBadgeHSpacing, - paddingVertical: IOBadgeVSpacing + paddingVertical: IOBadgeVSpacing, + paddingEnd: IOBadgeHSpacing + 8, + marginEnd: -IOBadgeHSpacing }, faded: { ...StyleSheet.absoluteFillObject, diff --git a/ts/features/itwallet/common/components/ItwSkeumorphicCard/ClaimLabel.tsx b/ts/features/itwallet/common/components/ItwSkeumorphicCard/ClaimLabel.tsx index 08c5a5f5d97..bc1d523e995 100644 --- a/ts/features/itwallet/common/components/ItwSkeumorphicCard/ClaimLabel.tsx +++ b/ts/features/itwallet/common/components/ItwSkeumorphicCard/ClaimLabel.tsx @@ -1,6 +1,9 @@ -import { IOFontWeight, IOText } from "@pagopa/io-app-design-system"; +import { + IOFontWeight, + makeFontStyleObject +} from "@pagopa/io-app-design-system"; import React from "react"; -import { TextStyle, useWindowDimensions } from "react-native"; +import { Text, TextStyle, useWindowDimensions } from "react-native"; export type ClaimLabelProps = { fontSize?: number; @@ -27,21 +30,27 @@ export const ClaimLabel: React.FunctionComponent< const fontScale = width / 360; return ( - {props.children} - + ); }; diff --git a/ts/features/itwallet/common/components/ItwSkeumorphicCard/__tests__/__snapshots__/CardData.test.tsx.snap b/ts/features/itwallet/common/components/ItwSkeumorphicCard/__tests__/__snapshots__/CardData.test.tsx.snap index e36a7877c6c..929ab6b29b8 100644 --- a/ts/features/itwallet/common/components/ItwSkeumorphicCard/__tests__/__snapshots__/CardData.test.tsx.snap +++ b/ts/features/itwallet/common/components/ItwSkeumorphicCard/__tests__/__snapshots__/CardData.test.tsx.snap @@ -211,23 +211,16 @@ exports[`CardData should match snapshot for DC front data 1`] = ` accessible={false} allowFontScaling={false} lineBreakMode="head" - maxFontSizeMultiplier={1.25} numberOfLines={1} style={ - [ - {}, - { - "color": "#0E0F13", - "fontFamily": "Titillium Sans Pro", - "fontSize": 22.916666666666668, - "fontStyle": "normal", - "fontWeight": "600", - "lineHeight": undefined, - }, - { - "textTransform": "none", - }, - ] + { + "fontFamily": "Titillium Sans Pro", + "fontSize": 22.916666666666668, + "fontStyle": "normal", + "fontWeight": "600", + "lineHeight": undefined, + "textTransform": "none", + } } > Marco @@ -251,23 +244,16 @@ exports[`CardData should match snapshot for DC front data 1`] = ` accessible={false} allowFontScaling={false} lineBreakMode="head" - maxFontSizeMultiplier={1.25} numberOfLines={1} style={ - [ - {}, - { - "color": "#0E0F13", - "fontFamily": "Titillium Sans Pro", - "fontSize": 22.916666666666668, - "fontStyle": "normal", - "fontWeight": "600", - "lineHeight": undefined, - }, - { - "textTransform": "none", - }, - ] + { + "fontFamily": "Titillium Sans Pro", + "fontSize": 22.916666666666668, + "fontStyle": "normal", + "fontWeight": "600", + "lineHeight": undefined, + "textTransform": "none", + } } > Rossi @@ -291,23 +277,16 @@ exports[`CardData should match snapshot for DC front data 1`] = ` accessible={false} allowFontScaling={false} lineBreakMode="head" - maxFontSizeMultiplier={1.25} numberOfLines={1} style={ - [ - {}, - { - "color": "#0E0F13", - "fontFamily": "Titillium Sans Pro", - "fontSize": 22.916666666666668, - "fontStyle": "normal", - "fontWeight": "600", - "lineHeight": undefined, - }, - { - "textTransform": "none", - }, - ] + { + "fontFamily": "Titillium Sans Pro", + "fontSize": 22.916666666666668, + "fontStyle": "normal", + "fontWeight": "600", + "lineHeight": undefined, + "textTransform": "none", + } } > 15/03/90 @@ -331,23 +310,16 @@ exports[`CardData should match snapshot for DC front data 1`] = ` accessible={false} allowFontScaling={false} lineBreakMode="head" - maxFontSizeMultiplier={1.25} numberOfLines={1} style={ - [ - {}, - { - "color": "#0E0F13", - "fontFamily": "Titillium Sans Pro", - "fontSize": 22.916666666666668, - "fontStyle": "normal", - "fontWeight": "600", - "lineHeight": undefined, - }, - { - "textTransform": "none", - }, - ] + { + "fontFamily": "Titillium Sans Pro", + "fontSize": 22.916666666666668, + "fontStyle": "normal", + "fontWeight": "600", + "lineHeight": undefined, + "textTransform": "none", + } } > 10008581 @@ -371,23 +343,16 @@ exports[`CardData should match snapshot for DC front data 1`] = ` accessible={false} allowFontScaling={false} lineBreakMode="head" - maxFontSizeMultiplier={1.25} numberOfLines={1} style={ - [ - {}, - { - "color": "#0E0F13", - "fontFamily": "Titillium Sans Pro", - "fontSize": 22.916666666666668, - "fontStyle": "normal", - "fontWeight": "600", - "lineHeight": undefined, - }, - { - "textTransform": "none", - }, - ] + { + "fontFamily": "Titillium Sans Pro", + "fontSize": 22.916666666666668, + "fontStyle": "normal", + "fontWeight": "600", + "lineHeight": undefined, + "textTransform": "none", + } } > 23/03/32 @@ -425,23 +390,16 @@ exports[`CardData should match snapshot for MDL back data 1`] = ` accessible={false} allowFontScaling={false} lineBreakMode="head" - maxFontSizeMultiplier={1.25} numberOfLines={1} style={ - [ - {}, - { - "color": "#0E0F13", - "fontFamily": "Titillium Sans Pro", - "fontSize": 18.75, - "fontStyle": "normal", - "fontWeight": "600", - "lineHeight": undefined, - }, - { - "textTransform": "none", - }, - ] + { + "fontFamily": "Titillium Sans Pro", + "fontSize": 18.75, + "fontStyle": "normal", + "fontWeight": "600", + "lineHeight": undefined, + "textTransform": "none", + } } > 23/01/35 @@ -465,23 +423,16 @@ exports[`CardData should match snapshot for MDL back data 1`] = ` accessible={false} allowFontScaling={false} lineBreakMode="head" - maxFontSizeMultiplier={1.25} numberOfLines={1} style={ - [ - {}, - { - "color": "#0E0F13", - "fontFamily": "Titillium Sans Pro", - "fontSize": 18.75, - "fontStyle": "normal", - "fontWeight": "600", - "lineHeight": undefined, - }, - { - "textTransform": "none", - }, - ] + { + "fontFamily": "Titillium Sans Pro", + "fontSize": 18.75, + "fontStyle": "normal", + "fontWeight": "600", + "lineHeight": undefined, + "textTransform": "none", + } } > 16/02/35 @@ -505,23 +456,16 @@ exports[`CardData should match snapshot for MDL back data 1`] = ` accessible={false} allowFontScaling={false} lineBreakMode="head" - maxFontSizeMultiplier={1.25} numberOfLines={1} style={ - [ - {}, - { - "color": "#0E0F13", - "fontFamily": "Titillium Sans Pro", - "fontSize": 18.75, - "fontStyle": "normal", - "fontWeight": "600", - "lineHeight": undefined, - }, - { - "textTransform": "none", - }, - ] + { + "fontFamily": "Titillium Sans Pro", + "fontSize": 18.75, + "fontStyle": "normal", + "fontWeight": "600", + "lineHeight": undefined, + "textTransform": "none", + } } > 23/01/35 @@ -545,23 +489,16 @@ exports[`CardData should match snapshot for MDL back data 1`] = ` accessible={false} allowFontScaling={false} lineBreakMode="head" - maxFontSizeMultiplier={1.25} numberOfLines={1} style={ - [ - {}, - { - "color": "#0E0F13", - "fontFamily": "Titillium Sans Pro", - "fontSize": 18.75, - "fontStyle": "normal", - "fontWeight": "600", - "lineHeight": undefined, - }, - { - "textTransform": "none", - }, - ] + { + "fontFamily": "Titillium Sans Pro", + "fontSize": 18.75, + "fontStyle": "normal", + "fontWeight": "600", + "lineHeight": undefined, + "textTransform": "none", + } } > 16/02/35 @@ -585,23 +522,16 @@ exports[`CardData should match snapshot for MDL back data 1`] = ` accessible={false} allowFontScaling={false} lineBreakMode="head" - maxFontSizeMultiplier={1.25} numberOfLines={1} style={ - [ - {}, - { - "color": "#0E0F13", - "fontFamily": "Titillium Sans Pro", - "fontSize": 18.75, - "fontStyle": "normal", - "fontWeight": "600", - "lineHeight": undefined, - }, - { - "textTransform": "none", - }, - ] + { + "fontFamily": "Titillium Sans Pro", + "fontSize": 18.75, + "fontStyle": "normal", + "fontWeight": "600", + "lineHeight": undefined, + "textTransform": "none", + } } > 78 @@ -625,23 +555,16 @@ exports[`CardData should match snapshot for MDL back data 1`] = ` accessible={false} allowFontScaling={false} lineBreakMode="head" - maxFontSizeMultiplier={1.25} numberOfLines={1} style={ - [ - {}, - { - "color": "#0E0F13", - "fontFamily": "Titillium Sans Pro", - "fontSize": 18.75, - "fontStyle": "normal", - "fontWeight": "600", - "lineHeight": undefined, - }, - { - "textTransform": "none", - }, - ] + { + "fontFamily": "Titillium Sans Pro", + "fontSize": 18.75, + "fontStyle": "normal", + "fontWeight": "600", + "lineHeight": undefined, + "textTransform": "none", + } } > 71 MS5118113X @@ -712,23 +635,16 @@ exports[`CardData should match snapshot for MDL front data 1`] = ` accessible={false} allowFontScaling={false} lineBreakMode="head" - maxFontSizeMultiplier={1.25} numberOfLines={1} style={ - [ - {}, - { - "color": "#0E0F13", - "fontFamily": "Titillium Sans Pro", - "fontSize": 22.916666666666668, - "fontStyle": "normal", - "fontWeight": "600", - "lineHeight": undefined, - }, - { - "textTransform": "none", - }, - ] + { + "fontFamily": "Titillium Sans Pro", + "fontSize": 22.916666666666668, + "fontStyle": "normal", + "fontWeight": "600", + "lineHeight": undefined, + "textTransform": "none", + } } > ROSSI @@ -752,23 +668,16 @@ exports[`CardData should match snapshot for MDL front data 1`] = ` accessible={false} allowFontScaling={false} lineBreakMode="head" - maxFontSizeMultiplier={1.25} numberOfLines={1} style={ - [ - {}, - { - "color": "#0E0F13", - "fontFamily": "Titillium Sans Pro", - "fontSize": 22.916666666666668, - "fontStyle": "normal", - "fontWeight": "600", - "lineHeight": undefined, - }, - { - "textTransform": "none", - }, - ] + { + "fontFamily": "Titillium Sans Pro", + "fontSize": 22.916666666666668, + "fontStyle": "normal", + "fontWeight": "600", + "lineHeight": undefined, + "textTransform": "none", + } } > MARCO @@ -792,23 +701,16 @@ exports[`CardData should match snapshot for MDL front data 1`] = ` accessible={false} allowFontScaling={false} lineBreakMode="head" - maxFontSizeMultiplier={1.25} numberOfLines={1} style={ - [ - {}, - { - "color": "#0E0F13", - "fontFamily": "Titillium Sans Pro", - "fontSize": 22.916666666666668, - "fontStyle": "normal", - "fontWeight": "600", - "lineHeight": undefined, - }, - { - "textTransform": "none", - }, - ] + { + "fontFamily": "Titillium Sans Pro", + "fontSize": 22.916666666666668, + "fontStyle": "normal", + "fontWeight": "600", + "lineHeight": undefined, + "textTransform": "none", + } } > 22/09/92 @@ -832,23 +734,16 @@ exports[`CardData should match snapshot for MDL front data 1`] = ` accessible={false} allowFontScaling={false} lineBreakMode="head" - maxFontSizeMultiplier={1.25} numberOfLines={1} style={ - [ - {}, - { - "color": "#0E0F13", - "fontFamily": "Titillium Sans Pro", - "fontSize": 22.916666666666668, - "fontStyle": "normal", - "fontWeight": "600", - "lineHeight": undefined, - }, - { - "textTransform": "none", - }, - ] + { + "fontFamily": "Titillium Sans Pro", + "fontSize": 22.916666666666668, + "fontStyle": "normal", + "fontWeight": "600", + "lineHeight": undefined, + "textTransform": "none", + } } > MILANO (MI) @@ -872,23 +767,16 @@ exports[`CardData should match snapshot for MDL front data 1`] = ` accessible={false} allowFontScaling={false} lineBreakMode="head" - maxFontSizeMultiplier={1.25} numberOfLines={1} style={ - [ - {}, - { - "color": "#0E0F13", - "fontFamily": "Titillium Sans Pro", - "fontSize": 22.916666666666668, - "fontStyle": "normal", - "fontWeight": "700", - "lineHeight": undefined, - }, - { - "textTransform": "none", - }, - ] + { + "fontFamily": "Titillium Sans Pro", + "fontSize": 22.916666666666668, + "fontStyle": "normal", + "fontWeight": "700", + "lineHeight": undefined, + "textTransform": "none", + } } > 08/01/2025 @@ -912,23 +800,16 @@ exports[`CardData should match snapshot for MDL front data 1`] = ` accessible={false} allowFontScaling={false} lineBreakMode="head" - maxFontSizeMultiplier={1.25} numberOfLines={1} style={ - [ - {}, - { - "color": "#0E0F13", - "fontFamily": "Titillium Sans Pro", - "fontSize": 22.916666666666668, - "fontStyle": "normal", - "fontWeight": "600", - "lineHeight": undefined, - }, - { - "textTransform": "none", - }, - ] + { + "fontFamily": "Titillium Sans Pro", + "fontSize": 22.916666666666668, + "fontStyle": "normal", + "fontWeight": "600", + "lineHeight": undefined, + "textTransform": "none", + } } > MC-RM @@ -952,23 +833,16 @@ exports[`CardData should match snapshot for MDL front data 1`] = ` accessible={false} allowFontScaling={false} lineBreakMode="head" - maxFontSizeMultiplier={1.25} numberOfLines={1} style={ - [ - {}, - { - "color": "#0E0F13", - "fontFamily": "Titillium Sans Pro", - "fontSize": 22.916666666666668, - "fontStyle": "normal", - "fontWeight": "700", - "lineHeight": undefined, - }, - { - "textTransform": "none", - }, - ] + { + "fontFamily": "Titillium Sans Pro", + "fontSize": 22.916666666666668, + "fontStyle": "normal", + "fontWeight": "700", + "lineHeight": undefined, + "textTransform": "none", + } } > 16/02/2035 @@ -992,23 +866,16 @@ exports[`CardData should match snapshot for MDL front data 1`] = ` accessible={false} allowFontScaling={false} lineBreakMode="head" - maxFontSizeMultiplier={1.25} numberOfLines={1} style={ - [ - {}, - { - "color": "#0E0F13", - "fontFamily": "Titillium Sans Pro", - "fontSize": 22.916666666666668, - "fontStyle": "normal", - "fontWeight": "600", - "lineHeight": undefined, - }, - { - "textTransform": "none", - }, - ] + { + "fontFamily": "Titillium Sans Pro", + "fontSize": 22.916666666666668, + "fontStyle": "normal", + "fontWeight": "600", + "lineHeight": undefined, + "textTransform": "none", + } } > RM8375131N @@ -1032,23 +899,16 @@ exports[`CardData should match snapshot for MDL front data 1`] = ` accessible={false} allowFontScaling={false} lineBreakMode="head" - maxFontSizeMultiplier={1.25} numberOfLines={1} style={ - [ - {}, - { - "color": "#0E0F13", - "fontFamily": "Titillium Sans Pro", - "fontSize": 22.916666666666668, - "fontStyle": "normal", - "fontWeight": "600", - "lineHeight": undefined, - }, - { - "textTransform": "none", - }, - ] + { + "fontFamily": "Titillium Sans Pro", + "fontSize": 22.916666666666668, + "fontStyle": "normal", + "fontWeight": "600", + "lineHeight": undefined, + "textTransform": "none", + } } > AM B diff --git a/ts/features/itwallet/common/components/__tests__/ItwCredentialCard.test.tsx b/ts/features/itwallet/common/components/__tests__/ItwCredentialCard.test.tsx index fb5f1c334e4..233b5a56030 100644 --- a/ts/features/itwallet/common/components/__tests__/ItwCredentialCard.test.tsx +++ b/ts/features/itwallet/common/components/__tests__/ItwCredentialCard.test.tsx @@ -1,8 +1,7 @@ import { render } from "@testing-library/react-native"; import * as React from "react"; -import { CredentialType } from "../../utils/itwMocksUtils"; -import { ItwCredentialCard } from "../ItwCredentialCard"; import { ItwCredentialStatus } from "../../utils/itwTypesUtils"; +import { ItwCredentialCard } from "../ItwCredentialCard"; describe("ItwCredentialCard", () => { it.each(["EuropeanHealthInsuranceCard", "EuropeanDisabilityCard", "MDL"])( @@ -27,14 +26,4 @@ describe("ItwCredentialCard", () => { expect(component).toMatchSnapshot(); } ); - - it("should render the preview", () => { - const component = render( - - ); - expect(component).toMatchSnapshot(); - }); }); diff --git a/ts/features/itwallet/common/components/__tests__/ItwDigitalVersionBadge.test.tsx b/ts/features/itwallet/common/components/__tests__/ItwDigitalVersionBadge.test.tsx new file mode 100644 index 00000000000..63ff7e617c6 --- /dev/null +++ b/ts/features/itwallet/common/components/__tests__/ItwDigitalVersionBadge.test.tsx @@ -0,0 +1,17 @@ +import { render } from "@testing-library/react-native"; +import React from "react"; +import { ItwDigitalVersionBadge } from "../ItwDigitalVersionBadge"; + +describe("ItwDigitalVersionBadge", () => { + it.each([ + "MDL", + "EuropeanDisabilityCard", + "EuropeanHealthInsuranceCard", + "InvalidCredentialType" + ])("should render correctly %s", credentialType => { + const component = render( + + ).toJSON(); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwCredentialCard.test.tsx.snap b/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwCredentialCard.test.tsx.snap index 8d91beb17e5..8dd883f8751 100644 --- a/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwCredentialCard.test.tsx.snap +++ b/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwCredentialCard.test.tsx.snap @@ -2,1210 +2,626 @@ exports[`ItwCredentialCard should match snapshot when credential type is "EuropeanDisabilityCard" 1`] = ` - - - + "opacity": 0, + }, + { + "height": "100%", + "width": "100%", + }, + ] + } + /> + + - - - CARTA EUROPEA DELLA DISABILITÀ - - - - - - - Versione digitale - - + CARTA EUROPEA DELLA DISABILITÀ + + + + > + + Versione digitale + + + `; exports[`ItwCredentialCard should match snapshot when credential type is "EuropeanHealthInsuranceCard" 1`] = ` - - - + "opacity": 0, + }, + { + "height": "100%", + "width": "100%", + }, + ] + } + /> + + - - - TESSERA SANITARIA - TESSERA EUROPEA DI ASSICURAZIONE MALATTIA - - - - - - - Versione digitale - - + TESSERA SANITARIA - TESSERA EUROPEA DI ASSICURAZIONE MALATTIA + + + + > + + Versione digitale + + - + + `; exports[`ItwCredentialCard should match snapshot when credential type is "MDL" 1`] = ` - - - - - - - PATENTE DI GUIDA - - - - - - - Versione digitale - - - - - -`; - -exports[`ItwCredentialCard should match snapshot when status is "expired" 1`] = ` - - - - - - - PATENTE DI GUIDA - - - - - - - - - - - - Scaduta - - - - - - - - - Versione digitale - - + PATENTE DI GUIDA + - - -`; - -exports[`ItwCredentialCard should match snapshot when status is "expiring" 1`] = ` - - - - - - - PATENTE DI GUIDA - - - - - - - - - - - - In scadenza - - - - - - - - Versione digitale - - + Versione digitale + - + + +`; + +exports[`ItwCredentialCard should match snapshot when status is "expired" 1`] = ` + + + - -`; - -exports[`ItwCredentialCard should match snapshot when status is "pending" 1`] = ` - - - - - - - PATENTE DI GUIDA - - - - + > + PATENTE DI GUIDA + + + + + + + + - Versione digitale + Scaduta + + + > + + + Versione digitale + + + `; -exports[`ItwCredentialCard should match snapshot when status is "valid" 1`] = ` +exports[`ItwCredentialCard should match snapshot when status is "expiring" 1`] = ` - - - + "opacity": 0, + }, + { + "height": "100%", + "width": "100%", + }, + ] + } + /> + + - - - PATENTE DI GUIDA - - - - + > + PATENTE DI GUIDA + + + + + + + + + - Versione digitale + In scadenza + + + > + + Versione digitale + + + `; -exports[`ItwCredentialCard should render the preview 1`] = ` +exports[`ItwCredentialCard should match snapshot when status is "pending" 1`] = ` - - - + "opacity": 0, + }, + { + "height": "100%", + "width": "100%", + }, + ] + } + /> + + - - - PATENTE DI GUIDA - - + ], + { + "color": "#652035", + "flex": 1, + "flexShrink": 1, + "letterSpacing": 0.25, + "opacity": 0.5, + }, + ] + } + > + PATENTE DI GUIDA + + + + - + + + + +`; + +exports[`ItwCredentialCard should match snapshot when status is "valid" 1`] = ` + + + + + + + - Versione digitale - - + ], + { + "color": "#652035", + "flex": 1, + "flexShrink": 1, + "letterSpacing": 0.25, + "opacity": 1, + }, + ] + } + > + PATENTE DI GUIDA + + + + > + + Versione digitale + + + `; diff --git a/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwDigitalVersionBadge.test.tsx.snap b/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwDigitalVersionBadge.test.tsx.snap new file mode 100644 index 00000000000..d455e9d6119 --- /dev/null +++ b/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwDigitalVersionBadge.test.tsx.snap @@ -0,0 +1,180 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ItwDigitalVersionBadge should render correctly EuropeanDisabilityCard 1`] = ` + + + + Versione digitale + + + +`; + +exports[`ItwDigitalVersionBadge should render correctly EuropeanHealthInsuranceCard 1`] = ` + + + + Versione digitale + + + +`; + +exports[`ItwDigitalVersionBadge should render correctly InvalidCredentialType 1`] = `null`; + +exports[`ItwDigitalVersionBadge should render correctly MDL 1`] = ` + + + + Versione digitale + + + +`; diff --git a/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwFeedbackBanner.test.tsx.snap b/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwFeedbackBanner.test.tsx.snap index 9b9228e4363..1411c90a6ce 100644 --- a/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwFeedbackBanner.test.tsx.snap +++ b/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwFeedbackBanner.test.tsx.snap @@ -467,6 +467,9 @@ exports[`ItwFeedbackBanner should match the snapshot 1`] = ` /> @@ -477,104 +480,30 @@ exports[`ItwFeedbackBanner should match the snapshot 1`] = ` } } /> - - - - Inizia - - - + Inizia + diff --git a/ts/features/itwallet/common/components/discoveryBanner/__tests__/__snapshots__/ItwDiscoveryBanner.test.tsx.snap b/ts/features/itwallet/common/components/discoveryBanner/__tests__/__snapshots__/ItwDiscoveryBanner.test.tsx.snap index 0b30e7b2358..9000382b5e9 100644 --- a/ts/features/itwallet/common/components/discoveryBanner/__tests__/__snapshots__/ItwDiscoveryBanner.test.tsx.snap +++ b/ts/features/itwallet/common/components/discoveryBanner/__tests__/__snapshots__/ItwDiscoveryBanner.test.tsx.snap @@ -468,6 +468,9 @@ exports[`ItwDiscoveryBanner should match snapshot 1`] = ` /> @@ -478,104 +481,30 @@ exports[`ItwDiscoveryBanner should match snapshot 1`] = ` } } /> - - - - Inizia - - - + Inizia + @@ -794,104 +797,30 @@ exports[`ItwDiscoveryBannerOnboarding should match snapshot when isItwDiscoveryB } } /> - - - - Inizia - - - + Inizia + @@ -826,104 +829,30 @@ exports[`ItwDiscoveryBannerStandalone should match snapshot when isItwDiscoveryB } } /> - - - - Inizia - - - + Inizia + @@ -576,7 +579,10 @@ exports[`SecuritySuggestions should match snapshot 1`] = ` @@ -601,13 +607,6 @@ exports[`SecuritySuggestions should match snapshot 1`] = ` > If you lose your device, log out from the web. - @@ -754,13 +756,6 @@ exports[`SecuritySuggestions should match snapshot 1`] = ` > If you fear that someone might use your SPID or CIE, lock access to the app after authenticating from the web. - diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/RemoteContentBanner.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/RemoteContentBanner.test.tsx.snap index f5c55a4ff1d..250c015dac9 100644 --- a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/RemoteContentBanner.test.tsx.snap +++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/RemoteContentBanner.test.tsx.snap @@ -439,6 +439,9 @@ exports[`RemoteContentBanner Should match snapshot 1`] = ` /> @@ -449,104 +452,30 @@ exports[`RemoteContentBanner Should match snapshot 1`] = ` } } /> - - - - Learn more - - - + Learn more + { const holderNameText = props.holderName && ( { ); const expireDateText = props.expireDate && ( - + {I18n.t("wallet.creditCard.validUntil", { expDate: format(props.expireDate, "MM/YY") })} @@ -65,6 +68,7 @@ const PaymentCard = (props: PaymentCardComponentProps) => { const maskedEmailText = props.holderEmail && ( { const maskedPhoneText = props.holderPhone && ( { return (
{capitalize(circuitName)} •••• {props.hpan}
@@ -134,6 +143,7 @@ const PaymentCard = (props: PaymentCardComponentProps) => { const expiredTag = ( diff --git a/ts/features/payments/common/components/PaymentCardBig.tsx b/ts/features/payments/common/components/PaymentCardBig.tsx deleted file mode 100644 index fd1181d73d2..00000000000 --- a/ts/features/payments/common/components/PaymentCardBig.tsx +++ /dev/null @@ -1,313 +0,0 @@ -import { - H3, - H6, - IOColors, - IOLogoPaymentExtType, - IOStyles, - BodySmall, - LogoPaymentExt, - VSpacer -} from "@pagopa/io-app-design-system"; -import React from "react"; -import { StyleSheet, View } from "react-native"; -import Placeholder from "rn-placeholder"; -import { LogoPaymentExtended } from "../../../../components/ui/LogoPaymentExtended"; -import I18n from "../../../../i18n"; -import { WithTestID } from "../../../../types/WithTestID"; -import { format } from "../../../../utils/dates"; -import { capitalize } from "../../../../utils/strings"; -import { LogoPaymentWithFallback } from "../../../../components/ui/utils/components/LogoPaymentWithFallback"; - -export const PaymentCardBig = (props: PaymentCardBigProps) => { - if (props.isLoading) { - return ; - } - return ( - - - - - - ); -}; -// ------------- core -const BigPaymentCardBottomSection = (props: PaymentCardStandardProps) => { - switch (props.cardType) { - case "PAYPAL": - return ( - - ); - case "BANCOMATPAY": - return ( - - - {props.phoneNumber} - - - - - ); - case "PAGOBANCOMAT": - return ( - - - - - ); - case "COBADGE": - return ( - - - - - ); - case "CREDIT": - return ( - - - - - ); - } -}; -const BigPaymentCardTopSection = (props: PaymentCardStandardProps) => { - switch (props.cardType) { - case "PAYPAL": - return ( - - ); - case "PAGOBANCOMAT": - return ( - - - - - ); - case "COBADGE": - return ( - - - - - ); - case "CREDIT": - return ( - -

- {`${props.cardIcon} ••${props.hpan}`} -

- - - ); - case "BANCOMATPAY": - return ( - - - - ); - } -}; - -// ------------- utils -const BottomSectionText = (props: { string: string; a11yLabel: string }) => ( -
- {props.string} -
-); -const ExpDateComponent = ({ expDate }: { expDate?: Date }) => { - if (expDate) { - return ( - <> - - - {I18n.t("wallet.creditCard.validUntil", { - expDate: format(expDate, "MM/YY") - })} - - - ); - } - - return null; -}; - -// ------------- skeleton -const CardSkeleton = ({ testID }: { testID?: string }) => ( - - - - - - - - - - - - -); - -// ------------- styles + types - -// all cards have an expiration date except for paypal and bpay, -// bancomatPay also has a phone number -// the rendering of the circuit logo is handled by the component - -export type PaymentCardBigProps = WithTestID< - | { isLoading: true; accessibilityLabel?: string } - | ({ - isLoading?: false; - accessibilityLabel?: string; - } & PaymentCardStandardProps) ->; - -type PaymentCardStandardProps = - | { - cardType: "PAYPAL"; - holderEmail: string; - } - | { - cardType: "BANCOMATPAY"; - phoneNumber: string; - holderName: string; - } - | { - cardType: "PAGOBANCOMAT"; - expirationDate?: Date; - abiCode?: string; - holderName: string; - bankName?: string; - } - | { - cardType: "COBADGE"; - expirationDate?: Date; - abiCode?: string; - bankName?: string; - holderName: string; - cardIcon?: IOLogoPaymentExtType; - } - | { - cardType: "CREDIT"; - expirationDate?: Date; - holderName: string; - hpan: string; - cardIcon?: IOLogoPaymentExtType; - }; - -const LOGO_HEIGHT = 32; -const BANK_LOGO_WIDTH = 213; -const BPAY_LOGO_WIDTH = 170; -const PAYPAL_LOGO_WIDTH = 114; -const styles = StyleSheet.create({ - cardContainer: { - flex: 1, - alignItems: "flex-start", - alignContent: "space-between", - justifyContent: "space-between", - height: 207, - borderRadius: 16, - borderCurve: "continuous", - backgroundColor: IOColors["grey-100"], - padding: 24, - width: "100%" // required for consistent skeleton sizing - }, - bottomRow: { - height: 48, - width: "100%", - flexDirection: "row", - alignItems: "center", - justifyContent: "space-between" - } -}); diff --git a/ts/features/payments/common/components/__tests__/PaymentCardBig.test.tsx b/ts/features/payments/common/components/__tests__/PaymentCardBig.test.tsx deleted file mode 100644 index 6ab8e29da3c..00000000000 --- a/ts/features/payments/common/components/__tests__/PaymentCardBig.test.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { default as React } from "react"; -import { createStore } from "redux"; -import ROUTES from "../../../../../navigation/routes"; -import { applicationChangeState } from "../../../../../store/actions/application"; -import { appReducer } from "../../../../../store/reducers"; -import { GlobalState } from "../../../../../store/reducers/types"; -import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper"; -import { PaymentCardBig, PaymentCardBigProps } from "../PaymentCardBig"; - -describe("PaymentCardBig component", () => { - const testID = "PaymentCardBigTestID"; - jest.useFakeTimers(); - it(`matches snapshot for loading`, () => { - const component = renderCardBig({ isLoading: true }); - expect(component).toMatchSnapshot(); - }); - it(`matches snapshot for paypal`, () => { - const component = renderCardBig({ - cardType: "PAYPAL", - holderEmail: "someEmail@test.com" - }); - expect(component).toMatchSnapshot(); - }); - - it(`should render a phone number in case of BancomatPay`, () => { - const component = renderCardBig({ - cardType: "BANCOMATPAY", - phoneNumber: "1234567890", - holderName: "holderName", - testID - }); - expect(component).not.toBeNull(); - expect(component.queryByText("1234567890")).not.toBeNull(); - }); - it(`should render a skeleton when loading`, () => { - const component = renderCardBig({ - isLoading: true, - testID - }); - expect(component).not.toBeNull(); - expect(component.queryByTestId(`${testID}-skeleton`)).not.toBeNull(); - }); -}); - -function renderCardBig(props: PaymentCardBigProps) { - const globalState = appReducer(undefined, applicationChangeState("active")); - return renderScreenWithNavigationStoreContext( - () => , - ROUTES.WALLET_HOME, - {}, - createStore(appReducer, globalState as any) - ); -} diff --git a/ts/features/payments/common/components/__tests__/__snapshots__/PaymentCardBig.test.tsx.snap b/ts/features/payments/common/components/__tests__/__snapshots__/PaymentCardBig.test.tsx.snap deleted file mode 100644 index 59fb0b9eab9..00000000000 --- a/ts/features/payments/common/components/__tests__/__snapshots__/PaymentCardBig.test.tsx.snap +++ /dev/null @@ -1,887 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`PaymentCardBig component matches snapshot for loading 1`] = ` - - - - - - - - - - - - - - - WALLET_HOME - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`PaymentCardBig component matches snapshot for paypal 1`] = ` - - - - - - - - - - - - - - - WALLET_HOME - - - - - - - - - - - - - - - - - - - - - someEmail@test.com - - - - - - - - - - - - - -`; diff --git a/ts/features/pushNotifications/components/__tests__/__snapshots__/PushNotificationsBanner.test.tsx.snap b/ts/features/pushNotifications/components/__tests__/__snapshots__/PushNotificationsBanner.test.tsx.snap index 30907e43682..cc298c88764 100644 --- a/ts/features/pushNotifications/components/__tests__/__snapshots__/PushNotificationsBanner.test.tsx.snap +++ b/ts/features/pushNotifications/components/__tests__/__snapshots__/PushNotificationsBanner.test.tsx.snap @@ -469,6 +469,9 @@ exports[`PushNotificationsBanner should render correctly 1`] = ` /> @@ -479,104 +482,30 @@ exports[`PushNotificationsBanner should render correctly 1`] = ` } } /> - - - - Turn on push notifications - - - + Turn on push notifications + diff --git a/ts/screens/authentication/__tests__/__snapshots__/LandingScreen.test.tsx.snap b/ts/screens/authentication/__tests__/__snapshots__/LandingScreen.test.tsx.snap index d10e456c04f..bb48b50e927 100644 --- a/ts/screens/authentication/__tests__/__snapshots__/LandingScreen.test.tsx.snap +++ b/ts/screens/authentication/__tests__/__snapshots__/LandingScreen.test.tsx.snap @@ -2330,6 +2330,9 @@ exports[`LandingScreen with CieID FF enabled Should match the snapshot 1`] = ` /> @@ -2340,104 +2343,30 @@ exports[`LandingScreen with CieID FF enabled Should match the snapshot 1`] = ` } } /> - - - - We give you a hand - - - + We give you a hand + @@ -5192,104 +5124,30 @@ exports[`LandingScreen with both local and remote CieID FF disabled Should match } } /> - - - - We give you a hand - - - + We give you a hand + @@ -339,104 +342,30 @@ exports[`ProfileMainScreenTopBanner should match snapshot for all possible resul } } /> - - - - Go to "Your data" section - - - + Go to "Your data" section + diff --git a/ts/screens/profile/components/__test__/__snapshots__/SettingsDiscoveryBanner.test.tsx.snap b/ts/screens/profile/components/__test__/__snapshots__/SettingsDiscoveryBanner.test.tsx.snap index 1fef98442f2..c34677d9358 100644 --- a/ts/screens/profile/components/__test__/__snapshots__/SettingsDiscoveryBanner.test.tsx.snap +++ b/ts/screens/profile/components/__test__/__snapshots__/SettingsDiscoveryBanner.test.tsx.snap @@ -440,6 +440,9 @@ exports[`settingsDiscoveryBanner should match snapshot 1`] = ` /> @@ -450,104 +453,30 @@ exports[`settingsDiscoveryBanner should match snapshot 1`] = ` } } /> - - - - Go to Settings - - - + Go to Settings + diff --git a/yarn.lock b/yarn.lock index 87562a1278d..6f14753c313 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2215,10 +2215,10 @@ dependencies: "@types/node" ">= 8" -"@pagopa/io-app-design-system@4.0.2": - version "4.0.2" - resolved "https://registry.yarnpkg.com/@pagopa/io-app-design-system/-/io-app-design-system-4.0.2.tgz#95848d1ae7a20a6905bf4ca749bbcd6b8b20530d" - integrity sha512-z7ST78N0q9LEI+tA2rqD3saAXImkuqKiHg16CF3Cg+J+jtIsmKlRZq9kCOsYUGIv02/F+5lUjZyCrElJRN+eMQ== +"@pagopa/io-app-design-system@4.2.0": + version "4.2.0" + resolved "https://registry.yarnpkg.com/@pagopa/io-app-design-system/-/io-app-design-system-4.2.0.tgz#2e80e672504b7735b741f3ad9353add186256b28" + integrity sha512-wz9NwCEAb4cbKeCTQPmIU8ECsg5IDruqJn4JXG+FxX7i/T/upoMUm5l+Rqo2NDi0bMwcPvpU/SOsdH6jCkDM1Q== dependencies: "@testing-library/jest-native" "^5.4.2" "@types/react-test-renderer" "^18.0.0"