ptb-fe/components/Main/DetailPT.js

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, Alert } 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: "",
		sendingOTP: false,
		newphone: "",

	}



	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

		if (this.state.newphone.length) {
			await createotp({ no_hp: this.state.newphone }, token)
		} else {
			await createotp({ no_hp: this.state.phone }, token)
		}



		this.setState({ modalPhone: false, modalOTP: true })
	}
	handleOTPagain = async () => {
		this.setState({ sendingOTP: true })
		const { token } = this.props
		await createotp({ no_hp: this.state.newphone }, token)
		this.setState({ modalPhone: false, modalOTP: true })
		setTimeout(() => {
			this.setState({
				sendingOTP: !this.state.sendingOTP
			});
		}, 5000);
	}
	otpClose = () => {
		this.setState({ modalOTP: false, ddselected: false, loadingProses: false, otp: "" })
	}
	handleSubmitOtp = async () => {
		const { token } = this.props
		const create = await createkontak({ otp: this.state.otp, no_hp: this.state.newphone }, 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: "" })
			window.location.reload(false);
		}

	}
	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.phone || this.state.newphone}
									onChange={newphone => this.setState({ newphone })} />
							</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">
												&nbsp; 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>
						{this.state.sendingOTP === true &&
							<div>
								<Alert color="warning">
									Berhasil Kirim Kode OTP
								</Alert>
							</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.newphone || this.state.phone}
							</p>
							<p className="  mt-3 ">
								Jika Anda belum menerima kode OTP, <span className=" btn-link" onClick={this.handleOTPagain}>kirimkan ulang kode OTP</span>
							</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">
									Simpan
								</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>
			</div>
		);
	}
}

const mapStateToProps = (state) => ({ user: state.user, token: state.token });
export default connect(mapStateToProps)(DetailPT);