Merged in feat/sw-1314-transfer-sas-points (pull request #1508)

SW-1314 Transfer SAS points

Approved-by: Linus Flood

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

@@ -0,0 +1,165 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
+
+import ArrowFromIcon from "@/components/Icons/ArrowFrom"
+import ArrowToIcon from "@/components/Icons/ArrowTo"
+import Image from "@/components/Image"
+import SkeletonShimmer from "@/components/SkeletonShimmer"
+import { getIntl } from "@/i18n"
+
+import { TransferPointsFormClient } from "./TransferPointsFormClient"
+
+import styles from "./transferPoints.module.css"
+
+import type { Lang } from "@/constants/languages"
+
+const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+export async function TransferPointsForm({ lang }: { lang: Lang }) {
+  const profile = await getProfileSafely()
+  const scandicPoints = profile?.membership?.currentPoints ?? 0
+
+  // TODO get from api
+  await wait(1_000)
+  const sasPoints = 250_000
+  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({ id: "Transfer from" })}</p>
+                </Typography>
+                <ArrowFromIcon />
+              </div>
+              <Typography variant="Title/Subtitle/md">
+                <p>{intl.formatMessage({ id: "SAS EuroBonus" })}</p>
+              </Typography>
+            </div>
+            <div>
+              <Typography variant="Tag/sm">
+                <p className={styles.balanceLabel}>
+                  {intl.formatMessage({ id: "Balance" })}
+                </p>
+              </Typography>
+              {sasPoints === null ? (
+                <SkeletonShimmer width="10ch" height="20px" />
+              ) : (
+                <Typography variant="Body/Paragraph/mdRegular">
+                  <p>
+                    {intl.formatMessage(
+                      { id: "{points, number} p" },
+                      { points: sasPoints }
+                    )}
+                  </p>
+                </Typography>
+              )}
+            </div>
+          </div>
+          <div className={styles.noPointsWarning}>
+            {sasPoints === 0 && (
+              <Typography variant="Body/Paragraph/mdRegular">
+                <p>
+                  {intl.formatMessage({
+                    id: "You have no points to transfer.",
+                  })}
+                </p>
+              </Typography>
+            )}
+          </div>
+          <div className={styles.transferTo}>
+            <div>
+              <div className={styles.labelWithIcon}>
+                <ArrowToIcon />
+                <Typography variant="Tag/sm">
+                  <p>{intl.formatMessage({ id: "Transfer to" })}</p>
+                </Typography>
+              </div>
+              <Typography variant="Title/Subtitle/md">
+                <p>{intl.formatMessage({ id: "Scandic Friends" })}</p>
+              </Typography>
+            </div>
+            <div>
+              <Typography variant="Tag/sm">
+                <p className={styles.balanceLabel}>
+                  {intl.formatMessage({ id: "Balance" })}
+                </p>
+              </Typography>
+              {scandicPoints === null ? (
+                <SkeletonShimmer width="10ch" height="20px" />
+              ) : (
+                <Typography variant="Body/Paragraph/mdRegular">
+                  <p>
+                    {intl.formatMessage(
+                      { id: "{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({
+            id: "Transferred points will not be level qualifying",
+          })}
+        </p>
+      </Typography>
+    </div>
+  )
+}