Merge pull request #21 from kendallroth/20-add-store-url

#20 Add store url to About screen
kendallroth · Feb 10, 2023 · 240a645 · 240a645
2 parents 75685ed + b9831b6
commit 240a645
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Store URL in About screen developer chips
+
 ## [0.2.0] - 2023-02-09
 
 ### Added

diff --git a/src/localization/en/screens.json b/src/localization/en/screens.json
@@ -61,9 +61,10 @@
     "guideSteps": ["Add and manage dates", "Track dates on dashboard", "Share dates with friends"],
     "guideTipTitle": "Tips",
     "guideTips": [
-      "Dates can be managed by long pressing on a list item and selecting \"Edit\" or \"Delete\" from the selection menu.",
+      "Dates can be managed by long pressing on a list item and using the selection menu.",
       "Dates can be reordered from the list item selection menu.",
-      "Icons can be modified by tapping the icon in the \"Add\" or \"Edit\" dialogs."
+      "Icons can be modified by tapping the icon in the \"Add\" or \"Edit\" dialogs.",
+      "Share a date with friends to keep track of it together!"
     ],
     "chipContact": "Contact",
     "chipPortfolio": "Portfolio",

diff --git a/src/localization/es/screens.json b/src/localization/es/screens.json
@@ -65,9 +65,10 @@
     ],
     "guideTipTitle": "Consejos",
     "guideTips": [
-      "Las fechas se pueden administrar presionando prolongadamente un elemento de la lista y seleccionando \"Editar\" o \"Eliminar\" en el menú de selección.",
+      "Las fechas se pueden administrar presionando prolongadamente un elemento de la lista y usando el menú de selección.",
       "Las fechas se pueden reordenar desde el menú de selección de elementos de la lista.",
-      "Los iconos se pueden agregar tocando el icono en los cuadros de diálogo \"Agregar\" o \"Editar\"."
+      "Los iconos se pueden agregar tocando el icono en los cuadros de diálogo \"Agregar\" o \"Editar\".",
+      "¡Comparte una cita con amigos para seguirla juntos!"
     ],
     "chipContact": "Contacto",
     "chipPortfolio": "Portafolio",

diff --git a/src/screens/Settings/AboutScreen/AboutScreen.tsx b/src/screens/Settings/AboutScreen/AboutScreen.tsx
@@ -1,20 +1,20 @@
 import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
-import dayjs from "dayjs";
+import Constants from "expo-constants";
 import { openURL } from "expo-linking";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { ScrollView, StyleSheet, View } from "react-native";
+import { Platform, ScrollView, StyleSheet, View } from "react-native";
 import { Chip, Surface, Text, useTheme } from "react-native-paper";
 
 import { AppBar, Page } from "@components/layout";
 import { Quote } from "@components/typography";
 import config from "@config";
 import { type MaterialCommunityIcons } from "@typings/app.types";
 
-interface IDeveloperActions {
+interface DeveloperActions {
   icon: keyof MaterialCommunityIcons;
   name: string;
-  url: string;
+  url: string | null;
 }
 
 const AboutScreen = () => {
@@ -23,23 +23,41 @@ const AboutScreen = () => {
   const { colors } = useTheme();
 
   const { links } = config;
-  const developerActions: IDeveloperActions[] = [
+
+  const appStoreAction: DeveloperActions | null =
+    Platform.select<DeveloperActions>({
+      android: {
+        icon: "google-play",
+        name: "Google",
+        url: Constants.expoConfig?.android?.playStoreUrl ?? null,
+      },
+      ios: {
+        icon: "apple",
+        name: "Apple",
+        url: Constants.expoConfig?.ios?.appStoreUrl ?? null,
+      },
+    }) ?? null;
+
+  const developerActions: DeveloperActions[] = [
     {
       icon: "account",
       name: t("screens:settingsAbout.chipPortfolio"),
       url: links.developerUrl,
     },
-    {
-      icon: "github",
-      name: t("screens:settingsAbout.chipRepository"),
-      url: links.repositoryUrl,
-    },
     {
       icon: "email",
       name: t("screens:settingsAbout.chipContact"),
       url: `mailto:${links.developerEmail}`,
     },
+    {
+      icon: "github",
+      name: t("screens:settingsAbout.chipRepository"),
+      url: links.repositoryUrl,
+    },
   ];
+  if (appStoreAction) {
+    developerActions.push(appStoreAction);
+  }
 
   const steps = t("screens:settingsAbout.guideSteps", { returnObjects: true });
   const tips = t("screens:settingsAbout.guideTips", { returnObjects: true });
@@ -93,23 +111,24 @@ const AboutScreen = () => {
         </View>
         <View style={styles.aboutSpace} />
         <View style={styles.aboutDeveloper}>
-          <Text style={styles.aboutDeveloperText}>
-            {t("screens:settingsAbout.appDeveloper", {
-              date: dayjs().format("YYYY"),
-            })}
-          </Text>
           <View style={styles.aboutDeveloperActions}>
             {developerActions.map((action) => (
               <Chip
                 key={action.name}
+                disabled={!action.url}
                 icon={(iconProps) => <Icon {...iconProps} name={action.icon} size={20} />}
                 style={styles.aboutDeveloperActionsChip}
-                onPress={() => onLink(action.url)}
+                onPress={action.url ? () => onLink(action.url!) : undefined}
               >
                 {action.name}
               </Chip>
             ))}
           </View>
+          <Text style={styles.aboutDeveloperText}>
+            {t("screens:settingsAbout.appDeveloper", {
+              date: "2023",
+            })}
+          </Text>
           <Surface
             elevation={0}
             style={[styles.aboutReason, { backgroundColor: colors.tertiaryContainer }]}
@@ -138,13 +157,13 @@ const styles = StyleSheet.create({
   aboutDeveloperActions: {
     flexDirection: "row",
     flexWrap: "wrap",
-    marginTop: 16,
   },
   aboutDeveloperActionsChip: {
     marginBottom: 8,
     marginRight: 8,
   },
   aboutDeveloperText: {
+    marginTop: 16,
     textAlign: "center",
   },
   aboutSteps: {