Add phone field to color request form and database

This commit is contained in:
DaX
2025-08-29 12:41:34 +02:00
parent 9f2dade0e3
commit 6d534352b2
4 changed files with 40 additions and 6 deletions

View File

@@ -259,6 +259,7 @@ app.post('/api/color-requests', async (req, res) => {
material_type,
finish_type,
user_email,
user_phone,
user_name,
description,
reference_url
@@ -292,10 +293,10 @@ app.post('/api/color-requests', async (req, res) => {
// Create new request
const result = await pool.query(
`INSERT INTO color_requests
(color_name, material_type, finish_type, user_email, user_name, description, reference_url)
VALUES ($1, $2, $3, $4, $5, $6, $7)
(color_name, material_type, finish_type, user_email, user_phone, user_name, description, reference_url)
VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
RETURNING *`,
[color_name, material_type, finish_type, user_email, user_name, description, reference_url]
[color_name, material_type, finish_type, user_email, user_phone, user_name, description, reference_url]
);
res.json({
message: 'Color request submitted successfully',

View File

@@ -11,6 +11,7 @@ interface ColorRequest {
material_type: string;
finish_type: string;
user_email: string;
user_phone: string;
user_name: string;
description: string;
reference_url: string;
@@ -215,6 +216,13 @@ export default function ColorRequestsAdmin() {
) : (
<span className="text-gray-400 dark:text-gray-500">Anonimno</span>
)}
{request.user_phone && (
<div className="mt-1">
<a href={`tel:${request.user_phone}`} className="text-blue-600 dark:text-blue-400 hover:underline">
{request.user_phone}
</a>
</div>
)}
</div>
</td>
<td className="px-4 py-3">

View File

@@ -0,0 +1,8 @@
-- Migration: Add phone field to color_requests table
-- Allows users to provide phone number for contact
ALTER TABLE color_requests
ADD COLUMN IF NOT EXISTS user_phone VARCHAR(50);
-- Add comment to describe the new column
COMMENT ON COLUMN color_requests.user_phone IS 'User phone number for contact (optional)';

View File

@@ -13,7 +13,8 @@ export default function ColorRequestModal({ isOpen, onClose }: ColorRequestModal
color_name: '',
material_type: 'PLA',
finish_type: 'Basic',
user_email: ''
user_email: '',
user_phone: ''
});
const [isSubmitting, setIsSubmitting] = useState(false);
const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
@@ -25,7 +26,8 @@ export default function ColorRequestModal({ isOpen, onClose }: ColorRequestModal
color_name: '',
material_type: 'PLA',
finish_type: 'Basic',
user_email: ''
user_email: '',
user_phone: ''
});
setMessage(null);
}
@@ -184,6 +186,21 @@ export default function ColorRequestModal({ isOpen, onClose }: ColorRequestModal
/>
</div>
<div>
<label htmlFor="user_phone" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Telefon (opciono)
</label>
<input
type="tel"
id="user_phone"
name="user_phone"
value={formData.user_phone}
onChange={handleChange}
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 appearance-none"
placeholder="Za kontakt"
/>
</div>
<div className="flex justify-end space-x-3 pt-4">
<button
type="button"