tf-checkout-react-native 2.0.0-beta.7 → 2.0.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tf-checkout-react-native",
-  "version": "2.0.0-beta.7",
+  "version": "2.0.0-beta.9",
   "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/EventDiscussionView.tsx

@@ -144,11 +144,13 @@ const EventDiscussionBody = ({
             <View style={s.authorRow}>
               <Text style={[muted, s.author]}>
                 {comment.author.name}
-                {own ? ' (you)' : ''}
+                {own ? t(' (you)') : ''}
               </Text>
               <Pressable
                 accessibilityRole="button"
-                accessibilityLabel={`Actions for comment by ${comment.author.name}`}
+                accessibilityLabel={t('Actions for comment by {{name}}', {
+                  name: comment.author.name,
+                })}
                 hitSlop={10}
                 onPress={() => setActions(comment)}
               >
@@ -177,27 +179,27 @@ const EventDiscussionBody = ({
               renderCloseIcon={renderImageCloseIcon}
             />
             <Text selectable style={[text, s.body]}>
-              {comment.status === 'deleted' ? 'Comment removed' : comment.body}
+              {comment.status === 'deleted' ? t('Comment removed') : comment.body}
             </Text>
             {comment.status === 'pending' && (
               <Text accessibilityLiveRegion="polite" style={[muted, s.pending]}>
-                Awaiting review
+                {t('Awaiting review')}
               </Text>
             )}
             {comment.status === 'hidden' && (
-              <Text style={[muted, s.pending]}>Hidden</Text>
+              <Text style={[muted, s.pending]}>{t('Hidden')}</Text>
             )}
             <View style={s.meta}>
               <Text style={[muted, s.date]}>
                 {new Date(comment.createdAt).toLocaleString()}
-                {comment.editedAt ? ' · Edited' : ''}
+                {comment.editedAt ? t(' · edited') : ''}
               </Text>
               {(['up', 'down'] as const).map((reaction) => (
                 <Pressable
                   key={reaction}
                   accessibilityRole="button"
                   accessibilityLabel={
-                    reaction === 'up' ? 'Like comment' : 'Dislike comment'
+                    reaction === 'up' ? t('Like comment') : t('Dislike comment')
                   }
                   accessibilityState={{
                     selected: comment.reactions.mine === reaction,
@@ -243,8 +245,12 @@ const EventDiscussionBody = ({
                 onPress={() => d.replyTo(comment)}
               >
                 <Text style={[muted, s.pending]}>
-                  {comment.replyCount} {comment.replyCount === 1 ? 'reply' : 'replies'} ·
-                  Reply
+                  {t(
+                    comment.replyCount === 1
+                      ? '{{count}} reply · Reply'
+                      : '{{count}} replies · Reply',
+                    { count: comment.replyCount }
+                  )}
                 </Text>
               </Pressable>
             )}
@@ -253,16 +259,20 @@ const EventDiscussionBody = ({
       </SwipeReply>
     )
   }
-  const actionButton = (label: string, onPress: () => void) => (
+  const actionButton = (
+    label: string,
+    onPress: () => void,
+    vars?: Record<string, string | number>
+  ) => (
     <Pressable key={label} accessibilityRole="button" onPress={onPress} style={s.action}>
-      <Text style={text}>{t(label)}</Text>
+      <Text style={text}>{t(label, vars)}</Text>
     </Pressable>
   )
   const sheet = (visible: boolean, close: () => void, children: React.ReactNode) => (
     <Modal transparent animationType="slide" visible={visible} onRequestClose={close}>
       <View style={s.overlay}>
         <Pressable
-          accessibilityLabel="Close menu"
+          accessibilityLabel={t('Close menu')}
           style={StyleSheet.absoluteFill}
           onPress={close}
         />
@@ -293,7 +303,7 @@ const EventDiscussionBody = ({
           onPress={() => setBlocksVisible(true)}
           style={s.blocked}
         >
-          <Text style={muted}>Blocked people</Text>
+          <Text style={muted}>{t('Blocked people')}</Text>
         </Pressable>
       )}
       {d.isLoading ? (
@@ -317,7 +327,7 @@ const EventDiscussionBody = ({
             d.hasMore ? actionButton('Earlier comments', d.loadMore) : null
           }
           ListEmptyComponent={
-            <Text style={[muted, s.empty]}>Be the first to leave a comment.</Text>
+            <Text style={[muted, s.empty]}>{t('Be the first to leave a comment.')}</Text>
           }
           refreshing={d.isLoading}
           onRefresh={() => void d.refresh()}
@@ -329,7 +339,7 @@ const EventDiscussionBody = ({
             {t(d.error || pickerError)}
           </Text>
           <Pressable accessibilityRole="button" onPress={() => void d.refresh()}>
-            <Text style={muted}>Try again</Text>
+            <Text style={muted}>{t('Try again')}</Text>
           </Pressable>
         </View>
       )}
@@ -342,11 +352,11 @@ const EventDiscussionBody = ({
         <View style={[s.draftContext, { borderColor: theme.border }]}>
           <Text style={muted} numberOfLines={1}>
             {d.editing
-              ? 'Edit your comment'
+              ? t('Edit your comment')
               : t('Reply to {{name}}', { name: d.replyingTo?.author.name ?? '' })}
           </Text>
           <Pressable accessibilityRole="button" onPress={d.cancelDraft}>
-            <Text style={muted}>Cancel</Text>
+            <Text style={muted}>{t('Cancel')}</Text>
           </Pressable>
         </View>
       )}
@@ -379,8 +389,8 @@ const EventDiscussionBody = ({
             </Pressable>
           )}
           <TextInput
-            accessibilityLabel="Your comment"
-            placeholder="Enter your comment…"
+            accessibilityLabel={t('Your comment')}
+            placeholder={t('Enter your comment…')}
             placeholderTextColor={theme.muted}
             multiline
             maxLength={4000}
@@ -391,7 +401,7 @@ const EventDiscussionBody = ({
           />
           <Pressable
             accessibilityRole="button"
-            accessibilityLabel={d.editing ? 'Save comment' : 'Post comment'}
+            accessibilityLabel={d.editing ? t('Save comment') : t('Post comment')}
             disabled={
               d.isSubmitting ||
               pickerBusy ||
@@ -403,7 +413,9 @@ const EventDiscussionBody = ({
             {d.isSubmitting ? (
               <ActivityIndicator color={theme.accent} />
             ) : (
-              <Text style={{ color: theme.accent }}>{d.editing ? 'Save' : 'Send'}</Text>
+              <Text style={{ color: theme.accent }}>
+                {d.editing ? t('Save') : t('Send')}
+              </Text>
             )}
           </Pressable>
         </View>
@@ -416,18 +428,18 @@ const EventDiscussionBody = ({
             { borderColor: theme.border, backgroundColor: theme.surface },
           ]}
         >
-          <Text style={text}>Sign in to leave a comment</Text>
+          <Text style={text}>{t('Sign in to leave a comment')}</Text>
         </Pressable>
       )}
       <Pressable
         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)
         }}
       >
-        <Text style={[muted, s.date]}>Need help? Contact support</Text>
+        <Text style={[muted, s.date]}>{t('Need help? Contact support')}</Text>
       </Pressable>
       {sheet(
         Boolean(actions),
@@ -442,12 +454,12 @@ const EventDiscussionBody = ({
               actionButton('Delete', () =>
                 closeActions((comment) =>
                   Alert.alert(
-                    'Delete comment?',
-                    'Your comment will be removed from this conversation.',
+                    t('Delete your comment?'),
+                    t('Your comment will be removed from this conversation.'),
                     [
-                      { text: 'Cancel', style: 'cancel' },
+                      { text: t('Cancel'), style: 'cancel' },
                       {
-                        text: 'Delete',
+                        text: t('Delete'),
                         style: 'destructive',
                         onPress: () => void d.remove(comment),
                       },
@@ -462,12 +474,14 @@ const EventDiscussionBody = ({
               actionButton('Block this person', () =>
                 closeActions((comment) =>
                   Alert.alert(
-                    `Block ${comment.author.name}?`,
-                    'You won’t see their comments. You can unblock them from Blocked people.',
+                    t('Block {{name}}?', { name: comment.author.name }),
+                    t(
+                      'You won’t see their comments. You can unblock them from Blocked people.'
+                    ),
                     [
-                      { text: 'Cancel', style: 'cancel' },
+                      { text: t('Cancel'), style: 'cancel' },
                       {
-                        text: 'Block',
+                        text: t('Block'),
                         onPress: () => void d.block(comment.author.id, true),
                       },
                     ]
@@ -493,7 +507,7 @@ const EventDiscussionBody = ({
         Boolean(reporting),
         () => setReporting(null),
         <>
-          <Text style={text}>Report comment</Text>
+          <Text style={text}>{t('Report comment')}</Text>
           {(
             [
               ['spam', 'Spam'],
@@ -514,11 +528,13 @@ const EventDiscussionBody = ({
         () => setModerating(null),
         <>
           <Text style={text}>
-            {moderating?.status === 'published' ? 'Approve comment' : 'Hide comment'}
+            {moderating?.status === 'published'
+              ? t('Approve comment')
+              : t('Hide comment')}
           </Text>
           <TextInput
-            accessibilityLabel="Moderation reason"
-            placeholder="Reason"
+            accessibilityLabel={t('Moderation reason')}
+            placeholder={t('Reason')}
             placeholderTextColor={theme.muted}
             value={reason}
             onChangeText={setReason}
@@ -536,12 +552,14 @@ const EventDiscussionBody = ({
         blocksVisible,
         () => setBlocksVisible(false),
         <>
-          <Text style={text}>Blocked people</Text>
+          <Text style={text}>{t('Blocked people')}</Text>
           <FlatList
             data={d.blockedAuthors}
             keyExtractor={(person) => person.id}
             renderItem={({ item: person }) =>
-              actionButton(`Unblock ${person.name}`, () => void d.block(person.id, false))
+              actionButton('Unblock {{name}}', () => void d.block(person.id, false), {
+                name: person.name,
+              })
             }
           />
         </>