Merged in feat(SW-1279)-mystay-multirum-cancelling (pull request #1443)

Feat(SW-1279) mystay multirum cancelling

* feat(SW-1279) Cancelation text if non-user on room 2-4

* feat(SW-1279) cancel mystay multiroom

* feat(SW-1279): Added cancellation for multiroom on mystay


Approved-by: Niclas Edenvin

apps/scandic-web/components/HotelReservation/MyStay/CancelStay/index.tsx

@@ -1,24 +1,29 @@
 "use client"
 
+import { zodResolver } from "@hookform/resolvers/zod"
+import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import Alert from "@/components/TempDesignSystem/Alert"
 import useLang from "@/hooks/useLang"
 
 import { ModalContent } from "../ManageStay/ModalContent"
+import { useMyStayRoomDetailsStore } from "../stores/myStayRoomDetailsStore"
 import useCancelStay from "./hooks/useCancelStay"
 import { CancelStayConfirmation } from "./Confirmation"
 import { FinalConfirmation } from "./FinalConfirmation"
-import { formatStayDetails } from "./utils"
+import { formatStayDetails, getDefaultRooms } from "./utils"
 
-import type { Hotel } from "@/types/hotel"
-import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
+import {
+  type CancelStayProps,
+  cancelStaySchema,
+  type FormValues,
+} from "@/types/components/hotelReservation/myStay/cancelStay"
+import { AlertTypeEnum } from "@/types/enums/alert"
 
-export interface CancelStayProps {
-  booking: BookingConfirmation["booking"]
-  hotel: Hotel
-  setBookingStatus: () => void
-  handleCloseModal: () => void
-  handleBackToManageStay: () => void
+const MODAL_STEPS = {
+  INITIAL: 1,
+  CONFIRMATION: 2,
 }
 
 export default function CancelStay({
@@ -30,6 +35,17 @@ export default function CancelStay({
 }: CancelStayProps) {
   const intl = useIntl()
   const lang = useLang()
+  const { rooms: roomDetails } = useMyStayRoomDetailsStore()
+
+  const { mainRoom } = booking
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(cancelStaySchema),
+    defaultValues: {
+      rooms: getDefaultRooms(booking),
+    },
+  })
+
   const {
     currentStep,
     isLoading,
@@ -41,47 +57,82 @@ export default function CancelStay({
     setBookingStatus,
     handleCloseModal,
     handleBackToManageStay,
+    getFormValues: form.getValues,
   })
 
   const stayDetails = formatStayDetails({ booking, lang, intl })
-  const isFirstStep = currentStep === 1
+  const isFirstStep = currentStep === MODAL_STEPS.INITIAL
+
+  function getModalCopy() {
+    if (isFirstStep) {
+      return {
+        title: intl.formatMessage({ id: "Cancel stay" }),
+        primaryLabel: intl.formatMessage({ id: "Cancel stay" }),
+        secondaryLabel: intl.formatMessage({ id: "Back" }),
+      }
+    } else {
+      return {
+        title: intl.formatMessage({ id: "Confirm cancellation" }),
+        primaryLabel: intl.formatMessage({ id: "Confirm cancellation" }),
+        secondaryLabel: intl.formatMessage({ id: "Don't cancel" }),
+      }
+    }
+  }
+
+  function getModalContent() {
+    if (mainRoom && isFirstStep)
+      return (
+        <CancelStayConfirmation
+          hotel={hotel}
+          booking={booking}
+          stayDetails={stayDetails}
+          roomDetails={roomDetails}
+        />
+      )
+
+    if (mainRoom && !isFirstStep)
+      return <FinalConfirmation booking={booking} stayDetails={stayDetails} />
+
+    if (!mainRoom && isFirstStep)
+      return (
+        <Alert
+          type={AlertTypeEnum.Info}
+          heading={intl.formatMessage({
+            id: "Contact the person who booked the stay",
+          })}
+          text={intl.formatMessage({
+            id: "As this is a multiroom stay, the cancellation has to be done by the person who made the booking. Please call 08-517 517 00 to talk to our customer service if you would need further assistance.",
+          })}
+        />
+      )
+  }
+
+  const { rooms } = form.watch()
+  const isFormValid = rooms?.some((room) => room.checked)
 
   return (
-    <>
+    <FormProvider {...form}>
       <ModalContent
-        title={
-          isFirstStep
-            ? intl.formatMessage({ id: "Cancel stay" })
-            : intl.formatMessage({ id: "Confirm cancellation" })
-        }
+        title={getModalCopy().title}
         onClose={handleCloseModal}
-        content={
-          isFirstStep ? (
-            <CancelStayConfirmation
-              hotel={hotel}
-              booking={booking}
-              stayDetails={stayDetails}
-            />
-          ) : (
-            <FinalConfirmation booking={booking} stayDetails={stayDetails} />
-          )
+        content={getModalContent()}
+        primaryAction={
+          mainRoom
+            ? {
+                label: getModalCopy().primaryLabel,
+                onClick: isFirstStep ? handleForward : handleCancelStay,
+                intent: isFirstStep ? "secondary" : "primary",
+                isLoading: isLoading,
+                disabled: !isFormValid,
+              }
+            : null
         }
-        primaryAction={{
-          label: isFirstStep
-            ? intl.formatMessage({ id: "Cancel stay" })
-            : intl.formatMessage({ id: "Confirm cancellation" }),
-          onClick: isFirstStep ? handleForward : handleCancelStay,
-          intent: isFirstStep ? "secondary" : "primary",
-          isLoading: isLoading,
-        }}
         secondaryAction={{
-          label: isFirstStep
-            ? intl.formatMessage({ id: "Back" })
-            : intl.formatMessage({ id: "Don't cancel" }),
+          label: getModalCopy().secondaryLabel,
           onClick: isFirstStep ? handleCloseCancelStay : handleCloseModal,
           intent: "text",
         }}
       />
-    </>
+    </FormProvider>
   )
 }