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

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

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

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({
                id: "dtmc.alreadyMember",
                defaultMessage: "Already a Scandic Friends member?",
              })}
            </p>
          </Typography>
          <ButtonLink href={loginAndLinkURL} size="md" variant="Tertiary">
            {intl.formatMessage({
              id: "dtmc.logInAndLinkEmployment",
              defaultMessage: "Log in and link employment",
            })}
          </ButtonLink>
        </div>

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

  if (isEmployeeLinked(user)) {
    return (
      <div className={styles.container}>
        <DigitalTeamMemberCard user={user}>
          <TeamMemberCardTrigger size="md" variant="Tertiary" color="Primary">
            {intl.formatMessage({
              id: "dtmc.showTeamMemberCard",
              defaultMessage: "Show Team Member Card",
            })}
          </TeamMemberCardTrigger>
        </DigitalTeamMemberCard>
      </div>
    )
  }

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