Davron/plagiat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

payme price calculation update on modal

Browse Source
This commit is contained in:
nabijonovdavronbek619@gmail.com
2026-04-06 10:38:17 +05:00
parent d70360841a
commit c01f3917d2
17 changed files with 73 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/widgets/detail/pageDetail.tsx
View File

@@ -7,7 +7,7 @@ import { useParams } from 'next/navigation';
import { links } from '@/shared/request/links';
import { apiRequest } from '@/shared/request/apiRequest';
import PaymentStatus from './paidStatus';
import Sertifikat from './ui/sertificate/sertifikat';
import Sertifikat from '@/features/modals/sertificateModal/sertifikat';
// ── Types ────────────────────────────────────────────────────────────────────

37
src/widgets/detail/ui/sertificate/modalField.tsx
View File

@@ -1,37 +0,0 @@
'use client';
import { type ReactNode } from 'react';
/* ── Field wrapper ─────────────────────────────────────────── */
interface FieldProps {
htmlFor: string;
icon: ReactNode;
label: string;
children: ReactNode;
}
export function Field({ htmlFor, icon, label, children }: FieldProps) {
return (
<div className="space-y-1.5">
<label
htmlFor={htmlFor}
className="flex items-center gap-1.5 text-[13px] font-medium text-slate-600"
>
{icon}
{label}
</label>
{children}
</div>
);
}
/* ── Shared input class ────────────────────────────────────── */
export const inputCls = `
w-full px-3.5 py-2.5 text-[14px] text-slate-800
bg-slate-50 border border-slate-200 rounded-xl
placeholder:text-slate-400
focus:outline-none focus:ring-2 focus:ring-emerald-400/40 focus:border-emerald-400
hover:border-slate-300
transition-all duration-150
disabled:opacity-60 disabled:cursor-not-allowed
`.trim();

219
src/widgets/detail/ui/sertificate/sertificateModal.tsx
View File

@@ -1,219 +0,0 @@
'use client';
import {
X,
Award,
User,
FileText,
BookOpen,
Layers,
Loader2,
CheckCircle2,
} from 'lucide-react';
import { useCertificateModal } from './useSertificateModal';
import { Field, inputCls } from './modalField';
import { DOCUMENT_TYPES, SertificateModalProps } from './types';
export default function SertificateModal({
document_id,
open,
setOpen,
}: SertificateModalProps) {
const {
form,
updateField,
loading,
success,
visible,
isFormValid,
inputRef,
handleSubmit,
handleKeyDown,
handleBackdropClick,
} = useCertificateModal({ document_id, open, setOpen });
if (!visible) return null;
return (
<div
className={`fixed inset-0 z-50 flex items-center justify-center px-4
transition-all duration-300 ease-out
${open ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
onClick={handleBackdropClick}
onKeyDown={handleKeyDown}
role="dialog"
aria-modal="true"
aria-label="Sertifikat yaratish"
>
{/* Backdrop */}
<div
onClick={setOpen}
className={`absolute inset-0 bg-slate-900/50 backdrop-blur-[2px]
transition-opacity duration-300
${open ? 'opacity-100' : 'opacity-0'}`}
/>
{/* Modal panel */}
<div
className={`relative w-full max-w-md bg-white rounded-2xl shadow-2xl
border border-slate-100
transition-all duration-300 ease-out
${
open
? 'opacity-100 scale-100 translate-y-0'
: 'opacity-0 scale-95 translate-y-4'
}`}
>
{/* Top accent bar */}
<div className="absolute top-0 left-6 right-6 h-0.5 rounded-b-full bg-linear-to-r from-emerald-400 via-teal-400 to-emerald-500 opacity-80" />
{/* Header */}
<div className="flex items-center justify-between px-6 pt-7 pb-5">
<div className="flex items-center gap-3">
<div className="flex items-center justify-center w-9 h-9 rounded-xl bg-emerald-50 border border-emerald-100">
<Award className="w-5 h-5 text-emerald-600" strokeWidth={1.8} />
</div>
<h2 className="text-[17px] font-semibold text-slate-800 tracking-tight">
Sertifikat yaratish
</h2>
</div>
<button
onClick={setOpen}
disabled={loading}
className="flex items-center justify-center w-8 h-8 rounded-lg
text-slate-400 hover:text-slate-600 hover:bg-slate-100
transition-all duration-150 disabled:opacity-40 disabled:cursor-not-allowed"
aria-label="Yopish"
>
<X className="w-4 h-4" strokeWidth={2.2} />
</button>
</div>
{/* Divider */}
<div className="mx-6 h-px bg-slate-100" />
{/* Body */}
<div className="px-6 py-5 space-y-4">
{/* Full name */}
<Field
htmlFor="fullname"
icon={
<User className="w-3.5 h-3.5 text-slate-400" strokeWidth={2} />
}
label="Muallifning to'liq ismi"
>
<input
id="fullname"
ref={inputRef}
type="text"
value={form.fullname}
onChange={(e) => updateField('fullname', e.target.value)}
disabled={loading || success}
placeholder="Ismingizni kiriting..."
className={inputCls}
/>
</Field>
{/* Document theme */}
<Field
htmlFor="document_theme"
icon={
<BookOpen
className="w-3.5 h-3.5 text-slate-400"
strokeWidth={2}
/>
}
label="Hujjat mavzusi"
>
<input
id="document_theme"
type="text"
value={form.document_theme}
onChange={(e) => updateField('document_theme', e.target.value)}
disabled={loading || success}
placeholder="Mavzuni kiriting..."
className={inputCls}
/>
</Field>
{/* Document type */}
<Field
htmlFor="document_type"
icon={
<Layers className="w-3.5 h-3.5 text-slate-400" strokeWidth={2} />
}
label="Hujjat turi"
>
<select
id="document_type"
value={form.document_type}
onChange={(e) =>
updateField(
'document_type',
e.target.value as typeof form.document_type,
)
}
disabled={loading || success}
className={`${inputCls} cursor-pointer`}
>
<option value="" disabled>
Hujjat turini tanlang...
</option>
{DOCUMENT_TYPES.map((type) => (
<option key={type.value} value={type.value}>
{type.label}
</option>
))}
</select>
</Field>
{/* Document ID (read-only) */}
<div className="flex items-center gap-2 px-3.5 py-2.5 rounded-xl bg-slate-50 border border-slate-100">
<FileText
className="w-4 h-4 text-slate-400 shrink-0"
strokeWidth={1.8}
/>
<div className="flex items-center justify-between w-full">
<span className="text-[13px] text-slate-500">Hujjat ID</span>
<span className="text-[13px] font-mono font-medium text-slate-700">
#{document_id}
</span>
</div>
</div>
</div>
{/* Footer */}
<div className="px-6 pb-6">
<button
onClick={handleSubmit}
disabled={loading || !isFormValid || success}
className={`w-full flex items-center justify-center gap-2
py-2.5 rounded-xl text-[14px] font-semibold
transition-all duration-200
${
success
? 'bg-emerald-500 text-white scale-[0.98]'
: 'bg-emerald-500 hover:bg-emerald-600 active:scale-[0.98] text-white shadow-sm shadow-emerald-200'
}
disabled:opacity-60 disabled:cursor-not-allowed disabled:active:scale-100`}
>
{loading ? (
<>
<Loader2 className="w-4 h-4 animate-spin" strokeWidth={2.5} />
<span>Yaratilmoqda...</span>
</>
) : success ? (
<>
<CheckCircle2 className="w-4 h-4" strokeWidth={2.5} />
<span>Sertifikat yaratildi!</span>
</>
) : (
<span>Sertifikat yaratish</span>
)}
</button>
</div>
</div>
</div>
);
}

79
src/widgets/detail/ui/sertificate/sertifikat.tsx
View File

@@ -1,79 +0,0 @@
'use client';
import { useTranslations } from 'next-intl';
import { FileDown, Loader2 } from 'lucide-react';
import React, { useEffect, useState } from 'react';
import SertificateModal from './sertificateModal';
// const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
// const baseUrl = 'https://api.anti-plagiat.uz/api/v1';
export default function Sertifikat({ document_id }: { document_id: number }) {
const t = useTranslations();
const [loading, setLoading] = useState(false);
const [openModal, setOpenModal] = useState(false);
useEffect(() => {
setLoading(false);
console.log(loading);
}, []);
// const handleClick = async () => {
// setLoading(true);
// try {
// const url = `${baseUrl}/shared/certificate/${document_id}/pdf/`;
// const res = await fetch(url);
// const blob = await res.blob();
// const objectUrl = URL.createObjectURL(blob);
// // ✅ window.open o'rniga <a> tag bilan download
// const a = document.createElement('a');
// a.href = objectUrl;
// a.download = `certificate-${document_id}.pdf`;
// a.click();
// URL.revokeObjectURL(objectUrl);
// } finally {
// setLoading(false);
// }
// };
return (
<>
<button
onClick={() => {
setOpenModal(true);
}}
disabled={loading}
className="
group relative inline-flex items-center gap-2.5
px-5 py-2.5 rounded-xl
bg-linear-to-br from-amber-400 to-amber-500
hover:from-amber-500 hover:to-amber-600
disabled:from-amber-300 disabled:to-amber-400
text-white font-semibold text-sm
shadow-md shadow-amber-200
hover:shadow-lg hover:shadow-amber-300
transition-all duration-200
active:scale-[0.97]
disabled:cursor-not-allowed disabled:scale-100
"
>
{loading ? (
<Loader2 size={16} className="animate-spin shrink-0" />
) : (
<FileDown
size={16}
className="shrink-0 transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5"
/>
)}
{loading ? '...' : t('upload')}
</button>
<SertificateModal
document_id={document_id}
open={openModal}
setOpen={() => {
setOpenModal(false);
}}
/>
</>
);
}

23
src/widgets/detail/ui/sertificate/types.ts
View File

@@ -1,23 +0,0 @@
export const DOCUMENT_TYPES = [
{ value: 'metodik_ishlanma', label: 'Metodik ishlanma' },
{ value: 'ilmiy_maqola', label: 'Ilmiy maqola' },
{ value: 'bmi', label: 'BMI' },
{ value: 'magistrlik', label: 'Magistrlik' },
{ value: 'kurs_ishi', label: 'Kurs ishi' },
{ value: 'boshqa', label: 'Boshqa' },
] as const;
export type DocumentTypeValue = (typeof DOCUMENT_TYPES)[number]['value'];
export interface CertificateFormData {
fullname: string;
document_theme: string;
document_type: DocumentTypeValue | '';
document_id: number;
}
export interface SertificateModalProps {
document_id: number;
open: boolean;
setOpen: () => void;
}

112
src/widgets/detail/ui/sertificate/useSertificateModal.ts
View File

@@ -1,112 +0,0 @@
import { useState, useEffect, useRef } from 'react';
import { CertificateFormData } from './types';
interface UseCertificateModalProps {
document_id: number;
open: boolean;
setOpen: () => void;
}
export function useCertificateModal({
document_id,
open,
setOpen,
}: UseCertificateModalProps) {
const [form, setForm] = useState<CertificateFormData>({
fullname: '',
document_theme: '',
document_type: '',
document_id,
});
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [visible, setVisible] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (open) {
setVisible(true);
setSuccess(false);
setForm((prev) => ({ ...prev, document_id }));
setTimeout(() => inputRef.current?.focus(), 300);
const data = localStorage.getItem('user');
if (data) {
const user = JSON.parse(data);
setForm((prev) => ({
...prev,
fullname: `${user.name} ${user.surname}`,
}));
}
} else {
setTimeout(() => setVisible(false), 300);
}
}, [open, document_id]);
const updateField = <K extends keyof CertificateFormData>(
field: K,
value: CertificateFormData[K],
) => setForm((prev) => ({ ...prev, [field]: value }));
const isFormValid =
!!form.fullname.trim() &&
!!form.document_theme.trim() &&
!!form.document_type;
/** Payload ready to send to backend */
const buildPayload = (): CertificateFormData => ({ ...form });
const handleSubmit = async () => {
if (!isFormValid || loading) return;
setLoading(true);
try {
const payload = buildPayload();
const response = await fetch(`/api/certificates`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
});
if (!response.ok) throw new Error('Failed');
setSuccess(true);
setTimeout(() => {
setOpen();
setSuccess(false);
}, 1800);
} catch {
// Demo mode: simulate success
setSuccess(true);
setTimeout(() => {
setOpen();
setSuccess(false);
}, 1800);
} finally {
setLoading(false);
}
};
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Escape') setOpen();
if (e.key === 'Enter') handleSubmit();
};
const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
if (e.target === e.currentTarget) setOpen();
};
return {
form,
updateField,
loading,
success,
visible,
isFormValid,
inputRef,
handleSubmit,
handleKeyDown,
handleBackdropClick,
};
}

11
src/widgets/fileUpload/ui/Plagiraismcheckform.tsx
View File

@@ -10,9 +10,9 @@ import {
StatusBanner,
} from './Plagiraismui';
import { usePlagiarismForm } from '../lib/usePlagiraism';
import { PaymentModal } from '@/widgets/paymentModal/ui/Paymentmodal';
import { useTranslations } from 'next-intl';
import { DOCUMENT_TYPES } from '@/widgets/detail/ui/sertificate/types';
import { DOCUMENT_TYPES } from '@/features/modals/sertificateModal/types';
import { PaymentModal } from '@/features/modals/paymentModal/ui/Paymentmodal';
const inputCls = `
w-full px-3.5 py-3.5 text-[14px] text-slate-800
@@ -218,7 +218,12 @@ export function PlagiarismCheckForm() {
<PaymentModal
isOpen={isPaymentOpen}
onClose={() => setIsPaymentOpen(false)}
hasCertificate={form.certificate}
price={{
service_fee: 41200,
discount: 5200,
total_price: 36000,
currency: 'UZS',
}}
onConfirmPayment={handleSubmit}
isLoading={isLoading}
/>

3
src/widgets/history/lib/types.ts
View File

@@ -1,5 +1,7 @@
// ─── Domain Types ──────────────────────────────────────────────────────────────
import { PriceCalculate } from '@/features/modals/paymentModal/lib/types';
export type CheckResult = 'clean' | 'plagiarism_found' | 'pending' | 'failed';
export interface DocumentData {
@@ -13,6 +15,7 @@ export interface DocumentData {
results: [];
state: 'paid' | 'unpaid';
order_id: number;
price_calculation?: PriceCalculate;
}
export interface PlagiarismCheckDetail extends DocumentData {

9
src/widgets/history/ui/historyTableRow.tsx
View File

@@ -6,11 +6,11 @@ import { formatDate } from '../lib/utils';
import { useRouter } from '@/shared/config/i18n/navigation';
import { useUserPlagiatStore } from '@/shared/zustand/user';
import PaymentStatus from '@/widgets/detail/paidStatus';
import { PaymentModal } from '@/widgets/paymentModal/ui/Paymentmodal';
import { useMutation } from '@tanstack/react-query';
import { apiRequest } from '@/shared/request/apiRequest';
import { links } from '@/shared/request/links';
import { toast } from 'react-toastify';
import { PaymentModal } from '@/features/modals/paymentModal/ui/Paymentmodal';
export const HistoryTableRow: React.FC<HistoryTableRowProps> = ({ item }) => {
const router = useRouter();
@@ -160,7 +160,12 @@ export const HistoryTableRow: React.FC<HistoryTableRowProps> = ({ item }) => {
<PaymentModal
isOpen={isPaymentOpen}
onClose={() => setIsPaymentOpen(false)}
hasCertificate={false}
price={{
service_fee: 41200,
discount: 5200,
total_price: 36000,
currency: 'UZS',
}}
onConfirmPayment={() => {
handleSubmit({ document_id: Number(item.order_id) });
}}

22
src/widgets/paymentModal/lib/constant.ts
View File

@@ -1,22 +0,0 @@
// ─── Pricing Constants ─────────────────────────────────────────────────────────
export const PRICING = {
SERVICE_FEE: 45_000,
CERTIFICATE_FEE: 15_000,
CURRENCY: 'UZS',
// Payme works in tiyin (1 UZS = 100 tiyin)
TIYIN_MULTIPLIER: 100,
} as const;
// ─── Payme Config ──────────────────────────────────────────────────────────────
export const PAYME_CONFIG = {
MERCHANT_ID: process.env.NEXT_PUBLIC_PAYME_MERCHANT_ID ?? 'your_merchant_id',
BASE_URL: 'https://checkout.paycom.uz',
// In development, point to your own backend
API_ENDPOINT: '/api/payments/payme/create',
RETURN_URL:
typeof window !== 'undefined'
? `${window.location.origin}/payment/success`
: 'https://yourapp.uz/payment/success',
} as const;

48
src/widgets/paymentModal/lib/types.ts
View File

@@ -1,48 +0,0 @@
// ─── Domain Types ──────────────────────────────────────────────────────────────
export interface ServicePricing {
serviceFee: number;
certificateFee: number;
currency: string;
}
export interface OrderSummary {
hasCertificate: boolean;
pricing: ServicePricing;
}
export interface PaymePaymentRequest {
amount: number; // in tiyin (1 UZS = 100 tiyin)
orderId: string;
description: string;
returnUrl: string;
}
export interface PaymePaymentResponse {
redirectUrl: string;
transactionId: string;
}
export type PaymentStatus = 'idle' | 'loading' | 'success' | 'error';
// ─── Component Props ───────────────────────────────────────────────────────────
export interface PaymentModalProps {
isOpen: boolean;
onClose: () => void;
hasCertificate: boolean;
onConfirmPayment: () => void;
isLoading: boolean;
}
export interface PriceSummaryProps {
hasCertificate: boolean;
pricing: ServicePricing;
}
export interface PaymeButtonProps {
amount: number;
orderId: string;
onSuccess?: (response: PaymePaymentResponse) => void;
onError?: (error: Error) => void;
}

71
src/widgets/paymentModal/lib/usePayment.ts
View File

@@ -1,71 +0,0 @@
'use client';
import { useState, useCallback } from 'react';
import { PaymentStatus, PaymePaymentResponse } from './types';
import {
calculateTotal,
createPaymePayment,
generateOrderId,
redirectToPayme,
toTiyin,
} from './utils';
import { PAYME_CONFIG } from './constant';
interface UsePaymentOptions {
hasCertificate: boolean;
onSuccess?: (response: PaymePaymentResponse) => void;
onError?: (error: Error) => void;
}
interface UsePaymentReturn {
status: PaymentStatus;
error: string | null;
totalAmount: number;
handlePaymePayment: () => Promise<void>;
resetError: () => void;
}
export const usePayment = ({
hasCertificate,
onSuccess,
onError,
}: UsePaymentOptions): UsePaymentReturn => {
const [status, setStatus] = useState<PaymentStatus>('idle');
const [error, setError] = useState<string | null>(null);
const totalAmount = calculateTotal(hasCertificate);
const handlePaymePayment = useCallback(async () => {
setStatus('loading');
setError(null);
const orderId = generateOrderId();
try {
const response = await createPaymePayment({
amount: toTiyin(totalAmount),
orderId,
description: `Service fee${hasCertificate ? ' + Certificate' : ''}`,
returnUrl: PAYME_CONFIG.RETURN_URL,
});
setStatus('success');
onSuccess?.(response);
redirectToPayme(response.redirectUrl);
} catch (err) {
const paymentError =
err instanceof Error
? err
: new Error('Payment failed. Please try again.');
setStatus('error');
setError(paymentError.message);
onError?.(paymentError);
}
}, [totalAmount, hasCertificate, onSuccess, onError]);
const resetError = useCallback(() => {
setError(null);
setStatus('idle');
}, []);
return { status, error, totalAmount, handlePaymePayment, resetError };
};

71
src/widgets/paymentModal/lib/utils.ts
View File

@@ -1,71 +0,0 @@
// ─── Pricing Utilities ─────────────────────────────────────────────────────────
import { PAYME_CONFIG, PRICING } from './constant';
import {
PaymePaymentRequest,
PaymePaymentResponse,
ServicePricing,
} from './types';
export const getPricing = (): ServicePricing => ({
serviceFee: PRICING.SERVICE_FEE,
certificateFee: PRICING.CERTIFICATE_FEE,
currency: PRICING.CURRENCY,
});
export const calculateTotal = (hasCertificate: boolean): number => {
const base = PRICING.SERVICE_FEE;
return hasCertificate ? base + PRICING.CERTIFICATE_FEE : base;
};
export const toTiyin = (uzs: number): number => uzs * PRICING.TIYIN_MULTIPLIER;
export const formatPrice = (amount: number, currency: string): string =>
`${amount.toLocaleString('uz-UZ')} ${currency}`;
// ─── Order ID Generator ────────────────────────────────────────────────────────
export const generateOrderId = (): string => {
const timestamp = Date.now();
const random = Math.random().toString(36).slice(2, 8).toUpperCase();
return `ORDER-${timestamp}-${random}`;
};
// ─── Payme API ─────────────────────────────────────────────────────────────────
/**
* Sends payment details to the backend, which creates a Payme transaction
* and returns a redirect URL to the Payme checkout page.
*/
export const createPaymePayment = async (
request: PaymePaymentRequest,
): Promise<PaymePaymentResponse> => {
const response = await fetch(PAYME_CONFIG.API_ENDPOINT, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
amount: request.amount, // in tiyin
order_id: request.orderId,
description: request.description,
return_url: request.returnUrl,
}),
});
if (!response.ok) {
const errorBody = await response.json().catch(() => ({}));
throw new Error(
(errorBody as { message?: string }).message ??
`Payment request failed with status ${response.status}`,
);
}
const data = (await response.json()) as PaymePaymentResponse;
return data;
};
/**
* Redirects the user to the Payme checkout page.
*/
export const redirectToPayme = (redirectUrl: string): void => {
window.location.href = redirectUrl;
};

101
src/widgets/paymentModal/ui/Paymebutton.tsx
View File

@@ -1,101 +0,0 @@
import React from 'react';
import { PaymentStatus } from '../lib/types';
import { useTranslations } from 'next-intl';
// ─── Payme Logo SVG ────────────────────────────────────────────────────────────
const PaymeLogo: React.FC = () => (
<svg
width="72"
height="18"
viewBox="0 0 72 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-label="Payme"
>
<text
x="0"
y="14"
fontFamily="'Arial Black', sans-serif"
fontWeight="900"
fontSize="16"
fill="white"
letterSpacing="-0.5"
>
Payme
</text>
</svg>
);
// ─── Spinner ───────────────────────────────────────────────────────────────────
const Spinner: React.FC = () => (
<svg
className="animate-spin h-5 w-5 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
aria-hidden="true"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
/>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
/>
</svg>
);
// ─── PaymeButton ───────────────────────────────────────────────────────────────
interface PaymeButtonProps {
onClick: () => void;
status: PaymentStatus;
}
export const PaymeButton: React.FC<PaymeButtonProps> = ({
onClick,
status,
}) => {
const isLoading = status === 'loading';
const t = useTranslations('Payment');
return (
<button
onClick={onClick}
disabled={isLoading}
aria-busy={isLoading}
aria-label={t('payButton')}
className={`
w-full flex items-center justify-center gap-3
rounded-xl px-6 py-4
font-semibold text-white text-sm tracking-wide
transition-all duration-200 ease-out
focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500
${
isLoading
? 'bg-blue-400 cursor-not-allowed opacity-80'
: 'bg-[#00AAFF] hover:bg-[#009AEE] active:scale-[0.98] shadow-md hover:shadow-lg'
}
`}
>
{isLoading ? (
<>
<Spinner />
<span>{t('connecting')}</span>
</>
) : (
<>
<PaymeLogo />
</>
)}
</button>
);
};

210
src/widgets/paymentModal/ui/Paymentmodal.tsx
View File

@@ -1,210 +0,0 @@
'use client';
import React, { useEffect, useRef } from 'react';
import { PaymentModalProps } from '../lib/types';
import { getPricing } from '../lib/utils';
import { PriceSummary } from './Pricesummary';
import { PaymeButton } from './Paymebutton';
import { useTranslations } from 'next-intl';
// ─── Close Button ──────────────────────────────────────────────────────────────
const CloseButton: React.FC<{ onClick: () => void }> = ({ onClick }) => (
<button
onClick={onClick}
aria-label="Close payment modal"
className="
absolute top-4 right-4
p-2 rounded-lg text-slate-400
hover:text-slate-700 hover:bg-slate-100
transition-colors duration-150
focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-300
"
>
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
strokeLinecap="round"
>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</button>
);
// ─── Error Banner ──────────────────────────────────────────────────────────────
// const ErrorBanner: React.FC<{ message: string; onDismiss: () => void }> = ({
// message,
// onDismiss,
// }) => (
// <div
// role="alert"
// className="flex items-start gap-3 rounded-lg bg-red-50 border border-red-200 px-4 py-3"
// >
// <svg
// className="shrink-0 mt-0.5 text-red-500"
// width="16"
// height="16"
// viewBox="0 0 24 24"
// fill="currentColor"
// >
// <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
// </svg>
// <p className="text-sm text-red-700 flex-1">{message}</p>
// <button
// onClick={onDismiss}
// aria-label="Dismiss error"
// className="text-red-400 hover:text-red-600 transition-colors"
// >
// <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
// <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
// </svg>
// </button>
// </div>
// );
// ─── Security Badge ────────────────────────────────────────────────────────────
const SecurityBadge: React.FC<{ securityText: string }> = ({
securityText,
}) => (
<div className="flex items-center justify-center gap-1.5 text-xs text-slate-400">
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z" />
</svg>
<span>{securityText}</span>
</div>
);
// ─── PaymentModal ──────────────────────────────────────────────────────────────
export const PaymentModal: React.FC<PaymentModalProps> = ({
isOpen,
onClose,
hasCertificate,
onConfirmPayment,
isLoading,
}) => {
const dialogRef = useRef<HTMLDivElement>(null);
const pricing = getPricing();
const status = isLoading ? 'loading' : 'idle';
const t = useTranslations('Payment');
// ── Close on Escape ──────────────────────────────────────────────────────────
useEffect(() => {
if (!isOpen) return;
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape') onClose();
};
document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
}, [isOpen, onClose]);
// ── Lock body scroll ─────────────────────────────────────────────────────────
useEffect(() => {
if (isOpen) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
return () => {
document.body.style.overflow = '';
};
}, [isOpen]);
// ── Focus trap ───────────────────────────────────────────────────────────────
useEffect(() => {
if (isOpen) {
dialogRef.current?.focus();
}
}, [isOpen]);
if (!isOpen) return null;
return (
/* Backdrop */
<div
className="fixed inset-0 z-40 flex items-center justify-center p-4"
aria-modal="true"
role="dialog"
aria-labelledby="payment-modal-title"
>
{/* Dimmed overlay */}
<div
className="absolute inset-0 bg-black/40 backdrop-blur-sm"
onClick={onClose}
aria-hidden="true"
/>
{/* Modal card */}
<div
ref={dialogRef}
tabIndex={-1}
className="
relative z-10 w-full max-w-md
bg-white rounded-2xl shadow-2xl
outline-none
animate-in fade-in zoom-in-95 duration-200
"
>
{/* Header */}
<div className="px-6 pt-6 pb-5 border-b border-slate-100">
<CloseButton onClick={onClose} />
<div className="pr-8">
<h2
id="payment-modal-title"
className="text-lg font-semibold text-slate-900"
>
{t('title')}
</h2>
<p className="mt-0.5 text-sm text-slate-500">{t('description')}</p>
</div>
</div>
{/* Body */}
<div className="px-6 py-5 space-y-5">
{/* Order details */}
<div>
<h3 className="text-xs font-semibold uppercase tracking-widest text-slate-400 mb-3">
{t('orderSummary')}
</h3>
<PriceSummary hasCertificate={hasCertificate} pricing={pricing} />
</div>
{/* Certificate badge */}
{hasCertificate && (
<div className="flex items-center gap-2 text-sm text-emerald-700 bg-emerald-50 border border-emerald-100 rounded-lg px-3.5 py-2.5">
<svg
width="15"
height="15"
viewBox="0 0 24 24"
fill="currentColor"
className="shrink-0"
>
<path d="M12 1l2.753 5.527 6.247.907-4.5 4.385 1.063 6.181L12 15.027l-5.563 2.973 1.063-6.181L3 7.434l6.247-.907z" />
</svg>
<span>{t('certificateIncluded')}</span>
</div>
)}
{/* Payment method label */}
<div>
<h3 className="text-xs font-semibold uppercase tracking-widest text-slate-400 mb-3">
{t('paymentMethod')}
</h3>
<PaymeButton onClick={onConfirmPayment} status={status} />
</div>
{/* Security note */}
<SecurityBadge securityText={t('security')} />
</div>
</div>
</div>
);
};

82
src/widgets/paymentModal/ui/Pricesummary.tsx
View File

@@ -1,82 +0,0 @@
'use client';
import React from 'react';
import { formatPrice } from '../lib/utils';
import { PriceSummaryProps } from '../lib/types';
import { useTranslations } from 'next-intl';
// ─── Price Row ─────────────────────────────────────────────────────────────────
interface PriceRowProps {
label: string;
amount: number;
currency: 'UZS' | string;
highlight?: boolean;
}
const PriceRow: React.FC<PriceRowProps> = ({
label,
amount,
currency,
highlight,
}) => (
<div
className={`flex items-center justify-between py-3 ${
highlight ? 'border-t border-slate-200 mt-1 pt-4' : ''
}`}
>
<span
className={
highlight
? 'text-base font-semibold text-slate-800'
: 'text-sm text-slate-500'
}
>
{label}
</span>
<span
className={
highlight
? 'text-lg font-bold text-slate-900'
: 'text-sm font-medium text-slate-700'
}
>
{formatPrice(amount, currency)}
</span>
</div>
);
// ─── Price Summary ─────────────────────────────────────────────────────────────
export const PriceSummary: React.FC<PriceSummaryProps> = ({
hasCertificate,
pricing,
}) => {
console.log(hasCertificate);
const total = 41200;
const t = useTranslations('Payment');
return (
<div className="rounded-xl bg-slate-50 border border-slate-100 px-5 py-2 space-y-0">
<PriceRow
label={t('serviceFee')}
amount={41200}
currency={pricing.currency}
/>
{/* {hasCertificate && (
<PriceRow
label={t('certificateLabel')}
amount={pricing.certificateFee}
currency={pricing.currency}
/>
)} */}
<PriceRow
label={t('total')}
amount={total}
currency={pricing.currency}
highlight
/>
</div>
);
};