{"_id":"@chaicodes-com/legal-pages","_rev":"2-4366d467f5f5b9435711ca1c402de62b","name":"@chaicodes-com/legal-pages","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@chaicodes-com/legal-pages","version":"1.0.0","keywords":["legal","about","terms","privacy","pages","react"],"author":{"name":"ChAI Wang"},"license":"MIT","_id":"@chaicodes-com/legal-pages@1.0.0","maintainers":[{"name":"chaifu.wang","email":"chaifu.wang@gmail.com"}],"dist":{"shasum":"5b8449ac351b27e22573b7fb99b3d0e0323b36e7","tarball":"https://registry.npmjs.org/@chaicodes-com/legal-pages/-/legal-pages-1.0.0.tgz","fileCount":26,"integrity":"sha512-wHU2Vb09VEY0+t56dEl1lbDYiPCAmI4lBaTC+/9AyJqoNOYAW0s5ANv8fbPZilETWiNhMRtZo2zaJ86uNvZDCw==","signatures":[{"sig":"MEYCIQD62HGnDB5ro6gCpkNkDnxpg0VZZK4nPik9Pk4udKuujgIhALRL4jznAqt/WNSNN6bi/Us4eVHiDVEI3lvLUiC3w5ak","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":80925},"main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"}},"gitHead":"88c9803d04871192279c5d522fcbdae0dfa081f2","scripts":{"dev":"tsc --watch","build":"tsc","clean":"rm -rf dist"},"_npmUser":{"name":"chaifu.wang","email":"chaifu.wang@gmail.com"},"_npmVersion":"11.12.1","description":"Legal pages components for Chaicodes apps (About, Terms, Privacy)","directories":{},"_nodeVersion":"24.15.0","_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","typescript":"^5.0.0","@types/react":"^19.2.15","@types/react-dom":"^19.2.3"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/legal-pages_1.0.0_1779368951230_0.7973437996286532","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@chaicodes-com/legal-pages","version":"1.0.1","description":"Legal pages components for Chaicodes apps (About, Terms, Privacy)","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.js","require":"./dist/index.js","types":"./dist/index.d.ts"}},"scripts":{"build":"tsc","dev":"tsc --watch","clean":"rm -rf dist"},"keywords":["legal","about","terms","privacy","pages","react"],"author":{"name":"ChAI Wang"},"license":"MIT","peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"devDependencies":{"@types/react":"^19.2.15","@types/react-dom":"^19.2.3","react":"^18.0.0","react-dom":"^18.0.0","typescript":"^5.0.0"},"gitHead":"88c9803d04871192279c5d522fcbdae0dfa081f2","_id":"@chaicodes-com/legal-pages@1.0.1","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-8eNdccgzVtwcOrqNHQNy6LqNw0mf52tBWiS/mxJkwagNISAX6SodlfBpAl5H7G4DpmVDY4dycYe5b93OaEqpew==","shasum":"c605b940a776e43027fc106b1c857521cd5467e4","tarball":"https://registry.npmjs.org/@chaicodes-com/legal-pages/-/legal-pages-1.0.1.tgz","fileCount":26,"unpackedSize":80947,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIB+Q/vBUu3oS1rBOHMBLO3WfMidoNz9Zf+2TTOkAwyfjAiB7za9G/5Ha7CIebzgIyDiYgZSlWT4Qw7/yKP72Zg5DXw=="}]},"_npmUser":{"name":"chaifu.wang","email":"chaifu.wang@gmail.com"},"directories":{},"maintainers":[{"name":"chaifu.wang","email":"chaifu.wang@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/legal-pages_1.0.1_1779369871089_0.8774912631384602"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-21T13:09:11.106Z","modified":"2026-05-21T13:24:31.376Z","1.0.0":"2026-05-21T13:09:11.391Z","1.0.1":"2026-05-21T13:24:31.233Z"},"author":{"name":"ChAI Wang"},"license":"MIT","keywords":["legal","about","terms","privacy","pages","react"],"description":"Legal pages components for Chaicodes apps (About, Terms, Privacy)","maintainers":[{"name":"chaifu.wang","email":"chaifu.wang@gmail.com"}],"readme":"# @chaicodes/legal-pages\n\nReusable React components for **About** and **Terms & Conditions** pages. Provides consistent ChAICodes branding across all applications with customizable app names and logos.\n\n---\n\n## Features\n\n✅ **Consistent Branding** — Same ChAICodes styling and fonts across all apps \n✅ **Flexible Placement** — Full pages, footers, or modals \n✅ **Customizable Per App** — Change app name and logo \n✅ **Professional Design** — Matches ChAICodes aesthetic \n✅ **Complete T&Cs** — Includes refund policy with clear terms \n✅ **React Components** — Easy integration into any React app \n✅ **No Duplicated Code** — Single source of truth \n\n---\n\n## Installation\n\n```bash\nnpm install @chaicodes/legal-pages\n```\n\n**Note:** Requires React 16.0+ as a peer dependency.\n\n---\n\n## Components\n\n### 1. **AboutPage** — Full-page About component\n\nFull-page view showing ChAICodes mission, values, and features.\n\n```jsx\nimport { AboutPage } from '@chaicodes/legal-pages';\n\nfunction App() {\n return (\n \n );\n}\n```\n\n**Props:**\n- `appName` (string, optional) — Name of your application\n- `appLogo` (string, optional) — Emoji or icon for your app\n\n**Use Cases:**\n- Dedicated `/about` page\n- Full-screen modal\n- Sidebar component\n\n---\n\n### 2. **AboutFooter** — Compact About component\n\nCompact footer-style About section with expandable details.\n\n```jsx\nimport { AboutFooter } from '@chaicodes/legal-pages';\n\nfunction Footer() {\n return (\n console.log('Learn more clicked')}\n />\n );\n}\n```\n\n**Props:**\n- `appName` (string, optional) — Name of your application\n- `appLogo` (string, optional) — Emoji or icon\n- `onLearnMore` (function, optional) — Custom handler for \"Learn More\" button\n\n**Use Cases:**\n- Footer section\n- Sidebar component\n- Modal trigger\n- Minimal space component\n\n---\n\n### 3. **TermsPage** — Full Terms & Conditions page\n\nComplete Terms & Conditions page with refund policy.\n\n```jsx\nimport { TermsPage } from '@chaicodes/legal-pages';\n\nfunction TermsRoute() {\n return ;\n}\n```\n\n**Props:**\n- `appName` (string, optional) — Name of your application (used in content)\n\n**Use Cases:**\n- Dedicated `/terms` page\n- Scrollable modal\n- Full-screen overlay\n\n**Includes:**\n- Account and access terms\n- Concurrent session limits\n- Subscription terms\n- **Refund Policy** (24-hour grace period)\n- Limitation of liability\n- Privacy notice\n- Governing law\n\n---\n\n### 4. **TermsModal** — Modal Terms & Conditions\n\nModal version of Terms & Conditions with close button.\n\n```jsx\nimport { useState } from 'react';\nimport { TermsModal } from '@chaicodes/legal-pages';\n\nfunction App() {\n const [showTerms, setShowTerms] = useState(false);\n\n return (\n <>\n \n\n setShowTerms(false)}\n />\n \n );\n}\n```\n\n**Props:**\n- `appName` (string, optional) — Name of your application\n- `isOpen` (boolean, default: true) — Controls modal visibility\n- `onClose` (function) — Called when user closes the modal\n\n**Use Cases:**\n- Popup modal on signup\n- Terms confirmation dialog\n- Info modal\n\n---\n\n## Refund Policy Details\n\n### Subscription Refunds\n\n**24-Hour Grace Period:**\n- If you cancel within 24 hours of purchase\n- AND have not used the service\n- You are eligible for a **full refund**\n- Applies to both monthly and annual subscriptions\n\n**After Grace Period:**\n- Once 24 hours pass or service is used\n- **NO refunds** are issued for subscription fees\n- You can cancel to prevent future charges\n\n### Token Refunds\n\n**Refundable:**\n- Tokens purchased due to **accidental duplicate charges**\n- Tokens purchased due to **documented system errors**\n- Contact support@chaicodes.com with proof\n\n**Non-Refundable:**\n- Tokens that have been **used or spent**\n- **Unused tokens** purchased intentionally\n- Chargebacks initiated without contacting support\n\n---\n\n## Branding & Customization\n\n### Consistent ChAICodes Branding\n\nEvery component includes:\n- **Color scheme:** Red (#C8102E), dark backgrounds, light text\n- **Typography:** Playfair Display (headings), Lora (body), Cormorant Garamond (labels)\n- **Styling:** Professional, minimal, elegant\n- **Logo:** ChAI Codes ⚙️ symbol\n- **Support Email:** support@chaicodes.com (always)\n\n### Per-App Customization\n\nCustomize for your specific app:\n\n```jsx\n// Resolution Composer\n\n\n// AIWeekly\n\n\n// Your Future App\n\n```\n\nEverything else (colors, fonts, support email, legal terms) stays the same.\n\n---\n\n## Usage Examples\n\n### Example 1: Full About Page\n\n```jsx\nimport { AboutPage } from '@chaicodes/legal-pages';\n\nexport function AboutRoute() {\n return (\n \n );\n}\n```\n\n### Example 2: About Footer in Footer Component\n\n```jsx\nimport { AboutFooter } from '@chaicodes/legal-pages';\n\nexport function Footer() {\n return (\n
\n );\n}\n```\n\n### Example 3: Terms Modal on Signup\n\n```jsx\nimport { useState } from 'react';\nimport { TermsModal } from '@chaicodes/legal-pages';\n\nexport function SignupForm() {\n const [showTerms, setShowTerms] = useState(false);\n const [acceptedTerms, setAcceptedTerms] = useState(false);\n\n return (\n \n );\n}\n```\n\n### Example 4: Terms Page Route\n\n```jsx\nimport { TermsPage } from '@chaicodes/legal-pages';\n\nexport function TermsRoute() {\n return ;\n}\n```\n\n---\n\n## Integration Checklist\n\n- [ ] Install package: `npm install @chaicodes/legal-pages`\n- [ ] Import components in your app\n- [ ] Add `/about` route with `AboutPage`\n- [ ] Add `/terms` route with `TermsPage`\n- [ ] Add About footer to footer component\n- [ ] Add Terms modal to signup form (if needed)\n- [ ] Customize `appName` and `appLogo` per app\n- [ ] Test all components in your app\n\n---\n\n## Styling\n\nAll components use **inline CSS-in-JS styles** and include Google Fonts imports. No external CSS files needed.\n\n### Colors Used\n```\nPrimary Red: #C8102E\nSecondary Gray: #91A3B0\nDark Background: #1a1214\nLight Text: #e8e0dc\nSuccess Green: #5dcc6a\nWarning Red: #e03050\n```\n\n### Fonts\n- **Headings:** Playfair Display (Google Fonts)\n- **Body Text:** Lora (Google Fonts)\n- **Labels:** Cormorant Garamond (Google Fonts)\n\n---\n\n## API Reference\n\n### AboutPage\n\n```jsx\n\n```\n\n---\n\n### AboutFooter\n\n```jsx\n void // Custom click handler (optional)\n/>\n```\n\n---\n\n### TermsPage\n\n```jsx\n\n```\n\n---\n\n### TermsModal\n\n```jsx\n void // Called when closed (required)\n/>\n```\n\n---\n\n## Branding Configuration\n\nAccess ChAICodes branding config:\n\n```jsx\nimport { CHAICODES_BRANDING } from '@chaicodes/legal-pages';\n\nconsole.log(CHAICODES_BRANDING.colors.primary); // #C8102E\nconsole.log(CHAICODES_BRANDING.supportEmail); // support@chaicodes.com\nconsole.log(CHAICODES_BRANDING.website); // https://chaicodes.com\n```\n\n---\n\n## When to Use Each Component\n\n| Use Case | Component |\n|----------|-----------|\n| Dedicated about page | `` |\n| About in footer/sidebar | `` |\n| Dedicated terms page | `` |\n| Terms in modal/popup | `` |\n| Multiple placements | Mix and match! |\n\n---\n\n## Customization for New Apps\n\nWhen building **AIWeekly** or another app:\n\n```jsx\n// Just change these two props\n\n\n\n\n\n// Everything else is consistent across all apps ✓\n```\n\n---\n\n## Refund Policy Reference\n\n**For your records:**\n\n```\nSUBSCRIPTION GRACE PERIOD:\n- 24 hours from purchase\n- Only if service not used\n- Applies to monthly and annual\n- Full refund issued\n\nTOKEN REFUNDS:\n- Accidental duplicate purchases: YES\n- System errors: YES\n- Unused tokens intentionally purchased: NO\n- Used/spent tokens: NO\n```\n\n---\n\n## Migration Path\n\n### From Old Code (Duplicated)\n\n```jsx\n// Before: T&Cs hard-coded in every app\nconst termsHTML = `