From 24bdc8938ec12f13f8524bad2f58a4ab53317f32 Mon Sep 17 00:00:00 2001
From: "Han Verstraete (OpenFaaS Ltd)" <han@openfaas.com>
Date: Thu, 19 Dec 2024 18:05:32 +0100
Subject: [PATCH] Update checkout links

Update the checkout links and add a modal the select a checkout quantity
for the business tier.

Add a link on the business checkout to update your subscription
quantity.

Signed-off-by: Han Verstraete (OpenFaaS Ltd) <han@openfaas.com>
---
 _includes/pricing/checkout-modal.html | 138 ++++++++++++++++++++++++++
 _includes/pricing/pricing-grid.html   |  33 +++---
 pricing/index.html                    |   1 +
 tailwind.config.js                    |   1 +
 4 files changed, 156 insertions(+), 17 deletions(-)
 create mode 100644 _includes/pricing/checkout-modal.html

diff --git a/_includes/pricing/checkout-modal.html b/_includes/pricing/checkout-modal.html
new file mode 100644
index 0000000..2b77556
--- /dev/null
+++ b/_includes/pricing/checkout-modal.html
@@ -0,0 +1,138 @@
+<div
+  id="modal"
+  class="relative z-10 hidden"
+  aria-labelledby="modal-title"
+  role="dialog"
+  aria-modal="true"
+>
+  <div
+    id="modal-backdrop"
+    class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity opacity-100 hidden"
+    aria-hidden="true"
+  ></div>
+
+  <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+    <div
+      class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
+    >
+      <div
+        id="modal-panel"
+        class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 opacity-100 translate-y-4 sm:translate-y-0 sm:scale-95"
+      >
+        <div class="absolute top-0 right-0 pt-4 pr-4 sm:block">
+          <button
+            id="close-modal-button"
+            type="button"
+            class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
+          >
+            <span class="sr-only">Close</span>
+            <svg
+              class="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              aria-hidden="true"
+              data-slot="icon"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M6 18 18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+        <div>
+          <h3 class="text-lg font-semibold text-gray-900" id="modal-title">
+            Inlets tunnel (commercial use)
+          </h3>
+          <div class="mt-2">
+            <p class="text-sm text-gray-500">
+              Deploy inlets tunnels for commercial and/or business use.
+            </p>
+          </div>
+        </div>
+        <form id="checkout-form" class="mt-3 space-y-4">
+          <div class="flex items-center">
+            <label for="quantity" class="text-sm font-medium text-gray-700"
+              >Quantity</label
+            >
+            <input
+              id="quantity"
+              name="quantity"
+              type="number"
+              value="1"
+              min="1"
+              class="mt-1 ml-3 px-1 w-16 block border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+            />
+          </div>
+
+          <div class="flex flex-col sm:flex-row">
+            <a
+              type="button"
+              class="inline-flex items-center justify-center w-full rounded-md px-3 py-2 inline-flex text-sm font-semibold bg-white text-gray-900 ring-1 shadow-xs ring-gray-300 ring-inset hover:bg-gray-50"
+              href="https://subscribe.openfaas.com/billing"
+            >
+              Update subscription
+            </a>
+            <button
+              type="submit"
+              class="w-full rounded-md mt-3 sm:mt-0 sm:ml-3 px-3 py-2 text-sm font-semibold text-white bg-indigo-600 shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            >
+              Checkout
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  // Function to show the modal
+  function showModal() {
+    const modal = document.getElementById("modal");
+    const backdrop = document.getElementById("modal-backdrop");
+
+    // Add classes for showing the modal
+    modal.classList.remove("hidden");
+    backdrop.classList.remove("hidden");
+  }
+
+  function hideModal() {
+    const modal = document.getElementById("modal");
+    const backdrop = document.getElementById("modal-backdrop");
+
+    // Add classes for hiding the modal
+    modal.classList.add("hidden");
+    backdrop.classList.add("hidden");
+  }
+
+  function handleSubmit(event) {
+    event.preventDefault();
+
+    const form = event.target;
+    const formData = new FormData(form);
+
+    const quantity = formData.get("quantity");
+    const checkoutURL = `https://subscribe.openfaas.com/buy/ee8d2048-884f-4a9a-9186-048e8810a8f7?quantity=${quantity}`;
+
+    window.location.href = checkoutURL;
+  }
+
+  // Attach event listeners
+  const checkoutButtons = document.querySelectorAll(".checkout-button");
+
+  checkoutButtons.forEach((button) => {
+    button.addEventListener("click", showModal);
+  });
+
+  document
+    .getElementById("close-modal-button")
+    .addEventListener("click", hideModal);
+
+  document
+    .getElementById("checkout-form")
+    .addEventListener("submit", handleSubmit);
+</script>
diff --git a/_includes/pricing/pricing-grid.html b/_includes/pricing/pricing-grid.html
index b351938..d36d454 100644
--- a/_includes/pricing/pricing-grid.html
+++ b/_includes/pricing/pricing-grid.html
@@ -1,7 +1,6 @@
 <!-- This example requires Tailwind CSS v2.0+ -->
 
 <div class="bg-white">
-
   <div class="max-w-7xl mx-auto bg-white sm:px-6 lg:px-8">
     <!-- xs to lg -->
     <div class="max-w-2xl mx-auto lg:hidden">
@@ -12,7 +11,7 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">Personal</h2>
           <span class="text-base font-medium text-gray-500">/mo</span>
         </p>
         <p class="mt-4 text-sm text-gray-500">This license is just for you. Use it at home or at work.</p>
-        <a href="https://openfaas.gumroad.com/l/inlets-subscription" class="mt-6 block border border-gray-800 rounded-md bg-gray-800 w-full py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Personal</a>
+        <a href="https://subscribe.openfaas.com/buy/fc4e1389-23f1-4f27-98c8-0c03068f0060?enabled=44473" class="mt-6 block border border-gray-800 rounded-md bg-gray-800 w-full py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Personal</a>
       </div>
 
       <table class="mt-8 w-full">
@@ -179,17 +178,17 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">Personal</h2>
       </table>
 
       <div class="border-t border-gray-200 px-4 pt-5">
-        <a href="https://openfaas.gumroad.com/l/inlets-subscription" class="block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Personal</a>
+        <a href="https://subscribe.openfaas.com/buy/fc4e1389-23f1-4f27-98c8-0c03068f0060" class="block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Personal</a>
       </div>
 
       <div class="px-4 mt-16">
         <h2 class="text-lg leading-6 font-medium text-gray-900">Business</h2>
         <p class="mt-4">
-          <span class="text-4xl font-extrabold text-gray-900">$50.00</span>
+          <span class="text-4xl font-extrabold text-gray-900">$25.00</span>
           <span class="text-base font-medium text-gray-500">/mo</span>
         </p>
         <p class="mt-4 text-sm text-gray-500">Expose &amp; connect services for your business, with email support.</p>
-        <a href="https://openfaas.gumroad.com/l/inlets-subscription" class="mt-6 block border border-gray-800 rounded-md bg-gray-800 w-full py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Business</a>
+        <button class="checkout-button mt-6 block border border-gray-800 rounded-md bg-gray-800 w-full py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Business</a>
       </div>
 
       <table class="mt-8 w-full">
@@ -214,7 +213,7 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">Business</h2>
           <tr class="border-t border-gray-200">
             <th class="py-5 px-4 text-sm font-normal text-gray-500 text-left" scope="row">Cost per tunnel.</th>
             <td class="py-5 pr-4">
-              <span class="block text-sm text-gray-700 text-right">50 USD / mo</span>
+              <span class="block text-sm text-gray-700 text-right">25 USD / mo</span>
             </td>
           </tr>
 
@@ -355,7 +354,7 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">Business</h2>
       </table>
 
       <div class="border-t border-gray-200 px-4 pt-5">
-        <a href="https://openfaas.gumroad.com/l/inlets-subscription" class="block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Business</a>
+        <button class="checkout-button block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Business</a>
       </div>
 
       <div class="px-4 mt-16">
@@ -365,7 +364,7 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">Uplink for SaaS</h2>
           <span class="text-base font-medium text-gray-500">/mo</span>
         </p>
         <p class="mt-4 text-sm text-gray-500">Tunnel customer services to your SaaS.</p>
-        <a href="https://subscribe.openfaas.com" class="mt-6 block border border-gray-800 rounded-md bg-gray-800 w-full py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Uplink</a>
+        <a href="https://subscribe.openfaas.com/buy/a1087de1-3eb6-4bbc-8a3b-2f0955ec3ce1" class="mt-6 block border border-gray-800 rounded-md bg-gray-800 w-full py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Uplink</a>
       </div>
 
       <table class="mt-8 w-full">
@@ -537,7 +536,7 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">Uplink for SaaS</h2>
       </table>
 
       <div class="border-t border-gray-200 px-4 pt-5">
-        <a href="https://subscribe.openfaas.com" class="block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Uplink</a>
+        <a href="https://subscribe.openfaas.com/buy/a1087de1-3eb6-4bbc-8a3b-2f0955ec3ce1" class="block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Uplink</a>
       </div>
     </div>
 
@@ -575,18 +574,18 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">Uplink for SaaS</h2>
                   <span class="text-base font-medium text-gray-500">/mo</span>
                 </p>
                 <p class="mt-4 mb-16 text-sm text-gray-500">This license is just for you. Use it at home or at work.</p>
-                <a href="https://openfaas.gumroad.com/l/inlets-subscription" class="absolute bottom-0 flex-grow block w-full bg-gray-800 border border-gray-800 rounded-md 5 py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Personal</a>
+                <a href="https://subscribe.openfaas.com/buy/fc4e1389-23f1-4f27-98c8-0c03068f0060" class="absolute bottom-0 flex-grow block w-full bg-gray-800 border border-gray-800 rounded-md 5 py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Personal</a>
               </div>
             </td>
 
             <td class="h-full py-8 px-6 align-top">
               <div class="relative h-full table">
                 <p>
-                  <span class="text-4xl font-extrabold text-gray-900">$50.00</span>
+                  <span class="text-4xl font-extrabold text-gray-900">$25</span>
                   <span class="text-base font-medium text-gray-500">/mo</span>
                 </p>
                 <p class="mt-4 mb-16 text-sm text-gray-500">Connect services for your business, with email support.</p>
-                <a href="https://openfaas.gumroad.com/l/inlets-subscription" class="absolute bottom-0 flex-grow block w-full bg-gray-800 border border-gray-800 rounded-md 5 py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Business</a>
+                <button class="checkout-button absolute bottom-0 flex-grow block w-full bg-gray-800 border border-gray-800 rounded-md 5 py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Business</button>
               </div>
             </td>
 
@@ -597,7 +596,7 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">Uplink for SaaS</h2>
                   <span class="text-base font-medium text-gray-500">/mo</span>
                 </p>
                 <p class="mt-4 mb-16 text-sm text-gray-500">Host tunnels for your customers to integrate with their private services.</p>
-                <a href="https://subscribe.openfaas.com" class="absolute bottom-0 flex-grow block w-full bg-gray-800 border border-gray-800 rounded-md 5 py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Uplink</a>
+                <a href="https://subscribe.openfaas.com/buy/a1087de1-3eb6-4bbc-8a3b-2f0955ec3ce1" class="absolute bottom-0 flex-grow block w-full bg-gray-800 border border-gray-800 rounded-md 5 py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Uplink</a>
               </div>
             </td>
           </tr>
@@ -624,7 +623,7 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">Uplink for SaaS</h2>
               <span class="block text-sm text-gray-700">5 USD / mo</span>
             </td>
             <td class="py-5 px-6">
-              <span class="block text-sm text-gray-700">50 USD / mo</span>
+              <span class="block text-sm text-gray-700">25 USD / mo</span>
             </td>
             <td class="py-5 px-6">
               <span class="block text-sm text-gray-700">25 USD / mo</span>
@@ -944,15 +943,15 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">Uplink for SaaS</h2>
             <th class="sr-only" scope="row">Choose your plan</th>
 
             <td class="pt-5 px-6">
-              <a href="https://openfaas.gumroad.com/l/inlets-subscription" class="block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Personal</a>
+              <a href="https://subscribe.openfaas.com/buy/fc4e1389-23f1-4f27-98c8-0c03068f0060" class="block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Personal</a>
             </td>
 
             <td class="pt-5 px-6">
-              <a href="https://openfaas.gumroad.com/l/inlets-subscription" class="block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Business</a>
+              <button class="checkout-button block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Business</button>
             </td>
 
             <td class="pt-5 px-6">
-              <a href="https://subscribe.openfaas.com" class="block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Uplink</a>
+              <a href="https://subscribe.openfaas.com/buy/a1087de1-3eb6-4bbc-8a3b-2f0955ec3ce1" class="block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Uplink</a>
             </td>
           </tr>
         </tfoot>
diff --git a/pricing/index.html b/pricing/index.html
index 69a086d..590f24d 100644
--- a/pricing/index.html
+++ b/pricing/index.html
@@ -13,6 +13,7 @@
 {% include pricing/pricing-calc.html %}
 
 {% include pricing/pricing-personal.html %}
+{% include pricing/checkout-modal.html %}
 <!-- <div style="padding-bottom: 20px;"></div> -->
 
 <!-- {% include start.html %} -->
diff --git a/tailwind.config.js b/tailwind.config.js
index 7ff2f65..608e153 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -42,6 +42,7 @@ module.exports = {
   variants: {},
   plugins: [
     require('@tailwindcss/ui'),
+    require('@tailwindcss/forms'),
     require("postcss-import"),
     require("autoprefixer"),
     require("@tailwindcss/typography"),