web/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsForm.tsx

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

import { getProfileWithExtendedPartnerData } from "@/lib/trpc/memoizedRequests"

import Image from "@/components/Image"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import { getIntl } from "@/i18n"
import { getEurobonusMembership } from "@/utils/user"

import { TransferPointsFormClient } from "./TransferPointsFormClient"

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

import type { Lang } from "@/constants/languages"

export async function TransferPointsForm({ lang }: { lang: Lang }) {
  const profile = await getProfileWithExtendedPartnerData()
  if (!profile) return null

  const eurobonusMembership = getEurobonusMembership(profile?.loyalty)
  if (!eurobonusMembership) return null

  const scandicPoints = profile?.membership?.currentPoints ?? 0
  const sasPoints = eurobonusMembership.spendablePoints || 0

  // TODO get from api
  const exchangeRate = 2

  return (
    <TransferPointsFormContent
      sasPoints={sasPoints}
      scandicPoints={scandicPoints}
      exchangeRate={exchangeRate}
      lang={lang}
    />
  )
}

export async function TransferPointsFormSkeleton({ lang }: { lang: Lang }) {
  return (
    <TransferPointsFormContent
      sasPoints={null}
      scandicPoints={null}
      exchangeRate={null}
      lang={lang}
    />
  )
}

async function TransferPointsFormContent({
  sasPoints,
  scandicPoints,
  exchangeRate,
  lang,
}: {
  sasPoints: number | null
  scandicPoints: number | null
  exchangeRate: number | null
  lang: Lang
}) {
  const intl = await getIntl()

  return (
    <div className={styles.container}>
      <section className={styles.card}>
        <div className={styles.highFive}>
          <Image
            src="/_static/img/scandic-high-five.svg"
            alt=""
            width="111"
            height="139"
            sizes="100vw"
          />
        </div>
        <div className={styles.transferContainer}>
          <div className={styles.transferFrom}>
            <div>
              <div className={styles.labelWithIcon}>
                <Typography variant="Tag/sm">
                  <p>
                    {intl.formatMessage({
                      defaultMessage: "Transfer from",
                    })}
                  </p>
                </Typography>
                <MaterialIcon icon="upload" />
              </div>
              <Typography variant="Title/Subtitle/md">
                <p>
                  {intl.formatMessage({
                    defaultMessage: "SAS EuroBonus",
                  })}
                </p>
              </Typography>
            </div>
            <div>
              <Typography variant="Tag/sm">
                <p className={styles.balanceLabel}>
                  {intl.formatMessage({
                    defaultMessage: "Balance",
                  })}
                </p>
              </Typography>
              {sasPoints === null ? (
                <SkeletonShimmer
                  width="10ch"
                  height="20px"
                  display="inline-block"
                />
              ) : (
                <Typography variant="Body/Paragraph/mdRegular">
                  <p>
                    {intl.formatMessage(
                      {
                        defaultMessage: "{points, number} p",
                      },
                      { points: sasPoints }
                    )}
                  </p>
                </Typography>
              )}
            </div>
          </div>
          <div className={styles.noPointsWarning}>
            {sasPoints === 0 && (
              <Typography variant="Body/Paragraph/mdRegular">
                <p>
                  {intl.formatMessage({
                    defaultMessage: "You have no points to transfer.",
                  })}
                </p>
              </Typography>
            )}
          </div>
          <div className={styles.transferTo}>
            <div>
              <div className={styles.labelWithIcon}>
                <MaterialIcon icon="download" />
                <Typography variant="Tag/sm">
                  <p>
                    {intl.formatMessage({
                      defaultMessage: "Transfer to",
                    })}
                  </p>
                </Typography>
              </div>
              <Typography variant="Title/Subtitle/md">
                <p>
                  {intl.formatMessage({
                    defaultMessage: "Scandic Friends",
                  })}
                </p>
              </Typography>
            </div>
            <div>
              <Typography variant="Tag/sm">
                <p className={styles.balanceLabel}>
                  {intl.formatMessage({
                    defaultMessage: "Balance",
                  })}
                </p>
              </Typography>
              {scandicPoints === null ? (
                <SkeletonShimmer
                  width="10ch"
                  height="20px"
                  display="inline-block"
                />
              ) : (
                <Typography variant="Body/Paragraph/mdRegular">
                  <p>
                    {intl.formatMessage(
                      {
                        defaultMessage: "{points, number} p",
                      },
                      { points: scandicPoints }
                    )}
                  </p>
                </Typography>
              )}
            </div>
          </div>
        </div>
        <TransferPointsFormClient
          sasPoints={sasPoints}
          exchangeRate={exchangeRate}
          lang={lang}
        />
      </section>
      <Typography variant="Body/Supporting text (caption)/smRegular">
        <p style={{ color: "var(--Text-Tertiary)" }}>
          {intl.formatMessage({
            defaultMessage: "Transferred points will not be level qualifying",
          })}
        </p>
      </Typography>
    </div>
  )
}