Add action sheet for when user pauses while holding bag

app/(auth)/(tabs)/info/index.tsx

@@ -25,7 +25,7 @@ import LogoutLink from "@/components/custom/LogoutLink";
 import LegalLinks from "@/components/custom/LegalLinks";
 import RefreshControl from "@/components/custom/RefreshControl";
 import { VStack } from "@/components/ui/vstack";
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import usePauseDialog, { SetPause } from "@/components/custom/info/PauseDialog";
 import { IsPausedHow, SetPauseRequestBody } from "@/utils/user";
 import dayjs from "dayjs";
@@ -35,6 +35,7 @@ import { userUpdate } from "@/api/user";
 import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
 import ReadOnlySwitch from "@/components/custom/ReadOnlySwitch";
 import ThemeBackground from "@/components/custom/ThemeBackground";
+import { bagGetAllByChain } from "@/api/bag";
 
 export default function Info() {
   const { t } = useTranslation();
@@ -43,6 +44,19 @@ export default function Info() {
   const { authUser, currentChain } = useStore(authStore);
   const authUserRoles = useStore(authStoreAuthUserRoles);
   const queryClient = useQueryClient();
+  const [isUserHoldingBag, setIsUserHoldingBag] = useState(false);
+
+  useEffect(() => {
+    if (!currentChain || !authUser) {
+      setIsUserHoldingBag(false);
+      return;
+    }
+    (async () => {
+      const userBags = (await bagGetAllByChain(currentChain.uid, authUser.uid))
+        .data;
+      setIsUserHoldingBag(userBags.length > 0);
+    })();
+  }, [authUser, currentChain?.uid]);
 
   const pauseState = useMemo(() => {
     let pausedFromNow = "";
@@ -70,7 +84,7 @@ export default function Info() {
         }
       }
     }
-    return { pausedFromNow, isUserPausedHow, isUserPaused };
+    return { pausedFromNow, isUserPausedHow, isUserPaused, isUserHoldingBag };
   }, [authUser, currentChain?.uid, t]);
 
   const mutationPause = useMutation({
@@ -118,7 +132,7 @@ export default function Info() {
           ) : null}
 
           <Pressable
-            onPress={() => handleOpenPause(pauseState.isUserPausedHow)}
+            onPress={() => handleOpenPause(pauseState.isUserPausedHow, isUserHoldingBag)}
           >
             <HStack className="items-center gap-3 px-4 py-2">
               <VStack className="shrink flex-grow items-start">

assets/locales/en/translation.json

@@ -172,6 +172,9 @@
   "untilITurnItBackOn": "Until I turn it back on",
   "selectPauseDuration": "Select pause duration",
   "setTimerForACoupleOfWeeks": "Select how many weeks you want to pause your participation",
+  "youAreHoldingABag": "You are holding a bag, are you sure you want to pause?",
+  "yesPause": "Yes, pause",
+  "noGoToBags": "No, go to bags",
   "enableNotifications": "Enable notifications",
   "updateHeader": "Edit this page's header",
   "updateHeaderDesc": "This change will be visible to all loop members.",

components/custom/info/PauseDialog.tsx

@@ -18,6 +18,7 @@ import { IsPausedHowResult } from "@/utils/user";
 import { Alert } from "react-native";
 import { useActionSheet } from "@expo/react-native-action-sheet";
 import dayjs from "dayjs";
+import { router } from "expo-router";
 
 export interface SetPause {
   isPausedOrUntil: boolean | Date;
@@ -28,7 +29,10 @@ const minDate = dayjs().add(1, "day").toDate();
 export default function usePauseDialog(props: {
   onSubmit: (o: SetPause) => Promise<void>;
 }): {
-  handleOpenPause: (isPauseHow: IsPausedHowResult) => void;
+  handleOpenPause: (
+    isPauseHow: IsPausedHowResult,
+    isUserHoldingBag: boolean,
+  ) => void;
   PauseDateDialog: FC;
 } {
   const [openPauseDuration, setOpenPauseDuration] = useState(false);
@@ -80,7 +84,10 @@ export default function usePauseDialog(props: {
   const { t } = useTranslation();
   const defaultStyles = useDefaultStyles();
 
-  function handleOpenPause(isPausedHow: IsPausedHowResult) {
+  function handleOpenPause(
+    isPausedHow: IsPausedHowResult,
+    isUserHoldingBag: boolean,
+  ) {
     if (isPausedHow.sum) {
       Alert.alert(t("unPause"), t("areYouSureUnPause"), [
         {
@@ -95,38 +102,62 @@ export default function usePauseDialog(props: {
           style: "cancel",
         },
       ]);
-    } else {
+    } else if (isUserHoldingBag) {
       showActionSheetWithOptions(
         {
-          title: t("pauseUntil"),
-          options: [
-            t("selectPauseDuration"),
-            t("pauseOnlyLoop"),
-            t("untilITurnItBackOn"),
-            t("cancel"),
-          ],
-          cancelButtonIndex: 3,
+          title: t("youAreHoldingABag"),
+          options: [t("yesPause"), t("noGoToBags"), t("cancel")],
+          cancelButtonIndex: 2,
         },
         (selectedIndex) => {
           switch (selectedIndex) {
             case 0:
-              // selectPauseDuration
-              setOpenPauseDuration((s) => !s);
+              // go to bags
+              HandleShowPauseDurations();
               break;
             case 1:
-              // pauseOnlyLoop
-              form.handleSubmit("on_loop");
-              break;
-            case 2:
-              // untilITurnItBackOn
-              form.handleSubmit("on_user");
+              // go to pause options
+              router.push(`/(auth)/(tabs)/bags`);
               break;
           }
         },
       );
+    } else {
+      HandleShowPauseDurations();
     }
   }
 
+  function HandleShowPauseDurations() {
+    showActionSheetWithOptions(
+      {
+        title: t("pauseUntil"),
+        options: [
+          t("selectPauseDuration"),
+          t("pauseOnlyLoop"),
+          t("untilITurnItBackOn"),
+          t("cancel"),
+        ],
+        cancelButtonIndex: 3,
+      },
+      (selectedIndex) => {
+        switch (selectedIndex) {
+          case 0:
+            // selectPauseDuration
+            setOpenPauseDuration((s) => !s);
+            break;
+          case 1:
+            // pauseOnlyLoop
+            form.handleSubmit("on_loop");
+            break;
+          case 2:
+            // untilITurnItBackOn
+            form.handleSubmit("on_user");
+            break;
+        }
+      },
+    );
+  }
+
   const PauseDateDialog = useCallback(
     () => (
       <AlertDialog