'use client';
import { useState } from 'react';
import { QRLogin, QRCardDisplay } from '@loyaltylt/sdk/react';
import '@loyaltylt/sdk/styles';
const API_KEY = 'lty_your_api_key';
const API_SECRET = 'your_api_secret';
function App() {
const [user, setUser] = useState(null);
const [token, setToken] = useState(null);
const handleLogin = (userData, authToken) => {
setUser(userData);
setToken(authToken);
localStorage.setItem('auth_token', authToken);
};
const handleLogout = () => {
setUser(null);
setToken(null);
localStorage.removeItem('auth_token');
};
if (!user) {
return (
<div className="login-container">
<h1>Welcome to Our Store</h1>
<p>Scan to login with your loyalty account</p>
<QRLogin
apiKey={API_KEY}
apiSecret={API_SECRET}
onAuthenticated={handleLogin}
onError={(error) => console.error('Login error:', error)}
/>
</div>
);
}
return (
<div className="dashboard">
<h1>Welcome, {user.name}!</h1>
<div className="loyalty-section">
<h2>Your Loyalty Card</h2>
<QRCardDisplay
apiKey={API_KEY}
apiSecret={API_SECRET}
userToken={token}
showPoints={true}
showUserInfo={true}
onCardLoaded={(card) => {
console.log('Card loaded:', card);
}}
/>
</div>
<button onClick={handleLogout}>
Logout
</button>
</div>
);
}
export default App;
