Jetpack Focus: Show Jetpack app installation within the app using StoreKit

[staskus]

Continuation from: #21801

At the start of the migration, try opening Jetpack app installation within WordPress app using StoreKit instead of opening App Store outside of the app.

Regression Notes

1. Potential unintended areas of impact

2. What I did to test those areas of impact (or what existing automated tests I relied on)

3. What automated tests I added (or what prevented me from doing so)

PR submission checklist:

• I have completed the Regression Notes.
• I have considered adding unit tests for my changes.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

UI Changes testing checklist:

• Portrait and landscape orientations.
• Light and dark modes.
• Fonts: Larger, smaller and bold text.
• High contrast.
• VoiceOver.
• Languages with large words or with letters/accents not frequently used in English.
• Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
• iPhone and iPad.
• Multi-tasking: Split view and Slide over. (iPad)

[wpmobilebot]

📲 You can test the changes from this Pull Request in WordPress Alpha by scanning the QR code below to install the corresponding build.

	App Name	WordPress Alpha
	Configuration	Release-Alpha
	Build Number	pr21896-cd83651
	Version	23.7
	Bundle ID	org.wordpress.alpha
	Commit	cd83651
	App Center Build	WPiOS - One-Offs #7910

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

[wpmobilebot]

📲 You can test the changes from this Pull Request in Jetpack Alpha by scanning the QR code below to install the corresponding build.

	App Name	Jetpack Alpha
	Configuration	Release-Alpha
	Build Number	pr21896-cd83651
	Version	23.7
	Bundle ID	com.jetpack.alpha
	Commit	cd83651
	App Center Build	jetpack-installable-builds #6933

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

[guarani]

I tested the migration flow from Reader it worked well. By having the Jetpack app downloaded within the WordPress app, I think it feels like you're downloading an app from the same ecosystem, which is the case for WP.com users.

RPReplay_Final1698349515.MP4

[kean]

We should remove the custom navigation bar appearance settings from everywhere. The new screens (Blaze, Posts, Media) reset them to the defaults:

    private func configureNavigationBarAppearance() {
        let standardAppearance = UINavigationBarAppearance()
        standardAppearance.configureWithDefaultBackground()

        let scrollEdgeAppearance = UINavigationBarAppearance()
        scrollEdgeAppearance.configureWithTransparentBackground()

        navigationItem.standardAppearance = standardAppearance
        navigationItem.compactAppearance = standardAppearance
        navigationItem.scrollEdgeAppearance = scrollEdgeAppearance
        navigationItem.compactScrollEdgeAppearance = scrollEdgeAppearance
    }

The navigation bars in the PHPickerController are also broken because of these.

P.S. The improvement is really nice! I didn't know it was a thing. But I would be caution about shipping it if the navigation bar issue isn't fixed.

[staskus]

We should remove the custom navigation bar appearance settings from everywhere. The new screens (Blaze, Posts, Media) reset them to the defaults:

Thanks for the comment. I tried different variations of resetting these navigation bar appearance settings: on store vc, parent vc, and globally but I still couldn't get the navigation bar to appear normally. Any ideas of how it could be done besides removing all the custom nav bar appearance settings, @kean ?

[kean]

Nope, and you can't (easily) remove it globally because it breaks at least a few screens.

[staskus]

I applied a workaround for the navigation bar appearance that I don't like but I couldn't get it to work any other way.

Setting a global navigation bar color before presenting StoreVC and resetting it back to the previous one when StoreVC is dismissed.

RPReplay_Final1698364175.mov

[kean]

That's a neat idea 👍 . And the risk is low: you only need it to work once.

[kean]

I just had a similar issue with QLPreviewController.self, but I was able to fix it like this:

let appearance = UINavigationBar.appearance(whenContainedInInstancesOf: [QLPreviewController.self])
appearance.isTranslucent = true // important!

The appearance.isTranslucent false is really what messes up the entire app; not just native screens. I'm not sure it's feasible to disable it everywhere, but we could try limiting the scope of where it is applied in WPStyleGuide.configureNavigationAppearance. I'll probably try tackling it this week because I'm going to to have to do that to make the iPad look good.

I also want to fix a bug in PHPickerViewController settings with a transparent navigation bar. I think @guarani originally reported it.

[staskus]

Thanks, @kean for notifying.

I just had a similar issue with QLPreviewController.self, but I was able to fix it like this
let appearance = UINavigationBar.appearance(whenContainedInInstancesOf: [QLPreviewController.self])
appearance.isTranslucent = true // important!

The same approach with SKStoreProductViewController doesn't work for me, unfortunately. What does work is setting isTranslucent = true instead of changing background color.

The appearance.isTranslucent false is really what messes up the entire app; not just native screens. I'm not sure it's feasible to disable it everywhere, but we could try limiting the scope of where it is applied in WPStyleGuide.configureNavigationAppearance

Agree. May be worth just removing it and going through the app to see what it affects. The change happened a long time ago and the app looked differently https://github.com/wordpress-mobile/WordPress-iOS/pull/11946/files.

[staskus]

@guarani Lets get it into prod?

[guarani]

Works like a charm! The nav bar looks good, I tested via the Reader static poster and via a "Jetpack-powered" banner.
The risk associated with the nav bar fix (which is a bit hacky, but works) is diminished now that the WordPress app doesn't have Stats, Reader or Notifications. I couldn't find any issues after downloading the Jetpack app and returning to the WordPress app.