From 5afea3b977b4804b03a432a595a127a0ef81b0b8 Mon Sep 17 00:00:00 2001 From: cherif Date: Tue, 24 Jan 2023 19:49:25 +0100 Subject: [PATCH] 24/01/23 - 19h --- src/App.js | 4 + src/components/Abonnement.js | 2 +- src/components/CheckOut.js | 66 +- src/components/OrderConfirmation.js | 16 +- src/components/OrderConfirmation_3DS.js | 176 +++ src/components/Partner.js | 59 +- src/pages/orderconfirmation_3DS.js | 19 + src/styles/components/_orderconfirmation.scss | 1299 +++++++++-------- 8 files changed, 974 insertions(+), 667 deletions(-) create mode 100644 src/components/OrderConfirmation_3DS.js create mode 100644 src/pages/orderconfirmation_3DS.js diff --git a/src/App.js b/src/App.js index 1301a50..65f6a8f 100644 --- a/src/App.js +++ b/src/App.js @@ -37,6 +37,7 @@ import GestionAdministrative from "./components/GestionAdministrative"; import Emargement from "./pages/emargementOk"; import Formation_Cartouche_Com from "./pages/recherche_cartouche_com"; import SeDesabonner from './pages/sedesabonner'; +import OrderConfirmation_3DS from "./pages/orderconfirmation_3DS"; function App() { @@ -73,6 +74,8 @@ function App() { + + @@ -95,6 +98,7 @@ function App() { + diff --git a/src/components/Abonnement.js b/src/components/Abonnement.js index 3cb7bba..892e125 100644 --- a/src/components/Abonnement.js +++ b/src/components/Abonnement.js @@ -160,7 +160,7 @@ function Abonnement(props) { }) .then((data) => data.json()) .then((data) => { - console.log('LAAAAAAAAA Success:', data['message'], "data['status'] = ", data['status'], " nb_carte", data['nb_carte']); + //console.log('LAAAAAAAAA Success:', data['message'], "data['status'] = ", data['status'], " nb_carte", data['nb_carte']); if (String(data['status']) === String("false")) { //console.log("erreur rrrr:" + data['status']) diff --git a/src/components/CheckOut.js b/src/components/CheckOut.js index 173f81e..73cb220 100644 --- a/src/components/CheckOut.js +++ b/src/components/CheckOut.js @@ -437,6 +437,9 @@ function CheckOut(props) { alert('works'); } + + const [payment_in_process, setpayment_in_process] = useState(); + const [orderid, setorderid] = useState(); const [apiorderid, setapiorderid] = useState(); const [apiorderidmessage, setapiorderidmessage] = useState(); @@ -457,6 +460,7 @@ function CheckOut(props) { // ---------- debut + setpayment_in_process("1"); var myurl = process.env.REACT_APP_API_URL + "myclass/api/create-subscription/"; var form1 = new FormData(); @@ -509,6 +513,7 @@ function CheckOut(props) { //form.append("prix_ht", "1"); form.append("discount", "0"); form.append("pack", currentpack); + /* /!\ : Important, il faut preciser le nombre d'article envoyé avec ceci : form.append("nb_product", nb_article); */ @@ -536,7 +541,6 @@ function CheckOut(props) { var myurl = process.env.REACT_APP_API_URL + "myclass/api/createOrder/"; - fetch(myurl, { method: 'POST', @@ -818,10 +822,15 @@ function CheckOut(props) { const [payement_3DS_url, setpayement_3DS_url] = useState(); + const [souscription_id, setsouscription_id] = useState(); + + + function finalize_abonnement(local_souscription_id) { //alert("Finalization de l'abonnement "); // Initialize an instance of stripe. + setsouscription_id(local_souscription_id); const handleSubmit_ch = async (e) => { @@ -860,7 +869,6 @@ function CheckOut(props) { const handleSubmit_MySy_Back = async (e) => { - var myurl = process.env.REACT_APP_API_URL + "myclass/api/confirm_payment/"; var form = new FormData(); form.append("stripe_payment_id", local_souscription_id); @@ -923,13 +931,40 @@ function CheckOut(props) { } - function finaliser() { - window.open( - "/", - '_self' - ); + const [check_payement_finalise_order_api, setcheck_payement_finalise_order_api] = useState(""); + const [check_payement_finalise_order_message, setcheck_payement_finalise_order_message] = useState(""); + function check_payement_finalise_order() { + + var formData_tpm = new FormData(); + formData_tpm.append('token', stored_part); + formData_tpm.append('stripe_payment_id', souscription_id); + + console.log(" stripe_payment_id = ", souscription_id); + alert(" stripe_payment_id = ", souscription_id); + + var myurl = process.env.REACT_APP_API_URL + "myclass/api/payment_retrieve_status/"; + + axios.post(myurl, formData_tpm).then(res => { + if (String(res.data.status) === String("true")) { + setcheck_payement_finalise_order_api("true") + + + } + else { + setcheck_payement_finalise_order_api("false") + setcheck_payement_finalise_order_message(String(res.data.message)) + } + + + }).catch((error) => { + console.log('In CheckSalesOrder ', error); + setcheck_payement_finalise_order_api("false") + + }) + } + return (
@@ -941,12 +976,15 @@ function CheckOut(props) { {String(menu) === String("default") &&

Récapitulatif de votre commande

- setpayement_3DS_url = {payement_3DS_url} + +
{payement_3DS_url &&
- + @@ -1713,12 +1751,16 @@ function CheckOut(props) {
+
{(String(okcommande) !== String("ko") || - (String(props.packs).toLowerCase() === String("decouverte"))) + (String(props.packs).toLowerCase() === String("decouverte"))) && + String(payment_in_process) !== "1" && } - {String(okcommande) === String("ko") && (String(props.packs).toLowerCase() !== String("decouverte")) && } + {String(okcommande) === String("ko") && (String(props.packs).toLowerCase() !== String("decouverte")) && + String(payment_in_process) !== "1" + && }
diff --git a/src/components/OrderConfirmation.js b/src/components/OrderConfirmation.js index 4bbc276..319df6c 100644 --- a/src/components/OrderConfirmation.js +++ b/src/components/OrderConfirmation.js @@ -32,7 +32,7 @@ function OrderConfirmation(props) {

Commande numéro : {props.num_cmd}

-
+ {String(props.ok_order) === "1" &&
Votre commande a été validée avec succès.
Votre pack {String(props.packs).toLocaleUpperCase()} se mettra à jour dès que vous aurez actualisé votre page.
Merci d'avoir choisi MySy Training. @@ -43,10 +43,18 @@ function OrderConfirmation(props) {

- Vous pouvez dès a present commencer à utiliser nos services.
- Si vous avez d'aider n'hesitez pas à conter notre équipe support par le chatbot (en bas de votre écran) ou mail. + Vous pouvez dès à present commencer à utiliser nos services.
+ Si vous avez d'aider n'hesitez pas à contacter notre équipe support par le chatbot (en bas de votre écran) ou mail.
-
+
} + + {String(props.ok_order) !== "1" &&
+ Impossible de trouver la commnde {String(props.num_cmd)} .
+ Merci de contacter notre équipe support par le chatbot (en bas de votre écran) ou mail. + +
+ +
}
+ +
+
} + +
+ ); + +} + +export default OrderConfirmation_3DS; \ No newline at end of file diff --git a/src/components/Partner.js b/src/components/Partner.js index 22f7232..0cc1698 100644 --- a/src/components/Partner.js +++ b/src/components/Partner.js @@ -24,6 +24,7 @@ import { useParams } from 'react-router-dom' import CheckOut from "./CheckOut"; import { IoCheckmarkCircleSharp } from "react-icons/io5"; import { FaHandPointRight } from "react-icons/fa"; +import OrderConfirmation from "./OrderConfirmation"; const Partner = (props) => { const { commingmenu, commingpack } = useParams(); @@ -54,6 +55,7 @@ const Partner = (props) => { const [refesh, setrefesh] = useState("init"); const [firstConnexion, setfirstConnexion] = useState(""); + const { action, orderid, packs } = useParams() const changeHandler = (event) => { @@ -109,7 +111,7 @@ const Partner = (props) => { setformation_file_name(event.target.files[0].name); //console.log(" import du ficier ", event.target.files[0].name); - + formData.append('File', fileUploaded); //formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA'); @@ -136,7 +138,7 @@ const Partner = (props) => { if (String(result['status']) === String("true")) { sethandleSubmission_api("true"); } - else{ + else { sethandleSubmission_api("false"); sethandleSubmission_message(result['message']); } @@ -204,6 +206,20 @@ const Partner = (props) => { setpartnerPackService(location.state.currentpack); //alert(" le pack = "+location.state.currentpack); } + + var list_menu = ['creation', 'infopartner', 'statistique', 'abonnement', 'affichage', 'ordervalide'] + + if (action && list_menu.includes(action)) { + setmenu(action); + + if( action && orderid && packs && String("ordervalide")){ + CheckSalesOrder(); + } + + if( action && orderid && packs && String("abonnement")){ + console.log(" abonnement : payement intent = ", orderid, " pack = ", packs); + } + } }, []) @@ -439,7 +455,33 @@ const Partner = (props) => { } const [formation_file_name, setformation_file_name] = useState(); - + const [CheckSalesOrder_api, setCheckSalesOrder_api] = useState(""); + const [CheckSalesOrder_message, setCheckSalesOrder_message] = useState(""); + function CheckSalesOrder(event) { + + var form = new FormData(); + + formData.append("token", stored_part); + formData.append("orderid", orderid); + + var myurl = process.env.REACT_APP_API_URL + "myclass/api/CheckSalesOrder/"; + + axios.post(myurl, form).then(res => { + if (String(res.data.status) === String("true")) { + setCheckSalesOrder_api("true") + } + else { + setCheckSalesOrder_api("false") + setCheckSalesOrder_message(String(res.data.message)) + } + + + }).catch((error) => { + console.log('In CheckSalesOrder ', error); + setCheckSalesOrder_api("false") + + }) + } return ( @@ -584,7 +626,7 @@ const Partner = (props) => { id='menu_import_formation' name='menu_import_formation'>Choisir un fichier et importer des formations  
{formation_file_name && } - {
- {/*
*/} + {/*
*/}
 
@@ -626,7 +668,7 @@ const Partner = (props) => { - +
} @@ -702,6 +744,11 @@ const Partner = (props) => {
} + {String(menu) === "ordervalide" && orderid && packs &&
+ +
+ } +
diff --git a/src/pages/orderconfirmation_3DS.js b/src/pages/orderconfirmation_3DS.js new file mode 100644 index 0000000..a216c6f --- /dev/null +++ b/src/pages/orderconfirmation_3DS.js @@ -0,0 +1,19 @@ +import OrderConfirmation_3DS from "../components/OrderConfirmation_3DS"; +import Navigation from "../components/Navigation"; + + +const acceuil = () => { + + + return ( +
+ + + +
+ + ) +} + + +export default acceuil; diff --git a/src/styles/components/_orderconfirmation.scss b/src/styles/components/_orderconfirmation.scss index 28d76d8..f5ca9c4 100644 --- a/src/styles/components/_orderconfirmation.scss +++ b/src/styles/components/_orderconfirmation.scss @@ -1,656 +1,667 @@ .orderconfirmation { - .h1_transparent { - color: transparent; - font-size: 0.1rem; + .h1_transparent { + color: transparent; + font-size: 0.1rem; + } + + @media only screen and (max-width: 600px) { + /*style smartphones et petites tablettes en portrait*/ + + .okUpdateData { + font-size: small; + color: green; + font-style: italic; } - - @media only screen and (max-width: 600px) { - /*style smartphones et petites tablettes en portrait*/ - - .okUpdateData { - font-size: small; - color: green; - font-style: italic; - } - - .koUpdateData { - font-size: small; - color: red; - font-style: italic; - } - - .facture_menu { - width: 10rem; - text-align: left; - } - - .facture_menu:hover:active, - .facture_menu:hover { - background-color: #e7f3fb; - } - .facture_menu:focus { - //border: 3px dotted green; - background-color: #e7f3fb; - } - - .div_info_facturation { - float: left; - width: 50%; - border: 1px solid black; - margin-bottom: 1rem; - } - - .div_info_plan_actuel { - float: left; - width: 50%; - border: 1px solid black; - margin-bottom: 1rem; - } - - .div_info_pack { - width: 100%; - border: 1px solid black; - } - - .texte_area { - float: left; - width: 47% !important; - font-size: x-small !important; - font-family: "verdana", "Quicksand", "Signika", sans-serif; - margin: 0rem !important; - margin-right: 0.4rem !important; - margin-top: 0.4rem !important; - background-color: "#ECEFF1"; - background: "#ECEFF1"; - color: black; - } - - .texte_area_adress { - width: 94% !important; - font-size: x-small !important; - font-family: "verdana", "Quicksand", "Signika", sans-serif; - margin-right: 0.4rem !important; - margin-top: 0.4rem !important; - background-color: "#ECEFF1"; - background: "#ECEFF1"; - color: black; - } - - .titre1 { - font-family: "Quicksand", "Signika", sans-serif; - font-size: large; - text-align: center; - margin-bottom: 0.8rem; - color: black; - font-weight: bold; - } - - .div_row { - float: left; - //border:0px solid black; - border-width: 0.01rem; - width: 100%; - margin-bottom: 1rem; - } - - .div_row_gauche { - float: left; - //border:0px solid black; - border-width: 0.01rem; - width: 95%; - border-radius: 0px; - margin-bottom: 1rem; - } - - .div_row_droite { - float: right; - //border:0px solid black; - border-width: 0.01rem; - width: 95%; - padding-left: 2%; - border-radius: 0px; - } - - .div_row22 { - text-align: center; - border-width: 0.01rem; - margin-bottom: 0.1rem; - margin-top: 0.3rem; - border-radius: 1rem; - font-size: small; - } - - .btn_modif { - width: 10rem; - background-color: #212121 !important; - color: white; - } - - .btn_enreg { - width: 10rem; - background-color: green !important; - color: white; - } - - .list_produits_service { - line-height: 1rem; - margin: 0.2rem; - font-size: small; - font-family: Graphik LCG Web,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; - scroll-behavior: smooth; - } - - .img_payment{ - max-width: 30%; - margin-bottom: 5rem; - } - - .div_row_central { - border:0px; - border-width: 0.01rem; - width: 80%; - margin-bottom: 3rem; - margin-left: auto; - margin-right: auto; - font-family: "verdana", "Quicksand", "Signika", sans-serif; - font-size: medium; - line-height: 2rem; - } - - .btn_enreg_cmd { - //width: 10rem; - background-color: green !important; - color: white; - padding: 10px; - } + .koUpdateData { + font-size: small; + color: red; + font-style: italic; } - - @media only screen and (min-width: 601px) and (max-width: 991px) { - /*style petites-moyennes tablettes */ - - .okUpdateData { - font-size: small; - color: green; - font-style: italic; - } - - .koUpdateData { - font-size: small; - color: red; - font-style: italic; - } - - .facture_menu { - width: 10rem; - text-align: left; - } - - .facture_menu:hover:active, - .facture_menu:hover { - background-color: #e7f3fb; - } - .facture_menu:focus { - //border: 3px dotted green; - background-color: #e7f3fb; - } - - .div_info_facturation { - float: left; - width: 50%; - border: 1px solid black; - margin-bottom: 1rem; - } - - .div_info_plan_actuel { - float: left; - width: 50%; - border: 1px solid black; - margin-bottom: 1rem; - } - - .div_info_pack { - width: 100%; - border: 1px solid black; - } - - .texte_area { - float: left; - width: 47% !important; - font-size: x-small !important; - font-family: "verdana", "Quicksand", "Signika", sans-serif; - margin: 0rem !important; - margin-right: 0.4rem !important; - margin-top: 0.4rem !important; - background-color: "#ECEFF1"; - background: "#ECEFF1"; - color: black; - } - - .texte_area_adress { - width: 96% !important; - font-size: x-small !important; - font-family: "verdana", "Quicksand", "Signika", sans-serif; - margin-right: 0.4rem !important; - margin-top: 0.4rem !important; - background-color: "#ECEFF1"; - background: "#ECEFF1"; - color: black; - } - - .titre1 { - font-family: "Quicksand", "Signika", sans-serif; - font-size: large; - text-align: center; - margin-bottom: 0.8rem; - color: black; - font-weight: bold; - } - - .div_row { - float: left; - //border:0px solid black; - border-width: 0.01rem; - width: 100%; - margin-bottom: 1rem; - } - - .div_row_gauche { - float: left; - //border:0px solid black; - border-width: 0.01rem; - width: 45%; - border-radius: 0px; - } - - .div_row_droite { - border-left: 1rem solid; - float: right; - //border:0px solid black; - border-width: 0.01rem; - width: 55%; - padding-left: 2%; - border-radius: 0px; - } - - .div_row22 { - text-align: center; - border-width: 0.01rem; - margin-bottom: 0.1rem; - margin-top: 0.3rem; - border-radius: 1rem; - font-size: small; - } - - .btn_modif { - width: 10rem; - background-color: #212121 !important; - color: white; - } - - .btn_enreg { - width: 10rem; - background-color: green !important; - color: white; - } - - .list_produits_service { - line-height: 1rem; - margin: 0.2rem; - font-size: small; - font-family: Graphik LCG Web,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; - scroll-behavior: smooth; - } - - .img_payment{ - max-width: 30%; - margin-bottom: 5rem; - } - - .div_row_central { - border:0px; - border-width: 0.01rem; - width: 80%; - margin-bottom: 3rem; - margin-left: auto; - margin-right: auto; - font-family: "verdana", "Quicksand", "Signika", sans-serif; - font-size: medium; - line-height: 1.5rem; - text-align: center; - } - - .btn_enreg_cmd { - //width: 10rem; - background-color: green !important; - color: white; - padding: 10px; - } + .facture_menu { + width: 10rem; + text-align: left; } - - @media only screen and (min-width: 992px) and (max-width: 1199px) { - .okUpdateData { - font-size: small; - color: green; - font-style: italic; - } - - .koUpdateData { - font-size: small; - color: red; - font-style: italic; - } - - .facture_menu { - width: 10rem; - text-align: left; - } - - .facture_menu:hover:active, - .facture_menu:hover { - background-color: #e7f3fb; - } - .facture_menu:focus { - //border: 3px dotted green; - background-color: #e7f3fb; - } - - .div_info_facturation { - float: left; - width: 50%; - border: 1px solid black; - margin-bottom: 1rem; - } - - .div_info_plan_actuel { - float: left; - width: 50%; - border: 1px solid black; - margin-bottom: 1rem; - } - - .div_info_pack { - width: 100%; - border: 1px solid black; - } - - .texte_area { - float: left; - width: 47% !important; - font-size: x-small !important; - font-family: "verdana", "Quicksand", "Signika", sans-serif; - margin: 0rem !important; - margin-right: 0.4rem !important; - margin-top: 0.4rem !important; - background-color: "#ECEFF1"; - background: "#ECEFF1"; - color: black; - } - - .texte_area_adress { - width: 96% !important; - font-size: x-small !important; - font-family: "verdana", "Quicksand", "Signika", sans-serif; - margin-right: 0.4rem !important; - margin-top: 0.4rem !important; - background-color: "#ECEFF1"; - background: "#ECEFF1"; - color: black; - } - - .titre1 { - font-family: "Quicksand", "Signika", sans-serif; - font-size: large; - text-align: center; - margin-bottom: 0.8rem; - color: black; - font-weight: bold; - } - - .div_row { - float: left; - //border:0px solid black; - border-width: 0.01rem; - width: 100%; - margin-bottom: 1rem; - } - - .div_row_gauche { - float: left; - //border:0px solid black; - border-width: 0.01rem; - width: 45%; - border-radius: 0px; - } - - .div_row_droite { - border-left: 1rem solid; - float: right; - //border:0px solid black; - border-width: 0.01rem; - width: 55%; - padding-left: 2%; - border-radius: 0px; - } - - .div_row22 { - text-align: center; - border-width: 0.01rem; - margin-bottom: 0.1rem; - margin-top: 0.3rem; - border-radius: 1rem; - font-size: small; - } - - .btn_modif { - width: 10rem; - background-color: #212121 !important; - color: white; - } - - .btn_enreg { - width: 10rem; - background-color: green !important; - color: white; - } - - .list_produits_service { - line-height: 1rem; - margin: 0.2rem; - font-size: small; - font-family: Graphik LCG Web,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; - scroll-behavior: smooth; - } - - .img_payment{ - max-width: 30%; - margin-bottom: 5rem; - } - - .div_row_central { - border:0px; - border-width: 0.01rem; - width: 90%; - margin-bottom: 3rem; - margin-left: auto; - margin-right: auto; - font-family: "verdana", "Quicksand", "Signika", sans-serif; - font-size: medium; - line-height: 2rem; - text-align: center; - } - - .btn_enreg_cmd { - //width: 10rem; - background-color: green !important; - color: white; - padding: 10px; - } + .facture_menu:hover:active, + .facture_menu:hover { + background-color: #e7f3fb; } - - @media only screen and (min-width: 1200px) { - /*style grande tablettes & Pc portable */ - - .okUpdateData { - font-size: small; - color: green; - font-style: italic; - } - - .koUpdateData { - font-size: small; - color: red; - font-style: italic; - } - - .facture_menu { - width: 10rem; - text-align: left; - } - - .facture_menu:hover:active, - .facture_menu:hover { - background-color: #e7f3fb; - } - .facture_menu:focus { - //border: 3px dotted green; - background-color: #e7f3fb; - } - - .div_info_facturation { - float: left; - width: 50%; - border: 1px solid black; - margin-bottom: 1rem; - } - - .div_info_plan_actuel { - float: left; - width: 50%; - border: 1px solid black; - margin-bottom: 1rem; - } - - .div_info_pack { - width: 100%; - border: 1px solid black; - } - - .texte_area { - float: left; - width: 47% !important; - font-size: x-small !important; - font-family: "verdana", "Quicksand", "Signika", sans-serif; - margin: 0rem !important; - margin-right: 0.4rem !important; - margin-top: 0.4rem !important; - background-color: "#ECEFF1"; - background: "#ECEFF1"; - color: black; - } - - .texte_area_adress { - width: 94% !important; - font-size: x-small !important; - font-family: "verdana", "Quicksand", "Signika", sans-serif; - margin-right: 0.4rem !important; - margin-top: 0.4rem !important; - background-color: "#ECEFF1"; - background: "#ECEFF1"; - color: black; - } - - .titre1 { - font-family: "Quicksand", "Signika", sans-serif; - font-size: large; - text-align: center; - margin-bottom: 0.8rem; - color: black; - font-weight: bold; - } - - .div_row { - float: left; - //border:0px solid black; - border-width: 0.01rem; - width: 100%; - margin-bottom: 1rem; - } - - .div_row_gauche { - float: left; - //border:0px solid black; - border-width: 0.01rem; - width: 50%; - border-radius: 0px; - } - - .div_row_droite { - border-left: 0rem solid; - float: right; - //border:0px solid black; - border-width: 0rem; - width: 50%; - padding-left: 5px; - border-radius: 0px; - } - - .div_row22 { - text-align: center; - border-width: 0.01rem; - margin-bottom: 0.1rem; - margin-top: 0.3rem; - border-radius: 1rem; - font-size: small; - } - - .btn_modif { - width: 10rem; - background-color: #212121 !important; - color: white; - } - - .btn_enreg { - width: 10rem; - background-color: green !important; - color: white; - } - - .list_produits_service { - line-height: 1rem; - margin: 0.2rem; - font-size: small; - font-family: Graphik LCG Web,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; - scroll-behavior: smooth; - } - - .img_payment{ - max-width: 30%; - margin-bottom: 5rem; - } - - .div_row_central { - border:0px; - border-width: 0.01rem; - width: 85%; - margin-bottom: 3rem; - margin-left: auto; - margin-right: auto; - font-family: "verdana", "Quicksand", "Signika", sans-serif; - font-size: medium; - line-height: 2rem; - text-align: center; - } - .btn_enreg_cmd { - //width: 10rem; - background-color: green !important; - color: white; - padding: 10px; - } + .facture_menu:focus { + //border: 3px dotted green; + background-color: #e7f3fb; + } + .div_info_facturation { + float: left; + width: 50%; + border: 1px solid black; + margin-bottom: 1rem; + } + + .div_info_plan_actuel { + float: left; + width: 50%; + border: 1px solid black; + margin-bottom: 1rem; + } + + .div_info_pack { + width: 100%; + border: 1px solid black; + } + + .texte_area { + float: left; + width: 47% !important; + font-size: x-small !important; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + margin: 0rem !important; + margin-right: 0.4rem !important; + margin-top: 0.4rem !important; + background-color: "#ECEFF1"; + background: "#ECEFF1"; + color: black; + } + + .texte_area_adress { + width: 94% !important; + font-size: x-small !important; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + margin-right: 0.4rem !important; + margin-top: 0.4rem !important; + background-color: "#ECEFF1"; + background: "#ECEFF1"; + color: black; + } + + .titre1 { + font-family: "Quicksand", "Signika", sans-serif; + font-size: large; + text-align: center; + margin-bottom: 0.8rem; + color: black; + font-weight: bold; + } + + .div_row { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 100%; + margin-bottom: 1rem; + } + + .div_row_gauche { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 95%; + border-radius: 0px; + margin-bottom: 1rem; + } + + .div_row_droite { + float: right; + //border:0px solid black; + border-width: 0.01rem; + width: 95%; + padding-left: 2%; + border-radius: 0px; + } + + .div_row22 { + text-align: center; + border-width: 0.01rem; + margin-bottom: 0.1rem; + margin-top: 0.3rem; + border-radius: 1rem; + font-size: small; + } + + .btn_modif { + width: 10rem; + background-color: #212121 !important; + color: white; + } + + .btn_enreg { + width: 10rem; + background-color: green !important; + color: white; + } + + + .list_produits_service { + line-height: 1rem; + margin: 0.2rem; + font-size: small; + font-family: Graphik LCG Web, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + scroll-behavior: smooth; + } + + .img_payment { + max-width: 30%; + margin-bottom: 5rem; + } + + .div_row_central { + border: 0px; + border-width: 0.01rem; + width: 80%; + margin-bottom: 3rem; + margin-left: auto; + margin-right: auto; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: medium; + line-height: 2rem; + } + + .btn_enreg_cmd { + //width: 10rem; + background-color: green !important; + color: white; + padding: 10px; + width: 80%; + border-radius: 5rem; } } - \ No newline at end of file + + @media only screen and (min-width: 601px) and (max-width: 991px) { + /*style petites-moyennes tablettes */ + + .okUpdateData { + font-size: small; + color: green; + font-style: italic; + } + + .koUpdateData { + font-size: small; + color: red; + font-style: italic; + } + + .facture_menu { + width: 10rem; + text-align: left; + } + + .facture_menu:hover:active, + .facture_menu:hover { + background-color: #e7f3fb; + } + + .facture_menu:focus { + //border: 3px dotted green; + background-color: #e7f3fb; + } + + .div_info_facturation { + float: left; + width: 50%; + border: 1px solid black; + margin-bottom: 1rem; + } + + .div_info_plan_actuel { + float: left; + width: 50%; + border: 1px solid black; + margin-bottom: 1rem; + } + + .div_info_pack { + width: 100%; + border: 1px solid black; + } + + .texte_area { + float: left; + width: 47% !important; + font-size: x-small !important; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + margin: 0rem !important; + margin-right: 0.4rem !important; + margin-top: 0.4rem !important; + background-color: "#ECEFF1"; + background: "#ECEFF1"; + color: black; + } + + .texte_area_adress { + width: 96% !important; + font-size: x-small !important; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + margin-right: 0.4rem !important; + margin-top: 0.4rem !important; + background-color: "#ECEFF1"; + background: "#ECEFF1"; + color: black; + } + + .titre1 { + font-family: "Quicksand", "Signika", sans-serif; + font-size: large; + text-align: center; + margin-bottom: 0.8rem; + color: black; + font-weight: bold; + } + + .div_row { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 100%; + margin-bottom: 1rem; + } + + .div_row_gauche { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 45%; + border-radius: 0px; + } + + .div_row_droite { + border-left: 1rem solid; + float: right; + //border:0px solid black; + border-width: 0.01rem; + width: 55%; + padding-left: 2%; + border-radius: 0px; + } + + .div_row22 { + text-align: center; + border-width: 0.01rem; + margin-bottom: 0.1rem; + margin-top: 0.3rem; + border-radius: 1rem; + font-size: small; + } + + .btn_modif { + width: 10rem; + background-color: #212121 !important; + color: white; + } + + .btn_enreg { + width: 10rem; + background-color: green !important; + color: white; + } + + + .list_produits_service { + line-height: 1rem; + margin: 0.2rem; + font-size: small; + font-family: Graphik LCG Web, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + scroll-behavior: smooth; + } + + .img_payment { + max-width: 30%; + margin-bottom: 5rem; + } + + .div_row_central { + border: 0px; + border-width: 0.01rem; + width: 80%; + margin-bottom: 3rem; + margin-left: auto; + margin-right: auto; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: medium; + line-height: 1.5rem; + text-align: center; + } + + .btn_enreg_cmd { + //width: 10rem; + background-color: green !important; + color: white; + padding: 10px; + width: 80%; + border-radius: 5rem; + } + } + + @media only screen and (min-width: 992px) and (max-width: 1199px) { + .okUpdateData { + font-size: small; + color: green; + font-style: italic; + } + + .koUpdateData { + font-size: small; + color: red; + font-style: italic; + } + + .facture_menu { + width: 10rem; + text-align: left; + } + + .facture_menu:hover:active, + .facture_menu:hover { + background-color: #e7f3fb; + } + + .facture_menu:focus { + //border: 3px dotted green; + background-color: #e7f3fb; + } + + .div_info_facturation { + float: left; + width: 50%; + border: 1px solid black; + margin-bottom: 1rem; + } + + .div_info_plan_actuel { + float: left; + width: 50%; + border: 1px solid black; + margin-bottom: 1rem; + } + + .div_info_pack { + width: 100%; + border: 1px solid black; + } + + .texte_area { + float: left; + width: 47% !important; + font-size: x-small !important; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + margin: 0rem !important; + margin-right: 0.4rem !important; + margin-top: 0.4rem !important; + background-color: "#ECEFF1"; + background: "#ECEFF1"; + color: black; + } + + .texte_area_adress { + width: 96% !important; + font-size: x-small !important; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + margin-right: 0.4rem !important; + margin-top: 0.4rem !important; + background-color: "#ECEFF1"; + background: "#ECEFF1"; + color: black; + } + + .titre1 { + font-family: "Quicksand", "Signika", sans-serif; + font-size: large; + text-align: center; + margin-bottom: 0.8rem; + color: black; + font-weight: bold; + } + + .div_row { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 100%; + margin-bottom: 1rem; + } + + .div_row_gauche { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 45%; + border-radius: 0px; + } + + .div_row_droite { + border-left: 1rem solid; + float: right; + //border:0px solid black; + border-width: 0.01rem; + width: 55%; + padding-left: 2%; + border-radius: 0px; + } + + .div_row22 { + text-align: center; + border-width: 0.01rem; + margin-bottom: 0.1rem; + margin-top: 0.3rem; + border-radius: 1rem; + font-size: small; + } + + .btn_modif { + width: 10rem; + background-color: #212121 !important; + color: white; + } + + .btn_enreg { + width: 10rem; + background-color: green !important; + color: white; + } + + .list_produits_service { + line-height: 1rem; + margin: 0.2rem; + font-size: small; + font-family: Graphik LCG Web, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + scroll-behavior: smooth; + } + + .img_payment { + max-width: 30%; + margin-bottom: 5rem; + } + + .div_row_central { + border: 0px; + border-width: 0.01rem; + width: 90%; + margin-bottom: 3rem; + margin-left: auto; + margin-right: auto; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: medium; + line-height: 2rem; + text-align: center; + } + + .btn_enreg_cmd { + //width: 10rem; + background-color: green !important; + color: white; + padding: 10px; + width: 80%; + border-radius: 5rem; + } + + } + + @media only screen and (min-width: 1200px) { + /*style grande tablettes & Pc portable */ + + .okUpdateData { + font-size: small; + color: green; + font-style: italic; + } + + .koUpdateData { + font-size: small; + color: red; + font-style: italic; + } + + .facture_menu { + width: 10rem; + text-align: left; + } + + .facture_menu:hover:active, + .facture_menu:hover { + background-color: #e7f3fb; + } + + .facture_menu:focus { + //border: 3px dotted green; + background-color: #e7f3fb; + } + + .div_info_facturation { + float: left; + width: 50%; + border: 1px solid black; + margin-bottom: 1rem; + } + + .div_info_plan_actuel { + float: left; + width: 50%; + border: 1px solid black; + margin-bottom: 1rem; + } + + .div_info_pack { + width: 100%; + border: 1px solid black; + } + + .texte_area { + float: left; + width: 47% !important; + font-size: x-small !important; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + margin: 0rem !important; + margin-right: 0.4rem !important; + margin-top: 0.4rem !important; + background-color: "#ECEFF1"; + background: "#ECEFF1"; + color: black; + } + + .texte_area_adress { + width: 94% !important; + font-size: x-small !important; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + margin-right: 0.4rem !important; + margin-top: 0.4rem !important; + background-color: "#ECEFF1"; + background: "#ECEFF1"; + color: black; + } + + .titre1 { + font-family: "Quicksand", "Signika", sans-serif; + font-size: large; + text-align: center; + margin-bottom: 0.8rem; + color: black; + font-weight: bold; + } + + .div_row { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 100%; + margin-bottom: 1rem; + } + + .div_row_gauche { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 50%; + border-radius: 0px; + } + + .div_row_droite { + border-left: 0rem solid; + float: right; + //border:0px solid black; + border-width: 0rem; + width: 50%; + padding-left: 5px; + border-radius: 0px; + } + + .div_row22 { + text-align: center; + border-width: 0.01rem; + margin-bottom: 0.1rem; + margin-top: 0.3rem; + border-radius: 1rem; + font-size: small; + } + + .btn_modif { + width: 10rem; + background-color: #212121 !important; + color: white; + } + + .btn_enreg { + width: 10rem; + background-color: green !important; + color: white; + } + + .list_produits_service { + line-height: 1rem; + margin: 0.2rem; + font-size: small; + font-family: Graphik LCG Web, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + scroll-behavior: smooth; + } + + .img_payment { + max-width: 30%; + margin-bottom: 5rem; + } + + .div_row_central { + border: 0px; + border-width: 0.01rem; + width: 85%; + margin-bottom: 3rem; + margin-left: auto; + margin-right: auto; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: medium; + line-height: 2rem; + text-align: center; + } + + .btn_enreg_cmd { + //width: 10rem; + background-color: green !important; + color: white; + padding: 10px; + width: 80%; + border-radius: 5rem; + } + + } +} \ No newline at end of file