Merge pull request #11 from AyaDigital/hotfix/DMVP-1086

DMVP-1086 - Сверстать компонент "Настройки адреса приема" в окне созд…

src/pages/AppointmentsSettings/index.tsx

@@ -56,6 +56,7 @@ type AppointmentProps = {
 	scheduleCreated: boolean,
 	isScheduleCreationLoading: boolean,
 	scheduleError: string,
+	address: string,
 	slotsCalculation?: SlotsCountItemT[]
 } & DispatchProps;
 
@@ -63,6 +64,7 @@ const AppointmentsSettings: React.FC<AppointmentProps> = ({
 	scheduleCreated,
 	isScheduleCreationLoading,
 	scheduleError,
+	address,
 	slotsCalculation,
 	updateScheduleStatus,
 	setSchedule,
@@ -107,6 +109,7 @@ const AppointmentsSettings: React.FC<AppointmentProps> = ({
 						updateScheduleStatus={updateScheduleStatus}
 						isScheduleCreationLoading={isScheduleCreationLoading}
 						scheduleError={scheduleError}
+						address={address}
 						// cancelAppointment={cancelAppointment}
 					/>
 				</div>
@@ -118,6 +121,7 @@ const AppointmentsSettings: React.FC<AppointmentProps> = ({
 
 const mapStateToProps = (state: AppStateType) => ({
 	scheduleCreated: state.schedule.scheduleCreated,
+	address: state.profile.address,
 	isScheduleCreationLoading: state.schedule.isScheduleCreationLoading,
 	slotsCalculation: state.schedule.slots,
 	scheduleError: state.schedule.error

src/pages/AppointmentsSettings/schedule.tsx

@@ -3,12 +3,14 @@ import moment, { Moment } from 'moment';
 import { styled } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
+import Radio from '@material-ui/core/Radio';
 import { MenuItem } from '@material-ui/core';
 import { CalendarBlock as Calendar  } from 'components/calendar/calendar';
 import Loader from 'components/layout/Loader';
 import SuccessIcon from '../../images/Icons/successIcon';
 import FailedIcon from '../../images/Icons/failedIcon';
-import { ScheduleCreationT, SlotsCountItemT } from '../../types'
+import { ScheduleCreationT, SlotsCountItemT } from '../../types';
+import { TextFieldStyles as TextAreaStyles} from '../../components/controls/textfields';
 import './settings.scss';
 import { CommonStyles as CommonCancelButton, TextFieldStyles } from '../AppointmentPage/components/common';
 const hourPoints = [
@@ -81,12 +83,49 @@ const UnselectedButtonStyles = {
 	}
 }
 
+const RadioButtonStyles = {
+	backgroundColor: 'white',
+	'&.Mui-checked': {
+		color: 'black',
+		'&::hover': {
+			backgroundColor: 'white'
+		}
+	},
+	'&::hover': {
+		backgroundColor: 'white'
+	}
+}
+const TextFieldFont = {
+	fontFamily: 'Manrope',
+	fontSize: '16px',
+	fontWeight: 400,
+};
+
+const TextAreaStyle = {
+	width: '580px',
+	height: 'auto',
+	'& > .MuiOutlinedInput-root.MuiInputBase-formControl': {
+		height: 'auto',
+		paddingTop: '10px',
+		'& > input': TextFieldFont,
+		'& > textarea': {
+			// height: '96px !important'
+		}
+	}
+};
+
+const TextAreaField = styled(TextField)(
+	Object.assign({}, TextAreaStyles, TextAreaStyle, {height: 'auto'})
+);
+
 const CancelEditionButton = styled(Button)(Object.assign(CancelButtonStyles, CommonStyles));
 const SaveChangesButton = styled(Button)(Object.assign(SaveChangesButtonStyles, CommonStyles));
 
 const SelectedButton = styled(Button)(Object.assign(SelectedButtonStyles, CommonStatusStyles));
 const UnselectedButton = styled(Button)(Object.assign(UnselectedButtonStyles, CommonStatusStyles));
 
+const RadioButton = styled(Radio)(RadioButtonStyles);
+
 const ConsultationTypeButton = (
     { isSelected,  ...props } : { isSelected: boolean, children: string, onClick: () => void }
 ) => isSelected ? <SelectedButton {...props} /> :<UnselectedButton {...props} />;
@@ -116,6 +155,8 @@ export const StyledTextField = styled(TextField)(Object.assign(TextFieldStyles,
 		transform: 'translate(14px, 4px) scale(1)'
 	}
 }));
+const StyledSelector = Object.assign(StyledTextField, {width: '30%'});
+
 export const CancelButton = styled(Button)(Object.assign({color: 'rgba(255, 84, 74, 1)'}, CommonCancelButton));
 export const DatesButton = styled(Button)({
 	backgroundColor: 'transparent',
@@ -129,6 +170,7 @@ const THE_LAST_HOUR = '18:00';
 type ScheduleWindowT = {
 	scheduleCreated?: boolean,
 	isOpen?: boolean,
+	address?: string,
 	isScheduleCreationLoading?: boolean,
 	scheduleError?: string,
 	closeModal: () => void,
@@ -143,6 +185,7 @@ function ScheduleWindow({
 	scheduleCreated = false,
 	isScheduleCreationLoading = false,
 	scheduleError = '',
+	address = '',
 	slotsCalculation,
 	isOpen = false,
 	closeModal = () => {},
@@ -162,6 +205,7 @@ function ScheduleWindow({
 	const [selectedMonth, setSelectedMonth] = useState<Moment | null>(moment());
 	const [groupedDate, setGroupeddate] = useState<groupedSlotsT>({});
 	const [timePoints, setTimePoints] = useState(hourPoints);
+	const [appointmentLocation, setAppointmentLocation] = useState<string>();
 
 	const finalObj: groupedSlotsT= {};
 
@@ -310,6 +354,11 @@ function ScheduleWindow({
 		setSelectedDate('');
 	}
 
+	const handleChangeLocation = (event: React.ChangeEvent<HTMLInputElement>) => {
+		console.log('data', event.target.value);
+		setAppointmentLocation(event.target.value);
+	}
+
 	return (
 		<>
 			{
@@ -343,6 +392,9 @@ function ScheduleWindow({
 												<div className='title'>
 													New schedule
 												</div>
+												
+												<div className='upper-block'>
+													<div className='calendar-block'>
 														<div className='grey-header'>Working days</div>
 														<div className='calendar-block'>
 															<Calendar
@@ -357,6 +409,9 @@ function ScheduleWindow({
 														<div className='errorBlock margin-top'>
 															{saveHandler && !selectedDate && REQUIRED_MESSAGE}
 														</div>
+													</div>	
+
+													<div className='working-hours-block'>
 														<div className='grey-header'>
 															Working hours
 														</div>
@@ -449,6 +504,86 @@ function ScheduleWindow({
 														<div className='errorBlock'>
 															{saveHandler && !type && REQUIRED_MESSAGE}
 														</div>
+													</div>
+												</div>
+
+												<div className='lower-block'>
+													{
+														type === 'OFFLINE' ? (
+															<>
+																<div className='appointment-location-label'>
+																	<RadioButton
+																		disableRipple={true}
+																		checked={appointmentLocation === 'doctor'}
+																		onChange={handleChangeLocation}
+																		value="doctor"
+																		color="default"
+																		name="radio-button-demo"
+																	/>
+																	<div>
+																		Use the doctor`s work address
+																	</div>
+																</div>
+																{
+																	appointmentLocation === 'doctor' ? (
+																		<div>
+																			{address}
+																		</div>
+																	) : null
+																}
+																<div className='appointment-location-label'>
+																	<RadioButton
+																		disableRipple={true}
+																		checked={appointmentLocation === 'clinic'}
+																		onChange={handleChangeLocation}
+																		value="clinic"
+																		color="default"
+																		name="radio-button-demo"
+																	/>
+																	<div>
+																		Use clinic address
+																	</div>
+																</div>
+																<div className='select-clinic'>
+																	<StyledTextField
+																		// value={toValue}
+																		select
+																		disabled={appointmentLocation === 'doctor'}
+																		label="Select an appointment clinic"
+																		variant="outlined"
+																		onChange={(event) => {
+																			// setToValue(event.target.value);
+																		}}
+																	>
+																			{
+																				['Clinic1', 'Clinic2', 'Clinic3']
+																					.map((item, index) => {
+																						return (
+																							<MenuItem
+																								key={index}
+																								disableRipple={true} 
+																								value={item}
+																							>
+																								{item}
+																							</MenuItem>
+																						)
+																					})
+																			}
+																	</StyledTextField>
+																</div>
+																<div className='description'>
+																	<TextAreaField
+																		multiline
+																		//value={aboutText}
+																		//focused={!!aboutText}
+																		minRows={2}
+																		// maxRows={10}
+																		variant="outlined"
+																	/>
+																</div>
+															</>
+														) : null
+													}
 													<div className='grey-header'>Consultation time</div>
 													<div className={`duration-block ${selectedDate ? '' : 'empty'}`}>
 														{
@@ -483,6 +618,8 @@ function ScheduleWindow({
 														{saveHandler && !duration && REQUIRED_MESSAGE}
 													</div>
 												</div>
+
+											</div>
 											<div className='save-changes-block'>
 												<div>
 													<CancelEditionButton disableRipple={true}  onClick={handleCloseModal}>

src/pages/AppointmentsSettings/settings.scss

@@ -41,10 +41,10 @@
 
 .settings-schedule-form-layout {
 	position: absolute;
-	top: 2vw;
-	left: 30vw;
+	top: 1vw;
+	left: 18vw;
 	transform: translate(0%, 7%);
-	width: 620px;
+	width: 890px;
 	height: auto;
 	padding: 0px 32px 32px 32px;
 	border-radius: 12px;
@@ -121,12 +121,49 @@
         }
     }
 
+    .upper-block {
+        @include flex-row();
+        column-gap: 10px;
+
+        .working-hours-block {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            row-gap: 20px;
+
+            & > .errorBlock {
+                color: red;
+                text-align: start;
+        
+                &.margin-top {
+                    margin-top: 0px;
+                }
+            }
+        }
+    }
+
+    .lower-block {
+        .appointment-location-label {
+            @include flex-row();
+            align-items: center;
+        }
+
+        .select-clinic {
+            width: 556px;
+            padding: 8px 16px 8px 16px;
+        }
+
+        .description {
+            width: 556px;
+            padding: 8px 16px 8px 16px;
+        }
+    }
+
     .calendar-block {
-        height: 298px;
+        height: auto;
 
         .calendar-schedule-common {
             width: auto;
-            height: 290px;
             box-shadow: none;
             border: none;
             background: rgba(250, 250, 250, 1);
@@ -274,9 +311,10 @@
 
     .time-picker-block {
         @include flex-row();
-        column-gap: 16px;
+        flex-direction: column;
+        row-gap: 12px;
         width: 556px;
-        height: 48px;
+
         padding: 8px 16px 8px 16px;
         border-radius: 16px;
 
@@ -287,6 +325,7 @@
 
         .select-period-block {
             width: 50%;
+            height: 34px;
 
             & > div > div {
                 & > .MuiSelect-select:focus {
@@ -303,12 +342,13 @@
 
     .controls-block{
         @include flex-row();
+        flex-direction: column;
         justify-content: space-around;
         width: 556px;
-        height: 48px;
+
         padding: 8px 16px 8px 16px;
         border-radius: 16px;
-        column-gap: 12px;
+        row-gap: 12px;
 
         &.empty {
             justify-content: flex-start;