2926: Redesign of search feedback in web

native/src/components/Feedback.tsx

@@ -9,15 +9,12 @@ import useNavigate from '../hooks/useNavigate'
 import Caption from './Caption'
 import FeedbackButtons from './FeedbackButtons'
 import { SendingStatusType } from './FeedbackContainer'
-import HorizontalLine from './HorizontalLine'
 import LoadingSpinner from './LoadingSpinner'
 import Note from './Note'
-import NothingFound from './NothingFound'
 import InputSection from './base/InputSection'
 import TextButton from './base/TextButton'
 
 const Wrapper = styled.View`
-  padding: 20px;
   gap: 8px;
 `
 
@@ -79,11 +76,7 @@ const Feedback = ({
     <KeyboardAwareScrollView>
       <Wrapper>
         {isSearchFeedback ? (
-          <>
-            <NothingFound />
-            <HorizontalLine />
-            <InputSection title={t('searchTermDescription')} value={searchTerm} onChange={setSearchTerm} />
-          </>
+          <InputSection title={t('searchTermDescription')} value={searchTerm} onChange={setSearchTerm} />
         ) : (
           <>
             <Caption title={t('headline')} />

native/src/components/FeedbackContainer.tsx

@@ -1,17 +1,33 @@
 import React, { ReactElement, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import styled from 'styled-components/native'
 
 import { SEND_FEEDBACK_SIGNAL_NAME } from 'shared'
 import { createFeedbackEndpoint, FeedbackRouteType } from 'shared/api'
+import { config } from 'translations'
 
+import buildConfig from '../constants/buildConfig'
 import { determineApiUrl } from '../utils/helpers'
 import sendTrackingSignal from '../utils/sendTrackingSignal'
 import { reportError } from '../utils/sentry'
 import Feedback from './Feedback'
+import Text from './base/Text'
+import TextButton from './base/TextButton'
 
 const Container = styled.View`
   flex: 1;
   background-color: ${props => props.theme.colors.backgroundColor};
+  padding: 8px 20px;
+  gap: 8px;
+`
+
+const Title = styled(Text)`
+  font-weight: 600;
+`
+
+const Hint = styled(Title)`
+  margin-top: 8px;
+  text-align: center;
 `
 
 export type SendingStatusType = 'idle' | 'sending' | 'failed' | 'successful'
@@ -30,6 +46,8 @@ const FeedbackContainer = ({ query, language, routeType, cityCode, slug }: Feedb
   const [isPositiveRating, setIsPositiveRating] = useState<boolean | null>(null)
   const [sendingStatus, setSendingStatus] = useState<SendingStatusType>('idle')
   const [searchTerm, setSearchTerm] = useState<string | undefined>(query)
+  const [showFeedback, setShowFeedback] = useState<boolean>(query === undefined)
+  const { t } = useTranslation('feedback')
 
   useEffect(() => {
     setSearchTerm(query)
@@ -70,20 +88,37 @@ const FeedbackContainer = ({ query, language, routeType, cityCode, slug }: Feedb
     })
   }
 
+  if (showFeedback) {
+    return (
+      <Container>
+        <Feedback
+          comment={comment}
+          contactMail={contactMail}
+          sendingStatus={sendingStatus}
+          onCommentChanged={setComment}
+          onFeedbackContactMailChanged={setContactMail}
+          isPositiveFeedback={isPositiveRating}
+          setIsPositiveFeedback={setIsPositiveRating}
+          onSubmit={handleSubmit}
+          searchTerm={searchTerm}
+          setSearchTerm={setSearchTerm}
+        />
+      </Container>
+    )
+  }
+
+  const fallbackLanguage = config.sourceLanguage
+
   return (
     <Container>
-      <Feedback
-        comment={comment}
-        contactMail={contactMail}
-        sendingStatus={sendingStatus}
-        onCommentChanged={setComment}
-        onFeedbackContactMailChanged={setContactMail}
-        isPositiveFeedback={isPositiveRating}
-        setIsPositiveFeedback={setIsPositiveRating}
-        onSubmit={handleSubmit}
-        searchTerm={searchTerm}
-        setSearchTerm={setSearchTerm}
-      />
+      <>
+        <Title>
+          {language === fallbackLanguage ? t('noResultsInUserLanguage') : t('noResultsInUserAndSourceLanguage')}
+        </Title>
+        <Text>{t('checkQuery', { appName: buildConfig().appName })}</Text>
+        <Hint>{t('informationMissing')}</Hint>
+        <TextButton text={t('giveFeedback')} onPress={() => setShowFeedback(true)} />
+      </>
     </Container>
   )
 }

native/src/components/__tests__/Feedback.spec.tsx

@@ -82,7 +82,6 @@ describe('Feedback', () => {
         <Feedback {...buildProps(false, 'comment', 'query')} />
       </NavigationContainer>,
     )
-    expect(getByText('search:nothingFound')).toBeDefined()
     expect(getByText('searchTermDescription')).toBeDefined()
   })
 

native/src/components/__tests__/FeedbackContainer.spec.tsx

@@ -123,6 +123,8 @@ describe('FeedbackContainer', () => {
         <FeedbackContainer routeType={SEARCH_ROUTE} language={language} cityCode={city} query={query} />
       </NavigationContainer>,
     )
+    const buttonToOpenFeedback = getByText('giveFeedback')
+    fireEvent.press(buttonToOpenFeedback)
     const button = getByText('send')
     fireEvent.press(button)
     expect(await findByText('thanksMessage')).toBeDefined()
@@ -148,6 +150,8 @@ describe('FeedbackContainer', () => {
         <FeedbackContainer routeType={SEARCH_ROUTE} language={language} cityCode={city} query={query} />
       </NavigationContainer>,
     )
+    const buttonToOpenFeedback = getByText('giveFeedback')
+    fireEvent.press(buttonToOpenFeedback)
     const input = getByDisplayValue(query)
     fireEvent.changeText(input, fullSearchTerm)
     const button = getByText('send')
@@ -168,11 +172,13 @@ describe('FeedbackContainer', () => {
   })
 
   it('should disable send button if query term is removed', async () => {
-    const { findByText, getByDisplayValue } = render(
+    const { findByText, getByDisplayValue, getByText } = render(
       <NavigationContainer>
         <FeedbackContainer routeType={SEARCH_ROUTE} language={language} cityCode={city} query='query' />
       </NavigationContainer>,
     )
+    const buttonToOpenFeedback = getByText('giveFeedback')
+    fireEvent.press(buttonToOpenFeedback)
     expect(await findByText('send')).not.toBeDisabled()
     const input = getByDisplayValue('query')
     fireEvent.changeText(input, '')

native/src/routes/__tests__/SearchModal.spec.tsx

@@ -125,7 +125,7 @@ describe('SearchModal', () => {
 
     fireEvent.changeText(getByPlaceholderText('searchPlaceholder'), 'no results, please')
 
-    expect(getByText('search:nothingFound')).toBeTruthy()
+    expect(getByText('noResultsInUserLanguage')).toBeTruthy()
   })
 
   it('should open with an initial search text if one is supplied', () => {

translations/translations.json

@@ -4763,7 +4763,12 @@
       "positiveRating": "Diese Seite ist hilfreich",
       "searchTermDescription": "Für den folgenden Begriff konnte kein Ergebnis gefunden werden:",
       "contactMailAddress": "E-Mail für Rückfragen",
-      "note": "Bitte wähle eine Reaktion oder schreibe einen Kommentar, um das Feedback abschicken zu können."
+      "note": "Bitte wähle eine Reaktion oder schreibe einen Kommentar, um das Feedback abschicken zu können.",
+      "giveFeedback": "Feedback geben",
+      "checkQuery": "Überprüfen Sie Ihren Suchbegriff oder ändern Sie die eingestellte Sprache der {{appName}}-App.",
+      "informationMissing": "Hier fehlen Informationen?",
+      "noResultsInUserLanguage": "Es wurden leider keine passenden Ergebnisse in Deiner Sprache gefunden.",
+      "noResultsInUserAndSourceLanguage": "Es wurden leider keine passenden Ergebnisse in Deiner Sprache oder auf Deutsch gefunden."
     },
     "am": {
       "disclaimer": "የግንኙነት መረጃና ዕትም",
@@ -4947,7 +4952,12 @@
       "positiveRating": "This site is useful",
       "searchTermDescription": "No result could be found for the following term:",
       "contactMailAddress": "E-Mail for further questions",
-      "note": "Please select a reaction or write a comment in order to send feedback."
+      "note": "Please select a reaction or write a comment in order to send feedback.",
+      "giveFeedback": "Give feedback",
+      "checkQuery": "Check your search term or select a different language in the {{appName}} app.",
+      "informationMissing": "Is information missing?",
+      "noResultsInUserLanguage": "Sorry, we could not find any matching results in your language.",
+      "noResultsInUserAndSourceLanguage": "Sorry, we could not find any matching results in your language or in German."
     },
     "es": {
       "disclaimer": "Contacto y aviso legal",

web/src/components/Feedback.tsx

@@ -4,7 +4,6 @@
 
 import buildConfig from '../constants/buildConfig'
 import dimensions from '../constants/dimensions'
-import Failure from './Failure'
 import FeedbackButtons from './FeedbackButtons'
 import { SendingStatusType } from './FeedbackContainer'
 import Note from './Note'
@@ -49,7 +48,6 @@
   onFeedbackChanged?: (isPositiveFeedback: boolean | null) => void
   onSubmit: () => void
   sendingStatus: SendingStatusType
-  noResults: boolean | undefined
   searchTerm: string | undefined
   setSearchTerm: (newTerm: string) => void
   closeFeedback: (() => void) | undefined
@@ -63,36 +61,32 @@
   onSubmit,
   onCommentChanged,
   onContactMailChanged,
   onFeedbackChanged,
-  noResults,
   searchTerm,
   setSearchTerm,
   closeFeedback,
 }: FeedbackProps): ReactElement => {
   const { t } = useTranslation('feedback')
 
   const isSearchFeedback = searchTerm !== undefined
   const commentTitle = isSearchFeedback ? 'wantedInformation' : 'commentHeadline'
   const sendFeedbackDisabled = isPositiveFeedback === null && comment.trim().length === 0 && !searchTerm
 
   if (sendingStatus === 'successful') {
     return (
       <Container>
         <div>{t('thanksMessage')}</div>
         {!!closeFeedback && !isSearchFeedback && <TextButton onClick={closeFeedback} text={t('common:close')} />}
       </Container>
     )
   }
 
   return (
     <Container $fullWidth={isSearchFeedback}>
       {isSearchFeedback ? (
-        <>
-          {noResults && <Failure errorMessage='search:nothingFound' />}
-          <InputSection id='searchTerm' title={t('searchTermDescription')}>
-            <Input id='searchTerm' value={searchTerm} onChange={setSearchTerm} />
-          </InputSection>
-        </>
+        <InputSection id='searchTerm' title={t('searchTermDescription')}>
+          <Input id='searchTerm' value={searchTerm} onChange={setSearchTerm} />
+        </InputSection>
       ) : (
         onFeedbackChanged && <FeedbackButtons isPositive={isPositiveFeedback} onRatingChange={onFeedbackChanged} />
       )}

web/src/components/FeedbackContainer.tsx

@@ -12,7 +12,6 @@ type FeedbackContainerProps = {
   routeType: FeedbackRouteType
   onClose?: () => void
   query?: string
-  noResults?: boolean
   slug?: string
   onSubmit?: () => void
   initialRating: boolean | null
@@ -22,7 +21,6 @@ export type SendingStatusType = 'idle' | 'sending' | 'failed' | 'successful'
 
 export const FeedbackContainer = ({
   query,
-  noResults,
   language,
   routeType,
   cityCode,
@@ -84,7 +82,6 @@ export const FeedbackContainer = ({
       searchTerm={searchTerm}
       setSearchTerm={setSearchTerm}
       closeFeedback={onClose}
-      noResults={noResults}
     />
   )
 }

web/src/components/SearchFeedback.tsx

@@ -3,7 +3,9 @@ import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
 import { SEARCH_ROUTE } from 'shared'
+import { config } from 'translations'
 
+import buildConfig from '../constants/buildConfig'
 import FeedbackContainer from './FeedbackContainer'
 import TextButton from './base/TextButton'
 
@@ -13,6 +15,22 @@ const Container = styled.div`
   align-items: center;
 `
 
+const CenteredContainer = styled.div`
+  text-align: center;
+`
+
+const SmallTitle = styled.p`
+  font-weight: 600;
+`
+
+const Hint = styled.p`
+  padding-bottom: 16px;
+`
+
+const StyledButton = styled(TextButton)`
+  margin-top: 8px;
+`
+
 type SearchFeedbackProps = {
   cityCode: string
   languageCode: string
@@ -26,21 +44,35 @@ const SearchFeedback = ({ cityCode, languageCode, query, noResults }: SearchFeed
 
   useEffect(() => setShowFeedback(false), [query])
 
-  if (noResults || showFeedback) {
+  if (showFeedback) {
     return (
       <Container>
         <FeedbackContainer
           cityCode={cityCode}
           language={languageCode}
           routeType={SEARCH_ROUTE}
           query={query}
-          noResults={noResults}
           initialRating={null}
         />
       </Container>
     )
   }
 
+  if (noResults) {
+    const fallbackLanguage = config.sourceLanguage
+
+    return (
+      <CenteredContainer>
+        <SmallTitle>
+          {languageCode === fallbackLanguage ? t('noResultsInUserLanguage') : t('noResultsInUserAndSourceLanguage')}
+        </SmallTitle>
+        <Hint>{t('checkQuery', { appName: buildConfig().appName })}</Hint>
+        <SmallTitle>{t('informationMissing')}</SmallTitle>
+        <StyledButton type='button' text={t('giveFeedback')} onClick={() => setShowFeedback(true)} />
+      </CenteredContainer>
+    )
+  }
+
   return (
     <Container>
       <TextButton onClick={() => setShowFeedback(true)} text={t('informationNotFound')} />

web/src/components/__tests__/Feedback.spec.tsx

@@ -89,7 +89,6 @@ describe('Feedback', () => {
       />,
     )
     expect(getByText('feedback:wantedInformation')).toBeTruthy()
-    expect(getByText('error:search:nothingFound')).toBeTruthy()
   })
 
   it('should display error', () => {

web/src/components/__tests__/SearchFeedback.spec.tsx

@@ -45,17 +45,18 @@ describe('SearchFeedback', () => {
     expect(queryByText('feedback:wantedInformation')).toBeNull()
   })
 
-  it('should show feedback if no results found', () => {
+  it('should show feedback button if no results found', () => {
     const { getByText } = renderWithTheme(
       <SearchFeedback cityCode={cityCode} languageCode={languageCode} query='ab' noResults />,
     )
-    expect(getByText('feedback:send')).toBeTruthy()
+    expect(getByText('feedback:giveFeedback')).toBeTruthy()
   })
 
   it('should not allow sending search feedback if query term is removed', async () => {
     const { getByText, rerender } = renderWithTheme(
       <SearchFeedback cityCode={cityCode} languageCode={languageCode} query='ab' noResults />,
     )
+    fireEvent.click(getByText('feedback:giveFeedback'))
     expect(getByText('feedback:send')).toBeEnabled()
 
     // the query is controlled in the parent of SearchFeedback, so we need to update the props
@@ -64,6 +65,7 @@ describe('SearchFeedback', () => {
         <SearchFeedback cityCode={cityCode} languageCode={languageCode} query='' noResults />
       </ThemeProvider>,
     )
+    fireEvent.click(getByText('feedback:giveFeedback'))
     await waitFor(() => expect(getByText('feedback:send')).toBeDisabled())
   })
 })