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