payment modal complated
This commit is contained in:
nabijonovdavronbek619@gmail.com
@@ -10,6 +10,7 @@ import {
|
||||
StatusBanner,
|
||||
} from './Plagiraismui';
|
||||
import { usePlagiarismForm } from '../lib/usePlagiraism';
|
||||
import { PaymentModal } from '@/widgets/history/ui/Paymentmodal';
|
||||
|
||||
// ─── UserIcon (inline) ───────────────────────────────────────────────────────
|
||||
|
||||
@@ -45,119 +46,136 @@ export function PlagiarismCheckForm() {
|
||||
toggleCertificate,
|
||||
handleSubmit,
|
||||
resetSubmission,
|
||||
handleSubmitWithModal,
|
||||
isPaymentOpen,
|
||||
setIsPaymentOpen,
|
||||
} = usePlagiarismForm();
|
||||
|
||||
return (
|
||||
<div className=" bg-[#f4f5ffec] flex items-center justify-center p-4 font-['DM_Sans',sans-serif]">
|
||||
<div className="w-full max-w-4xl">
|
||||
{/* ── Header ────────────────────────────────────────────────────── */}
|
||||
<div className="mb-8">
|
||||
<div className="inline-flex items-center gap-2 bg-blue-100 text-blue-700 text-xs font-bold uppercase tracking-widest px-3 py-1.5 rounded-full mb-4">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-blue-500" />
|
||||
Originality Check
|
||||
<>
|
||||
<div className=" bg-[#f4f5ffec] flex items-center justify-center p-4 font-['DM_Sans',sans-serif]">
|
||||
<div className="w-full max-w-4xl">
|
||||
{/* ── Header ────────────────────────────────────────────────────── */}
|
||||
<div className="mb-8">
|
||||
<div className="inline-flex items-center gap-2 bg-blue-100 text-blue-700 text-xs font-bold uppercase tracking-widest px-3 py-1.5 rounded-full mb-4">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-blue-500" />
|
||||
Originality Check
|
||||
</div>
|
||||
<h1 className="text-3xl font-black text-stone-900 leading-tight">
|
||||
Submit Your Document
|
||||
</h1>
|
||||
<p className="text-stone-500 mt-2 text-sm leading-relaxed">
|
||||
Upload a document to verify its originality. Results are typically
|
||||
ready within a few minutes.
|
||||
</p>
|
||||
</div>
|
||||
<h1 className="text-3xl font-black text-stone-900 leading-tight">
|
||||
Submit Your Document
|
||||
</h1>
|
||||
<p className="text-stone-500 mt-2 text-sm leading-relaxed">
|
||||
Upload a document to verify its originality. Results are typically
|
||||
ready within a few minutes.
|
||||
|
||||
{/* ── Card ──────────────────────────────────────────────────────── */}
|
||||
<div className="bg-white rounded-3xl shadow-xl shadow-stone-200/80 border border-stone-100 overflow-hidden">
|
||||
{/* Progress bar accent */}
|
||||
<div className="h-1 w-full bg-linear-to-r from-blue-400 via-blue-500 to-indigo-400" />
|
||||
|
||||
<form
|
||||
onSubmit={handleSubmitWithModal}
|
||||
noValidate
|
||||
className="p-7 flex md:flex-row flex-col gap-6"
|
||||
>
|
||||
{/* Status banners */}
|
||||
{submission.status === 'success' && submission.response && (
|
||||
<StatusBanner
|
||||
status="success"
|
||||
message={`Submission successful! ID: ${submission.response.submissionId}. ${submission.response.message}`}
|
||||
onDismiss={resetSubmission}
|
||||
/>
|
||||
)}
|
||||
{submission.status === 'error' && submission.error && (
|
||||
<StatusBanner
|
||||
status="error"
|
||||
message={submission.error}
|
||||
onDismiss={resetSubmission}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* left part */}
|
||||
<div className="flex flex-col gap-6 md:max-w-[50%] w-full">
|
||||
{/* Topic */}
|
||||
<FieldWrapper
|
||||
label="Document Topic"
|
||||
htmlFor="topic"
|
||||
error={errors.topic}
|
||||
required
|
||||
>
|
||||
<TextInput
|
||||
id="topic"
|
||||
type="text"
|
||||
placeholder="e.g. The Impact of Artificial Intelligence on Education"
|
||||
value={form.topic}
|
||||
onChange={(e) => setTopic(e.target.value)}
|
||||
hasError={!!errors.topic}
|
||||
maxLength={200}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</FieldWrapper>
|
||||
|
||||
{/* Sender Full Name (read-only) */}
|
||||
<FieldWrapper label="Sender Full Name">
|
||||
<ReadonlyField
|
||||
value={senderFullName || 'Not logged in'}
|
||||
icon={<UserIcon />}
|
||||
/>
|
||||
</FieldWrapper>
|
||||
|
||||
{/* Certificate Option */}
|
||||
<div>
|
||||
<p className="text-sm font-semibold tracking-wide text-stone-700 uppercase mb-2">
|
||||
Certificate Option
|
||||
</p>
|
||||
<CertificateCheckbox
|
||||
checked={form.withCertificate}
|
||||
onChange={toggleCertificate}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* right part */}
|
||||
<div className="flex flex-col gap-6 md:max-w-[50%] w-full">
|
||||
{/* File Upload */}
|
||||
<FieldWrapper
|
||||
label="Document File"
|
||||
error={errors.file}
|
||||
required
|
||||
>
|
||||
<FileUploadField
|
||||
file={form.file}
|
||||
onFileChange={setFile}
|
||||
hasError={!!errors.file}
|
||||
/>
|
||||
</FieldWrapper>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t border-stone-100" />
|
||||
|
||||
{/* Submit */}
|
||||
<SubmitButton isLoading={isLoading} />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Footer note */}
|
||||
<p className="text-center text-xs text-stone-400 mt-5">
|
||||
Your document is processed securely and not stored beyond the
|
||||
analysis period.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* ── Card ──────────────────────────────────────────────────────── */}
|
||||
<div className="bg-white rounded-3xl shadow-xl shadow-stone-200/80 border border-stone-100 overflow-hidden">
|
||||
{/* Progress bar accent */}
|
||||
<div className="h-1 w-full bg-linear-to-r from-blue-400 via-blue-500 to-indigo-400" />
|
||||
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
noValidate
|
||||
className="p-7 flex md:flex-row flex-col gap-6"
|
||||
>
|
||||
{/* Status banners */}
|
||||
{submission.status === 'success' && submission.response && (
|
||||
<StatusBanner
|
||||
status="success"
|
||||
message={`Submission successful! ID: ${submission.response.submissionId}. ${submission.response.message}`}
|
||||
onDismiss={resetSubmission}
|
||||
/>
|
||||
)}
|
||||
{submission.status === 'error' && submission.error && (
|
||||
<StatusBanner
|
||||
status="error"
|
||||
message={submission.error}
|
||||
onDismiss={resetSubmission}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* left part */}
|
||||
<div className="flex flex-col gap-6 md:max-w-[50%] w-full">
|
||||
{/* Topic */}
|
||||
<FieldWrapper
|
||||
label="Document Topic"
|
||||
htmlFor="topic"
|
||||
error={errors.topic}
|
||||
required
|
||||
>
|
||||
<TextInput
|
||||
id="topic"
|
||||
type="text"
|
||||
placeholder="e.g. The Impact of Artificial Intelligence on Education"
|
||||
value={form.topic}
|
||||
onChange={(e) => setTopic(e.target.value)}
|
||||
hasError={!!errors.topic}
|
||||
maxLength={200}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</FieldWrapper>
|
||||
|
||||
{/* Sender Full Name (read-only) */}
|
||||
<FieldWrapper label="Sender Full Name">
|
||||
<ReadonlyField
|
||||
value={senderFullName || 'Not logged in'}
|
||||
icon={<UserIcon />}
|
||||
/>
|
||||
</FieldWrapper>
|
||||
|
||||
{/* Certificate Option */}
|
||||
<div>
|
||||
<p className="text-sm font-semibold tracking-wide text-stone-700 uppercase mb-2">
|
||||
Certificate Option
|
||||
</p>
|
||||
<CertificateCheckbox
|
||||
checked={form.withCertificate}
|
||||
onChange={toggleCertificate}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* right part */}
|
||||
<div className="flex flex-col gap-6 md:max-w-[50%] w-full">
|
||||
{/* File Upload */}
|
||||
<FieldWrapper label="Document File" error={errors.file} required>
|
||||
<FileUploadField
|
||||
file={form.file}
|
||||
onFileChange={setFile}
|
||||
hasError={!!errors.file}
|
||||
/>
|
||||
</FieldWrapper>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t border-stone-100" />
|
||||
|
||||
{/* Submit */}
|
||||
<SubmitButton isLoading={isLoading} />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Footer note */}
|
||||
<p className="text-center text-xs text-stone-400 mt-5">
|
||||
Your document is processed securely and not stored beyond the analysis
|
||||
period.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PaymentModal
|
||||
isOpen={isPaymentOpen}
|
||||
onClose={() => setIsPaymentOpen(false)}
|
||||
hasCertificate={form.withCertificate}
|
||||
onConfirmPayment={handleSubmit}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user