✨ ContractAlarms migrated to React

tomatic/ui/src/pages/CallinfoPage/ContractAlarms.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import Card from '@mui/material/Card'
+import Box from '@mui/material/Box'
+
+export default function ContractAlarms({ contract }) {
+  const alarms = [
+    [contract.selfconsumption, 'label-selfconsumption', 'Autoconsum.'],
+    [contract.generation, 'label-generation', 'Rep Generation.'],
+    [contract.energetica, 'label-energetica', "És d'EnergÈtica."],
+    [contract.suspended_invoicing, 'label-alert', 'Facturació suspesa.'],
+    [contract.has_debt, 'label-alert', 'Té deute: ' + contract.has_debt],
+  ].filter(([active, className, message]) => active)
+
+  if (alarms.length===0) {
+    return <Card className="extra-info">{'No hi ha informació extra.'}</Card>
+  }
+  return (
+    <Card className="extra-info">
+      {alarms.map(([active, className, message]) => (
+        <Box className={className}>{message}</Box>
+      ))}
+    </Card>
+  )
+}

tomatic/ui/src/pages/CallinfoPage/ContractInfo.js

@@ -2,6 +2,7 @@ import React from 'react'
 import Box from '@mui/material/Box'
 import CallInfo from '../../mithril/components/callinfo'
 import TabbedCard from './TabbedCard'
+import ContractAlarms from './ContractAlarms'
 import { useSubscriptable } from '../../services/subscriptable'
 
 function formatContractNumber(number) {
@@ -114,9 +115,7 @@ function ContractContent() {
         {contract.pending_state ? contract.pending_state : 'Esborrany'}
       </InfoLine>
       <br />
-      {
-          //TODO extraInfo(contract),
-      }
+      <ContractAlarms contract={contract}/>
     </Box>
   )
 }