### Install Condo UI using npm

Source: https://devportal.app.unitify.com/docs/ui/about

Installs the Condo UI library using the npm package manager. This is the first step to integrate Condo UI into your project.

```bash
npm i @open-condo/ui
```

--------------------------------

### Install Condo Icons using npm

Source: https://devportal.app.unitify.com/docs/ui/icons

Installs the Condo UI icon package using npm. This is the first step to using custom icons in your project.

```bash
npm i @open-condo/icons
```

--------------------------------

### Install Condo Bridge

Source: https://devportal.app.unitify.com/docs/bridge/about

Installs the Condo Bridge library using npm, yarn, or pnpm package managers.

```bash
npm i @open-condo/bridge
```

--------------------------------

### Open Modal Window Example (TypeScript)

Source: https://devportal.app.unitify.com/docs/bridge/methods/modals/show-modal-window

An example demonstrating how to use the CondoWebAppShowModalWindow method in a React component using TypeScript. It utilizes the '@open-condo/bridge' library to send the 'CondoWebAppShowModalWindow' command with specified URL, size, and title, and handles the returned modal ID.

```typescript
// pages/index.tsx
import React, { useCallback, useState } from 'react'

import bridge from '@open-condo/bridge'
import { Button } from '@open-condo/ui'

export default function MiniappPage (): React.ReactNode {
    const [openModalId, setOpenModalId] = useState<string | null>(null)

    const openModal = useCallback(() => {
        bridge.send('CondoWebAppShowModalWindow', {
            url: 'http://localhost:3001/modal',
            size: 'small',
            title: 'My modal title',
        }).then((data) => {
            setOpenModalId(data.modalId)
        })
    }, [])

    return (
        <Button type='primary' onClick={openModal}>Open modal window</Button>
    )
}
```

--------------------------------

### CondoWebAppGetLaunchParams Usage Example (React/Next.js)

Source: https://devportal.app.unitify.com/docs/bridge/methods/get-launch-params

Demonstrates how to use the CondoWebAppGetLaunchParams method within a React application, specifically in a Next.js environment. It shows how to fetch launch parameters on component mount and handle potential authentication mismatches.

```typescript
import '@/styles/globals.css'
import { cookies } from 'next/headers'
import React, { useEffect } from 'react'

import bridge from '@open-condo/bridge'

type AppProps = {
    Component: React.ComponentType
    pageProps: Record<string, any>
}

export default function App ({ Component, pageProps }: AppProps): React.ReactNode {
    useEffect(() => {
        bridge.send('CondoWebAppGetLaunchParams').then(data => {
            console.log(data.condoLocale)  // Set intl locale if you have some
            if (cookies().get('currentUserId')?.value !== data.condoUserId) {
                // Start auth process
            }
        }).catch((error) => {
            // Retry or begin auth process
        })
    }, [])

    return (
        <Component {...pageProps} />
    )
}

```

--------------------------------

### Show Notification in CondoWebApp (TypeScript)

Source: https://devportal.app.unitify.com/docs/bridge/methods/notifications/show-notification

Demonstrates how to use the CondoWebAppShowNotification method to display a notification to the user. This example shows how to send an error message with a description.

```typescript
import bridge from '@open-condo/bridge'

bridge.send('CondoWebAppShowNotification', {
    type: 'error',
    message: 'Error occurred during integration',
    description: 'Your account does not have the email address required to connect the mini-application'
})
```

--------------------------------

### Return Value Example (JSON)

Source: https://devportal.app.unitify.com/docs/bridge/methods/modals/show-modal-window

This JSON object represents the successful return value of the CondoWebAppShowModalWindow method, containing the unique identifier for the opened modal window.

```json
{ "modalId": "d21ec5e9-aafe-4552-b8ce-825f9c48c7ea" }
```

--------------------------------

### Using useBreakpoints Hook for Layout Adaptation

Source: https://devportal.app.unitify.com/docs/ui/adaptivity

Shows how to use the `useBreakpoints` hook to get an object indicating which breakpoints are currently active based on the window width. This is useful for adapting the overall page layout.

```typescript
import { useBreakpoints } from '@open-condo/ui/hooks'

const breakpoints = useBreakpoints()

console.log(breakpoints.MOBILE_SMALL) // true, 900px >= 0px
console.log(breakpoints.TABLET_LARGE) // true, 900px >= 768px
console.log(breakpoints.DESKTOP_SMALL) // false, 900px < 992px

```

```typescript
import { useBreakpoints } from '@open-condo/ui/hooks'

const breakpoints = useBreakpoints()

if (breakpoints.TABLET_SMALL && !breakpoints.DESKTOP_SMALL) {
    // at least small tablet, but not small desktop yet
}

```

--------------------------------

### Get Active Progress Bars (TypeScript)

Source: https://devportal.app.unitify.com/docs/bridge/methods/notifications/get-active-progress-bars

This TypeScript code snippet demonstrates how to use the CondoWebAppGetActiveProgressBars method via the '@open-condo/bridge'. It sends a request to retrieve active progress bars and logs the 'bars' array to the console. No specific dependencies are required beyond the bridge library.

```typescript
import bridge from '@open-condo/bridge'

bridge.send('CondoWebAppGetActiveProgressBars').then((data) => {
    console.log(data.bars)
})
```

--------------------------------

### CondoWebAppGetActiveProgressBars

Source: https://devportal.app.unitify.com/docs/bridge/methods/notifications/get-active-progress-bars

Retrieves all progress bar notifications that have not already been closed by the user. It is recommended to call this method every time the mini-app is started to keep tasks in sync.

```APIDOC
## GET /CondoWebAppGetActiveProgressBars

### Description
Retrieves all progress bar notifications that have not already been closed by the user. It is recommended to call this method every time the mini-app is started to keep tasks in sync.

### Method
GET

### Endpoint
/CondoWebAppGetActiveProgressBars

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
- **bars** (array) - An array containing active progress bar objects.
  - **id** (string) - The unique identifier for the progress bar.
  - **message** (string) - The main message of the progress bar.
  - **description** (string) - A more detailed description for the progress bar.
  - **progress** (number) - The current progress, typically a value between 0 and 100.
  - **externalTaskId** (string) - An identifier for an external task associated with the progress bar.

#### Response Example
```json
{
  "bars": [
    {
      "id": "9e4dd15a-aec6-4d81-90e3-fab58deac8c0",
      "message": "Uploading some data",
      "description": "Please keep the page open",
      "progress": 0,
      "externalTaskId": "de74da8d-207a-4a25-bf52-5bce25efe860"
    },
    {
      "id": "30cc8153-2d71-4be5-98dd-f2eae4cbfc82",
      "message": "Uploading some data",
      "description": "Please keep the page open",
      "progress": 0,
      "externalTaskId": "2179294d-f77e-4d54-9bac-94094f94adcc"
    }
  ]
}
```
```

--------------------------------

### CondoWebAppGetLaunchParams

Source: https://devportal.app.unitify.com/docs/bridge/methods/get-launch-params

Fetches the current user's context, which is necessary for session and interface management within the mini-application.

```APIDOC
## CondoWebAppGetLaunchParams

### Description
This method retrieves the current user's context, which is required by the mini-application for session and interface management.

### Method
GET

### Endpoint
/CondoWebAppGetLaunchParams

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
- **condoUserId** (string | null) - The current user ID.
- **condoUserType** ('staff' | 'resident') - The type of the user.
- **condoLocale** (string) - The current interface locale (e.g., "en", "ru").
- **condoContextEntity** ('Organization' | 'Resident') - The type of the context entity.
- **condoContextEntityId** (string | null) - The ID of the context entity.

#### Response Example
```json
{
    "condoUserId": "12345",
    "condoUserType": "staff",
    "condoLocale": "en",
    "condoContextEntity": "Organization",
    "condoContextEntityId": "67890"
}
```
```

--------------------------------

### Import Condo UI Components

Source: https://devportal.app.unitify.com/docs/ui/about

Demonstrates how to import individual components, such as the Button component, from the Condo UI library. It also shows how to import type definitions for component props.

```typescript
import { Button } from '@open-condo/ui'
import type { ButtonProps } from '@open-condo/ui'
```

--------------------------------

### CondoWebAppShowModalWindow

Source: https://devportal.app.unitify.com/docs/bridge/methods/modals/show-modal-window

This method allows you to open a modal window in the main interface with an additional page of your mini-application.

```APIDOC
## CondoWebAppShowModalWindow

### Description
This method allows you to open a modal window in the main interface with an additional page of your mini-application.

### Method
POST

### Endpoint
/CondoWebAppShowModalWindow

### Parameters
#### Request Body
- **title** (string) - Required - Modal window title
- **url** (string) - Required - URL of the page to be opened in the modal window
- **size** (string) - Optional - The size of the modal window. Examples can be found here (e.g., 'small', 'big')

### Request Example
```json
{
  "title": "My modal title",
  "url": "http://localhost:3001/modal",
  "size": "small"
}
```

### Response
#### Success Response (200)
- **modalId** (string) - ID of the opened modal window

#### Response Example
```json
{
  "modalId": "d21ec5e9-aafe-4552-b8ce-825f9c48c7ea"
}
```
```

--------------------------------

### Accessing Breakpoint Values in TypeScript

Source: https://devportal.app.unitify.com/docs/ui/adaptivity

Demonstrates how to import and access predefined breakpoint values from the '@open-condo/ui/hooks' library in TypeScript. These values represent minimum device widths for different screen categories.

```typescript
import { BREAKPOINTS } from '@open-condo/ui/hooks'

console.log(BREAKPOINTS.TABLET_LARGE) // 768

```

--------------------------------

### Retrieve URL Fragment with CondoWebAppGetFragment in React

Source: https://devportal.app.unitify.com/docs/bridge/methods/get-fragment

Demonstrates how to use the CondoWebAppGetFragment method within a React application to fetch URL fragments. It utilizes the bridge to send the 'CondoWebAppGetFragment' command and processes the returned fragment using URLSearchParams to extract specific parameters like 'next'.

```typescript
import React, { useEffect, useState } from 'react'

import bridge from '@open-condo/bridge'

import type { AppProps } from 'next/app'

export default function App ({ Component, pageProps }: AppProps): React.ReactNode {
    const [nextPath, setNextPath] = useState('')

    useEffect(() => {
        bridge.send('CondoWebAppGetFragment').then(data => {
            const params = new URLSearchParams(data.fragment)
            // For example, url https://condo.d.doma.ai/miniapps/your-app-id#next=/ticket/123. 
            // Then nextPath will be '/ticket/123'
            const nextPath = params.get('next') ?? ''
            setNextPath(nextPath)
        }).catch((error) => {
            console.error(error)
        })
    }, [])

    return (
        <Component {...pageProps} />
    )
}
```

--------------------------------

### Basic Usage of Condo UI Icons in React

Source: https://devportal.app.unitify.com/docs/ui/icons

Demonstrates how to import and use a Condo UI icon component (e.g., Wallet) within a React application. Icons are imported from the '@open-condo/icons' package.

```typescript
import { Wallet } from '@open-condo/icons'

<Wallet/>
```

--------------------------------

### Check Method Support with Condo Bridge

Source: https://devportal.app.unitify.com/docs/bridge/about

Demonstrates how to check if a specific method is supported by the main client environment before attempting to send an event.

```typescript
// Checking if event is available
if (bridge.supports('CondoWebAppResizeWindow')) {
    // Then sending actual event
    bridge.send('CondoWebAppResizeWindow', { height: document.body.scrollHeight })
}
```

--------------------------------

### CondoWebAppGetLaunchParams Return Type Definition (TypeScript)

Source: https://devportal.app.unitify.com/docs/bridge/methods/get-launch-params

Defines the structure of the JSON object returned by CondoWebAppGetLaunchParams. This includes user identification, type, locale, and context entity details. This type is essential for correctly handling the data returned by the method.

```typescript
type GetLaunchParamsData = {
    condoUserId: string | null                       // Current user ID
    condoUserType: 'staff' | 'resident'              // User type
    condoLocale: string                              // Current interface locale ("en" / "ru")
    condoContextEntity: 'Organization' | 'Resident'  // Context entity type
    condoContextEntityId: string | null              // Context entity ID
}

```

--------------------------------

### Show Progress Bar Notification (TypeScript)

Source: https://devportal.app.unitify.com/docs/bridge/methods/notifications/show-progress-bar

Demonstrates how to use the CondoWebAppShowProgressBar method to display a notification with a progress bar. It includes parameters for the message, description, and an optional external task ID. The method returns a promise that resolves with the `barId` of the created progress bar.

```typescript
import bridge from '@open-condo/bridge'

bridge.send('CondoWebAppShowProgressBar', {
    message: 'Uploading some data',
    description: 'Please keep the page open',
    externalTaskId: '26abf417-9159-488d-a446-595e987d8802',
}).then((data) => {
    console.log(data.barId)
})
```

--------------------------------

### Subscribe and Unsubscribe to Events with Condo Bridge

Source: https://devportal.app.unitify.com/docs/bridge/about

Shows how to subscribe to all incoming events and responses, and how to unsubscribe a listener.

```typescript
import bridge, { type CondoBridgeSubscriptionListener } from '@open-condo/bridge'


const myListener: CondoBridgeSubscriptionListener = (event) => {
    logger.info(event)
}

// Subscribing
bridge.subscribe(myListener)

// Unsubscribing
bridge.unsubscribe(myListener)
```

```typescript
// Subscribing to receive events
bridge.subscribe((event) => {
const { type, data } = event
    if (type === 'CondoWebAppResizeWindowResult') {
        // Processing event result
        console.log(data.height)
    } else if (type === 'CondoWebAppResizeWindowError') {
        // Processing event error
        const { errorType, errorMessage } = data
    })
}
```

--------------------------------

### Send Events with Condo Bridge

Source: https://devportal.app.unitify.com/docs/bridge/about

Demonstrates sending events with and without arguments, and handling responses using Promises or async/await.

```typescript
import bridge from '@open-condo/bridge'

// Send event
bridge.send('<event-name>')

// Send event with args
bridge.send('<event-name>', { someArg: 'some value' })

// Send event and process response
bridge.send('<event-name>', { someArg: 'some value' })
    .then((response) => {
        // successful state processing
    }).catch((error) => {
        // error processing
    })
```

```typescript
try {
    const response = await bridge.send('CondoWebAppResizeWindow', { height: 800 })
    // Handling response
    console.log(response.height)
} catch (err) {
    // Handling error
}
```

--------------------------------

### CondoWebAppShowProgressBar

Source: https://devportal.app.unitify.com/docs/bridge/methods/notifications/show-progress-bar

Creates a notification with an initial progress bar of zero. These notifications are stored in the user's local storage and can be associated with an external process via the `externalTaskId` parameter.

```APIDOC
## POST /CondoWebAppShowProgressBar

### Description
Creates a notification with an initial progress bar of zero. These notifications are stored in the user's local storage and can be associated with an external process via the `externalTaskId` parameter.

### Method
POST

### Endpoint
/CondoWebAppShowProgressBar

### Parameters
#### Request Body
- **message** (string) - Required - Notification header. For example: "Uploading data".
- **description** (string) - Optional - The body of the notification, which should describe the details of the notification.
- **externalTaskId** (string) - Optional - The ID of your task that this notification describes. Useful for syncing when a user logs out / logs in to the mini-application.

### Request Example
```json
{
  "message": "Uploading some data",
  "description": "Please keep the page open",
  "externalTaskId": "26abf417-9159-488d-a446-595e987d8802"
}
```

### Response
#### Success Response (200)
- **barId** (string) - The ID of the created progress bar.

#### Response Example
```json
{
  "barId": "3f4714ab-30f9-4bd4-b91b-67e9c5b7f1a8"
}
```
```

--------------------------------

### CondoWebAppGetFragment

Source: https://devportal.app.unitify.com/docs/bridge/methods/get-fragment

Retrieves the URL fragment (hash) from the parent window, which can contain additional context for the miniapp.

```APIDOC
## CondoWebAppGetFragment

### Description
Retrieves the URL fragment (hash) from the parent window. This fragment can contain arbitrary string context, such as the starting page, launch source, or additional parameters for the miniapp.

### Method
`CondoWebAppGetFragment`

### Endpoint
N/A (This is a client-side bridge method, not a REST endpoint)

### Parameters
None

### Request Example
```json
{
  "command": "CondoWebAppGetFragment"
}
```

### Response
#### Success Response (200)
- **fragment** (string) - The URL fragment without the leading '#'. If no fragment exists, an empty string is returned.

#### Response Example
```json
{
  "fragment": "next=/ticket/123"
}
```

### Important
- Always validate the fragment content before using it.
- The fragment is automatically URL-decoded when retrieved.
- If there is no fragment in the URL, an empty string is returned.
```

--------------------------------

### Add Condo UI CSS Styles

Source: https://devportal.app.unitify.com/docs/ui/about

Imports the necessary CSS styles for Condo UI components. This ensures that all components are correctly styled and available for use in your application.

```typescript
import '@open-condo/ui/dist/styles.min.css'
```

--------------------------------

### Using useContainerSize Hook for Responsive Components

Source: https://devportal.app.unitify.com/docs/ui/adaptivity

Illustrates the usage of the `useContainerSize` hook to observe a container's dimensions and dynamically adjust child components. It returns the width and height of the referenced element, enabling responsive design within specific containers.

```typescript
import React from 'react'
import { useContainerSize } from '@open-condo/ui/hooks'
const MIN_COL_WIDTH = 250

const CardGrid: React.FC = () => {
    const [{ width, height }, setRef] = useContainerSize()
    const cardsPerRow = Math.max(1, Math.floor(width / MIN_COL_WIDTH))

    return (
        <div className='my-container' ref={setRef}>
        {/*  ...   */}
        </div>
    )
}

```

--------------------------------

### Redirect to URL in Current Window (TypeScript)

Source: https://devportal.app.unitify.com/docs/bridge/methods/redirect

Demonstrates how to use the CondoWebAppRedirect method to redirect the user to a specified URL within the current browser window. This is typically used for internal navigation. It requires the 'url' and 'target' parameters.

```typescript
import React, { useCallback } from 'react'

import bridge from '@open-condo/bridge'
import { Typography, Space, Button } from '@open-condo/ui'

export default function SuccessPage (): React.ReactNode {
    const onClick = useCallback(() => {
        bridge.send('CondoWebAppRedirect', { url: 'https://condo.d.doma.ai/ticket', target: '_self' })
    }, [])


    return (
        <Space size={16} direction='vertical'>
            <Typography.Paragraph type='secondary'>
                Congratulations, the configuration of the mini-application is complete. Tickets from the bot will now automatically appear in the system.
            </Typography.Paragraph>
            <Button type='primary' onClick={onClick}>To tickets</Button>
        </Space>
    )
}
```

--------------------------------

### Progress Bar Notification Return Value (JSON)

Source: https://devportal.app.unitify.com/docs/bridge/methods/notifications/show-progress-bar

Illustrates the expected JSON response when the CondoWebAppShowProgressBar method is called successfully. The response contains a single field, `barId`, which is the unique identifier for the created progress bar.

```json
{ "barId": "3f4714ab-30f9-4bd4-b91b-67e9c5b7f1a8" }
```

--------------------------------

### CondoWebAppShowNotification Return Value (JSON)

Source: https://devportal.app.unitify.com/docs/bridge/methods/notifications/show-notification

Illustrates the expected JSON response when the CondoWebAppShowNotification method is called successfully. It confirms the operation's success with a 'success' field.

```json
{ "success": true }
```

--------------------------------

### Update Progress Bar Notification (TypeScript)

Source: https://devportal.app.unitify.com/docs/bridge/methods/notifications/update-progress-bar

This TypeScript code demonstrates how to update a progress bar notification using the CondoWebAppUpdateProgressBar method. It requires the 'barId' and 'data' for the update, and can be used to modify progress and description fields.

```typescript
import bridge from '@open-condo/bridge'
// Update progress
bridge.send('CondoWebAppUpdateProgressBar', {
    barId: '3f4714ab-30f9-4bd4-b91b-67e9c5b7f1a8',
    data: {
        progress: 20,
        description: '5 seconds left'
    },
})

// Finish task
bridge.send('CondoWebAppUpdateProgressBar', {
    barId: '3f4714ab-30f9-4bd4-b91b-67e9c5b7f1a8',
    data: {
        progress: 100,
        description: 'done'
    },
})
```

--------------------------------

### CondoWebAppRedirect

Source: https://devportal.app.unitify.com/docs/bridge/methods/redirect

Redirects the user to a specified URL within the application. Internal links can open in the current window, while external links must open in a new tab.

```APIDOC
## CondoWebAppRedirect

### Description
This method allows you to seamlessly redirect the user to another section of the application without completely reloading the page. Internal links must match the origin of the main window, while third-party resources must be opened in a new tab.

### Method
POST

### Endpoint
/CondoWebAppRedirect

### Parameters
#### Request Body
- **url** (string) - Required - Url to redirect to
- **target** (string) - Required - Redirect target. Allowed values: `_self`, `_blank`

### Request Example
```json
{
  "url": "https://condo.d.doma.ai/ticket",
  "target": "_self"
}
```

### Response
#### Success Response (200)
- **success** (boolean) - Indicates if the redirection was successful.

#### Response Example
```json
{
  "success": true
}
```
```

--------------------------------

### CondoWebAppUpdateProgressBar

Source: https://devportal.app.unitify.com/docs/bridge/methods/notifications/update-progress-bar

Updates a previously created progress bar notification with new progress or description.

```APIDOC
## POST /websites/devportal_app_unitify/CondoWebAppUpdateProgressBar

### Description
This method allows you to update a previously created progress bar notification. It supports updates for B2B-Web platforms.

### Method
POST

### Endpoint
/websites/devportal_app_unitify/CondoWebAppUpdateProgressBar

### Parameters
#### Request Body
- **barId** (string) - Required - Progress bar ID
- **data** (JSON) - Required - Data to update. Any field from the ones indicated in the notification creation can be updated as well as the numeric progress fields.

### Request Example
```json
{
    "barId": "f7c3bc5a-600e-477a-a79a-000d1c74577f",
    "data": {
        "progress": 50,
        "description": "Processing data..."
    }
}
```

### Response
#### Success Response (200)
- **updated** (boolean) - Indicates if the progress bar was successfully updated.

#### Response Example
```json
{
    "updated": true
}
```
```

--------------------------------

### CondoWebAppShowNotification

Source: https://devportal.app.unitify.com/docs/bridge/methods/notifications/show-notification

Displays a notification to the user, commonly used for error or success messages.

```APIDOC
## POST /v1/notifications/show

### Description
This method allows you to show a notification to the user. The most common example of use is to report an error/success.

### Method
POST

### Endpoint
/v1/notifications/show

### Parameters
#### Request Body
- **type** (string) - Required - Notification type. Accepted values: 'info', 'warning', 'error', 'success'.
- **message** (string) - Required - Notification header. For example: "An error has occurred".
- **description** (string) - Optional - The body of the notification, which should describe the details of the notification.

### Request Example
```json
{
    "type": "error",
    "message": "Error occurred during integration",
    "description": "Your account does not have the email address required to connect the mini-application"
}
```

### Response
#### Success Response (200)
- **success** (boolean) - Indicates if the notification was shown successfully.

#### Response Example
```json
{
  "success": true
}
```
```

--------------------------------

### Access Condo UI Color Palette (JS Object)

Source: https://devportal.app.unitify.com/docs/ui/about

Imports the color palette from Condo UI as a JavaScript object. This allows you to use the defined colors programmatically within your React components.

```typescript
import { colors } from '@open-condo/ui/colors'
```

--------------------------------

### Change Condo UI Icon Size in React

Source: https://devportal.app.unitify.com/docs/ui/icons

Shows how to change the size of a Condo UI icon component (e.g., Star) by using the 'size' prop. Available sizes are 'large', 'medium', 'small', and 'auto'.

```typescript
import { Star } from '@open-condo/icons'

<Star size='small'/>
```

--------------------------------

### Active Progress Bars JSON Structure

Source: https://devportal.app.unitify.com/docs/bridge/methods/notifications/get-active-progress-bars

This JSON structure represents the expected return value from the CondoWebAppGetActiveProgressBars method. It contains a 'bars' field, which is an array of active progress bar objects, each with an ID, message, description, progress, and external task ID.

```json
{
  "bars": [
    {
      "id": "9e4dd15a-aec6-4d81-90e3-fab58deac8c0",
      "message": "Uploading some data",
      "description": "Please keep the page open",
      "progress": 0,
      "externalTaskId": "de74da8d-207a-4a25-bf52-5bce25efe860"
    },
    {
      "id": "30cc8153-2d71-4be5-98dd-f2eae4cbfc82",
      "message": "Uploading some data",
      "description": "Please keep the page open",
      "progress": 0,
      "externalTaskId": "2179294d-f77e-4d54-9bac-94094f94adcc"
    }
  ]
}
```

--------------------------------

### Define GetFragmentData Type in TypeScript

Source: https://devportal.app.unitify.com/docs/bridge/methods/get-fragment

Defines the TypeScript type for the data returned by CondoWebAppGetFragment. It includes a 'fragment' property which is the URL fragment string without the leading '#'.

```typescript
type GetFragmentData = {
    fragment: string  // URL fragment without the leading #
}
```

--------------------------------

### Condo Bridge Client Error Structure

Source: https://devportal.app.unitify.com/docs/bridge/about

Defines the structure of a client-side error response from Condo Bridge, including error type, reason, code, and message.

```typescript
type ClientErrorResponseData<Reason extends ErrorReason> = {
    errorType: 'client',
    errorReason: Reason
    errorCode: ErrorCode<Reason>,
    errorMessage: string
}
```

--------------------------------

### Change Condo UI Icon Color in React

Source: https://devportal.app.unitify.com/docs/ui/icons

Illustrates how to change the color of a Condo UI icon component (e.g., Mail) by passing a color value to the 'color' prop. The icon's SVG element uses 'fill: currentColor' to inherit color from its parent.

```typescript
import { Mail } from '@open-condo/icons'

<Mail color='#39ce66'/>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.