Flows Examples

Tip

This page contains examples of flows for different versions of the WhatsApp Business API.

You can find the code in the tests/data/flows directory of the repository.

v7.1 Examples

from pywa.types.flows import *  # noqa

image_carousel = FlowJSON(
    version="7.1",
    screens=[
        Screen(
            id="DEMO_SCREEN",
            terminal=True,
            title="Demo screen",
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    ImageCarousel(
                        scale_type=ScaleType.COVER,
                        images=[
                            ImageCarouselItem(
                                alt_text="Landscape image",
                                src="iVBORw0KGgoAAAANSUhEUgAAAB4AAAAKCAIAAAAsFXl4AAAANElEQVR4nGL5ctWagWjwuH0b8YqZiFdKKhg1Gg2wzOawIV61t1AF8YqHZoAMTaMBAQAA",
                            ),
                            ImageCarouselItem(
                                alt_text="Square image",
                                src="iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAALElEQVR4nGIRPRrBgATeWLsjc5kY8AKaSrPIL3FA5i9evZNudhOQBgQAAP",
                            ),
                            ImageCarouselItem(
                                alt_text="Portrait image",
                                src="iVBORw0KGgoAAAANSUhEUgAAAAoAAAAUCAIAAAA7jDsBAAAALUlEQVR4nGIJWfabAQls8DVA5jIx4AUjVZqRP2AJMn",
                            ),
                        ],
                    ),
                    Footer(
                        label="Continue",
                        on_click_action=CompleteAction(),
                    ),
                ],
            ),
        ),
    ],
)

v6.3 Examples

from pywa.types.flows import *  # noqa

chips_selector = FlowJSON(
    version="6.3",
    screens=[
        Screen(
            id="DEMO_SCREEN",
            terminal=True,
            title="Demo screen",
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    ChipsSelector(
                        name="chips",
                        label="Personalize your experience",
                        description="Choose your interests to get personalized design ideas and solution",
                        max_selected_items=2,
                        data_source=[
                            DataSource(id="room_layout", title="🏡 Room layouts"),
                            DataSource(id="lighting", title="💡 Lighting"),
                            DataSource(id="renovation", title="🛠️ Renovation"),
                            DataSource(id="furnitures", title="📐 Room layouts"),
                        ],
                    ),
                    Footer(
                        label="Continue",
                        on_click_action=CompleteAction(),
                    ),
                ],
            ),
        ),
    ],
)

v6.2 Examples

import re

from pywa.types.flows import *  # noqa

regex = FlowJSON(
    version="6.2",
    screens=[
        Screen(
            id="DEMO_SCREEN",
            title="Demo Screen",
            terminal=True,
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    TextInput(
                        required=True,
                        label="Regex Input",
                        input_type=InputType.TEXT,
                        pattern=re.compile(
                            "^(19|20)\\d\\d-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$"
                        ),
                        helper_text="E.g. 1993-08-04",
                        name="regex input",
                    ),
                    TextInput(
                        required=True,
                        label="Regex Passcode",
                        pattern="007",
                        input_type=InputType.PASSCODE,
                        name="passcode_oo7",
                        helper_text="Contains: 007",
                    ),
                    Footer(
                        label="Continue",
                        on_click_action=CompleteAction(),
                    ),
                ],
            ),
        )
    ],
)

navigation_list = FlowJSON(
    version="6.2",
    routing_model={
        "FIRST_SCREEN": ["SECOND_SCREEN", "THIRD_SCREEN", "FIFTH_SCREEN"],
        "SECOND_SCREEN": ["CONTACT"],
        "THIRD_SCREEN": ["CONTACT"],
        "FIFTH_SCREEN": ["CONTACT"],
        "CONTACT": [],
    },
    screens=[
        Screen(
            id="FIRST_SCREEN",
            title="Our offers",
            data={},
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    NavigationList(
                        name="insurances",
                        list_items=[
                            NavigationItem(
                                id="home",
                                main_content=NavigationItemMainContent(
                                    title="Home Insurance",
                                    metadata="Safeguard your home against natural disasters, theft, and accidents",
                                ),
                                end=NavigationItemEnd(
                                    title="$100", description="/ month"
                                ),
                                on_click_action=NavigateAction(
                                    next=Next(name="SECOND_SCREEN"),
                                ),
                            ),
                            NavigationItem(
                                id="health",
                                main_content=NavigationItemMainContent(
                                    title="Health Insurance",
                                    metadata="Get essential coverage for doctor visits, prescriptions, and hospital stays",
                                ),
                                end=NavigationItemEnd(
                                    title="$80", description="/ month"
                                ),
                                on_click_action=NavigateAction(
                                    next=Next(name="SECOND_SCREEN"),
                                ),
                            ),
                            NavigationItem(
                                id="intergalactic",
                                main_content=NavigationItemMainContent(
                                    title="Intergalactic Insurance",
                                    metadata="Enjoy coverage for asteroid collisions, alien encounters, and other risks",
                                ),
                                end=NavigationItemEnd(
                                    title="$1.000", description="/ month"
                                ),
                                on_click_action=NavigateAction(
                                    next=Next(name="FOURTH_SCREEN"),
                                ),
                            ),
                            NavigationItem(
                                id="timetravel",
                                main_content=NavigationItemMainContent(
                                    title="Time Travel Insurance",
                                    metadata="Ready for paradox-related damages or unforeseen consequences of altering history",
                                ),
                                end=NavigationItemEnd(
                                    title="$980", description="/ month"
                                ),
                                on_click_action=NavigateAction(
                                    next=Next(name="FIFTH_SCREEN"),
                                ),
                            ),
                            NavigationItem(
                                id="dream",
                                main_content=NavigationItemMainContent(
                                    title="Dream Loss Insurance",
                                    metadata="Protection from recurring nightmares or lost opportunities due to poor sleep",
                                ),
                                end=NavigationItemEnd(
                                    title="$540", description="/ month"
                                ),
                                on_click_action=NavigateAction(
                                    next=Next(name="FIFTH_SCREEN"),
                                    payload={"first_name": True},
                                ),
                            ),
                        ],
                    )
                ],
            ),
        ),
        Screen(
            id="SECOND_SCREEN",
            title="Home Insurance",
            data={},
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    TextSubheading(text="Tell us about your property"),
                    Form(
                        name="property_details_form",
                        children=[
                            Dropdown(
                                name="property_type",
                                required=True,
                                label="Property Type",
                                data_source=[
                                    DataSource(id="House", title="House"),
                                    DataSource(id="Apartment", title="Apartment"),
                                    DataSource(id="Condo", title="Condo"),
                                ],
                            ),
                            TextInput(
                                name="surface",
                                label="Total surface (sqm)",
                                input_type=InputType.NUMBER,
                                required=True,
                            ),
                            TextInput(
                                name="rooms",
                                input_type=InputType.NUMBER,
                                label="Number or rooms",
                                required=True,
                            ),
                            TextInput(name="floors", label="Number of floors"),
                            Footer(
                                label="Continue",
                                on_click_action=NavigateAction(
                                    next=Next(name="CONTACT"),
                                ),
                            ),
                        ],
                    ),
                ],
            ),
        ),
        Screen(
            id="THIRD_SCREEN",
            title="Health Insurance",
            data={},
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    TextSubheading(
                        text="Tell us about the type of insurance you are looking for"
                    ),
                    Form(
                        name="health_insurance_form",
                        children=[
                            Dropdown(
                                label="Insurance type",
                                name="insurance_type",
                                required=True,
                                data_source=[
                                    DataSource(id="individual", title="Individual"),
                                    DataSource(id="family", title="Family"),
                                ],
                            ),
                            TextInput(
                                label="Count",
                                required=True,
                                helper_text="How may people will be covered by this insurance",
                                name="number_of_people",
                            ),
                            Dropdown(
                                label="Age range",
                                name="age_range",
                                required=True,
                                data_source=[
                                    DataSource(id="18-24", title="18-24"),
                                    DataSource(id="25-34", title="25-34"),
                                ],
                            ),
                            Footer(
                                label="Next",
                                on_click_action=NavigateAction(
                                    next=Next(name="CONTACT"),
                                ),
                            ),
                        ],
                    ),
                ],
            ),
        ),
        Screen(
            id="FIFTH_SCREEN",
            title="Time Travel Insurance",
            data=[first_name := ScreenData(key="first_name", example="Bob")],
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    TextBody(
                        text=f"`{first_name.ref} ', we are excited you are joining our community of time travellers!'`"
                    ),
                    TextBody(
                        text="We require a few more details to make sure you have the best cover possible for your needs."
                    ),
                    Form(
                        name="health_insurance_form",
                        children=[
                            Dropdown(
                                label="Insurance type",
                                name="insurance_type",
                                required=True,
                                data_source=[
                                    DataSource(id="individual", title="Individual"),
                                    DataSource(id="family", title="Family"),
                                ],
                            ),
                            TextInput(
                                label="Count",
                                required=True,
                                helper_text="How may people will be covered by this insurance",
                                name="number_of_people",
                            ),
                            Dropdown(
                                label="Age range",
                                name="age_range",
                                required=True,
                                data_source=[
                                    DataSource(id="18-24", title="18-24"),
                                    DataSource(id="25-34", title="25-34"),
                                ],
                            ),
                            Footer(
                                label="Next",
                                on_click_action=NavigateAction(
                                    next=Next(name="CONTACT"),
                                ),
                            ),
                        ],
                    ),
                ],
            ),
        ),
        Screen(
            id="CONTACT",
            title="Contact details",
            terminal=True,
            data={},
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    TextHeading(text="How can we get in contact with you?"),
                    Form(
                        name="form",
                        children=[
                            name := TextInput(
                                name="name",
                                label="Full name",
                                required=True,
                            ),
                            phone := TextInput(
                                name="phone",
                                required=True,
                                label="Phone number",
                            ),
                            Footer(
                                label="Complete",
                                on_click_action=CompleteAction(
                                    payload={
                                        "phone": phone.ref,
                                        "name": name.ref,
                                    },
                                ),
                            ),
                        ],
                    ),
                ],
            ),
        ),
    ],
)


navigation_list_dynamic = FlowJSON(
    version="6.2",
    data_api_version="3.0",
    routing_model={
        "FIRST_SCREEN": ["SECOND_SCREEN", "THIRD_SCREEN"],
        "SECOND_SCREEN": ["CONTACT"],
        "THIRD_SCREEN": ["CONTACT"],
        "CONTACT": [],
    },
    screens=[
        Screen(
            id="FIRST_SCREEN",
            title="Our offers",
            data=[
                insurances := ScreenData(
                    key="insurances",
                    example=[
                        NavigationItem(
                            id="home",
                            main_content=NavigationItemMainContent(
                                title="Home Insurance",
                                metadata="Safeguard your home against natural disasters, theft, and accidents.",
                            ),
                            on_click_action=DataExchangeAction(
                                payload={"selection": "home"},
                            ),
                        ),
                        NavigationItem(
                            id="health",
                            main_content=NavigationItemMainContent(
                                title="Health Insurance",
                                metadata="Get essential coverage for doctor visits, prescriptions, and hospital stays.",
                            ),
                            on_click_action=DataExchangeAction(
                                payload={"selection": "health"},
                            ),
                        ),
                    ],
                ),
            ],
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    NavigationList(
                        name="insurances",
                        list_items=insurances.ref,
                    )
                ],
            ),
        ),
        Screen(
            id="SECOND_SCREEN",
            title="Home Insurance",
            data={},
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    TextSubheading(text="Tell us about your property"),
                    Form(
                        name="property_details_form",
                        children=[
                            Dropdown(
                                name="property_type",
                                required=True,
                                label="Property Type",
                                data_source=[
                                    DataSource(id="House", title="House"),
                                    DataSource(id="Apartment", title="Apartment"),
                                    DataSource(id="Condo", title="Condo"),
                                ],
                            ),
                            TextInput(
                                name="surface",
                                label="Total surface (sqm)",
                                input_type=InputType.NUMBER,
                                required=True,
                            ),
                            TextInput(
                                name="rooms",
                                input_type=InputType.NUMBER,
                                label="Number or rooms",
                                required=True,
                            ),
                            TextInput(
                                name="floors",
                                label="Number of floors",
                            ),
                            Footer(
                                label="Continue",
                                on_click_action=NavigateAction(
                                    next=Next(name="CONTACT"),
                                ),
                            ),
                        ],
                    ),
                ],
            ),
        ),
        Screen(
            id="THIRD_SCREEN",
            title="Health Insurance",
            data={},
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    TextSubheading(
                        text="Tell us about the type of insurance you are looking for"
                    ),
                    Form(
                        name="health_insurance_form",
                        children=[
                            Dropdown(
                                label="Insurance type",
                                name="insurance_type",
                                required=True,
                                data_source=[
                                    DataSource(id="individual", title="Individual"),
                                    DataSource(id="family", title="Family"),
                                ],
                            ),
                            TextInput(
                                label="Count",
                                required=True,
                                helper_text="How may people will be covered by this insurance",
                                name="number_of_people",
                            ),
                            Dropdown(
                                label="Age range",
                                name="age_range",
                                required=True,
                                data_source=[
                                    DataSource(id="18-24", title="18-24"),
                                    DataSource(id="25-34", title="25-34"),
                                ],
                            ),
                            Footer(
                                label="Next",
                                on_click_action=NavigateAction(
                                    next=Next(name="CONTACT"),
                                ),
                            ),
                        ],
                    ),
                ],
            ),
        ),
        Screen(
            id="CONTACT",
            title="Contact details",
            terminal=True,
            data={},
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    TextHeading(text="How can we get in contact with you?"),
                    Form(
                        name="form",
                        children=[
                            name := TextInput(
                                name="name",
                                label="Full name",
                                required=True,
                            ),
                            phone := TextInput(
                                name="phone",
                                required=True,
                                label="Phone number",
                            ),
                            Footer(
                                label="Complete",
                                on_click_action=CompleteAction(
                                    payload={
                                        "phone": phone.ref,
                                        "name": name.ref,
                                    }
                                ),
                            ),
                        ],
                    ),
                ],
            ),
        ),
    ],
)

v6.1 Examples

from pywa.types.flows import *  # noqa
import datetime


calendar_picker_single_mode = FlowJSON(
    version="6.1",
    data_api_version="3.0",
    routing_model={},
    screens=[
        Screen(
            id="DEMO_SCREEN",
            terminal=True,
            title="Demo screen",
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    CalendarPicker(
                        name="calendar",
                        label="Single date",
                        helper_text="Select a date",
                        required=True,
                        mode=CalendarPickerMode.SINGLE,
                        min_date=datetime.date(2024, 10, 21),
                        max_date=datetime.date(2025, 12, 12),
                        unavailable_dates=[
                            datetime.date(2024, 11, 28),
                            datetime.date(2024, 11, 1),
                        ],
                        include_days=[
                            CalendarDay.MON,
                            CalendarDay.TUE,
                            CalendarDay.WED,
                            CalendarDay.THU,
                            CalendarDay.FRI,
                        ],
                        init_value=datetime.date(2024, 10, 23),
                        on_select_action=DataExchangeAction(
                            payload={"calendar": ComponentRef("calendar")},
                        ),
                    ),
                    Footer(
                        label="Continue",
                        on_click_action=DataExchangeAction(),
                    ),
                ],
            ),
        )
    ],
)


calendar_picker_range_mode = FlowJSON(
    version="6.1",
    data_api_version="3.0",
    routing_model={},
    screens=[
        Screen(
            id="DEMO_SCREEN",
            terminal=True,
            title="Demo screen",
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    CalendarPicker(
                        name="calendar_range",
                        title="Range calendar",
                        description="Use this to select a date range",
                        label=CalendarRangeValues(
                            start_date="Start date",
                            end_date="End date",
                        ),
                        helper_text=CalendarRangeValues(
                            start_date="Select from date",
                            end_date="Select to date",
                        ),
                        required=CalendarRangeValues(
                            start_date=True,
                            end_date=False,
                        ),
                        mode=CalendarPickerMode.RANGE,
                        min_date=datetime.date(2024, 10, 21),
                        max_date=datetime.date(2025, 12, 12),
                        unavailable_dates=[
                            datetime.date(2024, 11, 28),
                            datetime.date(2024, 11, 1),
                        ],
                        include_days=[
                            CalendarDay.MON,
                            CalendarDay.TUE,
                            CalendarDay.WED,
                            CalendarDay.THU,
                            CalendarDay.FRI,
                        ],
                        min_days=3,
                        max_days=10,
                        init_value=CalendarRangeValues(
                            start_date=datetime.date(2024, 10, 22),
                            end_date=datetime.date(2024, 10, 25),
                        ),
                        on_select_action=DataExchangeAction(
                            payload={"calendar_range": ComponentRef("calendar_range")},
                        ),
                    ),
                    Footer(
                        label="Continue",
                        on_click_action=DataExchangeAction(),
                    ),
                ],
            ),
        )
    ],
)

v6.0 Examples

from pywa.types.flows import *  # noqa

string_concatenation = FlowJSON(
    version="6.0",
    screens=[
        Screen(
            id="DEMO_SCREEN",
            terminal=True,
            title="Demo screen",
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    first_name := TextInput(
                        label="First name",
                        input_type=InputType.TEXT,
                        name="first_name",
                        required=True,
                    ),
                    age := TextInput(
                        label="Age",
                        input_type=InputType.NUMBER,
                        name="age",
                        required=True,
                    ),
                    TextBody(text=FlowStr("Hello {name}", name=first_name.ref)),
                    TextBody(
                        text=FlowStr(
                            "{name} you are {age} years old.",
                            name=first_name.ref,
                            age=age.ref,
                        )
                    ),
                    Footer(
                        label="Footer",
                        on_click_action=CompleteAction(),
                    ),
                ],
            ),
        )
    ],
)

open_url = FlowJSON(
    version="6.0",
    screens=[
        Screen(
            id="DEMO_SCREEN",
            terminal=True,
            title="Demo screen",
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    EmbeddedLink(
                        text="This is an external link.",
                        on_click_action=OpenURLAction(
                            url="https://pywa.readthedocs.io/",
                        ),
                    ),
                    OptIn(
                        label="I agree to the terms.",
                        name="T&Cs",
                        on_click_action=OpenURLAction(
                            url="https://pywa.readthedocs.io/",
                        ),
                    ),
                    Footer(
                        label="Footer",
                        on_click_action=CompleteAction(),
                    ),
                ],
            ),
        )
    ],
)

update_data = FlowJSON(
    version="6.0",
    screens=[
        Screen(
            id="ADDRESS_SELECTION",
            title="Address selection",
            terminal=True,
            success=True,
            data=[
                state_visibility := ScreenData(
                    key="state_visibility",
                    example=False,
                ),
                pincode_visibility := ScreenData(
                    key="pincode_visibility",
                    example=False,
                ),
                states := ScreenData(
                    key="states",
                    example=[DataSource(id="1", title="USA")],
                ),
                pincode := ScreenData(
                    key="pincode",
                    example=[DataSource(id="M6B2A9", title="M6B2A9")],
                ),
                countries := ScreenData(
                    key="countries",
                    example=[
                        DataSource(
                            id="1",
                            title="USA",
                            on_select_action=UpdateDataAction(
                                payload=[
                                    states.update(
                                        new_value=[
                                            DataSource(
                                                id="new_york",
                                                title="New York",
                                                on_unselect_action=UpdateDataAction(
                                                    payload=[
                                                        pincode_visibility.update(
                                                            new_value=False
                                                        )
                                                    ],
                                                ),
                                                on_select_action=UpdateDataAction(
                                                    payload=[
                                                        pincode.update(
                                                            new_value=[
                                                                DataSource(
                                                                    id="10001",
                                                                    title="10001",
                                                                ),
                                                                DataSource(
                                                                    id="10005",
                                                                    title="10005",
                                                                ),
                                                            ]
                                                        ),
                                                        pincode_visibility.update(
                                                            new_value=True
                                                        ),
                                                    ],
                                                ),
                                            ),
                                            DataSource(
                                                id="california",
                                                title="California",
                                                on_unselect_action=UpdateDataAction(
                                                    payload=[
                                                        pincode_visibility.update(
                                                            new_value=False
                                                        )
                                                    ],
                                                ),
                                                on_select_action=UpdateDataAction(
                                                    payload=[
                                                        pincode.update(
                                                            new_value=[
                                                                DataSource(
                                                                    id="90019",
                                                                    title="90019",
                                                                ),
                                                                DataSource(
                                                                    id="93504",
                                                                    title="93504",
                                                                ),
                                                            ]
                                                        ),
                                                        pincode_visibility.update(
                                                            new_value=True
                                                        ),
                                                    ],
                                                ),
                                            ),
                                        ]
                                    ),
                                    state_visibility.update(new_value=True),
                                ],
                            ),
                            on_unselect_action=UpdateDataAction(
                                payload=[
                                    state_visibility.update(new_value=False),
                                    pincode_visibility.update(new_value=False),
                                ],
                            ),
                        ),
                        DataSource(
                            id="2",
                            title="Canada",
                            on_select_action=UpdateDataAction(
                                payload=[
                                    states.update(
                                        new_value=[
                                            DataSource(
                                                id="ontario",
                                                title="Ontario",
                                                on_unselect_action=UpdateDataAction(
                                                    payload=[
                                                        pincode_visibility.update(
                                                            new_value=False
                                                        )
                                                    ],
                                                ),
                                                on_select_action=UpdateDataAction(
                                                    payload=[
                                                        pincode.update(
                                                            new_value=[
                                                                DataSource(
                                                                    id="L4K",
                                                                    title="L4K",
                                                                ),
                                                                DataSource(
                                                                    id="M3C",
                                                                    title="M3C",
                                                                ),
                                                            ]
                                                        ),
                                                        pincode_visibility.update(
                                                            new_value=True
                                                        ),
                                                    ],
                                                ),
                                            ),
                                            DataSource(
                                                id="quebec",
                                                title="Quebec",
                                                on_unselect_action=UpdateDataAction(
                                                    payload=[
                                                        pincode_visibility.update(
                                                            new_value=False
                                                        )
                                                    ],
                                                ),
                                                on_select_action=UpdateDataAction(
                                                    payload=[
                                                        pincode.update(
                                                            new_value=[
                                                                DataSource(
                                                                    id="M6B2A9",
                                                                    title="M6B2A9",
                                                                ),
                                                                DataSource(
                                                                    id="M5V",
                                                                    title="M5V",
                                                                ),
                                                            ]
                                                        ),
                                                        pincode_visibility.update(
                                                            new_value=True
                                                        ),
                                                    ],
                                                ),
                                            ),
                                        ]
                                    ),
                                    state_visibility.update(new_value=True),
                                ],
                            ),
                            on_unselect_action=UpdateDataAction(
                                payload=[
                                    state_visibility.update(new_value=False),
                                    pincode_visibility.update(new_value=False),
                                ],
                            ),
                        ),
                    ],
                ),
            ],
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    RadioButtonsGroup(
                        name="select_country",
                        label="Select country:",
                        data_source=countries.ref,
                    ),
                    RadioButtonsGroup(
                        name="select_states",
                        label="Select state:",
                        visible=state_visibility.ref,
                        data_source=states.ref,
                    ),
                    RadioButtonsGroup(
                        name="pincode",
                        label="Select pincode:",
                        visible=pincode_visibility.ref,
                        data_source=pincode.ref,
                    ),
                    Footer(
                        label="Complete",
                        on_click_action=CompleteAction(),
                    ),
                ],
            ),
        )
    ],
)


math_operators = FlowJSON(
    version="6.0",
    screens=[
        Screen(
            id="DEMO_SCREEN",
            title="Demo Screen",
            terminal=True,
            success=True,
            data=[
                number_1 := ScreenData(
                    key="number_1",
                    example=10,
                ),
                number_2 := ScreenData(
                    key="number_2",
                    example=20,
                ),
            ],
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    TextBody(
                        text=[
                            FlowStr(
                                "The sum of {num1} and {num2} is {sum}",
                                num1=number_1.ref,
                                num2=number_2.ref,
                                sum=number_1.ref + number_2.ref,
                            ),
                            FlowStr(
                                "The difference of {num1} and {num2} is {diff}",
                                num1=number_1.ref,
                                num2=number_2.ref,
                                diff=number_1.ref - number_2.ref,
                            ),
                            FlowStr(
                                "The product of {num1} and {num2} is {prod}",
                                num1=number_1.ref,
                                num2=number_2.ref,
                                prod=number_1.ref * number_2.ref,
                            ),
                            FlowStr(
                                "The division of {num1} by {num2} is {div}",
                                num1=number_1.ref,
                                num2=number_2.ref,
                                div=number_1.ref / number_2.ref,
                            ),
                        ]
                    ),
                    Footer(
                        label="Static footer label",
                        on_click_action=CompleteAction(),
                    ),
                ],
            ),
        ),
    ],
)

visible_condition = FlowJSON(
    version="6.0",
    screens=[
        Screen(
            id="DEMO_SCREEN",
            title="Demo Screen",
            terminal=True,
            success=True,
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    number := TextInput(
                        label="Enter a number",
                        input_type=InputType.NUMBER,
                        name="number",
                    ),
                    TextBody(
                        text="You choose the right number!",
                        visible=number.ref == 42,
                    ),
                    Footer(
                        label="Static footer label",
                        on_click_action=CompleteAction(),
                    ),
                ],
            ),
        )
    ],
)

v5.1 Examples

from pywa.types.flows import *  # noqa: F403

rich_text = FlowJSON(
    version="5.1",
    screens=[
        Screen(
            id="FIRST_SCREEN",
            title="Welcome",
            terminal=True,
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    TextCaption(
                        markdown=True,
                        text=[
                            "This is a markdown example inside **TextCaption**. You can combine **different** *formatting* ~~***styles***~~",
                            "You can also add [links](https://whatsapp.com) to external web-sites",
                        ],
                    ),
                    TextBody(
                        markdown=True,
                        text=[
                            "This is a markdown example inside **TextCaption**. You can combine **different** *formatting* ~~***styles***~~.",
                            "You can also add [links](https://whatsapp.com) to external web-sites",
                            "And use **Ordered** and **Unordered** lists:",
                            "1. List item",
                            "2. List item",
                        ],
                    ),
                    OptIn(
                        name="toc",
                        required=True,
                        label="RichText can be used to render large static or dynamic texts.",
                        on_click_action=NavigateAction(
                            next=Next(name="TOC"),
                        ),
                    ),
                    Footer(
                        label="Proceed",
                        on_click_action=CompleteAction(),
                    ),
                ],
            ),
        ),
        Screen(
            id="TOC",
            title="Terms of Service",
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    RichText(
                        text=[
                            "This is a mock-up of ToC demonstrating the supported syntax of RichText components",
                            "# Terms of Service",
                            "## 1. Acceptance of Terms",
                            'By using our services, you *agree* to a these lol **Terms of Service** (*"Terms"*). If you do not *agree*, please do not use our services.',
                            "**Here is image example:**",
                            '"![Whatsapp-logo](data:image/png;base64,meQAyMDIzLTA0LTA4VDE3OjMyOjA1KzAwOjAw8ZGfFgAAAABJRU5ErkJggg==)"',
                            "We are not **liable** for:",
                            "1. *indirect* including the ones that happens all the time in normal life, I just need to make this text slightly longer",
                            "2. *incidental*,",
                            "3. *special*,",
                            "4. *punitive* damages",
                            "including loss of:",
                            "+ *profits*,",
                            "+ *data*",
                            "+ *use*.",
                            "## 2. Modifications to Terms",
                            'We *reserve* the right to **modify** these *Terms* at any time. Changes will be indicated by the **"Last Updated"** date. Continued use after changes constitutes acceptance.',
                            "## 3. Use of Services",
                            "**Eligibility:** You must be at least *18 years old*. By using our services, you *confirm* you meet this requirement.",
                            "**Account Responsibilities:** You are **responsible** for your account confidentiality and activities.",
                            "## 4. User Conduct",
                            "You *agree* not to **violate** laws, **infringe** rights, or transmit *objectionable* content.",
                            "## 5. Termination",
                            "We may **terminate** or *suspend* your access immediately, without notice, for any reason, including **breach** of *Terms*.",
                            "## 6. Disclaimer of Warranties",
                            'Services are provided ***"AS IS"*** and ***"AS AVAILABLE"***. We disclaim all **warranties**, express or implied, including *merchantability* and *fitness for a particular purpose*.',
                            "## 7. Limitation of Liability",
                            "We are not **liable** for:",
                            "1. *indirect* including the ones that happens all the time in normal life, I just need to make this text slightly longer",
                            "2. *incidental*,",
                            "3. *special*,",
                            "4. *punitive* damages",
                            "including loss of:",
                            "+ *profits*,",
                            "+ *data*",
                            "+ *use*.",
                            "## 8. Governing Law",
                            "| Column  with extended width   | Column  with extended width   | Column  with extended width   |",
                            "| --------   | --------   |",
                            "| It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. | Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.|  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum |",
                            "| It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. | Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.|  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum |",
                            "## 9. Contact Information",
                            "For questions, contact us at **[your email address]**.",
                            "Alternatively please go to our [Fancy web-site](https://www.whatsapp.com) to learn more about our services.",
                            "**Last Updated:** ***[Date]***",
                        ]
                    )
                ],
            ),
        ),
    ],
)

v5.0 Examples

import datetime

from pywa.types.flows import *  # noqa: F403


radio_buttons_with_pics = FlowJSON(
    version="5.0",
    screens=[
        Screen(
            id="TRAVEL_PACKAGES",
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    RadioButtonsGroup(
                        name="packages",
                        required=True,
                        data_source=[
                            DataSource(
                                id="1",
                                title="Tropical Beach Vacation",
                                description="Enjoy 7 nights and 8 days at a luxury beach resort in Bali. Including flights and stays",
                                alt_text="beach vacation",
                                image="iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=",
                            ),
                            DataSource(
                                id="2",
                                title="Mountain Adventure",
                                description="Embark on a 5-day guided trek in the Swiss Alps. Package includes flights and stays",
                                image="iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=",
                            ),
                            DataSource(
                                id="3",
                                title="City Break",
                                description="Explore the sights and sounds of New York City with our 4 nights and 5 days package",
                                image="iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=",
                            ),
                            DataSource(
                                id="4",
                                title="Historical Tour",
                                description="Take a 7-day historical tour of Rome, Italy. Package includes flights and stays",
                                image="iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=",
                            ),
                        ],
                        label="Explore our exciting packages",
                    ),
                    Footer(
                        label="Continue",
                        on_click_action=CompleteAction(),
                    ),
                ],
            ),
            title="Travel Packages",
            terminal=True,
        ),
    ],
)

date_picker_dates_obj = FlowJSON(
    version="5.0",
    data_api_version="3.0",
    routing_model={},
    screens=[
        Screen(
            id="DEMO_SCREEN",
            terminal=True,
            title="Demo screen",
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    date := DatePicker(
                        name="date",
                        label="Date",
                        min_date=datetime.date(2024, 10, 21),
                        max_date=datetime.date(2024, 11, 12),
                        unavailable_dates=[
                            datetime.date(2024, 10, 28),
                            datetime.date(2024, 11, 1),
                        ],
                        on_select_action=DataExchangeAction(
                            payload={"date": ComponentRef("date")},
                        ),
                    ),
                    Footer(
                        label="Continue",
                        on_click_action=DataExchangeAction(),
                    ),
                ],
            ),
        )
    ],
)

v4.0 Examples

from pywa.types.flows import *  # noqa: F403

switch = FlowJSON(
    version="4.0",
    screens=[
        Screen(
            id="SCREEN",
            title="Welcome",
            terminal=True,
            success=True,
            data=[ScreenData(key="value", example="cat")],
            layout=Layout(
                children=[
                    animal := TextInput(
                        name="animal",
                        label="Animal",
                        helper_text="Type: cat, dog or anything else",
                    ),
                    Switch(
                        value=animal.ref,
                        cases={
                            "cat": [TextHeading(text="It is a cat")],
                            "dog": [TextHeading(text="It is a dog")],
                            "default": [
                                TextHeading(text="It is neither a cat nor a dog")
                            ],
                        },
                    ),
                    Footer(
                        label="Complete",
                        on_click_action=CompleteAction(),
                    ),
                ]
            ),
        )
    ],
)

if_ = FlowJSON(
    version="4.0",
    screens=[
        Screen(
            id="SCREEN",
            title="Welcome",
            terminal=True,
            success=True,
            data=[value := ScreenData(key="value", example=True)],
            layout=Layout(
                children=[
                    animal := TextInput(
                        name="animal",
                        label="Animal",
                        helper_text="Type: cat",
                    ),
                    If(
                        condition=value.ref & (animal.ref == "cat"),
                        then=[TextHeading(text="It is a cat")],
                        else_=[TextHeading(text="It is not a cat")],
                    ),
                    Footer(
                        label="Complete",
                        on_click_action=CompleteAction(),
                    ),
                ]
            ),
        )
    ],
)

photo_picker = FlowJSON(
    version="4.0",
    routing_model={"FIRST": []},
    data_api_version="3.0",
    screens=[
        Screen(
            id="FIRST",
            title="Photo Picker Example",
            terminal=True,
            data={},
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="flow_path",
                        children=[
                            photo_picker := PhotoPicker(
                                name="photo_picker",
                                label="Upload photos",
                                description="Please attach images about the received items",
                                photo_source="camera_gallery",
                                min_uploaded_photos=1,
                                max_uploaded_photos=10,
                                max_file_size_kb=10240,
                            ),
                            Footer(
                                label="Submit",
                                on_click_action=DataExchangeAction(
                                    payload={"images": photo_picker.ref},
                                ),
                            ),
                        ],
                    )
                ],
            ),
        )
    ],
)

doc_picker = FlowJSON(
    version="4.0",
    routing_model={"SECOND": []},
    data_api_version="3.0",
    screens=[
        Screen(
            id="SECOND",
            terminal=True,
            title="Document Picker Example",
            data={},
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="flow_path",
                        children=[
                            document_picker := DocumentPicker(
                                name="document_picker",
                                label="Contract",
                                description="Attach the signed copy of the contract",
                                min_uploaded_documents=1,
                                max_uploaded_documents=1,
                                max_file_size_kb=1024,
                                allowed_mime_types=[
                                    "image/jpeg",
                                    "application/pdf",
                                ],
                            ),
                            Footer(
                                label="Submit",
                                on_click_action=CompleteAction(
                                    payload={"documents": document_picker.ref},
                                ),
                            ),
                        ],
                    )
                ],
            ),
        )
    ],
)


date_picker_dates_str = FlowJSON(
    version="4.0",
    data_api_version="3.0",
    routing_model={},
    screens=[
        Screen(
            id="DEMO_SCREEN",
            terminal=True,
            title="Demo screen",
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="form_name",
                        children=[
                            DatePicker(
                                name="date",
                                label="Date",
                                min_date="1693569600000",
                                max_date="1767182400000",
                                unavailable_dates=[
                                    "1694779200000",
                                    "1697371200000",
                                ],
                                on_select_action=DataExchangeAction(
                                    payload={"date": ComponentRef("date")},
                                ),
                            ),
                            Footer(
                                label="Continue",
                                on_click_action=DataExchangeAction(),
                            ),
                        ],
                    )
                ],
            ),
        )
    ],
)

global_fields = FlowJSON(
    version="4.0",
    screens=[
        screen_one := Screen(
            data=[
                field2 := ScreenData(key="field2", example="data"),
            ],
            id="SCREEN_ONE",
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    field1 := TextInput(name="field1", label="Enter your name"),
                    Footer(
                        label="CTA",
                        on_click_action=NavigateAction(
                            next=Next(name="SCREEN_TWO"),
                        ),
                    ),
                ],
            ),
            title="Screen 1",
        ),
        Screen(
            id="SCREEN_TWO",
            terminal=True,
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Footer(
                        label="Complete",
                        on_click_action=CompleteAction(
                            payload={
                                "field1": screen_one / field1.ref,
                                "field2": screen_one / field2.ref,
                            },
                        ),
                    ),
                ],
            ),
            title="Screen 2",
            data={},
        ),
    ],
)


forward_refs = FlowJSON(
    version="4.0",
    routing_model={"SELECT_SERVICES": ["SELECT_INSURANCE"]},
    screens=[
        select_insurance_screen := Screen(
            id="SELECT_INSURANCE",
            title="Select insurance",
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    insurance := RadioButtonsGroup(
                        name="insurance",
                        label="Please select your coverage",
                        data_source=[
                            basic := DataSource(id="basic", title="Basic"),
                            standard := DataSource(id="standard", title="Standard"),
                            full := DataSource(id="full", title="Premium"),
                        ],
                    )
                ],
            ),
        ),
        Screen(
            terminal=True,
            id="SELECT_SERVICES",
            title="Select services",
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    TextSubheading(text="Select insurance type"),
                    If(
                        condition=select_insurance_screen / insurance.ref != "",
                        then=[
                            Switch(
                                value=select_insurance_screen / insurance.ref,
                                cases={
                                    "basic": [
                                        TextBody(
                                            text="You've selected a basic insurance"
                                        )
                                    ],
                                    "standard": [
                                        TextBody(
                                            text="You've selected a standard insurance"
                                        )
                                    ],
                                    "full": [
                                        TextBody(
                                            text="You've selected a comprehensive insurance"
                                        )
                                    ],
                                },
                            )
                        ],
                        else_=[
                            TextBody(text="You haven't selected any insurance type")
                        ],
                    ),
                    EmbeddedLink(
                        text="Choose insurance type",
                        on_click_action=NavigateAction(
                            next=Next(type=NextType.SCREEN, name="SELECT_INSURANCE"),
                        ),
                    ),
                    Footer(
                        label="Complete",
                        on_click_action=CompleteAction(
                            payload={
                                "selected_insurance_type": select_insurance_screen
                                / insurance.ref
                            },
                        ),
                    ),
                ],
            ),
        ),
    ],
)

v2.1 Examples

from pywa.types.flows import *  # noqa: F403

customer_satisfaction_survey = FlowJSON(
    version="2.1",
    screens=[
        Screen(
            id="RECOMMEND",
            title="Feedback 1 of 2",
            data={},
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="form",
                        children=[
                            TextSubheading(text="Would you recommend us to a friend?"),
                            recommend_radio := RadioButtonsGroup(
                                name="recommend_radio",
                                label="Choose one",
                                data_source=[
                                    DataSource(id="0", title="Yes"),
                                    DataSource(id="1", title="No"),
                                ],
                                required=True,
                            ),
                            TextSubheading(text="How could we do better?"),
                            comment_text := TextArea(
                                name="comment_text",
                                label="Leave a comment",
                                required=False,
                            ),
                            Footer(
                                label="Continue",
                                on_click_action=NavigateAction(
                                    next=Next(name="RATE"),
                                    payload={
                                        "recommend_radio": recommend_radio.ref,
                                        "comment_text": comment_text.ref,
                                    },
                                ),
                            ),
                        ],
                    )
                ],
            ),
        ),
        Screen(
            id="RATE",
            title="Feedback 2 of 2",
            data=[
                recommend_radio := ScreenData(key="recommend_radio", example="Example"),
                comment_text := ScreenData(key="comment_text", example="Example"),
            ],
            terminal=True,
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="form",
                        children=[
                            TextSubheading(text="Rate the following: "),
                            purchase_rating := Dropdown(
                                name="purchase_rating",
                                label="Purchase experience",
                                required=True,
                                data_source=[
                                    DataSource(id="0", title="★★★★★ • Excellent (5/5)"),
                                    DataSource(id="1", title="★★★★☆ • Good (4/5)"),
                                    DataSource(id="2", title="★★★☆☆ • Average (3/5)"),
                                    DataSource(id="3", title="★★☆☆☆ • Poor (2/5)"),
                                    DataSource(id="4", title="★☆☆☆☆ • Very Poor (1/5)"),
                                ],
                            ),
                            delivery_rating := Dropdown(
                                name="delivery_rating",
                                label="Delivery and setup",
                                required=True,
                                data_source=[
                                    DataSource(id="0", title="★★★★★ • Excellent (5/5)"),
                                    DataSource(id="1", title="★★★★☆ • Good (4/5)"),
                                    DataSource(id="2", title="★★★☆☆ • Average (3/5)"),
                                    DataSource(id="3", title="★★☆☆☆ • Poor (2/5)"),
                                    DataSource(id="4", title="★☆☆☆☆ • Very Poor (1/5)"),
                                ],
                            ),
                            cs_rating := Dropdown(
                                name="cs_rating",
                                label="Customer service",
                                required=True,
                                data_source=[
                                    DataSource(id="0", title="★★★★★ • Excellent (5/5)"),
                                    DataSource(id="1", title="★★★★☆ • Good (4/5)"),
                                    DataSource(id="2", title="★★★☆☆ • Average (3/5)"),
                                    DataSource(id="3", title="★★☆☆☆ • Poor (2/5)"),
                                    DataSource(id="4", title="★☆☆☆☆ • Very Poor (1/5)"),
                                ],
                            ),
                            Footer(
                                label="Done",
                                on_click_action=CompleteAction(
                                    payload={
                                        "purchase_rating": purchase_rating.ref,
                                        "delivery_rating": delivery_rating.ref,
                                        "cs_rating": cs_rating.ref,
                                        "recommend_radio": recommend_radio.ref,
                                        "comment_text": comment_text.ref,
                                    },
                                ),
                            ),
                        ],
                    )
                ],
            ),
        ),
    ],
)

load_re_engagement = FlowJSON(
    version="2.1",
    screens=[
        Screen(
            id="SIGN_UP",
            title="Finish Sign Up",
            terminal=True,
            data={},
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="form",
                        children=[
                            first_name := TextInput(
                                name="firstName",
                                label="First Name",
                                input_type=InputType.TEXT,
                                required=True,
                                visible=True,
                            ),
                            last_name := TextInput(
                                name="lastName",
                                label="Last Name",
                                input_type=InputType.TEXT,
                                required=True,
                                visible=True,
                            ),
                            email := TextInput(
                                name="email",
                                label="Email Address",
                                input_type=InputType.EMAIL,
                                required=True,
                                visible=True,
                            ),
                            Footer(
                                label="Done",
                                enabled=True,
                                on_click_action=CompleteAction(
                                    payload={
                                        "firstName": first_name.ref,
                                        "lastName": last_name.ref,
                                        "email": email.ref,
                                    },
                                ),
                            ),
                        ],
                    )
                ],
            ),
        )
    ],
)

costumer_engagement = FlowJSON(
    version="2.1",
    screens=[
        Screen(
            id="QUESTION_ONE",
            title="Question 1 of 3",
            data={},
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="form",
                        children=[
                            TextHeading(
                                text="You've found the perfect deal, what do you do next?"
                            ),
                            question1_checkbox := CheckboxGroup(
                                name="question1Checkbox",
                                label="Choose all that apply:",
                                required=True,
                                data_source=[
                                    DataSource(id="0", title="Buy it right away"),
                                    DataSource(
                                        id="1", title="Check reviews before buying"
                                    ),
                                    DataSource(
                                        id="2", title="Share it with friends + family"
                                    ),
                                    DataSource(
                                        id="3", title="Buy multiple, while its cheap"
                                    ),
                                    DataSource(id="4", title="None of the above"),
                                ],
                            ),
                            Footer(
                                label="Continue",
                                on_click_action=NavigateAction(
                                    next=Next(
                                        type=NextType.SCREEN, name="QUESTION_TWO"
                                    ),
                                    payload={
                                        "question1Checkbox": question1_checkbox.ref
                                    },
                                ),
                            ),
                        ],
                    )
                ],
            ),
        ),
        Screen(
            id="QUESTION_TWO",
            title="Question 2 of 3",
            data=[
                question1_checkbox := ScreenData(
                    key="question1Checkbox", example=["Example", "Example2"]
                ),
            ],
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="form",
                        children=[
                            TextHeading(
                                text="Its your birthday in two weeks, how might you prepare?"
                            ),
                            question2_radio_buttons := RadioButtonsGroup(
                                name="question2RadioButtons",
                                label="Choose all that apply:",
                                required=True,
                                data_source=[
                                    DataSource(id="0", title="Buy something new"),
                                    DataSource(id="1", title="Wear the same, as usual"),
                                    DataSource(id="2", title="Look for a deal online"),
                                ],
                            ),
                            Footer(
                                label="Continue",
                                on_click_action=NavigateAction(
                                    next=Next(
                                        type=NextType.SCREEN,
                                        name="QUESTION_THREE",
                                    ),
                                    payload={
                                        "question2RadioButtons": question2_radio_buttons.ref,
                                        "question1Checkbox": question1_checkbox.ref,
                                    },
                                ),
                            ),
                        ],
                    )
                ],
            ),
        ),
        Screen(
            id="QUESTION_THREE",
            title="Question 3 of 3",
            data=[
                question2_radio_buttons := ScreenData(
                    key="question2RadioButtons", example="Example"
                ),
                question1_checkbox := ScreenData(
                    key="question1Checkbox", example=["Example", "Example2"]
                ),
            ],
            terminal=True,
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="form",
                        children=[
                            TextHeading(text="What's the best gift for a friend?"),
                            question3_checkbox := CheckboxGroup(
                                name="question3Checkbox",
                                label="Choose all that apply:",
                                required=True,
                                data_source=[
                                    DataSource(id="0", title="A gift voucher"),
                                    DataSource(id="1", title="A new outfit "),
                                    DataSource(id="2", title="A bouquet of flowers"),
                                    DataSource(id="3", title="A meal out together"),
                                ],
                            ),
                            Footer(
                                label="Done",
                                on_click_action=CompleteAction(
                                    payload={
                                        "question1Checkbox": question1_checkbox.ref,
                                        "question2RadioButtons": question2_radio_buttons.ref,
                                        "question3Checkbox": question3_checkbox.ref,
                                    },
                                ),
                            ),
                        ],
                    )
                ],
            ),
        ),
    ],
)

support_request = FlowJSON(
    version="2.1",
    screens=[
        Screen(
            id="DETAILS",
            title="Get help",
            data={},
            terminal=True,
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="form",
                        children=[
                            name := TextInput(
                                name="name",
                                label="Name",
                                input_type=InputType.TEXT,
                                required=True,
                            ),
                            order_number := TextInput(
                                label="Order number",
                                name="orderNumber",
                                input_type=InputType.NUMBER,
                                required=True,
                                helper_text="",
                            ),
                            topic_radio := RadioButtonsGroup(
                                label="Choose a topic",
                                name="topicRadio",
                                data_source=[
                                    DataSource(id="0", title="Orders and payments"),
                                    DataSource(id="1", title="Maintenance"),
                                    DataSource(id="2", title="Delivery"),
                                    DataSource(id="3", title="Returns"),
                                    DataSource(id="4", title="Other"),
                                ],
                                required=True,
                            ),
                            desc := TextArea(
                                label="Description of issue",
                                required=False,
                                name="description",
                            ),
                            Footer(
                                label="Done",
                                on_click_action=CompleteAction(
                                    payload={
                                        "name": name.ref,
                                        "orderNumber": order_number.ref,
                                        "topicRadio": topic_radio.ref,
                                        "description": desc.ref,
                                    },
                                ),
                            ),
                        ],
                    )
                ],
            ),
        )
    ],
)

communication_preferences = FlowJSON(
    version="2.1",
    screens=[
        Screen(
            id="PREFERENCES",
            title="Update Preferences",
            data={},
            terminal=True,
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="form",
                        children=[
                            communication_types := CheckboxGroup(
                                label="Communication types",
                                required=True,
                                name="communicationTypes",
                                data_source=[
                                    DataSource(
                                        id="0", title="Special offers and promotions"
                                    ),
                                    DataSource(
                                        id="1", title="Changes to my subscription"
                                    ),
                                    DataSource(id="2", title="News and events"),
                                    DataSource(id="3", title="New products"),
                                ],
                            ),
                            contact_prefs := CheckboxGroup(
                                label="Contact Preferences",
                                required=False,
                                name="contactPrefs",
                                data_source=[
                                    DataSource(id="0", title="Whatsapp"),
                                    DataSource(id="1", title="Email"),
                                    DataSource(id="2", title="SMS"),
                                ],
                            ),
                            Footer(
                                label="Done",
                                on_click_action=CompleteAction(
                                    payload={
                                        "communicationTypes": communication_types.ref,
                                        "contactPrefs": contact_prefs.ref,
                                    },
                                ),
                            ),
                        ],
                    )
                ],
            ),
        )
    ],
)

register_for_an_event = FlowJSON(
    version="2.1",
    screens=[
        Screen(
            id="SIGN_UP",
            title="Sign Up",
            data={},
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="form",
                        children=[
                            TextHeading(text="Join our next webinar!"),
                            TextBody(text="First, we'll need a few details from you."),
                            first_name := TextInput(
                                name="firstName",
                                label="First Name",
                                input_type=InputType.TEXT,
                                required=True,
                            ),
                            last_name := TextInput(
                                label="Last Name",
                                name="lastName",
                                input_type=InputType.TEXT,
                                required=True,
                            ),
                            email := TextInput(
                                label="Email Address",
                                name="email",
                                input_type=InputType.EMAIL,
                                required=True,
                            ),
                            Footer(
                                label="Continue",
                                on_click_action=NavigateAction(
                                    next=Next(type=NextType.SCREEN, name="SURVEY"),
                                    payload={
                                        "firstName": first_name.ref,
                                        "lastName": last_name.ref,
                                        "email": email.ref,
                                    },
                                ),
                            ),
                        ],
                    )
                ],
            ),
        ),
        Screen(
            id="SURVEY",
            title="Thank you",
            data=[
                first_name := ScreenData(key="firstName", example="Example"),
                last_name := ScreenData(key="lastName", example="Example"),
                email := ScreenData(key="email", example="Example"),
            ],
            terminal=True,
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="form",
                        children=[
                            TextHeading(text="Before you go"),
                            TextBody(text="How did you hear about us?"),
                            source := RadioButtonsGroup(
                                name="source",
                                label="Choose one",
                                required=False,
                                data_source=[
                                    DataSource(id="0", title="Friend's recommendation"),
                                    DataSource(id="1", title="TV advertisement"),
                                    DataSource(id="2", title="Search engine"),
                                    DataSource(id="3", title="Social media"),
                                ],
                            ),
                            Footer(
                                label="Done",
                                on_click_action=CompleteAction(
                                    payload={
                                        "source": source.ref,
                                        "firstName": first_name.ref,
                                        "lastName": last_name.ref,
                                        "email": email.ref,
                                    },
                                ),
                            ),
                        ],
                    )
                ],
            ),
        ),
    ],
)

sign_in = FlowJSON(
    version="2.1",
    data_api_version="3.0",
    data_channel_uri="https://example.com",
    routing_model={
        "SIGN_IN": ["SIGN_UP", "FORGOT_PASSWORD"],
        "SIGN_UP": ["TERMS_AND_CONDITIONS"],
        "FORGOT_PASSWORD": [],
        "TERMS_AND_CONDITIONS": [],
    },
    screens=[
        Screen(
            id="SIGN_IN",
            title="Sign in",
            terminal=True,
            data={},
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="sign_in_form",
                        children=[
                            email := TextInput(
                                name="email",
                                label="Email address",
                                input_type=InputType.EMAIL,
                                required=True,
                            ),
                            password := TextInput(
                                name="password",
                                label="Password",
                                input_type=InputType.PASSWORD,
                                required=True,
                            ),
                            EmbeddedLink(
                                text="Don't have an account? Sign up",
                                on_click_action=NavigateAction(
                                    next=Next(type=NextType.SCREEN, name="SIGN_UP"),
                                ),
                            ),
                            EmbeddedLink(
                                text="Forgot password",
                                on_click_action=NavigateAction(
                                    next=Next(
                                        type=NextType.SCREEN,
                                        name="FORGOT_PASSWORD",
                                    ),
                                    payload={"body": "Example"},
                                ),
                            ),
                            Footer(
                                label="Sign in",
                                on_click_action=DataExchangeAction(
                                    payload={
                                        "email": email.ref,
                                        "password": password.ref,
                                    },
                                ),
                            ),
                        ],
                    )
                ],
            ),
        ),
        Screen(
            id="SIGN_UP",
            title="Sign up",
            data={},
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="sign_up_form",
                        children=[
                            first_name := TextInput(
                                name="first_name",
                                label="First Name",
                                input_type=InputType.TEXT,
                                required=True,
                            ),
                            last_name := TextInput(
                                name="last_name",
                                label="Last Name",
                                input_type=InputType.TEXT,
                                required=True,
                            ),
                            email := TextInput(
                                name="email",
                                label="Email address",
                                input_type=InputType.EMAIL,
                                required=True,
                            ),
                            password := TextInput(
                                name="password",
                                label="Set password",
                                input_type=InputType.PASSWORD,
                                required=True,
                            ),
                            confirm_password := TextInput(
                                name="confirm_password",
                                label="Confirm password",
                                input_type=InputType.PASSWORD,
                                required=True,
                            ),
                            terms_agreement := OptIn(
                                name="terms_agreement",
                                label="I agree with the terms.",
                                required=True,
                                on_click_action=NavigateAction(
                                    next=Next(
                                        type=NextType.SCREEN,
                                        name="TERMS_AND_CONDITIONS",
                                    ),
                                ),
                            ),
                            offers_acceptance := OptIn(
                                name="offers_acceptance",
                                label="I would like to receive news and offers.",
                            ),
                            Footer(
                                label="Continue",
                                on_click_action=DataExchangeAction(
                                    payload={
                                        "first_name": first_name.ref,
                                        "last_name": last_name.ref,
                                        "email": email.ref,
                                        "password": password.ref,
                                        "confirm_password": confirm_password.ref,
                                        "terms_agreement": terms_agreement.ref,
                                        "offers_acceptance": offers_acceptance.ref,
                                    },
                                ),
                            ),
                        ],
                    )
                ],
            ),
        ),
        Screen(
            id="FORGOT_PASSWORD",
            title="Forgot password",
            terminal=True,
            data=[
                body := ScreenData(
                    key="body",
                    example=(
                        "Enter your email address for your account and we'll send a reset link. "
                        "The single-use link will expire after 24 hours."
                    ),
                ),
            ],
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="forgot_password_form",
                        children=[
                            TextBody(text=body.ref),
                            email := TextInput(
                                name="email",
                                label="Email address",
                                input_type=InputType.EMAIL,
                                required=True,
                            ),
                            Footer(
                                label="Sign in",
                                on_click_action=DataExchangeAction(
                                    payload={"email": email.ref},
                                ),
                            ),
                        ],
                    )
                ],
            ),
        ),
        Screen(
            id="TERMS_AND_CONDITIONS",
            title="Terms and conditions",
            data={},
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    TextHeading(text="Our Terms"),
                    TextSubheading(text="Data usage"),
                    TextBody(
                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae odio dui. Praesent ut nulla tincidunt, scelerisque augue malesuada, volutpat lorem. Aliquam iaculis ex at diam posuere mollis. Suspendisse eget purus ac tellus interdum pharetra. In quis dolor turpis. Fusce in porttitor enim, vitae efficitur nunc. Fusce dapibus finibus volutpat. Fusce velit mi, ullamcorper ac gravida vitae, blandit quis ex. Fusce ultrices diam et justo blandit, quis consequat nisl euismod. Vestibulum pretium est sem, vitae convallis justo sollicitudin non. Morbi bibendum purus mattis quam condimentum, a scelerisque erat bibendum. Nullam sit amet bibendum lectus."
                    ),
                    TextSubheading(text="Privacy policy"),
                    TextBody(
                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae odio dui. Praesent ut nulla tincidunt, scelerisque augue malesuada, volutpat lorem. Aliquam iaculis ex at diam posuere mollis. Suspendisse eget purus ac tellus interdum pharetra. In quis dolor turpis. Fusce in porttitor enim, vitae efficitur nunc. Fusce dapibus finibus volutpat. Fusce velit mi, ullamcorper ac gravida vitae, blandit quis ex. Fusce ultrices diam et justo blandit, quis consequat nisl euismod. Vestibulum pretium est sem, vitae convallis justo sollicitudin non. Morbi bibendum purus mattis quam condimentum, a scelerisque erat bibendum. Nullam sit amet bibendum lectus."
                    ),
                ],
            ),
        ),
    ],
)

register = FlowJSON(
    version="2.1",
    data_api_version="3.0",
    data_channel_uri="https://example.com",
    routing_model={"REGISTER": ["TERMS_AND_CONDITIONS"], "TERMS_AND_CONDITIONS": []},
    screens=[
        Screen(
            id="REGISTER",
            title="Register for an account",
            terminal=True,
            data=[
                error_messages := ScreenData(
                    key="error_messages",
                    example={"confirm_password": "Passwords don't match."},
                ),
            ],
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="register_form",
                        error_messages=error_messages.ref,
                        children=[
                            first_name := TextInput(
                                name="first_name",
                                required=True,
                                label="First name",
                                input_type="text",
                            ),
                            last_name := TextInput(
                                name="last_name",
                                required=True,
                                label="Last name",
                                input_type="text",
                            ),
                            email := TextInput(
                                name="email",
                                required=True,
                                label="Email address",
                                input_type="email",
                            ),
                            password := TextInput(
                                name="password",
                                required=True,
                                label="Set password",
                                input_type="password",
                            ),
                            confirm_password := TextInput(
                                name="confirm_password",
                                required=True,
                                label="Confirm password",
                                input_type="password",
                            ),
                            terms_agreement := OptIn(
                                name="terms_agreement",
                                label="I agree with the terms.",
                                required=True,
                                on_click_action=NavigateAction(
                                    next=Next(
                                        type=NextType.SCREEN,
                                        name="TERMS_AND_CONDITIONS",
                                    ),
                                ),
                            ),
                            offers_acceptance := OptIn(
                                name="offers_acceptance",
                                label="I would like to receive news and offers.",
                            ),
                            Footer(
                                label="Continue",
                                on_click_action=DataExchangeAction(
                                    payload={
                                        "first_name": first_name.ref,
                                        "last_name": last_name.ref,
                                        "email": email.ref,
                                        "password": password.ref,
                                        "confirm_password": confirm_password.ref,
                                        "terms_agreement": terms_agreement.ref,
                                        "offers_acceptance": offers_acceptance.ref,
                                    },
                                ),
                            ),
                        ],
                    )
                ],
            ),
        ),
        Screen(
            id="TERMS_AND_CONDITIONS",
            title="Terms and conditions",
            data={},
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    TextHeading(text="Our Terms"),
                    TextSubheading(text="Data usage"),
                    TextBody(
                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae odio dui. Praesent ut nulla tincidunt, scelerisque augue malesuada, volutpat lorem. Aliquam iaculis ex at diam posuere mollis. Suspendisse eget purus ac tellus interdum pharetra. In quis dolor turpis. Fusce in porttitor enim, vitae efficitur nunc. Fusce dapibus finibus volutpat. Fusce velit mi, ullamcorper ac gravida vitae, blandit quis ex. Fusce ultrices diam et justo blandit, quis consequat nisl euismod. Vestibulum pretium est sem, vitae convallis justo sollicitudin non. Morbi bibendum purus mattis quam condimentum, a scelerisque erat bibendum. Nullam sit amet bibendum lectus."
                    ),
                    TextSubheading(text="Privacy policy"),
                    TextBody(
                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae odio dui. Praesent ut nulla tincidunt, scelerisque augue malesuada, volutpat lorem. Aliquam iaculis ex at diam posuere mollis. Suspendisse eget purus ac tellus interdum pharetra. In quis dolor turpis. Fusce in porttitor enim, vitae efficitur nunc. Fusce dapibus finibus volutpat. Fusce velit mi, ullamcorper ac gravida vitae, blandit quis ex. Fusce ultrices diam et justo blandit, quis consequat nisl euismod. Vestibulum pretium est sem, vitae convallis justo sollicitudin non. Morbi bibendum purus mattis quam condimentum, a scelerisque erat bibendum. Nullam sit amet bibendum lectus."
                    ),
                ],
            ),
        ),
    ],
)
book_a_table = FlowJSON(
    version="2.1",
    data_api_version="3.0",
    data_channel_uri="https://example.com",
    routing_model={
        "BOOK_TABLE": ["BOOKING_DETAILS"],
        "BOOKING_DETAILS": ["BOOKING_CONFIRMATION"],
        "BOOKING_CONFIRMATION": ["TERMS_AND_CONDITIONS"],
        "TERMS_AND_CONDITIONS": [],
    },
    screens=[
        Screen(
            id="BOOK_TABLE",
            title="Book a table",
            data=[
                min_date := ScreenData(key="min_date", example="1696892400000"),
                max_date := ScreenData(key="max_date", example="1760050800000"),
                unavailable_dates := ScreenData(
                    key="unavailable_dates", example=["1760310000000"]
                ),
                time := ScreenData(
                    key="time",
                    example=[
                        DataSource(id="1", title="12:30"),
                        DataSource(id="2", title="13:30"),
                        DataSource(id="3", title="18:30"),
                        DataSource(id="4", title="19:30"),
                        DataSource(id="5", title="20:30"),
                    ],
                ),
                people := ScreenData(
                    key="people",
                    example=[
                        DataSource(id="1", title="1"),
                        DataSource(id="2", title="2"),
                        DataSource(id="3", title="3"),
                        DataSource(id="4", title="4"),
                        DataSource(id="5", title="5"),
                        DataSource(id="6", title="6"),
                        DataSource(id="7+", title="7+"),
                    ],
                ),
                location_data := ScreenData(
                    key="location",
                    example=[
                        DataSource(id="1", title="Shorty Heights, Light City, 59923")
                    ],
                ),
            ],
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="book_table_form",
                        children=[
                            location := Dropdown(
                                label="Location",
                                name="location",
                                data_source=location_data.ref,
                                required=True,
                                on_select_action=DataExchangeAction(
                                    payload={"location": ComponentRef("location")},
                                ),
                            ),
                            people_form := Dropdown(
                                label="People",
                                name="people",
                                data_source=people.ref,
                                required=True,
                                on_select_action=DataExchangeAction(
                                    payload={"people": ComponentRef("people")},
                                ),
                            ),
                            date := DatePicker(
                                name="date",
                                label="Date",
                                min_date=min_date.ref,
                                max_date=max_date.ref,
                                unavailable_dates=unavailable_dates.ref,
                                required=True,
                                on_select_action=DataExchangeAction(
                                    payload={"date": ComponentRef("date")},
                                ),
                            ),
                            time_form := Dropdown(
                                label="Time",
                                name="time",
                                data_source=time.ref,
                                required=True,
                            ),
                            Footer(
                                label="Continue",
                                on_click_action=NavigateAction(
                                    next=Next(
                                        type=NextType.SCREEN,
                                        name="BOOKING_DETAILS",
                                    ),
                                ),
                            ),
                        ],
                    )
                ],
            ),
        ),
        Screen(
            id="BOOKING_DETAILS",
            title="Booking details",
            data={},
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="booking_details_form",
                        children=[
                            name := TextInput(label="Name", name="name", required=True),
                            special_occasion := Dropdown(
                                label="Special occasion",
                                name="special_occasion",
                                data_source=[
                                    DataSource(id="1", title="Birthday"),
                                    DataSource(id="2", title="Anniversary"),
                                    DataSource(id="3", title="Engagement"),
                                    DataSource(id="4", title="Graduation"),
                                    DataSource(id="5", title="Other"),
                                ],
                                required=False,
                            ),
                            requirements := TextArea(
                                label="Requirements",
                                name="requirements",
                                helper_text="e.g. Dietary or accessibility",
                                required=False,
                            ),
                            Footer(
                                label="Continue",
                                on_click_action=DataExchangeAction(
                                    payload={
                                        "name": name.ref,
                                        "special_occasion": special_occasion.ref,
                                        "requirements": requirements.ref,
                                    },
                                ),
                            ),
                        ],
                    )
                ],
            ),
        ),
        Screen(
            id="BOOKING_CONFIRMATION",
            title="Booking confirmation",
            terminal=True,
            data=[
                date := ScreenData(key="date", example="Date: Saturday, June 7 2023"),
                time := ScreenData(key="time", example="Time: 19:30"),
                people := ScreenData(key="people", example="People: 4"),
                location := ScreenData(
                    key="location",
                    example="Location: Shorty Heights, Light City, 59923",
                ),
                name := ScreenData(key="name", example="Name: John Doe"),
                special_occasion := ScreenData(
                    key="special_occasion", example="Special Occasion: Birthday"
                ),
            ],
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="confirmation_form",
                        children=[
                            TextBody(text=date.ref),
                            TextBody(text=time.ref),
                            TextBody(text=people.ref),
                            TextBody(text=location.ref),
                            TextBody(text=name.ref),
                            TextBody(text=special_occasion.ref),
                            privacy_policy := OptIn(
                                name="privacy_policy",
                                label="Accept our Privacy Policy",
                                required=True,
                                on_click_action=NavigateAction(
                                    next=Next(
                                        type=NextType.SCREEN,
                                        name="TERMS_AND_CONDITIONS",
                                    ),
                                ),
                            ),
                            Footer(
                                label="Confirm booking",
                                on_click_action=DataExchangeAction(),
                            ),
                        ],
                    )
                ],
            ),
        ),
        Screen(
            id="TERMS_AND_CONDITIONS",
            title="Terms and conditions",
            data={},
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    TextHeading(text="Our Terms"),
                    TextSubheading(text="Data usage"),
                    TextBody(
                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae odio dui. Praesent ut nulla tincidunt, scelerisque augue malesuada, volutpat lorem. Aliquam iaculis ex at diam posuere mollis. Suspendisse eget purus ac tellus interdum pharetra. In quis dolor turpis. Fusce in porttitor enim, vitae efficitur nunc. Fusce dapibus finibus volutpat. Fusce velit mi, ullamcorper ac gravida vitae, blandit quis ex. Fusce ultrices diam et justo blandit, quis consequat nisl euismod. Vestibulum pretium est sem, vitae convallis justo sollicitudin non. Morbi bibendum purus mattis quam condimentum, a scelerisque erat bibendum. Nullam sit amet bibendum lectus.",
                    ),
                    TextSubheading(text="Privacy policy"),
                    TextBody(
                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae odio dui. Praesent ut nulla tincidunt, scelerisque augue malesuada, volutpat lorem. Aliquam iaculis ex at diam posuere mollis. Suspendisse eget purus ac tellus interdum pharetra. In quis dolor turpis. Fusce in porttitor enim, vitae efficitur nunc. Fusce dapibus finibus volutpat. Fusce velit mi, ullamcorper ac gravida vitae, blandit quis ex. Fusce ultrices diam et justo blandit, quis consequat nisl euismod. Vestibulum pretium est sem, vitae convallis justo sollicitudin non. Morbi bibendum purus mattis quam condimentum, a scelerisque erat bibendum. Nullam sit amet bibendum lectus.",
                    ),
                ],
            ),
        ),
    ],
)

get_a_quote = FlowJSON(
    version="2.1",
    data_api_version="3.0",
    data_channel_uri="https://example.com",
    routing_model={
        "DETAILS": ["COVER"],
        "COVER": ["QUOTE"],
        "QUOTE": ["TERMS_AND_CONDITIONS"],
        "TERMS_AND_CONDITIONS": [],
    },
    screens=[
        Screen(
            id="DETAILS",
            title="Your details",
            data=[
                city := ScreenData(
                    key="city", example=[DataSource(id="1", title="Light City, SO")]
                ),
            ],
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="details_form",
                        children=[
                            name := TextInput(
                                label="Your name",
                                input_type=InputType.TEXT,
                                name="name",
                                required=True,
                            ),
                            address := TextInput(
                                label="Street address",
                                input_type=InputType.TEXT,
                                name="address",
                                required=True,
                            ),
                            city := Dropdown(
                                label="City, State",
                                name="city",
                                data_source=city.ref,
                                required=True,
                            ),
                            zip_code := TextInput(
                                label="Zip code",
                                input_type=InputType.TEXT,
                                name="zip_code",
                                required=True,
                            ),
                            country_region := TextInput(
                                label="Country/Region",
                                input_type=InputType.TEXT,
                                name="country_region",
                                required=True,
                            ),
                            Footer(
                                label="Continue",
                                on_click_action=DataExchangeAction(
                                    payload={
                                        "name": name.ref,
                                        "address": address.ref,
                                        "city": city.ref,
                                        "zip_code": zip_code.ref,
                                        "country_region": country_region.ref,
                                    },
                                ),
                            ),
                        ],
                    )
                ],
            ),
        ),
        Screen(
            id="COVER",
            title="Your cover",
            data=[
                options := ScreenData(
                    key="options",
                    example=[
                        DataSource(
                            id="1",
                            title="Fire and theft",
                            description="Cover your home against incidents of theft or accidental fires",
                        ),
                        DataSource(
                            id="2",
                            title="Natural disaster",
                            description="Protect your home against disasters including earthquakes, floods and storms",
                        ),
                        DataSource(
                            id="3",
                            title="Liability",
                            description="Protect yourself from legal liabilities that occur from accidents on your property",
                        ),
                    ],
                ),
            ],
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="cover_form",
                        children=[
                            options_form := CheckboxGroup(
                                name="options",
                                data_source=options.ref,
                                label="Options",
                                required=True,
                            ),
                            Footer(
                                label="Continue",
                                on_click_action=DataExchangeAction(
                                    payload={"options": options_form.ref},
                                ),
                            ),
                        ],
                    )
                ],
            ),
        ),
        Screen(
            id="QUOTE",
            title="Your quote",
            terminal=True,
            data=[
                excess := ScreenData(
                    key="excess", example=[DataSource(id="1", title="$250")]
                ),
                total := ScreenData(key="total", example="$47.98 per month"),
            ],
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    Form(
                        name="quote_form",
                        children=[
                            Dropdown(
                                label="Excess",
                                name="excess",
                                data_source=excess.ref,
                                on_select_action=DataExchangeAction(
                                    payload={"excess": ComponentRef("excess")},
                                ),
                                required=True,
                            ),
                            RadioButtonsGroup(
                                name="payment_options",
                                label="Payment options",
                                data_source=[
                                    DataSource(id="1", title="Monthly"),
                                    DataSource(id="2", title="Annually (Save $115)"),
                                ],
                                on_select_action=DataExchangeAction(
                                    payload={
                                        "payment_options": ComponentRef(
                                            "payment_options"
                                        )
                                    },
                                ),
                                required=True,
                                init_value="1",
                            ),
                            TextHeading(text=total.ref),
                            privacy_policy := OptIn(
                                name="privacy_policy",
                                label="Accept our Privacy Policy",
                                required=True,
                                on_click_action=NavigateAction(
                                    next=Next(
                                        type=NextType.SCREEN,
                                        name="TERMS_AND_CONDITIONS",
                                    ),
                                ),
                            ),
                            Footer(
                                label="Choose quote",
                                on_click_action=DataExchangeAction(
                                    payload={
                                        "privacy_policy": privacy_policy.ref,
                                    },
                                ),
                            ),
                        ],
                    )
                ],
            ),
        ),
        Screen(
            id="TERMS_AND_CONDITIONS",
            title="Terms and conditions",
            data={},
            layout=Layout(
                type=LayoutType.SINGLE_COLUMN,
                children=[
                    TextHeading(text="Our Terms"),
                    TextSubheading(text="Data usage"),
                    TextBody(
                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae odio dui. Praesent ut nulla tincidunt, scelerisque augue malesuada, volutpat lorem. Aliquam iaculis ex at diam posuere mollis. Suspendisse eget purus ac tellus interdum pharetra. In quis dolor turpis. Fusce in porttitor enim, vitae efficitur nunc. Fusce dapibus finibus volutpat. Fusce velit mi, ullamcorper ac gravida vitae, blandit quis ex. Fusce ultrices diam et justo blandit, quis consequat nisl euismod. Vestibulum pretium est sem, vitae convallis justo sollicitudin non. Morbi bibendum purus mattis quam condimentum, a scelerisque erat bibendum. Nullam sit amet bibendum lectus."
                    ),
                    TextSubheading(text="Privacy policy"),
                    TextBody(
                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae odio dui. Praesent ut nulla tincidunt, scelerisque augue malesuada, volutpat lorem. Aliquam iaculis ex at diam posuere mollis. Suspendisse eget purus ac tellus interdum pharetra. In quis dolor turpis. Fusce in porttitor enim, vitae efficitur nunc. Fusce dapibus finibus volutpat. Fusce velit mi, ullamcorper ac gravida vitae, blandit quis ex. Fusce ultrices diam et justo blandit, quis consequat nisl euismod. Vestibulum pretium est sem, vitae convallis justo sollicitudin non. Morbi bibendum purus mattis quam condimentum, a scelerisque erat bibendum. Nullam sit amet bibendum lectus."
                    ),
                ],
            ),
        ),
    ],
)