feat(service-portal): generalize modal

libs/service-portal/core/src/components/Modal/Modal.css.ts

@@ -27,3 +27,13 @@ export const closeButton = style({
   right: theme.spacing['1'],
   zIndex: 2,
 })
+
+export const image = style({
+  display: 'none',
+  ...themeUtils.responsiveStyle({
+    lg: {
+      marginRight: `-${theme.spacing['2']}px`,
+      display: 'initial',
+    },
+  }),
+})

libs/service-portal/core/src/components/Modal/Modal.tsx

@@ -1,6 +1,14 @@
-import React, { FC, ReactElement } from 'react'
+import React, { FC, ReactElement, useEffect, useState } from 'react'
 import * as styles from './Modal.css'
-import { Box, ModalBase, Button } from '@island.is/island-ui/core'
+import {
+  Box,
+  Text,
+  ModalBase,
+  Button,
+  ButtonProps,
+  Inline,
+} from '@island.is/island-ui/core'
+import { useDebounce } from 'react-use'
 
 interface Props {
   id: string
@@ -10,6 +18,17 @@ interface Props {
   initialVisibility?: boolean
   disclosure?: ReactElement
   label?: string
+  title?: string
+  text?: string
+  buttons?: Array<{
+    id: ButtonProps['id']
+    type?: 'ghost' | 'primary' | 'utility'
+    onClick?: () => void
+    text?: string
+    loading?: boolean
+  }>
+  iconSrc?: string
+  iconAlt?: string
   /**
    * No styling. All callbacks available.
    */
@@ -24,12 +43,39 @@ export const Modal: FC<React.PropsWithChildren<Props>> = ({
   disclosure,
   isVisible,
   label,
+  title,
+  text,
+  buttons,
   initialVisibility = true,
   skeleton,
+  iconAlt,
+  iconSrc,
 }) => {
+  const [closing, setClosing] = useState(false)
+  const [startClosing, setStartClosing] = useState(false)
+
+  useEffect(() => {
+    if (closing) {
+      onCloseModal && onCloseModal()
+      setClosing(false)
+      setStartClosing(false)
+    }
+  }, [closing, onCloseModal])
+
+  useDebounce(
+    () => {
+      if (startClosing) {
+        setClosing(startClosing)
+      }
+    },
+    500,
+    [startClosing],
+  )
+
   const handleOnVisibilityChange = (isVisible: boolean) => {
-    !isVisible && onCloseModal && onCloseModal()
+    !isVisible && onCloseModal && setStartClosing(true)
   }
+
   return (
     <ModalBase
       baseId={id}
@@ -47,6 +93,10 @@ export const Modal: FC<React.PropsWithChildren<Props>> = ({
         ) : (
           <Box
             background="white"
+            display="flex"
+            flexDirection="row"
+            alignItems="center"
+            rowGap={2}
             paddingY={[3, 6, 12]}
             paddingX={[3, 6, 12, 15]}
           >
@@ -61,7 +111,37 @@ export const Modal: FC<React.PropsWithChildren<Props>> = ({
                 size="large"
               />
             </Box>
-            {children}
+            <Box>
+              <Box marginBottom={6}>
+                {title && (
+                  <Text variant="h3" marginBottom={'auto'}>
+                    {title}
+                  </Text>
+                )}
+                {text && <Text>{text}</Text>}
+              </Box>
+              {children}
+              {buttons && (
+                <Inline space={2}>
+                  {buttons.map((b) => (
+                    <Button
+                      key={b.id}
+                      variant={b.type ?? 'primary'}
+                      size="small"
+                      onClick={b.onClick}
+                      loading={b.loading}
+                    >
+                      {b.text}
+                    </Button>
+                  ))}
+                </Inline>
+              )}
+            </Box>
+            {iconSrc && (
+              <Box marginLeft={6} className={styles.image}>
+                <img src={iconSrc} alt={iconAlt} />
+              </Box>
+            )}
           </Box>
         )
       }

libs/service-portal/health/src/lib/messages.ts

@@ -281,6 +281,11 @@ export const messages = defineMessages({
     id: 'sp.health:dentist-register-forbidden',
     defaultMessage: 'Þú hefur ekki réttindi',
   },
+  dentistRegistrationTransferErrorInfo: {
+    id: 'sp.health:dentist-registration-transfer-error-info',
+    defaultMessage:
+      'Ekki tókst að flytja heilsugæslustöð. Vinsamlegast reyndu aftur síðar.',
+  },
   dentistModalTitle: {
     id: 'sp.health:dentist-modal-title',
     defaultMessage: 'Færa skráningu yfir á:',
@@ -691,6 +696,7 @@ export const messages = defineMessages({
     defaultMessage:
       'Ekki tókst að flytja heilsugæslustöð. Vinsamlegast reyndu aftur síðar.',
   },
+
   healthCenterRegistrationTransferSuccessTitle: {
     id: 'sp.health:health-center-registration-transfer-success-title',
     defaultMessage: 'Ný heilsugæsla skráð',