{"_id":"@businessflow/marketing-sites","name":"@businessflow/marketing-sites","dist-tags":{"latest":"2.0.0"},"versions":{"2.0.0":{"name":"@businessflow/marketing-sites","version":"2.0.0","description":"Marketing website lead collection and form submission utilities with server-side API route handlers for BusinessFlow CRM","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","require":"./dist/index.js","import":"./dist/index.mjs"},"./client":{"types":"./dist/client/index.d.ts","require":"./dist/client/index.js","import":"./dist/client/index.mjs"},"./server":{"types":"./dist/server/index.d.ts","require":"./dist/server/index.js","import":"./dist/server/index.mjs"},"./react":{"types":"./dist/react/index.d.ts","require":"./dist/react/index.js","import":"./dist/react/index.mjs"},"./types":{"types":"./dist/types/index.d.ts"}},"scripts":{"build":"tsup","dev":"tsup --watch","test":"vitest","test:watch":"vitest --watch","test:ui":"vitest --ui","typecheck":"tsc --noEmit","lint":"eslint src --ext .ts,.tsx","lint:fix":"eslint src --ext .ts,.tsx --fix","prepublishOnly":"npm run build && npm run typecheck"},"keywords":["leads","contact-form","form-submission","nextjs","react","typescript","recaptcha"],"author":{"name":"BusinessFlow"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/businessflow/leads.git"},"bugs":{"url":"https://github.com/businessflow/leads/issues"},"homepage":"https://github.com/businessflow/leads#readme","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","next":">=13.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true},"next":{"optional":true}},"dependencies":{"tslib":"^2.6.2"},"devDependencies":{"@types/node":"^20.10.0","@types/react":"^18.2.42","@types/react-dom":"^18.2.17","@typescript-eslint/eslint-plugin":"^6.13.1","@typescript-eslint/parser":"^6.13.1","@vitest/ui":"^1.0.4","eslint":"^8.55.0","eslint-config-prettier":"^9.1.0","eslint-plugin-react":"^7.33.2","eslint-plugin-react-hooks":"^4.6.0","next":"^15.0.0","prettier":"^3.1.0","tsup":"^8.0.1","typescript":"^5.3.2","vitest":"^1.0.4"},"_id":"@businessflow/marketing-sites@2.0.0","gitHead":"3a861702837122991c8787e85248f434a3d1b1d9","_nodeVersion":"22.19.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-6CZv4ieilXxn/G0lGKoa8mKAVBsczr7a/pvr1PRoSxpO3a5qUBi/i7dtEY6djn82mfBdYpjtPUHigFinq5IJGw==","shasum":"724223b47577f781ba8844302048c6d230e30a4a","tarball":"https://registry.npmjs.org/@businessflow/marketing-sites/-/marketing-sites-2.0.0.tgz","fileCount":40,"unpackedSize":499383,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGLdZ6RfHiO3WHwus+1kRFz2eb5/RD2ETjKQnB9QgeRZAiEA0htDrTLhn6IM0Pl5If3zRAo71A0CbIscjP+rG6RAB3Y="}]},"_npmUser":{"name":"carefulcoder42","email":"steyn.dc@gmail.com"},"directories":{},"maintainers":[{"name":"carefulcoder42","email":"steyn.dc@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/marketing-sites_2.0.0_1758564552325_0.309388738577838"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-22T18:09:12.262Z","2.0.0":"2025-09-22T18:09:12.546Z","modified":"2025-09-22T18:09:12.786Z"},"maintainers":[{"name":"carefulcoder42","email":"steyn.dc@gmail.com"}],"description":"Marketing website lead collection and form submission utilities with server-side API route handlers for BusinessFlow CRM","homepage":"https://github.com/businessflow/leads#readme","keywords":["leads","contact-form","form-submission","nextjs","react","typescript","recaptcha"],"repository":{"type":"git","url":"git+https://github.com/businessflow/leads.git"},"author":{"name":"BusinessFlow"},"bugs":{"url":"https://github.com/businessflow/leads/issues"},"license":"MIT","readme":"# @businessflow/marketing-sites\n\nMarketing website lead collection and form submission utilities for React and NextJS applications that integrate with BusinessFlow CRM.\n\n## Features\n\n- 🚀 **Framework Agnostic**: Works with React, NextJS, and vanilla JavaScript\n- 🔒 **Secure**: Server-side API key handling, reCAPTCHA integration\n- 📱 **Responsive**: Mobile-friendly form components\n- 🎨 **Customizable**: Flexible styling and field configuration\n- 📝 **TypeScript**: Full type safety and IntelliSense support\n- ⚡ **Modern**: Built with latest React patterns and NextJS features\n- 🏢 **BusinessFlow Ready**: Pre-configured for BusinessFlow CRM integration\n\n## Installation\n\n```bash\nnpm install @businessflow/marketing-sites\n```\n\n## Quick Start\n\n### 1. Simple BusinessFlow Integration\n\n```typescript\n// app/api/lead/route.ts\nimport { createBusinessFlowHandler } from '@businessflow/marketing-sites/server';\n\nexport const POST = createBusinessFlowHandler({\n  apiUrl: process.env.BUSINESS_FLOW_API_URL!,\n  apiKey: process.env.BUSINESS_FLOW_API_KEY!,\n  sourceUrl: process.env.SITE_URL!,\n  recaptchaSecret: process.env.RECAPTCHA_SECRET_KEY!,\n});\n```\n\n### 2. Even Simpler with Environment Variables\n\n```typescript\n// app/api/lead/route.ts\nimport { createSimpleBusinessFlowHandler } from '@businessflow/marketing-sites/server';\n\n// Uses BUSINESS_FLOW_API_URL, BUSINESS_FLOW_API_KEY, and RECAPTCHA_SECRET_KEY from env\nexport const POST = createSimpleBusinessFlowHandler();\n```\n\n### 3. Custom Integration (Advanced)\n\n```typescript\n// app/api/lead/route.ts\nimport { createLeadHandler } from '@businessflow/marketing-sites/server';\n\nexport const POST = createLeadHandler({\n  onSubmit: async (data) => {\n    // Your custom business logic here\n    const response = await fetch('https://your-api.com/leads', {\n      method: 'POST',\n      headers: {\n        'Authorization': `Bearer ${process.env.YOUR_API_KEY}`,\n        'Content-Type': 'application/json'\n      },\n      body: JSON.stringify(data)\n    });\n\n    return {\n      success: response.ok,\n      message: response.ok ? 'Lead submitted successfully' : 'Submission failed',\n      id: response.ok ? await response.json().then(r => r.id) : undefined\n    };\n  },\n  recaptcha: {\n    secretKey: process.env.RECAPTCHA_SECRET_KEY!\n  }\n});\n```\n\n### 2. Use in Your Components\n\n#### Pre-built Component\n```typescript\nimport { ContactForm } from '@businessflow/leads/react';\n\nexport default function ContactPage() {\n  return (\n    <ContactForm\n      recaptcha={{ siteKey: process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY! }}\n      onSuccess={(response) => console.log('Success!', response)}\n      onError={(error) => console.error('Error:', error)}\n    />\n  );\n}\n```\n\n#### Custom Hook for Custom Forms\n```typescript\nimport { useContactForm } from '@businessflow/leads/react';\n\nexport default function CustomContactForm() {\n  const {\n    formData,\n    errors,\n    state,\n    handleChange,\n    handleSubmit,\n    handleRetry,\n    resetForm\n  } = useContactForm({\n    endpoint: '/api/lead',\n    recaptcha: { \n      siteKey: process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!,\n      action: 'contact_form'\n    },\n    onSuccess: (response) => console.log('Success!', response),\n    onError: (error) => console.error('Error:', error),\n    maxRetries: 3\n  });\n\n  return (\n    <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}>\n      <input\n        type=\"text\"\n        placeholder=\"First Name\"\n        value={formData.firstName}\n        onChange={(e) => handleChange('firstName', e.target.value)}\n      />\n      {errors.firstName && <span>{errors.firstName}</span>}\n      \n      <input\n        type=\"text\"\n        placeholder=\"Last Name\"\n        value={formData.lastName}\n        onChange={(e) => handleChange('lastName', e.target.value)}\n      />\n      {errors.lastName && <span>{errors.lastName}</span>}\n      \n      <input\n        type=\"email\"\n        placeholder=\"Email\"\n        value={formData.email}\n        onChange={(e) => handleChange('email', e.target.value)}\n      />\n      {errors.email && <span>{errors.email}</span>}\n      \n      <button type=\"submit\" disabled={state.isSubmitting}>\n        {state.isSubmitting ? 'Submitting...' : 'Submit'}\n      </button>\n      \n      {state.error && state.canRetry && (\n        <button onClick={handleRetry} disabled={state.isSubmitting}>\n          Retry ({state.retryCount}/{3})\n        </button>\n      )}\n      \n      {state.isSuccess && <div>Form submitted successfully!</div>}\n      {state.error && <div>Error: {state.error}</div>}\n    </form>\n  );\n}\n```\n\n## Documentation\n\n- [API Reference](./docs/api.md)\n- [Examples](./examples/)\n- [Migration Guide](./docs/migration.md)\n\n## License\n\nMIT","readmeFilename":"README.md","_rev":"1-e163dd75104141fc5d39b72d15a4db94"}