web/apps/scandic-web/components/Forms/Edit/Profile/index.tsx

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

import { logout } from "@scandic-hotels/common/constants/routes/handleAuth"
import { profile } from "@scandic-hotels/common/constants/routes/myPages"
import { usePhoneNumberParsing } from "@scandic-hotels/common/hooks/usePhoneNumberParsing"
import { logger } from "@scandic-hotels/common/logger"
import {
  formatPhoneNumber,
  getDefaultCountryFromLang,
} from "@scandic-hotels/common/utils/phone"
import { Button } from "@scandic-hotels/design-system/Button"
import { toast } from "@scandic-hotels/design-system/Toast"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trpc } from "@scandic-hotels/trpc/client"
import { langToApiLang } from "@scandic-hotels/trpc/constants/apiLang"

import { editProfile } from "@/actions/editProfile"
import Dialog from "@/components/Dialog"
import ChangeNameDisclaimer from "@/components/MyPages/Profile/ChangeNameDisclaimer"

import FormContent from "./FormContent"
import { type EditProfileSchema, editProfileSchema } from "./schema"

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

import type { Lang } from "@scandic-hotels/common/constants/language"

import {
  type EditFormProps,
  Status,
} from "@/types/components/myPages/myProfile/edit"

const formId = "edit-profile"

export default function Form({ user }: EditFormProps) {
  const intl = useIntl()
  const router = useRouter()
  const params = useParams()
  const lang = params.lang as Lang
  const utils = trpc.useUtils()
  /**
   * RHF isValid defaults to false and never
   * changes when JS is disabled, therefore
   * we need to keep it insync ourselves
   */
  const [isValid, setIsValid] = useState(true)

  const { phoneNumber, phoneNumberCC } = usePhoneNumberParsing(user.phoneNumber)

  const methods = useForm<EditProfileSchema>({
    defaultValues: {
      address: {
        city: user.address?.city ?? "",
        countryCode: user.address?.countryCode ?? "",
        streetAddress: user.address?.streetAddress ?? "",
        zipCode: user.address?.zipCode ?? "",
      },
      dateOfBirth: user.dateOfBirth,
      email: user.email,
      language: user.language ?? langToApiLang[lang],
      phoneNumber: phoneNumber,
      phoneNumberCC: phoneNumber
        ? phoneNumberCC
        : getDefaultCountryFromLang(lang),
      password: "",
      newPassword: "",
      retypeNewPassword: "",
    },
    mode: "all",
    criteriaMode: "all",
    resolver: zodResolver(editProfileSchema),
    reValidateMode: "onChange",
  })
  const trigger = methods.trigger

  async function handleSubmit(data: EditProfileSchema) {
    const isPasswordChanged = !!data.newPassword
    const phoneNumber = formatPhoneNumber(data.phoneNumber, data.phoneNumberCC)
    const response = await editProfile({ ...data, phoneNumber })
    switch (response.status) {
      case Status.error:
        if (response.issues?.length) {
          response.issues.forEach((issue) => {
            logger.error("Profile edit error:", issue)
          })
        }
        toast.error(response.message)
        break
      case Status.success:
        toast.success(response.message)
        utils.user.get.invalidate()
        if (isPasswordChanged) {
          // Kept logout out of Next router forcing browser to navigate on logout url
          window.location.href = logout[lang]
        } else {
          const myStayReturnRoute = sessionStorage.getItem("myStayReturnRoute")
          if (myStayReturnRoute) {
            const returnRoute = JSON.parse(myStayReturnRoute)
            sessionStorage.removeItem("myStayReturnRoute")
            router.push(returnRoute.path)
          } else {
            router.push(profile[lang])
          }
          router.refresh() // Can be removed on NextJs 15
        }
        break
    }
  }

  useEffect(() => {
    setIsValid(methods.formState.isValid)
  }, [setIsValid, methods.formState.isValid])

  useEffect(() => {
    trigger()
  }, [trigger])

  return (
    <>
      <section className={styles.container}>
        <div className={styles.title}>
          <Typography variant="Title/sm">
            <span>
              <h1 className={styles.welcome}>
                {intl.formatMessage({
                  id: "common.welcome",
                  defaultMessage: "Welcome",
                })}
              </h1>
              <h2 data-hj-suppress className={styles.name}>
                {user.name}
              </h2>
            </span>
          </Typography>
        </div>
        <div className={styles.btnContainer}>
          <Dialog
            bodyText={intl.formatMessage({
              id: "editProfile.discardChangesDescription",
              defaultMessage: "Any changes you've made will be lost.",
            })}
            cancelButtonText={intl.formatMessage({
              id: "editProfile.goBackToEdit",
              defaultMessage: "Go back to edit",
            })}
            proceedHref={profile[lang]}
            proceedText={intl.formatMessage({
              id: "editProfile.yesDiscardChanges",
              defaultMessage: "Yes, discard changes",
            })}
            titleText={intl.formatMessage({
              id: "editProfile.discardChangesTitle",
              defaultMessage: "Discard unsaved changes?",
            })}
            trigger={
              <Button variant="Secondary" size="Small" color="Primary">
                {intl.formatMessage({
                  id: "editProfile.discardChanges",
                  defaultMessage: "Discard changes",
                })}
              </Button>
            }
          />
          <Button
            isDisabled={!isValid || methods.formState.isSubmitting}
            form={formId}
            variant="Primary"
            size="Small"
            color="Primary"
            type="submit"
          >
            {intl.formatMessage({
              id: "common.save",
              defaultMessage: "Save",
            })}
          </Button>
        </div>
        <form
          /* @ts-expect-error Ignoring since ts doesn't recognize that tRPC parses FormData before reaching the route */
          action={editProfile}
          className={styles.form}
          id={formId}
          onSubmit={methods.handleSubmit(handleSubmit)}
        >
          <FormProvider {...methods}>
            <FormContent errors={methods.formState.errors} />
          </FormProvider>
        </form>
      </section>

      <ChangeNameDisclaimer />
    </>
  )
}