@oxy.so/services 11.2.0 → 11.3.1

package/src/ui/boot/__tests__/coldBootNoIdpRedirect.test.ts

@@ -63,6 +63,22 @@ function makeEmptyAuthStore(): AuthStateStore {
   } as unknown as AuthStateStore;
 }
 
+/** An auth store holding this origin's device credential. */
+function makeCredentialAuthStore(): AuthStateStore {
+  return {
+    load: jest.fn(
+      async (): Promise<PersistedAuthState | null> => ({ deviceId: 'd1', deviceSecret: 's1' }),
+    ),
+    save: jest.fn(async () => undefined),
+    clear: jest.fn(async () => undefined),
+  } as unknown as AuthStateStore;
+}
+
+/** Put an OAuth return (`?code=`) on the address bar, as the IdP's redirect does. */
+function landWithAuthorizationCode(): void {
+  window.history.replaceState(null, '', '/?code=auth-code&state=auth-state');
+}
+
 interface Harness {
   options: RunProviderColdBootOptions;
   commitSession: jest.Mock;
@@ -120,6 +136,7 @@ describe('runProviderColdBoot — no SDK-initiated IdP navigation (#691 phase 7b
     mockTryCompleteOAuthReturn.mockClear();
     mockTryCompleteOAuthReturn.mockImplementation(async () => false);
     globalThis.sessionStorage?.clear();
+    window.history.replaceState(null, '', '/');
   });
 
   it('resolves a domain with no local credential SIGNED OUT instead of bouncing to the IdP', async () => {
@@ -160,7 +177,7 @@ describe('runProviderColdBoot — no SDK-initiated IdP navigation (#691 phase 7b
         return { kind: 'session', via: session.via, session } as const;
       },
     );
-    const { options, commitSession } = makeHarness();
+    const { options, commitSession } = makeHarness({ authStore: makeCredentialAuthStore() });
 
     await runProviderColdBoot(options);
 
@@ -176,6 +193,7 @@ describe('runProviderColdBoot — no SDK-initiated IdP navigation (#691 phase 7b
       // A popup-mode app lands here whenever the browser blocked the popup and
       // `startWebOAuthSignIn` fell back to a full-page redirect.
       mockTryCompleteOAuthReturn.mockImplementation(async () => true);
+      landWithAuthorizationCode();
       const { options, markAuthResolved, setTokenReady } = makeHarness();
 
       await runProviderColdBoot(options);
@@ -190,6 +208,7 @@ describe('runProviderColdBoot — no SDK-initiated IdP navigation (#691 phase 7b
 
     it('runs the return leg even on a boot that finds no session', async () => {
       stubSignedOutBoot();
+      landWithAuthorizationCode();
       const { options } = makeHarness();
 
       await runProviderColdBoot(options);
@@ -199,6 +218,7 @@ describe('runProviderColdBoot — no SDK-initiated IdP navigation (#691 phase 7b
 
     it('commits the OAuth return as a deliberate sign-in', async () => {
       mockTryCompleteOAuthReturn.mockImplementation(async () => true);
+      landWithAuthorizationCode();
       const { options } = makeHarness();
 
       await runProviderColdBoot(options);
@@ -225,14 +245,22 @@ describe('runProviderColdBoot — no SDK-initiated IdP navigation (#691 phase 7b
   });
 });
 
+// Each case lands with an OAuth return on the URL — the boot that must classify
+// before it does anything — so "nothing ran first" is a real claim. The web
+// origin with nothing to restore, which resolves before classification, is
+// covered on its own below.
 describe('registered cold-boot classification', () => {
   beforeEach(() => {
     mockRunSessionColdBoot.mockReset();
     mockTryCompleteOAuthReturn.mockReset();
     mockTryCompleteOAuthReturn.mockResolvedValue(false);
+    landWithAuthorizationCode();
+  });
+  afterEach(() => {
+    window.history.replaceState(null, '', '/');
   });
   it('external classification bypasses prior secrets, shared device and identity pin work', async () => {
-    const { options } = makeHarness();
+    const { options } = makeHarness({ authStore: makeCredentialAuthStore() });
     (options.oxyServices.apps.getPublic as jest.Mock).mockResolvedValue({
       id: 'external',
       name: 'External',
@@ -298,8 +326,9 @@ describe('registered cold-boot classification', () => {
 
 it('an unresponsive registry resolves signed-out without a late privileged continuation', async () => {
   jest.useFakeTimers();
+  landWithAuthorizationCode();
   try {
-    const { options } = makeHarness();
+    const { options } = makeHarness({ authStore: makeCredentialAuthStore() });
     let release!: (app: unknown) => void;
     (options.oxyServices.apps.getPublic as jest.Mock).mockImplementation(
       () =>
@@ -327,5 +356,139 @@ it('an unresponsive registry resolves signed-out without a late privileged conti
     expect(mockTryCompleteOAuthReturn).not.toHaveBeenCalled();
   } finally {
     jest.useRealTimers();
+    window.history.replaceState(null, '', '/');
   }
 });
+
+/**
+ * A web origin with nothing to restore — no warm token, no device secret, no
+ * OAuth return on the URL — ends signed out on either lane, so its routing does
+ * not wait on the registry round trip. Everything that would USE a credential
+ * still waits for the verdict.
+ */
+describe('web origin with nothing to restore', () => {
+  const official = {
+    id: 'registered-app',
+    name: 'Registered App',
+    type: 'first_party',
+    isOfficial: true,
+    isInternal: false,
+    scopes: [],
+  };
+
+  beforeEach(() => {
+    mockRunSessionColdBoot.mockReset();
+    mockTryCompleteOAuthReturn.mockReset();
+    mockTryCompleteOAuthReturn.mockResolvedValue(false);
+    window.history.replaceState(null, '', '/');
+  });
+
+  function pendingRegistry(options: RunProviderColdBootOptions): (app: unknown) => void {
+    let release!: (app: unknown) => void;
+    (options.oxyServices.apps.getPublic as jest.Mock).mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          release = resolve;
+        }),
+    );
+    return (app) => release(app);
+  }
+
+  it('resolves auth before the registry answers, and still classifies with no cache', async () => {
+    const { options, markAuthResolved } = makeHarness();
+    const onClassified = jest.fn();
+    const release = pendingRegistry(options);
+
+    const boot = runProviderColdBoot({ ...options, onClassified });
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(markAuthResolved).toHaveBeenCalled();
+    expect(options.oxyServices.apps.getPublic).toHaveBeenCalledWith(CLIENT_ID, { cache: false });
+    expect(onClassified).not.toHaveBeenCalled();
+
+    release(official);
+    await boot;
+
+    expect(onClassified).toHaveBeenCalledWith('device');
+    expect(mockRunSessionColdBoot).not.toHaveBeenCalled();
+    expect(mockTryCompleteOAuthReturn).not.toHaveBeenCalled();
+    expect(options.syncDeviceCredentialToHost).not.toHaveBeenCalled();
+    expect(options.commitSession).not.toHaveBeenCalled();
+  });
+
+  it('a failed classification after the early resolution restores nothing', async () => {
+    const { options, markAuthResolved } = makeHarness();
+    (options.oxyServices.apps.getPublic as jest.Mock).mockRejectedValue(new Error('offline'));
+
+    await runProviderColdBoot(options);
+
+    expect(markAuthResolved).toHaveBeenCalled();
+    expect(mockRunSessionColdBoot).not.toHaveBeenCalled();
+    expect(options.syncDeviceCredentialToHost).not.toHaveBeenCalled();
+  });
+
+  it('an origin holding a device secret still waits for the verdict before using it', async () => {
+    stubSignedOutBoot();
+    const { options, markAuthResolved } = makeHarness({ authStore: makeCredentialAuthStore() });
+    const release = pendingRegistry(options);
+
+    const boot = runProviderColdBoot(options);
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(markAuthResolved).not.toHaveBeenCalled();
+    expect(mockRunSessionColdBoot).not.toHaveBeenCalled();
+    expect(options.syncDeviceCredentialToHost).not.toHaveBeenCalled();
+
+    release(official);
+    await boot;
+
+    expect(mockRunSessionColdBoot).toHaveBeenCalledTimes(1);
+    expect(markAuthResolved).toHaveBeenCalled();
+  });
+
+  it('an origin holding a device secret classified external never uses it', async () => {
+    const { options } = makeHarness({ authStore: makeCredentialAuthStore() });
+    (options.oxyServices.apps.getPublic as jest.Mock).mockResolvedValue({
+      ...official,
+      type: 'third_party',
+      isOfficial: false,
+    });
+
+    await runProviderColdBoot(options);
+
+    expect(mockRunSessionColdBoot).not.toHaveBeenCalled();
+    expect(options.syncDeviceCredentialToHost).not.toHaveBeenCalled();
+    expect(options.authStore.save).not.toHaveBeenCalled();
+    expect(options.authStore.clear).not.toHaveBeenCalled();
+  });
+
+  it('an OAuth return on the URL waits for the verdict', async () => {
+    landWithAuthorizationCode();
+    const { options, markAuthResolved } = makeHarness();
+    const release = pendingRegistry(options);
+
+    const boot = runProviderColdBoot(options);
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(markAuthResolved).not.toHaveBeenCalled();
+    expect(options.authStore.load).not.toHaveBeenCalled();
+
+    release(official);
+    await boot;
+    expect(mockTryCompleteOAuthReturn).toHaveBeenCalledTimes(1);
+    window.history.replaceState(null, '', '/');
+  });
+
+  it('identity mode always waits for the verdict', async () => {
+    stubSignedOutBoot();
+    const { options, markAuthResolved } = makeHarness({ sessionMode: 'identity' });
+    const release = pendingRegistry(options);
+
+    const boot = runProviderColdBoot(options);
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(markAuthResolved).not.toHaveBeenCalled();
+
+    release(official);
+    await boot;
+    expect(markAuthResolved).toHaveBeenCalled();
+  });
+});

package/src/ui/boot/runProviderColdBoot.ts

@@ -14,6 +14,28 @@ import { isWebBrowser } from '../utils/isWebBrowser';
 import { isNetConnectivityExplicitlyOffline } from '../utils/netConnectivity';
 import type { CommitInput } from '../context/oxyContextTypes';
 
+/**
+ * Whether the URL carries an OAuth return (`?code=` or `?error=`) for
+ * `tryCompleteOAuthReturn` to consume. Reads the address bar only.
+ */
+function hasOAuthReturnOnUrl(): boolean {
+  const search = (globalThis as { location?: { search?: string } }).location?.search;
+  if (!search) return false;
+  const params = new URLSearchParams(search);
+  return params.has('code') || params.has('error');
+}
+
+/**
+ * Whether this origin's own store holds anything a web boot could restore from:
+ * a warm access token to plant or a device secret to mint with. A presence
+ * check only — nothing read here is used, sent or synced before the
+ * classification allows it.
+ */
+async function hasRestorableState(store: AuthStateStore): Promise<boolean> {
+  const persisted = await store.load();
+  return Boolean(persisted?.accessToken || persisted?.deviceSecret);
+}
+
 /** How long the cold boot waits for the post-boot SessionClient handoff (ms). */
 export const SESSION_HANDOFF_DEADLINE_MS = 6000;
 
@@ -139,10 +161,33 @@ export async function runProviderColdBoot(opts: RunProviderColdBootOptions): Pro
   setTokenReady(false);
 
   try {
-    // Classification precedes every local-secret, shared-credential and identity
-    // probe. Unavailable registry metadata fails closed, including offline boot.
-    const lane = await (opts.resolveSessionLane?.() ??
-      resolveApplicationSessionLane(oxyServices, clientId));
+    // Classification precedes every USE of a local secret, the shared credential
+    // and the identity key. Unavailable registry metadata fails closed, including
+    // offline boot. It starts now, before anything else, so its round trip
+    // overlaps the local work below.
+    const classification = (async () =>
+      opts.resolveSessionLane?.() ?? resolveApplicationSessionLane(oxyServices, clientId))();
+    // Observed so a rejection that lands before it is awaited is not reported as
+    // unhandled; every path below still awaits it and sees the rejection.
+    classification.catch(() => undefined);
+
+    // The verdict decides HOW a session is restored, never WHETHER there is one.
+    // A web origin with nothing to restore and no OAuth return on the URL ends
+    // signed out on either lane, so routing need not wait a network round trip
+    // for an answer that cannot change the outcome. The classification still
+    // completes below and still gates every later sign-in
+    // (`ensureDeviceSessionLane` shares this same in-flight lookup).
+    if (!identityBound && isWebBrowser() && !hasOAuthReturnOnUrl()) {
+      if (!(await hasRestorableState(authStore))) {
+        markAuthResolved();
+        const lane = await classification;
+        await opts.onClassified?.(lane);
+        if (lane === 'oauth') setTokenReady(true);
+        return;
+      }
+    }
+
+    const lane = await classification;
     await opts.onClassified?.(lane);
     if (identityBound && lane !== 'device') return;
     // The redirect transport's RETURN leg. An app reaches it whenever the browser

package/src/ui/components/organizations/OrganizationClaimReview.tsx

@@ -0,0 +1,218 @@
+import { useState } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { isHttpRequestError } from '@oxy.so/core';
+import {
+  organizationClaimReviewSchema,
+  type OrganizationClaimReview as OrganizationClaimReviewInput,
+} from '@oxy.so/contracts';
+import { Button } from '@oxy.so/bloom/button';
+import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { TextField, TextFieldInput } from '@oxy.so/bloom/text-field';
+import { Text } from '@oxy.so/bloom/typography';
+import { useOxy } from '../../context/OxyContext';
+import { useI18n } from '../../hooks/useI18n';
+
+/** The queue is requested only after an explicit action; the server rechecks staff authority. */
+export function OrganizationClaimReview() {
+  const { t } = useI18n();
+  const { user, canUsePrivateApi } = useOxy();
+  const [open, setOpen] = useState(false);
+  return (
+    <SettingsListGroup>
+      <SettingsListItem
+        title={t('organizationDirectory.review.title')}
+        disabled={!canUsePrivateApi}
+        onPress={() => setOpen((value) => !value)}
+      />
+      {open && user?.kind === 'personal' && canUsePrivateApi ? <ReviewQueue key={user.id} /> : null}
+    </SettingsListGroup>
+  );
+}
+function ReviewQueue() {
+  const { t } = useI18n();
+  const { oxyServices, user, canUsePrivateApi } = useOxy();
+  const [selected, setSelected] = useState<string | null>(null);
+  const requests = useInfiniteQuery({
+    queryKey: ['oxy', 'organizations', 'review', user?.id, canUsePrivateApi],
+    queryFn: ({ pageParam }) =>
+      oxyServices.organizations.reviewClaims({
+        status: 'pending',
+        limit: 20,
+        ...(pageParam ? { cursor: pageParam } : {}),
+      }),
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (page) => page.nextCursor ?? undefined,
+    enabled: canUsePrivateApi,
+    retry: false,
+    gcTime: 0,
+  });
+  const claims = requests.data?.pages.flatMap((page) => page.items) ?? [];
+  const ids = [...new Set(claims.map((claim) => claim.accountId))].sort();
+  const organizations = useQuery({
+    queryKey: ['oxy', 'organizations', 'review-organizations', ids],
+    queryFn: async () => {
+      const batches = [];
+      for (let offset = 0; offset < ids.length; offset += 100)
+        batches.push(oxyServices.organizations.batch({ ids: ids.slice(offset, offset + 100) }));
+      return (await Promise.all(batches)).flatMap((batch) => batch.items);
+    },
+    enabled: canUsePrivateApi && requests.isSuccess && ids.length > 0,
+    retry: false,
+  });
+  if (requests.isPending) return <ActivityIndicator />;
+  if (requests.isError)
+    return (
+      <View className="gap-space-16 p-space-16">
+        <Text accessibilityRole="alert">
+          {t(
+            isHttpRequestError(requests.error) && requests.error.status === 403
+              ? 'organizationDirectory.review.forbidden'
+              : 'organizationDirectory.requestError',
+          )}
+        </Text>
+        <Button onPress={() => requests.refetch()}>{t('organizationDirectory.retry')}</Button>
+      </View>
+    );
+  if (selected)
+    return <ReviewDetail claimId={selected} key={selected} onClose={() => setSelected(null)} />;
+  return (
+    <View className="gap-space-16 p-space-16">
+      {claims.length === 0 ? <Text>{t('organizationDirectory.review.empty')}</Text> : null}
+      {claims.map((claim) => (
+        <SettingsListItem
+          key={claim.id}
+          title={
+            organizations.data?.find((item) => item.requestedAccountId === claim.accountId)
+              ?.organization.name ?? t('organizationDirectory.view')
+          }
+          description={t('organizationDirectory.pending')}
+          onPress={() => setSelected(claim.id)}
+        />
+      ))}
+      {requests.hasNextPage ? (
+        <Button onPress={() => requests.fetchNextPage()} disabled={requests.isFetchingNextPage}>
+          {t('organizationDirectory.loadMore')}
+        </Button>
+      ) : null}
+    </View>
+  );
+}
+function ReviewDetail({ claimId, onClose }: { claimId: string; onClose: () => void }) {
+  const { t } = useI18n();
+  const { oxyServices, user, canUsePrivateApi } = useOxy();
+  const queryClient = useQueryClient();
+  const [evidence, setEvidence] = useState('');
+  const [authorizationRevoked, setAuthorizationRevoked] = useState(false);
+  const detail = useQuery({
+    queryKey: ['oxy', 'organizations', 'review-detail', user?.id, canUsePrivateApi, claimId],
+    queryFn: () => oxyServices.organizations.reviewClaimDetail(claimId),
+    enabled: canUsePrivateApi,
+    retry: false,
+    gcTime: 0,
+  });
+  const review = useMutation({
+    mutationFn: (decision: OrganizationClaimReviewInput['decision']) => {
+      if (
+        !canUsePrivateApi ||
+        authorizationRevoked ||
+        !detail.isSuccess ||
+        !detail.data ||
+        detail.data.claimantUserId === user?.id
+      )
+        throw new Error('Independent staff review is required');
+      return oxyServices.organizations.reviewClaim(
+        claimId,
+        organizationClaimReviewSchema.parse({ decision, evidenceReference: evidence }),
+      );
+    },
+    onError: (error) => {
+      if (isHttpRequestError(error) && error.status === 403) setAuthorizationRevoked(true);
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ['oxy', 'organizations'] });
+      await queryClient.invalidateQueries({ queryKey: ['accounts'] });
+      onClose();
+    },
+  });
+  const conflict = isHttpRequestError(review.error) && review.error.status === 409;
+  const forbidden = isHttpRequestError(review.error) && review.error.status === 403;
+  const selfReview = detail.data?.claimantUserId === user?.id;
+  return (
+    <View className="gap-space-16 p-space-16">
+      {detail.isPending ? <ActivityIndicator /> : null}
+      {detail.isError ? (
+        <>
+          <Text accessibilityRole="alert">
+            {t(
+              isHttpRequestError(detail.error) && detail.error.status === 403
+                ? 'organizationDirectory.review.forbidden'
+                : 'organizationDirectory.requestError',
+            )}
+          </Text>
+          <Button onPress={() => detail.refetch()}>{t('organizationDirectory.retry')}</Button>
+        </>
+      ) : null}
+      {authorizationRevoked ? (
+        <Text accessibilityRole="alert">{t('organizationDirectory.review.forbidden')}</Text>
+      ) : null}
+      {detail.isSuccess && canUsePrivateApi && !authorizationRevoked ? (
+        <>
+          <Text>{t('organizationDirectory.evidence')}</Text>
+          <Text selectable>{detail.data.evidenceReference}</Text>
+          <Text>{t('organizationDirectory.review.hint')}</Text>
+          {selfReview ? <Text>{t('organizationDirectory.review.independent')}</Text> : null}
+          <TextField>
+            <TextFieldInput
+              label={t('organizationDirectory.review.evidence')}
+              value={evidence}
+              onChangeText={setEvidence}
+              maxLength={1000}
+            />
+          </TextField>
+          {review.isError ? (
+            <Text accessibilityRole="alert">
+              {t(
+                conflict
+                  ? 'organizationDirectory.review.conflict'
+                  : forbidden
+                    ? 'organizationDirectory.review.forbidden'
+                    : 'organizationDirectory.review.failed',
+              )}
+            </Text>
+          ) : null}
+          {(['approved', 'rejected'] as const).map((decision) => (
+            <Button
+              key={decision}
+              disabled={
+                !canUsePrivateApi ||
+                selfReview ||
+                detail.data.status !== 'pending' ||
+                !evidence.trim() ||
+                review.isPending ||
+                conflict ||
+                forbidden
+              }
+              onPress={() => review.mutate(decision)}
+            >
+              {t(`organizationDirectory.review.${decision}`)}
+            </Button>
+          ))}
+          {conflict ? (
+            <Button
+              onPress={async () => {
+                await queryClient.invalidateQueries({ queryKey: ['oxy', 'organizations'] });
+                onClose();
+              }}
+            >
+              {t('organizationDirectory.retry')}
+            </Button>
+          ) : null}
+        </>
+      ) : null}
+      <Button appearance="outline" onPress={onClose} disabled={review.isPending}>
+        {t('organizationDirectory.back')}
+      </Button>
+    </View>
+  );
+}

package/src/ui/components/organizations/OrganizationClaims.tsx

@@ -0,0 +1,67 @@
+import { View } from 'react-native';
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { Button } from '@oxy.so/bloom/button';
+import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { Text } from '@oxy.so/bloom/typography';
+import { useOxy } from '../../context/OxyContext';
+import { useI18n } from '../../hooks/useI18n';
+
+export function OrganizationClaims() {
+  const { oxyServices, user, canUsePrivateApi } = useOxy();
+  const { t } = useI18n();
+  const enabled = canUsePrivateApi && user?.kind === 'personal';
+  const requests = useInfiniteQuery({
+    queryKey: ['oxy', 'organizations', 'claims', user?.id, canUsePrivateApi],
+    queryFn: ({ pageParam }) =>
+      oxyServices.organizations.myClaims({
+        limit: 20,
+        ...(pageParam ? { cursor: pageParam } : {}),
+      }),
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (page) => page.nextCursor ?? undefined,
+    enabled,
+    retry: false,
+    gcTime: 0,
+  });
+  const claims = requests.data?.pages.flatMap((page) => page.items) ?? [];
+  const ids = [...new Set(claims.map((claim) => claim.accountId))].sort();
+  const organizations = useQuery({
+    queryKey: ['oxy', 'organizations', 'claims-employers', ids],
+    queryFn: async () => {
+      const batches = [];
+      for (let offset = 0; offset < ids.length; offset += 100)
+        batches.push(oxyServices.organizations.batch({ ids: ids.slice(offset, offset + 100) }));
+      return (await Promise.all(batches)).flatMap((batch) => batch.items);
+    },
+    enabled: enabled && ids.length > 0,
+    retry: false,
+  });
+  if (!enabled || (!requests.isError && claims.length === 0)) return null;
+  return (
+    <SettingsListGroup title={t('organizationDirectory.requests')}>
+      {requests.isError ? (
+        <View>
+          <Text accessibilityRole="alert">{t('organizationDirectory.requestError')}</Text>
+          <Button onPress={() => requests.refetch()}>{t('organizationDirectory.retry')}</Button>
+        </View>
+      ) : null}
+      {!requests.isError &&
+        claims.map((claim) => (
+          <SettingsListItem
+            key={claim.id}
+            title={
+              organizations.data?.find((item) => item.requestedAccountId === claim.accountId)
+                ?.organization.name ?? t('organizationDirectory.view')
+            }
+            description={t(`organizationDirectory.${claim.status}`)}
+            showChevron={false}
+          />
+        ))}
+      {!requests.isError && requests.hasNextPage ? (
+        <Button onPress={() => requests.fetchNextPage()} disabled={requests.isFetchingNextPage}>
+          {t('organizationDirectory.loadMore')}
+        </Button>
+      ) : null}
+    </SettingsListGroup>
+  );
+}