From 8fcfd15c0e15b065c938197cce64bc4cd2e14cd0 Mon Sep 17 00:00:00 2001 From: alex Date: Sun, 13 Aug 2023 22:26:15 +0000 Subject: [PATCH] help --- App.js | 53 ++++++ locales/de.json | 11 +- locales/en.json | 11 +- package-lock.json | 29 ++++ package.json | 3 +- src/Components/Accordion/index.js | 107 ++++++++++++ src/Components/Modal/index.js | 50 ++++-- src/Screens/Device/scene.js | 3 +- src/Screens/Help/index.js | 92 +++++++---- src/Screens/Help/modals/Feedback/index.js | 3 + src/Screens/Help/modals/HelpCenter/index.js | 155 ++++++++++++++++++ .../Help/modals/ReportProblem/index.js | 5 + 12 files changed, 475 insertions(+), 47 deletions(-) create mode 100644 src/Components/Accordion/index.js create mode 100644 src/Screens/Help/modals/Feedback/index.js create mode 100644 src/Screens/Help/modals/HelpCenter/index.js create mode 100644 src/Screens/Help/modals/ReportProblem/index.js diff --git a/App.js b/App.js index 772f0d2..97625d8 100644 --- a/App.js +++ b/App.js @@ -41,6 +41,10 @@ import MotorEditActionModalContent, { import WaitXSecondsEditActionModalContent from "./src/Screens/Device/modals/EditActions/Wait"; import StopEditActionModalContent from "./src/Screens/Device/modals/EditActions/Stop"; import SearchForNewDevicesModalContent from "./src/Screens/SearchForNewDevices"; +import HelpCenterModalContent from "./src/Screens/Help/modals/HelpCenter"; +import GiveFeedbackModalContent from "./src/Screens/Help/modals/Feedback"; +import ReportProblemModalContent from "./src/Screens/Help/modals/ReportProblem"; +import * as MailComposer from "expo-mail-composer"; const Drawer = createDrawerNavigator(); const Stack = createStackNavigator(); @@ -278,6 +282,39 @@ export function MyApp() { } /> + + options({ + navigation: navigation, + pageTitle: t("screens.help.modalHelpCenter.pageTitle"), + }) + } + /> + + + options({ + navigation: navigation, + pageTitle: t("screens.help.modalGiveFeedback.pageTitle"), + }) + } + /> + + + options({ + navigation: navigation, + pageTitle: t("screens.help.modalReportProblem.pageTitle"), + }) + } + /> + ); } + +export function OpenMailComposer(recipients, subject, body) { + return new Promise((resolve, reject) => { + MailComposer.composeAsync({ + recipients: recipients, + subject: subject, + body: body, + }) + .then((result) => { + resolve(result); + }) + .catch((error) => { + reject(error); + }); + }); +} diff --git a/locales/de.json b/locales/de.json index 166c26d..69eaed5 100644 --- a/locales/de.json +++ b/locales/de.json @@ -186,7 +186,16 @@ "buttonSearchForNewDevices": "Nach neuen Geräten suchen" }, "help": { - "pageTitle": "Hilfe" + "pageTitle": "Hilfe", + "modalHelpCenter": { + "pageTitle": "Hilfezentrum" + }, + "modalGiveFeedback": { + "pageTitle": "Feedback geben" + }, + "modalReportProblem": { + "pageTitle": "Problem melden" + } }, "settings": { "pageTitle": "Einstellungen", diff --git a/locales/en.json b/locales/en.json index 1c98b72..ba49ec1 100644 --- a/locales/en.json +++ b/locales/en.json @@ -184,7 +184,16 @@ "pageTitle": "No devices connected" }, "help": { - "pageTitle": "Help" + "pageTitle": "Help", + "modalHelpCenter": { + "pageTitle": "Help Center" + }, + "modalGiveFeedback": { + "pageTitle": "Give feedback" + }, + "modalReportProblem": { + "pageTitle": "Report problem" + } }, "settings": { "pageTitle": "Settings", diff --git a/package-lock.json b/package-lock.json index 572c0ef..86ac1c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "expo": "~48.0.18", "expo-haptics": "~12.2.1", "expo-linear-gradient": "~12.1.2", + "expo-mail-composer": "~12.1.1", "expo-status-bar": "~1.4.4", "i18next": "^23.2.11", "i18next-browser-languagedetector": "^7.1.0", @@ -7201,6 +7202,34 @@ "expo": "*" } }, + "node_modules/expo-mail-composer": { + "version": "12.1.1", + "resolved": "https://registry.npmjs.org/expo-mail-composer/-/expo-mail-composer-12.1.1.tgz", + "integrity": "sha512-DJZpxdc6huwg8M9STfzL415xHGEaEXOseK2VyPAKKllWYR6m2gE18sXND9Ak8rcynZGTwyuaHrqJLBXd3I/LcQ==", + "dependencies": { + "query-string": "^6.2.0" + }, + "peerDependencies": { + "expo": "*" + } + }, + "node_modules/expo-mail-composer/node_modules/query-string": { + "version": "6.14.1", + "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.14.1.tgz", + "integrity": "sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==", + "dependencies": { + "decode-uri-component": "^0.2.0", + "filter-obj": "^1.1.0", + "split-on-first": "^1.0.0", + "strict-uri-encode": "^2.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/expo-modules-autolinking": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.2.0.tgz", diff --git a/package.json b/package.json index d35d4b4..47b77bb 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,8 @@ "react-native-uuid": "^2.0.1", "react-native-zeroconf": "^0.13.8", "reanimated-color-picker": "^2.3.1", - "expo-linear-gradient": "~12.1.2" + "expo-linear-gradient": "~12.1.2", + "expo-mail-composer": "~12.1.1" }, "devDependencies": { "@babel/core": "^7.20.0" diff --git a/src/Components/Accordion/index.js b/src/Components/Accordion/index.js new file mode 100644 index 0000000..4168932 --- /dev/null +++ b/src/Components/Accordion/index.js @@ -0,0 +1,107 @@ +import { useState } from "react"; +import Animated, { + Easing, + interpolate, + useAnimatedStyle, + useSharedValue, + withTiming, +} from "react-native-reanimated"; +import Card from "../Card"; +import { Text, TouchableOpacity, View } from "react-native"; +import MyIcon from "../Icon"; +import { AppStyles } from "../../utils"; + +export function AccordionItem({ + appContext, + title, + description, + cardTopicText, + disablePaddingBottom, +}) { + const shareValue = useSharedValue(0); + const [bodySectionHeight, setBodySectionHeight] = useState(0); + + const bodyHeight = useAnimatedStyle(() => ({ + height: interpolate(shareValue.value, [0, 1], [0, bodySectionHeight]), + })); + + const iconStyle = useAnimatedStyle(() => { + return { + transform: [ + { + rotate: `${interpolate(shareValue.value, [0, 1], [0, 180])}deg`, + }, + ], + }; + }); + + const toggleExpanded = () => { + if (shareValue.value === 0) { + shareValue.value = withTiming(1, { + duration: 500, + easing: Easing.bezier(0.4, 0.0, 0.2, 1), + }); + } else { + shareValue.value = withTiming(0, { + duration: 500, + easing: Easing.bezier(0.4, 0.0, 0.2, 1), + }); + } + }; + + return ( + + + + + {title} + + + + + + + + + + + setBodySectionHeight(event.nativeEvent.layout.height) + } + > + + {description} + + + + + ); +} diff --git a/src/Components/Modal/index.js b/src/Components/Modal/index.js index f41ebfa..9eaf90a 100644 --- a/src/Components/Modal/index.js +++ b/src/Components/Modal/index.js @@ -240,9 +240,30 @@ export function MyPickerModalListItem({ itemSelected, disabled, pressableBackgroundColor, + leftIconName, + rightIconName, }) { const appContext = useContext(AppContext); + const rIconName = + rightIconName === undefined + ? "checkbox-blank-circle-outline" + : rightIconName; + + const TextComponent = () => { + return ( + + {itemName} + + ); + }; + return ( - - {itemName} - + {leftIconName !== undefined ? ( + + + + + ) : ( + + )} {itemSelected ? ( ) : ( - FAQ - Give Feedback + + + - - Sign in with Facebook + Wie können wir Ihnen helfen? - + - console.log("t")} /> + + navigation.navigate("modalHelpCenter")} + /> + navigation.navigate("modalGiveFeedback")} + /> + navigation.navigate("modalReportProblem")} + /> + ); } + +/* + + + {Array.from({ length: 20 }).map((item, index) => ( + + ))} + + +*/ diff --git a/src/Screens/Help/modals/Feedback/index.js b/src/Screens/Help/modals/Feedback/index.js new file mode 100644 index 0000000..3c4fa08 --- /dev/null +++ b/src/Screens/Help/modals/Feedback/index.js @@ -0,0 +1,3 @@ +export default function GiveFeedbackModalContent({ navigation, route }) { + return <>; +} diff --git a/src/Screens/Help/modals/HelpCenter/index.js b/src/Screens/Help/modals/HelpCenter/index.js new file mode 100644 index 0000000..bc4beb6 --- /dev/null +++ b/src/Screens/Help/modals/HelpCenter/index.js @@ -0,0 +1,155 @@ +import { FlatList, Text, View } from "react-native"; +import { AccordionItem } from "../../../../Components/Accordion"; +import { AppContext, AppStyles, ModalContainer } from "../../../../utils"; +import { useContext } from "react"; +import MyIcon from "../../../../Components/Icon"; +import { MyTextButton } from "../../../../Components/Button"; +import { OpenMailComposer } from "../../../../../App"; + +const helpData = [ + { + topicText: "Allgemeine Fragen", + question: + "Was ist die grundlegende Funktionalität der Handy-App zur Gerätesteuerung?", + answer: + "Die Handy-App ermöglicht es Ihnen, kompatible Geräte über Ihr Smartphone oder Tablet zu steuern. Sie können verschiedene Funktionen aktivieren, Einstellungen ändern und Aktionen aus der Ferne ausführen.", + }, + { + question: "Welche Arten von Geräten können über die App gesteuert werden?", + answer: + "Unsere App unterstützt eine Vielzahl von Geräten, darunter Smart-Home-Geräte, Unterhaltungselektronik, Haushaltsgeräte und mehr.", + }, + { + question: "Ist die App für Android- und iOS-Geräte verfügbar?", + answer: + "Ja, die App ist sowohl für Android- als auch für iOS-Geräte verfügbar. Sie können sie im Google Play Store bzw. im Apple App Store herunterladen.", + }, + { + question: "Wo kann ich die App herunterladen?", + answer: + "Sie können die App direkt aus dem Google Play Store (für Android) oder dem Apple App Store (für iOS) herunterladen und installieren.", + }, + { + question: + "Benötige ich eine Internetverbindung, um das Gerät über die App zu steuern?", + answer: + "Ja, eine aktive Internetverbindung (Wi-Fi oder mobile Daten) ist erforderlich, um die App mit dem Gerät zu verbinden und die Steuerungsfunktionen zu nutzen.", + }, + { + question: "Unterstützt die App mehrere Geräte gleichzeitig?", + answer: + "Ja, die App ermöglicht es Ihnen, mehrere kompatible Geräte gleichzeitig zu steuern und zwischen ihnen zu wechseln.", + }, + { + topicText: "Einrichtung und Verbindung", + question: + "Wie richte ich die Verbindung zwischen der App und meinem Gerät ein?", + answer: + "Die genaue Einrichtung kann je nach Gerät variieren, aber normalerweise müssen Sie die App öffnen, das Gerät auswählen und den Anweisungen auf dem Bildschirm folgen, um die Verbindung herzustellen.", + }, + { + question: + "Welche Schritte sind erforderlich, um das Gerät zum ersten Mal mit der App zu verbinden?", + answer: + "Starten Sie die App, erstellen Sie ein Konto (falls erforderlich), fügen Sie das Gerät hinzu, indem Sie es aus der Liste der verfügbaren Geräte auswählen, und folgen Sie den Anweisungen zur Verbindungsherstellung.", + }, + { + question: + "Benötige ich spezielle Einstellungen am Gerät, um die Verbindung herzustellen?", + answer: + "Ja, in den meisten Fällen müssen Sie sicherstellen, dass das Gerät eingeschaltet und im Verbindungsmodus ist, bevor Sie versuchen, es über die App zu verbinden.", + }, + { + question: + "Welche Arten von Verbindungsmethoden werden von der App unterstützt (z. B. Bluetooth, WLAN, etc.)?", + answer: + "Unsere App unterstützt in der Regel WLAN-Verbindungen, um eine stabile und zuverlässige Steuerung über größere Entfernungen zu ermöglichen.", + }, + { + question: + "Was sollte ich tun, wenn die Verbindung zwischen der App und dem Gerät verloren geht?", + answer: + "Überprüfen Sie zuerst Ihre Internetverbindung. Wenn das Problem weiterhin besteht, können Sie versuchen, das Gerät aus der App zu entfernen und erneut hinzuzufügen. Gegebenenfalls kann ein Neustart des Geräts helfen.", + }, +]; + +export default function HelpCenterModalContent({ navigation, route }) { + const appContext = useContext(AppContext); + + return ( + + + + + + Hier findest du Antworten. + + + } + ListFooterComponent={ + + + Konnte deine Frage nicht beantwortet werden oder fehlt dir etwas? + + { + console.log("contact us"); + + OpenMailComposer(["support@roese.dev"], "FAQ Help", "") + .then((result) => { + console.log(result); + }) + .catch((error) => { + console.log(error); + }); + }} + /> + + } + renderItem={({ item, index }) => ( + + )} + /> + + ); +} diff --git a/src/Screens/Help/modals/ReportProblem/index.js b/src/Screens/Help/modals/ReportProblem/index.js new file mode 100644 index 0000000..c9a0a0b --- /dev/null +++ b/src/Screens/Help/modals/ReportProblem/index.js @@ -0,0 +1,5 @@ +// TODO: send app diagnostics to server within the report problem + +export default function ReportProblemModalContent({ navigation, route }) { + return <>; +}