dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add customer avatar upload and product downloadable files

Browse Source 
Customer Avatar Upload:
- Add /account/avatar endpoint for upload/delete
- Add /account/avatar-settings endpoint for settings
- Update AccountDetails.tsx with avatar upload UI
- Support base64 image upload with validation

Product Downloadable Files:
- Create DownloadsTab component for file management
- Add downloads state to ProductFormTabbed
- Show Downloads tab when 'downloadable' is checked
- Support file name, URL, download limit, and expiry
This commit is contained in:
Dwindi Ramadhana
2026-01-05 00:05:18 +07:00
parent 6c8cbb93e6
commit 51c759a4f5
4 changed files with 549 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
customer-spa/src/pages/Account/AccountDetails.tsx
View File

@@ -1,7 +1,13 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import { toast } from 'sonner';
import { api } from '@/lib/api/client';
interface AvatarSettings {
allow_custom_avatar: boolean;
current_avatar: string | null;
gravatar_url: string;
}
export default function AccountDetails() {
const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false);
@@ -16,8 +22,14 @@ export default function AccountDetails() {
confirmPassword: '',
});
// Avatar state
const [avatarSettings, setAvatarSettings] = useState<AvatarSettings | null>(null);
const [uploadingAvatar, setUploadingAvatar] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
loadProfile();
loadAvatarSettings();
}, []);
const loadProfile = async () => {
@@ -36,17 +48,93 @@ export default function AccountDetails() {
}
};
const loadAvatarSettings = async () => {
try {
const data = await api.get<AvatarSettings>('/account/avatar-settings');
setAvatarSettings(data);
} catch (error) {
console.error('Load avatar settings error:', error);
}
};
const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (!file) return;
// Validate file type
const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
if (!validTypes.includes(file.type)) {
toast.error('Please upload a valid image (JPG, PNG, GIF, or WebP)');
return;
}
// Validate file size (max 2MB)
if (file.size > 2 * 1024 * 1024) {
toast.error('Image size must be less than 2MB');
return;
}
setUploadingAvatar(true);
try {
// Convert to base64
const reader = new FileReader();
reader.onloadend = async () => {
try {
const result = await api.post<{ avatar_url: string }>('/account/avatar', {
avatar: reader.result,
});
setAvatarSettings(prev => prev ? {
...prev,
current_avatar: result.avatar_url,
} : null);
toast.success('Avatar uploaded successfully');
} catch (error: any) {
console.error('Upload avatar error:', error);
toast.error(error.message || 'Failed to upload avatar');
} finally {
setUploadingAvatar(false);
}
};
reader.readAsDataURL(file);
} catch (error) {
console.error('Read file error:', error);
toast.error('Failed to read image file');
setUploadingAvatar(false);
}
};
const handleRemoveAvatar = async () => {
setUploadingAvatar(true);
try {
await api.delete('/account/avatar');
setAvatarSettings(prev => prev ? {
...prev,
current_avatar: null,
} : null);
toast.success('Avatar removed');
} catch (error: any) {
console.error('Remove avatar error:', error);
toast.error(error.message || 'Failed to remove avatar');
} finally {
setUploadingAvatar(false);
}
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setSaving(true);
try {
await api.post('/account/profile', {
first_name: formData.firstName,
last_name: formData.lastName,
email: formData.email,
});
toast.success('Profile updated successfully');
} catch (error) {
console.error('Save profile error:', error);
@@ -58,25 +146,25 @@ export default function AccountDetails() {
const handlePasswordChange = async (e: React.FormEvent) => {
e.preventDefault();
if (passwordData.newPassword !== passwordData.confirmPassword) {
toast.error('New passwords do not match');
return;
}
if (passwordData.newPassword.length < 8) {
toast.error('Password must be at least 8 characters');
return;
}
setSaving(true);
try {
await api.post('/account/password', {
current_password: passwordData.currentPassword,
new_password: passwordData.newPassword,
});
toast.success('Password updated successfully');
setPasswordData({
currentPassword: '',
@@ -91,6 +179,8 @@ export default function AccountDetails() {
}
};
const currentAvatarUrl = avatarSettings?.current_avatar || avatarSettings?.gravatar_url;
if (loading) {
return (
<div className="flex items-center justify-center py-12">
@@ -102,7 +192,58 @@ export default function AccountDetails() {
return (
<div>
<h1 className="text-2xl font-bold mb-6">Account Details</h1>
{/* Avatar Section */}
{avatarSettings?.allow_custom_avatar && (
<div className="mb-8 pb-8 border-b">
<h2 className="text-xl font-semibold mb-4">Profile Photo</h2>
<div className="flex items-center gap-6">
<div className="relative">
<img
src={currentAvatarUrl || '/placeholder-avatar.png'}
alt="Profile"
className="w-24 h-24 rounded-full object-cover border-2 border-gray-200"
/>
{uploadingAvatar && (
<div className="absolute inset-0 flex items-center justify-center bg-black/50 rounded-full">
<div className="w-6 h-6 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
</div>
)}
</div>
<div className="flex flex-col gap-2">
<input
ref={fileInputRef}
type="file"
accept="image/jpeg,image/png,image/gif,image/webp"
onChange={handleAvatarUpload}
className="hidden"
/>
<button
type="button"
onClick={() => fileInputRef.current?.click()}
disabled={uploadingAvatar}
className="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50"
>
{uploadingAvatar ? 'Uploading...' : 'Upload Photo'}
</button>
{avatarSettings?.current_avatar && (
<button
type="button"
onClick={handleRemoveAvatar}
disabled={uploadingAvatar}
className="px-4 py-2 border border-red-500 text-red-500 rounded-lg hover:bg-red-50 transition-colors disabled:opacity-50"
>
Remove Photo
</button>
)}
<p className="text-xs text-gray-500">
JPG, PNG, GIF or WebP. Max 2MB.
</p>
</div>
</div>
</div>
)}
<form onSubmit={handleSubmit} className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
@@ -116,7 +257,7 @@ export default function AccountDetails() {
disabled={saving}
/>
</div>
<div>
<label htmlFor="lastName" className="block text-sm font-medium mb-2">Last Name</label>
<input
@@ -142,8 +283,8 @@ export default function AccountDetails() {
/>
</div>
<button
type="submit"
<button
type="submit"
className="font-[inherit] px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
disabled={saving}
>
@@ -154,13 +295,13 @@ export default function AccountDetails() {
{/* Password Change Form - Separate */}
<form onSubmit={handlePasswordChange} className="space-y-6 mt-8 pt-8 border-t">
<h2 className="text-xl font-semibold">Password Change</h2>
<div className="space-y-4">
<div>
<label htmlFor="currentPassword" className="block text-sm font-medium mb-2">Current Password</label>
<input
id="currentPassword"
type="password"
<input
id="currentPassword"
type="password"
value={passwordData.currentPassword}
onChange={(e) => setPasswordData({ ...passwordData, currentPassword: e.target.value })}
className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
@@ -169,9 +310,9 @@ export default function AccountDetails() {
</div>
<div>
<label htmlFor="newPassword" className="block text-sm font-medium mb-2">New Password</label>
<input
id="newPassword"
type="password"
<input
id="newPassword"
type="password"
value={passwordData.newPassword}
onChange={(e) => setPasswordData({ ...passwordData, newPassword: e.target.value })}
className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
@@ -181,9 +322,9 @@ export default function AccountDetails() {
</div>
<div>
<label htmlFor="confirmPassword" className="block text-sm font-medium mb-2">Confirm New Password</label>
<input
id="confirmPassword"
type="password"
<input
id="confirmPassword"
type="password"
value={passwordData.confirmPassword}
onChange={(e) => setPasswordData({ ...passwordData, confirmPassword: e.target.value })}
className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
@@ -192,8 +333,8 @@ export default function AccountDetails() {
</div>
</div>
<button
type="submit"
<button
type="submit"
className="font-[inherit] px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
disabled={saving}
>