{"success":true,"data":{"block":{"id":"contact-report","name":"Contact Report Issue","title":"Contact Report Issue","category":"Contact","categorySlug":"contact","description":"Issue reporting form with category, severity, and detailed description. Perfect for bug reports and problem tracking.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290827/fsmot5i5v0ic69ltqct1cd9xza8o/cleanshot-2026-02-25-at-02-21-46.png","mobile":"https://cdn.ing/assets/i/r/290826/0olq31rdmt49h96pcpkvqydrqgh7/cleanshot-2026-02-25-at-02-21-56.png"},"componentPath":"blocks/contact/contact-report.tsx","code":"\"use client\";\n\nimport { ContactReport } from \"@opensite/ui/blocks/contact/contact-report\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"reporter_name\",\n    type: \"text\",\n    label: \"Your Name (optional)\",\n    placeholder: \"Your name\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address (optional)\",\n    placeholder: \"your@email.com\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number (optional)\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"issue_type\",\n    type: \"select\",\n    label: \"Type of Issue\",\n    required: true,\n    columnSpan: 12,\n    options: [\n      { value: \"bug\", label: \"Technical Bug/Error\" },\n      { value: \"security\", label: \"Security Vulnerability\" },\n      { value: \"abuse\", label: \"Abuse or Harassment\" },\n      { value: \"spam\", label: \"Spam Content\" },\n      { value: \"copyright\", label: \"Copyright Violation\" },\n      { value: \"inappropriate\", label: \"Inappropriate Content\" },\n      { value: \"privacy\", label: \"Privacy Concern\" },\n      { value: \"accessibility\", label: \"Accessibility Issue\" },\n      { value: \"other\", label: \"Other\" },\n    ],\n  },\n  {\n    name: \"severity\",\n    type: \"radio\",\n    label: \"Severity Level\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"low\",\n        label: \"Low\",\n        description: \"Minor issue, no immediate impact.\",\n      },\n      {\n        value: \"medium\",\n        label: \"Medium\",\n        description: \"Moderate impact, affects some users.\",\n      },\n      {\n        value: \"high\",\n        label: \"High\",\n        description: \"Major impact, affects many users.\",\n      },\n      {\n        value: \"critical\",\n        label: \"Critical\",\n        description: \"Severe issue requiring immediate attention.\",\n      },\n    ],\n  },\n  {\n    name: \"url\",\n    type: \"url\",\n    label: \"URL Where Issue Occurs\",\n    placeholder: \"https://example.com/page\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"device_info\",\n    type: \"checkbox-group\",\n    label: \"Device/Platform\",\n    required: false,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      { value: \"desktop_windows\", label: \"Desktop - Windows\" },\n      { value: \"desktop_mac\", label: \"Desktop - Mac\" },\n      { value: \"desktop_linux\", label: \"Desktop - Linux\" },\n      { value: \"mobile_ios\", label: \"Mobile - iOS\" },\n      { value: \"mobile_android\", label: \"Mobile - Android\" },\n      { value: \"tablet\", label: \"Tablet\" },\n    ],\n  },\n  {\n    name: \"browser\",\n    type: \"select\",\n    label: \"Browser\",\n    required: false,\n    columnSpan: 6,\n    options: [\n      { value: \"chrome\", label: \"Chrome\" },\n      { value: \"firefox\", label: \"Firefox\" },\n      { value: \"safari\", label: \"Safari\" },\n      { value: \"edge\", label: \"Edge\" },\n      { value: \"opera\", label: \"Opera\" },\n      { value: \"other\", label: \"Other\" },\n    ],\n  },\n  {\n    name: \"when_occurred\",\n    type: \"date-picker\",\n    label: \"When Did This Occur?\",\n    placeholder: \"Select date\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"can_reproduce\",\n    type: \"radio\",\n    label: \"Can You Reproduce the Issue?\",\n    required: false,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      { value: \"yes\", label: \"Yes, consistently\" },\n      { value: \"sometimes\", label: \"Sometimes\" },\n      { value: \"no\", label: \"No, it was one-time\" },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Issue Description\",\n    placeholder:\n      \"Please provide detailed information about the issue, including steps to reproduce, expected behavior, actual behavior, and any error messages...\",\n    required: true,\n    rows: 6,\n    columnSpan: 12,\n  },\n  {\n    name: \"screenshots\",\n    type: \"file\",\n    label: \"Screenshots or Evidence\",\n    placeholder: \"Upload screenshots, error logs, or other supporting files...\",\n    required: false,\n    accept: \"image/*,.pdf,.txt,.log\",\n    maxSize: 10 * 1024 * 1024,\n    maxFiles: 5,\n    multiple: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"follow_up\",\n    type: \"radio\",\n    label: \"Would You Like Follow-up Updates?\",\n    required: false,\n    columnSpan: 12,\n    layout: \"stacked\",\n    options: [\n      { value: \"yes\", label: \"Yes, keep me informed\" },\n      { value: \"no\", label: \"No, anonymous report\" },\n    ],\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactReport\n      heading=\"Report an Issue\"\n      description=\"Help us improve by reporting bugs, security vulnerabilities, or inappropriate content. We review all reports carefully and take action quickly.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for your report! We take all issues seriously and will investigate this matter promptly. If you requested follow-up, we'll keep you updated on our progress.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Report\",\n          },\n        },\n      }}\n      background=\"dark\"\n      pattern=\"gridFadeTop\"\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","report","issue","form","bug","problem","support"],"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 issue/abuse report use case — reporter name (optional), email (optional), phone (optional), issue type select, severity radio (low/medium/high/critical), description, and steps to reproduce — 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:40:40.148Z"}