# Toggling visibility of components

Often it is necessary to show/hide a component based on some customer's input. This can be achieved with `visibility_condition`.

Visibility condition is using [JsonLogic](/kasko-frontend-documentation/guides/jsonlogic.md). The available variables within it are `input`, `flags`, and all other [JsonLogic namespaces](/kasko-frontend-documentation/guides/jsonlogic.md). The `input` variable will contain all of the customer input. For example, `input.first_name` contains the value of `first_name` field.

## Available Flags

The `flags` namespace contains system-defined attributes. **Important**: `flags` is a top-level namespace, NOT under `input`.

```js
// Correct
{"var": "flags.editing"}

// Wrong
{"var": "input.flags.editing"}
```

### Common Flags

| Flag               | Type    | Description                                                       |
| ------------------ | ------- | ----------------------------------------------------------------- |
| `editing`          | boolean | Set to `true` when the "edit" button is clicked in summary screen |
| `quote_loaded`     | boolean | Quote request has completed successfully                          |
| `is_knockout`      | boolean | Knockout flow has been triggered (quote returned 422)             |
| `is_lead`          | boolean | Customer is entering the application as a lead                    |
| `is_prefilling`    | boolean | Customer is entering with data prefilled                          |
| `active_items`     | integer | Count of active items                                             |
| `offer_accepted`   | boolean | Offer flow has been accepted                                      |
| `is_dashboard`     | boolean | Application is running in dashboard context                       |
| `policy_purchased` | boolean | Policy has been purchased                                         |

### Payment Flags

| Flag              | Type    | Description              |
| ----------------- | ------- | ------------------------ |
| `is_3d_secure`    | boolean | 3D Secure flow is active |
| `payment_back`    | boolean | Returned from payment    |
| `payment_tbd`     | boolean | Payment to be determined |
| `payment_fail`    | boolean | Payment has failed       |
| `payment_success` | boolean | Payment was successful   |

### Flow Flags

| Flag                        | Type    | Description                        |
| --------------------------- | ------- | ---------------------------------- |
| `is_policy_edit`            | boolean | Policy edit flow is active         |
| `is_mta`                    | boolean | Mid-term adjustment flow is active |
| `is_renewal`                | boolean | Renewal flow is active             |
| `is_recurring_payment_flow` | boolean | Recurring payment flow is active   |

### Lead Flags

| Flag                      | Type    | Description                        |
| ------------------------- | ------- | ---------------------------------- |
| `lead_token_exists`       | boolean | Lead token exists                  |
| `lead_token_valid`        | boolean | Lead token is valid                |
| `lead_retrieved`          | boolean | Lead data has been retrieved       |
| `sales_lead_token_exists` | boolean | Sales lead token exists            |
| `sales_lead_retrieved`    | boolean | Sales lead data has been retrieved |

### FNOL/Claims Flags

| Flag                     | Type    | Description                    |
| ------------------------ | ------- | ------------------------------ |
| `is_fnol_user_logged_in` | boolean | FNOL user is logged in         |
| `is_claim_edit`          | boolean | Claim edit flow is active      |
| `claim_draft_retrieved`  | boolean | Claim draft has been retrieved |

### Other Flags

| Flag                    | Type    | Description                  |
| ----------------------- | ------- | ---------------------------- |
| `can_update_offer`      | boolean | Offer can be updated         |
| `can_purchase_offer`    | boolean | Offer can be purchased       |
| `is_customer_logged_in` | boolean | Customer is logged in        |
| `is_quote_loading`      | boolean | Quote request is in progress |
| `is_admin`              | boolean | Admin mode is active         |
| `is_captcha_enabled`    | boolean | Captcha is enabled           |
| `skip_auth`             | boolean | Skip authentication          |
| `is_live_mode`          | boolean | Application is in live mode  |
| `ab_variant`            | string  | A/B test variant identifier  |

## Example visibility condition:

```json
{
  "type": "jsonlogic",
  "schema": {
    "if": [
      {
        "var": "input.data.module_enabled"
      },
      true,
      false
    ]
  }
}
```

## Editing Flow Pattern

When building screens before the summary, it's common to check if the user is in editing mode to redirect them back to summary:

```json
{
  "next": {
    "type": "jsonlogic",
    "schema": {
      "if": [
        {"===": [{"var": "flags.editing"}, true]},
        "summary",
        "next-screen"
      ]
    }
  }
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.kasko.io/kasko-frontend-documentation/core-concepts/visibility-condition.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.