Skip to content

Commit

Permalink
chore(Carta Giovani Nazionale): [#178127305] Adds Department name and…
Browse files Browse the repository at this point in the history
… 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 <[email protected]>
  • Loading branch information
CrisTofani and Undermaken authored May 31, 2021
1 parent 9a2e3ed commit c8c9267
Show file tree
Hide file tree
Showing 9 changed files with 97 additions and 57 deletions.
Binary file added img/bonus/cgn/eyca_logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions locales/en/index.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2297,6 +2297,7 @@ bonus:
accessibility:
code: By pressing the item you will copy the code
name: Carta Giovani Nazionale
departmentName: Dipartimento per le politiche giovanili e il servizio civile universale
merchantsList:
online: Online
places: Places
Expand Down
1 change: 1 addition & 0 deletions locales/it/index.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2327,6 +2327,7 @@ bonus:
accessibility:
code: Premendo l'elemento copierai il codice
name: Carta Giovani Nazionale
departmentName: Dipartimento per le politiche giovanili e il servizio civile universale
merchantsList:
online: Online
places: Luoghi
Expand Down
12 changes: 6 additions & 6 deletions ts/features/bonus/cgn/components/detail/CardSvgPayload.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export const playSvg = (
`<svg width="1000" viewBox = "0 0 300 1000">
<svg>
<g transform="scale(-0.8, 0.8) translate(-200, -100)">
<path d="M210.82,134c.84-37.64-29.89-86.36-56.21-102.85C126.82,16.47,48.61-10.19,16.2,10.36c-33.63,18,1.38,93.26.29,124.61,1.14,31.26-7.74,78.81,25.85,96.73,32.39,20.51,69.63-11.14,97.39-25.92C166.74,188.88,212.81,173,210.82,134Z" fill-opacity="0.8">
<path d="M210.82,134c.84-37.64-29.89-86.36-56.21-102.85C126.82,16.47,48.61-10.19,16.2,10.36c-33.63,18,1.38,93.26.29,124.61,1.14,31.26-7.74,78.81,25.85,96.73,32.39,20.51,69.63-11.14,97.39-25.92C166.74,188.88,212.81,173,210.82,134Z" fill-opacity="0.9">
<animate
dur='5s'
attributeType="XML"
Expand Down Expand Up @@ -36,7 +36,7 @@ M210.82,134c.84-37.64-29.89-86.36-56.21-102.85C126.82,16.47,48.61-10.19,16.2,10.
attributeName="fill"
dur="10s"
repeatCount="indefinite"
values="#D91120;#7CB3D9;#D91120"
values="#D8555F;#7CB3D9;#D8555F"
/>
<animateTransform
type="translate"
Expand All @@ -51,7 +51,7 @@ M210.82,134c.84-37.64-29.89-86.36-56.21-102.85C126.82,16.47,48.61-10.19,16.2,10.
</svg>
<svg>
<g transform="scale(0.8) translate(250, 80)">
<path d="M210.82,134c.84-37.64-29.89-86.36-56.21-102.85C126.82,16.47,48.61-10.19,16.2,10.36c-33.63,18,1.38,93.26.29,124.61,1.14,31.26-7.74,78.81,25.85,96.73,32.39,20.51,69.63-11.14,97.39-25.92C166.74,188.88,212.81,173,210.82,134Z" fill-opacity="0.5">
<path d="M210.82,134c.84-37.64-29.89-86.36-56.21-102.85C126.82,16.47,48.61-10.19,16.2,10.36c-33.63,18,1.38,93.26.29,124.61,1.14,31.26-7.74,78.81,25.85,96.73,32.39,20.51,69.63-11.14,97.39-25.92C166.74,188.88,212.81,173,210.82,134Z" fill-opacity="0.9">
<animate
dur='6s'
attributeType="XML"
Expand Down Expand Up @@ -81,7 +81,7 @@ M210.82,134c.84-37.64-29.89-86.36-56.21-102.85C126.82,16.47,48.61-10.19,16.2,10.
attributeName="fill"
dur="10s"
repeatCount="indefinite"
values="#008736;#7CB3D9;#008736"
values="#33A86B;#7CB3D9;#33A86B"
/>
<animateTransform
Expand All @@ -96,7 +96,7 @@ M210.82,134c.84-37.64-29.89-86.36-56.21-102.85C126.82,16.47,48.61-10.19,16.2,10.
</path>
</g>
<g transform="scale(0.7) translate(-50, 50)">
<path d="M210.82,134c.84-37.64-29.89-86.36-56.21-102.85C126.82,16.47,48.61-10.19,16.2,10.36c-33.63,18,1.38,93.26.29,124.61,1.14,31.26-7.74,78.81,25.85,96.73,32.39,20.51,69.63-11.14,97.39-25.92C166.74,188.88,212.81,173,210.82,134Z" fill-opacity="0.5">
<path d="M210.82,134c.84-37.64-29.89-86.36-56.21-102.85C126.82,16.47,48.61-10.19,16.2,10.36c-33.63,18,1.38,93.26.29,124.61,1.14,31.26-7.74,78.81,25.85,96.73,32.39,20.51,69.63-11.14,97.39-25.92C166.74,188.88,212.81,173,210.82,134Z" fill-opacity="0.9">
<animate
dur='10s'
attributeType="XML"
Expand Down Expand Up @@ -126,7 +126,7 @@ M210.82,134c.84-37.64-29.89-86.36-56.21-102.85C126.82,16.47,48.61-10.19,16.2,10.
attributeName="fill"
dur="10s"
repeatCount="indefinite"
values="#7CB3D9;#D91120;#7CB3D9"
values="#7CB3D9;#D8555F;#7CB3D9"
/>
<animateTransform
Expand Down
43 changes: 28 additions & 15 deletions ts/features/bonus/cgn/components/detail/CgnCardComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,19 @@ import { Image, ImageBackground, StyleSheet } from "react-native";
import { connect } from "react-redux";
import { widthPercentageToDP } from "react-native-responsive-screen";
import { IOStyles } from "../../../../../components/core/variables/IOStyles";
import { H5 } from "../../../../../components/core/typography/H5";
import { H3 } from "../../../../../components/core/typography/H3";
import I18n from "../../../../../i18n";
import { Card } from "../../../../../../definitions/cgn/Card";
import { GlobalState } from "../../../../../store/reducers/types";
import { profileNameSurnameSelector } from "../../../../../store/reducers/profile";
import { localeDateFormat } from "../../../../../utils/locale";
import cgnLogo from "../../../../../../img/bonus/cgn/cgn_logo.png";
import eycaLogo from "../../../../../../img/bonus/cgn/eyca_logo.png";
import cardBg from "../../../../../../img/bonus/cgn/card_mask.png";
import { generateRandomSvgMovement, Point } from "../../utils/svgBackground";
import { eycaDetailSelector } from "../../store/reducers/eyca/details";
import { canEycaCardBeShown } from "../../utils/eyca";
import { playSvg } from "./CardSvgPayload";
import DepartmentLabel from "./DepartmentLabel";

type Props = {
cgnDetails: Card;
Expand Down Expand Up @@ -68,6 +70,13 @@ const styles = StyleSheet.create({
width: 56,
alignSelf: "flex-end"
},
eycaLogo: {
resizeMode: "contain",
height: 70,
width: 44,
alignSelf: "flex-end",
marginRight: 10
},
imageFull: {
resizeMode: "stretch",
height: 215,
Expand Down Expand Up @@ -131,6 +140,8 @@ const CgnCardComponent: React.FunctionComponent<Props> = (props: Props) => {
generatedTranslationC
);

const canDisplayEycaLogo = canEycaCardBeShown(props.eycaDetails);

return (
<View style={[styles.cgnCard]} testID={"card-component"}>
<ImageBackground
Expand All @@ -156,18 +167,15 @@ const CgnCardComponent: React.FunctionComponent<Props> = (props: Props) => {
]}
>
<View style={[styles.column, styles.flex2, styles.spaced]}>
<H3 weight={"Bold"} color={"black"}>
{I18n.t("bonus.cgn.name")}
</H3>
<View>
{props.cgnDetails.status !== "PENDING" && (
<H5 testID={"validity-date"}>
{`${I18n.t("cardComponent.validUntil")} ${localeDateFormat(
props.cgnDetails.expiration_date,
I18n.t("global.dateFormats.shortFormat")
)}`}
</H5>
)}
<H3 weight={"Bold"} color={"black"}>
{I18n.t("bonus.cgn.name")}
</H3>
<DepartmentLabel>
{I18n.t("bonus.cgn.departmentName")}
</DepartmentLabel>
</View>
<View>
{props.currentProfile && (
<H3
weight={"Bold"}
Expand All @@ -180,7 +188,11 @@ const CgnCardComponent: React.FunctionComponent<Props> = (props: Props) => {
</View>
</View>
<View style={[styles.column, styles.flex1, styles.spaced]}>
<View hspacer />
{canDisplayEycaLogo ? (
<Image source={eycaLogo} style={styles.eycaLogo} />
) : (
<View hspacer />
)}
<Image source={cgnLogo} style={styles.fullLogo} />
</View>
</View>
Expand All @@ -190,7 +202,8 @@ const CgnCardComponent: React.FunctionComponent<Props> = (props: Props) => {
};

const mapStateToProps = (state: GlobalState) => ({
currentProfile: profileNameSurnameSelector(state)
currentProfile: profileNameSurnameSelector(state),
eycaDetails: eycaDetailSelector(state)
});

export default connect(mapStateToProps)(CgnCardComponent);
32 changes: 32 additions & 0 deletions ts/features/bonus/cgn/components/detail/DepartmentLabel.tsx
Original file line number Diff line number Diff line change
@@ -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<IOFontWeight, "Regular">;

type AllowedColors = Extract<IOColorType, "black">;

const fontName: IOFontFamily = "TitilliumWeb";
const fontSize = 12;

type DepartmentLabelProps = Omit<
React.ComponentPropsWithRef<typeof Text>,
"style"
>;

// Custom Typography component to show the name of Department on CGN card component
const DepartmentLabel: React.FunctionComponent<DepartmentLabelProps> = props =>
typographyFactory<AllowedWeight, AllowedColors>({
...props,
defaultWeight: "Regular",
defaultColor: "black",
font: fontName,
fontStyle: { fontSize }
});

export default DepartmentLabel;
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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();
Expand Down
29 changes: 3 additions & 26 deletions ts/features/bonus/cgn/screens/CgnDetailScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<typeof mapStateToProps> &
Expand All @@ -53,26 +49,6 @@ type Props = ReturnType<typeof mapStateToProps> &
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
*/
Expand All @@ -97,6 +73,7 @@ const CgnDetailScreen = (props: Props): React.ReactElement => {
});

const canDisplayEycaDetails = canEycaCardBeShown(props.eycaDetails);

return props.cgnDetails || props.isCgnInfoLoading ? (
<LoadingSpinnerOverlay isLoading={props.isCgnInfoLoading || cardLoading}>
<BaseScreenComponent
Expand Down
26 changes: 26 additions & 0 deletions ts/features/bonus/cgn/utils/eyca.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import {
EycaDetailsState,
EycaDetailStatus
} from "../store/reducers/eyca/details";
import { isLoading, isReady } from "../../bpd/model/RemoteValue";

// return true if the EYCA details component can be shown
export 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;
};

0 comments on commit c8c9267

Please sign in to comment.