Skip to content

Commit

Permalink
[Paywalls V2] Fixes TextComponentView's font size (#1981)
Browse files Browse the repository at this point in the history
  • Loading branch information
@JayShortway
JayShortway authored Dec 16, 2024
1 parent bca0771 commit 6d989ee
Show file tree
Hide file tree
Showing 11 changed files with 297 additions and 3 deletions.
184 changes: 184 additions & 0 deletions ...ain/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/LoadedPaywallComponents.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,21 @@ import com.revenuecat.purchases.paywalls.components.properties.ColorInfo
import com.revenuecat.purchases.paywalls.components.properties.ColorScheme
import com.revenuecat.purchases.paywalls.components.properties.CornerRadiuses
import com.revenuecat.purchases.paywalls.components.properties.Dimension.Vertical
import com.revenuecat.purchases.paywalls.components.properties.Dimension.ZLayer
import com.revenuecat.purchases.paywalls.components.properties.FlexDistribution.END
import com.revenuecat.purchases.paywalls.components.properties.FlexDistribution.START
import com.revenuecat.purchases.paywalls.components.properties.FontSize
import com.revenuecat.purchases.paywalls.components.properties.FontWeight
import com.revenuecat.purchases.paywalls.components.properties.HorizontalAlignment.CENTER
import com.revenuecat.purchases.paywalls.components.properties.HorizontalAlignment.LEADING
import com.revenuecat.purchases.paywalls.components.properties.Padding
import com.revenuecat.purchases.paywalls.components.properties.Shadow
import com.revenuecat.purchases.paywalls.components.properties.Shape
import com.revenuecat.purchases.paywalls.components.properties.Size
import com.revenuecat.purchases.paywalls.components.properties.SizeConstraint.Fill
import com.revenuecat.purchases.paywalls.components.properties.SizeConstraint.Fit
import com.revenuecat.purchases.paywalls.components.properties.TwoDimensionalAlignment
import com.revenuecat.purchases.paywalls.components.properties.TwoDimensionalAlignment.BOTTOM
import com.revenuecat.purchases.ui.revenuecatui.components.modifier.background
import com.revenuecat.purchases.ui.revenuecatui.components.properties.toBackgroundStyle
import com.revenuecat.purchases.ui.revenuecatui.components.state.PackageContext
Expand Down Expand Up @@ -185,3 +196,176 @@ private fun LoadedPaywallComponents_Preview() {
.fillMaxSize(),
)
}

@Suppress("LongMethod")
@Preview()
@Composable
private fun LoadedPaywallComponents_Preview_Bless() {
val textColor = ColorScheme(
light = ColorInfo.Hex(Color.Black.toArgb()),
dark = ColorInfo.Hex(Color.White.toArgb()),
)
val backgroundColor = ColorScheme(
light = ColorInfo.Hex(Color.White.toArgb()),
dark = ColorInfo.Hex(Color.Black.toArgb()),
)

LoadedPaywallComponents(
state = PaywallState.Loaded.Components(
offering = Offering(
identifier = "id",
serverDescription = "description",
metadata = emptyMap(),
availablePackages = emptyList(),
paywall = null,
),
data = PaywallComponentsData(
templateName = "template",
assetBaseURL = URL("https://assets.pawwalls.com"),
componentsConfig = ComponentsConfig(
base = PaywallComponentsConfig(
stack = StackComponent(
components = listOf(
StackComponent(
components = emptyList(),
dimension = ZLayer(alignment = TwoDimensionalAlignment.CENTER),
size = Size(width = Fill, height = Fill),
backgroundColor = ColorScheme(
light = ColorInfo.Gradient.Linear(
degrees = 60f,
points = listOf(
ColorInfo.Gradient.Point(
color = Color(red = 0xFF, green = 0xFF, blue = 0xFF, alpha = 0xFF)
.toArgb(),
percent = 0.4f,
),
ColorInfo.Gradient.Point(
color = Color(red = 5, green = 124, blue = 91).toArgb(),
percent = 1f,
),
),
),
),
),
StackComponent(
components = listOf(
TextComponent(
text = LocalizationKey("title"),
color = textColor,
fontWeight = FontWeight.SEMI_BOLD,
fontSize = FontSize.HEADING_L,
horizontalAlignment = LEADING,
size = Size(width = Fill, height = Fit),
margin = Padding(top = 0.0, bottom = 40.0, leading = 0.0, trailing = 0.0),
),
TextComponent(
text = LocalizationKey("feature-1"),
color = textColor,
horizontalAlignment = LEADING,
size = Size(width = Fill, height = Fit),
margin = Padding(top = 8.0, bottom = 8.0, leading = 0.0, trailing = 0.0),
),
TextComponent(
text = LocalizationKey("feature-2"),
color = textColor,
horizontalAlignment = LEADING,
size = Size(width = Fill, height = Fit),
margin = Padding(top = 8.0, bottom = 8.0, leading = 0.0, trailing = 0.0),
),
TextComponent(
text = LocalizationKey("feature-3"),
color = textColor,
horizontalAlignment = LEADING,
size = Size(width = Fill, height = Fit),
margin = Padding(top = 8.0, bottom = 8.0, leading = 0.0, trailing = 0.0),
),
TextComponent(
text = LocalizationKey("feature-4"),
color = textColor,
horizontalAlignment = LEADING,
size = Size(width = Fill, height = Fit),
margin = Padding(top = 8.0, bottom = 8.0, leading = 0.0, trailing = 0.0),
),
TextComponent(
text = LocalizationKey("feature-5"),
color = textColor,
horizontalAlignment = LEADING,
size = Size(width = Fill, height = Fit),
margin = Padding(top = 8.0, bottom = 8.0, leading = 0.0, trailing = 0.0),
),
TextComponent(
text = LocalizationKey("feature-6"),
color = textColor,
horizontalAlignment = LEADING,
size = Size(width = Fill, height = Fit),
margin = Padding(top = 8.0, bottom = 8.0, leading = 0.0, trailing = 0.0),
),
TextComponent(
text = LocalizationKey("offer"),
color = textColor,
horizontalAlignment = LEADING,
size = Size(width = Fill, height = Fit),
margin = Padding(top = 48.0, bottom = 8.0, leading = 0.0, trailing = 0.0),
),
StackComponent(
components = listOf(
TextComponent(
text = LocalizationKey("cta"),
color = ColorScheme(
light = ColorInfo.Hex(Color.White.toArgb()),
),
fontWeight = FontWeight.BOLD,
),
),
dimension = ZLayer(alignment = TwoDimensionalAlignment.CENTER),
size = Size(width = Fit, height = Fit),
backgroundColor = ColorScheme(
light = ColorInfo.Hex(Color(red = 5, green = 124, blue = 91).toArgb()),
),
padding = Padding(top = 8.0, bottom = 8.0, leading = 32.0, trailing = 32.0),
margin = Padding(top = 8.0, bottom = 8.0, leading = 0.0, trailing = 0.0),
shape = Shape.Pill,
),
TextComponent(
text = LocalizationKey("terms"),
color = textColor,
),
),
dimension = Vertical(alignment = LEADING, distribution = END),
size = Size(width = Fill, height = Fill),
padding = Padding(top = 16.0, bottom = 16.0, leading = 32.0, trailing = 32.0),
),
),
dimension = ZLayer(alignment = BOTTOM),
size = Size(width = Fill, height = Fill),
backgroundColor = backgroundColor,
),
background = Background.Color(backgroundColor),
stickyFooter = null,
),
),
componentsLocalizations = mapOf(
LocaleId("en_US") to mapOf(
LocalizationKey("title") to LocalizationData.Text("Unlock bless."),
LocalizationKey("feature-1") to LocalizationData.Text("✓ Enjoy a 7 day trial"),
LocalizationKey("feature-2") to LocalizationData.Text("✓ Change currencies"),
LocalizationKey("feature-3") to LocalizationData.Text("✓ Access more trend charts"),
LocalizationKey("feature-4") to LocalizationData.Text("✓ Create custom categories"),
LocalizationKey("feature-5") to LocalizationData.Text("✓ Get a special premium icon"),
LocalizationKey("feature-6") to LocalizationData.Text(
"✓ Receive our love and gratitude for your support",
),
LocalizationKey("offer") to LocalizationData.Text(
"Try 7 days free, then $19.98/year. Cancel anytime.",
),
LocalizationKey("cta") to LocalizationData.Text("Continue"),
LocalizationKey("terms") to LocalizationData.Text("Privacy & Terms"),
),
),
defaultLocaleIdentifier = LocaleId("en_US"),
),
),
modifier = Modifier
.fillMaxSize(),
)
}
13 changes: 13 additions & 0 deletions ...main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/text/TextComponentView.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,19 @@ private fun TextComponentView_Preview_CursiveFont() {
)
}

@Preview
@Composable
private fun TextComponentView_Preview_FontSize() {
TextComponentView(
style = previewTextComponentStyle(
text = "Hello, world",
color = ColorScheme(light = ColorInfo.Hex(Color.Black.toArgb())),
fontSize = FontSize.HEADING_L,
size = Size(width = Fit, height = Fit),
),
)
}

@Preview(name = "HorizontalAlignment")
@Composable
private fun TextComponentView_Preview_HorizontalAlignment() {
Expand Down
1 change: 1 addition & 0 deletions .../kotlin/com/revenuecat/purchases/ui/revenuecatui/composables/IntroEligibilityStateView.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ internal fun IntroEligibilityStateView(
textAlign = textAlign,
allowLinks = allowLinks,
textFillMaxWidth = true,
applyFontSizeToParagraph = false,
modifier = modifier,
)
}
Expand Down
33 changes: 30 additions & 3 deletions ...nuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/composables/Markdown.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,9 @@ private val parser = Parser.builder()
* @param allowLinks If true, links will be decorated and clickable.
* @param textFillMaxWidth If true, the text will fill the maximum width available. This was used by paywalls V1 and
* left to avoid unintended UI changes.
* @param applyFontSizeToParagraph If true, the provided [fontSize] will be applied to the annotated string used to
* build a Markdown paragraph from the [text]. This was not the case in Paywalls V1, but is needed for Paywalls V2.
* (See `TextComponentViewTests` for more info.)
*/
@SuppressWarnings("LongParameterList")
@Composable
Expand All @@ -80,7 +83,9 @@ internal fun Markdown(
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
textAlign: TextAlign? = null,
allowLinks: Boolean = true,
textFillMaxWidth: Boolean = false, // This is to support V1 paywalls
// The below parameters are used to avoid unintended changes to V1 paywalls.
textFillMaxWidth: Boolean = false,
applyFontSizeToParagraph: Boolean = true,
) {
val root = parser.parse(text) as Document

Expand All @@ -98,7 +103,18 @@ internal fun Markdown(
horizontalAlignment = horizontalAlignment,
modifier = modifier,
) {
MDDocument(root, color, style, fontSize, fontWeight, fontFamily, textAlign, allowLinks, textFillMaxWidth)
MDDocument(
root,
color,
style,
fontSize,
fontWeight,
fontFamily,
textAlign,
allowLinks,
textFillMaxWidth,
applyFontSizeToParagraph,
)
}
}

Expand All @@ -114,6 +130,7 @@ private fun MDDocument(
textAlign: TextAlign?,
allowLinks: Boolean,
textFillMaxWidth: Boolean,
applyFontSizeToParagraph: Boolean,
) {
MDBlockChildren(
document,
Expand All @@ -125,6 +142,7 @@ private fun MDDocument(
textAlign,
allowLinks,
textFillMaxWidth,
applyFontSizeToParagraph,
)
}

Expand All @@ -140,6 +158,7 @@ private fun MDHeading(
textAlign: TextAlign?,
allowLinks: Boolean,
textFillMaxWidth: Boolean,
applyFontSizeToParagraph: Boolean,
modifier: Modifier = Modifier,
) {
val overriddenStyle = when (heading.level) {
Expand All @@ -161,6 +180,7 @@ private fun MDHeading(
textAlign,
allowLinks,
textFillMaxWidth,
applyFontSizeToParagraph,
)
return
}
Expand Down Expand Up @@ -197,12 +217,16 @@ private fun MDParagraph(
textAlign: TextAlign?,
allowLinks: Boolean,
textFillMaxWidth: Boolean,
applyFontSizeToParagraph: Boolean,
) {
Box {
val styledText = buildAnnotatedString {
pushStyle(
style
.copy(fontWeight = fontWeight)
.copy(
fontWeight = fontWeight,
fontSize = if (applyFontSizeToParagraph) fontSize else style.fontSize,
)
.toSpanStyle(),
)
appendMarkdownChildren(paragraph as Node, color, allowLinks)
Expand Down Expand Up @@ -419,6 +443,7 @@ private fun MDBlockChildren(
textAlign: TextAlign?,
allowLinks: Boolean,
textFillMaxWidth: Boolean,
applyFontSizeToParagraph: Boolean,
) {
var child = parent.firstChild
while (child != null) {
Expand All @@ -434,6 +459,7 @@ private fun MDBlockChildren(
textAlign,
allowLinks,
textFillMaxWidth,
applyFontSizeToParagraph,
)
is Paragraph -> MDParagraph(
child,
Expand All @@ -445,6 +471,7 @@ private fun MDBlockChildren(
textAlign,
allowLinks,
textFillMaxWidth,
applyFontSizeToParagraph,
)
is FencedCodeBlock -> MDFencedCodeBlock(child)
is BulletList -> MDBulletList(
Expand Down
2 changes: 2 additions & 0 deletions ...enuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/templates/Template1.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ private fun ColumnScope.Template1MainContent(state: PaywallState.Loaded.Legacy)
textAlign = TextAlign.Center,
color = colors.text1,
textFillMaxWidth = true,
applyFontSizeToParagraph = false,
modifier = Modifier
.padding(
horizontal = UIConstant.defaultHorizontalPadding,
Expand All @@ -116,6 +117,7 @@ private fun ColumnScope.Template1MainContent(state: PaywallState.Loaded.Legacy)
fontWeight = FontWeight.Normal,
textAlign = TextAlign.Center,
textFillMaxWidth = true,
applyFontSizeToParagraph = false,
modifier = Modifier
.padding(
horizontal = UIConstant.defaultHorizontalPadding,
Expand Down
2 changes: 2 additions & 0 deletions ...enuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/templates/Template2.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -269,6 +269,7 @@ private fun Title(
text = state.selectedLocalization.title,
color = state.templateConfiguration.getCurrentColors().text1,
textFillMaxWidth = true,
applyFontSizeToParagraph = false,
modifier = childModifier,
)
}
Expand All @@ -286,6 +287,7 @@ private fun Subtitle(
text = state.selectedLocalization.subtitle ?: "",
color = state.templateConfiguration.getCurrentColors().text1,
textFillMaxWidth = true,
applyFontSizeToParagraph = false,
modifier = childModifier,
)
}
Expand Down
3 changes: 3 additions & 0 deletions ...enuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/templates/Template3.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,7 @@ private fun Title(
text = state.selectedLocalization.title,
color = state.templateConfiguration.getCurrentColors().text1,
textFillMaxWidth = true,
applyFontSizeToParagraph = false,
)
}

Expand Down Expand Up @@ -224,6 +225,7 @@ private fun Feature(
text = feature.title,
color = colors.text1,
textFillMaxWidth = true,
applyFontSizeToParagraph = false,
)
feature.content?.let { content ->
Markdown(
Expand All @@ -233,6 +235,7 @@ private fun Feature(
text = content,
color = colors.text2,
textFillMaxWidth = true,
applyFontSizeToParagraph = false,
)
}
}
Expand Down
Loading

0 comments on commit 6d989ee

Please sign in to comment.