@betterreviews/react-native 1.0.0

package/src/widget/components/MediaGallery.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Image, Pressable, Text, View } from 'react-native';
+import { useWidget } from '../WidgetContext.js';
+
+export interface GalleryPhoto {
+  thumbnail: string | null;
+  full: string | null;
+  reviewId: number;
+  mediaIndex: number;
+}
+
+export interface MediaGalleryProps {
+  photos: GalleryPhoto[];
+  onOpen: (reviewId: number, mediaIndex: number) => void;
+}
+
+// 3-col grid of up to 6 customer photos; the 6th tile shows a +N overflow.
+export function MediaGallery({ photos, onOpen }: MediaGalleryProps) {
+  const { styles } = useWidget();
+  if (!photos || photos.length === 0) return null;
+  const visible = photos.slice(0, 6);
+  const overflow = Math.max(0, photos.length - 6);
+  return (
+    <View style={styles.mediaGallery}>
+      <Text style={styles.mediaGalleryLabel}>Customer Photos</Text>
+      <View style={styles.mediaGalleryGrid}>
+        {visible.map((p, i) => {
+          const isOverflowTile = i === 5 && overflow > 0;
+          const uri = p.thumbnail || p.full || undefined;
+          return (
+            <Pressable
+              key={`g${i}`}
+              onPress={() => onOpen(p.reviewId, p.mediaIndex || 0)}
+              style={({ pressed }: { pressed: boolean }) => [
+                styles.galleryTile,
+                pressed && { opacity: 0.7 },
+              ]}
+              accessibilityRole="button"
+              accessibilityLabel={`Customer photo ${i + 1} of ${photos.length}, double-tap to enlarge.`}
+            >
+              <Image source={{ uri }} style={styles.galleryTileImg} resizeMode="cover" />
+              {isOverflowTile && (
+                <View style={styles.galleryOverflow}>
+                  <Text style={styles.galleryOverflowText}>+{overflow}</Text>
+                </View>
+              )}
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+}

package/src/widget/components/PulseSection.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import type { WidgetSummary } from '../../client/types.js';
+import { IconStar } from '../../icons/BRIcons.js';
+import { useWidget } from '../WidgetContext.js';
+import { RatingStars } from './RatingStars.js';
+
+export function SectionTitle({ children }: { children: React.ReactNode }) {
+  const { styles } = useWidget();
+  return <Text style={styles.sectionTitle}>{children}</Text>;
+}
+
+// Rating average + 5-bar distribution (5★ → 1★ descending).
+export function PulseSummary({ summary }: { summary: WidgetSummary }) {
+  const { styles, theme } = useWidget();
+  const max = Math.max(...summary.breakdown, 1);
+  return (
+    <View style={styles.pulseSummary}>
+      <View style={styles.pulseRating}>
+        <Text style={styles.pulseScore}>{summary.average.toFixed(1)}</Text>
+        <RatingStars value={summary.average} size={15} uid="pulse" />
+        <Text style={styles.pulseCount}>
+          Based on {summary.total} {summary.total === 1 ? 'review' : 'reviews'}
+        </Text>
+      </View>
+      <View style={styles.pulseBars}>
+        {[5, 4, 3, 2, 1].map((star) => {
+          const count = summary.breakdown[star - 1] ?? 0;
+          const pct = max > 0 ? (count / max) * 100 : 0;
+          return (
+            <View key={star} style={styles.barRow}>
+              <View style={styles.barLabel}>
+                <Text style={styles.barLabelText}>{star}</Text>
+                <IconStar size={12} fillPercentage={100} fillColor={theme.star} uid={`bar-${star}`} />
+              </View>
+              <View style={styles.barTrack}>
+                <View style={[styles.barFill, { width: `${Math.max(0, pct)}%` }]} />
+              </View>
+              <Text style={styles.barCount}>{count}</Text>
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+function Metric({ value, label }: { value: string | number; label: string }) {
+  const { styles } = useWidget();
+  return (
+    <View style={styles.metric}>
+      <Text style={styles.metricValue}>{value}</Text>
+      <Text style={styles.metricLabel}>{label}</Text>
+    </View>
+  );
+}
+
+// 4-column reviews / positive% / photos / verified band.
+export function PulseMetrics({ summary }: { summary: WidgetSummary }) {
+  const { styles } = useWidget();
+  return (
+    <View style={styles.metrics}>
+      <Metric value={summary.total} label="REVIEWS" />
+      <Metric value={`${summary.positivePct}%`} label="POSITIVE" />
+      <Metric value={summary.photoCount} label="PHOTOS" />
+      <Metric value={summary.verifiedCount} label="VERIFIED" />
+    </View>
+  );
+}

package/src/widget/components/RatingStars.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { View } from 'react-native';
+import { IconStar } from '../../icons/BRIcons.js';
+import { useWidget } from '../WidgetContext.js';
+
+export interface RatingStarsProps {
+  value: number;
+  size?: number;
+  /** Stable per-instance seed for the gradient ids (review id + context). */
+  uid?: string;
+}
+
+// Five stars; each gets a 0/50/100 fill from the fractional rating. Rounding
+// matches the storefront: <0.25 empty, 0.25–0.75 half, ≥0.75 full.
+export function RatingStars({ value, size = 13, uid = 'r' }: RatingStarsProps) {
+  const { theme } = useWidget();
+  return (
+    <View
+      style={{ flexDirection: 'row', alignItems: 'center' }}
+      accessibilityRole="image"
+      accessibilityLabel={`${value} stars out of 5`}
+    >
+      {[1, 2, 3, 4, 5].map((i) => {
+        const diff = value - (i - 1);
+        const p = diff >= 0.75 ? 100 : diff >= 0.25 ? 50 : 0;
+        return (
+          <View key={i} style={{ marginRight: 1 }}>
+            <IconStar
+              size={size}
+              fillPercentage={p}
+              fillColor={theme.star}
+              emptyColor={theme.muted}
+              uid={`${uid}-${i}`}
+            />
+          </View>
+        );
+      })}
+    </View>
+  );
+}

package/src/widget/components/ReviewCard.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { Image, Pressable, ScrollView, Text, View } from 'react-native';
+import type { WidgetReview } from '../../client/types.js';
+import { IconShieldCheck } from '../../icons/BRIcons.js';
+import { useWidget } from '../WidgetContext.js';
+import { useReviewDetail } from '../hooks/useReviewDetail.js';
+import { getInitials } from '../util.js';
+import { RatingStars } from './RatingStars.js';
+import { VoteButtons } from './VoteButtons.js';
+
+export interface ReviewCardProps {
+  review: WidgetReview;
+  onOpenPhoto: (reviewId: number, mediaIndex: number) => void;
+}
+
+export function ReviewCard({ review, onOpenPhoto }: ReviewCardProps) {
+  const { styles, theme } = useWidget();
+  const { expanded, body, error, toggle } = useReviewDetail(review);
+
+  const media = review.media.filter((m) => m.type === 'image');
+  const visibleTags = review.tags.slice(0, 4);
+  const reply = review.merchant_reply;
+  const wasTruncated = review.body_truncated === true;
+
+  return (
+    <View style={styles.card}>
+      <View style={styles.cardHeader}>
+        <View style={styles.avatar}>
+          <Text style={styles.avatarText}>{getInitials(review.author)}</Text>
+        </View>
+        <View style={styles.cardInfo}>
+          <View style={styles.cardTopRow}>
+            <Text style={styles.cardAuthor} numberOfLines={1}>
+              {review.author || 'Anonymous'}
+            </Text>
+            <Text style={styles.cardDate}>{review.date}</Text>
+          </View>
+          <View style={styles.cardRatingRow}>
+            <RatingStars value={review.rating} size={13} uid={`c-${review.id}`} />
+            {review.verified && (
+              <View style={styles.verifiedBadge}>
+                <IconShieldCheck size={11} color={theme.verified} />
+                <Text style={styles.verifiedBadgeText}>Verified Buyer</Text>
+              </View>
+            )}
+          </View>
+        </View>
+      </View>
+
+      {!!review.title && <Text style={styles.cardTitle}>{review.title}</Text>}
+      {!!body && (
+        <Text style={styles.cardBody} numberOfLines={wasTruncated && !expanded ? 3 : undefined}>
+          {body}
+        </Text>
+      )}
+      {wasTruncated && (
+        <Pressable
+          onPress={toggle}
+          style={({ pressed }: { pressed: boolean }) => [styles.readMoreBtn, pressed && { opacity: 0.6 }]}
+          accessibilityRole="button"
+          accessibilityLabel={expanded ? 'Read less' : 'Read more'}
+        >
+          <Text style={styles.readMoreBtnText}>{expanded ? 'Read less' : 'Read more'}</Text>
+        </Pressable>
+      )}
+      {error && <Text style={styles.readMoreErr}>Could not load full review — showing preview.</Text>}
+
+      {media.length > 0 && (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          style={styles.cardMedia}
+          contentContainerStyle={{ gap: 8 }}
+        >
+          {media.map((m, i) => (
+            <Pressable
+              key={i}
+              onPress={() => onOpenPhoto(review.id, i)}
+              style={({ pressed }: { pressed: boolean }) => [styles.mediaThumb, pressed && { opacity: 0.7 }]}
+              accessibilityRole="button"
+              accessibilityLabel={`Customer photo ${i + 1} of ${media.length}, double-tap to enlarge.`}
+            >
+              <Image source={{ uri: m.thumbnail || undefined }} style={styles.mediaThumbImg} />
+            </Pressable>
+          ))}
+        </ScrollView>
+      )}
+
+      {visibleTags.length > 0 && (
+        <View style={styles.tagsRow}>
+          {visibleTags.map((tag, i) => (
+            <View key={i} style={styles.tag}>
+              <Text style={styles.tagText}>{tag}</Text>
+            </View>
+          ))}
+        </View>
+      )}
+
+      <View style={styles.actionsRow}>
+        <VoteButtons review={review} />
+      </View>
+
+      {reply && (
+        <View style={styles.merchantReply}>
+          <View style={styles.merchantReplyHeader}>
+            <Text style={styles.merchantReplyAuthor}>{reply.author_name}</Text>
+            <Text style={styles.merchantReplyDate}>{reply.date}</Text>
+          </View>
+          <Text style={styles.merchantReplyBody}>{reply.body}</Text>
+        </View>
+      )}
+    </View>
+  );
+}

package/src/widget/components/SortDrawer.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Modal, Pressable, Text, View } from 'react-native';
+import type { WidgetSortValue } from '../../client/types.js';
+import { useWidget } from '../WidgetContext.js';
+import { SORT_OPTIONS } from '../util.js';
+
+export interface SortDrawerProps {
+  visible: boolean;
+  current: WidgetSortValue;
+  onSelect: (value: WidgetSortValue) => void;
+  onClose: () => void;
+}
+
+// Bottom-sheet sort picker.
+export function SortDrawer({ visible, current, onSelect, onClose }: SortDrawerProps) {
+  const { styles, theme } = useWidget();
+  return (
+    <Modal visible={visible} animationType="slide" transparent onRequestClose={onClose}>
+      <Pressable style={styles.modalBackdrop} onPress={onClose} />
+      <View style={styles.drawer} accessibilityRole="menu">
+        <View style={styles.drawerHandle} />
+        <Text style={styles.drawerTitle}>Sort reviews</Text>
+        {SORT_OPTIONS.map((opt) => {
+          const active = opt.value === current;
+          return (
+            <Pressable
+              key={opt.value}
+              onPress={() => {
+                onSelect(opt.value);
+                onClose();
+              }}
+              style={({ pressed }: { pressed: boolean }) => [
+                styles.drawerOption,
+                pressed && { backgroundColor: theme.card },
+              ]}
+              accessibilityRole="menuitem"
+              accessibilityState={{ selected: active }}
+            >
+              <Text style={[styles.drawerOptionText, active && styles.drawerOptionTextActive]}>
+                {opt.label}
+              </Text>
+              {active && <View style={styles.drawerActiveDot} />}
+            </Pressable>
+          );
+        })}
+      </View>
+    </Modal>
+  );
+}

package/src/widget/components/StaleListOverlay.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Easing, View } from 'react-native';
+import { useWidget } from '../WidgetContext.js';
+import { SCREEN_W } from '../styles.js';
+
+// 2px animated top progress bar shown during a refetch (filter/sort/search
+// change). 150ms grace before appearing so a fast response doesn't flash it;
+// existing cards stay visible (dimmed) rather than blanking.
+export function StaleListOverlay({ active }: { active: boolean }) {
+  const { styles } = useWidget();
+  const slide = useRef(new Animated.Value(0)).current;
+  const [shown, setShown] = useState(false);
+
+  useEffect(() => {
+    let graceTimer: ReturnType<typeof setTimeout> | undefined;
+    if (active) {
+      graceTimer = setTimeout(() => setShown(true), 150);
+    } else {
+      setShown(false);
+    }
+    return () => clearTimeout(graceTimer);
+  }, [active]);
+
+  useEffect(() => {
+    if (!shown) {
+      slide.setValue(0);
+      return;
+    }
+    const loop = Animated.loop(
+      Animated.timing(slide, {
+        toValue: 1,
+        duration: 1400,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      }),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [shown, slide]);
+
+  if (!shown) return null;
+  const translateX = slide.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-SCREEN_W * 0.4, SCREEN_W * 1.4],
+  });
+  return (
+    <View style={styles.progressTrack} pointerEvents="none">
+      <Animated.View style={[styles.progressFill, { transform: [{ translateX }] }]} />
+    </View>
+  );
+}

package/src/widget/components/VoteButtons.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Pressable, Text } from 'react-native';
+import type { WidgetReview } from '../../client/types.js';
+import { IconThumbsDown, IconThumbsUp } from '../../icons/BRIcons.js';
+import { useWidget } from '../WidgetContext.js';
+import { useVote } from '../hooks/useVote.js';
+
+// Helpful / unhelpful pair, wired to the live vote endpoint via `useVote`.
+// Shared by `ReviewCard` and the viewer's `ViewerPage`. The caller supplies
+// the row wrapper (`actionsRow` / `viewerActionsRow`).
+export function VoteButtons({ review }: { review: WidgetReview }) {
+  const { styles, theme } = useWidget();
+  const { vote, helpfulCount, unhelpfulCount, press } = useVote(review);
+  // Single-selection: once a side is chosen, the other is disabled until undone.
+  const helpfulDisabled = vote === 'unhelpful';
+  const unhelpfulDisabled = vote === 'helpful';
+  return (
+    <>
+      <Pressable
+        onPress={() => press('helpful')}
+        disabled={helpfulDisabled}
+        style={({ pressed }: { pressed: boolean }) => [
+          styles.actionBtn,
+          helpfulDisabled && { opacity: 0.4 },
+          pressed && { opacity: 0.6 },
+        ]}
+        accessibilityRole="button"
+        accessibilityState={{ selected: vote === 'helpful', disabled: helpfulDisabled }}
+        accessibilityLabel={`Helpful (${helpfulCount})`}
+      >
+        <IconThumbsUp size={14} color={vote === 'helpful' ? theme.accent : theme.mutedFg} />
+        <Text style={[styles.actionBtnText, vote === 'helpful' && styles.actionBtnTextActive]}>
+          Helpful ({helpfulCount})
+        </Text>
+      </Pressable>
+      <Pressable
+        onPress={() => press('unhelpful')}
+        disabled={unhelpfulDisabled}
+        style={({ pressed }: { pressed: boolean }) => [
+          styles.actionBtn,
+          unhelpfulDisabled && { opacity: 0.4 },
+          pressed && { opacity: 0.6 },
+        ]}
+        accessibilityRole="button"
+        accessibilityState={{ selected: vote === 'unhelpful', disabled: unhelpfulDisabled }}
+        accessibilityLabel={`Not helpful (${unhelpfulCount})`}
+      >
+        <IconThumbsDown size={14} color={vote === 'unhelpful' ? theme.accent : theme.mutedFg} />
+        <Text style={[styles.actionBtnText, vote === 'unhelpful' && styles.actionBtnTextActive]}>
+          ({unhelpfulCount})
+        </Text>
+      </Pressable>
+    </>
+  );
+}

package/src/widget/hooks/useReviewDetail.ts

@@ -0,0 +1,55 @@
+/**
+ * Read-more state for one review. Centralizes the "fetch the full body on
+ * expand" logic so BOTH `ReviewCard` and the viewer's `ViewerPage` go through
+ * the client (which reads the FLAT `detail.body`) — the prototype's
+ * `detail.review.body` bug cannot recur because components never touch the
+ * raw shape.
+ */
+import { useCallback, useEffect, useState } from 'react';
+import type { WidgetReview } from '../../client/types.js';
+import { useWidget } from '../WidgetContext.js';
+
+export interface ReviewDetailState {
+  expanded: boolean;
+  body: string;
+  error: boolean;
+  toggle: () => void;
+}
+
+export function useReviewDetail(review: WidgetReview, preFetchedBody?: string): ReviewDetailState {
+  const { client, emit } = useWidget();
+  const [expanded, setExpanded] = useState(false);
+  const [fullBody, setFullBody] = useState<string | null>(preFetchedBody ?? null);
+  const [error, setError] = useState(false);
+
+  // Adopt an eagerly-prefetched body (the viewer pre-fetches the next review).
+  useEffect(() => {
+    if (preFetchedBody && !fullBody) setFullBody(preFetchedBody);
+  }, [preFetchedBody, fullBody]);
+
+  const toggle = useCallback(() => {
+    if (expanded) {
+      setExpanded(false);
+      return;
+    }
+    if (fullBody || !review.body_truncated) {
+      setExpanded(true);
+      return;
+    }
+    client
+      .getReviewDetail(review.id)
+      .then((detail) => {
+        setFullBody(detail.body);
+        setExpanded(true);
+      })
+      .catch(() => {
+        // Show the preview with a soft notice; never block the UI.
+        setExpanded(true);
+        setError(true);
+        emit({ type: 'betterreviews.fetch.failure', error_code: 'detail_failed' });
+      });
+  }, [expanded, fullBody, review.id, review.body_truncated, client, emit]);
+
+  const body = expanded && fullBody ? fullBody : review.body;
+  return { expanded, body, error, toggle };
+}

package/src/widget/hooks/useReviewList.ts

@@ -0,0 +1,136 @@
+/**
+ * List state machine: pagination, sort, rating/media/search filters (300ms
+ * search debounce), load-more, pull-to-refresh, and the stale-list overlay
+ * flag. Runs at the container level, so it takes `client`/`emit` as args
+ * rather than reading the widget context (which is mounted below it).
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type {
+  BetterReviewsClient,
+  WidgetPagination,
+  WidgetReview,
+  WidgetSortValue,
+} from '../../client/types.js';
+import type { TelemetryHandler } from '../../telemetry.js';
+import type { FilterPatch } from '../components/FilterToolbar.js';
+
+const PAGE_SIZE = 10;
+
+export interface ReviewListState {
+  reviews: WidgetReview[];
+  pagination: WidgetPagination | null;
+  sort: WidgetSortValue;
+  rating: 1 | 2 | 3 | 4 | 5 | null;
+  mediaOnly: boolean;
+  searchInput: string;
+  loading: boolean;
+  refetching: boolean;
+  loadingMore: boolean;
+  error: boolean;
+  setSort: (s: WidgetSortValue) => void;
+  onFilterChange: (patch: FilterPatch) => void;
+  onLoadMore: () => void;
+  reload: () => void;
+}
+
+export function useReviewList(
+  client: BetterReviewsClient,
+  emit: TelemetryHandler,
+  initialSort: WidgetSortValue = 'most_relevant',
+): ReviewListState {
+  const [page, setPage] = useState(1);
+  const [reviews, setReviews] = useState<WidgetReview[]>([]);
+  const [pagination, setPagination] = useState<WidgetPagination | null>(null);
+  const [sort, setSort] = useState<WidgetSortValue>(initialSort);
+  const [rating, setRating] = useState<1 | 2 | 3 | 4 | 5 | null>(null);
+  const [mediaOnly, setMediaOnly] = useState(false);
+  const [searchInput, setSearchInput] = useState('');
+  const [search, setSearch] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [refetching, setRefetching] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState(false);
+
+  const inflightRef = useRef<AbortController | null>(null);
+  const initialLoadDoneRef = useRef(false);
+
+  // Debounce keystrokes → committed `search` (drives fetches).
+  useEffect(() => {
+    const t = setTimeout(() => setSearch(searchInput), 300);
+    return () => clearTimeout(t);
+  }, [searchInput]);
+
+  const loadFirstPage = useCallback(async () => {
+    inflightRef.current?.abort();
+    const ctrl = new AbortController();
+    inflightRef.current = ctrl;
+
+    if (!initialLoadDoneRef.current) setLoading(true);
+    else setRefetching(true);
+    setError(false);
+
+    try {
+      const res = await client.listReviews(
+        { page: 1, perPage: PAGE_SIZE, sort, rating, mediaOnly, search },
+        ctrl.signal,
+      );
+      if (ctrl.signal.aborted) return;
+      setReviews(res.reviews);
+      setPagination(res.pagination);
+      setPage(1);
+      initialLoadDoneRef.current = true;
+    } catch {
+      if (ctrl.signal.aborted) return;
+      setError(true);
+    } finally {
+      if (!ctrl.signal.aborted) {
+        setLoading(false);
+        setRefetching(false);
+      }
+    }
+  }, [client, sort, rating, mediaOnly, search]);
+
+  useEffect(() => {
+    loadFirstPage();
+    return () => inflightRef.current?.abort();
+  }, [loadFirstPage]);
+
+  const onLoadMore = useCallback(async () => {
+    if (loadingMore || !pagination?.has_next) return;
+    setLoadingMore(true);
+    try {
+      const next = page + 1;
+      const res = await client.listReviews({ page: next, perPage: PAGE_SIZE, sort, rating, mediaOnly, search });
+      setReviews((prev) => [...prev, ...res.reviews]);
+      setPagination(res.pagination);
+      setPage(next);
+    } catch {
+      emit({ type: 'betterreviews.fetch.failure', error_code: 'load_more_failed' });
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [loadingMore, pagination, page, client, sort, rating, mediaOnly, search, emit]);
+
+  const onFilterChange = useCallback((patch: FilterPatch) => {
+    if ('rating' in patch) setRating(patch.rating ?? null);
+    if ('mediaOnly' in patch) setMediaOnly(!!patch.mediaOnly);
+    if ('search' in patch) setSearchInput(patch.search ?? '');
+  }, []);
+
+  return {
+    reviews,
+    pagination,
+    sort,
+    rating,
+    mediaOnly,
+    searchInput,
+    loading,
+    refetching,
+    loadingMore,
+    error,
+    setSort,
+    onFilterChange,
+    onLoadMore,
+    reload: loadFirstPage,
+  };
+}

package/src/widget/hooks/useReviewSummary.ts

@@ -0,0 +1,24 @@
+/**
+ * Product-level summary. Keyed off the client ONLY (the client closes over
+ * store+product) — it does NOT refetch when sort/rating/media/search change,
+ * so the 7-call synthesis runs once per product, not once per interaction.
+ */
+import { useEffect, useState } from 'react';
+import type { BetterReviewsClient, WidgetSummary } from '../../client/types.js';
+
+export function useReviewSummary(client: BetterReviewsClient): WidgetSummary | null {
+  const [summary, setSummary] = useState<WidgetSummary | null>(null);
+
+  useEffect(() => {
+    const ctrl = new AbortController();
+    client
+      .fetchSummary(ctrl.signal)
+      .then((s) => {
+        if (!ctrl.signal.aborted) setSummary(s);
+      })
+      .catch(() => {});
+    return () => ctrl.abort();
+  }, [client]);
+
+  return summary;
+}