tf-checkout-react-native 2.0.0-beta.0 → 2.0.0-beta.6

package/src/sections/discussion/CommentImages.tsx

@@ -0,0 +1,366 @@
+import React, { useEffect, useState } from 'react'
+import {
+  ActivityIndicator,
+  Image,
+  Modal,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native'
+import { eventCommentImageDataUri, hooks, type EventComment } from 'tf-checkout-shared'
+import { useTheme } from '../../ui/CheckoutProvider'
+import { useAccountT } from '../../ui/useAccountT'
+
+const LoadedImage = ({
+  eventId,
+  comment,
+  index,
+  previewKey,
+  full = false,
+  locale,
+}: {
+  eventId: string
+  comment: EventComment
+  index: number
+  previewKey?: string
+  full?: boolean
+  locale?: string
+}) => {
+  const t = useAccountT(locale)
+  const image = hooks.useEventCommentImage(eventId, comment, previewKey, index)
+  const theme = useTheme()
+  if (image.isLoading)
+    return (
+      <View style={s.loading}>
+        <ActivityIndicator
+          accessibilityLabel={t('Loading image {{number}}', { number: index + 1 })}
+        />
+      </View>
+    )
+  if (!image.data)
+    return full ? (
+      <Pressable
+        style={s.loading}
+        accessibilityRole="button"
+        accessibilityLabel={t('Retry image {{number}}', { number: index + 1 })}
+        onPress={() => void image.refetch()}
+      >
+        <Text style={{ color: theme.text, fontFamily: theme.fontFamily }}>
+          {t('Image couldn’t load. Tap to retry.')}
+        </Text>
+      </Pressable>
+    ) : (
+      <Text style={{ color: theme.muted, fontFamily: theme.fontFamily }}>
+        {t('Image unavailable')}
+      </Text>
+    )
+  return (
+    <Image
+      source={{ uri: image.data }}
+      accessible={full}
+      accessibilityLabel={
+        full
+          ? t('Image {{number}} of {{total}}', {
+              number: index + 1,
+              total: comment.images.length,
+            })
+          : undefined
+      }
+      accessibilityLiveRegion={full ? 'polite' : undefined}
+      style={s.image}
+      resizeMode={full ? 'contain' : 'cover'}
+    />
+  )
+}
+
+/** Images are fetched through the common authenticated/preview-key transport. */
+export const CommentImages = ({
+  eventId,
+  comment,
+  previewKey,
+  onPreviewChange,
+  locale,
+  renderCloseIcon,
+}: {
+  eventId: string
+  comment: EventComment
+  previewKey?: string
+  onPreviewChange: (open: boolean) => void
+  locale?: string
+  renderCloseIcon?: (color: string) => React.ReactNode
+}) => {
+  const t = useAccountT(locale)
+  const theme = useTheme()
+  const white = [s.white, { fontFamily: theme.fontFamily }]
+  const [selected, setSelected] = useState<number | null>(null)
+  useEffect(() => {
+    if (selected === null) return
+    onPreviewChange(true)
+    return () => onPreviewChange(false)
+  }, [selected, onPreviewChange])
+  const images = comment.images
+  if (!images.length) return null
+  const position =
+    selected === null ? -1 : images.findIndex((image) => image.index === selected)
+  const label = (index: number) =>
+    images.length === 1
+      ? t('View attached image')
+      : t('View attached image {{number}} of {{total}}', {
+          number: index + 1,
+          total: images.length,
+        })
+  const move = (delta: number) => {
+    const target = images[position + delta]
+    if (target) setSelected(target.index)
+  }
+  return (
+    <>
+      <View style={[s.grid, images.length === 1 && s.single]}>
+        {images.slice(0, 3).map((image, i) => (
+          <Pressable
+            key={image.index}
+            style={s.tile}
+            accessibilityRole="button"
+            accessibilityLabel={label(i)}
+            onPress={() => setSelected(image.index)}
+          >
+            <LoadedImage
+              eventId={eventId}
+              comment={comment}
+              index={image.index}
+              previewKey={previewKey}
+              locale={locale}
+            />
+            {i === 2 && images.length > 3 && (
+              <View pointerEvents="none" style={s.more}>
+                <Text style={[s.moreText, { fontFamily: theme.fontFamily }]}>
+                  +{images.length - 3}
+                </Text>
+              </View>
+            )}
+          </Pressable>
+        ))}
+      </View>
+      {selected !== null && position !== -1 && (
+        <Modal
+          visible
+          transparent
+          animationType="fade"
+          onRequestClose={() => setSelected(null)}
+        >
+          <View style={s.preview}>
+            <View style={s.toolbar}>
+              <Pressable
+                accessibilityRole="button"
+                accessibilityLabel={t('Close image')}
+                style={s.closeButton}
+                onPress={() => setSelected(null)}
+              >
+                <View
+                  pointerEvents="none"
+                  accessible={false}
+                  importantForAccessibility="no-hide-descendants"
+                >
+                  {renderCloseIcon ? (
+                    renderCloseIcon('#9F9CB0')
+                  ) : (
+                    <Text style={[white, s.closeGlyph]}>×</Text>
+                  )}
+                </View>
+              </Pressable>
+            </View>
+            <View style={s.full}>
+              <LoadedImage
+                eventId={eventId}
+                comment={comment}
+                index={selected}
+                previewKey={previewKey}
+                locale={locale}
+                full
+              />
+            </View>
+            {images.length > 1 && (
+              <View style={s.navigation}>
+                <Pressable
+                  accessibilityRole="button"
+                  accessibilityLabel={t('Previous image')}
+                  style={s.navButton}
+                  accessibilityState={{ disabled: position === 0 }}
+                  disabled={position === 0}
+                  onPress={() => move(-1)}
+                >
+                  <Text style={[white, position === 0 && s.disabled]}>
+                    {t('Previous')}
+                  </Text>
+                </Pressable>
+                <View style={s.dots}>
+                  {images.map((image, i) => (
+                    <Pressable
+                      key={image.index}
+                      accessibilityRole="tab"
+                      accessibilityLabel={t('Image {{number}} of {{total}}', {
+                        number: i + 1,
+                        total: images.length,
+                      })}
+                      accessibilityState={{ selected: image.index === selected }}
+                      hitSlop={8}
+                      onPress={() => setSelected(image.index)}
+                    >
+                      <View
+                        style={[
+                          s.dot,
+                          {
+                            backgroundColor:
+                              image.index === selected ? theme.accent : '#777383',
+                          },
+                        ]}
+                      />
+                    </Pressable>
+                  ))}
+                </View>
+                <Pressable
+                  accessibilityRole="button"
+                  accessibilityLabel={t('Next image')}
+                  style={s.navButton}
+                  accessibilityState={{ disabled: position === images.length - 1 }}
+                  disabled={position === images.length - 1}
+                  onPress={() => move(1)}
+                >
+                  <Text style={[white, position === images.length - 1 && s.disabled]}>
+                    {t('Next')}
+                  </Text>
+                </Pressable>
+              </View>
+            )}
+          </View>
+        </Modal>
+      )}
+    </>
+  )
+}
+
+export const CommentImageDrafts = ({
+  images,
+  disabled,
+  onRemove,
+  locale,
+}: {
+  images: string[]
+  disabled: boolean
+  onRemove: (index: number) => void
+  locale?: string
+}) => {
+  const t = useAccountT(locale)
+  const theme = useTheme()
+  if (!images.length) return null
+  return (
+    <View style={s.drafts}>
+      <Text style={{ color: theme.muted, fontFamily: theme.fontFamily }}>
+        {t(
+          images.length === 1 ? '{{count}} image attached' : '{{count}} images attached',
+          { count: images.length }
+        )}
+      </Text>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={s.draftList}
+      >
+        {images.map((image, index) => (
+          <View key={index} style={s.draft}>
+            <Image
+              source={{ uri: eventCommentImageDataUri(image) ?? undefined }}
+              style={s.image}
+              resizeMode="cover"
+            />
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel={
+                images.length === 1
+                  ? t('Remove attached image')
+                  : t('Remove attached image {{number}}', { number: index + 1 })
+              }
+              disabled={disabled}
+              hitSlop={8}
+              onPress={() => onRemove(index)}
+              style={s.remove}
+            >
+              <Text style={[s.white, { fontFamily: theme.fontFamily }]}>×</Text>
+            </Pressable>
+          </View>
+        ))}
+      </ScrollView>
+    </View>
+  )
+}
+const s = StyleSheet.create({
+  grid: {
+    width: '100%',
+    flexDirection: 'row',
+    gap: 8,
+    marginVertical: 4,
+    aspectRatio: 3,
+  },
+  single: { aspectRatio: 1.5 },
+  tile: {
+    flex: 1,
+    borderRadius: 8,
+    overflow: 'hidden',
+    backgroundColor: 'rgba(235,235,238,0.05)',
+  },
+  image: { width: '100%', height: '100%' },
+  loading: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  more: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(11,10,21,0.8)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  moreText: { color: '#EBEBEE', fontSize: 16, fontWeight: '500' },
+  preview: {
+    flex: 1,
+    backgroundColor: 'rgba(11,10,21,0.96)',
+    paddingTop: 53,
+    paddingBottom: 40,
+    paddingHorizontal: 16,
+  },
+  toolbar: { flexDirection: 'row', justifyContent: 'flex-end' },
+  closeButton: {
+    width: 44,
+    height: 44,
+    marginRight: -10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeGlyph: { fontSize: 28, lineHeight: 28, color: '#9F9CB0', textAlign: 'center' },
+  full: { flex: 1, width: '100%' },
+  white: { color: '#EBEBEE', fontSize: 16 },
+  navButton: {
+    minHeight: 44,
+    minWidth: 60,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  disabled: { opacity: 0.35 },
+  navigation: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 12,
+  },
+  dots: { flexDirection: 'row', gap: 12 },
+  dot: { width: 7, height: 7, borderRadius: 4 },
+  drafts: { padding: 12, gap: 8 },
+  draftList: { gap: 8 },
+  draft: { width: 84, height: 84, borderRadius: 8, overflow: 'hidden' },
+  remove: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    backgroundColor: 'rgba(11,10,21,0.8)',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+  },
+})

package/src/sections/discussion/SwipeReply.tsx

@@ -0,0 +1,88 @@
+import React, { useMemo, useRef } from 'react'
+import { Animated, PanResponder, StyleSheet, Text, View } from 'react-native'
+import { useTheme } from '../../ui/CheckoutProvider'
+
+/** An alternate input for the common reply action; vertical scrolling stays native. */
+export const SwipeReply = ({
+  enabled,
+  onReply,
+  renderIcon,
+  hint,
+  children,
+}: {
+  enabled: boolean
+  onReply: () => void
+  renderIcon?: (color: string) => React.ReactNode
+  hint: string
+  children: React.ReactNode
+}) => {
+  const theme = useTheme()
+  const offset = useRef(new Animated.Value(0)).current
+  const gesture = useMemo(() => {
+    const reset = () =>
+      Animated.spring(offset, { toValue: 0, useNativeDriver: true }).start()
+    return PanResponder.create({
+      onMoveShouldSetPanResponder: (_, value) =>
+        enabled && value.dx < -12 && Math.abs(value.dx) > Math.abs(value.dy) * 1.5,
+      onPanResponderMove: (_, value) =>
+        offset.setValue(Math.max(-88, Math.min(0, value.dx))),
+      onPanResponderRelease: (_, value) => {
+        if (enabled && value.dx < -56) onReply()
+        reset()
+      },
+      onPanResponderTerminate: reset,
+      onPanResponderTerminationRequest: () => true,
+    })
+  }, [enabled, offset, onReply])
+  return (
+    <View style={s.container}>
+      {enabled && (
+        <Animated.View
+          pointerEvents="none"
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          style={[
+            s.indicator,
+            {
+              borderColor: theme.border,
+              backgroundColor: theme.surface,
+              opacity: offset.interpolate({
+                inputRange: [-56, -12, 0],
+                outputRange: [1, 0, 0],
+                extrapolate: 'clamp',
+              }),
+            },
+          ]}
+        >
+          {renderIcon ? (
+            renderIcon(theme.text)
+          ) : (
+            <Text style={{ color: theme.text }}>↪</Text>
+          )}
+        </Animated.View>
+      )}
+      <Animated.View
+        accessibilityHint={enabled ? hint : undefined}
+        {...gesture.panHandlers}
+        style={{ transform: [{ translateX: offset }] }}
+      >
+        {children}
+      </Animated.View>
+    </View>
+  )
+}
+const s = StyleSheet.create({
+  container: { width: '100%', position: 'relative', overflow: 'hidden' },
+  indicator: {
+    position: 'absolute',
+    right: 16,
+    top: '50%',
+    marginTop: -21,
+    width: 42,
+    height: 42,
+    borderRadius: 21,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

package/src/sections/index.ts

@@ -1,8 +1,34 @@
 /** The native checkout sections — the RN analogues of the web `sections/`. */
 export { Tickets } from './Tickets'
+export { SeatMap, type SeatMapProps } from './SeatMap'
 export { AddOns } from './AddOns'
+export { Bundles, type BundlesProps } from './Bundles'
 export { BillingInfo, type CheckoutPrivacyPolicy } from './BillingInfo'
 export { OrderSummary } from './OrderSummary'
 export { Payment } from './Payment'
+export { WaiverSigning, type WaiverSigningProps } from './WaiverSigning'
 export { IDVerification } from './IDVerification'
 export { Confirmation } from './Confirmation'
+export { Rewards, type RewardsProps } from './Rewards'
+export { TicketChange, type TicketChangeProps } from './TicketChange'
+export { RewardsLadder, type RewardsLadderProps } from './rewards/RewardsLadder'
+export { RewardsTree, type RewardsTreeProps } from './rewards/RewardsTree'
+export { Trips, type TripsProps } from './Trips'
+
+export { EventDiscussionView, type EventDiscussionViewProps } from './EventDiscussionView'
+
+export * from './Accommodation'
+
+export * from './TicketRefund'
+
+export * from './Passes'
+export * from './TicketGift'
+
+export { AccountRewardsSection } from './AccountRewards'
+export * from './PostReaction'
+export {
+  Streaming,
+  StreamingView,
+  type StreamingProps,
+  type StreamingProvider,
+} from './Streaming'

package/src/sections/rewards/RewardsLadder.tsx

@@ -0,0 +1,167 @@
+/**
+ * The prize ladder on native — cash-back tiers and prizes in one list.
+ *
+ * The wording comes from the shared `ladderRowCopy` as translation keys, and
+ * this package's idiom is copy in through props, so the caller passes a
+ * `translate`. `<Rewards/>` defaults it to the shared translator, which means a
+ * host that passes nothing still gets correct English.
+ */
+import React, { useState, type FC } from 'react'
+import { StyleSheet, View } from 'react-native'
+
+import {
+  awardDetails,
+  errorMessage,
+  prizeDetailsComplete,
+  type RewardsPrizeDetailField,
+  ladderRowCopy,
+  ladderRowStatus,
+  type RewardsLadderRow,
+  type Translate,
+} from 'tf-checkout-shared'
+
+import { BodyText, MutedText, Button, ErrorText } from '../../ui/primitives'
+import { useTheme } from '../../ui/CheckoutProvider'
+import { Field, Input } from '../../ui/Field'
+
+/** Award statuses are wire values; these are the sentences a buyer reads. */
+const AWARD_STATUS_KEYS: Record<string, string> = {
+  pending_details: 'rewards.awards.pendingDetails',
+  ready: 'rewards.awards.ready',
+  delivered: 'rewards.awards.delivered',
+  cancelled: 'rewards.awards.cancelled',
+}
+
+export interface RewardsLadderProps {
+  rows: RewardsLadderRow[]
+  translate: Translate
+  onSubmitDetails?: (awardId: string, details: Record<string, string>) => Promise<void>
+}
+
+const DeliveryDetails: FC<{
+  fields: RewardsPrizeDetailField[]
+  translate: Translate
+  onSubmit: (values: Record<string, string>) => Promise<void>
+}> = ({ fields, translate: t, onSubmit }) => {
+  const [values, setValues] = useState<Record<string, string>>({})
+  const [saving, setSaving] = useState(false)
+  const [failure, setFailure] = useState('')
+  return (
+    <View style={{ gap: 10 }}>
+      {fields.map((field) => (
+        <Field key={field.key} label={field.label}>
+          <Input
+            accessibilityLabel={field.label}
+            value={values[field.key] ?? ''}
+            editable={!saving}
+            onChangeText={(value) =>
+              setValues((previous) => ({ ...previous, [field.key]: value }))
+            }
+          />
+        </Field>
+      ))}
+      {failure && <ErrorText>{failure}</ErrorText>}
+      <Button
+        loading={saving}
+        disabled={!prizeDetailsComplete(fields, values)}
+        onPress={() => {
+          setSaving(true)
+          setFailure('')
+          void onSubmit(values)
+            .catch((error: unknown) => setFailure(errorMessage(error)))
+            .finally(() => setSaving(false))
+        }}
+      >
+        {t('rewards.awards.submit')}
+      </Button>
+    </View>
+  )
+}
+
+export const RewardsLadder: FC<RewardsLadderProps> = ({
+  rows,
+  translate,
+  onSubmitDetails,
+}) => {
+  const theme = useTheme()
+  if (!rows || rows.length === 0) return null
+
+  return (
+    <View style={styles.list}>
+      {rows.map((row, index) => {
+        const copy = ladderRowCopy(row)
+        const target = row.target_value
+        // A rank row has no target, so it has no bar to fill; nor has a row with
+        // nothing measured yet — a pack prize with no pack behind it, whose
+        // progress is null rather than zero.
+        const percent =
+          target && target > 0 && row.progress_value != null
+            ? Math.min(100, Math.round((row.progress_value / target) * 100))
+            : null
+        const award = row.award
+        const statusKey = award ? AWARD_STATUS_KEYS[award.status] : undefined
+        const details = awardDetails(award)
+        const fields = details.fields.length
+          ? details.fields
+          : [
+              {
+                key: 'details',
+                label: translate('rewards.awards.detailsFallbackLabel'),
+                required: true,
+              },
+            ]
+
+        return (
+          <View
+            key={
+              row.prize_id != null
+                ? String(row.prize_id)
+                : `${row.kind}-${row.metric ?? 'tier'}-${index}`
+            }
+            style={[styles.row, { borderColor: theme.border }]}
+          >
+            <BodyText style={styles.rowStatus}>
+              {ladderRowStatus(copy, translate)}
+            </BodyText>
+
+            {percent != null ? (
+              <View style={[styles.bar, { backgroundColor: theme.border }]}>
+                <View
+                  style={[
+                    styles.barFill,
+                    { backgroundColor: theme.accent, width: `${percent}%` },
+                  ]}
+                />
+              </View>
+            ) : null}
+
+            {copy.timing.map((line) => (
+              <MutedText key={line.key}>{translate(line.key, line.params)}</MutedText>
+            ))}
+
+            {award && statusKey ? (
+              <MutedText>
+                {translate(statusKey, { at: String(award.delivered_at ?? '') })}
+              </MutedText>
+            ) : null}
+            {award && details.needed && onSubmitDetails ? (
+              <DeliveryDetails
+                fields={fields}
+                translate={translate}
+                onSubmit={(values) => onSubmitDetails(String(award.id), values)}
+              />
+            ) : null}
+          </View>
+        )
+      })}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  list: { gap: 10 },
+  row: { borderWidth: StyleSheet.hairlineWidth, borderRadius: 10, padding: 12, gap: 4 },
+  rowStatus: { fontWeight: '600' },
+  bar: { height: 6, borderRadius: 999, overflow: 'hidden', marginVertical: 4 },
+  barFill: { height: '100%' },
+})