convert loading with callbacks to react-router-loaders (...suite, pro…

…ducer area finished, customer area begin...)

TODO

@@ -1 +1,2 @@
-Faire fonctionner le la modification d'un abattage bovin
+Revoir le fonctionnement du contrôle producteur / client
+Finir la migration avec react-router pour l'espace client

frontend/app/src/api/mock/MockApi.ts

@@ -69,8 +69,8 @@ export class MockApi {
         return this.mockApiProducers.getCustomers()
     }
 
-    getSales(args) {
-        this.log('getSales', args)
+    getSales() {
+        this.log('getSales', null)
         return this.mockApiSales.getSales()
     }
 
@@ -103,4 +103,15 @@ export class MockApi {
         this.log('getProducer', args)
         return this.mockApiProducers.getProducer()
     }
+
+    getStripeAccount(args) {
+        this.log('getStripeAccount', args)
+        return this.mockApiProducers.getStripeAccount()
+    }
+
+    createStripeAccount(args) {
+        this.log('createStripeAccount', args)
+        return this.mockApiProducers.getStripeAccount()
+    }
+
 }

frontend/app/src/api/mock/MockApiProducers.ts

@@ -1,8 +1,17 @@
+import { StripeAccount } from "@viandeendirect/api/dist/models"
 import {Customer} from "@viandeendirect/api/dist/models/Customer"
 import {Producer} from "@viandeendirect/api/dist/models/Producer"
 import {Sale} from "@viandeendirect/api/dist/models/Sale"
 
 export class MockApiProducers {
+    getStripeAccount(): StripeAccount {
+        return {
+            id: 1,
+            accountLink: 'http://fake_stripe_account_link',
+            stripeId: '12345',
+            detailsSubmitted: true
+        }
+    }
 
     getProducer(): Producer {
         return {

frontend/app/src/domains/customer/views/CustomersList.tsx

@@ -1,24 +1,16 @@
 import React from 'react';
-import { useEffect, useState } from 'react'
 import { Typography } from "@mui/material"
 import { DataGrid, GridRowsProp, GridColDef, GridToolbar } from '@mui/x-data-grid';
 
-import { useKeycloak } from '@react-keycloak/web'
-import { ApiInvoker } from '../../../api/ApiInvoker.ts';
+import { ApiBuilder } from '../../../api/ApiBuilder.ts';
+import { Producer } from '@viandeendirect/api/dist/models/Producer';
+import { ProducerService } from '../../commons/service/ProducerService.ts';
+import { useLoaderData } from 'react-router-dom';
+import { Customer } from '@viandeendirect/api/dist/models/Customer';
 
-export default function CustomersList({producer: producer}) {
+export default function CustomersList() {
 
-    const [customers, setCustomers] = useState([])
-    const { keycloak, initialized } = useKeycloak()
-    const apiInvoker = new ApiInvoker()
-
-    useEffect(() => {
-        loadCustomers()
-    }, [keycloak])
-
-    function loadCustomers() {
-        apiInvoker.callApiAuthenticatedly(keycloak, api => api.getProducerCustomers, producer.id, setCustomers, console.error)
-    }
+    const customers: Array<Customer> = useLoaderData()
 
     const rows: GridRowsProp = customers.map(customer => {
         return {
@@ -52,4 +44,13 @@ export default function CustomersList({producer: producer}) {
     </>
     )
 
+}
+
+export async function loadCustomersListData(keycloak): Promise<Array<Customer>> {
+    const producerService = new ProducerService(keycloak)
+    const producer: Producer = await producerService.asyncLoadProducer()
+    const apiBuilder = new ApiBuilder();
+    const api = await apiBuilder.getAuthenticatedApi(keycloak);
+    const customers = await api.getProducerCustomers({producerId: +producer.id})
+    return customers
 }

frontend/app/src/domains/producer/views/ProducerAccountView.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import { useState } from 'react'
+
+import { Button, Typography, CircularProgress } from "@mui/material"
+
+import { useKeycloak } from '@react-keycloak/web';
+import { Producer } from '@viandeendirect/api/dist/models/Producer.js';
+import { ProducerService } from '../../commons/service/ProducerService.ts';
+import { ApiBuilder } from '../../../api/ApiBuilder.ts';
+import { StripeAccount } from '@viandeendirect/api/dist/models/StripeAccount';
+import { useLoaderData } from 'react-router-dom';
+
+
+export default function ProducerAccountView() {
+
+  const {keycloak} = useKeycloak()
+  const apiBuilder = new ApiBuilder()
+  const loadedProducer: Producer = useLoaderData()  
+  const [producer, setProducer] = useState<Producer>(loadedProducer)
+  const [stripeAccountCreationPending, setStripeAccountCreationPending] = useState<boolean>(false)
+
+  return <>
+            <Typography variant="h6">Gestion du compte</Typography>
+            {displayStripeAccount()}
+          </>
+
+  function displayStripeAccount() {
+    if (producer?.stripeAccount) {
+      return <>
+        <div>Votre numéro de compte Stripe est {producer.stripeAccount.stripeId}</div>
+        {displayStripeAccountLink()}
+        </>
+    } else {
+      return <Button disabled={stripeAccountCreationPending} onClick={createStripeAccount}>
+        Créer un compte de paiement Stripe
+          {displayStripeAccountCreationProgress()}
+        </Button>
+    }
+  }
+
+  function displayStripeAccountLink() {
+    if(producer?.stripeAccount) {
+      if (!producer.stripeAccount.detailsSubmitted) {
+        return <Button onClick={() => window.location.href = producer.stripeAccount.accountLink}>Saisissez votre RIB et vos informations réglementaires sur Stripe</Button>
+      } else {
+        return <>
+          <Button onClick={() => window.open('https://dashboard.stripe.com/', '_blank')}>Consultez vos encaissements sur Stripe</Button>
+          <Button onClick={() => window.open(producer.stripeAccount.accountLink, '_self')}>Modifier votre RIB et vos informations réglementaires sur Stripe</Button>
+        </>
+      }
+    }
+  }
+
+  function displayStripeAccountCreationProgress() {
+    if (stripeAccountCreationPending) {
+      return <CircularProgress/>
+    }
+  }
+
+  async function createStripeAccount() {
+    setStripeAccountCreationPending(true)
+    const api = await apiBuilder.getAuthenticatedApi(keycloak)
+    const stripeAccount = await api.createStripeAccount({producerId: +producer.id})
+    setProducer({...producer, stripeAccount: stripeAccount})
+    setStripeAccountCreationPending(false)
+  }
+}
+
+export async function loadProducerAccountViewData(keycloak) {
+  const producerService = new ProducerService(keycloak)
+  const producer: Producer = await producerService.asyncLoadProducer()
+  const apiBuilder = new ApiBuilder();
+  const api = await apiBuilder.getAuthenticatedApi(keycloak);
+  if (producer.stripeAccount) {
+    const stripeAccount: StripeAccount = await api.getStripeAccount({producerId: +producer.id})
+    return {...producer, stripeAccount: stripeAccount}
+  }
+  return producer
+}