StatusBar on Add Card screen and presenting method selection on iPad issues

[DannyRostami]

Braintree Drop-in SDK Version

9.8.2

Environment

Production

Xcode Version

14.3

OS Version & Device

any

Integration type

Swfit Package Manager

Development Processor

Intel

Describe the bug

We're having two issues which are the following:
1- StatusBar: We have a screen already presented modal, once we are trying to present drop-in, statusBar on Add Card screen is always light therefore the statusBar not visible on light mode. You can see the screen shot.
2- Presenting method selection: Drop-In presents the method selection screen on iPhone really nicely at the bottom of the screen but on iPad it presents it modally regardless of screen being Slide over or fullscreen.
3- At the end that would be great if we could present Add Card screen modally, currently it presents it in fullscreen.

To reproduce

Steps to reproduce issue #1:
1- When device is on light appearance.
2- Present Braintree drop-in from a modal screen
3- On method selection choose credit Card or Debit
4- Observe the statusBar not being visible on light mode

Steps to reproduce issue #2:
1- Present Braintree drop-in on iPad in Slide over
2- Observe the method selection screen is being presented modally and not half like in compact.

Expected behavior

Expected behaviour for #2 : It should check UserInterfaceSizeClass and not iPad device for presenting method selection.

Screenshots

1-iPad Slide over	2-Before presenting Drop-in Add Card screen	3-After presenting Add Card screen

[scannillo]

👋 Hi @DannyRostami - for Issue 2, the UI you're seeing of the centered modal on the iPad is expected as part of our design. That said, the Drop-In could use some UX improvements but our team has been slammed making it lower on our priority list at this moment.

We welcome any and all suggestions you may have for improving the UI and experience! We will gladly take any feedback back to our product teams.

[scannillo]

As for Issue 1 - does this only happen when you present Drop-In from a modal?

[DannyRostami]

Hi @scannillo thanks for your prompt response, for #1 yeah it happens when presented from a modal screen.

[DannyRostami]

I think if Add Card Screen overrides the PreferredStatusBarStyle to .default that would solve the issue.

[jaxdesmarais]

Hey @DannyRostami -

I did some testing locally and was able to replicate the behavior you are seeing on iPadOS 16. Interestingly, Apple seems to resolve this in iPadOS 17. I was able to replicate the behavior you are seeing by setting dropIn.modalPresentationStyle = .fullScreen in DemoDropInViewController in our Demo app.

I was able to resolve this behavior by setting View controller-based status bar appearance to NO in our Demo apps Info.plist. Here is an Apple thread indicating updating your Info.plist should resolve the issue. I did not need to make an updates to the AppDelegate - the tint color is handled by the SDK so you should only need to make the change to your plist. Please do let us know if that setting does not resolve the issue for you.

[DannyRostami]

Hi @jaxdesmarais , thanks for the reply. In our project, View controller-based status bar appearance is already set to YES but I have changed it to NO to see if it fixes it and observed Add Card Screen has status bar isn't visible on Light. So as we don't want to set controller-based to NO this solution seems to be not working. 🫠

[jaxdesmarais]

Thanks for testing that out @DannyRostami -

Are you able to provide either a small sample app where this is reproducible or preferably the steps we can follow to reproduce this in our Demo app? I've created the branch modal-demo-app where you can see the changes applied resolving this issue on a iPad in light mode on the add card screen. My branch may not mimic the set up you are testing on so it'd be helpful to have the code changes we can make to our demo app to reproduce the behavior you are seeing.

[DannyRostami]

Thanks @jaxdesmarais for following up on this, the issue is with iPhone status bar not iPad. The iPad issue is different. But on iPhone please follow the following steps:
1- Present a screen modally like screenShot number 2
2- Present drop-in from that modally presented screen.
3- Select a payment method
4- You will observe add card screen look like screenshot number 3 where you are not able to see status bar

[DannyRostami]

Hi @jaxdesmarais is there anything I could provide? I just wanted to say hello and follow on this. ☺️

[jaxdesmarais]

Hey @DannyRostami -

Apologies for the delay. I've been testing a few things over the past several days, but the only time I can replicate this is when the phone is set to dark mode and the SDK is set to light mode. Are you able to confirm the phone setting for light vs dark mode when you are reproducing this behavior? Since there are several settings/configurations that go into controlling the status bar color we want to make sure we are replicating this in the same states as when you are seeing this behavior.

[DannyRostami]

Hey @jaxdesmarais,
I think I have already stated the settings of the device in above(description and screenshots and previous replies). The issue will not be seen in the dark mode.

[jaxdesmarais]

Hello @DannyRostami -

Thanks for confirming, but I am unable to replicate this on iOS 16.4 when setting dropIn.modalPresentationStyle = .fullScreen in the DemoDropInViewController in our Demo app with both the phone setting and Drop-in settings set to light mode. Here is a screenshot of running the above in our demo app:

Modal Drop-in

As mentioned previously, are you able to give us the steps to reproduce this in our Demo app? Since we are not seeing the behavior you are seeing, it's quite difficult to say what needs to be updated to get this to behave as you expect.

[DannyRostami]

Hi @jaxdesmarais replicating our issue is very easy like I mentioned above all you need is to present drop-in from a modal screen. I have replicated it from your demo app easily. 🤓
Note that, DemoContainerViewController should be modally presented like in screen shot below.

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-08-01.at.11.42.30.mp4

[DannyRostami]

Also when I have tried to set dropIn.modalPresentationStyle = .fullScreen like you suggested, it fixes the status bar but produces another defect, it make the Container disappear when method selection is being displayed.

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-08-01.at.11.54.29.mp4

[DannyRostami]

Hi @jaxdesmarais I was able to find a solution for this issue by using this:
[navController setModalPresentationCapturesStatusBarAppearance: true];

Also the UICustomisation in setting should be set to dynamic as well to make it work. So Basically above one liner change would solve our issue.

[jaxdesmarais]

Hey @DannyRostami -

Thanks for getting back to us, apologies I missed that the entire view was presented modally in your earlier message. @scannillo and I were working on troubleshooting this earlier today, you can see the test branch modal-status-bar-bug with our changes.

We did not need to make the change you mentioned to the SDK itself in our example. Instead we added the following line to the BlankViewController in the test branch: vc.modalPresentationStyle = .fullScreen. Providing a modalPresentationStyle allows for the status bar to appear as expected as you can see in our example branch. This works for both views with and without a NavigationController, though the branch is currently using a ViewController only for the modal presentation.

Are you providing a modalPresentationStyle for the view you are currently using to present modally? If so, please feel free to provide either a fork with your changes that we can pull down and test or the code changes we can make to our branch to replicate the behavior you are seeing.

[DannyRostami]

@jaxdesmarais It is what I can see from your changes. Still not visible. But we don't want to use .fullscreen it should be modal. Left screenshot is in dark which status bar is visible like mentioned in above messages and the right screenshot is light which is not visible.

[StewThom]

Hi @jaxdesmarais, thanks for spending the time investigating this issue as we know it's fairly minor in the grand scheme of things.

I took a look at the branch you posted, unfortunately as @DannyRostami mentioned we have a very strict design requirement that the screen preceding the drop in UI needs to be modal and so we cannot use full screen presentation.

I updated your code to best match our setup as follows

class BlankViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.view.backgroundColor = .red
    }

    override func viewDidAppear(_ animated: Bool) {
        let vc = FakeCheckoutViewController()
        //  vc.modalPresentationStyle = .fullScreen
        
        self.present(vc, animated: true)
    }
}

class FakeCheckoutViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.view.backgroundColor = .blue
    }

    override func viewDidAppear(_ animated: Bool) {

	let uiCistomization = BTDropInUICustomization(colorScheme: .dynamic)

	let request = BTDropInRequest()
	request.uiCustomization = uiCistomization
        let dropInController = BTDropInController(
            authorization: "sandbox_9dbg82cq_dcpspy2brwdjr3qn",
            request: request
        ) { controller, result, error in
            // handle result
        }
        
        self.present(dropInController!, animated: true)
    }

}

This results in correct behaviour when in dark mode, however the issue still persists in light mode, as can be seen in the following video.

Simulator.Screen.Recording.-.iPhone.14.Pro.Max.-.2023-08-02.at.10.57.56.mp4

When making the change to BTDropInController's showCardForm method as @DannyRostami mentioned.

- (void)showCardForm:(__unused id)sender {
    BTCardFormViewController* vd = [[BTCardFormViewController alloc] initWithAPIClient:self.apiClient request:self.dropInRequest];
    vd.supportedCardTypes = self.displayCardTypes;
    vd.delegate = self;
    UINavigationController* navController = [[UINavigationController alloc] initWithRootViewController:vd];
    [navController setModalPresentationCapturesStatusBarAppearance: true];
    if ([UIDevice currentDevice].userInterfaceIdiom == UIUserInterfaceIdiomPad) {
        navController.modalPresentationStyle = UIModalPresentationPageSheet;
    } else {
        navController.modalPresentationStyle = UIModalPresentationOverCurrentContext;
    }
    [self presentViewController:navController animated:YES completion:nil];
}

With the addition of [navController setModalPresentationCapturesStatusBarAppearance: true]; we are seeing expected behaviour as can be observed in this video.

Simulator.Screen.Recording.-.iPhone.14.Pro.Max.-.2023-08-02.at.11.03.16.mp4

Hopefully this helps with your investigations.

[jaxdesmarais]

Hello @DannyRostami and @StewThom -

Thanks for getting back to us with those details and your product requirement to present a modal without a modalPresentationStyle.

We need to do some testing with the changes you proposed across a few different presentation styles to ensure this does not cause a regression with other integration patterns. Once we've completed our testing I'll be sure to update you all. Internal ticket for tracking purposes: DTBTSDK-2893

[jaxdesmarais]

The PR with this change has been merged - we will let you all know when the fix for this has been released

[DannyRostami]

Hi @jaxdesmarais really appreciate your time and considerations. 🤘🏻🤘🏻🤘🏻

[jaxdesmarais]

Hello again @DannyRostami and @StewThom -

This has been released in version 9.9.0. Thanks again for your patience and raising this issue to us! 🚀