{reason}
} diff --git a/src/client/app/components/conversion/DeleteConversionSegmentModalComponent.tsx b/src/client/app/components/conversion/DeleteConversionSegmentModalComponent.tsx new file mode 100644 index 0000000000..fb75f83dc3 --- /dev/null +++ b/src/client/app/components/conversion/DeleteConversionSegmentModalComponent.tsx @@ -0,0 +1,75 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public +* License, v. 2.0. If a copy of the MPL was not distributed with this +* file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +import * as React from 'react'; +import { ConversionSegmentData } from '../../types/redux/conversionSegments'; +import { useTranslate } from '../../redux/componentHooks'; +import { showErrorNotification, showSuccessNotification } from '../../utils/notifications'; +import { conversionSegmentsApi } from '../../redux/api/conversionSegmentsApi'; +import ConfirmActionModalComponent from '../ConfirmActionModalComponent'; + +interface DeleteConversionSegmentModalComponentProps { + show: boolean; + direction: 'earlier' | 'later'; + segment: ConversionSegmentData; + handleClose: () => void; +} + +/** + * Renders a modal that confirms deletion of a conversion segment + * in the 'earlier' or 'later' direction. Mutates the segment and + * shows a success or error notification. + * @param props Props for the component + * @returns Modal component for deletion confirmation + */ +export default function DeleteConversionSegmentModalComponent(props: DeleteConversionSegmentModalComponentProps): React.ReactElement { + const translate = useTranslate(); + + const [deleteEarlier] = conversionSegmentsApi.useDeleteConversionSegmentEarlierMutation(); + const [deleteLater] = conversionSegmentsApi.useDeleteConversionSegmentLaterMutation(); + + const handleHideDeleteModal = () => { + props.handleClose(); + }; + + const handleDeleteSegment = async () => { + const payload = { + sourceId: props.segment.sourceId, + destinationId: props.segment.destinationId, + startTime: props.segment.startTime, + endTime: props.segment.endTime + }; + + try { + if (props.direction === 'earlier') { + await deleteEarlier(payload).unwrap(); + } else { + await deleteLater(payload).unwrap(); + } + showSuccessNotification(translate('conversion.segment.delete.success')); + handleHideDeleteModal(); + } catch (error) { + showErrorNotification(translate('conversion.segment.delete.error')); + } + }; + + const deleteConfirmationMessage = props.direction === 'earlier' + ? translate('conversion.delete.segment.earlier') + : translate('conversion.delete.segment.later'); + + return ( +
+
+
| {segment.startTime} to {segment.endTime} | +{(segment.weekPatternsId ?? -99) === -99 ? segment.slope : ''} | +{(segment.weekPatternsId ?? -99) === -99 ? segment.intercept : ''} | +{weekPatterns.find(wp => wp.id === segment.weekPatternsId)?.name ?? translate('conversion.pattern.no')} | +handleNoteModal(segment)} + aria-label={segment.note} + > + {(segment.note ?? '').length > 30 ? `${segment.note.slice(0, 30)} ...` : segment.note || ''} + | ++ + | ++ | + | + {segments.length !== 1 && segment.startTime !== '-infinity' && ( + + )} + | ++ {segments.length !== 1 && segment.endTime !== 'infinity' && ( + + )} + | +
{reason}
+ } + {/* Hides the modal */} + + {/* On click calls the function handleSaveChanges in this component */} + +| {seg.startHour} - {seg.endHour} | +{seg.slope} | +{seg.intercept} | +handleShowNoteModal(seg)} + aria-label={seg.note} + > + {(seg.note ?? '').length > 30 ? `${seg.note?.slice(0, 30)} ...` : seg.note || ''} + | ++ + | +
+ {/* only show split buttons if segment is longer than 1 hour */}
+ {seg.endHour - seg.startHour > 1 && |
+
+ {seg.endHour - seg.startHour > 1 && |
+
+ {/* first segment cannot delete earlier */}
+ {seg.startHour > 0 &&
+ |
+
+ {/* last segment cannot delete later */}
+ {seg.endHour < 24 &&
+ |
+
{translate('holiday.rate.none')}
+ )} +| + + + + {sortedDays?.map(day => ( + + ))} + + | +
| + + {sortedDays?.map(day => ( + + ))} + + | +