@indietabletop/appkit 7.0.0-rc.1 → 7.0.0-rc.2

package/lib/account/JoinCard.tsx

@@ -1,6 +1,6 @@
 import { Form, useStoreState } from "@ariakit/react";
 import { type Dispatch, type SetStateAction, useState } from "react";
-import { Link } from "wouter";
+import { Link, useSearchParams } from "wouter";
 import { useAppConfig, useClient } from "../AppConfig/AppConfig.tsx";
 import { cx } from "../class-names.ts";
 import { interactiveText } from "../common.css.ts";
@@ -38,6 +38,7 @@ type InitialStepProps = {
 };
 
 function InitialStep(props: InitialStepProps) {
+  const [params] = useSearchParams();
   const { client, placeholders, hrefs } = useAppConfig();
   const { defaultValues, setStep } = props;
 
@@ -142,7 +143,10 @@ function InitialStep(props: InitialStepProps) {
             {"Have an existing account? "}
             <Link
               {...cx(interactiveText)}
-              href={hrefs.login()}
+              href={hrefs.login({
+                redirectTo: params.get("redirectTo") ?? undefined,
+                backTo: params.get("backTo") ?? undefined,
+              })}
               state={{ emailValue }}
             >
               Log in

package/lib/account/LoginView.tsx

@@ -1,6 +1,6 @@
 import { Button, Form, useStoreState } from "@ariakit/react";
 import type { ReactNode } from "react";
-import { Link, useLocation } from "wouter";
+import { Link, useLocation, useSearchParams } from "wouter";
 import { useAppConfig } from "../AppConfig/AppConfig.tsx";
 import { interactiveText } from "../common.css.ts";
 import { getSubmitFailureMessage } from "../failureMessages.ts";
@@ -31,6 +31,7 @@ export function LoginView(props: {
   description: ReactNode;
   reload: () => void;
 }) {
+  const [params] = useSearchParams();
   const { currentUser, defaultValues, description, onLogin, reload } = props;
   const { placeholders, client, hrefs } = useAppConfig();
   const { logout } = useAppActions();
@@ -73,7 +74,7 @@ export function LoginView(props: {
       <LetterheadHeader>
         <LetterheadHeading>Log in</LetterheadHeading>
 
-        {localUserPresent ? (
+        {localUserPresent ?
           <>
             <LetterheadParagraph>
               Your session has expired. Please log into Indie Tabletop Club
@@ -94,12 +95,14 @@ export function LoginView(props: {
               {" first."}
             </LetterheadParagraph>
           </>
-        ) : (
-          <LetterheadParagraph>
+        : <LetterheadParagraph>
             {description}
             {" Do not have an account? "}
             <Link
-              href={hrefs.join()}
+              href={hrefs.join({
+                redirectTo: params.get("redirectTo") ?? undefined,
+                backTo: params.get("backTo") ?? undefined,
+              })}
               className={interactiveText}
               state={{ emailValue }}
             >
@@ -107,7 +110,7 @@ export function LoginView(props: {
             </Link>
             {"."}
           </LetterheadParagraph>
-        )}
+        }
       </LetterheadHeader>
 
       <Form store={form} resetOnSubmit={false}>

package/lib/fathom.ts

@@ -0,0 +1,15 @@
+declare global {
+  interface Window {
+    fathom?: { trackEvent: (name: string) => void };
+  }
+}
+
+export function trackEvent(event: string) {
+  if (window.fathom) {
+    window.fathom.trackEvent(event);
+  } else {
+    console.warn(
+      `Attempting to track event ${event}, but Fathom not installed.`,
+    );
+  }
+}

package/lib/hrefs.ts

@@ -1,10 +1,28 @@
 import type { LinkUtmParams, createUtm } from "./utm.ts";
 
+export function withParams(path: string, params?: Record<string, string>) {
+  if (!params) {
+    return path;
+  }
+
+  return `${path}?${new URLSearchParams(params)}`;
+}
+
+export type AccountParams = {
+  redirectTo?: string;
+  backTo?: string;
+};
+
+export type BuyParams = {
+  note?: "continuePurchase" | "loginNeeded";
+};
+
 type InputAppHrefs = {
-  login: () => string;
-  password: () => string;
-  join: () => string;
-  dashboard: () => string;
+  login?: (params?: AccountParams) => string;
+  join?: (params?: AccountParams) => string;
+  password?: () => string;
+
+  dashboard?: () => string;
   account: () => string;
 
   // These are usually external links to the root domain, so we want to be
@@ -33,6 +51,12 @@ export function createHrefs<T extends InputAppHrefs>(params: {
   const { utm, hrefs } = params;
 
   return {
+    dashboard: () => `~/`,
+
+    login: (params?: AccountParams) => withParams(`~/login`, params),
+    join: (params?: AccountParams) => withParams(`~/join`, params),
+    password: () => `~/password`,
+
     terms: (linkUtm?: LinkUtmParams) =>
       `https://indietabletop.club/terms?${utm(linkUtm)}`,
     privacy: (linkUtm?: LinkUtmParams) =>

package/lib/index.ts

@@ -43,10 +43,12 @@ export * from "./use-reverting-state.ts";
 export * from "./use-scroll-restoration.ts";
 export * from "./useEnsureValue.ts";
 export * from "./useFetchJson.tsx";
+export * from "./useGetProductStatus.ts";
 export * from "./useInvokeClient.ts";
 export * from "./useIsVisible.ts";
 
 // Utils
+
 export * from "./append-copy-to-text.ts";
 export * from "./async-op.ts";
 export * from "./caught-value.ts";
@@ -55,6 +57,7 @@ export * from "./client.ts";
 export * from "./copyrightRange.ts";
 export * from "./createSafeStorage.ts";
 export * from "./failureMessages.ts";
+export * from "./fathom.ts";
 export * from "./groupBy.ts";
 export * from "./HistoryState.ts";
 export * from "./hrefs.ts";

package/lib/omitUndefinedKeys.ts

@@ -0,0 +1,9 @@
+/**
+ * Given an object with keys that might contain undefined values, returns a new
+ * object only with keys that are not undefined.
+ */
+export function omitUndefinedKeys<T>(record: Record<string, T | undefined>) {
+  return Object.fromEntries(
+    Object.entries(record).filter(([_, v]) => v !== undefined),
+  ) as Record<string, T>;
+}

package/lib/useGetProductStatus.ts

@@ -0,0 +1,56 @@
+import { useCallback } from "react";
+import useSWR from "swr";
+import { useClient } from "./AppConfig/AppConfig.tsx";
+import { Failure, Success } from "./async-op.ts";
+import { swrResponseToResult } from "./result/swr.ts";
+import { useCurrentUser } from "./store/index.tsx";
+
+function useGetOwnedProduct(productCode: string) {
+  const client = useClient();
+
+  const swr = useSWR(
+    `getOwnedProduct:${productCode}`,
+    useCallback(() => {
+      return client.getOwnedProduct(productCode);
+    }, [productCode]),
+  );
+
+  return swrResponseToResult(swr);
+}
+
+export function useGetProductStatus(productCode: string) {
+  const result = useGetOwnedProduct(productCode);
+  const currentUser = useCurrentUser();
+
+  if (result.isPending) {
+    return result;
+  }
+
+  if (result.isFailure) {
+    const { failure } = result;
+
+    if (failure.type === "API_ERROR") {
+      // The no currentUser case is possible in case the user is logged into ITC
+      // via a domain-wide cookie, but they have not yet logged in this app.
+      if (failure.code === 401 || !currentUser) {
+        return new Success({ type: "AUTHENTICATE" as const });
+      }
+
+      if (failure.code === 403) {
+        return new Success({ type: "PURCHASE" as const });
+      }
+    }
+
+    // Other errors should be handled by the default error handling
+    return result;
+  }
+
+  // This shouldn't happen in practice, as this particular endpoint errors out
+  // if a product link fails to generate.
+  const { downloadUrl } = result.value;
+  if (!downloadUrl) {
+    return new Failure({ type: "UNKNOWN_ERROR" as const });
+  }
+
+  return new Success({ type: "DOWNLOAD" as const, downloadUrl });
+}

package/lib/utm.ts

@@ -1,12 +1,4 @@
-/**
- * Given an object with keys that might contain undefined values, returns a new
- * object only with keys that are not undefined.
- */
-function omitUndefinedKeys<T>(record: Record<string, T | undefined>) {
-  return Object.fromEntries(
-    Object.entries(record).filter(([_, v]) => v !== undefined),
-  ) as Record<string, T>;
-}
+import { omitUndefinedKeys } from "./omitUndefinedKeys.ts";
 
 /**
  * Full UTM configuration object.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indietabletop/appkit",
-  "version": "7.0.0-rc.1",
+  "version": "7.0.0-rc.2",
   "description": "A collection of modules used in apps built by Indie Tabletop Club",
   "private": false,
   "type": "module",