{"success":true,"data":{"block":{"id":"contact-guest","name":"Contact Guest Information","title":"Contact Guest Information","category":"Contact","categorySlug":"contact","description":"Guest information form for hospitality and event management. Collects detailed guest preferences and requirements.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290815/ibwvax0jd8936tvo2iyn639p84i4/cleanshot-2026-02-25-at-02-08-14.png","mobile":"https://cdn.ing/assets/i/r/290814/t2wlqpx23i9i9xp1ax41njvfc888/cleanshot-2026-02-25-at-02-08-24.png"},"componentPath":"blocks/contact/contact-guest.tsx","code":"\"use client\";\n\nimport { ContactGuest } from \"@opensite/ui/blocks/contact/contact-guest\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"guest@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"check_in\",\n    type: \"date-picker\",\n    label: \"Check-In Date\",\n    placeholder: \"Select arrival date\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"check_out\",\n    type: \"date-picker\",\n    label: \"Check-Out Date\",\n    placeholder: \"Select departure date\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"guests\",\n    type: \"select\",\n    label: \"Number of Guests\",\n    required: true,\n    columnSpan: 12,\n    options: [\n      { value: \"1\", label: \"1 Guest\" },\n      { value: \"2\", label: \"2 Guests\" },\n      { value: \"3\", label: \"3 Guests\" },\n      { value: \"4\", label: \"4 Guests\" },\n      { value: \"5\", label: \"5 Guests\" },\n      { value: \"6+\", label: \"6+ Guests\" },\n    ],\n  },\n  {\n    name: \"room_type\",\n    type: \"radio\",\n    label: \"Room Preference\",\n    required: true,\n    columnSpan: 12,\n    layout: \"stacked\",\n    options: [\n      {\n        value: \"standard\",\n        label: \"Standard Room\",\n        description: \"Queen bed, city view.\",\n      },\n      {\n        value: \"deluxe\",\n        label: \"Deluxe Room\",\n        description: \"King bed, premium amenities.\",\n      },\n      {\n        value: \"suite\",\n        label: \"Suite\",\n        description: \"Separate living area, luxury features.\",\n      },\n    ],\n  },\n  {\n    name: \"special_requests\",\n    type: \"textarea\",\n    label: \"Special Requests\",\n    placeholder:\n      \"Any dietary restrictions, accessibility needs, or special occasions?\",\n    required: false,\n    rows: 4,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactGuest\n      heading=\"Book Your Stay\"\n      description=\"Experience comfort and luxury at our hotel. Complete the form below to inquire about availability or make a reservation.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for your reservation inquiry! Our team will confirm availability and reach out within 4 hours.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Reservation Inquiry\",\n          },\n        },\n      }}\n      pattern=\"waves\"\n      patternOpacity={0.15}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","guest","hospitality","form","booking","accommodation"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a hotel/hospitality guest inquiry use case — first/last name, email, phone, check-in and check-out date pickers, number of guests select, room preference radio, and special requests — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:09.917Z"}