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

feat(SW-350): Implemented tooltip and booking widget tablet design

Browse Source
This commit is contained in:
Pontus Dreij
2024-10-04 10:00:52 +02:00
parent 04406d3865
commit aee9e94f7a
17 changed files with 530 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
components/Forms/BookingWidget/FormContent/Voucher/index.tsx Normal file
View File

@@ -0,0 +1,77 @@
"use client"
import { useIntl } from "react-intl"
import inputStyles from "@/components/Forms/BookingWidget/FormContent/Search/search.module.css"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { Tooltip } from "@/components/TempDesignSystem/Tooltip"
import styles from "./voucher.module.css"
export default function Voucher() {
const intl = useIntl()
const vouchers = intl.formatMessage({ id: "Code / Voucher" })
const useVouchers = intl.formatMessage({ id: "Use code/voucher" })
const addVouchers = intl.formatMessage({ id: "Add code" })
const bonus = intl.formatMessage({ id: "Use bonus cheque" })
const reward = intl.formatMessage({ id: "Book reward night" })
const disabledBookingOptionsHeader = intl.formatMessage({
id: "Disabled booking options header",
})
const disabledBookingOptionsText = intl.formatMessage({
id: "Disabled booking options text",
})
return (
<div className={styles.optionsContainer}>
<Tooltip
heading={disabledBookingOptionsHeader}
text={disabledBookingOptionsText}
position="bottom"
arrow="left"
>
<div className={styles.vouchers}>
<div className={styles.vouchersHeader}>
<Caption color="disabled" textTransform="bold">
{vouchers}
</Caption>
{/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
</div>
<Body asChild>
<input
type="text"
placeholder={addVouchers}
className={inputStyles.input}
disabled
/>
</Body>
</div>
</Tooltip>
<Tooltip
heading={disabledBookingOptionsHeader}
text={disabledBookingOptionsText}
position="bottom"
arrow="left"
>
<div className={styles.options}>
<label className={`${styles.option} ${styles.checkboxVoucher}`}>
<input type="checkbox" disabled className={styles.checkbox} />
<Caption color="disabled">{useVouchers}</Caption>
{/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
</label>
<label className={styles.option}>
<input type="checkbox" disabled className={styles.checkbox} />
<Caption color="disabled">{bonus}</Caption>
{/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
</label>
<label className={styles.option}>
<input type="checkbox" disabled className={styles.checkbox} />
<Caption color="disabled">{reward}</Caption>
{/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
</label>
</div>
</Tooltip>
</div>
)
}

82
components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css Normal file
View File

@@ -0,0 +1,82 @@
.vouchers {
display: block;
}
.options {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}
.option {
display: flex;
gap: var(--Spacing-x2);
margin-top: var(--Spacing-x2);
align-items: center;
}
.vouchers {
width: 100%;
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
border-radius: var(--Corner-radius-Small);
}
.optionsContainer {
display: flex;
flex-direction: column;
}
.checkbox {
width: var(--Spacing-x3);
height: var(--Spacing-x3);
}
.checkboxVoucher {
display: none;
}
@media screen and (min-width: 768px) {
.vouchers {
display: none;
}
.options {
flex-direction: row;
gap: var(--Spacing-x4);
}
.option {
margin-top: 0;
gap: var(--Spacing-x-one-and-half);
}
.checkboxVoucher {
display: flex;
}
}
@media screen and (max-width: 1366px) {
.vouchers {
background-color: var(--Base-Background-Primary-Normal);
border-radius: var(--Corner-radius-Medium);
}
}
@media screen and (min-width: 1367px) {
.vouchers {
display: block;
max-width: 200px;
}
.options {
flex-direction: column;
max-width: 190px;
gap: 0;
}
.vouchers:hover,
.option:hover {
cursor: not-allowed;
}
.optionsContainer {
flex-direction: row;
}
.checkboxVoucher {
display: none;
}
}

95
components/Forms/BookingWidget/FormContent/formContent.module.css
View File

@@ -1,24 +1,7 @@
.options {
flex-direction: column;
justify-content: center;
width: 100%;
}
.option {
display: flex;
gap: var(--Spacing-x-one-and-half);
align-items: center;
}
.infoIcon {
stroke: var(--Base-Text-Disabled);
}
.vouchers,
.options {
display: none;
}
.vouchersHeader {
display: flex;
gap: var(--Spacing-x-one-and-half);
@@ -28,9 +11,19 @@
width: var(--Spacing-x3);
height: var(--Spacing-x3);
}
.icon,
.voucherRow {
display: none;
}
@media screen and (max-width: 767px) {
.input {
.voucherContainer {
padding: var(--Spacing-x2) 0 var(--Spacing-x4);
}
}
@media screen and (max-width: 1367px) {
.inputContainer {
display: grid;
gap: var(--Spacing-x2);
}
@@ -49,36 +42,39 @@
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
}
.options {
gap: var(--Spacing-x2);
margin-top: var(--Spacing-x2);
}
.option {
gap: var(--Spacing-x2);
.button {
align-self: flex-end;
justify-content: center;
width: 100%;
}
}
@media screen and (min-width: 768px) {
.input {
display: flex;
align-items: center;
}
.inputContainer {
display: flex;
flex: 2;
gap: var(--Spacing-x2);
}
.voucherContainer {
flex: 1;
}
.rooms,
.vouchers,
.when,
.where {
width: 100%;
}
.input input[type="text"] {
.inputContainer input[type="text"] {
border: none;
height: 24px;
height: var(--Spacing-x3);
}
.rooms,
.vouchers,
.when {
max-width: 240px;
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
@@ -90,30 +86,43 @@
background-color: var(--Base-Surface-Primary-light-Hover-alt);
}
.vouchers {
max-width: 200px;
}
.where {
max-width: 280px;
position: relative;
}
.options {
max-width: 190px;
.button {
justify-content: center;
width: 118px;
}
}
@media screen and (min-width: 1367px) {
.vouchers {
display: block;
@media screen and (min-width: 768px) and (max-width: 1366px) {
.inputContainer {
padding: var(--Spacing-x2);
}
.options {
.buttonContainer {
padding-right: var(--Spacing-x2);
}
.input .buttonContainer .button {
padding: var(--Spacing-x1);
width: var(--Spacing-x6);
height: var(--Spacing-x6);
}
.buttonText {
display: none;
}
.icon {
display: flex;
}
.vouchers:hover,
.option:hover {
cursor: not-allowed;
.voucherRow {
display: flex;
background: var(--Base-Surface-Primary-light-Hover);
border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
padding: var(--Spacing-x2);
}
.voucherContainer {
display: none;
}
}

114
components/Forms/BookingWidget/FormContent/index.tsx
View File

@@ -1,85 +1,93 @@
"use client"
import React from "react"
import { useWatch } from "react-hook-form"
import { useIntl } from "react-intl"
import { dt } from "@/lib/dt"
import DatePicker from "@/components/DatePicker"
import { InfoCircleIcon } from "@/components/Icons"
import { SearchIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Search from "./Search"
import Voucher from "./Voucher"
import styles from "./formContent.module.css"
import tempStyles from "./Search/search.module.css" // TODO: Remove this when Rooms and Voucher is implemented
import inputStyles from "./Search/search.module.css"
import type { BookingWidgetFormContentProps } from "@/types/components/form/bookingwidget"
export default function FormContent({
locations,
formId,
formState,
}: BookingWidgetFormContentProps) {
const intl = useIntl()
const selectedDate = useWatch({ name: "date" })
const rooms = intl.formatMessage({ id: "Guests & Rooms" })
const vouchers = intl.formatMessage({ id: "Code / Voucher" })
const addVouchers = intl.formatMessage({ id: "Add code" })
const bonus = intl.formatMessage({ id: "Use bonus cheque" })
const reward = intl.formatMessage({ id: "Book reward night" })
const nights = dt(selectedDate.to).diff(dt(selectedDate.from), "days")
return (
<div className={styles.input}>
<div className={styles.where}>
<Search locations={locations} />
</div>
<div className={styles.when}>
<Caption color="red" textTransform="bold">
{intl.formatMessage(
{ id: "booking.nights" },
{ totalNights: nights }
)}
</Caption>
<DatePicker />
</div>
<div className={styles.rooms}>
<Caption color="red" textTransform="bold">
{rooms}
</Caption>
<Body asChild>
<input type="text" placeholder={rooms} className={tempStyles.input} />
</Body>
</div>
<div className={styles.vouchers}>
<div className={styles.vouchersHeader}>
<Caption color="disabled" textTransform="bold">
{vouchers}
</Caption>
<InfoCircleIcon color="white" className={styles.infoIcon} />
<>
<div className={styles.input}>
<div className={styles.inputContainer}>
<div className={styles.where}>
<Search locations={locations} />
</div>
<div className={styles.when}>
<Caption color="red" textTransform="bold">
{intl.formatMessage(
{ id: "booking.nights" },
{ totalNights: nights }
)}
</Caption>
<DatePicker />
</div>
<div className={styles.rooms}>
<Caption color="red" textTransform="bold">
{rooms}
</Caption>
<Body asChild>
<input
type="text"
placeholder={rooms}
className={inputStyles.input}
/>
</Body>
</div>
</div>
<div className={styles.voucherContainer}>
<Voucher />
</div>
<div className={styles.buttonContainer}>
<Button
className={styles.button}
disabled={!formState.isValid}
form={formId}
intent="primary"
theme="base"
type="submit"
>
<Caption
color="white"
textTransform="bold"
className={styles.buttonText}
>
{intl.formatMessage({ id: "Search" })}
</Caption>
<div className={styles.icon}>
<SearchIcon color="white" width={28} height={28} />
</div>
</Button>
</div>
<Body asChild>
<input
type="text"
placeholder={addVouchers}
className={tempStyles.input}
disabled
/>
</Body>
</div>
<div className={styles.options}>
<label className={styles.option}>
<input type="checkbox" disabled className={styles.checkbox} />
<Caption color="disabled">{bonus}</Caption>
<InfoCircleIcon color="white" className={styles.infoIcon} />
</label>
<label className={styles.option}>
<input type="checkbox" disabled className={styles.checkbox} />
<Caption color="disabled">{reward}</Caption>
<InfoCircleIcon color="white" className={styles.infoIcon} />
</label>
<div className={styles.voucherRow}>
<Voucher />
</div>
</div>
</>
)
}

21
components/Forms/BookingWidget/form.module.css
View File

@@ -8,7 +8,6 @@
.form {
display: grid;
gap: var(--Spacing-x2);
width: 100%;
}
@@ -16,27 +15,23 @@
.form {
align-self: flex-start;
}
.button {
align-self: flex-end;
justify-content: center;
width: 100%;
}
}
@media screen and (min-width: 768px) {
.section {
display: flex;
padding: var(--Spacing-x1) var(--Spacing-x5);
}
.button {
justify-content: center;
width: 118px;
}
.default {
border-radius: var(--Corner-radius-Medium);
}
}
@media screen and (min-width: 1367px) {
.section {
padding: var(--Spacing-x1) var(--Spacing-x5);
}
.default {
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2)
var(--Spacing-x-one-and-half) var(--Spacing-x1);
}

23
components/Forms/BookingWidget/index.tsx
View File

@@ -1,10 +1,6 @@
"use client"
import { useRouter } from "next/navigation"
import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import Button from "@/components/TempDesignSystem/Button"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import FormContent from "./FormContent"
import { bookingWidgetVariants } from "./variants"
@@ -17,7 +13,6 @@ import type { BookingWidgetFormProps } from "@/types/components/form/bookingwidg
const formId = "booking-widget"
export default function Form({ locations, type }: BookingWidgetFormProps) {
const intl = useIntl()
const router = useRouter()
const classNames = bookingWidgetVariants({
@@ -43,20 +38,12 @@ export default function Form({ locations, type }: BookingWidgetFormProps) {
id={formId}
>
<input {...register("location")} type="hidden" />
<FormContent locations={locations} />
<FormContent
locations={locations}
formId={formId}
formState={formState}
/>
</form>
<Button
className={styles.button}
disabled={!formState.isValid}
form={formId}
intent="primary"
theme="base"
type="submit"
>
<Caption color="white" textTransform="bold">
{intl.formatMessage({ id: "Search" })}
</Caption>
</Button>
</section>
)
}

30
components/TempDesignSystem/Tooltip/index.tsx Normal file
View File

@@ -0,0 +1,30 @@
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { tooltipVariants } from "./variants"
import styles from "./tooltip.module.css"
import { TooltipPosition, TooltipProps } from "@/types/components/tooltip"
export function Tooltip<P extends TooltipPosition>({
heading,
text,
position,
arrow,
children,
}: TooltipProps<P>) {
const className = tooltipVariants({ position, arrow })
return (
<div className={styles.tooltipContainer} role="tooltip" aria-label={text}>
<div className={className}>
{heading && (
<Caption textTransform="bold" color="white">
{heading}
</Caption>
)}
{text && <Caption color="white">{text}</Caption>}
</div>
{children}
</div>
)
}

137
components/TempDesignSystem/Tooltip/tooltip.module.css Normal file
View File

@@ -0,0 +1,137 @@
.tooltipContainer {
position: relative;
display: inline-block;
}
.tooltip {
padding: var(--Spacing-x1);
background-color: var(--UI-Text-Active);
border: 0.5px solid var(--UI-Border-Active);
border-radius: var(--Corner-radius-Medium);
color: var(--Base-Text-Inverted);
position: absolute;
visibility: hidden;
z-index: 1000;
opacity: 0;
transition: opacity 0.3s;
max-width: 200px;
}
.tooltipContainer:hover .tooltip {
visibility: visible;
opacity: 1;
}
.left {
right: 100%;
}
.right {
left: 100%;
}
.top {
bottom: 100%;
}
.bottom {
top: 100%;
}
.tooltip::before {
content: "";
position: absolute;
border-style: solid;
}
.bottom.arrowLeft::before {
top: -8px;
left: 16px;
border-width: 0 7px 8px 7px;
border-color: transparent transparent var(--UI-Text-Active) transparent;
}
.bottom.arrowCenter::before {
top: -8px;
left: 50%;
transform: translateX(-50%);
border-width: 0 7px 8px 7px;
border-color: transparent transparent var(--UI-Text-Active) transparent;
}
.bottom.arrowRight::before {
top: -8px;
right: 16px;
border-width: 0 7px 8px 7px;
border-color: transparent transparent var(--UI-Text-Active) transparent;
}
.top.arrowLeft::before {
bottom: -8px;
left: 16px;
border-width: 8px 7px 0 7px;
border-color: var(--UI-Text-Active) transparent transparent transparent;
}
.top.arrowCenter::before {
bottom: -8px;
left: 50%;
transform: translateX(-50%);
border-width: 8px 7px 0 7px;
border-color: var(--UI-Text-Active) transparent transparent transparent;
}
.top.arrowRight::before {
bottom: -8px;
right: 16px;
border-width: 8px 7px 0 7px;
border-color: var(--UI-Text-Active) transparent transparent transparent;
}
.left.arrowTop::before {
top: 16px;
right: -8px;
transform: translateY(-50%);
border-width: 7px 0 7px 8px;
border-color: transparent transparent transparent var(--UI-Text-Active);
}
.left.arrowCenter::before {
top: 50%;
right: -8px;
transform: translateY(-50%);
border-width: 7px 0 7px 8px;
border-color: transparent transparent transparent var(--UI-Text-Active);
}
.left.arrowBottom::before {
bottom: 16px;
right: -8px;
transform: translateY(50%);
border-width: 7px 0 7px 8px;
border-color: transparent transparent transparent var(--UI-Text-Active);
}
.right.arrowTop::before {
top: 16px;
left: -8px;
transform: translateY(-50%);
border-width: 7px 8px 7px 0;
border-color: transparent var(--UI-Text-Active) transparent transparent;
}
.right.arrowCenter::before {
top: 50%;
left: -8px;
transform: translateY(-50%);
border-width: 7px 8px 7px 0;
border-color: transparent var(--UI-Text-Active) transparent transparent;
}
.right.arrowBottom::before {
bottom: 16px;
left: -8px;
transform: translateY(50%);
border-width: 7px 8px 7px 0;
border-color: transparent var(--UI-Text-Active) transparent transparent;
}

21
components/TempDesignSystem/Tooltip/variants.ts Normal file
View File

@@ -0,0 +1,21 @@
import { cva } from "class-variance-authority"
import styles from "./tooltip.module.css"
export const tooltipVariants = cva(styles.tooltip, {
variants: {
position: {
left: styles.left,
right: styles.right,
top: styles.top,
bottom: styles.bottom,
},
arrow: {
left: styles.arrowLeft,
right: styles.arrowRight,
center: styles.arrowCenter,
top: styles.arrowTop,
bottom: styles.arrowBottom,
},
},
})

7
i18n/dictionaries/da.json
View File

@@ -18,7 +18,7 @@
"As our Close Friend": "Som vores nære ven",
"At latest": "Senest",
"At the hotel": "På hotellet",
"Attractions": "Attraktioner",
"Attraction": "Attraktion",
"Back to scandichotels.com": "Tilbage til scandichotels.com",
"Bed type": "Seng type",
"Book": "Book",
@@ -60,6 +60,8 @@
"Day": "Dag",
"Description": "Beskrivelse",
"Destinations & hotels": "Destinationer & hoteller",
"Disabled booking options header": "Vi beklager",
"Disabled booking options text": "Koder, checks og bonusnætter er endnu ikke tilgængelige på den nye hjemmeside.",
"Discard changes": "Kassér ændringer",
"Discard unsaved changes?": "Slette ændringer, der ikke er gemt?",
"Distance to city centre": "{number}km til centrum",
@@ -228,6 +230,7 @@
"Type of bed": "Sengtype",
"Type of room": "Værelsestype",
"Use bonus cheque": "Brug Bonus Cheque",
"Use code/voucher": "Brug kode/voucher",
"User information": "Brugeroplysninger",
"View as list": "Vis som liste",
"View as map": "Vis som kort",
@@ -281,4 +284,4 @@
"spendable points expiring by": "{points} Brugbare point udløber den {date}",
"to": "til",
"uppercase letter": "stort bogstav"
}
}

7
i18n/dictionaries/de.json
View File

@@ -18,7 +18,7 @@
"As our Close Friend": "Als unser enger Freund",
"At latest": "Spätestens",
"At the hotel": "Im Hotel",
"Attractions": "Attraktionen",
"Attraction": "Attraktion",
"Back to scandichotels.com": "Zurück zu scandichotels.com",
"Bed type": "Bettentyp",
"Book": "Buchen",
@@ -60,6 +60,8 @@
"Day": "Tag",
"Description": "Beschreibung",
"Destinations & hotels": "Reiseziele & Hotels",
"Disabled booking options header": "Es tut uns leid",
"Disabled booking options text": "Codes, Schecks und Bonusnächte sind auf der neuen Website noch nicht verfügbar.",
"Discard changes": "Änderungen verwerfen",
"Discard unsaved changes?": "Nicht gespeicherte Änderungen verwerfen?",
"Distance to city centre": "{number}km zum Stadtzentrum",
@@ -227,6 +229,7 @@
"Type of bed": "Bettentyp",
"Type of room": "Zimmerart",
"Use bonus cheque": "Bonusscheck nutzen",
"Use code/voucher": "Code/Gutschein nutzen",
"User information": "Nutzerinformation",
"View as list": "Als Liste anzeigen",
"View as map": "Als Karte anzeigen",
@@ -280,4 +283,4 @@
"spendable points expiring by": "{points} Einlösbare punkte verfallen bis zum {date}",
"to": "zu",
"uppercase letter": "großbuchstabe"
}
}

5
i18n/dictionaries/en.json
View File

@@ -61,6 +61,8 @@
"Description": "Description",
"Destinations & hotels": "Destinations & hotels",
"Destination": "Destination",
"Disabled booking options header": "We're sorry",
"Disabled booking options text": "Codes, cheques and reward nights aren't available on the new website yet.",
"Discard changes": "Discard changes",
"Discard unsaved changes?": "Discard unsaved changes?",
"Distance to city centre": "{number}km to city centre",
@@ -230,6 +232,7 @@
"Type of bed": "Type of bed",
"Type of room": "Type of room",
"Use bonus cheque": "Use bonus cheque",
"Use code/voucher": "Use code/voucher",
"User information": "User information",
"View as list": "View as list",
"View as map": "View as map",
@@ -285,4 +288,4 @@
"spendable points expiring by": "{points} spendable points expiring by {date}",
"to": "to",
"uppercase letter": "uppercase letter"
}
}

5
i18n/dictionaries/fi.json
View File

@@ -60,6 +60,8 @@
"Day": "Päivä",
"Description": "Kuvaus",
"Destinations & hotels": "Kohteet ja hotellit",
"Disabled booking options header": "Olemme pahoillamme",
"Disabled booking options text": "Koodit, sekit ja palkintoillat eivät ole vielä saatavilla uudella verkkosivustolla.",
"Discard changes": "Hylkää muutokset",
"Discard unsaved changes?": "Hylkäätkö tallentamattomat muutokset?",
"Distance to city centre": "{number}km Etäisyys kaupunkiin",
@@ -228,6 +230,7 @@
"Type of bed": "Vuodetyyppi",
"Type of room": "Huonetyyppi",
"Use bonus cheque": "Käytä bonussekkiä",
"Use code/voucher": "Käytä koodia/voucheria",
"User information": "Käyttäjän tiedot",
"View as list": "Näytä listana",
"View as map": "Näytä kartalla",
@@ -281,4 +284,4 @@
"spendable points expiring by": "{points} pistettä vanhenee {date} mennessä",
"to": "to",
"uppercase letter": "iso kirjain"
}
}

5
i18n/dictionaries/no.json
View File

@@ -60,6 +60,8 @@
"Day": "Dag",
"Description": "Beskrivelse",
"Destinations & hotels": "Destinasjoner og hoteller",
"Disabled booking options header": "Vi beklager",
"Disabled booking options text": "Koder, checks og belønningsnætter er enda ikke tilgjengelige på den nye nettsiden.",
"Discard changes": "Forkaste endringer",
"Discard unsaved changes?": "Forkaste endringer som ikke er lagret?",
"Distance to city centre": "{number}km til sentrum",
@@ -228,6 +230,7 @@
"Type of bed": "Sengtype",
"Type of room": "Romtype",
"Use bonus cheque": "Bruk bonussjekk",
"Use code/voucher": "Bruk kode/voucher",
"User information": "Brukerinformasjon",
"View as list": "Vis som liste",
"View as map": "Vis som kart",
@@ -281,4 +284,4 @@
"spendable points expiring by": "{points} Brukbare poeng utløper innen {date}",
"to": "til",
"uppercase letter": "stor bokstav"
}
}

7
i18n/dictionaries/sv.json
View File

@@ -60,6 +60,8 @@
"Day": "Dag",
"Description": "Beskrivning",
"Destinations & hotels": "Destinationer & hotell",
"Disabled booking options header": "Vi beklagar",
"Disabled booking options text": "Koder, bonuscheckar och belöningsnätter är inte tillgängliga på den nya webbplatsen än.",
"Discard changes": "Ignorera ändringar",
"Discard unsaved changes?": "Vill du ignorera ändringar som inte har sparats?",
"Distance to city centre": "{number}km till centrum",
@@ -227,7 +229,8 @@
"Tripadvisor reviews": "{rating} ({count} recensioner på Tripadvisor)",
"Type of bed": "Sängtyp",
"Type of room": "Rumstyp",
"Use bonus cheque": "Use bonus cheque",
"Use bonus cheque": "Använd bonuscheck",
"Use code/voucher": "Använd kod/voucher",
"User information": "Användarinformation",
"View as list": "Visa som lista",
"View as map": "Visa som karta",
@@ -281,4 +284,4 @@
"spendable points expiring by": "{points} poäng förfaller {date}",
"to": "till",
"uppercase letter": "stor bokstav"
}
}

9
types/components/form/bookingwidget.ts
View File

@@ -1,4 +1,9 @@
import type { BookingWidgetType } from "@/types/components/bookingWidget"
import { FormState, UseFormReturn } from "react-hook-form"
import type {
BookingWidgetSchema,
BookingWidgetType,
} from "@/types/components/bookingWidget"
import type { Location, Locations } from "@/types/trpc/routers/hotel/locations"
export interface BookingWidgetFormProps {
@@ -8,6 +13,8 @@ export interface BookingWidgetFormProps {
export interface BookingWidgetFormContentProps {
locations: Locations
formId: string
formState: FormState<BookingWidgetSchema>
}
export enum ActionType {

22
types/components/tooltip.ts Normal file
View File

@@ -0,0 +1,22 @@
export type TooltipPosition = "left" | "right" | "top" | "bottom"
type VerticalArrow = "top" | "bottom" | "center"
type HorizontalArrow = "left" | "right" | "center"
type ValidArrowMap = {
left: VerticalArrow
right: VerticalArrow
top: HorizontalArrow
bottom: HorizontalArrow
}
type ValidArrow<P extends TooltipPosition> = P extends keyof ValidArrowMap
? ValidArrowMap[P]
: never
export interface TooltipProps<P extends TooltipPosition = TooltipPosition> {
heading?: string
text?: string
position: P
arrow: ValidArrow<P>
children: React.ReactNode
}