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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tf-checkout-react-native",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.8",
   "description": "TheTicketFairy ReactNative Checkout library",
   "homepage": "https://github.com/theticketfairy/tf-shared-libraries#readme",
   "author": "The Ticket Fairy",
@@ -37,7 +37,7 @@
     "!**/.*"
   ],
   "scripts": {
-    "test": "jest --passWithNoTests",
+    "test": "node scripts/verify-discussion-support.cjs && jest --passWithNoTests",
     "typecheck": "tsc -p tsconfig.build.json",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "lint:fix": "eslint \"**/*.{js,ts,tsx}\" --fix",

package/scripts/verify-discussion-support.cjs

@@ -0,0 +1,131 @@
+/* Executes the real native support Pressable; no native OS/mail account required. */
+/* eslint-disable @typescript-eslint/no-require-imports -- Node CommonJS verifier, matching the package's script entry. */
+const assert = require('node:assert/strict')
+const fs = require('node:fs')
+const path = require('node:path')
+const vm = require('node:vm')
+const ts = require('typescript')
+const React = require('react')
+const opened = []
+let rejectOpen = false
+const source = fs.readFileSync(
+  path.join(__dirname, '../src/sections/EventDiscussionView.tsx'),
+  'utf8'
+)
+const compiled = ts.transpileModule(source, {
+  compilerOptions: {
+    module: ts.ModuleKind.CommonJS,
+    target: ts.ScriptTarget.ES2022,
+    jsx: ts.JsxEmit.React,
+    esModuleInterop: true,
+  },
+}).outputText
+const moduleExports = {}
+vm.runInNewContext(compiled, {
+  exports: moduleExports,
+  require: (name) => {
+    if (name === 'react')
+      return {
+        ...React,
+        useRef: (value) => ({ current: value }),
+        useState: (value) => [value, () => {}],
+      }
+    if (name === 'react-native')
+      return {
+        ...Object.fromEntries(
+          [
+            'ActivityIndicator',
+            'FlatList',
+            'Image',
+            'KeyboardAvoidingView',
+            'Modal',
+            'Pressable',
+            'Text',
+            'TextInput',
+            'View',
+          ].map((name) => [name, name])
+        ),
+        Platform: { OS: 'ios' },
+        StyleSheet: { create: (styles) => styles },
+        Linking: {
+          openURL: (url) => {
+            opened.push(url)
+            return rejectOpen
+              ? Promise.reject(Error('No mail client'))
+              : Promise.resolve()
+          },
+        },
+      }
+    if (name === 'tf-checkout-shared') return { EVENT_COMMENT_IMAGE_MAX_COUNT: 5 }
+    if (name === '../ui/CheckoutProvider') return { useTheme: () => ({}) }
+    if (name === '../ui/useAccountT') return { useAccountT: () => (value) => value }
+    if (name === './discussion/CommentImages')
+      return { CommentImages: 'CommentImages', CommentImageDrafts: 'CommentImageDrafts' }
+    if (name === './discussion/SwipeReply') return { SwipeReply: 'SwipeReply' }
+    throw Error('Unexpected dependency: ' + name)
+  },
+})
+const links = (node) =>
+  !node || typeof node !== 'object'
+    ? []
+    : [
+        ...(node.type === 'Pressable' && node.props.accessibilityRole === 'link'
+          ? [node]
+          : []),
+        ...React.Children.toArray(node.props?.children).flatMap(links),
+      ]
+const render = (url) => {
+  const element = moduleExports.EventDiscussionView({
+    eventId: '42',
+    discussion: {
+      scopeKey: 'synthetic-actor-7',
+      comments: [],
+      blockedAuthors: [],
+      imagesBase64: [],
+      body: '',
+      canPost: false,
+      supportUrl: url,
+    },
+  })
+  const tree = element.type(element.props)
+  const support = links(tree)
+  assert.equal(support.length, 1)
+  return support[0]
+}
+;(async () => {
+  // This exact URI comes from EventDiscussionService::page, including its subject.
+  const canonical = 'mailto:support@theticketfairy.com?subject=Event%20comment%20report'
+  for (const url of [canonical, 'https://www.ticketfairy.com/support']) {
+    opened.length = 0
+    const support = render(url)
+    assert.deepEqual(opened, [], 'rendering must never open or send anything')
+    support.props.onPress()
+    await new Promise((resolve) => setImmediate(resolve))
+    assert.deepEqual(opened, [url], 'the user press must reach the native Linking port')
+  }
+  for (const url of [
+    'javascript:alert(1)',
+    'file:///private',
+    'http://example.invalid',
+    'tel:123',
+  ]) {
+    opened.length = 0
+    render(url).props.onPress()
+    assert.deepEqual(opened, [], 'unsupported schemes must not reach the OS')
+  }
+  rejectOpen = true
+  opened.length = 0
+  render(canonical).props.onPress()
+  await new Promise((resolve) => setImmediate(resolve))
+  assert.deepEqual(
+    opened,
+    [canonical],
+    'an unavailable mail client must be handled quietly'
+  )
+  process.stdout.write(
+    'Native discussion support PASS: user press, canonical mailto, HTTPS, unsafe schemes and unavailable client.\n'
+  )
+})().catch((error) => {
+  console.error(error)
+  process.exitCode = 1
+})

package/src/sections/AccountDeletion.tsx

@@ -0,0 +1,329 @@
+import React, { useMemo } from 'react'
+import {
+  ActivityIndicator,
+  Alert,
+  Linking,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import { hooks, type AccountDeletionFlow } from 'tf-checkout-shared'
+import { useTheme } from '../ui/CheckoutProvider'
+import { resolveTheme, type CheckoutTheme } from '../ui/theme'
+import { useAccountT } from '../ui/useAccountT'
+
+export interface AccountDeletionProps {
+  showHeader?: boolean
+  showExplanation?: boolean
+  onSignIn?: () => void
+  onDone?: () => void
+  onOpenTeam?: (url: string) => void | Promise<void>
+  locale?: string
+  translate?: (english: string, values?: Record<string, string | number>) => string
+  theme?: CheckoutTheme
+  style?: StyleProp<ViewStyle>
+}
+
+export const AccountDeletion = (props: AccountDeletionProps) => {
+  const deletion = hooks.useAccountDeletion()
+  return <AccountDeletionView {...props} deletion={deletion} />
+}
+
+/** Native presentation only: the common flow owns proof, retries and deletion. */
+export const AccountDeletionView = ({
+  deletion: flow,
+  showHeader = true,
+  showExplanation = true,
+  onSignIn,
+  onDone,
+  onOpenTeam,
+  locale,
+  translate,
+  theme: override,
+  style,
+}: AccountDeletionProps & { deletion: AccountDeletionFlow }) => {
+  const defaultT = useAccountT(locale)
+  const t = translate ?? defaultT
+  const inherited = useTheme()
+  const theme = useMemo(
+    () => (override ? resolveTheme({ ...inherited, ...override }) : inherited),
+    [inherited, override]
+  )
+  const assertOwner = hooks.useSessionAction()
+  const text = { color: theme.text, fontFamily: theme.fontFamily }
+  const muted = { color: theme.muted, fontFamily: theme.fontFamily }
+  const action = (
+    label: string,
+    execute: () => void,
+    danger = false,
+    disabled = flow.busy
+  ) => (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ disabled, busy: flow.busy }}
+      disabled={disabled}
+      onPress={() => {
+        try {
+          assertOwner()
+          execute()
+        } catch {
+          /* A retained control belongs to its original account. */
+        }
+      }}
+      style={[
+        s.button,
+        { borderColor: danger ? theme.error : theme.accent },
+        disabled && s.disabled,
+      ]}
+    >
+      <Text style={[text, { color: danger ? theme.error : theme.accent }]}>
+        {t(label)}
+      </Text>
+    </Pressable>
+  )
+  const openTeam = async (url: string) => {
+    try {
+      assertOwner()
+      await (onOpenTeam ? onOpenTeam(url) : Linking.openURL(url))
+    } catch {
+      try {
+        assertOwner()
+        Alert.alert(
+          t('Team settings'),
+          t('Unable to open team settings. Please try again.')
+        )
+      } catch {
+        /* A retired link cannot display feedback for another account. */
+      }
+    }
+  }
+  if (flow.deleted)
+    return (
+      <View style={[s.container, style]}>
+        <Text style={[s.title, text]}>{t('Account deleted')}</Text>
+        <Text accessibilityLiveRegion="polite" style={[s.body, text]}>
+          {t('Your Ticket Fairy account has been closed. You are signed out.')}
+        </Text>
+        <Text style={[s.body, muted]}>
+          {t('Financial and transaction records are retained where required.')}
+        </Text>
+        {onDone && action('Continue browsing', onDone, false, false)}
+      </View>
+    )
+  if (flow.confirmingAccount)
+    return (
+      <ActivityIndicator
+        accessibilityLabel={t('Loading account deletion options…')}
+        color={theme.accent}
+      />
+    )
+  if (!flow.signedIn)
+    return (
+      <View style={[s.container, style]}>
+        {flow.error && (
+          <>
+            <Text accessibilityRole="alert" style={[s.body, { color: theme.error }]}>
+              {t(flow.error)}
+            </Text>
+            {action('Try again', () => void flow.retry())}
+          </>
+        )}
+        <Text style={[s.body, text]}>
+          {t('Sign in to review and delete your Ticket Fairy account.')}
+        </Text>
+        {onSignIn && action('Sign in', onSignIn, false, false)}
+      </View>
+    )
+  if (flow.query.isPending)
+    return (
+      <ActivityIndicator
+        accessibilityLabel={t('Loading account deletion options…')}
+        color={theme.accent}
+      />
+    )
+  if (!flow.status)
+    return (
+      <View style={[s.container, style]}>
+        <Text accessibilityRole="alert" style={[s.body, { color: theme.error }]}>
+          {t(flow.error || 'Account deletion options could not load.')}
+        </Text>
+        {action('Try again', () => void flow.retry(), false, false)}
+      </View>
+    )
+  const status = flow.status
+  const password = status.verification === 'password'
+  return (
+    <View style={[s.container, style]}>
+      {showHeader && <Text style={[s.title, text]}>{t('Delete account')}</Text>}
+      {showExplanation && (
+        <>
+          <Text style={[s.body, text]}>
+            {t(
+              'This closes your Ticket Fairy account across the app, website and organiser dashboard.'
+            )}
+          </Text>
+          <Text style={[s.heading, text]}>{t('What is removed')}</Text>
+          <Text style={[s.body, muted]}>
+            {t(
+              'Your personal profile, sign-in access, friends, saved preferences and the content you posted are removed or anonymised.'
+            )}
+          </Text>
+          <Text style={[s.heading, text]}>{t('What is kept')}</Text>
+          <Text style={[s.body, muted]}>
+            {t(
+              'Financial and transaction records are retained where required. Deleting your account does not refund or cancel orders, and does not delete other ticket holders’ details.'
+            )}
+          </Text>
+        </>
+      )}
+      {status.appleLinked && (
+        <Text style={[s.body, muted]}>
+          {t(
+            'If Ticket Fairy still appears in your Apple Account after deletion, remove its access there too.'
+          )}
+        </Text>
+      )}
+      {status.blockers.length > 0 && (
+        <View style={[s.panel, { borderColor: theme.border }]}>
+          <Text style={[s.heading, text]}>{t('Before you delete your account')}</Text>
+          {status.blockers.map((blocker) => (
+            <View key={blocker.code} style={s.container}>
+              <Text style={[s.body, text]}>{t(blocker.message)}</Text>
+              {blocker.brands?.map((brand) =>
+                brand.teamUrl ? (
+                  <Pressable
+                    key={brand.id}
+                    accessibilityRole="link"
+                    disabled={flow.busy}
+                    onPress={() => {
+                      if (brand.teamUrl) void openTeam(brand.teamUrl)
+                    }}
+                    style={s.link}
+                  >
+                    <Text style={{ color: theme.accent, fontFamily: theme.fontFamily }}>
+                      {t('Open {{name}} team settings', { name: brand.name })}
+                    </Text>
+                  </Pressable>
+                ) : null
+              )}
+            </View>
+          ))}
+          {action('Check again', () => void flow.retry())}
+        </View>
+      )}
+      {!flow.isOpen && status.canDelete && action('Delete account', flow.open, true)}
+      {flow.isOpen && (
+        <View
+          accessibilityLabel={t('Confirm account deletion')}
+          style={[s.panel, { borderColor: theme.border }]}
+        >
+          <Text style={[s.heading, text]}>{t('Delete your account permanently?')}</Text>
+          <Text style={[s.body, text]}>
+            {t('This cannot be undone. Confirm that you want to close this account.')}
+          </Text>
+          {!password && (
+            <>
+              <Text style={[s.body, muted]}>
+                {t('We will email a deletion code to {{email}}.', {
+                  email: status.email,
+                })}
+              </Text>
+              {action(
+                flow.codeSent ? 'Send a new code' : 'Email deletion code',
+                () => void flow.sendCode(locale),
+                false,
+                flow.busy || flow.retryAfter > 0
+              )}
+              {flow.codeSent && (
+                <Text accessibilityLiveRegion="polite" style={[s.body, muted]}>
+                  {t('A code was sent to {{email}}. It expires in {{minutes}} minutes.', {
+                    email: flow.codeSent.email,
+                    minutes: flow.codeSent.expiresInMinutes,
+                  })}
+                </Text>
+              )}
+            </>
+          )}
+          {flow.retryAfter > 0 && (
+            <Text accessibilityLiveRegion="polite" style={[s.body, muted]}>
+              {t('Try again in {{seconds}} seconds.', { seconds: flow.retryAfter })}
+            </Text>
+          )}
+          <Text style={[s.heading, text]}>
+            {t(password ? 'Current password' : 'Deletion code')}
+          </Text>
+          <TextInput
+            accessibilityLabel={t(password ? 'Current password' : 'Deletion code')}
+            value={flow.proof}
+            onChangeText={flow.setProof}
+            secureTextEntry={password}
+            textContentType={password ? 'password' : 'oneTimeCode'}
+            autoComplete={password ? 'current-password' : 'one-time-code'}
+            keyboardType={password ? 'default' : 'number-pad'}
+            maxLength={password ? undefined : 6}
+            autoCapitalize="none"
+            autoCorrect={false}
+            editable={!flow.busy}
+            style={[
+              s.input,
+              text,
+              { borderColor: theme.border, backgroundColor: theme.background },
+            ]}
+          />
+          {flow.error && (
+            <Text accessibilityRole="alert" style={[s.body, { color: theme.error }]}>
+              {t(flow.error)}
+            </Text>
+          )}
+          {flow.busy && (
+            <ActivityIndicator
+              color={theme.accent}
+              accessibilityLabel={t('Please wait…')}
+            />
+          )}
+          {action('Keep account', flow.cancel)}
+          {action(
+            'Permanently delete account',
+            () => void flow.confirm(),
+            true,
+            !flow.canConfirm
+          )}
+        </View>
+      )}
+      {!flow.isOpen && flow.error && (
+        <Text accessibilityRole="alert" style={[s.body, { color: theme.error }]}>
+          {t(flow.error)}
+        </Text>
+      )}
+    </View>
+  )
+}
+
+const s = StyleSheet.create({
+  container: { gap: 12 },
+  title: { fontSize: 22, fontWeight: '600', lineHeight: 28 },
+  heading: { fontSize: 16, fontWeight: '600', lineHeight: 23 },
+  body: { fontSize: 15, lineHeight: 22 },
+  panel: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 16,
+    padding: 16,
+    gap: 12,
+  },
+  button: {
+    minHeight: 48,
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: { minHeight: 48, borderWidth: 1, borderRadius: 10, padding: 12, fontSize: 16 },
+  link: { minHeight: 44, justifyContent: 'center' },
+  disabled: { opacity: 0.5 },
+})

package/src/sections/EventDiscussionView.tsx

@@ -423,7 +423,7 @@ const EventDiscussionBody = ({
         accessibilityRole="link"
         style={s.support}
         onPress={() => {
-          if (/^https:\/\//.test(d.supportUrl))
+          if (/^(https:\/\/|mailto:)/i.test(d.supportUrl))
             void Linking.openURL(d.supportUrl).catch(() => undefined)
         }}
       >

package/src/sections/index.ts

@@ -32,3 +32,9 @@ export {
   type StreamingProps,
   type StreamingProvider,
 } from './Streaming'
+
+export {
+  AccountDeletion,
+  AccountDeletionView,
+  type AccountDeletionProps,
+} from './AccountDeletion'