Skip to content

Commit 8b6f82c

Browse files
lposenlposen
committed
feat: enhance Embedded component with view type selection and styling
1 parent 3b252d1 commit 8b6f82c

2 files changed

Lines changed: 139 additions & 98 deletions

File tree

‎example/src/components/Embedded/Embedded.styles.ts‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
import { StyleSheet } from 'react-native';
2-
import { button, buttonText, container, hr, link } from '../../constants';
2+
import {
3+
button,
4+
buttonText,
5+
container,
6+
hr,
7+
link,
8+
colors,
9+
} from '../../constants';
310

411
const styles = StyleSheet.create({
512
button,
@@ -26,6 +33,35 @@ const styles = StyleSheet.create({
2633
utilitySection: {
2734
paddingHorizontal: 16,
2835
},
36+
viewTypeButton: {
37+
alignItems: 'center',
38+
borderColor: colors.brandCyan,
39+
borderRadius: 8,
40+
borderWidth: 2,
41+
flex: 1,
42+
paddingHorizontal: 12,
43+
paddingVertical: 8,
44+
},
45+
viewTypeButtonSelected: {
46+
backgroundColor: colors.brandCyan,
47+
},
48+
viewTypeButtonText: {
49+
color: colors.brandCyan,
50+
fontSize: 14,
51+
fontWeight: '600',
52+
},
53+
viewTypeButtonTextSelected: {
54+
color: colors.backgroundPrimary,
55+
},
56+
viewTypeButtons: {
57+
flexDirection: 'row',
58+
gap: 8,
59+
justifyContent: 'space-around',
60+
marginTop: 8,
61+
},
62+
viewTypeSelector: {
63+
marginVertical: 12,
64+
},
2965
});
3066

3167
export default styles;

‎example/src/components/Embedded/Embedded.tsx‎

Lines changed: 102 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
22
import { useCallback, useState } from 'react';
33
import {
44
Iterable,
5-
type IterableAction,
5+
// type IterableAction,
66
type IterableEmbeddedMessage,
7+
IterableEmbeddedView,
8+
IterableEmbeddedViewType,
79
} from '@iterable/react-native-sdk';
810

911
import styles from './Embedded.styles';
@@ -13,6 +15,8 @@ export const Embedded = () => {
1315
const [embeddedMessages, setEmbeddedMessages] = useState<
1416
IterableEmbeddedMessage[]
1517
>([]);
18+
const [selectedViewType, setSelectedViewType] =
19+
useState<IterableEmbeddedViewType>(IterableEmbeddedViewType.Banner);
1620

1721
const syncEmbeddedMessages = useCallback(() => {
1822
Iterable.embeddedManager.syncMessages();
@@ -49,52 +53,108 @@ export const Embedded = () => {
4953
});
5054
}, [getPlacementIds]);
5155

52-
const startEmbeddedImpression = useCallback(
53-
(message: IterableEmbeddedMessage) => {
54-
console.log(`startEmbeddedImpression`, message);
55-
Iterable.embeddedManager.startImpression(
56-
message.metadata.messageId,
57-
// TODO: check if this should be changed to a number, as per the type
58-
Number(message.metadata.placementId)
59-
);
60-
},
61-
[]
62-
);
56+
// const startEmbeddedImpression = useCallback(
57+
// (message: IterableEmbeddedMessage) => {
58+
// console.log(`startEmbeddedImpression`, message);
59+
// Iterable.embeddedManager.startImpression(
60+
// message.metadata.messageId,
61+
// // TODO: check if this should be changed to a number, as per the type
62+
// Number(message.metadata.placementId)
63+
// );
64+
// },
65+
// []
66+
// );
6367

64-
const pauseEmbeddedImpression = useCallback(
65-
(message: IterableEmbeddedMessage) => {
66-
console.log(`pauseEmbeddedImpression:`, message);
67-
Iterable.embeddedManager.pauseImpression(message.metadata.messageId);
68-
},
69-
[]
70-
);
68+
// const pauseEmbeddedImpression = useCallback(
69+
// (message: IterableEmbeddedMessage) => {
70+
// console.log(`pauseEmbeddedImpression:`, message);
71+
// Iterable.embeddedManager.pauseImpression(message.metadata.messageId);
72+
// },
73+
// []
74+
// );
7175

72-
const handleClick = useCallback(
73-
(
74-
message: IterableEmbeddedMessage,
75-
buttonId: string | null,
76-
action?: IterableAction | null
77-
) => {
78-
console.log(`handleClick:`, message);
79-
Iterable.embeddedManager.handleClick(message, buttonId, action);
80-
},
81-
[]
82-
);
76+
// const handleClick = useCallback(
77+
// (
78+
// message: IterableEmbeddedMessage,
79+
// buttonId: string | null,
80+
// action?: IterableAction | null
81+
// ) => {
82+
// console.log(`handleClick:`, message);
83+
// Iterable.embeddedManager.handleClick(message, buttonId, action);
84+
// },
85+
// []
86+
// );
8387

8488
return (
8589
<View style={styles.container}>
8690
<Text style={styles.text}>EMBEDDED</Text>
8791
<View style={styles.utilitySection}>
88-
<Text style={styles.text}>
89-
Does embedded class exist? {Iterable.embeddedManager ? 'Yes' : 'No'}
90-
</Text>
91-
<Text style={styles.text}>
92-
Is embedded manager enabled?
93-
{Iterable.embeddedManager.isEnabled ? 'Yes' : 'No'}
94-
</Text>
9592
<Text style={styles.text}>
9693
Placement ids: [{placementIds.join(', ')}]
9794
</Text>
95+
<View style={styles.viewTypeSelector}>
96+
<Text style={styles.text}>Select View Type:</Text>
97+
<View style={styles.viewTypeButtons}>
98+
<TouchableOpacity
99+
style={[
100+
styles.viewTypeButton,
101+
selectedViewType === IterableEmbeddedViewType.Banner &&
102+
styles.viewTypeButtonSelected,
103+
]}
104+
onPress={() =>
105+
setSelectedViewType(IterableEmbeddedViewType.Banner)
106+
}
107+
>
108+
<Text
109+
style={[
110+
styles.viewTypeButtonText,
111+
selectedViewType === IterableEmbeddedViewType.Banner &&
112+
styles.viewTypeButtonTextSelected,
113+
]}
114+
>
115+
Banner
116+
</Text>
117+
</TouchableOpacity>
118+
<TouchableOpacity
119+
style={[
120+
styles.viewTypeButton,
121+
selectedViewType === IterableEmbeddedViewType.Card &&
122+
styles.viewTypeButtonSelected,
123+
]}
124+
onPress={() => setSelectedViewType(IterableEmbeddedViewType.Card)}
125+
>
126+
<Text
127+
style={[
128+
styles.viewTypeButtonText,
129+
selectedViewType === IterableEmbeddedViewType.Card &&
130+
styles.viewTypeButtonTextSelected,
131+
]}
132+
>
133+
Card
134+
</Text>
135+
</TouchableOpacity>
136+
<TouchableOpacity
137+
style={[
138+
styles.viewTypeButton,
139+
selectedViewType === IterableEmbeddedViewType.Notification &&
140+
styles.viewTypeButtonSelected,
141+
]}
142+
onPress={() =>
143+
setSelectedViewType(IterableEmbeddedViewType.Notification)
144+
}
145+
>
146+
<Text
147+
style={[
148+
styles.viewTypeButtonText,
149+
selectedViewType === IterableEmbeddedViewType.Notification &&
150+
styles.viewTypeButtonTextSelected,
151+
]}
152+
>
153+
Notification
154+
</Text>
155+
</TouchableOpacity>
156+
</View>
157+
</View>
98158
<TouchableOpacity style={styles.button} onPress={syncEmbeddedMessages}>
99159
<Text style={styles.buttonText}>Sync messages</Text>
100160
</TouchableOpacity>
@@ -115,66 +175,11 @@ export const Embedded = () => {
115175
<ScrollView>
116176
<View style={styles.embeddedSection}>
117177
{embeddedMessages.map((message) => (
118-
<View key={message.metadata.messageId}>
119-
<View style={styles.embeddedTitleContainer}>
120-
<Text style={styles.embeddedTitle}>Embedded message</Text>
121-
</View>
122-
<View style={styles.embeddedTitleContainer}>
123-
<TouchableOpacity
124-
onPress={() => startEmbeddedImpression(message)}
125-
>
126-
<Text style={styles.link}>Start impression</Text>
127-
</TouchableOpacity>
128-
<Text style={styles.embeddedTitle}> | </Text>
129-
<TouchableOpacity
130-
onPress={() => pauseEmbeddedImpression(message)}
131-
>
132-
<Text style={styles.link}>Pause impression</Text>
133-
</TouchableOpacity>
134-
<Text style={styles.embeddedTitle}> | </Text>
135-
<TouchableOpacity
136-
onPress={() =>
137-
handleClick(message, null, message.elements?.defaultAction)
138-
}
139-
>
140-
<Text style={styles.link}>Handle click</Text>
141-
</TouchableOpacity>
142-
</View>
143-
144-
<Text>metadata.messageId: {message.metadata.messageId}</Text>
145-
<Text>metadata.placementId: {message.metadata.placementId}</Text>
146-
<Text>elements.title: {message.elements?.title}</Text>
147-
<Text>elements.body: {message.elements?.body}</Text>
148-
<Text>
149-
elements.defaultAction.data:{' '}
150-
{message.elements?.defaultAction?.data}
151-
</Text>
152-
<Text>
153-
elements.defaultAction.type:{' '}
154-
{message.elements?.defaultAction?.type}
155-
</Text>
156-
{(message.elements?.buttons ?? []).map((button, buttonIndex) => (
157-
<View key={`${button.id}-${buttonIndex}`}>
158-
<View style={styles.embeddedTitleContainer}>
159-
<Text>Button {buttonIndex + 1}</Text>
160-
<Text style={styles.embeddedTitle}> | </Text>
161-
<TouchableOpacity
162-
onPress={() =>
163-
handleClick(message, button.id, button.action)
164-
}
165-
>
166-
<Text style={styles.link}>Handle click</Text>
167-
</TouchableOpacity>
168-
</View>
169-
170-
<Text>button.id: {button.id}</Text>
171-
<Text>button.title: {button.title}</Text>
172-
<Text>button.action?.data: {button.action?.data}</Text>
173-
<Text>button.action?.type: {button.action?.type}</Text>
174-
</View>
175-
))}
176-
<Text>payload: {JSON.stringify(message.payload)}</Text>
177-
</View>
178+
<IterableEmbeddedView
179+
key={message.metadata.messageId}
180+
viewType={selectedViewType}
181+
message={message}
182+
/>
178183
))}
179184
</View>
180185
</ScrollView>

0 commit comments

Comments
 (0)