pcm-shared-components 2.1.406 → 2.1.408

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

@@ -22,6 +22,22 @@ const isFullWidthField = field => ['select', 'textarea', 'select_multiple', 'not
 // through unflattened still works.
 const readFieldProp = (field, key) => field[key] !== undefined ? field[key] : field.meta?.[key];
 
+// Same type-aware required-field wording as AnimalVehicleDetailsEditor's tab-per-animal grid
+// (index.jsx, this directory) -- duplicated rather than shared, matching the small amount of
+// tolerated duplication already elsewhere in this feature (e.g. each host app keeps its own copy
+// for its live-preview sandbox). Falls back to animal.required_error for text/textarea. 'notice'
+// gets its own message rather than the generic one -- its required-satisfying condition is
+// stricter than every other type (see isFieldAnswered below): only a CHECKED "I have read this"
+// box counts, so "please fill this in" would read wrong for what's actually a checkbox.
+const REQUIRED_ERROR_KEY_BY_TYPE = {
+  select: 'animal.required_error_select',
+  select_multiple: 'animal.required_error_select_multiple',
+  number: 'animal.required_error_number',
+  date: 'animal.required_error_date',
+  yes_no: 'animal.required_error_yes_no',
+  notice: 'animal.required_error_notice'
+};
+
 /**
  * Flat, non-tabbed block for a lot's "once per reservation" animal fields: no tabs, no per-animal
  * chrome, no add/remove -- these are single shared values/notices for the whole reservation, not
@@ -59,12 +75,14 @@ export const AnimalFieldsOnceBlock = props => {
     fields,
     values,
     onChange,
+    isFieldAnswered,
     className,
     theme,
     i18next
   } = props;
   const compTheme = theme || useTheme();
   const defaultTheme = createTheme(compTheme);
+  const requiredErrorText = fieldType => i18next.t(REQUIRED_ERROR_KEY_BY_TYPE[fieldType] || 'animal.required_error');
   const relevantFields = fields.filter(field => readFieldProp(field, 'once_per_reservation') === true);
   if (relevantFields.length === 0) return null;
   return /*#__PURE__*/React.createElement(ThemeProvider, {
@@ -80,6 +98,14 @@ export const AnimalFieldsOnceBlock = props => {
     }
   }, relevantFields.map(field => {
     const rawValue = values?.[field.key] ?? (field.type === 'select_multiple' ? [] : '');
+    // Required-and-not-yet-answered gets the same red label + control error state the
+    // per-animal grid already shows (index.jsx, this directory) -- this block previously
+    // hardcoded error: false/helperText: '' unconditionally, so a required once-per-
+    // reservation field (e.g. a mandatory "I have read this" notice, or a required yes_no
+    // asked once) never visibly indicated it was outstanding. isFieldAnswered is supplied
+    // by the caller (same prop AnimalVehicleDetailsEditor already requires), since it's
+    // app-specific logic this shared package doesn't own.
+    const showError = field.required && !isFieldAnswered(field.type, rawValue);
     const labelText = field.required ? `${field.label} *` : field.label;
     return /*#__PURE__*/React.createElement("div", {
       key: field.key,
@@ -88,7 +114,8 @@ export const AnimalFieldsOnceBlock = props => {
       variant: "body2",
       sx: {
         fontWeight: 500,
-        mb: 0.5
+        mb: 0.5,
+        color: showError ? 'error.main' : 'text.primary'
       }
     }, labelText), renderFieldTypeControl({
       field,
@@ -98,8 +125,8 @@ export const AnimalFieldsOnceBlock = props => {
       // consumer's own event wiring calls it directly in a test.
       onChange: onChange ? newValue => onChange(field.key, newValue) : () => {},
       disabled: !onChange,
-      error: false,
-      helperText: '',
+      error: showError,
+      helperText: showError ? requiredErrorText(field.type) : '',
       i18next
     }));
   }))));
@@ -138,6 +165,10 @@ AnimalFieldsOnceBlock.propTypes = {
   /** (fieldKey, value) => void. Omit entirely to render every input control disabled/read-only
    * (review-screen usage) -- see the component doc above. */
   onChange: PropTypes.func,
+  /** (fieldType, value) => boolean. Same function each host app already passes into
+   * AnimalVehicleDetailsEditor's isFieldAnswered prop -- required so a required-but-unanswered
+   * once-per-reservation field can show the same red label/error state the per-animal grid does. */
+  isFieldAnswered: PropTypes.func.isRequired,
   /** 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/components/Reservation/AnimalVehicleDetailsEditor/fieldTypeControl.js

@@ -119,6 +119,17 @@ const NoticeFieldControl = ({
       color: error ? 'error' : 'primary'
     }),
     label: i18next.t('animal.read_notice_confirmation')
+    // The checkbox icon already goes red via `color` above when unchecked-and-required, but
+    // the label text next to it (the actual "I have read this" wording someone needs to read
+    // and act on) stayed the default color regardless -- targeting FormControlLabel's own
+    // label class is the supported way to color just that text, matching every other field's
+    // red label treatment above the control.
+    ,
+    sx: {
+      '& .MuiFormControlLabel-label': {
+        color: error ? 'error.main' : 'text.primary'
+      }
+    }
   }), helperText && /*#__PURE__*/React.createElement(FormHelperText, {
     error: error
   }, helperText));

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

@@ -92,12 +92,29 @@ export const AnimalVehicleDetailsEditor = props => {
     canAddMore,
     maxItems,
     showHistoricalAnswers,
+    bare,
     className,
     theme,
     i18next
   } = props;
   const compTheme = theme || useTheme();
   const defaultTheme = createTheme(compTheme);
+
+  // `bare`: skip this component's own outer card (background/border/rounding) and render its
+  // content as a plain fragment instead -- for a caller that wants to place this editor and
+  // AnimalFieldsOnceBlock's once-per-reservation fields inside ONE shared outer card (a Divider
+  // between them, not two separate adjacent cards), rather than this component supplying its own
+  // competing card around just the per-item half. Off by default so every existing usage keeps
+  // its current self-contained card look unchanged.
+  const OuterWrapper = bare ? React.Fragment : Paper;
+  const outerWrapperProps = bare ? {} : {
+    variant: 'outlined',
+    sx: {
+      p: 1.5,
+      borderRadius: 2,
+      bgcolor: 'action.hover'
+    }
+  };
   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' ? [] : '')));
@@ -234,14 +251,7 @@ export const AnimalVehicleDetailsEditor = props => {
     theme: defaultTheme
   }, /*#__PURE__*/React.createElement("div", {
     className: className
-  }, /*#__PURE__*/React.createElement(Paper, {
-    variant: "outlined",
-    sx: {
-      p: 1.5,
-      borderRadius: 2,
-      bgcolor: 'action.hover'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(OuterWrapper, outerWrapperProps, /*#__PURE__*/React.createElement("div", {
     className: "flex items-center justify-between mb-8"
   }, /*#__PURE__*/React.createElement("div", {
     className: "flex items-center",
@@ -605,6 +615,7 @@ AnimalVehicleDetailsEditor.defaultProps = {
   canAddMore: true,
   maxItems: 0,
   showHistoricalAnswers: true,
+  bare: false,
   className: 'w-full',
   theme: undefined,
   i18next: i18nextLocal
@@ -654,6 +665,10 @@ AnimalVehicleDetailsEditor.propTypes = {
    * 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,
+  /** Skip this component's own outer card (background/border/rounding) and render a plain
+   * fragment instead -- for a caller placing this editor and AnimalFieldsOnceBlock's fields inside
+   * one shared outer card. Defaults to false so every existing usage keeps its current look. */
+  bare: 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/package.json

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