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

package/package.json

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