{"success":true,"data":{"block":{"id":"contact-maintenance","name":"Contact Maintenance Request","title":"Contact Maintenance Request","category":"Contact","categorySlug":"contact","description":"Maintenance request form with issue type, priority, and detailed description. Perfect for property management and facility services.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290573/o5csj58d27d9dd1morzucfiokj1p/contact-maintenance-desktop.png","mobile":"https://cdn.ing/assets/i/r/290574/5m4pgcjwucjlxoavkolvat26jevg/contact-maintenance-mobile.png"},"componentPath":"blocks/contact/contact-maintenance.tsx","code":"\"use client\";\n\nimport { ContactMaintenance } from \"@opensite/ui/blocks/contact/contact-maintenance\";\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: \"Your 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: \"property_address\",\n    type: \"text\",\n    label: \"Property Address\",\n    placeholder: \"Street address\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"city\",\n    type: \"text\",\n    label: \"City\",\n    placeholder: \"City\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"zip\",\n    type: \"text\",\n    label: \"ZIP Code\",\n    placeholder: \"12345\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"service_type\",\n    type: \"checkbox-group\",\n    label: \"Services Needed\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"plumbing\",\n        label: \"Plumbing\",\n        description: \"Leaks, drains, fixtures.\",\n      },\n      {\n        value: \"electrical\",\n        label: \"Electrical\",\n        description: \"Wiring, outlets, lighting.\",\n      },\n      {\n        value: \"hvac\",\n        label: \"HVAC\",\n        description: \"Heating and cooling systems.\",\n      },\n      {\n        value: \"carpentry\",\n        label: \"Carpentry\",\n        description: \"Doors, cabinets, trim.\",\n      },\n      {\n        value: \"painting\",\n        label: \"Painting\",\n        description: \"Interior and exterior painting.\",\n      },\n      {\n        value: \"landscaping\",\n        label: \"Landscaping\",\n        description: \"Lawn care, trees, gardens.\",\n      },\n    ],\n  },\n  {\n    name: \"urgency\",\n    type: \"radio\",\n    label: \"Urgency Level\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"emergency\",\n        label: \"Emergency\",\n        description: \"Needs immediate attention.\",\n      },\n      {\n        value: \"urgent\",\n        label: \"Urgent\",\n        description: \"Within 24-48 hours.\",\n      },\n      {\n        value: \"routine\",\n        label: \"Routine\",\n        description: \"Can wait a few days.\",\n      },\n    ],\n  },\n  {\n    name: \"preferred_date\",\n    type: \"date-picker\",\n    label: \"Preferred Service Date\",\n    placeholder: \"Select a date\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"preferred_time\",\n    type: \"select\",\n    label: \"Preferred Time\",\n    required: false,\n    columnSpan: 6,\n    options: [\n      { value: \"morning\", label: \"Morning (8am-12pm)\" },\n      { value: \"afternoon\", label: \"Afternoon (12pm-5pm)\" },\n      { value: \"evening\", label: \"Evening (5pm-8pm)\" },\n    ],\n  },\n  {\n    name: \"photos\",\n    type: \"file\",\n    label: \"Upload Photos\",\n    placeholder: \"Upload photos of the issue (optional)...\",\n    required: false,\n    accept: \"image/*\",\n    maxSize: 10 * 1024 * 1024,\n    maxFiles: 5,\n    multiple: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Describe the Issue\",\n    placeholder: \"Please provide details about the maintenance issue, including any relevant history or specific concerns...\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactMaintenance\n      heading=\"Request Maintenance Service\"\n      description=\"Our experienced team is ready to help with all your property maintenance needs. Fill out the form and we'll get back to you promptly.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Your maintenance request has been submitted successfully. We'll contact you within 2 hours to confirm the service appointment.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Request\",\n          },\n        },\n      }}\n      background=\"gradient\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.5}\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","maintenance","request","form","property","facility"],"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 maintenance request use case — name, email, phone, property address, city, ZIP, services needed checkbox-group (plumbing/electrical/HVAC/carpentry/painting/landscaping), urgency, and description — 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:52.778Z"}