From e891b39dc2fb7fcbf545b4e379b0b1abae98c26d Mon Sep 17 00:00:00 2001
From: vinchent <vinchent@vinchent.xyz>
Date: Tue, 6 Aug 2024 13:56:39 +0200
Subject: [PATCH] Moving js to a reusable file and change the dir for the img

---
 cmd/web/handlers.go                    |   4 +-
 cmd/web/render.go                      |   2 +-
 cmd/web/templates/buy-once.page.gohtml |   7 +-
 cmd/web/templates/terminal.page.gohtml | 134 +------------------------
 static/{ => img}/widget.jpeg           | Bin
 5 files changed, 9 insertions(+), 138 deletions(-)
 rename static/{ => img}/widget.jpeg (100%)

diff --git a/cmd/web/handlers.go b/cmd/web/handlers.go
index 6c06944..705e7f5 100644
--- a/cmd/web/handlers.go
+++ b/cmd/web/handlers.go
@@ -9,7 +9,7 @@ func (app *application) VirtualTerminal(w http.ResponseWriter, r *http.Request)
 	stringMap["publishable_key"] = app.config.stripe.key
 	if err := app.renderTemplate(w, r, "terminal", &templateData{
 		StringMap: stringMap,
-	}); err != nil {
+	}, "stripe-js"); err != nil {
 		app.errorLog.Println(err)
 	}
 }
@@ -46,7 +46,7 @@ func (app *application) PaymentSucceeded(w http.ResponseWriter, r *http.Request)
 
 // ChargeOnce displays the page to buy one widget
 func (app *application) ChargeOnce(w http.ResponseWriter, r *http.Request) {
-	if err := app.renderTemplate(w, r, "buy-once", nil); err != nil {
+	if err := app.renderTemplate(w, r, "buy-once", nil, "stripe-js"); err != nil {
 		app.errorLog.Println(err)
 	}
 }
diff --git a/cmd/web/render.go b/cmd/web/render.go
index 951221f..5316472 100644
--- a/cmd/web/render.go
+++ b/cmd/web/render.go
@@ -80,7 +80,7 @@ func (app *application) parseTemplate(
 	// build partials
 	if len(partials) > 0 {
 		for i, x := range partials {
-			partials[i] = fmt.Sprintf("tempaltes/%s.partial.gohtml", x)
+			partials[i] = fmt.Sprintf("templates/%s.partial.gohtml", x)
 		}
 		t, err = template.New(fmt.Sprintf("%s.page.gohtml", page)).
 			Funcs(functions).
diff --git a/cmd/web/templates/buy-once.page.gohtml b/cmd/web/templates/buy-once.page.gohtml
index fc7ca4d..0e3cd0b 100644
--- a/cmd/web/templates/buy-once.page.gohtml
+++ b/cmd/web/templates/buy-once.page.gohtml
@@ -1,11 +1,11 @@
-{{ template "base" }}
+{{ template "base" .}}
 {{ define "title" }}
 Buy one widget
 {{ end }}
 {{ define "content" }}
 <h2 class="mt-3 text-center">Buy One Widget</h2>
 <hr>
-<img src="/static/widget.jpeg"
+<img src="/static/img/widget.jpeg"
      alt="widget"
      class="image-fluid rounded mx-auto d-block">
 
@@ -79,3 +79,6 @@ Buy one widget
            value="payment_currency">
 </form>
 {{ end }}
+{{ define "js" }}
+{{ template "stripe-js" . }}
+{{ end }}
diff --git a/cmd/web/templates/terminal.page.gohtml b/cmd/web/templates/terminal.page.gohtml
index c2b1395..3fb3511 100644
--- a/cmd/web/templates/terminal.page.gohtml
+++ b/cmd/web/templates/terminal.page.gohtml
@@ -76,137 +76,5 @@ Virtual Terminal
 </form>
 {{ end }}
 {{ define "js" }}
-<script src="https://js.stripe.com/v3/"></script>
-<script>
-
-let card;
-let stripe;
-const cardMessages = document.getElementById("card-messages");
-const payButton = document.getElementById("pay-button");
-const processing = document.getElementById("processing-payment");
-
-stripe = Stripe('{{index .StringMap "publishable_key"}}');
-
-function hidePayButton() {
-    payButton.classList.add("d-none");
-    processing.classList.remove("d-none");
-}
-
-function showPayButton() {
-    payButton.classList.remove("d-none");
-    processing.classList.add("d-none");
-}
-
-function showCardError(msg) {
-    cardMessages.classList.add("alert-danger");
-    cardMessages.classList.remove("alert-success");
-    cardMessages.classList.remove("d-none");
-    cardMessages.innerText = msg;
-}
-
-function showCardSuccess() {
-    cardMessages.classList.add("alert-success");
-    cardMessages.classList.remove("alert-danger");
-    cardMessages.classList.remove("d-none");
-    cardMessages.innerText = "Trasaction successful";
-}
-
-function val() {
-    let form = document.getElementById("charge_form");
-
-    if (form.checkValidity() === false) {
-        this.event.preventDefault();
-        this.event.stopPropagation();
-        form.classList.add("was-validated");
-        return;
-    }
-    form.classList.add("was-validated");
-    hidePayButton();
-
-    let amountToCharge = String(parseFloat(document.getElementById("amount").value) * 100);
-    let payload = {
-        amount: amountToCharge,
-        currency: 'eur',
-    };
-
-    const requestOptions = {
-        method: 'post',
-        headers: {
-            'Accept': 'application/json',
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(payload),
-    };
-
-    fetch("{{index .API}}/api/payment-intent", requestOptions)
-    .then(response => response.text())
-        .then(response => {
-            let data;
-            try {
-                data = JSON.parse(response);
-                stripe.confirmCardPayment(data.client_secret, {
-                    payment_method: {
-                        card: card,
-                        billing_details: {
-                            name: document.getElementById("cardholder-name").value,
-                        }
-                    }
-                }).then(function(result) {
-                        if (result.error) {
-                            // card declined, or sth went wrong with the card
-                            showCardError(result.error.message);
-                            showPayButton();
-                        } else if (result.paymentIntent) {
-                            if (result.paymentIntent.status === "succeeded") {
-                                // we have charged the card
-                                document.getElementById("payment_intent").value = result.paymentIntent.id;
-                                document.getElementById("payment_method").value = result.paymentIntent.payment_method_types[0];
-                                document.getElementById("payment_amount").value = result.paymentIntent.amount;
-                                document.getElementById("payment_currency").value = result.paymentIntent.currency;
-                                processing.classList.add("d-none");
-                                showCardSuccess();
-                                document.getElementById("charge_form").submit();
-                            }
-                        }
-                    })
-                console.log(data);
-
-            } catch (err) {
-                console.log(err);
-                showCardError("Invalid response from payment gateway!");
-                showPayButton();
-            }
-        });
-}
-
-(function () {
-    // create stripe & elements
-    const elements = stripe.elements();
-    const style = {
-        base: {
-            fontSize: '16px',
-            lineHeight: '24px',
-        }
-    };
-
-    // create card entry
-    card = elements.create('card', {
-        style:style,
-        hidePostalCode: true,
-    });
-    card.mount("#card-element");
-
-    // check for input errors
-    card.addEventListener('change', function(event) {
-        var displayError = document.getElementById("card-errors");
-        if (event.error) {
-            displayError.classList.remove('d-none');
-            displayError.textContent = event.error.message;
-        } else {
-            displayError.classList.add('d-none');
-            displayError.textContent = "";
-        }
-    });
-})();
-</script>
+{{ template "stripe-js" . }}
 {{ end }}
diff --git a/static/widget.jpeg b/static/img/widget.jpeg
similarity index 100%
rename from static/widget.jpeg
rename to static/img/widget.jpeg