|  | @@ -1,31 +1,232 @@
 | 
	
		
			
				|  |  | -function DetailPT({ data }) {
 | 
	
		
			
				|  |  | -	return (
 | 
	
		
			
				|  |  | -		<div className="card card-default">
 | 
	
		
			
				|  |  | -			<div className="card-body">
 | 
	
		
			
				|  |  | -				<div className="text-center">
 | 
	
		
			
				|  |  | -					<h3 className="mt-0">{data.nama}</h3>
 | 
	
		
			
				|  |  | -					<p>{data.sk_pendirian}</p>
 | 
	
		
			
				|  |  | -					<p>Pembina: {data.pembina.nama}</p>
 | 
	
		
			
				|  |  | -					<p>{`${data.alamat.jalan} ${data.alamat.rt ? `rt ${data.alamat.rt}` : ""} ${data.alamat.rw ? `rt ${data.alamat.rw}` : ""}, ${data.alamat.kab_kota.nama}, ${data.propinsi.nama}`}</p>
 | 
	
		
			
				|  |  | +import React, { Component } from "react";
 | 
	
		
			
				|  |  | +import ContentWrapper from "@/components/Layout/ContentWrapper";
 | 
	
		
			
				|  |  | +import Header from "@/components/Main/Header";
 | 
	
		
			
				|  |  | +import { getLogPT } from "@/actions/log";
 | 
	
		
			
				|  |  | +import { getPT } from "@/actions/PT";
 | 
	
		
			
				|  |  | +import { Row, Col, ModalHeader, ModalBody, ModalFooter, Modal, FormFeedback, Button } from "reactstrap";
 | 
	
		
			
				|  |  | +import Timeline from "@/components/Main/Timeline";
 | 
	
		
			
				|  |  | +import { connect } from "react-redux";
 | 
	
		
			
				|  |  | +import Loader from "@/components/Common/Loader";
 | 
	
		
			
				|  |  | +import { createotp, getkontakpt, createkontak } from "../../actions/auth";
 | 
	
		
			
				|  |  | +import PhoneInput from 'react-phone-input-2'
 | 
	
		
			
				|  |  | +import 'react-phone-input-2/lib/style.css'
 | 
	
		
			
				|  |  | +import OtpInput from 'react-otp-input';
 | 
	
		
			
				|  |  | +import { ToastContainer, toast } from "react-toastify";
 | 
	
		
			
				|  |  | +import swal from "sweetalert2";
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +class DetailPT extends Component {
 | 
	
		
			
				|  |  | +	state = {
 | 
	
		
			
				|  |  | +		phone: "",
 | 
	
		
			
				|  |  | +		ddselected: false,
 | 
	
		
			
				|  |  | +		modalOTP: false,
 | 
	
		
			
				|  |  | +		loadingProses: false,
 | 
	
		
			
				|  |  | +		otp: ""
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +	componentDidMount = async () => {
 | 
	
		
			
				|  |  | +		const { token } = this.props;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		const kontakPT = await getkontakpt(token);
 | 
	
		
			
				|  |  | +		const oldPhone = kontakPT?.data.map((data) => (data.no_hp)).toString()
 | 
	
		
			
				|  |  | +		if (oldPhone) {
 | 
	
		
			
				|  |  | +			this.setState({ phone: oldPhone })
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +	OpenEditNoTelp = () => this.setState({
 | 
	
		
			
				|  |  | +		ddselected: !this.state.ddselected
 | 
	
		
			
				|  |  | +	})
 | 
	
		
			
				|  |  | +	handleSubmitTelepon = async () => {
 | 
	
		
			
				|  |  | +		this.setState({ loadingProses: true })
 | 
	
		
			
				|  |  | +		const { token } = this.props
 | 
	
		
			
				|  |  | +		await createotp({ no_hp: this.state.phone }, token)
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		this.setState({ modalPhone: false, modalOTP: true })
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +	otpClose = () => {
 | 
	
		
			
				|  |  | +		this.setState({ modalOTP: false, ddselected: false, loadingProses: false, otp: "" })
 | 
	
		
			
				|  |  | +		// localStorage.setItem("closeverif", "true");
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +	handleSubmitOtp = async () => {
 | 
	
		
			
				|  |  | +		const { token } = this.props
 | 
	
		
			
				|  |  | +		const create = await createkontak({ otp: this.state.otp, no_hp: this.state.phone }, token)
 | 
	
		
			
				|  |  | +		if (create.error) {
 | 
	
		
			
				|  |  | +			swal.fire({
 | 
	
		
			
				|  |  | +				title: create.error.message,
 | 
	
		
			
				|  |  | +				icon: "error",
 | 
	
		
			
				|  |  | +				content: create.error.message,
 | 
	
		
			
				|  |  | +				confirmButtonColor: "#3e3a8e",
 | 
	
		
			
				|  |  | +			});
 | 
	
		
			
				|  |  | +		} else {
 | 
	
		
			
				|  |  | +			swal.fire({
 | 
	
		
			
				|  |  | +				title: "Data berhasil dikirim",
 | 
	
		
			
				|  |  | +				icon: "success",
 | 
	
		
			
				|  |  | +				confirmButtonColor: "#3e3a8e",
 | 
	
		
			
				|  |  | +			});
 | 
	
		
			
				|  |  | +			this.setState({ ddselected: false, modalOTP: false, loadingProses: false, otp: "" })
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +	render() {
 | 
	
		
			
				|  |  | +		const { data } = this.props;
 | 
	
		
			
				|  |  | +		return (
 | 
	
		
			
				|  |  | +			<div className="card card-default">
 | 
	
		
			
				|  |  | +				<Modal isOpen={this.state.ddselected} style={{ width: '400px' }}>
 | 
	
		
			
				|  |  | +					<ModalBody>
 | 
	
		
			
				|  |  | +						<div className="modalLoginPT-a">
 | 
	
		
			
				|  |  | +							<img
 | 
	
		
			
				|  |  | +								className="icon-triangle-onModalPT mt-0"
 | 
	
		
			
				|  |  | +								src="/static/img/Frame_10.png"
 | 
	
		
			
				|  |  | +							></img>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +							<h4 className=" font-color-black mt-1">Edit Nomor Telepon Perguruan Tinggi</h4>
 | 
	
		
			
				|  |  | +						</div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +						<div className="modalLoginPT-b">
 | 
	
		
			
				|  |  | +							<label className=" font-weight-bold h6">
 | 
	
		
			
				|  |  | +								Nomor Telepon :
 | 
	
		
			
				|  |  | +							</label>
 | 
	
		
			
				|  |  | +							<div className="border-2">
 | 
	
		
			
				|  |  | +								<PhoneInput
 | 
	
		
			
				|  |  | +									country={'id'}
 | 
	
		
			
				|  |  | +									value={this.state.kontakPT?.data.map((data) => (data.no_hp)) || this.state.phone}
 | 
	
		
			
				|  |  | +									onChange={phone => this.setState({ phone })} />
 | 
	
		
			
				|  |  | +							</div>
 | 
	
		
			
				|  |  | +						</div>
 | 
	
		
			
				|  |  | +						<div className="">
 | 
	
		
			
				|  |  | +							<Button className="btn-v2 float-left mr-2 ml-4" style={{ width: "40%" }} color onClick={this.otpClose}>
 | 
	
		
			
				|  |  | +								<span className=" font-color-black">
 | 
	
		
			
				|  |  | +									Batal
 | 
	
		
			
				|  |  | +								</span>
 | 
	
		
			
				|  |  | +							</Button>
 | 
	
		
			
				|  |  | +							<Button className="btn-login float-right mr-4" style={{ width: "40%" }} color onClick={this.handleSubmitTelepon}>
 | 
	
		
			
				|  |  | +								{this.state.loadingProses ?
 | 
	
		
			
				|  |  | +									(
 | 
	
		
			
				|  |  | +										<div class="d-flex justify-content-center">
 | 
	
		
			
				|  |  | +											<span
 | 
	
		
			
				|  |  | +												class="spinner-border spinner-border-sm text-white"
 | 
	
		
			
				|  |  | +												role="status"
 | 
	
		
			
				|  |  | +											></span>
 | 
	
		
			
				|  |  | +											<span className="font-color-white">
 | 
	
		
			
				|  |  | +												  Diproses...
 | 
	
		
			
				|  |  | +											</span>
 | 
	
		
			
				|  |  | +										</div>
 | 
	
		
			
				|  |  | +									) : (
 | 
	
		
			
				|  |  | +										<span className="font-color-white">
 | 
	
		
			
				|  |  | +											Simpan
 | 
	
		
			
				|  |  | +										</span>
 | 
	
		
			
				|  |  | +									)}
 | 
	
		
			
				|  |  | +							</Button>
 | 
	
		
			
				|  |  | +						</div>
 | 
	
		
			
				|  |  | +					</ModalBody>
 | 
	
		
			
				|  |  | +				</Modal>
 | 
	
		
			
				|  |  | +				<Modal isOpen={this.state.modalOTP} style={{ width: '400px' }} >
 | 
	
		
			
				|  |  | +					<ModalBody>
 | 
	
		
			
				|  |  | +						<div className="modalLoginPT-a">
 | 
	
		
			
				|  |  | +							<img
 | 
	
		
			
				|  |  | +								className="icon-triangle-onModalPT mt-auto mb-auto"
 | 
	
		
			
				|  |  | +								src="/static/img/Frame_10.png"
 | 
	
		
			
				|  |  | +							></img>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +							<h3 className=" font-color-black">Masukan Kode OTP</h3>
 | 
	
		
			
				|  |  | +						</div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +						{/* <div className="modalLoginPT-b"> */}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +						<div className=" mt-5 mb-5">
 | 
	
		
			
				|  |  | +							<OtpInput
 | 
	
		
			
				|  |  | +								invalid={this.state.error}
 | 
	
		
			
				|  |  | +								value={this.state.otp}
 | 
	
		
			
				|  |  | +								onChange={(otp) => { this.setState({ otp }) }}
 | 
	
		
			
				|  |  | +								numInputs={4}
 | 
	
		
			
				|  |  | +								renderSeparator={<span className=" font-color-black font-weight-bold mr-2 ml-2">-</span>}
 | 
	
		
			
				|  |  | +								renderInput={(props) => <input {...props} style={{ width: "50px", height: "50px", textAlign: "center", marginLeft: "auto", marginRight: "auto", borderRadius: "7px", fontSize: "30px" }} />}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +							/>   <p className="  mt-3">
 | 
	
		
			
				|  |  | +								*Kode OTP terkirim ke nomor WA {this.state.phone}
 | 
	
		
			
				|  |  | +							</p>
 | 
	
		
			
				|  |  | +							<FormFeedback invalid={this.state.error}>
 | 
	
		
			
				|  |  | +								Kode verifikasi harus diisi
 | 
	
		
			
				|  |  | +							</FormFeedback>
 | 
	
		
			
				|  |  | +						</div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +						<div>
 | 
	
		
			
				|  |  | +							<Button className="btn-v2 float-left mr-2 ml-4" style={{ width: "40%" }} color onClick={this.otpClose}>
 | 
	
		
			
				|  |  | +								<span className=" font-color-black">
 | 
	
		
			
				|  |  | +									Batal
 | 
	
		
			
				|  |  | +								</span>
 | 
	
		
			
				|  |  | +							</Button>
 | 
	
		
			
				|  |  | +							<Button className="btn-login float-right mr-4" style={{ width: "40%" }} color onClick={this.handleSubmitOtp}
 | 
	
		
			
				|  |  | +							>
 | 
	
		
			
				|  |  | +								<span className=" font-color-white">
 | 
	
		
			
				|  |  | +									Kirim
 | 
	
		
			
				|  |  | +								</span>
 | 
	
		
			
				|  |  | +							</Button>
 | 
	
		
			
				|  |  | +						</div>
 | 
	
		
			
				|  |  | +					</ModalBody>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				</Modal>
 | 
	
		
			
				|  |  | +				<div className="card-body">
 | 
	
		
			
				|  |  | +					<div className="text-center">
 | 
	
		
			
				|  |  | +						<h3 className="mt-0">{data.nama}</h3>
 | 
	
		
			
				|  |  | +						<p>{data.sk_pendirian}</p>
 | 
	
		
			
				|  |  | +						<p>Pembina: {data.pembina.nama}</p>
 | 
	
		
			
				|  |  | +						<p>{`${data.alamat.jalan} ${data.alamat.rt ? `rt ${data.alamat.rt}` : ""} ${data.alamat.rw ? `rt ${data.alamat.rw}` : ""}, ${data.alamat.kab_kota.nama}, ${data.propinsi.nama}`}</p>
 | 
	
		
			
				|  |  | +					</div>
 | 
	
		
			
				|  |  | +					<hr />
 | 
	
		
			
				|  |  | +					<ul className="list-unstyled px-4">
 | 
	
		
			
				|  |  | +						<li>
 | 
	
		
			
				|  |  | +							<em className="fa fa-globe fa-fw mr-3"></em>
 | 
	
		
			
				|  |  | +							<a href={`https://${data.website}`}>{data.website}</a>
 | 
	
		
			
				|  |  | +						</li>
 | 
	
		
			
				|  |  | +						<li>
 | 
	
		
			
				|  |  | +							<em className="fa fa-phone fa-fw mr-3"></em>
 | 
	
		
			
				|  |  | +							{data.telepon}
 | 
	
		
			
				|  |  | +						</li>
 | 
	
		
			
				|  |  | +						<li>
 | 
	
		
			
				|  |  | +							<em className="fa fa-at fa-fw mr-3"></em>
 | 
	
		
			
				|  |  | +							<a href={`mailto:${data.email}`}>{data.email}</a>
 | 
	
		
			
				|  |  | +						</li>
 | 
	
		
			
				|  |  | +					</ul>
 | 
	
		
			
				|  |  | +					{this.props.user.role.id === 2022 ?
 | 
	
		
			
				|  |  | +						<div>
 | 
	
		
			
				|  |  | +							<hr />
 | 
	
		
			
				|  |  | +							<label >
 | 
	
		
			
				|  |  | +								Nomor Telepon :
 | 
	
		
			
				|  |  | +							</label>
 | 
	
		
			
				|  |  | +							<button onClick={this.OpenEditNoTelp} className=" float-right bg-transparent border-0 color-3e3a8e">
 | 
	
		
			
				|  |  | +								Edit
 | 
	
		
			
				|  |  | +							</button>
 | 
	
		
			
				|  |  | +							<div >
 | 
	
		
			
				|  |  | +								<div className=" no-hpPT mt-2">
 | 
	
		
			
				|  |  | +									<div className=" inline">
 | 
	
		
			
				|  |  | +										<span style={{ fontSize: "16px" }} className="  font-color-black font-weight-bold">
 | 
	
		
			
				|  |  | +											+62
 | 
	
		
			
				|  |  | +										</span>
 | 
	
		
			
				|  |  | +										<span style={{ width: "10px", position: "" }} >
 | 
	
		
			
				|  |  | +											<img style={{ width: "15px" }} src="/static/img/Down.png"></img>
 | 
	
		
			
				|  |  | +										</span>
 | 
	
		
			
				|  |  | +										<div style={{ fontSize: "14px" }} className=" inline ml-2 font-weight-normal font-color-black font-weight-bold">
 | 
	
		
			
				|  |  | +											{this.state.phone.substring(2, 20)}
 | 
	
		
			
				|  |  | +										</div>
 | 
	
		
			
				|  |  | +									</div>
 | 
	
		
			
				|  |  | +								</div>
 | 
	
		
			
				|  |  | +							</div>
 | 
	
		
			
				|  |  | +						</div>
 | 
	
		
			
				|  |  | +						: ""
 | 
	
		
			
				|  |  | +					}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  				</div>
 | 
	
		
			
				|  |  | -				<hr />
 | 
	
		
			
				|  |  | -				<ul className="list-unstyled px-4">
 | 
	
		
			
				|  |  | -					<li>
 | 
	
		
			
				|  |  | -						<em className="fa fa-globe fa-fw mr-3"></em>
 | 
	
		
			
				|  |  | -						<a href={`https://${data.website}`}>{data.website}</a>
 | 
	
		
			
				|  |  | -					</li>
 | 
	
		
			
				|  |  | -					<li>
 | 
	
		
			
				|  |  | -						<em className="fa fa-phone fa-fw mr-3"></em>
 | 
	
		
			
				|  |  | -						{data.telepon}
 | 
	
		
			
				|  |  | -					</li>
 | 
	
		
			
				|  |  | -					<li>
 | 
	
		
			
				|  |  | -						<em className="fa fa-at fa-fw mr-3"></em>
 | 
	
		
			
				|  |  | -						<a href={`mailto:${data.email}`}>{data.email}</a>
 | 
	
		
			
				|  |  | -					</li>
 | 
	
		
			
				|  |  | -				</ul>
 | 
	
		
			
				|  |  |  			</div>
 | 
	
		
			
				|  |  | -		</div>
 | 
	
		
			
				|  |  | -	);
 | 
	
		
			
				|  |  | +		);
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -export default DetailPT;
 | 
	
		
			
				|  |  | +const mapStateToProps = (state) => ({ user: state.user, token: state.token });
 | 
	
		
			
				|  |  | +export default connect(mapStateToProps)(DetailPT);
 | 
	
		
			
				|  |  | +
 |