{"success":true,"data":{"block":{"id":"contact-reservation","name":"Contact Reservation","title":"Contact Reservation","category":"Contact","categorySlug":"contact","description":"Reservation form with date, time, party size, and special requests. Ideal for restaurants, hotels, and event venues.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290583/kr73b03ve8ubtbqq8dpr1a4nrxip/contact-reservation-desktop.png","mobile":"https://cdn.ing/assets/i/r/290584/7ffivx00iau4ak7tsak46tdeza92/contact-reservation-mobile.png"},"componentPath":"blocks/contact/contact-reservation.tsx","code":"\"use client\";\n\nimport { ContactReservation } from \"@opensite/ui/blocks/contact/contact-reservation\";\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: \"your@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: \"reservation_date\",\n    type: \"date-picker\",\n    label: \"Reservation Date\",\n    placeholder: \"Select date\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"reservation_time\",\n    type: \"select\",\n    label: \"Preferred Time\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"12:00\", label: \"12:00 PM\" },\n      { value: \"12:30\", label: \"12:30 PM\" },\n      { value: \"13:00\", label: \"1:00 PM\" },\n      { value: \"13:30\", label: \"1:30 PM\" },\n      { value: \"14:00\", label: \"2:00 PM\" },\n      { value: \"14:30\", label: \"2:30 PM\" },\n      { value: \"17:00\", label: \"5:00 PM\" },\n      { value: \"17:30\", label: \"5:30 PM\" },\n      { value: \"18:00\", label: \"6:00 PM\" },\n      { value: \"18:30\", label: \"6:30 PM\" },\n      { value: \"19:00\", label: \"7:00 PM\" },\n      { value: \"19:30\", label: \"7:30 PM\" },\n      { value: \"20:00\", label: \"8:00 PM\" },\n      { value: \"20:30\", label: \"8:30 PM\" },\n      { value: \"21:00\", label: \"9:00 PM\" },\n    ],\n  },\n  {\n    name: \"party_size\",\n    type: \"select\",\n    label: \"Party Size\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"1\", label: \"1 person\" },\n      { value: \"2\", label: \"2 people\" },\n      { value: \"3\", label: \"3 people\" },\n      { value: \"4\", label: \"4 people\" },\n      { value: \"5\", label: \"5 people\" },\n      { value: \"6\", label: \"6 people\" },\n      { value: \"7\", label: \"7 people\" },\n      { value: \"8\", label: \"8 people\" },\n      { value: \"9+\", label: \"9+ people (large party)\" },\n    ],\n  },\n  {\n    name: \"seating_preference\",\n    type: \"select\",\n    label: \"Seating Preference\",\n    required: false,\n    columnSpan: 6,\n    options: [\n      { value: \"indoor\", label: \"Indoor\" },\n      { value: \"outdoor\", label: \"Outdoor/Patio\" },\n      { value: \"bar\", label: \"Bar Seating\" },\n      { value: \"booth\", label: \"Booth\" },\n      { value: \"no_preference\", label: \"No Preference\" },\n    ],\n  },\n  {\n    name: \"occasion\",\n    type: \"select\",\n    label: \"Special Occasion\",\n    required: false,\n    columnSpan: 12,\n    options: [\n      { value: \"none\", label: \"No special occasion\" },\n      { value: \"birthday\", label: \"Birthday\" },\n      { value: \"anniversary\", label: \"Anniversary\" },\n      { value: \"business\", label: \"Business Meeting\" },\n      { value: \"date\", label: \"Date Night\" },\n      { value: \"engagement\", label: \"Engagement\" },\n      { value: \"other\", label: \"Other Celebration\" },\n    ],\n  },\n  {\n    name: \"dietary_restrictions\",\n    type: \"checkbox-group\",\n    label: \"Dietary Restrictions or Allergies\",\n    required: false,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      { value: \"vegetarian\", label: \"Vegetarian\" },\n      { value: \"vegan\", label: \"Vegan\" },\n      { value: \"gluten_free\", label: \"Gluten-Free\" },\n      { value: \"dairy_free\", label: \"Dairy-Free\" },\n      { value: \"nut_allergy\", label: \"Nut Allergy\" },\n      { value: \"shellfish_allergy\", label: \"Shellfish Allergy\" },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Special Requests\",\n    placeholder: \"Any special requests, accessibility needs, or additional information...\",\n    required: false,\n    rows: 3,\n    columnSpan: 12,\n  },\n  {\n    name: \"marketing_consent\",\n    type: \"checkbox\",\n    label: \"Send me exclusive offers and updates\",\n    required: false,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactReservation\n      heading=\"Make a Reservation\"\n      description=\"Reserve your table today for an unforgettable dining experience. We'll confirm your reservation within 1 hour during business hours.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Your reservation request has been received! We'll send you a confirmation email within the hour. See you soon!\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Reserve Table\",\n          },\n        },\n      }}\n      background=\"muted\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.6}\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","reservation","booking","form","hospitality","restaurant"],"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 dining/venue reservation use case — first/last name, email, phone, reservation date picker, preferred time select, party size select, and special requests — preserve the time slot options that match the business's actual operating hours. 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:02.492Z"}