web/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/index.tsx

/* eslint-disable formatjs/no-literal-string-in-jsx */
/* TODO remove disable and add i18n */
"use client"

import { useEffect, useState } from "react"
import { Dialog } from "react-aria-components"
import { useIntl } from "react-intl"

import { Button } from "@scandic-hotels/design-system/Button"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Modal from "@scandic-hotels/design-system/Modal"
import { toast } from "@scandic-hotels/design-system/Toast"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { missingPoints } from "@/constants/missingPointsHrefs"
import { env } from "@/env/client"

import useLang from "@/hooks/useLang"

import { ClaimPointsWizard } from "./ClaimPointsWizard"

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

export default function ClaimPoints() {
  const intl = useIntl()
  const [openModal, setOpenModal] = useLinkableModalState("claim-points")

  const useNewFlow = env.NEXT_PUBLIC_NEW_POINTCLAIMS
  if (!useNewFlow) {
    return <OldClaimPointsLink />
  }

  return (
    <>
      <div className={styles.claim}>
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <p>
            {intl.formatMessage({
              id: "points.claimPoints.missingPreviousStay",
              defaultMessage: "Missing a previous stay?",
            })}
          </p>
        </Typography>
        <Button variant="Text" size="sm" onPress={() => setOpenModal(true)}>
          {intl.formatMessage({
            id: "points.claimPoints.cta",
            defaultMessage: "Claim points",
          })}
        </Button>
      </div>
      <Modal
        title="Add missing points"
        isOpen={openModal}
        onToggle={(open) => setOpenModal(open)}
      >
        <Dialog aria-label="TODO" className={styles.dialog}>
          {({ close }) => (
            <ClaimPointsWizard
              onSuccess={() => {
                toast.info(
                  <>
                    <Typography variant="Body/Paragraph/mdBold">
                      <p>We&apos;re on it!</p>
                    </Typography>
                    <Typography variant="Body/Paragraph/mdRegular">
                      <p>
                        If your points have not been added to your account
                        within 2 weeks, please contact us.
                      </p>
                    </Typography>
                  </>,
                  {
                    duration: Infinity,
                  }
                )
                close()
              }}
              onClose={close}
            />
          )}
        </Dialog>
      </Modal>
    </>
  )
}

function useLinkableModalState(target: string) {
  const [openModal, setOpenModal] = useState(false)

  useEffect(() => {
    const params = new URLSearchParams(window.location.search)
    const claimPoints = params.get("target") === target

    if (claimPoints) {
      params.delete("target")
      const newUrl = `${window.location.pathname}?${params.toString()}`
      window.history.replaceState({}, "", newUrl)
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setOpenModal(true)
    }
  }, [target])

  return [openModal, setOpenModal] as const
}

function OldClaimPointsLink() {
  const intl = useIntl()
  const lang = useLang()

  return (
    <div className={styles.claim}>
      <Typography variant="Body/Supporting text (caption)/smRegular">
        <p>
          {intl.formatMessage({
            id: "points.claimPoints.missingPreviousStay",
            defaultMessage: "Missing a previous stay?",
          })}
        </p>
      </Typography>
      <ButtonLink
        href={missingPoints[lang]}
        variant="Text"
        target="_blank"
        size="sm"
      >
        {intl.formatMessage({
          id: "points.claimPoints.cta",
          defaultMessage: "Claim points",
        })}
        <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
      </ButtonLink>
    </div>
  )
}