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

package/src/sections/PostReaction.tsx

@@ -0,0 +1,122 @@
+import React, { type ReactNode } from 'react'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+import { hooks, type WordPostReactionFlow } from 'tf-checkout-shared'
+import { useAccountT } from '../ui/useAccountT'
+
+export interface PostReactionControlsProps {
+  flow: WordPostReactionFlow
+  onSignIn?: () => void
+  renderIcon?: (choice: 'up' | 'down') => ReactNode
+  translate?: (english: string) => string
+  showFeedback?: boolean
+}
+
+/** Native hosts may supply their own icon assets without introducing a native dependency. */
+export const PostReactionControls = ({
+  flow,
+  onSignIn,
+  renderIcon,
+  translate,
+  showFeedback = true,
+}: PostReactionControlsProps) => {
+  const accountT = useAccountT()
+  const t = translate ?? accountT
+  const unavailable = flow.signedIn && !flow.query.data
+  return (
+    <View style={styles.root}>
+      <View style={styles.buttons} accessibilityLabel={t('Article reaction')}>
+        {(['up', 'down'] as const).map((choice) => (
+          <Pressable
+            key={choice}
+            accessibilityRole="button"
+            accessibilityLabel={t(choice === 'up' ? 'Like article' : 'Dislike article')}
+            accessibilityState={{
+              selected: flow.reaction === choice,
+              disabled: flow.busy || unavailable,
+            }}
+            disabled={flow.busy || unavailable}
+            style={[
+              styles.button,
+              flow.reaction === choice && styles.selected,
+              (flow.busy || unavailable) && styles.disabled,
+            ]}
+            onPress={() =>
+              flow.signedIn ? void flow.toggleReaction(choice) : onSignIn?.()
+            }
+          >
+            {renderIcon ? (
+              renderIcon(choice)
+            ) : (
+              <Text style={styles.icon}>{choice === 'up' ? '👍' : '👎'}</Text>
+            )}
+          </Pressable>
+        ))}
+      </View>
+      {showFeedback && <PostReactionFeedback flow={flow} translate={translate} />}
+    </View>
+  )
+}
+
+export const PostReactionFeedback = ({
+  flow,
+  translate,
+}: Pick<PostReactionControlsProps, 'flow' | 'translate'>) => {
+  const accountT = useAccountT()
+  const t = translate ?? accountT
+  return (
+    <>
+      {flow.busy && (
+        <Text style={styles.message} accessibilityLiveRegion="polite">
+          {t('Saving reaction…')}
+        </Text>
+      )}
+      {(flow.error || flow.query.error) && (
+        <View style={styles.error}>
+          <Text style={styles.message} accessibilityRole="alert">
+            {t(
+              flow.error ||
+                flow.query.error?.message ||
+                'Your reaction could not be saved. Please try again.'
+            )}
+          </Text>
+          <Pressable
+            accessibilityRole="button"
+            disabled={flow.busy}
+            onPress={() => void flow.retry()}
+          >
+            <Text style={styles.retry}>{t('Try again')}</Text>
+          </Pressable>
+        </View>
+      )}
+    </>
+  )
+}
+
+export const PostReaction = ({
+  postId,
+  ...props
+}: Omit<PostReactionControlsProps, 'flow'> & { postId: string | number }) => {
+  const flow = hooks.useWordPostReaction(postId)
+  return <PostReactionControls {...props} flow={flow} />
+}
+
+const styles = StyleSheet.create({
+  root: { gap: 8 },
+  buttons: { flexDirection: 'row', gap: 8 },
+  button: {
+    width: 42,
+    height: 42,
+    borderRadius: 999,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(11,10,21,.6)',
+    borderWidth: 1,
+    borderColor: 'rgba(196,181,255,.12)',
+  },
+  selected: { backgroundColor: '#6040B8', borderColor: '#C4B5FF' },
+  disabled: { opacity: 0.5 },
+  icon: { fontSize: 18 },
+  message: { color: '#BBBFF4', fontSize: 13 },
+  error: { gap: 6, maxWidth: 260 },
+  retry: { color: '#C4B5FF', textDecorationLine: 'underline' },
+})

package/src/sections/Rewards.tsx

@@ -0,0 +1,320 @@
+/**
+ * `<Rewards/>` — the native post-purchase rewards block: where the buyer
+ * stands, who they have brought in, what they can still win, their pack, and
+ * the card they share. Render it as `children` of `<Confirmation/>`.
+ *
+ * Native adaptations vs web:
+ *   - Copy comes in as props, this package's idiom. `translate` defaults to the
+ *     shared translator, so a host that passes nothing still reads correctly.
+ *   - The per-channel share row collapses into one `Share.share()`: the OS
+ *     sheet already lists every installed app, which is exactly what the web
+ *     `share_sheet_file` channel is reaching for through the browser.
+ *   - No SVG. The tree is positioned views (see `rewards/RewardsTree`), so this
+ *     package still adds no native peer dependency.
+ */
+import React, { useEffect, useState, type FC } from 'react'
+import { Alert, Image, Share, StyleSheet, View } from 'react-native'
+
+// `@react-native-clipboard/clipboard` is a dependency of this package.
+import Clipboard from '@react-native-clipboard/clipboard'
+
+import {
+  buildShareText,
+  packsAvailable,
+  createTranslator,
+  planShareChannels,
+  shareCardView,
+  hooks,
+  type LocaleCode,
+  type Messages,
+  type RewardsPayload,
+  type Translate,
+} from 'tf-checkout-shared'
+
+import {
+  BodyText,
+  Button,
+  Card,
+  ErrorText,
+  Loader,
+  MutedText,
+  SectionHeader,
+} from '../ui/primitives'
+import { Input } from '../ui/Field'
+import { RewardsLadder } from './rewards/RewardsLadder'
+import { RewardsTree } from './rewards/RewardsTree'
+
+export interface RewardsProps {
+  /** The order to load rewards for. Not needed when `data` is passed in. */
+  orderHash?: string
+  /** An already-loaded payload, if the host fetched it itself. */
+  data?: RewardsPayload | null
+  /** Locale for the built-in copy. Ignored when `translate` is passed. */
+  locale?: LocaleCode
+  /** Per-key copy overrides, merged over the locale. */
+  messages?: Partial<Messages>
+  /** Bring your own translator — the host's, if it already has one. */
+  translate?: Translate
+}
+
+type Flow = ReturnType<typeof hooks.useReceiptRewards>
+export const Rewards: FC<RewardsProps> = (props) => {
+  const flow = hooks.useReceiptRewards(props)
+  return <RewardsView key={flow.scopeKey} {...props} flow={flow} />
+}
+const RewardsView: FC<RewardsProps & { flow: Flow }> = ({
+  locale,
+  messages,
+  translate,
+  flow,
+}) => {
+  const t = translate ?? createTranslator({ locale, messages })
+  const { rewards, failure, busy, hash } = flow
+  const [packName, setPackName] = useState('')
+  const [packCode, setPackCode] = useState('')
+  const [copied, setCopied] = useState(false)
+  useEffect(() => {
+    setCopied(false)
+  }, [rewards?.share_link])
+  if (!rewards)
+    return flow.loading || failure ? (
+      <Card>
+        {flow.loading && <Loader />}
+        {failure && <ErrorText>{failure}</ErrorText>}
+        {failure && (
+          <Button onPress={() => void flow.reload()}>{t('rewards.retry')}</Button>
+        )}
+      </Card>
+    ) : null
+  if (rewards.referrals_enabled === false) return null
+
+  const impact = rewards.referral_impact
+  const card = shareCardView(rewards.share_card)
+  const pack = rewards.pack
+
+  // Every installed app is on the sheet, so the file share is what native can
+  // always do; the rest of the plan only tells us the brand's suffix to use.
+  const plan = planShareChannels(rewards.channels ?? [], {
+    canShareFiles: true,
+    isMobile: true,
+  })
+
+  const share = () => {
+    flow.assertCurrent()
+    const text = buildShareText(plan.primary, {
+      shareLink: rewards.share_link,
+      shareMessage: rewards.share_message,
+    })
+    // `url` is what iOS attaches; Android reads `message`, so both carry the
+    // link and the image only rides along where the OS supports it.
+    Share.share({
+      message: text,
+      url: card.imageUrl ?? rewards.share_link,
+    }).catch(() => undefined)
+  }
+
+  const copy = () => {
+    flow.assertCurrent()
+    if (!rewards.share_link) return
+    Clipboard.setString(rewards.share_link)
+    setCopied(true)
+    setTimeout(() => {
+      try {
+        flow.assertCurrent()
+        setCopied(false)
+      } catch {
+        /* Retired receipt. */
+      }
+    }, 1500)
+  }
+
+  return (
+    <Card>
+      <SectionHeader title={t('rewards.title')} />
+
+      {rewards.boosts_active?.map((boost) => (
+        <BodyText key={`${boost.name}-${boost.ends_at}`} style={styles.boost}>
+          {t('rewards.boost.active', {
+            name: boost.name,
+            multiplier: boost.multiplier,
+            ends: boost.ends_at_local || boost.ends_at,
+          })}
+        </BodyText>
+      ))}
+
+      {impact ? (
+        <View style={styles.block}>
+          <BodyText style={styles.standing}>
+            {impact.rank
+              ? t('rewards.impact.rank', {
+                  rank: impact.rank,
+                  total: impact.ranked_total,
+                })
+              : t('rewards.impact.unranked')}
+          </BodyText>
+          <MutedText>
+            {t('rewards.impact.direct', {
+              tickets: impact.direct_tickets,
+              buyers: impact.direct_buyers,
+            })}
+          </MutedText>
+          {impact.network_tickets > impact.direct_tickets ? (
+            <MutedText>
+              {t('rewards.impact.network', { tickets: impact.network_tickets })}
+            </MutedText>
+          ) : null}
+          {impact.tree?.nodes?.length ? (
+            <RewardsTree tree={impact.tree} />
+          ) : (
+            <MutedText>{t('rewards.impact.empty')}</MutedText>
+          )}
+          {impact.tree?.truncated ? (
+            <MutedText>{t('rewards.impact.truncated')}</MutedText>
+          ) : null}
+        </View>
+      ) : null}
+
+      {rewards.ambassador ? (
+        <View style={styles.block}>
+          <BodyText style={styles.standing}>
+            {t('rewards.ambassador.title', { brand: rewards.ambassador.brand_name })}
+          </BodyText>
+          {rewards.ambassador.rank != null ? (
+            <MutedText>
+              {t('rewards.ambassador.standing', {
+                rank: rewards.ambassador.rank,
+                total: rewards.ambassador.ranked_total,
+              })}
+            </MutedText>
+          ) : null}
+          {rewards.ambassador.tier ? (
+            <MutedText>
+              {t(`rewards.ambassador.tier.${rewards.ambassador.tier}`)}
+            </MutedText>
+          ) : null}
+          <MutedText>
+            {t('rewards.ambassador.lifetime', {
+              tickets: rewards.ambassador.lifetime_tickets,
+            })}
+          </MutedText>
+        </View>
+      ) : null}
+
+      {rewards.ladder?.length ? (
+        <View style={styles.block}>
+          <BodyText style={styles.standing}>{t('rewards.ladder.title')}</BodyText>
+          <RewardsLadder
+            rows={rewards.ladder}
+            translate={t}
+            onSubmitDetails={hash ? flow.submitDetails : undefined}
+          />
+        </View>
+      ) : null}
+
+      {hash && packsAvailable(rewards) ? (
+        <View style={styles.block}>
+          <BodyText style={styles.standing}>{t('rewards.pack.title')}</BodyText>
+          {pack ? (
+            <>
+              <BodyText>{pack.name}</BodyText>
+              <MutedText>
+                {t('rewards.pack.total', { tickets: pack.total_tickets })}
+              </MutedText>
+              <MutedText>{t('rewards.pack.code', { code: pack.code })}</MutedText>
+              <Button
+                variant="ghost"
+                loading={busy === 'leave'}
+                onPress={() => {
+                  flow.assertCurrent()
+                  Alert.alert(
+                    t('rewards.pack.leave'),
+                    t('rewards.pack.leaveConfirm', { name: pack.name }),
+                    [
+                      { text: t('rewards.pack.cancelLeave'), style: 'cancel' },
+                      {
+                        text: t('rewards.pack.leave'),
+                        style: 'destructive',
+                        onPress: () => {
+                          void flow.leavePack().catch(() => undefined)
+                        },
+                      },
+                    ]
+                  )
+                }}
+              >
+                {t('rewards.pack.leave')}
+              </Button>
+            </>
+          ) : (
+            <>
+              <MutedText>{t('rewards.pack.none')}</MutedText>
+              <Input
+                value={packName}
+                onChangeText={setPackName}
+                placeholder={t('rewards.pack.namePlaceholder')}
+              />
+              <Button
+                loading={busy === 'create'}
+                disabled={!packName.trim()}
+                onPress={() =>
+                  void flow.createPack(packName.trim()).catch(() => undefined)
+                }
+              >
+                {t('rewards.pack.create')}
+              </Button>
+              <Input
+                value={packCode}
+                onChangeText={setPackCode}
+                placeholder={t('rewards.pack.codePlaceholder')}
+                autoCapitalize="characters"
+              />
+              <Button
+                variant="ghost"
+                loading={busy === 'join'}
+                disabled={!packCode.trim()}
+                onPress={() => void flow.joinPack(packCode.trim()).catch(() => undefined)}
+              >
+                {t('rewards.pack.join')}
+              </Button>
+            </>
+          )}
+        </View>
+      ) : null}
+
+      {card.provisional ? (
+        <MutedText>{t('rewards.shareCard.provisional')}</MutedText>
+      ) : null}
+      {card.imageUrl ? (
+        <Image
+          source={{ uri: card.imageUrl }}
+          accessibilityLabel={t('rewards.shareCard.alt')}
+          style={{ width: '100%', aspectRatio: 1.91 }}
+          resizeMode="contain"
+        />
+      ) : null}
+
+      {rewards.share_link ? (
+        <View style={styles.block}>
+          <BodyText style={styles.standing}>{t('rewards.share.title')}</BodyText>
+          <Input
+            value={rewards.share_link}
+            onChangeText={() => undefined}
+            editable={false}
+          />
+          <Button variant="ghost" onPress={copy}>
+            {copied ? t('rewards.share.copied') : t('rewards.share.copy')}
+          </Button>
+          <Button onPress={share}>{t('rewards.channel.shareSheet')}</Button>
+        </View>
+      ) : null}
+
+      {failure ? <ErrorText>{failure}</ErrorText> : null}
+    </Card>
+  )
+}
+
+const styles = StyleSheet.create({
+  block: { gap: 6 },
+  standing: { fontWeight: '700' },
+  boost: { fontWeight: '600' },
+})

package/src/sections/SeatMap.tsx

@@ -0,0 +1,225 @@
+import { SeatsIoMap } from './SeatsIoMap'
+import React, { useEffect, useMemo, useRef, useState, type FC } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { WebView } from 'react-native-webview'
+import {
+  getTierRelationsArray,
+  hooks,
+  isGuestCapable,
+  ticketTypesForTier,
+} from 'tf-checkout-shared'
+import { SEAT_MAP_CSS, SEAT_MAP_SCRIPT } from '../generated/seatMapWidget'
+import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
+import { FrozenFields } from '../ui/Frozen'
+import { Field } from '../ui/Field'
+import { Select } from '../ui/Select'
+import {
+  Button,
+  Card,
+  ErrorText,
+  Loader,
+  MutedText,
+  SectionHeader,
+} from '../ui/primitives'
+
+const safeJson = (value: unknown) =>
+  JSON.stringify(value)
+    .replace(/</g, '\\u003c')
+    .replace(/\u2028/g, '\\u2028')
+    .replace(/\u2029/g, '\\u2029')
+
+export interface SeatMapProps {
+  eventId: string
+  onContinue?: () => void
+}
+
+/** The hosted chart renderer draws the map; shared core owns every reservation. */
+export const SeatMap: FC<SeatMapProps> = ({ eventId, onContinue }) => {
+  const checkout = useCheckoutContext()
+  const theme = useTheme()
+  const flow = hooks.useSeatSelection(eventId, checkout, onContinue)
+  const bundleStarting = hooks.useBundleStarting(checkout.store)
+  const webview = useRef<WebView>(null)
+  const [rendererError, setRendererError] = useState(false)
+  const [size, setSize] = useState(320)
+  const properties =
+    flow.chart.state === 'ready'
+      ? {
+          seatData: flow.chart.data.seatData,
+          statuses: flow.statuses,
+          isSelectionOn: false,
+          disabled: flow.reserving || checkout.orderFixed,
+          loading: flow.reserving,
+          tierPrices: flow.chart.data.tierPrices,
+          ticketTypeTireRelationsArray: getTierRelationsArray(
+            flow.chart.data.ticketTypeTierRelations
+          ),
+          isBlockMap: flow.chart.data.seatMapType === 'block',
+          isTableMap: flow.chart.data.seatMapType === 'table',
+          predefinedSeats: flow.chart.data.predefinedSeats,
+        }
+      : null
+  const chart = flow.chart.state === 'ready' ? flow.chart.data : null
+  const html = useMemo(
+    () =>
+      chart
+        ? `<!doctype html><html><head><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><style>html,body,#seat-map{margin:0;width:100%;height:100%;overflow:hidden}body{background:#fff}${SEAT_MAP_CSS}</style></head><body><div id="seat-map"></div><script>${SEAT_MAP_SCRIPT.replace(/<\/script/gi, '<\\/script')}</script></body></html>`
+        : '',
+    [chart]
+  )
+  const update = () => {
+    if (properties)
+      webview.current?.injectJavaScript(
+        `window.__tfSeatMapUpdate&&window.__tfSeatMapUpdate(${safeJson(properties)});true;`
+      )
+  }
+  useEffect(update, [properties && safeJson(properties)])
+  if (flow.chart.state === 'provider') return <SeatsIoMap eventId={eventId} initial={flow.chart.data} onContinue={onContinue} />
+  return (
+    <FrozenFields frozen={checkout.orderFixed}>
+      <Card>
+        <SectionHeader title="Select your seats" />
+        {flow.secondsLeft != null && (
+          <MutedText>
+            Seats held for {Math.floor(flow.secondsLeft / 60)}:
+            {String(flow.secondsLeft % 60).padStart(2, '0')}
+          </MutedText>
+        )}
+        {flow.chart.state === 'loading' ? (
+          <Loader />
+        ) : flow.chart.state === 'empty' ? (
+          <MutedText>This event has no seating chart.</MutedText>
+        ) : flow.chart.state === 'error' || rendererError ? (
+          <View>
+            <ErrorText>{flow.error || 'The seating chart could not load.'}</ErrorText>
+            <Button
+              onPress={() => {
+                setRendererError(false)
+                flow.retry()
+              }}
+            >
+              Try again
+            </Button>
+          </View>
+        ) : (
+          <View
+            onLayout={(event) => setSize(event.nativeEvent.layout.width)}
+            style={{ height: size }}
+          >
+            <WebView
+              ref={webview}
+              source={{ html }}
+              style={styles.map}
+              scrollEnabled={false}
+              incognito
+              javaScriptEnabled
+              originWhitelist={['about:*']}
+              onShouldStartLoadWithRequest={({ url }) => url === 'about:blank'}
+              onLoadEnd={update}
+              onError={() => setRendererError(true)}
+              onMessage={({ nativeEvent }) => {
+                try {
+                  const data = JSON.parse(nativeEvent.data)
+                  if (
+                    data.type === 'seatClick' &&
+                    data.seat &&
+                    ['seatId', 'tierId'].every(
+                      (key) =>
+                        typeof data.seat[key] === 'string' ||
+                        typeof data.seat[key] === 'number'
+                    ) &&
+                    typeof data.seat.status === 'string'
+                  )
+                    flow.onSeatClick({
+                      seat: {
+                        seatId: String(data.seat.seatId),
+                        tierId: String(data.seat.tierId),
+                        status: data.seat.status,
+                      },
+                    })
+                } catch {
+                  /* A malformed chart message changes no reservation. */
+                }
+              }}
+            />
+          </View>
+        )}
+        {flow.reserved.map((seat) => {
+          const types = ticketTypesForTier(
+            chart?.ticketTypeTierRelations ?? {},
+            seat.tierId
+          )
+          const relation = flow.relationFor(seat.seatId)
+          const min = Number(relation?.ticket_type_min_number_of_guests) || 1
+          const max = Number(relation?.ticket_type_max_number_of_guests) || min
+          return (
+            <View key={seat.seatId} style={styles.seat}>
+              <Text style={{ color: theme.text, fontFamily: theme.fontFamily }}>
+                Seat {seat.seatId}
+              </Text>
+              <Select
+                value={flow.selectedTypes[seat.seatId]}
+                placeholder="Choose ticket type"
+                disabled={flow.reserving}
+                options={types.map((type) => ({
+                  value: type.ticket_type_id,
+                  label: `${type.ticket_type_name} · ${checkout.breakdown?.currencySymbol ?? ''}${type.ticket_type_price}`,
+                }))}
+                onChange={(value) =>
+                  flow.setSelectedTypes((previous) => ({
+                    ...previous,
+                    [seat.seatId]: value,
+                  }))
+                }
+              />
+              {isGuestCapable(relation) && (
+                <Field label="Guests">
+                  <Select
+                    value={flow.guestCounts[seat.seatId] ?? min}
+                    options={Array.from(
+                      { length: Math.max(0, max - min + 1) },
+                      (_, index) => ({ value: min + index, label: String(min + index) })
+                    )}
+                    onChange={(value) =>
+                      flow.setGuestCounts((previous) => ({
+                        ...previous,
+                        [seat.seatId]: value,
+                      }))
+                    }
+                  />
+                </Field>
+              )}
+              <Button
+                variant="ghost"
+                disabled={flow.reserving}
+                onPress={() => flow.onSeatClick({ seat: { ...seat, status: 'OR' } })}
+              >
+                Remove seat
+              </Button>
+            </View>
+          )
+        })}
+        {flow.error && flow.chart.state !== 'error' && (
+          <ErrorText>{flow.error}</ErrorText>
+        )}
+        <Button
+          onPress={flow.getTickets}
+          loading={flow.adding}
+          disabled={
+            !flow.allChosen ||
+            flow.reserving ||
+            checkout.isBusy ||
+            checkout.orderFixed ||
+            bundleStarting
+          }
+        >
+          Get tickets
+        </Button>
+      </Card>
+    </FrozenFields>
+  )
+}
+const styles = StyleSheet.create({
+  map: { flex: 1, backgroundColor: '#FFF' },
+  seat: { gap: 12, paddingVertical: 12 },
+})