feat(SW-667): read more section to join loyalty sidebar

components/Sidebar/JoinLoyalty/ReadMore/index.tsx

@@ -0,0 +1,49 @@
+import { faq, membershipTermsAndConditions } from "@/constants/currentWebHrefs"
+
+import ArrowRight from "@/components/Icons/ArrowRight"
+import Link from "@/components/TempDesignSystem/Link"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import styles from "./readMore.module.css"
+
+export default async function ReadMore() {
+  const [intl, lang] = await Promise.all([getIntl(), getLang()])
+
+  const links = [
+    { href: faq[lang], translationId: "FAQ" },
+    {
+      href: membershipTermsAndConditions[lang],
+      translationId: "Membership terms and conditions",
+    },
+  ]
+
+  return (
+    <article className={styles.wrapper}>
+      <Subtitle>{intl.formatMessage({ id: "Read more" })}</Subtitle>
+      <div className={styles.links}>
+        {links.map((link) => {
+          const translatedText = intl.formatMessage({ id: link.translationId })
+          return (
+            <Link
+              key={link.translationId}
+              size="small"
+              className={styles.link}
+              color="burgundy"
+              href={link.href}
+            >
+              <ArrowRight
+                color="burgundy"
+                className={styles.icon}
+                height="20"
+                width="20"
+              />
+              {translatedText}
+            </Link>
+          )
+        })}
+      </div>
+    </article>
+  )
+}

components/Sidebar/JoinLoyalty/ReadMore/readMore.module.css

@@ -0,0 +1,27 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Spacing-x2);
+}
+
+.links {
+  display: grid;
+  gap: var(--Spacing-x-one-and-half);
+  justify-items: center;
+}
+
+.link {
+  display: flex;
+  align-items: center;
+}
+
+@media screen and (min-width: 1367px) {
+  .wrapper {
+    align-items: start;
+  }
+
+  .links {
+    justify-items: start;
+  }
+}

components/Sidebar/JoinLoyalty/index.tsx

@@ -10,6 +10,7 @@ import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
 import Contact from "./Contact"
+import ReadMore from "./ReadMore"
 
 import styles from "./joinLoyalty.module.css"
 
@@ -18,15 +19,15 @@ import type { JoinLoyaltyContactProps } from "@/types/components/sidebar/joinLoy
 export default async function JoinLoyaltyContact({
   block,
 }: JoinLoyaltyContactProps) {
-  const intl = await getIntl()
+  const [intl, user] = await Promise.all([getIntl(), getName()])
-  const user = await getName()
 
   // Check if we have user, that means we are logged in.
   if (user) {
     return null
   }
+
   return (
-    <section>
+    <section className={styles.joinLoyaltyContainer}>
       <article className={styles.wrapper}>
         <Title as="h4" level="h3" textTransform="capitalize">
           {block.title}
@@ -70,6 +71,7 @@ export default async function JoinLoyaltyContact({
         </section>
       </article>
       {block.contact ? <Contact contactBlock={block.contact} /> : null}
+      <ReadMore />
     </section>
   )
 }

components/Sidebar/JoinLoyalty/joinLoyalty.module.css

@@ -1,7 +1,12 @@
+.joinLoyaltyContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x5);
+}
 .wrapper {
   display: grid;
   gap: var(--Spacing-x3);
-  padding-bottom: var(--Spacing-x5);
+  /* padding-bottom: var(--Spacing-x5); */
   padding-top: var(--Spacing-x4);
   justify-items: center;
 }

constants/currentWebHrefs.ts

@@ -18,6 +18,24 @@ export const bookingTermsAndConditions: LangRoute = {
   sv: `${baseUrl.sv}/kundservice/priser-och-bokningsregler/bokningsregler`,
 }
 
+export const membershipTermsAndConditions: LangRoute = {
+  da: `${baseUrl.da}/kundeservice/priser-og-bookingvilkar/vilkar-betingelser-for-medlemsskab`,
+  de: `${baseUrl.de}/kundenbetreuung/preise-und-richtlinien/scandic-friends-allgemeine-geschaftsbedingungen`,
+  en: `${baseUrl.en}/customer-service/rates-and-policies/scandic-friends-terms-conditions`,
+  fi: `${baseUrl.fi}/asiakaspalvelu/hinnat-ja-varausehdot/jasenyyden-ehdot`,
+  no: `${baseUrl.no}/kundeservice/priser-og-bestillingsvilkar/betingelser-for-medlemskap`,
+  sv: `${baseUrl.sv}/kundservice/priser-och-bokningsregler/medlemsvillkor`,
+}
+
+export const faq: LangRoute = {
+  da: `${baseUrl.da}/scandic-friends/hjalp-og-service/ofte-stillede-sporgsmal`,
+  de: `${baseUrl.de}/scandic-friends/hilfe-und-service/haufig-gestellte-fragen`,
+  en: `${baseUrl.en}/scandic-friends/help-service/faq`,
+  fi: `${baseUrl.fi}/scandic-friends/apua-ongelmatilanteissa/usein-kysyttya`,
+  no: `${baseUrl.no}/scandic-friends/hjelp-og-medlemsservice/ofte-stilte-sporsmal`,
+  sv: `${baseUrl.sv}/scandic-friends/hjalp-och-service/vanliga-fragor`,
+}
+
 export const privacyPolicy: LangRoute = {
   da: `${baseUrl.da}/kundeservice/priser-og-bookingvilkar/persondatapolitik`,
   de: `${baseUrl.de}/kundenbetreuung/preise-und-richtlinien/datenschutzrichtlinie`,