tf-checkout-react-native 2.0.0-beta.16 → 2.0.0-beta.18

package/src/ui/RichText.tsx

@@ -0,0 +1,187 @@
+import React, { useMemo, useState } from 'react'
+import { Alert, Linking, StyleSheet, Text, View } from 'react-native'
+import RenderHTML, {
+  defaultSystemFonts,
+  HTMLContentModel,
+  HTMLElementModel,
+  IMGElement,
+  useIMGElementProps,
+  useSharedProps,
+  type CustomBlockRenderer,
+  type MixedStyleDeclaration,
+  type MixedStyleRecord,
+} from 'react-native-render-html'
+
+import { useTheme } from './CheckoutProvider'
+
+const ignoredDomTags = [
+  'script',
+  'style',
+  'template',
+  'noscript',
+  'iframe',
+  'object',
+  'embed',
+  'form',
+  'head',
+]
+const allowedStyles: NonNullable<
+  React.ComponentProps<typeof RenderHTML>['allowedStyles']
+> = ['fontWeight', 'fontStyle', 'textDecorationLine', 'textAlign', 'display']
+const ignoreDomNode: NonNullable<
+  React.ComponentProps<typeof RenderHTML>['ignoreDomNode']
+> = (node) => {
+  if (!('attribs' in node) || !node.attribs || typeof node.attribs !== 'object')
+    return false
+  return (
+    'hidden' in node.attribs ||
+    ('style' in node.attribs &&
+      typeof node.attribs.style === 'string' &&
+      /(?:^|;)\s*(?:display\s*:\s*none|visibility\s*:\s*(?:hidden|collapse))\s*(?:!important\s*)?(?:;|$)/i.test(
+        node.attribs.style
+      ))
+  )
+}
+// Default models omit tables. Block models retain every caption/cell without
+// a WebView or a second parser; complex spans remain readable, not pixel-identical.
+const customHTMLElementModels = Object.fromEntries(
+  ['table', 'caption', 'thead', 'tbody', 'tfoot', 'tr', 'td', 'th'].map((tagName) => [
+    tagName,
+    HTMLElementModel.fromCustomModel({ tagName, contentModel: HTMLContentModel.block }),
+  ])
+)
+
+export interface RichTextProps {
+  html: string
+  textStyle?: MixedStyleDeclaration
+  tagsStyles?: MixedStyleRecord
+  onLinkPress?: (href: string) => void
+  selectable?: boolean
+}
+
+const SafeImage: CustomBlockRenderer = (props) => {
+  const image = useIMGElementProps(props)
+  const { defaultTextProps } = useSharedProps()
+  if (!/^https?:\/\//i.test(image.source.uri ?? ''))
+    return image.alt ? (
+      <Text {...defaultTextProps} style={props.tnode.styles.nativeTextFlow}>
+        {image.alt}
+      </Text>
+    ) : null
+  return <IMGElement {...image} />
+}
+const renderers = { img: SafeImage }
+
+/** API HTML is parsed once, preserving escaped literal tags as visible text. */
+export const RichText = ({
+  html,
+  textStyle,
+  tagsStyles: tagOverrides,
+  onLinkPress,
+  selectable = false,
+}: RichTextProps) => {
+  const theme = useTheme()
+  const [width, setWidth] = useState(0)
+  const source = useMemo(() => ({ html }), [html])
+  const baseStyle = useMemo(
+    () => ({
+      color: theme.muted,
+      fontSize: theme.fontSize - 1,
+      lineHeight: theme.fontSize * 1.5,
+      fontFamily: theme.fontFamily,
+      ...textStyle,
+    }),
+    [theme.muted, theme.fontSize, theme.fontFamily, textStyle]
+  )
+  const systemFonts = useMemo(
+    () =>
+      [
+        ...new Set([...defaultSystemFonts, theme.fontFamily, textStyle?.fontFamily]),
+      ].filter((font): font is string => typeof font === 'string'),
+    [theme.fontFamily, textStyle?.fontFamily]
+  )
+  const tagsStyles = useMemo(() => {
+    const defaults: Record<string, MixedStyleDeclaration> = {
+      p: { marginTop: 0, marginBottom: 8 },
+      ul: { marginTop: 0, marginBottom: 8, paddingLeft: 22 },
+      ol: { marginTop: 0, marginBottom: 8, paddingLeft: 22 },
+      a: { color: theme.accent, textDecorationLine: 'underline' },
+      table: { marginBottom: 8 },
+      caption: { fontWeight: '600', marginBottom: 4 },
+      tr: { flexDirection: 'row', flexWrap: 'wrap' },
+      td: { flexGrow: 1, flexShrink: 1, flexBasis: 0, minWidth: 48, padding: 4 },
+      th: {
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: 0,
+        minWidth: 48,
+        padding: 4,
+        fontWeight: '600',
+      },
+    }
+    // Match the standard heading sizes to the body font with enough line height;
+    // inheriting the body's fixed height clips larger headings.
+    const headingBase =
+      typeof baseStyle.fontSize === 'number' ? baseStyle.fontSize : theme.fontSize - 1
+    for (const [heading, scale] of Object.entries({
+      h1: 2,
+      h2: 1.5,
+      h3: 1.17,
+      h4: 1,
+      h5: 0.83,
+      h6: 0.67,
+    })) {
+      const overrideSize = tagOverrides?.[heading]?.fontSize
+      const size = typeof overrideSize === 'number' ? overrideSize : headingBase * scale
+      defaults[heading] = { fontSize: size, lineHeight: size * 1.35 }
+    }
+    for (const [tag, style] of Object.entries(tagOverrides ?? {}))
+      defaults[tag] = { ...defaults[tag], ...style }
+    return defaults
+  }, [theme.accent, theme.fontSize, baseStyle.fontSize, tagOverrides])
+  const renderersProps = useMemo<
+    NonNullable<React.ComponentProps<typeof RenderHTML>['renderersProps']>
+  >(
+    () => ({
+      a: {
+        onPress: (event, href) => {
+          // Opening a nested terms link must never accept its parent checkbox.
+          event.stopPropagation?.()
+          if (!/^https?:\/\//i.test(href)) return
+          if (onLinkPress) onLinkPress(href)
+          else
+            void Linking.openURL(href).catch(() =>
+              Alert.alert('Couldn’t open link', 'Please try again.')
+            )
+        },
+      },
+    }),
+    [onLinkPress]
+  )
+  const defaultTextProps = useMemo(() => ({ selectable }), [selectable])
+  return (
+    <View
+      style={styles.container}
+      onLayout={(event) => setWidth(event.nativeEvent.layout.width)}
+    >
+      {width > 0 ? (
+        <RenderHTML
+          source={source}
+          contentWidth={width}
+          baseStyle={baseStyle}
+          systemFonts={systemFonts}
+          tagsStyles={tagsStyles}
+          allowedStyles={allowedStyles}
+          ignoredDomTags={ignoredDomTags}
+          ignoreDomNode={ignoreDomNode}
+          renderersProps={renderersProps}
+          customHTMLElementModels={customHTMLElementModels}
+          renderers={renderers}
+          defaultTextProps={defaultTextProps}
+        />
+      ) : null}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({ container: { alignSelf: 'stretch', minWidth: 0 } })

package/src/ui/WaitingListForm.tsx

@@ -0,0 +1,139 @@
+import React from 'react'
+import { Alert, Linking, StyleSheet, View } from 'react-native'
+import {
+  createTranslator,
+  hooks,
+  waitingListQuantityCap,
+  type EventWaitingList,
+  type WaitingListEntry,
+  type WaitingListPrefill,
+} from 'tf-checkout-shared'
+import { Field, Input } from './Field'
+import { Button, ErrorText, MutedText, SectionHeader } from './primitives'
+import { Select } from './Select'
+
+export const WaitingListForm = ({
+  eventId,
+  definition,
+  onJoin,
+  prefill,
+}: {
+  eventId: string
+  definition?: EventWaitingList
+  onJoin: (entry: WaitingListEntry) => Promise<void>
+  prefill?: WaitingListPrefill
+}) => {
+  const tr = createTranslator()
+  const flow = hooks.useWaitingListForm(eventId, definition, onJoin, prefill)
+  if (definition?.state === 'closed')
+    return <MutedText>{tr('tickets.waitingListClosed')}</MutedText>
+  if (definition?.state === 'unsupported' && definition.eventUrl)
+    return (
+      <Button
+        variant="ghost"
+        onPress={() =>
+          void Linking.openURL(definition.eventUrl).catch(() =>
+            Alert.alert('Couldn’t open link', 'Please try again.')
+          )
+        }
+      >
+        {tr('tickets.waitingListWebsite')}
+      </Button>
+    )
+  if (definition?.state !== 'open') return null
+  if (flow.done) return <MutedText>{tr('tickets.waitingListJoined')}</MutedText>
+  const cap = waitingListQuantityCap(definition, flow.draft.ticketTypeId)
+  return (
+    <View style={styles.form}>
+      <SectionHeader title={tr('tickets.joinWaitingList')} />
+      <Field label={tr('tickets.firstName')}>
+        <Input
+          accessibilityLabel={tr('tickets.firstName')}
+          autoComplete="given-name"
+          textContentType="givenName"
+          autoCapitalize="words"
+          value={flow.draft.firstName}
+          editable={!flow.busy}
+          onChangeText={(firstName) => flow.update({ firstName })}
+        />
+      </Field>
+      <Field label={tr('tickets.lastName')}>
+        <Input
+          accessibilityLabel={tr('tickets.lastName')}
+          autoComplete="family-name"
+          textContentType="familyName"
+          autoCapitalize="words"
+          value={flow.draft.lastName}
+          editable={!flow.busy}
+          onChangeText={(lastName) => flow.update({ lastName })}
+        />
+      </Field>
+      <Field label={tr('tickets.email')}>
+        <Input
+          accessibilityLabel={tr('tickets.email')}
+          autoComplete="email"
+          textContentType="emailAddress"
+          value={flow.draft.email}
+          keyboardType="email-address"
+          autoCapitalize="none"
+          editable={!flow.busy}
+          onChangeText={(email) => flow.update({ email })}
+        />
+      </Field>
+      {!definition.autoSelectTicketId && definition.ticketTypes.length > 0 ? (
+        <Field label={tr('tickets.waitingListTicket')}>
+          <Select
+            value={flow.draft.ticketTypeId}
+            disabled={flow.busy}
+            onChange={(ticketTypeId) => flow.update({ ticketTypeId, quantity: '' })}
+            options={[
+              ...(definition.allowAnyTicket
+                ? [{ value: '', label: tr('tickets.waitingListAny') }]
+                : []),
+              ...definition.ticketTypes.map((choice) => ({
+                value: choice.id,
+                label: choice.name,
+              })),
+            ]}
+          />
+        </Field>
+      ) : null}
+      {definition.showQuantity && definition.fixedQuantity === undefined ? (
+        <Field
+          label={tr('tickets.waitingListQuantity')}
+          error={
+            flow.quantityInvalid
+              ? tr(
+                  cap === 0
+                    ? 'tickets.waitingListNoQuantity'
+                    : 'tickets.waitingListInvalidQuantity',
+                  { max: cap }
+                )
+              : undefined
+          }
+        >
+          <Input
+            accessibilityLabel={tr('tickets.waitingListQuantity')}
+            keyboardType="number-pad"
+            value={flow.draft.quantity}
+            placeholder={tr('tickets.waitingListQuantityHint')}
+            editable={!flow.busy}
+            invalid={flow.quantityInvalid}
+            onChangeText={(quantity) => flow.update({ quantity })}
+          />
+        </Field>
+      ) : null}
+      <Button
+        variant="ghost"
+        loading={flow.busy}
+        disabled={!flow.canSubmit}
+        onPress={() => void flow.submit()}
+      >
+        {tr('tickets.joinWaitingList')}
+      </Button>
+      {flow.error ? <ErrorText>{flow.error}</ErrorText> : null}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({ form: { gap: 8 } })

package/src/ui/index.ts

@@ -18,3 +18,4 @@ export * from './Timer'
 export * from './TimerBanner'
 export * from './PaymentMethods'
 export * from './InstallmentPicker'
+export * from './RichText'