Skip to content

Commit

Permalink
[FC] Theme-based header logo (#3772)
Browse files Browse the repository at this point in the history 
## Summary

This adds support for theme-based header logos in the Financial
Connections flow. Right now we support Link for the `linkLight` theme,
and continue to use the Stripe logo for all other themes.

## Motivation

Ultimately, the goal here is to show the Link logo in the Instant Debits
flow, but is also extensible to support any other themes that might
come.

## Testing

Manually verified that the link logo is only shown for the instant
debits flow, and that the FC flow still shows the stripe logo. Also
verified this still works with the test mode badge:


https://github.com/user-attachments/assets/f64307c8-fa14-4438-acd4-23ef0915a410

## Changelog

N/a
  • Loading branch information
@mats-stripe
mats-stripe authored Jul 16, 2024
1 parent 98660ac commit 9d413f2
Show file tree
Hide file tree
Showing 6 changed files with 42 additions and 19 deletions.
4 changes: 4 additions & 0 deletions StripeFinancialConnections/StripeFinancialConnections.xcodeproj/project.pbxproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@
486E50E6CB90208AB98C031E /* UIImageView+Extensions.swift in Sources */ = {isa = PBXBuildFile; fileRef = DDC3AC48492FAB61E5B66D94 /* UIImageView+Extensions.swift */; };
492651662C24C9E7001DDBCA /* TestModeAutofillBannerView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 492651652C24C9E7001DDBCA /* TestModeAutofillBannerView.swift */; };
492651682C25C0C2001DDBCA /* info@3x.png in Resources */ = {isa = PBXBuildFile; fileRef = 492651672C25C0C2001DDBCA /* info@3x.png */; };
494D62072C45B9B700106519 /* link_logo@3x.png in Resources */ = {isa = PBXBuildFile; fileRef = 494D62062C45B9B700106519 /* link_logo@3x.png */; };
496A6AE72C29E0BB00D34F8E /* testmode@3x.png in Resources */ = {isa = PBXBuildFile; fileRef = 496A6AE62C29E0BB00D34F8E /* testmode@3x.png */; };
4A0D015C978BD79BBFE6CE57 /* ManualEntryDataSource.swift in Sources */ = {isa = PBXBuildFile; fileRef = BD4C39F5F9AF440B13F51A81 /* ManualEntryDataSource.swift */; };
4A537AE0C50CAFF3889EFE28 /* UIViewController+Extensions.swift in Sources */ = {isa = PBXBuildFile; fileRef = BF7E41313B709F87B549D85F /* UIViewController+Extensions.swift */; };
Expand Down Expand Up @@ -311,6 +312,7 @@
4667E3861CDEC3A41B757714 /* FinancialConnectionsSynchronize.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FinancialConnectionsSynchronize.swift; sourceTree = "<group>"; };
492651652C24C9E7001DDBCA /* TestModeAutofillBannerView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TestModeAutofillBannerView.swift; sourceTree = "<group>"; };
492651672C25C0C2001DDBCA /* info@3x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "info@3x.png"; sourceTree = "<group>"; };
494D62062C45B9B700106519 /* link_logo@3x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "link_logo@3x.png"; sourceTree = "<group>"; };
496A6AE62C29E0BB00D34F8E /* testmode@3x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "testmode@3x.png"; sourceTree = "<group>"; };
4A7B146AA6BF44921A249DB8 /* EmptyFinancialConnectionsAPIClient.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EmptyFinancialConnectionsAPIClient.swift; sourceTree = "<group>"; };
4AFBF95DAE0783010A17EB58 /* FinancialConnectionsSession_only_accounts.json */ = {isa = PBXFileReference; lastKnownFileType = text.json; path = FinancialConnectionsSession_only_accounts.json; sourceTree = "<group>"; };
Expand Down Expand Up @@ -550,6 +552,7 @@
F1C7A2FE53419CB29CBB6C08 /* close@3x.png */,
6A764CF4DB5B5F6F488132A8 /* generic_error@3x.png */,
492651672C25C0C2001DDBCA /* info@3x.png */,
494D62062C45B9B700106519 /* link_logo@3x.png */,
6A732C9F2B6871E900828CB1 /* panel_arrow_right@3x.png */,
6A13B9FB2B58545F00FFA327 /* person@3x.png */,
EF0111A8932418631FFA1663 /* search@3x.png */,
Expand Down Expand Up @@ -1219,6 +1222,7 @@
492651682C25C0C2001DDBCA /* info@3x.png in Resources */,
6A13B9FC2B58545F00FFA327 /* person@3x.png in Resources */,
C747113C75AC92643B283CBD /* close@3x.png in Resources */,
494D62072C45B9B700106519 /* link_logo@3x.png in Resources */,
CF47070B2A4CA27FEE9AE5FA /* generic_error@3x.png in Resources */,
496A6AE72C29E0BB00D34F8E /* testmode@3x.png in Resources */,
3AE1C7A78FB5B220F5200F49 /* search@3x.png in Resources */,
Expand Down
Binary file added ...nancialConnections/StripeFinancialConnections/Resources/Images/link_logo@3x.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 28 additions & 16 deletions ...s/StripeFinancialConnections/Source/Common/FinancialConnectionsNavigationController.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,12 +147,13 @@ extension FinancialConnectionsNavigationController {
static func configureNavigationItemForNative(
_ navigationItem: UINavigationItem?,
closeItem: UIBarButtonItem,
shouldHideStripeLogo: Bool,
shouldHideLogo: Bool,
theme: FinancialConnectionsSessionManifest.Theme?,
isTestMode: Bool
) {
let iconHeight: CGFloat = 20
var testModeImageViewWidth: CGFloat = 0
var stripeLogoImageViewWidth: CGFloat = 0
var logoImageViewWidth: CGFloat = 0

let testModeBadgeView: UIImageView? = {
guard isTestMode else { return nil }
Expand All @@ -170,34 +171,45 @@ extension FinancialConnectionsNavigationController {
return testModeImage
}()

let stripeLogoView: UIImageView? = {
guard !shouldHideStripeLogo else { return nil }

let stripeLogoImage = UIImageView(image: Image.stripe_logo.makeImage(template: true))
stripeLogoImage.tintColor = UIColor.textActionPrimary
stripeLogoImage.contentMode = .scaleAspectFit
stripeLogoImage.sizeToFit()

stripeLogoImageViewWidth = stripeLogoImage.bounds.width * (iconHeight / max(1, stripeLogoImage.bounds.height))
stripeLogoImage.frame = CGRect(
let logoView: UIImageView? = {
guard !shouldHideLogo else { return nil }

let logo: Image
let tint: UIColor
switch theme {
case .linkLight:
logo = .link_logo
tint = .linkGreen900
case .light, .dashboardLight, .unparsable, .none:
logo = .stripe_logo
tint = .textActionPrimary
}

let logoImage = UIImageView(image: logo.makeImage(template: true))
logoImage.tintColor = tint
logoImage.contentMode = .scaleAspectFit
logoImage.sizeToFit()

logoImageViewWidth = logoImage.bounds.width * (iconHeight / max(1, logoImage.bounds.height))
logoImage.frame = CGRect(
x: 0,
y: 0,
width: stripeLogoImageViewWidth,
width: logoImageViewWidth,
height: iconHeight
)
return stripeLogoImage
return logoImage
}()

let spacing: CGFloat = 6
let imageViews = [stripeLogoView, testModeBadgeView].compactMap { $0.self }
let imageViews = [logoView, testModeBadgeView].compactMap { $0.self }
let stackView = UIStackView(arrangedSubviews: imageViews)
stackView.axis = .horizontal
stackView.alignment = .center
stackView.spacing = spacing
stackView.frame = CGRect(
x: 0,
y: 0,
width: stripeLogoImageViewWidth + testModeImageViewWidth + spacing,
width: logoImageViewWidth + testModeImageViewWidth + spacing,
height: iconHeight
)

Expand Down
1 change: 1 addition & 0 deletions StripeFinancialConnections/StripeFinancialConnections/Source/Helpers/Image.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ enum Image: String, ImageMaker {
case close
case generic_error
case info
case link_logo
case panel_arrow_right
case person
case search
Expand Down
4 changes: 4 additions & 0 deletions ...peFinancialConnections/StripeFinancialConnections/Source/Helpers/UIColor+Extensions.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,10 @@ extension UIColor {
return UIColor(red: 26 / 255.0, green: 197 / 255.0, blue: 155 / 255.0, alpha: 1) // #1ac59b
}

static var linkGreen900: UIColor {
return UIColor(red: 1 / 255.0, green: 30 / 255.0, blue: 15 / 255.0, alpha: 1) // #011E0F
}

static func dynamic(light: UIColor, dark: UIColor) -> UIColor {
return UIColor(dynamicProvider: {
switch $0.userInterfaceStyle {
Expand Down
8 changes: 5 additions & 3 deletions ...eFinancialConnections/StripeFinancialConnections/Source/Native/NativeFlowController.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,11 +151,12 @@ extension NativeFlowController {
FinancialConnectionsNavigationController.configureNavigationItemForNative(
viewController.navigationItem,
closeItem: self.navigationBarCloseBarButtonItem,
shouldHideStripeLogo: ShouldHideStripeLogoInNavigationBar(
shouldHideLogo: ShouldHideLogoInNavigationBar(
forViewController: viewController,
reducedBranding: self.dataManager.reducedBranding,
merchantLogo: self.dataManager.merchantLogo
),
theme: self.dataManager.manifest.theme,
isTestMode: self.dataManager.manifest.isTestMode
)
}
Expand Down Expand Up @@ -197,11 +198,12 @@ extension NativeFlowController {
FinancialConnectionsNavigationController.configureNavigationItemForNative(
viewController.navigationItem,
closeItem: self.navigationBarCloseBarButtonItem,
shouldHideStripeLogo: ShouldHideStripeLogoInNavigationBar(
shouldHideLogo: ShouldHideLogoInNavigationBar(
forViewController: viewController,
reducedBranding: self.dataManager.reducedBranding,
merchantLogo: self.dataManager.merchantLogo
),
theme: self.dataManager.manifest.theme,
isTestMode: self.dataManager.manifest.isTestMode
)
self.navigationController.pushViewController(viewController, animated: animated)
Expand Down Expand Up @@ -1347,7 +1349,7 @@ private func CreatePaneViewController(
return viewController
}

private func ShouldHideStripeLogoInNavigationBar(
private func ShouldHideLogoInNavigationBar(
forViewController viewController: UIViewController,
reducedBranding: Bool,
merchantLogo: [String]?
Expand Down

0 comments on commit 9d413f2

Please sign in to comment.