Improve UI a bit

components/Button.tsx

@@ -4,7 +4,7 @@ type ButtonProps = {
   children: ComponentChildren;
 } & JSX.HTMLAttributes<HTMLButtonElement>;
 
-const className = "p-2 border(gray-100 2) hover:bg-gray-200 bg-blue-200 w-max font-medium";
+const className = "p-2 border(gray-100 2) hover:bg-gray-200 bg-blue-200 font-medium";
 
 export function Button(props: ButtonProps) {
   const { children, className: additionalClass = "", ...buttonProps } = props;

islands/DonationSection.tsx

@@ -26,11 +26,11 @@ export const DonationSection = function () {
         <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, månedlig beløp via Vipps.
+          prosjektet med et lite, månedlig beløp via Vipps.
         </p>
 
         <div className="justify-center my-8">
-          <form className={"flex"}>
+          <form className={"flex flex-col mx-4"}>
             <Input
               type={"email"}
               placeholder={"din@epost.no"}
@@ -43,6 +43,7 @@ export const DonationSection = function () {
             <a
               // don't navigate if email is not valid
               href={emailInput ? `/api/trigger-donation/vipps?email=${emailInput}` : undefined}
+              className={"mt-2"}
               onClick={(e) => {
                 if (!emailValid) {
                   e.preventDefault();
@@ -70,10 +71,6 @@ export const DonationSection = function () {
           >
             Eposten brukes utelukkende som referanse dersom du ønsker å avslutte støtten. Du kommer ikke til å motta
             noen eposter.
-          </p>
-        </div>
-
-        <p>
             <b>
               Du kan når som helst avslutte støtten fra{" "}
               <a className="text-blue-600 underline" href="/donations-cancel">
@@ -81,6 +78,7 @@ export const DonationSection = function () {
               </a>.
             </b>
           </p>
+        </div>
 
         <p className="mt-4">
           Opplever du problemer med betalingen, eller har du andre spørsmål? Ta{" "}

lib/rss.test.ts

@@ -31,5 +31,5 @@ Deno.test("generated rss contains promo with link to donations page", () => {
   const feed = rss.assembleFeed(series);
 
   console.log(feed);
-  feed.includes("Vurder å støtte utviklingen via Vipps med valgfritt beløp");
+  feed.includes("Vurder å støtte utviklingen via Vipps");
 });

lib/rss.ts

@@ -59,7 +59,7 @@ function assembleFeed(series: Series): string {
 
 function descriptionWithDonationPromotion(description: string): string {
   const promotion =
-    `Takk for at du bruker NRSS 🙏🌟 Vurder å støtte utviklingen via Vipps med valgfritt beløp. Se mer på ${getHostUrl()}.`;
+    `Takk for at du bruker NRSS 🙏🌟 Vurder å støtte utviklingen via Vipps med omtrent det samme som prisen på en kaffekopp. Se mer på ${getHostUrl()}.`;
 
   return `
   --------------------------------\n

lib/vipps/vipps.ts

@@ -45,6 +45,7 @@ const getAccessToken = async function () {
 
 export const createAgreement = async function (email: string) {
   const token = await getAccessToken();
+  const amount = 5000; // 50 NOK
   const response = await fetch(`${config.baseUrl}/recurring/v3/agreements/`, {
     method: "POST",
     // @ts-ignore
@@ -58,10 +59,14 @@ export const createAgreement = async function (email: string) {
         "unit": "MONTH",
         "count": 1,
       },
+      "initialCharge": {
+        "amount": amount,
+        "description": "Initial charge",
+        "transactionType": "DIRECT_CAPTURE",
+      },
       "pricing": {
-        "suggestedMaxAmount": 5000, // 50,- NOK
+        "amount": amount,
         "currency": "NOK",
-        "type": "VARIABLE",
       },
       // email is used to identify the user in the success page
       "merchantRedirectUrl": `${getHostUrl()}/donations-success?email=${email}`,

routes/api/trigger-donation/vipps.ts

@@ -18,7 +18,7 @@ export const handler = async function (req: Request): Promise<Response> {
   }
 
   const existingAgreement = await storage.readVippsAgreement({ id: email });
-  if (existingAgreement) {
+  if (existingAgreement && existingAgreement.revokedAt === null) {
     console.error("Agreement already exists", email);
     return Response.redirect(errorPage);
   }

routes/donations-cancel.tsx

@@ -50,7 +50,7 @@ export default function ({ data }: PageProps<Props>) {
       className={"p-4 mx-auto max-w-screen-md text-center"}
     >
       <h1
-        className={"text-4xl"}
+        className={"text-3xl mb-6"}
       >
         Avslutt støtte til NRSS
       </h1>
@@ -63,21 +63,22 @@ export default function ({ data }: PageProps<Props>) {
         </p>
       )}
       {data.cancelled && (
-        <p>
+        <p className={"text-left m-4"}>
-          Støtten er nå avsluttet. Tusen takk for at du har støttet NRSS 🙏🌟
+          Støtten er nå avsluttet. <br />
+          <b>Tusen takk for at du har støttet NRSS 🙏</b>
         </p>
       )}
       {!data.cancelled && (
-        <form>
+        <form className={"flex flex-col w-full"}>
           <Input
             type={"email"}
             placeholder={"din@epost.no"}
             required
             name={"email"}
             id={"email"}
-          >
+          />
-          </Input>
           <Button
+            className={"w-full"}
             type={"submit"}
           >
             Avslutt