@@ -617,7 +617,7 @@ const AddAppointment = props => {
minDate={today}
isRequired={requiredFields.recurringStartDate}
intl={intl}
- title={"Appointment start date"}/>
+ title={intl.formatMessage({id: 'APPOINTMENT_START_DATE', defaultMessage: "Appointment start date"})}/>
@@ -681,7 +681,7 @@ const AddAppointment = props => {
{
updateAppointmentDetails({recurrenceType: event.selectedItem.value});
@@ -816,7 +816,7 @@ const AddAppointment = props => {
isRequired={requiredFields.appointmentStartDate}
showWarning={showHolidayWarning}
intl={intl}
- title={"Appointment date"}/>
+ title={}/>
@@ -835,7 +835,9 @@ const AddAppointment = props => {
appointmentDetails.serviceType && appointmentDetails.serviceType.value);
updateErrorIndicators({startTimeError: !time});
}
- }}/>
+ }}
+ translationKey={}
+ />
@@ -854,7 +856,9 @@ const AddAppointment = props => {
endTimeError: !time
});
}
- }}/>
+ }}
+ translationKey={
}
+ />
{
errors.endTimeError ?
:
diff --git a/ui/react-components/components/AppointmentCategory/AppointmentCategory.jsx b/ui/react-components/components/AppointmentCategory/AppointmentCategory.jsx
index 17a3c844f8..7a63cc8e03 100644
--- a/ui/react-components/components/AppointmentCategory/AppointmentCategory.jsx
+++ b/ui/react-components/components/AppointmentCategory/AppointmentCategory.jsx
@@ -19,7 +19,7 @@ const AppointmentCategory = (props) => {
{
@@ -17,7 +17,7 @@ const AppointmentNotes = (props) => {
}
return (
} enableCounter={true}
placeholder={placeHolder}/>
)
diff --git a/ui/react-components/components/Dropdown/Dropdown.jsx b/ui/react-components/components/Dropdown/Dropdown.jsx
index 648d813ac0..c782b6ae30 100644
--- a/ui/react-components/components/Dropdown/Dropdown.jsx
+++ b/ui/react-components/components/Dropdown/Dropdown.jsx
@@ -4,7 +4,7 @@ import {
import React, { useEffect, useRef } from "react";
import classNames from "classnames";
import { PropTypes } from "prop-types";
-import { injectIntl } from "react-intl";
+import { injectIntl, useIntl } from "react-intl";
import { isUndefined } from "lodash";
import {ComboBox} from "carbon-components-react";
import Title from "../Title/Title.jsx";
@@ -33,6 +33,7 @@ const Dropdown = (props) => {
const isComponentDisabled = () =>
isUndefined(isDisabled) ? false : isDisabled;
const title = ;
+ const intl = useIntl();
return (
<div
@@ -49,7 +50,7 @@ const Dropdown = (props) => {
disabled={isDisabled}
style={{ width: '250px' }}
shouldFilterItem={filterItems}
- placeholder={"Choose an option"}
+ placeholder={intl.formatMessage({id: 'CHOOSE_AN_OPTION_KEY', defaultMessage: "Choose an option"})}
selectedItem={selectedValue}
/>
</div>
diff --git a/ui/react-components/components/DropdownCarbon/Dropdown.jsx b/ui/react-components/components/DropdownCarbon/Dropdown.jsx
index 41d7d29de2..1556795d31 100644
--- a/ui/react-components/components/DropdownCarbon/Dropdown.jsx
+++ b/ui/react-components/components/DropdownCarbon/Dropdown.jsx
@@ -1,6 +1,6 @@
import React from "react";
import { PropTypes } from "prop-types";
-import { injectIntl } from "react-intl";
+import { injectIntl, useIntl } from "react-intl";
import { Dropdown } from "carbon-components-react";
import Title from "../Title/Title.jsx";
@@ -15,6 +15,7 @@ const DropdownCarbon = (props) => {
titleText,
isRequired
} = props;
+ const intl = useIntl();
const title = titleText && <Title text={titleText} isRequired={isRequired}/>
return (
<div
@@ -27,7 +28,7 @@ const DropdownCarbon = (props) => {
onChange={onChange}
titleText={title}
disabled={isDisabled}
- label={"Choose an option"}
+ label={intl.formatMessage({id: 'CHOOSE_AN_OPTION_KEY', defaultMessage: "Choose an option"})}
initialSelectedItem={selectedValue}
/>
</div>
diff --git a/ui/react-components/components/TimePicker/TimePicker.jsx b/ui/react-components/components/TimePicker/TimePicker.jsx
index e7d001d08a..a4626d303e 100644
--- a/ui/react-components/components/TimePicker/TimePicker.jsx
+++ b/ui/react-components/components/TimePicker/TimePicker.jsx
@@ -1,5 +1,5 @@
import React, {useEffect, useState} from 'react';
-import { injectIntl } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
import PropTypes from 'prop-types';
import {SelectItem, TimePicker, TimePickerSelect} from "carbon-components-react";
import moment from "moment";
@@ -35,7 +35,7 @@ const AppointmentTimePicker = (props) => {
return (
<TimePicker id="time-selector" labelText={title} onBlur={handleChange} value={time}
style={{ width: "72px", padding: "0 0 0 1rem"}} autoComplete={"off"} disabled={isDisabled}>
- <TimePickerSelect id="time-picker-select-1" labelText={"Choose a time"} onChange={handlePeriod} value={period} disabled={isDisabled}>
+ <TimePickerSelect id="time-picker-select-1" labelText={<FormattedMessage id={'CHOOSE_A_TIME'} defaultMessage={"Choose a time"}/>} onChange={handlePeriod} value={period} disabled={isDisabled}>
<SelectItem value="AM" text="AM" />
<SelectItem value="PM" text="PM" />
</TimePickerSelect>
diff --git a/ui/react-components/containers/AppointmentSummaryContainer.jsx b/ui/react-components/containers/AppointmentSummaryContainer.jsx
index 20ef683c7e..c1705a6b47 100644
--- a/ui/react-components/containers/AppointmentSummaryContainer.jsx
+++ b/ui/react-components/containers/AppointmentSummaryContainer.jsx
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import GridSummary, {transformAppointmentSummaryToGridData, transformAppointmentsData} from "../components/GridSummary/GridSummary.jsx";
import DateOrWeekNavigator from "../components/DateOrWeekNavigator/DateOrWeekNavigator.jsx"
-import { IntlProvider } from "react-intl";
+import { IntlProvider, useIntl } from "react-intl";
import { getLocale } from "../utils/LocalStorageUtil";
import translations from '../../i18n/appointments';
import PropTypes from "prop-types";
@@ -61,6 +61,7 @@ class AppointmentSummaryContainer extends Component {
render() {
const {locale, messages, startDate, endDate, data, specialityData, providersData, locationData, isLoading} = this.state;
+ const intl = useIntl();
const { goToListView , state, fullSummary} = this.props;
const setStartDate = date => {
this.setState({ startDate: date })
@@ -74,14 +75,14 @@ class AppointmentSummaryContainer extends Component {
<DateOrWeekNavigator isWeek={true} weekStart={1} />
{ fullSummary? (
<div>
- <GridSummary gridData={specialityData} weekStartDate={startDate} onClick={goToListView} gridName={'Specialities'}/>
+ <GridSummary gridData={specialityData} weekStartDate={startDate} onClick={goToListView} gridName={intl.formatMessage({id: "APPOINTMENT_SPECIALITIES", defaultMessage: "Specialities"})}/>
<hr/>
- <GridSummary gridData={providersData} weekStartDate={startDate} onClick={goToListView} gridName={'Providers'}/>
+ <GridSummary gridData={providersData} weekStartDate={startDate} onClick={goToListView} gridName={intl.formatMessage({id: "APPOINTMENT_PROVIDERS", defaultMessage: "Providers"})}/>
<hr/>
<GridSummary gridData={sortBy(data, row => row.rowLabel.toLowerCase())}
- weekStartDate={startDate} onClick={goToListView} gridName={'Services'}/>
+ weekStartDate={startDate} onClick={goToListView} gridName={intl.formatMessage({id: "APPOINTMENT_SERVICES", defaultMessage: "Services"})}/>
<hr/>
- <GridSummary gridData={locationData} weekStartDate={startDate} onClick={goToListView} gridName={'Locations'}/>
+ <GridSummary gridData={locationData} weekStartDate={startDate} onClick={goToListView} gridName={intl.formatMessage({id: "APPOINTMENT_LOCATIONS", defaultMessage: "Locations"})}/>
<br/>
</div>) : (
<GridSummary gridData={ data } weekStartDate={startDate} onClick={goToListView}/>