financial
This commit is contained in:
@@ -0,0 +1,48 @@
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Tabs from '../../components/Tabs'
|
||||
import { ProfileCircle, UserTag } from 'iconsax-react'
|
||||
import Legal from './components/Legal'
|
||||
import Personal from './components/Personal'
|
||||
|
||||
const Financial: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [activeTab, setActiveTab] = useState('legal')
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div>
|
||||
{t('financial.financial')}
|
||||
</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
<Tabs
|
||||
items={[
|
||||
{
|
||||
icon: <UserTag color={activeTab === 'legal' ? 'black' : '#8C90A3'} size={22} />,
|
||||
label: t('financial.legal'),
|
||||
value: 'legal'
|
||||
},
|
||||
{
|
||||
icon: <ProfileCircle color={activeTab === 'personal' ? 'black' : '#8C90A3'} size={22} />,
|
||||
label: t('financial.legal'),
|
||||
value: 'personal'
|
||||
},
|
||||
]}
|
||||
active={activeTab}
|
||||
onChange={setActiveTab}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{
|
||||
activeTab === 'legal' ?
|
||||
<Legal />
|
||||
:
|
||||
<Personal />
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Financial
|
||||
@@ -0,0 +1,216 @@
|
||||
import { FC, Fragment, useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Input from '../../../components/Input'
|
||||
import { useFormik } from 'formik'
|
||||
import Textarea from '../../../components/Textarea'
|
||||
import Button from '../../../components/Button'
|
||||
import { TickCircle } from 'iconsax-react'
|
||||
import { CreateLegalUserType, ProvinesItemType } from '../types/FinancialTypes'
|
||||
import * as Yup from 'yup'
|
||||
import { useCreateLegalUser, useGetCities, useGetFinancialInfo, useGetProvines } from '../hooks/useFinancialData'
|
||||
import Select from '../../../components/Select'
|
||||
import PageLoading from '../../../components/PageLoading'
|
||||
import { toast } from 'react-toastify'
|
||||
import { ErrorType } from '../../../helpers/types'
|
||||
|
||||
const Legal: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [isReadOnly, setIsReadOnly] = useState<boolean>(false)
|
||||
const [provinesId, setProvinesId] = useState<string>('')
|
||||
const getFinancialInfo = useGetFinancialInfo()
|
||||
const getProvines = useGetProvines()
|
||||
const getCities = useGetCities(provinesId)
|
||||
const createLegalUser = useCreateLegalUser()
|
||||
|
||||
const formik = useFormik<CreateLegalUserType>({
|
||||
initialValues: {
|
||||
address: '',
|
||||
cityId: '',
|
||||
companyRegisteredName: '',
|
||||
economicCode: '',
|
||||
nationalId: '',
|
||||
number: '',
|
||||
postalCode: '',
|
||||
registrationId: ''
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
address: Yup.string().required(t('errors.required')),
|
||||
cityId: Yup.string().required(t('errors.required')),
|
||||
companyRegisteredName: Yup.string().required(t('errors.required')),
|
||||
economicCode: Yup.string().required(t('errors.required')),
|
||||
nationalId: Yup.string().required(t('errors.required')),
|
||||
number: Yup.string().required(t('errors.required')),
|
||||
postalCode: Yup.string().required(t('errors.required')),
|
||||
registrationId: Yup.string().required(t('errors.required'))
|
||||
}),
|
||||
onSubmit: values => {
|
||||
createLegalUser.mutate(values, {
|
||||
onSuccess: () => {
|
||||
toast.success(t('success'))
|
||||
window.location.reload()
|
||||
},
|
||||
onError(error: ErrorType) {
|
||||
toast.error(error.response?.data?.error.message[0])
|
||||
},
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (getFinancialInfo.data?.data?.user?.legalUser) {
|
||||
setIsReadOnly(true)
|
||||
const data = getFinancialInfo.data.data?.user
|
||||
formik.setValues({
|
||||
address: data?.address.address,
|
||||
cityId: data?.address?.city?.id,
|
||||
companyRegisteredName: data?.legalUser.companyRegisteredName,
|
||||
economicCode: data?.legalUser.economicCode,
|
||||
nationalId: data?.legalUser.nationalId,
|
||||
number: data?.legalUser.number,
|
||||
postalCode: data?.address.postalCode,
|
||||
registrationId: data?.legalUser.registrationId
|
||||
})
|
||||
setProvinesId(data?.address?.city?.province?.id)
|
||||
}
|
||||
|
||||
}, [getFinancialInfo.data])
|
||||
|
||||
|
||||
return (
|
||||
<div className='bg-white rounded-3xl xl:p-6 p-4 mt-8 text-sm'>
|
||||
{
|
||||
getProvines.isPending || getFinancialInfo.isPending ?
|
||||
<PageLoading />
|
||||
:
|
||||
<Fragment>
|
||||
<div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7 border-b pb-7'>
|
||||
<div className='flex-1'>
|
||||
<div>
|
||||
{t('financial.info_company')}
|
||||
</div>
|
||||
<div className='text-description text-xs mt-2'>
|
||||
{t('financial.enter_info_your_company')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1'>
|
||||
<div className='flex items-end xl:gap-6 gap-3'>
|
||||
<Input
|
||||
label={t('financial.company_name')}
|
||||
{...formik.getFieldProps('companyRegisteredName')}
|
||||
error_text={formik.touched.companyRegisteredName && formik.errors.companyRegisteredName ? formik.errors.companyRegisteredName : ''}
|
||||
readOnly={isReadOnly}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex items-end xl:gap-6 gap-3 mt-8'>
|
||||
<Input
|
||||
label={t('financial.company_code')}
|
||||
{...formik.getFieldProps('registrationId')}
|
||||
error_text={formik.touched.registrationId && formik.errors.registrationId ? formik.errors.registrationId : ''}
|
||||
readOnly={isReadOnly}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex items-end xl:gap-6 gap-3 mt-8'>
|
||||
<Input
|
||||
label={t('financial.national_id')}
|
||||
{...formik.getFieldProps('nationalId')}
|
||||
error_text={formik.touched.nationalId && formik.errors.nationalId ? formik.errors.nationalId : ''}
|
||||
readOnly={isReadOnly}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label={t('financial.economic_code')}
|
||||
{...formik.getFieldProps('economicCode')}
|
||||
error_text={formik.touched.economicCode && formik.errors.economicCode ? formik.errors.economicCode : ''}
|
||||
readOnly={isReadOnly}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7 pb-7'>
|
||||
<div className='flex-1'>
|
||||
<div>
|
||||
{t('financial.company_contact_info')}
|
||||
</div>
|
||||
<div className='text-description text-xs mt-2'>
|
||||
{t('financial.company_contact_address')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1'>
|
||||
|
||||
<div className='flex items-end xl:gap-6 gap-3'>
|
||||
<Select
|
||||
value={provinesId}
|
||||
label={t('financial.state')}
|
||||
placeholder={t('select')}
|
||||
items={getProvines.data?.data?.provinces.map((item: ProvinesItemType) => ({ label: item.name, value: item.id }))}
|
||||
onChange={(e) => setProvinesId(e.target.value)}
|
||||
readOnly={isReadOnly}
|
||||
/>
|
||||
<Select
|
||||
label={t('financial.city')}
|
||||
placeholder={t('select')}
|
||||
items={getCities.data?.data?.cities ? getCities.data?.data?.cities.map((item: ProvinesItemType) => ({ label: item.name, value: item.id })) : []}
|
||||
{...formik.getFieldProps('cityId')}
|
||||
error_text={formik.touched.cityId && formik.errors.cityId ? formik.errors.cityId : ''}
|
||||
readOnly={isReadOnly}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex items-end xl:gap-6 gap-3 mt-8'>
|
||||
<Input
|
||||
label={t('financial.company_phone')}
|
||||
{...formik.getFieldProps('number')}
|
||||
error_text={formik.touched.number && formik.errors.number ? formik.errors.number : ''}
|
||||
readOnly={isReadOnly}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label={t('financial.company_postal_code')}
|
||||
{...formik.getFieldProps('postalCode')}
|
||||
error_text={formik.touched.postalCode && formik.errors.postalCode ? formik.errors.postalCode : ''}
|
||||
readOnly={isReadOnly}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex items-end xl:gap-6 gap-3 mt-8'>
|
||||
<Textarea
|
||||
{...formik.getFieldProps('address')}
|
||||
error_text={formik.touched.address && formik.errors.address ? formik.errors.address : ''}
|
||||
label={t('financial.address')}
|
||||
readOnly={isReadOnly}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{
|
||||
!isReadOnly &&
|
||||
<div className='mt-8 flex justify-end'>
|
||||
<Button
|
||||
className='w-fit px-7'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={createLegalUser.isPending}
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle
|
||||
size={24}
|
||||
color='white'
|
||||
/>
|
||||
<div>{t('save')}</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Legal
|
||||
@@ -0,0 +1,247 @@
|
||||
import { useFormik } from 'formik'
|
||||
import { FC, useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Input from '../../../components/Input'
|
||||
import Select from '../../../components/Select'
|
||||
import Textarea from '../../../components/Textarea'
|
||||
import Button from '../../../components/Button'
|
||||
import { InfoCircle, TickCircle } from 'iconsax-react'
|
||||
import { CreateRealUserType, ProvinesItemType } from '../types/FinancialTypes'
|
||||
import * as Yup from 'yup'
|
||||
import { useCreateRealUser, useGetCities, useGetFinancialInfo, useGetProvines } from '../hooks/useFinancialData'
|
||||
import { toast } from 'react-toastify'
|
||||
import { ErrorType } from '../../../helpers/types'
|
||||
|
||||
const Personal: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
const [isReadOnly, setIsReadOnly] = useState<boolean>(false)
|
||||
const [provinesId, setProvinesId] = useState<string>('')
|
||||
const getFinancialInfo = useGetFinancialInfo()
|
||||
const createRealUser = useCreateRealUser()
|
||||
const getProvines = useGetProvines()
|
||||
const getCities = useGetCities(provinesId)
|
||||
|
||||
const formik = useFormik<CreateRealUserType>({
|
||||
initialValues: {
|
||||
address: '',
|
||||
cityId: '',
|
||||
fatherName: '',
|
||||
gender: '',
|
||||
nationality: '',
|
||||
postalCode: ''
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
address: Yup.string().required(t('errors.required')),
|
||||
cityId: Yup.string().required(t('errors.required')),
|
||||
fatherName: Yup.string().required(t('errors.required')),
|
||||
gender: Yup.string().required(t('errors.required')),
|
||||
nationality: Yup.string().required(t('errors.required')),
|
||||
postalCode: Yup.string().required(t('errors.required'))
|
||||
}),
|
||||
onSubmit: values => {
|
||||
createRealUser.mutate(values, {
|
||||
onSuccess: () => {
|
||||
toast.success(t('success'))
|
||||
window.location.reload()
|
||||
},
|
||||
onError(error: ErrorType) {
|
||||
toast.error(error.response?.data?.error.message[0])
|
||||
},
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (getFinancialInfo.data?.data?.user?.realUser) {
|
||||
const data = getFinancialInfo.data?.data?.user
|
||||
setIsReadOnly(true)
|
||||
formik.setValues({
|
||||
address: data.address.address,
|
||||
cityId: data.address?.city?.cityId,
|
||||
fatherName: data?.realUser?.fatherName,
|
||||
gender: data?.realUser?.gender,
|
||||
nationality: data?.realUser?.nationality,
|
||||
postalCode: data?.address?.postalCode
|
||||
})
|
||||
setProvinesId(data?.address?.city?.province?.id)
|
||||
}
|
||||
|
||||
}, [getFinancialInfo.data])
|
||||
|
||||
|
||||
return (
|
||||
<div className='bg-white rounded-3xl xl:p-6 p-4 mt-8 text-sm'>
|
||||
<div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7 border-b pb-7'>
|
||||
<div className='flex-1'>
|
||||
<div>
|
||||
{t('financial.personal_information')}
|
||||
</div>
|
||||
<div className='text-description text-xs mt-2'>
|
||||
{t('financial.enter_your_personal_information')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1'>
|
||||
{/* <div className='flex items-end xl:gap-6 gap-3'>
|
||||
<Input
|
||||
label={t('financial.name')}
|
||||
{...formik.getFieldProps('company_name')}
|
||||
error_text={formik.touched.company_name && formik.errors.company_name ? formik.errors.company_name : ''}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label={t('financial.family')}
|
||||
{...formik.getFieldProps('company_name')}
|
||||
error_text={formik.touched.company_name && formik.errors.company_name ? formik.errors.company_name : ''}
|
||||
/>
|
||||
</div> */}
|
||||
<div className='flex items-end xl:gap-6 gap-3'>
|
||||
<Select
|
||||
label={t('financial.sex')}
|
||||
placeholder={t('select')}
|
||||
items={[
|
||||
{
|
||||
label: t('man'),
|
||||
value: 'male'
|
||||
},
|
||||
{
|
||||
label: t('woman'),
|
||||
value: 'female'
|
||||
},
|
||||
]}
|
||||
{...formik.getFieldProps('gender')}
|
||||
error_text={formik.touched.gender && formik.errors.gender ? formik.errors.gender : ''}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label={t('financial.father_name')}
|
||||
{...formik.getFieldProps('fatherName')}
|
||||
error_text={formik.touched.fatherName && formik.errors.fatherName ? formik.errors.fatherName : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* <div className='flex items-end xl:gap-6 gap-3 mt-8'>
|
||||
<Input
|
||||
label={t('financial.phone_number')}
|
||||
{...formik.getFieldProps('company_name')}
|
||||
error_text={formik.touched. && formik.errors.company_name ? formik.errors.company_name : ''}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label={t('financial.national_code')}
|
||||
{...formik.getFieldProps('company_name')}
|
||||
error_text={formik.touched.na && formik.errors.company_name ? formik.errors.company_name : ''}
|
||||
/>
|
||||
</div> */}
|
||||
|
||||
<div className='flex items-end xl:gap-6 gap-3 mt-8'>
|
||||
{/* <DatePickerComponent
|
||||
label={t('financial.date_of_birth')}
|
||||
onChange={(value) => formik.setFieldValue('dateOfBirth', value)}
|
||||
placeholder={t('financial.date_of_birth')}
|
||||
error_text={formik.touched. && formik.errors.dateOfBirth ? formik.errors.dateOfBirth : ''}
|
||||
/> */}
|
||||
|
||||
<Input
|
||||
label={t('financial.nationality')}
|
||||
{...formik.getFieldProps('nationality')}
|
||||
error_text={formik.touched.nationality && formik.errors.nationality ? formik.errors.nationality : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* <div className='flex items-end xl:gap-6 gap-3 mt-8'>
|
||||
<Input
|
||||
label={t('financial.company_phone')}
|
||||
{...formik.getFieldProps('number')}
|
||||
error_text={formik.touched.number && formik.errors.number ? formik.errors.number : ''}
|
||||
readOnly={isReadOnly}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label={t('financial.company_postal_code')}
|
||||
{...formik.getFieldProps('postalCode')}
|
||||
error_text={formik.touched.postalCode && formik.errors.postalCode ? formik.errors.postalCode : ''}
|
||||
readOnly={isReadOnly}
|
||||
/>
|
||||
</div> */}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7 pb-7'>
|
||||
<div className='flex-1'>
|
||||
<div>
|
||||
{t('financial.address')}
|
||||
</div>
|
||||
<div className='text-description text-xs mt-2'>
|
||||
{t('financial.enter_address')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1'>
|
||||
<div className='flex items-end xl:gap-6 gap-3'>
|
||||
<Select
|
||||
value={provinesId}
|
||||
label={t('financial.state')}
|
||||
placeholder={t('select')}
|
||||
items={getProvines.data?.data?.provinces.map((item: ProvinesItemType) => ({ label: item.name, value: item.id }))}
|
||||
onChange={(e) => setProvinesId(e.target.value)}
|
||||
readOnly={isReadOnly}
|
||||
/>
|
||||
<Select
|
||||
label={t('financial.city')}
|
||||
placeholder={t('select')}
|
||||
items={getCities.data?.data?.cities ? getCities.data?.data?.cities.map((item: ProvinesItemType) => ({ label: item.name, value: item.id })) : []}
|
||||
{...formik.getFieldProps('cityId')}
|
||||
error_text={formik.touched.cityId && formik.errors.cityId ? formik.errors.cityId : ''}
|
||||
readOnly={isReadOnly}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
<Input
|
||||
label={t('financial.company_postal_code')}
|
||||
{...formik.getFieldProps('postalCode')}
|
||||
error_text={formik.touched.postalCode && formik.errors.postalCode ? formik.errors.postalCode : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex items-end xl:gap-6 gap-3 mt-8'>
|
||||
<Textarea
|
||||
{...formik.getFieldProps('address')}
|
||||
error_text={formik.touched.address && formik.errors.address ? formik.errors.address : ''}
|
||||
label={t('financial.address')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 h-10 text-xs bg-[#FFF2F2] text-[#DB0105] rounded-xl px-4 flex gap-2 items-center'>
|
||||
<InfoCircle
|
||||
size={18}
|
||||
color='#DB0105'
|
||||
/>
|
||||
<div>{t('financial.notice_cannot_edit')}</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex justify-end'>
|
||||
<Button
|
||||
className='w-fit px-7'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={createRealUser.isPending}
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle
|
||||
size={24}
|
||||
color='white'
|
||||
/>
|
||||
<div>{t('save')}</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Personal
|
||||
@@ -0,0 +1,42 @@
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import * as api from "../service/FinancialService";
|
||||
import {
|
||||
CreateLegalUserType,
|
||||
CreateRealUserType,
|
||||
} from "../types/FinancialTypes";
|
||||
|
||||
export const useCreateLegalUser = () => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: CreateLegalUserType) =>
|
||||
api.createLegalUser(variables),
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetProvines = () => {
|
||||
return useQuery({
|
||||
queryKey: ["provines"],
|
||||
queryFn: () => api.getProvines(),
|
||||
});
|
||||
};
|
||||
|
||||
export const useCreateRealUser = () => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: CreateRealUserType) =>
|
||||
api.createRealUser(variables),
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetCities = (provincesId: string) => {
|
||||
return useQuery({
|
||||
queryKey: ["cities", provincesId],
|
||||
queryFn: () => api.getCities(provincesId),
|
||||
enabled: !!provincesId,
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetFinancialInfo = () => {
|
||||
return useQuery({
|
||||
queryKey: ["financial-info"],
|
||||
queryFn: () => api.getFinancialInfo(),
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,30 @@
|
||||
import axios from "../../../config/axios";
|
||||
import {
|
||||
CreateLegalUserType,
|
||||
CreateRealUserType,
|
||||
} from "../types/FinancialTypes";
|
||||
|
||||
export const createLegalUser = async (params: CreateLegalUserType) => {
|
||||
const { data } = await axios.post(`/users/legal-user`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const createRealUser = async (params: CreateRealUserType) => {
|
||||
const { data } = await axios.post(`/users/real-user`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getProvines = async () => {
|
||||
const { data } = await axios.get(`/address/provinces/list?limit=50`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getCities = async (id: string) => {
|
||||
const { data } = await axios.get(`/address/provinces/${id}/cities`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getFinancialInfo = async () => {
|
||||
const { data } = await axios.get(`/users/me/financial-info`);
|
||||
return data;
|
||||
};
|
||||
@@ -0,0 +1,24 @@
|
||||
export type CreateRealUserType = {
|
||||
gender: string;
|
||||
fatherName: string;
|
||||
nationality: string;
|
||||
address: string;
|
||||
postalCode: string;
|
||||
cityId: string;
|
||||
};
|
||||
|
||||
export type CreateLegalUserType = {
|
||||
economicCode: string;
|
||||
companyRegisteredName: string;
|
||||
registrationId: string;
|
||||
nationalId: string;
|
||||
number: string;
|
||||
postalCode: string;
|
||||
address: string;
|
||||
cityId: string;
|
||||
};
|
||||
|
||||
export type ProvinesItemType = {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
Reference in New Issue
Block a user