{"success":true,"data":{"block":{"id":"contact-schedule","name":"Contact Schedule Meeting","title":"Contact Schedule Meeting","category":"Contact","categorySlug":"contact","description":"Meeting scheduling form with calendar integration and time slot selection. Streamlined booking for consultations and appointments.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290591/vc78la2z54i13wkzqe4gam1wr3rd/contact-schedule-desktop.png","mobile":"https://cdn.ing/assets/i/r/290592/1zq9cc1ix3htamr00fnrg7zfq2un/contact-schedule-mobile.png"},"componentPath":"blocks/contact/contact-schedule.tsx","code":"\"use client\";\n\nimport { ContactSchedule } from \"@opensite/ui/blocks/contact/contact-schedule\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"name\",\n    type: \"text\",\n    label: \"Full Name\",\n    placeholder: \"Full name\",\n    required: true,\n    columnSpan: 12,\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: \"appointment_type\",\n    type: \"radio\",\n    label: \"Type of Appointment\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"consultation\",\n        label: \"Initial Consultation\",\n        description: \"30-minute discovery call to discuss your needs.\",\n      },\n      {\n        value: \"demo\",\n        label: \"Product Demo\",\n        description: \"60-minute walkthrough of our platform.\",\n      },\n      {\n        value: \"followup\",\n        label: \"Follow-up Meeting\",\n        description: \"Continue the conversation from a previous call.\",\n      },\n      {\n        value: \"training\",\n        label: \"Training Session\",\n        description: \"Hands-on training for you and your team.\",\n      },\n    ],\n  },\n  {\n    name: \"preferred_date\",\n    type: \"date-picker\",\n    label: \"Preferred Date\",\n    placeholder: \"Select a date\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"preferred_time\",\n    type: \"select\",\n    label: \"Preferred Time\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"morning\", label: \"Morning (9am - 12pm)\" },\n      { value: \"afternoon\", label: \"Afternoon (12pm - 5pm)\" },\n      { value: \"evening\", label: \"Evening (5pm - 7pm)\" },\n    ],\n  },\n  {\n    name: \"timezone\",\n    type: \"select\",\n    label: \"Timezone\",\n    required: true,\n    columnSpan: 12,\n    options: [\n      { value: \"EST\", label: \"Eastern Time (EST)\" },\n      { value: \"CST\", label: \"Central Time (CST)\" },\n      { value: \"MST\", label: \"Mountain Time (MST)\" },\n      { value: \"PST\", label: \"Pacific Time (PST)\" },\n      { value: \"GMT\", label: \"Greenwich Mean Time (GMT)\" },\n      { value: \"CET\", label: \"Central European Time (CET)\" },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"What would you like to discuss?\",\n    placeholder: \"Tell us what you'd like to cover during the meeting...\",\n    required: true,\n    rows: 4,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactSchedule\n      heading=\"Schedule a Meeting\"\n      description=\"Book time with our team to discuss your needs. Choose a date and time that works best for you, and we'll send you a calendar invitation with all the details.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Your appointment request has been received! We'll send you a calendar invitation shortly with meeting details and a video conferencing link.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Schedule Appointment\",\n          },\n        },\n      }}\n      background=\"gradient\"\n      pattern=\"architect\"\n      patternOpacity={0.2}\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","schedule","meeting","form","booking","calendar"],"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 an appointment scheduling use case — full name, email, phone, appointment type radio (consultation/demo/follow-up/training), preferred date picker, preferred time select, timezone select, and optional notes — preserve the appointment type options that match the business's actual service offerings. 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:39:11.437Z"}