Merge pull request #97 from yaso-meth/NEW--Mzansi-Wallet-reDesign

NEW--Mzansi-Wallet-reDesign

Frontend/lib/mih_components/mih_package/mih-app_tool_body.dart

@@ -76,6 +76,7 @@ class _MihAppToolBodyState extends State<MihAppToolBody> {
         top: 0,
       ),
       child: Container(
+        height: screenSize.height,
         decoration: getBoader(),
         child: Padding(
           padding: EdgeInsets.all(_innerBodyPadding),

Frontend/lib/mih_packages/mzansi_wallet/app_tools/mih_cards.dart

@@ -5,6 +5,7 @@ import 'package:Mzansi_Innovation_Hub/mih_components/mih_inputs_and_buttons/mih_
 import 'package:Mzansi_Innovation_Hub/mih_components/mih_inputs_and_buttons/mih_number_input.dart';
 import 'package:Mzansi_Innovation_Hub/mih_components/mih_inputs_and_buttons/mih_search_input.dart';
 import 'package:Mzansi_Innovation_Hub/mih_components/mih_layout/mih_window.dart';
+import 'package:Mzansi_Innovation_Hub/mih_components/mih_package/mih-app_tool_body.dart';
 import 'package:Mzansi_Innovation_Hub/mih_components/mih_pop_up_messages/mih_error_message.dart';
 import 'package:Mzansi_Innovation_Hub/mih_components/mih_pop_up_messages/mih_loading_circle.dart';
 import 'package:Mzansi_Innovation_Hub/mih_objects/app_user.dart';
@@ -14,18 +15,18 @@ import 'package:Mzansi_Innovation_Hub/mih_packages/mzansi_wallet/components/mih_
 import 'package:flutter/material.dart';
 import 'package:mobile_scanner/mobile_scanner.dart';
 
-class LoyaltyCards extends StatefulWidget {
+class MihCards extends StatefulWidget {
   final AppUser signedInUser;
-  const LoyaltyCards({
+  const MihCards({
     super.key,
     required this.signedInUser,
   });
 
   @override
-  State<LoyaltyCards> createState() => _LoyaltyCardsState();
+  State<MihCards> createState() => _MihCardsState();
 }
 
-class _LoyaltyCardsState extends State<LoyaltyCards> {
+class _MihCardsState extends State<MihCards> {
   final TextEditingController shopController = TextEditingController();
   final TextEditingController cardNumberController = TextEditingController();
   final TextEditingController cardSearchController = TextEditingController();
@@ -40,49 +41,35 @@ class _LoyaltyCardsState extends State<LoyaltyCards> {
   );
   final boxFit = BoxFit.contain;
 
-  void foundCode(BarcodeCapture bcode) {
+  void searchShop() {
-    if (bcode.barcodes.first.rawValue != null) {
+    if (cardSearchController.text.isEmpty) {
-      setState(() {
+      searchShopName.value = listOfCards;
-        cardNumberController.text = bcode.barcodes.first.rawValue!;
+    } else {
-      });
+      List<MIHLoyaltyCard> temp = [];
-      //print(bcode.barcodes.first.rawValue);
+      for (var item in listOfCards) {
-      scannerController.stop();
+        if (item.shop_name
-      Navigator.of(context).pop();
+            .toLowerCase()
+            .contains(cardSearchController.text.toLowerCase())) {
+          temp.add(item);
+        }
+      }
+      searchShopName.value = temp;
     }
   }
 
   void openscanner() async {
-    // if (MzanziInnovationHub.of(context)!.theme.getPlatform() == "Web") {
-    //   print("================ Web ====================");
-    //   print("here 1");
-    //   try {
-    //     String? res = await SimpleBarcodeScanner.scanBarcode(
-    //       context,
-    //       barcodeAppBar: const BarcodeAppBar(
-    //         appBarTitle: 'Scan Barcode',
-    //         centerTitle: true,
-    //         enableBackButton: true,
-    //         backButtonIcon: Icon(Icons.arrow_back),
-    //       ),
-    //       isShowFlashIcon: true,
-    //       delayMillis: 500,
-    //       cameraFace: CameraFace.back,
-    //       scanFormat: ScanFormat.ONLY_BARCODE,
-    //     );
-    //     if (res != null) {
-    //       setState(() {
-    //         cardNumberController.text = res;
-    //       });
-    //     }
-    //   } catch (error) {
-    //     print(error);
-    //   }
-    // } else {
     Navigator.of(context).pushNamed(
       '/scanner',
       arguments: cardNumberController,
     );
-    // }
+  }
+
+  void shopSelected() {
+    if (shopController.text.isNotEmpty) {
+      shopName.value = shopController.text;
+    } else {
+      shopName.value = "";
+    }
   }
 
   void addCardWindow(BuildContext ctxt) {
@@ -215,34 +202,9 @@ class _LoyaltyCardsState extends State<LoyaltyCards> {
     );
   }
 
-  void shopSelected() {
-    if (shopController.text.isNotEmpty) {
-      shopName.value = shopController.text;
-    } else {
-      shopName.value = "";
-    }
-  }
-
-  void searchShop() {
-    if (cardSearchController.text.isEmpty) {
-      searchShopName.value = listOfCards;
-    } else {
-      List<MIHLoyaltyCard> temp = [];
-      for (var item in listOfCards) {
-        if (item.shop_name
-            .toLowerCase()
-            .contains(cardSearchController.text.toLowerCase())) {
-          temp.add(item);
-        }
-      }
-      searchShopName.value = temp;
-    }
-  }
-
   @override
   void dispose() {
     cardNumberController.dispose();
-
     shopController.removeListener(shopSelected);
     shopController.dispose();
     cardSearchController.removeListener(searchShop);
@@ -262,20 +224,17 @@ class _LoyaltyCardsState extends State<LoyaltyCards> {
 
   @override
   Widget build(BuildContext context) {
-    return FutureBuilder(
+    return MihAppToolBody(
-      future: cardList,
+      borderOn: true,
-      builder: (context, snapshot) {
+      bodyItem: getBody(),
-        //print(snapshot.connectionState);
+    );
-        if (snapshot.connectionState == ConnectionState.waiting) {
+  }
-          return const Center(
+
-            child: Mihloadingcircle(),
+  Widget getBody() {
-          );
+    return Stack(
-        } else if (snapshot.connectionState == ConnectionState.done &&
+      children: [
-            snapshot.hasData) {
+        SingleChildScrollView(
-          listOfCards = snapshot.data!;
+          child: Column(
-          searchShop();
-          //print(listOfCards);
-          return Column(
             children: [
               Row(
                 mainAxisAlignment: MainAxisAlignment.center,
@@ -291,20 +250,8 @@ class _LoyaltyCardsState extends State<LoyaltyCards> {
                           .secondaryColor(),
                     ),
                   ),
-                  IconButton(
-                    icon: const Icon(Icons.add_card),
-                    alignment: Alignment.topRight,
-                    color:
-                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-                    onPressed: () {
-                      addCardWindow(context);
-                    },
-                  )
                 ],
               ),
-              // Divider(
-              //   color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-              // ),
               const SizedBox(height: 10),
               Row(
                 mainAxisAlignment: MainAxisAlignment.center,
@@ -335,24 +282,57 @@ class _LoyaltyCardsState extends State<LoyaltyCards> {
                 ],
               ),
               const SizedBox(height: 10),
-              ValueListenableBuilder(
+              FutureBuilder(
-                valueListenable: searchShopName,
+                future: cardList,
-                builder: (BuildContext context, List<MIHLoyaltyCard> value,
+                builder: (context, snapshot) {
-                    Widget? child) {
+                  if (snapshot.connectionState == ConnectionState.waiting) {
-                  return BuildLoyaltyCardList(
+                    return const Center(
-                    cardList: searchShopName.value,
+                      child: Mihloadingcircle(),
-                    signedInUser: widget.signedInUser,
+                    );
-                  );
+                  } else if (snapshot.connectionState == ConnectionState.done &&
+                      snapshot.hasData) {
+                    listOfCards = snapshot.data!;
+                    searchShop();
+                    return ValueListenableBuilder(
+                      valueListenable: searchShopName,
+                      builder: (BuildContext context,
+                          List<MIHLoyaltyCard> value, Widget? child) {
+                        return BuildLoyaltyCardList(
+                          cardList: searchShopName.value,
+                          signedInUser: widget.signedInUser,
+                        );
+                      },
+                    );
+                  } else {
+                    return const Center(
+                      child: Text("Error Loading Loyalty Cards"),
+                    );
+                  }
                 },
               ),
             ],
-          );
+          ),
-        } else {
+        ),
-          return const Center(
+        Positioned(
-            child: Text("Error Loading Loyalty Cards"),
+            right: 0,
-          );
+            bottom: 0,
-        }
+            child: Container(
-      },
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(50),
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              ),
+              child: IconButton(
+                color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                onPressed: () {
+                  addCardWindow(context);
+                },
+                icon: const Icon(
+                  Icons.add_card,
+                  size: 50,
+                ),
+              ),
+            ))
+      ],
     );
   }
 }

Frontend/lib/mih_packages/mzansi_wallet/builder/build_loyalty_card_list.dart

@@ -72,12 +72,9 @@ class _BuildLoyaltyCardListState extends State<BuildLoyaltyCardList> {
           Navigator.pop(context);
         },
         windowBody: [
-          Row(
+          Container(
-            mainAxisAlignment: MainAxisAlignment.center,
+            child: MihCardDisplay(
-            children: [
+                shopName: widget.cardList[index].shop_name, height: 250),
-              MihCardDisplay(
-                  shopName: widget.cardList[index].shop_name, height: 250),
-            ],
           ),
           const SizedBox(height: 20),
           Container(
@@ -158,7 +155,7 @@ class _BuildLoyaltyCardListState extends State<BuildLoyaltyCardList> {
         gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
           mainAxisSpacing: 0,
           crossAxisSpacing: 10,
-          maxCrossAxisExtent: 175,
+          maxCrossAxisExtent: 200,
         ),
         itemBuilder: (context, index) {
           return GestureDetector(
@@ -191,13 +188,17 @@ class _BuildLoyaltyCardListState extends State<BuildLoyaltyCardList> {
       //   },
       // );
     } else {
-      return const Padding(
+      return Padding(
-        padding: EdgeInsets.only(top: 25.0),
+        padding: const EdgeInsets.only(top: 25.0),
-        child: Center(
+        child: SizedBox(
-          child: Text(
+          height: size.height,
-            "No Cards Available",
+          child: const Align(
-            style: TextStyle(fontSize: 25, color: Colors.grey),
+            alignment: Alignment.topCenter,
-            textAlign: TextAlign.center,
+            child: Text(
+              "No Cards Available",
+              style: TextStyle(fontSize: 25, color: Colors.grey),
+              textAlign: TextAlign.center,
+            ),
           ),
         ),
       );

Frontend/lib/mih_packages/mzansi_wallet/components/mih_card_display.dart

@@ -17,100 +17,43 @@ class _MihCardDisplayState extends State<MihCardDisplay> {
   Widget displayLoyaltyCard() {
     switch (widget.shopName.toLowerCase()) {
       case "best before":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/best_before.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/best_before.png'),
-        );
       case "checkers":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/checkers.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/checkers.png'),
-        );
       case "clicks":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/Clicks_Club.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/Clicks_Club.png'),
-        );
       case "cotton:on":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/cotton_on_perks.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/cotton_on_perks.png'),
-        );
       case "dis-chem":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/dischem_benefit.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/dischem_benefit.png'),
-        );
       case "pick n pay":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/pnp_smart.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/pnp_smart.png'),
-        );
       case "shoprite":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/shoprite.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/shoprite.png'),
-        );
       case "spar":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/spar_rewards.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/spar_rewards.png'),
-        );
       case "woolworths":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/wrewards.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/wrewards.png'),
-        );
       case "makro":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/makro.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/makro.png'),
-        );
       case "fresh stop":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/fresh_stop.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/fresh_stop.png'),
-        );
       case "panarottis":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/panarottis.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/panarottis.png'),
-        );
       case "shell":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/Shell.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/Shell.png'),
-        );
       case "edgars":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/edgars.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/edgars.png'),
-        );
       case "jet":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/jet.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/jet.png'),
-        );
       case "spur":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/spur.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/spur.png'),
-        );
       case "infinity":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/infinity.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/infinity.png'),
-        );
       case "eskom":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/eskom.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/eskom.png'),
-        );
       default:
-        return SizedBox(
+        return const Placeholder();
-          height: widget.height,
-          child: const Placeholder(),
-        );
     }
   }
 

Frontend/lib/mih_packages/mzansi_wallet/mih_wallet.dart

@@ -0,0 +1,78 @@
+import 'package:Mzansi_Innovation_Hub/mih_components/mih_package/mih_app.dart';
+import 'package:Mzansi_Innovation_Hub/mih_components/mih_package/mih_app_action.dart';
+import 'package:Mzansi_Innovation_Hub/mih_components/mih_package/mih_app_tools.dart';
+import 'package:Mzansi_Innovation_Hub/mih_objects/app_user.dart';
+import 'package:Mzansi_Innovation_Hub/mih_packages/mzansi_wallet/app_tools/mih_cards.dart';
+import 'package:flutter/material.dart';
+
+class MihWallet extends StatefulWidget {
+  final AppUser signedInUser;
+  const MihWallet({
+    super.key,
+    required this.signedInUser,
+  });
+
+  @override
+  State<MihWallet> createState() => _MihWalletState();
+}
+
+class _MihWalletState extends State<MihWallet> {
+  late int _selcetedIndex;
+
+  @override
+  void initState() {
+    super.initState();
+    setState(() {
+      _selcetedIndex = 0;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MihApp(
+      appActionButton: getAction(),
+      appTools: getTools(),
+      appBody: getToolBody(),
+      selectedbodyIndex: _selcetedIndex,
+      onIndexChange: (newValue) {
+        setState(() {
+          _selcetedIndex = newValue;
+        });
+        print("Index: $_selcetedIndex");
+      },
+    );
+  }
+
+  MihAppAction getAction() {
+    return MihAppAction(
+      icon: const Icon(Icons.arrow_back),
+      iconSize: 35,
+      onTap: () {
+        Navigator.of(context).pop();
+      },
+    );
+  }
+
+  MihAppTools getTools() {
+    Map<Widget, void Function()?> temp = {};
+    temp[const Icon(Icons.card_membership)] = () {
+      setState(() {
+        _selcetedIndex = 0;
+      });
+    };
+
+    return MihAppTools(
+      tools: temp,
+      selcetedIndex: _selcetedIndex,
+    );
+  }
+
+  List<Widget> getToolBody() {
+    List<Widget> toolBodies = [
+      MihCards(
+        signedInUser: widget.signedInUser,
+      ),
+    ];
+    return toolBodies;
+  }
+}

Frontend/lib/mih_packages/mzansi_wallet/mzansi_wallet.dart

@@ -1,179 +0,0 @@
-import 'package:Mzansi_Innovation_Hub/mih_components/mih_layout/mih_action.dart';
-import 'package:Mzansi_Innovation_Hub/mih_components/mih_layout/mih_body.dart';
-import 'package:Mzansi_Innovation_Hub/mih_components/mih_layout/mih_header.dart';
-import 'package:Mzansi_Innovation_Hub/mih_components/mih_layout/mih_layout_builder.dart';
-import 'package:Mzansi_Innovation_Hub/mih_objects/app_user.dart';
-import 'package:Mzansi_Innovation_Hub/mih_objects/arguments.dart';
-import 'package:Mzansi_Innovation_Hub/mih_packages/mzansi_wallet/loyalty_cards.dart';
-import 'package:flutter/material.dart';
-
-class MzansiWallet extends StatefulWidget {
-  final AppUser signedInUser;
-  const MzansiWallet({
-    super.key,
-    required this.signedInUser,
-  });
-
-  @override
-  State<MzansiWallet> createState() => _MzansiWalletState();
-}
-
-class _MzansiWalletState extends State<MzansiWallet> {
-  int _selectedIndex = 0;
-
-  MIHAction getActionButton() {
-    return MIHAction(
-      icon: const Icon(Icons.arrow_back),
-      iconSize: 35,
-      onTap: () {
-        Navigator.of(context).pop();
-        Navigator.of(context).popAndPushNamed(
-          '/',
-          arguments: AuthArguments(true, false),
-        );
-      },
-    );
-  }
-
-  MIHHeader getHeader() {
-    return const MIHHeader(
-      headerAlignment: MainAxisAlignment.center,
-      headerItems: [
-        Text(
-          "",
-          style: TextStyle(
-            fontWeight: FontWeight.bold,
-            fontSize: 25,
-          ),
-        ),
-      ],
-    );
-  }
-
-  MIHHeader getSecAction() {
-    return MIHHeader(
-      headerAlignment: MainAxisAlignment.end,
-      headerItems: [
-        //============ Patient Details ================
-        Visibility(
-          visible: _selectedIndex != 0,
-          child: IconButton(
-            onPressed: () {
-              setState(() {
-                _selectedIndex = 0;
-              });
-            },
-            icon: const Icon(
-              Icons.card_membership,
-              size: 35,
-            ),
-          ),
-        ),
-        Visibility(
-          visible: _selectedIndex == 0,
-          child: IconButton.filled(
-            iconSize: 35,
-            onPressed: () {
-              setState(() {
-                _selectedIndex = 0;
-              });
-            },
-            icon: const Icon(
-              Icons.card_membership,
-            ),
-          ),
-        ),
-        //============ Patient Notes ================
-        // Visibility(
-        //   visible: _selectedIndex != 1,
-        //   child: IconButton(
-        //     onPressed: () {
-        //       setState(() {
-        //         _selectedIndex = 1;
-        //       });
-        //     },
-        //     icon: const Icon(
-        //       Icons.article_outlined,
-        //       size: 35,
-        //     ),
-        //   ),
-        // ),
-        // Visibility(
-        //   visible: _selectedIndex == 1,
-        //   child: IconButton.filled(
-        //     onPressed: () {
-        //       setState(() {
-        //         _selectedIndex = 1;
-        //       });
-        //     },
-        //     icon: const Icon(
-        //       Icons.article_outlined,
-        //       size: 35,
-        //     ),
-        //   ),
-        // ),
-        // //============ Patient Files ================
-        // Visibility(
-        //   visible: _selectedIndex != 2,
-        //   child: IconButton(
-        //     onPressed: () {
-        //       setState(() {
-        //         _selectedIndex = 2;
-        //       });
-        //     },
-        //     icon: const Icon(
-        //       Icons.file_present,
-        //       size: 35,
-        //     ),
-        //   ),
-        // ),
-        // Visibility(
-        //   visible: _selectedIndex == 2,
-        //   child: IconButton.filled(
-        //     onPressed: () {
-        //       setState(() {
-        //         _selectedIndex = 2;
-        //       });
-        //     },
-        //     icon: const Icon(
-        //       Icons.file_present,
-        //       size: 35,
-        //     ),
-        //   ),
-        // ),
-      ],
-    );
-  }
-
-  MIHBody getBody() {
-    return MIHBody(
-      borderOn: true,
-      bodyItems: [showSelection(_selectedIndex)],
-    );
-  }
-
-  Widget showSelection(int index) {
-    if (index == 0) {
-      return LoyaltyCards(signedInUser: widget.signedInUser);
-    } else if (index == 1) {
-      return const Placeholder();
-    } else {
-      return const Placeholder();
-    }
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return MIHLayoutBuilder(
-      actionButton: getActionButton(),
-      header: getHeader(),
-      secondaryActionButton: getSecAction(),
-      body: getBody(),
-      actionDrawer: null,
-      secondaryActionDrawer: null,
-      bottomNavBar: null,
-      pullDownToRefresh: false,
-      onPullDown: () async {},
-    );
-  }
-}

Frontend/lib/mih_router/routeGenerator.dart

@@ -5,8 +5,8 @@ import 'package:Mzansi_Innovation_Hub/mih_packages/about_mih/mih_policy_tos_ext/
 import 'package:Mzansi_Innovation_Hub/mih_packages/calendar/mzansi_calendar.dart';
 import 'package:Mzansi_Innovation_Hub/mih_packages/calculator/mih_calculator.dart';
 import 'package:Mzansi_Innovation_Hub/mih_packages/mzansi_ai/mzansi_ai.dart';
-import 'package:Mzansi_Innovation_Hub/mih_packages/mzansi_wallet/mih_barcode_scanner.dart';
+import 'package:Mzansi_Innovation_Hub/mih_packages/mzansi_wallet/components/mih_barcode_scanner.dart';
-import 'package:Mzansi_Innovation_Hub/mih_packages/mzansi_wallet/mzansi_wallet.dart';
+import 'package:Mzansi_Innovation_Hub/mih_packages/mzansi_wallet/mih_wallet.dart';
 import 'package:Mzansi_Innovation_Hub/mih_packages/patient_profile/pat_manager/pat_manager.dart';
 import 'package:flutter/material.dart';
 import '../mih_components/mih_layout/mih_print_prevew.dart';
@@ -202,9 +202,12 @@ class RouteGenerator {
               //print("route generator: $args");
               return MaterialPageRoute(
                 settings: settings,
-                builder: (_) => MzansiWallet(
+                builder: (_) => MihWallet(
                   signedInUser: args,
                 ),
+                // MzansiWallet(
+                //   signedInUser: args,
+                // ),
               );
             }
             return _errorRoute();