{"success":true,"data":{"block":{"id":"contact-tenant","name":"Contact Tenant Application","title":"Contact Tenant Application","category":"Contact","categorySlug":"contact","description":"Tenant application form with rental history, employment, and references. Comprehensive form for property management.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290829/6qmttkpm9qor6ouqjvk032q5r1rh/cleanshot-2026-02-25-at-02-38-23.png","mobile":"https://cdn.ing/assets/i/r/290828/505o0grjqmw2ek2gz7z1829pb7w9/cleanshot-2026-02-25-at-02-38-33.png"},"componentPath":"blocks/contact/contact-tenant.tsx","code":"\"use client\";\n\nimport { ContactTenant } from \"@opensite/ui/blocks/contact/contact-tenant\";\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: \"unit_number\",\n    type: \"text\",\n    label: \"Unit Number (If Current Tenant)\",\n    placeholder: \"e.g., Apt 204\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"request_type\",\n    type: \"radio\",\n    label: \"Request Type\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"maintenance\",\n        label: \"Maintenance Request\",\n        description: \"Report an issue that needs repair or service.\",\n      },\n      {\n        value: \"lease\",\n        label: \"Lease Inquiry\",\n        description: \"Questions about your lease or rental agreement.\",\n      },\n      {\n        value: \"payment\",\n        label: \"Payment Issue\",\n        description: \"Billing or payment related questions.\",\n      },\n      {\n        value: \"noise\",\n        label: \"Noise Complaint\",\n        description: \"Report a noise disturbance.\",\n      },\n      {\n        value: \"access\",\n        label: \"Access Request\",\n        description: \"Request for property access or keys.\",\n      },\n      {\n        value: \"other\",\n        label: \"Other\",\n        description: \"General inquiry or other concern.\",\n      },\n    ],\n  },\n  {\n    name: \"urgency\",\n    type: \"select\",\n    label: \"Urgency Level\",\n    required: true,\n    columnSpan: 12,\n    options: [\n      { value: \"emergency\", label: \"Emergency - Immediate attention needed\" },\n      { value: \"urgent\", label: \"Urgent - Within 24 hours\" },\n      { value: \"normal\", label: \"Normal - Within 3-5 business days\" },\n      { value: \"low\", label: \"Low Priority - When convenient\" },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Describe your request or concern\",\n    placeholder:\n      \"Please provide detailed information about your request, including location if applicable, what happened, and when...\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n  {\n    name: \"photos\",\n    type: \"file\",\n    label: \"Upload Photos (Optional)\",\n    placeholder: \"Upload photos if they help illustrate the issue...\",\n    required: false,\n    accept: \"image/*\",\n    maxSize: 10 * 1024 * 1024,\n    maxFiles: 5,\n    multiple: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"preferred_contact_time\",\n    type: \"select\",\n    label: \"Best Time to Contact You\",\n    required: false,\n    columnSpan: 12,\n    options: [\n      { value: \"morning\", label: \"Morning (8am - 12pm)\" },\n      { value: \"afternoon\", label: \"Afternoon (12pm - 5pm)\" },\n      { value: \"evening\", label: \"Evening (5pm - 8pm)\" },\n      { value: \"anytime\", label: \"Anytime\" },\n    ],\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactTenant\n      heading=\"Tenant Services\"\n      description=\"We're here to make your living experience as comfortable as possible. Submit your request below and our property management team will respond promptly.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Your request has been received! Our property management team will review it and contact you shortly. Emergency requests are prioritized and handled immediately.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Request\",\n          },\n        },\n      }}\n      background=\"gray\"\n      pattern=\"architect\"\n      patternOpacity={0.1}\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","tenant","application","form","rental","property"],"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 tenant/property management inquiry use case — first/last name, email, phone, unit number (optional), request type radio (maintenance/lease/payment/noise/access/other), 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:41:15.801Z"}