orc-shared 5.10.0-dev.2 → 5.10.0-dev.21

package/src/components/MaterialUI/Inputs/DatePicker.test.js

@@ -269,7 +269,7 @@ describe("DatePicker", () => {
 		const expectedDate = "06/30/2020 12:00 AM";
 		expect(
 			<TestWrapper provider={{ store }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
-				<DatePicker useTime={true} readOnly={true} onChange={updater} value={date} />
+				<DatePicker useTime={true} readOnly={true} onChange={updater} value={date} showTimeZone={true} />
 			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
@@ -348,7 +348,7 @@ describe("DatePicker", () => {
 					useTime={true}
 					useDate={false}
 					showTimeSelectOnly={true}
-					timePickerTimeZone={requestTimeZone}
+					timePickerWindowsTimeZone={requestTimeZone}
 				/>
 			</TestWrapper>
 		);
@@ -375,7 +375,7 @@ describe("DatePicker", () => {
 					useTime={true}
 					useDate={false}
 					showTimeSelectOnly={true}
-					timePickerTimeZone={null}
+					timePickerWindowsTimeZone={null}
 				/>
 			</TestWrapper>
 		);
@@ -400,7 +400,7 @@ describe("DatePicker", () => {
 					useTime={true}
 					useDate={false}
 					showTimeSelectOnly={true}
-					timePickerTimeZone={requestTimeZone}
+					timePickerWindowsTimeZone={requestTimeZone}
 				/>
 			</TestWrapper>
 		);
@@ -419,7 +419,12 @@ describe("DatePicker", () => {
 		const requestTimeZone = "Eastern Standard Time";
 		const component = (
 			<TestWrapper provider={{ store }} intlProvider>
-				<DatePicker value={date} useDate={false} showTimeSelectOnly={true} timePickerTimeZone={requestTimeZone} />
+				<DatePicker
+					value={date}
+					useDate={false}
+					showTimeSelectOnly={true}
+					timePickerWindowsTimeZone={requestTimeZone}
+				/>
 			</TestWrapper>
 		);
 		const mountedComponent = mount(component);
@@ -477,7 +482,7 @@ describe("DatePicker", () => {
 					useDate={false}
 					useTimeZone={true}
 					showTimeSelectOnly={true}
-					timePickerTimeZone={requestTimeZone}
+					timePickerWindowsTimeZone={requestTimeZone}
 				/>
 			</TestWrapper>
 		);

package/src/components/MaterialUI/Inputs/PredefinedElements/SearchControl.js

@@ -255,6 +255,7 @@ const SearchControl = ({
 	const searchSection = (
 		<IconButton
 			data-qa="searchButton"
+			data-testid="searchButton"
 			variant="contained"
 			disabled={disabled}
 			classes={{ root: classes.searchButton }}

package/src/components/MaterialUI/Inputs/Select.js

@@ -167,6 +167,7 @@ const Select = ({ options, selectProps, children }) => {
 	const disabled = selectProps?.get(SelectProps.propNames.disabled) || false;
 	const error = selectProps?.get(SelectProps.propNames.error);
 	const native = selectProps?.get(SelectProps.propNames.native);
+	const onClose = selectProps?.get(SelectProps.propNames.onClose);
 	const inputProps = selectProps?.get(SelectProps.propNames.inputProps);
 	const hasError = !!error;
 
@@ -243,6 +244,7 @@ const Select = ({ options, selectProps, children }) => {
 		<SelectMUI
 			value={value}
 			onChange={handleChange}
+			onClose={onClose}
 			disableUnderline={true}
 			IconComponent={SelectIcon}
 			MenuProps={defaultMenuProps}

package/src/components/MaterialUI/Inputs/SelectProps.js

@@ -18,6 +18,7 @@ class SelectProps extends ComponentProps {
 		iconSelect: "iconSelect",
 		disabled: "disabled",
 		error: "error",
+		onClose: "onClose",
 		native: "native",
 		inputProps: "inputProps",
 	};
@@ -38,6 +39,7 @@ class SelectProps extends ComponentProps {
 		this.componentProps.set(this.constructor.propNames.iconSelect, null);
 		this.componentProps.set(this.constructor.propNames.disabled, null);
 		this.componentProps.set(this.constructor.propNames.error, null);
+		this.componentProps.set(this.constructor.propNames.onClose, null);
 		this.componentProps.set(this.constructor.propNames.native, null);
 		this.componentProps.set(this.constructor.propNames.inputProps, null);
 

package/src/components/MaterialUI/Inputs/SelectProps.test.js

@@ -12,6 +12,7 @@ describe("Select Props", () => {
 			"iconSelect",
 			"disabled",
 			"error",
+			"onClose",
 			"native",
 			"inputProps",
 		];
@@ -30,6 +31,7 @@ describe("Select Props", () => {
 			"iconSelect",
 			"disabled",
 			"error",
+			"onClose",
 			"native",
 			"inputProps",
 		];

package/src/components/MaterialUI/Inputs/Switch.js

@@ -87,6 +87,16 @@ export const useStyles = makeStyles(theme => ({
 			backgroundColor: `${theme.palette.grey.borders} !important`,
 		},
 	},
+	container: {
+		display: "flex",
+		flexDirection: "column",
+	},
+	errorText: {
+		marginTop: theme.spacing(0.5),
+		color: theme.palette.error.main,
+		fontSize: theme.typography.fieldLabelSize,
+		float: "left",
+	},
 }));
 
 const Switch = ({ switchProps }) => {
@@ -100,6 +110,7 @@ const Switch = ({ switchProps }) => {
 	const value = switchProps?.get(SwitchProps.propNames.value) || false;
 	const onCaption = switchProps?.get(SwitchProps.propNames.onCaption);
 	const offCaption = switchProps?.get(SwitchProps.propNames.offCaption);
+	const error = switchProps?.get(SwitchProps.propNames.error);
 	const disabled = switchProps?.get(SwitchProps.propNames.disabled) || false;
 	const readOnly = switchProps?.get(SwitchProps.propNames.readOnly);
 	const className = switchProps?.get(SwitchProps.propNames.className) || "";
@@ -120,7 +131,7 @@ const Switch = ({ switchProps }) => {
 		...className,
 	};
 
-	return (
+	const switchComponent = (
 		<SwitchMui
 			disabled={disabled}
 			classes={switchClasses}
@@ -129,6 +140,16 @@ const Switch = ({ switchProps }) => {
 			color={"primary"}
 		/>
 	);
+
+	return (
+		(error && (
+			<div className={classes.container}>
+				{switchComponent}
+				<div className={classNames(classes.errorText)}>{error}</div>
+			</div>
+		)) ||
+		switchComponent
+	);
 };
 
 export default Switch;

package/src/components/MaterialUI/Inputs/Switch.test.js

@@ -60,6 +60,29 @@ describe("Switch Component", () => {
 		expect(mountedComponent.containsMatchingElement(expected), "to be truthy");
 	});
 
+	it("Renders Switch component with an error", () => {
+		const switchProps = new SwitchProps();
+
+		switchProps.set(SwitchProps.propNames.update, update);
+		switchProps.set(SwitchProps.propNames.value, true);
+		switchProps.set(SwitchProps.propNames.error, "an error");
+		switchProps.set(SwitchProps.propNames.onCaption, { id: "captionOn" });
+		switchProps.set(SwitchProps.propNames.offCaption, { id: "captionOff" });
+
+		const component = (
+			<IntlProvider messages={messages} locale="en-US">
+				<Switch switchProps={switchProps} />
+			</IntlProvider>
+		);
+
+		const mountedComponent = mount(component);
+		const expectedSwitch = <SwitchMUI checked={true} />;
+		const expectedError = <div>an error</div>;
+
+		expect(mountedComponent.containsMatchingElement(expectedSwitch), "to be truthy");
+		expect(mountedComponent.containsMatchingElement(expectedError), "to be truthy");
+	});
+
 	it("Checkbox component handles check", () => {
 		const switchProps = new SwitchProps();
 

package/src/components/MaterialUI/Inputs/SwitchProps.js

@@ -10,6 +10,7 @@ class SwitchProps extends ComponentProps {
 		readOnly: "readOnly",
 		className: "className",
 		id: "id",
+		error: "error",
 		metadata: "metadata",
 	};
 
@@ -23,6 +24,7 @@ class SwitchProps extends ComponentProps {
 		this.componentProps.set(this.constructor.propNames.readOnly, null);
 		this.componentProps.set(this.constructor.propNames.className, null);
 		this.componentProps.set(this.constructor.propNames.id, null);
+		this.componentProps.set(this.constructor.propNames.error, null);
 		this.componentProps.set(this.constructor.propNames.metadata, null);
 
 		this._isSwitchProps = true;

package/src/components/MaterialUI/Inputs/SwitchProps.test.js

@@ -11,6 +11,7 @@ describe("Switch Props", () => {
 			"readOnly",
 			"className",
 			"id",
+			"error",
 			"metadata",
 		];
 
@@ -27,6 +28,7 @@ describe("Switch Props", () => {
 			"readOnly",
 			"className",
 			"id",
+			"error",
 			"metadata",
 		];
 

package/src/components/MaterialUI/Inputs/TimePicker.js

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from "react";
+import { useIntl } from "react-intl";
 import { makeStyles } from "@material-ui/core/styles";
 import Select from "./Select";
 import SelectProps from "./SelectProps";
-import { getTimeZoneName } from "../../../utils/timezoneHelper";
+import { getWindowsTimeZone } from "../../../utils/timezoneHelper";
 import { namedLookupLocalizedSelector } from "../../../selectors/metadata";
 import { useSelector } from "react-redux";
 
@@ -65,8 +66,8 @@ const ampmOptions = [
 	{ value: "PM", label: "PM" },
 ];
 
-const isBrowserUsingAMPM = () =>
-	!!new Date(Date.UTC(2020, 7, 30, 3, 0, 0)).toLocaleTimeString().match(/am|a.m|pm|p.m/i);
+const isBrowserUsingAMPM = locale =>
+	!!new Date(Date.UTC(2020, 7, 30, 3, 0, 0)).toLocaleTimeString(locale).match(/am|a.m|pm|p.m/i);
 
 export const parseTime = timeStr => {
 	var time = timeStr.match(/(\d+)(?::(\d\d))?\s*(p?)/i);
@@ -184,17 +185,18 @@ export const MinsSelect = ({ updateTimeOptions, time, values = minOptions }) =>
 	);
 };
 
-const TimePicker = ({ value, onChange, showTimeZone, showAMPM, requestedTimeZone, timeOption }) => {
+const TimePicker = ({ value, onChange, showTimeZone, windowsTimeZone, timeOption }) => {
 	const classes = useStyles();
-	showAMPM = showAMPM ?? isBrowserUsingAMPM();
+	const { locale } = useIntl();
+	const showAMPM = isBrowserUsingAMPM(locale);
 	const [time, setTime] = useState(parseTime(value || "00:00"));
 
 	useEffect(() => {
 		setTime(parseTime(value || "00:00"));
 	}, [value, setTime]);
 
-	const userTimeZone = getTimeZoneName();
-	const localizedTimeZoneName = useSelector(namedLookupLocalizedSelector("customer", "TimeZone", userTimeZone, null));
+	const timeZone = windowsTimeZone ?? getWindowsTimeZone();
+	const localizedTimeZone = useSelector(namedLookupLocalizedSelector("customer", "TimeZone", timeZone));
 
 	const onTimeChange = datetime => {
 		if (onChange) {
@@ -227,15 +229,6 @@ const TimePicker = ({ value, onChange, showTimeZone, showAMPM, requestedTimeZone
 		onTimeChange(time);
 	};
 
-	const getTimeZone = requestedTimeZone => {
-		if (requestedTimeZone) return requestedTimeZone;
-		if (!localizedTimeZoneName) {
-			var timezone = new Date().toString().match(/GMT(\S+) \(([^)]+)\)/i);
-			return `${timezone[2]} (GMT${timezone[1]})`;
-		}
-		return localizedTimeZoneName;
-	};
-
 	return (
 		<div className={classes.timeWrapper}>
 			<span className={classes.timePickerWrapper}>
@@ -244,9 +237,7 @@ const TimePicker = ({ value, onChange, showTimeZone, showAMPM, requestedTimeZone
 				<MinsSelect updateTimeOptions={updateTimeOptions} time={time} values={timeOption?.minutes} />
 				<AMPMSelect showAMPM={showAMPM} updateTimeOptions={updateTimeOptions} time={time} />
 			</span>
-			{showTimeZone && (
-				<label className={classes.timeZoneWrapper}>{showTimeZone && getTimeZone(requestedTimeZone)}</label>
-			)}
+			{showTimeZone && <label className={classes.timeZoneWrapper}>{localizedTimeZone}</label>}
 		</div>
 	);
 };