Playback 2024: Completion Rate + Pay Wall

[bjtitus]

📘 Part of: #2250

Part of #2348 & #2352

Completion Rate

CompletionRate.mov	CompletionRateSmall.mov

Pay Wall

PayWall.mov	Simulator.Screen.Recording.-.iPhone.6s.-.2024-10-28.at.14.22.02.mp4

To test

Paywall

1. Enable the endOfYear2024 feature flag & restart the app
2. Make sure the account to No Plus
3. Navigate to the Profile and tap Playback 2024 Prompt
4. Navigate through the stories until you hit the Paywall screen
5. Tap the paywall screen to advance to the end
6. Tap the "Check out Pocket Casts Plus" button to open the upsell screen

Completion Rate Plus

1. Set the account to "Plus" from the Developer menu screen
2. Navigate through the stories until you hit the Completion Rate screen
3. Make sure you see the "Plus" badge

Completion Rate Patron

1. Set the account to "Patron" from the Developer menu screen
2. Navigate through the stories until you hit the Completion Rate screen
3. Make sure you see the "Patron" badge

Checklist

• I have considered if this change warrants user-facing release notes and have added them to CHANGELOG.md if necessary.
• I have considered adding unit tests for my changes.
• I have updated (or requested that someone edit) the spreadsheet to reflect any new or changed analytics.

[danielebogo]

Hey @bjtitus few things while testing:

• Tapping on the button to present the paywall doesn't do anything. It just moves to the next card
• Tapping on the left side of the last card, doesn't navigate to the previous card
• There's a different left margin in the text for this screen:

Text left margin	Video of the button not responsive and last card

[bjtitus]

I fixed the interactions on the Pay Wall & Epilogue screens so they should both navigate as well as keep their working buttons.

Also adjusted the spacing about on Listening Time. I will probably come back and adjust all of these and clean the code up later on:

[danielebogo]

@bjtitus thanks for fixing those points.
I think there's a problem with the bottom padding in the last card

Should the bg be edge to edge?

[bjtitus]

I'll probably unify these footers at some point but it should be fixed up now:

[MiSikora]

Is the percentage in the Completion Rate story in the correct place? I think it should be in the bottom right corner of the black rectangle if it fits and above it if it doesn't.

[danielebogo]

The last card seems fixed!

@MiSikora this is what I see. @bjtitus would you mind checking it as well? I see in Figma the number is bottom/right. I will approve it for now. Let me know if this needs to be fixed here or in a separate PR.

[bjtitus]

I think it should be in the bottom right corner of the black rectangle if it fits and above it if it doesn't.

Sorry, I think my original screenshots are out of date. It's stays outside of the rectangle up to 25% and then switches inside.