Variety of styling cleanups and post-rebase stuff

Author: Evan Masseau

example/src/App.tsx

@@ -19,6 +19,11 @@ import { SectionHeader } from './components/SectionHeader';
 import { ProfileTextField } from './components/ProfileTextField';
 import { ActionButton } from './components/ActionButton';
 import { ToggleButtons } from './components/ToggleButtons';
+import {
+  requestLocationPermission,
+  checkLocationPermissionState,
+  type LocationPermissionState,
+} from './PermissionHelper';
 
 export default function App() {
   // Profile state
@@ -29,11 +34,20 @@ export default function App() {
   // Feature state
   const [pushToken, setPushToken] = useState('');
   const [formsRegistered, setFormsRegistered] = useState(false);
+  const [geofencingRegistered, setGeofencingRegistered] = useState(false);
+  const [locationPermission, setLocationPermission] =
+    useState<LocationPermissionState>('none');
+
+  // Helper to refresh location permission state
+  const refreshLocationPermission = async () => {
+    const state = await checkLocationPermissionState();
+    setLocationPermission(state);
+  };
 
   // Initialize SDK and load current state on mount
   useEffect(() => {
     // Initialize the SDK with public key
-    Klaviyo.initialize('YOUR_KLAVIYO_PUBLIC_API_KEY');
+    Klaviyo.initialize('TRJ3wp');
 
     // Load current profile values from SDK
     Klaviyo.getEmail((value: string) => {
@@ -52,6 +66,11 @@ export default function App() {
       if (value) setPushToken(value);
     });
 
+    // Check initial location permission state
+    refreshLocationPermission().then(() => {
+      console.log('Fetched initial location permission state');
+    });
+
     // Set up deep linking handler
     const handleUrl = (url: string) => {
       if (Klaviyo.handleUniversalTrackingLink(url)) {
@@ -172,7 +191,38 @@ export default function App() {
     console.log('Unregistered from in-app forms');
   };
 
-  // Push notifications handler
+  // Geofencing handlers
+  const handleRegisterGeofencing = () => {
+    Klaviyo.registerGeofencing();
+    setGeofencingRegistered(true);
+    console.log('Registered for geofencing');
+  };
+
+  const handleUnregisterGeofencing = () => {
+    Klaviyo.unregisterGeofencing();
+    setGeofencingRegistered(false);
+    console.log('Unregistered from geofencing');
+  };
+
+  const handleRequestLocationPermission = async () => {
+    await requestLocationPermission();
+    // Refresh permission state after requesting
+    await refreshLocationPermission();
+  };
+
+  // Push notifications handlers
+  const handleRequestPushPermission = () => {
+    // Note: This is a placeholder. In a real app, you would use a push notification
+    // library like @react-native-firebase/messaging or react-native-push-notification
+    // to request push permissions. The Klaviyo SDK will handle the token registration
+    // when you call setPushToken.
+    Alert.alert(
+      'Push Notifications',
+      'Push notification permission requests should be handled by your push notification library (e.g., Firebase). The SDK will automatically register the token when available.',
+      [{ text: 'OK' }]
+    );
+  };
+
   const handleSetBadgeCount = () => {
     const randomBadgeCount = Math.floor(Math.random() * 10);
     Klaviyo.setBadgeCount(randomBadgeCount);
@@ -211,28 +261,39 @@ export default function App() {
             placeholder="+1234567890"
             keyboardType="phone-pad"
           />
-          <ActionButton
-            title="Set Profile"
-            onPress={handleSetProfile}
-            disabled={
-              !email.trim() && !phoneNumber.trim() && !externalId.trim()
-            }
-          />
-          <ActionButton
-            title="Reset Profile"
-            onPress={handleResetProfile}
-            destructive
-          />
+          <View style={styles.actionButtonRow}>
+            <ActionButton
+              title="Set Profile"
+              onPress={handleSetProfile}
+              disabled={
+                !email.trim() && !phoneNumber.trim() && !externalId.trim()
+              }
+              inRow
+            />
+            <ActionButton
+              title="Reset Profile"
+              onPress={handleResetProfile}
+              destructive
+              inRow
+            />
+          </View>
         </View>
 
         {/* Events Section */}
         <View style={styles.section}>
           <SectionHeader title="Events" />
-          <ActionButton
-            title="Create Test Event"
-            onPress={handleCreateTestEvent}
-          />
-          <ActionButton title="Viewed Product" onPress={handleViewedProduct} />
+          <View style={styles.actionButtonRow}>
+            <ActionButton
+              title="Test Event"
+              onPress={handleCreateTestEvent}
+              inRow
+            />
+            <ActionButton
+              title="Viewed Product"
+              onPress={handleViewedProduct}
+              inRow
+            />
+          </View>
         </View>
 
         {/* In-App Forms Section */}
@@ -244,12 +305,51 @@ export default function App() {
             isLeftActive={formsRegistered}
             onLeftPress={handleRegisterForms}
             onRightPress={handleUnregisterForms}
+            leftDisabled={formsRegistered}
+            rightDisabled={!formsRegistered}
+          />
+        </View>
+
+        {/* Geofencing & Location Section */}
+        <View style={styles.section}>
+          <SectionHeader title="Geofencing & Location" />
+          {locationPermission === 'none' && (
+            <ActionButton
+              title="Request Location Permission"
+              onPress={handleRequestLocationPermission}
+            />
+          )}
+          {locationPermission === 'inUse' && (
+            <ActionButton
+              title="Request Background Permission"
+              onPress={handleRequestLocationPermission}
+            />
+          )}
+          {locationPermission === 'background' && (
+            <View style={styles.permissionGrantedContainer}>
+              <Text style={styles.permissionGrantedText}>
+                Background Permission Granted
+              </Text>
+            </View>
+          )}
+          <ToggleButtons
+            leftLabel="Register"
+            rightLabel="Unregister"
+            isLeftActive={geofencingRegistered}
+            onLeftPress={handleRegisterGeofencing}
+            onRightPress={handleUnregisterGeofencing}
+            leftDisabled={geofencingRegistered}
+            rightDisabled={!geofencingRegistered}
           />
         </View>
 
         {/* Push Notifications Section */}
         <View style={styles.section}>
           <SectionHeader title="Push Notifications" />
+          <ActionButton
+            title="Request Push Permission"
+            onPress={handleRequestPushPermission}
+          />
           <View style={styles.pushTokenContainer}>
             <Text style={styles.pushTokenLabel}>Push Token</Text>
             <Text