You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

104 lines
3.5 KiB
JavaScript

import React, { useState } from 'react'
import { Head, useForm, router, usePage } from '@inertiajs/react'
import CustomerLayout from '@/Layouts/CustomerLayout'
import FormFile from '@/Components/FormFile'
import { HiCheckCircle, HiClock } from 'react-icons/hi2'
// 0 yuk verifikasi
const VerificationForm = () => {
const {
props: {
auth: { user },
},
} = usePage()
const [show, setShow] = useState(false)
const { setData, post, errors } = useForm({ image: null })
const handleSubmit = () => {
post(route('customer.verification'))
}
return (
<>
<div className="px-4 text-gray-400">
upgrade akun kamu untuk mendapatkan banefit lebih, cukup lakukan
verifikasi data dengan upload foto KTP kamu
</div>
{show === false ? (
<div
className="w-full px-4 mt-10"
onClick={() => setShow(true)}
>
<div className="py-3 px-4 rounded-full border bg-blue-600 text-white hover:bg-gray-100 hover:text-black">
Verifikasi
</div>
</div>
) : (
<div className="w-full flex flex-col px-5">
<FormFile
label="KTP"
onChange={(e) => setData('image', e.target.files[0])}
error={errors.image}
preview={
<img
src={`${user.identity_image_url}`}
className="w-full object-fill h-48 mb-1 "
alt="ktp image"
loading="lazy"
/>
}
/>
<div
className="py-3 px-4 rounded-full border bg-blue-600 text-white hover:bg-gray-100 hover:text-black"
onClick={() => handleSubmit()}
>
Upload
</div>
</div>
)}
</>
)
}
// 1 verified
const Verified = () => {
return (
<div className="flex flex-col w-full items-center my-auto">
<HiCheckCircle className="h-32 w-32 text-green-500" />
<div className="font-bold text-lg px-10 pt-5 text-center">
Akun anda berhasil terverifikasi
</div>
</div>
)
}
// 2 your data is in review
const VerificationInProgress = () => {
return (
<div className="flex flex-col w-full items-center my-auto">
<HiClock className="h-32 w-32 text-gray-400 border rounded-full border-gray-600" />
<div className="font-bold text-lg px-10 pt-5 text-center">
Data anda sedang kami proses untuk verifikasi
</div>
</div>
)
}
export default function Index({ auth: { user } }) {
return (
<CustomerLayout>
<Head title="Upgrade Member" />
<div className="flex flex-col min-h-[calc(95dvh)]">
<div className="px-4 pt-10 text-2xl font-bold">
Upgrade Member
</div>
{+user.identity_verified === 0 && <VerificationForm />}
{+user.identity_verified === 1 && <Verified />}
{+user.identity_verified === 2 && <VerificationInProgress />}
</div>
</CustomerLayout>
)
}