Add secondary FAB for GPS trip

src/components/FloatingGPSButton/index.native.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import {PressableWithoutFeedback} from '@components/Pressable';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import {generateReportID} from '@libs/ReportUtils';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+
+function FloatingGpsButton() {
+    const [gpsDraftDetails] = useOnyx(ONYXKEYS.GPS_DRAFT_DETAILS, {canBeMissing: true});
+    const {translate} = useLocalize();
+
+    const icons = useMemoizedLazyExpensifyIcons(['Location'] as const);
+    const {textMutedReversed} = useTheme();
+    const styles = useThemeStyles();
+
+    if (!gpsDraftDetails?.isTracking) {
+        return null;
+    }
+
+    const navigateToGpsScreen = () => {
+        const reportID = gpsDraftDetails?.reportID ?? generateReportID();
+        Navigation.navigate(ROUTES.DISTANCE_REQUEST_CREATE_TAB_GPS.getRoute(CONST.IOU.ACTION.CREATE, CONST.IOU.TYPE.CREATE, CONST.IOU.OPTIMISTIC_TRANSACTION_ID, reportID));
+    };
+
+    return (
+        <PressableWithoutFeedback
+            style={[styles.navigationTabBarFABItem, styles.ph0, styles.userSelectNone, styles.floatingGpsButton]}
+            accessibilityLabel={translate('gps.fabGpsTripExplained')}
+            onPress={navigateToGpsScreen}
+            role={CONST.ROLE.BUTTON}
+            testID="floating-gps-button"
+        >
+            <View
+                style={styles.floatingSecondaryActionButton}
+                testID="floating-gps-button-container"
+            >
+                <Icon
+                    fill={textMutedReversed}
+                    src={icons.Location}
+                    width={variables.iconSizeNormal}
+                    height={variables.iconSizeNormal}
+                />
+            </View>
+        </PressableWithoutFeedback>
+    );
+}
+
+FloatingGpsButton.displayName = 'FloatingGpsButton';
+
+export default FloatingGpsButton;

src/components/FloatingGPSButton/index.tsx

@@ -0,0 +1,7 @@
+function FloatingGpsButton() {
+    return null;
+}
+
+FloatingGpsButton.displayName = 'FloatingGpsButton';
+
+export default FloatingGpsButton;

src/components/Navigation/NavigationTabBar/index.tsx

@@ -5,6 +5,7 @@ import {View} from 'react-native';
 import type {OnyxCollection} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import FloatingCameraButton from '@components/FloatingCameraButton';
+import FloatingGPSButton from '@components/FloatingGPSButton';
 import Icon from '@components/Icon';
 // import * as Expensicons from '@components/Icon/Expensicons';
 import ImageSVG from '@components/ImageSVG';
@@ -51,10 +52,10 @@ import NAVIGATION_TABS from './NAVIGATION_TABS';
 type NavigationTabBarProps = {
     selectedTab: ValueOf<typeof NAVIGATION_TABS>;
     isTopLevelBar?: boolean;
-    shouldShowFloatingCameraButton?: boolean;
+    shouldShowFloatingButtons?: boolean;
 };
 
-function NavigationTabBar({selectedTab, isTopLevelBar = false, shouldShowFloatingCameraButton = true}: NavigationTabBarProps) {
+function NavigationTabBar({selectedTab, isTopLevelBar = false, shouldShowFloatingButtons = true}: NavigationTabBarProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
 
@@ -512,7 +513,12 @@ function NavigationTabBar({selectedTab, isTopLevelBar = false, shouldShowFloatin
                     onPress={navigateToSettings}
                 />
             </View>
-            {shouldShowFloatingCameraButton && <FloatingCameraButton />}
+            {shouldShowFloatingButtons && (
+                <>
+                    <FloatingGPSButton />
+                    <FloatingCameraButton />
+                </>
+            )}
         </>
     );
 }

src/languages/de.ts

@@ -8049,7 +8049,8 @@ Hier ist ein *Testbeleg*, um dir zu zeigen, wie es funktioniert:`,
             subtitle: 'Protokolliere Meilen oder Kilometer automatisch mit GPS und verwandle Fahrten sofort in Ausgaben.',
             button: 'App herunterladen',
         },
-        notification: {title: 'GPS-Tracking läuft', body: 'Wechsel zur App, um abzuschließen'},
+        notification: {title: 'GPS-Tracking läuft', body: 'Zur App gehen, um abzuschließen'},
+        fabGpsTripExplained: 'Zur GPS-Ansicht wechseln (Schnellaktion)',
     },
 };
 // IMPORTANT: This line is manually replaced in generate translation files by scripts/generateTranslations.ts,

src/languages/en.ts

@@ -7132,6 +7132,7 @@ const translations = {
             title: 'GPS tracking in progress',
             body: 'Go to the app to finish',
         },
+        fabGpsTripExplained: 'Go to GPS screen (Floating action)',
     },
     reportCardLostOrDamaged: {
         screenTitle: 'Report card lost or damaged',

src/languages/es.ts

@@ -8159,6 +8159,7 @@ ${amount} para ${merchant} - ${date}`,
             title: 'Seguimiento GPS en curso',
             body: 'Ve a la app para finalizar',
         },
+        fabGpsTripExplained: 'Ir a la pantalla de GPS (Acción flotante)',
     },
 };
 

src/languages/fr.ts

@@ -8057,6 +8057,7 @@ Voici un *reçu test* pour vous montrer comment cela fonctionne :`,
             button: 'Télécharger l’application',
         },
         notification: {title: 'Suivi GPS en cours', body: 'Allez dans l’application pour terminer'},
+        fabGpsTripExplained: 'Aller à l’écran GPS (action flottante)',
     },
 };
 // IMPORTANT: This line is manually replaced in generate translation files by scripts/generateTranslations.ts,

src/languages/it.ts

@@ -8037,7 +8037,8 @@ Ecco una *ricevuta di prova* per mostrarti come funziona:`,
             subtitle: 'Registra automaticamente miglia o chilometri con il GPS e trasforma i viaggi in spese all’istante.',
             button: 'Scarica l’app',
         },
-        notification: {title: 'Tracciamento GPS in corso', body: "Vai all'app per completare"},
+        notification: {title: 'Tracciamento GPS in corso', body: "Vai all'app per terminare"},
+        fabGpsTripExplained: 'Vai alla schermata GPS (azione flottante)',
     },
 };
 // IMPORTANT: This line is manually replaced in generate translation files by scripts/generateTranslations.ts,

src/languages/ja.ts

@@ -7952,6 +7952,7 @@ Expensify の使い方をお見せするための*テストレシート*がこ
         preciseLocationRequiredModal: {title: '正確な位置情報が必要です', prompt: 'GPS距離の追跡を開始するには、デバイスの設定で「正確な位置情報」を有効にしてください。'},
         desktop: {title: 'スマートフォンで距離を記録する', subtitle: 'GPS で自動的にマイルまたはキロメートルを記録し、移動をすぐに経費に変換します。', button: 'アプリをダウンロード'},
         notification: {title: 'GPS追跡を実行中', body: '完了するにはアプリに移動'},
+        fabGpsTripExplained: 'GPS画面へ移動（フローティングアクション）',
     },
 };
 // IMPORTANT: This line is manually replaced in generate translation files by scripts/generateTranslations.ts,

src/languages/nl.ts

@@ -8015,7 +8015,8 @@ Hier is een *testbon* om je te laten zien hoe het werkt:`,
         },
         preciseLocationRequiredModal: {title: 'Precieze locatie vereist', prompt: 'Schakel "precieze locatie" in de instellingen van je apparaat in om GPS-afstandsregistratie te starten.'},
         desktop: {title: 'Volg afstand op je telefoon', subtitle: 'Leg kilometers of mijlen automatisch vast met GPS en zet ritten direct om in uitgaven.', button: 'Download de app'},
-        notification: {title: 'GPS-tracking bezig', body: 'Ga naar de app om af te ronden'},
+        notification: {title: 'GPS-tracking bezig', body: 'Ga naar de app om te voltooien'},
+        fabGpsTripExplained: 'Ga naar GPS-scherm (Zwevende actie)',
     },
 };
 // IMPORTANT: This line is manually replaced in generate translation files by scripts/generateTranslations.ts,

src/languages/pl.ts

@@ -7998,7 +7998,8 @@ Oto *paragon testowy*, który pokazuje, jak to działa:`,
             subtitle: 'Automatycznie rejestruj mile lub kilometry za pomocą GPS i natychmiast zamieniaj podróże w wydatki.',
             button: 'Pobierz aplikację',
         },
-        notification: {title: 'Śledzenie GPS w toku', body: 'Przejdź do aplikacji, aby zakończyć'},
+        notification: {title: 'Śledzenie GPS w toku', body: 'Przejdź do aplikacji, aby dokończyć'},
+        fabGpsTripExplained: 'Przejdź do ekranu GPS (przycisk akcji)',
     },
 };
 // IMPORTANT: This line is manually replaced in generate translation files by scripts/generateTranslations.ts,

src/languages/pt-BR.ts

@@ -8008,7 +8008,8 @@ Aqui está um *recibo de teste* para mostrar como funciona:`,
             subtitle: 'Registre milhas ou quilômetros automaticamente com o GPS e transforme viagens em despesas instantaneamente.',
             button: 'Baixar o app',
         },
-        notification: {title: 'Rastreamento de GPS em andamento', body: 'Vá para o app para finalizar'},
+        notification: {title: 'Rastreamento por GPS em andamento', body: 'Ir para o app para finalizar'},
+        fabGpsTripExplained: 'Ir para a tela de GPS (Ação flutuante)',
     },
 };
 // IMPORTANT: This line is manually replaced in generate translation files by scripts/generateTranslations.ts,

src/languages/zh-hans.ts

@@ -7798,6 +7798,7 @@ ${reportName}
         preciseLocationRequiredModal: {title: '需要精确位置', prompt: '请在设备设置中启用“精确位置”以开始 GPS 距离跟踪。'},
         desktop: {title: '在手机上跟踪距离', subtitle: '使用 GPS 自动记录英里或公里，并将行程即时转换为报销费用。', button: '下载应用程序'},
         notification: {title: '正在进行 GPS 跟踪', body: '前往应用完成'},
+        fabGpsTripExplained: '前往 GPS 屏幕（悬浮操作）',
     },
 };
 // IMPORTANT: This line is manually replaced in generate translation files by scripts/generateTranslations.ts,

src/libs/actions/GPSDraftDetails.ts

@@ -20,13 +20,14 @@ function setEndAddress(endAddress: GpsDraftDetails['endAddress']) {
     });
 }
 
-function initGpsDraft() {
+function initGpsDraft(reportID: string) {
     Onyx.merge(ONYXKEYS.GPS_DRAFT_DETAILS, {
         gpsPoints: [],
         isTracking: true,
         distanceInMeters: 0,
         startAddress: {value: '', type: 'coordinates'},
         endAddress: {value: '', type: 'coordinates'},
+        reportID,
     });
 }
 

src/pages/domain/DomainInitialPage.tsx

@@ -98,7 +98,7 @@ function DomainInitialPage({route}: DomainInitialPageProps) {
                 !shouldDisplayLHB && (
                     <NavigationTabBar
                         selectedTab={NAVIGATION_TABS.WORKSPACES}
-                        shouldShowFloatingCameraButton={false}
+                        shouldShowFloatingButtons={false}
                     />
                 )
             }

src/pages/iou/request/step/IOURequestStepDistanceGPS/GPSButtons/index.tsx

@@ -19,9 +19,10 @@ type ButtonsProps = {
     navigateToNextStep: () => void;
     setShouldShowStartError: React.Dispatch<React.SetStateAction<boolean>>;
     setShouldShowPermissionsError: React.Dispatch<React.SetStateAction<boolean>>;
+    reportID: string;
 };
 
-function GPSButtons({navigateToNextStep, setShouldShowStartError, setShouldShowPermissionsError}: ButtonsProps) {
+function GPSButtons({navigateToNextStep, setShouldShowStartError, setShouldShowPermissionsError, reportID}: ButtonsProps) {
     const [startPermissionsFlow, setStartPermissionsFlow] = useState(false);
     const [showLocationRequiredModal, setShowLocationRequiredModal] = useState(false);
     const [showDiscardConfirmation, setShowDiscardConfirmation] = useState(false);
@@ -77,7 +78,7 @@ function GPSButtons({navigateToNextStep, setShouldShowStartError, setShouldShowP
             return;
         }
 
-        initGpsDraft();
+        initGpsDraft(reportID);
     };
 
     const onNext = () => {

src/pages/iou/request/step/IOURequestStepDistanceGPS/index.native.tsx

@@ -20,7 +20,7 @@ import Waypoints from './Waypoints';
 function IOURequestStepDistanceGPS({
     report,
     route: {
-        params: {action, iouType, reportActionID},
+        params: {action, reportID, iouType, reportActionID},
     },
     transaction,
 }: IOURequestStepDistanceGPSProps) {
@@ -71,6 +71,7 @@ function IOURequestStepDistanceGPS({
                     navigateToNextStep={() => {}}
                     setShouldShowStartError={setShouldShowStartError}
                     setShouldShowPermissionsError={setShouldShowPermissionsError}
+                    reportID={reportID}
                 />
             </View>
         </StepScreenWrapper>

src/pages/workspace/WorkspaceInitialPage.tsx

@@ -504,7 +504,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
                 !shouldDisplayLHB && (
                     <NavigationTabBar
                         selectedTab={NAVIGATION_TABS.WORKSPACES}
-                        shouldShowFloatingCameraButton={false}
+                        shouldShowFloatingButtons={false}
                     />
                 )
             }

src/pages/workspace/WorkspacesListPage.tsx

@@ -759,7 +759,7 @@ function WorkspacesListPage() {
                 shouldUseNarrowLayout && (
                     <NavigationTabBar
                         selectedTab={NAVIGATION_TABS.WORKSPACES}
-                        shouldShowFloatingCameraButton={false}
+                        shouldShowFloatingButtons={false}
                     />
                 )
             }

src/styles/index.ts

@@ -1638,6 +1638,15 @@ const staticStyles = (theme: ThemeColors) =>
             justifyContent: 'center',
         },
 
+        floatingSecondaryActionButton: {
+            backgroundColor: theme.buttonDefaultBG,
+            height: variables.componentSizeLarge,
+            width: variables.componentSizeLarge,
+            borderRadius: 999,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+
         floatingActionButtonSmall: {
             width: variables.componentSizeNormal,
             height: variables.componentSizeNormal,
@@ -1650,6 +1659,15 @@ const staticStyles = (theme: ThemeColors) =>
             zIndex: 10,
         },
 
+        floatingGpsButton: {
+            position: 'absolute',
+            // floatingCameraButton top property value (componentSizeLarge + 16) +
+            // + floatingGpsButton height (componentSizeLarge) + gap (12) = 2 * componentSizeLarge + 28
+            top: 2 * -variables.componentSizeLarge - 28,
+            right: 16,
+            zIndex: 10,
+        },
+
         topBarLabel: {
             color: theme.text,
             fontSize: variables.fontSizeXLarge,

src/types/onyx/GpsDraftDetails.ts

@@ -31,6 +31,9 @@ type GpsDraftDetails = {
 
     /** Is GPS trip in progress */
     isTracking: boolean;
+
+    /** reportID of the ongoing GPS trip */
+    reportID: string;
 };
 
 export default GpsDraftDetails;