-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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) <[email protected]>
- Loading branch information
Showing
4 changed files
with
156 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters