# Search & Discovery / Booking Confirmation Review booking details including advocate, date, time, and fees before confirming the appointment. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-booking-confirmation--column ## Pattern variants - Column: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-booking-confirmation--column - FullScreen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-booking-confirmation--fullscreen - Card: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-booking-confirmation--card ## When to use this pattern Use Search & Discovery / Booking Confirmation when building citizen-facing flows that match the described government journey. Combine components such as cards, forms, tables, buttons, and status indicators as shown in Storybook. ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Search & Discovery / Booking Confirmation. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Card — Booking Confirmation - Full Page HTML: ```html

Confirm appointment

Review your details below before confirming. Slot is not reserved until confirmed.

Date & time
Thu, 18 Apr 2026 · 11:00 – 11:30 AM
Advocate
Adv. M. Sharma · Family Law
Office
Block C, Room 12 · District Legal Services Authority, Pune
Consultation type
In-person · 30 minutes
Reference (generated on confirm)
Will be sent to your registered email & SMS
warning
Your slot is held for 5 minutes — please confirm soon to avoid losing it.
``` React: ```jsx import React from 'react'; const SearchDiscoveryBookingConfirmationExample1Demo = () => ( <>
{/* Header */}

Confirm appointment

Review your details below before confirming. Slot is not reserved until confirmed.

{/* Card */}
Date & time
Thu, 18 Apr 2026 · 11:00 – 11:30 AM
Advocate
Adv. M. Sharma · Family Law
Office
Block C, Room 12 · District Legal Services Authority, Pune
Consultation type
In-person · 30 minutes
Reference (generated on confirm)
Will be sent to your registered email & SMS
{/* Warning Banner */}
warning
Your slot is held for 5 minutes — please confirm soon to avoid losing it.
{/* Actions */}
); export default SearchDiscoveryBookingConfirmationExample1Demo; ``` Angular: ```html

Confirm appointment

Review your details below before confirming. Slot is not reserved until confirmed.

Date & time
Thu, 18 Apr 2026 · 11:00 – 11:30 AM
Advocate
Adv. M. Sharma · Family Law
Office
Block C, Room 12 · District Legal Services Authority, Pune
Consultation type
In-person · 30 minutes
Reference (generated on confirm)
Will be sent to your registered email & SMS
warning
Your slot is held for 5 minutes — please confirm soon to avoid losing it.
``` ### 2. Column — Booking Confirmation - Full Page HTML: ```html

Confirm appointment

Review your details below before confirming. Slot is not reserved until confirmed.

Date & time
Thu, 18 Apr 2026 · 11:00 – 11:30 AM
Advocate
Adv. M. Sharma · Family Law
Office
Block C, Room 12 · District Legal Services Authority, Pune
Consultation type
In-person · 30 minutes
Reference (generated on confirm)
Will be sent to your registered email & SMS
warning
Your slot is held for 5 minutes — please confirm soon to avoid losing it.
``` React: ```jsx import React from 'react'; const SearchDiscoveryBookingConfirmationExample2Demo = () => ( <>
{/* Header */}

Confirm appointment

Review your details below before confirming. Slot is not reserved until confirmed.

{/* Card */}
Date & time
Thu, 18 Apr 2026 · 11:00 – 11:30 AM
Advocate
Adv. M. Sharma · Family Law
Office
Block C, Room 12 · District Legal Services Authority, Pune
Consultation type
In-person · 30 minutes
Reference (generated on confirm)
Will be sent to your registered email & SMS
{/* Warning Banner */}
warning
Your slot is held for 5 minutes — please confirm soon to avoid losing it.
{/* Actions */}
); export default SearchDiscoveryBookingConfirmationExample2Demo; ``` Angular: ```html

Confirm appointment

Review your details below before confirming. Slot is not reserved until confirmed.

Date & time
Thu, 18 Apr 2026 · 11:00 – 11:30 AM
Advocate
Adv. M. Sharma · Family Law
Office
Block C, Room 12 · District Legal Services Authority, Pune
Consultation type
In-person · 30 minutes
Reference (generated on confirm)
Will be sent to your registered email & SMS
warning
Your slot is held for 5 minutes — please confirm soon to avoid losing it.
``` ### 3. Full Screen — Booking Confirmation - Full Page HTML: ```html

Confirm appointment

Review your details below before confirming. Slot is not reserved until confirmed.

Date & time
Thu, 18 Apr 2026 · 11:00 – 11:30 AM
Advocate
Adv. M. Sharma · Family Law
Office
Block C, Room 12 · District Legal Services Authority, Pune
Consultation type
In-person · 30 minutes
Reference (generated on confirm)
Will be sent to your registered email & SMS
warning
Your slot is held for 5 minutes — please confirm soon to avoid losing it.
``` React: ```jsx import React from 'react'; const SearchDiscoveryBookingConfirmationExample3Demo = () => ( <>
{/* Header */}

Confirm appointment

Review your details below before confirming. Slot is not reserved until confirmed.

{/* Card */}
Date & time
Thu, 18 Apr 2026 · 11:00 – 11:30 AM
Advocate
Adv. M. Sharma · Family Law
Office
Block C, Room 12 · District Legal Services Authority, Pune
Consultation type
In-person · 30 minutes
Reference (generated on confirm)
Will be sent to your registered email & SMS
{/* Warning Banner */}
warning
Your slot is held for 5 minutes — please confirm soon to avoid losing it.
{/* Actions */}
); export default SearchDiscoveryBookingConfirmationExample3Demo; ``` Angular: ```html

Confirm appointment

Review your details below before confirming. Slot is not reserved until confirmed.

Date & time
Thu, 18 Apr 2026 · 11:00 – 11:30 AM
Advocate
Adv. M. Sharma · Family Law
Office
Block C, Room 12 · District Legal Services Authority, Pune
Consultation type
In-person · 30 minutes
Reference (generated on confirm)
Will be sent to your registered email & SMS
warning
Your slot is held for 5 minutes — please confirm soon to avoid losing it.
```