fix: Correctly format commas between product brands

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

@@ -28,7 +28,7 @@ class ProductTitleCard extends StatelessWidget {
     final ThemeData themeData = Theme.of(context);
     final String subtitleText;
     final Widget trailingWidget;
-    final String brands = product.brands ?? appLocalizations.unknownBrand;
+    final String brands = getProductBrands(product, appLocalizations);
     final String quantity = product.quantity ?? '';
 
     if (isRemovable && !isSelectable) {

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

@@ -107,7 +107,7 @@ class SmoothProductCardFound extends StatelessWidget {
                           style: themeData.textTheme.headline4,
                         ),
                         Text(
-                          product.brands ?? appLocalizations.unknownBrand,
+                          getProductBrands(product, appLocalizations),
                           overflow: TextOverflow.ellipsis,
                           style: themeData.textTheme.subtitle1,
                         ),

packages/smooth_app/lib/helpers/product_cards_helper.dart

@@ -9,6 +9,24 @@ import 'package:smooth_app/generic_lib/widgets/smooth_card.dart';
 String getProductName(Product product, AppLocalizations appLocalizations) =>
     product.productName ?? appLocalizations.unknownProductName;
 
+String getProductBrands(Product product, AppLocalizations appLocalizations) {
+  final String? brands = product.brands;
+  if (brands == null) {
+    return appLocalizations.unknownBrand;
+  } else {
+    return formatProductBrands(brands, appLocalizations);
+  }
+}
+
+/// Correctly format word separators between words (e.g. comma in English)
+String formatProductBrands(String brands, AppLocalizations appLocalizations) {
+  final String separator = appLocalizations.word_separator;
+  final String separatorChar =
+      RegExp.escape(appLocalizations.word_separator_char);
+  final RegExp regex = RegExp('\\s*$separatorChar\\s*');
+  return brands.replaceAll(regex, separator);
+}
+
 /// Padding to be used while building the SmoothCard on any Product card.
 const EdgeInsets SMOOTH_CARD_PADDING = EdgeInsets.symmetric(
   horizontal: MEDIUM_SPACE,

packages/smooth_app/lib/l10n/app_en.arb

@@ -1678,5 +1678,13 @@
     "upload_image": "Upload Photo",
     "@upload_image": {
         "description": "Message shown on asking to upload image"
+    },
+    "word_separator_char": ",",
+    "@word_separator_char": {
+        "description": "Word separator character. In English language, this is a comma: ','"
+    },
+    "word_separator": ", ",
+    "@word_separator": {
+        "description": "Word separator string. In English, this is a comma followed by a space: ', '"
     }
 }

packages/smooth_app/lib/pages/product/add_basic_details_page.dart

@@ -11,6 +11,7 @@ import 'package:smooth_app/generic_lib/design_constants.dart';
 import 'package:smooth_app/generic_lib/dialogs/smooth_alert_dialog.dart';
 import 'package:smooth_app/generic_lib/duration_constants.dart';
 import 'package:smooth_app/generic_lib/widgets/smooth_text_form_field.dart';
+import 'package:smooth_app/helpers/product_cards_helper.dart';
 import 'package:smooth_app/widgets/smooth_scaffold.dart';
 
 class AddBasicDetailsPage extends StatefulWidget {
@@ -34,30 +35,29 @@ class _AddBasicDetailsPageState extends State<AddBasicDetailsPage> {
   final double _heightSpace = LARGE_SPACE;
   final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
   late Product _product;
-
-  @override
-  void initState() {
-    super.initState();
-    _product = widget.product;
-    _initializeProduct();
-  }
+  late AppLocalizations appLocalizations = AppLocalizations.of(context);
 
   void _initializeProduct() {
+    _product = widget.product;
     _productNameController.text = _product.productName ?? '';
     _weightController.text = _product.quantity ?? '';
-    _brandNameController.text = _product.brands ?? '';
+    _brandNameController.text = _formatProductBrands(_product.brands);
   }
 
   /// Sets a [Product] with the values from the text fields.
   void _setChangedProduct(Product product) {
     product.productName = _productNameController.text;
     product.quantity = _weightController.text;
-    product.brands = _brandNameController.text;
+    product.brands = _formatProductBrands(_brandNameController.text);
+  }
+
+  String _formatProductBrands(String? text) {
+    return text == null ? '' : formatProductBrands(text, appLocalizations);
   }
 
   @override
   Widget build(BuildContext context) {
-    final AppLocalizations appLocalizations = AppLocalizations.of(context);
+    _initializeProduct();
     final Size size = MediaQuery.of(context).size;
     final LocalDatabase localDatabase = context.read<LocalDatabase>();
     final UpToDateProductProvider provider =