|
| 1 | +import { styled } from "@mui/material"; |
| 2 | +import { useMutation, useQueryClient } from "@tanstack/react-query"; |
| 3 | +import Alert from "components/Alert"; |
| 4 | +import Button from "components/Button"; |
| 5 | +import Datepicker from "components/Datepicker"; |
| 6 | +import { |
| 7 | + Dialog, |
| 8 | + DialogActions, |
| 9 | + DialogContent, |
| 10 | + DialogTitle, |
| 11 | +} from "components/Dialog"; |
| 12 | +import TextField from "components/TextField"; |
| 13 | +import { |
| 14 | + publicTripsBaseKey, |
| 15 | + publicTripsByUserBaseKey, |
| 16 | +} from "features/queryKeys"; |
| 17 | +import { useTranslation } from "i18n"; |
| 18 | +import { GLOBAL, PUBLIC_TRIPS } from "i18n/namespaces"; |
| 19 | +import { useRouter } from "next/router"; |
| 20 | +import { useForm } from "react-hook-form"; |
| 21 | +import { routeToHostRequest } from "routes"; |
| 22 | +import { service } from "service"; |
| 23 | +import { theme } from "theme"; |
| 24 | +import dayjs, { Dayjs } from "utils/dayjs"; |
| 25 | + |
| 26 | +// Must match the backend host request minimum (and normal host requests). |
| 27 | +const MESSAGE_MIN_LENGTH = 250; |
| 28 | + |
| 29 | +const DATE_FIELD_ID = "offer-to-host-dates"; |
| 30 | + |
| 31 | +interface FormValues { |
| 32 | + fromDate: Dayjs | null; |
| 33 | + toDate: Dayjs | null; |
| 34 | + text: string; |
| 35 | +} |
| 36 | + |
| 37 | +interface OfferToHostDialogProps { |
| 38 | + open: boolean; |
| 39 | + onClose: () => void; |
| 40 | + tripId: number; |
| 41 | + hostUserId: number; |
| 42 | + hostName: string; |
| 43 | + tripFromDate: string; |
| 44 | + tripToDate: string; |
| 45 | +} |
| 46 | + |
| 47 | +const FieldStack = styled("div")(({ theme }) => ({ |
| 48 | + display: "flex", |
| 49 | + flexDirection: "column", |
| 50 | + gap: theme.spacing(2), |
| 51 | +})); |
| 52 | + |
| 53 | +const DateRow = styled("div")(({ theme }) => ({ |
| 54 | + display: "flex", |
| 55 | + gap: theme.spacing(2), |
| 56 | + [theme.breakpoints.down("sm")]: { |
| 57 | + flexDirection: "column", |
| 58 | + }, |
| 59 | +})); |
| 60 | + |
| 61 | +export default function OfferToHostDialog({ |
| 62 | + open, |
| 63 | + onClose, |
| 64 | + tripId, |
| 65 | + hostUserId, |
| 66 | + hostName, |
| 67 | + tripFromDate, |
| 68 | + tripToDate, |
| 69 | +}: OfferToHostDialogProps) { |
| 70 | + const { t } = useTranslation([PUBLIC_TRIPS, GLOBAL]); |
| 71 | + const router = useRouter(); |
| 72 | + const queryClient = useQueryClient(); |
| 73 | + |
| 74 | + const tripFrom = dayjs(tripFromDate); |
| 75 | + const tripTo = dayjs(tripToDate); |
| 76 | + const today = dayjs().startOf("day"); |
| 77 | + // The host can offer within the trip's window (shorten, not extend), and |
| 78 | + // never in the past. The backend enforces these too. |
| 79 | + const earliest = tripFrom.isAfter(today) ? tripFrom : today; |
| 80 | + |
| 81 | + const { |
| 82 | + control, |
| 83 | + handleSubmit, |
| 84 | + register, |
| 85 | + reset, |
| 86 | + watch, |
| 87 | + formState: { errors }, |
| 88 | + } = useForm<FormValues>({ |
| 89 | + mode: "onBlur", |
| 90 | + defaultValues: { fromDate: tripFrom, toDate: tripTo, text: "" }, |
| 91 | + }); |
| 92 | + |
| 93 | + const watchFromDate = watch("fromDate"); |
| 94 | + const text = watch("text") ?? ""; |
| 95 | + const charsRemaining = MESSAGE_MIN_LENGTH - text.length; |
| 96 | + |
| 97 | + const { |
| 98 | + mutate, |
| 99 | + isPending, |
| 100 | + error, |
| 101 | + reset: resetMutation, |
| 102 | + } = useMutation({ |
| 103 | + mutationFn: ({ fromDate, toDate, text }: FormValues) => |
| 104 | + service.requests.createHostRequest({ |
| 105 | + hostUserId, |
| 106 | + // Both are required by the form, so non-null at submit time. |
| 107 | + fromDate: fromDate!, |
| 108 | + toDate: toDate!, |
| 109 | + text: text.trim(), |
| 110 | + publicTripId: tripId, |
| 111 | + stayType: 0, |
| 112 | + }), |
| 113 | + onSuccess: (hostRequestId) => { |
| 114 | + // Refetch trips so the card's viewerHostRequestId updates (the button |
| 115 | + // flips to "Already offered") next time the list is shown. |
| 116 | + queryClient.invalidateQueries({ queryKey: [publicTripsBaseKey] }); |
| 117 | + queryClient.invalidateQueries({ queryKey: [publicTripsByUserBaseKey] }); |
| 118 | + reset(); |
| 119 | + onClose(); |
| 120 | + router.push(routeToHostRequest(hostRequestId)); |
| 121 | + }, |
| 122 | + }); |
| 123 | + |
| 124 | + const handleClose = () => { |
| 125 | + reset(); |
| 126 | + resetMutation(); |
| 127 | + onClose(); |
| 128 | + }; |
| 129 | + |
| 130 | + const onSubmit = handleSubmit((data) => mutate(data)); |
| 131 | + |
| 132 | + const titleId = "offer-to-host-dialog-title"; |
| 133 | + const formId = "offer-to-host-form"; |
| 134 | + |
| 135 | + return ( |
| 136 | + <Dialog aria-labelledby={titleId} open={open} onClose={handleClose}> |
| 137 | + <DialogTitle id={titleId} onClose={handleClose}> |
| 138 | + {t("publicTrips:offer_dialog_title", { name: hostName })} |
| 139 | + </DialogTitle> |
| 140 | + <DialogContent> |
| 141 | + {error && ( |
| 142 | + <Alert severity="error" sx={{ mb: 2 }}> |
| 143 | + {error.message} |
| 144 | + </Alert> |
| 145 | + )} |
| 146 | + <form id={formId} onSubmit={onSubmit} noValidate> |
| 147 | + <FieldStack> |
| 148 | + <DateRow> |
| 149 | + <Datepicker |
| 150 | + control={control} |
| 151 | + error={!!errors.fromDate} |
| 152 | + helperText={errors.fromDate?.message} |
| 153 | + id={`${DATE_FIELD_ID}-from`} |
| 154 | + label={t("publicTrips:from_date_label")} |
| 155 | + name="fromDate" |
| 156 | + defaultValue={tripFrom} |
| 157 | + minDate={earliest} |
| 158 | + maxDate={tripTo} |
| 159 | + rules={{ required: t("publicTrips:from_date_required") }} |
| 160 | + /> |
| 161 | + <Datepicker |
| 162 | + control={control} |
| 163 | + error={!!errors.toDate} |
| 164 | + helperText={errors.toDate?.message} |
| 165 | + id={`${DATE_FIELD_ID}-to`} |
| 166 | + label={t("publicTrips:to_date_label")} |
| 167 | + name="toDate" |
| 168 | + defaultValue={tripTo} |
| 169 | + minDate={watchFromDate ?? earliest} |
| 170 | + maxDate={tripTo} |
| 171 | + rules={{ required: t("publicTrips:to_date_required") }} |
| 172 | + /> |
| 173 | + </DateRow> |
| 174 | + <TextField |
| 175 | + id="offer-to-host-message" |
| 176 | + {...register("text", { |
| 177 | + required: t("publicTrips:offer_dialog_message_required"), |
| 178 | + minLength: { |
| 179 | + value: MESSAGE_MIN_LENGTH, |
| 180 | + message: t("publicTrips:offer_dialog_chars_remaining", { |
| 181 | + count: charsRemaining, |
| 182 | + }), |
| 183 | + }, |
| 184 | + })} |
| 185 | + label={t("publicTrips:offer_dialog_message_label")} |
| 186 | + placeholder={t("publicTrips:offer_dialog_message_placeholder")} |
| 187 | + minRows={6} |
| 188 | + multiline |
| 189 | + fullWidth |
| 190 | + error={!!errors.text} |
| 191 | + helperText={ |
| 192 | + errors.text?.message |
| 193 | + ? errors.text.message |
| 194 | + : charsRemaining > 0 |
| 195 | + ? t("publicTrips:offer_dialog_chars_remaining", { |
| 196 | + count: charsRemaining, |
| 197 | + }) |
| 198 | + : "" |
| 199 | + } |
| 200 | + /> |
| 201 | + </FieldStack> |
| 202 | + </form> |
| 203 | + </DialogContent> |
| 204 | + <DialogActions sx={{ padding: theme.spacing(0, 3, 2) }}> |
| 205 | + <Button variant="outlined" onClick={handleClose}> |
| 206 | + {t("global:cancel")} |
| 207 | + </Button> |
| 208 | + <Button type="submit" form={formId} loading={isPending}> |
| 209 | + {t("publicTrips:offer_dialog_submit")} |
| 210 | + </Button> |
| 211 | + </DialogActions> |
| 212 | + </Dialog> |
| 213 | + ); |
| 214 | +} |
0 commit comments