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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tf-checkout-react-native",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0-beta.9",
   "description": "TheTicketFairy ReactNative Checkout library",
   "homepage": "https://github.com/theticketfairy/tf-shared-libraries#readme",
   "author": "The Ticket Fairy",

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,7 +428,7 @@ 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
@@ -427,7 +439,7 @@ const EventDiscussionBody = ({
             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,
+              })
             }
           />
         </>