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