ordering-ui-react-native 0.15.4 → 0.15.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.15.4",
+  "version": "0.15.5",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -48,6 +48,8 @@
     "@react-navigation/material-bottom-tabs": "^5.3.14",
     "@react-navigation/native": "^5.7.6",
     "@react-navigation/stack": "^5.9.3",
+    "@segment/analytics-react-native": "^2.1.11",
+    "@segment/sovran-react-native": "^0.2.6",
     "@sentry/react-native": "^2.6.0",
     "@stripe/stripe-react-native": "^0.2.0",
     "@types/react-native-loading-spinner-overlay": "^0.5.2",

package/themes/original/index.tsx

@@ -1,5 +1,6 @@
 import { AddressForm } from './src/components/AddressForm';
 import { AddressDetails } from './src/components/AddressDetails';
+import { AnalyticsSegment } from './src/components/AnalyticsSegment';
 import { Home } from './src/components/Home';
 import { LoginForm } from './src/components/LoginForm';
 import { SignupForm } from './src/components/SignupForm';
@@ -67,6 +68,7 @@ import {
 export {
 	AddressForm,
 	AddressDetails,
+	AnalyticsSegment,
 	Home as HomeView,
 	SignupForm,
 	LoginForm,

package/themes/original/src/components/AnalyticsSegment/index.tsx

@@ -0,0 +1,127 @@
+import React, { useEffect, useState } from 'react';
+import { createClient, AnalyticsProvider } from '@segment/analytics-react-native';
+import { useEvent, useConfig } from 'ordering-components/native';
+
+export const AnalyticsSegment = (props: any) => {
+  const { children } = props
+
+  const [events] = useEvent()
+  const [configState] = useConfig()
+  const [segmentClient, setSegmentClient] = useState<any>({})
+
+  const handleClickProduct = (product: any) => {
+    segmentClient.track('Product Clicked', {
+      id: product.id,
+      name: product.name,
+      category: product.category_id,
+      price: product.price
+    })
+  }
+
+  const handleProductAdded = (product: any) => {
+    segmentClient.track('Product Added', {
+      id: product.id,
+      name: product.name,
+      category: product.category_id,
+      price: product.price,
+      quantity: product.quantity
+    })
+  }
+
+  const handleProductRemoved = (product: any) => {
+    segmentClient.track('Product Removed', {
+      id: product.id,
+      name: product.name,
+      category: product.category_id,
+      price: product.price,
+      quantity: product.quantity
+    })
+  }
+
+  const handleOrderPlaced = (order: any) => {
+    segmentClient.track('Order Placed', {
+      id: order.id,
+      affiliation: order.business?.name,
+      revenue: order.total,
+      tax: order.tax_total,
+      shipping: order.delivery_zone_price
+    })
+    segmentClient.track('Payment Info Entered', {
+      order: order.id,
+      business: order.business?.name,
+      business_id: order.business_id,
+      total: order.total,
+      tax: order.tax_total,
+      delivery: order.delivery_zone_price,
+      paymethod: order.paymethod
+    })
+  }
+
+  const handleUpdateOrder = (order: any) => {
+    segmentClient.track('Order Updated', {
+      id: order.id,
+      affiliation: order.business?.name,
+      revenue: order.total,
+      tax: order.tax_total,
+      shipping: order.delivery_zone_price
+    })
+  }
+
+  const handleAddOrder = (order: any) => {
+    segmentClient.track('Order Added', {
+      id: order.id,
+      affiliation: order.business?.name,
+      revenue: order.total,
+      tax: order.tax_total,
+      shipping: order.delivery_zone_price
+    })
+  }
+
+  const handleLogin = (data: any) => {
+    segmentClient.identify(data.id, {
+      email: data.email,
+      name: data.name
+    })
+  }
+
+  useEffect(() => {
+    if (segmentClient?.config?.writeKey) {
+      events.on('product_clicked', handleClickProduct)
+      events.on('userLogin', handleLogin)
+      events.on('product_added', handleProductAdded)
+      events.on('order_placed', handleOrderPlaced)
+      events.on('order_updated', handleUpdateOrder)
+      events.on('order_added', handleAddOrder)
+      events.on('cart_product_removed', handleProductRemoved)
+    }
+    return () => {
+      if (segmentClient?.config?.writeKey) {
+        events.off('product_clicked', handleClickProduct)
+        events.off('userLogin', handleLogin)
+        events.off('product_added', handleProductAdded)
+        events.off('order_placed', handleOrderPlaced)
+        events.off('order_updated', handleUpdateOrder)
+        events.off('order_added', handleAddOrder)
+        events.off('cart_product_removed', handleProductRemoved)
+      }
+    }
+  }, [segmentClient])
+
+  useEffect(() => {
+    if (configState?.configs?.segment_track_id?.value) {
+      const _segmentClient: any = createClient({
+        writeKey: configState?.configs?.segment_track_id?.value
+      });
+      setSegmentClient(_segmentClient)
+    }
+  }, [configState])
+
+  return (
+    <>
+      <AnalyticsProvider client={segmentClient}>
+        {children}
+      </AnalyticsProvider>
+    </>
+
+  )
+}