Merge branch 'master' into IOAPPX-453-add-new-appearance-page

google-services-dev.json

@@ -0,0 +1,29 @@
+{
+  "project_info": {
+    "project_number": "100508770872",
+    "project_id": "io---app-dev",
+    "storage_bucket": "io---app-dev.firebasestorage.app"
+  },
+  "client": [
+    {
+      "client_info": {
+        "mobilesdk_app_id": "1:100508770872:android:3bae755a9e0015bde77ccd",
+        "android_client_info": {
+          "package_name": "it.pagopa.io.app"
+        }
+      },
+      "oauth_client": [],
+      "api_key": [
+        {
+          "current_key": "AIzaSyDxRvOra_wlultFBZc4D8nbtJ2fyNzUCpk"
+        }
+      ],
+      "services": {
+        "appinvite_service": {
+          "other_platform_oauth_client": []
+        }
+      }
+    }
+  ],
+  "configuration_version": "1"
+}

locales/en/index.yml

@@ -755,6 +755,7 @@ authentication:
       title: We can't find the CieID app
       description: To login, you must have the app installed on your device.
       primary_action_label: Get the app
+      link_error: We could not direct you to the store. Open it manually and search for CieID
   cie:
     genericTitle: Login with CIE
     cie: CIE

locales/it/index.yml

@@ -755,6 +755,7 @@ authentication:
       title: Non riusciamo a trovare l'app CieID
       description: Per accedere, devi avere l'app installata sul tuo dispositivo.
       primary_action_label: Scarica CieID
+      link_error: Non siamo riusciti a indirizzarti allo store. Aprilo manualmente e cerca CieID
   cie:
     genericTitle: Entra con CIE
     cie: CIE

scripts/generate-api-models.sh

@@ -60,6 +60,6 @@ for elem in "${apisNoClient[@]}"; do
 done
 wait
 
-cp mock-google-services.json ./android/app/google-services.json
+cp google-services-dev.json ./android/app/google-services.json
 
 yarn generate:locales

ts/components/ui/BannerErrorState.tsx

@@ -67,7 +67,7 @@ export type BannerErrorStateProps = BaseBannerErrorStateProps &
  */
 export const BannerErrorState = ({
   viewRef,
-  icon,
+  icon = "warningFilled",
   label,
   actionText,
   onPress,

ts/features/bonus/cgn/components/merchants/CgnMerchantsDiscountItem.tsx

@@ -7,7 +7,7 @@ import CGN_ROUTES from "../../navigation/routes";
 import { CgnDetailsParamsList } from "../../navigation/params";
 import { useIODispatch } from "../../../../../store/hooks";
 import { selectMerchantDiscount } from "../../store/actions/merchants";
-import { CgnModuleDiscount } from "./CgnModuleDiscount";
+import { ModuleCgnDiscount } from "./ModuleCgnDiscount";
 
 type Props = {
   discount: Discount;
@@ -38,7 +38,7 @@ export const CgnMerchantDiscountItem: React.FunctionComponent<Props> = ({
 
   return (
     <View style={styles.container}>
-      <CgnModuleDiscount onPress={onDiscountPress} discount={discount} />
+      <ModuleCgnDiscount onPress={onDiscountPress} discount={discount} />
     </View>
   );
 };

ts/features/bonus/cgn/components/merchants/CgnModuleDiscount.tsx → ts/features/bonus/cgn/components/merchants/ModuleCgnDiscount.tsx

@@ -1,14 +1,14 @@
 import {
   Badge,
   H6,
-  HSpacer,
+  HStack,
   IOColors,
   IOModuleStyles,
   IOStyles,
   Icon,
   Tag,
-  VSpacer,
-  useIOExperimentalDesign,
+  VStack,
+  useIOTheme,
   useScaleAnimation
 } from "@pagopa/io-app-design-system";
 import * as O from "fp-ts/lib/Option";
@@ -21,7 +21,7 @@ import I18n from "../../../../../i18n";
 import { getCategorySpecs } from "../../utils/filters";
 import { isValidDiscount, normalizedDiscountPercentage } from "./utils";
 
-type Props = {
+export type ModuleCgnDiscount = {
   onPress: () => void;
   discount: Discount;
 };
@@ -39,6 +39,7 @@ const styles = StyleSheet.create({
     borderWidth: 1
   }
 });
+
 type CategoryTagProps = {
   category: ProductCategory;
 };
@@ -47,24 +48,19 @@ export const CategoryTag = ({ category }: CategoryTagProps) => {
   const categorySpecs = getCategorySpecs(category);
 
   return O.isSome(categorySpecs) ? (
-    <>
-      <View>
-        <Tag
-          text={I18n.t(categorySpecs.value.nameKey)}
-          variant="custom"
-          icon={{
-            name: categorySpecs.value.icon,
-            color: "lightGrey"
-          }}
-        />
-        <VSpacer size={4} />
-      </View>
-      <HSpacer size={4} />
-    </>
+    <Tag
+      text={I18n.t(categorySpecs.value.nameKey)}
+      variant="custom"
+      icon={{
+        name: categorySpecs.value.icon,
+        color: "lightGrey"
+      }}
+    />
   ) : null;
 };
-export const CgnModuleDiscount = ({ onPress, discount }: Props) => {
-  const { isExperimental } = useIOExperimentalDesign();
+
+export const ModuleCgnDiscount = ({ onPress, discount }: ModuleCgnDiscount) => {
+  const theme = useIOTheme();
   const { onPressIn, onPressOut, scaleAnimatedStyle } =
     useScaleAnimation("medium");
 
@@ -92,37 +88,37 @@ export const CgnModuleDiscount = ({ onPress, discount }: Props) => {
             { alignItems: "center", justifyContent: "space-between" }
           ]}
         >
-          <View style={IOStyles.flex}>
-            <View style={[IOStyles.flex, IOStyles.row]}>
-              {discount.isNew && (
-                <>
+          <VStack space={8} style={{ flexShrink: 1 }}>
+            {(discount.discount || discount.isNew) && (
+              <HStack space={8} style={{ flexWrap: "wrap" }}>
+                {discount.isNew && (
                   <Badge
                     variant="purple"
                     text={I18n.t("bonus.cgn.merchantsList.news")}
                   />
-                  <HSpacer size={8} />
-                </>
-              )}
-              {isValidDiscount(discount.discount) && (
-                <Badge
-                  variant="purple"
-                  outline
-                  text={`-${normalizedDiscountPercentage(discount.discount)}%`}
-                />
-              )}
-            </View>
-            <VSpacer size={8} />
+                )}
+                {isValidDiscount(discount.discount) && (
+                  <Badge
+                    variant="purple"
+                    outline
+                    text={`-${normalizedDiscountPercentage(
+                      discount.discount
+                    )}%`}
+                  />
+                )}
+              </HStack>
+            )}
+
             <H6>{discount.name}</H6>
-            <VSpacer size={8} />
-            <View style={[{ flexWrap: "wrap" }, IOStyles.row]}>
+            <HStack space={4} style={{ flexWrap: "wrap" }}>
               {discount.productCategories.map(categoryKey => (
                 <CategoryTag key={categoryKey} category={categoryKey} />
               ))}
-            </View>
-          </View>
+            </HStack>
+          </VStack>
           <Icon
             name="chevronRightListItem"
-            color={isExperimental ? "blueIO-500" : "blue"}
+            color={theme["interactiveElem-default"]}
             size={24}
           />
         </View>

ts/features/bonus/cgn/components/merchants/___tests___/CgnModuleDiscount.test.tsx → ts/features/bonus/cgn/components/merchants/___tests___/ModuleCgnDiscount.test.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { Discount } from "../../../../../../../definitions/cgn/merchants/Discount";
 import { ProductCategoryEnum } from "../../../../../../../definitions/cgn/merchants/ProductCategory";
 import I18n from "../../../../../../i18n";
-import { CgnModuleDiscount } from "../CgnModuleDiscount";
+import { ModuleCgnDiscount } from "../ModuleCgnDiscount";
 
 describe("CgnModuleDiscount", () => {
   const discount: Discount = {
@@ -27,7 +27,7 @@ describe("CgnModuleDiscount", () => {
 
   it("should render correctly", () => {
     const { getByText } = render(
-      <CgnModuleDiscount onPress={onPressMock} discount={discount} />
+      <ModuleCgnDiscount onPress={onPressMock} discount={discount} />
     );
 
     expect(getByText(I18n.t("bonus.cgn.merchantsList.news"))).toBeTruthy();
@@ -37,7 +37,7 @@ describe("CgnModuleDiscount", () => {
 
   it("should call onPress when pressed", () => {
     const { getByRole } = render(
-      <CgnModuleDiscount onPress={onPressMock} discount={discount} />
+      <ModuleCgnDiscount onPress={onPressMock} discount={discount} />
     );
     fireEvent.press(getByRole("button"));
     expect(onPressMock).toHaveBeenCalled();

ts/features/bonus/cgn/components/merchants/discount/CgnDiscountHeader.tsx

@@ -1,6 +1,7 @@
 import {
   Badge,
   H3,
+  HStack,
   IOColors,
   IOStyles,
   VSpacer
@@ -10,7 +11,7 @@ import React from "react";
 import { StyleSheet, View } from "react-native";
 import { Discount } from "../../../../../../../definitions/cgn/merchants/Discount";
 import I18n from "../../../../../../i18n";
-import { CategoryTag } from "../CgnModuleDiscount";
+import { CategoryTag } from "../ModuleCgnDiscount";
 import { isValidDiscount, normalizedDiscountPercentage } from "../utils";
 
 type CgnDiscountHeaderProps = {
@@ -65,11 +66,11 @@ export const CgnDiscountHeader = ({
         )}
         <H3>{name}</H3>
         <VSpacer size={12} />
-        <View style={[{ flexWrap: "wrap" }, IOStyles.row]}>
+        <HStack space={4} style={{ flexWrap: "wrap" }}>
           {productCategories.map(categoryKey => (
             <CategoryTag key={categoryKey} category={categoryKey} />
           ))}
-        </View>
+        </HStack>
       </View>
     </View>
   );

ts/features/cie/__tests__/CieIdNotInstalled.test.tsx

@@ -1,15 +1,18 @@
-import { Linking, Platform } from "react-native";
+import { Platform } from "react-native";
 import { fireEvent, render } from "@testing-library/react-native";
 import React from "react";
 import CieIdNotInstalled, {
   CIE_ID_ANDROID_COLL_LINK,
   CIE_ID_ANDROID_LINK,
   CIE_ID_IOS_LINK
 } from "../components/CieIdNotInstalled";
+import * as urlUtils from "../../../utils/url";
 
 const UAT_ENV_ENABLE_STATES = [true, false];
 
 const mockPopToTop = jest.fn();
+const mockOpenUrl = jest.spyOn(urlUtils, "openWebUrl");
+const anyFunction = expect.any(Function);
 
 jest.mock("@react-navigation/native", () => ({
   ...jest.requireActual("@react-navigation/native"),
@@ -28,15 +31,13 @@ describe(CieIdNotInstalled, () => {
 
   describe("Behavior on iOS", () => {
     UAT_ENV_ENABLE_STATES.forEach(uatState => {
-      it("Should open CIE_ID_IOS_LINK", () => {
+      it("Should open CIE_ID_IOS_LINK", async () => {
         const { getByTestId } = render(<CieIdNotInstalled isUat={uatState} />);
 
         const openStore = getByTestId("cie-id-not-installed-open-store");
         fireEvent.press(openStore);
 
-        expect(jest.spyOn(Linking, "openURL")).toHaveBeenCalledWith(
-          CIE_ID_IOS_LINK
-        );
+        expect(mockOpenUrl).toHaveBeenCalledWith(CIE_ID_IOS_LINK, anyFunction);
         expect(mockPopToTop).not.toHaveBeenCalled();
       });
     });
@@ -50,8 +51,9 @@ describe(CieIdNotInstalled, () => {
       const openStore = getByTestId("cie-id-not-installed-open-store");
       fireEvent.press(openStore);
 
-      expect(jest.spyOn(Linking, "openURL")).toHaveBeenCalledWith(
-        CIE_ID_ANDROID_LINK
+      expect(mockOpenUrl).toHaveBeenCalledWith(
+        CIE_ID_ANDROID_LINK,
+        anyFunction
       );
       expect(mockPopToTop).not.toHaveBeenCalled();
     });
@@ -63,8 +65,9 @@ describe(CieIdNotInstalled, () => {
       const openStore = getByTestId("cie-id-not-installed-open-store");
       fireEvent.press(openStore);
 
-      expect(jest.spyOn(Linking, "openURL")).toHaveBeenCalledWith(
-        CIE_ID_ANDROID_COLL_LINK
+      expect(mockOpenUrl).toHaveBeenCalledWith(
+        CIE_ID_ANDROID_COLL_LINK,
+        anyFunction
       );
       expect(mockPopToTop).not.toHaveBeenCalled();
     });
@@ -76,7 +79,7 @@ describe(CieIdNotInstalled, () => {
       const popToTop = getByTestId("cie-id-not-installed-pop-to-top");
       fireEvent.press(popToTop);
 
-      expect(jest.spyOn(Linking, "openURL")).not.toHaveBeenCalled();
+      expect(mockOpenUrl).not.toHaveBeenCalled();
       expect(mockPopToTop).toHaveBeenCalledTimes(1);
     });
   });