fix: add link to overview

app/[lang]/webview/loyalty-page/page.module.css

@@ -3,4 +3,5 @@
   gap: 4.2rem;
   padding-left: 2rem;
   padding-right: 2rem;
+  padding-top: 2rem;
 }

app/[lang]/webview/loyalty-page/page.tsx

@@ -1,9 +1,9 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import BackButton from "@/components/BackButton"
 import { Blocks } from "@/components/Loyalty/Blocks/WebView"
 import Sidebar from "@/components/Loyalty/Sidebar"
 import MaxWidth from "@/components/MaxWidth"
+import LinkToOverview from "@/components/Webviews/LinkToOverview"
 
 import styles from "./page.module.css"
 
@@ -15,10 +15,9 @@ export default async function AboutScandicFriends({
   const loyaltyPage = await serverClient().contentstack.loyaltyPage.get()
   return (
     <section className={styles.content}>
+      <LinkToOverview lang={params.lang} />
       {loyaltyPage.sidebar ? <Sidebar blocks={loyaltyPage.sidebar} /> : null}
-
       <MaxWidth className={styles.blocks} tag="main">
-        <BackButton />
         <Blocks blocks={loyaltyPage.blocks} lang={params.lang} />
       </MaxWidth>
     </section>

app/[lang]/webview/my-pages/page.module.css

@@ -3,4 +3,5 @@
   gap: 4.2rem;
   padding-left: 2rem;
   padding-right: 2rem;
+  padding-top: 2rem;
 }

app/[lang]/webview/my-pages/page.tsx

@@ -1,13 +1,12 @@
 import "@/app/globals.css"
 import "@scandic-hotels/design-system/style.css"
 
-import { overview } from "@/constants/routes/myPages"
+import { overview } from "@/constants/routes/webviews"
-import { _ } from "@/lib/translation"
 import { serverClient } from "@/lib/trpc/server"
 
-import BackButton from "@/components/BackButton"
 import MaxWidth from "@/components/MaxWidth"
 import Content from "@/components/MyPages/AccountPage/Webview/Content"
+import LinkToOverview from "@/components/Webviews/LinkToOverview"
 
 import styles from "./page.module.css"
 
@@ -16,11 +15,12 @@ import { LangParams, PageArgs } from "@/types/params"
 export default async function MyPages({ params }: PageArgs<LangParams>) {
   const accountPage = await serverClient().contentstack.accountPage.get()
 
-  const isNotOverviewPage = accountPage.url !== overview[params.lang]
+  const linkToOverview =
+    `/${params.lang}/webview${accountPage.url}` !== overview[params.lang]
 
   return (
     <MaxWidth className={styles.blocks} tag="main">
-      {isNotOverviewPage ? <BackButton /> : null}
+      {linkToOverview ? <LinkToOverview lang={params.lang} /> : null}
       <Content lang={params.lang} content={accountPage.content} />
     </MaxWidth>
   )

components/BackButton/index.tsx

@@ -1,15 +0,0 @@
-"use client"
-
-import { useRouter } from "next/navigation"
-
-import Button from "../TempDesignSystem/Button"
-
-export default function BackButton() {
-  const router = useRouter()
-
-  function goBack() {
-    router.back()
-  }
-
-  return <Button onClick={goBack}>Go Back!</Button>
-}

components/Webviews/LinkToOverview/index.tsx

@@ -0,0 +1,18 @@
+import { ArrowLeft } from "react-feather"
+
+import { overview } from "@/constants/routes/webviews"
+import { _ } from "@/lib/translation"
+
+import Link from "@/components/TempDesignSystem/Link"
+
+import styles from "./linkToOverview.module.css"
+
+import { LangParams } from "@/types/params"
+
+export default function LinkToOverview({ lang }: LangParams) {
+  return (
+    <Link className={styles.overviewLink} href={overview[lang]}>
+      <ArrowLeft height={20} width={20} /> {_("Go back to overview")}
+    </Link>
+  )
+}

components/Webviews/LinkToOverview/linkToOverview.module.css

@@ -0,0 +1,7 @@
+.overviewLink {
+  font-size: 1.6rem;
+  color: var(--Scandic-Brand-Burgundy, #4d001b);
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}

test.js

@@ -1,82 +0,0 @@
-function base64ToUint8Array(base64String) {
-  const binaryString = atob(base64String)
-  const byteArray = new Uint8Array(binaryString.length)
-  for (let i = 0; i < binaryString.length; i++) {
-    byteArray[i] = binaryString.charCodeAt(i)
-  }
-  return byteArray
-}
-
-function utf8ToUint8Array(utf8String) {
-  return new TextEncoder().encode(utf8String)
-}
-
-function uint8ArrayToBase64(uint8Array) {
-  let binaryString = ""
-  const len = uint8Array.byteLength
-  for (let i = 0; i < len; i++) {
-    binaryString += String.fromCharCode(uint8Array[i])
-  }
-  return btoa(binaryString)
-}
-async function encryptData(keyBase64, ivBase64, data) {
-  const keyBuffer = await crypto.subtle.importKey(
-    "raw",
-    base64ToUint8Array(keyBase64),
-    "AES-CBC",
-    false,
-    ["encrypt"]
-  )
-
-  const dataBuffer = utf8ToUint8Array(data)
-  const ivBuffer = base64ToUint8Array(ivBase64)
-  const encryptedDataBuffer = await crypto.subtle.encrypt(
-    { name: "AES-CBC", iv: ivBuffer },
-    keyBuffer,
-    dataBuffer
-  )
-
-  const encryptedData = uint8ArrayToBase64(new Uint8Array(encryptedDataBuffer))
-  return encryptedData
-}
-
-function uint8ArrayToUtf8(uint8Array) {
-  return new TextDecoder().decode(uint8Array)
-}
-
-async function decryptData(keyBase64, ivBase64, encryptedDataBase64) {
-  const keyBuffer = await crypto.subtle.importKey(
-    "raw",
-    base64ToUint8Array(keyBase64),
-    "AES-CBC",
-    false,
-    ["decrypt"]
-  )
-
-  const encryptedDataBuffer = base64ToUint8Array(encryptedDataBase64)
-  const ivBuffer = base64ToUint8Array(ivBase64)
-  const decryptedDataBuffer = await crypto.subtle.decrypt(
-    { name: "AES-CBC", iv: ivBuffer },
-    keyBuffer,
-    encryptedDataBuffer
-  )
-
-  const decryptedData = uint8ArrayToUtf8(new Uint8Array(decryptedDataBuffer))
-  return decryptedData
-}
-
-const data = "_0XBPWQQ_e81346b1-6e8f-44bf-ad9c-33fd2dcc1abd"
-const iv = btoa("abcdefghijklmnop")
-const tegwpjke = await encryptData(
-  "JYekSRT8YXWquXpxxukJR0GsELl5Nt4KdcCbaCvSzHE=",
-  iv,
-  data
-)
-
-const decrypttionData = await decryptData(
-  "JYekSRT8YXWquXpxxukJR0GsELl5Nt4KdcCbaCvSzHE=",
-  iv,
-  tegwpjke
-)
-
-console.log(tegwpjke, btoa("abcdefghijklmnop"), decrypttionData === data)