diff --git a/public/form.js b/public/form.js index e64ca42..e29652e 100644 --- a/public/form.js +++ b/public/form.js @@ -1,118 +1,99 @@ -function isFormValid(form) { - return form.checkValidity(); +// TODO +// +// 1. See if I can stop using hosted buttons and use +// https://developer.paypal.com/integration-builder/ instead +// to use components=buttons only. Or, Try to load both, +// components=buttons,hosted-buttons etc. +// +// 2. Try to disable asking for shipping info (although could be +// useful to mark as sent). +// +// 3. Read about IPN and Webhooks to automate registering process. + +const PayPalSdkOneTime = ""; +const PayPalSdkSub = ""; +const clientId = ""; +const OneTimePID = ""; +const PlanID = ""; + +function loadScript(url, callback) { + const script = document.createElement('script'); + script.src = url; + script.onload = callback; + script.onerror = () => { + console.error(`Script load error: ${url}`); + }; + document.head.appendChild(script); } -function removePayPalElement() { - const element = document.getElementById('paypal-button-container'); - element.innerHTML = ''; - element.style.display = 'none'; +function loadPayPalSDK(url, callback) { + loadScript(url, callback); } function hideDialog() { - document.getElementById('overlay').style.display = 'none'; - document.getElementById('dialog').style.display = 'none'; - document.getElementById('openDialogButton').style.display = 'block'; + 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'; +function showDialog() { + document.getElementById('overlay').style.display = 'block'; + document.getElementById('dialog').style.display = 'block'; + document.getElementById('openDialogButton').style.display = 'none'; +} - paypal.Buttons({ - style: {color: 'blue', shape: 'pill', label: 'pay', height: 40}, +function togglePaymentMethod(selectedButtonId) { + // Deselect all buttons and hide all PayPal buttons + document.querySelectorAll('#method-button-container button').forEach(button => { + button.classList.remove('active'); + }); + document.querySelectorAll('#paypal-button-container > div').forEach(div => { + div.classList.remove('active'); + }); - // 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; - }); - }, + // Select the clicked button and show the corresponding PayPal button + const selectedButton = document.getElementById(selectedButtonId); + selectedButton.classList.add('active'); - // 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(); - }); + if (selectedButtonId === 'showOneTimeButton') { + document.getElementById('paypal-button-container').classList.add('active'); + document.getElementById('paypalOneTimeButton').classList.add('active'); + loadPayPalSDK(PayPalSdkOneTime, () => { + paypal.HostedButtons({ + hostedButtonId: OneTimePID, + }).render("#paypalOneTimeButton"); + }); + } else if (selectedButtonId === 'showSubButton') { + document.getElementById('paypal-button-container').classList.add('active'); + document.getElementById('paypalSubButton').classList.add('active'); + loadPayPalSDK(PayPalSdkSub, () => { + paypal.Buttons({ + style: { shape: 'pill', color: 'black', layout: 'vertical', label: 'subscribe' }, + createSubscription: function(data, actions) { + return actions.subscription.create({ + plan_id: PlanID + }); + }, + onApprove: function(data, actions) { + alert(data.subscriptionID); // You can add optional success message for the subscriber here + } + }).render('#paypalSubButton'); // Renders the PayPal button + }); } - }).render('#paypal-button-container'); } -document.getElementById('openDialogButton').addEventListener('click', () => { - document.getElementById('overlay').style.display = 'block'; - document.getElementById('dialog').style.display = 'block'; - document.getElementById('openDialogButton').style.display = 'none'; +document.getElementById('showOneTimeButton').addEventListener('click', function() { + togglePaymentMethod('showOneTimeButton'); }); -document.getElementById('submitDialogButton').addEventListener('click', () => { - const form = document.getElementById('mainForm'); +document.getElementById('showSubButton').addEventListener('click', function() { + togglePaymentMethod('showSubButton'); +}); - ['name', 'email', 'phone'].forEach(id => { - const input = document.createElement('input'); - input.type = 'hidden'; - input.name = id; - input.value = document.getElementById(id).value; - form.appendChild(input); - }); - - if (isFormValid(form)) { - document.getElementById('submitDialogButton').style.display = 'none'; - document.getElementById('error-message').style.display = 'none'; - renderPaypalElement(); - } else { - document.getElementById('submitDialogButton').style.display = 'inline'; - document.getElementById('error-message').style.display = 'block'; - removePayPalElement(); - } - - // const orderIDInput = document.createElement('input'); - // orderIDInput.type = 'hidden'; - // orderIDInput.name = 'paypalOrderID'; - // orderIDInput.value = paypalOrderID; - // form.appendChild(orderIDInput); - // form.submit(); +document.getElementById('openDialogButton').addEventListener('click', () => { + showDialog(); }); document.getElementById('cancelDialogButton').addEventListener('click', () => { - 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 762dbc6..844a199 100644 --- a/public/index.html +++ b/public/index.html @@ -3,7 +3,7 @@ Builder | CONEX.one - + @@ -13,7 +13,6 @@ -
- + diff --git a/public/static/css/style.css b/public/static/css/style.css index 038a645..679e77e 100644 --- a/public/static/css/style.css +++ b/public/static/css/style.css @@ -141,6 +141,8 @@ footer { z-index: 1000; border-radius: 10px; text-align: left; + overflow: auto; + max-height: 80vh; } #dialog h2, #dialog p { @@ -201,24 +203,6 @@ button { color: var(--color); } -#dialog .button-pay{ - border: 0px solid #000; - background: #008645; - font-weight: bold; - color: white; -} - -#dialog .button-pay:hover { - background: #006d38; - font-weight: bold; - color: white; -} - -#paypal-button-container { - display: none; - padding: 0.5em 0; -} - #openDialogButton { position: fixed; bottom: 2em; @@ -241,6 +225,28 @@ button { border: 0; } +#method-button-container button { + background-color: #ccc; + border: none; + padding: 10px 20px; + margin: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +#method-button-container button.active { + background-color: #007bff; + color: white; +} + +#paypal-button-container > div { + display: none; +} + +#paypal-button-container > div.active { + display: block; +} + /* Custom SimpleMDE styling */ .CodeMirror { border-radius: 10px; diff --git a/public/static/js/simplemde.config.js b/public/static/js/simplemde.config.js new file mode 100644 index 0000000..0999499 --- /dev/null +++ b/public/static/js/simplemde.config.js @@ -0,0 +1,9 @@ +var simplemde = new SimpleMDE({ + element: document.getElementById("editor"), + toolbar: ["preview", "|", "heading", "bold", "italic", "unordered-list", "ordered-list", "|", "link", "image", "table"], + spellChecker: false, +}); +simplemde.value("# Bienvenido a [Empresa]\n\nUbicados en [Dirección de la Empresa]\n\n✉️ contacto@empresa.com\n☎️ +506 8888 8888\n\n# Servicios\n\n| Servicio | Descripción | Monto |\n| -------- | ----------- | --------- |\n| Uno | Una | 1.000,00 |\n| Dos | Breve | 10.000,00 |\n| Tres | Explicación | 7.500,00 |\n\n![Imagen ejemplo](https://0x0.st/XWHZ.jpg)\n\n# Acerca de Nosotros\n\nEn [Empresa], nos especializamos en [breve descripción de tus servicios/productos]. Nuestro equipo está dedicado a ofrecer [propuesta de valor o punto de venta único].\n\n# Síguenos\n\n[Facebook](https://facebook.com) | [Instagram](https://instagram.com)\n"); +document.getElementById('openDialogButton').addEventListener('click', () => { + document.getElementById('dialog').style.display = 'block'; +}); diff --git a/public/submit.php b/public/submit.php deleted file mode 100644 index a9279a9..0000000 --- a/public/submit.php +++ /dev/null @@ -1,44 +0,0 @@ -format(DateTime::ISO8601); - - $directory = "submit/"; - $filename = "$isoDate.md"; - $filePath = $directory . $filename; - - if (!is_dir($directory)) { - mkdir($directory, 0755, true); - } - - $title = isset($_POST["title"]) ? $_POST["title"] : ""; - $slogan = isset($_POST["slogan"]) ? $_POST["slogan"] : ""; - $name = isset($_POST["name"]) ? $_POST["name"] : ""; - $email = isset($_POST["email"]) ? $_POST["email"] : ""; - $phone = isset($_POST["phone"]) ? $_POST["phone"] : ""; - $phone = isset($_POST["paypalOrderID"]) ? $_POST["paypalOrderID"] : ""; - - $editorContent = isset($_POST["editor"]) ? $_POST["editor"] : ""; - $editorContent = str_replace("\r\n", "\n", $editorContent); // Convert CRLF to LF - $editorContent = str_replace("\r", "\n", $editorContent); // Convert CR to LF - - $content = << <$phone>" -orderID: $paypalOrderID -title: "$title" -description: "$slogan" -layout: single ---- - -$editorContent -EOD; - - $file = "$isoDate.md"; - file_put_contents($filePath, $content); - echo "Done"; -} else { - echo "Error"; -} -?>