Merge pull request #413 from wavect/wsdt/quickactions

feat: quick actions

Author: wsdt

mobile/AppRoot.tsx

@@ -7,6 +7,7 @@ import { ROUTES } from "./screens/routes";
 
 import Welcome from "./screens/Welcome";
 
+import { useQuickAction } from "@/hooks/useQuickAction";
 import { TR, i18n } from "@/localization/translate.service";
 import ResetPassword from "@/screens/ResetPassword";
 import AppIntroductionSwiperScreen from "@/screens/onboarding/AppIntroductionSlider";
@@ -95,6 +96,8 @@ export default function App() {
 
     const navContainerRef = useRef<NavigationContainerRef<any>>(null);
 
+    useQuickAction();
+
     useEffect(() => {
         async function prepare() {
             try {

mobile/app.json

@@ -171,7 +171,18 @@
                     "project": "offlinery-app",
                     "organization": "wavect"
                 }
-            ]
+            ],
+          [
+            "expo-quick-actions",
+            {
+              "androidIcons": {
+                "help_icon": {
+                  "foregroundImage": "./assets/quick-actions/adaptive-icon-foreground-help.png",
+                  "backgroundColor": "#36797d"
+                }
+              }
+            }
+          ]
         ],
         "extra": {
             "eas": {

mobile/assets/quick-actions/adaptive-icon-foreground-help.png

@@ -0,0 +1,58 @@
+import { i18n, TR } from "@/localization/translate.service";
+import { sendEmail } from "@/utils/email";
+import { SUPPORT_MAIL } from "@/utils/general.constants";
+import * as Sentry from "@sentry/react-native";
+import * as QuickActions from "expo-quick-actions";
+import { useQuickActionCallback } from "expo-quick-actions/hooks";
+import { useEffect } from "react";
+import { Platform } from "react-native";
+
+enum EQuickAction {
+    DO_NOT_DELETE = "do_not_delete",
+}
+
+export const useQuickAction = () => {
+    useEffect(() => {
+        QuickActions.isSupported()
+            .then((isSupported) => {
+                if (isSupported) {
+                    QuickActions.setItems([
+                        {
+                            title: i18n.t(TR.quickActionDontDeleteMeTitle),
+                            subtitle: i18n.t(
+                                TR.quickActionDontDeleteMeSubTitle,
+                            ),
+                            icon:
+                                Platform.OS === "ios"
+                                    ? "symbol:questionmark.circle"
+                                    : "help_icon",
+                            id: EQuickAction.DO_NOT_DELETE,
+                            // params: { href: `/${EQuickAction.DO_NOT_DELETE}` }, // @dev href param requires useQuickActionRouting
+                        },
+                    ]);
+                }
+            })
+            .catch((err) => {
+                Sentry.captureException(err, {
+                    tags: {
+                        quickActionsSupported:
+                            "notAbleToCheckQuickActionSupport",
+                    },
+                });
+            });
+    }, []);
+    // useQuickActionRouting(); // @dev only works with expo router
+
+    useQuickActionCallback((action) => {
+        switch (action.id) {
+            case EQuickAction.DO_NOT_DELETE:
+                // TODO: Show feedback modal, explainer, etc., for now just email
+                sendEmail(
+                    SUPPORT_MAIL,
+                    i18n.t(TR.quickActionDontDeleteMeEmailSubject),
+                    i18n.t(TR.quickActionDontDeleteMeEmailBody),
+                );
+                break;
+        }
+    });
+};

mobile/hooks/useQuickAction.ts

@@ -1,6 +1,11 @@
 import { Language } from "./translate.service";
 
 export const de: Language = {
+    quickActionDontDeleteMeTitle: "Bitte lösch mich nicht!",
+    quickActionDontDeleteMeSubTitle: "Ich helfe im Hintergrund.",
+    quickActionDontDeleteMeEmailSubject: "Offlinery: Feedback (Quick-Action)",
+    quickActionDontDeleteMeEmailBody:
+        "Bitte lass uns wissen was dir an Offlinery nicht gefällt. Wir wollen dein knallhartes Feedback. Es hilft uns mehr als du denkst!",
     blog: "Blog lesen",
     retry: "Nochmal versuchen",
     maintenanceAlertTitle: "Offlinery wird gewartet",
@@ -154,7 +159,7 @@ export const de: Language = {
     men: "Männer",
     more: "Mehr",
     iAmA: "Ich bin ein(e)",
-    casual: "Casual",
+    casual: "Nichts Ernstes",
     casualDescription:
         "Offen für was Lockeres. Bitte beachte, dass dies keine offene Einladung ist - bleib respektvoll und taste dich langsam voran.",
     reconnectFriends: "Mit Freunden reconnecten",

mobile/localization/de.ts

@@ -1,6 +1,11 @@
 // @dev Other languages have to be typed as Language!
 
 export const en = {
+    quickActionDontDeleteMeTitle: "Wait! Don't delete me!",
+    quickActionDontDeleteMeSubTitle: "I help in the background.",
+    quickActionDontDeleteMeEmailSubject: "Offlinery: Feedback (Quick-Action)",
+    quickActionDontDeleteMeEmailBody:
+        "Please describe your problems and give us your honest feedback. It helps us so much more than you think!",
     blog: "Read Blog",
     retry: "Retry",
     maintenanceAlertTitle: "Offlinery in maintenance",

mobile/localization/en.ts

@@ -62,6 +62,7 @@
         "expo-localization": "^16.0.1",
         "expo-network": "^7.0.5",
         "expo-notifications": "^0.29.13",
+        "expo-quick-actions": "^4.0.2",
         "expo-splash-screen": "^0.29.21",
         "expo-status-bar": "^2.0.1",
         "expo-task-manager": "^12.0.5",

mobile/package.json

@@ -0,0 +1,19 @@
+import * as Sentry from "@sentry/react-native";
+import { Linking } from "react-native";
+
+export const sendEmail = (
+    recipient: string,
+    subject?: string,
+    body?: string,
+) => {
+    const url = `mailto:${recipient}?subject=${encodeURIComponent(subject ?? "")}&body=${encodeURIComponent(body ?? "")}`;
+
+    Linking.openURL(url).catch((err) => {
+        console.error("Error opening mail:", err);
+        Sentry.captureException(err, {
+            tags: {
+                sendEmail: "openingMail",
+            },
+        });
+    });
+};