Create reusable CooperationActionBanner component (#2971)

* add reusable CooperationActionModal component

* add test for CooperationActionModal component

* add usage of CooperationActionModal component

* remove unused styles

* replace styled component with plain css

* add test for icon rendering

* rename CooperationActionModal to CooperationActionBanner

* fix component import path

src/containers/my-cooperations/accept-cooperation-close/AcceptCooperationClosing.styles.ts

@@ -1,27 +1,5 @@
-import palette from '~/styles/app-theme/app.pallete'
-
 export const styles = {
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    border: `1px solid ${palette.basic.pinkishRed}`,
-    backgroundColor: palette.basic.softGray,
-    borderRadius: '5px',
-    padding: '24px',
-    justifyContent: 'space-between',
-    gap: '16px'
-  },
-  span: {
-    fontWeight: '500'
-  },
-  title: {
-    color: palette.basic.mediumRed,
-    fontWeight: '500',
-    display: 'flex',
-    gap: '8px',
-    mb: '4px'
-  },
-  body: {
-    color: palette.basic.darkGray
+  boldText: {
+    fontWeight: 500
   }
 }

src/containers/my-cooperations/accept-cooperation-close/AcceptCooperationClosing.tsx

@@ -1,42 +1,44 @@
-import { Box, styled, Typography } from '@mui/material'
-import { FC } from 'react'
-import { styles } from './AcceptCooperationClosing.styles'
 import { ErrorOutlineRounded } from '@mui/icons-material'
-import Button from '~/design-system/components/button/Button'
+import { Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
+import CooperationActionBanner from '~/containers/my-cooperations/cooperation-action-banner/CooperationActionBanner'
+import Button from '~/design-system/components/button/Button'
+
+import { styles } from './AcceptCooperationClosing.styles'
 
 interface AcceptCooperationClosureProps {
   user: string
   onAccept: () => void
 }
 
-const BoldText = styled('span')({
-  fontWeight: 500
-})
-
-const AcceptCooperationClosing: FC<AcceptCooperationClosureProps> = ({
+const AcceptCooperationClosing: React.FC<AcceptCooperationClosureProps> = ({
   user,
   onAccept
 }) => {
   const { t } = useTranslation()
+
   return (
-    <Box sx={styles.root}>
-      <Box>
-        <Box sx={styles.title}>
-          <ErrorOutlineRounded />
-          <Typography>{t('titles.acceptCooperationClosing')}</Typography>
-        </Box>
-        <Typography sx={styles.body}>
-          <BoldText>{user}</BoldText>
+    <CooperationActionBanner
+      actionButtons={
+        <Button color='tonal-error' onClick={onAccept} size='xs'>
+          {t('cooperationDetailsPage.acceptBtn')}
+        </Button>
+      }
+      description={
+        <>
+          <Typography component='span' sx={styles.boldText}>
+            {user}
+          </Typography>
           {t('cooperationDetailsPage.closingMessage1')}
-          <BoldText>{t('cooperationDetailsPage.accessDuration')}</BoldText>
+          <Typography component='span' sx={styles.boldText}>
+            {t('cooperationDetailsPage.accessDuration')}
+          </Typography>
           {t('cooperationDetailsPage.closingMessage2')}
-        </Typography>
-      </Box>
-      <Button color='tonal-error' onClick={onAccept} size='xs'>
-        {t('cooperationDetailsPage.acceptBtn')}
-      </Button>
-    </Box>
+        </>
+      }
+      icon={<ErrorOutlineRounded />}
+      title={t('titles.acceptCooperationClosing')}
+    />
   )
 }
 

src/containers/my-cooperations/cooperation-action-banner/CooperationActionBanner.styles.ts

@@ -0,0 +1,44 @@
+import { type SxProps } from '@mui/material'
+
+import palette from '~/styles/app-theme/app.pallete'
+
+export const styles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: '20px',
+    padding: '24px',
+    border: `1px solid ${palette.basic.pinkishRed}`,
+    borderRadius: '5px',
+    backgroundColor: palette.basic.softGray
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    columnGap: '8px',
+    color: palette.basic.mediumRed
+  },
+  description: {
+    color: palette.basic.darkGray,
+    marginTop: '4px'
+  },
+  mainContentWrapper: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: {
+      xs: 'column',
+      sm: 'row'
+    },
+    justifyContent: 'space-between',
+    gap: '30px'
+  },
+  buttonsWrapper: {
+    display: 'flex',
+    columnGap: '15px',
+    alignItems: 'center',
+    alignSelf: {
+      xs: 'end',
+      sm: 'auto'
+    }
+  }
+} satisfies Record<string, SxProps>

src/containers/my-cooperations/cooperation-action-banner/CooperationActionBanner.tsx

@@ -0,0 +1,38 @@
+import { Box, Typography } from '@mui/material'
+
+import { type ReactNode } from 'react'
+import { styles } from './CooperationActionBanner.styles'
+
+type Properties = {
+  actionButtons?: ReactNode
+  children?: ReactNode
+  description: ReactNode
+  icon?: ReactNode
+  title: string
+}
+
+const CooperationActionBanner: React.FC<Properties> = ({
+  actionButtons,
+  children,
+  description,
+  icon,
+  title
+}) => {
+  return (
+    <Box sx={styles.container}>
+      <Box sx={styles.mainContentWrapper}>
+        <Box>
+          <Box sx={styles.header}>
+            {icon}
+            <Typography>{title}</Typography>
+          </Box>
+          <Typography sx={styles.description}>{description}</Typography>
+        </Box>
+        {actionButtons && <Box sx={styles.buttonsWrapper}>{actionButtons}</Box>}
+      </Box>
+      {children && <Box>{children}</Box>}
+    </Box>
+  )
+}
+
+export default CooperationActionBanner

tests/unit/containers/my-cooperations/cooperation-action-banner/CooperationActionBanner.spec.jsx

@@ -0,0 +1,34 @@
+import { ErrorOutlineRounded } from '@mui/icons-material'
+import { render, screen } from '@testing-library/react'
+import { beforeEach, expect } from 'vitest'
+
+import CooperationActionBanner from '~/containers/my-cooperations/cooperation-action-banner/CooperationActionBanner'
+
+describe('CooperationActionBanner', () => {
+  beforeEach(() => {
+    render(
+      <CooperationActionBanner
+        description='cooperationDetailsPage.closingMessage'
+        title='titles.acceptCooperationClosing'
+        children='cooperationDetailsPage.someAdditionalText'
+        icon={<ErrorOutlineRounded data-testid='icon-example' />}
+      />
+    )
+  })
+
+  it('should render the CooperationActionBanner with title, description, icon and children', () => {
+    const titleText = screen.getByText('titles.acceptCooperationClosing')
+    const descriptionText = screen.getByText(
+      'cooperationDetailsPage.closingMessage'
+    )
+    const childrenContent = screen.getByText(
+      'cooperationDetailsPage.someAdditionalText'
+    )
+    const icon = screen.getByTestId('icon-example')
+
+    expect(titleText).toBeInTheDocument()
+    expect(descriptionText).toBeInTheDocument()
+    expect(childrenContent).toBeInTheDocument()
+    expect(icon).toBeInTheDocument()
+  })
+})