`Paywalls`: template 4 #1349

NachoSoto · 2023-10-13T19:06:15Z

file.mp4

Discount labels are automatically resized to fit

For three or less packages, this is how it looks

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/composables/Footer.kt

codecov · 2023-10-16T16:58:32Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (50244e5) 84.46% compared to head (bb4d92b) 84.46%.
Report is 3 commits behind head on paywalls.

Additional details and impacted files

@@            Coverage Diff            @@
##           paywalls    #1349   +/-   ##
=========================================
  Coverage     84.46%   84.46%           
=========================================
  Files           196      196           
  Lines          6584     6584           
  Branches        957      957           
=========================================
  Hits           5561     5561           
  Misses          655      655           
  Partials        368      368

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

.../kotlin/com/revenuecat/purchases/ui/revenuecatui/composables/ConsistentPackageContentView.kt

Depends on #1369. This is needed for template 4 (#1349).

NachoSoto

Love it!!

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/templates/Template4.kt

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/UIConstant.kt

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/templates/Template4.kt

vegaro · 2023-10-25T14:13:27Z

...evenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/helpers/AutoSizeText.kt

+
+@SuppressWarnings("LongParameterList")
+@Composable
+fun AutoResizedText(


There's a bit of delay when showing this takes a bit to load when there's rezising needed, so we might want to improve it in the future, maybe add an animation. I think it works for now and didn't want to spend much more time in this.

😬 Compose doesn't provide this? Yikes.
We should probably avoid using this for the most part because it's not accessibility friendly at all. This is the only place where I'm using it in iOS.

For now this solution is fine I think 👍🏻

A couple of suggested changes:

Move this to composables

Add a docstring to explain what this does

...otlin/com/revenuecat/purchases/ui/revenuecatui/data/processed/PackageConfigurationFactory.kt

NachoSoto

Ship it! Just a couple of suggestions.

NachoSoto · 2023-10-25T16:01:57Z

...src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/extensions/PackageInfoExtensions.kt

+import kotlin.math.roundToInt
+
+@SuppressWarnings("MagicNumber")
+internal fun TemplateConfiguration.PackageInfo.localizedDiscount(


Can you add a test for this?
Also I wonder if this would be easier to find inside of VariableDataProvider

Yes... Maybe would you add it as a extension there? The thing is that there's really no variable in this, that's why I didn't put it there. But I will move it as an extension for now

The thing is that there's really no variable in this,

This will be used for {{ sub_relative_discount }}.

...rc/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/helpers/AndroidApplicationContext.kt

NachoSoto · 2023-10-25T16:05:52Z

...evenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/helpers/AutoSizeText.kt

+
+@SuppressWarnings("LongParameterList")
+@Composable
+fun AutoResizedText(


😬 Compose doesn't provide this? Yikes.
We should probably avoid using this for the most part because it's not accessibility friendly at all. This is the only place where I'm using it in iOS.

For now this solution is fine I think 👍🏻

A couple of suggested changes:

Move this to composables

Add a docstring to explain what this does

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/templates/Template4.kt

NachoSoto · 2023-10-25T16:08:52Z

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/templates/Template4.kt

+        if (isSelected) {
+            PaywallIcon(icon = PaywallIconName.CHECK_CIRCLE, tintColor = colors.accent1)
+        }


Let's use AnimatedVisibility here instead so that it fades in and out?

done in bb4d92b

I used same parameters as the PurchaseButton loading animation. It doesn't show that well in debug but I think it's because the performance is lower in debug builds?

vegaro · 2023-10-26T13:28:12Z

@NachoSoto I think I addressed all comments

EDIT: oh I am missing the test, I will add that

NachoSoto

Love it! I can't approve cause it's "my" PR, but ship it! :)

Depends on #1369. This is needed for template 4 (#1349).

https://github.com/RevenueCat/purchases-android/assets/664544/0e6745dc-dac0-49b4-82e6-310111b574f8 Discount labels are automatically resized to fit <img width="646" alt="Screenshot 2023-10-25 at 16 24 48" src="https://github.com/RevenueCat/purchases-android/assets/664544/c316c883-39fc-4fb7-8c68-f7739a0a28eb"> <img width="651" alt="Screenshot 2023-10-25 at 16 25 40" src="https://github.com/RevenueCat/purchases-android/assets/664544/67a3d49a-96ae-472b-8e5f-81c20d49e181"> For three or less packages, this is how it looks <img width="350" alt="Screenshot 2023-10-25 at 16 29 59" src="https://github.com/RevenueCat/purchases-android/assets/664544/ff33925c-e5e3-4e78-8bea-ebe9cda8f95b"> --------- Co-authored-by: Cesar de la Vega <[email protected]>

@tonidero

### New Features #### ✨📱 Introducing Android Paywalls 🐾🧱 RevenueCat's Paywalls allow you to remotely configure your entire paywall view without any code changes or app updates. Our paywall templates use native code to deliver smooth, intuitive experiences to your customers when you’re ready to deliver them an Offering; and you can use our Dashboard to pick the right template and configuration to meet your needs. To use RevenueCat Paywalls on Android, simply: 1. Create a Paywall on the Dashboard for the `Offering` you intend to serve to your customers 2. Add the `RevenueCatUI` dependency to your project: ```groovy build.gradle implementation 'com.revenuecat.purchases:purchases:7.1.0' implementation 'com.revenuecat.purchases:purchases-ui:7.1.0' ``` 3. Display a paywall: ```kotlin @OptIn(ExperimentalPreviewRevenueCatUIPurchasesAPI::class) @composable private fun LockedScreen() { YourContent() PaywallDialog( PaywallDialogOptions.Builder() .setRequiredEntitlementIdentifier(Constants.ENTITLEMENT_ID) .build() ) } ``` > **Note** > Android paywalls is currently behind an experimental flag: `ExperimentalPreviewRevenueCatUIPurchasesAPI`. > It is safe to release app updates with it. We guarantee that paywalls will continue to work and any changes will always be backwards compatible. > They are stable, but migration steps may be required in the future. We'll do our best to minimize any changes you have to make. You can find more information in [our documentation](https://rev.cat/paywalls). <details> <summary>List of changes</summary> * `Paywalls`: Improve PaywallDialog look on tablets (#1419) via Toni Rico (@tonidero) * `Paywalls`: disallow Markdown links in PurchaseButton (#1421) via NachoSoto (@NachoSoto) * `Paywalls`: implemented template 5 (#1412) via NachoSoto (@NachoSoto) * `Paywalls`: Fix wrong view model data after configuration changes (#1417) via Toni Rico (@tonidero) * `Paywalls`: update template 4 colors (#1410) via NachoSoto (@NachoSoto) * `Paywalls`: Add bundled font to paywall tester (#1415) via Toni Rico (@tonidero) * `Paywalls`: Fix purchase button text flashing when changing selected package (#1416) via Toni Rico (@tonidero) * `Paywalls`: support text3 and accent3 colors (#1409) via NachoSoto (@NachoSoto) * `Paywalls`: PaywallData errors shouldn't make Offerings fail to decode (#1402) via NachoSoto (@NachoSoto) * `Paywalls`: convert empty strings to null via NachoSoto (@NachoSoto) * `Paywalls`: footer view should not render background image via NachoSoto (@NachoSoto) * `Paywalls`: improve template 4 A11y support via NachoSoto (@NachoSoto) * `Paywalls`: Add close button option (#1390) via Toni Rico (@tonidero) * `Paywalls`: fix MarkdownText stealing touches from package buttons (#1411) via NachoSoto (@NachoSoto) * Fix onDismiss getting called twice in PaywallDialogs (#1408) via Cesar de la Vega (@vegaro) * `Paywalls`: ignore URL deserialization errors (#1399) via NachoSoto (@NachoSoto) * Animate transition between loading and loaded paywall (#1404) via Cesar de la Vega (@vegaro) * Fix button padding in Loading paywall (#1405) via Cesar de la Vega (@vegaro) * Add test for `packageInfo.localizedDiscount` (#1407) via Cesar de la Vega (@vegaro) * `Paywalls`: RemoteImage always renders a placeholder on previews via NachoSoto (@NachoSoto) * `Paywalls`: decode empty images as null via NachoSoto (@NachoSoto) * `Paywalls`: Allow trigger manual paywall tester release (#1406) via Toni Rico (@tonidero) * Fix navigation after closing paywall in Paywalls screen (#1403) via Cesar de la Vega (@vegaro) * `Paywalls`: Add experimental annotation to all public APIs in RevenueCat UI (#1400) via Toni Rico (@tonidero) * `Paywalls`: improve template 2 layout (#1396) via NachoSoto (@NachoSoto) * `Paywalls`: template 4 (#1349) via NachoSoto (@NachoSoto) * `Paywalls`: fix template 3 offer details color (#1394) via NachoSoto (@NachoSoto) * `Paywalls`: PaywallDialogOptions no longer requires dismissRequest (#1386) via NachoSoto (@NachoSoto) * `Paywalls`: fixed accessibility across templates (#1392) via NachoSoto (@NachoSoto) * `Paywalls`: increase PaywallBackground blur radius to match iOS via NachoSoto (@NachoSoto) * `Paywalls`: use LocalUriHandler for opening links (#1388) via NachoSoto (@NachoSoto) * `Paywalls`: support for Markdown links (#1387) via NachoSoto (@NachoSoto) * `Paywalls`: display purchase/restore errors (#1384) via NachoSoto (@NachoSoto) * `Paywalls`: improve error handling (#1383) via NachoSoto (@NachoSoto) * `Paywalls`: fixed incorrect background on footer (#1382) via NachoSoto (@NachoSoto) * `Paywalls`: fix backwards-compatible blurring of default paywall background (#1380) via NachoSoto (@NachoSoto) * `Paywalls`: polish template 2 spacing (#1381) via NachoSoto (@NachoSoto) * `Paywalls`: optimize backwards compatible blurring (#1379) via NachoSoto (@NachoSoto) * `Paywalls`: Predownload offering images if paywalls sdk exists (#1372) via Toni Rico (@tonidero) * `Paywalls`: PurchaseButton supports gradients (#1378) via NachoSoto (@NachoSoto) * `Paywalls`: optimize AdaptiveComposable (#1377) via NachoSoto (@NachoSoto) * `Paywalls`: improve FooterDialog corner radius (#1374) via NachoSoto (@NachoSoto) * `Paywalls`: optimize PurchaseButton (#1376) via NachoSoto (@NachoSoto) * `Paywalls`: Enable footer modes in paywall tester paywalls tab (#1368) via Toni Rico (@tonidero) * `Paywalls`: Support footer in template 3 (#1367) via Toni Rico (@tonidero) * `Paywalls`: calculate discountRelativeToMostExpensivePerMonth (#1370) via NachoSoto (@NachoSoto) * `Paywalls`: Add offer details in template 2 when in condensed form (#1371) via Toni Rico (@tonidero) * `Paywalls`: improve handling of lifetime/custom packages (#1363) via NachoSoto (@NachoSoto) * `Paywalls`: Support footer in template 1 (#1366) via Toni Rico (@tonidero) * Add `StoreProduct.pricePerMonth` (#1369) via NachoSoto (@NachoSoto) * `Paywalls`: Support condensed footer presentation in template 2 (#1365) via Toni Rico (@tonidero) * `Paywalls`: finished localization support (#1362) via NachoSoto (@NachoSoto) * `Paywalls`: backwards compatible blurring (#1327) via Andy Boedo (@AndyBoedo) * `Paywalls`: PaywallViewModel tests (#1357) via NachoSoto (@NachoSoto) * `Paywalls`: improve LoadingPaywall (#1364) via NachoSoto (@NachoSoto) * `Paywalls`: Fix paywall compose previews (#1360) via Toni Rico (@tonidero) * `Paywalls`: Fix proguard rules kotlinx serialization (#1356) via Toni Rico (@tonidero) * `Paywalls`: Add custom font example to paywalls screen (#1358) via Toni Rico (@tonidero) * `Paywalls`: Support Google fonts and font families with multiple fonts (#1338) via Toni Rico (@tonidero) * `Paywalls`: Support custom fonts through FontProvider (#1328) via Toni Rico (@tonidero) * `Paywalls`: fixed Footer padding (#1354) via NachoSoto (@NachoSoto) * `Paywalls`: Rename PaywallView to Paywall (#1351) via Toni Rico (@tonidero) * `Paywalls`: disable PurchaseButton during purchases (#1352) via NachoSoto (@NachoSoto) * `Paywalls`: enable library publishing (#1353) via NachoSoto (@NachoSoto) * `Paywalls`: handle "action in progress" state (#1346) via NachoSoto (@NachoSoto) * `Paywalls`: support {{ sub_duration_in_months }} (#1348) via NachoSoto (@NachoSoto) * `Paywalls`: disallow purchasing currently subscribed products (#1334) via NachoSoto (@NachoSoto) * `Paywalls`: new PaywallActivityLauncher.launchIfNeeded methods (#1335) via NachoSoto (@NachoSoto) * `Paywalls`: PaywallColor supports RGBA (#1332) via NachoSoto (@NachoSoto) * `Paywalls`: Make DialogScaffold private (#1329) via Toni Rico (@tonidero) * Add `revenuecatui` `gradle.properties` to specify name of dependency (#1324) via Toni Rico (@tonidero) * `Paywalls`: log error when failing to load images (#1321) via NachoSoto (@NachoSoto) * Log errors when displaying default paywall (#1318) via Cesar de la Vega (@vegaro) * Rename packages to packageIds in `PaywallData` (#1309) via Cesar de la Vega (@vegaro) * Add support for multiple intro offers in `IntroEligibilityStateView` (#1319) via Cesar de la Vega (@vegaro) * Fix material theme references to use Material3 versions (#1326) via Toni Rico (@tonidero) * `Paywalls`: Add support to launch paywall as activity (#1317) via Toni Rico (@tonidero) * Parse `{{ sub_offer_price_2 }}` and `{{ sub_offer_duration_2 }}` variables (#1313) via Cesar de la Vega (@vegaro) * `Paywalls`: changed PaywallsTester app icon (#1323) via NachoSoto (@NachoSoto) * `Paywalls`: fixed PaywallDialog.setRequiredEntitlementIdentifier (#1322) via NachoSoto (@NachoSoto) * `Paywalls`: Markdown support (#1312) via NachoSoto (@NachoSoto) * `PaywallsTester`: added template name to offerings list (#1316) via NachoSoto (@NachoSoto) * `Paywalls`: Update paywall tester to be able to display paywall footer (#1315) via Toni Rico (@tonidero) * `Paywalls`: Add PaywallFooter composable to present a minified paywall UI that allows for custom paywalls (#1314) via Toni Rico (@tonidero) * `Paywalls`: use IntroEligibilityStateView (#1311) via NachoSoto (@NachoSoto) * `PaywallData` validation tests (#1310) via Cesar de la Vega (@vegaro) * `Paywalls`: implemented LoadingPaywallView with placeholder (#1284) via NachoSoto (@NachoSoto) * `Paywalls`: created LoadingPaywallView (#1282) via NachoSoto (@NachoSoto) * Fix template test data (#1308) via Cesar de la Vega (@vegaro) </details> ### Other Changes Add `purchases.setOnesignalUserID` (#1304) via Raquel Diez (@Raquel10-RevenueCat) --------- Co-authored-by: revenuecat-ops <[email protected]> Co-authored-by: NachoSoto <[email protected]>

NachoSoto added the pr:RevenueCatUI label Oct 13, 2023

NachoSoto requested a review from a team October 13, 2023 19:06

NachoSoto commented Oct 13, 2023

View reviewed changes

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/composables/Footer.kt Outdated Show resolved Hide resolved

NachoSoto force-pushed the nacho/pwl-319-template-4 branch from caa9cd0 to eee13b7 Compare October 16, 2023 16:46

NachoSoto changed the base branch from paywalls to paywalls-action-in-progress October 16, 2023 16:46

Base automatically changed from paywalls-action-in-progress to paywalls October 16, 2023 16:58

NachoSoto force-pushed the nacho/pwl-319-template-4 branch from eee13b7 to 3cd4c8b Compare October 17, 2023 17:10

vegaro reviewed Oct 19, 2023

View reviewed changes

.../kotlin/com/revenuecat/purchases/ui/revenuecatui/composables/ConsistentPackageContentView.kt Outdated Show resolved Hide resolved

NachoSoto mentioned this pull request Oct 19, 2023

Paywalls: calculate discountRelativeToMostExpensivePerMonth #1370

Merged

NachoSoto added a commit that referenced this pull request Oct 19, 2023

Paywalls: calculate discountRelativeToMostExpensivePerMonth (#1370)

7a15c1e

Depends on #1369. This is needed for template 4 (#1349).

vegaro force-pushed the nacho/pwl-319-template-4 branch from 3235b5b to c4989f3 Compare October 20, 2023 17:00

NachoSoto commented Oct 20, 2023

View reviewed changes

vegaro reviewed Oct 23, 2023

View reviewed changes

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/templates/Template4.kt Outdated Show resolved Hide resolved

vegaro force-pushed the nacho/pwl-319-template-4 branch from 8eba172 to 22151c4 Compare October 24, 2023 19:37

NachoSoto and others added 15 commits October 25, 2023 16:08

[skip ci] WIP

3ba1f7e

fix compilation

37d3b93

fix preview

cb0b9b1

fix width and height of the buttons

980967d

split text in two lines

4f309e4

fix checkmark

23b3f56

extract constant

6c74c94

reorganize code

ef966cf

remove footerRoundedBorderHeight

3e70d47

discount

d9abf71

functions cleanup

b59d5b4

fix discount text

61f9763

fix strings in Application Context

e1bce3c

fix varargs

fcb7094

fix width

167efc3

vegaro added 2 commits October 25, 2023 16:09

Autosize text and other fixes

ae334e2

fix previews

bd44551

vegaro force-pushed the nacho/pwl-319-template-4 branch from 0702189 to bd44551 Compare October 25, 2023 14:11

vegaro changed the title ~~[WIP] Paywalls: template 4~~ Paywalls: template 4 Oct 25, 2023

uppercase discount

b627a13

vegaro reviewed Oct 25, 2023

View reviewed changes

vegaro added 2 commits October 25, 2023 16:21

center title

1b4ae0f

add back lifetime to template 2

96df890

vegaro marked this pull request as ready for review October 25, 2023 14:24

vegaro requested review from a team October 25, 2023 14:42

remove log

487d9fc

NachoSoto commented Oct 25, 2023

View reviewed changes

vegaro added 4 commits October 26, 2023 13:07

move localizedDiscount to VariableDataProvider

289253e

move AutoResizedText

420958b

add docstring AutoResizedText

0d516e7

add animation

bb4d92b

NachoSoto commented Oct 26, 2023

View reviewed changes

NachoSoto requested review from tonidero and vegaro October 26, 2023 17:02

NachoSoto merged commit 26d5832 into paywalls Oct 26, 2023
7 checks passed

NachoSoto deleted the nacho/pwl-319-template-4 branch October 26, 2023 17:02

vegaro mentioned this pull request Oct 27, 2023

Add test for packageInfo.localizedDiscount #1407

Merged

tonidero pushed a commit that referenced this pull request Oct 31, 2023

Paywalls: calculate discountRelativeToMostExpensivePerMonth (#1370)

4100626

Depends on #1369. This is needed for template 4 (#1349).

NachoSoto mentioned this pull request Oct 31, 2023

[AUTOMATIC] Release/7.1.0 #1423

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`Paywalls`: template 4 #1349

`Paywalls`: template 4 #1349

NachoSoto commented Oct 13, 2023 •

edited by vegaro

Loading

codecov bot commented Oct 16, 2023 •

edited

Loading

NachoSoto left a comment

vegaro Oct 25, 2023

NachoSoto Oct 25, 2023

NachoSoto left a comment

NachoSoto Oct 25, 2023

vegaro Oct 26, 2023

NachoSoto Oct 26, 2023

NachoSoto Oct 25, 2023

NachoSoto Oct 25, 2023

vegaro Oct 26, 2023

vegaro commented Oct 26, 2023 •

edited

Loading

NachoSoto left a comment

Paywalls: template 4 #1349

Paywalls: template 4 #1349

Conversation

NachoSoto commented Oct 13, 2023 • edited by vegaro Loading

codecov bot commented Oct 16, 2023 • edited Loading

Codecov Report

NachoSoto left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NachoSoto left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vegaro commented Oct 26, 2023 • edited Loading

NachoSoto left a comment

Choose a reason for hiding this comment

`Paywalls`: template 4 #1349

`Paywalls`: template 4 #1349

NachoSoto commented Oct 13, 2023 •

edited by vegaro

Loading

codecov bot commented Oct 16, 2023 •

edited

Loading

vegaro commented Oct 26, 2023 •

edited

Loading