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

Merged in feat/BOOK-529-update-GLA-design-mystay (pull request #3230)

Browse Source 
Feat/BOOK-529 update GLA design mystay

* feat(BOOK-529): update gla design on my stay

* feat(BOOK-529): open gla modal if error

* feat(BOOK-529): add inline accordion to storybook

* feat(529): move errormessage below message

* feat(529): update infomodal

* feat(BOOK-529): update infomodal

* feat(BOOK-529): hide guarantee info for adding ancillaries if prepaid

* feat(BOOK-529): update width on info dialog

* feat(BOOK-529): fix alignment

* feat(BOOK-529): check if member price

* feat(BOOK-529): refactor msg

* feat(BOOK-529): refactor terms and conditions to own component

* feat(BOOK-529): clean up confirmation step


Approved-by: Christel Westerberg
This commit is contained in:
Bianca Widstam
2025-11-28 14:27:25 +00:00
parent 22dd2f60fe
commit 46fa42750f
39 changed files with 681 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/design-system/lib/components/Form/PaymentOption/PaymentOption.tsx
View File

@@ -12,11 +12,13 @@ export type PaymentOptionProps = {
value: PaymentMethodEnum
label: string
cardNumber?: string
hideRadioButton?: boolean
}
export function PaymentOption({
value,
label,
cardNumber,
hideRadioButton = false,
}: PaymentOptionProps) {
return (
<Radio
@@ -28,10 +30,12 @@ export function PaymentOption({
{({ isSelected }) => (
<>
<div className={styles.titleContainer}>
<span
className={cx(styles.radio, { [styles.selected]: isSelected })}
aria-hidden
/>
{!hideRadioButton && (
<span
className={cx(styles.radio, { [styles.selected]: isSelected })}
aria-hidden
/>
)}
<Typography variant="Body/Paragraph/mdRegular">
<Label>{label}</Label>
</Typography>

54
packages/design-system/lib/components/Form/SelectPaymentMethod/index.tsx
View File

@@ -31,12 +31,19 @@ export function SelectPaymentMethod({
formName,
}: SelectPaymentMethodProps) {
const intl = useIntl()
const hasSavedCards = paymentMethods.length > 0
if (!hasSavedCards) {
return null
}
const mySavedCardsLabel = paymentMethods.length
? intl.formatMessage({
id: 'payment.mySavedCards',
defaultMessage: 'My saved cards',
})
: undefined
const otherCardLabel = paymentMethods.length
? intl.formatMessage({
id: 'common.other',
@@ -44,8 +51,6 @@ export function SelectPaymentMethod({
})
: undefined
const hasSavedCards = paymentMethods.length > 0
return (
<section className={styles.section}>
<PaymentOptionsGroup
@@ -63,32 +68,27 @@ export function SelectPaymentMethod({
defaultMessage: 'Card options',
})}
</Label>
{hasSavedCards ? (
<>
<Typography variant="Title/Overline/sm">
<span>{mySavedCardsLabel}</span>
</Typography>
{paymentMethods?.map((paymentMethods) => {
const label =
PAYMENT_METHOD_TITLES[paymentMethods.cardType] ||
paymentMethods.alias ||
paymentMethods.cardType
return (
<PaymentOption
key={paymentMethods.id}
value={paymentMethods.id as PaymentMethodEnum}
label={label}
cardNumber={paymentMethods.truncatedNumber}
/>
)
})}
<Typography variant="Title/Overline/sm">
<span>{otherCardLabel}</span>
</Typography>
</>
) : null}
<Typography variant="Title/Overline/sm">
<span>{mySavedCardsLabel}</span>
</Typography>
{paymentMethods?.map((paymentMethods) => {
const label =
PAYMENT_METHOD_TITLES[paymentMethods.cardType] ||
paymentMethods.alias ||
paymentMethods.cardType
return (
<PaymentOption
key={paymentMethods.id}
value={paymentMethods.id as PaymentMethodEnum}
label={label}
cardNumber={paymentMethods.truncatedNumber}
/>
)
})}
<Typography variant="Title/Overline/sm">
<span>{otherCardLabel}</span>
</Typography>
<PaymentOption
value={PAYMENT_METHOD_TITLES.card as PaymentMethodEnum}
label={intl.formatMessage({