diff --git a/Sources/PaystackUI/Charge/MobileMoney/Views/ChannelSelectionView.swift b/Sources/PaystackUI/Charge/MobileMoney/Views/ChannelSelectionView.swift index b82271c..679fa93 100644 --- a/Sources/PaystackUI/Charge/MobileMoney/Views/ChannelSelectionView.swift +++ b/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, 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) diff --git a/Sources/PaystackUI/Charge/Models/SupportedChannel.swift b/Sources/PaystackUI/Charge/Models/SupportedChannel.swift index c35e443..95c5c43 100644 --- a/Sources/PaystackUI/Charge/Models/SupportedChannel.swift +++ b/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,7 +19,7 @@ enum SupportedChannel: Equatable, Identifiable { return "zap" } } - + var displayTitle: String { switch self { case .card: @@ -27,12 +27,12 @@ enum SupportedChannel: Equatable, Identifiable { 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: @@ -40,20 +40,24 @@ enum SupportedChannel: Equatable, Identifiable { 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") } } } diff --git a/Sources/PaystackUI/Images/Images.xcassets/atlLogo.imageset/Airtel - Icon.svg b/Sources/PaystackUI/Images/Images.xcassets/atlLogo.imageset/Airtel - Icon.svg new file mode 100644 index 0000000..60ac670 --- /dev/null +++ b/Sources/PaystackUI/Images/Images.xcassets/atlLogo.imageset/Airtel - Icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/Sources/PaystackUI/Images/Images.xcassets/atlLogo.imageset/Contents.json b/Sources/PaystackUI/Images/Images.xcassets/atlLogo.imageset/Contents.json new file mode 100644 index 0000000..64c7784 --- /dev/null +++ b/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 + } +} diff --git a/Sources/PaystackUI/Images/Images.xcassets/bankTransferLogo.imageset/Contents.json b/Sources/PaystackUI/Images/Images.xcassets/bankTransferLogo.imageset/Contents.json new file mode 100644 index 0000000..260d0b2 --- /dev/null +++ b/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 + } +} diff --git a/Sources/PaystackUI/Images/Images.xcassets/bankTransferLogo.imageset/transfer 1-2.png b/Sources/PaystackUI/Images/Images.xcassets/bankTransferLogo.imageset/transfer 1-2.png new file mode 100644 index 0000000..da973af Binary files /dev/null and b/Sources/PaystackUI/Images/Images.xcassets/bankTransferLogo.imageset/transfer 1-2.png differ diff --git a/Sources/PaystackUI/Images/Images.xcassets/bankTransferLogo.imageset/transfer 1-3.png b/Sources/PaystackUI/Images/Images.xcassets/bankTransferLogo.imageset/transfer 1-3.png new file mode 100644 index 0000000..b45c229 Binary files /dev/null and b/Sources/PaystackUI/Images/Images.xcassets/bankTransferLogo.imageset/transfer 1-3.png differ diff --git a/Sources/PaystackUI/Images/Images.xcassets/bankTransferLogo.imageset/transfer 1.png b/Sources/PaystackUI/Images/Images.xcassets/bankTransferLogo.imageset/transfer 1.png new file mode 100644 index 0000000..e8538dd Binary files /dev/null and b/Sources/PaystackUI/Images/Images.xcassets/bankTransferLogo.imageset/transfer 1.png differ diff --git a/Sources/PaystackUI/Images/Images.xcassets/mpesaLogo.imageset/Contents.json b/Sources/PaystackUI/Images/Images.xcassets/mpesaLogo.imageset/Contents.json new file mode 100644 index 0000000..995c190 --- /dev/null +++ b/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 + } +} diff --git a/Sources/PaystackUI/Images/Images.xcassets/mpesaLogo.imageset/M-PESA Icon.svg b/Sources/PaystackUI/Images/Images.xcassets/mpesaLogo.imageset/M-PESA Icon.svg new file mode 100644 index 0000000..08d96ce --- /dev/null +++ b/Sources/PaystackUI/Images/Images.xcassets/mpesaLogo.imageset/M-PESA Icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/Sources/PaystackUI/Images/Images.xcassets/mtnLogo.imageset/Contents.json b/Sources/PaystackUI/Images/Images.xcassets/mtnLogo.imageset/Contents.json new file mode 100644 index 0000000..a40d882 --- /dev/null +++ b/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 + } +} diff --git a/Sources/PaystackUI/Images/Images.xcassets/mtnLogo.imageset/MTN Logo.svg b/Sources/PaystackUI/Images/Images.xcassets/mtnLogo.imageset/MTN Logo.svg new file mode 100644 index 0000000..49cc77f --- /dev/null +++ b/Sources/PaystackUI/Images/Images.xcassets/mtnLogo.imageset/MTN Logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/Sources/PaystackUI/Images/Images.xcassets/vodLogo.imageset/Contents.json b/Sources/PaystackUI/Images/Images.xcassets/vodLogo.imageset/Contents.json new file mode 100644 index 0000000..f63d95f --- /dev/null +++ b/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 + } +} diff --git a/Sources/PaystackUI/Images/Images.xcassets/vodLogo.imageset/Telecel-Icon.svg b/Sources/PaystackUI/Images/Images.xcassets/vodLogo.imageset/Telecel-Icon.svg new file mode 100644 index 0000000..fac35ee --- /dev/null +++ b/Sources/PaystackUI/Images/Images.xcassets/vodLogo.imageset/Telecel-Icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + +