import React, { useState, useEffect } from "react"; import Button from '@mui/material/Button'; import img_visa_mastercard from "./../mysy_img/visa_mastercard.png"; import img_logo_stripe from "./../mysy_img/logo-stripe-secure.png"; import img_paypal from "./../mysy_img/paypal.png"; import axios from "axios"; import Box from '@mui/material/Box'; import TextField from '@mui/material/TextField'; import { useHistory } from "react-router-dom"; import { getCookie } from 'react-use-cookie'; import InputAdornment from '@mui/material/InputAdornment'; import IconButton from '@mui/material/IconButton'; import Visibility from '@mui/icons-material/Visibility'; import VisibilityOff from '@mui/icons-material/VisibilityOff'; import FormControl from '@mui/material/FormControl'; import InputLabel from '@mui/material/InputLabel'; import OutlinedInput from '@mui/material/OutlinedInput'; function PaymentMethodeNoConnect(props) { const [menu, setmenu] = useState("cb"); const [myApiResponse, setmyApiResponse] = useState(""); const [result, setResult] = useState(""); const [paymentadded, setpaymentadded] = useState(""); function menu_sepa() { setmenu("sepa"); } function menu_cb() { setmenu("cb"); } function handleChange1(prop) { return (event) => { setValuesPass1({ ...valuesPass1, [prop]: event.target.value }); }; } function handleChange2(prop) { return (event) => { setValuesPass2({ ...valuesPass2, [prop]: event.target.value }); }; } const [currentpawdvisible, setcurrentpawdvisible] = useState(false); const [currentpawdvisible2, setcurrentpawdvisible2] = useState(false); const handleClickShowPassword_current_pwd = () => { var filtre2_value = document.getElementsByName("pwd")[0].value; if (currentpawdvisible == false) { document.getElementsByName("pwd")[0].type = "text"; setcurrentpawdvisible(true); } else if (currentpawdvisible == true) { document.getElementsByName("pwd")[0].type = "password"; setcurrentpawdvisible(false); } }; const handleClickShowPassword_current_pwd2 = () => { var filtre2_value = document.getElementsByName("secret")[0].value; if (currentpawdvisible2 == false) { document.getElementsByName("secret")[0].type = "text"; setcurrentpawdvisible2(true); } else if (currentpawdvisible2 == true) { document.getElementsByName("secret")[0].type = "password"; setcurrentpawdvisible2(false); } }; const [values, setValues] = React.useState({ password: '', showPassword: false, }); const [valuesPass1, setValuesPass1] = React.useState({ password1: '', showPassword1: false, }); const [valuesPass2, setValuesPass2] = React.useState({ password2: '', showPassword2: false, }); // recuperation et gestion du token utilisateur const history = useHistory(); const stored_part = getCookie('tokenmysypart'); const [RecordData_api, setRecordData_api] = useState(); const [RecordData_result, setRecordData_result] = useState(); const [RecordData_message, setRecordData_message] = useState(); function RecordData() { const formData = new FormData(); const url = process.env.REACT_APP_API_URL + "myclass/api/add_payement_mode/"; var pwd = document.getElementsByName("pwd")[0].value; var secret = document.getElementsByName("secret")[0].value; formData.append('token', stored_part); formData.append('type', String(menu)); formData.append('pwd', pwd); formData.append('secret', secret); //console.log(" menu = ", menu); if (String(menu) === String("cb")) { var nom_carte = document.getElementsByName("nom_carte")[0].value; var num_carte = document.getElementsByName("num_carte")[0].value; var date_exp_carte = document.getElementsByName("date_exp")[0].value; var cvv_carte = document.getElementsByName("cvv")[0].value; formData.append('nom_carte', nom_carte); formData.append('num_carte', num_carte); formData.append('date_exp_carte', date_exp_carte); formData.append('cvv_carte', cvv_carte); } fetch( url, { method: 'POST', body: formData, } ) .then((response) => response.json()) .then((result) => { //console.log(' paymenadded_api Success:', result['message'], "result['status'] = ", result['status']); setRecordData_api(result['status']); if (String(result['status']) === String("true")) { setpaymentadded("1"); }else if (String(result['status']) === String("Err_Connexion")) { alert('Erreur: ' + result['message']); history.push("/Connexion"); } else { setpaymentadded("0"); } }) .catch((error) => { console.error('Error:', error); setRecordData_api("false"); setpaymentadded("0"); }); }; const [mynote, setmynote] = useState(""); function CheckCardNumber(e) { const val = e.target.value; if (!isNaN(val) && String(val).length <= 16) { setmynote(val); } else { document.getElementById("num_carte").value = mynote; } } const [dateexp, setdateexp] = useState(""); function Onleave_expdate_exp(e) { const regex = /^\d{2}\/\d{2}$/; var val = document.getElementById("date_exp").value const found = val.match(regex); if (!found) { setdateexp(""); document.getElementById("date_exp").value = ""; } } function Checkdate_expdate_exp(e) { const val = e.target.value; if (String(val).length < 6) { setdateexp(val); } if (String(val).length == 6) { const regex = /^\d{2}\/\d{2}$/; const found = dateexp.match(regex); if (!found) { alert(" pas bon "); } } if (String(val).length > 6) { document.getElementById("date_exp").value = dateexp; } } useEffect(() => { enablefieds1(); window.scrollTo({ top: 0, behavior: "smooth", }); }, []); function enablefieds1() { document.getElementsByName("nom_carte")[0].disabled = false; document.getElementsByName("nom_carte")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("num_carte")[0].disabled = false; document.getElementsByName("num_carte")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("date_exp")[0].disabled = false; document.getElementsByName("date_exp")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("cvv")[0].disabled = false; document.getElementsByName("cvv")[0].style.backgroundColor = "#FFFFFF"; } return (
{String(paymentadded) === String("1") &&
Le mode de Paiement a été correctement ajouté {window.location.reload()}
} {String(paymentadded) === String("0") &&
Impossible d'ajouter/mettre à jour la carte. Merci de verifier vos informations. {result}
}
 
  :not(style)': { m: 1 }, width: '100%', }}>

 
Pour confirmer le changement, veuillez entrer votre mot de passe et votre clé sécrete
  :not(style)': { m: 1 }, width: '100%', }}> Mot de passe {currentpawdvisible ? : } } label="Mot de passe" inputProps={{ autoComplete: 'new-password', }} />
Clé secrete {currentpawdvisible2 ? : } } label="Clé secrete" />
(télécharger).
); } export default PaymentMethodeNoConnect;