update

public/form.js

@@ -1,57 +1,23 @@
 // TODO
 //
-// 1. See if I can stop using hosted buttons and use
+// 1. Try to disable asking for shipping info (although could be
-//    https://developer.paypal.com/integration-builder/ instead
-//    to use components=buttons only. Or, Try to load both,
-//    components=buttons,hosted-buttons etc.
-//    See Buttons SDK Reference
-//    https://developer.paypal.com/sdk/js/reference/
-//
-// 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.
+// 2. Read about IPN and Webhooks to automate registering process.
 
-const PayPalSdkOneTime = "";
-const PayPalSdkSub = "";
 const clientId = "";
 const OneTimePID = "";
 const PlanID = "";
 
-loadOneTimeButton().then(() => {loadSubButton()})
+const form = document.getElementById('mainForm');
 
-function loadOneTimeButton() {
+['name', 'email', 'phone'].forEach(id => {
-    return new Promise((resolve, reject) => {
+    const input = document.createElement('input');
-        var script = document.createElement('script');
+    input.type = 'hidden';
-        script.src = PayPalSdkOneTime;
+    input.name = id;
-        script.onload = function() {
+    input.value = document.getElementById(id).value;
-            paypal.HostedButtons({
+    form.appendChild(input);
-                hostedButtonId: OneTimePID,
+});
-            }).render("#paypalOneTimeButton");
-        };
-        document.head.appendChild(script);
-        resolve();
-    });
-}
-
-function loadSubButton() {
-    var script = document.createElement('script');
-    script.src = PayPalSdkSub;
-    script.onload = function() {
-        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');
-    };
-    document.head.appendChild(script);
-}
 
 function hideDialog() {
     document.getElementById('overlay').style.display = 'none';
@@ -87,12 +53,58 @@ function togglePaymentMethod(selectedButtonId) {
     }
 }
 
+function isFormValid(form) {
+  return form.checkValidity();
+}
+
+paypal_onetime.Buttons({
+    style: { shape: 'pill', color: 'black', layout: 'vertical', label: 'pay' },
+    createOrder: function(data, actions) {
+        return actions.order.create({
+            intent: 'CAPTURE',
+            purchase_units: [{
+                amount: {
+                    currency_code: 'USD',
+                    value: '20.00'
+                }
+            }]
+        });
+    },
+    onApprove: function(data, actions) {
+        return actions.order.capture().then(function(details) {
+            alert('Transaction completed by ' + details.payer.name.given_name);
+        });
+    }
+}).render("#paypalOneTimeButton");
+
+paypal_subscribe.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');
+
 document.getElementById('showOneTimeButton').addEventListener('click', function() {
+  if (isFormValid(form)) {
+    document.getElementById('warning-message').style.display = 'none';
     togglePaymentMethod('showOneTimeButton');
+  } else {
+    document.getElementById('warning-message').style.display = 'block';
+  }
 });
 
 document.getElementById('showSubButton').addEventListener('click', function() {
+  if (isFormValid(form)) {
+    document.getElementById('warning-message').style.display = 'none';
     togglePaymentMethod('showSubButton');
+  } else {
+    document.getElementById('warning-message').style.display = 'block';
+  }
 });
 
 document.getElementById('openDialogButton').addEventListener('click', () => {

public/index.html

@@ -9,46 +9,75 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="robots" content="index, follow">
     <meta charset="utf-8">
-    <link rel="stylesheet" href="/static/css/simplemde.min.css">
-    <link rel="stylesheet" href="/static/css/simplemde-dark.min.css">
     <link rel="stylesheet" href="/static/css/style.css">
-    <script src="/static/js/simplemde.min.js"></script>
+    <!-- <link rel="stylesheet" href="/static/css/simplemde.min.css"> -->
+    <!-- <link rel="stylesheet" href="/static/css/simplemde-dark.min.css"> -->
+    <!-- <script src="/static/js/simplemde.min.js"></script> -->
+    <!-- EDITORJS -->
+    <script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script><!-- Header -->
+    <script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script><!-- Image -->
+    <script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script><!-- List -->
+    <script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script><!-- Quote -->
+    <script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script><!-- Code -->
+    <script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script><!-- Embed -->
+    <script src="https://cdn.jsdelivr.net/npm/@editorjs/table@latest"></script><!-- Table -->
+    <script src="https://cdn.jsdelivr.net/npm/@editorjs/link@latest"></script><!-- Link -->
+    <!-- Load Editor.js's Core -->
+    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
+    <!-- EDITORJS -->
+    <script
+        src="https://www.paypal.com/sdk/js?client-id=AcCW43LI1S6lLQgtLkF4V8UOPfmXcqXQ8xfEl41hRuMxSskR2jkWNwQN6Ab1WK7E2E52GNaoYBHqgIKd&disable-funding=venmo&currency=USD"
+      data-namespace="paypal_onetime"
+        ></script>
+    <script
+      src="https://www.paypal.com/sdk/js?client-id=AUJPUXq47cceshojipubmg0wvCgdJC-bg4O4xvMQf_ic1MzlS27OVW6EGpymJtFXssAiXNOwBQDKqWiE&vault=true&intent=subscription"
+      data-namespace="paypal_subscribe"
+        ></script>
   </head>
   <form action="submit.php" id="mainForm" method="post">
     <div class="banner" style="background-image: url(/static/banner.jpg);">
       <div class="desc">
         <input type="text" name="title" class="input-title" placeholder="[Nombre Ejemplo]">
         <input type="text" name="slogan" class="input-slogan" placeholder="[Slogan llamativo o breve descripción]">
-        <button type="button" id="openDialogButton">Solicitar sitio web</button>
+        <button type="button" id="openDialogButton">Solicitar por $20/año</button>
       </div>
     </div>
     <body>
+      <!-- <button type="button" id="saveButton">Salvar</button> -->
       <div id="content" class="content">
-        <div id="editor-container">
+        <div id="editorjs"></div>
-          <textarea id="editor" name="editor" lang="es"></textarea>
-        </div>
       </div>
     </body>
     <div id="overlay"></div>
     <div id="dialog">
-      <h2>Información de Contacto</h2>
+      <div>
+        <h2>Información de Contacto</h2>
+        <button id="cancelDialogButton" type="button">x</button>
+      </div>
       <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="form-container">
-      <div id="error-with-payment"></div>
+        <input type="text" id="name" name="name" placeholder="Nombre (Requerido)" required>
-      <input type="text" id="name" name="name" placeholder="Nombre" required>
+        <input type="email" id="email" name="email" placeholder="Correo electrónico (Requerido)" required>
-      <input type="email" id="email" name="email" placeholder="Correo electrónico" required>
+        <input type="tel" id="phone" name="phone" placeholder="Teléfono (Opcional)">
-      <input type="tel" id="phone" name="phone" placeholder="Teléfono (Opcional)">
+      </div>
+      <h2>Tipo de Pago</h2>
+      <div>
+        <p><strong>Pago Único:</strong> El pago debe realizarse manualmente un año después de contratar el servicio, le enviaremos notificaciones al correo electrónico recordando el pago.</p>
+        <p><strong>Pago Automático:</strong> Requiere cuenta de PayPal para rebajo automático, si no tiene una le pedirá configurar rápidamente los datos.</p>
+      </div>
+      <div id="warning-message"><p>Por favor digite los campos requeridos.</p></div>
       <div id="method-button-container">
         <button id="showOneTimeButton" type="button">Pago Único</button>
         <button id="showSubButton" type="button">Pago Automático</button>
-        <button id="cancelDialogButton" type="button">Cancelar</button>
       </div>
+      <div id="error-with-payment"></div>
       <div id="paypal-button-container">
         <div id="paypalOneTimeButton"></div>
         <div id="paypalSubButton"></div>
       </div>
     </div>
   </form>
-  <script src="/static/js/simplemde.config.js"></script>
+  <!-- <script src="/static/js/simplemde.config.js"></script> -->
   <script src="/form.js"></script>
+  <script src="/static/js/config.editor.js"></script>
 </html>

public/static/css/style.css

@@ -1,6 +1,7 @@
 :root {
   --background-color: white;
   --color: black;
+  --warning-color: #b24629;
   --page-width: 768px;
   --navbar-width: 50%;
   --font-family: sans-serif;
@@ -179,13 +180,17 @@ footer {
   margin: 1em auto;
 }
 
-#error-message {
+#form-container {
+  padding-bottom: 1em;
+}
+
+#warning-message {
   display: none;
 }
 
-#error-message p {
+#warning-message p {
   text-decoration: underline;
-  color: var(--unemph-color);
+  color: var(--warning-color);
 }
 
 button {
@@ -205,8 +210,8 @@ button {
 #openDialogButton {
   position: fixed;
   bottom: 2em;
-  right: 2em;
+  right: 1em;
-  height: 4em;
+  height: 2.5em;
   cursor: pointer;
   font-size: 1em;
   z-index: 1001;
@@ -251,6 +256,23 @@ button {
   display: block;
 }
 
+#cancelDialogButton {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  background-color: var(--background);
+  border: 1px solid var(--hover-border);
+  color: var(--unemph-color);
+  position: absolute;
+  transition: 0.3s;
+  border-radius: 50%;
+  width: 1em;
+  height: 1em;
+  top: 0.5em;
+  right: 0.5em;
+  font-size: 1.1em;
+}
+
 /* Custom SimpleMDE styling */
 .CodeMirror {
   border-radius: 10px;
@@ -264,3 +286,5 @@ button {
   font-size: 1em;
   font-family: sans-serif;
 }
+
+

public/static/js/config.editor.js

@@ -0,0 +1,219 @@
+var editor = new EditorJS({
+  readOnly: false,
+  holder: 'editorjs',
+
+  inlineToolbar: ['link', 'marker', 'bold', 'italic'],
+  inlineToolbar: true,
+  tools: {
+    /**
+     * Each Tool is a Plugin. Pass them via 'class' option with necessary settings {@link docs/tools.md}
+     */
+    header: {
+      class: Header,
+      inlineToolbar: ['marker', 'link'],
+      config: {
+        placeholder: 'Header'
+      },
+      shortcut: 'CMD+SHIFT+H'
+    },
+
+    image: SimpleImage,
+
+    list: {
+      class: List,
+      inlineToolbar: true,
+      shortcut: 'CMD+SHIFT+L'
+    },
+
+    quote: {
+      class: Quote,
+      inlineToolbar: true,
+      config: {
+        quotePlaceholder: 'Enter a quote',
+        captionPlaceholder: 'Quote\'s author',
+      },
+      shortcut: 'CMD+SHIFT+O'
+    },
+
+    linkTool: LinkTool,
+
+    embed: Embed,
+
+    table: {
+      class: Table,
+      inlineToolbar: true,
+      shortcut: 'CMD+ALT+T'
+    },
+
+  },
+
+  /**
+   * This Tool will be used as default
+   */
+  // defaultBlock: 'paragraph',
+
+  data: {
+    blocks: [
+      {
+        type: "header",
+        data: {
+          text: "Acerca de [Empresa]",
+          level: 1
+        }
+      },
+      {
+        type : 'paragraph',
+        data : {
+          text : 'En [Nombre de Tu Empresa], nos dedicamos a ofrecer [tu servicio/producto] de la más alta calidad con un servicio al cliente excepcional. Nuestro equipo de expertos se asegura de que cada aspecto de tu experiencia sea manejado con profesionalismo y cuidado.'
+        }
+      },
+      {
+        type : 'list',
+        data : {
+          items : [
+            'It is a block-styled editor',
+            'It returns clean data output in JSON',
+            'Designed to be extendable and pluggable with a simple API',
+          ],
+          style: 'unordered'
+        }
+      },
+      {
+        type: 'table',
+        data: {
+          content: [
+            ['Header 1', 'Header 2', 'Header 3'],
+            ['Row 1, Cell 1', 'Row 1, Cell 2', 'Row 1, Cell 3'],
+            ['Row 2, Cell 1', 'Row 2, Cell 2', 'Row 2, Cell 3']
+          ]
+        }
+      },
+    ]
+  },
+  i18n: {
+    messages: {
+      ui: {
+        "blockTunes": {
+          "toggler": {
+            "Click to tune": "Modificar",
+            "or drag to move": "or drag to move"
+          },
+        },
+        "inlineToolbar": {
+          "converter": {
+            "Convert to": "Convertir a"
+          }
+        },
+        "toolbar": {
+          "toolbox": {
+            "Add": "Insertar"
+          }
+        }
+      },
+
+      /**
+       * Section for translation Tool Names: both block and inline tools
+       */
+      toolNames: {
+        "Text": "Texto",
+        "Heading": "Título",
+        "List": "Lista",
+        "Warning": "Advertencia",
+        "Quote": "Quote",
+        "Table": "Tabla",
+        "Link": "Link",
+        "Bold": "Negrita",
+        "Italic": "Itálicas",
+        "InlineCode": "InlineCode",
+      },
+
+      /**
+       * Section for passing translations to the external tools classes
+       */
+      tools: {
+        /**
+         * Each subsection is the i18n dictionary that will be passed to the corresponded plugin
+         * The name of a plugin should be equal the name you specify in the 'tool' section for that plugin
+         */
+        "warning": { // <-- 'Warning' tool will accept this dictionary section
+          "Title": "Título",
+          "Message": "Mensaje",
+        },
+
+        /**
+         * Link is the internal Inline Tool
+         */
+        "link": {
+          "Add a link": "Agregar link"
+        },
+        /**
+         * The "stub" is an internal block tool, used to fit blocks that does not have the corresponded plugin
+         */
+        "stub": {
+          'The block can not be displayed correctly.': 'No se puede visualizar este bloque'
+        }
+      },
+
+      /**
+       * Section allows to translate Block Tunes
+       */
+      blockTunes: {
+        /**
+         * Each subsection is the i18n dictionary that will be passed to the corresponded Block Tune plugin
+         * The name of a plugin should be equal the name you specify in the 'tunes' section for that plugin
+         *
+         * Also, there are few internal block tunes: "delete", "moveUp" and "moveDown"
+         */
+        "delete": {
+          "Delete": "Quitar bloque"
+        },
+        "moveUp": {
+          "Move up": "Mover arriba"
+        },
+        "moveDown": {
+          "Move down": "Mover abajo"
+        }
+      },
+    }
+  },
+  onReady: function(){
+    saveButton.click();
+  },
+  onChange: function(api, event) {
+    console.log('something changed', event);
+  }
+
+});
+
+/**
+ * Saving button
+ */
+const saveButton = document.getElementById('saveButton');
+
+/**
+ * Toggle read-only button
+ */
+const toggleReadOnlyButton = document.getElementById('toggleReadOnlyButton');
+const readOnlyIndicator = document.getElementById('readonly-state');
+
+/**
+ * Saving example
+ */
+saveButton.addEventListener('click', function () {
+  editor.save()
+    .then((savedData) => {
+      cPreview.show(savedData, document.getElementById("output"));
+    })
+    .catch((error) => {
+      console.error('Saving error', error);
+    });
+});
+
+/**
+ * Toggle read-only example
+ */
+toggleReadOnlyButton.addEventListener('click', async () => {
+  const readOnlyState = await editor.readOnly.toggle();
+
+  readOnlyIndicator.textContent = readOnlyState ? 'On' : 'Off';
+});

public/static/js/simplemde.config.js

@@ -1,9 +1,12 @@
 var simplemde = new SimpleMDE({
   element: document.getElementById("editor"),
+  autosave: {
+    enabled: true,
+    uniqueId: "main-editor",
+    delay: 1000,
+  },
   toolbar: ["preview", "|", "heading", "bold", "italic", "unordered-list", "ordered-list", "|", "link", "image", "table"],
   spellChecker: false,
-});
+  status: 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");
+  placeholder: "Contruye tu página aquí utilizando la barra de herramientas de arriba.\n\nRecuerde editar también\n[Nombre Ejemplo] y [Slogan]."
-document.getElementById('openDialogButton').addEventListener('click', () => {
-  document.getElementById('dialog').style.display = 'block';
 });