@campxdev/shared 1.11.21-alpha.0 → 1.11.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/ErrorModalWrapper/ErrorModalTemplate.tsx +55 -10
  3. package/src/components/ErrorModalWrapper/ErrorModalWrapper.tsx +20 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@campxdev/shared",
3
- "version": "1.11.21-alpha.0",
3
+ "version": "1.11.22",
4
4
  "main": "./exports.ts",
5
5
  "scripts": {
6
6
  "start": "react-scripts start",
package/src/components/ErrorModalWrapper/ErrorModalTemplate.tsx CHANGED
@@ -1,4 +1,12 @@
1
- import { Box, Button, Modal, styled, Typography } from '@mui/material'
1
+ import {
2
+ Alert,
3
+ Box,
4
+ Button,
5
+ Modal,
6
+ Stack,
7
+ styled,
8
+ Typography,
9
+ } from '@mui/material'
2
10
  import { animatedImage } from '../../assets/images'
3
11
 
4
12
  const style = {
@@ -13,7 +21,7 @@ const style = {
13
21
  display: 'flex',
14
22
  gap: '15px',
15
23
  flexDirection: 'column',
16
- padding: '20px',
24
+ padding: '35px',
17
25
  }
18
26
 
19
27
  const StyledImage = styled(Box)(({ theme }) => ({
@@ -27,8 +35,7 @@ const StyledImage = styled(Box)(({ theme }) => ({
27
35
  }))
28
36
 
29
37
  const MessageContainer = styled(Box)(({ theme }) => ({
30
- maxHeight: '60vh',
31
- padding: '15px',
38
+ maxHeight: '40vh',
32
39
  overflowY: 'auto',
33
40
  '&::-webkit-scrollbar': {
34
41
  width: '0.5em',
@@ -43,6 +50,31 @@ const MessageContainer = styled(Box)(({ theme }) => ({
43
50
  },
44
51
  }))
45
52
 
53
+ export const StyledTableContainer = styled(Box)({
54
+ background: 'white',
55
+ borderRadius: '16px',
56
+ marginTop: '10px',
57
+ '& table thead tr': {
58
+ backgroundColor: '#efefef',
59
+ },
60
+ '& table tr th': {
61
+ border: '1px solid #bebebe',
62
+ padding: '2px 8px',
63
+ textAlign: 'center',
64
+ },
65
+
66
+ '& table td': {
67
+ border: '1px solid #bebebe',
68
+ padding: '5px 10px',
69
+ fontWeight: 900,
70
+ },
71
+
72
+ '& table': {
73
+ width: ' 100%',
74
+ borderCollapse: 'collapse',
75
+ },
76
+ })
77
+
46
78
  export const ErrorModalTemplate = ({ handleClose, modal, setModal }) => {
47
79
  return (
48
80
  <Modal open={modal.open} onClose={handleClose}>
@@ -50,14 +82,27 @@ export const ErrorModalTemplate = ({ handleClose, modal, setModal }) => {
50
82
  <StyledImage>
51
83
  <img src={animatedImage} alt="Error Image" />
52
84
  </StyledImage>
53
- {console.log(modal.errorMessage, 'errmessage')}
85
+ <Alert severity={'error'} sx={{ padding: '10px' }}>
86
+ Please resolve the below mentioned errors to proceed further
87
+ </Alert>
54
88
  <MessageContainer>
55
- <Typography
56
- variant="h6"
57
- sx={{ textAlign: 'center', lineHeight: 1.7 }}
58
- dangerouslySetInnerHTML={{ __html: modal?.errorMessage }}
59
- />
89
+ {modal.type == 'String' ? (
90
+ <Typography
91
+ variant="h6"
92
+ sx={{ textAlign: 'center', lineHeight: 1.7 }}
93
+ dangerouslySetInnerHTML={{ __html: modal?.errorMessage }}
94
+ />
95
+ ) : (
96
+ <>
97
+ <Stack gap={2}>
98
+ <StyledTableContainer
99
+ dangerouslySetInnerHTML={{ __html: modal?.errorMessage }}
100
+ />
101
+ </Stack>
102
+ </>
103
+ )}
60
104
  </MessageContainer>
105
+
61
106
  {modal.content && modal.content({ close: handleClose })}
62
107
  <Button
63
108
  variant="outlined"
package/src/components/ErrorModalWrapper/ErrorModalWrapper.tsx CHANGED
@@ -16,6 +16,7 @@ export default function ErrorModalProvider({ children }) {
16
16
  open: false,
17
17
  content: ({ close }) => null,
18
18
  errorMessage: null,
19
+ type: 'String',
19
20
  })
20
21
 
21
22
  const handleClose = () => {
@@ -25,17 +26,34 @@ export default function ErrorModalProvider({ children }) {
25
26
  })
26
27
  }
27
28
 
29
+ const convertMessageToTable = (message) => {
30
+ const tableRows = message.map((element, index) => {
31
+ return `<tr><td>${index + 1}</td><td>${element}</td></tr>`
32
+ })
33
+ return `<table>
34
+ <thead>
35
+ <tr><th>S No.</th><th>Message</th></tr>
36
+ </thead>
37
+ <tbody>
38
+ ${tableRows.join('')}</tbody></table>`
39
+ }
40
+
28
41
  const showModal = (props) => {
29
42
  const fallbackMessage = props.fallBack ?? 'Something went wrong.'
43
+ const type =
44
+ typeof props.error?.response?.data?.message !== 'string'
45
+ ? 'Object'
46
+ : 'String'
30
47
  const errorMessage =
31
48
  typeof props.error?.response?.data?.message !== 'string'
32
- ? props.error?.response?.data?.message?.replace(/\n/g, '<br>') ??
49
+ ? convertMessageToTable(props.error?.response?.data?.message) ??
33
50
  fallbackMessage
34
- : props.error?.response?.data?.message.replace(/\n/g, '<br>')
51
+ : props.error?.response?.data?.message
35
52
 
36
53
  setModal({
37
54
  ...modal,
38
55
  open: true,
56
+ type: type,
39
57
  content: props.content,
40
58
  errorMessage: errorMessage,
41
59
  })