@betterreviews/react-native 1.0.0

package/src/widget/viewer/MediaReviewViewer.tsx

@@ -0,0 +1,350 @@
+/**
+ * Instagram/Loox-style two-axis media viewer.
+ *   - Vertical swipe → next review (text-only reviews are pre-filtered out by
+ *     the container).
+ *   - Horizontal swipe → next photo within the current review.
+ *
+ * Uses `react-native-gesture-handler`'s `GHFlatList` (vertical pager) +
+ * `GHScrollView` (card body) so the inner long-body scroll chains with the
+ * outer pager — stock RN's `PanResponder` steals that gesture.
+ *
+ * DELIBERATE double-wrap: a `GestureHandlerRootView` is mounted INSIDE this
+ * Modal *and* the host wraps their app root in one. On Android a Modal renders
+ * into a separate native view hierarchy that the root view does not reach, so
+ * the gestures inside the Modal need their own root. This is NOT the
+ * prototype's "fragile modal-only wrap" (that was the ONLY wrap) — it's
+ * root (host) + modal-internal (here), the documented RN-Modal requirement.
+ */
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  Easing,
+  FlatList,
+  Image,
+  Modal,
+  Platform,
+  Pressable,
+  Text,
+  View,
+} from 'react-native';
+import {
+  GestureHandlerRootView,
+  FlatList as GHFlatList,
+  ScrollView as GHScrollView,
+} from 'react-native-gesture-handler';
+import type { WidgetReview } from '../../client/types.js';
+import { IconShieldCheck, IconXClose } from '../../icons/BRIcons.js';
+import { useWidget } from '../WidgetContext.js';
+import { useReviewDetail } from '../hooks/useReviewDetail.js';
+import { getInitials } from '../util.js';
+import { RatingStars } from '../components/RatingStars.js';
+import { VoteButtons } from '../components/VoteButtons.js';
+import { SCREEN_H, SCREEN_W } from '../styles.js';
+
+export interface MediaReviewViewerProps {
+  reviews: WidgetReview[];
+  initialReviewId: number;
+  initialMediaIndex: number;
+  onClose: () => void;
+}
+
+export function MediaReviewViewer({
+  reviews,
+  initialReviewId,
+  initialMediaIndex,
+  onClose,
+}: MediaReviewViewerProps) {
+  const { styles, client } = useWidget();
+  const startIndex = Math.max(
+    0,
+    reviews.findIndex((r) => r.id === initialReviewId),
+  );
+  const [reviewIndex, setReviewIndex] = useState(startIndex);
+  const [mediaIndexByReview, setMediaIndexByReview] = useState<Record<number, number>>(() => ({
+    [reviews[startIndex]?.id ?? -1]: initialMediaIndex || 0,
+  }));
+  const [fullBodies, setFullBodies] = useState<Record<number, string>>({});
+
+  const vListRef = useRef<FlatList<WidgetReview>>(null);
+  const fade = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(fade, {
+      toValue: 1,
+      duration: 200,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: true,
+    }).start();
+  }, [fade]);
+
+  const close = useCallback(() => {
+    Animated.timing(fade, {
+      toValue: 0,
+      duration: 180,
+      easing: Easing.in(Easing.quad),
+      useNativeDriver: true,
+    }).start(() => onClose());
+  }, [fade, onClose]);
+
+  // Eager-prefetch the NEXT review's full body (flat detail.body) so a vertical
+  // swipe never stalls on "Read more".
+  useEffect(() => {
+    const next = reviews[reviewIndex + 1];
+    if (!next || !next.body_truncated || fullBodies[next.id]) return;
+    let cancelled = false;
+    client
+      .getReviewDetail(next.id)
+      .then((detail) => {
+        if (!cancelled) setFullBodies((m) => ({ ...m, [next.id]: detail.body }));
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, [reviewIndex, reviews, fullBodies, client]);
+
+  const onMomentumScrollEnd = useCallback(
+    (e: { nativeEvent: { contentOffset: { y: number } } }) => {
+      const next = Math.round(e.nativeEvent.contentOffset.y / SCREEN_H);
+      if (next !== reviewIndex) setReviewIndex(next);
+    },
+    [reviewIndex],
+  );
+
+  const setMediaIndex = useCallback((reviewId: number, i: number) => {
+    setMediaIndexByReview((m) => ({ ...m, [reviewId]: i }));
+  }, []);
+
+  if (!reviews.length) return null;
+
+  return (
+    <Modal
+      visible
+      transparent
+      animationType="none"
+      presentationStyle="overFullScreen"
+      onRequestClose={close}
+      statusBarTranslucent
+    >
+      <GestureHandlerRootView style={styles.viewerRoot}>
+        <Animated.View style={[styles.viewerRoot, { opacity: fade }]} accessibilityViewIsModal>
+          <GHFlatList
+            ref={vListRef as never}
+            data={reviews}
+            keyExtractor={(r: WidgetReview) => `vr-${r.id}`}
+            pagingEnabled
+            showsVerticalScrollIndicator={false}
+            initialScrollIndex={reviewIndex}
+            getItemLayout={(_: unknown, i: number) => ({ length: SCREEN_H, offset: SCREEN_H * i, index: i })}
+            onMomentumScrollEnd={onMomentumScrollEnd}
+            decelerationRate="fast"
+            snapToInterval={SCREEN_H}
+            initialNumToRender={1}
+            windowSize={3}
+            removeClippedSubviews={Platform.OS === 'android'}
+            renderItem={({ item, index }: { item: WidgetReview; index: number }) => (
+              <ViewerPage
+                review={item}
+                reviewPositionLabel={`Review ${index + 1} / ${reviews.length}`}
+                mediaIndex={mediaIndexByReview[item.id] || 0}
+                onMediaIndexChange={(i) => setMediaIndex(item.id, i)}
+                onSwipeNextReview={() => {
+                  if (index < reviews.length - 1) {
+                    vListRef.current?.scrollToIndex({ index: index + 1, animated: true });
+                  }
+                }}
+                preFetchedBody={fullBodies[item.id]}
+                onRequestClose={close}
+              />
+            )}
+          />
+
+          <Pressable
+            style={({ pressed }: { pressed: boolean }) => [styles.viewerClose, pressed && { opacity: 0.7 }]}
+            onPress={close}
+            accessibilityLabel="Close review viewer"
+            hitSlop={12}
+          >
+            <IconXClose size={20} color="#fff" />
+          </Pressable>
+        </Animated.View>
+      </GestureHandlerRootView>
+    </Modal>
+  );
+}
+
+interface ViewerPageProps {
+  review: WidgetReview;
+  reviewPositionLabel: string;
+  mediaIndex: number;
+  onMediaIndexChange: (i: number) => void;
+  onSwipeNextReview: () => void;
+  preFetchedBody?: string;
+  onRequestClose: () => void;
+}
+
+function ViewerPage({
+  review,
+  reviewPositionLabel,
+  mediaIndex,
+  onMediaIndexChange,
+  onSwipeNextReview,
+  preFetchedBody,
+  onRequestClose,
+}: ViewerPageProps) {
+  const { styles, theme } = useWidget();
+  const { expanded, body, error, toggle } = useReviewDetail(review, preFetchedBody);
+  const [replyOpen, setReplyOpen] = useState(false);
+
+  const media = review.media.filter((m) => m.type === 'image');
+  const reply = review.merchant_reply;
+  const visibleTags = review.tags.slice(0, 4);
+  const wasTruncated = review.body_truncated === true;
+
+  return (
+    <View style={{ width: SCREEN_W, height: SCREEN_H }}>
+      <View style={styles.viewerMediaZone}>
+        <FlatList
+          data={media}
+          keyExtractor={(_, i) => `hm-${review.id}-${i}`}
+          horizontal
+          pagingEnabled
+          showsHorizontalScrollIndicator={false}
+          initialScrollIndex={mediaIndex}
+          getItemLayout={(_, i) => ({ length: SCREEN_W, offset: SCREEN_W * i, index: i })}
+          onMomentumScrollEnd={(e) => {
+            const i = Math.round(e.nativeEvent.contentOffset.x / SCREEN_W);
+            // On the last (or only) photo, a further swipe advances to the next review.
+            if (i === mediaIndex && media.length <= 1) onSwipeNextReview();
+            else onMediaIndexChange(i);
+          }}
+          onScrollEndDrag={(e) => onMediaIndexChange(Math.round(e.nativeEvent.contentOffset.x / SCREEN_W))}
+          renderItem={({ item, index }) => (
+            <View
+              style={[styles.viewerMediaPage, { width: SCREEN_W }]}
+              accessibilityLabel={`Photo ${index + 1} of ${media.length} from ${review.author || 'Anonymous'}'s review`}
+            >
+              <Image
+                source={{ uri: item.full || undefined }}
+                style={styles.viewerImage}
+                resizeMode="contain"
+                accessible
+                accessibilityLabel={item.alt || 'Customer review photo'}
+              />
+            </View>
+          )}
+        />
+
+        <View style={styles.viewerTopOverlay} pointerEvents="none">
+          {media.length > 1 ? (
+            <View style={styles.viewerDots}>
+              {media.map((_, i) => (
+                <View key={i} style={[styles.viewerDot, i === mediaIndex && styles.viewerDotActive]} />
+              ))}
+            </View>
+          ) : (
+            <View />
+          )}
+          <View style={styles.viewerPosition}>
+            <Text style={styles.viewerPositionText}>{reviewPositionLabel}</Text>
+          </View>
+        </View>
+      </View>
+
+      <View style={styles.viewerCard} accessibilityRole="summary">
+        <Pressable
+          onPress={onRequestClose}
+          hitSlop={12}
+          accessibilityLabel="Close review viewer"
+          accessibilityRole="button"
+          style={styles.viewerHandleHit}
+        >
+          <View style={styles.viewerHandle} />
+        </Pressable>
+
+        <GHScrollView
+          style={styles.viewerCardScroll}
+          contentContainerStyle={styles.viewerCardContent}
+          showsVerticalScrollIndicator={false}
+        >
+          <View style={styles.viewerCardHeader}>
+            <View style={styles.viewerAvatar}>
+              <Text style={styles.viewerAvatarText}>{getInitials(review.author)}</Text>
+            </View>
+            <View style={{ flex: 1, minWidth: 0 }}>
+              <View style={styles.viewerHeaderTopRow}>
+                <Text style={styles.viewerAuthor} numberOfLines={1}>
+                  {review.author || 'Anonymous'}
+                </Text>
+                <Text style={styles.viewerDate}>{review.date}</Text>
+              </View>
+              <View style={styles.viewerStarsRow}>
+                <RatingStars value={review.rating} size={13} uid={`v-${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.viewerTitle}>{review.title}</Text>}
+          {!!body && (
+            <Text style={styles.viewerBody} numberOfLines={wasTruncated && !expanded ? 4 : 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>}
+
+          {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.viewerActionsRow}>
+            <VoteButtons review={review} />
+          </View>
+
+          {reply && (
+            <Pressable
+              onPress={() => setReplyOpen((v) => !v)}
+              style={({ pressed }: { pressed: boolean }) => [styles.viewerReplyToggle, pressed && { opacity: 0.7 }]}
+              accessibilityRole="button"
+              accessibilityLabel={replyOpen ? 'Hide merchant reply' : 'Show merchant reply'}
+            >
+              <Text style={styles.viewerReplyToggleText}>
+                {replyOpen ? `Hide reply from ${reply.author_name}` : `Reply from ${reply.author_name} →`}
+              </Text>
+            </Pressable>
+          )}
+          {reply && replyOpen && (
+            <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>
+          )}
+        </GHScrollView>
+      </View>
+    </View>
+  );
+}