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

Merged in fix/SW-1631-rate-terms-modal (pull request #1699)

Browse Source 
fix(SW-1631): add rate terms modal

* fix(SW-1631): add rate terms modal


Approved-by: Simon.Emanuelsson
This commit is contained in:
Arvid Norlin
2025-04-02 09:36:53 +00:00
parent be04600863
commit 961e8aea91
26 changed files with 690 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/design-system/lib/components/RateCard/Campaign/Campaign.stories.tsx
View File

@@ -20,6 +20,7 @@ const meta: Meta<typeof CampaignRateCard> = {
omnibusRate: { control: 'object' },
comparisonRate: { control: 'object' },
approximateRate: { control: 'object' },
rateTermDetails: { control: 'object' },
},
}
@@ -47,6 +48,12 @@ export const Default: Story = {
label: 'Lowest past price (last 30 days)',
unit: 'EUR',
},
rateTermDetails: [
{
title: 'Rate definition 1',
terms: ['term 1', 'term 2', 'term 3'],
},
],
},
}
@@ -65,6 +72,12 @@ export const Package: Story = {
label: 'Approx.',
unit: 'EUR',
},
rateTermDetails: [
{
title: 'Rate definition 1',
terms: ['term 1', 'term 2', 'term 3'],
},
],
},
}
@@ -88,6 +101,12 @@ export const CampaignLoggedIn: Story = {
unit: 'EUR/NIGHT',
},
isHighlightedRate: true,
rateTermDetails: [
{
title: 'Rate definition 1',
terms: ['term 1', 'term 2', 'term 3'],
},
],
},
}
@@ -116,5 +135,11 @@ export const CampaignOmnibus: Story = {
label: 'Lowest past price (last 30 days)',
unit: 'EUR',
},
rateTermDetails: [
{
title: 'Rate definition 1',
terms: ['term 1', 'term 2', 'term 3'],
},
],
},
}

46
packages/design-system/lib/components/RateCard/Campaign/index.tsx
View File

@@ -1,10 +1,11 @@
import { Typography } from '../../Typography'
import { Rate } from '../types'
import { Rate, RateTermDetails } from '../types'
import styles from '../rate-card.module.css'
import { Button } from '../../Button'
import { variants } from '../variants'
import { MaterialIcon } from '../../Icons'
import Modal from '../Modal'
interface CampaignRateCardProps {
name: string
@@ -21,6 +22,7 @@ interface CampaignRateCardProps {
approximateRate?: Rate
handleChange: () => void
handleTermsClick?: () => void
rateTermDetails: RateTermDetails[]
}
export default function CampaignRateCard({
@@ -37,7 +39,7 @@ export default function CampaignRateCard({
bannerText,
isHighlightedRate,
handleChange,
handleTermsClick,
rateTermDetails,
}: CampaignRateCardProps) {
const classNames = variants({
variant: 'Campaign',
@@ -61,14 +63,40 @@ export default function CampaignRateCard({
<header>
<Typography variant="Tag/sm">
<h3 className={styles.title}>
<Button
variant="Icon"
color="IconDefault"
size="Small"
onPress={handleTermsClick}
<Modal
title={rateTitle}
subtitle={paymentTerm}
trigger={
<Button variant="Icon" color="IconDefault" size="Small">
<MaterialIcon
icon="info"
size={20}
color="CurrentColor"
/>
</Button>
}
>
<MaterialIcon icon="info" size={20} color="CurrentColor" />
</Button>
{rateTermDetails.map((termGroup) => (
<div key={termGroup.title} className={styles.terms}>
<Typography variant={'Body/Paragraph/mdBold'}>
<p>{termGroup.title}</p>
</Typography>
{termGroup.terms.map((term) => (
<Typography key={term}>
<p className={styles.term}>
<MaterialIcon
icon="check"
color="Icon/Feedback/Success"
size={20}
className={styles.termsIcon}
/>
{term}
</p>
</Typography>
))}
</div>
))}
</Modal>
{rateTitle}
<span className={styles.textSecondary}>
{` / ${paymentTerm}`}

43
packages/design-system/lib/components/RateCard/Code/Code.stories.tsx
View File

@@ -16,6 +16,7 @@ const meta: Meta<typeof CodeRateCard> = {
paymentTerm: { control: 'text' },
rate: { control: 'object' },
approximateRate: { control: 'object' },
rateTermDetails: { contorlr: 'object' },
},
}
@@ -38,6 +39,12 @@ export const Default: Story = {
label: 'Approx.',
unit: 'EUR',
},
rateTermDetails: [
{
title: 'Rate definition 1',
terms: ['term 1', 'term 2', 'term 3'],
},
],
},
}
@@ -51,6 +58,12 @@ export const Voucher: Story = {
price: '1',
unit: 'VOUCHER',
},
rateTermDetails: [
{
title: 'Rate definition 1',
terms: ['term 1', 'term 2', 'term 3'],
},
],
},
}
@@ -69,6 +82,12 @@ export const CorporateCheck: Story = {
label: 'Approx.',
unit: 'EUR',
},
rateTermDetails: [
{
title: 'Rate definition 1',
terms: ['term 1', 'term 2', 'term 3'],
},
],
},
}
@@ -87,6 +106,12 @@ export const DNumberDefault: Story = {
label: 'Approx.',
unit: 'EUR',
},
rateTermDetails: [
{
title: 'Rate definition 1',
terms: ['term 1', 'term 2', 'term 3'],
},
],
},
}
@@ -106,6 +131,12 @@ export const DNumberHighlightedRate: Story = {
unit: 'EUR',
},
isHighlightedRate: true,
rateTermDetails: [
{
title: 'Rate definition 1',
terms: ['term 1', 'term 2', 'term 3'],
},
],
},
}
@@ -124,6 +155,12 @@ export const LNumberDefault: Story = {
label: 'Approx.',
unit: 'EUR',
},
rateTermDetails: [
{
title: 'Rate definition 1',
terms: ['term 1', 'term 2', 'term 3'],
},
],
},
}
@@ -146,5 +183,11 @@ export const LNumberStrikethrough: Story = {
label: 'Approx.',
unit: 'EUR',
},
rateTermDetails: [
{
title: 'Rate definition 1',
terms: ['term 1', 'term 2', 'term 3'],
},
],
},
}

46
packages/design-system/lib/components/RateCard/Code/index.tsx
View File

@@ -1,10 +1,11 @@
import { Rate } from '../types'
import { Rate, RateTermDetails } from '../types'
import styles from '../rate-card.module.css'
import { Typography } from '../../Typography'
import { Button } from '../../Button'
import { variants } from '../variants'
import { MaterialIcon } from '../../Icons'
import Modal from '../Modal'
interface CodeRateCardProps {
name: string
@@ -19,6 +20,7 @@ interface CodeRateCardProps {
isHighlightedRate?: boolean
handleChange: () => void
handleTermsClick?: () => void
rateTermDetails: RateTermDetails[]
}
export default function CodeRateCard({
@@ -33,7 +35,7 @@ export default function CodeRateCard({
bannerText,
isHighlightedRate,
handleChange,
handleTermsClick,
rateTermDetails,
}: CodeRateCardProps) {
const classNames = variants({
variant: 'Code',
@@ -57,14 +59,40 @@ export default function CodeRateCard({
<header>
<Typography variant="Tag/sm">
<h3 className={styles.title}>
<Button
variant="Icon"
color="IconDefault"
size="Small"
onPress={handleTermsClick}
<Modal
title={rateTitle}
subtitle={paymentTerm}
trigger={
<Button variant="Icon" color="IconDefault" size="Small">
<MaterialIcon
icon="info"
size={20}
color="CurrentColor"
/>
</Button>
}
>
<MaterialIcon icon="info" size={20} color="CurrentColor" />
</Button>
{rateTermDetails.map((termGroup) => (
<div key={termGroup.title} className={styles.terms}>
<Typography variant={'Body/Paragraph/mdBold'}>
<p>{termGroup.title}</p>
</Typography>
{termGroup.terms.map((term) => (
<Typography key={term}>
<p className={styles.term}>
<MaterialIcon
icon="check"
color="Icon/Feedback/Success"
size={20}
className={styles.termsIcon}
/>
{term}
</p>
</Typography>
))}
</div>
))}
</Modal>
{rateTitle}
<span className={styles.textSecondary}>
{` / ${paymentTerm}`}

174
packages/design-system/lib/components/RateCard/Modal/index.tsx Normal file
View File

@@ -0,0 +1,174 @@
'use client'
import { motion } from 'framer-motion'
import { type PropsWithChildren, useEffect, useState } from 'react'
import {
Dialog,
DialogTrigger,
Modal as AriaModal,
ModalOverlay,
} from 'react-aria-components'
import {
type AnimationState,
AnimationStateEnum,
type InnerModalProps,
type ModalProps,
} from './modal'
import { fade, slideInOut } from './motionVariants'
import styles from './modal.module.css'
import { Typography } from '../../Typography'
import { MaterialIcon } from '../../Icons'
const MotionOverlay = motion(ModalOverlay)
const MotionModal = motion(AriaModal)
function InnerModal({
animation,
onAnimationComplete = () => undefined,
setAnimation,
onToggle,
isOpen,
children,
title,
subtitle,
hideHeader,
}: PropsWithChildren<InnerModalProps>) {
function modalStateHandler(newAnimationState: AnimationState) {
setAnimation((currentAnimationState) =>
newAnimationState === AnimationStateEnum.hidden &&
currentAnimationState === AnimationStateEnum.hidden
? AnimationStateEnum.unmounted
: currentAnimationState
)
if (newAnimationState === AnimationStateEnum.visible) {
onAnimationComplete()
}
}
function onOpenChange(state: boolean) {
onToggle!(state)
}
return (
<MotionOverlay
animate={animation}
className={styles.overlay}
initial={'hidden'}
isDismissable
isExiting={animation === AnimationStateEnum.hidden}
onAnimationComplete={modalStateHandler}
variants={fade}
isOpen={isOpen}
onOpenChange={onOpenChange}
>
<MotionModal
className={styles.modal}
variants={slideInOut}
animate={animation}
initial={'hidden'}
>
<Dialog className={styles.dialog}>
{({ close }) => (
<>
{!hideHeader && (
<header className={styles.header}>
<div>
{title && (
<Typography variant="Title/Subtitle/lg">
<p>{title}</p>
</Typography>
)}
{subtitle && (
<Typography variant="Body/Lead text">
<span>{subtitle}</span>
</Typography>
)}
</div>
<button
onClick={close}
type="button"
className={styles.close}
>
<MaterialIcon icon="close" color="Icon/Feedback/Neutral" />
</button>
</header>
)}
<section className={styles.content}>{children}</section>
</>
)}
</Dialog>
</MotionModal>
</MotionOverlay>
)
}
export default function Modal({
onAnimationComplete = () => undefined,
trigger,
isOpen,
onToggle,
title,
subtitle,
children,
withActions = false,
hideHeader = false,
}: PropsWithChildren<ModalProps>) {
const [animation, setAnimation] = useState<AnimationState>(
AnimationStateEnum.visible
)
useEffect(() => {
if (typeof isOpen === 'boolean') {
setAnimation(
isOpen ? AnimationStateEnum.visible : AnimationStateEnum.hidden
)
}
if (isOpen === undefined) {
setAnimation(AnimationStateEnum.unmounted)
}
}, [isOpen])
if (!trigger) {
return (
<InnerModal
onAnimationComplete={onAnimationComplete}
animation={animation}
setAnimation={setAnimation}
onToggle={onToggle}
isOpen={isOpen}
title={title}
subtitle={subtitle}
withActions={withActions}
hideHeader={hideHeader}
>
{children}
</InnerModal>
)
}
return (
<DialogTrigger
onOpenChange={(isOpen) =>
setAnimation(
isOpen ? AnimationStateEnum.visible : AnimationStateEnum.hidden
)
}
>
{trigger}
<InnerModal
onAnimationComplete={onAnimationComplete}
animation={animation}
setAnimation={setAnimation}
title={title}
subtitle={subtitle}
withActions={withActions}
>
{children}
</InnerModal>
</DialogTrigger>
)
}

99
packages/design-system/lib/components/RateCard/Modal/modal.module.css Normal file
View File

@@ -0,0 +1,99 @@
:root {
--max-width-navigation: 89.5rem;
--max-width-spacing: calc(var(--Space-x2) * 2);
--max-width-page: min(
calc(100dvw - var(--max-width-spacing)),
var(--max-width-navigation)
);
}
.overlay {
background: rgba(0, 0, 0, 0.5);
height: var(--visual-viewport-height);
position: fixed;
top: 0;
left: 0;
width: 100vw;
z-index: 100;
}
.modal {
background-color: var(--Neutral-0);
border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0;
box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
width: 100%;
position: absolute;
left: 0;
bottom: 0;
z-index: 101;
}
.dialog {
display: flex;
flex-direction: column;
/* For removing focus outline when modal opens first time */
outline: 0 none;
/* for supporting animations within content */
position: relative;
overflow: hidden;
max-height: 100dvh;
}
.header {
box-sizing: content-box;
display: flex;
align-items: flex-start;
gap: var(--Space-x3);
justify-content: space-between;
min-height: min-content;
position: relative;
padding: var(--Space-x3) var(--Space-x3) 0;
}
.content {
display: flex;
flex-direction: column;
/* align-items: center; */
gap: var(--Space-x2);
overflow: auto;
padding: var(--Space-x3);
}
.close {
background: none;
border: none;
cursor: pointer;
padding: 0;
}
@media screen and (min-width: 768px) {
:root {
--max-width-spacing: calc(var(--Space-x3) * 2);
}
.overlay {
display: flex;
justify-content: center;
align-items: center;
}
.modal {
left: auto;
bottom: auto;
width: auto;
border-radius: var(--Corner-radius-md);
max-width: var(--max-width-page);
}
.dialog {
max-height: 90dvh;
}
}
@media screen and (min-width: 1367px) {
:root {
--max-width-spacing: calc(var(--Space-x5) * 2);
}
}

29
packages/design-system/lib/components/RateCard/Modal/modal.ts Normal file
View File

@@ -0,0 +1,29 @@
import type { Dispatch, SetStateAction } from 'react'
export enum AnimationStateEnum {
unmounted = 'unmounted',
hidden = 'hidden',
visible = 'visible',
}
export type AnimationState = keyof typeof AnimationStateEnum
export type ModalProps = {
onAnimationComplete?: VoidFunction
title?: string
subtitle?: string
withActions?: boolean
hideHeader?: boolean
} & (
| { trigger: JSX.Element; isOpen?: never; onToggle?: never }
| {
trigger?: never
isOpen: boolean
onToggle: (open: boolean) => void
}
)
export type InnerModalProps = Omit<ModalProps, 'trigger'> & {
animation: AnimationState
setAnimation: Dispatch<SetStateAction<AnimationState>>
}

36
packages/design-system/lib/components/RateCard/Modal/motionVariants.ts Normal file
View File

@@ -0,0 +1,36 @@
export const fade = {
hidden: {
opacity: 0,
transition: { duration: 0.4, ease: 'easeInOut' },
},
visible: {
opacity: 1,
transition: { duration: 0.4, ease: 'easeInOut' },
},
}
export const slideInOut = {
hidden: {
opacity: 0,
y: 32,
transition: { duration: 0.4, ease: 'easeInOut' },
},
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.4, ease: 'easeInOut' },
},
}
export const slideFromTop = {
hidden: {
opacity: 0,
y: -32,
transition: { duration: 0.4, ease: 'easeInOut' },
},
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.4, ease: 'easeInOut' },
},
}

9
packages/design-system/lib/components/RateCard/NoRateAvailable/index.tsx
View File

@@ -10,7 +10,6 @@ interface NoRateAvailableCardProps {
paymentTerm: string
bannerText?: string
noPricesAvailableText: string
handleTermsClick?: () => void
}
export default function NoRateAvailableCard({
@@ -19,7 +18,6 @@ export default function NoRateAvailableCard({
paymentTerm,
bannerText,
noPricesAvailableText,
handleTermsClick,
}: NoRateAvailableCardProps) {
const classNames = variants({
variant,
@@ -36,12 +34,7 @@ export default function NoRateAvailableCard({
<header>
<Typography variant="Tag/sm">
<h3 className={`${styles.title} ${styles.textDisabled}`}>
<Button
variant="Icon"
color="IconDefault"
size="Small"
onPress={handleTermsClick}
>
<Button variant="Icon" color="IconDefault" size="Small">
<MaterialIcon icon="info" size={20} color="CurrentColor" />
</Button>
{`${rateTitle} / ${paymentTerm}`}

19
packages/design-system/lib/components/RateCard/Points/Points.stories.tsx
View File

@@ -21,6 +21,7 @@ const meta: Meta<typeof PointsRateCard> = {
onRateSelect: { action: 'onRateSelect' },
isNotEnoughPoints: { control: 'boolean' },
notEnoughPointsText: { control: 'text' },
rateTermDetails: { control: 'object' },
},
}
@@ -60,6 +61,12 @@ export const Default: Story = {
],
selectedRate: undefined,
onRateSelect: (value) => console.log(value),
rateTermDetails: [
{
title: 'Rate definition 1',
terms: ['term 1', 'term 2', 'term 3'],
},
],
},
}
@@ -97,6 +104,12 @@ export const WithDisabledRates: Story = {
],
selectedRate: '2',
onRateSelect: (value) => console.log(value),
rateTermDetails: [
{
title: 'Rate definition 1',
terms: ['term 1', 'term 2', 'term 3'],
},
],
},
}
@@ -134,5 +147,11 @@ export const NotEnoughPoints: Story = {
isNotEnoughPoints: true,
notEnoughPointsText: 'Not enough points',
onRateSelect: (value) => console.log(value),
rateTermDetails: [
{
title: 'Rate definition 1',
terms: ['term 1', 'term 2', 'term 3'],
},
],
},
}

43
packages/design-system/lib/components/RateCard/Points/index.tsx
View File

@@ -1,5 +1,5 @@
import { Typography } from '../../Typography'
import { RatePointsOption } from '../types'
import { RatePointsOption, RateTermDetails } from '../types'
import styles from '../rate-card.module.css'
import { Button } from '../../Button'
@@ -7,6 +7,7 @@ import { Radio } from '../../Radio'
import { RadioGroup } from 'react-aria-components'
import { variants } from '../variants'
import { MaterialIcon } from '../../Icons'
import Modal from '../Modal'
interface PointsRateCardProps {
rateTitle: string
@@ -17,7 +18,7 @@ interface PointsRateCardProps {
onRateSelect: (value: string) => void
isNotEnoughPoints?: boolean
notEnoughPointsText?: string
handleTermsClick?: () => void
rateTermDetails: RateTermDetails[]
}
export default function PointsRateCard({
@@ -29,7 +30,7 @@ export default function PointsRateCard({
isNotEnoughPoints,
notEnoughPointsText,
onRateSelect,
handleTermsClick,
rateTermDetails,
}: PointsRateCardProps) {
const classNames = variants({
variant: 'Points',
@@ -44,14 +45,36 @@ export default function PointsRateCard({
<header>
<Typography variant="Tag/sm">
<h3 className={styles.title}>
<Button
variant="Icon"
color="IconDefault"
size="Small"
onPress={handleTermsClick}
<Modal
title={rateTitle}
subtitle={paymentTerm}
trigger={
<Button variant="Icon" color="IconDefault" size="Small">
<MaterialIcon icon="info" size={20} color="CurrentColor" />
</Button>
}
>
<MaterialIcon icon="info" size={20} color="CurrentColor" />
</Button>
{rateTermDetails.map((termGroup) => (
<div key={termGroup.title} className={styles.terms}>
<Typography variant={'Body/Paragraph/mdBold'}>
<p>{termGroup.title}</p>
</Typography>
{termGroup.terms.map((term) => (
<Typography key={term}>
<p className={styles.term}>
<MaterialIcon
icon="check"
color="Icon/Feedback/Success"
size={20}
className={styles.termsIcon}
/>
{term}
</p>
</Typography>
))}
</div>
))}
</Modal>
{rateTitle}
<span className={styles.textSecondary}>
{` / ${paymentTerm}`}

19
packages/design-system/lib/components/RateCard/Regular/Regular.stories.tsx
View File

@@ -18,6 +18,7 @@ const meta: Meta<typeof RegularRateCard> = {
memberRate: { control: 'object' },
omnibusRate: { control: 'object' },
approximateRate: { control: 'object' },
rateTermDetails: { control: 'object' },
},
}
@@ -51,6 +52,12 @@ export const Default: Story = {
price: '169',
unit: 'EUR',
},
rateTermDetails: [
{
title: 'Rate definition 1',
terms: ['term 1', 'term 2', 'term 3'],
},
],
},
}
@@ -76,6 +83,12 @@ export const Selected: Story = {
label: 'Approx.',
unit: 'EUR',
},
rateTermDetails: [
{
title: 'Rate definition 1',
terms: ['term 1', 'term 2', 'term 3'],
},
],
},
}
@@ -101,5 +114,11 @@ export const HidePublicRate: Story = {
unit: 'EUR',
},
hidePublicRate: true,
rateTermDetails: [
{
title: 'Rate definition 1',
terms: ['term 1', 'term 2', 'term 3'],
},
],
},
}

47
packages/design-system/lib/components/RateCard/Regular/index.tsx
View File

@@ -1,10 +1,11 @@
import { Rate } from '../types'
import { Rate, RateTermDetails } from '../types'
import styles from '../rate-card.module.css'
import { Typography } from '../../Typography'
import { Button } from '../../Button'
import { variants } from '../variants'
import { MaterialIcon } from '../../Icons'
import Modal from '../Modal'
interface RegularRateCardProps {
name: string
@@ -18,7 +19,7 @@ interface RegularRateCardProps {
approximateRate?: Rate
hidePublicRate?: boolean
handleChange: () => void
handleTermsClick?: () => void
rateTermDetails: RateTermDetails[]
}
export default function RegularRateCard({
@@ -33,7 +34,7 @@ export default function RegularRateCard({
memberRate,
hidePublicRate,
handleChange,
handleTermsClick,
rateTermDetails,
}: RegularRateCardProps) {
const classNames = variants({ variant: 'Regular' })
return (
@@ -51,14 +52,40 @@ export default function RegularRateCard({
<header>
<Typography variant="Tag/sm">
<h3 className={styles.title}>
<Button
variant="Icon"
color="IconDefault"
size="Small"
onPress={handleTermsClick}
<Modal
title={rateTitle}
subtitle={paymentTerm}
trigger={
<Button variant="Icon" color="IconDefault" size="Small">
<MaterialIcon
icon="info"
size={20}
color="CurrentColor"
/>
</Button>
}
>
<MaterialIcon icon="info" color="CurrentColor" />
</Button>
{rateTermDetails.map((termGroup) => (
<div key={termGroup.title} className={styles.terms}>
<Typography variant={'Body/Paragraph/mdBold'}>
<p>{termGroup.title}</p>
</Typography>
{termGroup.terms.map((term) => (
<Typography key={term}>
<p className={styles.term}>
<MaterialIcon
icon="check"
color="Icon/Feedback/Success"
size={20}
className={styles.termsIcon}
/>
{term}
</p>
</Typography>
))}
</div>
))}
</Modal>
{rateTitle}
<span className={styles.textSecondary}>
{` / ${paymentTerm}`}

11
packages/design-system/lib/components/RateCard/rate-card.module.css
View File

@@ -134,6 +134,17 @@
gap: var(--Space-x05);
}
.terms {
display: flex;
flex-direction: column;
gap: var(--Space-x1);
}
.term {
display: flex;
align-items: center;
gap: var(--Space-x1);
}
.variant-campaign {
background-color: var(--Surface-Brand-Primary-1-Default);
}

4
packages/design-system/lib/components/RateCard/types.ts
View File

@@ -16,3 +16,7 @@ type AdditionalPrice = {
price: string
currency: string
}
export type RateTermDetails = {
title: string
terms: string[]
}

1
packages/design-system/package.json
View File

@@ -78,6 +78,7 @@
"eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.18",
"eslint-plugin-storybook": "^0.11.2",
"framer-motion": "^11.3.28",
"glob": "^11.0.1",
"husky": "^9.1.7",
"jiti": "^1",