1571: Import stores backend

administration/jest.setup.ts

@@ -6,3 +6,7 @@ Object.assign(global, { TextDecoder, TextEncoder })
 Object.assign(window, { isSecureContext: true })
 Object.assign(window.crypto, { subtle })
 Object.assign(window.URL, { createObjectURL: jest.fn() })
+
+jest.mock('csv-stringify/browser/esm/sync', () => ({
+  stringify: jest.fn(),
+}))

administration/src/bp-modules/ButtonBar.tsx

@@ -1,6 +1,8 @@
 import { Card } from '@blueprintjs/core'
 import styled from 'styled-components'
 
+import dimensions from './constants/dimensions'
+
 const ButtonBar = styled(Card)`
   width: 100%;
   padding: 15px;
@@ -12,6 +14,7 @@ const ButtonBar = styled(Card)`
   & button {
     margin: 5px;
   }
+  height: ${dimensions.bottomBarHeight}px;
 `
 
 export default ButtonBar

administration/src/bp-modules/NavigationBar.tsx

@@ -7,11 +7,13 @@ import { WhoAmIContext } from '../WhoAmIProvider'
 import { Role } from '../generated/graphql'
 import { ProjectConfigContext } from '../project-configs/ProjectConfigContext'
 import UserMenu from './UserMenu'
+import dimensions from './constants/dimensions'
 
 const PrintAwareNavbar = styled(Navbar)`
   @media print {
     display: none;
   }
+  height: ${dimensions.navigationBarHeight};
 `
 
 interface Props {

administration/src/bp-modules/cards/CreateCardsButtonBar.test.tsx

@@ -8,9 +8,6 @@ import bayernConfig from '../../project-configs/bayern/config'
 import CreateCardsButtonBar from './CreateCardsButtonBar'
 
 jest.useFakeTimers()
-jest.mock('csv-stringify/browser/esm/sync', () => ({
-  stringify: jest.fn(),
-}))
 
 const wrapper = ({ children }: { children: ReactElement }) => <ProjectConfigProvider>{children}</ProjectConfigProvider>
 

administration/src/bp-modules/cards/ImportCardsInput.test.tsx

@@ -13,10 +13,6 @@ import { AppToasterProvider } from '../AppToaster'
 import { getHeaders } from './ImportCardsController'
 import ImportCardsInput, { ENTRY_LIMIT } from './ImportCardsInput'
 
-jest.mock('csv-stringify/browser/esm/sync', () => ({
-  stringify: jest.fn(),
-}))
-
 jest.mock('../../Router', () => ({}))
 
 const wrapper = ({ children }: { children: ReactElement }) => (

administration/src/bp-modules/cards/hooks/useCardGenerator.test.tsx

@@ -35,9 +35,6 @@ jest.mock('../../../cards/createCards', () => ({
   __esModule: true,
   default: jest.fn(),
 }))
-jest.mock('csv-stringify/browser/esm/sync', () => ({
-  stringify: jest.fn(),
-}))
 jest.mock('../../../cards/deleteCards')
 jest.mock('../../../util/downloadDataUri')
 

administration/src/bp-modules/constants/dimensions.ts

@@ -0,0 +1,10 @@
+type DimensionsType = {
+  navigationBarHeight: number
+  bottomBarHeight: number
+}
+
+const dimensions: DimensionsType = {
+  navigationBarHeight: 50,
+  bottomBarHeight: 70,
+}
+export default dimensions

administration/src/bp-modules/stores/StoresButtonBar.tsx

@@ -1,13 +1,16 @@
-import { Button, Tooltip } from '@blueprintjs/core'
-import React, { ReactElement } from 'react'
+import { Alert, Button, Tooltip } from '@blueprintjs/core'
+import React, { ReactElement, useState } from 'react'
 
 import ButtonBar from '../ButtonBar'
 import { AcceptingStoreEntry } from './AcceptingStoreEntry'
+import StoresImportAlert from './StoresImportAlert'
 
 type UploadStoresButtonBarProps = {
   goBack: () => void
   acceptingStores: AcceptingStoreEntry[]
   importStores: () => void
+  dryRun: boolean
+  setDryRun: (value: boolean) => void
 }
 
 const getToolTipMessage = (hasNoAcceptingStores: boolean, hasInvalidStores: boolean): string => {
@@ -20,22 +23,47 @@ const getToolTipMessage = (hasNoAcceptingStores: boolean, hasInvalidStores: bool
   return 'Importiere Akzeptanzpartner'
 }
 
-const StoresButtonBar = ({ goBack, acceptingStores, importStores }: UploadStoresButtonBarProps): ReactElement => {
+const StoresButtonBar = ({
+  goBack,
+  acceptingStores,
+  importStores,
+  dryRun,
+  setDryRun,
+}: UploadStoresButtonBarProps): ReactElement => {
   const hasInvalidStores = !acceptingStores.every(store => store.isValid())
   const hasNoAcceptingStores = acceptingStores.length === 0
+  const [importDialogIsOpen, setImportDialogIsOpen] = useState(false)
+  const confirmImportDialog = () => {
+    importStores()
+    setImportDialogIsOpen(false)
+  }
 
   return (
     <ButtonBar>
       <Button icon='arrow-left' text='Zurück zur Auswahl' onClick={goBack} />
-      <Tooltip placement='top' content={getToolTipMessage(hasNoAcceptingStores, hasInvalidStores)} disabled={false}>
+      <Tooltip
+        placement='top'
+        content={getToolTipMessage(hasNoAcceptingStores, hasInvalidStores)}
+        disabled={false}
+        openOnTargetFocus={false}>
         <Button
           icon='upload'
           text='Import Stores'
           intent='success'
-          onClick={importStores}
+          onClick={() => setImportDialogIsOpen(true)}
           disabled={hasNoAcceptingStores || hasInvalidStores}
         />
       </Tooltip>
+      <Alert
+        cancelButtonText='Abbrechen'
+        confirmButtonText='Stores importieren'
+        icon='upload'
+        intent='warning'
+        isOpen={importDialogIsOpen}
+        onCancel={() => setImportDialogIsOpen(false)}
+        onConfirm={confirmImportDialog}>
+        <StoresImportAlert dryRun={dryRun} setDryRun={setDryRun} />
+      </Alert>
     </ButtonBar>
   )
 }

administration/src/bp-modules/stores/StoresCSVInput.tsx

@@ -7,6 +7,7 @@ import { StoreFieldConfig } from '../../project-configs/getProjectConfig'
 import { useAppToaster } from '../AppToaster'
 import FileInputStateIcon, { FileInputStateType } from '../FileInputStateIcon'
 import { AcceptingStoreEntry } from './AcceptingStoreEntry'
+import { StoreData } from './StoresImportController'
 import StoresRequirementsText from './StoresRequirementsText'
 
 const StoreImportInputContainer = styled.div`
@@ -40,6 +41,16 @@ const lineToStoreEntry = (line: string[], headers: string[], fields: StoreFieldC
   return new AcceptingStoreEntry(storeData, fields)
 }
 
+const hasStoreDuplicates = (stores: AcceptingStoreEntry[]) => {
+  return (
+    new Set(
+      stores.map(({ data }: { data: StoreData }) =>
+        JSON.stringify([data['name'], data['street'], data['houseNumber'], data['postalCode'], data['location']])
+      )
+    ).size < stores.length
+  )
+}
+
 const StoresCsvInput = ({ setAcceptingStores, fields }: StoresCsvInputProps): ReactElement => {
   const [inputState, setInputState] = useState<FileInputStateType>('idle')
   const fileInput = useRef<HTMLInputElement>(null)
@@ -102,6 +113,11 @@ const StoresCsvInput = ({ setAcceptingStores, fields }: StoresCsvInputProps): Re
       }
       const acceptingStores = lines.map((line: string[]) => lineToStoreEntry(line, csvHeader, fields))
 
+      if (hasStoreDuplicates(acceptingStores)) {
+        showInputError(`Die CSV enthält doppelte Einträge.`)
+        return
+      }
+
       setAcceptingStores(acceptingStores)
       setInputState('idle')
     },

administration/src/bp-modules/stores/StoresImportAlert.tsx

@@ -0,0 +1,41 @@
+import { Checkbox } from '@blueprintjs/core'
+import React, { ReactElement } from 'react'
+import styled from 'styled-components'
+
+const StyledCheckbox = styled(Checkbox)`
+  margin: 12px 0;
+  align-self: center;
+`
+
+const CheckboxContainer = styled.div`
+  padding: 0 12px;
+  display: flex;
+`
+
+type StoreImportAlertProps = {
+  dryRun: boolean
+  setDryRun: (value: boolean) => void
+}
+
+const StoresImportAlert = ({ dryRun, setDryRun }: StoreImportAlertProps): ReactElement => {
+  return (
+    <>
+      {dryRun ? (
+        <span data-testid='dry-run-alert'>
+          <b>Testlauf:</b> In diesem Testlauf wird nur simuliert, wie viele Stores geupdated oder gelöscht werden
+          würden. Es werden keine Daten in die Datenbank geschrieben.
+        </span>
+      ) : (
+        <span data-testid='prod-run-alert'>
+          <b>Achtung:</b> Akzeptanzpartner, welche aktuell in der Datenbank gespeichert, aber nicht in der Tabelle
+          vorhanden sind, werden gelöscht!
+        </span>
+      )}
+      <CheckboxContainer>
+        <StyledCheckbox checked={dryRun} onChange={e => setDryRun(e.currentTarget.checked)} label='Testlauf' />
+      </CheckboxContainer>
+    </>
+  )
+}
+
+export default StoresImportAlert

administration/src/bp-modules/stores/StoresImportController.tsx

@@ -1,6 +1,7 @@
-import { NonIdealState } from '@blueprintjs/core'
+import { NonIdealState, Spinner } from '@blueprintjs/core'
 import React, { ReactElement, useContext, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
+import styled from 'styled-components'
 
 import { WhoAmIContext } from '../../WhoAmIProvider'
 import getMessageFromApolloError from '../../errors/getMessageFromApolloError'
@@ -11,6 +12,7 @@ import { useAppToaster } from '../AppToaster'
 import { AcceptingStoreEntry } from './AcceptingStoreEntry'
 import StoresButtonBar from './StoresButtonBar'
 import StoresCSVInput from './StoresCSVInput'
+import StoresImportResult from './StoresImportResult'
 import StoresTable from './StoresTable'
 
 const StoresImportController = (): ReactElement => {
@@ -29,6 +31,13 @@ const StoresImportController = (): ReactElement => {
   return <StoresImport fields={storeManagement.fields} />
 }
 
+const CenteredSpinner = styled(Spinner)`
+  z-index: 999;
+  top: 50%;
+  left: 50%;
+  position: fixed;
+`
+
 type StoreImportProps = {
   fields: StoreFieldConfig[]
 }
@@ -37,12 +46,25 @@ export type StoreData = {
   [key: string]: string
 }
 const StoresImport = ({ fields }: StoreImportProps): ReactElement => {
+  const { projectId } = useContext(ProjectConfigContext)
   const navigate = useNavigate()
   const appToaster = useAppToaster()
   const [acceptingStores, setAcceptingStores] = useState<AcceptingStoreEntry[]>([])
-  const [importStores] = useImportAcceptingStoresMutation({
-    onCompleted: () => {
-      appToaster?.show({ intent: 'success', message: 'Ihre Akzeptanzpartner wurden importiert.' })
+  const [dryRun, setDryRun] = useState<boolean>(false)
+  const [importStores, { loading: isApplyingStoreTransaction }] = useImportAcceptingStoresMutation({
+    onCompleted: ({ result }) => {
+      appToaster?.show({
+        intent: 'none',
+        timeout: 0,
+        message: (
+          <StoresImportResult
+            dryRun={dryRun}
+            storesUntouched={result.storesUntouched}
+            storesDeleted={result.storesDeleted}
+            storesCreated={result.storesCreated}
+          />
+        ),
+      })
       setAcceptingStores([])
     },
     onError: error => {
@@ -59,16 +81,24 @@ const StoresImport = ({ fields }: StoreImportProps): ReactElement => {
     }
   }
 
-  const onImportStores = () => importStores({ variables: { stores: acceptingStores.map(store => store.data) } })
+  const onImportStores = () =>
+    importStores({ variables: { stores: acceptingStores.map(store => store.data), project: projectId, dryRun } })
 
   return (
     <>
+      {isApplyingStoreTransaction && <CenteredSpinner intent='primary' />}
       {acceptingStores.length === 0 ? (
         <StoresCSVInput setAcceptingStores={setAcceptingStores} fields={fields} />
       ) : (
         <StoresTable fields={fields} acceptingStores={acceptingStores} />
       )}
-      <StoresButtonBar goBack={goBack} acceptingStores={acceptingStores} importStores={onImportStores} />
+      <StoresButtonBar
+        goBack={goBack}
+        acceptingStores={acceptingStores}
+        importStores={onImportStores}
+        dryRun={dryRun}
+        setDryRun={setDryRun}
+      />
     </>
   )
 }

administration/src/bp-modules/stores/StoresImportResult.tsx

@@ -0,0 +1,47 @@
+import { H5 } from '@blueprintjs/core'
+import React, { ReactElement } from 'react'
+import styled from 'styled-components'
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+type StoreImportResultProps = {
+  storesCreated: number
+  storesDeleted: number
+  storesUntouched: number
+  dryRun: boolean
+}
+
+const StoresImportResult = ({
+  storesDeleted,
+  storesUntouched,
+  storesCreated,
+  dryRun,
+}: StoreImportResultProps): ReactElement => {
+  return (
+    <Container>
+      <H5 data-testid='import-result-headline'>{`Der ${
+        dryRun ? 'Testimport' : 'Import'
+      } der Akzeptanzpartner war erfolgreich!`}</H5>
+      <span>
+        {dryRun
+          ? 'Folgende Änderungen würden sich ergeben:'
+          : 'Folgende Änderungen in der Datenbank wurden vorgenommen'}
+      </span>
+      <br />
+      <div>
+        Akzeptanzstellen erstellt: <span data-testid='storesCreated'>{storesCreated}</span>
+      </div>
+      <div>
+        Akzeptanzstellen gelöscht: <span data-testid='storesDeleted'>{storesDeleted}</span>
+      </div>
+      <div>
+        Akzeptanzstellen unverändert: <span data-testid='storesUntouched'>{storesUntouched}</span>
+      </div>
+    </Container>
+  )
+}
+
+export default StoresImportResult

administration/src/bp-modules/stores/StoresTable.tsx

@@ -4,13 +4,13 @@ import { useCallback } from 'react'
 import styled from 'styled-components'
 
 import { StoreFieldConfig } from '../../project-configs/getProjectConfig'
+import dimensions from '../constants/dimensions'
 import { AcceptingStoreEntry } from './AcceptingStoreEntry'
 
 const TableContainer = styled.div`
   width: 100vw;
-  height: 85vh;
+  height: calc(100vh - ${dimensions.navigationBarHeight + dimensions.bottomBarHeight}px);
   display: flex;
-  align-self: center;
 `
 
 const StyledCell = styled(Cell)`

administration/src/bp-modules/stores/__tests__/AcceptanceStoreEntry.test.ts

@@ -2,9 +2,6 @@ import nuernbergConfig from '../../../project-configs/nuernberg/config'
 import { AcceptingStoreEntry } from '../AcceptingStoreEntry'
 import { invalidStoreData, validStoreData } from '../__mock__/mockStoreEntry'
 
-jest.mock('csv-stringify/browser/esm/sync', () => ({
-  stringify: jest.fn(),
-}))
 const fields = nuernbergConfig.storeManagement.enabled ? nuernbergConfig.storeManagement.fields : []
 describe('AcceptanceStoreEntry', () => {
   it('should be validated false store invalid entries', () => {