michal.cukrowski/thermcool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(forms): ujednolicenie ekranu sukcesu i usuniecie zbednych opcji

Browse Source
This commit is contained in:
MichalC
2026-07-27 22:32:30 +02:00
parent e338c95da0
commit 1a11aecf01
5 changed files with 78 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/awaria/AwariaClient.tsx
+26 -36
View File
@@ -1,10 +1,11 @@
'use client';
import { useState } from 'react';
import { AlertTriangle, Wrench, Phone, Check, Clock, Zap } from 'lucide-react';
import { Wrench, Zap, Info, Clock, Check, AlertTriangle, Phone, CheckCircle2 } from 'lucide-react';
import Link from 'next/link';
import { companyDetails } from '@/content/company';
import { submitAwariaForm } from '@/app/zgloszenie-awarii/actions';
import { getRecaptchaToken } from '@/lib/getRecaptchaToken';
// Kody błędów popularnych marek
const ERROR_CODES: Record<string, Record<string, string>> = {
@@ -125,15 +126,8 @@ export function AwariaClient() {
}
setIsSubmitting(true);
let recaptchaToken = '';
if (process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY) {
recaptchaToken = await (window as any).grecaptcha.execute(
process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY,
{ action: 'submit' }
);
}
await submitAwariaForm({
const recaptchaToken = await getRecaptchaToken('submit');
const formDataObj: any = {
isUrgent,
brand,
model,
@@ -147,8 +141,10 @@ export function AwariaClient() {
city,
preferredDate: '',
preferredTime: '',
recaptchaToken,
});
};
if (recaptchaToken) formDataObj.recaptchaToken = recaptchaToken;
await submitAwariaForm(formDataObj);
setIsSubmitting(false);
setStep('success');
@@ -157,31 +153,25 @@ export function AwariaClient() {
if (step === 'success') {
return (
<main className="bg-slate-50 min-h-screen flex items-center justify-center py-16">
<div className="max-w-md mx-auto px-4 text-center">
<div className="size-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
<Check className="size-10 text-green-600" />
</div>
<h2 className="text-2xl font-extrabold text-primary font-heading mb-3">
Zgłoszenie przyjęte!
</h2>
<p className="text-text-muted mb-2">
{isUrgent
? 'Twoje zgłoszenie oznaczono jako PILNE — skontaktujemy się z Tobą w ciągu 2 godzin.'
: 'Skontaktujemy się z Tobą w ciągu 24 godzin, aby ustalić termin wizyty serwisanta.'}
</p>
<p className="text-sm text-text-muted mb-8">
Jeśli sprawa jest pilna — zadzwoń bezpośrednio:
</p>
<a href={`tel:${companyDetails.phoneRaw}`}>
<button className="flex items-center gap-2 px-6 py-3 bg-accent text-white rounded-xl font-bold mx-auto hover:bg-accent/90 transition-colors mb-4">
<Phone className="size-4" /> {companyDetails.phone}
<div className="max-w-md mx-auto px-4 w-full">
<div className="bg-green-50 text-green-800 p-8 rounded-2xl border border-green-200 flex flex-col items-center text-center">
<CheckCircle2 className="w-16 h-16 text-green-500 mb-4" />
<h3 className="text-2xl font-bold font-heading mb-2">Zgłoszenie przyjęte!</h3>
<p className="text-green-700 mb-2">
{isUrgent
? 'Twoje zgłoszenie oznaczono jako PILNE — skontaktujemy się z Tobą w ciągu 2 godzin.'
: 'Skontaktujemy się z Tobą w ciągu 24 godzin, aby ustalić termin wizyty serwisanta.'}
</p>
<p className="text-sm text-green-700/80 mb-6">
Jeśli sprawa jest pilna — zadzwoń bezpośrednio: {companyDetails.phone}
</p>
<button
onClick={() => setStep('form')}
className="mt-2 px-6 py-2 bg-green-600 text-white rounded-lg font-semibold hover:bg-green-700 transition-colors"
>
Wyślij kolejne zgłoszenie
</button>
</a>
<Link href="/" className="text-sm text-text-muted hover:text-accent transition-colors">
Wróć na stronę główną
</Link>
</div>
</div>
</main>
);