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

fix(SW-1631): add rate terms modal

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


Approved-by: Simon.Emanuelsson

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Campaign.tsx

@@ -60,6 +60,24 @@ export default function Campaign({
       )
     }
 
+    const rateTermDetails = product.rateDefinitionMember
+      ? [
+          {
+            title: product.rateDefinition.title,
+            terms: product.rateDefinition.generalTerms,
+          },
+          {
+            title: product.rateDefinitionMember.title,
+            terms: product.rateDefinition.generalTerms,
+          },
+        ]
+      : [
+          {
+            title: product.rateDefinition.title,
+            terms: product.rateDefinition.generalTerms,
+          },
+        ]
+
     const isSelected = isSelectedPriceProduct(
       product,
       selectedRate,
@@ -149,6 +167,7 @@ export default function Campaign({
               }
             : undefined
         }
+        rateTermDetails={rateTermDetails}
         value={product.public.rateCode}
       />
     )

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Code.tsx

@@ -43,6 +43,23 @@ export default function Code({
     } else {
       bannerText = `${bookingCode} ∙ ${intl.formatMessage({ id: "Breakfast excluded" })}`
     }
+    const rateTermDetails = product.rateDefinitionMember
+      ? [
+          {
+            title: product.rateDefinition.title,
+            terms: product.rateDefinition.generalTerms,
+          },
+          {
+            title: product.rateDefinitionMember.title,
+            terms: product.rateDefinition.generalTerms,
+          },
+        ]
+      : [
+          {
+            title: product.rateDefinition.title,
+            terms: product.rateDefinition.generalTerms,
+          },
+        ]
 
     if ("corporateCheque" in product) {
       const { localPrice, rateCode } = product.corporateCheque
@@ -71,6 +88,7 @@ export default function Code({
             unit: localPrice.currency ?? "",
           }}
           rateTitle={rateTitles[product.rate].title}
+          rateTermDetails={rateTermDetails}
           value={rateCode}
         />
       )
@@ -93,6 +111,7 @@ export default function Code({
             unit: intl.formatMessage({ id: "Voucher" }).toUpperCase(),
           }}
           rateTitle={rateTitles[product.rate].title}
+          rateTermDetails={rateTermDetails}
           value={rateCode}
         />
       )
@@ -151,6 +170,7 @@ export default function Code({
             unit: `${localPrice.currency}/${night}`,
           }}
           rateTitle={rateTitles[product.rate].title}
+          rateTermDetails={rateTermDetails}
           value={rateCode}
         />
       )

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Redemptions.tsx

@@ -76,6 +76,13 @@ export default function Redemptions({
     ? `${rewardNight} ∙ ${breakfastIncluded}`
     : `${rewardNight} ∙ ${breakfastExcluded}`
 
+  const rateTermDetails = [
+    {
+      title: rateTitles[firstRedemption.rate].title,
+      terms: firstRedemption.rateDefinition.generalTerms,
+    },
+  ]
+
   return (
     <PointsRateCard
       key={firstRedemption.rate}
@@ -84,6 +91,7 @@ export default function Redemptions({
       paymentTerm={rateTitles[firstRedemption.rate].paymentTerm}
       rates={rates}
       rateTitle={rateTitles[firstRedemption.rate].title}
+      rateTermDetails={rateTermDetails}
       selectedRate={selectedRateCode}
       isNotEnoughPoints={notEnoughPoints}
       notEnoughPointsText={intl.formatMessage({ id: "Not enough points" })}

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Regular.tsx

@@ -145,6 +145,24 @@ export default function Regular({
       roomTypeCode
     )
 
+    const rateTermDetails = product.rateDefinitionMember
+      ? [
+          {
+            title: product.rateDefinition.title,
+            terms: product.rateDefinition.generalTerms,
+          },
+          {
+            title: product.rateDefinitionMember.title,
+            terms: product.rateDefinition.generalTerms,
+          },
+        ]
+      : [
+          {
+            title: product.rateDefinition.title,
+            terms: product.rateDefinition.generalTerms,
+          },
+        ]
+
     return (
       <RegularRateCard
         {...rates}
@@ -157,6 +175,7 @@ export default function Regular({
         paymentTerm={rateTitles[product.rate].paymentTerm}
         rateTitle={rateTitles[product.rate].title}
         value={rateCode}
+        rateTermDetails={rateTermDetails}
       />
     )
   })

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/index.tsx

@@ -57,7 +57,6 @@ export default function Rates({
       petRoomPackageSelected && petRoomPackage ? petRoomPackage : undefined,
     roomTypeCode,
   }
-
   const showAllRates = selectedFilter === BookingCodeFilterEnum.All
   const hasBookingCodeRates = !!(campaign.length || code.length)
   const hasRegularRates = !!regular.length

apps/scandic-web/server/routers/hotels/output.ts

@@ -338,12 +338,15 @@ export const roomsAvailabilitySchema = z
                 ...product,
                 public: null,
               })
-              if (rateDetailsMember) {
+
-                breakfastIncludedMember.push(
-                  rateDetailsMember.breakfastIncluded
-                )
-              }
               if (rateDetails && rateCode) {
+                if (rateDetailsMember) {
+                  breakfastIncludedMember.push(
+                    rateDetailsMember.breakfastIncluded
+                  )
+                  rateDetails.rateDefinitionMember =
+                    rateDetailsMember.rateDefinition
+                }
                 const rateDefinition = findRateDefintion(rateCode)
                 if (rateDefinition) {
                   switch (rateDefinition.rateType) {

apps/scandic-web/server/routers/hotels/schemas/roomAvailability/product.ts

@@ -18,7 +18,7 @@ const baseProductSchema = z.object({
   breakfastIncluded: z.boolean().default(false),
   // Used to set the rate that we use to chose titles etc.
   rate: z.enum(["change", "flex", "save"]).default("save"),
-  rateDefinition: rateDefinitionSchema.nullish().transform((val) =>
+  rateDefinition: rateDefinitionSchema.optional().transform((val) =>
     val
       ? val
       : {
@@ -36,6 +36,7 @@ const baseProductSchema = z.object({
           title: "",
         }
   ),
+  rateDefinitionMember: rateDefinitionSchema.optional(),
 })
 
 function mapBaseProduct(baseProduct: typeof baseProductSchema._type) {
@@ -44,6 +45,7 @@ function mapBaseProduct(baseProduct: typeof baseProductSchema._type) {
     breakfastIncluded: baseProduct.breakfastIncluded,
     rate: baseProduct.rate,
     rateDefinition: baseProduct.rateDefinition,
+    rateDefinitionMember: baseProduct.rateDefinitionMember,
   }
 }
 
@@ -98,12 +100,14 @@ export const redemptionsProduct = z
               breakfastIncluded,
               rate,
               rateDefinition,
+              rateDefinitionMember,
               ...redemption
             }) => ({
               bookingCode,
               breakfastIncluded,
               rate,
               rateDefinition,
+              rateDefinitionMember,
               redemption,
             })
           )

apps/scandic-web/server/routers/hotels/schemas/roomAvailability/rateDefinition.ts

@@ -1,6 +1,7 @@
-import { nullableStringValidator } from "@/utils/zod/stringValidator"
 import { z } from "zod"
 
+import { nullableStringValidator } from "@/utils/zod/stringValidator"
+
 export const rateDefinitionSchema = z.object({
   breakfastIncluded: z.boolean(),
   cancellationRule: z.string(),

apps/scandic-web/types/components/hotelReservation/selectRate/rates.ts

@@ -8,11 +8,9 @@ export interface RatesProps {
   roomConfiguration: RoomConfiguration
 }
 
-export interface SharedRateCardProps extends Pick<
+export interface SharedRateCardProps
-  RoomConfiguration,
+  extends Pick<RoomConfiguration, "roomTypeCode"> {
-  "roomTypeCode"
-> {
   handleSelectRate: (product: Product) => void
   nights: number
   petRoomPackage: NonNullable<Packages>[number] | undefined
-}
+}

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

@@ -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'],
+      },
+    ],
   },
 }

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

@@ -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
+                <Modal
-                  variant="Icon"
+                  title={rateTitle}
-                  color="IconDefault"
+                  subtitle={paymentTerm}
-                  size="Small"
+                  trigger={
-                  onPress={handleTermsClick}
+                    <Button variant="Icon" color="IconDefault" size="Small">
+                      <MaterialIcon
+                        icon="info"
+                        size={20}
+                        color="CurrentColor"
+                      />
+                    </Button>
+                  }
                 >
-                  <MaterialIcon icon="info" size={20} color="CurrentColor" />
+                  {rateTermDetails.map((termGroup) => (
-                </Button>
+                    <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}`}

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

@@ -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'],
+      },
+    ],
   },
 }

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

@@ -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
+                <Modal
-                  variant="Icon"
+                  title={rateTitle}
-                  color="IconDefault"
+                  subtitle={paymentTerm}
-                  size="Small"
+                  trigger={
-                  onPress={handleTermsClick}
+                    <Button variant="Icon" color="IconDefault" size="Small">
+                      <MaterialIcon
+                        icon="info"
+                        size={20}
+                        color="CurrentColor"
+                      />
+                    </Button>
+                  }
                 >
-                  <MaterialIcon icon="info" size={20} color="CurrentColor" />
+                  {rateTermDetails.map((termGroup) => (
-                </Button>
+                    <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}`}

packages/design-system/lib/components/RateCard/Modal/index.tsx

@@ -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>
+  )
+}

packages/design-system/lib/components/RateCard/Modal/modal.module.css

@@ -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);
+  }
+}

packages/design-system/lib/components/RateCard/Modal/modal.ts

@@ -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>>
+}

packages/design-system/lib/components/RateCard/Modal/motionVariants.ts

@@ -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' },
+  },
+}

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

@@ -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
+              <Button variant="Icon" color="IconDefault" size="Small">
-                variant="Icon"
-                color="IconDefault"
-                size="Small"
-                onPress={handleTermsClick}
-              >
                 <MaterialIcon icon="info" size={20} color="CurrentColor" />
               </Button>
               {`${rateTitle} / ${paymentTerm}`}

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

@@ -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'],
+      },
+    ],
   },
 }

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

@@ -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
+              <Modal
-                variant="Icon"
+                title={rateTitle}
-                color="IconDefault"
+                subtitle={paymentTerm}
-                size="Small"
+                trigger={
-                onPress={handleTermsClick}
+                  <Button variant="Icon" color="IconDefault" size="Small">
+                    <MaterialIcon icon="info" size={20} color="CurrentColor" />
+                  </Button>
+                }
               >
-                <MaterialIcon icon="info" size={20} color="CurrentColor" />
+                {rateTermDetails.map((termGroup) => (
-              </Button>
+                  <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}`}

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

@@ -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'],
+      },
+    ],
   },
 }

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

@@ -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
+                <Modal
-                  variant="Icon"
+                  title={rateTitle}
-                  color="IconDefault"
+                  subtitle={paymentTerm}
-                  size="Small"
+                  trigger={
-                  onPress={handleTermsClick}
+                    <Button variant="Icon" color="IconDefault" size="Small">
+                      <MaterialIcon
+                        icon="info"
+                        size={20}
+                        color="CurrentColor"
+                      />
+                    </Button>
+                  }
                 >
-                  <MaterialIcon icon="info" color="CurrentColor" />
+                  {rateTermDetails.map((termGroup) => (
-                </Button>
+                    <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}`}

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

@@ -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);
 }

packages/design-system/lib/components/RateCard/types.ts

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

packages/design-system/package.json

@@ -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",

yarn.lock

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