Vipps Demo Page

Implementing a demo of how Vipps-integration could look in order to get approved for integration.

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}
+    />
+  );
+};

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 ?? ""}

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.

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: {

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>
+  );
+};