Merge pull request #522 from v0l/subscription-handle

Subscription handle
2023-04-18 10:40:13 +01:00 · 2023-04-18 10:40:13 +01:00 · 4f1e5df1a8
parent 27a3083b7d 6354fc3a17
commit 4f1e5df1a8
8 changed files with 309 additions and 151 deletions
--- a/packages/app/src/Element/Nip5Service.tsx
+++ b/packages/app/src/Element/Nip5Service.tsx
@ -21,6 +21,7 @@ import { useUserProfile } from "Hooks/useUserProfile";
 import useEventPublisher from "Feed/EventPublisher";
 import { debounce } from "Util";
 import useLogin from "Hooks/useLogin";
+import SnortServiceProvider from "Nip05/SnortServiceProvider";

 import messages from "./messages";

@ -31,6 +32,7 @@ type Nip05ServiceProps = {
  link: string;
  supportLink: string;
  helpText?: boolean;
+  forSubscription?: string;
  onChange?(h: string): void;
  onSuccess?(h: string): void;
 };
@ -188,6 +190,22 @@ export default function Nip5Service(props: Nip05ServiceProps) {
    }
  }

+  async function claimForSubscription(handle: string, domain: string, sub: string) {
+    if (!pubkey || !publisher) {
+      return;
+    }
+
+    const svcEx = new SnortServiceProvider(publisher, props.service);
+    const rsp = await svcEx.registerForSubscription(handle, domain, sub);
+    if ("error" in rsp) {
+      setError(rsp);
+    } else {
+      if (props.onSuccess) {
+        const nip05 = `${handle}@${domain}`;
+        props.onSuccess(nip05);
+      }
+    }
+  }
  async function updateProfile(handle: string, domain: string) {
    if (user && publisher) {
      const nip05 = `${handle}@${domain}`;
@ -245,16 +263,27 @@ export default function Nip5Service(props: Nip05ServiceProps) {
      )}
      {availabilityResponse?.available && !registerStatus && (
        <div className="flex">
-          <div className="mr10">
-            <FormattedMessage
-              {...messages.Sats}
-              values={{ n: formatShort(unwrap(availabilityResponse.quote?.price)) }}
-            />
-            <br />
-            <small>{availabilityResponse.quote?.data.type}</small>
-          </div>
-          <AsyncButton onClick={() => startBuy(handle, domain)}>
-            <FormattedMessage {...messages.BuyNow} />
+          {!props.forSubscription && (
+            <div className="mr10">
+              <FormattedMessage
+                {...messages.Sats}
+                values={{ n: formatShort(unwrap(availabilityResponse.quote?.price)) }}
+              />
+              <br />
+              <small>{availabilityResponse.quote?.data.type}</small>
+            </div>
+          )}
+          <AsyncButton
+            onClick={() =>
+              props.forSubscription
+                ? claimForSubscription(handle, domain, props.forSubscription)
+                : startBuy(handle, domain)
+            }>
+            {props.forSubscription ? (
+              <FormattedMessage defaultMessage="Claim Now" />
+            ) : (
+              <FormattedMessage {...messages.BuyNow} />
+            )}
          </AsyncButton>
        </div>
      )}
--- a/packages/app/src/Nip05/SnortServiceProvider.ts
+++ b/packages/app/src/Nip05/SnortServiceProvider.ts
@ -42,6 +42,15 @@ export default class SnortServiceProvider extends ServiceProvider {
    return this.getJsonAuthd<object>(`/${id}`, "PATCH", obj);
  }

+  async registerForSubscription(handle: string, domain: string, id: string) {
+    return this.getJsonAuthd<object>(`/registration/register/${id}`, "PUT", {
+      name: handle,
+      domain,
+      pk: "",
+      ref: "snort",
+    });
+  }
+
  async getJsonAuthd<T>(
    path: string,
    method?: "GET" | string,
--- a/packages/app/src/Pages/Verification.tsx
+++ b/packages/app/src/Pages/Verification.tsx
@ -7,14 +7,16 @@ import messages from "./messages";

 import "./Verification.css";

-export const services = [
-  {
-    name: "Snort",
-    service: `${ApiHost}/api/v1/n5sp`,
-    link: "https://snort.social/",
-    supportLink: "https://snort.social/help",
-    about: <FormattedMessage {...messages.SnortSocialNip} />,
-  },
+export const SnortNostrAddressService = {
+  name: "Snort",
+  service: `${ApiHost}/api/v1/n5sp`,
+  link: "https://snort.social/",
+  supportLink: "https://snort.social/help",
+  about: <FormattedMessage {...messages.SnortSocialNip} />,
+};
+
+export const Nip5Services = [
+  SnortNostrAddressService,
  {
    name: "Nostr Plebs",
    service: "https://nostrplebs.com/api/v1",
@ -48,7 +50,7 @@ export default function VerificationPage() {
        </li>
      </ul>

-      {services.map(a => (
+      {Nip5Services.map(a => (
        <Nip5Service key={a.name} {...a} />
      ))}
    </div>
--- a/packages/app/src/Pages/new/GetVerified.tsx
+++ b/packages/app/src/Pages/new/GetVerified.tsx
@ -3,7 +3,7 @@ import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";

 import Logo from "Element/Logo";
-import { services } from "Pages/Verification";
+import { Nip5Services } from "Pages/Verification";
 import Nip5Service from "Element/Nip5Service";
 import ProfileImage from "Element/ProfileImage";
 import { useUserProfile } from "Hooks/useUserProfile";
@ -66,7 +66,7 @@ export default function GetVerified() {
          <div className="nip-container">
            <Nip5Service
              key="snort"
-              {...services[0]}
+              {...Nip5Services[0]}
              helpText={false}
              onChange={setNip05}
              onSuccess={() => setIsVerified(true)}
@ -85,7 +85,7 @@ export default function GetVerified() {
          <div className="nip-container">
            <Nip5Service
              key="nostrplebs"
-              {...services[1]}
+              {...Nip5Services[1]}
              helpText={false}
              onChange={setNip05}
              onSuccess={() => setIsVerified(true)}
--- a/packages/app/src/Pages/subscribe/ManageSubscription.tsx
+++ b/packages/app/src/Pages/subscribe/ManageSubscription.tsx
@ -1,19 +1,19 @@
 import { useEffect, useState } from "react";
-import { FormattedDate, FormattedMessage, FormattedNumber } from "react-intl";
+import { FormattedMessage } from "react-intl";
 import { Link } from "react-router-dom";

 import PageSpinner from "Element/PageSpinner";
 import useEventPublisher from "Feed/EventPublisher";
-import SnortApi, { Subscription } from "SnortApi";
-import { mapPlanName } from ".";
-import Icon from "Icons/Icon";
+import SnortApi, { Subscription, SubscriptionError } from "SnortApi";
+import { mapSubscriptionErrorCode } from ".";
+import SubscriptionCard from "./SubscriptionCard";

 export default function ManageSubscriptionPage() {
  const publisher = useEventPublisher();
  const api = new SnortApi(undefined, publisher);

  const [subs, setSubs] = useState<Array<Subscription>>();
-  const [error, setError] = useState("");
+  const [error, setError] = useState<SubscriptionError>();

  useEffect(() => {
    (async () => {
@ -21,10 +21,8 @@ export default function ManageSubscriptionPage() {
        const s = await api.listSubscriptions();
        setSubs(s);
      } catch (e) {
-        if (e instanceof Error) {
-          setError(e.message);
-        } else {
-          setError("Unknown error");
+        if (e instanceof SubscriptionError) {
+          setError(e);
        }
      }
    })();
@ -38,71 +36,9 @@ export default function ManageSubscriptionPage() {
      <h2>
        <FormattedMessage defaultMessage="Subscriptions" />
      </h2>
-      {subs.map(a => {
-        const created = new Date(a.created);
-        const expires = new Date(a.expires);
-        const now = new Date();
-        const daysToExpire = Math.floor((expires.getTime() - now.getTime()) / 8.64e7);
-        const hoursToExpire = Math.floor((expires.getTime() - now.getTime()) / 3.6e6);
-        const isExpired = expires < now;
-        return (
-          <div key={a.id} className="card">
-            <div className="flex card-title">
-              <Icon name="badge" className="mr5" size={25} />
-              {mapPlanName(a.type)}
-            </div>
-            <div className="flex">
-              <p className="f-1">
-                <FormattedMessage defaultMessage="Created" />
-                :&nbsp;
-                <time dateTime={created.toISOString()}>
-                  <FormattedDate value={created} dateStyle="full" />
-                </time>
-              </p>
-              {daysToExpire >= 1 && (
-                <p className="f-1">
-                  <FormattedMessage defaultMessage="Expires" />
-                  :&nbsp;
-                  <time dateTime={expires.toISOString()}>
-                    <FormattedMessage
-                      defaultMessage="{n} days"
-                      values={{
-                        n: <FormattedNumber value={daysToExpire} maximumFractionDigits={0} />,
-                      }}
-                    />
-                  </time>
-                </p>
-              )}
-              {daysToExpire >= 0 && daysToExpire < 1 && (
-                <p className="f-1">
-                  <FormattedMessage defaultMessage="Expires" />
-                  :&nbsp;
-                  <time dateTime={expires.toISOString()}>
-                    <FormattedMessage
-                      defaultMessage="{n} hours"
-                      values={{
-                        n: <FormattedNumber value={hoursToExpire} maximumFractionDigits={0} />,
-                      }}
-                    />
-                  </time>
-                </p>
-              )}
-              {daysToExpire < 0 && (
-                <p className="f-1 error">
-                  <FormattedMessage defaultMessage="Expired" />
-                </p>
-              )}
-            </div>
-            {isExpired && (
-              <div className="flex">
-                <button>
-                  <FormattedMessage defaultMessage="Renew" />
-                </button>
-              </div>
-            )}
-          </div>
-        );
-      })}
+      {subs.map(a => (
+        <SubscriptionCard sub={a} key={a.id} />
+      ))}
      {subs.length === 0 && (
        <p>
          <FormattedMessage
@ -117,7 +53,7 @@ export default function ManageSubscriptionPage() {
          />
        </p>
      )}
-      {error && <b className="error">{error}</b>}
+      {error && <b className="error">{mapSubscriptionErrorCode(error)}</b>}
    </>
  );
 }
--- a/packages/app/src/Pages/subscribe/SubscriptionCard.tsx
+++ b/packages/app/src/Pages/subscribe/SubscriptionCard.tsx
@ -0,0 +1,137 @@
+import { FormattedMessage, FormattedDate, FormattedNumber, useIntl } from "react-intl";
+import { useState } from "react";
+
+import SnortApi, { Subscription, SubscriptionError } from "SnortApi";
+import { mapPlanName, mapSubscriptionErrorCode } from ".";
+import AsyncButton from "Element/AsyncButton";
+import Icon from "Icons/Icon";
+import useEventPublisher from "Feed/EventPublisher";
+import SendSats from "Element/SendSats";
+import Nip5Service from "Element/Nip5Service";
+import { SnortNostrAddressService } from "Pages/Verification";
+import Nip05 from "Element/Nip05";
+
+export default function SubscriptionCard({ sub }: { sub: Subscription }) {
+  const publisher = useEventPublisher();
+  const { formatMessage } = useIntl();
+
+  const created = new Date(sub.created * 1000);
+  const expires = new Date(sub.expires * 1000);
+  const now = new Date();
+  const daysToExpire = Math.floor((expires.getTime() - now.getTime()) / 8.64e7);
+  const hoursToExpire = Math.floor((expires.getTime() - now.getTime()) / 3.6e6);
+  const isExpired = sub.state === "expired";
+  const isNew = sub.state === "new";
+  const isPaid = sub.state === "paid";
+
+  const [invoice, setInvoice] = useState("");
+  const [error, setError] = useState<SubscriptionError>();
+
+  async function renew(id: string) {
+    const api = new SnortApi(undefined, publisher);
+    try {
+      const rsp = await api.renewSubscription(id);
+      setInvoice(rsp.pr);
+    } catch (e) {
+      if (e instanceof SubscriptionError) {
+        setError(e);
+      }
+    }
+  }
+
+  function subFeatures() {
+    return (
+      <>
+        {!sub.handle && (
+          <>
+            <h3>
+              <FormattedMessage defaultMessage="Claim your included Snort nostr address" />
+            </h3>
+            <Nip5Service
+              {...SnortNostrAddressService}
+              helpText={false}
+              forSubscription={sub.id}
+              onSuccess={h => (sub.handle = h)}
+            />
+          </>
+        )}
+        {sub.handle && <Nip05 nip05={sub.handle} pubkey={""} verifyNip={false} />}
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div className="card">
+        <div className="flex card-title">
+          <Icon name="badge" className="mr5" size={25} />
+          {mapPlanName(sub.type)}
+        </div>
+        <div className="flex">
+          <p className="f-1">
+            <FormattedMessage defaultMessage="Created" />
+            :&nbsp;
+            <time dateTime={created.toISOString()}>
+              <FormattedDate value={created} dateStyle="full" />
+            </time>
+          </p>
+          {daysToExpire >= 1 && (
+            <p className="f-1">
+              <FormattedMessage defaultMessage="Expires" />
+              :&nbsp;
+              <time dateTime={expires.toISOString()}>
+                <FormattedMessage
+                  defaultMessage="{n} days"
+                  values={{
+                    n: <FormattedNumber value={daysToExpire} maximumFractionDigits={0} />,
+                  }}
+                />
+              </time>
+            </p>
+          )}
+          {daysToExpire >= 0 && daysToExpire < 1 && (
+            <p className="f-1">
+              <FormattedMessage defaultMessage="Expires" />
+              :&nbsp;
+              <time dateTime={expires.toISOString()}>
+                <FormattedMessage
+                  defaultMessage="{n} hours"
+                  values={{
+                    n: <FormattedNumber value={hoursToExpire} maximumFractionDigits={0} />,
+                  }}
+                />
+              </time>
+            </p>
+          )}
+          {isExpired && (
+            <p className="f-1 error">
+              <FormattedMessage defaultMessage="Expired" />
+            </p>
+          )}
+          {isNew && (
+            <p className="f-1">
+              <FormattedMessage defaultMessage="Unpaid" />
+            </p>
+          )}
+        </div>
+        {(isExpired || isNew) && (
+          <div className="flex">
+            <AsyncButton onClick={() => renew(sub.id)}>
+              {isExpired ? <FormattedMessage defaultMessage="Renew" /> : <FormattedMessage defaultMessage="Pay Now" />}
+            </AsyncButton>
+          </div>
+        )}
+        {isPaid && subFeatures()}
+      </div>
+      <SendSats
+        invoice={invoice}
+        show={invoice !== ""}
+        onClose={() => setInvoice("")}
+        title={formatMessage({
+          defaultMessage: "Pay for subscription",
+        })}
+      />
+      {error && <b className="error">{mapSubscriptionErrorCode(error)}</b>}
+    </>
+  );
+}
--- a/packages/app/src/Pages/subscribe/index.tsx
+++ b/packages/app/src/Pages/subscribe/index.tsx
@ -9,7 +9,7 @@ import { LockedFeatures, Plans, SubscriptionType } from "Subscription";
 import ManageSubscriptionPage from "Pages/subscribe/ManageSubscription";
 import AsyncButton from "Element/AsyncButton";
 import useEventPublisher from "Feed/EventPublisher";
-import SnortApi from "SnortApi";
+import SnortApi, { SubscriptionError, SubscriptionErrorCode } from "SnortApi";
 import SendSats from "Element/SendSats";

 export function mapPlanName(id: number) {
@ -38,67 +38,91 @@ export function mapFeatureName(k: LockedFeatures) {
  }
 }

+export function mapSubscriptionErrorCode(c: SubscriptionError) {
+  switch (c.code) {
+    case SubscriptionErrorCode.InternalError:
+      return <FormattedMessage defaultMessage="Internal error: {msg}" values={{ msg: c.message }} />;
+    case SubscriptionErrorCode.SubscriptionActive:
+      return <FormattedMessage defaultMessage="You subscription is still active, you can't renew yet" />;
+    case SubscriptionErrorCode.Duplicate:
+      return <FormattedMessage defaultMessage="You already have a subscription of this type, please renew or pay" />;
+    default:
+      return c.message;
+  }
+}
+
 export function SubscribePage() {
  const publisher = useEventPublisher();
  const api = new SnortApi(undefined, publisher);
  const [invoice, setInvoice] = useState("");
+  const [error, setError] = useState<SubscriptionError>();

  async function subscribe(type: number) {
-    const rsp = await api.createSubscription(type);
-    setInvoice(rsp.pr);
+    setError(undefined);
+    try {
+      const rsp = await api.createSubscription(type);
+      setInvoice(rsp.pr);
+    } catch (e) {
+      if (e instanceof SubscriptionError) {
+        setError(e);
+      }
+    }
  }

  return (
-    <div className="flex subscribe-page">
-      {Plans.map(a => {
-        const lower = Plans.filter(b => b.id < a.id);
-        return (
-          <div className={`card flex f-col${a.disabled ? " disabled" : ""}`}>
-            <div className="f-grow">
-              <h2>{mapPlanName(a.id)}</h2>
-              <p>
-                <FormattedMessage
-                  defaultMessage="Subscribe to Snort {plan} for {price} and receive the following rewards"
-                  values={{
-                    plan: mapPlanName(a.id),
-                    price: <b>{formatShort(a.price)} sats/mo</b>,
-                  }}
-                />
-                :
-              </p>
-              <b>
-                <FormattedMessage defaultMessage="Not all features are built yet, more features to be added soon!" />
-              </b>
-              <ul>
-                {a.unlocks.map(b => (
-                  <li>{mapFeatureName(b)} </li>
-                ))}
-                {lower.map(b => (
-                  <li>
-                    <FormattedMessage
-                      defaultMessage="Everything in {plan}"
-                      values={{
-                        plan: mapPlanName(b.id),
-                      }}
-                    />
-                  </li>
-                ))}
-              </ul>
+    <>
+      <div className="flex subscribe-page">
+        {Plans.map(a => {
+          const lower = Plans.filter(b => b.id < a.id);
+          return (
+            <div className={`card flex f-col${a.disabled ? " disabled" : ""}`}>
+              <div className="f-grow">
+                <h2>{mapPlanName(a.id)}</h2>
+                <p>
+                  <FormattedMessage
+                    defaultMessage="Subscribe to Snort {plan} for {price} and receive the following rewards"
+                    values={{
+                      plan: mapPlanName(a.id),
+                      price: <b>{formatShort(a.price)} sats/mo</b>,
+                    }}
+                  />
+                  :
+                </p>
+                <b>
+                  <FormattedMessage defaultMessage="Not all features are built yet, more features to be added soon!" />
+                </b>
+                <ul>
+                  {a.unlocks.map(b => (
+                    <li>{mapFeatureName(b)} </li>
+                  ))}
+                  {lower.map(b => (
+                    <li>
+                      <FormattedMessage
+                        defaultMessage="Everything in {plan}"
+                        values={{
+                          plan: mapPlanName(b.id),
+                        }}
+                      />
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <div className="flex f-center w-max mb10">
+                <AsyncButton className="button" disabled={a.disabled} onClick={() => subscribe(a.id)}>
+                  {a.disabled ? (
+                    <FormattedMessage defaultMessage="Coming soon" />
+                  ) : (
+                    <FormattedMessage defaultMessage="Subscribe" />
+                  )}
+                </AsyncButton>
+              </div>
            </div>
-            <div className="flex f-center w-max mb10">
-              <AsyncButton className="button" disabled={a.disabled} onClick={() => subscribe(a.id)}>
-                {a.disabled ? (
-                  <FormattedMessage defaultMessage="Coming soon" />
-                ) : (
-                  <FormattedMessage defaultMessage="Subscribe" />
-                )}
-              </AsyncButton>
-            </div>
-          </div>
-        );
-      })}
+          );
+        })}
+      </div>
+      {error && <b className="error">{mapSubscriptionErrorCode(error)}</b>}
      <SendSats invoice={invoice} show={invoice !== ""} onClose={() => setInvoice("")} />
-    </div>
+    </>
  );
 }

--- a/packages/app/src/SnortApi.ts
+++ b/packages/app/src/SnortApi.ts
@ -20,8 +20,25 @@ export interface InvoiceResponse {
 export interface Subscription {
  id: string;
  type: SubscriptionType;
-  created: string;
-  expires: string;
+  created: number;
+  expires: number;
+  state: "new" | "expired" | "paid";
+  handle?: string;
+}
+
+export enum SubscriptionErrorCode {
+  InternalError = 1,
+  SubscriptionActive = 2,
+  Duplicate = 3,
+}
+
+export class SubscriptionError extends Error {
+  code: SubscriptionErrorCode;
+
+  constructor(msg: string, code: SubscriptionErrorCode) {
+    super(msg);
+    this.code = code;
+  }
 }

 export default class SnortApi {
@ -49,6 +66,10 @@ export default class SnortApi {
    return this.#getJsonAuthd<InvoiceResponse>(`api/v1/subscription?type=${type}`, "PUT");
  }

+  renewSubscription(id: string) {
+    return this.#getJsonAuthd<InvoiceResponse>(`api/v1/subscription/${id}/renew`, "GET");
+  }
+
  listSubscriptions() {
    return this.#getJsonAuthd<Array<Subscription>>("api/v1/subscription");
  }
@ -93,7 +114,7 @@ export default class SnortApi {

    const obj = await rsp.json();
    if ("error" in obj) {
-      throw new Error(obj.error);
+      throw new SubscriptionError(obj.error, obj.code);
    }
    return obj as T;
  }