@revenuecat/purchases-ui-js
Version:
Web components for Paywalls. Powered by RevenueCat
206 lines (205 loc) • 8.21 kB
JavaScript
import { PackageIdentifier } from "../../../types/variables";
import { createPackageComponent, createStack, createTextComponent, } from "./helpers";
const hex = (value) => ({ light: { type: "hex", value } });
/**
* Test paywall for custom variables behavior
* Has `username` and `email` variables embedded throughout the paywall
* These should either be passed in or come from UIConfig
**/
export const CUSTOM_VARIABLES_PAYWALL = {
id: "custom_variables_paywall",
default_locale: "en_US",
components_localizations: {
en_US: {
username_normal: "Welcome, {{$custom.username}}",
subtitle: "{{custom.username|uppercase}} Account",
email_confirm: "Email: {{ custom.email | lowercase }}",
monthly_package_copy: "Monthly for {{custom.username |capitalize}} — {{ product.price_per_period }}",
annual_package_copy: "Annual — {{ product.price_per_period }}\n" +
"Only {{ product.price_per_month }}/month, {{ custom.username | lowercase }}",
purchase_cta: "Subscribe, {{ custom.username }}",
},
},
components_config: {
base: {
background: {
type: "color",
value: hex("#f5f5f7ff"),
},
stack: {
...createStack({
id: "root-stack",
name: "Root Stack",
components: [
// Title — plain substitution with $ prefix
{
...createTextComponent({
id: "username-normal",
textLid: "username_normal",
}),
font_size: "heading_xl",
font_weight: "semibold",
horizontal_alignment: "center",
color: hex("#1a1a2eff"),
},
// Subtitle — uppercase modifier, tight format
{
...createTextComponent({
id: "subtitle",
textLid: "subtitle",
}),
font_size: "body_l",
font_weight: "medium",
horizontal_alignment: "center",
color: hex("#6b7280ff"),
},
// Email — lowercase modifier, funky whitespace
{
...createTextComponent({
id: "email-confirm",
textLid: "email_confirm",
}),
font_size: "body_l",
font_weight: "regular",
horizontal_alignment: "center",
color: hex("#1a1a2eff"),
},
// Monthly package card
styledPackage({
id: PackageIdentifier.monthly,
name: "Monthly plan",
package_id: PackageIdentifier.monthly,
is_selected_by_default: false,
textLid: "monthly_package_copy",
}),
// Annual package card
styledPackage({
id: PackageIdentifier.annual,
name: "Annual plan",
package_id: PackageIdentifier.annual,
is_selected_by_default: true,
textLid: "annual_package_copy",
}),
// Purchase button
{
type: "purchase_button",
id: "purchase-btn",
name: "Purchase Button",
stack: {
...createStack({
id: "purchase-btn-stack",
name: "Purchase Button Stack",
components: [
{
...createTextComponent({
id: "purchase-btn-text",
textLid: "purchase_cta",
}),
font_size: "heading_s",
font_weight: "semibold",
horizontal_alignment: "center",
color: hex("#ffffffff"),
},
],
}),
size: {
width: { type: "fill" },
height: { type: "fit" },
},
dimension: {
type: "vertical",
alignment: "center",
distribution: "center",
},
background_color: hex("#3b82f6ff"),
shape: { type: "pill", corners: null },
padding: {
top: 16,
bottom: 16,
leading: 24,
trailing: 24,
},
},
},
],
}),
size: {
width: { type: "fill" },
height: { type: "fit" },
},
dimension: {
type: "vertical",
alignment: "center",
distribution: "start",
},
padding: {
top: 32,
bottom: 32,
leading: 24,
trailing: 24,
},
spacing: 20,
},
},
},
};
function styledPackage({ id, name, package_id, is_selected_by_default, textLid, }) {
const pkg = createPackageComponent({
id,
name,
package_id,
is_selected_by_default,
components: [
{
...createTextComponent({
id: `${package_id}-copy`,
textLid,
}),
font_size: "body_xl",
font_weight: "medium",
color: hex("#1a1a2eff"),
},
],
});
return {
...pkg,
stack: {
...pkg.stack,
size: {
width: { type: "fill" },
height: { type: "fit" },
},
background_color: hex("#ffffffff"),
border: {
color: hex("#e0e0e0ff"),
width: 1,
},
shape: {
type: "rectangle",
corners: {
top_leading: 12,
top_trailing: 12,
bottom_leading: 12,
bottom_trailing: 12,
},
},
shadow: {
x: 0,
y: 2,
radius: 8,
color: hex("#0000000a"),
},
overrides: [
{
conditions: [{ type: "selected" }],
properties: {
border: {
color: hex("#3b82f6ff"),
width: 2,
},
},
},
],
},
};
}