announcement and criticisms and wallet and learning and setting
This commit is contained in:
hamid zarghami
@@ -0,0 +1,93 @@
|
||||
import { Cards, Money3, MoneyRecive, TickSquare } from 'iconsax-react'
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { SIDEBAR_SIZE_LEFT } from '../../config/Const'
|
||||
import Tabs from '../../components/Tabs'
|
||||
import Online from './components/Online'
|
||||
import CardtoCard from './components/CardtoCard'
|
||||
import Sheba from './components/Sheba'
|
||||
|
||||
const Wallet: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [activeTab, setActiveTab] = useState<string>('online')
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div>
|
||||
{t('wallet.increese_wallet')}
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex gap-6'>
|
||||
<div className='flex-1'>
|
||||
<Tabs
|
||||
active={activeTab}
|
||||
items={[
|
||||
{
|
||||
label: t('wallet.online_pay'),
|
||||
value: 'online',
|
||||
icon: <MoneyRecive color={activeTab === 'online' ? 'black' : '#8C90A3'} size={22} />
|
||||
},
|
||||
{
|
||||
icon: <Cards color={activeTab === 'card' ? 'black' : '#8C90A3'} size={22} />,
|
||||
label: t('wallet.card_to_card'),
|
||||
value: 'card'
|
||||
},
|
||||
{
|
||||
icon: <Money3 color={activeTab === 'sheba' ? 'black' : '#8C90A3'} size={22} />,
|
||||
label: t('wallet.sheba'),
|
||||
value: 'sheba'
|
||||
},
|
||||
]}
|
||||
onChange={setActiveTab}
|
||||
/>
|
||||
|
||||
{
|
||||
activeTab === 'online' ?
|
||||
<Online />
|
||||
: activeTab === 'card' ?
|
||||
<CardtoCard />
|
||||
: <Sheba />
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
<div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white py-10 px-5 h-fit rounded-3xl'>
|
||||
<div className='text-sm'>
|
||||
{t('ticket.title_hint')}
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<div className='flex items-start gap-2 border-b pb-5'>
|
||||
<div>
|
||||
<TickSquare size={20} color='black' variant='Bold' />
|
||||
</div>
|
||||
<div className='text-description text-xs leading-5'>
|
||||
سوالات - مشکلاتی که به یک موضوع مربوط میشوند را در یک درخواست پشتیبانی پیگیر باشید و چند درخواست برای یک موضوع باز نکنید.
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-start gap-2 mt-6 border-b pb-5'>
|
||||
<div>
|
||||
<TickSquare size={20} color='black' variant='Bold' />
|
||||
</div>
|
||||
<div className='text-description text-xs leading-5'>
|
||||
لطفاً برای بررسی و رفع مشکلات احتمالی صبور باشید بررسی و رفع مشکلات در برخی موارد زمان گیر است.
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-start gap-2 mt-6'>
|
||||
<div>
|
||||
<TickSquare size={20} color='black' variant='Bold' />
|
||||
</div>
|
||||
<div className='text-description text-xs leading-5'>
|
||||
پاسخگویی 24 ساعته تلفنی را تنها از میهن وب هاست می توانید انتظار داشته باشید .بخش پشتیبانی در هر ساعتی حتی در روز های تعطیل آماده پیگیری سریع مشکلات کاربران است.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Wallet
|
||||
@@ -0,0 +1,41 @@
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Input from '../../../components/Input'
|
||||
import UploadBox from '../../../components/UploadBox'
|
||||
import Button from '../../../components/Button'
|
||||
|
||||
const CardtoCard: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
return (
|
||||
<div className='mt-8 bg-white p-8 rounded-3xl'>
|
||||
<div>
|
||||
{t('wallet.card_to_card')}
|
||||
</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
<Input
|
||||
label={t('wallet.amount')}
|
||||
placeholder={t('wallet.enter_amount_card')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
<UploadBox
|
||||
label={t('wallet.upload_deposit_slip')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-10 flex justify-end'>
|
||||
<Button
|
||||
label={t('wallet.submit_slip')}
|
||||
className='w-[180px]'
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CardtoCard
|
||||
@@ -0,0 +1,111 @@
|
||||
import { FC, useState } from 'react'
|
||||
import Button from '../../../components/Button'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { clx } from '../../../helpers/utils'
|
||||
import SamanImage from '../../../assets/images/saman.png'
|
||||
import Input from '../../../components/Input'
|
||||
|
||||
const Online: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [priceSelect, setPriceSelect] = useState<number>(1)
|
||||
const [bankSelected, setBankSelected] = useState<number>(1)
|
||||
|
||||
return (
|
||||
<div className='mt-8 bg-white p-8 rounded-3xl'>
|
||||
<div>
|
||||
{t('wallet.online_pay')}
|
||||
</div>
|
||||
|
||||
<div className='mt-8 text-sm'>
|
||||
{t('wallet.select_price')}
|
||||
</div>
|
||||
|
||||
<div className='mt-4 flex gap-4 flex-wrap'>
|
||||
<div onClick={() => setPriceSelect(1)} className={clx(
|
||||
'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-6 rounded-lg',
|
||||
priceSelect === 1 && 'border-black'
|
||||
)}>
|
||||
۱۰,۰۰۰,۰۰۰ تومان
|
||||
</div>
|
||||
<div onClick={() => setPriceSelect(2)} className={clx(
|
||||
'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-6 rounded-lg',
|
||||
priceSelect === 2 && 'border-black'
|
||||
)}>
|
||||
۱۰,۰۰۰,۰۰۰ تومان
|
||||
</div>
|
||||
<div onClick={() => setPriceSelect(3)} className={clx(
|
||||
'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-6 rounded-lg',
|
||||
priceSelect === 3 && 'border-black'
|
||||
)}>
|
||||
۱۰,۰۰۰,۰۰۰ تومان
|
||||
</div>
|
||||
<div onClick={() => setPriceSelect(4)} className={clx(
|
||||
'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-6 rounded-lg',
|
||||
priceSelect === 4 && 'border-black'
|
||||
)}>
|
||||
۱۰,۰۰۰,۰۰۰ تومان
|
||||
</div>
|
||||
<div onClick={() => setPriceSelect(5)} className={clx(
|
||||
'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-6 rounded-lg',
|
||||
priceSelect === 5 && 'border-black'
|
||||
)}>
|
||||
۱۰,۰۰۰,۰۰۰ تومان
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-9'>
|
||||
<Input
|
||||
label={t('wallet.optional_price')}
|
||||
placeholder={t('wallet.enter_your_price')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 text-sm'>
|
||||
<div>
|
||||
{t('wallet.select_payment')}
|
||||
</div>
|
||||
|
||||
<div className='mt-6 flex gap-4'>
|
||||
<div onClick={() => setBankSelected(1)} className={clx(
|
||||
'h-16 rounded-xl cursor-pointer flex gap-4 items-center px-4 border border-border w-[240px]',
|
||||
bankSelected === 1 && 'border-black'
|
||||
)}>
|
||||
<img src={SamanImage} className='w-10' />
|
||||
<div>
|
||||
<div>
|
||||
بانک پارسیان
|
||||
</div>
|
||||
<div className='text-xs mt-1 text-description'>
|
||||
تمام کارت های عضو شتاب
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div onClick={() => setBankSelected(2)} className={clx(
|
||||
'h-16 rounded-xl cursor-pointer flex gap-4 items-center px-4 border border-border w-[240px]',
|
||||
bankSelected === 2 && 'border-black'
|
||||
)}>
|
||||
<img src={SamanImage} className='w-10' />
|
||||
<div>
|
||||
<div>
|
||||
بانک پارسیان
|
||||
</div>
|
||||
<div className='text-xs mt-1 text-description'>
|
||||
تمام کارت های عضو شتاب
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-10 flex justify-end'>
|
||||
<Button
|
||||
label={t('wallet.pay')}
|
||||
className='w-[180px]'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Online
|
||||
@@ -0,0 +1,41 @@
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Input from '../../../components/Input'
|
||||
import UploadBox from '../../../components/UploadBox'
|
||||
import Button from '../../../components/Button'
|
||||
|
||||
const Sheba: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
return (
|
||||
<div className='mt-8 bg-white p-8 rounded-3xl'>
|
||||
<div>
|
||||
{t('wallet.pay_sheba')}
|
||||
</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
<Input
|
||||
label={t('wallet.amount')}
|
||||
placeholder={t('wallet.enter_sheba_deposit')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
<UploadBox
|
||||
label={t('wallet.upload_deposit_slip')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-10 flex justify-end'>
|
||||
<Button
|
||||
label={t('wallet.submit_slip')}
|
||||
className='w-[180px]'
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sheba
|
||||
Reference in New Issue
Block a user