"use client" import Link from "next/link" import Image from "next/image" import { useEffect, useState } from "react" import { Modal } from 'flowbite-react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faSearch } from "@fortawesome/free-solid-svg-icons"; import { useRouter } from "next/navigation"; import { dataWilayah } from "@/app/library/loadJson"; import PhoneInput from "react-phone-number-input"; import OtpInput from 'react-otp-input'; const wilayah = dataWilayah(); // const CommentTag = ({text, children}) => { // const ref = useRef(); // useEffect(() => { // let d = document.createElement('div') // let g = ref.current // console.log(g) // }, [text]); // return (<> //
//
// {children} //
//
// // ); // }; export default function HTMLComment({ children }) { return (<>
{children}
) } export const Toolbar = function () { const [find, setfind] = useState("sale"); const [fTipe, setfTipe] = useState("rumah"); const [fJual, setfJual] = useState(0); const [fMin, setfMin] = useState("0"); const [fMax, setfMax] = useState("0"); const [fLokasi, setfLokasi] = useState(""); const [fNama, setfNama] = useState(""); const [fHP, setfHP] = useState(""); const [fKPR, setfKPR] = useState(0); const [openModal, setOpenModal] = useState(false); const route = useRouter(); const [showWa, setShowWa] = useState(false); const [showSuc, setshowSuc] = useState(false); const [otp, setOtp] = useState(''); let [countDown, setCountDown] = useState(0); const searchButton = function(){ goSeach(document.getElementById("cari").value); } const goSeach = function(value){ value = encodeURI( value.toLowerCase().replace(/\ /g, '-') ); if (value!=='') { route.push('/'+find+'?keyword='+value); } else { route.push('/'+find); } } const findClick = (label) => { setfind(label); }; const keyDownAction = function(event){ if (event.code == 'NumpadEnter' || event.code == 'Enter'){ goSeach(event.target.value); } } useEffect(() => { (function callingBack(){ let timeout = document.querySelector('.tag-off'); let timein = document.querySelector('.tag-on'); if(timein){ if(timeout){ timeout.outerHTML = '' timein.outerHTML = '' } }else{ setTimeout(()=>{ callingBack(); },500) } })() const intervalId = setInterval(() => { if (countDown > -1) { countDown--; setCountDown(countDown); } }, 1000); return () => clearInterval(intervalId); }) const cariPro = async (e) => { e.preventDefault(); try { const ress = await fetch('/api/finding', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({fTipe,fJual,fMin,fMax,fLokasi,fNama,fHP,fKPR}), }); if (ress.ok) { let data = await fetch('https://app.rumahjo.com/token/request/' + fHP.replace(/\+/g, "")); let dataJson = await data.json(); if (dataJson.status) { setCountDown(60); } if (dataJson.message==='user verified') { setshowSuc(true); } setShowWa(true); } else { console.error('Error menyimpan data.'); } } catch (error) { console.error('Error menyimpan data :', error); } } return(<>
setOpenModal(false)}> Spesifikasi properti seperti apa yang ingin kamu cari?
{ !showWa ?
Tipe Properti *
  • { setfJual(0); }} required />
  • { setfJual(1); }} />
  • Harga Minimal *
    Rp
  • Harga Maksimal *
    Rp
Lokasi *
Nama *
  • { setfNama(e.target.value); }} name="nama" className="bg-white border rounded-lg" placeholder="Tulis Nama" required={true}/>
Nomor Telepon *
{ e.target.checked ? setfKPR(1):setfKPR(0); }} id="link-checkbox" type="checkbox" className="w-4 h-4 ml-[4px] mt-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"/>
: !showSuc ? <>
-} renderInput={(props) => } />
{otp.length == 6 ? : <> } {countDown > 0 ?
Silahkan inputkan token yang dikirim ke WA anda sebelum {countDown} Detik
: }
: <>
Terimakasih telah menggunakan fitur carikan properti,
kami akan menghubungi anda di jam operasional Rumahjo
}
) }