From c7e83785225e7f053454f5dc80ba70f32c426c92 Mon Sep 17 00:00:00 2001
From: olaven <olav@sundfoer.com>
Date: Mon, 29 Jul 2024 19:37:41 +0200
Subject: [PATCH] Vipps Demo Page

Implementing a demo of how Vipps-integration could look in order to get approved for integration.
---
 components/Input.tsx  | 12 +++++++
 components/Search.tsx |  5 +--
 docs/what.md          |  2 +-
 fresh.gen.ts          |  2 ++
 routes/donations.tsx  | 76 +++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 94 insertions(+), 3 deletions(-)
 create mode 100644 components/Input.tsx
 create mode 100644 routes/donations.tsx

diff --git a/components/Input.tsx b/components/Input.tsx
new file mode 100644
index 0000000..ea652c7
--- /dev/null
+++ b/components/Input.tsx
@@ -0,0 +1,12 @@
+import { JSX } from "preact";
+
+export const Input = (
+  props: JSX.HTMLAttributes<HTMLInputElement>,
+) => {
+  return (
+    <input
+      className="border-2 rounded-md px-2"
+      {...props}
+    />
+  );
+};
diff --git a/components/Search.tsx b/components/Search.tsx
index da0863a..4db4afd 100644
--- a/components/Search.tsx
+++ b/components/Search.tsx
@@ -1,11 +1,12 @@
+import { Input } from "./Input.tsx";
+
 export default function Search(props: { defaultValue: string | null }) {
   return (
     <form className="flex flex-col w-full lg:w-2/3 mx-auto my-4">
       <label className="sr-only" htmlFor="query">Program</label>
-      <input
+      <Input
         type="search"
         placeholder="NRK-podcast"
-        className="border-2 rounded-md px-2"
         name="query"
         id="query"
         defaultValue={props.defaultValue ?? ""}
diff --git a/docs/what.md b/docs/what.md
index 85bfec0..48f31c1 100644
--- a/docs/what.md
+++ b/docs/what.md
@@ -11,4 +11,4 @@ for en oversikt over hvordan det gjøres i populære podcastspillere.
 
 ## Penger og sånt
 
-Denne siden har mye trafikk! Det er jeg veldig takknemlig for. Imidlertid koster det derfor en del penger å ha det kjørende. _Dersom du har anledning til det_ (og bare da!), oppfordrer jeg til å [slenge over en kaffeslant eller to](https://github.com/sponsors/olaven) slik at NRSS fortsatt kan være gratis tilgjengelig for de som ikke har det.
+Denne siden har mye trafikk! Det er jeg veldig takknemlig for. Imidlertid koster det derfor en del penger å ha det kjørende. _Dersom du har anledning til det_ (og bare da!), oppfordrer jeg til å [slenge over en kaffeslant eller to](/donations) slik at NRSS fortsatt kan være gratis tilgjengelig for de som ikke har det.
diff --git a/fresh.gen.ts b/fresh.gen.ts
index 3eefc84..dd4b900 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -5,6 +5,7 @@
 import * as $_app from "./routes/_app.tsx";
 import * as $api_feeds_seriesId_ from "./routes/api/feeds/[seriesId].ts";
 import * as $api_feeds_seriesId_episodeId_chapters from "./routes/api/feeds/[seriesId]/[episodeId]/chapters.ts";
+import * as $donations from "./routes/donations.tsx";
 import * as $index from "./routes/index.tsx";
 import * as $CopyButton from "./islands/CopyButton.tsx";
 import { type Manifest } from "$fresh/server.ts";
@@ -14,6 +15,7 @@ const manifest = {
     "./routes/_app.tsx": $_app,
     "./routes/api/feeds/[seriesId].ts": $api_feeds_seriesId_,
     "./routes/api/feeds/[seriesId]/[episodeId]/chapters.ts": $api_feeds_seriesId_episodeId_chapters,
+    "./routes/donations.tsx": $donations,
     "./routes/index.tsx": $index,
   },
   islands: {
diff --git a/routes/donations.tsx b/routes/donations.tsx
new file mode 100644
index 0000000..b4f54a2
--- /dev/null
+++ b/routes/donations.tsx
@@ -0,0 +1,76 @@
+import { ButtonLink } from "../components/Button.tsx";
+import { Button } from "../components/Button.tsx";
+import Header from "../components/Header.tsx";
+import { Input } from "../components/Input.tsx";
+
+export default () => {
+  return (
+    <div className="p-4 mx-auto max-w-screen-md">
+      <h1
+        className={"bg-orange-200 text-white text-2xl font-semibold p-4 text-center"}
+      >
+        DEMOSIDE - FUNGERER IKKE
+      </h1>
+      <Header></Header>
+
+      <div
+        className={"max-w-2xl mx-auto px-4 py-8"}
+      >
+        <h2
+          className={"text-2xl font-semibold mb-4"}
+        >
+          Økonomisk støtte til NRSS
+        </h2>
+        <p>
+          Jeg ønsker at NRSS skal være gratis tilgjengelig for alle. Imidlertid koster det penger og tid å drifte og
+          vedlikeholde en nettside. Dersom du har råd til det (og bare da!) setter jeg stor pris på om du vil støtte
+          prosjektet med et valgfritt beløp via Vipps.
+        </p>
+
+        <form
+          className={"mt-6"}
+        >
+          <Input
+            type={"tel"}
+            placeholder={"Ditt telefonnummer."}
+          >
+          </Input>
+          <div className={"flex"}>
+            <Button
+              type={"submit"}
+            >
+              Støtt NRSS
+            </Button>
+            <Button
+              type={"button"}
+            >
+              Avslutt eksisterende abonnement
+            </Button>
+          </div>
+          <p
+            className={"text-sm"}
+          >
+            Epost blir utelukkende brukt til å knytte deg til en donasjon, slik at du kan kansellere den senere.
+          </p>
+        </form>
+
+        <p
+          className={"mt-4 font-semibold"}
+        >
+          Du kan når som helst avslutte abonnementet fra denne siden.
+        </p>
+        <p
+          className={"mt-4"}
+        >
+          Opplever du problemer med betalingen, eller har du andre spørsmål? Ta{" "}
+          <a
+            className={"text-blue-600 underline"}
+            href={"mailto:olav@sundfoer.com"}
+          >
+            kontakt på mail
+          </a>.
+        </p>
+      </div>
+    </div>
+  );
+};