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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "orc-shared",
-	"version": "5.10.0-dev.20",
+	"version": "5.10.0-dev.21",
 	"description": "Shared code for Orckestra applications",
 	"main": "./src/index.js",
 	"exports": {
@@ -25,7 +25,8 @@
 		"prepublishOnly": "npm run build:clean --",
 		"icons": "orc-scripts buildIconsSheet",
 		"extract": "orc-scripts extract-messages",
-		"generateApi": "orc-scripts generateApi --outputFile src/actions/requestsApi.js --requestsFile ./src/requests"
+		"generateApi": "orc-scripts generateApi --outputFile src/actions/requestsApi.js --requestsFile ./src/requests",
+		"generateWindowsZone": "orc-scripts generateWindowsZone --outputFile src/timezones.json"
 	},
 	"files": [
 		"src",
@@ -55,7 +56,7 @@
 		"@testing-library/react": "^10.4.9"
 	},
 	"dependencies": {
-		"orc-scripts": "4.0.5",
+		"orc-scripts": "4.0.7",
 		"react-number-format": "^5.3.0"
 	},
 	"sideEffects": false,

package/src/components/Culture.js

@@ -1,23 +1,33 @@
-import React from "react";
-import { useMemo } from "react";
-import { useSelector } from "react-redux";
-import { currentLocaleOrDefault } from "../selectors/locale";
+import React, { useMemo } from "react";
+import { useIntl } from "react-intl";
 import { registerLocale, setDefaultLocale } from "react-datepicker";
 import * as date_fns_locale from "date-fns/locale";
 import { findCorrespondingLocale } from "../utils/localizationHelper";
+import useDaysAndMonthsLocalization from "../hooks/useDaysAndMonthsLocalization";
+
+export let customFnsLocale = null;
 
 const Culture = () => {
-	const locale = useSelector(currentLocaleOrDefault);
-	const language = navigator.language ?? locale;
+	const { locale } = useIntl();
+	const daysAndMonthsLocalization = useDaysAndMonthsLocalization();
 
 	useMemo(() => {
-		const fnsLocale = findCorrespondingLocale(date_fns_locale, language);
+		const fnsLocale = findCorrespondingLocale(date_fns_locale, locale);
 
 		if (fnsLocale != null) {
-			registerLocale(language, fnsLocale);
-			setDefaultLocale(language);
+			customFnsLocale = {
+				...fnsLocale,
+				localize: {
+					...fnsLocale.localize,
+					day: n => daysAndMonthsLocalization.weekdaysMin[n],
+					month: n => daysAndMonthsLocalization.months[n],
+				},
+			};
+
+			registerLocale(locale, customFnsLocale);
+			setDefaultLocale(locale);
 		}
-	}, [language]);
+	}, [locale, daysAndMonthsLocalization]);
 
 	return <React.Fragment />;
 };

package/src/components/Culture.test.js

@@ -1,21 +1,24 @@
 import React from "react";
 import Immutable from "immutable";
-import { Provider } from "react-redux";
 import { getDefaultLocale } from "react-datepicker";
-import Culture from "./Culture";
+import Culture, { customFnsLocale } from "./Culture";
+import { extractMessages, TestWrapper } from "../utils/testUtils";
+import sharedMessages from "../sharedMessages";
+import { mount } from "enzyme";
+
+const messages = extractMessages(sharedMessages);
 
 describe("Culture", () => {
-	let state, store, languageGetter;
+	let state, store;
 
 	beforeEach(() => {
-		languageGetter = jest.spyOn(window.navigator, "language", "get");
-
 		state = Immutable.fromJS({
 			requests: {},
 			settings: {
 				defaultScope: "aDefaultScope",
 			},
 			locale: {
+				locale: "en-US",
 				supportedLocales: [
 					{ language: "English", cultureIso: "en" },
 					{ language: "Français", cultureIso: "fr" },
@@ -30,17 +33,14 @@ describe("Culture", () => {
 	});
 
 	afterEach(() => {
-		languageGetter.mockReset();
 		jest.clearAllMocks();
 	});
 
 	it("shows the wrapped component if authenticated and default scope is known", () => {
-		languageGetter.mockReturnValue(null);
-
 		const component = (
-			<Provider store={store}>
+			<TestWrapper provider={{ store }} intlProvider={{ messages, locale: "zz-ZZ" }}>
 				<Culture />
-			</Provider>
+			</TestWrapper>
 		);
 
 		expect(component, "when mounted", "to satisfy", null);
@@ -50,12 +50,11 @@ describe("Culture", () => {
 
 	it("shows the wrapped component if authenticated and default scope is known 222", () => {
 		state = state.setIn(["locale", "supportedLocales"], [{ language: "English", cultureIso: "en" }]);
-		languageGetter.mockReturnValue("en-GB");
 
 		const component = (
-			<Provider store={store}>
+			<TestWrapper provider={{ store }} intlProvider={{ messages, locale: "en-GB" }}>
 				<Culture />
-			</Provider>
+			</TestWrapper>
 		);
 
 		expect(component, "when mounted", "to satisfy", null);
@@ -71,16 +70,28 @@ describe("Culture", () => {
 				{ language: "EnglishMy", cultureIso: "enMy" },
 			],
 		);
-		languageGetter.mockReturnValue("fr-FR");
 
 		const component = (
-			<Provider store={store}>
+			<TestWrapper provider={{ store }} intlProvider={{ messages, locale: "fr-FR" }}>
 				<Culture />
-			</Provider>
+			</TestWrapper>
 		);
 
 		expect(component, "when mounted", "to satisfy", null);
 
 		expect(getDefaultLocale(), "to equal", "fr-FR");
 	});
+
+	it("computes right localized day and month with Italian culture ", () => {
+		const component = (
+			<TestWrapper provider={{ store }} intlProvider={{ messages, locale: "it-IT" }}>
+				<Culture />
+			</TestWrapper>
+		);
+
+		mount(component);
+
+		expect(customFnsLocale.localize.day(1), "to equal", "Mo");
+		expect(customFnsLocale.localize.month(6), "to equal", "July");
+	});
 });

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

@@ -6,12 +6,10 @@ import "react-datepicker/dist/react-datepicker.css";
 import TimePicker from "./TimePicker";
 import { makeStyles } from "@material-ui/core/styles";
 import {
-	getTimeZoneByName,
-	convertTimeToOtherTimeZone,
+	getIanaTimeZoneFromWindowsName,
 	convertTimeToLocalTimeZone,
+	getWindowsTimeZone,
 } from "../../../utils/timezoneHelper";
-import { namedLookupLocalizedSelector } from "../../../selectors/metadata";
-import { useSelector } from "react-redux";
 
 const useStyles = makeStyles(theme => ({
 	container: {
@@ -139,24 +137,31 @@ const WrappedDatePicker = ({
 	readOnly,
 	showTimeSelectOnly,
 	metadata,
-	timePickerTimeZone,
+	timePickerWindowsTimeZone,
 	error,
 	timeOption,
 	...props
 }) => {
 	const classes = useStyles({ readOnly });
-	const timeZoneName = getTimeZoneByName(timePickerTimeZone);
-	const startDate = value
-		? timePickerTimeZone && useTimeZone
-			? convertTimeToLocalTimeZone(new Date(value), timeZoneName)
-			: new Date(value)
-		: null;
+
+	const ianaTimeZone =
+		useTimeZone && timePickerWindowsTimeZone ? getIanaTimeZoneFromWindowsName(timePickerWindowsTimeZone) : null;
+
+	const computeDateWithTimezone = React.useCallback(
+		date => {
+			return date ? (ianaTimeZone ? convertTimeToLocalTimeZone(new Date(date), ianaTimeZone) : new Date(date)) : null;
+		},
+		[ianaTimeZone],
+	);
+
+	const startDate = computeDateWithTimezone(value);
 	const disabledCls = classNames({ [classes.disabled]: props.disabled });
-	const localizedTimeZoneName = useSelector(namedLookupLocalizedSelector("customer", "TimeZone", timePickerTimeZone));
+
+	const windowsTimeZoneName = useTime && showTimeZone ? (timePickerWindowsTimeZone ?? getWindowsTimeZone()) : null;
 
 	const updateDate = (date, metadata) => {
 		if (onChange) {
-			onChange(useTimeZone && timePickerTimeZone ? convertTimeToOtherTimeZone(date, timeZoneName) : date, metadata);
+			onChange(computeDateWithTimezone(date), metadata);
 		}
 	};
 
@@ -179,13 +184,7 @@ const WrappedDatePicker = ({
 						showTimeInput={useTime ?? false}
 						useTime={useTime ?? false}
 						customTimeInput={
-							useTime ? (
-								<TimePicker
-									showTimeZone={showTimeZone}
-									requestedTimeZone={localizedTimeZoneName}
-									timeOption={timeOption}
-								/>
-							) : null
+							useTime ? <TimePicker windowsTimeZone={windowsTimeZoneName} timeOption={timeOption} /> : null
 						}
 						timeInputLabel={timeInputLabel ?? ""}
 						readOnly={readOnly}

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/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>
 	);
 };