|  | @@ -13,6 +13,8 @@ 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 Pemantauan extends Component {
 | 
	
	
		
			
				|  | @@ -26,6 +28,7 @@ class Pemantauan extends Component {
 | 
	
		
			
				|  |  |  			modalOTP: false,
 | 
	
		
			
				|  |  |  			otp: "",
 | 
	
		
			
				|  |  |  			phone: "",
 | 
	
		
			
				|  |  | +			loadingProses: false,
 | 
	
		
			
				|  |  |  			// closeVerifikasi:false,
 | 
	
		
			
				|  |  |  		};
 | 
	
		
			
				|  |  |  	}
 | 
	
	
		
			
				|  | @@ -37,8 +40,8 @@ class Pemantauan extends Component {
 | 
	
		
			
				|  |  |  		const kontakPT = await getkontakpt(token);
 | 
	
		
			
				|  |  |  		this.setState({ log, pt, kontakPT });
 | 
	
		
			
				|  |  |  		const closeverif = localStorage.getItem(("closeverif"))
 | 
	
		
			
				|  |  | -		if (kontakPT=== undefined && closeverif === null) {
 | 
	
		
			
				|  |  | -			this.setState({modalPhone:true})
 | 
	
		
			
				|  |  | +		if (kontakPT === undefined && closeverif === null) {
 | 
	
		
			
				|  |  | +			this.setState({ modalPhone: true })
 | 
	
		
			
				|  |  |  		}
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  	};
 | 
	
	
		
			
				|  | @@ -48,33 +51,40 @@ class Pemantauan extends Component {
 | 
	
		
			
				|  |  |  		localStorage.setItem("closeverif", "true");
 | 
	
		
			
				|  |  |  	}
 | 
	
		
			
				|  |  |  	handleSubmitTelepon = async () => {
 | 
	
		
			
				|  |  | +		this.setState({ loadingProses: true })
 | 
	
		
			
				|  |  |  		const { token } = this.props
 | 
	
		
			
				|  |  | -		const create = createotp({ no_hp: this.state.phone }, token)
 | 
	
		
			
				|  |  | -		await toast.promise(create, {
 | 
	
		
			
				|  |  | -			pending: "Loading...",
 | 
	
		
			
				|  |  | -			// success: "Berhasil ",
 | 
	
		
			
				|  |  | -			error: "Error",
 | 
	
		
			
				|  |  | -		},)
 | 
	
		
			
				|  |  | +		await createotp({ no_hp: this.state.phone }, token)
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  		this.setState({ modalPhone: false, modalOTP: true })
 | 
	
		
			
				|  |  |  	}
 | 
	
		
			
				|  |  |  	handleSubmitOtp = async () => {
 | 
	
		
			
				|  |  |  		const { token } = this.props
 | 
	
		
			
				|  |  | -		const create = createkontak({ otp: this.state.otp, no_hp: this.state.phone }, token)
 | 
	
		
			
				|  |  | -		await toast.promise(create, {
 | 
	
		
			
				|  |  | -			pending: "Loading...",
 | 
	
		
			
				|  |  | -			success: "Success",
 | 
	
		
			
				|  |  | -			error: "Error",
 | 
	
		
			
				|  |  | -		},)
 | 
	
		
			
				|  |  | -		this.setState({ modalPhone: false, modalOTP: false })
 | 
	
		
			
				|  |  | +		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({ modalPhone: false, modalOTP: false })
 | 
	
		
			
				|  |  | +		  }
 | 
	
		
			
				|  |  | +	
 | 
	
		
			
				|  |  |  	}
 | 
	
		
			
				|  |  |  	render() {
 | 
	
		
			
				|  |  |  		const { log, pt } = this.state;
 | 
	
		
			
				|  |  | -		
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  		return (
 | 
	
		
			
				|  |  |  			<ContentWrapper unwrap>
 | 
	
		
			
				|  |  |  				{this.state.kontakPT === undefined &&
 | 
	
		
			
				|  |  | -					<Modal isOpen={ this.state.kontakPT === undefined && this.state.modalPhone} style={{ width: '400px' }} >
 | 
	
		
			
				|  |  | +					<Modal isOpen={this.state.kontakPT === undefined && this.state.modalPhone} style={{ width: '400px' }} >
 | 
	
		
			
				|  |  |  						<ModalBody>
 | 
	
		
			
				|  |  |  							<div className="modalLoginPT-a">
 | 
	
		
			
				|  |  |  								<img
 | 
	
	
		
			
				|  | @@ -104,9 +114,22 @@ class Pemantauan extends Component {
 | 
	
		
			
				|  |  |  									</span>
 | 
	
		
			
				|  |  |  								</Button>
 | 
	
		
			
				|  |  |  								<Button className="btn-login float-right mr-4" style={{ width: "40%" }} color onClick={this.handleSubmitTelepon}>
 | 
	
		
			
				|  |  | -									<span className=" font-color-white">
 | 
	
		
			
				|  |  | -										Kirim
 | 
	
		
			
				|  |  | -									</span>
 | 
	
		
			
				|  |  | +									{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">
 | 
	
		
			
				|  |  | +												Kirim
 | 
	
		
			
				|  |  | +											</span>
 | 
	
		
			
				|  |  | +										)}
 | 
	
		
			
				|  |  |  								</Button>
 | 
	
		
			
				|  |  |  							</div>
 | 
	
		
			
				|  |  |  						</ModalBody>
 |