tf-checkout-react-native 2.0.0-beta.12 → 2.0.0-beta.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tf-checkout-react-native",
-  "version": "2.0.0-beta.12",
+  "version": "2.0.0-beta.14",
   "description": "TheTicketFairy ReactNative Checkout library",
   "homepage": "https://github.com/theticketfairy/tf-shared-libraries#readme",
   "author": "The Ticket Fairy",
@@ -34,10 +34,13 @@
     "!**/__tests__",
     "!**/__fixtures__",
     "!**/__mocks__",
-    "!**/.*"
+    "!**/.*",
+    "!scripts/verify-wallet-context.cjs",
+    "!scripts/verify-provider-uri.cjs",
+    "!scripts/verify-native-textarea.cjs"
   ],
   "scripts": {
-    "test": "node scripts/verify-discussion-support.cjs && jest --passWithNoTests",
+    "test": "node scripts/verify-discussion-support.cjs && node scripts/verify-wallet-context.cjs && node scripts/verify-provider-uri.cjs && node scripts/verify-native-textarea.cjs && jest --passWithNoTests",
     "typecheck": "tsc -p tsconfig.build.json",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "lint:fix": "eslint \"**/*.{js,ts,tsx}\" --fix",
@@ -157,7 +160,7 @@
     "react-native-mmkv": "^3.0.0",
     "react-native-webview": ">=13.15.0"
   },
-  "//dependencies": "tf-checkout-shared is INLINED into this bundle (tsup noExternal), so its own runtime deps are ours too — axios, entities and htmlparser2 must stay declared here or tsup bundles them (axios drags Node's stream into a browser build) / the consumer never installs them.",
+  "//dependencies": "tf-checkout-shared is INLINED into this bundle (tsup noExternal), so its own runtime deps are ours too \u2014 axios, entities and htmlparser2 must stay declared here or tsup bundles them (axios drags Node's stream into a browser build) / the consumer never installs them.",
   "engines": {
     "node": ">=20.19.4"
   }

package/src/confirmer.ts

@@ -30,6 +30,7 @@ import {
   nativeStripeErrorOutcome,
   confirmedStripeIntentStatus,
   paymentProviderError,
+  stripeWalletPaymentContext,
   type CheckoutBilling,
   type CheckoutPorts,
   type NativeStripeErrorLike,
@@ -119,14 +120,24 @@ export const createRnStripeConfirmer = (): PaymentConfirmer => {
     },
 
     confirmApplePay: async (clientSecret, total, currencyCode, merchant) => {
+      const context = stripeWalletPaymentContext(
+        total,
+        currencyCode,
+        merchant.merchantCountryCode
+      )
+      if (!context)
+        throw paymentProviderError(
+          'The order wallet details are unavailable.',
+          'notStarted'
+        )
       const { error, paymentIntent } = await confirmPlatformPayPayment(clientSecret, {
         applePay: {
-          merchantCountryCode: merchant.merchantCountryCode ?? 'US',
-          currencyCode,
+          merchantCountryCode: context.merchantCountry,
+          currencyCode: context.currency,
           cartItems: [
             {
               label: merchant.merchantName ?? 'Order',
-              amount: total,
+              amount: context.amount,
               paymentType: PlatformPay.PaymentType.Immediate,
             },
           ],
@@ -137,11 +148,21 @@ export const createRnStripeConfirmer = (): PaymentConfirmer => {
     },
 
     confirmGooglePay: async (clientSecret, total, currencyCode, merchant) => {
+      const context = stripeWalletPaymentContext(
+        total,
+        currencyCode,
+        merchant.merchantCountryCode
+      )
+      if (!context)
+        throw paymentProviderError(
+          'The order wallet details are unavailable.',
+          'notStarted'
+        )
       const { error, paymentIntent } = await confirmPlatformPayPayment(clientSecret, {
         googlePay: {
           testEnv: merchant.testEnv === true,
-          merchantCountryCode: merchant.merchantCountryCode ?? 'US',
-          currencyCode,
+          merchantCountryCode: context.merchantCountry,
+          currencyCode: context.currency,
           merchantName: merchant.merchantName ?? 'Order',
         },
       })

package/src/sections/AddOns.tsx

@@ -152,16 +152,18 @@ export const AddOns: FC<AddOnsProps> = ({
                       </Text>
                       {desc ? <Text style={s.desc}>{desc}</Text> : null}
                     </View>
-                    {soldOut(a) ? (
-                      <Text style={s.soldOut}>Sold out</Text>
-                    ) : (
-                      <QuantitySelect
-                        value={n}
-                        min={0}
-                        max={max(a)}
-                        onChange={(v) => setQty((q) => ({ ...q, [a.id]: v }))}
-                      />
-                    )}
+                    <View style={s.quantity}>
+                      {soldOut(a) ? (
+                        <Text style={s.soldOut}>Sold out</Text>
+                      ) : (
+                        <QuantitySelect
+                          value={n}
+                          min={0}
+                          max={max(a)}
+                          onChange={(v) => setQty((q) => ({ ...q, [a.id]: v }))}
+                        />
+                      )}
+                    </View>
                   </View>
                   {n > 0 && group ? (
                     <View style={s.fields}>
@@ -223,7 +225,14 @@ const useAddonStyles = (theme: ResolvedTheme) =>
           fontWeight: '700',
           fontFamily: theme.fontFamily,
         },
-        skipBtn: { paddingHorizontal: 4, paddingVertical: 2 },
+        skipBtn: {
+          maxWidth: '100%',
+          minWidth: 44,
+          minHeight: 44,
+          paddingHorizontal: 8,
+          paddingVertical: 10,
+          justifyContent: 'center',
+        },
         skip: {
           color: theme.accent,
           fontSize: theme.fontSize - 1,
@@ -247,8 +256,14 @@ const useAddonStyles = (theme: ResolvedTheme) =>
           fontFamily: theme.fontFamily,
         },
         item: { gap: 10 },
-        row: { flexDirection: 'row', alignItems: 'flex-start', gap: 12 },
-        info: { flex: 1, gap: 2 },
+        row: {
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          alignItems: 'flex-start',
+          gap: 16,
+        },
+        info: { flexGrow: 1, flexShrink: 1, flexBasis: 220, gap: 8 },
+        quantity: { marginStart: 'auto', maxWidth: '100%' },
         name: {
           color: theme.text,
           fontSize: theme.fontSize,

package/src/sections/BillingInfo.tsx

@@ -489,7 +489,11 @@ export const BillingInfo: FC<BillingInfoProps> = ({
         {onLogin && !checkout.isLoggedIn ? (
           <View style={s.loginRow}>
             <Text style={s.note}>Login &amp; skip ahead:</Text>
-            <Pressable onPress={() => onLogin()}>
+            <Pressable
+              accessibilityRole="button"
+              style={s.loginAction}
+              onPress={() => onLogin()}
+            >
               <Text style={s.link}>Login</Text>
             </Pressable>
           </View>
@@ -740,7 +744,20 @@ const useStyles = (theme: ResolvedTheme) =>
   useMemo(
     () =>
       StyleSheet.create({
-        loginRow: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+        loginRow: {
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          alignItems: 'center',
+          gap: 12,
+        },
+        loginAction: {
+          maxWidth: '100%',
+          minWidth: 44,
+          minHeight: 44,
+          paddingHorizontal: 8,
+          paddingVertical: 10,
+          justifyContent: 'center',
+        },
         note: {
           color: theme.muted,
           fontSize: theme.fontSize - 1,
@@ -765,8 +782,8 @@ const useStyles = (theme: ResolvedTheme) =>
           fontSize: theme.fontSize - 1,
           fontFamily: theme.fontFamily,
         },
-        row: { flexDirection: 'row', gap: 10 },
-        col: { flex: 1 },
+        row: { flexDirection: 'row', flexWrap: 'wrap', gap: 12 },
+        col: { flexGrow: 1, flexShrink: 1, flexBasis: 180 },
       }),
     [theme]
   )

package/src/sections/Tickets.tsx

@@ -397,6 +397,7 @@ export const Tickets: FC<TicketsProps> = ({
                     {t.descriptionRich ? (
                       <Pressable
                         accessibilityRole="button"
+                        style={s.textAction}
                         onPress={() =>
                           setVisibleDescription((cur) => (cur === t.id ? null : t.id))
                         }
@@ -469,6 +470,7 @@ export const Tickets: FC<TicketsProps> = ({
             ) : (
               <Pressable
                 accessibilityRole="button"
+                style={s.textAction}
                 onPress={() => setWlOpen((w) => ({ ...w, [t.id]: true }))}
               >
                 <Text style={s.wlToggle}>Join the waiting list</Text>
@@ -557,7 +559,11 @@ export const Tickets: FC<TicketsProps> = ({
         {showCodeInput ? (
           <View style={s.promo}>
             {!isAccess && !promoOpen ? (
-              <Pressable accessibilityRole="button" onPress={() => setPromoOpen(true)}>
+              <Pressable
+                accessibilityRole="button"
+                style={s.textAction}
+                onPress={() => setPromoOpen(true)}
+              >
                 <Text style={s.promoToggle}>Got a promo code? Tap here</Text>
               </Pressable>
             ) : (
@@ -672,10 +678,25 @@ const useTicketStyles = (theme: ResolvedTheme) =>
           marginTop: 4,
           fontFamily: theme.fontFamily,
         },
-        rowWrap: { gap: 8 },
-        row: { flexDirection: 'row', alignItems: 'flex-start', gap: 12 },
-        info: { flex: 1, gap: 4 },
-        nameRow: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 8 },
+        rowWrap: { gap: 12 },
+        // Keep a readable text column; a narrow host moves controls to the next line.
+        row: {
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          alignItems: 'flex-start',
+          gap: 16,
+        },
+        info: { flexGrow: 1, flexShrink: 1, flexBasis: 220, gap: 8 },
+        nameRow: { gap: 4 },
+        textAction: {
+          alignSelf: 'flex-start',
+          maxWidth: '100%',
+          minWidth: 44,
+          minHeight: 44,
+          paddingHorizontal: 8,
+          paddingVertical: 10,
+          justifyContent: 'center',
+        },
         name: {
           color: theme.text,
           fontSize: theme.fontSize,
@@ -692,7 +713,7 @@ const useTicketStyles = (theme: ResolvedTheme) =>
           flexDirection: 'row',
           alignItems: 'center',
           flexWrap: 'wrap',
-          gap: 6,
+          gap: 8,
         },
         oldPrice: {
           color: theme.muted,
@@ -726,12 +747,22 @@ const useTicketStyles = (theme: ResolvedTheme) =>
           fontFamily: theme.fontFamily,
         },
         soldout: {
+          marginStart: 'auto',
+          maxWidth: '100%',
           color: theme.muted,
           fontSize: theme.fontSize - 1,
           fontWeight: '600',
           fontFamily: theme.fontFamily,
         },
-        qtyWrap: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+        qtyWrap: {
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          maxWidth: '100%',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          gap: 12,
+          marginStart: 'auto',
+        },
         guests: {
           color: theme.muted,
           fontSize: theme.fontSize - 2,
@@ -741,6 +772,7 @@ const useTicketStyles = (theme: ResolvedTheme) =>
         description: {
           color: theme.muted,
           fontSize: theme.fontSize - 1,
+          lineHeight: theme.fontSize * 1.5,
           fontFamily: theme.fontFamily,
         },
         wlToggle: {

package/src/ui/CustomFields.tsx

@@ -8,8 +8,7 @@
  *   - `<select>` and `radio` (single choice) both render as the native `Select`
  *     sheet — there is no native radio primitive.
  *   - `select_multi` renders a column of native `Checkbox` rows.
- *   - there is no multiline `Textarea` primitive, so `textarea` falls back to a
- *     single-line `Input` (value parity preserved).
+ *   - `textarea` uses the native multiline Input, preserving line breaks.
  */
 import React, { type FC } from 'react'
 import { Image, View } from 'react-native'
@@ -94,11 +93,15 @@ export const CustomFieldInput: FC<CustomFieldInputProps> = ({
 
   switch (field.type) {
     case 'textarea':
-      // Native adaptation: no multiline Textarea primitive — single-line Input.
       return (
         <Field label={field.label} required={field.required} error={error}>
           {desc}
-          <Input value={asString(value)} onChangeText={onChange} invalid={invalid} />
+          <Input
+            multiline
+            value={asString(value)}
+            onChangeText={onChange}
+            invalid={invalid}
+          />
         </Field>
       )
     case 'select':

package/src/ui/ProviderPages.tsx

@@ -35,9 +35,21 @@ const secureInitialUri = (uri: string): boolean => {
   if (hasUnsafeNativeUriCharacters(uri)) return false
   if (!/^https:\/\/[^/?#\s\\]+(?:[/?#][^\s\\]*)?$/i.test(uri)) return false
   try {
-    const url = new URL(uri)
+    // RN's URL runtime exposes these fields, but its global type omits them.
+    // Check the runtime surface rather than assuming a host polyfill's shape.
+    const url: unknown = new URL(uri)
     return (
-      url.protocol === 'https:' && Boolean(url.hostname) && !url.username && !url.password
+      url !== null &&
+      typeof url === 'object' &&
+      'protocol' in url &&
+      url.protocol === 'https:' &&
+      'hostname' in url &&
+      typeof url.hostname === 'string' &&
+      Boolean(url.hostname) &&
+      'username' in url &&
+      url.username === '' &&
+      'password' in url &&
+      url.password === ''
     )
   } catch {
     return false

package/src/ui/QuantitySelect.tsx

@@ -105,9 +105,10 @@ const useQuantityStyles = (theme: ResolvedTheme) =>
       StyleSheet.create({
         stepper: { flexDirection: 'row', alignItems: 'center', gap: 14 },
         btn: {
-          width: 36,
-          height: 36,
-          borderRadius: 18,
+          minWidth: 44,
+          minHeight: 44,
+          padding: 10,
+          borderRadius: 22,
           borderWidth: StyleSheet.hairlineWidth,
           borderColor: theme.border,
           alignItems: 'center',

package/src/ui/primitives.tsx

@@ -191,6 +191,8 @@ export const useStyles = (theme: ResolvedTheme) =>
         buttonDisabled: { opacity: 0.5 },
         buttonPressed: { opacity: 0.85 },
         buttonLabel: {
+          maxWidth: '100%',
+          textAlign: 'center',
           color: theme.accentContrast,
           fontSize: theme.fontSize,
           fontWeight: '600',