Move spinner to the right hand-side of IAP button and always display the IAP title

2 files changed, 47 insertions, 9 deletions

diff --git a/ios/MullvadVPN/AccountViewController.swift b/ios/MullvadVPN/AccountViewController.swift
index d49e156532..0f0d300ba6 100644
--- a/ios/MullvadVPN/AccountViewController.swift
+++ b/ios/MullvadVPN/AccountViewController.swift
@@ -63,12 +63,6 @@ class AccountViewController: UIViewController {
                 self?.updateAccountExpiry(expiryDate: newExpiryDate)
         }
 
-        // Make sure the buy button scales down the font size to fit the long labels.
-        // Changing baseline adjustment helps to prevent the text from being misaligned after
-        // being scaled down.
-        purchaseButton.titleLabel?.adjustsFontSizeToFitWidth = true
-        purchaseButton.titleLabel?.baselineAdjustment = .alignCenters
-
         accountTokenButton.setTitle(Account.shared.formattedToken, for: .normal)
 
         if let expiryDate = Account.shared.expiry {
@@ -98,9 +92,12 @@ class AccountViewController: UIViewController {
     }
 
     private func requestStoreProducts() {
+        let inAppPurchase = AppStoreSubscription.thirtyDays
+
+        purchaseButton.setTitle(inAppPurchase.localizedTitle, for: .normal)
         purchaseButton.isLoading = true
 
-        requestProductsSubscriber = AppStorePaymentManager.shared.requestProducts(with: [.thirtyDays])
+        requestProductsSubscriber = AppStorePaymentManager.shared.requestProducts(with: [inAppPurchase])
             .retry(10)
             .receive(on: DispatchQueue.main)
             .restrictUserInterfaceInteraction(with: self.purchaseButtonInteractionRestriction, animated: true)
diff --git a/ios/MullvadVPN/InAppPurchaseButton.swift b/ios/MullvadVPN/InAppPurchaseButton.swift
index 38ae3c90fe..63d91c3b9e 100644
--- a/ios/MullvadVPN/InAppPurchaseButton.swift
+++ b/ios/MullvadVPN/InAppPurchaseButton.swift
@@ -21,7 +21,7 @@ class InAppPurchaseButton: AppButton {
                 activityIndicator.stopAnimating()
             }
 
-            titleLabel?.alpha = isLoading ? 0 : 1
+            setNeedsLayout()
         }
     }
 
@@ -37,11 +37,52 @@ class InAppPurchaseButton: AppButton {
 
     private func commonInit() {
         addSubview(activityIndicator)
+
+        // Make sure the buy button scales down the font size to fit the long labels.
+        // Changing baseline adjustment helps to prevent the text from being misaligned after
+        // being scaled down.
+        titleLabel?.adjustsFontSizeToFitWidth = true
+        titleLabel?.baselineAdjustment = .alignCenters
     }
 
     override func layoutSubviews() {
         super.layoutSubviews()
 
-        activityIndicator.center = self.center
+        activityIndicator.frame = activityIndicatorRect(
+            forContentRect: contentRect(forBounds: bounds)
+        )
+    }
+
+    override func titleRect(forContentRect contentRect: CGRect) -> CGRect {
+        var titleRect = super.titleRect(forContentRect: contentRect)
+        let activityIndicatorRect = self.activityIndicatorRect(forContentRect: contentRect)
+
+        // Adjust the title frame in case if it overlaps the activity indicator
+        let intersection = titleRect.intersection(activityIndicatorRect)
+        if !intersection.isNull {
+            if case .leftToRight = effectiveUserInterfaceLayoutDirection {
+                titleRect.origin.x = max(contentRect.minX, titleRect.minX - intersection.width)
+                titleRect.size.width = intersection.minX - titleRect.minX
+            } else {
+                titleRect.origin.x = titleRect.minX + intersection.width
+                titleRect.size.width = min(contentRect.maxX, titleRect.maxX) - intersection.maxX
+            }
+        }
+
+        return titleRect
+    }
+
+    private func activityIndicatorRect(forContentRect contentRect: CGRect) -> CGRect {
+        var frame = activityIndicator.frame
+
+        if case .leftToRight = effectiveUserInterfaceLayoutDirection {
+            frame.origin.x = contentRect.maxX - frame.width
+        } else {
+            frame.origin.x = contentRect.minX
+        }
+
+        frame.origin.y = contentRect.midY - frame.height * 0.5
+
+        return frame
     }
 }