# 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](https://docs.kasko.io/kasko-frontend-documentation/guides/jsonlogic). The available variables within it are `input`, `flags`, and all other [JsonLogic namespaces](https://docs.kasko.io/kasko-frontend-documentation/guides/jsonlogic). 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"
      ]
    }
  }
}
```