BivekiGroup/protekauto-frontend
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Bivekich
2025-06-26 06:59:59 +03:00
commit d44874775c
450 changed files with 76635 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
src/pages/payment/cancelled.tsx Normal file
View File

@ -0,0 +1,170 @@
import React, { useEffect, useState } from "react";
import Head from "next/head";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { useRouter } from "next/router";
export default function PaymentCancelled() {
const router = useRouter();
const [paymentId, setPaymentId] = useState<string | null>(null);
const [orderId, setOrderId] = useState<string | null>(null);
useEffect(() => {
// Получаем параметры из URL
const { payment_id, order_id } = router.query;
if (payment_id) {
setPaymentId(payment_id as string);
}
if (order_id) {
setOrderId(order_id as string);
}
}, [router.query]);
const handleReturnToCart = () => {
router.push('/cart');
};
const handleContinueShopping = () => {
router.push('/catalog');
};
return (
<>
<Head>
<title>Оплата отменена - Protekauto</title>
<meta name="description" content="Оплата заказа была отменена" />
<link href="https://fonts.googleapis.com" rel="preconnect" />
<link href="https://fonts.gstatic.com" rel="preconnect" crossOrigin="anonymous" />
<link href="/images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/images/webclip.png" rel="apple-touch-icon" />
</Head>
<Header />
<div className="w-layout-blockcontainer container info w-container">
<div className="w-layout-vflex flex-block-9">
<div className="w-layout-hflex flex-block-7">
<a href="/" className="link-block w-inline-block">
<div>Главная</div>
</a>
<div className="text-block-3">→</div>
<div className="text-block-3">Оплата отменена</div>
</div>
</div>
</div>
<section className="main">
<div className="w-layout-blockcontainer container w-container">
<div className="w-layout-vflex" style={{ alignItems: 'center', textAlign: 'center', padding: '4rem 0' }}>
{/* Иконка отмены */}
<div style={{
width: 80,
height: 80,
borderRadius: '50%',
backgroundColor: '#F59E0B',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: '2rem'
}}>
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 18L18 6M6 6L18 18" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</div>
{/* Заголовок */}
<h1 className="heading" style={{ marginBottom: '1rem', color: '#F59E0B' }}>
Оплата отменена
</h1>
{/* Описание */}
<div className="text-block-4" style={{ marginBottom: '2rem', maxWidth: 600 }}>
Вы отменили процесс оплаты. Ваш заказ сохранен в корзине,
и вы можете завершить оплату в любое время.
</div>
{/* Информация о заказе */}
{(paymentId || orderId) && (
<div style={{
backgroundColor: '#FFFBEB',
border: '1px solid #FDE68A',
borderRadius: 8,
padding: '1.5rem',
marginBottom: '2rem',
maxWidth: 400,
width: '100%'
}}>
<h3 style={{ margin: '0 0 1rem 0', fontSize: '1.1rem', fontWeight: 600, color: '#92400E' }}>
Информация о заказе
</h3>
{orderId && (
<div style={{ marginBottom: '0.5rem' }}>
<strong>Номер заказа:</strong> {orderId}
</div>
)}
{paymentId && (
<div>
<strong>ID платежа:</strong> {paymentId}
</div>
)}
</div>
)}
{/* Кнопки действий */}
<div className="w-layout-hflex" style={{ gap: '1rem', flexWrap: 'wrap', justifyContent: 'center' }}>
<button
className="submit-button fill w-button"
onClick={handleReturnToCart}
style={{ minWidth: 200 }}
>
Вернуться в корзину
</button>
<button
className="submit-button w-button"
onClick={handleContinueShopping}
style={{
minWidth: 200,
backgroundColor: 'transparent',
border: '2px solid var(--_button---primary)',
color: 'var(--_button---primary)'
}}
>
Продолжить покупки
</button>
</div>
{/* Дополнительная информация */}
<div style={{
marginTop: '3rem',
padding: '1.5rem',
backgroundColor: '#F0F9FF',
border: '1px solid #BAE6FD',
borderRadius: 8,
maxWidth: 600,
width: '100%'
}}>
<h4 style={{ margin: '0 0 1rem 0', color: '#0C4A6E' }}>
Что произошло?
</h4>
<div style={{ color: '#0369A1', lineHeight: 1.6 }}>
Процесс оплаты был прерван по вашему запросу. Это может произойти, если вы:
<ul style={{ margin: '0.5rem 0 0 0', paddingLeft: '1.5rem' }}>
<li>Нажали кнопку "Отмена" на странице оплаты</li>
<li>Закрыли окно браузера во время оплаты</li>
<li>Вернулись на предыдущую страницу</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<Footer />
</>
);
}

200
src/pages/payment/failed.tsx Normal file
View File

@ -0,0 +1,200 @@
import React, { useEffect, useState } from "react";
import Head from "next/head";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { useRouter } from "next/router";
export default function PaymentFailed() {
const router = useRouter();
const [paymentId, setPaymentId] = useState<string | null>(null);
const [orderId, setOrderId] = useState<string | null>(null);
const [errorMessage, setErrorMessage] = useState<string>("");
useEffect(() => {
// Получаем параметры из URL
const { payment_id, order_id, error } = router.query;
if (payment_id) {
setPaymentId(payment_id as string);
}
if (order_id) {
setOrderId(order_id as string);
}
if (error) {
setErrorMessage(error as string);
}
}, [router.query]);
const handleRetryPayment = () => {
// Возвращаемся в корзину для повторной попытки
router.push('/cart');
};
const handleContactSupport = () => {
router.push('/contacts');
};
const handleContinueShopping = () => {
router.push('/catalog');
};
return (
<>
<Head>
<title>Ошибка оплаты - Protekauto</title>
<meta name="description" content="Произошла ошибка при оплате заказа" />
<link href="https://fonts.googleapis.com" rel="preconnect" />
<link href="https://fonts.gstatic.com" rel="preconnect" crossOrigin="anonymous" />
<link href="/images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/images/webclip.png" rel="apple-touch-icon" />
</Head>
<Header />
<div className="w-layout-blockcontainer container info w-container">
<div className="w-layout-vflex flex-block-9">
<div className="w-layout-hflex flex-block-7">
<a href="/" className="link-block w-inline-block">
<div>Главная</div>
</a>
<div className="text-block-3">→</div>
<div className="text-block-3">Ошибка оплаты</div>
</div>
</div>
</div>
<section className="main">
<div className="w-layout-blockcontainer container w-container">
<div className="w-layout-vflex" style={{ alignItems: 'center', textAlign: 'center', padding: '4rem 0' }}>
{/* Иконка ошибки */}
<div style={{
width: 80,
height: 80,
borderRadius: '50%',
backgroundColor: '#EF4444',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: '2rem'
}}>
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 9V13M12 17H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</div>
{/* Заголовок */}
<h1 className="heading" style={{ marginBottom: '1rem', color: '#EF4444' }}>
Ошибка оплаты
</h1>
{/* Описание */}
<div className="text-block-4" style={{ marginBottom: '2rem', maxWidth: 600 }}>
К сожалению, произошла ошибка при обработке платежа.
Ваш заказ не был оплачен, но вы можете попробовать еще раз.
</div>
{/* Информация об ошибке */}
{(paymentId || orderId || errorMessage) && (
<div style={{
backgroundColor: '#FEF2F2',
border: '1px solid #FECACA',
borderRadius: 8,
padding: '1.5rem',
marginBottom: '2rem',
maxWidth: 400,
width: '100%'
}}>
<h3 style={{ margin: '0 0 1rem 0', fontSize: '1.1rem', fontWeight: 600, color: '#DC2626' }}>
Детали ошибки
</h3>
{orderId && (
<div style={{ marginBottom: '0.5rem' }}>
<strong>Номер заказа:</strong> {orderId}
</div>
)}
{paymentId && (
<div style={{ marginBottom: '0.5rem' }}>
<strong>ID платежа:</strong> {paymentId}
</div>
)}
{errorMessage && (
<div style={{ color: '#DC2626' }}>
<strong>Ошибка:</strong> {errorMessage}
</div>
)}
</div>
)}
{/* Кнопки действий */}
<div className="w-layout-hflex" style={{ gap: '1rem', flexWrap: 'wrap', justifyContent: 'center' }}>
<button
className="submit-button fill w-button"
onClick={handleRetryPayment}
style={{ minWidth: 200 }}
>
Попробовать снова
</button>
<button
className="submit-button w-button"
onClick={handleContactSupport}
style={{
minWidth: 200,
backgroundColor: 'transparent',
border: '2px solid var(--_button---primary)',
color: 'var(--_button---primary)'
}}
>
Связаться с поддержкой
</button>
</div>
<div style={{ marginTop: '1rem' }}>
<button
onClick={handleContinueShopping}
style={{
background: 'none',
border: 'none',
color: '#6B7280',
textDecoration: 'underline',
cursor: 'pointer'
}}
>
Продолжить покупки
</button>
</div>
{/* Дополнительная информация */}
<div style={{
marginTop: '3rem',
padding: '1.5rem',
backgroundColor: '#F3F4F6',
border: '1px solid #D1D5DB',
borderRadius: 8,
maxWidth: 600,
width: '100%'
}}>
<h4 style={{ margin: '0 0 1rem 0', color: '#374151' }}>
Возможные причины ошибки:
</h4>
<ul style={{ margin: 0, paddingLeft: '1.5rem', color: '#6B7280' }}>
<li>Недостаточно средств на карте</li>
<li>Карта заблокирована или просрочена</li>
<li>Неверно введены данные карты</li>
<li>Технические проблемы платежной системы</li>
<li>Превышен лимит по карте</li>
</ul>
</div>
</div>
</div>
</section>
<Footer />
</>
);
}

256
src/pages/payment/invoice.tsx Normal file
View File

@ -0,0 +1,256 @@
import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import Head from 'next/head';
const InvoicePage: React.FC = () => {
const router = useRouter();
const { orderId, orderNumber } = router.query;
const [orderData, setOrderData] = useState<any>(null);
useEffect(() => {
// Здесь можно загрузить данные заказа если нужно
// Пока используем базовую информацию из query параметров
}, [orderId, orderNumber]);
const handleBackToHome = () => {
router.push('/');
};
const handleGoToProfile = () => {
router.push('/profile/orders');
};
return (
<>
<Head>
<title>Счёт на оплату - Протек Авто</title>
<meta name="description" content="Счёт на оплату заказа" />
</Head>
<div className="w-layout-vflex" style={{
minHeight: '100vh',
backgroundColor: '#f8f9fa',
padding: '40px 20px'
}}>
<div style={{
maxWidth: '600px',
margin: '0 auto',
backgroundColor: 'white',
borderRadius: '8px',
padding: '40px',
boxShadow: '0 2px 10px rgba(0,0,0,0.1)'
}}>
{/* Заголовок */}
<div style={{ textAlign: 'center', marginBottom: '32px' }}>
<div style={{
width: '64px',
height: '64px',
backgroundColor: '#28a745',
borderRadius: '50%',
margin: '0 auto 16px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
<svg width="32" height="32" viewBox="0 0 24 24" fill="none">
<path d="M9 12l2 2 4-4" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<circle cx="12" cy="12" r="9" stroke="white" strokeWidth="2"/>
</svg>
</div>
<h1 style={{
fontSize: '24px',
fontWeight: '600',
color: '#333',
marginBottom: '8px'
}}>
Заказ оформлен!
</h1>
<p style={{
fontSize: '16px',
color: '#666',
marginBottom: '0'
}}>
Заказ №{orderNumber} успешно создан
</p>
</div>
{/* Информация о счёте */}
<div style={{
backgroundColor: '#f8f9fa',
borderRadius: '8px',
padding: '24px',
marginBottom: '32px'
}}>
<h3 style={{
fontSize: '18px',
fontWeight: '600',
color: '#333',
marginBottom: '16px'
}}>
Реквизиты для оплаты
</h3>
<div style={{ marginBottom: '16px' }}>
<div style={{ fontSize: '14px', color: '#666', marginBottom: '4px' }}>
Получатель
</div>
<div style={{ fontSize: '16px', fontWeight: '500', color: '#333' }}>
ООО "Протек Авто"
</div>
</div>
<div style={{ marginBottom: '16px' }}>
<div style={{ fontSize: '14px', color: '#666', marginBottom: '4px' }}>
ИНН
</div>
<div style={{ fontSize: '16px', fontWeight: '500', color: '#333' }}>
1234567890
</div>
</div>
<div style={{ marginBottom: '16px' }}>
<div style={{ fontSize: '14px', color: '#666', marginBottom: '4px' }}>
КПП
</div>
<div style={{ fontSize: '16px', fontWeight: '500', color: '#333' }}>
123456001
</div>
</div>
<div style={{ marginBottom: '16px' }}>
<div style={{ fontSize: '14px', color: '#666', marginBottom: '4px' }}>
Расчётный счёт
</div>
<div style={{ fontSize: '16px', fontWeight: '500', color: '#333' }}>
40702810123456789012
</div>
</div>
<div style={{ marginBottom: '16px' }}>
<div style={{ fontSize: '14px', color: '#666', marginBottom: '4px' }}>
Банк
</div>
<div style={{ fontSize: '16px', fontWeight: '500', color: '#333' }}>
ПАО "Сбербанк России"
</div>
</div>
<div style={{ marginBottom: '16px' }}>
<div style={{ fontSize: '14px', color: '#666', marginBottom: '4px' }}>
БИК
</div>
<div style={{ fontSize: '16px', fontWeight: '500', color: '#333' }}>
044525225
</div>
</div>
<div style={{ marginBottom: '0' }}>
<div style={{ fontSize: '14px', color: '#666', marginBottom: '4px' }}>
Корреспондентский счёт
</div>
<div style={{ fontSize: '16px', fontWeight: '500', color: '#333' }}>
30101810400000000225
</div>
</div>
</div>
{/* Важная информация */}
<div style={{
backgroundColor: '#fff3cd',
border: '1px solid #ffeaa7',
borderRadius: '8px',
padding: '16px',
marginBottom: '32px'
}}>
<h4 style={{
fontSize: '16px',
fontWeight: '600',
color: '#856404',
marginBottom: '8px'
}}>
Важно!
</h4>
<p style={{
fontSize: '14px',
color: '#856404',
marginBottom: '8px'
}}>
• В назначении платежа обязательно укажите номер заказа: <strong>№{orderNumber}</strong>
</p>
<p style={{
fontSize: '14px',
color: '#856404',
marginBottom: '8px'
}}>
• Счёт на оплату будет выслан на указанную при оформлении заказа электронную почту
</p>
<p style={{
fontSize: '14px',
color: '#856404',
marginBottom: '0'
}}>
• После поступления оплаты заказ будет передан в обработку
</p>
</div>
{/* Кнопки действий */}
<div style={{
display: 'flex',
gap: '16px',
flexDirection: 'column'
}}>
<button
onClick={handleGoToProfile}
style={{
backgroundColor: '#007bff',
color: 'white',
border: 'none',
borderRadius: '8px',
padding: '12px 24px',
fontSize: '16px',
fontWeight: '500',
cursor: 'pointer',
transition: 'background-color 0.2s'
}}
onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor = '#0056b3';
}}
onMouseLeave={(e) => {
e.currentTarget.style.backgroundColor = '#007bff';
}}
>
Мои заказы
</button>
<button
onClick={handleBackToHome}
style={{
backgroundColor: 'transparent',
color: '#007bff',
border: '1px solid #007bff',
borderRadius: '8px',
padding: '12px 24px',
fontSize: '16px',
fontWeight: '500',
cursor: 'pointer',
transition: 'all 0.2s'
}}
onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor = '#007bff';
e.currentTarget.style.color = 'white';
}}
onMouseLeave={(e) => {
e.currentTarget.style.backgroundColor = 'transparent';
e.currentTarget.style.color = '#007bff';
}}
>
На главную
</button>
</div>
</div>
</div>
</>
);
};
export default InvoicePage;

212
src/pages/payment/success.tsx Normal file
View File

@ -0,0 +1,212 @@
import React, { useEffect, useState } from "react";
import Head from "next/head";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { useRouter } from "next/router";
import { useMutation, ApolloProvider } from "@apollo/client";
import { gql } from "@apollo/client";
import { apolloClient } from "@/lib/apollo";
const CONFIRM_PAYMENT = gql`
mutation ConfirmPayment($orderId: ID!) {
confirmPayment(orderId: $orderId) {
id
orderNumber
status
}
}
`;
function PaymentSuccessContent() {
const router = useRouter();
const [paymentId, setPaymentId] = useState<string | null>(null);
const [orderId, setOrderId] = useState<string | null>(null);
const [confirmPayment] = useMutation(CONFIRM_PAYMENT);
useEffect(() => {
// Получаем параметры из URL
const { payment_id, orderId, orderNumber } = router.query;
if (payment_id) {
setPaymentId(payment_id as string);
}
if (orderId) {
setOrderId(orderId as string);
// Проверяем авторизацию перед обновлением статуса
const userData = localStorage.getItem('userData');
console.log('PaymentSuccess: userData из localStorage:', userData);
if (!userData) {
console.log('PaymentSuccess: пользователь не авторизован, пропускаем обновление статуса');
return;
}
// Автоматически подтверждаем оплату заказа
console.log('PaymentSuccess: подтверждаем оплату заказа', orderId);
confirmPayment({
variables: {
orderId: orderId as string
}
}).then(() => {
console.log('Оплата заказа подтверждена');
}).catch((error: any) => {
console.error('Ошибка подтверждения оплаты:', error);
});
}
}, [router.query, confirmPayment]);
const handleContinueShopping = () => {
router.push('/catalog');
};
const handleViewOrders = () => {
router.push('/profile-orders');
};
return (
<>
<Head>
<title>Оплата прошла успешно - Protekauto</title>
<meta name="description" content="Ваш заказ успешно оплачен" />
<link href="https://fonts.googleapis.com" rel="preconnect" />
<link href="https://fonts.gstatic.com" rel="preconnect" crossOrigin="anonymous" />
<link href="/images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/images/webclip.png" rel="apple-touch-icon" />
</Head>
<Header />
<div className="w-layout-blockcontainer container info w-container">
<div className="w-layout-vflex flex-block-9">
<div className="w-layout-hflex flex-block-7">
<a href="/" className="link-block w-inline-block">
<div>Главная</div>
</a>
<div className="text-block-3">→</div>
<div className="text-block-3">Оплата завершена</div>
</div>
</div>
</div>
<section className="main">
<div className="w-layout-blockcontainer container w-container">
<div className="w-layout-vflex" style={{ alignItems: 'center', textAlign: 'center', padding: '4rem 0' }}>
{/* Иконка успеха */}
<div style={{
width: 80,
height: 80,
borderRadius: '50%',
backgroundColor: '#10B981',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: '2rem'
}}>
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</div>
{/* Заголовок */}
<h1 className="heading" style={{ marginBottom: '1rem', color: '#10B981' }}>
Оплата прошла успешно!
</h1>
{/* Описание */}
<div className="text-block-4" style={{ marginBottom: '2rem', maxWidth: 600 }}>
Спасибо за ваш заказ! Оплата была успешно обработана.
Мы отправили подтверждение на вашу электронную почту.
</div>
{/* Информация о заказе */}
{(paymentId || orderId) && (
<div style={{
backgroundColor: '#F9FAFB',
border: '1px solid #E5E7EB',
borderRadius: 8,
padding: '1.5rem',
marginBottom: '2rem',
maxWidth: 400,
width: '100%'
}}>
<h3 style={{ margin: '0 0 1rem 0', fontSize: '1.1rem', fontWeight: 600 }}>
Детали платежа
</h3>
{orderId && (
<div style={{ marginBottom: '0.5rem' }}>
<strong>Номер заказа:</strong> {orderId}
</div>
)}
{paymentId && (
<div>
<strong>ID платежа:</strong> {paymentId}
</div>
)}
</div>
)}
{/* Кнопки действий */}
<div className="w-layout-hflex" style={{ gap: '1rem', flexWrap: 'wrap', justifyContent: 'center' }}>
<button
className="submit-button fill w-button"
onClick={handleViewOrders}
style={{ minWidth: 200 }}
>
Мои заказы
</button>
<button
className="submit-button w-button"
onClick={handleContinueShopping}
style={{
minWidth: 200,
backgroundColor: 'transparent',
border: '2px solid var(--_button---primary)',
color: 'var(--_button---primary)'
}}
>
Продолжить покупки
</button>
</div>
{/* Дополнительная информация */}
<div style={{
marginTop: '3rem',
padding: '1.5rem',
backgroundColor: '#FEF3C7',
border: '1px solid #F59E0B',
borderRadius: 8,
maxWidth: 600,
width: '100%'
}}>
<h4 style={{ margin: '0 0 1rem 0', color: '#92400E' }}>
Что дальше?
</h4>
<ul style={{ margin: 0, paddingLeft: '1.5rem', color: '#92400E' }}>
<li>Мы обработаем ваш заказ в течение 1-2 рабочих дней</li>
<li>Вы получите уведомление о статусе заказа на email</li>
<li>Отслеживать заказ можно в разделе "Мои заказы"</li>
<li>При вопросах обращайтесь в службу поддержки</li>
</ul>
</div>
</div>
</div>
</section>
<Footer />
</>
);
}
export default function PaymentSuccess() {
return (
<ApolloProvider client={apolloClient}>
<PaymentSuccessContent />
</ApolloProvider>
);
}