@campxdev/shared 1.11.1 → 1.11.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.11.1",
+  "version": "1.11.3",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/HookForm/AutoCompleteSearch.tsx

@@ -23,6 +23,7 @@ interface MultiSelectProps {
   loading?: boolean
   [key: string]: any
   multiple?: boolean
+  disabled?: boolean
 }
 
 export default function FormAutoCompleteSearch({
@@ -33,6 +34,7 @@ export default function FormAutoCompleteSearch({
   loading, // pass this variable when options are from an async operation
   hookForm = true,
   multiple = false,
+  disabled = false,
   ...props
 }: MultiSelectProps) {
   if (!hookForm) {
@@ -44,12 +46,14 @@ export default function FormAutoCompleteSearch({
         onChange={(e, value) => {
           props.onChange(value)
         }}
+        disabled={disabled}
         options={options || []}
         getOptionLabel={(option: Option) => option?.label || ''}
         renderInput={(params) => (
           <TextField
             variant="outlined"
             label={<FormLabel label={label} required={props.required} />}
+            disabled={disabled}
             {...params}
           />
         )}
@@ -74,11 +78,13 @@ export default function FormAutoCompleteSearch({
             }}
             options={options || []}
             getOptionLabel={(option: Option) => option?.label || ''}
+            disabled={disabled}
             renderInput={(params) => (
               <TextField
                 error={Boolean(error)}
                 variant="outlined"
                 label={<FormLabel label={label} required={props.required} />}
+                disabled={disabled}
                 InputProps={{
                   ...params.InputProps,
                   endAdornment: (

package/src/components/HookForm/MultiCheckbox.tsx

@@ -8,14 +8,14 @@ import {
 import { ReactNode } from 'react'
 import { Controller } from 'react-hook-form'
 import { FormLabel, SingleCheckbox } from '../Input'
-import { IOption } from '../Input/types'
 
 interface Props extends FormGroupProps {
   label?: ReactNode
   name: string
   control: any
-  options: IOption[]
+  options: { label: ReactNode; value: any; disabled?: boolean }[]
   required?: boolean
+  disabled?: boolean
   row?: boolean
   containerProps?: BoxProps
   disableSelected?: boolean
@@ -29,6 +29,7 @@ export default function FormMultiCheckbox({
   required = false,
   row = true,
   disableSelected = false,
+  disabled = false,
   containerProps,
   ...rest
 }: Props) {
@@ -45,10 +46,12 @@ export default function FormMultiCheckbox({
                 key={index}
                 name={name}
                 disabled={
-                  disableSelected &&
-                  field?.value
-                    ?.map((item: any) => item?.value)
-                    ?.includes(item?.value)
+                  (disableSelected &&
+                    field?.value
+                      ?.map((item: any) => item?.value)
+                      ?.includes(item?.value)) ||
+                  disabled ||
+                  item?.disabled
                 }
                 checked={field?.value
                   ?.map((item: any) => item?.value)

package/src/components/HookForm/MultiSelect.tsx

@@ -17,6 +17,7 @@ interface MultiSelectProps {
     reason: AutocompleteInputChangeReason,
   ) => void
   required?: boolean
+  disabled?: boolean
   value?: IOption[] | IOption
   onChange?: (value: IOption[] | IOption) => void
   multiple?: boolean
@@ -31,6 +32,7 @@ export default function FormMultiSelect({
   label,
   loading,
   required,
+  disabled = false,
   multiple = true,
   noOptionsText,
   onInputChange,
@@ -56,6 +58,7 @@ export default function FormMultiSelect({
             error={!!error}
             noOptionsText={noOptionsText}
             required={required}
+            disabled={disabled}
             helperText={error ? error.message : null}
             limitTags={limitTags}
             {...props}

package/src/components/HookForm/RadioGroup.tsx

@@ -10,6 +10,7 @@ interface Props extends RadioGroupProps {
   sx?: any
   row?: boolean
   required?: boolean
+  disabled?: boolean
   options: { value: any; label: string | ReactNode; disabled?: boolean }[]
   containerProps?: BoxProps
 }
@@ -21,6 +22,7 @@ export default function FormRadioGroup({
   options = [],
   row = false,
   containerProps,
+  disabled = false,
   ...rest
 }: Props) {
   return (
@@ -36,6 +38,7 @@ export default function FormRadioGroup({
             options={options}
             value={field.value}
             onChange={field.onChange}
+            disabled={disabled}
             error={error ? true : false}
             helperText={error ? error?.message : null}
             {...rest}

package/src/components/Input/MultiCheckbox.tsx

@@ -1,6 +1,5 @@
 import { Box, BoxProps, FormGroup, FormHelperText } from '@mui/material'
 import { ReactNode } from 'react'
-import { Controller } from 'react-hook-form'
 import FormLabel from './FormLabel'
 import SingleCheckbox from './SingleCheckbox'
 
@@ -8,8 +7,9 @@ interface Props {
   label?: ReactNode
   name: string
   size?: 'small' | 'medium'
-  options: Array<{ label: ReactNode; value: any }>
+  options: Array<{ label: ReactNode; value: any; disabled?: boolean }>
   required?: boolean
+  disabled?: boolean
   row?: boolean
   error?: boolean
   helperText?: ReactNode
@@ -23,6 +23,7 @@ export default function MultiCheckbox({
   label,
   options = [],
   required = false,
+  disabled = false,
   value = [],
   onChange,
   error,
@@ -43,6 +44,7 @@ export default function MultiCheckbox({
             checked={value
               ?.map((item: any) => item?.value)
               ?.includes(item?.value)}
+            disabled={disabled || item?.disabled}
             onChange={(e) => {
               if (e.target.checked) {
                 let newValue = [...value, item]

package/src/components/Input/MultiSelect.tsx

@@ -83,6 +83,7 @@ interface MultiSelectProps {
     reason: AutocompleteInputChangeReason,
   ) => void
   required?: boolean
+  disabled?: boolean
   error?: boolean
   helperText?: string
   multiple?: boolean
@@ -99,6 +100,7 @@ export default function MultiSelect({
   onChange,
   onInputChange,
   required,
+  disabled = false,
   error,
   noOptionsText,
   helperText,
@@ -126,6 +128,7 @@ export default function MultiSelect({
         option?.value === value?.value
       }
       disableCloseOnSelect
+      disabled={disabled}
       PopperComponent={StyledPopper}
       renderOption={(props, option: any, { selected }) => (
         <li {...props}>
@@ -145,6 +148,7 @@ export default function MultiSelect({
           helperText={helperText}
           label={label}
           required={required}
+          disabled={disabled}
           InputProps={{
             ...params.InputProps,
             endAdornment: (

package/src/components/Input/RadioGroup.tsx

@@ -3,8 +3,8 @@ import {
   BoxProps,
   FormControlLabel,
   FormHelperText,
-  Radio,
   RadioGroup as MuiRadioGroup,
+  Radio,
   RadioGroupProps,
   styled,
 } from '@mui/material'
@@ -97,7 +97,7 @@ export default function RadioGroup(props: Props) {
               <Radio
                 checkedIcon={<BpCheckedIcon />}
                 icon={<BpIcon />}
-                disabled={disabled || item.disabled} 
+                disabled={disabled || item.disabled}
               />
             }
             label={item.label}

package/src/components/ReportHeader.tsx

@@ -1,4 +1,4 @@
-import { Box, SxProps, Typography } from '@mui/material'
+import { Box, Divider, SxProps, Typography } from '@mui/material'
 import { Variant } from '@mui/material/styles/createTypography'
 import _ from 'lodash'
 import { PermissionsStore } from '../shared-state'
@@ -44,12 +44,14 @@ export interface ReportHeaderProps {
   headerType?: ReportHeaderType
   reportHeaderImageUrl?: string
   reportHeaderImageCSS?: any
-  typographyList?: ReportHeaderTypographyProps[]
   logoImageUrl?: string
   logoImageCSS?: any
-  address?: ReportHeaderOptionalTypographyProps
   recognitionDetails?: ReportHeaderOptionalTypographyProps
+  address?: ReportHeaderOptionalTypographyProps
   phone?: ReportHeaderOptionalTypographyProps
+  showDivider?: boolean
+  dividerSx?: SxProps
+  typographyList?: ReportHeaderTypographyProps[]
 }
 
 export default function ReportHeader({
@@ -57,7 +59,6 @@ export default function ReportHeader({
   headerType,
   reportHeaderImageUrl,
   reportHeaderImageCSS,
-  typographyList,
   logoImageUrl,
   logoImageCSS,
   address: {
@@ -78,6 +79,9 @@ export default function ReportHeader({
     text: phoneText,
     sx: phoneSx,
   },
+  showDivider = false,
+  dividerSx,
+  typographyList,
 }: ReportHeaderProps) {
   const { masterInstitutionUniqueId, institutionType } =
     PermissionsStore.useState((s) => ({
@@ -98,6 +102,7 @@ export default function ReportHeader({
         flexDirection: 'column',
         alignItems: 'center',
         gap: '5px',
+        marginBottom: '15px',
         ...containerSx,
       }}
     >
@@ -107,7 +112,7 @@ export default function ReportHeader({
             style={{
               objectFit: 'contain',
               width: '100%',
-              height: '200px',
+              height: '100px',
               ...reportHeaderImageCSS,
             }}
             src={
@@ -154,6 +159,14 @@ export default function ReportHeader({
           )}
         </>
       )}
+
+      {showDivider && (
+        <Divider
+          flexItem
+          variant="middle"
+          sx={{ m: '15px', borderColor: '#000000', ...dividerSx }}
+        />
+      )}
       {typographyList &&
         typographyList.map((s) => (
           <Typography variant={s.variant || 'body1'} sx={s.sx}>

package/src/config/axios.ts

@@ -8,6 +8,7 @@ import { InstitutionsStore } from '../shared-state/InstitutionsStore'
 const sessionKey = Cookies.get('campx_session_key')
 const clientId = window.location.pathname.split('/')[1] ?? 'campx_dev'
 const institutionId = window.location.pathname.split('/')[2] ?? 'campx_dev'
+const openPaymentsKey = Cookies.get('campx_open_payments_key')
 
 export const formatParams = (params) => {
   return Object.fromEntries(
@@ -23,9 +24,13 @@ let axios = Axios.create({
   withCredentials: true,
   headers: {
     'x-tenant-id': clientId,
-    ...(isDevelopment || (isSetup && sessionKey)
+    ...((isDevelopment || isSetup) && sessionKey
       ? { campx_session_key: sessionKey }
       : {}),
+
+    ...(openPaymentsKey && {
+      campx_open_payments_key: openPaymentsKey,
+    }),
   },
 })