@baongoc2801/warranty-widget

v1.0.0

Published

16 days ago

ATOM Warranty Check Widget

0High
0Medium
0Low

baongoc28012004

nhuphivo

mau.tb

atom warranty widget react embed

🔧 ATOM Warranty Widget

Modern, embeddable warranty checking widget for ATOM products.

✨ Features

🎨 Modern UI - Clean, professional design (inspired by FPT Play)
🌐 Embeddable - Drop-in widget for any website
📱 Responsive - Works on mobile, tablet, desktop
🇻🇳 Vietnamese - Full Vietnamese language support
⚡ Fast - Built with React + TypeScript + Vite
🔐 Lightweight - No external CSS framework dependencies
♿ Accessible - Semantic HTML, keyboard navigation

🚀 Quick Start

Development

# Install dependencies
npm install

# Run dev server
npm run dev

# Build
npm run build

# Preview production build
npm run preview

Usage in HTML

<!DOCTYPE html>
<html>
<head>
    <title>Check Warranty</title>
</head>
<body>
    <!-- Widget container -->
    <div id="warranty-widget"></div>

    <!-- Widget script -->
    <script src="dist/warranty-sdk.umd.cjs"></script>
    <script>
        WarrantyWidget.mount('#warranty-widget', {
            apiBase: 'https://api.atom.vn'
        });
    </script>
</body>
</html>

📦 API Integration

Widget expects your API endpoint to return:

{
  "serial": "ABC123XYZ",
  "device_type": "POS System",
  "activated_at": "2024-01-15T00:00:00Z",
  "expired_at": "2026-01-15T00:00:00Z"
}

🎨 Customization

Color Theme

Edit CSS variables in src/styles/widget.css:

:root {
  --primary-color: #ff6b35;     /* Button color */
  --success-color: #4caf50;     /* Active warranty */
  --danger-color: #f44336;      /* Expired warranty */
  --text-primary: #1a1a1a;
  --border-color: #e0e0e0;
}

Device Types

Update your API to return appropriate device_type values:

POS
SoundBox
Kiosk
2-Screen Display
1-Screen Display

📁 Project Structure

src/
├── index.ts                 # Entry point
├── WarrantyWidget.tsx       # Main component
├── api/
│   └── warrantyApi.ts       # API service
├── components/
│   ├── SerialForm.tsx       # Input form
│   └── WarrantyResult.tsx   # Result display
└── styles/
    └── widget.css           # Styling

🔧 Technologies

React 19.2.0
TypeScript 5.9
Vite 7.3.1
Axios 1.13.6
ESLint 9.39.1

📝 Changelog

See CHANGES.md for detailed updates.

🔗 References

📄 License

ATOM Solution - 2025

Ready to embed? Build with npm run build and use dist/warranty-sdk.umd.cjs

import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([ globalIgnores(['dist']), { files: ['**/*.{ts,tsx}'], extends: [ // Other configs... // Enable lint rules for React reactX.configs['recommended-typescript'], // Enable lint rules for React DOM reactDom.configs.recommended, ], languageOptions: { parserOptions: { project: ['./tsconfig.node.json', './tsconfig.app.json'], tsconfigRootDir: import.meta.dirname, }, // other options... }, }, ])