MOB-811 MOB-810 Fix 3DS Issues (#94)

Sources/PaystackSDK/Core/Models/Models/Charge/ChargeResponseData.swift

@@ -12,7 +12,7 @@ public struct ChargeResponseData: Codable {
     public var ussdCode: String?
     public var qrCode: String?
     public var displayText: String?
-    public var metadata: [String: String]?
+    public var metadata: Metadata?
     public var gatewayResponse: String?
     public var message: String?
     public var channel: String?

Sources/PaystackUI/Charge/ChargeCard/Redirect/CardRedirectView.swift

@@ -8,6 +8,9 @@ struct CardRedirectView: View {
     @StateObject
     var viewModel: CardRedirectViewModel
 
+    @State
+    var webviewLoading = false
+
     init(urlString: String,
          transactionId: Int,
          chargeCardContainer: ChargeCardContainer) {
@@ -18,12 +21,24 @@ struct CardRedirectView: View {
 
     var body: some View {
         if viewModel.displayWebview {
-            WebView(url: URL(string: urlString))
+            webview
         } else {
             authenticationInitializationView
         }
     }
 
+    var webview: some View {
+        ZStack {
+            WebView(url: URL(string: urlString),
+                    isLoading: $webviewLoading)
+
+            if webviewLoading {
+                LoadingIndicator(tintColor: .navy04)
+                    .scaleEffect(2)
+            }
+        }
+    }
+
     var authenticationInitializationView: some View {
         VStack(spacing: .triplePadding) {
             Image.redirectIcon

Sources/PaystackUI/Components/Views/WebView.swift

@@ -21,7 +21,7 @@ import WebKit
  You can also provide a custom `WKWebViewConfiguration` that
  can be used when initializing the `WKWebView` instance.
  */
-public struct WebView: WebViewRepresentable {
+struct WebView: WebViewRepresentable {
 
     // MARK: - Initializers
 
@@ -35,40 +35,52 @@ public struct WebView: WebViewRepresentable {
 
      - Parameters:
        - url: The url of the page to load into the web view, if any.
+       - isLoading: A Binding that updates with the current loading state of the web view
+       - normalizeScaling: Sets the vieport initial scale to prevent pages looking smaller than expected. Defaults to true.
        - webConfiguration: The WKWebViewConfiguration to apply to the web view, if any.
        - webView: The custom configuration block to apply to the web view, if any.
      */
-    public init(
+    init(
         url: URL? = nil,
+        isLoading: Binding<Bool> = .constant(false),
+        normalizeScaling: Bool = true,
         webConfiguration: WKWebViewConfiguration? = nil,
         viewConfiguration: @escaping (WKWebView) -> Void = { _ in }) {
-        self.url = url
-        self.webConfiguration = webConfiguration
-        self.viewConfiguration = viewConfiguration
-    }
+            self.url = url
+            self.normalizeScaling = normalizeScaling
+            self._isLoading = isLoading
+            self.webConfiguration = webConfiguration
+            self.viewConfiguration = viewConfiguration
+        }
 
     // MARK: - Properties
+    @Binding var isLoading: Bool
+    let normalizeScaling: Bool
 
     private let url: URL?
     private let webConfiguration: WKWebViewConfiguration?
     private let viewConfiguration: (WKWebView) -> Void
 
     // MARK: - Functions
 
+    func makeCoordinator() -> Coordinator {
+        Coordinator(self)
+    }
+
     #if os(iOS)
-    public func makeUIView(context: Context) -> WKWebView {
-        makeView()
+    func makeUIView(context: Context) -> WKWebView {
+        makeView(context: context)
     }
 
-    public func updateUIView(_ uiView: WKWebView, context: Context) {}
+    func updateUIView(_ uiView: WKWebView, context: Context) {}
     #endif
 
     #if os(macOS)
-    public func makeNSView(context: Context) -> WKWebView {
-        makeView()
+    func makeNSView(context: Context) -> WKWebView {
+        makeView(context: context)
     }
 
-    public func updateNSView(_ view: WKWebView, context: Context) {}
+    func updateNSView(_ view: WKWebView, context: Context) {}
     #endif
 }
 
@@ -79,8 +91,9 @@ private extension WebView {
         return WKWebView(frame: .zero, configuration: configuration)
     }
 
-    func makeView() -> WKWebView {
+    func makeView(context: Context) -> WKWebView {
         let view = makeWebView()
+        view.navigationDelegate = context.coordinator
         viewConfiguration(view)
         tryLoad(url, into: view)
         return view
@@ -91,4 +104,31 @@ private extension WebView {
         view.load(URLRequest(url: url))
     }
 }
+
+class Coordinator: NSObject, WKNavigationDelegate {
+    var parent: WebView
+
+    init(_ parent: WebView) {
+        self.parent = parent
+    }
+
+    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
+        parent.isLoading = true
+    }
+
+    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
+        parent.isLoading = false
+        normalizeScaling(on: webView)
+    }
+
+    private func normalizeScaling(on webView: WKWebView) {
+        guard parent.normalizeScaling else { return }
+        var scriptContent = "var meta = document.createElement('meta');"
+        scriptContent += "meta.name='viewport';"
+        scriptContent += "meta.content='initial-scale=1.0';"
+        scriptContent += "document.getElementsByTagName('head')[0].appendChild(meta);"
+
+        webView.evaluateJavaScript(scriptContent, completionHandler: nil)
+    }
+}
 #endif