scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in chore/replace-deprecated-body (pull request #3300)

Browse Source 
Replace deprecated <Body> with <Typography>

* chore: replace deprecated body component

* refactor: replace Body component with Typography across various components

* merge


Approved-by: Bianca Widstam
Approved-by: Matilda Landström
This commit is contained in:
Joakim Jäderberg
2025-12-09 12:45:34 +00:00
parent f40035baa9
commit 7eb74ea239
69 changed files with 755 additions and 899 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
apps/partner-sas/i18n/dictionaries/da.json
View File

@@ -3110,8 +3110,7 @@
"value": "Vi er stadig ved at bekræfte din booking. Det tager normalt kun få minutter, og vi undskylder ventetiden. Tjek venligst din indbakke for en bookingbekræftelse, og hvis du stadig ikke har modtaget den sidst på dagen, bedes du kontakte vores kundesupport på " "value": "Vi er stadig ved at bekræfte din booking. Det tager normalt kun få minutter, og vi undskylder ventetiden. Tjek venligst din indbakke for en bookingbekræftelse, og hvis du stadig ikke har modtaget den sidst på dagen, bedes du kontakte vores kundesupport på "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "link" "value": "link"
}, },
@@ -4533,8 +4532,7 @@
"value": "Indtast venligst koden sendt til " "value": "Indtast venligst koden sendt til "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -7589,14 +7587,12 @@
"value": ". Sådanne tilbud kan være baseret på dine tidligere interaktioner med Scandic, herunder købshistorik, oplysninger du har indtastet i din medlemsprofil, besvarede kundeundersøgelser, interaktioner med kundeservice og online brugeradfærd, når du benytter Scandics hjemmeside eller app. " "value": ". Sådanne tilbud kan være baseret på dine tidligere interaktioner med Scandic, herunder købshistorik, oplysninger du har indtastet i din medlemsprofil, besvarede kundeundersøgelser, interaktioner med kundeservice og online brugeradfærd, når du benytter Scandics hjemmeside eller app. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -7605,14 +7601,12 @@
"value": " Hvis du giver dit samtykke til forbedret personalisering, kan Scandic skabe et endnu mere personligt medlemskab til dig og sende dig personlige tilbud baseret på dine interaktioner med Scandic Friends-partnere. Scandic kan også dele de oplysninger, der bruges til dit personlige medlemskab, med Scandic Friends-partnere til analytiske og marketingformål, for eksempel for at følge op på partnerskaber, udvikle nye relevante produkter og skræddersy tilbud afhængigt af dine interesser. Scandic Friends-partnere kan tilpasse deres eksisterende kommunikation til dig baseret på persondata, vi har delt med dem. Ingen af vores Scandic Friends-partnere vil dog sende marketingkommunikation til dig baseret på det samtykke, du har givet til Scandic. " "value": " Hvis du giver dit samtykke til forbedret personalisering, kan Scandic skabe et endnu mere personligt medlemskab til dig og sende dig personlige tilbud baseret på dine interaktioner med Scandic Friends-partnere. Scandic kan også dele de oplysninger, der bruges til dit personlige medlemskab, med Scandic Friends-partnere til analytiske og marketingformål, for eksempel for at følge op på partnerskaber, udvikle nye relevante produkter og skræddersy tilbud afhængigt af dine interesser. Scandic Friends-partnere kan tilpasse deres eksisterende kommunikation til dig baseret på persondata, vi har delt med dem. Ingen af vores Scandic Friends-partnere vil dog sende marketingkommunikation til dig baseret på det samtykke, du har givet til Scandic. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -8111,8 +8105,7 @@
"value": "Link dine " "value": "Link dine "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "scandicFriends" "value": "scandicFriends"
}, },
@@ -8121,8 +8114,7 @@
"value": " og " "value": " og "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "sasEuroBonus" "value": "sasEuroBonus"
}, },
@@ -8992,8 +8984,7 @@
"value": "Indtast venligst den kode, der er sendt til " "value": "Indtast venligst den kode, der er sendt til "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -9055,8 +9046,7 @@
"value": "Indtast venligst den kode, der er sendt til " "value": "Indtast venligst den kode, der er sendt til "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -9101,4 +9091,4 @@
"value": "Fejl: bruger ikke fundet" "value": "Fejl: bruger ikke fundet"
} }
] ]
} }

29
apps/partner-sas/i18n/dictionaries/de.json
View File

@@ -4553,8 +4553,7 @@
"value": "Bitte geben Sie den Code ein, der an " "value": "Bitte geben Sie den Code ein, der an "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -7585,14 +7584,12 @@
"value": "erhalten. Solche Angebote können auf Ihren bisherigen Interaktionen mit Scandic basieren, einschließlich Kaufhistorie, Informationen, die Sie in Ihrem Mitgliedsprofil eingegeben haben, beantworteten Kundenbefragungen, Interaktionen mit dem Kundenservice und Online-Verhalten bei der Nutzung der Website oder App von Scandic. " "value": "erhalten. Solche Angebote können auf Ihren bisherigen Interaktionen mit Scandic basieren, einschließlich Kaufhistorie, Informationen, die Sie in Ihrem Mitgliedsprofil eingegeben haben, beantworteten Kundenbefragungen, Interaktionen mit dem Kundenservice und Online-Verhalten bei der Nutzung der Website oder App von Scandic. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -7601,14 +7598,12 @@
"value": " Wenn Sie Ihre Einwilligung zu einer verbesserten Personalisierung erteilen, kann Scandic eine noch persönlichere Mitgliedschaft für Sie erstellen und Ihnen personalisierte Angebote basierend auf Ihren Interaktionen mit Scandic Friends Partnern zusenden. Scandic kann die für Ihre personalisierte Mitgliedschaft verwendeten Informationen auch mit Scandic Friends Partnern zu Analyse- und Marketingzwecken teilen, beispielsweise um Partnerschaften nachzuverfolgen, neue relevante Produkte zu entwickeln und Angebote entsprechend Ihren Interessen anzupassen. Scandic Friends Partner können ihre bestehende Kommunikation mit Ihnen auf Grundlage der personenbezogenen Daten anpassen, die wir mit ihnen geteilt haben. Keiner unserer Scandic Friends Partner wird Ihnen jedoch auf Grundlage der Einwilligung, die Sie Scandic erteilt haben, Marketingkommunikation zusenden. " "value": " Wenn Sie Ihre Einwilligung zu einer verbesserten Personalisierung erteilen, kann Scandic eine noch persönlichere Mitgliedschaft für Sie erstellen und Ihnen personalisierte Angebote basierend auf Ihren Interaktionen mit Scandic Friends Partnern zusenden. Scandic kann die für Ihre personalisierte Mitgliedschaft verwendeten Informationen auch mit Scandic Friends Partnern zu Analyse- und Marketingzwecken teilen, beispielsweise um Partnerschaften nachzuverfolgen, neue relevante Produkte zu entwickeln und Angebote entsprechend Ihren Interessen anzupassen. Scandic Friends Partner können ihre bestehende Kommunikation mit Ihnen auf Grundlage der personenbezogenen Daten anpassen, die wir mit ihnen geteilt haben. Keiner unserer Scandic Friends Partner wird Ihnen jedoch auf Grundlage der Einwilligung, die Sie Scandic erteilt haben, Marketingkommunikation zusenden. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -8107,8 +8102,7 @@
"value": "Verknüpfen Sie Ihre " "value": "Verknüpfen Sie Ihre "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "scandicFriends" "value": "scandicFriends"
}, },
@@ -8117,8 +8111,7 @@
"value": "- und " "value": "- und "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "sasEuroBonus" "value": "sasEuroBonus"
}, },
@@ -8992,8 +8985,7 @@
"value": "Bitte geben Sie den an " "value": "Bitte geben Sie den an "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -9055,8 +9047,7 @@
"value": "Bitte geben Sie den Code ein, der an " "value": "Bitte geben Sie den Code ein, der an "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -9101,4 +9092,4 @@
"value": "Fehler: Benutzer nicht gefunden" "value": "Fehler: Benutzer nicht gefunden"
} }
] ]
} }

29
apps/partner-sas/i18n/dictionaries/en.json
View File

@@ -4537,8 +4537,7 @@
"value": "Please enter the code sent to " "value": "Please enter the code sent to "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -7565,14 +7564,12 @@
"value": ". Such offers could be based on your previous interactions with Scandic including purchase history, information you have entered in your member profile, answered customer surveys, interactions with customer service, and online behavior when using Scandic’s website or app. " "value": ". Such offers could be based on your previous interactions with Scandic including purchase history, information you have entered in your member profile, answered customer surveys, interactions with customer service, and online behavior when using Scandic’s website or app. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -7581,14 +7578,12 @@
"value": " If you give your consent to improved personalization, Scandic can create an even more personalized membership for you and send you personalized offers based on your interactions with Scandic Friends partners. Scandic may also share the information used for your personalized membership with Scandic Friends partners for analytical and marketing purposes, for example to follow up on partnerships, develop new relevant products and to tailor offers depending on your interests. Scandic Friends partners may adapt their existing communications to you based on personal data we have shared with them. None of our Scandic Friends partners will however send marketing communications to you based on the consent you have given to Scandic. " "value": " If you give your consent to improved personalization, Scandic can create an even more personalized membership for you and send you personalized offers based on your interactions with Scandic Friends partners. Scandic may also share the information used for your personalized membership with Scandic Friends partners for analytical and marketing purposes, for example to follow up on partnerships, develop new relevant products and to tailor offers depending on your interests. Scandic Friends partners may adapt their existing communications to you based on personal data we have shared with them. None of our Scandic Friends partners will however send marketing communications to you based on the consent you have given to Scandic. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -8087,8 +8082,7 @@
"value": "Link your " "value": "Link your "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "scandicFriends" "value": "scandicFriends"
}, },
@@ -8097,8 +8091,7 @@
"value": " and " "value": " and "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "sasEuroBonus" "value": "sasEuroBonus"
}, },
@@ -8960,8 +8953,7 @@
"value": "Please enter the code sent to " "value": "Please enter the code sent to "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -9023,8 +9015,7 @@
"value": "Please enter the code sent to " "value": "Please enter the code sent to "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -9069,4 +9060,4 @@
"value": "Error: User not found" "value": "Error: User not found"
} }
] ]
} }

29
apps/partner-sas/i18n/dictionaries/fi.json
View File

@@ -4549,8 +4549,7 @@
"value": "Anna koodi, joka lähetettiin numeroon " "value": "Anna koodi, joka lähetettiin numeroon "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -7605,14 +7604,12 @@
"value": "tuotteista ja palveluista. Tällaiset tarjoukset voivat perustua aiempiin vuorovaikutuksiisi Scandicin kanssa, kuten ostohistoriaasi, jäsenprofiiliisi syöttämiisi tietoihin, asiakaskyselyihin annettuihin vastauksiin, yhteydenpitoon asiakaspalvelun kanssa sekä verkkokäyttäytymiseesi Scandicin nettisivulla tai sovelluksessa. " "value": "tuotteista ja palveluista. Tällaiset tarjoukset voivat perustua aiempiin vuorovaikutuksiisi Scandicin kanssa, kuten ostohistoriaasi, jäsenprofiiliisi syöttämiisi tietoihin, asiakaskyselyihin annettuihin vastauksiin, yhteydenpitoon asiakaspalvelun kanssa sekä verkkokäyttäytymiseesi Scandicin nettisivulla tai sovelluksessa. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -7621,14 +7618,12 @@
"value": " Jos annat suostumuksesi tehostettuun personointiin, Scandic voi luoda sinulle entistä yksilöllisemmän jäsenyyden ja lähettää personoituja tarjouksia myös Scandic Friends -kumppaneiden kanssa käymiesi vuorovaikutusten perusteella. Scandic voi lisäksi jakaa personointiin käytettyjä tietoja Scandic Friends -kumppaneiden kanssa analytiikka- ja markkinointitarkoituksiin, esimerkiksi kumppanuuksien seurantaan, uusien relevanttien tuotteiden kehittämiseen ja tarjousten räätälöintiin kiinnostustesi mukaan. Scandic Friends -kumppanit voivat mukauttaa sinuun kohdistuvaa omaa viestintäänsä jaettujen henkilötietojen perusteella. Yksikään Scandic Friends -kumppaneistamme ei kuitenkaan lähetä sinulle markkinointiviestintää Scandicille antamasi suostumuksen perusteella. " "value": " Jos annat suostumuksesi tehostettuun personointiin, Scandic voi luoda sinulle entistä yksilöllisemmän jäsenyyden ja lähettää personoituja tarjouksia myös Scandic Friends -kumppaneiden kanssa käymiesi vuorovaikutusten perusteella. Scandic voi lisäksi jakaa personointiin käytettyjä tietoja Scandic Friends -kumppaneiden kanssa analytiikka- ja markkinointitarkoituksiin, esimerkiksi kumppanuuksien seurantaan, uusien relevanttien tuotteiden kehittämiseen ja tarjousten räätälöintiin kiinnostustesi mukaan. Scandic Friends -kumppanit voivat mukauttaa sinuun kohdistuvaa omaa viestintäänsä jaettujen henkilötietojen perusteella. Yksikään Scandic Friends -kumppaneistamme ei kuitenkaan lähetä sinulle markkinointiviestintää Scandicille antamasi suostumuksen perusteella. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -8131,8 +8126,7 @@
"value": "Yhdistä " "value": "Yhdistä "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "scandicFriends" "value": "scandicFriends"
}, },
@@ -8141,8 +8135,7 @@
"value": "- ja " "value": "- ja "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "sasEuroBonus" "value": "sasEuroBonus"
}, },
@@ -9020,8 +9013,7 @@
"value": "Kirjoita osoitteeseen " "value": "Kirjoita osoitteeseen "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -9083,8 +9075,7 @@
"value": "Kirjoita osoitteeseen " "value": "Kirjoita osoitteeseen "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -9129,4 +9120,4 @@
"value": "Virhe: käyttäjää ei löydy" "value": "Virhe: käyttäjää ei löydy"
} }
] ]
} }

23
apps/partner-sas/i18n/dictionaries/no.json
View File

@@ -4537,8 +4537,7 @@
"value": "Vennligst skriv inn koden som ble sendt til " "value": "Vennligst skriv inn koden som ble sendt til "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -7601,14 +7600,12 @@
"value": ". Slike tilbud kan være basert på dine tidligere interaksjoner med Scandic, inkludert kjøpshistorikk, informasjon du har lagt inn i medlemsprofilen din, besvarte kundeundersøkelser, interaksjoner med kundeservice og nettadferd når du bruker Scandics nettsted eller app. " "value": ". Slike tilbud kan være basert på dine tidligere interaksjoner med Scandic, inkludert kjøpshistorikk, informasjon du har lagt inn i medlemsprofilen din, besvarte kundeundersøkelser, interaksjoner med kundeservice og nettadferd når du bruker Scandics nettsted eller app. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -7617,14 +7614,12 @@
"value": " Hvis du gir ditt samtykke til forbedret personalisering, kan Scandic skape et enda mer personlig tilpasset medlemskap for deg og sende deg personlige tilbud basert på dine interaksjoner med Scandic Friends-partnere. Scandic kan også dele informasjonen som brukes til ditt personlige medlemskap med Scandic Friends-partnere for analyse- og markedsføringsformål, for eksempel for å følge opp partnerskap, utvikle nye relevante produkter og tilpasse tilbud avhengig av dine interesser. Scandic Friends-partnere kan tilpasse sin eksisterende kommunikasjon til deg basert på personopplysninger vi har delt med dem. Ingen av våre Scandic Friends-partnere vil imidlertid sende markedsføringskommunikasjon til deg basert på samtykket du har gitt til Scandic. " "value": " Hvis du gir ditt samtykke til forbedret personalisering, kan Scandic skape et enda mer personlig tilpasset medlemskap for deg og sende deg personlige tilbud basert på dine interaksjoner med Scandic Friends-partnere. Scandic kan også dele informasjonen som brukes til ditt personlige medlemskap med Scandic Friends-partnere for analyse- og markedsføringsformål, for eksempel for å følge opp partnerskap, utvikle nye relevante produkter og tilpasse tilbud avhengig av dine interesser. Scandic Friends-partnere kan tilpasse sin eksisterende kommunikasjon til deg basert på personopplysninger vi har delt med dem. Ingen av våre Scandic Friends-partnere vil imidlertid sende markedsføringskommunikasjon til deg basert på samtykket du har gitt til Scandic. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -8123,8 +8118,7 @@
"value": "Koble sammen " "value": "Koble sammen "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "scandicFriends" "value": "scandicFriends"
}, },
@@ -8133,8 +8127,7 @@
"value": " og " "value": " og "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "sasEuroBonus" "value": "sasEuroBonus"
}, },
@@ -9129,4 +9122,4 @@
"value": "Feil: bruker ikke funnet" "value": "Feil: bruker ikke funnet"
} }
] ]
} }

29
apps/partner-sas/i18n/dictionaries/sv.json
View File

@@ -4545,8 +4545,7 @@
"value": "Vänligen ange koden som skickats till " "value": "Vänligen ange koden som skickats till "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -7585,14 +7584,12 @@
"value": ". Sådana erbjudanden kan baseras på dina tidigare interaktioner med Scandic, inklusive köphistorik, information du har angett i din medlemsprofil, besvarade kundundersökningar, interaktioner med kundservice samt onlinebeteende när du använder Scandics webbplats eller app. " "value": ". Sådana erbjudanden kan baseras på dina tidigare interaktioner med Scandic, inklusive köphistorik, information du har angett i din medlemsprofil, besvarade kundundersökningar, interaktioner med kundservice samt onlinebeteende när du använder Scandics webbplats eller app. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -7601,14 +7598,12 @@
"value": " Om du ger ditt samtycke till förbättrad personalisering kan Scandic skapa ett ännu mer personligt medlemskap för dig och skicka personliga erbjudanden baserade på dina interaktioner med Scandic Friends-partners. Scandic kan också dela den information som används för ditt personliga medlemskap med Scandic Friends-partners för analytiska och marknadsföringsändamål, till exempel för att följa upp partnerskap, utveckla nya relevanta produkter och anpassa erbjudanden utifrån dina intressen. Scandic Friends-partners kan anpassa sin befintliga kommunikation till dig baserat på personuppgifter som vi har delat med dem. Ingen av våra Scandic Friends-partners kommer dock att skicka marknadsföringskommunikation till dig baserat på det samtycke du har gett till Scandic. " "value": " Om du ger ditt samtycke till förbättrad personalisering kan Scandic skapa ett ännu mer personligt medlemskap för dig och skicka personliga erbjudanden baserade på dina interaktioner med Scandic Friends-partners. Scandic kan också dela den information som används för ditt personliga medlemskap med Scandic Friends-partners för analytiska och marknadsföringsändamål, till exempel för att följa upp partnerskap, utveckla nya relevanta produkter och anpassa erbjudanden utifrån dina intressen. Scandic Friends-partners kan anpassa sin befintliga kommunikation till dig baserat på personuppgifter som vi har delat med dem. Ingen av våra Scandic Friends-partners kommer dock att skicka marknadsföringskommunikation till dig baserat på det samtycke du har gett till Scandic. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -8107,8 +8102,7 @@
"value": "Länka dina " "value": "Länka dina "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "scandicFriends" "value": "scandicFriends"
}, },
@@ -8117,8 +8111,7 @@
"value": " och " "value": " och "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "sasEuroBonus" "value": "sasEuroBonus"
}, },
@@ -8984,8 +8977,7 @@
"value": "Vänligen ange koden som skickats till " "value": "Vänligen ange koden som skickats till "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -9047,8 +9039,7 @@
"value": "Vänligen ange den kod som skickats till " "value": "Vänligen ange den kod som skickats till "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -9093,4 +9084,4 @@
"value": "Fel: Användaren kunde inte hittas" "value": "Fel: Användaren kunde inte hittas"
} }
] ]
} }

32
apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx
View File

@@ -1,9 +1,8 @@
import { Lock } from "react-feather" import { Lock } from "react-feather"
import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membershipLevels" import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membershipLevels"
import Body from "@scandic-hotels/design-system/Body"
import Chip from "@scandic-hotels/design-system/Chip" import Chip from "@scandic-hotels/design-system/Chip"
import Title from "@scandic-hotels/design-system/Title" import { Typography } from "@scandic-hotels/design-system/Typography"
import { getMembershipLevel } from "@/lib/trpc/memoizedRequests" import { getMembershipLevel } from "@/lib/trpc/memoizedRequests"
import { serverClient } from "@/lib/trpc/server" import { serverClient } from "@/lib/trpc/server"
@@ -55,18 +54,23 @@ export default async function NextLevelRewardsBlock({
})} })}
</Chip> </Chip>
<div className={styles.textContainer}> <div className={styles.textContainer}>
<Body color="peach50" textAlign="center"> <Typography
{intl.formatMessage( variant="Body/Paragraph/mdRegular"
{ className={styles.asOur}
id: "rewards.nextLevel.asOurLevel", >
defaultMessage: "As our {level}", <p>
}, {intl.formatMessage(
{ level: nextLevelRewards.level?.name } {
)} id: "rewards.nextLevel.asOurLevel",
</Body> defaultMessage: "As our {level}",
<Title level="h4" as="h4" color="pale" textAlign="center"> },
{reward.label} { level: nextLevelRewards.level?.name }
</Title> )}
</p>
</Typography>
<Typography variant="Title/xs" className={styles.rewardTitle}>
<h4>{reward.label}</h4>
</Typography>
</div> </div>
</article> </article>
))} ))}

9
apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/next.module.css
View File

@@ -12,4 +12,13 @@
.textContainer { .textContainer {
display: grid; display: grid;
gap: var(--Space-x1); gap: var(--Space-x1);
text-align: center;
}
.asOur {
color: var(--Primary-Dark-On-Surface-Accent);
}
.rewardTitle {
color: var(--Scandic-Brand-Pale-Peach);
} }

33
apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx
View File

@@ -1,8 +1,8 @@
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Title from "@scandic-hotels/design-system/Title" import Title from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography"
import useRedeemFlow from "./useRedeemFlow" import useRedeemFlow from "./useRedeemFlow"
@@ -21,19 +21,24 @@ export function ConfirmClose({ close }: { close: () => void }) {
defaultMessage: "If you close this your benefit will be removed", defaultMessage: "If you close this your benefit will be removed",
})} })}
</Title> </Title>
<Body> <Typography variant="Body/Paragraph/mdRegular">
{intl.formatMessage({ <p>
id: "redeem.confirmClose.question", {intl.formatMessage({
defaultMessage: "Have you showed this benefit to the hotel staff?", id: "redeem.confirmClose.question",
})} defaultMessage:
</Body> "Have you showed this benefit to the hotel staff?",
<Body> })}
{intl.formatMessage({ </p>
id: "redeem.confirmClose.info", </Typography>
defaultMessage: <Typography variant="Body/Paragraph/mdRegular">
"If not, please go back and do so before you close this. Once you close this your benefit will be void and removed from My Benefits.", <p>
})} {intl.formatMessage({
</Body> id: "redeem.confirmClose.info",
defaultMessage:
"If not, please go back and do so before you close this. Once you close this your benefit will be void and removed from My Benefits.",
})}
</p>
</Typography>
</div> </div>
<footer className={styles.modalFooter}> <footer className={styles.modalFooter}>
<Button <Button

9
apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx
View File

@@ -2,12 +2,12 @@
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption" import Caption from "@scandic-hotels/design-system/Caption"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Title from "@scandic-hotels/design-system/Title" import Title from "@scandic-hotels/design-system/Title"
import { toast } from "@scandic-hotels/design-system/Toast" import { toast } from "@scandic-hotels/design-system/Toast"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { RewardIcon } from "../../RewardIcon" import { RewardIcon } from "../../RewardIcon"
@@ -25,7 +25,12 @@ export default function Campaign({ reward }: { reward: Campaign }) {
<Title level="h3" textAlign="center" textTransform="regular"> <Title level="h3" textAlign="center" textTransform="regular">
{reward.label} {reward.label}
</Title> </Title>
<Body textAlign="center">{reward.description}</Body> <Typography
variant="Body/Paragraph/mdRegular"
className={styles.rewardDescription}
>
<p>{reward.description}</p>
</Typography>
<div className={styles.rewardBadge}> <div className={styles.rewardBadge}>
<Caption textAlign="center" color="uiTextHighContrast" type="bold"> <Caption textAlign="center" color="uiTextHighContrast" type="bold">
{intl.formatMessage({ {intl.formatMessage({

9
apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Tier.tsx
View File

@@ -2,10 +2,10 @@
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml" import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Title from "@scandic-hotels/design-system/Title" import Title from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { isRestaurantOnSiteTierReward } from "@/utils/rewards" import { isRestaurantOnSiteTierReward } from "@/utils/rewards"
@@ -50,7 +50,12 @@ export default function Tier({
{reward.redeemLocation !== "Non-redeemable" && ( {reward.redeemLocation !== "Non-redeemable" && (
<> <>
{redeemStep === "initial" && ( {redeemStep === "initial" && (
<Body textAlign="center">{reward.description}</Body> <Typography
variant="Body/Paragraph/mdRegular"
className={styles.rewardDescription}
>
<p>{reward.description}</p>
</Typography>
)} )}
{redeemStep === "confirmation" && reward.redeem_description && ( {redeemStep === "confirmation" && reward.redeem_description && (

4
apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css
View File

@@ -129,3 +129,7 @@
.redeemButton { .redeemButton {
width: 100%; width: 100%;
} }
.rewardDescription {
text-align: center;
}

2
apps/scandic-web/components/Blocks/DynamicContent/index.tsx
View File

@@ -26,9 +26,9 @@ import { ProfilingConsentBanner } from "@/components/MyPages/ProfilingConsent/Ba
import { SJWidget } from "@/components/SJWidget" import { SJWidget } from "@/components/SJWidget"
import JobylonFeed from "./JobylonFeed" import JobylonFeed from "./JobylonFeed"
import { RewardNights } from "./RewardNights"
import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent" import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent"
import { RewardNights } from "./RewardNights"
export default function DynamicContent(props: DynamicContentProps) { export default function DynamicContent(props: DynamicContentProps) {
return ( return (

6
apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/CityListing/CityListingItem/index.tsx
View File

@@ -3,11 +3,11 @@
import Link from "next/link" import Link from "next/link"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import { Divider } from "@scandic-hotels/design-system/Divider" import { Divider } from "@scandic-hotels/design-system/Divider"
import ImageGallery from "@scandic-hotels/design-system/ImageGallery" import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Subtitle from "@scandic-hotels/design-system/Subtitle" import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery" import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery"
@@ -47,7 +47,9 @@ export default function CityListingItem({ city }: CityListingItemProps) {
{city.experiences?.length ? ( {city.experiences?.length ? (
<ExperienceList experiences={city.experiences} /> <ExperienceList experiences={city.experiences} />
) : null} ) : null}
<Body>{city.preamble}</Body> <Typography variant="Body/Paragraph/mdRegular">
<p>{city.preamble}</p>
</Typography>
<Divider color="Border/Divider/Subtle" /> <Divider color="Border/Divider/Subtle" />

6
apps/scandic-web/components/DatePicker/Single/Mobile.tsx
View File

@@ -4,9 +4,9 @@ import { useIntl } from "react-intl"
import { Lang } from "@scandic-hotels/common/constants/language" import { Lang } from "@scandic-hotels/common/constants/language"
import { dt } from "@scandic-hotels/common/dt" import { dt } from "@scandic-hotels/common/dt"
import Body from "@scandic-hotels/design-system/Body"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Subtitle from "@scandic-hotels/design-system/Subtitle" import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { Typography } from "@scandic-hotels/design-system/Typography"
import useLang from "@/hooks/useLang" import useLang from "@/hooks/useLang"
@@ -101,14 +101,14 @@ export default function DatePickerSingleMobile({
size="large" size="large"
theme="base" theme="base"
> >
<Body color="white" textTransform="bold" asChild> <Typography variant="Body/Paragraph/mdBold">
<span> <span>
{intl.formatMessage({ {intl.formatMessage({
id: "datePicker.selectDates", id: "datePicker.selectDates",
defaultMessage: "Select dates", defaultMessage: "Select dates",
})} })}
</span> </span>
</Body> </Typography>
</Button> </Button>
</footer> </footer>
</div> </div>

3
apps/scandic-web/components/DatePicker/Single/mobile.module.css
View File

@@ -88,6 +88,9 @@ div.months {
.footer .button { .footer .button {
width: 100%; width: 100%;
span {
color: white;
}
} }
td.day, td.day,

6
apps/scandic-web/components/DestinationFilterAndSort/Filter/Checkbox/index.tsx
View File

@@ -2,8 +2,8 @@
import { Checkbox as AriaCheckbox } from "react-aria-components" import { Checkbox as AriaCheckbox } from "react-aria-components"
import Body from "@scandic-hotels/design-system/Body"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "./checkbox.module.css" import styles from "./checkbox.module.css"
@@ -31,9 +31,9 @@ export default function Checkbox({
<span className={styles.checkbox}> <span className={styles.checkbox}>
{isSelected && <MaterialIcon icon="check" color="Icon/Inverted" />} {isSelected && <MaterialIcon icon="check" color="Icon/Inverted" />}
</span> </span>
<Body asChild> <Typography variant="Body/Paragraph/mdRegular">
<span>{name}</span> <span>{name}</span>
</Body> </Typography>
</> </>
)} )}
</AriaCheckbox> </AriaCheckbox>

5
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/addedAncillaries.module.css
View File

@@ -26,6 +26,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: var(--Space-x1); gap: var(--Space-x1);
color: var(--Base-Text-High-contrast);
} }
.ancillaryMobile { .ancillaryMobile {
@@ -106,3 +107,7 @@
display: flex; display: flex;
gap: var(--Space-x2); gap: var(--Space-x2);
} }
.ancillaryComment {
color: var(--UI-Text-Medium-contrast);
}

182
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx
View File

@@ -4,10 +4,10 @@ import { useIntl } from "react-intl"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Accordion from "@scandic-hotels/design-system/Accordion" import Accordion from "@scandic-hotels/design-system/Accordion"
import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem" import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
import Body from "@scandic-hotels/design-system/Body"
import { Divider } from "@scandic-hotels/design-system/Divider" import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Subtitle from "@scandic-hotels/design-system/Subtitle" import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast" import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"
import { getBreakfastPackagesFromAncillaryFlow } from "../../utils/hasBreakfastPackage" import { getBreakfastPackagesFromAncillaryFlow } from "../../utils/hasBreakfastPackage"
@@ -47,17 +47,18 @@ export function AddedAncillaries({
</Subtitle> </Subtitle>
{booking.ancillary?.deliveryTime && ( {booking.ancillary?.deliveryTime && (
<div className={styles.deliveryTime}> <Typography variant="Body/Paragraph/mdBold">
<Body color="baseTextHighContrast" textTransform="bold"> <div className={styles.deliveryTime}>
{intl.formatMessage({ <p>
id: "ancillaries.deliveredAt", {intl.formatMessage({
defaultMessage: "Delivered at:", id: "ancillaries.deliveredAt",
})} defaultMessage: "Delivered at:",
</Body> })}
<Body color="baseTextHighContrast" textTransform="bold"> </p>
{booking.ancillary?.deliveryTime}
</Body> <p>{booking.ancillary?.deliveryTime}</p>
</div> </div>
</Typography>
)} )}
</div> </div>
@@ -90,46 +91,55 @@ export function AddedAncillaries({
{ancillary.comment && ( {ancillary.comment && (
<> <>
<div className={styles.commentMobile}> <div className={styles.commentMobile}>
<Body textTransform="bold"> <Typography variant="Body/Paragraph/mdBold">
{intl.formatMessage({ <p>
id: "common.otherRequests", {intl.formatMessage({
defaultMessage: "Other requests", id: "common.otherRequests",
})} defaultMessage: "Other requests",
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} })}
{":"} {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
</Body> {":"}
<Body color="uiTextMediumContrast"> </p>
{ancillary.comment} </Typography>
</Body> <Typography
variant="Body/Paragraph/mdBold"
className={styles.ancillaryComment}
>
<p>{ancillary.comment}</p>
</Typography>
</div> </div>
</> </>
)} )}
<div className={styles.paymentMobileWrapper}> <div className={styles.paymentMobileWrapper}>
<div className={styles.paymentMobile}> <div className={styles.paymentMobile}>
<Body> <Typography variant="Body/Paragraph/mdRegular">
{intl.formatMessage({ <p>
id: "common.total", {intl.formatMessage({
defaultMessage: "Total", id: "common.total",
})} defaultMessage: "Total",
</Body> })}
<Body textTransform="bold"> </p>
{ancillary.currency.toLowerCase() === "points" </Typography>
? intl.formatMessage( <Typography variant="Body/Paragraph/mdBold">
{ <p>
id: "common.numberOfPoints", {ancillary.currency.toLowerCase() === "points"
defaultMessage: ? intl.formatMessage(
"{points, plural, one {# point} other {# points}}", {
}, id: "common.numberOfPoints",
{ defaultMessage:
points: ancillary.totalPrice, "{points, plural, one {# point} other {# points}}",
} },
) {
: formatPrice( points: ancillary.totalPrice,
intl, }
ancillary.totalPrice, )
ancillary.currency : formatPrice(
)} intl,
</Body> ancillary.totalPrice,
ancillary.currency
)}
</p>
</Typography>
</div> </div>
</div> </div>
</div> </div>
@@ -162,33 +172,39 @@ export function AddedAncillaries({
icon="check_circle" icon="check_circle"
color="Icon/Feedback/Success" color="Icon/Feedback/Success"
/> />
<Body textTransform="bold">{ancillaryTitle}</Body> <Typography variant="Body/Paragraph/mdBold">
<p>{ancillaryTitle}</p>
</Typography>
</div> </div>
<div className={styles.payment}> <div className={styles.payment}>
<Body> <Typography variant="Body/Paragraph/mdRegular">
{intl.formatMessage({ <p>
id: "common.total", {intl.formatMessage({
defaultMessage: "Total", id: "common.total",
})} defaultMessage: "Total",
</Body> })}
<Body textTransform="bold"> </p>
{ancillary.currency.toLowerCase() === "points" </Typography>
? intl.formatMessage( <Typography variant="Body/Paragraph/mdBold">
{ <p>
id: "common.numberOfPoints", {ancillary.currency.toLowerCase() === "points"
defaultMessage: ? intl.formatMessage(
"{points, plural, one {# point} other {# points}}", {
}, id: "common.numberOfPoints",
{ defaultMessage:
points: ancillary.totalPrice, "{points, plural, one {# point} other {# points}}",
} },
) {
: formatPrice( points: ancillary.totalPrice,
intl, }
ancillary.totalPrice, )
ancillary.currency : formatPrice(
)} intl,
</Body> ancillary.totalPrice,
ancillary.currency
)}
</p>
</Typography>
</div> </div>
</div> </div>
@@ -198,15 +214,19 @@ export function AddedAncillaries({
<div className={styles.comment}> <div className={styles.comment}>
{ancillary.comment && ( {ancillary.comment && (
<> <>
<Body textTransform="bold"> <Typography variant="Body/Paragraph/mdRegular">
{intl.formatMessage({ <p>
id: "common.otherRequests", {intl.formatMessage({
defaultMessage: "Other requests", id: "common.otherRequests",
})} defaultMessage: "Other requests",
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} })}
{":"} {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
</Body> {":"}
<Body>{ancillary.comment}</Body> </p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>{ancillary.comment}</p>
</Typography>
</> </>
)} )}
</div> </div>

18
apps/scandic-web/components/MyPages/Profile/MembershipCards/index.tsx
View File

@@ -1,4 +1,3 @@
import Body from "@scandic-hotels/design-system/Body"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Link from "@scandic-hotels/design-system/OldDSLink" import Link from "@scandic-hotels/design-system/OldDSLink"
import { Typography } from "@scandic-hotels/design-system/Typography" import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -86,12 +85,17 @@ export default async function MembershipCardSlot() {
))} ))}
<Link href="#" variant="icon"> <Link href="#" variant="icon">
<MaterialIcon icon="add_circle" color="CurrentColor" /> <MaterialIcon icon="add_circle" color="CurrentColor" />
<Body color="burgundy" textTransform="underlined"> <Typography
{intl.formatMessage({ variant="Body/Paragraph/mdRegular"
id: "myPages.addNewCard", className={styles.addNewCardText}
defaultMessage: "Add new card", >
})} <p>
</Body> {intl.formatMessage({
id: "myPages.addNewCard",
defaultMessage: "Add new card",
})}
</p>
</Typography>
</Link> </Link>
</section> </section>
) )

5
apps/scandic-web/components/MyPages/Profile/MembershipCards/membershipCards.module.css
View File

@@ -20,3 +20,8 @@
.subTitle { .subTitle {
grid-column: span 2; grid-column: span 2;
} }
.addNewCardText {
text-decoration: underline;
color: var(--Scandic-Brand-Burgundy);
}

20
apps/scandic-web/components/SasTierComparison/index.tsx
View File

@@ -1,7 +1,6 @@
"use client" "use client"
import Image from "next/image" import Image from "next/image"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption" import Caption from "@scandic-hotels/design-system/Caption"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml" import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
@@ -9,6 +8,7 @@ import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton
import Link from "@scandic-hotels/design-system/OldDSLink" import Link from "@scandic-hotels/design-system/OldDSLink"
import Subtitle from "@scandic-hotels/design-system/Subtitle" import Subtitle from "@scandic-hotels/design-system/Subtitle"
import Title from "@scandic-hotels/design-system/Title" import Title from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { Section } from "@/components/Section" import { Section } from "@/components/Section"
@@ -94,13 +94,12 @@ function TierDetails({
<details className={styles.tierDetails} name="sas-scandic-tier-match"> <details className={styles.tierDetails} name="sas-scandic-tier-match">
<summary className={styles.tierSummary}> <summary className={styles.tierSummary}>
<div className={styles.tierTitles}> <div className={styles.tierTitles}>
<Body <Typography
textAlign="center" variant="Body/Paragraph/mdBold"
textTransform="bold"
className={styles.tierTitle} className={styles.tierTitle}
> >
{tierMatch.scandic_friends_tier_name} <p>{tierMatch.scandic_friends_tier_name}</p>
</Body> </Typography>
<div className={styles.comparisonIcon}> <div className={styles.comparisonIcon}>
<MaterialIcon icon="compare_arrows" size={16} /> <MaterialIcon icon="compare_arrows" size={16} />
</div> </div>
@@ -111,13 +110,12 @@ function TierDetails({
position: "relative", position: "relative",
}} }}
> >
<Body <Typography
textAlign="center" variant="Body/Paragraph/mdBold"
textTransform="bold"
className={styles.tierTitle} className={styles.tierTitle}
> >
{tierMatch.sas_eb_tier_name} <p>{tierMatch.sas_eb_tier_name}</p>
</Body> </Typography>
<div className={styles.iconWrapper}> <div className={styles.iconWrapper}>
<MaterialIcon <MaterialIcon
icon="keyboard_arrow_down" icon="keyboard_arrow_down"

1
apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css
View File

@@ -119,6 +119,7 @@
.tierTitle { .tierTitle {
flex-grow: 1; flex-grow: 1;
z-index: 1; z-index: 1;
text-align: center;
} }
.comparisonIcon { .comparisonIcon {

4
apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css
View File

@@ -9,3 +9,7 @@
align-items: center; align-items: center;
gap: var(--Space-x1); gap: var(--Space-x1);
} }
.displayText {
color: var(--Scandic-Brand-Burgundy);
}

11
apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
View File

@@ -1,10 +1,10 @@
import Body from "@scandic-hotels/design-system/Body"
import Footnote from "@scandic-hotels/design-system/Footnote" import Footnote from "@scandic-hotels/design-system/Footnote"
import { import {
MaterialIcon, MaterialIcon,
type MaterialIconSetIconProps, type MaterialIconSetIconProps,
} from "@scandic-hotels/design-system/Icons/MaterialIcon" } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Link from "@scandic-hotels/design-system/OldDSLink" import Link from "@scandic-hotels/design-system/OldDSLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { getValueFromContactConfig } from "@scandic-hotels/trpc/utils/contactConfig" import { getValueFromContactConfig } from "@scandic-hotels/trpc/utils/contactConfig"
import { serverClient } from "@/lib/trpc/server" import { serverClient } from "@/lib/trpc/server"
@@ -46,9 +46,12 @@ export default async function ContactRow({ contact }: ContactRowProps) {
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>
<Body color="burgundy" textTransform="bold"> <Typography
{contact.display_text} variant="Body/Paragraph/mdBold"
</Body> className={styles.displayText}
>
<p>{contact.display_text}</p>
</Typography>
<Link <Link
className={styles.link} className={styles.link}
href={openableLink} href={openableLink}

9
apps/scandic-web/components/TempDesignSystem/AncillaryCard/ancillaryCard.module.css
View File

@@ -18,6 +18,7 @@
.price { .price {
display: flex; display: flex;
gap: var(--Space-x1); gap: var(--Space-x1);
color: var(--UI-Text-High-contrast);
} }
.contentContainer { .contentContainer {
@@ -26,3 +27,11 @@
flex-direction: column; flex-direction: column;
gap: var(--Space-x1); gap: var(--Space-x1);
} }
.ancillaryTitle {
color: var(--UI-Text-High-contrast);
}
.ancillaryPoints {
color: var(--UI-Text-High-contrast);
text-align: right;
}

58
apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx
View File

@@ -1,10 +1,10 @@
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption" import Caption from "@scandic-hotels/design-system/Caption"
import { Divider } from "@scandic-hotels/design-system/Divider" import { Divider } from "@scandic-hotels/design-system/Divider"
import Image from "@scandic-hotels/design-system/Image" import Image from "@scandic-hotels/design-system/Image"
import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "./ancillaryCard.module.css" import styles from "./ancillaryCard.module.css"
@@ -30,37 +30,47 @@ export function AncillaryCard({ ancillary }: AncillaryCardProps) {
</div> </div>
<div className={styles.contentContainer}> <div className={styles.contentContainer}>
<div> <div>
<Body textTransform="bold" color="uiTextHighContrast"> <Typography
{ancillary.title} variant="Body/Paragraph/mdBold"
</Body> className={styles.ancillaryTitle}
>
<p>{ancillary.title}</p>
</Typography>
<div className={styles.price}> <div className={styles.price}>
<Body color="uiTextHighContrast"> <Typography>
{ancillary.price.included <p>
? intl.formatMessage({ {ancillary.price.included
id: "common.included", ? intl.formatMessage({
defaultMessage: "Included", id: "common.included",
}) defaultMessage: "Included",
: priceMsg} })
</Body> : priceMsg}
</p>
</Typography>
{ancillary.points && ( {ancillary.points && (
<> <>
<div> <div>
<Divider variant="vertical" /> <Divider variant="vertical" />
</div> </div>
<Body textAlign="right" color="uiTextHighContrast"> <Typography
{intl.formatMessage( variant="Body/Paragraph/mdRegular"
{ className={styles.ancillaryPoints}
id: "common.numberOfPoints", >
defaultMessage: <p>
"{points, plural, one {# point} other {# points}}", {intl.formatMessage(
}, {
{ id: "common.numberOfPoints",
points: ancillary.points, defaultMessage:
} "{points, plural, one {# point} other {# points}}",
)} },
</Body> {
points: ancillary.points,
}
)}
</p>
</Typography>
</> </>
)} )}
</div> </div>

30
apps/scandic-web/components/TempDesignSystem/Card/card.module.css
View File

@@ -56,34 +56,60 @@
.themeOne { .themeOne {
background: var(--Primary-Light-Surface-Normal); background: var(--Primary-Light-Surface-Normal);
.bodyText {
color: var(--Primary-Light-On-Surface-Text);
}
} }
.themeTwo { .themeTwo {
background: var(--Secondary-Light-Surface-Normal); background: var(--Secondary-Light-Surface-Normal);
.bodyText {
color: var(--Secondary-Light-On-Surface-Text);
}
} }
.themeThree { .themeThree {
background: var(--Tertiary-Light-Surface-Normal); background: var(--Tertiary-Light-Surface-Normal);
.bodyText {
color: var(--Tertiary-Light-On-Surface-Text);
}
} }
.themePrimaryDark { .themePrimaryDark {
background: var(--Primary-Dark-Surface-Normal); background: var(--Primary-Dark-Surface-Normal);
.bodyText {
color: var(--Primary-Dark-On-Surface-Text);
}
} }
.themePrimaryDim { .themePrimaryDim {
background: var(--Primary-Dim-Surface-Normal); background: var(--Primary-Dim-Surface-Normal);
.bodyText {
color: var(--Primary-Dim-On-Surface-Text);
}
} }
.themePrimaryInverted { .themePrimaryInverted {
background: var(--Base-Surface-Primary-light-Normal); background: var(--Base-Surface-Primary-light-Normal);
.bodyText {
color: var(--Primary-Light-On-Surface-Text);
}
} }
.themePrimaryStrong { .themePrimaryStrong {
background: var(--Primary-Strong-Surface-Normal); background: var(--Primary-Strong-Surface-Normal);
.bodyText {
color: var(--Primary-Strong-On-Surface-Text);
}
} }
.themeImage .content { .themeImage {
position: absolute; .bodyText {
color: var(--Base-Text-Inverted);
}
.content {
position: absolute;
}
} }
.scriptContainer { .scriptContainer {

27
apps/scandic-web/components/TempDesignSystem/Card/index.tsx
View File

@@ -1,19 +1,14 @@
import { cx } from "class-variance-authority" import { cx } from "class-variance-authority"
import Link from "next/link" import Link from "next/link"
import Body from "@scandic-hotels/design-system/Body"
import Image from "@scandic-hotels/design-system/Image" import Image from "@scandic-hotels/design-system/Image"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Title from "@scandic-hotels/design-system/Title" import Title from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import { import { getButtonTheme, getScriptFontColor, getTitleFontColor } from "./utils"
getBodyFontColor,
getButtonTheme,
getScriptFontColor,
getTitleFontColor,
} from "./utils"
import { cardVariants } from "./variants" import { cardVariants } from "./variants"
import styles from "./card.module.css" import styles from "./card.module.css"
@@ -37,7 +32,6 @@ export default function Card({
const buttonTheme = getButtonTheme(theme) const buttonTheme = getButtonTheme(theme)
const titleFontColor = getTitleFontColor(theme) const titleFontColor = getTitleFontColor(theme)
const scriptFontColor = getScriptFontColor(theme) const scriptFontColor = getScriptFontColor(theme)
const bodyFontColor = getBodyFontColor(theme)
return ( return (
<article <article
@@ -65,7 +59,7 @@ export default function Card({
</div> </div>
)} )}
<div className={styles.content}> <div className={styles.content}>
{scriptedTopTitle ? ( {scriptedTopTitle && (
<section className={styles.scriptContainer}> <section className={styles.scriptContainer}>
<BiroScript <BiroScript
className={styles.scriptedTitle} className={styles.scriptedTitle}
@@ -76,7 +70,7 @@ export default function Card({
{scriptedTopTitle} {scriptedTopTitle}
</BiroScript> </BiroScript>
</section> </section>
) : null} )}
<Title <Title
as="h3" as="h3"
level="h3" level="h3"
@@ -86,11 +80,14 @@ export default function Card({
> >
{heading} {heading}
</Title> </Title>
{bodyText ? ( {bodyText && (
<Body textAlign="center" color={bodyFontColor}> <Typography
{bodyText} variant="Body/Paragraph/mdRegular"
</Body> className={styles.bodyText}
) : null} >
<p>{bodyText}</p>
</Typography>
)}
<div className={styles.buttonContainer}> <div className={styles.buttonContainer}>
{primaryButton ? ( {primaryButton ? (
<Button <Button

23
apps/scandic-web/components/TempDesignSystem/Card/utils.ts
View File

@@ -1,4 +1,3 @@
import type Body from "@scandic-hotels/design-system/Body"
import type { ButtonProps } from "@scandic-hotels/design-system/OldDSButton" import type { ButtonProps } from "@scandic-hotels/design-system/OldDSButton"
import type Title from "@scandic-hotels/design-system/Title" import type Title from "@scandic-hotels/design-system/Title"
import type { VariantProps } from "class-variance-authority" import type { VariantProps } from "class-variance-authority"
@@ -52,28 +51,6 @@ export function getScriptFontColor(
} }
} }
type BodyColor = ComponentProps<typeof Body>["color"]
export function getBodyFontColor(theme: CardProps["theme"]): BodyColor {
switch (theme) {
case "one":
return "primaryLight"
case "two":
return "secondaryLight"
case "three":
return "tertiaryLight"
case "primaryDark":
return "primaryDark"
case "primaryDim":
return "primaryDim"
case "primaryInverted":
return "primaryLight"
case "primaryStrong":
return "primaryStrong"
case "image":
return "baseText"
}
}
export function getButtonTheme( export function getButtonTheme(
theme: CardProps["theme"] theme: CardProps["theme"]
): ButtonProps["theme"] { ): ButtonProps["theme"] {

11
apps/scandic-web/components/TempDesignSystem/LoyaltyCard/index.tsx
View File

@@ -1,8 +1,8 @@
import Body from "@scandic-hotels/design-system/Body"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Image from "@scandic-hotels/design-system/Image" import Image from "@scandic-hotels/design-system/Image"
import Link from "@scandic-hotels/design-system/OldDSLink" import Link from "@scandic-hotels/design-system/OldDSLink"
import Title from "@scandic-hotels/design-system/Title" import Title from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { loyaltyCardVariants } from "./variants" import { loyaltyCardVariants } from "./variants"
@@ -39,7 +39,14 @@ export default function LoyaltyCard({
<Title as="h4" level="h3" textAlign="center"> <Title as="h4" level="h3" textAlign="center">
{heading} {heading}
</Title> </Title>
{bodyText ? <Body textAlign="center">{bodyText}</Body> : null} {!!bodyText && (
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.bodyText}
>
<p>{bodyText}</p>
</Typography>
)}
<div className={styles.buttonContainer}> <div className={styles.buttonContainer}>
{link ? ( {link ? (
<Link <Link

3
apps/scandic-web/components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css
View File

@@ -36,3 +36,6 @@
.icon { .icon {
align-self: center; align-self: center;
} }
.bodyText {
text-align: center;
}

7
apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx
View File

@@ -1,7 +1,7 @@
import Body from "@scandic-hotels/design-system/Body"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import Image from "@scandic-hotels/design-system/Image" import Image from "@scandic-hotels/design-system/Image"
import Subtitle from "@scandic-hotels/design-system/Subtitle" import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { Typography } from "@scandic-hotels/design-system/Typography"
import TeaserCardSidepeek from "./Sidepeek" import TeaserCardSidepeek from "./Sidepeek"
import { teaserCardVariants } from "./variants" import { teaserCardVariants } from "./variants"
@@ -42,7 +42,10 @@ export default function TeaserCard({
<Subtitle textAlign="left" type="two" color="black"> <Subtitle textAlign="left" type="two" color="black">
{title} {title}
</Subtitle> </Subtitle>
<Body color="black">{description}</Body> <Typography variant="Body/Paragraph/mdRegular">
<p>{description}</p>
</Typography>
{sidePeekButton && sidePeekContent ? ( {sidePeekButton && sidePeekContent ? (
<TeaserCardSidepeek <TeaserCardSidepeek
button={sidePeekButton} button={sidePeekButton}

2
apps/scandic-web/components/TempDesignSystem/TeaserCard/teaserCard.module.css
View File

@@ -35,6 +35,8 @@
padding: var(--Space-x2) var(--Space-x3); padding: var(--Space-x2) var(--Space-x3);
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
flex-grow: 1; flex-grow: 1;
color: var(--Main-Grey-100);
} }
.description { .description {

32
apps/scandic-web/i18n/dictionaries/da.json
View File

@@ -3110,8 +3110,7 @@
"value": "Vi er stadig ved at bekræfte din booking. Det tager normalt kun få minutter, og vi undskylder ventetiden. Tjek venligst din indbakke for en bookingbekræftelse, og hvis du stadig ikke har modtaget den sidst på dagen, bedes du kontakte vores kundesupport på " "value": "Vi er stadig ved at bekræfte din booking. Det tager normalt kun få minutter, og vi undskylder ventetiden. Tjek venligst din indbakke for en bookingbekræftelse, og hvis du stadig ikke har modtaget den sidst på dagen, bedes du kontakte vores kundesupport på "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "link" "value": "link"
}, },
@@ -4533,8 +4532,7 @@
"value": "Indtast venligst koden sendt til " "value": "Indtast venligst koden sendt til "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -7589,14 +7587,12 @@
"value": ". Sådanne tilbud kan være baseret på dine tidligere interaktioner med Scandic, herunder købshistorik, oplysninger du har indtastet i din medlemsprofil, besvarede kundeundersøgelser, interaktioner med kundeservice og online brugeradfærd, når du benytter Scandics hjemmeside eller app. " "value": ". Sådanne tilbud kan være baseret på dine tidligere interaktioner med Scandic, herunder købshistorik, oplysninger du har indtastet i din medlemsprofil, besvarede kundeundersøgelser, interaktioner med kundeservice og online brugeradfærd, når du benytter Scandics hjemmeside eller app. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -7605,14 +7601,12 @@
"value": " Hvis du giver dit samtykke til forbedret personalisering, kan Scandic skabe et endnu mere personligt medlemskab til dig og sende dig personlige tilbud baseret på dine interaktioner med Scandic Friends-partnere. Scandic kan også dele de oplysninger, der bruges til dit personlige medlemskab, med Scandic Friends-partnere til analytiske og marketingformål, for eksempel for at følge op på partnerskaber, udvikle nye relevante produkter og skræddersy tilbud afhængigt af dine interesser. Scandic Friends-partnere kan tilpasse deres eksisterende kommunikation til dig baseret på persondata, vi har delt med dem. Ingen af vores Scandic Friends-partnere vil dog sende marketingkommunikation til dig baseret på det samtykke, du har givet til Scandic. " "value": " Hvis du giver dit samtykke til forbedret personalisering, kan Scandic skabe et endnu mere personligt medlemskab til dig og sende dig personlige tilbud baseret på dine interaktioner med Scandic Friends-partnere. Scandic kan også dele de oplysninger, der bruges til dit personlige medlemskab, med Scandic Friends-partnere til analytiske og marketingformål, for eksempel for at følge op på partnerskaber, udvikle nye relevante produkter og skræddersy tilbud afhængigt af dine interesser. Scandic Friends-partnere kan tilpasse deres eksisterende kommunikation til dig baseret på persondata, vi har delt med dem. Ingen af vores Scandic Friends-partnere vil dog sende marketingkommunikation til dig baseret på det samtykke, du har givet til Scandic. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -8111,8 +8105,7 @@
"value": "Link dine " "value": "Link dine "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "scandicFriends" "value": "scandicFriends"
}, },
@@ -8121,8 +8114,7 @@
"value": " og " "value": " og "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "sasEuroBonus" "value": "sasEuroBonus"
}, },
@@ -8992,8 +8984,7 @@
"value": "Indtast venligst den kode, der er sendt til " "value": "Indtast venligst den kode, der er sendt til "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -9055,8 +9046,7 @@
"value": "Indtast venligst den kode, der er sendt til " "value": "Indtast venligst den kode, der er sendt til "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -9101,4 +9091,4 @@
"value": "Fejl: bruger ikke fundet" "value": "Fejl: bruger ikke fundet"
} }
] ]
} }

29
apps/scandic-web/i18n/dictionaries/de.json
View File

@@ -4553,8 +4553,7 @@
"value": "Bitte geben Sie den Code ein, der an " "value": "Bitte geben Sie den Code ein, der an "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -7585,14 +7584,12 @@
"value": "erhalten. Solche Angebote können auf Ihren bisherigen Interaktionen mit Scandic basieren, einschließlich Kaufhistorie, Informationen, die Sie in Ihrem Mitgliedsprofil eingegeben haben, beantworteten Kundenbefragungen, Interaktionen mit dem Kundenservice und Online-Verhalten bei der Nutzung der Website oder App von Scandic. " "value": "erhalten. Solche Angebote können auf Ihren bisherigen Interaktionen mit Scandic basieren, einschließlich Kaufhistorie, Informationen, die Sie in Ihrem Mitgliedsprofil eingegeben haben, beantworteten Kundenbefragungen, Interaktionen mit dem Kundenservice und Online-Verhalten bei der Nutzung der Website oder App von Scandic. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -7601,14 +7598,12 @@
"value": " Wenn Sie Ihre Einwilligung zu einer verbesserten Personalisierung erteilen, kann Scandic eine noch persönlichere Mitgliedschaft für Sie erstellen und Ihnen personalisierte Angebote basierend auf Ihren Interaktionen mit Scandic Friends Partnern zusenden. Scandic kann die für Ihre personalisierte Mitgliedschaft verwendeten Informationen auch mit Scandic Friends Partnern zu Analyse- und Marketingzwecken teilen, beispielsweise um Partnerschaften nachzuverfolgen, neue relevante Produkte zu entwickeln und Angebote entsprechend Ihren Interessen anzupassen. Scandic Friends Partner können ihre bestehende Kommunikation mit Ihnen auf Grundlage der personenbezogenen Daten anpassen, die wir mit ihnen geteilt haben. Keiner unserer Scandic Friends Partner wird Ihnen jedoch auf Grundlage der Einwilligung, die Sie Scandic erteilt haben, Marketingkommunikation zusenden. " "value": " Wenn Sie Ihre Einwilligung zu einer verbesserten Personalisierung erteilen, kann Scandic eine noch persönlichere Mitgliedschaft für Sie erstellen und Ihnen personalisierte Angebote basierend auf Ihren Interaktionen mit Scandic Friends Partnern zusenden. Scandic kann die für Ihre personalisierte Mitgliedschaft verwendeten Informationen auch mit Scandic Friends Partnern zu Analyse- und Marketingzwecken teilen, beispielsweise um Partnerschaften nachzuverfolgen, neue relevante Produkte zu entwickeln und Angebote entsprechend Ihren Interessen anzupassen. Scandic Friends Partner können ihre bestehende Kommunikation mit Ihnen auf Grundlage der personenbezogenen Daten anpassen, die wir mit ihnen geteilt haben. Keiner unserer Scandic Friends Partner wird Ihnen jedoch auf Grundlage der Einwilligung, die Sie Scandic erteilt haben, Marketingkommunikation zusenden. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -8107,8 +8102,7 @@
"value": "Verknüpfen Sie Ihre " "value": "Verknüpfen Sie Ihre "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "scandicFriends" "value": "scandicFriends"
}, },
@@ -8117,8 +8111,7 @@
"value": "- und " "value": "- und "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "sasEuroBonus" "value": "sasEuroBonus"
}, },
@@ -8992,8 +8985,7 @@
"value": "Bitte geben Sie den an " "value": "Bitte geben Sie den an "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -9055,8 +9047,7 @@
"value": "Bitte geben Sie den Code ein, der an " "value": "Bitte geben Sie den Code ein, der an "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -9101,4 +9092,4 @@
"value": "Fehler: Benutzer nicht gefunden" "value": "Fehler: Benutzer nicht gefunden"
} }
] ]
} }

29
apps/scandic-web/i18n/dictionaries/en.json
View File

@@ -4537,8 +4537,7 @@
"value": "Please enter the code sent to " "value": "Please enter the code sent to "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -7565,14 +7564,12 @@
"value": ". Such offers could be based on your previous interactions with Scandic including purchase history, information you have entered in your member profile, answered customer surveys, interactions with customer service, and online behavior when using Scandic’s website or app. " "value": ". Such offers could be based on your previous interactions with Scandic including purchase history, information you have entered in your member profile, answered customer surveys, interactions with customer service, and online behavior when using Scandic’s website or app. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -7581,14 +7578,12 @@
"value": " If you give your consent to improved personalization, Scandic can create an even more personalized membership for you and send you personalized offers based on your interactions with Scandic Friends partners. Scandic may also share the information used for your personalized membership with Scandic Friends partners for analytical and marketing purposes, for example to follow up on partnerships, develop new relevant products and to tailor offers depending on your interests. Scandic Friends partners may adapt their existing communications to you based on personal data we have shared with them. None of our Scandic Friends partners will however send marketing communications to you based on the consent you have given to Scandic. " "value": " If you give your consent to improved personalization, Scandic can create an even more personalized membership for you and send you personalized offers based on your interactions with Scandic Friends partners. Scandic may also share the information used for your personalized membership with Scandic Friends partners for analytical and marketing purposes, for example to follow up on partnerships, develop new relevant products and to tailor offers depending on your interests. Scandic Friends partners may adapt their existing communications to you based on personal data we have shared with them. None of our Scandic Friends partners will however send marketing communications to you based on the consent you have given to Scandic. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -8087,8 +8082,7 @@
"value": "Link your " "value": "Link your "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "scandicFriends" "value": "scandicFriends"
}, },
@@ -8097,8 +8091,7 @@
"value": " and " "value": " and "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "sasEuroBonus" "value": "sasEuroBonus"
}, },
@@ -8960,8 +8953,7 @@
"value": "Please enter the code sent to " "value": "Please enter the code sent to "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -9023,8 +9015,7 @@
"value": "Please enter the code sent to " "value": "Please enter the code sent to "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -9069,4 +9060,4 @@
"value": "Error: User not found" "value": "Error: User not found"
} }
] ]
} }

29
apps/scandic-web/i18n/dictionaries/fi.json
View File

@@ -4549,8 +4549,7 @@
"value": "Anna koodi, joka lähetettiin numeroon " "value": "Anna koodi, joka lähetettiin numeroon "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -7605,14 +7604,12 @@
"value": "tuotteista ja palveluista. Tällaiset tarjoukset voivat perustua aiempiin vuorovaikutuksiisi Scandicin kanssa, kuten ostohistoriaasi, jäsenprofiiliisi syöttämiisi tietoihin, asiakaskyselyihin annettuihin vastauksiin, yhteydenpitoon asiakaspalvelun kanssa sekä verkkokäyttäytymiseesi Scandicin nettisivulla tai sovelluksessa. " "value": "tuotteista ja palveluista. Tällaiset tarjoukset voivat perustua aiempiin vuorovaikutuksiisi Scandicin kanssa, kuten ostohistoriaasi, jäsenprofiiliisi syöttämiisi tietoihin, asiakaskyselyihin annettuihin vastauksiin, yhteydenpitoon asiakaspalvelun kanssa sekä verkkokäyttäytymiseesi Scandicin nettisivulla tai sovelluksessa. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -7621,14 +7618,12 @@
"value": " Jos annat suostumuksesi tehostettuun personointiin, Scandic voi luoda sinulle entistä yksilöllisemmän jäsenyyden ja lähettää personoituja tarjouksia myös Scandic Friends -kumppaneiden kanssa käymiesi vuorovaikutusten perusteella. Scandic voi lisäksi jakaa personointiin käytettyjä tietoja Scandic Friends -kumppaneiden kanssa analytiikka- ja markkinointitarkoituksiin, esimerkiksi kumppanuuksien seurantaan, uusien relevanttien tuotteiden kehittämiseen ja tarjousten räätälöintiin kiinnostustesi mukaan. Scandic Friends -kumppanit voivat mukauttaa sinuun kohdistuvaa omaa viestintäänsä jaettujen henkilötietojen perusteella. Yksikään Scandic Friends -kumppaneistamme ei kuitenkaan lähetä sinulle markkinointiviestintää Scandicille antamasi suostumuksen perusteella. " "value": " Jos annat suostumuksesi tehostettuun personointiin, Scandic voi luoda sinulle entistä yksilöllisemmän jäsenyyden ja lähettää personoituja tarjouksia myös Scandic Friends -kumppaneiden kanssa käymiesi vuorovaikutusten perusteella. Scandic voi lisäksi jakaa personointiin käytettyjä tietoja Scandic Friends -kumppaneiden kanssa analytiikka- ja markkinointitarkoituksiin, esimerkiksi kumppanuuksien seurantaan, uusien relevanttien tuotteiden kehittämiseen ja tarjousten räätälöintiin kiinnostustesi mukaan. Scandic Friends -kumppanit voivat mukauttaa sinuun kohdistuvaa omaa viestintäänsä jaettujen henkilötietojen perusteella. Yksikään Scandic Friends -kumppaneistamme ei kuitenkaan lähetä sinulle markkinointiviestintää Scandicille antamasi suostumuksen perusteella. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -8131,8 +8126,7 @@
"value": "Yhdistä " "value": "Yhdistä "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "scandicFriends" "value": "scandicFriends"
}, },
@@ -8141,8 +8135,7 @@
"value": "- ja " "value": "- ja "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "sasEuroBonus" "value": "sasEuroBonus"
}, },
@@ -9020,8 +9013,7 @@
"value": "Kirjoita osoitteeseen " "value": "Kirjoita osoitteeseen "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -9083,8 +9075,7 @@
"value": "Kirjoita osoitteeseen " "value": "Kirjoita osoitteeseen "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -9129,4 +9120,4 @@
"value": "Virhe: käyttäjää ei löydy" "value": "Virhe: käyttäjää ei löydy"
} }
] ]
} }

23
apps/scandic-web/i18n/dictionaries/no.json
View File

@@ -4537,8 +4537,7 @@
"value": "Vennligst skriv inn koden som ble sendt til " "value": "Vennligst skriv inn koden som ble sendt til "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -7601,14 +7600,12 @@
"value": ". Slike tilbud kan være basert på dine tidligere interaksjoner med Scandic, inkludert kjøpshistorikk, informasjon du har lagt inn i medlemsprofilen din, besvarte kundeundersøkelser, interaksjoner med kundeservice og nettadferd når du bruker Scandics nettsted eller app. " "value": ". Slike tilbud kan være basert på dine tidligere interaksjoner med Scandic, inkludert kjøpshistorikk, informasjon du har lagt inn i medlemsprofilen din, besvarte kundeundersøkelser, interaksjoner med kundeservice og nettadferd når du bruker Scandics nettsted eller app. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -7617,14 +7614,12 @@
"value": " Hvis du gir ditt samtykke til forbedret personalisering, kan Scandic skape et enda mer personlig tilpasset medlemskap for deg og sende deg personlige tilbud basert på dine interaksjoner med Scandic Friends-partnere. Scandic kan også dele informasjonen som brukes til ditt personlige medlemskap med Scandic Friends-partnere for analyse- og markedsføringsformål, for eksempel for å følge opp partnerskap, utvikle nye relevante produkter og tilpasse tilbud avhengig av dine interesser. Scandic Friends-partnere kan tilpasse sin eksisterende kommunikasjon til deg basert på personopplysninger vi har delt med dem. Ingen av våre Scandic Friends-partnere vil imidlertid sende markedsføringskommunikasjon til deg basert på samtykket du har gitt til Scandic. " "value": " Hvis du gir ditt samtykke til forbedret personalisering, kan Scandic skape et enda mer personlig tilpasset medlemskap for deg og sende deg personlige tilbud basert på dine interaksjoner med Scandic Friends-partnere. Scandic kan også dele informasjonen som brukes til ditt personlige medlemskap med Scandic Friends-partnere for analyse- og markedsføringsformål, for eksempel for å følge opp partnerskap, utvikle nye relevante produkter og tilpasse tilbud avhengig av dine interesser. Scandic Friends-partnere kan tilpasse sin eksisterende kommunikasjon til deg basert på personopplysninger vi har delt med dem. Ingen av våre Scandic Friends-partnere vil imidlertid sende markedsføringskommunikasjon til deg basert på samtykket du har gitt til Scandic. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -8123,8 +8118,7 @@
"value": "Koble sammen " "value": "Koble sammen "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "scandicFriends" "value": "scandicFriends"
}, },
@@ -8133,8 +8127,7 @@
"value": " og " "value": " og "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "sasEuroBonus" "value": "sasEuroBonus"
}, },
@@ -9129,4 +9122,4 @@
"value": "Feil: bruker ikke funnet" "value": "Feil: bruker ikke funnet"
} }
] ]
} }

29
apps/scandic-web/i18n/dictionaries/sv.json
View File

@@ -4545,8 +4545,7 @@
"value": "Vänligen ange koden som skickats till " "value": "Vänligen ange koden som skickats till "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -7585,14 +7584,12 @@
"value": ". Sådana erbjudanden kan baseras på dina tidigare interaktioner med Scandic, inklusive köphistorik, information du har angett i din medlemsprofil, besvarade kundundersökningar, interaktioner med kundservice samt onlinebeteende när du använder Scandics webbplats eller app. " "value": ". Sådana erbjudanden kan baseras på dina tidigare interaktioner med Scandic, inklusive köphistorik, information du har angett i din medlemsprofil, besvarade kundundersökningar, interaktioner med kundservice samt onlinebeteende när du använder Scandics webbplats eller app. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -7601,14 +7598,12 @@
"value": " Om du ger ditt samtycke till förbättrad personalisering kan Scandic skapa ett ännu mer personligt medlemskap för dig och skicka personliga erbjudanden baserade på dina interaktioner med Scandic Friends-partners. Scandic kan också dela den information som används för ditt personliga medlemskap med Scandic Friends-partners för analytiska och marknadsföringsändamål, till exempel för att följa upp partnerskap, utveckla nya relevanta produkter och anpassa erbjudanden utifrån dina intressen. Scandic Friends-partners kan anpassa sin befintliga kommunikation till dig baserat på personuppgifter som vi har delat med dem. Ingen av våra Scandic Friends-partners kommer dock att skicka marknadsföringskommunikation till dig baserat på det samtycke du har gett till Scandic. " "value": " Om du ger ditt samtycke till förbättrad personalisering kan Scandic skapa ett ännu mer personligt medlemskap för dig och skicka personliga erbjudanden baserade på dina interaktioner med Scandic Friends-partners. Scandic kan också dela den information som används för ditt personliga medlemskap med Scandic Friends-partners för analytiska och marknadsföringsändamål, till exempel för att följa upp partnerskap, utveckla nya relevanta produkter och anpassa erbjudanden utifrån dina intressen. Scandic Friends-partners kan anpassa sin befintliga kommunikation till dig baserat på personuppgifter som vi har delat med dem. Ingen av våra Scandic Friends-partners kommer dock att skicka marknadsföringskommunikation till dig baserat på det samtycke du har gett till Scandic. "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "br" "value": "br"
}, },
@@ -8107,8 +8102,7 @@
"value": "Länka dina " "value": "Länka dina "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "scandicFriends" "value": "scandicFriends"
}, },
@@ -8117,8 +8111,7 @@
"value": " och " "value": " och "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "sasEuroBonus" "value": "sasEuroBonus"
}, },
@@ -8984,8 +8977,7 @@
"value": "Vänligen ange koden som skickats till " "value": "Vänligen ange koden som skickats till "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -9047,8 +9039,7 @@
"value": "Vänligen ange den kod som skickats till " "value": "Vänligen ange den kod som skickats till "
}, },
{ {
"children": [ "children": [],
],
"type": 8, "type": 8,
"value": "maskedContactInfo" "value": "maskedContactInfo"
}, },
@@ -9093,4 +9084,4 @@
"value": "Fel: Användaren kunde inte hittas" "value": "Fel: Användaren kunde inte hittas"
} }
] ]
} }

11
packages/booking-flow/lib/components/BookingConfirmation/Header/index.tsx
View File

@@ -2,7 +2,6 @@
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import { Typography } from "@scandic-hotels/design-system/Typography" import { Typography } from "@scandic-hotels/design-system/Typography"
import { AddToCalendar } from "../../AddToCalendar" import { AddToCalendar } from "../../AddToCalendar"
@@ -17,8 +16,10 @@ import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConf
import type { EventAttributes } from "ics" import type { EventAttributes } from "ics"
import type { MutableRefObject } from "react" import type { MutableRefObject } from "react"
interface BookingConfirmationHeaderProps interface BookingConfirmationHeaderProps extends Pick<
extends Pick<BookingConfirmation, "booking" | "hotel"> { BookingConfirmation,
"booking" | "hotel"
> {
mainRef: MutableRefObject<HTMLElement | null> mainRef: MutableRefObject<HTMLElement | null>
} }
@@ -69,7 +70,9 @@ export function Header({
<h2 className={styles.hotelTitle}>{hotel.name}</h2> <h2 className={styles.hotelTitle}>{hotel.name}</h2>
</Typography> </Typography>
</hgroup> </hgroup>
<Body className={styles.body}>{text}</Body> <Typography variant="Body/Paragraph/mdRegular" className={styles.body}>
<p>{text}</p>
</Typography>
<div className={styles.actions}> <div className={styles.actions}>
<AddToCalendar <AddToCalendar
checkInDate={booking.checkInDate} checkInDate={booking.checkInDate}

4
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/index.tsx
View File

@@ -193,9 +193,7 @@ export default function BookingCode() {
} }
> >
<Switch name="bookingCode.remember" className="mobile-switch"> <Switch name="bookingCode.remember" className="mobile-switch">
<Typography <Typography variant="Body/Supporting text (caption)/smRegular">
variant="Body/Supporting text (caption)/smRegular"
>
<span> <span>
{intl.formatMessage({ {intl.formatMessage({
id: "bookingWidget.bookingCode.remember", id: "bookingWidget.bookingCode.remember",

6
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Input/index.tsx
View File

@@ -1,7 +1,7 @@
import React, { forwardRef, type InputHTMLAttributes } from "react" import React, { forwardRef, type InputHTMLAttributes } from "react"
import { Input as InputRAC } from "react-aria-components" import { Input as InputRAC } from "react-aria-components"
import Body from "@scandic-hotels/design-system/Body" import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "./input.module.css" import styles from "./input.module.css"
@@ -10,8 +10,8 @@ export const Input = forwardRef<
InputHTMLAttributes<HTMLInputElement> InputHTMLAttributes<HTMLInputElement>
>(function InputComponent(props, ref) { >(function InputComponent(props, ref) {
return ( return (
<Body asChild color="uiTextHighContrast"> <Typography variant="Body/Paragraph/mdRegular">
<InputRAC {...props} ref={ref} className={styles.input} /> <InputRAC {...props} ref={ref} className={styles.input} />
</Body> </Typography>
) )
}) })

2
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Input/input.module.css
View File

@@ -7,6 +7,8 @@
width: 100%; width: 100%;
z-index: 2; z-index: 2;
color: var(--UI-Text-High-contrast);
&:placeholder-shown::-webkit-search-cancel-button { &:placeholder-shown::-webkit-search-cancel-button {
display: none; display: none;
background-image: url("/_static/icons/cancel.svg"); background-image: url("/_static/icons/cancel.svg");

20
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/index.tsx
View File

@@ -1,8 +1,10 @@
import Body from "@scandic-hotels/design-system/Body"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer" import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { listItemVariants } from "./variants" import { listItemVariants } from "./variants"
import styles from "./listItem.module.css"
import type { AutoCompleteLocation } from "@scandic-hotels/trpc/routers/autocomplete/schema" import type { AutoCompleteLocation } from "@scandic-hotels/trpc/routers/autocomplete/schema"
import type { PropGetters } from "downshift" import type { PropGetters } from "downshift"
@@ -31,11 +33,19 @@ export default function ListItem({
item: location, item: location,
})} })}
> >
<Body color="black" textTransform="bold"> <Typography
{location.name} variant="Body/Paragraph/mdBold"
</Body> className={styles.locationName}
>
<p>{location.name}</p>
</Typography>
{location.destination && ( {location.destination && (
<Body color="uiTextPlaceholder">{location.destination}</Body> <Typography
variant="Body/Paragraph/mdRegular"
className={styles.locationDestination}
>
<p>{location.destination}</p>
</Typography>
)} )}
</li> </li>
) )

8
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/listItem.module.css
View File

@@ -11,3 +11,11 @@
.active { .active {
background-color: var(--Surface-Primary-Hover); background-color: var(--Surface-Primary-Hover);
} }
.locationName {
color: var(--Main-Grey-100);
}
.locationDestination {
color: var(--UI-Text-Placeholder);
}

37
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx
View File

@@ -1,14 +1,15 @@
"use client" "use client"
import { cx } from "class-variance-authority"
import { useEffect } from "react" import { useEffect } from "react"
import { useFormContext } from "react-hook-form" import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { useDebounceValue } from "usehooks-ts" import { useDebounceValue } from "usehooks-ts"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption" import Caption from "@scandic-hotels/design-system/Caption"
import { Divider } from "@scandic-hotels/design-system/Divider" import { Divider } from "@scandic-hotels/design-system/Divider"
import Footnote from "@scandic-hotels/design-system/Footnote" import Footnote from "@scandic-hotels/design-system/Footnote"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trpc } from "@scandic-hotels/trpc/client" import { trpc } from "@scandic-hotels/trpc/client"
import useLang from "../../../../../../hooks/useLang" import useLang from "../../../../../../hooks/useLang"
@@ -172,19 +173,23 @@ export default function SearchList({
if (!hasAutocompleteItems && debouncedSearch) { if (!hasAutocompleteItems && debouncedSearch) {
return ( return (
<Dialog getMenuProps={getMenuProps} variant="error"> <Dialog getMenuProps={getMenuProps} variant="error">
<Body className={styles.text} textTransform="bold"> <Typography variant="Body/Paragraph/mdBold" className={styles.text}>
{intl.formatMessage({ <p>
id: "bookingWidget.searchList.noResults", {intl.formatMessage({
defaultMessage: "No results", id: "bookingWidget.searchList.noResults",
})} defaultMessage: "No results",
</Body> })}
<Body className={styles.text} color="uiTextPlaceholder"> </p>
{intl.formatMessage({ </Typography>
id: "bookingWidget.searchList.noResultsDesc", <Typography className={cx(styles.text, styles.textPlaceholderColor)}>
defaultMessage: <p>
"We couldn't find a matching location for your search.", {intl.formatMessage({
})} id: "bookingWidget.searchList.noResultsDesc",
</Body> defaultMessage:
"We couldn't find a matching location for your search.",
})}
</p>
</Typography>
{typeFilteredSearchHistory && typeFilteredSearchHistory.length > 0 && ( {typeFilteredSearchHistory && typeFilteredSearchHistory.length > 0 && (
<> <>
<Divider className={styles.noResultsDivider} /> <Divider className={styles.noResultsDivider} />
@@ -305,7 +310,9 @@ function SearchListError({
<MaterialIcon icon="error" color="Icon/Interactive/Accent" /> <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
{caption} {caption}
</Caption> </Caption>
<Body>{body}</Body> <Typography variant="Body/Paragraph/mdRegular">
<p>{body}</p>
</Typography>
</Dialog> </Dialog>
) )
} }

3
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/searchList.module.css
View File

@@ -33,3 +33,6 @@
.text { .text {
padding: 0 var(--Space-x1); padding: 0 var(--Space-x1);
} }
.textPlaceholderColor {
color: var(--UI-Text-Placeholder);
}

5
packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/Mobile.tsx
View File

@@ -5,7 +5,6 @@ import { useIntl } from "react-intl"
import { Lang } from "@scandic-hotels/common/constants/language" import { Lang } from "@scandic-hotels/common/constants/language"
import { dt } from "@scandic-hotels/common/dt" import { dt } from "@scandic-hotels/common/dt"
import Body from "@scandic-hotels/design-system/Body"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import { Typography } from "@scandic-hotels/design-system/Typography" import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -137,14 +136,14 @@ export default function DatePickerRangeMobile({
size="large" size="large"
theme="base" theme="base"
> >
<Body color="white" textTransform="bold" asChild> <Typography variant="Body/Paragraph/mdBold">
<span> <span>
{intl.formatMessage({ {intl.formatMessage({
id: "datePicker.selectDates", id: "datePicker.selectDates",
defaultMessage: "Select dates", defaultMessage: "Select dates",
})} })}
</span> </span>
</Body> </Typography>
</Button> </Button>
</footer> </footer>
</div> </div>

1
packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css
View File

@@ -92,6 +92,7 @@ div.months {
.footer .button { .footer .button {
width: 100%; width: 100%;
color: var(--UI-Opacity-White-100);
} }
td.day, td.day,

22
packages/booking-flow/lib/components/EnterDetails/Breakfast/index.tsx
View File

@@ -6,11 +6,11 @@ import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Body from "@scandic-hotels/design-system/Body"
import RadioCard from "@scandic-hotels/design-system/Form/RadioCard" import RadioCard from "@scandic-hotels/design-system/Form/RadioCard"
import BreakfastBuffetIcon from "@scandic-hotels/design-system/Icons/BreakfastBuffetIcon" import BreakfastBuffetIcon from "@scandic-hotels/design-system/Icons/BreakfastBuffetIcon"
import NoBreakfastBuffetIcon from "@scandic-hotels/design-system/Icons/NoBreakfastBuffetIcon" import NoBreakfastBuffetIcon from "@scandic-hotels/design-system/Icons/NoBreakfastBuffetIcon"
import { MessageBanner } from "@scandic-hotels/design-system/MessageBanner" import { MessageBanner } from "@scandic-hotels/design-system/MessageBanner"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trackBreakfastSelection } from "@scandic-hotels/tracking/booking" import { trackBreakfastSelection } from "@scandic-hotels/tracking/booking"
import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast" import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"
@@ -95,15 +95,17 @@ export default function Breakfast() {
return ( return (
<FormProvider {...methods}> <FormProvider {...methods}>
<div className={styles.container} ref={formRef}> <div className={styles.container} ref={formRef}>
{hasChildrenInRoom ? ( {hasChildrenInRoom && (
<Body> <Typography variant="Body/Paragraph/mdRegular">
{intl.formatMessage({ <p>
id: "enterDetails.breakfast.childrenFreeInfo", {intl.formatMessage({
defaultMessage: id: "enterDetails.breakfast.childrenFreeInfo",
"Children's breakfast is always free as part of the adult's breakfast.", defaultMessage:
})} "Children's breakfast is always free as part of the adult's breakfast.",
</Body> })}
) : null} </p>
</Typography>
)}
{methods.formState.errors.breakfast && ( {methods.formState.errors.breakfast && (
<div className={styles.errorContainer}> <div className={styles.errorContainer}>
<MessageBanner <MessageBanner

15
packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/index.tsx
View File

@@ -6,7 +6,6 @@ import { useIntl } from "react-intl"
import { CurrencyEnum } from "@scandic-hotels/common/constants/currency" import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Body from "@scandic-hotels/design-system/Body"
import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon" import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon"
import Modal from "@scandic-hotels/design-system/Modal" import Modal from "@scandic-hotels/design-system/Modal"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
@@ -67,12 +66,14 @@ export default function MemberPriceModal() {
{memberPrice && ( {memberPrice && (
<span className={styles.newPrice}> <span className={styles.newPrice}>
<Body> <Typography variant="Body/Paragraph/mdRegular">
{intl.formatMessage({ <p>
id: "enterDetails.memberPriceModal.newPriceLabel", {intl.formatMessage({
defaultMessage: "The new price is", id: "enterDetails.memberPriceModal.newPriceLabel",
})} defaultMessage: "The new price is",
</Body> })}
</p>
</Typography>
<Subtitle type="two" color="red"> <Subtitle type="two" color="red">
{formatPrice( {formatPrice(
intl, intl,

16
packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/index.tsx
View File

@@ -2,8 +2,8 @@ import React from "react"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption" import Caption from "@scandic-hotels/design-system/Caption"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { import {
calculateTotalRoomPrice, calculateTotalRoomPrice,
@@ -136,12 +136,14 @@ function PaymentCard({
)} )}
</span> </span>
</Caption> </Caption>
<Body textTransform="bold" className={styles.priceItem}> <Typography variant="Body/Paragraph/mdBold" className={styles.priceItem}>
{formatPrice(intl, price, currency)} <p>
{isMemberRateApplied && comparisonPrice ? ( {formatPrice(intl, price, currency)}
<span>{formatPrice(intl, comparisonPrice, currency)}</span> {isMemberRateApplied && comparisonPrice && (
) : null} <span>{formatPrice(intl, comparisonPrice, currency)}</span>
</Body> )}
</p>
</Typography>
</div> </div>
) )
} }

47
packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx
View File

@@ -2,10 +2,10 @@
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import Link from "@scandic-hotels/design-system/OldDSLink" import Link from "@scandic-hotels/design-system/OldDSLink"
import Subtitle from "@scandic-hotels/design-system/Subtitle" import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext" import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
import useLang from "../../../../../hooks/useLang" import useLang from "../../../../../hooks/useLang"
@@ -26,26 +26,31 @@ export default function TimeoutSpinner() {
defaultMessage: "Taking longer than usual", defaultMessage: "Taking longer than usual",
})} })}
</Subtitle> </Subtitle>
<Body textAlign="center" className={styles.messageContainer}> <Typography
{intl.formatMessage( variant="Body/Paragraph/mdRegular"
{ className={styles.messageContainer}
id: "enterDetails.payment.loadingMessage", >
defaultMessage: <p>
"We are still confirming your booking. This is usually a matter of minutes and we do apologise for the wait. Please check your inbox for a booking confirmation email and if you still haven't received it by end of day, please contact our <link>customer support</link>.", {intl.formatMessage(
}, {
{ id: "enterDetails.payment.loadingMessage",
link: (text) => ( defaultMessage:
<Link "We are still confirming your booking. This is usually a matter of minutes and we do apologise for the wait. Please check your inbox for a booking confirmation email and if you still haven't received it by end of day, please contact our <link>customer support</link>.",
href={routes.customerService[lang]} },
textDecoration="underline" {
target="_blank" link: (text) => (
> <Link
{text} href={routes.customerService[lang]}
</Link> textDecoration="underline"
), target="_blank"
} >
)} {text}
</Body> </Link>
),
}
)}
</p>
</Typography>
</div> </div>
) )
} }

97
packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
View File

@@ -10,12 +10,12 @@ import {
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption" import Caption from "@scandic-hotels/design-system/Caption"
import { Divider } from "@scandic-hotels/design-system/Divider" import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Subtitle from "@scandic-hotels/design-system/Subtitle" import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { getRoomFeatureDescription } from "../../../../utils/getRoomFeatureDescription" import { getRoomFeatureDescription } from "../../../../utils/getRoomFeatureDescription"
@@ -86,21 +86,25 @@ export default function PriceChangeSummary({
return ( return (
<Fragment key={idx}> <Fragment key={idx}>
<div className={styles.rowContainer}> <div className={styles.rowContainer}>
<Body textTransform="bold"> <Typography variant="Body/Paragraph/mdBold">
{rooms.length > 1 <p>
? intl.formatMessage( {rooms.length > 1
{ ? intl.formatMessage(
id: "booking.roomIndex", {
defaultMessage: "Room {roomIndex}", id: "booking.roomIndex",
}, defaultMessage: "Room {roomIndex}",
{ roomIndex: roomNumber } },
) { roomIndex: roomNumber }
: intl.formatMessage({ )
id: "common.room", : intl.formatMessage({
defaultMessage: "Room", id: "common.room",
})} defaultMessage: "Room",
</Body> })}
<Body>{room.roomType}</Body> </p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>{room.roomType}</p>
</Typography>
<div className={styles.priceRow}> <div className={styles.priceRow}>
<Caption color="uiTextMediumContrast"> <Caption color="uiTextMediumContrast">
{intl.formatMessage({ {intl.formatMessage({
@@ -117,16 +121,15 @@ export default function PriceChangeSummary({
room.roomPrice.perStay.local.currency room.roomPrice.perStay.local.currency
)} )}
</Caption> </Caption>
<Body <Typography variant="Body/Paragraph/mdBold">
color="uiTextMediumContrast" <p>
textTransform="bold" {formatPrice(
> intl,
{formatPrice( newPrice,
intl, room.roomPrice.perStay.local.currency
newPrice, )}
room.roomPrice.perStay.local.currency </p>
)} </Typography>
</Body>
</div> </div>
) : ( ) : (
<Caption color="uiTextMediumContrast"> <Caption color="uiTextMediumContrast">
@@ -185,26 +188,32 @@ export default function PriceChangeSummary({
})} })}
</div> </div>
<div className={styles.rowContainer}> <div className={styles.rowContainer}>
<Body> <Typography variant="Body/Paragraph/mdRegular">
{intl.formatMessage({ <p>
id: "common.total",
defaultMessage: "Total",
})}
</Body>
<div className={styles.priceRow}>
<Body textTransform="bold">
{intl.formatMessage({ {intl.formatMessage({
id: "booking.priceIncludingVat", id: "common.total",
defaultMessage: "Price including VAT", defaultMessage: "Total",
})} })}
</Body> </p>
<Body textTransform="bold"> </Typography>
{formatPrice( <div className={styles.priceRow}>
intl, <Typography variant="Body/Paragraph/mdBold">
newTotalPrice.price, <p>
newTotalPrice.currency {intl.formatMessage({
)} id: "booking.priceIncludingVat",
</Body> defaultMessage: "Price including VAT",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdBold">
<p>
{formatPrice(
intl,
newTotalPrice.price,
newTotalPrice.currency
)}
</p>
</Typography>
</div> </div>
</div> </div>
</section> </section>

1
packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css
View File

@@ -56,6 +56,7 @@
.priceRow { .priceRow {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
color: var(--UI-Text-Medium-contrast);
} }
.updatedPrice { .updatedPrice {

40
packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx
View File

@@ -2,12 +2,12 @@ import { Dialog, Modal, ModalOverlay } from "react-aria-components"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption" import Caption from "@scandic-hotels/design-system/Caption"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Subtitle from "@scandic-hotels/design-system/Subtitle" import Subtitle from "@scandic-hotels/design-system/Subtitle"
import Title from "@scandic-hotels/design-system/Title" import Title from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useEnterDetailsStore } from "../../../stores/enter-details" import { useEnterDetailsStore } from "../../../stores/enter-details"
import { calculateTotalRoomPrice } from "../Payment/helpers" import { calculateTotalRoomPrice } from "../Payment/helpers"
@@ -112,20 +112,22 @@ export default function PriceChangeDialog({
{title} {title}
</Title> </Title>
</div> </div>
<Body textAlign="center"> <Typography variant="Body/Paragraph/mdRegular">
{intl.formatMessage( <p style={{ textAlign: "center" }}>
{ {intl.formatMessage(
id: "enterDetails.priceChangeDialog.description", {
defaultMessage: id: "enterDetails.priceChangeDialog.description",
"Prices have increased since you selected your {roomSelection}.{linebreak} To continue your booking, accept the updated price,{linebreak} or go back to select {newRoomSelection}.", defaultMessage:
}, "Prices have increased since you selected your {roomSelection}.{linebreak} To continue your booking, accept the updated price,{linebreak} or go back to select {newRoomSelection}.",
{ },
roomSelection: roomSelectionMsg, {
newRoomSelection: newRoomSelectionMsg, roomSelection: roomSelectionMsg,
linebreak: <br />, newRoomSelection: newRoomSelectionMsg,
} linebreak: <br />,
)} }
</Body> )}
</p>
</Typography>
<div> <div>
<Subtitle textAlign="center" color="burgundy"> <Subtitle textAlign="center" color="burgundy">
{intl.formatMessage({ {intl.formatMessage({
@@ -137,9 +139,11 @@ export default function PriceChangeDialog({
<Caption striked> <Caption striked>
{formatPrice(intl, prevTotalPrice, currency)} {formatPrice(intl, prevTotalPrice, currency)}
</Caption> </Caption>
<Body textAlign="center" textTransform="bold"> <Typography variant="Body/Paragraph/mdBold">
{formatPrice(intl, newTotalPrice, currency)} <p style={{ textAlign: "center" }}>
</Body> {formatPrice(intl, newTotalPrice, currency)}
</p>
</Typography>
</div> </div>
</div> </div>
<PriceChangeSummary <PriceChangeSummary

27
packages/booking-flow/lib/components/EnterDetails/Summary/UI/index.tsx
View File

@@ -8,7 +8,6 @@ import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import { longDateFormat } from "@scandic-hotels/common/constants/dateFormats" import { longDateFormat } from "@scandic-hotels/common/constants/dateFormats"
import { dt } from "@scandic-hotels/common/dt" import { dt } from "@scandic-hotels/common/dt"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Body from "@scandic-hotels/design-system/Body"
import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip" import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip"
import { Divider } from "@scandic-hotels/design-system/Divider" import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -108,18 +107,20 @@ export default function SummaryUI({
defaultMessage: "Booking summary", defaultMessage: "Booking summary",
})} })}
</Subtitle> </Subtitle>
<Body className={styles.date} color="baseTextMediumContrast"> <Typography variant="Body/Paragraph/mdRegular" className={styles.date}>
{dt(booking.fromDate).locale(lang).format(longDateFormat[lang])} <p>
<MaterialIcon {dt(booking.fromDate).locale(lang).format(longDateFormat[lang])}
icon="arrow_right" <MaterialIcon
color="Icon/Interactive/Secondary" icon="arrow_right"
size={15} color="Icon/Interactive/Secondary"
/> size={15}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} />
{dt(booking.toDate).locale(lang).format(longDateFormat[lang])} ( {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} {dt(booking.toDate).locale(lang).format(longDateFormat[lang])} (
{nightsMsg}) {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
</Body> {nightsMsg})
</p>
</Typography>
<MaterialIcon <MaterialIcon
className={styles.chevronIcon} className={styles.chevronIcon}
icon="keyboard_arrow_down" icon="keyboard_arrow_down"

1
packages/booking-flow/lib/components/EnterDetails/Summary/UI/ui.module.css
View File

@@ -28,6 +28,7 @@
gap: var(--Space-x1); gap: var(--Space-x1);
justify-content: flex-start; justify-content: flex-start;
grid-area: date; grid-area: date;
color: var(--Base-Text-Medium-contrast);
} }
.link { .link {

97
packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx
View File

@@ -2,11 +2,11 @@ import { useIntl } from "react-intl"
import { RateEnum } from "@scandic-hotels/common/constants/rate" import { RateEnum } from "@scandic-hotels/common/constants/rate"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption" import Caption from "@scandic-hotels/design-system/Caption"
import Footnote from "@scandic-hotels/design-system/Footnote" import Footnote from "@scandic-hotels/design-system/Footnote"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Subtitle from "@scandic-hotels/design-system/Subtitle" import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useIsLoggedIn } from "../../../../hooks/useIsLoggedIn" import { useIsLoggedIn } from "../../../../hooks/useIsLoggedIn"
import SignupPromoDesktop from "../../../SignupPromo/Desktop" import SignupPromoDesktop from "../../../SignupPromo/Desktop"
@@ -137,15 +137,17 @@ export function DesktopSummary({
</div> </div>
)} )}
<div className={styles.summaryPriceTextDesktop}> <div className={styles.summaryPriceTextDesktop}>
<Body> <Typography variant="Body/Paragraph/mdRegular">
{intl.formatMessage( <p>
{ {intl.formatMessage(
id: "booking.totalPriceInclVat", {
defaultMessage: "<b>Total price</b> (incl VAT)", id: "booking.totalPriceInclVat",
}, defaultMessage: "<b>Total price</b> (incl VAT)",
{ b: (str) => <b>{str}</b> } },
)} { b: (str) => <b>{str}</b> }
</Body> )}
</p>
</Typography>
<Caption color="uiTextMediumContrast">{summaryPriceText}</Caption> <Caption color="uiTextMediumContrast">{summaryPriceText}</Caption>
</div> </div>
<div className={styles.summaryPrice}> <div className={styles.summaryPrice}>
@@ -175,25 +177,31 @@ export function DesktopSummary({
)} )}
</Caption> </Caption>
)} )}
{selectedRates.totalPrice.requested ? ( {!!selectedRates.totalPrice.requested && (
<Body color="uiTextMediumContrast"> <Typography
{intl.formatMessage( variant="Body/Paragraph/mdRegular"
{ className={styles.approxPrice}
id: "booking.approxValue", >
defaultMessage: "Approx. {value}", <p>
}, {intl.formatMessage(
{ {
value: formatPrice( id: "booking.approxValue",
intl, defaultMessage: "Approx. {value}",
selectedRates.totalPrice.requested.price, },
selectedRates.totalPrice.requested.currency, {
selectedRates.totalPrice.requested.additionalPrice, value: formatPrice(
selectedRates.totalPrice.requested.additionalPriceCurrency intl,
), selectedRates.totalPrice.requested.price,
} selectedRates.totalPrice.requested.currency,
)} selectedRates.totalPrice.requested.additionalPrice,
</Body> selectedRates.totalPrice.requested
) : null} .additionalPriceCurrency
),
}
)}
</p>
</Typography>
)}
</div> </div>
<div className={styles.summaryPriceTextMobile}> <div className={styles.summaryPriceTextMobile}>
<Caption color="uiTextHighContrast"> <Caption color="uiTextHighContrast">
@@ -259,12 +267,17 @@ function RateSummary({
{ roomIndex: roomIndex + 1 } { roomIndex: roomIndex + 1 }
)} )}
</Subtitle> </Subtitle>
<Body color="uiTextPlaceholder"> <Typography
{intl.formatMessage({ variant="Body/Paragraph/mdRegular"
id: "booking.selectRoom", className={styles.selectRoom}
defaultMessage: "Select room", >
})} <p>
</Body> {intl.formatMessage({
id: "booking.selectRoom",
defaultMessage: "Select room",
})}
</p>
</Typography>
</div> </div>
) )
} }
@@ -279,7 +292,12 @@ function RateSummary({
{ roomIndex: roomIndex + 1 } { roomIndex: roomIndex + 1 }
)} )}
</Subtitle> </Subtitle>
<Body color="uiTextMediumContrast">{room.roomInfo.roomType}</Body> <Typography
variant="Body/Paragraph/mdRegular"
className={styles.uiTextMediumContrast}
>
<p>{room.roomInfo.roomType}</p>
</Typography>
<Caption color="uiTextMediumContrast"> <Caption color="uiTextMediumContrast">
{getRateDetails(room.rate)} {getRateDetails(room.rate)}
</Caption> </Caption>
@@ -289,7 +307,12 @@ function RateSummary({
<Subtitle color="uiTextHighContrast"> <Subtitle color="uiTextHighContrast">
{room.roomInfo.roomType} {room.roomInfo.roomType}
</Subtitle> </Subtitle>
<Body color="uiTextMediumContrast">{getRateDetails(room.rate)}</Body> <Typography
variant="Body/Paragraph/mdRegular"
className={styles.uiTextMediumContrast}
>
<p>{getRateDetails(room.rate)}</p>
</Typography>
</> </>
)} )}
</div> </div>

11
packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
View File

@@ -43,6 +43,9 @@
width: 100%; width: 100%;
gap: var(--Space-x4); gap: var(--Space-x4);
} }
.approxPrice {
color: var(--UI-Text-Medium-contrast);
}
.petInfo { .petInfo {
border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle); border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
@@ -74,6 +77,14 @@
display: block; display: block;
} }
.selectRoom {
color: var(--UI-Text-Placeholder);
}
.uiTextMediumContrast {
color: var(--UI-Text-Medium-contrast);
}
@media (min-width: 1367px) { @media (min-width: 1367px) {
.summary { .summary {
border-top: 1px solid var(--Base-Border-Subtle); border-top: 1px solid var(--Base-Border-Subtle);

10
packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
View File

@@ -4,12 +4,12 @@ import { useIntl } from "react-intl"
import { CurrencyEnum } from "@scandic-hotels/common/constants/currency" import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import { RateEnum } from "@scandic-hotels/common/constants/rate" import { RateEnum } from "@scandic-hotels/common/constants/rate"
import { logger } from "@scandic-hotels/common/logger" import { logger } from "@scandic-hotels/common/logger"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption" import Caption from "@scandic-hotels/design-system/Caption"
import { ChipButton } from "@scandic-hotels/design-system/ChipButton" import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Image from "@scandic-hotels/design-system/Image" import Image from "@scandic-hotels/design-system/Image"
import Subtitle from "@scandic-hotels/design-system/Subtitle" import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useSelectRateContext } from "../../../../../../contexts/SelectRate/SelectRateContext" import { useSelectRateContext } from "../../../../../../contexts/SelectRate/SelectRateContext"
import { useIsLoggedIn } from "../../../../../../hooks/useIsLoggedIn" import { useIsLoggedIn } from "../../../../../../hooks/useIsLoggedIn"
@@ -59,8 +59,12 @@ export function SelectedRoomPanel({ roomIndex }: { roomIndex: number }) {
<Subtitle className={styles.subtitle} color="uiTextHighContrast"> <Subtitle className={styles.subtitle} color="uiTextHighContrast">
{selectedRate.roomInfo.roomType} {selectedRate.roomInfo.roomType}
</Subtitle> </Subtitle>
<Body color="uiTextMediumContrast">{rateTitle}</Body> <Typography variant="Body/Paragraph/mdRegular">
<Body color="uiTextHighContrast">{selectedProductTitle}</Body> <div>
<p className={styles.uiTextMediumContrast}>{rateTitle}</p>
<p className={styles.uiTextHighContrast}>{selectedProductTitle}</p>
</div>
</Typography>
</div> </div>
<div className={styles.imageContainer}> <div className={styles.imageContainer}>
{image?.src ? ( {image?.src ? (

8
packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css
View File

@@ -33,6 +33,14 @@ div.selectedRoomPanel p.subtitle {
padding-bottom: var(--Space-x1); padding-bottom: var(--Space-x1);
} }
.uiTextMediumContrast {
color: var(--UI-Text-Medium-contrast);
}
.uiTextHighContrast {
color: var(--UI-Text-High-contrast);
}
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
.selectedRoomPanel { .selectedRoomPanel {
gap: var(--Space-x1); gap: var(--Space-x1);

2
packages/design-system/.storybook/content/Colors.tsx
View File

@@ -64,7 +64,7 @@ export function Colors({
const [selectedThemeName, setSelectedThemeName] = useState<string>( const [selectedThemeName, setSelectedThemeName] = useState<string>(
defaultThemeName || themes?.[0]?.name || '' defaultThemeName || themes?.[0]?.name || ''
) )
const [copiedKey, setCopiedKey] = useState<string | null>(null) const [, setCopiedKey] = useState<string | null>(null)
const currentTheme = const currentTheme =
propTheme || propTheme ||

149
packages/design-system/lib/components/Body/body.module.css
View File

@@ -1,149 +0,0 @@
.body {
margin: 0;
padding: 0;
}
.bodyFontOnly {
font-style: normal;
}
.bold {
font-family: var(--typography-Body-Bold-fontFamily);
font-size: var(--typography-Body-Bold-fontSize);
font-weight: 500;
letter-spacing: var(--typography-Body-Bold-letterSpacing);
line-height: var(--typography-Body-Bold-lineHeight);
text-decoration: var(--typography-Body-Bold-textDecoration);
}
.regular {
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: 400;
letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: var(--typography-Body-Regular-lineHeight);
text-decoration: var(--typography-Body-Regular-textDecoration);
}
.underlined {
font-family: var(--typography-Body-Underline-fontFamily);
font-size: var(--typography-Body-Underline-fontSize);
font-weight: 500;
letter-spacing: var(--typography-Body-Underline-letterSpacing);
line-height: var(--typography-Body-Underline-lineHeight);
text-decoration: var(--typography-Body-Underline-textDecoration);
}
.uppercase {
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Bold-fontWeight);
letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: var(--typography-Body-Regular-lineHeight);
text-decoration: var(--typography-Body-Regular-textDecoration);
text-transform: uppercase;
}
.textAlignCenter {
text-align: center;
}
.textAlignLeft {
text-align: left;
}
.textAlignRight {
text-align: right;
}
.black {
color: var(--Main-Grey-100);
}
.burgundy {
color: var(--Scandic-Brand-Burgundy);
}
.grey {
color: var(--UI-Grey-60);
}
.pale {
color: var(--Scandic-Brand-Pale-Peach);
}
.red {
color: var(--Scandic-Brand-Scandic-Red);
}
.textMediumContrast {
color: var(--Base-Text-Medium-contrast);
}
.baseTextHighContrast {
color: var(--Base-Text-High-contrast);
}
.baseTextMediumContrast {
color: var(--Base-Text-Medium-contrast);
}
.white {
color: var(--UI-Opacity-White-100);
}
.peach50 {
color: var(--Primary-Dark-On-Surface-Accent);
}
.baseTextMediumContrast {
color: var(--Base-Text-Medium-contrast);
}
.uiTextHighContrast {
color: var(--UI-Text-High-contrast);
}
.uiTextMediumContrast {
color: var(--UI-Text-Medium-contrast);
}
.uiTextPlaceholder {
color: var(--UI-Text-Placeholder);
}
.disabled {
color: var(--Base-Text-Disabled);
}
.primaryLight {
color: var(--Primary-Light-On-Surface-Text);
}
.secondaryLight {
color: var(--Secondary-Light-On-Surface-Text);
}
.tertiaryLight {
color: var(--Tertiary-Light-On-Surface-Text);
}
.primaryDark {
color: var(--Primary-Dark-On-Surface-Text);
}
.primaryDim {
color: var(--Primary-Dim-On-Surface-Text);
}
.primaryStrong {
color: var(--Primary-Strong-On-Surface-Text);
}
.baseText {
color: var(--Base-Text-Inverted);
}
.success {
color: var(--UI-Semantic-Success);
}

40
packages/design-system/lib/components/Body/index.tsx
View File

@@ -1,40 +0,0 @@
import { Slot } from '@radix-ui/react-slot'
import { bodyFontOnlyVariants, bodyVariants } from './variants'
import type { VariantProps } from 'class-variance-authority'
interface BodyProps
extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'>,
VariantProps<typeof bodyVariants> {
asChild?: boolean
fontOnly?: boolean
}
/**
* @deprecated Use `@scandic-hotels/design-system/Typography` instead.
*/
export default function Body({
asChild = false,
className = '',
color,
fontOnly = false,
textAlign,
textTransform,
...props
}: BodyProps) {
const Comp = asChild ? Slot : 'p'
const classNames = fontOnly
? bodyFontOnlyVariants({
className,
textAlign,
textTransform,
})
: bodyVariants({
className,
color,
textAlign,
textTransform,
})
return <Comp className={classNames} {...props} />
}

71
packages/design-system/lib/components/Body/variants.ts
View File

@@ -1,71 +0,0 @@
import { cva } from 'class-variance-authority'
import styles from './body.module.css'
const config = {
variants: {
color: {
black: styles.black,
burgundy: styles.burgundy,
disabled: styles.disabled,
grey: styles.grey,
pale: styles.pale,
red: styles.red,
textMediumContrast: styles.textMediumContrast,
baseTextMediumContrast: styles.baseTextMediumContrast,
baseTextHighContrast: styles.baseTextHighContrast,
white: styles.white,
peach50: styles.peach50,
uiTextHighContrast: styles.uiTextHighContrast,
uiTextMediumContrast: styles.uiTextMediumContrast,
uiTextPlaceholder: styles.uiTextPlaceholder,
primaryLight: styles.primaryLight,
secondaryLight: styles.secondaryLight,
tertiaryLight: styles.tertiaryLight,
primaryDark: styles.primaryDark,
primaryDim: styles.primaryDim,
primaryStrong: styles.primaryStrong,
baseText: styles.baseText,
success: styles.success,
},
textAlign: {
center: styles.textAlignCenter,
left: styles.textAlignLeft,
right: styles.textAlignRight,
},
textTransform: {
bold: styles.bold,
regular: styles.regular,
underlined: styles.underlined,
uppercase: styles.uppercase,
},
},
defaultVariants: {
color: 'black',
textAlign: 'left',
textTransform: 'regular',
},
} as const
export const bodyVariants = cva(styles.body, config)
const fontOnlyconfig = {
variants: {
textAlign: {
center: styles.textAlignCenter,
left: styles.textAlignLeft,
right: styles.textAlignRight,
},
textTransform: {
bold: styles.bold,
regular: styles.regular,
underlined: styles.underlined,
uppercase: styles.uppercase,
},
},
defaultVariants: {
textAlign: 'left',
textTransform: 'regular',
},
} as const
export const bodyFontOnlyVariants = cva(styles.bodyFontOnly, fontOnlyconfig)

23
packages/design-system/lib/components/DeprecatedSelect/index.tsx
View File

@@ -13,8 +13,8 @@ import {
import SelectChevron from './SelectChevron' import SelectChevron from './SelectChevron'
import styles from './select.module.css' import styles from './select.module.css'
import Body from '../Body'
import { InputLabel } from '../InputLabel' import { InputLabel } from '../InputLabel'
import { Typography } from '../Typography'
interface SelectProps extends Omit< interface SelectProps extends Omit<
React.SelectHTMLAttributes<HTMLSelectElement>, React.SelectHTMLAttributes<HTMLSelectElement>,
@@ -95,7 +95,7 @@ export default function Select({
onOpenChange={setOverflowVisible} onOpenChange={setOverflowVisible}
isDisabled={disabled} isDisabled={disabled}
> >
<Body asChild fontOnly> <Typography variant="Body/Paragraph/mdRegular">
<Button <Button
className={`${styles.input} select-button`} className={`${styles.input} select-button`}
data-testid={name} data-testid={name}
@@ -111,18 +111,23 @@ export default function Select({
{discreet && DELIMITER} {discreet && DELIMITER}
</InputLabel> </InputLabel>
{selectedText && ( {selectedText && (
<Body className={optionsIcon ? styles.iconLabel : ''}> <Typography
{optionsIcon ? optionsIcon : null} variant="Body/Paragraph/mdRegular"
{selectedText} className={optionsIcon ? styles.iconLabel : ''}
</Body> >
<p>
{optionsIcon ? optionsIcon : null}
{selectedText}
</p>
</Typography>
)} )}
</> </>
)} )}
</SelectValue> </SelectValue>
<SelectChevron {...chevronProps} /> <SelectChevron {...chevronProps} />
</Button> </Button>
</Body> </Typography>
<Body asChild fontOnly> <Typography variant="Body/Paragraph/mdRegular">
<Popover <Popover
className={styles.popover} className={styles.popover}
placement="bottom" placement="bottom"
@@ -151,7 +156,7 @@ export default function Select({
))} ))}
</ListBox> </ListBox>
</Popover> </Popover>
</Body> </Typography>
</ReactAriaSelect> </ReactAriaSelect>
</div> </div>
) )

3
packages/design-system/lib/components/InputNew/Input.tsx
View File

@@ -24,6 +24,7 @@ const InputComponent = forwardRef(function AriaInputWithLabelComponent(
labelPosition = 'floating', labelPosition = 'floating',
leftIcon, leftIcon,
rightIcon, rightIcon,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onRightIconClick, onRightIconClick,
showClearContentIcon, showClearContentIcon,
placeholder, placeholder,
@@ -109,6 +110,7 @@ const InputComponent = forwardRef(function AriaInputWithLabelComponent(
className={styles.rightIconButton} className={styles.rightIconButton}
theme="Black" theme="Black"
onClick={onClearContent} onClick={onClearContent}
// eslint-disable-next-line formatjs/no-literal-string-in-jsx
aria-label="Clear content" aria-label="Clear content"
> >
<MaterialIcon icon="cancel" /> <MaterialIcon icon="cancel" />
@@ -156,6 +158,7 @@ const InputComponent = forwardRef(function AriaInputWithLabelComponent(
className={styles.rightIconButton} className={styles.rightIconButton}
theme="Black" theme="Black"
onClick={onClearContent} onClick={onClearContent}
// eslint-disable-next-line formatjs/no-literal-string-in-jsx
aria-label="Clear content" aria-label="Clear content"
> >
<MaterialIcon icon="cancel" /> <MaterialIcon icon="cancel" />