web/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/Details.tsx

"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { useRouter } from "next/navigation"
import { useState } from "react"
import { Dialog } from "react-aria-components"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { trpc } from "@/lib/trpc/client"

import MembershipLevelIcon from "@/components/Levels/Icon"
import Modal from "@/components/Modal"
import { ModalContentWithActions } from "@/components/Modal/ModalContentWithActions"
import Button from "@/components/TempDesignSystem/Button"
import { toast } from "@/components/TempDesignSystem/Toasts"
import useLang from "@/hooks/useLang"

import ModifyContact from "../ModifyContact"

import styles from "./guestDetails.module.css"

import {
  type ModifyContactSchema,
  modifyContactSchema,
} from "@/types/components/hotelReservation/myStay/modifyContact"
import { MODAL_STEPS } from "@/types/components/hotelReservation/myStay/myStay"
import type { Room } from "@/types/stores/my-stay"
import type { SafeUser } from "@/types/user"

interface DetailsProps {
  booking: Room
  user: SafeUser
}

export default function Details({ booking, user }: DetailsProps) {
  const intl = useIntl()
  const lang = useLang()
  const router = useRouter()
  const utils = trpc.useUtils()
  const [currentStep, setCurrentStep] = useState(MODAL_STEPS.INITIAL)
  const [isLoading, setIsLoading] = useState(false)

  const [isModifyGuestDetailsOpen, setIsModifyGuestDetailsOpen] =
    useState(false)

  const form = useForm<ModifyContactSchema>({
    resolver: zodResolver(modifyContactSchema),
    defaultValues: {
      firstName: booking.guest.firstName,
      lastName: booking.guest.lastName,
      email: booking.guest.email,
      phoneNumber: booking.guest.phoneNumber,
      countryCode: booking.guest.countryCode,
    },
  })

  const isFirstStep = currentStep === MODAL_STEPS.INITIAL

  const isMemberBooking =
    booking.guest.membershipNumber === user?.membership?.membershipNumber

  const updateGuest = trpc.booking.update.useMutation({
    onMutate: () => setIsLoading(true),
    onSuccess: (refId) => {
      if (refId) {
        utils.booking.confirmation.invalidate({
          refId,
        })

        toast.success(
          intl.formatMessage({
            defaultMessage: "Guest details updated",
          })
        )
        setIsModifyGuestDetailsOpen(false)
        setCurrentStep(MODAL_STEPS.INITIAL)
      } else {
        toast.error(
          intl.formatMessage({
            defaultMessage: "Failed to update guest details",
          })
        )
      }
    },
    onError: () => {
      toast.error(
        intl.formatMessage({
          defaultMessage: "Failed to update guest details",
        })
      )
    },
    onSettled: () => {
      setIsLoading(false)
    },
  })

  async function onSubmit(data: ModifyContactSchema) {
    updateGuest.mutate({
      refId: booking.refId,
      guest: {
        email: data.email,
        phoneNumber: data.phoneNumber,
        countryCode: data.countryCode,
      },
    })
  }

  function handleModifyMemberDetails() {
    const expirationTime = Date.now() + 10 * 60 * 1000
    sessionStorage.setItem(
      "myStayReturnRoute",
      JSON.stringify({
        path: window.location.href,
        expiry: expirationTime,
      })
    )
    router.push(`/${lang}/scandic-friends/my-pages/profile/edit`)
  }

  return (
    <div className={styles.guestDetails}>
      {isMemberBooking && user.membership && (
        <div className={styles.userDetails}>
          <div className={styles.userDetailsTitle}>
            <Typography variant="Title/Overline/sm">
              <p>
                {intl.formatMessage({
                  defaultMessage: "Your member tier",
                })}
              </p>
            </Typography>
          </div>
          <div className={styles.memberLevel}>
            <MembershipLevelIcon
              level={user.membership.membershipLevel}
              color="red"
              rows={1}
              className={styles.memberLevelIcon}
            />
          </div>
          <div className={styles.totalPoints}>
            <div className={styles.totalPointsText}>
              <MaterialIcon icon="diamond" color="Icon/Intense" />

              <Typography variant="Title/Overline/sm">
                <p>
                  {intl.formatMessage({
                    defaultMessage: "My total points",
                  })}
                </p>
              </Typography>
            </div>

            <Typography variant="Body/Paragraph/mdRegular">
              <p>{user.membership.currentPoints}</p>
            </Typography>
          </div>
        </div>
      )}
      <div className={styles.guest}>
        <Typography variant="Body/Paragraph/mdBold">
          <p>
            {booking.guest.firstName} {booking.guest.lastName}
          </p>
        </Typography>
        {isMemberBooking && user.membership && (
          <Typography variant="Body/Paragraph/mdRegular">
            <p className={styles.memberNumber}>
              {intl.formatMessage(
                {
                  defaultMessage: "Member no. {nr}",
                },
                {
                  nr: user.membership.membershipNumber,
                }
              )}
            </p>
          </Typography>
        )}
        <div className={styles.contactInfoMobile}>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <p color="uiTextHighContrast">{booking.guest.email}</p>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <p color="uiTextHighContrast">{booking.guest.phoneNumber}</p>
          </Typography>
        </div>
        <div className={styles.contactInfoDesktop}>
          <Typography variant="Body/Paragraph/mdRegular">
            <p color="uiTextHighContrast">{booking.guest.email}</p>
          </Typography>
          <Typography variant="Body/Paragraph/mdRegular">
            <p color="uiTextHighContrast">{booking.guest.phoneNumber}</p>
          </Typography>
        </div>
      </div>
      {isMemberBooking ? (
        <Button
          variant="icon"
          color="burgundy"
          intent={"secondary"}
          onClick={handleModifyMemberDetails}
          disabled={booking.isCancelled}
          size="small"
        >
          <MaterialIcon
            icon="edit"
            color="Icon/Interactive/Default"
            size={20}
          />
          <Typography variant="Body/Paragraph/mdRegular">
            <span>
              {intl.formatMessage({
                defaultMessage: "Modify guest details",
              })}
            </span>
          </Typography>
        </Button>
      ) : (
        <>
          <Button
            variant="icon"
            color="burgundy"
            intent="secondary"
            onClick={() =>
              setIsModifyGuestDetailsOpen(!isModifyGuestDetailsOpen)
            }
            disabled={booking.isCancelled}
            size="small"
          >
            <MaterialIcon
              icon="edit"
              color={
                booking.isCancelled
                  ? "Icon/Interactive/Disabled"
                  : "Icon/Interactive/Default"
              }
              size={20}
            />
            <Typography variant="Body/Paragraph/mdRegular">
              <span>
                {intl.formatMessage({
                  defaultMessage: "Modify guest details",
                })}
              </span>
            </Typography>
          </Button>
          {isModifyGuestDetailsOpen && (
            <Modal
              withActions
              hideHeader
              isOpen={isModifyGuestDetailsOpen}
              onToggle={setIsModifyGuestDetailsOpen}
            >
              <Dialog
                aria-label={intl.formatMessage({
                  defaultMessage: "Modify guest details",
                })}
              >
                {({ close }) => (
                  <FormProvider {...form}>
                    <ModalContentWithActions
                      title={intl.formatMessage({
                        defaultMessage: "Modify guest details",
                      })}
                      onClose={() => setIsModifyGuestDetailsOpen(false)}
                      content={
                        booking.guest && (
                          <ModifyContact
                            guest={booking.guest}
                            isFirstStep={isFirstStep}
                          />
                        )
                      }
                      primaryAction={{
                        label: isFirstStep
                          ? intl.formatMessage({
                              defaultMessage: "Save updates",
                            })
                          : intl.formatMessage({
                              defaultMessage: "Confirm",
                            }),
                        onClick: isFirstStep
                          ? () => setCurrentStep(MODAL_STEPS.CONFIRMATION)
                          : () => form.handleSubmit(onSubmit)(),
                        disabled: !form.formState.isValid || isLoading,
                        intent: isFirstStep ? "secondary" : "primary",
                      }}
                      secondaryAction={{
                        label: isFirstStep
                          ? intl.formatMessage({
                              defaultMessage: "Back",
                            })
                          : intl.formatMessage({
                              defaultMessage: "Cancel",
                            }),
                        onClick: () => {
                          close()
                          setCurrentStep(MODAL_STEPS.INITIAL)
                        },
                      }}
                    />
                  </FormProvider>
                )}
              </Dialog>
            </Modal>
          )}
        </>
      )}
    </div>
  )
}