refactor(demo): consolidate login modal into SingleInputModal

fadi-george · fadi-george · commit be1f41300fcc · 2026-04-23T11:10:30.000-07:00
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -102,12 +102,15 @@ jobs:
             -destination 'generic/platform=iOS' \
             -archivePath build/demo.xcarchive \
             -derivedDataPath build \
+            -quiet \
+            -hideShellScriptEnvironment \
             CODE_SIGN_STYLE=Manual \
             COMPILER_INDEX_STORE_ENABLE=NO
           xcodebuild -exportArchive \
             -archivePath build/demo.xcarchive \
             -exportOptionsPlist ExportOptions.plist \
-            -exportPath build/ipa
+            -exportPath build/ipa \
+            -quiet
 
       - name: Verify aps-environment in IPA
         working-directory: examples/demo/ios
diff --git a/examples/demo/src/components/ListWidgets.tsx b/examples/demo/src/components/ListWidgets.tsx
@@ -81,7 +81,11 @@ interface SingleItemProps {
 export function SingleItem({ value, onDelete, sectionKey }: SingleItemProps) {
   return (
     <View style={styles.singleRow}>
-      <Text style={styles.singleValue} numberOfLines={1}>
+      <Text
+        style={styles.singleValue}
+        numberOfLines={1}
+        testID={sectionKey ? `${sectionKey}_value_${value}` : undefined}
+      >
         {value}
       </Text>
       {onDelete && (
diff --git a/examples/demo/src/components/modals/LoginModal.tsx b/examples/demo/src/components/modals/LoginModal.tsx
diff --git a/examples/demo/src/components/modals/MultiSelectRemoveModal.tsx b/examples/demo/src/components/modals/MultiSelectRemoveModal.tsx
@@ -89,6 +89,7 @@ export default function MultiSelectRemoveModal({
               style={AppDialogStyles.actionBtn}
               onPress={handleConfirm}
               disabled={selected.size === 0}
+              testID="multiselect_confirm_button"
             >
               <Text
                 style={[
diff --git a/examples/demo/src/components/modals/OutcomeModal.tsx b/examples/demo/src/components/modals/OutcomeModal.tsx
@@ -61,8 +61,16 @@ export default function OutcomeModal({
     onClose();
   };
 
-  const RadioOption = ({ type, label }: { type: OutcomeType; label: string }) => (
-    <TouchableOpacity style={styles.radioRow} onPress={() => setOutcomeType(type)}>
+  const RadioOption = ({
+    type,
+    label,
+    testID,
+  }: {
+    type: OutcomeType;
+    label: string;
+    testID: string;
+  }) => (
+    <TouchableOpacity style={styles.radioRow} onPress={() => setOutcomeType(type)} testID={testID}>
       <View style={styles.radioOuter}>
         {outcomeType === type && <View style={styles.radioInner} />}
       </View>
@@ -78,9 +86,13 @@ export default function OutcomeModal({
       >
         <View style={AppDialogStyles.container}>
           <Text style={AppDialogStyles.title}>Send Outcome</Text>
-          <RadioOption type="normal" label="Normal Outcome" />
-          <RadioOption type="unique" label="Unique Outcome" />
-          <RadioOption type="withValue" label="Outcome with Value" />
+          <RadioOption type="normal" label="Normal Outcome" testID="outcome_type_normal_radio" />
+          <RadioOption type="unique" label="Unique Outcome" testID="outcome_type_unique_radio" />
+          <RadioOption
+            type="withValue"
+            label="Outcome with Value"
+            testID="outcome_type_value_radio"
+          />
           <TextInput
             style={[AppDialogStyles.input, styles.inputSpacing]}
             placeholder="Name"
diff --git a/examples/demo/src/components/modals/PairInputModal.tsx b/examples/demo/src/components/modals/PairInputModal.tsx
@@ -21,7 +21,6 @@ interface Props {
   onClose: () => void;
   keyTestID?: string;
   valueTestID?: string;
-  confirmTestID?: string;
 }
 
 export default function PairInputModal({
@@ -33,7 +32,6 @@ export default function PairInputModal({
   onClose,
   keyTestID,
   valueTestID,
-  confirmTestID,
 }: Props) {
   const [keyValue, setKeyValue] = useState('');
   const [val, setVal] = useState('');
@@ -93,7 +91,7 @@ export default function PairInputModal({
               style={AppDialogStyles.actionBtn}
               onPress={handleConfirm}
               disabled={!canSubmit}
-              testID={confirmTestID}
+              testID="singlepair_confirm_button"
             >
               <Text
                 style={[
diff --git a/examples/demo/src/components/modals/SingleInputModal.tsx b/examples/demo/src/components/modals/SingleInputModal.tsx
@@ -19,6 +19,7 @@ interface Props {
   onConfirm: (value: string) => void;
   onClose: () => void;
   keyboardType?: 'default' | 'email-address' | 'phone-pad';
+  confirmLabel?: string;
   testID?: string;
 }
 
@@ -29,6 +30,7 @@ export default function SingleInputModal({
   onConfirm,
   onClose,
   keyboardType = 'default',
+  confirmLabel = 'Add',
   testID,
 }: Props) {
   const [value, setValue] = useState('');
@@ -74,14 +76,15 @@ export default function SingleInputModal({
               style={AppDialogStyles.actionBtn}
               onPress={handleConfirm}
               disabled={!value.trim()}
+              testID="singleinput_confirm_button"
             >
               <Text
                 style={[
                   AppDialogStyles.actionText,
                   !value.trim() && AppDialogStyles.actionTextDisabled,
                 ]}
               >
-                Add
+                {confirmLabel}
               </Text>
             </TouchableOpacity>
           </View>
diff --git a/examples/demo/src/components/modals/TooltipModal.tsx b/examples/demo/src/components/modals/TooltipModal.tsx
@@ -38,7 +38,11 @@ export default function TooltipModal({ visible, tooltip, onClose }: Props) {
             ))}
           </ScrollView>
           <View style={AppDialogStyles.actions}>
-            <TouchableOpacity style={AppDialogStyles.actionBtn} onPress={onClose}>
+            <TouchableOpacity
+              style={AppDialogStyles.actionBtn}
+              onPress={onClose}
+              testID="tooltip_ok_button"
+            >
               <Text style={AppDialogStyles.actionText}>OK</Text>
             </TouchableOpacity>
           </View>
diff --git a/examples/demo/src/components/sections/AliasesSection.tsx b/examples/demo/src/components/sections/AliasesSection.tsx
@@ -64,7 +64,6 @@ export default function AliasesSection({
         onClose={() => setAddVisible(false)}
         keyTestID="alias_label_input"
         valueTestID="alias_id_input"
-        confirmTestID="alias_confirm_button"
       />
       <MultiPairInputModal
         visible={addMultipleVisible}
diff --git a/examples/demo/src/components/sections/CustomEventsSection.tsx b/examples/demo/src/components/sections/CustomEventsSection.tsx
@@ -10,7 +10,7 @@ interface Props {
   onInfoTap?: () => void;
 }
 
-export default function TrackEventSection({ onTrackEvent, onInfoTap }: Props) {
+export default function CustomEventsSection({ onTrackEvent, onInfoTap }: Props) {
   const [modalVisible, setModalVisible] = useState(false);
 
   return (
diff --git a/examples/demo/src/components/sections/LiveActivitySection.tsx b/examples/demo/src/components/sections/LiveActivitySection.tsx
@@ -77,7 +77,7 @@ export default function LiveActivitySection({
           label="Order #"
           value={orderNumber}
           onChangeText={setOrderNumber}
-          testID="live_activity_order_number"
+          testID="live_activity_order_number_input"
         />
       </View>
       <View style={styles.buttons}>
diff --git a/examples/demo/src/components/sections/TagsSection.tsx b/examples/demo/src/components/sections/TagsSection.tsx
@@ -73,7 +73,6 @@ export default function TagsSection({
         onClose={() => setAddVisible(false)}
         keyTestID="tag_key_input"
         valueTestID="tag_value_input"
-        confirmTestID="tag_confirm_button"
       />
       <MultiPairInputModal
         visible={addMultipleVisible}
diff --git a/examples/demo/src/components/sections/TriggersSection.tsx b/examples/demo/src/components/sections/TriggersSection.tsx
@@ -79,7 +79,6 @@ export default function TriggersSection({
         onClose={() => setAddVisible(false)}
         keyTestID="trigger_key_input"
         valueTestID="trigger_value_input"
-        confirmTestID="trigger_confirm_button"
       />
       <MultiPairInputModal
         visible={addMultipleVisible}
diff --git a/examples/demo/src/components/sections/UserSection.tsx b/examples/demo/src/components/sections/UserSection.tsx
@@ -4,7 +4,7 @@ import { View, Text, StyleSheet } from 'react-native';
 import { AppColors, AppTextStyles, AppTheme, AppSpacing } from '../../theme';
 import { showSnackbar } from '../../utils/showSnackbar';
 import ActionButton from '../ActionButton';
-import LoginModal from '../modals/LoginModal';
+import SingleInputModal from '../modals/SingleInputModal';
 import SectionCard from '../SectionCard';
 
 interface Props {
@@ -68,10 +68,14 @@ export default function UserSection({ externalUserId, onLogin, onLogout }: Props
           testID="logout_user_button"
         />
       )}
-      <LoginModal
+      <SingleInputModal
         visible={loginVisible}
+        title="Login User"
+        placeholder="External User Id"
+        confirmLabel="Login"
         onConfirm={handleLogin}
         onClose={() => setLoginVisible(false)}
+        testID="login_user_id_input"
       />
     </SectionCard>
   );
diff --git a/examples/demo/src/hooks/useOneSignal.ts b/examples/demo/src/hooks/useOneSignal.ts
@@ -51,6 +51,16 @@ function toPairs(pairs: Record<string, string>): [string, string][] {
   return Object.entries(pairs).map(([key, value]) => [key, value]);
 }
 
+function mergePairs<V>(prev: [string, V][], next: Record<string, V>): [string, V][] {
+  const merged = new Map(prev);
+  for (const [k, v] of Object.entries(next)) merged.set(k, v);
+  return Array.from(merged.entries());
+}
+
+function mergeUnique<T>(prev: T[], next: T[]): T[] {
+  return Array.from(new Set([...prev, ...next]));
+}
+
 export type UseOneSignalReturn = {
   appId: string;
   consentRequired: boolean;
@@ -140,10 +150,10 @@ function useOneSignalState(): UseOneSignalReturn {
 
       if (requestSequenceRef.current !== requestId) return;
 
-      setAliasesList(Object.entries(userData.aliases));
-      setTagsList(Object.entries(userData.tags));
-      setEmailsList(userData.emails);
-      setSmsNumbersList(userData.smsNumbers);
+      setAliasesList((prev) => mergePairs(prev, userData.aliases));
+      setTagsList((prev) => mergePairs(prev, userData.tags));
+      setEmailsList((prev) => mergeUnique(prev, userData.emails));
+      setSmsNumbersList((prev) => mergeUnique(prev, userData.smsNumbers));
       setExternalUserId(externalId ?? userData.externalId);
     } finally {
       if (requestSequenceRef.current === requestId) {
@@ -191,8 +201,8 @@ function useOneSignalState(): UseOneSignalReturn {
       setIsPushEnabled(optedIn);
     };
 
-    const permissionHandler = async () => {
-      setHasNotificationPermission(await OneSignal.Notifications.getPermissionAsync());
+    const permissionHandler = (granted: boolean) => {
+      setHasNotificationPermission(granted);
     };
 
     const userChangeHandler = (event: UserChangedState) => {
diff --git a/examples/demo/src/screens/HomeScreen.tsx b/examples/demo/src/screens/HomeScreen.tsx
@@ -6,6 +6,7 @@ import ActionButton from '../components/ActionButton';
 import TooltipModal from '../components/modals/TooltipModal';
 import AliasesSection from '../components/sections/AliasesSection';
 import AppSection from '../components/sections/AppSection';
+import CustomEventsSection from '../components/sections/CustomEventsSection';
 import EmailsSection from '../components/sections/EmailsSection';
 import InAppSection from '../components/sections/InAppSection';
 import LiveActivitySection from '../components/sections/LiveActivitySection';
@@ -16,7 +17,6 @@ import SendIamSection from '../components/sections/SendIamSection';
 import SendPushSection from '../components/sections/SendPushSection';
 import SmsSection from '../components/sections/SmsSection';
 import TagsSection from '../components/sections/TagsSection';
-import TrackEventSection from '../components/sections/TrackEventSection';
 import TriggersSection from '../components/sections/TriggersSection';
 import UserSection from '../components/sections/UserSection';
 import { useOneSignal } from '../hooks/useOneSignal';
@@ -144,7 +144,7 @@ export default function HomeScreen() {
           onInfoTap={() => showTooltipModal('triggers')}
         />
 
-        <TrackEventSection
+        <CustomEventsSection
           onTrackEvent={os.trackEvent}
           onInfoTap={() => showTooltipModal('customEvents')}
         />
diff --git a/examples/demo/src/theme.ts b/examples/demo/src/theme.ts
@@ -46,6 +46,11 @@ export const AppInputProps: TextInputProps = {
   autoCorrect: false,
   autoCapitalize: 'none',
   autoComplete: 'off',
+  // Prevents Android Autofill / Credential Manager from walking the input on focus.
+  // Without this, Android 14+ rebuilds the AssistStructure when a new input
+  // appears (e.g. revealing the "Value" field in OutcomeModal) and force-stops
+  // the UiAutomator2 instrumentation, making Appium tests fail mid-suite.
+  importantForAutofill: 'no',
 };
 
 export const AppDialogStyles = StyleSheet.create({

Original file line number	Diff line number	Diff line change
`@@ -89,6 +89,7 @@ export default function MultiSelectRemoveModal({`
`89`	`89`	`style={AppDialogStyles.actionBtn}`
`90`	`90`	`onPress={handleConfirm}`
`91`	`91`	`disabled={selected.size === 0}`
	`92`	`+ testID="multiselect_confirm_button"`
`92`	`93`	`>`
`93`	`94`	`<Text`
`94`	`95`	`style={[`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ interface Props {`
`10`	`10`	`onInfoTap?: () => void;`
`11`	`11`	`}`
`12`	`12`
`13`		`-export default function TrackEventSection({ onTrackEvent, onInfoTap }: Props) {`
	`13`	`+export default function CustomEventsSection({ onTrackEvent, onInfoTap }: Props) {`
`14`	`14`	`const [modalVisible, setModalVisible] = useState(false);`
`15`	`15`
`16`	`16`	`return (`