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
|
import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
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 onSubmitHandler = async (values) => {
const recaptchaValue = recaptchaRef.current.getValue()
if (!recaptchaValue) {
toast.error('Catcha harus diisi')
return
}
const data = {
...values
}
const address = await createAddressApi({ 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
|
