feat(Carta Giovani Nazionale): [#176959185] Introduces the screen to …

…check on Merchant detail conventioned to CGN (#2886) * [#177059013] Implements Discount item for Merchant detail screen * [#177059013] minor fixes on discountItem * [#176959185] Adds the CGN MErchant detail screen component * [#177059013] refactoring * [#177059013] improve * [#177059013] fix UI styles and composition * [#176959185] from string to number Co-authored-by: Matteo Boschi <[email protected]>
pagopa · Mar 11, 2021 · db50f36 · db50f36
1 parent a211fa5
commit db50f36
Show file tree

Hide file tree

Showing 10 changed files with 269 additions and 72 deletions.
diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -1,5 +1,5 @@
 ---
-date: 
+date:
   formats:
     default: "%d/%m/%Y"
     short: "%d %B"
@@ -377,8 +377,8 @@ profile:
       preferred_language:
         title: Favourite language
         subtitle: In which language do you want to use the application?
-        alert: 
-          title: Do you want to change the language to 
+        alert:
+          title: Do you want to change the language to
           subtitle: You'll need to restart the application to make this happen
         not_selected: Not selected
     empty:
@@ -754,7 +754,7 @@ wallet:
   incoming:
     title: "Upcoming"
     message: "This payment method will be available in a future release"
-  featured: Highlighted 
+  featured: Highlighted
   creditCard:
     onboardingAttempts:
       title: Attempts to onboard payment method
@@ -1117,7 +1117,7 @@ wallet:
       shortName: "Card"
       description: The card issued by your bank that you normally use to pay in stores and online
       pagoPaCapability:
-        title: In app payments 
+        title: In app payments
         description: Make payments to the public administration through pagoPA
         active: Active
         arriving: Arriving
@@ -1146,7 +1146,7 @@ wallet:
     bancomatPay:
       name: BANCOMAT Pay
       description: Pay with BANCOMAT Pay
-    postepayApp: 
+    postepayApp:
       name: Postepay
       description: your Postepay app
     postepay:
@@ -1162,7 +1162,7 @@ wallet:
   addCardTitle: Card details
   dummyCard:
     labels:
-      holder: 
+      holder:
         label: Card holder
         description:
           base: "Enter as shown on the card"
@@ -1260,21 +1260,21 @@ wallet:
     fallback:
       title: "Sorry, an unexpected error has occurred"
       description: "No charges were made."
-    code1: 
+    code1:
       title: "Sorry, an unexpected error has occurred"
       description: "No charges were made."
-    code2: 
+    code2:
       title: "Authorization declined"
       description: "Your bank did not authorize the transaction. Please make sure you enter all the security codes required by your bank correctly."
-    code4: 
+    code4:
       title: "Sorry, the session has expired"
       description: "No charges were made. For your safety, you have 5 minutes to complete the payment."
-    code7: 
+    code7:
       title: "There's a problem with your card"
       description: "No charges were made. For more information, contact your bank."
-    code8: 
+    code8:
       title: "The operation was canceled"
-    code10: 
+    code10:
       title: "Authorization declined"
       description: "You have probably reached your card limit. Check with your bank before trying again."
     addCreditCard:
@@ -1344,19 +1344,19 @@ messages:
     payment:
       expired: Payment expired
       paid: This notice is paid. Show the receipt in your
-      addMemo: 
-          block1: Add a reminder for the 
+      addMemo:
+          block1: Add a reminder for the
           block2: at
       expiringOrValidAlert:
         block1: This notice will expire on
       expiredAlert:
         block1: This notice expired at
         block2: on
-    prescription:  
+    prescription:
       addMemo: This prescription expires the
       expiringAlert: This prescription expires today
       expiredAlert:
-          block1: The prescription expired at 
+          block1: The prescription expired at
           block2: "on"
     pay: Pay € {{amount}}
     onlyPay: Pay
@@ -2107,7 +2107,7 @@ bonus:
           moneyTransfer: "By {{date}} you will receive the transfer on the IBAN you entered."
           inactivePeriodBody: "You will be able to start collecting valid transactions starting from {{date}}"
           label:
-            one: "1 valid transaction" 
+            one: "1 valid transaction"
             other: "{{transactions}} valid transactions"
         ranking:
           title: "Your position"
@@ -2131,7 +2131,7 @@ bonus:
           text2: "at least one payment method "
           text3: "at Cashback to start collecting necessary transactions"
         detail:
-          empty: 
+          empty:
             text1: "There are no valid transactions yet."
             text2: "Check back in the next few days!"
           summary:
@@ -2219,6 +2219,14 @@ bonus:
     merchantsList:
       navigationTitle: View merchants
       screenTitle: Select the merchant where you want to buy something
+    merchantDetail:
+      title:
+        deals: Discounts
+        description: Description
+        services: Services
+        hours: Working Hours
+      cta:
+        label: Navigate to merchant website
     cta:
       activeBonus: Activate your Carta Giovani
       goToDetail: View your Carta Giovani

diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -1,5 +1,5 @@
 ---
-date: 
+date:
   formats:
     default: "%d/%m/%Y"
     short: "%d %B"
@@ -937,7 +937,7 @@ wallet:
           title: "Non riusciamo a contattare il server"
           body: "Siamo al lavoro per risolvere il problema."
   alert:
-    supportedCardPageLinkError: Si è verificato un errore durante l'apertura della pagina di riferimento per le carte supportate. 
+    supportedCardPageLinkError: Si è verificato un errore durante l'apertura della pagina di riferimento per le carte supportate.
     msgErrorUpdateApp: "Si è verificato un errore durante l'apertura dello store delle app"
     titlePagoPaUpdateApp: Aggiornamento richiesto
     messagePagoPaUpdateApp: "IO introduce spesso piccole migliorie e nuove funzioni: per continuare ad usare il portafoglio è necessario aggiornare l'applicazione all'ultima versione."
@@ -1170,7 +1170,7 @@ wallet:
     bancomatPay:
       name: BANCOMAT Pay
       description: Abbina il tuo account BANCOMAT Pay
-    postepayApp: 
+    postepayApp:
       name: Postepay
       description: la tua app Postepay
     postepay:
@@ -1285,21 +1285,21 @@ wallet:
     fallback:
       title: "Spiacenti, si è verificato un errore imprevisto"
       description: "Non è stato addebitato alcun importo."
-    code1: 
+    code1:
       title: "Spiacenti, si è verificato un errore imprevisto"
       description: "Non è stato addebitato alcun importo."
-    code2: 
+    code2:
       title: "Autorizzazione negata"
       description: "La tua banca non ha autorizzato l’operazione. Controlla di aver inserito correttamente i vari codici richiesti dalla tua banca."
-    code4: 
+    code4:
       title: "Spiacenti, la sessione è scaduta"
       description: "Non è stato addebitato alcun importo. Per la tua sicurezza, hai a disposizione 5 minuti per completare l’operazione."
-    code7: 
+    code7:
       title: "C’è un problema con la tua carta"
       description: "Non è stato addebitato alcun importo. Per maggiori informazioni, contatta la tua banca."
-    code8: 
+    code8:
       title: "L’operazione è stata annullata"
-    code10: 
+    code10:
       title: "Autorizzazione negata"
       description: "Probabilmente hai superato il massimale della tua carta. Verifica con la tua banca prima di riprovare."
     addCreditCard:
@@ -2161,7 +2161,7 @@ bonus:
           text2: "almeno un metodo di pagamento "
           text3: "al Cashback per iniziare a collezionare le transazioni necessarie"
         detail:
-          empty: 
+          empty:
             text1: "Non ci sono ancora transazioni valide."
             text2: "Controlla di nuovo nei prossimi giorni!"
           summary:
@@ -2249,6 +2249,14 @@ bonus:
     merchantsList:
       navigationTitle: Visualizza esercenti
       screenTitle: Seleziona l’esercente presso cui vuoi effettuare il tuo acquisto
+    merchantDetail:
+      title:
+        deals: Offerte
+        description: Descrizione
+        services: Servizi
+        hours: Orari
+      cta:
+        label: Vai al sito dell'esercente
     cta:
       activeBonus: Attiva la tua Carta Giovani
       goToDetail: Visualizza la Carta Giovani

diff --git a/ts/features/bonus/cgn/__mock__/availableMerchantDetail.ts b/ts/features/bonus/cgn/__mock__/availableMerchantDetail.ts
@@ -0,0 +1,55 @@
+export type TmpDiscountType = {
+  category: string;
+  title: string;
+  description: string;
+  validityDescription: string;
+  discountCode?: string;
+  conditions: string;
+  value: number;
+};
+
+export type TmpMerchantDetail = {
+  name: string;
+  cover: string;
+  location: string;
+  url: string;
+  discounts: ReadonlyArray<TmpDiscountType>;
+  description: string;
+  availableServices: string;
+  workingHours?: string;
+};
+
+export const sampleMerchant: TmpMerchantDetail = {
+  name: "Nome teatro",
+  url: "https://google.com",
+  cover: "https://picsum.photos/343/230",
+  location: "Via Roma 1, 00000, Roma",
+  description:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin dolor ut lacus faucibus lobortis.",
+  availableServices:
+    "Tecnologia, Libri, Casa, Cura della persona, Abbigliamento, Giochi, Auto e Moto",
+  workingHours: "Lun, Mar, Mer, Gio, Dom 9:00 - 23:00 Ven, Sab 9:00 - 00:00",
+  discounts: [
+    {
+      category: "test category",
+      title: "Abbonamento stagione danza",
+      description:
+        "Acquista un abbonamento per tutti gli spettacoli di danza previsti per la stagione 2021-22.",
+      validityDescription: "Dal 15 Marzo al 15 Maggio 2021.",
+      discountCode: "123 456 789 10",
+      conditions:
+        "Lo sconto del 30% si applica sull’acquisto di un solo abbonamento. L’offerta è nominale e non è rimborsabile.",
+      value: 30
+    },
+    {
+      category: "test category 2",
+      title: "Abbonamento stagione danza",
+      description:
+        "Acquista un abbonamento per tutti gli spettacoli di danza previsti per la stagione 2021-22.",
+      validityDescription: "Dal 15 Marzo al 15 Maggio 2021.",
+      conditions:
+        "Lo sconto del 30% si applica sull’acquisto di un solo abbonamento. L’offerta è nominale e non è rimborsabile.",
+      value: 30
+    }
+  ]
+};
diff --git a/ts/features/bonus/cgn/components/merchants/CgnMerchantListItem.tsx b/ts/features/bonus/cgn/components/merchants/CgnMerchantListItem.tsx
@@ -6,6 +6,7 @@ import { H2 } from "../../../../../components/core/typography/H2";
 import { Label } from "../../../../../components/core/typography/Label";
 import IconFont from "../../../../../components/ui/IconFont";
 import { IOColors } from "../../../../../components/core/variables/IOColors";
+import TouchableDefaultOpacity from "../../../../../components/TouchableDefaultOpacity";
 
 type Props = {
   // FIXME change the props when merchant definition is available
@@ -30,7 +31,10 @@ const styles = StyleSheet.create({
  * @constructor
  */
 const CgnMerchantListItem: React.FunctionComponent<Props> = (props: Props) => (
-  <View style={styles.verticalPadding}>
+  <TouchableDefaultOpacity
+    style={styles.verticalPadding}
+    onPress={props.onPress}
+  >
     <View style={styles.row}>
       {/* TODO when available and defined the icon name should be defined through a map of category codes */}
       <IconFont name={"io-books"} size={22} color={IOColors.bluegrey} />
@@ -44,7 +48,7 @@ const CgnMerchantListItem: React.FunctionComponent<Props> = (props: Props) => (
     <Label weight={"Regular"} color={"bluegrey"}>
       {props.location}
     </Label>
-  </View>
+  </TouchableDefaultOpacity>
 );
 
 export default CgnMerchantListItem;
diff --git a/ts/features/bonus/cgn/components/merchants/CgnMerchantsDiscountItem.tsx b/ts/features/bonus/cgn/components/merchants/CgnMerchantsDiscountItem.tsx
@@ -13,7 +13,7 @@ import { IOStyles } from "../../../../../components/core/variables/IOStyles";
 type Props = {
   category: string;
   description: string;
-  value: string;
+  value: number;
 };
 
 const PERCENTAGE_SYMBOL = "%";
@@ -62,7 +62,7 @@ const CgnMerchantDiscountItem: React.FunctionComponent<Props> = (
               <H3 weight={"Bold"} color={"white"} style={styles.percentage}>
                 {/* avoid overflow */}
                 {WithinRangeInteger(0, 100)
-                  .decode(parseInt(props.value, 10))
+                  .decode(props.value)
                   .map(v => v.toString())
                   .getOrElse("-")}
                 <H5 weight={"SemiBold"} color={"white"}>

diff --git a/ts/features/bonus/cgn/navigation/actions.ts b/ts/features/bonus/cgn/navigation/actions.ts
@@ -52,3 +52,8 @@ export const navigateToCgnMerchantsList = () =>
   NavigationActions.navigate({
     routeName: CGN_ROUTES.MERCHANTS.LIST
   });
+
+export const navigateToCgnMerchantDetail = () =>
+  NavigationActions.navigate({
+    routeName: CGN_ROUTES.MERCHANTS.DETAIL
+  });
diff --git a/ts/features/bonus/cgn/navigation/navigator.ts b/ts/features/bonus/cgn/navigation/navigator.ts
@@ -8,6 +8,7 @@ import CgnActivationIneligibleScreen from "../screens/activation/CgnActivationIn
 import CgnAlreadyActiveScreen from "../screens/activation/CgnAlreadyActiveScreen";
 import CgnDetailScreen from "../screens/CgnDetailScreen";
 import MerchantsListScreen from "../screens/merchants/CgnMerchantsListScreen";
+import CgnMerchantDetailScreen from "../screens/merchants/CgnMerchantDetailScreen";
 import CGN_ROUTES from "./routes";
 
 const CgnNavigator = createStackNavigator(
@@ -36,6 +37,9 @@ const CgnNavigator = createStackNavigator(
     [CGN_ROUTES.MERCHANTS.LIST]: {
       screen: MerchantsListScreen
     },
+    [CGN_ROUTES.MERCHANTS.DETAIL]: {
+      screen: CgnMerchantDetailScreen
+    },
     [CGN_ROUTES.DETAILS]: {
       screen: CgnDetailScreen
     }