pending refactor and server requests php

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 = '<h3>Thank you for your payment!</h3>';
+        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();
+  }
 });

public/index.html

@@ -32,13 +32,13 @@
     </body>
     <div id="overlay"></div>
     <div id="dialog">
-      <h2>Ingrese sus detalles</h2>
+      <h2>Información de Contacto</h2>
       <p>Utilizaremos esta información para contactarle acerca de la publicación del sitio.</p>
       <div id="error-message"><p>Por favor digite los campos requeridos.</p></div>
       <div id="error-with-payment"></div>
-      <input type="text" id="name" name="name" placeholder="Nombre completo" required>
-      <input type="tel" id="phone" name="phone" placeholder="Número de teléfono" required>
+      <input type="text" id="name" name="name" placeholder="Nombre" required>
       <input type="email" id="email" name="email" placeholder="Correo electrónico" required>
+      <input type="tel" id="phone" name="phone" placeholder="Teléfono (Opcional)">
       <div id="paypal-button-container"></div>
       <button id="submitDialogButton" class="button-pay" type="button">$20 al año</button>
       <button id="cancelDialogButton" type="button">Cancelar</button>

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;