Skip to content

Commit 4d0603a

Browse files
piotr pietruszewskipi0trpietruszewski
piotr pietruszewski
authored and
pi0trpietruszewski
committed
refactor: changed example app layout
1 parent bfb94e4 commit 4d0603a

File tree

4 files changed

+176
-42
lines changed

4 files changed

+176
-42
lines changed

Diff for: ‎example/assets/intercom.png

48.3 KB
Loading

Diff for: ‎example/e2e/tests/mainIntercom.e2e.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -50,18 +50,21 @@ describe('Intercom E2E', () => {
5050
'fetch-help-center-collections'
5151
);
5252
await (await $('~fetch-help-center-collections')).click();
53+
await driver.closeAlert();
5354
});
5455

5556
it('Should fetch help center collection', async () => {
5657
await driver.scrollToElementByAccessibilityLabel(
5758
'fetch-help-center-collections'
5859
);
5960
await (await $('~fetch-help-center-collection')).click();
61+
await driver.closeAlert();
6062
});
6163

62-
it('Should fetch filtered hel center collections', async () => {
64+
it('Should fetch filtered help center collections', async () => {
6365
await driver.scrollToElementByAccessibilityLabel('search-help-center');
6466
await (await $('~search-help-center')).click();
67+
await driver.closeAlert();
6568
});
6669

6770
it('Should display carousel', async () => {

Diff for: ‎example/src/App.tsx

+143-41
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,21 @@ import { useEffect, useState } from 'react';
33
import {
44
Alert,
55
AppState,
6+
Image,
67
Linking,
78
Platform,
89
ScrollView,
910
StatusBar,
1011
StyleSheet,
1112
Text,
12-
TextInput,
1313
View,
1414
} from 'react-native';
1515
import Intercom, {
1616
IntercomEvents,
1717
Visibility,
1818
} from '@intercom/intercom-react-native';
1919
import Button from './Button';
20+
import Input from './Input';
2021
import type { Registration } from '../../lib/typescript';
2122
import Config from 'react-native-config';
2223

@@ -42,10 +43,27 @@ export default function App() {
4243
const [launcherVisibility, setLauncherVisibility] = useState<boolean>(false);
4344
const [user, setUser] = useState<Registration>({ email: '' });
4445

46+
const [articleId, setArticleId] = useState<string | undefined>(ARTICLE_ID);
47+
const [carouselId, setCarouselId] = useState<string | undefined>(CAROUSEL_ID);
48+
const [eventName, setEventName] = useState<string | undefined>(EVENT_NAME);
49+
const [collectionId, setCollectionId] = useState<string | undefined>(
50+
COLLECTION_ID
51+
);
52+
const [searchTerm, setSearchTerm] = useState<string | undefined>(SEARCH_TERM);
53+
const [userName, setUserName] = useState<string | undefined>(USER_NAME);
54+
4555
const showErrorAlert = (e: Error) => {
4656
Alert.alert('ERROR', JSON.stringify(e));
4757
};
4858

59+
const showResponseAlert = (obj: any) => {
60+
Alert.alert('RESPONSE', JSON.stringify(obj));
61+
};
62+
63+
const showEmptyAlertMessage = (field: string) => {
64+
Alert.alert(field, `Please provide ${field}`);
65+
};
66+
4967
useEffect(() => {
5068
/**
5169
* Handle PushNotification
@@ -92,6 +110,11 @@ export default function App() {
92110

93111
return (
94112
<View style={styles.container} accessibilityLabel="app-root">
113+
<StatusBar translucent={true} />
114+
<View style={[styles.row, styles.alignCenter, styles.header]}>
115+
<Image source={require('../assets/intercom.png')} style={styles.logo} />
116+
<Text style={styles.title}>Intercom Example App</Text>
117+
</View>
95118
<View style={styles.textContainer}>
96119
<View style={styles.row}>
97120
<View style={styles.visibilityContainer}>
@@ -134,9 +157,9 @@ export default function App() {
134157
Intercom.registerUnidentifiedUser().then(() => setLoggedUser(true));
135158
}}
136159
/>
137-
<TextInput
160+
<Input
161+
title="Email"
138162
accessibilityLabel="user-email"
139-
style={styles.input}
140163
value={user.email}
141164
onChangeText={(val) => {
142165
setUser((prev) => ({ ...prev, email: val }));
@@ -147,18 +170,15 @@ export default function App() {
147170
/>
148171
<Button
149172
accessibilityLabel="login-identified"
150-
disabled={loggedUser && user.email !== ''}
173+
disabled={loggedUser || user.email === ''}
151174
title="Login identified User"
152175
onPress={() => {
153176
if (user.email?.includes('@')) {
154177
Intercom.registerIdentifiedUser(user).then(() =>
155178
setLoggedUser(true)
156179
);
157180
} else {
158-
Alert.alert(
159-
'Not email',
160-
'Provide correct email: [email protected]'
161-
);
181+
showEmptyAlertMessage('Email');
162182
}
163183
}}
164184
/>
@@ -170,12 +190,25 @@ export default function App() {
170190
Intercom.displayMessenger();
171191
}}
172192
/>
193+
<Input
194+
title="Article Id"
195+
accessibilityLabel="article-id"
196+
value={articleId}
197+
onChangeText={(val) => {
198+
setArticleId(val);
199+
}}
200+
placeholder="Article Id"
201+
/>
173202
<Button
174203
accessibilityLabel="display-article"
175204
disabled={!loggedUser}
176205
title="Display Article"
177206
onPress={() => {
178-
Intercom.displayArticle(ARTICLE_ID);
207+
if (articleId) {
208+
Intercom.displayArticle(articleId);
209+
} else {
210+
showEmptyAlertMessage('Article id');
211+
}
179212
}}
180213
/>
181214
<Button
@@ -210,50 +243,91 @@ export default function App() {
210243
Intercom.fetchHelpCenterCollections()
211244
.then((items) => {
212245
console.log(items);
246+
showResponseAlert(items);
213247
})
214248
.catch((e) => {
215249
showErrorAlert(e);
216250
console.error(e);
217251
});
218252
}}
219253
/>
254+
<Input
255+
title="Help Center Collection Id"
256+
accessibilityLabel="search-term"
257+
value={collectionId}
258+
onChangeText={(val) => {
259+
setCollectionId(val);
260+
}}
261+
placeholder="Help Center Collection Id"
262+
/>
220263
<Button
221264
accessibilityLabel="fetch-help-center-collection"
222265
disabled={!loggedUser}
223266
title="Fetch Help Center Collection"
224267
onPress={() => {
225-
Intercom.fetchHelpCenterCollection(COLLECTION_ID)
226-
.then((item) => {
227-
console.log(item);
228-
})
229-
.catch((e) => {
230-
showErrorAlert(e);
231-
console.error(e);
232-
});
268+
if (collectionId) {
269+
Intercom.fetchHelpCenterCollection(collectionId)
270+
.then((item) => {
271+
console.log(item);
272+
showResponseAlert(item);
273+
})
274+
.catch((e) => {
275+
showErrorAlert(e);
276+
console.error(e);
277+
});
278+
} else {
279+
showEmptyAlertMessage('Collection id');
280+
}
281+
}}
282+
/>
283+
<Input
284+
title="Search term"
285+
accessibilityLabel="search-term"
286+
value={searchTerm}
287+
onChangeText={(val) => {
288+
setSearchTerm(val);
233289
}}
290+
placeholder="Search term"
234291
/>
235292
<Button
236293
accessibilityLabel="search-help-center"
237294
disabled={!loggedUser}
238295
title="Search Help Center"
239296
onPress={() => {
240-
Intercom.searchHelpCenter(SEARCH_TERM)
241-
.then((item) => {
242-
console.log(item);
243-
})
244-
.catch((e) => {
245-
showErrorAlert(e);
246-
console.error(e);
247-
});
297+
if (searchTerm) {
298+
Intercom.searchHelpCenter(searchTerm)
299+
.then((item) => {
300+
console.log(item);
301+
showResponseAlert(item);
302+
})
303+
.catch((e) => {
304+
showErrorAlert(e);
305+
console.error(e);
306+
});
307+
} else {
308+
showEmptyAlertMessage('Search Term');
309+
}
248310
}}
249311
/>
312+
<Input
313+
title="Carousel Id"
314+
accessibilityLabel="carousel-id"
315+
value={carouselId}
316+
onChangeText={(val) => {
317+
setCarouselId(val);
318+
}}
319+
placeholder="Carousel Id"
320+
/>
250321
<Button
251322
accessibilityLabel="display-carousel"
252323
disabled={!loggedUser}
253324
title={'Display Carousel'}
254325
onPress={() => {
255-
console.log(CAROUSEL_ID);
256-
Intercom.displayCarousel(CAROUSEL_ID);
326+
if (carouselId) {
327+
Intercom.displayCarousel(carouselId);
328+
} else {
329+
showEmptyAlertMessage('Carousel Id');
330+
}
257331
}}
258332
/>
259333
<Button
@@ -295,12 +369,25 @@ export default function App() {
295369
);
296370
}}
297371
/>
372+
<Input
373+
title="Event name"
374+
accessibilityLabel="event-name"
375+
value={eventName}
376+
onChangeText={(val) => {
377+
setEventName(val);
378+
}}
379+
placeholder="Event name"
380+
/>
298381
<Button
299382
accessibilityLabel="log-event"
300383
disabled={!loggedUser}
301384
title="Log Event"
302385
onPress={() => {
303-
Intercom.logEvent(EVENT_NAME);
386+
if (eventName) {
387+
Intercom.logEvent(eventName);
388+
} else {
389+
showEmptyAlertMessage('Event Name');
390+
}
304391
}}
305392
/>
306393
<Button
@@ -311,12 +398,26 @@ export default function App() {
311398
Intercom.sendTokenToIntercom(TOKEN);
312399
}}
313400
/>
401+
402+
<Input
403+
title="User Name"
404+
accessibilityLabel="user-name"
405+
value={userName}
406+
onChangeText={(val) => {
407+
setUserName(val);
408+
}}
409+
placeholder="User Name"
410+
/>
314411
<Button
315412
accessibilityLabel="update-user"
316413
disabled={!loggedUser}
317414
title="Update user's name"
318415
onPress={() => {
319-
Intercom.updateUser({ name: USER_NAME });
416+
if (userName) {
417+
Intercom.updateUser({ name: userName });
418+
} else {
419+
showEmptyAlertMessage('User Name');
420+
}
320421
}}
321422
/>
322423
<Button
@@ -335,28 +436,29 @@ export default function App() {
335436
const styles = StyleSheet.create({
336437
container: {
337438
flex: 1,
338-
marginHorizontal: 16,
439+
marginHorizontal: 8,
339440
paddingTop:
340441
Platform.OS === 'ios'
341-
? (StatusBar.currentHeight ?? 0) + 24
342-
: StatusBar.currentHeight ?? 0,
442+
? (StatusBar.currentHeight ?? 0) + 35
443+
: (StatusBar.currentHeight ?? 0) + 8 ?? 8,
343444
},
344445
box: {
345446
width: 60,
346447
height: 60,
347448
marginVertical: 20,
348449
},
349-
text: { marginVertical: 6, fontSize: 18 },
450+
text: { marginVertical: 4, fontSize: 7 },
350451
textCenter: { textAlign: 'center' },
351452
boldText: { fontWeight: 'bold', color: '#242d38' },
352-
textContainer: { justifyContent: 'center', paddingVertical: 16 },
353-
input: {
354-
borderWidth: 1,
355-
borderColor: 'black',
356-
borderRadius: 8,
357-
paddingHorizontal: 8,
358-
paddingVertical: 4,
359-
},
453+
textContainer: { justifyContent: 'center', paddingVertical: 8 },
360454
row: { flexDirection: 'row' },
361455
visibilityContainer: { flex: 1, padding: 4 },
456+
logo: {
457+
width: '10%',
458+
height: undefined,
459+
aspectRatio: 1,
460+
},
461+
alignCenter: { alignItems: 'center' },
462+
title: { fontWeight: 'bold', fontSize: 17, marginLeft: 8 },
463+
header: { marginBottom: 8 },
362464
});

Diff for: ‎example/src/Input.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import type { TextInputProps } from 'react-native';
2+
import React from 'react';
3+
import { StyleSheet, View, TextInput, Text } from 'react-native';
4+
5+
const Input = ({
6+
title,
7+
style,
8+
...props
9+
}: TextInputProps & { title: string }) => {
10+
return (
11+
<View style={styles.buttonContainer}>
12+
{title && <Text style={styles.title}>{title}</Text>}
13+
<TextInput {...props} style={[styles.input, style]} />
14+
</View>
15+
);
16+
};
17+
18+
const styles = StyleSheet.create({
19+
buttonContainer: { marginVertical: 8 },
20+
title: { marginBottom: 3 },
21+
input: {
22+
borderWidth: 1,
23+
borderColor: 'black',
24+
paddingHorizontal: 8,
25+
paddingVertical: 4,
26+
},
27+
});
28+
29+
export default Input;

0 commit comments

Comments
 (0)