From 4f12ac560e904e4d896951009d32ca57bcce8b56 Mon Sep 17 00:00:00 2001 From: tavo-wasd Date: Sun, 11 Aug 2024 10:13:10 -0600 Subject: [PATCH] pending refactor and server requests php --- public/form.js | 97 ++++++++++++++++++++++++++++++++----- public/index.html | 6 +-- public/static/css/style.css | 56 +++++++++------------ 3 files changed, 111 insertions(+), 48 deletions(-) diff --git a/public/form.js b/public/form.js index 4f7c70f..e64ca42 100644 --- a/public/form.js +++ b/public/form.js @@ -1,6 +1,72 @@ -function isFormValid() { - const form = document.getElementById('mainForm'); - return form.checkValidity(); // Returns true if the form is valid +function isFormValid(form) { + return form.checkValidity(); +} + +function removePayPalElement() { + const element = document.getElementById('paypal-button-container'); + element.innerHTML = ''; + element.style.display = 'none'; +} + +function hideDialog() { + document.getElementById('overlay').style.display = 'none'; + document.getElementById('dialog').style.display = 'none'; + document.getElementById('openDialogButton').style.display = 'block'; +} + +function renderPaypalElement() { + const element = document.getElementById('paypal-button-container'); + element.innerHTML = ''; + element.style.display = 'block'; + + paypal.Buttons({ + style: {color: 'blue', shape: 'pill', label: 'pay', height: 40}, + + // Call your server to set up the transaction + createOrder: function(data, actions) { + return fetch('/demo/checkout/api/paypal/order/create/', { + method: 'post' + }).then(function(res) { + return res.json(); + }).then(function(orderData) { + return orderData.id; + }); + }, + + // Call your server to finalize the transaction + onApprove: function(data, actions) { + return fetch('/demo/checkout/api/paypal/order/' + data.orderID + '/capture/', { + method: 'post' + }).then(function(res) { + return res.json(); + }).then(function(orderData) { + var errorDetail = Array.isArray(orderData.details) && orderData.details[0]; + + // (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart() + if (errorDetail && errorDetail.issue === 'INSTRUMENT_DECLINED') { + return actions.restart(); + } + + // (2) Other non-recoverable errors -> Show a failure message + if (errorDetail) { + var msg = 'Sorry, your transaction could not be processed.'; + if (errorDetail.description) msg += '\n\n' + errorDetail.description; + if (orderData.debug_id) msg += ' (' + orderData.debug_id + ')'; + return alert(msg); // TODO show a prettier message + } + + // (3) Successful transaction -> Show confirmation or thank you + // Grab transaction.status and transaction.id, call up php and save it in db. + // var transaction = orderData.purchase_units[0].payments.captures[0]; + // alert('Transaction '+ transaction.status + ': ' + transaction.id + '\n\nSee console for all available details'); + + // Replace the above to show a success message within this page, e.g. + element.innerHTML = ''; + element.innerHTML = '

Thank you for your payment!

'; + document.getElementById('mainForm').submit(); + }); + } + }).render('#paypal-button-container'); } document.getElementById('openDialogButton').addEventListener('click', () => { @@ -20,12 +86,14 @@ document.getElementById('submitDialogButton').addEventListener('click', () => { form.appendChild(input); }); - if (isFormValid()) { + if (isFormValid(form)) { + document.getElementById('submitDialogButton').style.display = 'none'; document.getElementById('error-message').style.display = 'none'; - // renderPayPalButton(); + renderPaypalElement(); } else { + document.getElementById('submitDialogButton').style.display = 'inline'; document.getElementById('error-message').style.display = 'block'; - // removePayPalButton(); + removePayPalElement(); } // const orderIDInput = document.createElement('input'); @@ -33,13 +101,18 @@ document.getElementById('submitDialogButton').addEventListener('click', () => { // orderIDInput.name = 'paypalOrderID'; // orderIDInput.value = paypalOrderID; // form.appendChild(orderIDInput); - form.submit(); + // form.submit(); }); document.getElementById('cancelDialogButton').addEventListener('click', () => { - document.getElementById('overlay').style.display = 'none'; - document.getElementById('dialog').style.display = 'none'; - document.getElementById('openDialogButton').style.display = 'block'; - document.getElementById('submitDialogButton').style.display = 'inline'; - // removePayPalButton(); + hideDialog(); +}); + +document.addEventListener('click', (event) => { + const dialog = document.getElementById('dialog'); + const openDialogButton = document.getElementById('openDialogButton'); + // If the click is outside the dialog and not on the openDialogButton, hide the dialog + if (!dialog.contains(event.target) && !openDialogButton.contains(event.target)) { + hideDialog(); + } }); diff --git a/public/index.html b/public/index.html index c76c1c0..762dbc6 100644 --- a/public/index.html +++ b/public/index.html @@ -32,13 +32,13 @@
-

Ingrese sus detalles

+

Información de Contacto

Utilizaremos esta información para contactarle acerca de la publicación del sitio.

Por favor digite los campos requeridos.

- - + +
diff --git a/public/static/css/style.css b/public/static/css/style.css index ea50fb1..038a645 100644 --- a/public/static/css/style.css +++ b/public/static/css/style.css @@ -126,33 +126,31 @@ footer { padding-bottom: 1em; } -/* Hidden dialog styles */ #dialog { - text-align: left; - max-width: 400px; + width: 25em; + max-width: var(--page-width); display: none; position: fixed; - top: 15%; + top: 50%; left: 50%; transform: translate(-50%, -50%); - padding: 20px; - background: white; - border: 1px solid #ccc; - box-shadow: 0 0 10px rgba(0,0,0,0.1); + padding: 1.5em; + background: var(--background-color); + border: 1px solid var(--hover-border); + box-shadow: 0 0 3em rgba(0, 0, 0, 0.4); + z-index: 1000; + border-radius: 10px; + text-align: left; } -#dialog h2 { +#dialog h2, #dialog p { margin: 0; - padding: 0; + padding: 0 0 0.5em 0; } -#dialog input { - display: block; - margin-bottom: 10px; - width: 100%; -} #dialog button { - margin-top: 10px; + margin: 0.5em 0.5em 0 0; + padding: 1em; } #overlay { @@ -166,22 +164,9 @@ footer { z-index: 999; } -#dialog { - width: 20em; - max-width: var(--page-width); - display: none; - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - padding: 1.5em; - background: var(--background-color); - border: 1px solid var(--hover-border); - box-shadow: 0 0 3em rgba(0, 0, 0, 0.4); - z-index: 1000; -} - #dialog input { + border-radius: 10px; + text-align: left; font-size: 1em; display: block; width: 90%; @@ -218,17 +203,22 @@ button { #dialog .button-pay{ border: 0px solid #000; - background: #0070ba; + background: #008645; font-weight: bold; color: white; } #dialog .button-pay:hover { - background: #0066aa; + background: #006d38; font-weight: bold; color: white; } +#paypal-button-container { + display: none; + padding: 0.5em 0; +} + #openDialogButton { position: fixed; bottom: 2em;