pcm-shared-components 2.1.384 → 2.1.386

package/dist/components/Reservation/AnimalVehicleDetailsEditor/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { TextField, Icon, IconButton, Button, Paper, Typography, InputAdornment, MenuItem, ToggleButton, ToggleButtonGroup, Checkbox, ListItemText, Chip, Alert } from '@mui/material';
+import { TextField, Icon, IconButton, Button, Paper, Typography, InputAdornment, MenuItem, ToggleButton, ToggleButtonGroup, Checkbox, ListItemText, Chip, Alert, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@mui/material';
 import { ThemeProvider } from '@mui/system';
 import { createTheme, useTheme, alpha } from '@mui/material/styles';
 import AddIcon from '@mui/icons-material/Add';
@@ -23,7 +23,9 @@ const KEYS = {
     requiredInformation: 'animal.required_information',
     missingCount: 'animal.missing_count',
     needsInformation: 'animal.needs_information',
-    maxReached: 'occupant_vehicle.max_animal'
+    maxReached: 'occupant_vehicle.max_animal',
+    removeConfirmTitle: 'animal.remove_confirm_title',
+    removeConfirmMessage: 'animal.remove_confirm_message'
   },
   vehicle: {
     sectionTitle: 'client_vehicle.client_vehicle_title',
@@ -33,7 +35,9 @@ const KEYS = {
     requiredInformation: 'client_vehicle.required_information',
     missingCount: 'client_vehicle.missing_count',
     needsInformation: 'client_vehicle.needs_information',
-    maxReached: 'occupant_vehicle.max_vehicle'
+    maxReached: 'occupant_vehicle.max_vehicle',
+    removeConfirmTitle: 'client_vehicle.remove_confirm_title',
+    removeConfirmMessage: 'client_vehicle.remove_confirm_message'
   }
 };
 
@@ -88,6 +92,26 @@ export const AnimalVehicleDetailsEditor = props => {
   const keys = KEYS[itemType] || KEYS.animal;
   const requiredErrorText = fieldType => i18next.t(REQUIRED_ERROR_KEY_BY_TYPE[fieldType] || 'animal.required_error');
   const missingRequiredFields = item => fieldConfig.filter(f => f.required).filter(f => !isFieldAnswered(f.type, item.values?.[f.key] ?? (f.type === 'select_multiple' ? [] : '')));
+
+  // Any field answered (not just required ones) -- an optional field someone bothered to fill in
+  // is still real data that'd be silently thrown away by a bare-click delete.
+  const hasAnyData = item => fieldConfig.some(f => isFieldAnswered(f.type, item.values?.[f.key] ?? (f.type === 'select_multiple' ? [] : '')));
+
+  // Removing an item that actually has data goes through a confirmation step first; an empty one
+  // (nothing entered yet) is removed immediately, same as before -- no point prompting when
+  // there's nothing to lose.
+  const [pendingRemoveId, setPendingRemoveId] = useState(null);
+  const requestRemove = item => {
+    if (hasAnyData(item)) {
+      setPendingRemoveId(item.id);
+    } else {
+      onRemoveItem(item.id);
+    }
+  };
+  const confirmRemove = () => {
+    onRemoveItem(pendingRemoveId);
+    setPendingRemoveId(null);
+  };
   const [selectedIndex, setSelectedIndex] = useState(0);
   // Growing the list (Add) jumps to the newly-added last item, since that's the one the host just
   // asked for and the one that needs filling in. Shrinking it (Remove) just clamps the current
@@ -140,9 +164,13 @@ export const AnimalVehicleDetailsEditor = props => {
       gap: 6
     }
   }, itemType === 'vehicle' ? /*#__PURE__*/React.createElement(Icon, {
-    color: "action"
+    sx: {
+      color: 'info.main'
+    }
   }, "drive_eta") : /*#__PURE__*/React.createElement(Icon, {
-    color: "action"
+    sx: {
+      color: 'success.main'
+    }
   }, "pets"), /*#__PURE__*/React.createElement(Typography, {
     sx: {
       fontWeight: 700
@@ -220,7 +248,7 @@ export const AnimalVehicleDetailsEditor = props => {
   }, i18next.t(keys.requiredInformation))), /*#__PURE__*/React.createElement(IconButton, {
     size: "small",
     color: "error",
-    onClick: () => onRemoveItem(selectedItem.id)
+    onClick: () => requestRemove(selectedItem)
   }, /*#__PURE__*/React.createElement(DeleteOutlineIcon, {
     fontSize: "small"
   }))), /*#__PURE__*/React.createElement("div", {
@@ -228,7 +256,8 @@ export const AnimalVehicleDetailsEditor = props => {
     className: "grid grid-cols-2",
     style: {
       columnGap: 12,
-      rowGap: 16
+      rowGap: 16,
+      gridAutoFlow: 'row dense'
     }
   }, fieldConfig.map(field => {
     const value = selectedItem.values?.[field.key] ?? '';
@@ -422,7 +451,18 @@ export const AnimalVehicleDetailsEditor = props => {
     }, i18next.t(keys.needsInformation, {
       count: incompleteCount
     }));
-  })()));
+  })(), /*#__PURE__*/React.createElement(Dialog, {
+    open: pendingRemoveId !== null,
+    onClose: () => setPendingRemoveId(null),
+    maxWidth: "xs",
+    fullWidth: true
+  }, /*#__PURE__*/React.createElement(DialogTitle, null, i18next.t(keys.removeConfirmTitle)), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(DialogContentText, null, i18next.t(keys.removeConfirmMessage))), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: () => setPendingRemoveId(null)
+  }, i18next.t('common.app.cancel')), /*#__PURE__*/React.createElement(Button, {
+    color: "error",
+    variant: "contained",
+    onClick: confirmRemove
+  }, i18next.t('common.app.remove'))))));
 };
 AnimalVehicleDetailsEditor.defaultProps = {
   items: [],

package/dist/languages/en/translations.json

@@ -34,7 +34,9 @@
     "needs_information": "{{count}} animal needs information",
     "needs_information_plural": "{{count}} animals need information",
     "complete_required_fields": "Complete {{count}} required field",
-    "complete_required_fields_plural": "Complete {{count}} required fields"
+    "complete_required_fields_plural": "Complete {{count}} required fields",
+    "remove_confirm_title": "Remove this animal?",
+    "remove_confirm_message": "All information entered for this animal will be lost. This can't be undone."
   },
   "app": {
     "common": {
@@ -572,7 +574,9 @@
     "needs_information": "{{count}} vehicle needs information",
     "needs_information_plural": "{{count}} vehicles need information",
     "complete_required_fields": "Complete {{count}} required field",
-    "complete_required_fields_plural": "Complete {{count}} required fields"
+    "complete_required_fields_plural": "Complete {{count}} required fields",
+    "remove_confirm_title": "Remove this vehicle?",
+    "remove_confirm_message": "All information entered for this vehicle will be lost. This can't be undone."
   },
   "common": {
     "app": {

package/dist/languages/es/translations.json

@@ -34,7 +34,9 @@
     "needs_information": "{{count}} animal necesita información",
     "needs_information_plural": "{{count}} animales necesitan información",
     "complete_required_fields": "Complete {{count}} campo requerido",
-    "complete_required_fields_plural": "Complete {{count}} campos requeridos"
+    "complete_required_fields_plural": "Complete {{count}} campos requeridos",
+    "remove_confirm_title": "¿Eliminar este animal?",
+    "remove_confirm_message": "Toda la información ingresada para este animal se perderá. Esto no se puede deshacer."
   },
   "app": {
     "common": {
@@ -572,7 +574,9 @@
     "needs_information": "{{count}} vehículo necesita información",
     "needs_information_plural": "{{count}} vehículos necesitan información",
     "complete_required_fields": "Complete {{count}} campo requerido",
-    "complete_required_fields_plural": "Complete {{count}} campos requeridos"
+    "complete_required_fields_plural": "Complete {{count}} campos requeridos",
+    "remove_confirm_title": "¿Eliminar este vehículo?",
+    "remove_confirm_message": "Toda la información ingresada para este vehículo se perderá. Esto no se puede deshacer."
   },
   "common": {
     "app": {

package/dist/languages/fr/translations.json

@@ -34,7 +34,9 @@
     "needs_information": "{{count}} animal nécessite des informations",
     "needs_information_plural": "{{count}} animaux nécessitent des informations",
     "complete_required_fields": "Complétez {{count}} champ requis",
-    "complete_required_fields_plural": "Complétez {{count}} champs requis"
+    "complete_required_fields_plural": "Complétez {{count}} champs requis",
+    "remove_confirm_title": "Supprimer cet animal ?",
+    "remove_confirm_message": "Toutes les informations saisies pour cet animal seront perdues. Cela ne peut pas être annulé."
   },
   "app": {
     "common": {
@@ -572,7 +574,9 @@
     "needs_information": "{{count}} véhicule nécessite des informations",
     "needs_information_plural": "{{count}} véhicules nécessitent des informations",
     "complete_required_fields": "Complétez {{count}} champ requis",
-    "complete_required_fields_plural": "Complétez {{count}} champs requis"
+    "complete_required_fields_plural": "Complétez {{count}} champs requis",
+    "remove_confirm_title": "Supprimer ce véhicule ?",
+    "remove_confirm_message": "Toutes les informations saisies pour ce véhicule seront perdues. Cela ne peut pas être annulé."
   },
   "common": {
     "app": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pcm-shared-components",
-  "version": "2.1.384",
+  "version": "2.1.386",
   "private": false,
   "main": "dist/index.js",
   "babel": {