{"success":true,"data":{"block":{"id":"contact-vendor","name":"Contact Vendor Application","title":"Contact Vendor Application","category":"Contact","categorySlug":"contact","description":"Vendor application form with business information, products/services, and certification details. Perfect for marketplace platforms.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290467/xf02j5wf2h3veskdmo64tja6zzje/cleanshot-2026-02-19-at-06-13-19-2x.png","mobile":"https://cdn.ing/assets/i/r/290466/4mrv0wfwc6e6cutz6zbgeae35ixp/cleanshot-2026-02-19-at-06-14-16-2x.png"},"componentPath":"blocks/contact/contact-vendor.tsx","code":"\"use client\";\n\nimport { ContactVendor } from \"@opensite/ui/blocks/contact/contact-vendor\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"company_name\",\n    type: \"text\",\n    label: \"Company Name\",\n    placeholder: \"Your company\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"contact_name\",\n    type: \"text\",\n    label: \"Contact Person\",\n    placeholder: \"Full name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"title\",\n    type: \"text\",\n    label: \"Job Title\",\n    placeholder: \"Your title\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Business Email\",\n    placeholder: \"contact@company.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: \"company_website\",\n    type: \"url\",\n    label: \"Company Website\",\n    placeholder: \"https://yourcompany.com\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"vendor_category\",\n    type: \"checkbox-group\",\n    label: \"Product/Service Categories\",\n    placeholder: \"Select all that apply\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"materials\",\n        label: \"Raw Materials\",\n        description: \"Supply of raw materials and components.\",\n      },\n      {\n        value: \"manufacturing\",\n        label: \"Manufacturing\",\n        description: \"Contract manufacturing services.\",\n      },\n      {\n        value: \"logistics\",\n        label: \"Logistics & Shipping\",\n        description: \"Transportation and delivery services.\",\n      },\n      {\n        value: \"technology\",\n        label: \"Technology Services\",\n        description: \"IT, software, and technical solutions.\",\n      },\n      {\n        value: \"marketing\",\n        label: \"Marketing Services\",\n        description: \"Advertising, design, and promotional services.\",\n      },\n      {\n        value: \"consulting\",\n        label: \"Consulting\",\n        description: \"Business consulting and advisory services.\",\n      },\n      {\n        value: \"facilities\",\n        label: \"Facilities & Maintenance\",\n        description: \"Building maintenance and facility services.\",\n      },\n      {\n        value: \"other\",\n        label: \"Other\",\n        description: \"Other products or services.\",\n      },\n    ],\n  },\n  {\n    name: \"partnership_type\",\n    type: \"radio\",\n    label: \"Type of Partnership\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"new\",\n        label: \"New Vendor\",\n        description: \"First time working with us.\",\n      },\n      {\n        value: \"existing\",\n        label: \"Existing Vendor\",\n        description: \"Already in our vendor network.\",\n      },\n      {\n        value: \"renewal\",\n        label: \"Contract Renewal\",\n        description: \"Renew existing contract.\",\n      },\n    ],\n  },\n  {\n    name: \"annual_capacity\",\n    type: \"select\",\n    label: \"Annual Business Capacity\",\n    required: true,\n    columnSpan: 12,\n    options: [\n      { value: \"under50k\", label: \"Under $50,000\" },\n      { value: \"50k-250k\", label: \"$50,000 - $250,000\" },\n      { value: \"250k-1m\", label: \"$250,000 - $1M\" },\n      { value: \"1m-5m\", label: \"$1M - $5M\" },\n      { value: \"over5m\", label: \"Over $5M\" },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Tell us about your company and offerings\",\n    placeholder:\n      \"Describe your products/services, experience, key differentiators, and why you'd like to work with us...\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n  {\n    name: \"certifications\",\n    type: \"textarea\",\n    label: \"Certifications and Compliance\",\n    placeholder:\n      \"List any relevant certifications (ISO, minority-owned, women-owned, veteran-owned, etc.)\",\n    required: false,\n    rows: 3,\n    columnSpan: 12,\n  },\n  {\n    name: \"company_docs\",\n    type: \"file\",\n    label: \"Upload Company Documents\",\n    placeholder: \"Upload company profile, certifications, insurance, etc...\",\n    required: false,\n    accept: \".pdf,.doc,.docx\",\n    maxSize: 10 * 1024 * 1024,\n    maxFiles: 5,\n    multiple: true,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactVendor\n      heading=\"Become a Vendor Partner\"\n      description=\"We're always looking for reliable vendors to join our supply chain. Tell us about your company and how we can work together to create mutual success.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for your interest in becoming a vendor partner! Our procurement team will review your application and reach out within 5-7 business days to discuss next steps.\",\n      }}\n      background=\"white\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.9}\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","vendor","application","form","supplier","marketplace"],"performance":{},"importantUsageNotes":"DO NOT USE this block unless the site is actively seeking vendors or suppliers — this is a highly contextual block. 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 vendor application use case — company name, contact person, job title, business email, phone, company website, product/service categories checkbox-group, partnership type radio, annual capacity select, and description/certifications textareas — 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:16.119Z"}