Skip to content

Commit 85b18fa

Browse files
lposenlposen
authored
Merge pull request #748 from Iterable/loren/embedded/MOB-12270-new-embedded-view-component
[MOB-12270] new-embedded-view-component
2 parents 52c7a7b + ba7fccc commit 85b18fa

15 files changed

Lines changed: 659 additions & 106 deletions

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

Lines changed: 41 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
import { StyleSheet } from 'react-native';
2-
import { button, buttonText, container, hr, link, input, title, subtitle } from '../../constants';
3-
import { utilityColors, backgroundColors } from '../../constants/styles/colors';
2+
import {
3+
backgroundColors,
4+
button,
5+
buttonText,
6+
colors,
7+
container,
8+
hr,
9+
input,
10+
subtitle,
11+
title,
12+
utilityColors,
13+
} from '../../constants';
414

515
const styles = StyleSheet.create({
616
button,
@@ -12,27 +22,46 @@ const styles = StyleSheet.create({
1222
gap: 16,
1323
paddingHorizontal: 16,
1424
},
15-
embeddedTitle: {
16-
fontSize: 16,
17-
fontWeight: 'bold',
18-
lineHeight: 20,
19-
},
20-
embeddedTitleContainer: {
21-
display: 'flex',
22-
flexDirection: 'row',
23-
},
2425
hr,
2526
inputContainer: {
2627
marginVertical: 10,
2728
},
28-
link,
2929
subtitle: { ...subtitle, textAlign: 'center' },
3030
text: { textAlign: 'center' },
3131
textInput: input,
3232
title: { ...title, textAlign: 'center' },
3333
utilitySection: {
3434
paddingHorizontal: 16,
3535
},
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+
},
3665
warningContainer: {
3766
backgroundColor: backgroundColors.backgroundWarningSubtle,
3867
borderLeftColor: utilityColors.warning100,

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

Lines changed: 72 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ import {
88
import { useCallback, useState } from 'react';
99
import {
1010
Iterable,
11-
type IterableAction,
1211
type IterableEmbeddedMessage,
12+
IterableEmbeddedView,
13+
IterableEmbeddedViewType,
1314
} from '@iterable/react-native-sdk';
1415
import { SafeAreaView } from 'react-native-safe-area-context';
1516

@@ -20,6 +21,8 @@ export const Embedded = () => {
2021
const [embeddedMessages, setEmbeddedMessages] = useState<
2122
IterableEmbeddedMessage[]
2223
>([]);
24+
const [selectedViewType, setSelectedViewType] =
25+
useState<IterableEmbeddedViewType>(IterableEmbeddedViewType.Banner);
2326

2427
// Parse placement IDs from input
2528
const parsedPlacementIds = placementIdsInput
@@ -52,35 +55,6 @@ export const Embedded = () => {
5255
});
5356
}, [idsToFetch]);
5457

55-
const startEmbeddedImpression = useCallback(
56-
(message: IterableEmbeddedMessage) => {
57-
Iterable.embeddedManager.startImpression(
58-
message.metadata.messageId,
59-
// TODO: check if this should be changed to a number, as per the type
60-
Number(message.metadata.placementId)
61-
);
62-
},
63-
[]
64-
);
65-
66-
const pauseEmbeddedImpression = useCallback(
67-
(message: IterableEmbeddedMessage) => {
68-
Iterable.embeddedManager.pauseImpression(message.metadata.messageId);
69-
},
70-
[]
71-
);
72-
73-
const handleClick = useCallback(
74-
(
75-
message: IterableEmbeddedMessage,
76-
buttonId: string | null,
77-
action?: IterableAction | null
78-
) => {
79-
Iterable.embeddedManager.handleClick(message, buttonId, action);
80-
},
81-
[]
82-
);
83-
8458
return (
8559
<SafeAreaView style={styles.container}>
8660
<Text style={styles.title}>Embedded</Text>
@@ -96,6 +70,69 @@ export const Embedded = () => {
9670
Enter placement IDs to fetch embedded messages
9771
</Text>
9872
<View style={styles.utilitySection}>
73+
<View style={styles.viewTypeSelector}>
74+
<Text style={styles.text}>Select View Type:</Text>
75+
<View style={styles.viewTypeButtons}>
76+
<TouchableOpacity
77+
style={[
78+
styles.viewTypeButton,
79+
selectedViewType === IterableEmbeddedViewType.Banner &&
80+
styles.viewTypeButtonSelected,
81+
]}
82+
onPress={() =>
83+
setSelectedViewType(IterableEmbeddedViewType.Banner)
84+
}
85+
>
86+
<Text
87+
style={[
88+
styles.viewTypeButtonText,
89+
selectedViewType === IterableEmbeddedViewType.Banner &&
90+
styles.viewTypeButtonTextSelected,
91+
]}
92+
>
93+
Banner
94+
</Text>
95+
</TouchableOpacity>
96+
<TouchableOpacity
97+
style={[
98+
styles.viewTypeButton,
99+
selectedViewType === IterableEmbeddedViewType.Card &&
100+
styles.viewTypeButtonSelected,
101+
]}
102+
onPress={() => setSelectedViewType(IterableEmbeddedViewType.Card)}
103+
>
104+
<Text
105+
style={[
106+
styles.viewTypeButtonText,
107+
selectedViewType === IterableEmbeddedViewType.Card &&
108+
styles.viewTypeButtonTextSelected,
109+
]}
110+
>
111+
Card
112+
</Text>
113+
</TouchableOpacity>
114+
<TouchableOpacity
115+
style={[
116+
styles.viewTypeButton,
117+
selectedViewType === IterableEmbeddedViewType.Notification &&
118+
styles.viewTypeButtonSelected,
119+
]}
120+
onPress={() =>
121+
setSelectedViewType(IterableEmbeddedViewType.Notification)
122+
}
123+
>
124+
<Text
125+
style={[
126+
styles.viewTypeButtonText,
127+
selectedViewType === IterableEmbeddedViewType.Notification &&
128+
styles.viewTypeButtonTextSelected,
129+
]}
130+
>
131+
Notification
132+
</Text>
133+
</TouchableOpacity>
134+
</View>
135+
</View>
99136
<TouchableOpacity style={styles.button} onPress={syncEmbeddedMessages}>
100137
<Text style={styles.buttonText}>Sync messages</Text>
101138
</TouchableOpacity>
@@ -126,66 +163,11 @@ export const Embedded = () => {
126163
<ScrollView>
127164
<View style={styles.embeddedSection}>
128165
{embeddedMessages.map((message) => (
129-
<View key={message.metadata.messageId}>
130-
<View style={styles.embeddedTitleContainer}>
131-
<Text style={styles.embeddedTitle}>Embedded message</Text>
132-
</View>
133-
<View style={styles.embeddedTitleContainer}>
134-
<TouchableOpacity
135-
onPress={() => startEmbeddedImpression(message)}
136-
>
137-
<Text style={styles.link}>Start impression</Text>
138-
</TouchableOpacity>
139-
<Text style={styles.embeddedTitle}> | </Text>
140-
<TouchableOpacity
141-
onPress={() => pauseEmbeddedImpression(message)}
142-
>
143-
<Text style={styles.link}>Pause impression</Text>
144-
</TouchableOpacity>
145-
<Text style={styles.embeddedTitle}> | </Text>
146-
<TouchableOpacity
147-
onPress={() =>
148-
handleClick(message, null, message.elements?.defaultAction)
149-
}
150-
>
151-
<Text style={styles.link}>Handle click</Text>
152-
</TouchableOpacity>
153-
</View>
154-
155-
<Text>metadata.messageId: {message.metadata.messageId}</Text>
156-
<Text>metadata.placementId: {message.metadata.placementId}</Text>
157-
<Text>elements.title: {message.elements?.title}</Text>
158-
<Text>elements.body: {message.elements?.body}</Text>
159-
<Text>
160-
elements.defaultAction.data:{' '}
161-
{message.elements?.defaultAction?.data}
162-
</Text>
163-
<Text>
164-
elements.defaultAction.type:{' '}
165-
{message.elements?.defaultAction?.type}
166-
</Text>
167-
{(message.elements?.buttons ?? []).map((button, buttonIndex) => (
168-
<View key={`${button.id}-${buttonIndex}`}>
169-
<View style={styles.embeddedTitleContainer}>
170-
<Text>Button {buttonIndex + 1}</Text>
171-
<Text style={styles.embeddedTitle}> | </Text>
172-
<TouchableOpacity
173-
onPress={() =>
174-
handleClick(message, button.id, button.action)
175-
}
176-
>
177-
<Text style={styles.link}>Handle click</Text>
178-
</TouchableOpacity>
179-
</View>
180-
181-
<Text>button.id: {button.id}</Text>
182-
<Text>button.title: {button.title}</Text>
183-
<Text>button.action?.data: {button.action?.data}</Text>
184-
<Text>button.action?.type: {button.action?.type}</Text>
185-
</View>
186-
))}
187-
<Text>payload: {JSON.stringify(message.payload)}</Text>
188-
</View>
166+
<IterableEmbeddedView
167+
key={message.metadata.messageId}
168+
viewType={selectedViewType}
169+
message={message}
170+
/>
189171
))}
190172
</View>
191173
</ScrollView>

‎src/embedded/components/IterableEmbeddedBanner.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { View, Text } from 'react-native';
2+
3+
import type { IterableEmbeddedComponentProps } from '../types/IterableEmbeddedComponentProps';
4+
5+
export const IterableEmbeddedBanner = ({
6+
config,
7+
message,
8+
onButtonClick = () => {},
9+
}: IterableEmbeddedComponentProps) => {
10+
console.log(`🚀 > IterableEmbeddedBanner > config:`, config);
11+
console.log(`🚀 > IterableEmbeddedBanner > message:`, message);
12+
console.log(`🚀 > IterableEmbeddedBanner > onButtonClick:`, onButtonClick);
13+
14+
return (
15+
<View>
16+
<Text>IterableEmbeddedBanner</Text>
17+
</View>
18+
);
19+
};

‎src/embedded/components/IterableEmbeddedCard.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { View, Text } from 'react-native';
2+
import type { IterableEmbeddedComponentProps } from '../types/IterableEmbeddedComponentProps';
3+
4+
export const IterableEmbeddedCard = ({
5+
config,
6+
message,
7+
onButtonClick = () => {},
8+
}: IterableEmbeddedComponentProps) => {
9+
console.log(`🚀 > IterableEmbeddedCard > config:`, config);
10+
console.log(`🚀 > IterableEmbeddedCard > message:`, message);
11+
console.log(`🚀 > IterableEmbeddedCard > onButtonClick:`, onButtonClick);
12+
13+
return (
14+
<View>
15+
<Text>IterableEmbeddedCard</Text>
16+
</View>
17+
);
18+
};

‎src/embedded/components/IterableEmbeddedNotification.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { View, Text } from 'react-native';
2+
3+
import type { IterableEmbeddedComponentProps } from '../types/IterableEmbeddedComponentProps';
4+
5+
export const IterableEmbeddedNotification = ({
6+
config,
7+
message,
8+
onButtonClick = () => {},
9+
}: IterableEmbeddedComponentProps) => {
10+
console.log(`🚀 > IterableEmbeddedNotification > config:`, config);
11+
console.log(`🚀 > IterableEmbeddedNotification > message:`, message);
12+
console.log(
13+
`🚀 > IterableEmbeddedNotification > onButtonClick:`,
14+
onButtonClick
15+
);
16+
17+
return (
18+
<View>
19+
<Text>IterableEmbeddedNotification</Text>
20+
</View>
21+
);
22+
};

0 commit comments

Comments
 (0)