325 lines
14 KiB
React
325 lines
14 KiB
React
import AppContainer from '../../appContainer'
|
||
import { BsFillTelephoneFill } from 'react-icons/bs'
|
||
import { FaMapMarkerAlt } from 'react-icons/fa'
|
||
import { BsWhatsapp } from 'react-icons/bs'
|
||
import { BsTwitter } from 'react-icons/bs'
|
||
import { AiOutlineInstagram } from 'react-icons/ai'
|
||
import toast, { Toaster } from 'react-hot-toast'
|
||
import axios from 'axios'
|
||
import { AppProduction } from '../../../lib/api'
|
||
import { useState } from 'react'
|
||
import { MDBRadio } from 'mdb-react-ui-kit'
|
||
import NumberFormat from 'react-number-format'
|
||
import Link from 'next/link'
|
||
import { Box, Button, Center, Flex, Heading, Input, Select, Textarea, Stack } from '@chakra-ui/react'
|
||
import { useForm } from 'react-hook-form'
|
||
import moment from 'moment-jalaali'
|
||
|
||
const StockSalesContainer = () => {
|
||
const [userName, setUserName] = useState()
|
||
const [national_code, setNational_code] = useState()
|
||
const [mobileNumber, setMobileNumber] = useState()
|
||
const [numberStock, setNumberStock] = useState('')
|
||
const [stockType, setStockType] = useState(null)
|
||
const [InvestmentType, setInvestmentType] = useState('1')
|
||
const [code, setCode] = useState('1')
|
||
|
||
|
||
const [InvestmentPrice, setInvestmentPrice] = useState('0')
|
||
|
||
const [Loading, setLoading] = useState(false)
|
||
const [showSuccessSubmitForm, setShowSuccessSubmitForm] = useState(false)
|
||
const [textareaValue, setTextareaValue] = useState('');
|
||
|
||
const {
|
||
register,
|
||
handleSubmit,
|
||
watch,
|
||
formState: { errors }
|
||
} = useForm()
|
||
|
||
const SubmitForm = () => {
|
||
setLoading(true)
|
||
toast.loading('در حال ثبت درخواست شما')
|
||
axios
|
||
.post(`${AppProduction}public/website/request`, {
|
||
name: userName,
|
||
national_code: national_code,
|
||
stock_count: numberStock,
|
||
investment_price: InvestmentPrice,
|
||
investment_type: InvestmentType,
|
||
type: "buy-stock",
|
||
stock_type: stockType,
|
||
description: textareaValue,
|
||
mobile_number: mobileNumber
|
||
// name: name,
|
||
// mobile_number: mobileNumber,
|
||
})
|
||
.then(async res => {
|
||
setLoading(false)
|
||
setShowSuccessSubmitForm(true)
|
||
toast.remove()
|
||
toast.success('درخواست شما ثبت شد به زودی کار شناسان ما به شما تماس می گیرند')
|
||
console.log('res', res.data.request)
|
||
setCode(res.data.request.rrn)
|
||
})
|
||
.catch(async err => {
|
||
setLoading(false)
|
||
toast.remove()
|
||
await toast.error(err.response.data.err)
|
||
await console.log('err', err)
|
||
})
|
||
}
|
||
|
||
return (
|
||
<AppContainer title={' درخواست خرید سهام'}>
|
||
{!showSuccessSubmitForm ? (
|
||
<div id='callstock' className=' text-center py-8 m '>
|
||
<h1 className='text-[#3c3c3c] text-[28px] font-bold mt-5 '> درخواست خرید سهام </h1>
|
||
<div className="flex justify-center">
|
||
<div
|
||
className='mt-6 flex lg:w-6/12 md:w-full sm:w-full sm:mx-1 flex-col justify-center items-center gap-y-4 bg-teal-400 p-2 py-4 rounded-lg'
|
||
>
|
||
<span className='text-white drop-shadow-md text-right lg:text-2xl sm:text-sm font-bold'>
|
||
قیمت آخرین سهام معامله شده :250,000,000 تومان
|
||
</span>
|
||
<br />
|
||
<br />
|
||
تاریخ آخرین قیمت معامله شده : {moment().format('jYYYY/jM/jD')}
|
||
</div>
|
||
</div>
|
||
<Toaster />
|
||
<div className='bg-white shadow-lg w-10/12 mx-auto rounded-[20px] grid lg:grid-cols-9 mt-8 SALES'>
|
||
<div className='about lg:col-span-4 '>
|
||
<div className='bg-[#014258] overflow-hidden rounded-[20px] h-full lg:h-[650px] m-[0.8rem] text-end'>
|
||
<div className='addressAbout pr-8 pl-8 pt-[1.8rem]'>
|
||
<h4 className='text-white font-bold md:text-xl '>ارتباط با واحد سهام</h4>
|
||
<p className='text-white font-light md:text-lg pt-[0.5rem]'>
|
||
بعد از ارسال درخواست کارشناسان طی 24 ساعت با شما تماس خواهند گرفت
|
||
</p>
|
||
|
||
<div className='address'>
|
||
<div className=''>
|
||
<span className='md:text-base font-normal text-white pr-[0.5rem]'>021-53457000</span>
|
||
<BsFillTelephoneFill className='text-[#57C5C6] text-[0.9rem] md:text-[1.3rem]' />
|
||
</div>
|
||
|
||
<div className='flex justify-end xl:justify-start mt-4'>
|
||
<span className='md:text-base font-normal text-white pr-[0.5rem]'>
|
||
تهران ، شهر جدید پرند، بلوار شهیدقاسم سلیمانی، انتهای فاز 5 ،نبش بلوار رسول اکرم
|
||
</span>
|
||
<FaMapMarkerAlt className='text-[#57C5C6] text-[2rem] md:text-[1.3rem] ' />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='contentFooter grid lg:grid-cols-5 xl:grid-cols-2'>
|
||
<div className='Socail lg:col-span-2 xl:col-span-1 justify-center lg:justify-start text-center lg:h-[400px] items-center flex m-4'>
|
||
<div className='socailS text-white text-[1.2rem] hover:bg-[#57C5C6]'>
|
||
<BsWhatsapp className='socail' />
|
||
</div>
|
||
|
||
<div className='socailS text-white mx-[0.5rem] text-[1.2rem] hover:bg-[#57C5C6]'>
|
||
<BsTwitter className='socail' />
|
||
</div>
|
||
|
||
<div className='socailS text-white text-[1.2rem] hover:bg-[#57C5C6]'>
|
||
<AiOutlineInstagram className='socail' />
|
||
</div>
|
||
</div>
|
||
|
||
<div className='circle1 lg:col-span-3 xl:col-span-1'>
|
||
<div className='circle2'></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='rightForm lg:col-span-5 p-8 '>
|
||
<div className=''>
|
||
<label className='text-[#3c3c3c] text-base md:text-lg font-medium hover:text-[#57C5C6] ' for='userName'>
|
||
نام و نام خانوادگی
|
||
</label>
|
||
<div className='text-end'>
|
||
<input
|
||
onChange={e => setUserName(e.target.value)}
|
||
className='outline-0 bg-transparent w-11/12 text-end pt-3
|
||
border-b border-solid border-[#65656540] border-r-0 border-l-0 border-t-0 hover:border-[#57C5C6] '
|
||
id='username'
|
||
type='text'
|
||
placeHolder=' نام و نام خانوادگی راوارد کنید'
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='mt-9'>
|
||
<label className='text-[#3c3c3c] text-base md:text-lg font-medium hover:text-[#57C5C6] ' for='national_code'>
|
||
کد ملی
|
||
</label>
|
||
<div className='text-end'>
|
||
<input
|
||
onChange={e => setNational_code(e.target.value)}
|
||
className='outline-0 bg-transparent w-11/12 text-end pt-3
|
||
border-b border-solid border-[#65656540] border-r-0 border-l-0 border-t-0 hover:border-[#57C5C6] '
|
||
id='name'
|
||
type='text'
|
||
placeHolder=' کد ملی را وارد کنید'
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className='mt-9'>
|
||
<label className='text-[#3c3c3c] text-base md:text-lg font-medium hover:text-[#57C5C6] ' for='national_code'>
|
||
شماره موبایل
|
||
</label>
|
||
<div className='text-end'>
|
||
<input
|
||
onChange={e => setMobileNumber(e.target.value)}
|
||
className='outline-0 bg-transparent w-11/12 text-end pt-3
|
||
border-b border-solid border-[#65656540] border-r-0 border-l-0 border-t-0 hover:border-[#57C5C6] '
|
||
id='name'
|
||
type='text'
|
||
placeHolder=' شماره موبایل وارد کنید'
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className='mt-9'>
|
||
<label className='text-[#3c3c3c] text-base md:text-lg font-medium hover:text-[#57C5C6] ' for='stockType'>
|
||
نوع سهام :
|
||
</label>
|
||
<Select dir={'rtl'} onChange={e => setStockType(e.target.value)}>
|
||
<option value=''>انتخاب کنید</option>
|
||
<option value='1'> عادی </option>
|
||
<option value='2'> تخصصی </option>
|
||
</Select>
|
||
</div>
|
||
|
||
<div className='mt-9'>
|
||
<label
|
||
className='text-[#3c3c3c] text-base md:text-lg font-medium hover:text-[#57C5C6] '
|
||
for='numberStock'
|
||
>
|
||
تعداد سهام
|
||
</label>
|
||
<div className='text-end'>
|
||
<input
|
||
onChange={e => setNumberStock(e.target.value)}
|
||
className='outline-0 bg-transparent w-11/12 text-end pt-3
|
||
border-b border-solid border-[#65656540] border-r-0 border-l-0 border-t-0 hover:border-[#57C5C6] pt-2 '
|
||
id='phone'
|
||
type='text'
|
||
placeHolder='تعداد سهامی که قصد خرید آن را دارید'
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='mt-9'>
|
||
<label className='text-[#3c3c3c] text-base md:text-lg font-medium hover:text-[#57C5C6] ' for='buyStock'>
|
||
شرایط پرداخت
|
||
</label>
|
||
<div className='text-end flex sm:flex-col lg:flex-row sm:items-end sm:gap-y-4 justify-end items-center mt-3'>
|
||
<div style={{ marginLeft: 20 }} className="ml-5'">
|
||
<MDBRadio
|
||
onClick={() => setInvestmentType(4)}
|
||
name='flexRadioDefault'
|
||
id='flexRadioDefault4'
|
||
label=' تهاتر'
|
||
defaultChecked
|
||
/>
|
||
</div>
|
||
|
||
<div style={{ marginLeft: 20 }} className="ml-5'">
|
||
<MDBRadio
|
||
onClick={() => setInvestmentType(3)}
|
||
name='flexRadioDefault'
|
||
id='flexRadioDefault3'
|
||
label='نقد و اقساط'
|
||
defaultChecked
|
||
/>
|
||
</div>
|
||
|
||
<div style={{ marginLeft: 20 }} className="ml-5'">
|
||
<MDBRadio
|
||
onClick={() => setInvestmentType(2)}
|
||
name='flexRadioDefault'
|
||
id='flexRadioDefault2'
|
||
label=' اقساط'
|
||
defaultChecked
|
||
/>
|
||
</div>
|
||
|
||
<div className="ml-5'" style={{ marginLeft: 20 }}>
|
||
<MDBRadio
|
||
onClick={() => setInvestmentType(1)}
|
||
name='flexRadioDefault'
|
||
id='flexRadioDefault1'
|
||
label='نقد '
|
||
defaultChecked
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='mt-2'>
|
||
{InvestmentType === 4 && (
|
||
<Textarea
|
||
value={textareaValue}
|
||
onChange={(e) => {
|
||
setTextareaValue(e.target.value)
|
||
}}
|
||
|
||
style={{ textAlign: 'right' }} placeholder='....شرح مال مورد معوض' size='sm' />
|
||
)}
|
||
</div>
|
||
|
||
{/* <div className='mt-9 '>
|
||
<label className='text-[#3c3c3c] text-base md:text-lg font-medium hover:text-[#57C5C6] ' for='money'>
|
||
مبلغ پیشنهای شما برای فروش سهام
|
||
</label>
|
||
<div className='text-end'>
|
||
<NumberFormat
|
||
onValueChange={values => {
|
||
const { formattedValue, value } = values
|
||
setInvestmentPrice(value)
|
||
}}
|
||
className='outline-0 bg-transparent w-11/12 text-end pt-3
|
||
border-b border-solid border-[#65656540] border-r-0 border-l-0 border-t-0 hover:border-[#57C5C6] '
|
||
type={'text'}
|
||
prefix={'تومان'}
|
||
thousandSeparator={true}
|
||
dir={'ltr'}
|
||
placeHolder=' مبلغ مورد نظر خود برای فروش سهام وارد نمایید'
|
||
/>
|
||
</div>
|
||
</div> */}
|
||
|
||
<div className='mt-[6rem] mb-2'>
|
||
<button
|
||
onClick={SubmitForm}
|
||
className='py-[1rem] outline-0 border-0 px-[2rem] bg-[#014258] rounded-[10px] text-white text-[20px] font-bold '
|
||
>
|
||
{!Loading ? 'ثبت درخواست' : 'در حال ثبت درخواست'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className='my-44 flex justify-center flex-col items-center'>
|
||
<h3 className='text-green-600'>درخواست شما ثبت شد به زودی کار شناسان ما به شما تماس می گیرند</h3>
|
||
<br />
|
||
کد پیگیری درخواست شما :
|
||
{code}
|
||
<div className='mt-[6rem] mb-2'>
|
||
<Link href={'/stock-unit'}>
|
||
<button className='py-[1rem] outline-0 border-0 px-[2rem] bg-[#014258] rounded-[10px] text-white text-[20px] font-bold '>
|
||
بازگشت به امور سهام
|
||
</button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</AppContainer>
|
||
)
|
||
}
|
||
|
||
export default StockSalesContainer
|