From 08829c24ff019facb06937f29d18a8fb0653889e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Mon, 30 Sep 2024 09:56:50 +0200
Subject: [PATCH] feat: zapplanner integration

---
 frontend/src/components/SuggestedAppData.tsx  |  60 +-------
 frontend/src/routes.tsx                       |   5 +
 .../src/screens/internal-apps/Zapplanner.tsx  | 142 ++++++++++++++++++
 3 files changed, 148 insertions(+), 59 deletions(-)
 create mode 100644 frontend/src/screens/internal-apps/Zapplanner.tsx

diff --git a/frontend/src/components/SuggestedAppData.tsx b/frontend/src/components/SuggestedAppData.tsx
index 2e571232..b23979ae 100644
--- a/frontend/src/components/SuggestedAppData.tsx
+++ b/frontend/src/components/SuggestedAppData.tsx
@@ -647,65 +647,7 @@ export const suggestedApps: SuggestedApp[] = [
     description: "Schedule payments",
     webLink: "https://zapplanner.albylabs.com/",
     logo: zapplanner,
-    guide: (
-      <>
-        <div>
-          <h3 className="font-medium">In ZapPlanner</h3>
-          <ul className="list-inside text-muted-foreground">
-            <li>
-              1. Open{" "}
-              <ExternalLink
-                to="https://zapplanner.albylabs.com"
-                className="font-medium text-foreground underline"
-              >
-                ZapPlanner
-              </ExternalLink>{" "}
-              in your browser
-            </li>
-            <li>
-              2. Click on{" "}
-              <span className="font-medium text-foreground">
-                New Recurring Payment
-              </span>{" "}
-              → add the details and click{" "}
-              <span className="font-medium text-foreground">Continue</span>
-            </li>
-            <li>
-              3. Choose{" "}
-              <span className="font-medium text-foreground">
-                Nostr Wallet Connect URL
-              </span>
-            </li>
-          </ul>
-        </div>
-        <div>
-          <h3 className="font-medium">In Alby Hub</h3>
-          <ul className="list-inside text-muted-foreground">
-            <li>
-              4. Click{" "}
-              <Link
-                to="/apps/new?app=zapplanner"
-                className="font-medium text-foreground underline"
-              >
-                Connect to ZapPlanner
-              </Link>
-            </li>
-            <li>5. Set app's wallet permissions (full access recommended)</li>
-          </ul>
-        </div>
-        <div>
-          <h3 className="font-medium">In ZapPlanner</h3>
-          <ul className="list-inside text-muted-foreground">
-            <li>
-              6. Paste the connection secret from Alby Hub and click{" "}
-              <span className="font-medium text-foreground">
-                Create Recurring Payment
-              </span>
-            </li>
-          </ul>
-        </div>
-      </>
-    ),
+    internal: true,
   },
   {
     id: "zapplepay",
diff --git a/frontend/src/routes.tsx b/frontend/src/routes.tsx
index 96648661..93bc4cbe 100644
--- a/frontend/src/routes.tsx
+++ b/frontend/src/routes.tsx
@@ -36,6 +36,7 @@ import { OpenedFirstChannel } from "src/screens/channels/first/OpenedFirstChanne
 import { OpeningFirstChannel } from "src/screens/channels/first/OpeningFirstChannel";
 import { BuzzPay } from "src/screens/internal-apps/BuzzPay";
 import { UncleJim } from "src/screens/internal-apps/UncleJim";
+import { Zapplanner } from "src/screens/internal-apps/Zapplanner";
 import BuyBitcoin from "src/screens/onchain/BuyBitcoin";
 import DepositBitcoin from "src/screens/onchain/DepositBitcoin";
 import ConnectPeer from "src/screens/peers/ConnectPeer";
@@ -217,6 +218,10 @@ const routes = [
             path: "buzzpay",
             element: <BuzzPay />,
           },
+          {
+            path: "zapplanner",
+            element: <Zapplanner />,
+          },
         ],
       },
       {
diff --git a/frontend/src/screens/internal-apps/Zapplanner.tsx b/frontend/src/screens/internal-apps/Zapplanner.tsx
new file mode 100644
index 00000000..9da74138
--- /dev/null
+++ b/frontend/src/screens/internal-apps/Zapplanner.tsx
@@ -0,0 +1,142 @@
+import React from "react";
+import AppHeader from "src/components/AppHeader";
+import AppCard from "src/components/connections/AppCard";
+import { Button } from "src/components/ui/button";
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "src/components/ui/card";
+import { useToast } from "src/components/ui/use-toast";
+import { useApps } from "src/hooks/useApps";
+import { createApp } from "src/requests/createApp";
+import { CreateAppRequest } from "src/types";
+import { handleRequestError } from "src/utils/handleRequestError";
+
+export function Zapplanner() {
+  const { data: apps, mutate: reloadApps } = useApps();
+  const { toast } = useToast();
+  const [, setLoading] = React.useState(false);
+  const handleSubmit = async (name: string) => {
+    setLoading(true);
+
+    try {
+      if (apps?.some((existingApp) => existingApp.name === name)) {
+        throw new Error("A connection with the same name already exists.");
+      }
+
+      const createAppRequest: CreateAppRequest = {
+        name,
+        scopes: [
+          "get_balance",
+          "get_info",
+          "list_transactions",
+          "lookup_invoice",
+          "make_invoice",
+          "notifications",
+          "pay_invoice",
+        ],
+        isolated: true,
+        metadata: {
+          app_store_app_id: "zapplanner",
+        },
+      };
+
+      await createApp(createAppRequest);
+      toast({
+        title: "Created subscription",
+        description: "The first payment is scheduled for 1st of October.",
+      });
+
+      reloadApps();
+    } catch (error) {
+      handleRequestError(toast, "Failed to create app", error);
+    }
+    setLoading(false);
+  };
+
+  const zapplannerApps = apps?.filter(
+    (app) => app.metadata?.app_store_app_id === "zapplanner"
+  );
+
+  return (
+    <div className="grid gap-5">
+      <AppHeader title="Zapplanner" description="Schedule payments" />
+      <h2 className="font-semibold text-xl">Inspiration</h2>
+      <p className="text-muted-foreground -mt-5">
+        Be the change you want to see in the world and do your part
+      </p>
+      <div className="grid grid-cols-3 gap-3">
+        <Card>
+          <CardHeader>
+            <CardTitle>Alby</CardTitle>
+            <CardDescription>description</CardDescription>
+          </CardHeader>
+          <CardFooter className="flex justify-end">
+            <Button
+              onClick={() => {
+                handleSubmit("Alby");
+              }}
+            >
+              Support with 5$ / month
+            </Button>
+          </CardFooter>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>HRF</CardTitle>
+            <CardDescription>description</CardDescription>
+          </CardHeader>
+          <CardFooter className="flex justify-end">
+            <Button>Support with 5$ / month</Button>
+          </CardFooter>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>opensats</CardTitle>
+            <CardDescription>description</CardDescription>
+          </CardHeader>
+          <CardFooter className="flex justify-end">
+            <Button>Support with 5$ / month</Button>
+          </CardFooter>
+        </Card>
+      </div>
+      {/* {!connectionSecret && (
+        <>
+          <form
+            onSubmit={handleSubmit}
+            className="flex flex-col items-start gap-5 max-w-lg"
+          >
+            <div className="w-full grid gap-1.5">
+              <Label htmlFor="name">Name of friend or family member</Label>
+              <Input
+                autoFocus
+                type="text"
+                name="name"
+                value={name}
+                id="name"
+                onChange={(e) => setName(e.target.value)}
+                required
+                autoComplete="off"
+              />
+            </div>
+            <LoadingButton loading={isLoading} type="submit">
+              Create Subaccount
+            </LoadingButton>
+          </form> */}
+
+      {!!zapplannerApps?.length && (
+        <>
+          <h2 className="font-semibold text-xl">Recurring Payments</h2>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-stretch app-list">
+            {zapplannerApps.map((app, index) => (
+              <AppCard key={index} app={app} />
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}