From c8c92675e1ba3b151e6e42fd3a4975c0e4e6eafb Mon Sep 17 00:00:00 2001 From: Cristiano Tofani Date: Mon, 31 May 2021 21:23:20 +0200 Subject: [PATCH] chore(Carta Giovani Nazionale): [#178127305] Adds Department name and Eyca Logo on card component (#3042) * [#178127305] Adds Department name and Eyca Logo on card component * [#178127305] Fixes failing tests * [#178127305] Changes blobs color and opacity Co-authored-by: Matteo Boschi --- img/bonus/cgn/eyca_logo.png | Bin 0 -> 7011 bytes locales/en/index.yml | 1 + locales/it/index.yml | 1 + .../cgn/components/detail/CardSvgPayload.ts | 12 ++--- .../components/detail/CgnCardComponent.tsx | 43 ++++++++++++------ .../cgn/components/detail/DepartmentLabel.tsx | 32 +++++++++++++ .../detail/__test__/CgnCardComponent.test.tsx | 10 ---- .../bonus/cgn/screens/CgnDetailScreen.tsx | 29 ++---------- ts/features/bonus/cgn/utils/eyca.ts | 26 +++++++++++ 9 files changed, 97 insertions(+), 57 deletions(-) create mode 100644 img/bonus/cgn/eyca_logo.png create mode 100644 ts/features/bonus/cgn/components/detail/DepartmentLabel.tsx create mode 100644 ts/features/bonus/cgn/utils/eyca.ts diff --git a/img/bonus/cgn/eyca_logo.png b/img/bonus/cgn/eyca_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..a932ae506e57ef3e9e77e2eb958da679948dc475 GIT binary patch literal 7011 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 - + - + - + = (props: Props) => { generatedTranslationC ); + const canDisplayEycaLogo = canEycaCardBeShown(props.eycaDetails); + return ( = (props: Props) => { ]} > -

- {I18n.t("bonus.cgn.name")} -

- {props.cgnDetails.status !== "PENDING" && ( -
- {`${I18n.t("cardComponent.validUntil")} ${localeDateFormat( - props.cgnDetails.expiration_date, - I18n.t("global.dateFormats.shortFormat") - )}`} -
- )} +

+ {I18n.t("bonus.cgn.name")} +

+ + {I18n.t("bonus.cgn.departmentName")} + + + {props.currentProfile && (

= (props: Props) => { - + {canDisplayEycaLogo ? ( + + ) : ( + + )} @@ -190,7 +202,8 @@ const CgnCardComponent: React.FunctionComponent = (props: Props) => { }; const mapStateToProps = (state: GlobalState) => ({ - currentProfile: profileNameSurnameSelector(state) + currentProfile: profileNameSurnameSelector(state), + eycaDetails: eycaDetailSelector(state) }); export default connect(mapStateToProps)(CgnCardComponent); diff --git a/ts/features/bonus/cgn/components/detail/DepartmentLabel.tsx b/ts/features/bonus/cgn/components/detail/DepartmentLabel.tsx new file mode 100644 index 00000000000..ae25edb4854 --- /dev/null +++ b/ts/features/bonus/cgn/components/detail/DepartmentLabel.tsx @@ -0,0 +1,32 @@ +import * as React from "react"; +import { Text } from "react-native"; +import { + IOFontFamily, + IOFontWeight +} from "../../../../../components/core/fonts"; +import { IOColorType } from "../../../../../components/core/variables/IOColors"; +import { typographyFactory } from "../../../../../components/core/typography/Factory"; + +type AllowedWeight = Extract; + +type AllowedColors = Extract; + +const fontName: IOFontFamily = "TitilliumWeb"; +const fontSize = 12; + +type DepartmentLabelProps = Omit< + React.ComponentPropsWithRef, + "style" +>; + +// Custom Typography component to show the name of Department on CGN card component +const DepartmentLabel: React.FunctionComponent = props => + typographyFactory({ + ...props, + defaultWeight: "Regular", + defaultColor: "black", + font: fontName, + fontStyle: { fontSize } + }); + +export default DepartmentLabel; diff --git a/ts/features/bonus/cgn/components/detail/__test__/CgnCardComponent.test.tsx b/ts/features/bonus/cgn/components/detail/__test__/CgnCardComponent.test.tsx index 1c6c7c73123..d51e633bede 100644 --- a/ts/features/bonus/cgn/components/detail/__test__/CgnCardComponent.test.tsx +++ b/ts/features/bonus/cgn/components/detail/__test__/CgnCardComponent.test.tsx @@ -13,8 +13,6 @@ import { import { StatusEnum as CgnExpiredStatusEnum } from "../../../../../../../definitions/cgn/CardExpired"; import { StatusEnum as CgnPendingStatusEnum } from "../../../../../../../definitions/cgn/CardPending"; import CgnCardComponent from "../CgnCardComponent"; -import I18n from "../../../../../../i18n"; -import { localeDateFormat } from "../../../../../../utils/locale"; import { GlobalState } from "../../../../../../store/reducers/types"; import { appReducer } from "../../../../../../store/reducers"; import { profileLoadSuccess } from "../../../../../../store/actions/profile"; @@ -73,14 +71,6 @@ const baseCardTestCase = (store: any, card: Card) => { const webView = component.queryByTestId("background-webview"); expect(webView).not.toBeNull(); - const validityDate = component.queryByTestId("validity-date"); - expect(validityDate).not.toBeNull(); - expect(validityDate).toHaveTextContent( - `${I18n.t("cardComponent.validUntil")} ${localeDateFormat( - cgnStatusActivated.expiration_date, - I18n.t("global.dateFormats.shortFormat") - )}` - ); const nameSurname = component.queryByTestId("profile-name-surname"); if (pot.isSome(store.getState().profile)) { expect(nameSurname).not.toBeNull(); diff --git a/ts/features/bonus/cgn/screens/CgnDetailScreen.tsx b/ts/features/bonus/cgn/screens/CgnDetailScreen.tsx index 93fd3d32393..e0ae8037767 100644 --- a/ts/features/bonus/cgn/screens/CgnDetailScreen.tsx +++ b/ts/features/bonus/cgn/screens/CgnDetailScreen.tsx @@ -36,15 +36,11 @@ import CgnCardComponent from "../components/detail/CgnCardComponent"; import { useActionOnFocus } from "../../../../utils/hooks/useOnFocus"; import { cgnDetails } from "../store/actions/details"; import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay"; -import { - eycaDetailSelector, - EycaDetailsState, - EycaDetailStatus -} from "../store/reducers/eyca/details"; +import { eycaDetailSelector } from "../store/reducers/eyca/details"; import GenericErrorComponent from "../../../../components/screens/GenericErrorComponent"; import { navigateBack } from "../../../../store/actions/navigation"; -import { isLoading, isReady } from "../../bpd/model/RemoteValue"; import { useHardwareBackButton } from "../../bonusVacanze/components/hooks/useHardwareBackButton"; +import { canEycaCardBeShown } from "../utils/eyca"; import { configSelector } from "../../../../store/reducers/backendStatus"; type Props = ReturnType & @@ -53,26 +49,6 @@ type Props = ReturnType & const HEADER_BACKGROUND_COLOR = "#C2DBEC"; const GRADIENT_END_COLOR = "#94C0DD"; -// return true if the EYCA details component can be shown -const canEycaCardBeShown = (card: EycaDetailsState): boolean => { - if (isLoading(card)) { - return true; - } - const evaluateReady = (status: EycaDetailStatus): boolean => { - switch (status) { - case "FOUND": - case "NOT_FOUND": - case "ERROR": - return true; - case "INELIGIBLE": - return false; - } - }; - if (isReady(card)) { - return evaluateReady(card.value.status); - } - return false; -}; /** * Screen to display all the information about the active CGN */ @@ -97,6 +73,7 @@ const CgnDetailScreen = (props: Props): React.ReactElement => { }); const canDisplayEycaDetails = canEycaCardBeShown(props.eycaDetails); + return props.cgnDetails || props.isCgnInfoLoading ? ( { + if (isLoading(card)) { + return true; + } + const evaluateReady = (status: EycaDetailStatus): boolean => { + switch (status) { + case "FOUND": + case "NOT_FOUND": + case "ERROR": + return true; + case "INELIGIBLE": + return false; + } + }; + if (isReady(card)) { + return evaluateReady(card.value.status); + } + return false; +};