new form system added

Author: AxeemHaider

layouts/_default/single.html

@@ -26,7 +26,7 @@ <h2 class="text-xl mt-9">{{ .Params.content.title }}</h2>
 
         <div class="flex items-center justify-start gap-3 my-5 flex-wrap">
           <a
-            href="/start-trial?service={{ .Params.content.name }}"
+            href="/start-trial?service_id={{ .Params.content.id }}&service_name={{ .Params.content.name }}"
             class="rounded-md isolate bg-gradient-to-r from-[#ff80b5] to-[#9089fc] px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:opacity-70 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">
             Start Free Trial
           </a>

layouts/page/start-trial.html

@@ -1,7 +1,4 @@
 {{ define "main" }}
-  <script>
-    let __plan_name = "Professional";
-  </script>
   <div class="isolate px-6 py-24 sm:py-32 lg:px-8">
     <div class="mx-auto max-w-2xl text-center">
       <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
@@ -13,7 +10,6 @@ <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
     </div>
 
     <script>
-      let start_trial_form_submitted = false;
       window.onload = function () {
         let referralCode = localStorage.getItem("referral-code");
 
@@ -25,55 +21,66 @@ <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
           document.getElementById("referral-code").value = referralCode;
         }
 
-        const serviceName = getQueryParam("service");
+        const serviceId = getQueryParam("service_id");
+        const serviceName = getQueryParam("service_name");
 
-        if (serviceName) {
+        if (serviceId && serviceName) {
+          document.getElementById("service-id").value = serviceId;
           document.getElementById("service-name").value = serviceName;
         } else {
           window.location = "/";
         }
       };
 
-      function loading() {
+      async function submitForm(form) {
+        event.preventDefault();
+
         const btn = document.getElementById("submit-btn");
 
         btn.disabled = true;
         btn.textContent = "Submitting...";
-      }
 
-      function onFormSubmit() {
-        if (start_trial_form_submitted) {
-          const plans = {
-            startup: "https://buy.stripe.com/4gwaF0bWd3nh2AwaEF",
-            professional: "https://buy.stripe.com/00gaF0gct9LF6QM6oq",
-            business: "https://buy.stripe.com/cN29AW4tL9LFeje7sv",
-            enterprise: "https://buy.stripe.com/dR614q2lD9LF0so6os",
-          };
+        const formData = new FormData(form);
+        const requestData = Object.fromEntries(formData.entries());
+
+        delete requestData.terms_and_conditions;
 
-          __plan_name = __plan_name.toLowerCase();
+        requestData.plan = requestData.plan.toLowerCase();
 
-          const paymentLink = plans[__plan_name] || plans.professional;
+        try {
+          const response = await fetch(
+            "https://admin.octabyte.app/items/customer_services",
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify(requestData),
+            },
+          );
+
+          if (!response.ok) {
+            throw new Error("There was an error submitting the form.");
+          }
 
           localStorage.removeItem("referral-code");
-          window.location = paymentLink;
+
+          const data = await response.json();
+          const session_url = data.data.session_url;
+          window.location = session_url;
+        } catch (error) {
+          console.error("Error submitting form:", error);
+          alert("There was an error submitting the form.");
         }
       }
     </script>
 
-    <iframe
-      name="hidden_iframe"
-      id="hidden_iframe"
-      style="display:none;"
-      onload="onFormSubmit()"></iframe>
-
     <form
-      action="https://docs.google.com/forms/d/e/1FAIpQLSeaxk4nWWZZw6LvQPPS80PuSOfEC3rmAWPtzOYapioaYguzqQ/formResponse"
       method="post"
-      target="hidden_iframe"
-      onsubmit="start_trial_form_submitted = true; loading()"
+      onsubmit="submitForm(this)"
       class="mx-auto mt-16 max-w-xl sm:mt-20">
       <!-- Referral Code -->
-      <input id="referral-code" type="hidden" name="entry.1415040235" />
+      <input id="referral-code" type="hidden" name="referral_code" />
 
       <div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
         <div>
@@ -85,7 +92,7 @@ <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
           <div class="mt-2.5">
             <input
               type="text"
-              name="entry.973173615"
+              name="first_name"
               id="first-name"
               autocomplete="given-name"
               placeholder="John"
@@ -102,7 +109,7 @@ <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
           <div class="mt-2.5">
             <input
               type="text"
-              name="entry.876595051"
+              name="last_name"
               id="last-name"
               autocomplete="family-name"
               placeholder="Smith"
@@ -120,7 +127,7 @@ <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
           <div class="mt-2.5">
             <input
               type="email"
-              name="entry.943957029"
+              name="admin_email"
               id="email"
               autocomplete="email"
               placeholder="Please provide valid email address to receive credentials"
@@ -137,7 +144,7 @@ <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
           <div class="mt-2.5">
             <input
               type="tel"
-              name="entry.621899747"
+              name="phone_number"
               id="phone-number"
               autocomplete="tel"
               placeholder="+1 (555) 987-6543"
@@ -151,9 +158,10 @@ <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
             Service Name
           </label>
           <div class="mt-2.5">
+            <input type="hidden" id="service-id" name="service_id" />
             <input
               type="text"
-              name="entry.2107164949"
+              name="service_name"
               id="service-name"
               required
               readonly
@@ -184,7 +192,7 @@ <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
             <div class="flex h-5 items-center">
               <input
                 id="terms-and-conditions"
-                name="terms-and-conditions"
+                name="terms_and_conditions"
                 type="checkbox"
                 required
                 class="h-4 w-4 cursor-pointer rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />

layouts/partials/trial/machine-type.html

@@ -9,7 +9,7 @@
 <script>
   document.addEventListener("DOMContentLoaded", function () {
     const radioButtons = document.querySelectorAll(
-      "input[type='radio'][name='entry.1848613537']",
+      "input[type='radio'][name='plan']",
     );
 
     radioButtons.forEach((radio) => {
@@ -62,7 +62,7 @@
         {{ end }}">
         <input
           type="radio"
-          name="entry.1848613537"
+          name="plan"
           value="{{ $option.label }}"
           class="sr-only"
           {{ if eq $index 1 }}checked{{ end }}