StoredCard and Preselected screen amount based changes & tests (#2479)

# Summary [Required]
- Amount can have 3 states, so added tests for them using existing
copies(note: the copies may change but that will be a smaller change).
The todo for this change will still remain until it is confirmed.
- Fixing contraints for the width and duplicate constraints for the
StoredView.
- Passing CheckoutTheme to the StoredCardComponent
- Removing unused code in the viewModel. 


## Checklist [Required]
<!-- Mark completed items with an [x] -->
- [x] Tested changes locally
- [x] Added/updated unit tests

Author: robertdalmeida

Adyen/Assets/Generated/LocalizationKey.swift

@@ -78,7 +78,7 @@ public struct LocalizationKey {
     public static let cardCvcItemTitle = LocalizationKey(key: "adyen.card.cvcItem.title")
     /// Enter security code
     public static let cardSecurityCodeTitle = LocalizationKey(key: "adyen.card.securityCode.title")
-    /// Enter the security code for %@ to complete the payment of %@
+    /// Enter the security code for %@
     public static let cardSecurityCodeDescription = LocalizationKey(key: "adyen.card.securityCode.description")
     /// 123
     public static let cardCvcItemPlaceholder = LocalizationKey(key: "adyen.card.cvcItem.placeholder")
@@ -560,7 +560,7 @@ public struct LocalizationKey {
     public static let cardScannerCameraAccessDeniedAlertMessage = LocalizationKey(key: "adyen.card.scanner.camera.access.denied.alert.message")
     /// Open Settings
     public static let cardScannerCameraAccessDeniedAlertSettingsButtonTitle = LocalizationKey(key: "adyen.card.scanner.camera.access.denied.alert.settingsButton.title")
-    /// Use %@ to pay %@
+    /// Use %@
     public static let preselectedPaymentMethodSubtitle = LocalizationKey(key: "adyen.preselectedPaymentMethod.subtitle")
     /// Other payment options
     public static let preselectedPaymentMethodOtherOptions = LocalizationKey(key: "adyen.preselectedPaymentMethod.otherOptions")

Adyen/Assets/en-US.lproj/Localizable.strings

@@ -33,7 +33,8 @@
 "adyen.card.cvcItem.invalid" = "Invalid CVC / CVV format";
 "adyen.card.cvcItem.title" = "Security code";
 "adyen.card.cvcItem.placeholder" = "123";
-"adyen.card.securityCode.description" = "Enter the security code for %@ to complete the payment of %@";
+"adyen.card.securityCode.title" = "Enter security code";
+"adyen.card.securityCode.description" = "Enter the security code for %@";
 "adyen.card.stored.title" = "Verify your card";
 "adyen.card.stored.message" = "Please enter the CVC code for %@";
 "adyen.card.stored.expires" = "Expires %@";
@@ -273,5 +274,5 @@
 "adyen.card.scanner.camera.access.denied.alert.title" = "Allow camera access";
 "adyen.card.scanner.camera.access.denied.alert.message" = "Access was previously denied. To scan cards, please grant access from Settings.";
 "adyen.card.scanner.camera.access.denied.alert.settingsButton.title" = "Open Settings";
-"adyen.preselectedPaymentMethod.subtitle" = "Use %@ to pay %@";
+"adyen.preselectedPaymentMethod.subtitle" = "Use %@";
 "adyen.preselectedPaymentMethod.otherOptions" = "Other payment options";

AdyenCard/Components/Card/CardComponent.swift

@@ -150,7 +150,7 @@ public class CardComponent: PresentableComponent,
         }
         // TODO: FIX StoredCard UI
         if configuration.stored.showsSecurityCodeField {
-            let storedComponent = StoredCardComponent(storedCardPaymentMethod: paymentMethod, context: context)
+            let storedComponent = StoredCardComponent(storedCardPaymentMethod: paymentMethod, context: context, theme: configuration.theme)
             storedComponent.localizationParameters = configuration.localizationParameters
             return storedComponent
         } else {

AdyenCard/Components/Stored Card/StoredCardComponent.swift

@@ -7,6 +7,9 @@
 @_spi(AdyenInternal) import Adyen
 import Foundation
 import UIKit
+#if canImport(AdyenUI)
+    import AdyenUI
+#endif
 
 /// A component that provides a form for stored card payments.
 @MainActor
@@ -26,13 +29,17 @@ package final class StoredCardComponent: StoredPaymentComponent, Localizable {
     package var localizationParameters: LocalizationParameters?
 
     private let storedCardPaymentMethod: StoredCardPaymentMethod
-    
+
+    private let theme: CheckoutTheme
+
     package init(
         storedCardPaymentMethod: StoredCardPaymentMethod,
-        context: AdyenContext
+        context: AdyenContext,
+        theme: CheckoutTheme
     ) {
         self.storedCardPaymentMethod = storedCardPaymentMethod
         self.context = context
+        self.theme = theme
     }
 
     package var viewController: UIViewController {

AdyenCard/Components/Stored Card/StoredCardInputView/StoredCardInputViewController.swift

@@ -19,7 +19,7 @@ internal class StoredCardInputViewController: UIViewController {
 
     private enum Constants {
         static let chevronBackwardImage = "chevron.backward"
-        static let contentPadding: CGFloat = 24
+        static let contentPadding: CGFloat = 16
         static let distanceBetweenImageAndLabels: CGFloat = 12
         static let distanceFromButtonsToLabels: CGFloat = 24
         static let buttonsBottomPadding: CGFloat = 0
@@ -151,27 +151,22 @@ internal class StoredCardInputViewController: UIViewController {
         scrollView.addSubview(contentStackView)
 
         [
-            topContentStackView,
-            securityCodeItemView,
-            buttonsStackView
-        ].forEach(contentStackView.addArrangedSubview)
+            titleLabel,
+            subtitleLabel
+        ].forEach(labelsStackView.addArrangedSubview)
 
         [
             cardImageView,
             labelsStackView
         ].forEach(topContentStackView.addArrangedSubview)
 
-        [
-            titleLabel,
-            subtitleLabel
-        ].forEach(labelsStackView.addArrangedSubview)
+        buttonsStackView.addArrangedSubview(primaryButton)
 
         [
-            titleLabel,
-            subtitleLabel
-        ].forEach(labelsStackView.addArrangedSubview)
-
-        buttonsStackView.addArrangedSubview(primaryButton)
+            topContentStackView,
+            securityCodeItemView,
+            buttonsStackView
+        ].forEach(contentStackView.addArrangedSubview)
 
         configureConstraints()
         configureContent()
@@ -185,6 +180,7 @@ internal class StoredCardInputViewController: UIViewController {
     }
 
     private func configureConstraints() {
+        // TODO: Robert: StoredView: Auto layout Constraints breaks. This needs a separate investigation as this involves the FormCardSecurityCodeItemView
         NSLayoutConstraint.activate([
             scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
             scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
@@ -193,8 +189,8 @@ internal class StoredCardInputViewController: UIViewController {
 
             contentStackView.topAnchor.constraint(equalTo: scrollView.topAnchor),
             contentStackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: Constants.contentPadding),
-            contentStackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -Constants.contentPadding),
-            contentStackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -Constants.buttonsBottomPadding)
+            contentStackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -Constants.buttonsBottomPadding),
+            contentStackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor, constant: -2 * Constants.contentPadding)
         ])
     }
 

AdyenCard/Components/Stored Card/StoredCardInputView/StoredCardInputViewModel.swift

@@ -57,7 +57,6 @@ internal final class StoredCardInputViewModel: StoredCardInputViewModelProtocol
 
     /// This informs the status of the payment after submitting the security code.
     internal var cardDetailsCompletionHandler: Completion<Result<CardDetails, Error>>?
-    internal var otherPaymentOptionsHandler: VoidCompletion?
     internal var closeHandler: VoidCompletion?
 
     internal init(
@@ -103,39 +102,28 @@ internal final class StoredCardInputViewModel: StoredCardInputViewModelProtocol
         localizedString(.cardSecurityCodeTitle, localizationParameters)
     }
 
-    /// We construct something like - Enter the security code for BOLD[Visa •••• 4556] to complete the payment of BOLD[$140.98]
     // TODO: Robert: StoredView: This & the pay button title needs to change according to the amount.
+    /// We construct something like - Enter the security code for BOLD[Visa •••• 4556]
     internal var subtitleText: NSAttributedString {
         let displayInformation = storedCardPaymentMethod.displayInformation(using: localizationParameters)
         let paymentMethodTitle = storedCardPaymentMethod.name + " " + displayInformation.title
-        let localizedString = localizedString(.cardSecurityCodeDescription, localizationParameters, paymentMethodTitle, formattedAmount)
+        let localizedString = localizedString(.cardSecurityCodeDescription, localizationParameters, paymentMethodTitle)
 
         let attributed = NSMutableAttributedString(string: localizedString)
 
         let range = (localizedString as NSString).range(of: paymentMethodTitle)
         attributed.addAttribute(.font, value: theme.elements.labels.bodyEmphasized.font, range: range)
         attributed.addAttribute(.foregroundColor, value: theme.elements.labels.bodyEmphasized.color, range: range)
 
-        let amountRange = (localizedString as NSString).range(of: formattedAmount)
-        attributed.addAttribute(.font, value: theme.elements.labels.bodyEmphasized.font, range: amountRange)
-        attributed.addAttribute(.foregroundColor, value: theme.elements.labels.bodyEmphasized.color, range: amountRange)
-
         return attributed
     }
 
-    private var formattedAmount: String {
-        guard let amount,
-              let formatted = AmountFormatter.formatted(
-                  amount: amount.value,
-                  currencyCode: amount.currencyCode
-              ) else {
-            return ""
-        }
-        return formatted
-    }
-
     internal var submitButtonTitle: String {
-        localizedString(.submitButtonFormatted, localizationParameters, formattedAmount)
+        localizedSubmitButtonTitle(
+            with: amount,
+            style: .immediate,
+            localizationParameters
+        )
     }
 
     internal func viewDidLoad() {

AdyenCheckout/CheckoutComponentBuilder.swift

@@ -83,7 +83,8 @@ internal enum CheckoutComponentBuilder {
             case let storedCard as StoredCardPaymentMethod:
                 StoredCardComponent(
                     storedCardPaymentMethod: storedCard,
-                    context: context
+                    context: context,
+                    theme: configuration.theme
                 )
         #endif
 

AdyenDropIn/Modules/PreselectedPaymentMethod/PreselectedPaymentMethodViewModel.swift

@@ -101,20 +101,16 @@ internal final class PreselectedPaymentMethodViewModel: PreselectedPaymentMethod
         return displayInformation.title
     }
 
-    private var formattedAmount: String {
-        guard let amount = component.context.amount,
-              let formatted = AmountFormatter.formatted(amount: amount.value, currencyCode: amount.currencyCode) else {
-            return ""
-        }
-        return formatted
-    }
-
     internal var subtitleText: String {
-        localizedString(.preselectedPaymentMethodSubtitle, localizationParameters, component.paymentMethod.name, formattedAmount)
+        localizedString(.preselectedPaymentMethodSubtitle, localizationParameters, component.paymentMethod.name)
     }
 
     internal var submitButtonTitle: String {
-        localizedString(.submitButtonFormatted, localizationParameters, formattedAmount)
+        localizedSubmitButtonTitle(
+            with: component.context.amount,
+            style: .immediate,
+            localizationParameters
+        )
     }
 
     internal func submitPayment() {

Tests/IntegrationTests/Card Tests/StoredCardComponentTests.swift

@@ -6,6 +6,7 @@
 
 @_spi(AdyenInternal) @testable import Adyen
 @testable @_spi(AdyenInternal) import AdyenCard
+@testable import AdyenUI
 import XCTest
 
 @MainActor
@@ -29,7 +30,7 @@ class StoredCardComponentTests: XCTestCase {
     // let payment = Payment(amount: Amount(value: 174, currencyCode: "EUR"), countryCode: "NL")
 
     func testUIWithClientKey() throws {
-        let sut = StoredCardComponent(storedCardPaymentMethod: method, context: context)
+        let sut = StoredCardComponent(storedCardPaymentMethod: method, context: context, theme: CheckoutTheme())
 
         presentOnRoot(sut.viewController)
 
@@ -44,7 +45,7 @@ class StoredCardComponentTests: XCTestCase {
     }
 
     func testPaymentSubmitWithValidPublicKey() throws {
-        let sut = StoredCardComponent(storedCardPaymentMethod: method, context: context)
+        let sut = StoredCardComponent(storedCardPaymentMethod: method, context: context, theme: CheckoutTheme())
 
         let delegateExpectation = expectation(description: "expect delegate to be called.")
         let delegate = PaymentComponentDelegateMock()
@@ -93,7 +94,7 @@ class StoredCardComponentTests: XCTestCase {
             publicKey: "invalid_key",
             analyticsProvider: AnalyticsProviderMock()
         )
-        let sut = StoredCardComponent(storedCardPaymentMethod: method, context: contextWithInvalidKey)
+        let sut = StoredCardComponent(storedCardPaymentMethod: method, context: contextWithInvalidKey, theme: CheckoutTheme())
 
         let delegate = PaymentComponentDelegateMock()
         delegate.onDidSubmit = { _, _ in
@@ -136,7 +137,7 @@ class StoredCardComponentTests: XCTestCase {
             expiryYear: "22",
             holderName: "holderName"
         )
-        let sut = StoredCardComponent(storedCardPaymentMethod: method, context: context)
+        let sut = StoredCardComponent(storedCardPaymentMethod: method, context: context, theme: CheckoutTheme())
 
         presentOnRoot(sut.viewController)
 
@@ -175,7 +176,7 @@ class StoredCardComponentTests: XCTestCase {
     }
 
     func testCVCLimitForNonAMEX() throws {
-        let sut = StoredCardComponent(storedCardPaymentMethod: method, context: context)
+        let sut = StoredCardComponent(storedCardPaymentMethod: method, context: context, theme: CheckoutTheme())
 
         presentOnRoot(sut.viewController)
 
@@ -208,7 +209,8 @@ class StoredCardComponentTests: XCTestCase {
         let paymentMethod = storedCardPaymentMethod(brand: .masterCard)
         let sut = StoredCardComponent(
             storedCardPaymentMethod: paymentMethod,
-            context: context
+            context: context,
+            theme: CheckoutTheme()
         )
 
         // When

Tests/IntegrationTests/Card Tests/StoredCardInputViewModelTests.swift

@@ -66,19 +66,47 @@ struct StoredCardInputViewModelTests {
     // MARK: - UI Text
 
     @Test
-    func textProperties() {
+    func textUI_WhenAmountIsAvailable() {
         // Given
         let amount = Amount(value: 14098, currencyCode: "USD")
+        let expectedTitle = "Enter security code"
+        let expectedSubTitle = "Enter the security code for VISA •••• 4556"
+        let expectedButtonTitle = "Pay $140.98"
         let sut = makeSUT(name: "VISA", lastFour: "4556", amount: amount)
 
         // Then
-        #expect(!sut.titleText.isEmpty)
+        #expect(sut.titleText == expectedTitle)
+        #expect(sut.subtitleText.string == expectedSubTitle)
+        #expect(sut.submitButtonTitle == expectedButtonTitle)
+    }
+
+    @Test
+    func textUI_WhenAmountIsZero() {
+        // Given
+        let amount = Amount(value: 0, currencyCode: "USD")
+        let expectedTitle = "Enter security code"
+        let expectedSubTitle = "Enter the security code for VISA •••• 4556"
+        let expectedButtonTitle = "Confirm preauthorization"
+        let sut = makeSUT(name: "VISA", lastFour: "4556", amount: amount)
+
+        // Then
+        #expect(sut.titleText == expectedTitle)
+        #expect(sut.subtitleText.string == expectedSubTitle)
+        #expect(sut.submitButtonTitle == expectedButtonTitle)
+    }
+
+    @Test
+    func textUI_WhenAmountIsNil() {
+        // Given
+        let expectedTitle = "Enter security code"
+        let expectedSubTitle = "Enter the security code for VISA •••• 4556"
+        let expectedButtonTitle = "Pay"
+        let sut = makeSUT(name: "VISA", lastFour: "4556", amount: nil)
 
-        // subtitleText contains payment method info and formatted amount
-        let subtitle = sut.subtitleText.string
-        #expect(subtitle == "Enter the security code for VISA •••• 4556 to complete the payment of $140.98")
-        // submitButtonTitle contains formatted amount
-        #expect(sut.submitButtonTitle.contains("$140.98"))
+        // Then
+        #expect(sut.titleText == expectedTitle)
+        #expect(sut.subtitleText.string == expectedSubTitle)
+        #expect(sut.submitButtonTitle == expectedButtonTitle)
     }
 
     @Test(arguments: StoredCardTestData.amounts)
@@ -104,7 +132,7 @@ struct StoredCardInputViewModelTests {
 
         // Then
         #expect(closeHandlerCalled)
-        #expect(sut.securityCodeItem.value == "")
+        #expect(sut.securityCodeItem.value.isEmpty)
     }
 
     @Test
@@ -113,20 +141,18 @@ struct StoredCardInputViewModelTests {
         let sut = makeSUT()
         sut.securityCodeItem.value = "999"
         sut.closeHandler = {}
-        sut.otherPaymentOptionsHandler = {}
 
         // When
         sut.dismiss()
 
         // Then
-        #expect(sut.securityCodeItem.value == "", "Security code should be cleared after dismiss")
+        #expect(sut.securityCodeItem.value.isEmpty, "Security code should be cleared after dismiss")
     }
 
     @Test func navigation_withoutHandlers_doesNotCrash() {
         // Given
         let sut = makeSUT()
         sut.closeHandler = nil
-        sut.otherPaymentOptionsHandler = nil
 
         // When / Then - no crash
         sut.dismiss()
@@ -274,7 +300,6 @@ enum StoredCardTestData {
 
     static let amounts: [AmountData] = [
         AmountData(amount: Amount(value: 100, currencyCode: "EUR"), expectedFormatted: "€1.00"),
-        AmountData(amount: Amount(value: 14098, currencyCode: "USD"), expectedFormatted: "$140.98"),
-        AmountData(amount: Amount(value: 0, currencyCode: "GBP"), expectedFormatted: "£0.00")
+        AmountData(amount: Amount(value: 14098, currencyCode: "USD"), expectedFormatted: "$140.98")
     ]
 }