Commit e84bb2ad authored by Alex Kakiris's avatar Alex Kakiris
Browse files

add provider onboarding dialog

parent 81f0906e

capif_frontend/src/configs/apiService.js

+6 −0
Changes for capif_frontend/src/configs/apiService.js: 6 added lines, 0 removed lines.
Original line number Diff line number Diff line
@@ -12,6 +12,12 @@ export const getMyProviders = async () => { 
  return response.data

}



export const onboardProvider = async ({ apiProvDomInfo }) => {

  const response = await axiosInstance.post('/me/provider', { apiProvDomInfo })



  return response.data

}



// GET invokers with pagination and date order

export const getInvokersPagesOrder = async () => {

  try {

capif_frontend/src/pages/me/providers/index.js

+84 −4
Changes for capif_frontend/src/pages/me/providers/index.js: 84 added lines, 4 removed lines.
Original line number Diff line number Diff line 
import { useState } from 'react'

import Box from '@mui/material/Box'

import Card from '@mui/material/Card'

import CardHeader from '@mui/material/CardHeader'
@@ -8,9 +9,15 @@ import List from '@mui/material/List' 
import ListItem from '@mui/material/ListItem'

import ListItemText from '@mui/material/ListItemText'

import Typography from '@mui/material/Typography'

import { useQuery } from '@tanstack/react-query'

import Button from '@mui/material/Button'

import Dialog from '@mui/material/Dialog'

import DialogTitle from '@mui/material/DialogTitle'

import DialogContent from '@mui/material/DialogContent'

import DialogActions from '@mui/material/DialogActions'

import TextField from '@mui/material/TextField'

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'



import { getMyProviders } from 'src/configs/apiService'

import { getMyProviders, onboardProvider } from 'src/configs/apiService'

import { errorMessage, retryServerErrorsOnly } from 'src/configs/queryHelpers'



const MY_PROVIDERS_KEY = ['my-providers']
@@ -53,16 +60,89 @@ const ProviderList = () => { 
  )

}



const MyProvidersPage = () => (

const NewProviderDialog = ({ open, onClose }) => {

  const queryClient = useQueryClient()

  const [apiProvDomInfo, setApiProvDomInfo] = useState('')

  const [submitted, setSubmitted] = useState(false)



  const mutation = useMutation({

    mutationFn: onboardProvider,

    onSuccess: () => {

      queryClient.invalidateQueries({ queryKey: MY_PROVIDERS_KEY })

      resetAndClose()

    }

  })



  const resetAndClose = () => {

    setApiProvDomInfo('')

    setSubmitted(false)

    mutation.reset()

    onClose()

  }



  const missing = !apiProvDomInfo.trim()



  const handleSubmit = () => {

    setSubmitted(true)

    if (missing) return



    mutation.mutate({ apiProvDomInfo: apiProvDomInfo.trim() })

  }



  return (

    <Dialog open={open} onClose={mutation.isPending ? undefined : resetAndClose} fullWidth maxWidth='sm'>

      <DialogTitle>New provider</DialogTitle>

      <DialogContent>

        {mutation.isError && (

          <Alert severity='error' sx={{ mb: 2 }}>

            {errorMessage(mutation.error, 'Could not onboard the provider.')}

          </Alert>

        )}

        <TextField

          margin='dense'

          label='Provider domain information'

          fullWidth

          required

          value={apiProvDomInfo}

          onChange={event => setApiProvDomInfo(event.target.value)}

          error={submitted && missing}

          helperText={submitted && missing ? 'Required' : ' '}

        />

      </DialogContent>

      <DialogActions>

        <Button onClick={resetAndClose} disabled={mutation.isPending}>

          Cancel

        </Button>

        <Button onClick={handleSubmit} disabled={mutation.isPending}>

          {mutation.isPending ? <CircularProgress size={24} /> : 'Create'}

        </Button>

      </DialogActions>

    </Dialog>

  )

}



const MyProvidersPage = () => {

  const [dialogOpen, setDialogOpen] = useState(false)



  return (

    <Box sx={{ p: 6 }}>

      <Card>

      <CardHeader title='Your providers' />

        <CardHeader

          title='Your providers'

          action={

            <Button variant='contained' onClick={() => setDialogOpen(true)}>

              New provider

            </Button>

          }

        />

        <CardContent>

          <ProviderList />

        </CardContent>

      </Card>

      <NewProviderDialog open={dialogOpen} onClose={() => setDialogOpen(false)} />

    </Box>

  )

}



MyProvidersPage.acl = {

  action: 'read',