Add provider logos and redesign Mobile Money channel selection list

Sources/PaystackUI/Charge/MobileMoney/Views/ChannelSelectionView.swift

@@ -1,5 +1,6 @@
 import SwiftUI
 import PaystackCore
+
 @available(iOS 14.0, *)
 struct ChannelSelectionView: View {
 
@@ -8,7 +9,6 @@ struct ChannelSelectionView: View {
     @StateObject
     var viewModel: ChannelSelectionViewModel
     let supportedChannels: [SupportedChannel]
-    let columns = [GridItem(.flexible()), GridItem(.flexible())]
 
     init(state: Binding<ChargeState>,
          supportedChannels: [SupportedChannel],
@@ -25,19 +25,18 @@ struct ChannelSelectionView: View {
                     .font(.body16M)
                     .foregroundColor(.stackBlue)
                     .multilineTextAlignment(.center)
-                GeometryReader { geo in
-                    LazyVGrid(columns: columns) {
-                        ForEach(supportedChannels) { channel in
-                            ChannelView(channelTitle: channel.displayTitle, image: channel.image)
-                                .padding(.singlePadding)
-                                .onTapGesture {
-                                    viewModel.choose(channel)
-                                }
-                                .frame(width: (geo.size.width / CGFloat(supportedChannels.count)).rounded())
+
+                VStack(spacing: .singlePadding) {
+                    ForEach(supportedChannels) { channel in
+                        Button(action: { viewModel.choose(channel) }) {
+                            ChannelView(channelTitle: channel.displayTitle,
+                                        image: channel.image)
                         }
+                        .buttonStyle(PlainButtonStyle())
                     }
                 }
             }
+            .padding(.horizontal, .doublePadding)
         }
     }
 }
@@ -77,21 +76,23 @@ struct ChannelView: View {
 
     var body: some View {
 
-        HStack(spacing: .singlePadding) {
+        HStack(spacing: .doublePadding) {
+            image
+                .resizable()
+                .aspectRatio(contentMode: .fit)
+                .frame(width: imageSlotSize, height: imageSlotSize)
 
-            VStack(alignment: .leading, spacing: .singlePadding) {
-                image
-                    .resizable()
-                    .aspectRatio(contentMode: .fit)
-                    .frame(width: imageSlotSize, height: imageSlotSize)
+            Text(channelTitle)
+                .font(.body16M)
+                .foregroundColor(.stackBlue)
+                .lineLimit(1)
+                .minimumScaleFactor(0.85)
 
-                Text(channelTitle)
-                    .font(.body14M)
-                    .foregroundColor(.navy02)
-            }
             Spacer()
         }
         .padding(.doublePadding)
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .contentShape(Rectangle())
         .cornerRadius(.cornerRadius)
         .overlay(
             RoundedRectangle(cornerRadius: .cornerRadius)

Sources/PaystackUI/Charge/Models/SupportedChannel.swift

@@ -6,7 +6,7 @@ enum SupportedChannel: Equatable, Identifiable {
     case mobileMoney(MobileMoneyChannel)
     case bankTransfer(BankTransferConfig)
     case zap(ZapConfig)
-
+    
     var id: String {
         switch self {
         case .card:
@@ -19,41 +19,45 @@ enum SupportedChannel: Equatable, Identifiable {
             return "zap"
         }
     }
-
+    
     var displayTitle: String {
         switch self {
         case .card:
             return "Card"
         case .mobileMoney(let channel):
             return channel.value
         case .bankTransfer:
-            return "Transfer"
+            return "Bank Transfer"
         case .zap:
             return "Zap"
         }
     }
-
+    
     var image: Image {
         switch self {
         case .card:
             return Image("cardLogo", bundle: .current)
         case .mobileMoney(let channel):
             return Self.image(forMobileMoneyKey: channel.key)
         case .bankTransfer:
-            return Image(systemName: "building.columns")
+            return Image("bankTransferLogo", bundle: .current)
         case .zap:
             return Image("zapSingleLogo", bundle: .current)
         }
     }
-
+    
     private static func image(forMobileMoneyKey key: String) -> Image {
         switch key.uppercased() {
-        case "MPESA", "ATL_KE":
-            return Image("kenyaSHLogo", bundle: .current)
-        case "MTN", "ATL", "VOD":
-            return Image("kenyaSHLogo", bundle: .current)
+        case "MPESA":
+            return Image("mpesaLogo", bundle: .current)
+        case "ATL_KE", "ATL":
+            return Image("atlLogo", bundle: .current)
+        case "MTN":
+            return Image("mtnLogo", bundle: .current)
+            case "VOD":
+            return Image("vodLogo", bundle: .current)
         default:
-            return Image(systemName: "creditcard")
+            return Image(systemName: "kenyaSHLogo")
         }
     }
 }

Sources/PaystackUI/Images/Images.xcassets/atlLogo.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "Airtel - Icon.svg",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/PaystackUI/Images/Images.xcassets/bankTransferLogo.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "transfer 1.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "transfer 1-2.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "transfer 1-3.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/PaystackUI/Images/Images.xcassets/mpesaLogo.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "M-PESA Icon.svg",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/PaystackUI/Images/Images.xcassets/mtnLogo.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "MTN Logo.svg",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/PaystackUI/Images/Images.xcassets/vodLogo.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "Telecel-Icon.svg",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}