@indietabletop/appkit 5.2.0 → 5.3.0

package/lib/EnumMapper.ts

@@ -0,0 +1,50 @@
+type InputValues<K extends string | number, V> = Record<K, V> | Array<[K, V]>;
+
+/**
+ * Handles mapping enums to arbitrary values.
+ */
+export class EnumMapper<K extends string | number, V> {
+  private map: Map<K, V>;
+  private fallback: V;
+
+  constructor(values: InputValues<K, V>, fallback: V) {
+    const entries = Array.isArray(values)
+      ? values
+      : (Object.entries(values) as Array<[K, V]>);
+    this.map = new Map(entries);
+    this.fallback = fallback;
+  }
+
+  /**
+   * Returns a value corresponding to the provided key.
+   *
+   * If no match is found, returns the fallback value provided in the constructor.
+   *
+   * Note that TypeScript will make sure that we only ever use the right types
+   * as the enum param, but it can still happen at runtime that different
+   * values are provided.
+   */
+  get(key: K | undefined): V {
+    if (key === undefined) {
+      return this.fallback;
+    }
+
+    const value = this.map.get(key);
+    if (value === undefined) {
+      return this.fallback;
+    }
+
+    return value;
+  }
+
+  /**
+   * All enums known by this mapper.
+   */
+  get enums() {
+    return Array.from(this.map.keys());
+  }
+
+  static from<K extends string>(values: InputValues<K, string>) {
+    return new EnumMapper(values, "Unknown");
+  }
+}

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, useLocation } from "wouter";
+import { Link } from "wouter";
 import { useAppConfig, useClient } from "../AppConfig/AppConfig.tsx";
 import { cx } from "../class-names.ts";
 import { interactiveText } from "../common.css.ts";
@@ -163,14 +163,7 @@ type SubmitCodeStepProps = {
 
 function SubmitCodeStep(props: SubmitCodeStepProps) {
   const { tokenId, email, setStep } = props;
-  const [_, navigate] = useLocation();
   const client = useClient();
-  const redirectPath = useRedirectPath();
-
-  // Use redirect path if found in search params, otherwise go the success step.
-  const onSuccess = redirectPath
-    ? () => navigate(redirectPath)
-    : () => setStep({ type: "SUCCESS" });
 
   const { form, submitName } = useForm({
     defaultValues: {
@@ -185,7 +178,9 @@ function SubmitCodeStep(props: SubmitCodeStepProps) {
         });
       });
     },
-    onSuccess,
+    onSuccess() {
+      setStep({ type: "SUCCESS" });
+    },
   });
 
   return (
@@ -218,6 +213,8 @@ function SubmitCodeStep(props: SubmitCodeStepProps) {
 
 function SuccessStep() {
   const { hrefs } = useAppConfig();
+  const redirectPath = useRedirectPath();
+
   return (
     <Letterhead>
       <LetterheadHeader>
@@ -227,8 +224,8 @@ function SuccessStep() {
         </LetterheadParagraph>
       </LetterheadHeader>
 
-      <Link href={hrefs.dashboard()} {...cx(button())}>
-        Go to dashboard
+      <Link href={redirectPath ?? hrefs.dashboard()} {...cx(button())}>
+        {redirectPath ? "Continue" : "Go to dashboard"}
       </Link>
     </Letterhead>
   );

package/lib/client.ts

@@ -1,8 +1,23 @@
-import type { SpaceGits } from "@indietabletop/types";
-import { type Infer, mask, object, string, Struct, unknown } from "superstruct";
-import { Failure, Success } from "./async-op.js";
-import { currentUser, redeemedPledge, sessionInfo } from "./structs.js";
-import type { CurrentUser, FailurePayload, SessionInfo } from "./types.js";
+import {
+  currentUser,
+  featureUnlock,
+  ownedProduct,
+  redeemedPledge,
+  sessionInfo,
+  type FeatureUnlock,
+  type SpaceGits,
+} from "@indietabletop/types";
+import {
+  array,
+  mask,
+  object,
+  string,
+  Struct,
+  unknown,
+  type Infer,
+} from "superstruct";
+import { Failure, Success } from "./async-op.ts";
+import type { CurrentUser, FailurePayload, SessionInfo } from "./types.ts";
 
 export type UserGameData = {
   spacegits?: {
@@ -571,4 +586,47 @@ export class IndieTabletopClient {
       },
     );
   }
+
+  async getUnlocks<T extends FeatureUnlock["gameCode"]>(gameCode: T) {
+    return this.fetch(
+      `/v1/me/unlocks/${gameCode}`,
+      object({
+        unlocks: array(
+          featureUnlock() as unknown as Struct<
+            Extract<FeatureUnlock, { gameCode: T }>,
+            null
+          >,
+        ),
+      }),
+    );
+  }
+
+  async getOwnedProduct(productCode: string) {
+    return await this.fetch(`/v1/me/products/${productCode}`, ownedProduct());
+  }
+
+  async startCheckoutSession(payload: {
+    products: { code: string; quantity: number }[];
+    successUrl: string;
+    cancelUrl: string;
+  }) {
+    return await this.fetch(
+      `/v1/stripe/sessions`,
+      object({ redirectTo: string() }),
+      {
+        method: "POST",
+        json: payload,
+      },
+    );
+  }
+
+  async getCheckoutSession(sessionId: string) {
+    return await this.fetch(
+      `/v1/stripe/sessions/${sessionId}`,
+      object({
+        status: string(),
+        products: array(ownedProduct()),
+      }),
+    );
+  }
 }

package/lib/index.ts

@@ -35,6 +35,7 @@ export * from "./use-media-query.ts";
 export * from "./use-reverting-state.ts";
 export * from "./use-scroll-restoration.ts";
 export * from "./useEnsureValue.ts";
+export * from "./useInvokeClient.ts";
 export * from "./useIsVisible.ts";
 
 // Utils
@@ -64,5 +65,6 @@ export * from "./utm.ts";
 export * from "./validations.ts";
 
 // Other
+export * from "./EnumMapper.ts";
 export * from "./ModernIDB/index.ts";
 export * from "./store/index.tsx";

package/lib/structs.ts

@@ -1,27 +1,3 @@
-import { boolean, enums, number, object, optional, string } from "superstruct";
-
-export function currentUser() {
-  return object({
-    id: string(),
-    email: string(),
-    isVerified: boolean(),
-    prefersScrollbarVisibility: optional(enums(["ALWAYS"])),
-  });
-}
-
-export function sessionInfo() {
-  return object({
-    expiresTs: number(),
-    createdTs: number(),
-  });
-}
-
-export function redeemedPledge() {
-  return object({
-    id: string(),
-    downloadUrl: string(),
-    downloadUrlExpiresTs: number(),
-    contactSubscribed: boolean(),
-    email: string(),
-  });
-}
+// Structs are exported from here for backwards compat. Generally, types
+// should be used directly from the types package.
+export { currentUser, redeemedPledge, sessionInfo } from "@indietabletop/types";

package/lib/useInvokeClient.ts

@@ -0,0 +1,54 @@
+import { useCallback } from "react";
+import type { SWRConfiguration, SWRResponse } from "swr";
+import useSWR from "swr";
+import type { Pending } from "./async-op.ts";
+import type { IndieTabletopClient } from "./client.ts";
+import { swrResponseToResult } from "./result/swr.ts";
+
+/**
+ * Creates a `useInvokeClient` hook that makes it ergonomic to invoke
+ * client methods.
+ *
+ * Note that only methods starting with `get` are picked up. This hook is
+ * intended for making easy fetches, not for form submissions.
+ */
+export function createUseInvokeClient<C extends IndieTabletopClient>(c: C) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  type Fn = (...args: any) => any;
+
+  return function useInvokeClient<K extends keyof C & `get${string}`>(
+    /**
+     * ITC Client's method name.
+     */
+    method: K,
+
+    /**
+     * Method's arguments.
+     *
+     * **IMPORTANT**: Must be an array or primitive values as it is directly
+     * used as a `useCallback` dependecy array.
+     */
+    args: C[K] extends Fn ? Parameters<C[K]> : never,
+
+    options?: {
+      performFetch?: boolean;
+      swr?: SWRConfiguration;
+    },
+  ): C[K] extends Fn
+    ? [Awaited<ReturnType<C[K]>> | Pending, SWRResponse<unknown, unknown>]
+    : never {
+    const { performFetch = true } = options ?? {};
+
+    const callback = useCallback(() => {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      return (c[method] as Fn)(...args);
+
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [method, ...args]);
+
+    const cacheKey = [method, ...args].join(":");
+    const swr = useSWR(performFetch ? cacheKey : null, callback, options?.swr);
+
+    return [swrResponseToResult(swr), swr] as never;
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indietabletop/appkit",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "A collection of modules used in apps built by Indie Tabletop Club",
   "private": false,
   "type": "module",
@@ -44,7 +44,7 @@
   "dependencies": {
     "@ariakit/react": "^0.4.17",
     "@indietabletop/tooling": "^5.0.0",
-    "@indietabletop/types": "^1.0.0-3",
+    "@indietabletop/types": "^1.1.0",
     "@vanilla-extract/css": "^1.17.2",
     "@vanilla-extract/dynamic": "^2.1.3",
     "@vanilla-extract/recipes": "^0.5.7",