SDKI-148: Improve multiline card form layout and refactor line text field's error representation

SeamlessPay/UI/Components/LineTextField.swift

@@ -11,10 +11,12 @@ import Foundation
 public class LineTextField: SPFormTextField {
   // MARK: - Constants
   private enum Constants {
-    static let paddingX: CGFloat = 10.0
+    static let textOriginY: CGFloat = 12.5
+    static let paddingX: CGFloat = 15.0
     static let paddingYElements: CGFloat = 3.0
-    static let paddingYFloatLabel: CGFloat = 5.0
+    static let paddingYFloatLabel: CGFloat = 10.0
     static let animationDuration: TimeInterval = 0.2
+    static let textInputFieldHeight: CGFloat = 70.0
   }
 
   // MARK: - UI Components
@@ -82,7 +84,7 @@ public class LineTextField: SPFormTextField {
     get { errorLabel.text }
     set {
       errorLabel.text = newValue
-      updateErrorLabel()
+      updateAppearance()
     }
   }
 
@@ -98,11 +100,6 @@ public class LineTextField: SPFormTextField {
     return originX
   }
 
-  private var fontHeight: CGFloat {
-    let font = font ?? .systemFont(ofSize: 18)
-    return ceil(font.lineHeight)
-  }
-
   private var floatingPlaceholderHeight: CGFloat {
     floatingPlaceholderLabel.textRect(
       forBounds: CGRect(
@@ -115,9 +112,16 @@ public class LineTextField: SPFormTextField {
     ).height
   }
 
-  private var errorFontHeight: CGFloat {
-    let font = errorLabel.font ?? .systemFont(ofSize: 14)
-    return ceil(font.lineHeight)
+  private var errorMessageHeight: CGFloat {
+    let height: CGFloat
+    if errorMessage?.isEmpty ?? true {
+      height = 0
+    } else {
+      height = appearance.errorFont.lineHeight
+    }
+
+    return height
+
   }
 
   private var floatingPlaceholderWidth: CGFloat {
@@ -244,9 +248,9 @@ public class LineTextField: SPFormTextField {
   private func updateErrorLabel() {
     errorLabel.frame = CGRect(
       x: 0,
-      y: frame.height - errorFontHeight,
-      width: bounds.width - originX,
-      height: errorFontHeight
+      y: frame.height - errorMessageHeight,
+      width: bounds.width,
+      height: errorMessageHeight
     )
   }
 
@@ -255,7 +259,7 @@ public class LineTextField: SPFormTextField {
       x: 0,
       y: 0,
       width: frame.width,
-      height: frame.height - errorFontHeight - Constants.paddingYElements
+      height: frame.height - errorMessageHeight - Constants.paddingYElements
     )
   }
 
@@ -270,8 +274,9 @@ public class LineTextField: SPFormTextField {
       x: originX,
       y: toFloat
         ? Constants.paddingYFloatLabel
-        : (frame.height - floatingPlaceholderHeight - errorFontHeight
-          - Constants.paddingYElements) / 2,
+        : (
+          frame.height - floatingPlaceholderHeight - errorMessageHeight - Constants.paddingYElements
+        ) / 2,
       width: floatingPlaceholderWidth,
       height: floatingPlaceholderHeight
     )
@@ -304,15 +309,15 @@ public class LineTextField: SPFormTextField {
   override public func leftViewRect(forBounds bounds: CGRect) -> CGRect {
     var rect = super.leftViewRect(forBounds: bounds)
     rect.origin.y
-      = (bounds.height - rect.size.height - errorFontHeight - Constants.paddingYElements) / 2
+      = (bounds.height - rect.size.height - errorMessageHeight - Constants.paddingYElements) / 2
     rect.origin.x += Constants.paddingX
     return rect
   }
 
   override public func rightViewRect(forBounds bounds: CGRect) -> CGRect {
     var rect = super.rightViewRect(forBounds: bounds)
     rect.origin.y
-      = (bounds.height - rect.size.height - errorFontHeight - Constants.paddingYElements) / 2
+      = (bounds.height - rect.size.height - errorMessageHeight - Constants.paddingYElements) / 2
     rect.origin.x -= Constants.paddingX
     return rect
   }
@@ -324,11 +329,20 @@ public class LineTextField: SPFormTextField {
   }
 
   private func insetRectForBounds(rect: CGRect) -> CGRect {
-    CGRect(
+    let rect = CGRect(
       x: originX,
-      y: 0,
-      width: rect.size.width - originX - Constants.paddingX,
-      height: rect.height
+      y: Constants.textOriginY,
+      width: rect.width - originX - Constants.paddingX,
+      height: rect.height - errorMessageHeight
+    )
+
+    return rect
+  }
+
+  override public var intrinsicContentSize: CGSize {
+    return CGSize(
+      width: UIView.noIntrinsicMetric,
+      height: Constants.textInputFieldHeight + errorMessageHeight + Constants.paddingYElements
     )
   }
 }
@@ -352,33 +366,35 @@ extension LineTextField {
 
       rightImageView.tintColor = appearance.imageFocusValidColor
       tintColor = appearance.tintValidColor
-      errorLabel.textColor = appearance.tintValidColor
+      errorLabel.textColor = errorColor
     case (true, false): // focus and invalid
       backgroundFrameLayer.borderColor = appearance.borderFocusInvalidColor.cgColor
       backgroundFrameLayer.backgroundColor = appearance.backgroundFocusInvalidColor.cgColor
       floatingPlaceholderLabel.textColor = appearance.floatingPlaceholderFocusInvalidColor
 
       rightImageView.tintColor = appearance.imageFocusInvalidColor
       tintColor = appearance.tintInvalidColor
-      errorLabel.textColor = appearance.tintInvalidColor
+      errorLabel.textColor = errorColor
     case (false, true): // not focus and valid
       backgroundFrameLayer.borderColor = appearance.borderInactiveColor.cgColor
       backgroundFrameLayer.backgroundColor = appearance.backgroundInactiveColor.cgColor
       floatingPlaceholderLabel.textColor = appearance.floatingPlaceholderInactiveColor
 
       rightImageView.tintColor = appearance.imageInactiveColor
       tintColor = appearance.tintValidColor
-      errorLabel.textColor = appearance.tintValidColor
+      errorLabel.textColor = errorColor
     case (false, false): // not focus and invalid
       backgroundFrameLayer.borderColor = appearance.borderInvalidColor.cgColor
       backgroundFrameLayer.backgroundColor = appearance.backgroundInvalidColor.cgColor
       floatingPlaceholderLabel.textColor = appearance.floatingPlaceholderInvalidColor
 
       rightImageView.tintColor = appearance.imageInvalidColor
       tintColor = appearance.tintInvalidColor
-      errorLabel.textColor = appearance.tintInvalidColor
+      errorLabel.textColor = errorColor
     }
 
-    layoutSubviews()
+    invalidateIntrinsicContentSize()
+    setNeedsLayout()
+    layoutIfNeeded()
   }
 }

SeamlessPay/UI/Models/StyleOptions.swift

@@ -96,7 +96,7 @@ public struct Shapes: Equatable {
   }
 
   public static var `default`: Shapes {
-    Shapes(cornerRadius: 8.0)
+    Shapes(cornerRadius: 5.0)
   }
 }
 

SeamlessPay/UI/PaymentInputs/Direct/MultiLineCardForm.swift

@@ -79,6 +79,7 @@ public class MultiLineCardForm: UIControl, CardForm {
     textField.autoFormattingBehavior = .cardNumbers
     textField.tag = SPCardFieldType.number.rawValue
     textField.floatingPlaceholder = "Card number"
+    textField.rightViewMode = .always
 
     return textField
   }()
@@ -87,7 +88,7 @@ public class MultiLineCardForm: UIControl, CardForm {
     let textField = buildTextField()
     textField.autoFormattingBehavior = .expiration
     textField.tag = SPCardFieldType.expiration.rawValue
-    textField.floatingPlaceholder = "Expiration date"
+    textField.floatingPlaceholder = "Expiry date"
 
     return textField
   }()
@@ -96,6 +97,7 @@ public class MultiLineCardForm: UIControl, CardForm {
     let textField = buildTextField()
     textField.tag = SPCardFieldType.CVC.rawValue
     textField.floatingPlaceholder = "CVC"
+    textField.rightViewMode = .always
 
     return textField
   }()
@@ -115,7 +117,7 @@ public class MultiLineCardForm: UIControl, CardForm {
     stackView.axis = .horizontal
     stackView.spacing = 12
     stackView.distribution = .fillEqually
-    stackView.alignment = .fill
+    stackView.alignment = .top
 
     stackView.translatesAutoresizingMaskIntoConstraints = false
 
@@ -129,49 +131,29 @@ public class MultiLineCardForm: UIControl, CardForm {
     return label
   }()
 
-  private lazy var postalCodeStackView: UIStackView = {
-    let stackView = UIStackView(arrangedSubviews: [postalCodeTitleLabel, postalCodeField])
-    stackView.axis = .vertical
-    stackView.spacing = 6
-    stackView.distribution = .fill
-    stackView.alignment = .fill
-
-    stackView.translatesAutoresizingMaskIntoConstraints = false
-
-    return stackView
-  }()
-
   private lazy var cardInformationTitleLabel: UILabel = {
     let label = buildTitleLabel()
     label.text = "CARD INFORMATION"
 
     return label
   }()
 
-  private lazy var cardInformationStackView: UIStackView = {
-    let stackView = UIStackView(arrangedSubviews: [cardInformationTitleLabel, numberField])
-    stackView.axis = .vertical
-    stackView.spacing = 6
-    stackView.distribution = .fill
-    stackView.alignment = .fill
-
-    stackView.translatesAutoresizingMaskIntoConstraints = false
-
-    return stackView
-  }()
-
   private lazy var stackView: UIStackView = {
     let stackView = UIStackView(
       arrangedSubviews: [
-        cardInformationStackView,
+        cardInformationTitleLabel,
+        numberField,
         expirationAndCvcStackView,
-        postalCodeStackView,
+        postalCodeTitleLabel,
+        postalCodeField
       ]
     )
     stackView.axis = .vertical
-    stackView.spacing = 14
+    stackView.spacing = 10
     stackView.distribution = .fill
     stackView.alignment = .fill
+    stackView.setCustomSpacing(12, after: numberField)
+    stackView.setCustomSpacing(28, after: expirationAndCvcStackView)
 
     stackView.translatesAutoresizingMaskIntoConstraints = false
 
@@ -181,9 +163,6 @@ public class MultiLineCardForm: UIControl, CardForm {
   // MARK: - Internal
   let viewModel: CardFormViewModel = .init()
 
-  // MARK: - Constants
-  private let textFieldHeight: CGFloat = 84
-
   // MARK: - Initializers
   override public init(frame: CGRect) {
     styleOptions = .default
@@ -224,10 +203,9 @@ private extension MultiLineCardForm {
 
   func configureViews() {
     cvcField.isHidden = !viewModel.cvcDisplayed
-    postalCodeStackView.isHidden = !viewModel.postalCodeDisplayed
-
-    numberField.rightViewMode = .always
-    cvcField.rightViewMode = .always
+    [postalCodeTitleLabel, postalCodeField].forEach { view in
+      view.isHidden = !viewModel.postalCodeDisplayed
+    }
 
     updateImages()
   }
@@ -243,13 +221,6 @@ private extension MultiLineCardForm {
       constraint.priority = UILayoutPriority(rawValue: UILayoutPriority.required.rawValue - 1)
     }
     NSLayoutConstraint.activate(constraints)
-
-    NSLayoutConstraint.activate([
-      numberField.heightAnchor.constraint(equalToConstant: textFieldHeight),
-      expirationField.heightAnchor.constraint(equalToConstant: textFieldHeight),
-      cvcField.heightAnchor.constraint(equalToConstant: textFieldHeight),
-      postalCodeField.heightAnchor.constraint(equalToConstant: textFieldHeight),
-    ])
   }
 
   // swiftlint:enable function_body_length
@@ -264,7 +235,6 @@ private extension MultiLineCardForm {
     textField.clearButtonMode = .never
 
     textField.backgroundColor = .clear
-    textField.font = .systemFont(ofSize: 18)
     textField.defaultColor = .darkText
     textField.errorColor = .systemRed
 
@@ -276,7 +246,6 @@ private extension MultiLineCardForm {
   func buildTitleLabel() -> UILabel {
     let label = UILabel()
     label.translatesAutoresizingMaskIntoConstraints = false
-    label.font = .systemFont(ofSize: 16)
     label.numberOfLines = 0
     label.textAlignment = .left
 
@@ -738,7 +707,7 @@ extension MultiLineCardForm {
       textInvalidColor: theme.danger,
       tintValidColor: theme.primary,
       tintInvalidColor: theme.danger,
-      imageInactiveColor: theme.neutral,
+      imageInactiveColor: theme.neutral.withAlphaComponent(0.1),
       imageInvalidColor: theme.danger,
       imageFocusValidColor: theme.primary,
       imageFocusInvalidColor: theme.danger,