@betterreviews/react-native 1.0.0

package/src/widget/hooks/useVote.ts

@@ -0,0 +1,68 @@
+/**
+ * Helpful/unhelpful voting for one review. Optimistic update with rollback on
+ * any failure (network, 422 nothing-to-undo, 404). The POST is fire-once — no
+ * retry (a retried non-idempotent vote double-counts). The server's returned
+ * counts are authoritative and reconcile the optimistic guess.
+ */
+import { useCallback, useRef, useState } from 'react';
+import type { VoteType, WidgetReview } from '../../client/types.js';
+import { useWidget } from '../WidgetContext.js';
+
+export interface VoteState {
+  vote: VoteType | null;
+  helpfulCount: number;
+  unhelpfulCount: number;
+  press: (type: VoteType) => void;
+}
+
+export function useVote(review: WidgetReview): VoteState {
+  const { client, voteStore, emit } = useWidget();
+  const [vote, setVote] = useState<VoteType | null>(() => voteStore.get(review.id) ?? null);
+  const [helpfulCount, setHelpful] = useState(review.helpful_count);
+  const [unhelpfulCount, setUnhelpful] = useState(review.unhelpful_count);
+  const pendingRef = useRef(false);
+
+  const press = useCallback(
+    (type: VoteType) => {
+      if (pendingRef.current) return;
+      // The server vote counters have no per-user tracking — a "switch" would
+      // just +1 the other side and leave the first vote standing (double count,
+      // and a "you voted" indicator that lies). So this is single-selection:
+      // you can vote one side, and the only follow-up is undoing THAT side. To
+      // change your mind, undo first (the opposite button is disabled meanwhile).
+      if (vote !== null && vote !== type) return;
+      const snapshot = { vote, helpfulCount, unhelpfulCount };
+      const isUndo = vote === type;
+
+      // Optimistic: bump the pressed counter, set the new direction.
+      setVote(isUndo ? null : type);
+      if (type === 'helpful') setHelpful((n) => n + (isUndo ? -1 : 1));
+      else setUnhelpful((n) => n + (isUndo ? -1 : 1));
+
+      pendingRef.current = true;
+      client
+        .voteReview(review.id, type, isUndo)
+        .then((counts) => {
+          voteStore.set(review.id, isUndo ? null : type);
+          // Server counts are authoritative (reconciles e.g. switching sides).
+          if (counts) {
+            setHelpful(counts.helpful_count);
+            setUnhelpful(counts.unhelpful_count);
+          }
+        })
+        .catch(() => {
+          // Roll back to the pre-press snapshot (covers non-2xx incl. 422/404).
+          setVote(snapshot.vote);
+          setHelpful(snapshot.helpfulCount);
+          setUnhelpful(snapshot.unhelpfulCount);
+          emit({ type: 'betterreviews.fetch.failure', error_code: 'vote_failed' });
+        })
+        .finally(() => {
+          pendingRef.current = false;
+        });
+    },
+    [vote, helpfulCount, unhelpfulCount, review.id, client, voteStore, emit],
+  );
+
+  return { vote, helpfulCount, unhelpfulCount, press };
+}

package/src/widget/styles.ts

@@ -0,0 +1,393 @@
+/**
+ * Widget StyleSheet — a faithful port of the prototype's single `StyleSheet`
+ * (`App.js` L1601-2321), parameterized by the resolved `WidgetTheme` so the
+ * merchant theme (bg/text/accent) flows through. The prototype's static
+ * `THEME` const became `WidgetTheme` because the SDK resolves theme at
+ * runtime; everything else (the fixed neutrals) is unchanged.
+ *
+ * `1rem = 16px` (parity with the storefront `--br-rem`).
+ */
+import { Dimensions, StyleSheet } from 'react-native';
+import type { WidgetTheme } from '../theme/widgetTheme.js';
+
+const R = 16;
+
+export const SCREEN_W = Dimensions.get('window').width;
+export const SCREEN_H = Dimensions.get('window').height;
+// Media zone ~60% of viewport, card sheet ~40% — matches Loox/Okendo.
+export const MEDIA_ZONE_H = Math.round(SCREEN_H * 0.6);
+export const CARD_ZONE_H = SCREEN_H - MEDIA_ZONE_H;
+
+export type WidgetStyles = ReturnType<typeof makeWidgetStyles>;
+
+export function makeWidgetStyles(t: WidgetTheme) {
+  return StyleSheet.create({
+    root: { flex: 1, backgroundColor: t.bg },
+    list: { paddingHorizontal: R, paddingBottom: R * 1.5 },
+    center: { padding: R * 2, alignItems: 'center', justifyContent: 'center' },
+    muted: { color: t.mutedFg, marginTop: 8, fontSize: 14 },
+    errorLine: { color: t.mutedFg, fontSize: 14, marginBottom: 8 },
+    retryLink: { color: t.accent, fontSize: 14, textDecorationLine: 'underline' },
+
+    sectionTitle: {
+      fontSize: R * 1.5,
+      fontWeight: '700',
+      color: t.text,
+      marginTop: R,
+      marginBottom: R * 0.75,
+    },
+
+    pulse: { paddingTop: R * 0.5, marginBottom: R },
+    pulseSummary: { flexDirection: 'column', gap: R * 0.75 },
+    pulseRating: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: R * 0.5 },
+    pulseScore: {
+      fontSize: R * 2.5,
+      fontWeight: '700',
+      color: t.text,
+      letterSpacing: -1,
+      marginRight: R * 0.25,
+      lineHeight: R * 2.5,
+    },
+    pulseCount: { fontSize: 13, color: t.mutedFg },
+    pulseBars: { gap: R * 0.375, marginTop: R * 0.25 },
+    barRow: { flexDirection: 'row', alignItems: 'center', gap: R * 0.5 },
+    barLabel: { width: R * 1.5, flexDirection: 'row', alignItems: 'center', gap: 2 },
+    barLabelText: { fontSize: 13, color: t.text },
+    barTrack: { flex: 1, height: 8, backgroundColor: t.muted, borderRadius: 4, overflow: 'hidden' },
+    barFill: { height: '100%', backgroundColor: t.star, borderRadius: 4 },
+    barCount: { width: R * 2, textAlign: 'right', fontSize: 12, color: t.mutedFg },
+
+    mediaGallery: { marginTop: R },
+    mediaGalleryLabel: {
+      fontSize: 12,
+      fontWeight: '600',
+      color: t.mutedFg,
+      textTransform: 'uppercase',
+      letterSpacing: 0.6,
+      marginBottom: 8,
+    },
+    mediaGalleryGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
+    galleryTile: {
+      width: '31.5%',
+      aspectRatio: 1,
+      borderRadius: 16,
+      borderWidth: 1,
+      borderColor: t.border,
+      overflow: 'hidden',
+      backgroundColor: t.muted,
+    },
+    galleryTileImg: { width: '100%', height: '100%' },
+    galleryOverflow: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: t.overflowScrim,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    galleryOverflowText: { color: '#fff', fontSize: 18, fontWeight: '700' },
+
+    writeReviewBtn: {
+      width: '100%',
+      paddingHorizontal: R * 1.5,
+      paddingVertical: R * 0.625,
+      backgroundColor: t.accent,
+      borderRadius: 9999,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: R * 0.75,
+    },
+    writeReviewBtnText: { color: '#ffffff', fontWeight: '600', fontSize: 14 },
+
+    metrics: { flexDirection: 'row', gap: R * 0.5, marginTop: R },
+    metric: { flex: 1, alignItems: 'center' },
+    metricValue: { fontSize: R * 1.25, fontWeight: '700', color: t.text, lineHeight: R * 1.5 },
+    metricLabel: {
+      fontSize: 11,
+      color: t.mutedFg,
+      textTransform: 'uppercase',
+      letterSpacing: 0.5,
+      marginTop: 2,
+    },
+
+    toolbar: {
+      paddingTop: R * 0.75,
+      paddingBottom: R * 0.75,
+      borderBottomWidth: 1,
+      borderBottomColor: t.border,
+      marginBottom: R * 0.75,
+      gap: R * 0.5,
+    },
+    pillsRow: { flexDirection: 'row', gap: R * 0.375, paddingRight: R, alignItems: 'center' },
+    pill: {
+      paddingHorizontal: R * 0.75,
+      paddingVertical: R * 0.375,
+      borderRadius: 9999,
+      borderWidth: 1,
+      borderColor: t.border,
+      backgroundColor: t.bg,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+    },
+    pillWithIcon: { paddingHorizontal: R * 0.625 },
+    pillActive: { backgroundColor: t.text, borderColor: t.text },
+    pillText: { color: t.text, fontSize: 13, fontWeight: '500' },
+    pillTextActive: { color: t.bg },
+    clearBtn: {
+      paddingHorizontal: R * 0.5,
+      paddingVertical: R * 0.375,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+    },
+    clearBtnText: { color: t.mutedFg, fontSize: 13, fontWeight: '500' },
+
+    searchWrap: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderWidth: 1,
+      borderColor: t.border,
+      borderRadius: 9999,
+      backgroundColor: t.bg,
+      paddingLeft: R * 0.75,
+      paddingRight: R * 0.5,
+      height: 36,
+    },
+    searchInput: { flex: 1, fontSize: 13, color: t.text, paddingVertical: 0 },
+    searchClear: { width: 22, height: 22, borderRadius: 11, alignItems: 'center', justifyContent: 'center' },
+    searchHint: { fontSize: 12, color: t.mutedFg, paddingLeft: R * 0.25, paddingTop: 4 },
+
+    sortBtn: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      alignSelf: 'flex-start',
+      paddingHorizontal: R * 0.75,
+      paddingVertical: R * 0.375,
+      borderRadius: 9999,
+      borderWidth: 1,
+      borderColor: t.border,
+      backgroundColor: t.bg,
+      marginBottom: R * 0.5,
+      gap: R * 0.375,
+    },
+    sortBtnText: { color: t.text, fontSize: 13, fontWeight: '500' },
+
+    // 2px top progress bar — faint neutral track (the fill uses the accent).
+    progressTrack: {
+      height: 2,
+      width: '100%',
+      backgroundColor: 'rgba(0, 0, 0, 0.06)',
+      overflow: 'hidden',
+      marginBottom: -2,
+    },
+    progressFill: { width: '30%', height: '100%', backgroundColor: t.accent, borderRadius: 2 },
+
+    card: { paddingVertical: R * 1.25, borderBottomWidth: 1, borderBottomColor: t.border },
+    cardHeader: { flexDirection: 'row', alignItems: 'flex-start', gap: R * 0.75, marginBottom: R * 0.5 },
+    avatar: {
+      width: 40,
+      height: 40,
+      borderRadius: 20,
+      backgroundColor: t.muted,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    avatarText: { fontWeight: '600', fontSize: 14, color: t.mutedFg, textTransform: 'uppercase' },
+    cardInfo: { flex: 1, minWidth: 0 },
+    cardTopRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: R * 0.5 },
+    cardAuthor: { fontWeight: '600', fontSize: 15, color: t.text, flexShrink: 1 },
+    cardDate: { fontSize: 13, color: t.mutedFg },
+    cardRatingRow: { flexDirection: 'row', alignItems: 'center', gap: R * 0.5, marginTop: 2 },
+    verifiedBadge: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+      paddingHorizontal: R * 0.5,
+      paddingVertical: 2,
+      borderRadius: 9999,
+      backgroundColor: t.verifiedBg,
+    },
+    verifiedBadgeText: { fontSize: 11, color: t.verified, fontWeight: '500' },
+    cardTitle: { fontSize: 15, fontWeight: '700', color: t.text, marginTop: R * 0.5, marginBottom: R * 0.375 },
+    cardBody: { fontSize: 15, lineHeight: 15 * 1.7, color: t.text },
+    readMoreBtn: { paddingVertical: 4, marginTop: 2, alignSelf: 'flex-start' },
+    readMoreBtnText: { fontSize: 13, color: t.accent, fontWeight: '500', textDecorationLine: 'underline' },
+    readMoreErr: { fontSize: 12, color: t.mutedFg, marginTop: 2 },
+    cardMedia: { marginTop: R * 0.75 },
+    mediaThumb: {
+      width: 64,
+      height: 64,
+      borderRadius: R,
+      borderWidth: 1,
+      borderColor: t.border,
+      overflow: 'hidden',
+      backgroundColor: t.muted,
+    },
+    mediaThumbImg: { width: '100%', height: '100%' },
+    tagsRow: { flexDirection: 'row', flexWrap: 'wrap', gap: R * 0.375, marginTop: R * 0.75 },
+    tag: {
+      paddingHorizontal: R * 0.5,
+      paddingVertical: 2,
+      borderRadius: 9999,
+      borderWidth: 1,
+      borderColor: t.border,
+      backgroundColor: t.muted,
+    },
+    tagText: { fontSize: 12, color: t.mutedFg },
+    actionsRow: { flexDirection: 'row', gap: R, marginTop: R * 0.75 },
+    actionBtn: { flexDirection: 'row', alignItems: 'center', gap: 6, paddingVertical: R * 0.25 },
+    actionBtnText: { fontSize: 13, color: t.mutedFg },
+    actionBtnTextActive: { color: t.accent, fontWeight: '600' },
+
+    merchantReply: {
+      marginTop: R * 0.75,
+      padding: R,
+      borderRadius: R,
+      backgroundColor: t.muted,
+      borderWidth: 1,
+      borderColor: t.border,
+    },
+    merchantReplyHeader: { flexDirection: 'row', alignItems: 'baseline', gap: R * 0.5, marginBottom: R * 0.25 },
+    merchantReplyAuthor: { fontWeight: '600', fontSize: 13, color: t.text },
+    merchantReplyDate: { fontSize: 12, color: t.mutedFg },
+    merchantReplyBody: { fontSize: 14, lineHeight: 22, color: t.mutedFg },
+
+    footerWrap: { alignItems: 'center', paddingVertical: R },
+    showMore: {
+      paddingHorizontal: R * 2,
+      paddingVertical: R * 0.625,
+      borderRadius: 9999,
+      borderWidth: 1,
+      borderColor: t.border,
+      backgroundColor: 'transparent',
+    },
+    showMoreDisabled: { opacity: 0.5 },
+    showMoreText: { fontSize: 14, color: t.text },
+
+    emptyState: {
+      alignItems: 'center',
+      padding: R * 2,
+      borderRadius: R,
+      borderWidth: 1,
+      borderColor: t.border,
+      marginVertical: R,
+    },
+    emptyStateText: { fontSize: 15, color: t.mutedFg, marginBottom: R * 0.5 },
+    emptyStateClear: { fontSize: 14, color: t.text, textDecorationLine: 'underline' },
+
+    modalBackdrop: { flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' },
+    drawer: {
+      backgroundColor: t.bg,
+      borderTopLeftRadius: R,
+      borderTopRightRadius: R,
+      paddingBottom: R * 1.5,
+      paddingTop: R * 0.75,
+    },
+    drawerHandle: {
+      alignSelf: 'center',
+      width: 36,
+      height: 4,
+      borderRadius: 2,
+      backgroundColor: t.border,
+      marginBottom: R,
+    },
+    drawerTitle: {
+      paddingHorizontal: R,
+      paddingBottom: R * 0.75,
+      fontWeight: '600',
+      fontSize: 16,
+      color: t.text,
+      borderBottomWidth: 1,
+      borderBottomColor: t.border,
+    },
+    drawerOption: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: R,
+      paddingVertical: R * 0.75,
+    },
+    drawerOptionText: { fontSize: 14, color: t.text },
+    drawerOptionTextActive: { fontWeight: '600' },
+    drawerActiveDot: { width: 6, height: 6, borderRadius: 3, backgroundColor: t.accent },
+
+    viewerRoot: { flex: 1, backgroundColor: '#000' },
+    viewerClose: {
+      position: 'absolute',
+      top: 50,
+      right: 20,
+      zIndex: 20,
+      backgroundColor: 'rgba(0,0,0,0.45)',
+      width: 36,
+      height: 36,
+      borderRadius: 18,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    viewerMediaZone: { width: '100%', height: MEDIA_ZONE_H, backgroundColor: '#000' },
+    viewerMediaPage: { height: MEDIA_ZONE_H, alignItems: 'center', justifyContent: 'center' },
+    viewerImage: { width: '100%', height: '100%' },
+    viewerTopOverlay: {
+      position: 'absolute',
+      top: 50,
+      left: 16,
+      right: 64,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 12,
+    },
+    viewerDots: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+      backgroundColor: 'rgba(0,0,0,0.35)',
+      paddingHorizontal: 8,
+      paddingVertical: 5,
+      borderRadius: 9999,
+    },
+    viewerDot: { width: 5, height: 5, borderRadius: 3, backgroundColor: 'rgba(255,255,255,0.5)' },
+    viewerDotActive: { backgroundColor: '#fff', width: 7, height: 7, borderRadius: 4 },
+    viewerPosition: {
+      backgroundColor: 'rgba(0,0,0,0.35)',
+      paddingHorizontal: 10,
+      paddingVertical: 4,
+      borderRadius: 9999,
+    },
+    viewerPositionText: { color: '#fff', fontSize: 12, fontWeight: '500' },
+    viewerCard: {
+      height: CARD_ZONE_H,
+      backgroundColor: t.bg,
+      borderTopLeftRadius: R * 1.25,
+      borderTopRightRadius: R * 1.25,
+      paddingTop: 0,
+    },
+    viewerHandleHit: { alignItems: 'center', paddingTop: 8, paddingBottom: 6 },
+    viewerHandle: { width: 36, height: 4, borderRadius: 2, backgroundColor: t.border },
+    viewerCardScroll: { flex: 1 },
+    viewerCardContent: { paddingHorizontal: R, paddingTop: R * 0.5, paddingBottom: R * 1.5 },
+    viewerCardHeader: { flexDirection: 'row', alignItems: 'flex-start', gap: R * 0.75, marginBottom: R * 0.5 },
+    viewerAvatar: {
+      width: 36,
+      height: 36,
+      borderRadius: 18,
+      backgroundColor: t.muted,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    viewerAvatarText: { fontWeight: '600', fontSize: 13, color: t.mutedFg, textTransform: 'uppercase' },
+    viewerHeaderTopRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: R * 0.5 },
+    viewerAuthor: { fontWeight: '600', fontSize: 15, color: t.text, flexShrink: 1 },
+    viewerDate: { fontSize: 13, color: t.mutedFg },
+    viewerStarsRow: { flexDirection: 'row', alignItems: 'center', gap: R * 0.5, marginTop: 2 },
+    viewerTitle: { fontSize: 15, fontWeight: '700', color: t.text, marginTop: R * 0.25, marginBottom: R * 0.375 },
+    viewerBody: { fontSize: 14, lineHeight: 14 * 1.6, color: t.text },
+    viewerActionsRow: { flexDirection: 'row', gap: R, marginTop: R * 0.75 },
+    viewerReplyToggle: { marginTop: R * 0.5, paddingVertical: 6, alignSelf: 'flex-start' },
+    viewerReplyToggleText: { fontSize: 13, color: t.accent, fontWeight: '500' },
+  });
+}

package/src/widget/util.ts

@@ -0,0 +1,21 @@
+import type { WidgetSortValue } from '../client/types.js';
+
+export interface SortOption {
+  value: WidgetSortValue;
+  label: string;
+}
+
+// Matches `validated_sort/1` in `widget.ex` + `PPO.Reviews.Sort`.
+export const SORT_OPTIONS: SortOption[] = [
+  { value: 'most_relevant', label: 'Most relevant' },
+  { value: 'most_helpful', label: 'Most helpful' },
+  { value: 'newest', label: 'Newest' },
+  { value: 'highest', label: 'Highest rated' },
+  { value: 'lowest', label: 'Lowest rated' },
+];
+
+export function getInitials(name: string | null | undefined): string {
+  if (!name) return '?';
+  const parts = name.trim().split(/\s+/);
+  return ((parts[0]?.[0] || '') + (parts[1]?.[0] || '')).toUpperCase() || '?';
+}