Restore revenue widget

app.config.ts

@@ -13,7 +13,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     supportsTablet: true,
     bundleIdentifier: process.env.IOS_BUNDLE_NAME,
     infoPlist: {
-      UIBackgroundModes: ["audio", "remote-notification"],
+      UIBackgroundModes: ["audio", "remote-notification", "fetch"],
       ITSAppUsesNonExemptEncryption: false,
       UIDesignRequiresCompatibility: true,
     },
@@ -77,6 +77,40 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     "expo-video",
     "expo-image",
     "expo-sharing",
+    [
+      "expo-widgets",
+      {
+        widgets: [
+          {
+            name: "RevenueWidget",
+            displayName: "Gumroad",
+            description: "Revenue totals",
+            contentMarginsDisabled: true,
+            supportedFamilies: ["systemSmall"],
+          },
+        ],
+      },
+    ],
+    [
+      "react-native-android-widget",
+      {
+        fonts: ["./assets/fonts/ABCFavorit-Regular-custom.ttf", "./assets/fonts/ABCFavorit-Bold-custom.ttf"],
+        widgets: [
+          {
+            name: "RevenueWidget",
+            label: "Gumroad",
+            description: "Revenue totals",
+            previewImage: "./assets/images/widget-preview.png",
+            minWidth: "110dp",
+            minHeight: "110dp",
+            targetCellWidth: 2,
+            targetCellHeight: 2,
+            resizeMode: "horizontal|vertical",
+            updatePeriodMillis: 1800000,
+          },
+        ],
+      },
+    ],
     [
       "@sentry/react-native/expo",
       {

app/_layout.tsx

@@ -9,6 +9,7 @@ import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { useCSSVariable } from "uniwind";
 import { setupPlayer } from "../components/use-audio-player-sync";
 import { usePushNotifications } from "../components/use-push-notifications";
+import { useRevenueWidget } from "@/components/use-revenue-widget";
 import { AuthProvider } from "../lib/auth-context";
 import { QueryProvider } from "../lib/query-client";
 import { Sentry, navigationIntegration } from "../lib/sentry";
@@ -19,6 +20,11 @@ const PushNotificationRegistrar = () => {
   return null;
 };
 
+const RevenueWidgetUpdater = () => {
+  useRevenueWidget();
+  return null;
+};
+
 const ForceUpdateGuard = () => {
   const { updateRequirement } = useMinimumVersion();
   if (!updateRequirement) return null;
@@ -50,6 +56,7 @@ const RootLayout = () => {
       <QueryProvider>
         <AuthProvider>
           <PushNotificationRegistrar />
+          <RevenueWidgetUpdater />
           <ForceUpdateGuard />
           <Stack
             screenOptions={{

components/revenue-widget-android-handler.tsx

@@ -0,0 +1,55 @@
+"use no memo";
+
+import { buildApiUrl, request } from "@/lib/request";
+import * as SecureStore from "expo-secure-store";
+import { registerWidgetTaskHandler, type WidgetTaskHandlerProps } from "react-native-android-widget";
+import { RevenueWidgetAndroid } from "./revenue-widget-android";
+
+interface RevenueTotalsResponse {
+  day: { formatted_revenue: string };
+  week: { formatted_revenue: string };
+  month: { formatted_revenue: string };
+  year: { formatted_revenue: string };
+}
+
+const renderRevenueWidget = async () => {
+  const accessToken = await SecureStore.getItemAsync("gumroad_access_token");
+
+  if (!accessToken) {
+    return <RevenueWidgetAndroid today="" week="" month="" year="" isLoggedIn={false} hasError={false} />;
+  }
+
+  try {
+    const url = buildApiUrl("mobile/analytics/revenue_totals.json");
+    const data = await request<RevenueTotalsResponse>(url, {
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+
+    return (
+      <RevenueWidgetAndroid
+        today={data.day.formatted_revenue}
+        week={data.week.formatted_revenue}
+        month={data.month.formatted_revenue}
+        year={data.year.formatted_revenue}
+        isLoggedIn={true}
+        hasError={false}
+      />
+    );
+  } catch {
+    return <RevenueWidgetAndroid today="" week="" month="" year="" isLoggedIn={true} hasError={true} />;
+  }
+};
+
+registerWidgetTaskHandler(async (props: WidgetTaskHandlerProps) => {
+  switch (props.widgetAction) {
+    case "WIDGET_ADDED":
+    case "WIDGET_UPDATE":
+    case "WIDGET_RESIZED":
+      props.renderWidget(await renderRevenueWidget());
+      break;
+    case "WIDGET_DELETED":
+      break;
+    case "WIDGET_CLICK":
+      break;
+  }
+});

components/revenue-widget-android.tsx

@@ -0,0 +1,104 @@
+"use no memo";
+
+import { FlexWidget, SvgWidget, TextWidget } from "react-native-android-widget";
+
+const LOGO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="81" height="81" fill="none"><path fill="#000" d="M43.741 80.186c20.455 0 37.037-16.582 37.037-37.037S64.196 6.112 43.741 6.112 6.704 22.694 6.704 43.149s16.582 37.037 37.037 37.037"/><path fill="#FF90E8" stroke="#000" stroke-width="1.557" d="M38.605 76.433c20.892 0 37.828-16.936 37.828-37.828 0-20.89-16.936-37.827-37.828-37.827C17.715.778.779 17.714.779 38.606c0 20.89 16.936 37.827 37.828 37.827Z"/><path fill="#000" d="M35.392 57.272c-10.849 0-17.23-8.701-17.23-19.526 0-11.249 7.02-20.375 20.421-20.375 13.828 0 18.508 9.339 18.72 14.645h-9.998c-.213-2.972-2.765-7.429-8.935-7.429-6.594 0-10.849 5.73-10.849 12.735s4.255 12.734 10.85 12.734c5.956 0 8.509-4.67 9.572-9.338H38.37v-3.82h20.087v19.525h-8.812v-12.31c-.638 4.458-3.404 13.16-14.253 13.16Z"/></svg>`;
+
+const RevenueRow = ({ label, value }: { label: string; value: string }) => (
+  <FlexWidget style={{ flexDirection: "row", width: "match_parent" }}>
+    <TextWidget text={label} style={{ fontSize: 13, fontFamily: "ABCFavorit-Regular-custom", color: "#999999" }} />
+    <FlexWidget style={{ flex: 1 }} />
+    <TextWidget
+      text={value}
+      style={{ fontSize: 13, fontFamily: "ABCFavorit-Bold-custom", fontWeight: "bold", color: "#ffffff" }}
+    />
+  </FlexWidget>
+);
+
+export const RevenueWidgetAndroid = ({
+  today,
+  week,
+  month,
+  year,
+  isLoggedIn,
+  hasError,
+}: {
+  today: string;
+  week: string;
+  month: string;
+  year: string;
+  isLoggedIn: boolean;
+  hasError: boolean;
+}) => {
+  if (!isLoggedIn) {
+    return (
+      <FlexWidget
+        style={{
+          width: "match_parent",
+          height: "match_parent",
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: "#000000",
+          borderRadius: 16,
+          padding: 16,
+        }}
+      >
+        <TextWidget
+          text="Open Gumroad to log in"
+          style={{ fontSize: 13, fontFamily: "ABCFavorit-Bold-custom", fontWeight: "bold", color: "#ffffff" }}
+        />
+      </FlexWidget>
+    );
+  }
+
+  if (hasError) {
+    return (
+      <FlexWidget
+        style={{
+          width: "match_parent",
+          height: "match_parent",
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: "#000000",
+          borderRadius: 16,
+          padding: 16,
+        }}
+      >
+        <TextWidget
+          text="Sorry, something went wrong. Try again later."
+          style={{ fontSize: 13, fontFamily: "ABCFavorit-Regular-custom", color: "#ffffff", textAlign: "center" }}
+        />
+      </FlexWidget>
+    );
+  }
+
+  return (
+    <FlexWidget
+      style={{
+        width: "match_parent",
+        height: "match_parent",
+        flexDirection: "column",
+        backgroundColor: "#000000",
+        borderRadius: 16,
+        paddingVertical: 16,
+        paddingHorizontal: 14,
+      }}
+    >
+      <FlexWidget style={{ flexDirection: "row", alignItems: "center", flexGap: 6 }}>
+        <SvgWidget svg={LOGO_SVG} style={{ width: 20, height: 20 }} />
+        <TextWidget
+          text="Gumroad Totals"
+          style={{ fontSize: 15, fontFamily: "ABCFavorit-Bold-custom", fontWeight: "bold", color: "#ffffff" }}
+        />
+      </FlexWidget>
+      <FlexWidget style={{ height: 16 }} />
+      <FlexWidget style={{ flexDirection: "column", flexGap: 8, width: "match_parent" }}>
+        <RevenueRow label="Today" value={today} />
+        <RevenueRow label="Week" value={week} />
+        <RevenueRow label="Month" value={month} />
+        <RevenueRow label="Year" value={year} />
+      </FlexWidget>
+      <FlexWidget style={{ flex: 1 }} />
+    </FlexWidget>
+  );
+};

components/revenue-widget.tsx

@@ -0,0 +1,111 @@
+import { HStack, Spacer, Text, VStack } from "@expo/ui/swift-ui";
+import {
+  bold,
+  font,
+  foregroundStyle,
+  frame,
+  lineSpacing,
+  multilineTextAlignment,
+  padding,
+} from "@expo/ui/swift-ui/modifiers";
+import { createWidget, type WidgetEnvironment } from "expo-widgets";
+
+type RevenueWidgetProps = {
+  today: string;
+  week: string;
+  month: string;
+  year: string;
+  isLoggedIn: boolean;
+  hasError: boolean;
+};
+
+const RevenueWidget = (props: RevenueWidgetProps, _environment: WidgetEnvironment) => {
+  "widget";
+
+  if (!props.isLoggedIn) {
+    return (
+      <VStack modifiers={[padding()]}>
+        <HStack spacing={4} alignment="center">
+          <Text
+            modifiers={[
+              font({ size: 13 }),
+              bold(),
+              foregroundStyle({ type: "hierarchical", style: "primary" }),
+              multilineTextAlignment("center"),
+              lineSpacing(4),
+            ]}
+          >
+            Open Gumroad to log in
+          </Text>
+        </HStack>
+      </VStack>
+    );
+  }
+
+  if (props.hasError) {
+    return (
+      <VStack alignment="center" modifiers={[padding({ all: 16 })]}>
+        <Spacer />
+        <Text
+          modifiers={[
+            font({ size: 13 }),
+            bold(),
+            foregroundStyle({ type: "hierarchical", style: "primary" }),
+            multilineTextAlignment("center"),
+            lineSpacing(4),
+          ]}
+        >
+          Sorry, something went wrong. Try again later.
+        </Text>
+        <Spacer />
+      </VStack>
+    );
+  }
+
+  return (
+    <VStack alignment="leading" modifiers={[padding({ vertical: 16, horizontal: 14 })]} spacing={8}>
+      <Spacer />
+      <HStack spacing={5} alignment="center">
+        <Text modifiers={[font({ size: 15 }), bold(), foregroundStyle({ type: "hierarchical", style: "primary" })]}>
+          Gumroad Totals
+        </Text>
+      </HStack>
+      <Spacer modifiers={[frame({ height: 1 })]} />
+
+      <HStack>
+        <Text modifiers={[font({ size: 13 }), foregroundStyle({ type: "hierarchical", style: "primary" })]}>Today</Text>
+        <Spacer />
+        <Text modifiers={[font({ size: 13 }), bold(), foregroundStyle({ type: "hierarchical", style: "primary" })]}>
+          {props.today}
+        </Text>
+      </HStack>
+
+      <HStack>
+        <Text modifiers={[font({ size: 13 }), foregroundStyle({ type: "hierarchical", style: "primary" })]}>Week</Text>
+        <Spacer />
+        <Text modifiers={[font({ size: 13 }), bold(), foregroundStyle({ type: "hierarchical", style: "primary" })]}>
+          {props.week}
+        </Text>
+      </HStack>
+
+      <HStack>
+        <Text modifiers={[font({ size: 13 }), foregroundStyle({ type: "hierarchical", style: "primary" })]}>Month</Text>
+        <Spacer />
+        <Text modifiers={[font({ size: 13 }), bold(), foregroundStyle({ type: "hierarchical", style: "primary" })]}>
+          {props.month}
+        </Text>
+      </HStack>
+
+      <HStack>
+        <Text modifiers={[font({ size: 13 }), foregroundStyle({ type: "hierarchical", style: "primary" })]}>Year</Text>
+        <Spacer />
+        <Text modifiers={[font({ size: 13 }), bold(), foregroundStyle({ type: "hierarchical", style: "primary" })]}>
+          {props.year}
+        </Text>
+      </HStack>
+      <Spacer />
+    </VStack>
+  );
+};
+
+export default createWidget("RevenueWidget", RevenueWidget);