Polish metrics page and flow

src/features/areaAssignments/components/MetricCard.tsx

@@ -1,35 +1,26 @@
-import { Close } from '@mui/icons-material';
+import { Close, LinearScale, SwitchLeft } from '@mui/icons-material';
 import React, { FC, useEffect, useState } from 'react';
 import {
   Card,
   CardContent,
   Typography,
   Box,
   TextField,
-  Checkbox,
   Button,
   IconButton,
 } from '@mui/material';
 
+import messageIds from '../l10n/messageIds';
+import { Msg } from 'core/i18n';
 import { ZetkinMetric } from '../types';
 
 type MetricCardProps = {
-  hasDefinedDone: boolean;
-  isOnlyQuestion: boolean;
   metric: ZetkinMetric;
   onClose: () => void;
-  onDelete: (target: EventTarget & HTMLButtonElement) => void;
   onSave: (metric: ZetkinMetric) => void;
 };
 
-const MetricCard: FC<MetricCardProps> = ({
-  hasDefinedDone,
-  isOnlyQuestion,
-  metric,
-  onClose,
-  onDelete,
-  onSave,
-}) => {
+const MetricCard: FC<MetricCardProps> = ({ metric, onClose, onSave }) => {
   const [question, setQuestion] = useState<string>(metric.question || '');
   const [description, setDescription] = useState<string>(
     metric.description || ''
@@ -38,32 +29,36 @@ const MetricCard: FC<MetricCardProps> = ({
     metric.definesDone || false
   );
 
-  const isEditing = !!metric?.id;
-
   useEffect(() => {
     setQuestion(metric.question || '');
     setDescription(metric.description || '');
     setDefinesDone(metric.definesDone || false);
   }, [metric]);
 
-  const showDefinesDoneCheckbox =
-    metric.kind == 'boolean' && (metric.definesDone || !hasDefinedDone);
-
   return (
-    <Card sx={{ marginTop: 2 }}>
+    <Card sx={{ minWidth: 400 }}>
       <CardContent>
         <Box alignItems="center" display="flex" justifyContent="space-between">
-          <Typography gutterBottom variant="h5">
-            {metric.kind === 'boolean' ? 'Yes/No Question' : 'Scale Question'}
-          </Typography>
+          {metric.kind === 'boolean' ? (
+            <Typography alignItems="center" display="flex" variant="h6">
+              <SwitchLeft color="secondary" sx={{ marginRight: 1 }} />
+              <Msg id={messageIds.report.metricCard.choice} />
+            </Typography>
+          ) : (
+            <Typography alignItems="center" display="flex" variant="h6">
+              <LinearScale color="secondary" sx={{ marginRight: 1 }} />
+              <Msg id={messageIds.report.metricCard.scale} />
+            </Typography>
+          )}
+
           <IconButton onClick={onClose}>
             <Close />
           </IconButton>
         </Box>
         <Box display="flex" flexDirection="column" justifyContent="center">
           {metric.kind == 'scale5' && (
-            <Typography fontStyle="italic" mb={1}>
-              The areaAssignee will respond by giving a rating from 1 to 5
+            <Typography color="secondary" fontStyle="italic" mb={1}>
+              <Msg id={messageIds.report.metricCard.ratingDescription} />
             </Typography>
           )}
           <TextField
@@ -80,29 +75,7 @@ const MetricCard: FC<MetricCardProps> = ({
             value={description}
             variant="outlined"
           />
-          {showDefinesDoneCheckbox && (
-            <Box alignItems="center" display="flex">
-              <Checkbox
-                checked={definesDone}
-                disabled={definesDone && isOnlyQuestion}
-                onChange={(ev) => setDefinesDone(ev.target.checked)}
-              />
-              <Typography>
-                The answer to this question defines if the mission was
-                successful
-              </Typography>
-            </Box>
-          )}
-          <Box display="flex" gap={1} justifyContent="center" width="100%">
-            {isEditing && !isOnlyQuestion && (
-              <Button
-                color="error"
-                onClick={(ev) => onDelete(ev.currentTarget)}
-                variant="outlined"
-              >
-                Delete
-              </Button>
-            )}
+          <Box display="flex" gap={1} justifyContent="right" width="100%">
             <Button
               onClick={() => {
                 onSave({
@@ -113,9 +86,9 @@ const MetricCard: FC<MetricCardProps> = ({
                   question,
                 });
               }}
-              variant="outlined"
+              variant="contained"
             >
-              {isEditing ? 'Update' : 'Save'}
+              <Msg id={messageIds.report.metricCard.save} />
             </Button>
           </Box>
         </Box>

src/features/areaAssignments/l10n/messageIds.ts

@@ -136,4 +136,49 @@ export default makeMessages('feat.areaAssignments', {
       },
     },
   },
+  report: {
+    card: {
+      definesSuccess: m('Defines success'),
+      delete: m('Delete'),
+      description: m('No description'),
+      question: m('Untitled question'),
+    },
+    dataCard: {
+      header: m('Data precision & privacy'),
+      household: m('per household (most precise)'),
+      info: m('Collect data...'),
+      location: m('per location (less precise, more privacy)'),
+      subheader: m(
+        'Configuring where to store the data is a matter of striking a balance between precision and privacy that is right for your cause'
+      ),
+    },
+    delete: {
+      cancel: m('Cancel'),
+      confirm: m('Confirm'),
+      deleteWarningText: m<{ title: string }>(
+        'If you want to delete {title} you need to pick another choice question to be the question that defines if the visit was successful'
+      ),
+      dialog: m(
+        'Are you sure you want to delete this question? This action is permanent and it cannot be undone.'
+      ),
+      select: m('Select'),
+    },
+    metricCard: {
+      choice: m('Choice question'),
+      ratingDescription: m(
+        ' The assignee will respond by giving a rating from 1 to 5'
+      ),
+      save: m('Save'),
+      scale: m('Scale question'),
+    },
+    successCard: {
+      header: m('Successful visit'),
+      subheader: m(
+        'Pick a question to use when counting successful visits. Answering yes to this question will count the visit as successful'
+      ),
+    },
+    toolBar: {
+      title: m('Add questions for your canvass assignment.'),
+    },
+  },
 });