diff --git a/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx b/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx index b5a34c168..8252f2d2a 100644 --- a/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx +++ b/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx @@ -33,11 +33,10 @@ export default function ChildInfoSelector({ const ageLabel = intl.formatMessage({ id: "Age" }) const bedLabel = intl.formatMessage({ id: "Bed" }) const errorMessage = intl.formatMessage({ id: "Child age is required" }) - const { setValue, formState, register, trigger } = useFormContext() + const { setValue, formState, register } = useFormContext() function updateSelectedBed(bed: number) { setValue(`rooms.${roomIndex}.child.${index}.bed`, bed) - trigger() } function updateSelectedAge(age: number) { diff --git a/components/HotelReservation/EnterDetails/Details/Signup/index.tsx b/components/HotelReservation/EnterDetails/Details/Signup/index.tsx index 74a17e911..1846a7cd1 100644 --- a/components/HotelReservation/EnterDetails/Details/Signup/index.tsx +++ b/components/HotelReservation/EnterDetails/Details/Signup/index.tsx @@ -7,9 +7,9 @@ import { useIntl } from "react-intl" import { privacyPolicy } from "@/constants/currentWebHrefs" import Checkbox from "@/components/TempDesignSystem/Form/Checkbox" -import CheckboxCard from "@/components/TempDesignSystem/Form/ChoiceCard/Checkbox" import DateSelect from "@/components/TempDesignSystem/Form/Date" import Input from "@/components/TempDesignSystem/Form/Input" +import JoinScandicFriendsCard from "@/components/TempDesignSystem/Form/JoinScandicFriendsCard" import Link from "@/components/TempDesignSystem/Link" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" @@ -31,29 +31,11 @@ export default function Signup({ name }: { name: string }) { setIsJoinChecked(joinValue) }, [joinValue]) - const list = [ - { title: intl.formatMessage({ id: "Earn bonus nights & points" }) }, - { title: intl.formatMessage({ id: "Get member benefits & offers" }) }, - { title: intl.formatMessage({ id: "Join at no cost" }) }, - ] - return (
- {isJoinChecked ? (
diff --git a/components/LoginButton/index.tsx b/components/LoginButton/index.tsx index f6b163b38..6258f6e88 100644 --- a/components/LoginButton/index.tsx +++ b/components/LoginButton/index.tsx @@ -13,19 +13,16 @@ import { trackLoginClick } from "@/utils/tracking" import { TrackingPosition } from "@/types/components/tracking" export default function LoginButton({ - className, position, trackingId, children, - color = "black", - variant = "navigation", -}: PropsWithChildren<{ - className: string - trackingId: string - position: TrackingPosition - color?: LinkProps["color"] - variant?: "navigation" | "signupVerification" -}>) { + ...props +}: PropsWithChildren< + { + trackingId: string + position: TrackingPosition + } & Omit +>) { const lang = useLang() const pathName = useLazyPathname({ includeSearchParams: true }) @@ -45,14 +42,7 @@ export default function LoginButton({ }, [position, trackingId]) return ( - + {children} ) diff --git a/components/TempDesignSystem/Form/Checkbox/index.tsx b/components/TempDesignSystem/Form/Checkbox/index.tsx index 60bd81935..bd4639e39 100644 --- a/components/TempDesignSystem/Form/Checkbox/index.tsx +++ b/components/TempDesignSystem/Form/Checkbox/index.tsx @@ -12,6 +12,7 @@ import styles from "./checkbox.module.css" import { CheckboxProps } from "@/types/components/checkbox" export default function Checkbox({ + className, name, children, registerOptions, @@ -25,16 +26,17 @@ export default function Checkbox({ return ( {({ isSelected }) => ( <> - + {isSelected && } {children} diff --git a/components/TempDesignSystem/Form/ChoiceCard/Checkbox.tsx b/components/TempDesignSystem/Form/ChoiceCard/Checkbox.tsx deleted file mode 100644 index ca32951cb..000000000 --- a/components/TempDesignSystem/Form/ChoiceCard/Checkbox.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import Card from "./_Card" - -import type { CheckboxProps } from "./_Card/card" - -export default function CheckboxCard(props: CheckboxProps) { - return -} diff --git a/components/TempDesignSystem/Form/JoinScandicFriendsCard/index.tsx b/components/TempDesignSystem/Form/JoinScandicFriendsCard/index.tsx new file mode 100644 index 000000000..629a904fc --- /dev/null +++ b/components/TempDesignSystem/Form/JoinScandicFriendsCard/index.tsx @@ -0,0 +1,108 @@ +"use client" + +import { useIntl } from "react-intl" + +import { privacyPolicy } from "@/constants/currentWebHrefs" + +import { CheckIcon } from "@/components/Icons" +import LoginButton from "@/components/LoginButton" +import useLang from "@/hooks/useLang" + +import Link from "../../Link" +import Caption from "../../Text/Caption" +import Footnote from "../../Text/Footnote" +import Checkbox from "../Checkbox" + +import styles from "./joinScandicFriendsCard.module.css" + +type JoinScandicFriendsCardProps = { + name: string + difference: { price: number; currency: string } +} + +export default function JoinScandicFriendsCard({ + name, + difference, +}: JoinScandicFriendsCardProps) { + const lang = useLang() + const intl = useIntl() + + const list = [ + { title: intl.formatMessage({ id: "Earn bonus nights & points" }) }, + { title: intl.formatMessage({ id: "Get member benefits & offers" }) }, + { title: intl.formatMessage({ id: "Join at no cost" }) }, + ] + + return ( + + ) +} diff --git a/components/TempDesignSystem/Form/JoinScandicFriendsCard/joinScandicFriendsCard.module.css b/components/TempDesignSystem/Form/JoinScandicFriendsCard/joinScandicFriendsCard.module.css new file mode 100644 index 000000000..42dcc86d0 --- /dev/null +++ b/components/TempDesignSystem/Form/JoinScandicFriendsCard/joinScandicFriendsCard.module.css @@ -0,0 +1,30 @@ +.cardContainer { + align-self: flex-start; + background-color: var(--Base-Surface-Primary-light-Normal); + border: 1px solid var(--Base-Border-Subtle); + border-radius: var(--Corner-radius-Large); + display: grid; + cursor: pointer; + gap: var(--Spacing-x2); + padding: var(--Spacing-x-one-and-half) var(--Spacing-x2); + width: min(100%, 600px); +} + +.header { + display: grid; + gap: var(--Spacing-x-one-and-half); + grid-template-columns: auto 1fr auto; +} + +.checkBox { + align-self: center; +} + +.list { + display: flex; + gap: var(--Spacing-x1); +} + +.listItem { + display: flex; +} diff --git a/components/TempDesignSystem/Link/link.module.css b/components/TempDesignSystem/Link/link.module.css index 138c8094e..948574ed2 100644 --- a/components/TempDesignSystem/Link/link.module.css +++ b/components/TempDesignSystem/Link/link.module.css @@ -16,7 +16,7 @@ .breadcrumb { font-family: var(--typography-Footnote-Bold-fontFamily); font-size: var(--typography-Footnote-Bold-fontSize); - font-weight: var(--typography-Footnote-Bold-fontWeight); + font-weight: 450; /* var(--typography-Footnote-Bold-fontWeight); */ letter-spacing: var(--typography-Footnote-Bold-letterSpacing); line-height: var(--typography-Footnote-Bold-lineHeight); } @@ -24,7 +24,7 @@ .link.breadcrumb { font-family: var(--typography-Footnote-Bold-fontFamily); font-size: var(--typography-Footnote-Bold-fontSize); - font-weight: var(--typography-Footnote-Bold-fontWeight); + font-weight: 450; /* var(--typography-Footnote-Bold-fontWeight); */ letter-spacing: var(--typography-Footnote-Bold-letterSpacing); line-height: var(--typography-Footnote-Bold-lineHeight); } @@ -128,6 +128,15 @@ color: #000; } +.uiTextPlaceholder { + color: var(--Base-Text-Placeholder); +} + +.uiTextPlaceholder:hover, +.uiTextPlaceholder:active { + color: var(--Base-Text-Medium-contrast); +} + .burgundy { color: var(--Base-Text-High-contrast); } @@ -211,6 +220,14 @@ line-height: var(--typography-Caption-Regular-lineHeight); } +.tiny { + font-family: var(--typography-Footnote-Regular-fontFamily); + font-size: var(--typography-Footnote-Regular-fontSize); + font-weight: var(--typography-Footnote-Regular-fontWeight); + letter-spacing: var(--typography-Footnote-Regular-letterSpacing); + line-height: var(--typography-Footnote-Regular-lineHeight); +} + .activeSmall { font-family: var(--typography-Caption-Bold-fontFamily); font-size: var(--typography-Caption-Bold-fontSize); diff --git a/components/TempDesignSystem/Link/variants.ts b/components/TempDesignSystem/Link/variants.ts index 61c7f8493..0a0c1dd6d 100644 --- a/components/TempDesignSystem/Link/variants.ts +++ b/components/TempDesignSystem/Link/variants.ts @@ -17,10 +17,12 @@ export const linkVariants = cva(styles.link, { peach80: styles.peach80, white: styles.white, red: styles.red, + uiTextPlaceholder: styles.uiTextPlaceholder, }, size: { small: styles.small, regular: styles.regular, + tiny: styles.tiny, }, textDecoration: { none: styles.noDecoration, diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json index 6a2c12e20..7ec920d05 100644 --- a/i18n/dictionaries/da.json +++ b/i18n/dictionaries/da.json @@ -238,6 +238,7 @@ "Number of parking spots": "Antal parkeringspladser", "OTHER PAYMENT METHODS": "ANDRE BETALINGSMETODER", "On your journey": "På din rejse", + "Only pay {amount} {currency}": "Betal kun {amount} {currency}", "Open": "Åben", "Open gift(s)": "Åbne {amount, plural, one {gave} other {gaver}}", "Open image gallery": "Åbn billedgalleri", @@ -458,6 +459,5 @@ "to": "til", "uppercase letter": "stort bogstav", "{amount} out of {total}": "{amount} ud af {total}", - "{amount} {currency}": "{amount} {currency}", - "{difference}{amount} {currency}": "{difference}{amount} {currency}" + "{amount} {currency}": "{amount} {currency}" } diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json index 5968f5cee..80b3b6116 100644 --- a/i18n/dictionaries/de.json +++ b/i18n/dictionaries/de.json @@ -236,6 +236,7 @@ "Number of parking spots": "Anzahl der Parkplätze", "OTHER PAYMENT METHODS": "ANDERE BEZAHLMETHODE", "On your journey": "Auf deiner Reise", + "Only pay {amount} {currency}": "Nur bezahlen {amount} {currency}", "Open": "Offen", "Open gift(s)": "{amount, plural, one {Geschenk} other {Geschenke}} öffnen", "Open image gallery": "Bildergalerie öffnen", @@ -456,6 +457,5 @@ "to": "zu", "uppercase letter": "großbuchstabe", "{amount} out of {total}": "{amount} von {total}", - "{amount} {currency}": "{amount} {currency}", - "{difference}{amount} {currency}": "{difference}{amount} {currency}" + "{amount} {currency}": "{amount} {currency}" } diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json index 910af641a..6080fc36b 100644 --- a/i18n/dictionaries/en.json +++ b/i18n/dictionaries/en.json @@ -255,6 +255,7 @@ "Number of parking spots": "Number of parking spots", "OTHER PAYMENT METHODS": "OTHER PAYMENT METHODS", "On your journey": "On your journey", + "Only pay {amount} {currency}": "Only pay {amount} {currency}", "Open": "Open", "Open gift(s)": "Open {amount, plural, one {gift} other {gifts}}", "Open image gallery": "Open image gallery", @@ -427,7 +428,6 @@ "Which room class suits you the best?": "Which room class suits you the best?", "Year": "Year", "Yes": "Yes", - "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with": "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with", "Yes, discard changes": "Yes, discard changes", "Yes, remove my card": "Yes, remove my card", "You can always change your mind later and add breakfast at the hotel.": "You can always change your mind later and add breakfast at the hotel.", @@ -490,12 +490,12 @@ "points": "Points", "room type": "room type", "room types": "room types", + "signup.terms": "By signing up you accept the Scandic Friends Terms and Conditions. Your membership is valid until further notice, and you can terminate your membership at any time by sending an email to Scandic’s customer service", "special character": "special character", "spendable points expiring by": "{points} spendable points expiring by {date}", "to": "to", "uppercase letter": "uppercase letter", "{amount} out of {total}": "{amount} out of {total}", "{amount} {currency}": "{amount} {currency}", - "{card} ending with {cardno}": "{card} ending with {cardno}", - "{difference}{amount} {currency}": "{difference}{amount} {currency}" + "{card} ending with {cardno}": "{card} ending with {cardno}" } diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json index bc79d0cf0..0c1a08d35 100644 --- a/i18n/dictionaries/fi.json +++ b/i18n/dictionaries/fi.json @@ -238,6 +238,7 @@ "Number of parking spots": "Pysäköintipaikkojen määrä", "OTHER PAYMENT METHODS": "MUISE KORT", "On your journey": "Matkallasi", + "Only pay {amount} {currency}": "Vain maksaa {amount} {currency}", "Open": "Avata", "Open gift(s)": "{amount, plural, one {Avoin lahja} other {Avoimet lahjat}}", "Open image gallery": "Avaa kuvagalleria", @@ -456,6 +457,5 @@ "to": "to", "uppercase letter": "iso kirjain", "{amount} out of {total}": "{amount}/{total}", - "{amount} {currency}": "{amount} {currency}", - "{difference}{amount} {currency}": "{difference}{amount} {currency}" + "{amount} {currency}": "{amount} {currency}" } diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json index a5dd81fc4..2aca61a85 100644 --- a/i18n/dictionaries/no.json +++ b/i18n/dictionaries/no.json @@ -236,6 +236,7 @@ "Number of parking spots": "Antall parkeringsplasser", "OTHER PAYMENT METHODS": "ANDRE BETALINGSMETODER", "On your journey": "På reisen din", + "Only pay {amount} {currency}": "Bare betal {amount} {currency}", "Open": "Åpen", "Open gift(s)": "{amount, plural, one {Åpen gave} other {Åpnen gaver}}", "Open image gallery": "Åpne bildegalleri", @@ -454,6 +455,5 @@ "to": "til", "uppercase letter": "stor bokstav", "{amount} out of {total}": "{amount} av {total}", - "{amount} {currency}": "{amount} {currency}", - "{difference}{amount} {currency}": "{difference}{amount} {currency}" + "{amount} {currency}": "{amount} {currency}" } diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json index 0c5816f51..db300b7c2 100644 --- a/i18n/dictionaries/sv.json +++ b/i18n/dictionaries/sv.json @@ -236,6 +236,7 @@ "Number of parking spots": "Antal parkeringsplatser", "OTHER PAYMENT METHODS": "ANDRE BETALINGSMETODER", "On your journey": "På din resa", + "Only pay {amount} {currency}": "Betala endast {amount} {currency}", "Open": "Öppna", "Open gift(s)": "Öppna {amount, plural, one {gåva} other {gåvor}}", "Open image gallery": "Öppna bildgalleri", @@ -457,6 +458,5 @@ "types": "typer", "uppercase letter": "stor bokstav", "{amount} out of {total}": "{amount} av {total}", - "{amount} {currency}": "{amount} {currency}", - "{difference}{amount} {currency}": "{difference}{amount} {currency}" + "{amount} {currency}": "{amount} {currency}" } diff --git a/types/components/tracking.ts b/types/components/tracking.ts index aa42ae5fe..fa6e82a95 100644 --- a/types/components/tracking.ts +++ b/types/components/tracking.ts @@ -80,3 +80,4 @@ export type TrackingPosition = | "hamburger menu" | "join scandic friends sidebar" | "sign up verification" + | "enter details"