1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
import getFileBase64 from '@/core/utils/getFileBase64'
import { yupResolver } from '@hookform/resolvers/yup'
import React, { useRef } from 'react'
import ReCAPTCHA from 'react-google-recaptcha'
import { Controller, useForm } from 'react-hook-form'
import { toast } from 'react-hot-toast'
import * as Yup from 'yup'
const CreatePembayaranTempo = () => {
const {
register,
handleSubmit,
formState: { errors }
} = useForm({
resolver: yupResolver(validationSchema),
defaultValues
})
const recaptchaRef = useRef(null)
const npwp = useRef(null)
const onSubmitHandler = async (values) => {
const recaptchaValue = recaptchaRef.current.getValue()
if (!recaptchaValue) {
toast.error('Catcha harus diisi')
return
}
const data = {
...values,
name : 'Pengajuan Pembayaran Tempo - ' + values.name,
file_npwp : values.npwp.length > 0 ? await getFileBase64(values.npwp) : ''
}
console.log('ini adalah data', data)
// const address = await createLeadsApi({ data })
// if (address?.id) {
// toast.success('Berhasil menambahkan alamat')
// router.back()
// }
}
return (
<div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
<h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Pembayaran Tempo</h1>
<div className='w-full p-4 bg-white border border-gray_r-6 rounded'>
<form onSubmit={handleSubmit(onSubmitHandler)}>
<div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
<div>
<label className='form-label mb-2'>Alamat Email *</label>
<input
{...register('email')}
placeholder='contoh@email.com'
type='email'
className='form-input'
/>
<div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div>
</div>
</div>
<div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
<div>
<label className='form-label mb-2'>Nama Lengkap *</label>
<input
{...register('name')}
placeholder='Jhon Doe'
type='text'
className='form-input'
/>
<div className='text-caption-2 text-danger-500 mt-1'>{errors.name?.message}</div>
</div>
</div>
<div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
<div>
<label className='form-label mb-2'>Nomor Pokok Wajib Pajak (NPWP) *</label>
<input {...register('npwp')} type='file' className='form-input'/>
<div className='text-caption-2 text-danger-500 mt-1'>{errors.npwp?.message}</div>
</div>
</div>
<div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
<div>
<label className='form-label mb-2'>Nomor Induk Berusaha (NIB) atau</label>
<input {...register('nib')} type='file' className='form-input' />
</div>
</div>
<div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
<div>
<label className='form-label mb-2'>Tanda Daftar Perusahaan (TDP) atau</label>
<input {...register('tdp')} type='file' className='form-input' />
{/* <div className='text-caption-2 text-danger-500 mt-1'>{errors.name?.message}</div> */}
</div>
</div>
<div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
<div>
<label className='form-label mb-2'>Surat Izin Usaha Perdagangan (SIUP) atau</label>
<input {...register('siup')} type='file' className='form-input' />
{/* <div className='text-caption-2 text-danger-500 mt-1'>{errors.name?.message}</div> */}
</div>
</div>
<div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
<div>
<ReCAPTCHA ref={recaptchaRef} sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} />
</div>
</div>
<div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
<div>
<button type='submit' className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'>
Simpan
</button>
</div>
</div>
</form>
</div>
</div>
)
}
const validationSchema = Yup.object().shape({
name: Yup.string().min(3, 'Minimal 3 karakter').required('Harus di-isi'),
email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'),
npwp: Yup.string().required('Harus di-isi')
})
const defaultValues = {
name: '',
email: '',
npwp: '',
siup: '',
tdp: '',
nib: ''
}
export default CreatePembayaranTempo
|
