hotfix: live order route routing bug with custom origin (#38)

roncodes · web-flow · commit 9c000286cfd1 · 2025-10-18T16:03:56.000+08:00
* hotfix: live order route routing bug with custom origin

* added custom themes and more styling configurations
diff --git a/android/link-assets-manifest.json b/android/link-assets-manifest.json
@@ -0,0 +1,4 @@
+{
+  "migIndex": 1,
+  "data": []
+}
diff --git a/assets/images/storefront-photo-2.jpg b/assets/images/storefront-photo-2.jpg
diff --git a/config/default.js b/config/default.js
@@ -2,6 +2,11 @@ import { mergeConfigs, config, toBoolean } from '../src/utils/config';
 import { toArray } from '../src/utils';
 import { faHome, faMagnifyingGlass, faMap, faShoppingCart, faUser } from '@fortawesome/free-solid-svg-icons';
 
+const backgroundImages = {
+    storefront_photo_1: require('../assets/images/storefront-photo-1.jpg'),
+    storefront_photo_2: require('../assets/images/storefront-photo-2.jpg'),
+};
+
 export const DefaultConfig = {
     theme: config('APP_THEME', 'blue'),
     storeNavigator: {
@@ -28,15 +33,28 @@ export const DefaultConfig = {
     storeCategoriesDisplay: config('STORE_CATEGORIES_DISPLAY', 'grid'), // `pills` or `grid`
     productCardStyle: config('PRODUCT_CARD_STYLE', 'bordered'), // `bordered`, `outlined`, `visio`
     backgroundImages: {
-        LoginScreen: require('../assets/images/storefront-photo-1.jpg'),
+        LoginScreen: backgroundImages[config('LOGIN_BG_IMAGE', 'storefront_photo_1')],
+        BootScreen: backgroundImages[config('BOOTSCREEN_BG_IMAGE')] ?? null,
+    },
+    storeHeader: {
+        showGradient: toBoolean(config('STORE_HEADER_SHOW_GRADIENT', 1)),
+        showLocationPicker: toBoolean(config('STORE_HEADER_SHOW_LOCATION_PICKER', 1)),
+        showTitle: toBoolean(config('STORE_HEADER_SHOW_TITLE', 1)),
+        showDescription: toBoolean(config('STORE_HEADER_SHOW_DESCRIPTION', 1)),
+        showLogo: toBoolean(config('STORE_HEADER_SHOW_LOGO', 1)),
+        logoHeight: parseInt(config('STORE_HEADER_LOGO_HEIGHT', 45)),
+        logoWidth: parseInt(config('STORE_HEADER_LOGO_WIDTH', 45)),
     },
     styles: {
         StoreHeader: {
-            direction: 'column',
-            alignItems: 'center',
-            justifyContent: 'flex-end',
-            space: '$1',
-            padding: '$4',
+            direction: config('STORE_HEADER_FLEX_DIRECTION', 'column'),
+            alignItems: config('STORE_HEADER_ALIGN_ITEMS', 'center'),
+            justifyContent: config('STORE_HEADER_JUSTIFY_CONTENT', 'flex-end'),
+            space: config('STORE_HEADER_SPACING', '$1'),
+            paddingTop: config('STORE_HEADER_PADDING_TOP', 0),
+            paddingBottom: config('STORE_HEADER_PADDING_BOTTOM', 0),
+            paddingLeft: config('STORE_HEADER_PADDING_LEFT', 0),
+            paddingRight: config('STORE_HEADER_PADDING_RIGHT', 0),
         },
     },
 };
diff --git a/ios/link-assets-manifest.json b/ios/link-assets-manifest.json
@@ -0,0 +1,4 @@
+{
+  "migIndex": 1,
+  "data": []
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/storefront-app",
-    "version": "0.0.11",
+    "version": "0.0.12",
     "private": true,
     "scripts": {
         "android": "react-native run-android",
diff --git a/react-native.config.js b/react-native.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+    assets: ['./assets/fonts'],
+};
diff --git a/src/components/LiveOrderRoute.tsx b/src/components/LiveOrderRoute.tsx
@@ -64,7 +64,7 @@ const LiveOrderRoute = ({ children, order, zoom = 1, width = '100%', height = '1
         longitudeDelta: initialDeltas,
     });
     const [zoomLevel, setZoomLevel] = useState(calculateZoomLevel(initialDeltas));
-    const [findingOrigin, setFindingOrigin] = useState(false);
+    const [findingOrigin, setFindingOrigin] = useState(true);
     const markerOffset = calculateOffset(zoomLevel);
     const driverAssigned = order.getAttribute('driver_assigned') ? new Driver(order.getAttribute('driver_assigned')) : null;
     const isOriginFoodTruck = start.resource === 'food-truck';
@@ -96,7 +96,10 @@ const LiveOrderRoute = ({ children, order, zoom = 1, width = '100%', height = '1
     };
 
     const updateOriginFromCustomOrigin = useCallback(async () => {
-        if (!customOrigin) return;
+        if (!customOrigin) {
+            setFindingOrigin(false);
+            return;
+        }
 
         if (typeof customOrigin !== 'string') {
             // Assume customOrigin is already an origin object.
@@ -146,10 +149,13 @@ const LiveOrderRoute = ({ children, order, zoom = 1, width = '100%', height = '1
 
     // Run the update when customOrigin changes.
     useEffect(() => {
-        if (!storefront || !store) return;
+        if (!storefront || !store) {
+            setFindingOrigin(false);
+            return;
+        }
 
         updateOriginFromCustomOrigin();
-    }, [storefront, store]);
+    }, [storefront, store, setFindingOrigin]);
 
     return (
         <YStack flex={1} position='relative' overflow='hidden' width={width} height={height}>
@@ -235,14 +241,16 @@ const LiveOrderRoute = ({ children, order, zoom = 1, width = '100%', height = '1
                     <LocationMarker size={markerSize} />
                 </Marker>
 
-                <MapViewDirections
-                    origin={origin}
-                    destination={destination}
-                    apikey={config('GOOGLE_MAPS_API_KEY')}
-                    strokeWidth={4}
-                    strokeColor={theme['$blue-500'].val}
-                    onReady={fitToRoute}
-                />
+                {origin && destination && findingOrigin === false && (
+                    <MapViewDirections
+                        origin={origin}
+                        destination={destination}
+                        apikey={config('GOOGLE_MAPS_API_KEY')}
+                        strokeWidth={4}
+                        strokeColor={theme['$blue-500'].val}
+                        onReady={fitToRoute}
+                    />
+                )}
             </MapView>
 
             <YStack position='absolute' style={{ ...StyleSheet.absoluteFillObject }}>
diff --git a/src/components/StoreHeader.tsx b/src/components/StoreHeader.tsx
@@ -24,7 +24,10 @@ const StoreHeader = ({ storeName, description, logoUrl, backgroundUrl, height =
 
             <Stack
                 direction={storefrontConfig('styles.StoreHeader.direction', 'column')}
-                px={storefrontConfig('styles.StoreHeader.padding', '$4')}
+                pt={storefrontConfig('styles.StoreHeader.paddingTop', 0)}
+                pb={storefrontConfig('styles.StoreHeader.paddingBottom', 0)}
+                pl={storefrontConfig('styles.StoreHeader.paddingLeft', 0)}
+                pr={storefrontConfig('styles.StoreHeader.paddingRight', 0)}
                 space={storefrontConfig('styles.StoreHeader.space', '$1')}
                 alignItems={storefrontConfig('styles.StoreHeader.alignItems', 'center')}
                 justifyContent={storefrontConfig('styles.StoreHeader.justifyContent', 'flex-end')}
@@ -33,50 +36,58 @@ const StoreHeader = ({ storeName, description, logoUrl, backgroundUrl, height =
                 zIndex={1}
             >
                 <YStack alignItems={storefrontConfig('styles.StoreHeader.alignItems', 'center')} space='$1'>
-                    {logoUrl && (
+                    {storefrontConfig('storeHeader.showLogo') && logoUrl && (
                         <YStack>
                             <FastImage
                                 source={{ uri: logoUrl }}
                                 style={{
-                                    height: 45,
-                                    width: 45,
+                                    height: storefrontConfig('storeHeader.logoHeight', 45),
+                                    width: storefrontConfig('storeHeader.logoWidth', 45),
                                 }}
                             />
                         </YStack>
                     )}
-                    <Text color='white' fontSize='$8' fontWeight='bold' numberOfLines={1}>
-                        {storeName}
-                    </Text>
-                    <YStack>
-                        {description && (
-                            <YStack alignItems='center' justifyContent='center'>
-                                <Text color='white' fontSize='$5' opacity={0.9} numberOfLines={2} textAlign='center'>
-                                    {description}
-                                </Text>
-                            </YStack>
-                        )}
-                    </YStack>
+                    {storefrontConfig('storeHeader.showTitle') && (
+                        <Text color='white' fontSize='$8' fontWeight='bold' numberOfLines={1}>
+                            {storeName}
+                        </Text>
+                    )}
+                    {storefrontConfig('storeHeader.showDescription') && (
+                        <YStack>
+                            {description && (
+                                <YStack alignItems='center' justifyContent='center'>
+                                    <Text color='white' fontSize='$5' opacity={0.9} numberOfLines={2} textAlign='center'>
+                                        {description}
+                                    </Text>
+                                </YStack>
+                            )}
+                        </YStack>
+                    )}
                 </YStack>
 
-                <YStack alignItems='center' justifyContent='center'>
-                    <StoreLocationPicker
-                        defaultStoreLocation={defaultStoreLocation}
-                        triggerStyle={{ borderWidth: 1, backgroundColor: theme['$gray-900'].val, borderRadius: 10, paddingHorizontal: 6, paddingVertical: 3 }}
-                    />
-                </YStack>
+                {storefrontConfig('storeHeader.showLocationPicker') && (
+                    <YStack alignItems='center' justifyContent='center'>
+                        <StoreLocationPicker
+                            defaultStoreLocation={defaultStoreLocation}
+                            triggerStyle={{ borderWidth: 1, backgroundColor: theme['$gray-900'].val, borderRadius: 10, paddingHorizontal: 6, paddingVertical: 3 }}
+                        />
+                    </YStack>
+                )}
             </Stack>
 
-            <LinearGradient
-                colors={['rgba(0,0,0,0.5)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0.6)', 'rgba(0,0,0,0.8)']}
-                start={{ x: 0, y: 0 }}
-                end={{ x: 0, y: 1 }}
-                style={{
-                    position: 'absolute',
-                    bottom: 0,
-                    height: '100%',
-                    width: '100%',
-                }}
-            />
+            {storefrontConfig('storeHeader.showGradient') && (
+                <LinearGradient
+                    colors={['rgba(0,0,0,0.5)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0.6)', 'rgba(0,0,0,0.8)']}
+                    start={{ x: 0, y: 0 }}
+                    end={{ x: 0, y: 1 }}
+                    style={{
+                        position: 'absolute',
+                        bottom: 0,
+                        height: '100%',
+                        width: '100%',
+                    }}
+                />
+            )}
         </Animated.View>
     );
 };
diff --git a/src/components/VehicleMarker.tsx b/src/components/VehicleMarker.tsx
@@ -67,7 +67,7 @@ const VehicleMarker = ({ vehicle, onPositionChange, onHeadingChange, onMovement,
     const latitude = vehicle.getAttribute('location.coordinates.1');
     const longitude = vehicle.getAttribute('location.coordinates.0');
 
-    // console.log(`${vehicle.id} coordinates: ${latitude} ${longitude}`);
+    console.log(`${vehicle.id} coordinates: ${latitude} ${longitude}`);
     return (
         <TrackingMarker
             ref={markerRef}
diff --git a/src/screens/BootScreen.tsx b/src/screens/BootScreen.tsx
@@ -1,18 +1,33 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigation } from '@react-navigation/native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Platform } from 'react-native';
+import { Platform, ImageBackground } from 'react-native';
 import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';
 import { Image, Spinner, XStack, Text, YStack, useTheme } from 'tamagui';
 import { LinearGradient } from 'react-native-linear-gradient';
-import { config, toArray, isArray } from '../utils';
+import { config, toArray, isArray, storefrontConfig } from '../utils';
 import { getCurrentLocationFromStorage, requestWebGeolocationPermission } from '../utils/location';
 import BootSplash from 'react-native-bootsplash';
 import SetupWarningScreen from './SetupWarningScreen';
 import useStorefront from '../hooks/use-storefront';
 import useStorage from '../hooks/use-storage';
 import { useLanguage } from '../contexts/LanguageContext';
 
+const BootScreenWrapper = ({ children, backgroundImage, backgroundColor, theme }) => {
+    const bg = (isArray(backgroundColor) ? backgroundColor[0] : backgroundColor) ?? theme.background.val;
+    const source = backgroundImage ?? null;
+
+    return source ? (
+        <ImageBackground style={[{ flex: 1, width: '100%', height: '100%' }, { backgroundColor: bg }]} source={source} resizeMode='cover'>
+            {children}
+        </ImageBackground>
+    ) : (
+        <YStack f={1} w='100%' h='100%' bg={bg}>
+            {children}
+        </YStack>
+    );
+};
+
 const APP_NAME = config('APP_NAME');
 const BootScreen = () => {
     const theme = useTheme();
@@ -24,7 +39,9 @@ const BootScreen = () => {
     const [info, setInfo] = useStorage('info', {});
     const [error, setError] = useState<Error | null>(null);
     const backgroundColor = toArray(config('BOOTSCREEN_BACKGROUND_COLOR', '$background'));
+    const backgroundImage = storefrontConfig('backgroundImages.BootScreen');
     const isGradientBackground = isArray(backgroundColor) && backgroundColor.length > 1;
+    const hasBgImage = !!backgroundImage;
 
     useEffect(() => {
         const checkLocationPermission = async () => {
@@ -88,8 +105,8 @@ const BootScreen = () => {
     }
 
     return (
-        <YStack style={{ flex: 1, width: '100%', height: '100%' }}>
-            <YStack flex={1} bg={backgroundColor[0]} alignItems='center' justifyContent='center' width='100%' height='100%' pt={insets.top} pb={insets.bottom}>
+        <BootScreenWrapper backgroundImage={backgroundImage} backgroundColor={backgroundColor} theme={theme}>
+            <YStack flex={1} bg={hasBgImage ? 'transparent' : backgroundColor[0]} alignItems='center' justifyContent='center' width='100%' height='100%' pt={insets.top} pb={insets.bottom}>
                 {isGradientBackground && (
                     <LinearGradient
                         colors={backgroundColor}
@@ -110,7 +127,7 @@ const BootScreen = () => {
                     </XStack>
                 </YStack>
             </YStack>
-        </YStack>
+        </BootScreenWrapper>
     );
 };
 
diff --git a/tamagui.config.ts b/tamagui.config.ts
@@ -1,6 +1,7 @@
 import { config as baseConfig } from '@tamagui/config/v3';
 import { createTamagui, createTheme, createTokens } from 'tamagui';
 import { config, parseConfigObjectString, flattenTailwindCssColorsObject } from './src/utils/tamagui';
+import { trueveganLightBase, trueveganDarkBase, trueveganColorPalette } from './themes/true-vegan';
 
 const customColors = parseConfigObjectString(config('CUSTOM_COLORS', ''));
 const customColorsDark = parseConfigObjectString(config('CUSTOM_COLORS_DARK', ''));
@@ -122,6 +123,7 @@ const colors = {
         800: '#9d174d',
         900: '#831843',
     },
+    ...trueveganColorPalette,
 };
 
 // Define Light and Dark Bases Using Tailwind Colors
@@ -258,6 +260,24 @@ export const themes = {
         primaryBorder: colors.orange[600],
         primaryText: colors.orange[100],
     }),
+
+    // True Vegan Light Theme
+    lightTruevegan: createTheme({
+        ...trueveganLightBase,
+        ...globalColors,
+        ...customColors,
+        ...customColorsLight,
+        ...flattenTailwindCssColorsObject(colors),
+    }),
+
+    // True Vegan Dark Theme
+    darkTruevegan: createTheme({
+        ...trueveganDarkBase,
+        ...globalColors,
+        ...customColors,
+        ...customColorsDark,
+        ...flattenTailwindCssColorsObject(colors),
+    }),
 };
 
 const tokens = createTokens({
diff --git a/themes/true-vegan.js b/themes/true-vegan.js

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "migIndex": 1,
 +  "data": []
 +}
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@fleetbase/storefront-app",`
`3`		`- "version": "0.0.11",`
	`3`	`+ "version": "0.0.12",`
`4`	`4`	`"private": true,`
`5`	`5`	`"scripts": {`
`6`	`6`	`"android": "react-native run-android",`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+module.exports = {`
	`2`	`+ assets: ['./assets/fonts'],`
	`3`	`+};`