1419: add store icon, simplify cardState, add reusable components, ad…

…d test for windows dimension hook, fix margin of tooltip, add todos
digitalfabrik · Oct 1, 2024 · 7ae5d82 · 7ae5d82
1 parent da33e63
commit 7ae5d82
Show file tree

Hide file tree

Showing 20 changed files with 248 additions and 142 deletions.
diff --git a/administration/src/assets/android_appstore_icon.png b/administration/src/assets/android_appstore_icon.png
diff --git a/administration/src/assets/android_appstore_icon.svg b/administration/src/assets/android_appstore_icon.svg
diff --git a/administration/src/bp-modules/cards/hooks/useCardGenerator.ts b/administration/src/bp-modules/cards/hooks/useCardGenerator.ts
@@ -38,7 +38,6 @@ const useCardGenerator = (region: Region) => {
       appToaster?.show({ intent: 'success', message: 'Bestätigungsmail wurde versendet.' })
     },
     onError: error => {
-      console.log(error.message)
       const { title } = getMessageFromApolloError(error)
       appToaster?.show({
         intent: 'danger',
@@ -95,7 +94,6 @@ const useCardGenerator = (region: Region) => {
           intent: 'danger',
         })
       } else if (error instanceof PdfError) {
-        console.log(error)
         appToaster?.show({
           message: 'Etwas ist schiefgegangen beim Erstellen der PDF.',
           intent: 'danger',

diff --git a/administration/src/bp-modules/self-service/CardSelfServiceActivation.tsx b/administration/src/bp-modules/self-service/CardSelfServiceActivation.tsx
@@ -1,32 +1,10 @@
-import { Icon } from '@blueprintjs/core'
-import { Button, styled } from '@mui/material'
+import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined'
+import { styled } from '@mui/material'
 import React, { ReactElement } from 'react'
 
-const StyledButton = styled(Button)`
-  display: inline-block;
-  background-color: #922224;
-  margin-top: 24px;
-  width: fit-content;
-  :hover {
-    color: white;
-    background-color: #922224;
-  }
-`
-
-const Text = styled('div')`
-  margin-bottom: 24px;
-  font-size: 16px;
-`
-
-const PDFDownloadButton = styled('button')`
-  background-color: transparent;
-  border: none;
-  display: flex;
-  gap: 12px;
-  margin-bottom: 24px;
-  cursor: pointer;
-  font-size: 16px;
-`
+import { ActionButton } from './components/ActionButton'
+import { IconTextButton } from './components/IconTextButton'
+import { InfoText } from './components/InfoText'
 
 const Container = styled('div')`
   display: flex;
@@ -40,15 +18,15 @@ type CardSelfServiceActivationProps = {
 const CardSelfServiceActivation = ({ deepLink, downloadPdf }: CardSelfServiceActivationProps): ReactElement => {
   return (
     <Container>
-      <PDFDownloadButton onClick={downloadPdf}>
+      <IconTextButton onClick={downloadPdf}>
         {' '}
-        <Icon icon='download' />
+        <FileDownloadOutlinedIcon />
         AntragsPDF herunterladen
-      </PDFDownloadButton>
-      <Text>Um Ihren Pass zu aktivieren, klicken Sie bitte hier:</Text>
-      <StyledButton href={deepLink} variant='contained' size='large'>
+      </IconTextButton>
+      <InfoText>Um Ihren Pass zu aktivieren, klicken Sie bitte hier:</InfoText>
+      <ActionButton href={deepLink} variant='contained' size='large'>
         Pass aktivieren
-      </StyledButton>
+      </ActionButton>
     </Container>
   )
 }

diff --git a/administration/src/bp-modules/self-service/CardSelfServiceForm.tsx b/administration/src/bp-modules/self-service/CardSelfServiceForm.tsx
@@ -1,5 +1,6 @@
-import { Checkbox, FormGroup, InputGroup, Intent, Tooltip } from '@blueprintjs/core'
-import { Button, styled } from '@mui/material'
+import { Checkbox, FormGroup, InputGroup, Intent } from '@blueprintjs/core'
+import InfoOutlined from '@mui/icons-material/InfoOutlined'
+import { Alert, styled } from '@mui/material'
 import React, { ChangeEvent, ReactElement, useContext, useState } from 'react'
 
 import CardBlueprint from '../../cards/CardBlueprint'
@@ -8,28 +9,30 @@ import useWindowDimensions from '../../hooks/useWindowDimensions'
 import BasicDialog from '../../mui-modules/application/BasicDialog'
 import { ProjectConfigContext } from '../../project-configs/ProjectConfigContext'
 import { ExtensionForm } from '../cards/AddCardForm'
+import { ActionButton } from './components/ActionButton'
+import { IconTextButton } from './components/IconTextButton'
 
 const PrivacyButton = styled('button')`
-  border: none !important;
+  border: none;
   background-color: transparent;
   color: blue;
   text-decoration: underline;
   padding: 0;
   cursor: pointer;
 `
 
-const StyledButton = styled(Button)`
-  background-color: #922224;
+const StyledCheckbox = styled(Checkbox)`
   margin-top: 24px;
-  :hover {
-    color: white;
-    background-color: #922224;
-  }
+  font-size: 16px;
+  margin-left: 4px;
 `
 
-const StyledCheckbox = styled(Checkbox)`
-  margin-top: 24px !important;
-  font-size: 16px;
+const StyledAlert = styled(Alert)`
+  margin-bottom: 24px;
+`
+
+const Container = styled('div')`
+  margin-bottom: 24px;
 `
 
 type CardSelfServiceFormProps = {
@@ -46,7 +49,7 @@ const getTooltipMessage = (cardsValid: boolean, dataPrivacyAccepted: boolean): s
     tooltipMessages.push('Mindestens eine Ihrer Angaben ist ungültig.')
   }
   if (!dataPrivacyAccepted) {
-    tooltipMessages.push('Bitte akzeptieren sie die Datenschutzerklärung.')
+    tooltipMessages.push('Bitte akzeptieren Sie die Datenschutzerklärung.')
   }
 
   return tooltipMessages.join(' ')
@@ -61,6 +64,7 @@ const CardSelfServiceForm = ({
   const { viewportSmall } = useWindowDimensions()
   const projectConfig = useContext(ProjectConfigContext)
   const [openDataPrivacy, setOpenDataPrivacy] = useState<boolean>(false)
+  const [openReferenceInformation, setOpenReferenceInformation] = useState<boolean>(false)
   const cardValid = card.isValid()
   const cardCreationDisabled = !cardValid || !dataPrivacyAccepted
   const clearNameInput = () => {
@@ -70,7 +74,7 @@ const CardSelfServiceForm = ({
 
   return (
     <>
-      <div key={card.id}>
+      <Container key={card.id}>
         <FormGroup label='Name'>
           <InputGroup
             large={viewportSmall}
@@ -79,7 +83,6 @@ const CardSelfServiceForm = ({
             rightElement={
               <ClearInputButton viewportSmall={viewportSmall} onClick={clearNameInput} input={card.fullName} />
             }
-            //If the size of the card is too large, show a warning at the name field as it is the only dynamically sized field
             intent={card.isFullNameValid() ? undefined : Intent.DANGER}
             value={card.fullName}
             onChange={(event: ChangeEvent<HTMLInputElement>) => {
@@ -91,23 +94,33 @@ const CardSelfServiceForm = ({
         {card.extensions.map((ext, i) => (
           <ExtensionForm key={i} extension={ext} onUpdate={notifyUpdate} viewportSmall={viewportSmall} />
         ))}
+        <IconTextButton onClick={() => setOpenReferenceInformation(true)}>
+          <InfoOutlined />
+          Informationen zur Referenznummer
+        </IconTextButton>
         <StyledCheckbox checked={dataPrivacyAccepted} onChange={() => setDataPrivacyAccepted(!dataPrivacyAccepted)}>
           Ich akzeptiere die{' '}
           <PrivacyButton onClick={() => setOpenDataPrivacy(true)}>Datenschutzerklärung</PrivacyButton>.
         </StyledCheckbox>
-      </div>
-      <Tooltip
-        placement='top'
-        content={getTooltipMessage(cardValid, dataPrivacyAccepted)}
-        disabled={!cardCreationDisabled}>
-        <StyledButton onClick={generateCards} variant='contained' disabled={cardCreationDisabled} size='large'>
-          Pass erstellen
-        </StyledButton>
-      </Tooltip>
-
+      </Container>
+      {cardCreationDisabled && (
+        <StyledAlert variant='outlined' severity='warning'>
+          {getTooltipMessage(cardValid, dataPrivacyAccepted)}
+        </StyledAlert>
+      )}
+      <ActionButton onClick={generateCards} variant='contained' disabled={cardCreationDisabled} size='large'>
+        Pass erstellen
+      </ActionButton>
       <BasicDialog
-        open={openDataPrivacy}
+        open={openReferenceInformation}
         maxWidth='lg'
+        onUpdateOpen={setOpenReferenceInformation}
+        title={'Informationen zur Referenznummer'}
+        content={<>Waiting for information...</>}
+      />
+      <BasicDialog
+        open={openDataPrivacy}
+        maxWidth='md'
         onUpdateOpen={setOpenDataPrivacy}
         title={projectConfig.dataPrivacyHeadline}
         content={

diff --git a/administration/src/bp-modules/self-service/CardSelfServiceInformation.tsx b/administration/src/bp-modules/self-service/CardSelfServiceInformation.tsx
@@ -1,65 +1,56 @@
-import { Button, styled } from '@mui/material'
+import { styled } from '@mui/material'
 import React, { ReactElement } from 'react'
 
+import AndroidStoreIcon from '../../assets/android_appstore_icon.svg'
 import AppleStoreIcon from '../../assets/ios_appstore_icon.svg'
+import { ActionButton } from './components/ActionButton'
+import { InfoText } from './components/InfoText'
 
 type CardSelfServiceInformationProps = {
   goToActivation: () => void
 }
 
-const StyledButton = styled(Button)`
-  margin-top: 24px;
-  background-color: #922224;
-  width: fit-content;
-  :hover {
-    color: white;
-    background-color: #922224;
-  }
-`
-
 const StoreLink = styled('a')`
   display: flex;
   gap: 20px;
   align-items: center;
   text-decoration: none;
   color: black;
-  margin: 16px 0;
+  margin: 24px 0;
 `
 
-const InfoText = styled('div')`
-  margin-top: 24px;
-  display: flex;
-  flex-direction: column;
-  font-size: 16px;
+const StoreIcon = styled('img')`
+  height: 40px;
+  width: 130px;
 `
 
 const LinkContainer = styled('div')`
   margin-bottom: 8px;
   font-size: 16px;
 `
-
+// TODO 1647 provide store links
 const CardSelfServiceInformation = ({ goToActivation }: CardSelfServiceInformationProps): ReactElement => {
   return (
     <>
       <LinkContainer>
-        <StoreLink href='https://apple.com'>
-          <img src={AppleStoreIcon} height='40' alt='AppStore öffnen' />
+        <StoreLink href='https://apple.com' target='_blank' rel='noreferrer'>
+          <StoreIcon src={AppleStoreIcon} alt='AppStore öffnen' />
           AppStore öffnen
         </StoreLink>
-        <StoreLink href='https://google.com'>
-          <img src={AppleStoreIcon} height='40' alt='AppStore öffnen' />
-          AppStore öffnen
+        <StoreLink href='https://google.com' target='_blank' rel='noreferrer'>
+          <StoreIcon src={AndroidStoreIcon} alt='Google Play öffnen' />
+          Google Play öffnen
         </StoreLink>
       </LinkContainer>
       <InfoText>
-        <span>
+        <div>
           <b>App bereits installiert?</b>
-        </span>
-        <span>Einfach weiter klicken.</span>
+        </div>
+        <div>Einfach weiter klicken.</div>
       </InfoText>
-      <StyledButton onClick={goToActivation} variant='contained' size='large'>
+      <ActionButton onClick={goToActivation} variant='contained' size='large'>
         Zur Aktivierung
-      </StyledButton>
+      </ActionButton>
     </>
   )
 }