Initial commit from monorepo
This commit is contained in:
Ruslan Bakiev
156
app/pages/clientarea/kyc/index.vue
Normal file
156
app/pages/clientarea/kyc/index.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div>
|
||||
<Alert v-if="error" variant="error" class="mb-4">
|
||||
<Stack gap="2">
|
||||
<Heading :level="4" weight="semibold">{{ t('kycOverview.errors.title') }}</Heading>
|
||||
<Text tone="muted">{{ error }}</Text>
|
||||
<Button @click="loadKYCStatus">{{ t('kycOverview.errors.retry') }}</Button>
|
||||
</Stack>
|
||||
</Alert>
|
||||
|
||||
<Card v-else-if="loading" tone="muted" padding="lg">
|
||||
<Stack align="center" justify="center" gap="3">
|
||||
<Spinner />
|
||||
<Text tone="muted">{{ t('kycOverview.states.loading') }}</Text>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
<template v-else>
|
||||
<Stack gap="6">
|
||||
<!-- Список существующих заявок -->
|
||||
<Stack v-if="kycRequests.length > 0" gap="4">
|
||||
<Heading :level="2">{{ t('kycOverview.list.title') }}</Heading>
|
||||
<Grid :cols="1" :md="2" :lg="3" :gap="4">
|
||||
<Card v-for="request in kycRequests" :key="request.uuid" padding="lg">
|
||||
<Stack gap="3">
|
||||
<Stack direction="row" gap="2" align="center" justify="between">
|
||||
<Heading :level="4" weight="semibold">{{ request.companyName || t('kycOverview.list.unnamed') }}</Heading>
|
||||
<Pill :variant="getStatusVariant(request)" :tone="getStatusTone(request)">
|
||||
{{ getStatusText(request) }}
|
||||
</Pill>
|
||||
</Stack>
|
||||
<Text tone="muted" size="base">
|
||||
{{ t('kycOverview.list.submitted') }}: {{ formatDate(request.createdAt) }}
|
||||
</Text>
|
||||
<Text v-if="request.inn" tone="muted" size="base">
|
||||
{{ t('kycOverview.list.inn') }}: {{ request.inn }}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Stack>
|
||||
|
||||
<!-- Добавить новую заявку -->
|
||||
<Stack gap="4">
|
||||
<Heading :level="2">{{ t('kycOverview.choose_country.title') }}</Heading>
|
||||
|
||||
<Grid :cols="1" :md="2" :lg="3" :gap="4">
|
||||
<Card padding="lg" interactive @click="selectCountry('russia')">
|
||||
<Stack gap="3">
|
||||
<Stack direction="row" gap="2" align="center">
|
||||
<IconCircle tone="primary">🇷🇺</IconCircle>
|
||||
<Heading :level="4" weight="semibold">{{ t('kycOverview.countries.russia.title') }}</Heading>
|
||||
</Stack>
|
||||
<Text tone="muted" size="base">
|
||||
{{ t('kycOverview.countries.russia.description') }}
|
||||
</Text>
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Pill variant="primary">{{ t('kycOverview.countries.russia.badge') }}</Pill>
|
||||
<Text tone="muted" weight="semibold">→</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
<Card padding="lg" tone="muted">
|
||||
<Stack gap="3">
|
||||
<Stack direction="row" gap="2" align="center">
|
||||
<IconCircle tone="neutral">🇰🇿</IconCircle>
|
||||
<Heading :level="4" weight="semibold">{{ t('kycOverview.countries.kazakhstan.title') }}</Heading>
|
||||
</Stack>
|
||||
<Text tone="muted" size="base">
|
||||
{{ t('kycOverview.countries.kazakhstan.description') }}
|
||||
</Text>
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Pill variant="outline" tone="warning">{{ t('kycOverview.countries.kazakhstan.badge') }}</Pill>
|
||||
<Text tone="muted" weight="semibold">→</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
<Stack gap="2">
|
||||
<Heading :level="4" weight="semibold">{{ t('kycOverview.info.title') }}</Heading>
|
||||
<Text tone="muted" size="base">• {{ t('kycOverview.info.point1') }}</Text>
|
||||
<Text tone="muted" size="base">• {{ t('kycOverview.info.point2') }}</Text>
|
||||
<Text tone="muted" size="base">• {{ t('kycOverview.info.point3') }}</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { GetKycRequestsRussiaDocument } from '~/composables/graphql/user/kyc-generated'
|
||||
|
||||
definePageMeta({
|
||||
middleware: ['auth-oidc']
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const loading = ref(true)
|
||||
const error = ref<string | null>(null)
|
||||
const kycRequests = ref<any[]>([])
|
||||
|
||||
const selectCountry = (country: string) => {
|
||||
if (country === 'russia') {
|
||||
navigateTo('/clientarea/kyc/russia')
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusVariant = (request: any) => {
|
||||
if (request.approvedAt) return 'primary'
|
||||
if (request.rejectedAt) return 'outline'
|
||||
return 'outline'
|
||||
}
|
||||
|
||||
const getStatusTone = (request: any) => {
|
||||
if (request.approvedAt) return 'success'
|
||||
if (request.rejectedAt) return 'error'
|
||||
return 'warning'
|
||||
}
|
||||
|
||||
const getStatusText = (request: any) => {
|
||||
if (request.approvedAt) return t('kycOverview.list.status.approved')
|
||||
if (request.rejectedAt) return t('kycOverview.list.status.rejected')
|
||||
return t('kycOverview.list.status.pending')
|
||||
}
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
if (!dateStr) return ''
|
||||
const date = new Date(dateStr)
|
||||
return date.toLocaleDateString()
|
||||
}
|
||||
|
||||
const loadKYCStatus = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
const { data, error: kycError } = await useServerQuery('kyc-requests', GetKycRequestsRussiaDocument, {}, 'user', 'kyc')
|
||||
if (kycError.value) throw kycError.value
|
||||
const requests = data.value?.kycRequests || []
|
||||
// Сортируем по дате создания (новые первые)
|
||||
kycRequests.value = [...requests].sort((a: any, b: any) =>
|
||||
new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
|
||||
)
|
||||
} catch (err: any) {
|
||||
error.value = t('kycOverview.errors.load_failed')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
await loadKYCStatus()
|
||||
</script>
|
||||
93
app/pages/clientarea/kyc/russia.vue
Normal file
93
app/pages/clientarea/kyc/russia.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<Section variant="plain">
|
||||
<Stack gap="6">
|
||||
<Stack gap="2">
|
||||
<Stack direction="row" gap="2" align="center">
|
||||
<IconCircle tone="primary">🇷🇺</IconCircle>
|
||||
<Heading :level="1">{{ t('kycRussia.header.title') }}</Heading>
|
||||
</Stack>
|
||||
<Text tone="muted" size="base">
|
||||
{{ t('kycRussia.header.subtitle') }}
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Card v-if="submitting" tone="muted" padding="lg">
|
||||
<Stack align="center" justify="center" gap="3">
|
||||
<Spinner />
|
||||
<Text tone="muted">{{ t('kycRussia.states.submitting') }}</Text>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
<Alert v-else-if="submitError" variant="error">
|
||||
<Stack gap="2">
|
||||
<Heading :level="4" weight="semibold">{{ t('kycRussia.errors.title') }}</Heading>
|
||||
<Text tone="muted">{{ submitError }}</Text>
|
||||
</Stack>
|
||||
</Alert>
|
||||
|
||||
<Card v-else-if="submitSuccess" tone="muted" padding="lg">
|
||||
<Stack gap="2">
|
||||
<Heading :level="3" weight="semibold">{{ t('kycRussia.success.title') }}</Heading>
|
||||
<Text tone="muted">
|
||||
{{ t('kycRussia.success.description') }}
|
||||
</Text>
|
||||
<Button :as="'NuxtLink'" to="/clientarea/kyc" variant="outline">
|
||||
{{ t('kycRussia.success.cta') }}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
<KYCFormRussia v-else @submit="handleSubmit" />
|
||||
</Stack>
|
||||
</Section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CreateKycRequestRussiaDocument } from '~/composables/graphql/user/kyc-generated'
|
||||
|
||||
definePageMeta({
|
||||
middleware: ['auth-oidc']
|
||||
})
|
||||
|
||||
const { mutate } = useGraphQL()
|
||||
const { t } = useI18n()
|
||||
|
||||
const submitting = ref(false)
|
||||
const submitError = ref<string | null>(null)
|
||||
const submitSuccess = ref(false)
|
||||
|
||||
const handleSubmit = async (formData: any) => {
|
||||
try {
|
||||
submitting.value = true
|
||||
submitError.value = null
|
||||
|
||||
const submitData = {
|
||||
companyName: formData.company_name,
|
||||
companyFullName: formData.company_full_name,
|
||||
inn: formData.inn,
|
||||
kpp: formData.kpp || '',
|
||||
ogrn: formData.ogrn || '',
|
||||
address: formData.address,
|
||||
bankName: formData.bank_name,
|
||||
bik: formData.bik,
|
||||
correspondentAccount: formData.correspondent_account || '',
|
||||
contactPerson: formData.contact_person,
|
||||
contactEmail: formData.contact_email,
|
||||
contactPhone: formData.contact_phone,
|
||||
}
|
||||
|
||||
const result = await mutate(CreateKycRequestRussiaDocument, { input: submitData }, 'user', 'kyc')
|
||||
|
||||
if (result.createKycRequestRussia?.success) {
|
||||
submitSuccess.value = true
|
||||
setTimeout(() => navigateTo('/clientarea/kyc'), 3000)
|
||||
} else {
|
||||
throw new Error(t('kycRussia.errors.create_failed'))
|
||||
}
|
||||
} catch (err: any) {
|
||||
submitError.value = err.message || t('kycRussia.errors.submit_failed')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user