pcm-shared-components 2.1.407 → 2.1.409

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

@@ -18,10 +18,11 @@ export const openNativeDatePicker = e => {
   }
 };
 
-// Collapsed height for a notice's rich-text content before it needs a "View full ..." link. A
-// handful of lines of admin-entered text/markup fits inside this without ever showing the link at
-// all; anything longer gets clipped here and offered in full through the dialog below.
-const NOTICE_COLLAPSED_MAX_HEIGHT = 160;
+// Collapsed height for a notice's rich-text content before it needs a "Show More" link -- kept
+// deliberately small (~3 text lines) so a long admin-entered notice doesn't dominate the panel's
+// vertical space; anything longer gets clipped here and offered in full through the dialog below.
+// Short content still renders in full with no link at all (overflow-measured, not char-counted).
+const NOTICE_COLLAPSED_MAX_HEIGHT = 66;
 
 /**
  * The control for a `notice` field: the admin's sanitized rich text inside a bounded-height
@@ -85,21 +86,32 @@ const NoticeFieldControl = ({
     dangerouslySetInnerHTML: {
       __html: contentHtml
     }
-  })), overflowing && /*#__PURE__*/React.createElement(Button, {
+  })), overflowing &&
+  /*#__PURE__*/
+  // Bottom-right, per the requested layout. NOT disabled in read-only mode -- reading the
+  // full notice is always legitimate, only the checkbox below is a mutation. stopPropagation:
+  // some hosts render this control inside a click-to-edit card (e.g. the admin reservation
+  // review's occupant card) whose background clicks deliberately bubble up to open the
+  // editor -- opening the read-more dialog must not also trigger that.
+  React.createElement(Button, {
     size: "small",
-    disabled: disabled,
-    onClick: () => setDialogOpen(true),
+    onClick: e => {
+      e.stopPropagation();
+      setDialogOpen(true);
+    },
     sx: {
-      alignSelf: 'flex-start',
+      alignSelf: 'flex-end',
       textTransform: 'none',
       minWidth: 0,
       p: 0
     }
-  }, i18next.t('animal.view_full_field', {
-    label: field.label
-  })), /*#__PURE__*/React.createElement(Dialog, {
+  }, i18next.t('common.app.show_more')), /*#__PURE__*/React.createElement(Dialog, {
     open: dialogOpen,
-    onClose: () => setDialogOpen(false),
+    onClose: e => {
+      if (e && e.stopPropagation) e.stopPropagation();
+      setDialogOpen(false);
+    },
+    onClick: e => e.stopPropagation(),
     maxWidth: "sm",
     fullWidth: true,
     scroll: "paper"
@@ -110,7 +122,10 @@ const NoticeFieldControl = ({
       __html: contentHtml
     }
   })), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
-    onClick: () => setDialogOpen(false)
+    onClick: e => {
+      e.stopPropagation();
+      setDialogOpen(false);
+    }
   }, i18next.t('common.app.close')))), /*#__PURE__*/React.createElement(FormControlLabel, {
     control: /*#__PURE__*/React.createElement(Checkbox, {
       checked: value === true,
@@ -119,6 +134,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.407",
+  "version": "2.1.409",
   "private": false,
   "main": "dist/index.js",
   "babel": {