About this app change

src/modules/about/screens/AboutTheAppDutch.screen.tsx

@@ -1,116 +1,93 @@
-import {ImageURISource} from 'react-native'
+import {Alert} from 'react-native'
 import {Screen} from '@/components/features/screen/Screen'
+import {Button} from '@/components/ui/buttons/Button'
 import {Box} from '@/components/ui/containers/Box'
 import {HorizontalSafeArea} from '@/components/ui/containers/HorizontalSafeArea'
 import {Column} from '@/components/ui/layout/Column'
-import {Track} from '@/components/ui/layout/Track'
-import {Icon} from '@/components/ui/media/Icon'
-import {Image} from '@/components/ui/media/Image'
 import {Paragraph} from '@/components/ui/text/Paragraph'
 import {Title} from '@/components/ui/text/Title'
+import {List} from '@/components/ui/text/list/List'
+import {useOpenWebUrl} from '@/hooks/linking/useOpenWebUrl'
+import {useGetRedirectUrlsQuery} from '@/modules/redirects/service'
+import {
+  ExceptionLogKey,
+  useTrackException,
+} from '@/processes/logging/hooks/useTrackException'
 
-export const AboutTheAppDutchScreen = () => (
-  <Screen
-    testID="AboutAboutTheAppDutchScreen"
-    withLeftInset={false}
-    withRightInset={false}>
-    <Column gutter="lg">
-      <Image
-        source={
-          require('@/modules/about/assets/images/traffic-cycling.1280.50.jpg') as ImageURISource
-        }
-        testID="AboutAboutTheAppDutchTrafficCyclingImage"
-      />
-      <HorizontalSafeArea>
-        <Box>
-          <Column gutter="xl">
-            <Column gutter="sm">
+export const AboutTheAppDutchScreen = () => {
+  const openWebUrl = useOpenWebUrl()
+  const {data: redirectUrls, isLoading, isError} = useGetRedirectUrlsQuery()
+  const trackException = useTrackException()
+
+  return (
+    <Screen
+      testID="AboutAboutTheAppDutchScreen"
+      withLeftInset={false}
+      withRightInset={false}>
+      <Column gutter="lg">
+        <HorizontalSafeArea>
+          <Box>
+            <Column gutter="lg">
               <Title
                 testID="AboutAboutTheAppDutchTitle"
-                text="Eén app voor alle Amsterdammers en Weespers"
+                text="Eén app voor alle Amsterdammers"
               />
               <Paragraph
                 testID="AboutAboutTheAppDutchIntroParagraph"
                 variant="intro">
                 Met de Amsterdam App heeft u handige informatie bij de hand en
-                kunt u meteen iets regelen met de gemeente. Zoals:
+                kunt u meteen iets regelen met de gemeente.
               </Paragraph>
-            </Column>
-            <Track gutter="lg">
-              <Column gutter="sm">
-                <Icon
-                  name="trash-bin"
-                  size="xl"
-                  testID="AboutAboutTheAppDutchWasteInformationIcon"
-                />
-                <Title
-                  level="h5"
-                  testID="AboutAboutTheAppDutchWasteInformationTitle"
-                  text="Afvalwijzer"
-                />
-                <Paragraph testID="AboutAboutTheAppDutchWasteInformationParagraph">
-                  Vul uw adres in en u ziet meteen wat u met uw afval moet doen.
-                </Paragraph>
-              </Column>
-              <Column gutter="sm">
-                <Icon
-                  name="construction-work"
-                  size="xl"
-                  testID="AboutAboutTheAppDutchRoadWorkIcon"
-                />
+              <Paragraph testID="AboutAboutTheAppDutchSummaryParagraph">
+                Dit kunt u zoal doen met de app:
+              </Paragraph>
+              <List
+                items={[
+                  'De regels over afval in uw buurt bekijken',
+                  'Werkzaamheden in uw buurt volgen en hiervan meldingen ontvangen',
+                  'Een melding doen van een volle afvalcontainer, afval op straat of iets dat stuk is',
+                  'Uw Stadspas gebruiken en uw saldo bekijken',
+                ]}
+                testID="AboutTheAppDutchFeaturesList"
+              />
+              <Column>
                 <Title
-                  level="h5"
-                  testID="AboutAboutTheAppDutchRoadWorkTitle"
-                  text="Werkzaamheden"
+                  level="h2"
+                  testID="AboutAboutTheAppDutchLaterMoreTitle"
+                  text="Later meer"
                 />
-                <Paragraph testID="AboutAboutTheAppDutchRoadWorkParagraph">
-                  Hier krijgt u informatie over projecten en wegwerkzaamheden in
-                  uw buurt.
+                <Paragraph testID="AboutAboutTheAppDutchFutureFeaturesParagraph">
+                  De Amsterdam App is in ontwikkeling. Uw mening is belangrijk
+                  om de app te verbeteren. Laat het ons weten.
                 </Paragraph>
               </Column>
-              <Column gutter="sm">
-                <Icon
-                  name="alert"
-                  size="xl"
-                  testID="AboutAboutTheAppDutchReportProblemIcon"
-                />
-                <Title
-                  level="h5"
-                  testID="AboutAboutTheAppDutchReportProblemTitle"
-                  text="Melding doen"
+              {!isLoading && !isError && (
+                <Button
+                  label="Uw mening"
+                  onPress={() => {
+                    if (redirectUrls?.feedbackForm) {
+                      openWebUrl(redirectUrls.feedbackForm)
+                    } else {
+                      Alert.alert(
+                        'Sorry, deze functie is nu niet beschikbaar. Probeer het later nog eens.',
+                      )
+
+                      trackException(
+                        ExceptionLogKey.getRedirectsUrl,
+                        'FeedbackScreen.ts',
+                        {redirectsKey: 'feedback'},
+                      )
+                    }
+                  }}
+                  role="link"
+                  testID="AboutAboutTheAppDutchFeedbackLink"
+                  variant="secondary"
                 />
-                <Paragraph testID="AboutAboutTheAppDutchReportProblemParagraph">
-                  Meld een volle afvalcontainer, overlast of iets dat stuk is.
-                </Paragraph>
-              </Column>
-            </Track>
-          </Column>
-        </Box>
-      </HorizontalSafeArea>
-      <Image
-        source={
-          require('@/modules/about/assets/images/people-in-park.1280.50.jpg') as ImageURISource
-        }
-        testID="AboutAboutTheAppDutchPeopleInParkImage"
-      />
-      <HorizontalSafeArea>
-        <Box>
-          <Track gutter="lg">
-            <Column gutter="sm">
-              <Title
-                level="h2"
-                testID="AboutAboutTheAppDutch1AppTitle"
-                text="Later meer"
-              />
-              <Paragraph testID="AboutAboutTheAppDutchFutureFeaturesParagraph">
-                Deze versie van de Amsterdam App heeft onderwerpen waar iedereen
-                iets aan heeft. Dit is het begin. In de toekomst komen er meer
-                onderwerpen en talen bij. Zo maken we de app steeds beter.
-              </Paragraph>
+              )}
             </Column>
-          </Track>
-        </Box>
-      </HorizontalSafeArea>
-    </Column>
-  </Screen>
-)
+          </Box>
+        </HorizontalSafeArea>
+      </Column>
+    </Screen>
+  )
+}

src/modules/about/screens/AboutTheAppEnglish.screen.tsx

@@ -1,132 +1,93 @@
-import {ImageURISource} from 'react-native'
+import {Alert} from 'react-native'
 import {Screen} from '@/components/features/screen/Screen'
+import {Button} from '@/components/ui/buttons/Button'
 import {Box} from '@/components/ui/containers/Box'
 import {HorizontalSafeArea} from '@/components/ui/containers/HorizontalSafeArea'
 import {Column} from '@/components/ui/layout/Column'
-import {Track} from '@/components/ui/layout/Track'
-import {Icon} from '@/components/ui/media/Icon'
-import {Image} from '@/components/ui/media/Image'
 import {Paragraph} from '@/components/ui/text/Paragraph'
 import {Title} from '@/components/ui/text/Title'
+import {List} from '@/components/ui/text/list/List'
+import {useOpenWebUrl} from '@/hooks/linking/useOpenWebUrl'
+import {useGetRedirectUrlsQuery} from '@/modules/redirects/service'
+import {
+  ExceptionLogKey,
+  useTrackException,
+} from '@/processes/logging/hooks/useTrackException'
 
-export const AboutTheAppEnglishScreen = () => (
-  <Screen
-    testID="AboutAboutTheAppEnglishScreen"
-    withLeftInset={false}
-    withRightInset={false}>
-    <Column gutter="lg">
-      <Image
-        source={
-          require('@/modules/about/assets/images/traffic-cycling.1280.50.jpg') as ImageURISource
-        }
-        testID="AboutAboutTheAppEnglishTrafficCyclingImage"
-      />
-      <HorizontalSafeArea>
-        <Box>
-          <Column gutter="lg">
-            <Column gutter="sm">
+export const AboutTheAppEnglishScreen = () => {
+  const openWebUrl = useOpenWebUrl()
+  const {data: redirectUrls, isLoading, isError} = useGetRedirectUrlsQuery()
+  const trackException = useTrackException()
+
+  return (
+    <Screen
+      testID="AboutAboutTheAppEnglishScreen"
+      withLeftInset={false}
+      withRightInset={false}>
+      <Column gutter="lg">
+        <HorizontalSafeArea>
+          <Box>
+            <Column gutter="lg">
               <Title
-                accessibilityLanguage="en-US"
                 testID="AboutAboutTheAppEnglishTitle"
-                text="One app for all citizens of Amsterdam and Weesp"
+                text="One app for all Amsterdam residents"
               />
               <Paragraph
-                accessibilityLanguage="en-US"
                 testID="AboutAboutTheAppEnglishIntroParagraph"
                 variant="intro">
-                The Amsterdam App gives you useful information to immediately
-                take care of matters with the municipality. For example:
+                With the Amsterdam app, you can have information at your
+                fingertips and get in touch with the City.
               </Paragraph>
-            </Column>
-            <Track gutter="lg">
-              <Column gutter="sm">
-                <Icon
-                  name="trash-bin"
-                  size="xl"
-                  testID="AboutAboutTheAppEnglishWasteInformationIcon"
-                />
-                <Title
-                  accessibilityLanguage="en-US"
-                  level="h5"
-                  testID="AboutAboutTheAppEnglishWasteInformationTitle"
-                  text="Information about waste"
-                />
-                <Paragraph
-                  accessibilityLanguage="en-US"
-                  testID="AboutAboutTheAppEnglishWasteInformationParagraph">
-                  Fill in your address and you will immediately see what you can
-                  do with your waste.
-                </Paragraph>
-              </Column>
-              <Column gutter="sm">
-                <Icon
-                  name="construction-work"
-                  size="xl"
-                  testID="AboutAboutTheAppEnglishRoadWorkIcon"
-                />
+              <Paragraph testID="AboutAboutTheAppEnglishSummaryParagraph">
+                With the app you can:
+              </Paragraph>
+              <List
+                items={[
+                  'View the rules about waste in your neighbourhood',
+                  'Follow and receive notifications about works in your area',
+                  'Report a full waste container, litter on the street, or something that is broken',
+                  'Use your Stadspas and view your balance',
+                ]}
+                testID="AboutTheAppEnglishFeaturesList"
+              />
+              <Column>
                 <Title
-                  accessibilityLanguage="en-US"
-                  level="h5"
-                  testID="AboutAboutTheAppEnglishRoadWorkTitle"
-                  text="Work on the road"
+                  level="h2"
+                  testID="AboutAboutTheAppEnglishLaterMoreTitle"
+                  text="More features are coming soon"
                 />
-                <Paragraph
-                  accessibilityLanguage="en-US"
-                  testID="AboutAboutTheAppEnglishRoadWorkParagraph">
-                  Here you can find information about projects and roadworks in
-                  your neighbourhood.
+                <Paragraph testID="AboutAboutTheAppEnglishFutureFeaturesParagraph">
+                  The Amsterdam app is a work in progress. Your opinion is
+                  important to improve the app. Please let us know.
                 </Paragraph>
               </Column>
-              <Column gutter="sm">
-                <Icon
-                  name="alert"
-                  size="xl"
-                  testID="AboutAboutTheAppEnglishReportProblemIcon"
-                />
-                <Title
-                  accessibilityLanguage="en-US"
-                  level="h5"
-                  testID="AboutAboutTheAppEnglishReportProblemTitle"
-                  text="Report something"
+              {!isLoading && !isError && (
+                <Button
+                  label="Your opinion"
+                  onPress={() => {
+                    if (redirectUrls?.feedbackForm) {
+                      openWebUrl(redirectUrls.feedbackForm)
+                    } else {
+                      Alert.alert(
+                        'Sorry, deze functie is nu niet beschikbaar. Probeer het later nog eens.',
+                      )
+
+                      trackException(
+                        ExceptionLogKey.getRedirectsUrl,
+                        'FeedbackScreen.ts',
+                        {redirectsKey: 'feedback'},
+                      )
+                    }
+                  }}
+                  role="link"
+                  testID="AboutAboutTheAppEnglishFeedbackLink"
+                  variant="secondary"
                 />
-                <Paragraph
-                  accessibilityLanguage="en-US"
-                  testID="AboutAboutTheAppEnglishReportProblemParagraph">
-                  Report something that is broken or causes a nuisance, or
-                  report a full waste container.
-                </Paragraph>
-              </Column>
-            </Track>
-          </Column>
-        </Box>
-      </HorizontalSafeArea>
-      <Image
-        source={
-          require('@/modules/about/assets/images/people-in-park.1280.50.jpg') as ImageURISource
-        }
-        testID="AboutAboutTheAppEnglishPeopleInParkImage"
-      />
-      <HorizontalSafeArea>
-        <Box>
-          <Track gutter="lg">
-            <Column gutter="sm">
-              <Title
-                accessibilityLanguage="en-US"
-                level="h2"
-                testID="AboutAboutTheAppEnglishFutureFeaturesTitle"
-                text="More later"
-              />
-              <Paragraph
-                accessibilityLanguage="en-US"
-                testID="AboutAboutTheAppEnglishFutureFeaturesParagraph">
-                This version of the Amsterdam App has subjects that are useful
-                to everybody. This is a start. In the future there will be more
-                subjects and languages. This way we will keep improving the app.
-              </Paragraph>
+              )}
             </Column>
-          </Track>
-        </Box>
-      </HorizontalSafeArea>
-    </Column>
-  </Screen>
-)
+          </Box>
+        </HorizontalSafeArea>
+      </Column>
+    </Screen>
+  )
+}