pagopa · Undermaken · Mar 22, 2021 · Jan 12, 2021 · Jan 12, 2021 · Jan 12, 2021
@@ -2264,6 +2264,7 @@ bonus:
         eyca:
           copy: Copy EYCA's card number
           pending: Find out more on EYCA
+          bottomSheet: Check EYCA discounts
       tos:
         link: Information on the processing of personal data
       information:
@@ -2278,6 +2279,8 @@ bonus:
         eycaCircuit: EYCA circuit
         eycaPending: "We're linking your Carta Giovani Nazionale to a EYCA Number."
         eycaError: "We had some issues with EYCA's systems."
+        eycaBottomSheetTitle: "EYCA card number"
+        eycaDescription: "Until the Until you turn 31, **your National Youth Card is a member of the EYCA circuit** (European Youth Card Association).\n\nBy entering your EYCA card number on e-commerce or showing your card at participating merchants, you will be able to get discounts and benefits on cultural activities, shopping, transportation, dining and lodging in the 38 European countries participating in the circuit."
         eycaNumber: Card number
         badge:
           active: Active

@@ -2294,6 +2294,7 @@ bonus:
         eyca:
           copy: Copia numero carta EYCA
           pending: Scopri di più su EYCA
+          bottomSheet: Vedi gli sconti EYCA
       tos:
         link: Informativa sul trattamento dei dati personali
       information:
@@ -2309,6 +2310,8 @@ bonus:
         eycaNumber: Numero carta
         eycaPending: "Stiamo associando la tua Carta Giovani Nazionale a un Numero EYCA."
         eycaError: "Abbiamo riscontrato problemi con i sistemi EYCA."
+        eycaBottomSheetTitle: "Numero di carta EYCA"
+        eycaDescription: "Fino al compimento dei 31 anni, **la tua Carta Giovani Nazionale aderisce al circuito EYCA** (European Youth Card Association).\n\nInserendo il numero di carta EYCA sugli e-commerce o mostrando la carta presso gli esercenti aderenti, potrai ottenere sconti e agevolazioni su attività culturali, negozi, trasporti, ristorazione e alloggio anche nei 38 paesi europei aderenti al circuito."
         badge:
           active: Attiva
           revoked: Annullata

@@ -22,40 +22,50 @@ import { CardPending } from "../../../../../../../definitions/cgn/CardPending";
 import EycaStatusDetailsComponent from "./EycaStatusDetailsComponent";
 import EycaPendingComponent from "./EycaPendingComponent";
 import EycaErrorComponent from "./EycaErrorComponent";
+import { useEycaInformationBottomSheet } from "./EycaInformationComponent";
 
 type Props = ReturnType<typeof mapStateToProps> &
   ReturnType<typeof mapDispatchToProps>;
 
-// This component is used to handle the rendering conditions of the three possible EYCA states for the user
-// ERROR => EycaErrorComponent
-// FOUND and PENDING => First we check the BE orchestrator status than shows EycaPendingComponent if card is pending and
-//                      orchestrator is not in an error state, unless we will show EycaErrorComponent
-// FOUND and detailed => EycaStatusDetailsComponent
 const EycaDetailComponent = (props: Props) => {
+  const { present } = useEycaInformationBottomSheet();
+
+  const openEycaBottomSheet = async () => {
+    await present();
+  };
+
   useEffect(() => {
     if (CardPending.is(props.eyca)) {
       props.getEycaActivationStatus();
     }
   }, [props.eyca]);
 
   const errorComponent = (
-    <EycaErrorComponent onRetry={props.requestEycaActivation} />
+    <EycaErrorComponent
+      onRetry={props.requestEycaActivation}
+      openBottomSheet={openEycaBottomSheet}
+    />
   );
 
   const renderComponentEycaStatus = (eyca: EycaCard): React.ReactNode => {
     switch (eyca.status) {
       case "ACTIVATED":
       case "REVOKED":
       case "EXPIRED":
-        return <EycaStatusDetailsComponent eycaCard={eyca} />;
+        return (
+          <EycaStatusDetailsComponent
+            eycaCard={eyca}
+            openBottomSheet={openEycaBottomSheet}
+          />
+        );
       case "PENDING":
         return fromNullable(props.eycaActivationStatus).fold(
           errorComponent,
           as =>
             as === "ERROR" || as === "NOT_FOUND" ? (
               errorComponent
             ) : (
-              <EycaPendingComponent />
+              <EycaPendingComponent openBottomSheet={openEycaBottomSheet} />
             )
         );
       default:

@@ -11,6 +11,7 @@ import { InfoBox } from "../../../../../../components/box/InfoBox";
 
 type Props = {
   onRetry: () => void;
+  openBottomSheet: () => void;
 };
 
 const styles = StyleSheet.create({
@@ -31,7 +32,12 @@ const EycaErrorComponent = (props: Props) => (
   <>
     <View style={[styles.rowBlock, styles.spaced]}>
       <H4>{I18n.t("bonus.cgn.detail.status.eycaCircuit")}</H4>
-      <IconFont name={"io-info"} size={TITLE_ICON_SIZE} color={IOColors.blue} />
+      <IconFont
+        name={"io-info"}
+        size={TITLE_ICON_SIZE}
+        color={IOColors.blue}
+        onPress={props.openBottomSheet}
+      />
     </View>
     <View spacer />
     <InfoBox iconName={"io-error"} alignedCentral iconSize={INFOBOX_ICON_SIZE}>

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { View } from "native-base";
+import Markdown from "../../../../../../components/ui/Markdown";
+import I18n from "../../../../../../i18n";
+import { useIOBottomSheet } from "../../../../../../utils/bottomSheet";
+import { openWebUrl } from "../../../../../../utils/url";
+import ButtonDefaultOpacity from "../../../../../../components/ButtonDefaultOpacity";
+import { Label } from "../../../../../../components/core/typography/Label";
+
+const EYCA_DISCOUNTS_URL = "https://www.eyca.org/discounts/it";
+
+/**
+ * this component shows information about EYCA card. It is included within a bottom sheet
+ * @constructor
+ */
+const EycaInformationComponent: React.FunctionComponent = () => {
+  const [isMarkdownloaded, setMarkdownloaded] = React.useState(false);
+  return (
+    <View>
+      <View spacer />
+      <View style={{ flex: 1 }}>
+        <Markdown avoidTextSelection onLoadEnd={() => setMarkdownloaded(true)}>
+          {I18n.t("bonus.cgn.detail.status.eycaDescription")}
+        </Markdown>
+        <View spacer large />
+        {isMarkdownloaded && (
+          <ButtonDefaultOpacity
+            style={{ width: "100%" }}
+            bordered
+            onPress={() => openWebUrl(EYCA_DISCOUNTS_URL)}
+            onPressWithGestureHandler
+          >
+            <Label color={"blue"}>
+              {I18n.t("bonus.cgn.detail.cta.eyca.bottomSheet")}
+            </Label>
+          </ButtonDefaultOpacity>
+        )}
+      </View>
+    </View>
+  );
+};
+
+export const useEycaInformationBottomSheet = () =>
+  useIOBottomSheet(
+    <EycaInformationComponent />,
+    I18n.t("bonus.cgn.detail.status.eycaBottomSheetTitle"),
+    420
+  );
@@ -10,6 +10,10 @@ import { Label } from "../../../../../../components/core/typography/Label";
 import { InfoBox } from "../../../../../../components/box/InfoBox";
 import { openWebUrl } from "../../../../../../utils/url";
 
+type Props = {
+  openBottomSheet: () => void;
+};
+
 const styles = StyleSheet.create({
   rowBlock: {
     flexDirection: "row"
@@ -23,11 +27,16 @@ const ICON_SIZE = 24;
 const EYCA_URL = "https://www.eyca.org";
 
 // Component that informs the user that the EYCA card requested is still in progress
-const EycaStatusDetailsComponent = () => (
+const EycaStatusDetailsComponent = (props: Props) => (
   <>
     <View style={[styles.rowBlock, styles.spaced]}>
       <H4>{I18n.t("bonus.cgn.detail.status.eycaCircuit")}</H4>
-      <IconFont name={"io-info"} size={ICON_SIZE} color={IOColors.blue} />
+      <IconFont
+        name={"io-info"}
+        size={ICON_SIZE}
+        color={IOColors.blue}
+        onPress={props.openBottomSheet}
+      />
     </View>
     <View spacer />
     <InfoBox iconName={"io-info"} alignedCentral iconSize={32}>

@@ -18,6 +18,7 @@ import { clipboardSetStringWithFeedback } from "../../../../../../utils/clipboar
 
 type Props = {
   eycaCard: EycaCardActivated | EycaCardExpired | EycaCardRevoked;
+  openBottomSheet: () => void;
 };
 
 const styles = StyleSheet.create({
@@ -94,7 +95,12 @@ const EycaStatusDetailsComponent = (props: Props) => {
         <View style={styles.rowBlock}>
           <H4>{I18n.t("bonus.cgn.detail.status.eyca")}</H4>
           <View hspacer small />
-          <IconFont name={"io-info"} size={ICON_SIZE} color={IOColors.blue} />
+          <IconFont
+            name={"io-info"}
+            size={ICON_SIZE}
+            color={IOColors.blue}
+            onPress={props.openBottomSheet}
+          />
         </View>
         {badgeByStatus()}
       </View>

@@ -35,11 +35,12 @@ import {
 import CgnCardComponent from "../components/detail/CgnCardComponent";
 import { useActionOnFocus } from "../../../../utils/hooks/useOnFocus";
 import { cgnDetails } from "../store/actions/details";
+import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay";
 import {
   isEycaDetailsLoading,
   isEycaEligible
 } from "../store/reducers/eyca/details";
-import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay";
+
 
 type Props = ReturnType<typeof mapStateToProps> &
   ReturnType<typeof mapDispatchToProps>;
@@ -102,28 +103,28 @@ const CgnDetailScreen = (props: Props): React.ReactElement => {
                 // ACTIVATED - EXPIRED - REVOKED
                 <CgnStatusDetail cgnDetail={props.cgnDetails} />
               )}
-            {(props.isEycaLoading || props.isEycaEligible) && (
+              {(props.isEycaLoading || props.isEycaEligible) && (
               <>
                 <ItemSeparatorComponent noPadded />
                 <View spacer />
                 <EycaDetailComponent />
               </>
             )}
-          </View>
-        </ScrollView>
-        <FooterWithButtons
-          type={"TwoButtonsInlineHalf"}
-          leftButton={cancelButtonProps(
-            props.navigateToMerchants,
-            I18n.t("bonus.cgn.detail.cta.buyers")
-          )}
-          rightButton={confirmButtonProps(
-            props.navigateToOtp,
-            I18n.t("bonus.cgn.detail.cta.otp")
-          )}
-        />
-      </SafeAreaView>
-    </BaseScreenComponent>
+            </View>
+          </ScrollView>
+          <FooterWithButtons
+            type={"TwoButtonsInlineHalf"}
+            leftButton={cancelButtonProps(
+              props.navigateToMerchants,
+              I18n.t("bonus.cgn.detail.cta.buyers")
+            )}
+            rightButton={confirmButtonProps(
+              props.navigateToOtp,
+              I18n.t("bonus.cgn.detail.cta.otp")
+            )}
+          />
+        </SafeAreaView>
+      </BaseScreenComponent>
     </LoadingSpinnerOverlay>
   );
 };
@@ -137,10 +138,10 @@ const mapStateToProps = (state: GlobalState) => ({
 });
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
-  loadCgnDetails: () => dispatch(cgnDetails.request()),
   loadEycaDetails: () => dispatch(cgnEycaStatus.request()),
+  loadCgnDetails: () => dispatch(cgnDetails.request()),
   navigateToMerchants: () => dispatch(navigateToCgnMerchantsList()),
-  navigateToOtp: () => dispatch(navigateToCgnDetailsOtp())
+  navigateToOtp: () => dispatch(navigateToCgnDetailsOtp()),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(CgnDetailScreen);