web/apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions/index.tsx

import React from "react"

import { signup } from "@scandic-hotels/common/constants/routes/signup"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { dtmcLogin } from "@/constants/routes/dtmc"
import { login } from "@/constants/routes/handleAuth"
import { getProfileSafely } from "@/lib/trpc/memoizedRequests"

import ButtonLink from "@/components/ButtonLink"
import { TeamMemberCardTrigger } from "@/components/DigitalTeamMemberCard/Trigger"
import DigitalTeamMemberCard from "@/components/MyPages/DigitalTeamMemberCard"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { isEmployeeLinked } from "@/utils/user"

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

export default async function EmployeeBenefitsCallToActions() {
  const user = await getProfileSafely()
  const intl = await getIntl()
  const lang = await getLang()

  const loginAndLinkURL = `${login[lang]}?redirectTo=${encodeURIComponent(dtmcLogin[lang])}`

  if (!user) {
    return (
      <>
        <div className={styles.container}>
          <Typography variant="Body/Paragraph/mdBold">
            <p>
              {intl.formatMessage({
                defaultMessage: "Already a Scandic Friends member?",
              })}
            </p>
          </Typography>
          <ButtonLink href={loginAndLinkURL} size="Medium" variant="Tertiary">
            {intl.formatMessage({
              defaultMessage: "Log in and link employment",
            })}
          </ButtonLink>
        </div>

        <div className={styles.container}>
          <Typography variant="Body/Paragraph/mdBold">
            <p>
              {intl.formatMessage({
                defaultMessage: "Don't have a Scandic Friends account yet?",
              })}
            </p>
          </Typography>
          <ButtonLink href={signup[lang]} size="Medium" variant="Secondary">
            {intl.formatMessage({
              defaultMessage: "Sign up and link employment",
            })}
          </ButtonLink>
        </div>
      </>
    )
  }

  if (isEmployeeLinked(user)) {
    return (
      <div className={styles.container}>
        <DigitalTeamMemberCard user={user}>
          <TeamMemberCardTrigger
            size="Medium"
            variant="Tertiary"
            color="Primary"
            typography="Body/Paragraph/mdBold"
          >
            {intl.formatMessage({
              defaultMessage: "Show Team Member Card",
            })}
          </TeamMemberCardTrigger>
        </DigitalTeamMemberCard>
      </div>
    )
  }

  return (
    <div className={styles.container}>
      <ButtonLink
        href={dtmcLogin[lang]}
        size="Medium"
        variant="Tertiary"
        color="Primary"
      >
        {intl.formatMessage({
          defaultMessage: "Link my employment",
        })}
      </ButtonLink>
    </div>
  )
}