@revenuecat/purchases-ui-js
Version:
Web components for Paywalls. Powered by RevenueCat
417 lines (416 loc) • 21.5 kB
JavaScript
/**
* Two-page workflow fixture. The "Next" button uses a "workflow" action, whose
* destination is resolved client-side via the step's trigger_actions map.
*
* Page layout:
* "rcpaywall_welcome" — welcome screen with a "Next →" button
* "rcpaywall_details" — details screen with "← Back" and "✕ Close" buttons
*/
export const TWO_PAGE_WORKFLOW = {
initial_page_id: "rcpaywall_welcome",
initial_step_id: "step_welcome",
steps: {
step_welcome: {
id: "step_welcome",
screen_id: "rcpaywall_welcome",
type: "screen",
param_values: {},
trigger_actions: {
// "next_btn" is the action_id referenced by the triggers array entry
// for the "next_btn" button component. It resolves to step_details,
// whose screen_id is rcpaywall_details.
next_btn: { type: "step", step_id: "step_details" },
},
triggers: [
{
action_id: "next_btn",
component_id: "next_btn",
type: "on_press",
name: "Next button",
},
],
outputs: {},
metadata: null,
},
step_details: {
id: "step_details",
screen_id: "rcpaywall_details",
type: "screen",
param_values: {},
trigger_actions: {},
triggers: [],
outputs: {},
metadata: null,
},
},
pages: {
rcpaywall_welcome: {
id: "rcpaywall_welcome",
default_locale: "en_US",
name: "Welcome",
template_name: "stack",
revision: 1,
asset_base_url: "https://assets.pawwalls.com",
config: {},
localized_strings: {},
localized_strings_by_tier: {},
offering_id: null,
components_localizations: {
en_US: {
welcome_title: "Welcome",
welcome_body: "This is page 1 of 2. Tap the button below to navigate to page 2.",
next_btn: "Next →",
},
},
components_config: {
base: {
background: {
type: "color",
value: {
light: { type: "hex", value: "#f0f4ffff" },
dark: { type: "hex", value: "#1a1f2eff" },
},
},
stack: {
type: "stack",
id: "welcome_root",
name: "Root",
size: { width: { type: "fill" }, height: { type: "fill" } },
dimension: {
type: "vertical",
alignment: "center",
distribution: "start",
},
spacing: 0,
margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
background: null,
background_color: null,
badge: null,
border: null,
shadow: null,
shape: null,
components: [
{
type: "text",
id: "welcome_title",
name: "Title",
text_lid: "welcome_title",
font_size: "heading_xl",
font_weight: "bold",
horizontal_alignment: "center",
size: { width: { type: "fill" }, height: { type: "fit" } },
margin: { top: 80, bottom: 16, leading: 24, trailing: 24 },
padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
color: {
light: { type: "hex", value: "#1a1f2eff" },
dark: { type: "hex", value: "#f0f4ffff" },
},
background_color: {
light: { type: "hex", value: "transparent" },
dark: { type: "hex", value: "transparent" },
},
},
{
type: "text",
id: "welcome_body",
name: "Body",
text_lid: "welcome_body",
font_size: "body_m",
font_weight: "regular",
horizontal_alignment: "center",
size: { width: { type: "fill" }, height: { type: "fit" } },
margin: { top: 0, bottom: 48, leading: 24, trailing: 24 },
padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
color: {
light: { type: "hex", value: "#555577ff" },
dark: { type: "hex", value: "#aaaaccff" },
},
background_color: {
light: { type: "hex", value: "transparent" },
dark: { type: "hex", value: "transparent" },
},
},
{
type: "button",
id: "next_btn",
name: "Next",
action: { type: "workflow" },
stack: {
type: "stack",
id: "next_btn_stack",
name: "Next button stack",
size: { width: { type: "fill" }, height: { type: "fit" } },
dimension: {
type: "horizontal",
alignment: "center",
distribution: "center",
},
spacing: 0,
margin: { top: 0, bottom: 0, leading: 24, trailing: 24 },
padding: {
top: 16,
bottom: 16,
leading: 24,
trailing: 24,
},
background: {
type: "color",
value: {
light: { type: "hex", value: "#3366ffff" },
dark: { type: "hex", value: "#4d7fffff" },
},
},
background_color: null,
badge: null,
border: null,
shadow: null,
shape: { type: "pill" },
components: [
{
type: "text",
id: "next_btn_text",
name: "next_btn_text",
text_lid: "next_btn",
font_size: "body_m",
font_weight: "medium",
horizontal_alignment: "center",
size: { width: { type: "fit" }, height: { type: "fit" } },
margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
color: {
light: { type: "hex", value: "#ffffffff" },
dark: { type: "hex", value: "#ffffffff" },
},
background_color: {
light: { type: "hex", value: "transparent" },
dark: { type: "hex", value: "transparent" },
},
},
],
},
},
],
},
},
},
},
rcpaywall_details: {
id: "rcpaywall_details",
default_locale: "en_US",
name: "Details",
template_name: "stack",
revision: 1,
asset_base_url: "https://assets.pawwalls.com",
config: {},
localized_strings: {},
localized_strings_by_tier: {},
offering_id: null,
components_localizations: {
en_US: {
details_title: "Details",
details_body: "This is page 2 of 2. Use the buttons below to navigate back or close the workflow entirely.",
back_btn: "← Back",
close_btn: "✕ Close",
},
},
components_config: {
base: {
background: {
type: "color",
value: {
light: { type: "hex", value: "#f0fff4ff" },
dark: { type: "hex", value: "#1a2e1aff" },
},
},
stack: {
type: "stack",
id: "details_root",
name: "Root",
size: { width: { type: "fill" }, height: { type: "fill" } },
dimension: {
type: "vertical",
alignment: "center",
distribution: "start",
},
spacing: 0,
margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
background: null,
background_color: null,
badge: null,
border: null,
shadow: null,
shape: null,
components: [
{
type: "text",
id: "details_title",
name: "Title",
text_lid: "details_title",
font_size: "heading_xl",
font_weight: "bold",
horizontal_alignment: "center",
size: { width: { type: "fill" }, height: { type: "fit" } },
margin: { top: 80, bottom: 16, leading: 24, trailing: 24 },
padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
color: {
light: { type: "hex", value: "#1a2e1aff" },
dark: { type: "hex", value: "#f0fff4ff" },
},
background_color: {
light: { type: "hex", value: "transparent" },
dark: { type: "hex", value: "transparent" },
},
},
{
type: "text",
id: "details_body",
name: "Body",
text_lid: "details_body",
font_size: "body_m",
font_weight: "regular",
horizontal_alignment: "center",
size: { width: { type: "fill" }, height: { type: "fit" } },
margin: { top: 0, bottom: 48, leading: 24, trailing: 24 },
padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
color: {
light: { type: "hex", value: "#337733ff" },
dark: { type: "hex", value: "#88cc88ff" },
},
background_color: {
light: { type: "hex", value: "transparent" },
dark: { type: "hex", value: "transparent" },
},
},
{
type: "button",
id: "back_btn",
name: "Back",
action: { type: "navigate_back" },
stack: {
type: "stack",
id: "back_btn_stack",
name: "Back button stack",
size: { width: { type: "fill" }, height: { type: "fit" } },
dimension: {
type: "horizontal",
alignment: "center",
distribution: "center",
},
spacing: 0,
margin: { top: 0, bottom: 12, leading: 24, trailing: 24 },
padding: {
top: 16,
bottom: 16,
leading: 24,
trailing: 24,
},
background: {
type: "color",
value: {
light: { type: "hex", value: "transparent" },
dark: { type: "hex", value: "transparent" },
},
},
background_color: null,
badge: null,
border: {
width: 1.5,
color: {
light: { type: "hex", value: "#3366ffff" },
dark: { type: "hex", value: "#4d7fffff" },
},
},
shadow: null,
shape: { type: "pill" },
components: [
{
type: "text",
id: "back_btn_text",
name: "back_btn_text",
text_lid: "back_btn",
font_size: "body_m",
font_weight: "medium",
horizontal_alignment: "center",
size: { width: { type: "fit" }, height: { type: "fit" } },
margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
color: {
light: { type: "hex", value: "#3366ffff" },
dark: { type: "hex", value: "#4d7fffff" },
},
background_color: {
light: { type: "hex", value: "transparent" },
dark: { type: "hex", value: "transparent" },
},
},
],
},
},
{
type: "button",
id: "close_btn",
name: "Close",
action: { type: "close_workflow" },
stack: {
type: "stack",
id: "close_btn_stack",
name: "Close button stack",
size: { width: { type: "fill" }, height: { type: "fit" } },
dimension: {
type: "horizontal",
alignment: "center",
distribution: "center",
},
spacing: 0,
margin: { top: 0, bottom: 40, leading: 24, trailing: 24 },
padding: {
top: 16,
bottom: 16,
leading: 24,
trailing: 24,
},
background: {
type: "color",
value: {
light: { type: "hex", value: "#ff3b30ff" },
dark: { type: "hex", value: "#ff453aff" },
},
},
background_color: null,
badge: null,
border: null,
shadow: null,
shape: { type: "pill" },
components: [
{
type: "text",
id: "close_btn_text",
name: "close_btn_text",
text_lid: "close_btn",
font_size: "body_m",
font_weight: "medium",
horizontal_alignment: "center",
size: { width: { type: "fit" }, height: { type: "fit" } },
margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
color: {
light: { type: "hex", value: "#ffffffff" },
dark: { type: "hex", value: "#ffffffff" },
},
background_color: {
light: { type: "hex", value: "transparent" },
dark: { type: "hex", value: "transparent" },
},
},
],
},
},
],
},
},
},
},
},
};