pcm-shared-components 2.1.388 → 2.1.389

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

@@ -85,6 +85,7 @@ export const AnimalVehicleDetailsEditor = props => {
     onRemoveItem,
     canAddMore,
     maxItems,
+    showHistoricalAnswers,
     className,
     theme,
     i18next
@@ -115,6 +116,28 @@ export const AnimalVehicleDetailsEditor = props => {
     setPendingRemoveId(null);
   };
 
+  // Historical answers have no live field config left (see the Historical answers block below),
+  // so there's no field.type to route through a type-specific "clear" -- but classifyAnimalFieldValue
+  // treats an empty string as 'unanswered' regardless of what type the value used to be (a retired
+  // boolean/array/number all read back through the exact same generic-stringify branch above), so
+  // routing every deletion through the one existing onFieldChange callback with value '' is enough
+  // to make the entry disappear next render. No new prop needed on top of the ones this component
+  // already takes. Holds an array of keys so one dialog/confirm serves both a single delete and
+  // "Clear" (all of them at once) -- the array just has one entry for a single delete.
+  const [pendingHistoricalDelete, setPendingHistoricalDelete] = useState(null);
+  const requestDeleteHistorical = (itemId, deleteKeys) => setPendingHistoricalDelete({
+    itemId,
+    keys: deleteKeys
+  });
+  const confirmDeleteHistorical = () => {
+    const {
+      itemId,
+      keys: deleteKeys
+    } = pendingHistoricalDelete;
+    deleteKeys.forEach(k => onFieldChange(itemId, k, ''));
+    setPendingHistoricalDelete(null);
+  };
+
   // A drifted field (its stored value no longer matches this field's current type/options -- see
   // isFieldDrifted) renders read-only instead of feeding a mismatched value into a live
   // type-specific control (e.g. never shove a raw string into a date picker). "Replace" reveals
@@ -280,8 +303,12 @@ export const AnimalVehicleDetailsEditor = props => {
     // replaceable. Not drifted (or already revealed): behaves exactly as before.
     const value = showAsDrifted ? rawValue : wasDrifted ? field.type === 'select_multiple' ? [] : '' : rawValue;
     const showError = field.required && !isFieldAnswered(field.type, value);
-    const labelText = field.required ? `${field.label} *` : `${field.label} (${i18next.t('common.app.optional')})`;
-    const wrapperClassName = ['select', 'textarea', 'select_multiple', 'yes_no'].includes(field.type) ? 'col-span-full' : undefined;
+    // No "(Optional)" suffix -- required fields already say so via the asterisk, so
+    // spelling out the alternative on every other field was redundant noise, and the
+    // extra length was long enough to wrap onto a second line in a narrow column,
+    // throwing that field's input out of vertical alignment with its paired neighbor.
+    const labelText = field.required ? `${field.label} *` : field.label;
+    const wrapperClassName = ['select', 'textarea', 'select_multiple'].includes(field.type) ? 'col-span-full' : undefined;
     let control;
     if (showAsDrifted) {
       // Generic stringify -- this renders whatever type the field used to be, which
@@ -425,7 +452,8 @@ export const AnimalVehicleDetailsEditor = props => {
           if (val !== null) onFieldChange(selectedItem.id, field.key, val === 'yes');
         },
         fullWidth: true,
-        size: "small"
+        size: "small",
+        color: showError ? 'error' : 'standard'
       }, /*#__PURE__*/React.createElement(ToggleButton, {
         value: "yes"
       }, i18next.t('common.app.yes')), /*#__PURE__*/React.createElement(ToggleButton, {
@@ -484,7 +512,7 @@ export const AnimalVehicleDetailsEditor = props => {
       color: "error",
       className: "block mt-4"
     }, requiredErrorText(field.type)));
-  })))), selectedItem && (() => {
+  })))), showHistoricalAnswers && selectedItem && (() => {
     const liveKeys = new Set(fieldConfig.map(f => f.key));
     const historicalEntries = Object.keys(selectedItem.values || {}).filter(k => !liveKeys.has(k)).map(k => ({
       key: k,
@@ -500,11 +528,15 @@ export const AnimalVehicleDetailsEditor = props => {
         bgcolor: 'action.hover'
       }
     }, /*#__PURE__*/React.createElement("div", {
-      className: "flex items-center",
+      className: "flex items-center justify-between",
       style: {
-        gap: 6,
         marginBottom: 4
       }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center",
+      style: {
+        gap: 6
+      }
     }, /*#__PURE__*/React.createElement(WarningAmberIcon, {
       fontSize: "small",
       color: "warning"
@@ -512,7 +544,15 @@ export const AnimalVehicleDetailsEditor = props => {
       sx: {
         fontWeight: 700
       }
-    }, i18next.t('animal.historical_answers_title'))), /*#__PURE__*/React.createElement(Typography, {
+    }, i18next.t('animal.historical_answers_title'))), /*#__PURE__*/React.createElement(Button, {
+      size: "small",
+      color: "error",
+      onClick: () => requestDeleteHistorical(selectedItem.id, historicalEntries.map(e => e.key)),
+      sx: {
+        textTransform: 'none',
+        minWidth: 0
+      }
+    }, i18next.t('common.app.clear'))), /*#__PURE__*/React.createElement(Typography, {
       variant: "caption",
       color: "text.secondary",
       sx: {
@@ -535,7 +575,15 @@ export const AnimalVehicleDetailsEditor = props => {
       const label = k.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
       return /*#__PURE__*/React.createElement("div", {
         key: k,
-        className: "flex flex-col"
+        className: "flex items-start justify-between",
+        style: {
+          gap: 4
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "flex flex-col",
+        style: {
+          minWidth: 0
+        }
       }, /*#__PURE__*/React.createElement(Typography, {
         variant: "body2",
         sx: {
@@ -545,9 +593,21 @@ export const AnimalVehicleDetailsEditor = props => {
       }, label), /*#__PURE__*/React.createElement(Typography, {
         variant: "body2",
         sx: {
-          color: 'text.primary'
+          color: 'text.primary',
+          wordBreak: 'break-word'
+        }
+      }, displayText)), /*#__PURE__*/React.createElement(IconButton, {
+        size: "small",
+        color: "error",
+        "aria-label": i18next.t('common.app.delete'),
+        onClick: () => requestDeleteHistorical(selectedItem.id, [k]),
+        sx: {
+          flexShrink: 0,
+          mt: -0.5
         }
-      }, displayText));
+      }, /*#__PURE__*/React.createElement(DeleteOutlineIcon, {
+        fontSize: "small"
+      })));
     })));
   })(), (() => {
     const incompleteCount = items.filter(item => missingRequiredFields(item).length > 0).length;
@@ -590,7 +650,18 @@ export const AnimalVehicleDetailsEditor = props => {
     color: "error",
     variant: "contained",
     onClick: confirmRemove
-  }, i18next.t('common.app.remove'))))));
+  }, i18next.t('common.app.remove')))), /*#__PURE__*/React.createElement(Dialog, {
+    open: pendingHistoricalDelete !== null,
+    onClose: () => setPendingHistoricalDelete(null),
+    maxWidth: "xs",
+    fullWidth: true
+  }, /*#__PURE__*/React.createElement(DialogTitle, null, i18next.t('common.app.delete')), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(DialogContentText, null, i18next.t('common.app.generic_delete_message'))), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: () => setPendingHistoricalDelete(null)
+  }, i18next.t('common.app.cancel')), /*#__PURE__*/React.createElement(Button, {
+    color: "error",
+    variant: "contained",
+    onClick: confirmDeleteHistorical
+  }, i18next.t('common.app.delete'))))));
 };
 AnimalVehicleDetailsEditor.defaultProps = {
   items: [],
@@ -601,6 +672,7 @@ AnimalVehicleDetailsEditor.defaultProps = {
   isFieldDrifted: () => false,
   canAddMore: true,
   maxItems: 0,
+  showHistoricalAnswers: true,
   className: 'w-full',
   theme: undefined,
   i18next: i18nextLocal
@@ -642,6 +714,11 @@ AnimalVehicleDetailsEditor.propTypes = {
   canAddMore: PropTypes.bool,
   /** Shown in the "max reached" message once canAddMore is false. */
   maxItems: PropTypes.number,
+  /** Whether the read-only "Historical Answers" block (retired field keys still holding a value)
+   * can render at all. Defaults to true for the admin edit screen, where reviewing/clearing a
+   * since-retired answer on an EXISTING reservation is legitimate. A guest-facing booking widget
+   * creating a brand-new reservation has no history to show and should pass false. */
+  showHistoricalAnswers: PropTypes.bool,
   /** Classes applied to the component's own wrapper div. */
   className: PropTypes.string,
   /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used. */

package/dist/languages/en/translations.json

@@ -2475,7 +2475,8 @@
         "online_booking_title": "Animal details for online booking",
         "manage_fields": "Manage fields",
         "fields_configured_count_one": "{{count}} field configured",
-        "fields_configured_count_other": "{{count}} fields configured"
+        "fields_configured_count_other": "{{count}} fields configured",
+        "fields_configured_count_plural": "{{count}} fields configured"
       },
       "edit_lot": "Edit Lot",
       "lot_id_exist": "Lot number already exist",

package/dist/languages/es/translations.json

@@ -2475,7 +2475,8 @@
         "online_booking_title": "Detalles de los animales para la reserva en línea",
         "manage_fields": "Administrar campos",
         "fields_configured_count_one": "{{count}} campo configurado",
-        "fields_configured_count_other": "{{count}} campos configurados"
+        "fields_configured_count_other": "{{count}} campos configurados",
+        "fields_configured_count_plural": "{{count}} campos configurados"
       },
       "edit_lot": "Editar lote",
       "lot_id_exist": "El número de lote ya existe",

package/dist/languages/fr/translations.json

@@ -2475,7 +2475,8 @@
         "online_booking_title": "Détails sur les animaux pour la réservation en ligne",
         "manage_fields": "Gérer les champs",
         "fields_configured_count_one": "{{count}} champ configuré",
-        "fields_configured_count_other": "{{count}} champs configurés"
+        "fields_configured_count_other": "{{count}} champs configurés",
+        "fields_configured_count_plural": "{{count}} champs configurés"
       },
       "edit_lot": "Editer le lot",
       "lot_id_exist": "Le numéro de lot existe déjà",

package/package.json

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