Merge pull request #17 from yaso-meth/loyalty-card-layout

Loyalty-card-layout

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

@@ -103,36 +103,54 @@ class _BuildLoyaltyCardListState extends State<BuildLoyaltyCardList> {
 
   @override
   Widget build(BuildContext context) {
+    final Size size = MediaQuery.sizeOf(context);
+    final double width = size.width;
+    //final double height = size.height;
     if (widget.cardList.isNotEmpty) {
-      return ListView.separated(
+      return GridView.builder(
+        //physics: const NeverScrollableScrollPhysics(),
         shrinkWrap: true,
-        physics: const NeverScrollableScrollPhysics(),
-        separatorBuilder: (BuildContext context, int index) {
-          return Divider(
-            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-          );
-        },
+        padding: EdgeInsets.only(
+          left: width / 10,
+          right: width / 10,
+          //bottom: height / 5,
+          //top: 20,
+        ),
+        // physics: ,
+        // shrinkWrap: true,
         itemCount: widget.cardList.length,
+        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
+            mainAxisSpacing: 15, maxCrossAxisExtent: 200),
         itemBuilder: (context, index) {
-          return ListTile(
-            title: MihCardDisplay(
-                shopName: widget.cardList[index].shop_name, height: 200),
-            // subtitle: Text(
-            //   "Card Number: ${widget.cardList[index].card_number}",
-            //   style: TextStyle(
-            //     color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-            //   ),
-            // ),
-            // trailing: Icon(
-            //   Icons.arrow_forward,
-            //   color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-            // ),
+          return GestureDetector(
+            child: MihCardDisplay(
+                shopName: widget.cardList[index].shop_name, height: 100),
             onTap: () {
               viewCardWindow(index);
             },
           );
         },
       );
+      // return ListView.separated(
+      //   shrinkWrap: true,
+      //   physics: const NeverScrollableScrollPhysics(),
+      //   separatorBuilder: (BuildContext context, int index) {
+      //     return Divider(
+      //       color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+      //     );
+      //   },
+      //   itemCount: widget.cardList.length,
+      //   itemBuilder: (context, index) {
+      //     return ListTile(
+      //       title: MihCardDisplay(
+      //           shopName: widget.cardList[index].shop_name, height: 200),
+
+      //       onTap: () {
+      //         viewCardWindow(index);
+      //       },
+      //     );
+      //   },
+      // );
     } else {
       return const Padding(
         padding: EdgeInsets.only(top: 25.0),

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

@@ -32,7 +32,7 @@ class _MihCardDisplayState extends State<MihCardDisplay> {
           children: [
             SizedBox(
               height: widget.height,
-              child: Image.asset('images/loyalty_cards/xtraSavings.png'),
+              child: Image.asset('images/loyalty_cards/checkers_xtra.png'),
             ),
           ],
         );
@@ -46,6 +46,16 @@ class _MihCardDisplayState extends State<MihCardDisplay> {
             ),
           ],
         );
+      case "cotton:on":
+        return Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            SizedBox(
+              height: widget.height,
+              child: Image.asset('images/loyalty_cards/cotton_on_perks.png'),
+            ),
+          ],
+        );
       case "dis-chem":
         return Row(
           mainAxisAlignment: MainAxisAlignment.center,
@@ -66,6 +76,16 @@ class _MihCardDisplayState extends State<MihCardDisplay> {
             ),
           ],
         );
+      case "shoprite":
+        return Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            SizedBox(
+              height: widget.height,
+              child: Image.asset('images/loyalty_cards/shoprite_xtra.png'),
+            ),
+          ],
+        );
       case "spar":
         return Row(
           mainAxisAlignment: MainAxisAlignment.center,

Frontend/lib/mih_packages/mzansi_wallet/loyalty_cards.dart

@@ -105,8 +105,10 @@ class _LoyaltyCardsState extends State<LoyaltyCards> {
               "Best Before",
               "Checkers",
               "Clicks",
+              "Cotton:On",
               "Dis-Chem",
               "Pick n Pay",
+              "Shoprite",
               "Spar",
               "Woolworths"
             ],