feat: New layout when a product is found (openfoodfacts#6073)

* New layout when a product is found

* Customizable fields

* Change types

packages/smooth_app/lib/cards/product_cards/smooth_product_base_card.dart

@@ -2,11 +2,11 @@ import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:provider/provider.dart';
+import 'package:smooth_app/generic_lib/buttons/smooth_button_with_arrow.dart';
 import 'package:smooth_app/generic_lib/design_constants.dart';
 import 'package:smooth_app/generic_lib/widgets/smooth_card.dart';
 import 'package:smooth_app/pages/product/hideable_container.dart';
 import 'package:smooth_app/pages/scan/carousel/scan_carousel.dart';
-import 'package:smooth_app/resources/app_icons.dart' as icons;
 import 'package:smooth_app/themes/smooth_theme.dart';
 import 'package:smooth_app/themes/smooth_theme_colors.dart';
 import 'package:smooth_app/themes/theme_provider.dart';
@@ -331,58 +331,9 @@ class ScanProductBaseCardButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final SmoothColorsThemeExtension theme =
-        context.extension<SmoothColorsThemeExtension>();
-
-    return Align(
-      alignment: AlignmentDirectional.centerEnd,
-      child: TextButton(
-        onPressed: onTap,
-        style: ButtonStyle(
-          backgroundColor: WidgetStatePropertyAll<Color>(theme.primarySemiDark),
-          padding: const WidgetStatePropertyAll<EdgeInsetsGeometry>(
-            EdgeInsetsDirectional.symmetric(
-              vertical: SMALL_SPACE,
-              horizontal: LARGE_SPACE,
-            ),
-          ),
-          shape: const WidgetStatePropertyAll<OutlinedBorder>(
-            RoundedRectangleBorder(
-              borderRadius: CIRCULAR_BORDER_RADIUS,
-            ),
-          ),
-        ),
-        child: Row(
-          mainAxisSize: MainAxisSize.min,
-          children: <Widget>[
-            Padding(
-              padding: const EdgeInsetsDirectional.only(bottom: 3.0),
-              child: Text(
-                text,
-                style: const TextStyle(
-                  color: Colors.white,
-                  fontSize: 15.0,
-                  fontWeight: FontWeight.bold,
-                ),
-              ),
-            ),
-            const SizedBox(width: MEDIUM_SPACE),
-            Container(
-              width: 20.0,
-              height: 20.0,
-              decoration: BoxDecoration(
-                shape: BoxShape.circle,
-                color: theme.orange,
-              ),
-              padding: const EdgeInsetsDirectional.all(VERY_SMALL_SPACE),
-              child: const icons.Arrow.right(
-                color: Colors.white,
-                size: 12.0,
-              ),
-            ),
-          ],
-        ),
-      ),
+    return SmoothButtonWithArrow(
+      text: text,
+      onTap: onTap,
     );
   }
 }

packages/smooth_app/lib/generic_lib/buttons/smooth_button_with_arrow.dart

@@ -0,0 +1,86 @@
+import 'package:flutter/material.dart';
+import 'package:smooth_app/generic_lib/design_constants.dart';
+import 'package:smooth_app/resources/app_icons.dart' as icons;
+import 'package:smooth_app/themes/smooth_theme.dart';
+import 'package:smooth_app/themes/smooth_theme_colors.dart';
+
+/// A button with the following layout:
+///   TEXT →
+class SmoothButtonWithArrow extends StatelessWidget {
+  const SmoothButtonWithArrow({
+    required this.text,
+    required this.onTap,
+    this.padding,
+    this.backgroundColor,
+    this.textColor,
+    this.arrowColor,
+    super.key,
+  });
+
+  final String text;
+  final VoidCallback? onTap;
+  final EdgeInsetsGeometry? padding;
+  final Color? backgroundColor;
+  final Color? textColor;
+  final Color? arrowColor;
+
+  @override
+  Widget build(BuildContext context) {
+    final SmoothColorsThemeExtension theme =
+        context.extension<SmoothColorsThemeExtension>();
+
+    return Align(
+      alignment: AlignmentDirectional.centerEnd,
+      child: TextButton(
+        onPressed: onTap,
+        style: ButtonStyle(
+          backgroundColor: WidgetStatePropertyAll<Color>(
+            backgroundColor ?? theme.primarySemiDark,
+          ),
+          padding: WidgetStatePropertyAll<EdgeInsetsGeometry>(
+            padding ??
+                const EdgeInsetsDirectional.symmetric(
+                  vertical: SMALL_SPACE,
+                  horizontal: LARGE_SPACE,
+                ),
+          ),
+          shape: const WidgetStatePropertyAll<OutlinedBorder>(
+            RoundedRectangleBorder(
+              borderRadius: CIRCULAR_BORDER_RADIUS,
+            ),
+          ),
+        ),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: <Widget>[
+            Padding(
+              padding: const EdgeInsetsDirectional.only(bottom: 3.0),
+              child: Text(
+                text,
+                style: TextStyle(
+                  color: textColor ?? Colors.white,
+                  fontSize: 15.0,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+            ),
+            const SizedBox(width: MEDIUM_SPACE),
+            Container(
+              width: 20.0,
+              height: 20.0,
+              decoration: BoxDecoration(
+                shape: BoxShape.circle,
+                color: arrowColor ?? theme.orange,
+              ),
+              padding: const EdgeInsetsDirectional.all(VERY_SMALL_SPACE),
+              child: icons.Arrow.right(
+                color: textColor ?? Colors.white,
+                size: 12.0,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

packages/smooth_app/lib/helpers/haptic_feedback_helper.dart

@@ -49,6 +49,16 @@ class SmoothHapticFeedback {
     return HapticFeedback.heavyImpact();
   }
 
+  static Future<void> tadam() async {
+    if (!(await _areHapticFeedbackEnabled())) {
+      return;
+    }
+
+    await HapticFeedback.heavyImpact();
+    await Future<void>.delayed(const Duration(milliseconds: 150));
+    return HapticFeedback.heavyImpact();
+  }
+
   static Future<bool> _areHapticFeedbackEnabled() async {
     return UserPreferences.getUserPreferences()
         .then((UserPreferences userPreferences) {

packages/smooth_app/lib/l10n/app_en.arb

@@ -562,10 +562,15 @@
     "@add_product_information_button_label": {},
     "new_product": "New Product",
     "@new_product": {},
-    "new_product_dialog_title": "You have just found a new product!",
-    "@new_product_dialog_title": {
-        "description": "Please keep it short, like 50 characters. Title of the dialog when the user searched for an unknown barcode."
+    "new_product_found_title": "New product found!",
+    "@new_product_found_title": {
+        "description": "Title of a dialog that informs the user that a barcode doesn't exist in the database"
     },
+    "new_product_found_text": "Our collaborative database contains more than **3 million products**, but this barcode doesn't exist: ",
+    "@new_product_found_text": {
+        "description": "Please keep the ** syntax to make the text bold"
+    },
+    "new_product_found_button": "Add this product",
     "new_product_leave_title": "Leave this page?",
     "@new_product_leave_title": {
         "description": "Alert dialog title when a user landed on the 'add new product' page, didn't input anything and tried to leave the page."
@@ -574,14 +579,6 @@
     "@new_product_leave_message": {
         "description": "Alert dialog message when a user landed on the 'add new product' page, didn't input anything and tried to leave the page."
     },
-    "new_product_dialog_description": "Please take photos of the packaging to add this product to our common database",
-    "@new_product_dialog_description": {
-        "description": "Please keep it short, like less than 100 characters. Explanatory text of the dialog when the user searched for an unknown barcode."
-    },
-    "new_product_dialog_illustration_description": "An illustration with unknown Nutri-Score and Eco-Score",
-    "@new_product_dialog_illustration_description": {
-        "description": "A description for accessibility of two images side by side: a Nutri-Score and an EcoScore."
-    },
     "front_packaging_photo_button_label": "Front packaging photo",
     "@front_packaging_photo_button_label": {},
     "confirm_front_packaging_photo_button_label": "Confirm upload of Front packaging photo",