Skip to content

Commit

Permalink
update footer view for payment sheet
Browse files Browse the repository at this point in the history
  • Loading branch information
virginiacook committed Dec 12, 2023
1 parent 964c963 commit cbaed50
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,7 @@
C113FE145760C5CE94536872 /* CustomerPaymentOption.swift in Sources */ = {isa = PBXBuildFile; fileRef = 926A26F7B0C8469E610C5ED8 /* CustomerPaymentOption.swift */; };
C346B534D57A952D4415ADFD /* Intent+Link.swift in Sources */ = {isa = PBXBuildFile; fileRef = 04C8047FD8994D3FAA3D1A7A /* Intent+Link.swift */; };
C5E3750BBCA700CF364F7578 /* PaymentSheetFormFactory+OXXO.swift in Sources */ = {isa = PBXBuildFile; fileRef = F20379AE078D68A0AC83A6C5 /* PaymentSheetFormFactory+OXXO.swift */; };
CAF640672B28DBD900481B4C /* SheetFooterView.swift in Sources */ = {isa = PBXBuildFile; fileRef = CAF640662B28DBD900481B4C /* SheetFooterView.swift */; };
CCA34CD7C6B7595A1D6AFF87 /* LinkSecureCookieStore.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3BD6332FC5A3AE72AA22CC40 /* LinkSecureCookieStore.swift */; };
CD19725E26DBDB9960D828CB /* BottomSheetPresentationAnimator.swift in Sources */ = {isa = PBXBuildFile; fileRef = E8F09CF961C943E36D76860F /* BottomSheetPresentationAnimator.swift */; };
CF2AD2C7F761C46AE559E563 /* SavedPaymentOptionsViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2B3ECDF6CF9AABD573F86CA2 /* SavedPaymentOptionsViewController.swift */; };
Expand Down Expand Up @@ -533,6 +534,7 @@
C90A2636C2A577AF36FB793B /* PaymentSheetLoaderTest.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PaymentSheetLoaderTest.swift; sourceTree = "<group>"; };
C94104A367EAF6C8785C17A1 /* FormSpecProvider.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FormSpecProvider.swift; sourceTree = "<group>"; };
C9726902C985C99F69E6880C /* CustomerSheet+PaymentMethodAvailability.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "CustomerSheet+PaymentMethodAvailability.swift"; sourceTree = "<group>"; };
CAF640662B28DBD900481B4C /* SheetFooterView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SheetFooterView.swift; sourceTree = "<group>"; };
CBB05D43F6A475F28E0BD38D /* DictionaryTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DictionaryTests.swift; sourceTree = "<group>"; };
CBCFE3D39D670C3C77C59722 /* cs-CZ */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = "cs-CZ"; path = "cs-CZ.lproj/Localizable.strings"; sourceTree = "<group>"; };
CC3498CF4AEAA8F169616CDF /* STPCardBrandChoice.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = STPCardBrandChoice.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -1003,6 +1005,7 @@
6193FC5E14E1EC459E31B5F4 /* SheetNavigationButton.swift */,
B8A49995CE949176F7A8C71F /* SimpleMandateTextView.swift */,
64D658AC15478BF1E0A76B9D /* TestModeView.swift */,
CAF640662B28DBD900481B4C /* SheetFooterView.swift */,
);
path = Views;
sourceTree = "<group>";
Expand Down Expand Up @@ -1590,6 +1593,7 @@
EB190E908B567CD90D5B0645 /* STPImageLibrary.swift in Sources */,
40806EF506CB719299FC90CC /* STPLocalizedString.swift in Sources */,
71132CE036C3EE0655ECD2DB /* STPStringUtils.swift in Sources */,
CAF640672B28DBD900481B4C /* SheetFooterView.swift in Sources */,
1AF3BBA86D643AAF26CD0E2B /* StripePaymentSheet+Exports.swift in Sources */,
73F3E8DCF2314972A162B2A3 /* StripePaymentSheetBundleLocator.swift in Sources */,
73EE441CF71707651109CE19 /* ConsumerSession+LookupResponse.swift in Sources */,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,17 @@ protocol BottomSheetContentViewController: UIViewController {

/// - Note: Implementing `navigationBar` as a computed variable will result in undefined behavior.
var navigationBar: SheetNavigationBar { get }
var footerView: UIView { get }
var requiresFullScreen: Bool { get }
func didTapOrSwipeToDismiss()
}


extension BottomSheetContentViewController {
var footerView: UIView {
return UIView()
}
}
/// A VC containing a content view controller and manages the layout of its SheetNavigationBar.
/// For internal SDK use only
@objc(STP_Internal_BottomSheetViewController)
Expand All @@ -41,6 +48,9 @@ class BottomSheetViewController: UIViewController, BottomSheetPresentable {
private lazy var contentContainerView: UIStackView = {
return UIStackView()
}()
private lazy var footerViewContainerView: UIStackView = {
return UIStackView()
}()

var contentStack: [BottomSheetContentViewController] = [] {
didSet {
Expand Down Expand Up @@ -92,6 +102,9 @@ class BottomSheetViewController: UIViewController, BottomSheetPresentable {
self.contentContainerView.layoutIfNeeded()

animateHeightChange(forceAnimation: true)
oldContentViewController.footerView.removeFromSuperview()
footerViewContainerView.subviews.forEach({ $0.removeFromSuperview() })
footerViewContainerView.addArrangedSubview(contentViewController.footerView)
// Add its navigation bar if necessary
oldContentViewController.navigationBar.removeFromSuperview()
navigationBarContainerView.addArrangedSubview(contentViewController.navigationBar)
Expand Down Expand Up @@ -121,6 +134,7 @@ class BottomSheetViewController: UIViewController, BottomSheetPresentable {

addChild(contentViewController)
contentViewController.didMove(toParent: self)
footerViewContainerView.addArrangedSubview(contentViewController.footerView)
contentContainerView.addArrangedSubview(contentViewController.view)
navigationBarContainerView.addArrangedSubview(contentViewController.navigationBar)
self.view.backgroundColor = appearance.colors.background
Expand All @@ -139,19 +153,23 @@ class BottomSheetViewController: UIViewController, BottomSheetPresentable {

view.backgroundColor = .systemBackground
registerForKeyboardNotifications()
[scrollView, navigationBarContainerView].forEach({ // Note: Order important here, navigation bar should be on top
[footerViewContainerView, scrollView, navigationBarContainerView].forEach({ // Note: Order important here, navigation bar should be on top
view.addSubview($0)
$0.translatesAutoresizingMaskIntoConstraints = false
})
NSLayoutConstraint.activate([
navigationBarContainerView.topAnchor.constraint(equalTo: view.topAnchor), // For unknown reasons, safeAreaLayoutGuide can have incorrect padding; we'll rely on our superview instead
navigationBarContainerView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
navigationBarContainerView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
footerViewContainerView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
footerViewContainerView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
footerViewContainerView.trailingAnchor.constraint(equalTo: view.trailingAnchor),

scrollView.topAnchor.constraint(equalTo: navigationBarContainerView.bottomAnchor),
scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
scrollView.bottomAnchor.constraint(equalTo: footerViewContainerView.topAnchor),

])

contentContainerView.translatesAutoresizingMaskIntoConstraints = false
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,9 @@ class PaymentSheetViewController: UIViewController {
private lazy var bottomNoticeTextField: UITextView = {
return ElementsUI.makeNoticeTextField(theme: configuration.appearance.asElementsTheme)
}()
internal lazy var footerView: UIView = {
return SheetFooterView(button: buyButton)
}()
private lazy var buyButton: ConfirmButton = {
let callToAction: ConfirmButton.CallToActionType = {
if let customCtaLabel = configuration.primaryButtonLabel {
Expand Down Expand Up @@ -209,15 +212,13 @@ class PaymentSheetViewController: UIViewController {

// One stack view contains all our subviews
let stackView = UIStackView(arrangedSubviews: [
headerLabel, walletHeader, paymentContainerView, errorLabel, buyButton, bottomNoticeTextField,
headerLabel, walletHeader, paymentContainerView, errorLabel, bottomNoticeTextField,
])
stackView.directionalLayoutMargins = PaymentSheetUI.defaultMargins
stackView.isLayoutMarginsRelativeArrangement = true
stackView.spacing = PaymentSheetUI.defaultPadding
stackView.axis = .vertical
stackView.bringSubviewToFront(headerLabel)
stackView.setCustomSpacing(32, after: paymentContainerView)
stackView.setCustomSpacing(0, after: buyButton)

// Hack: Payment container needs to extend to the edges, so we'll 'cancel out' the layout margins with negative padding
paymentContainerView.directionalLayoutMargins = .insets(
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
//
// SheetFooterView.swift
// StripePaymentSheet
//
// Created by Virginia Cook on 12/12/23.
//

import Foundation
@_spi(STP) import StripeCore
@_spi(STP) import StripeUICore
import UIKit
/// For internal SDK use only
@objc(STP_Internal_SheetFooterView)
class SheetFooterView: UIView {

private let stackView: UIStackView = {
let stackView = UIStackView()
stackView.axis = .vertical
stackView.alignment = .fill
stackView.distribution = .fill
stackView.spacing = 12.0
return stackView
}()

private let topLine: UIView = {
let line = UIView()
line.backgroundColor = UIColor(red: 0.86, green: 0.86, blue: 0.86, alpha: 1.00)
line.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
line.heightAnchor.constraint(equalToConstant: 1)
])
return line
}()

private let button: UIView

// MARK: - Initializers

init(button: UIView) {
self.button = button
super.init(frame: .zero)
commonInit()
}

required init?(coder aDecoder: NSCoder) {
self.button = UIView()
super.init(coder: aDecoder)
commonInit()
}

private func commonInit() {
setupViews()
setupConstraints()
}

// MARK: - Setup Methods

private func setupViews() {
addSubview(stackView)
stackView.addArrangedSubview(topLine)

// Create a container view for the button with horizontal margins
let buttonContainerView = UIView()
buttonContainerView.addSubview(button)

// Set up constraints for the button inside the container view
button.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
button.leadingAnchor.constraint(equalTo: buttonContainerView.leadingAnchor, constant: PaymentSheetUI.defaultPadding),
button.trailingAnchor.constraint(equalTo: buttonContainerView.trailingAnchor, constant: -PaymentSheetUI.defaultPadding),
button.topAnchor.constraint(equalTo: buttonContainerView.topAnchor),
button.bottomAnchor.constraint(equalTo: buttonContainerView.bottomAnchor)
])

stackView.addArrangedSubview(buttonContainerView)
}

private func setupConstraints() {
stackView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
stackView.leadingAnchor.constraint(equalTo: leadingAnchor),
stackView.trailingAnchor.constraint(equalTo: trailingAnchor),
stackView.topAnchor.constraint(equalTo: topAnchor),
stackView.bottomAnchor.constraint(equalTo: bottomAnchor)
])
}
}

0 comments on commit cbaed50

Please sign in to comment.