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

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
-                  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}`}