Check Warranty

{"_id":"@atom-dev/warranty-widget","name":"@atom-dev/warranty-widget","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@atom-dev/warranty-widget","version":"1.0.0","type":"module","description":"ATOM Warranty Check Widget","main":"dist/warranty-widget.umd.js","module":"dist/warranty-widget.es.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/warranty-widget.es.js","require":"./dist/warranty-widget.umd.js"},"./css":"./dist/warranty-widget.css"},"author":{"name":"Atom Solution"},"license":"MIT","keywords":["atom","warranty","widget","react","embed"],"scripts":{"dev":"vite","build":"tsc -p tsconfig.build.json && vite build && copy src\\styles\\widget.css dist\\warranty-widget.css","lint":"eslint .","preview":"vite preview","prepublishOnly":"npm run build && npm run lint"},"dependencies":{"axios":">=1.0.0","clsx":"^2.1.1"},"peerDependencies":{"axios":">=1.0.0","react":">=18.0.0","react-dom":">=18.0.0"},"devDependencies":{"@eslint/js":"^9.39.1","@types/node":"^24.10.1","@types/react":"^19.2.7","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^5.1.1","eslint":"^9.39.1","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.4.24","globals":"^16.5.0","terser":"^5.46.0","typescript":"~5.9.3","typescript-eslint":"^8.48.0","vite":"^7.3.1","vite-tsconfig-paths":"^6.1.1"},"_id":"@atom-dev/warranty-widget@1.0.0","gitHead":"d29c7fbd096491706c864021982b775092124a6b","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-TAeVmbYXqbelbnkG2g3OMCBLgnC8FUOgFeC1u6Xc/nVJ0xC2LPtyyls7totGzx1rIBkNxvDYF1tSPxpma1p5GA==","shasum":"c204bc99266639644cabf35cbac4457a5aefa27c","tarball":"https://registry.npmjs.org/@atom-dev/warranty-widget/-/warranty-widget-1.0.0.tgz","fileCount":5,"unpackedSize":695900,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD+KECUC2x35k7IBtQnhGIKB0PEopQ7DFGOknYuxhiMPgIhAPy4eao0tYVDQ3loruJbysHL6TV92y6g14JReldsdFi5"}]},"_npmUser":{"name":"nguyenvanlenh","email":"vanlenh40@gmail.com"},"directories":{},"maintainers":[{"name":"nguyenvanlenh","email":"vanlenh40@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/warranty-widget_1.0.0_1772986213539_0.0009592440701322591"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-08T16:10:13.458Z","1.0.0":"2026-03-08T16:10:13.765Z","modified":"2026-03-08T16:10:13.993Z"},"maintainers":[{"name":"nguyenvanlenh","email":"vanlenh40@gmail.com"}],"description":"ATOM Warranty Check Widget","keywords":["atom","warranty","widget","react","embed"],"author":{"name":"Atom Solution"},"license":"MIT","readme":"# 🔧 ATOM Warranty Widget\n\nModern, embeddable warranty checking widget for ATOM products.\n\n## ✨ Features\n\n- 🎨 **Modern UI** - Clean, professional design (inspired by FPT Play)\n- 🌐 **Embeddable** - Drop-in widget for any website\n- 📱 **Responsive** - Works on mobile, tablet, desktop\n- 🇻🇳 **Vietnamese** - Full Vietnamese language support\n- ⚡ **Fast** - Built with React + TypeScript + Vite\n- 🔐 **Lightweight** - No external CSS framework dependencies\n- ♿ **Accessible** - Semantic HTML, keyboard navigation\n\n## 🚀 Quick Start\n\n### Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Run dev server\nnpm run dev\n\n# Build\nnpm run build\n\n# Preview production build\nnpm run preview\n```\n\n### Usage in HTML\n\n```html\n\n\n\n Check Warranty\n\n\n \n \n\n \n \n \n\n\n```\n\n## 📦 API Integration\n\nWidget expects your API endpoint to return:\n\n```json\n{\n \"serial\": \"ABC123XYZ\",\n \"device_type\": \"POS System\",\n \"activated_at\": \"2024-01-15T00:00:00Z\",\n \"expired_at\": \"2026-01-15T00:00:00Z\"\n}\n```\n\n## 🎨 Customization\n\n### Color Theme\n\nEdit CSS variables in `src/styles/widget.css`:\n\n```css\n:root {\n --primary-color: #ff6b35; /* Button color */\n --success-color: #4caf50; /* Active warranty */\n --danger-color: #f44336; /* Expired warranty */\n --text-primary: #1a1a1a;\n --border-color: #e0e0e0;\n}\n```\n\n### Device Types\n\nUpdate your API to return appropriate `device_type` values:\n- POS\n- SoundBox\n- Kiosk\n- 2-Screen Display\n- 1-Screen Display\n\n## 📁 Project Structure\n\n```\nsrc/\n├── index.ts # Entry point\n├── WarrantyWidget.tsx # Main component\n├── api/\n│ └── warrantyApi.ts # API service\n├── components/\n│ ├── SerialForm.tsx # Input form\n│ └── WarrantyResult.tsx # Result display\n└── styles/\n └── widget.css # Styling\n```\n\n## 🔧 Technologies\n\n- React 19.2.0\n- TypeScript 5.9\n- Vite 7.3.1\n- Axios 1.13.6\n- ESLint 9.39.1\n\n## 📝 Changelog\n\nSee [CHANGES.md](./CHANGES.md) for detailed updates.\n\n## 🔗 References\n\n- [FPT Play Warranty Page](https://fptplay.vn/bao-hanh)\n- [ATOM Warranty Policy](https://docs.google.com/document/d/1YbAP07qsi8fkm9Sj91jcqU7d1m9BIE_c/)\n\n## 📄 License\n\nATOM Solution - 2025\n\n---\n\n**Ready to embed? Build with `npm run build` and use `dist/warranty-sdk.umd.cjs`**\n\nimport reactDom from 'eslint-plugin-react-dom'\n\nexport default defineConfig([\n globalIgnores(['dist']),\n {\n files: ['**/*.{ts,tsx}'],\n extends: [\n // Other configs...\n // Enable lint rules for React\n reactX.configs['recommended-typescript'],\n // Enable lint rules for React DOM\n reactDom.configs.recommended,\n ],\n languageOptions: {\n parserOptions: {\n project: ['./tsconfig.node.json', './tsconfig.app.json'],\n tsconfigRootDir: import.meta.dirname,\n },\n // other options...\n },\n },\n])\n```\n","readmeFilename":"README.md","_rev":"1-e70674debe2ed81672fb1dac13dd9e2c"}