Add Commerce component and route: implement Commerce component with purchase tracking, define Commerce route in navigation, and create associated constants and styles

Author: lposen

example/src/components/App/Main.tsx

@@ -8,8 +8,9 @@ import type { MainScreenParamList } from '../../types';
 import { routeIcon } from './App.constants';
 import { getIcon } from './App.utils';
 import { User } from '../User';
-import Inbox from '../Inbox';
+import { Inbox } from '../Inbox';
 import { useIterableApp } from '../../hooks';
+import { Commerce } from '../Commerce';
 
 const Tab = createBottomTabNavigator<MainScreenParamList>();
 
@@ -65,6 +66,13 @@ export const Main = () => {
             },
           })}
         />
+        <Tab.Screen
+          name={Route.Commerce}
+          component={Commerce}
+          listeners={() => ({
+            tabPress: () => setIsInboxTab(false),
+          })}
+        />
         <Tab.Screen
           name={Route.User}
           component={User}

example/src/components/Commerce/Commerce.constants.ts

@@ -0,0 +1,31 @@
+export type CommerceItem = {
+  id: string;
+  name: string;
+  icon: any;
+  subtitle: string;
+  price: number;
+};
+
+export const items: CommerceItem[] = [
+  {
+    id: 'black',
+    name: 'Black Coffee',
+    icon: require('./img/black-coffee.png'),
+    subtitle: 'Maximize health benefits',
+    price: 2.53,
+  },
+  {
+    id: 'cappuccino',
+    name: 'Cappuccino',
+    icon: require('./img/cappuccino.png'),
+    subtitle: 'Tasty and creamy',
+    price: 3.56,
+  },
+  {
+    id: 'mocha',
+    name: 'Mocha',
+    icon: require('./img/mocha.png'),
+    subtitle: 'Indulge yourself',
+    price: 4.98,
+  },
+];

example/src/components/Commerce/Commerce.styles.ts

@@ -0,0 +1,67 @@
+import { StyleSheet } from 'react-native';
+import {
+  button,
+  buttonText,
+  colors,
+  container,
+  title,
+  subtitle,
+} from '../../constants';
+
+const styles = StyleSheet.create({
+  container,
+  title: { ...title, textAlign: 'center' },
+  subtitle: { ...subtitle, textAlign: 'center' },
+  cardContainer: {
+    backgroundColor: colors?.white,
+    borderWidth: 1,
+    padding: 15,
+    borderColor: colors?.grey5,
+    shadowColor: 'rgba(0,0,0, .2)',
+    shadowOffset: { height: 0, width: 0 },
+    shadowOpacity: 1,
+    shadowRadius: 1,
+    elevation: 10, // Required for Android
+    width: '100%',
+    height: 150,
+    marginBottom: 10,
+  },
+  infoContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 10,
+    alignItems: 'center',
+  },
+  imageContainer: {
+    width: 120,
+    height: 100,
+    flex: 0,
+  },
+  textContainer: {
+    paddingTop: 10,
+    flex: 1,
+    marginLeft: 10,
+  },
+  cardImage: {
+    height: '100%',
+    width: '100%',
+    resizeMode: 'contain',
+  },
+  cardTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  cardSubtitle: {
+    fontSize: 14,
+    color: colors.textSecondary,
+  },
+  price: {
+    marginVertical: 5,
+    fontWeight: 'bold',
+    color: colors.salmon50,
+  },
+  button: { ...button, width: 100, marginTop: 10, paddingVertical: 5 },
+  buttonText,
+});
+
+export default styles;

example/src/components/Commerce/Commerce.tsx

@@ -0,0 +1,66 @@
+import { Alert, Image, Pressable, ScrollView, Text, View } from 'react-native';
+
+import { Iterable, IterableCommerceItem } from '@iterable/react-native-sdk';
+
+import { items, type CommerceItem } from './Commerce.constants';
+import styles from './Commerce.styles';
+
+export const Commerce = () => {
+  const handleClick = (item: CommerceItem) => {
+    const purchasedItem = new IterableCommerceItem(
+      item.id,
+      item.name,
+      item.price,
+      1
+    );
+    const totalPrice = item.price;
+    const purchaseItems = [purchasedItem];
+    const dataFields = null;
+
+    Iterable.trackPurchase(totalPrice, purchaseItems, dataFields);
+
+    console.group('Purchase tracked with the following arguments:');
+    console.log('Total price:', totalPrice);
+    console.log('Purchase items:', [...purchaseItems]);
+    console.log('Data fields:', dataFields);
+    console.groupEnd();
+
+    Alert.alert(
+      `Tracked purchase: ${item.name}, $${item.price}`,
+      'Check logs for output'
+    );
+  };
+
+  return (
+    <ScrollView>
+      <View style={styles.container}>
+        <Text style={styles.title}>Commerce</Text>
+        <Text style={styles.subtitle}>
+          Purchase will be tracked when "Buy" is clicked. See logs for output.
+        </Text>
+        {items.map((item) => (
+          <View key={item.id} style={styles.cardContainer}>
+            <View style={styles.infoContainer}>
+              <View style={styles.imageContainer}>
+                <Image source={item.icon} style={styles.cardImage} />
+              </View>
+              <View style={styles.textContainer}>
+                <Text style={styles.cardTitle}>{item.name}</Text>
+                <Text style={styles.cardSubtitle}>{item.subtitle}</Text>
+                <Text style={styles.price}>${item.price}</Text>
+                <Pressable
+                  style={styles.button}
+                  onPress={() => handleClick(item)}
+                >
+                  <Text style={styles.buttonText}>Buy</Text>
+                </Pressable>
+              </View>
+            </View>
+          </View>
+        ))}
+      </View>
+    </ScrollView>
+  );
+};
+
+export default Commerce;

example/src/components/Commerce/img/black-coffee.png

@@ -0,0 +1,2 @@
+export * from './Commerce';
+export { default } from './Commerce';