Merge pull request #2690 from beckn/feat/myDersPage

feat(open-spark): added changes as per figma for my ders page

apps/open-spark/components/deviceList/AddNewDerModal.tsx

@@ -0,0 +1,137 @@
+import React, { useState } from 'react'
+import BottomModalScan from '@beckn-ui/common/src/components/BottomModal/BottomModalScan'
+import { Input, Typography } from '@beckn-ui/molecules'
+import BecknButton from '@beckn-ui/molecules/src/components/button'
+import { Box, Flex, Image } from '@chakra-ui/react'
+import uploadIcon from '@public/images/upload_icon.svg'
+import pdfIcon from '@public/images/PDF.svg'
+import DragAndDropUpload from '@components/dragAndDropUpload'
+import RenderDocuments from '@components/documentsRenderer'
+
+interface Proofs {
+  id: number
+  name: string
+  date: string
+}
+
+interface DocumentProps {
+  icon: string
+  title: string
+  file: any
+  date: Date
+}
+
+interface AddNewDerModalProps {
+  isOpen: boolean
+  onClose: () => void
+  proofs: Proofs[]
+  handleDelete: (id: number) => void
+  handleFileUpload: (event: any) => void
+  onSubmit: (category: string, uploadedFiles: File[]) => Promise<void>
+  isLoading?: boolean
+}
+
+const AddNewDerModal = (props: AddNewDerModalProps) => {
+  const [category, setCategory] = useState('Lorem Ipsum Dior')
+  const [uploadedFiles, setUploadedFiles] = useState<DocumentProps[]>([])
+  const [allFilesProcessed, setAllFilesProcessed] = useState<boolean>(false)
+
+  const { isOpen, onClose, onSubmit, isLoading } = props
+
+  const handleFileChange = (files: File[]) => {
+    if (files.length > 0) {
+      const docs = files.map(file => {
+        console.log('Selected file:', file)
+        return { title: file?.name!, icon: pdfIcon, date: new Date(), file: file }
+      })
+      setUploadedFiles(prevState => (prevState ? [...prevState, ...docs] : docs))
+    }
+  }
+
+  const handleAddDevice = () => {
+    if (!category || uploadedFiles.length === 0) {
+      alert('Please provide all details.')
+      return
+    }
+    const files = uploadedFiles.map(doc => doc.file)
+    onSubmit(category, files)
+  }
+  const handleOnDelete = (index: number, document: DocumentProps, type: 'cred' | 'upload') => {
+    if (type === 'cred') {
+      setUploadedFiles(prevState => prevState!.filter((_, i) => i !== index))
+    }
+  }
+
+  return (
+    <Box>
+      <BottomModalScan
+        isOpen={isOpen}
+        onClose={onClose}
+        modalHeader="Add New DER"
+      >
+        <Flex
+          padding="0 20px"
+          flexDir="column"
+        >
+          <Input
+            value={category}
+            label="Category"
+            handleChange={e => setCategory(e.target.value)}
+          />
+          <Typography
+            text="Proofs"
+            fontSize="15px"
+            fontWeight="500"
+          />
+          <RenderDocuments
+            list={uploadedFiles || []}
+            type="cred"
+            handleOnDelete={handleOnDelete}
+            onAllComplete={status => {
+              setAllFilesProcessed(status)
+            }}
+          />
+
+          <DragAndDropUpload
+            multiple={true}
+            setFiles={handleFileChange}
+            fileSelectionElement={(fileInputRef: any) => {
+              return (
+                <Flex
+                  alignItems={'center'}
+                  cursor="pointer"
+                  onClick={() => {
+                    if (fileInputRef.current) {
+                      fileInputRef.current.click()
+                    }
+                  }}
+                >
+                  <Image
+                    src={uploadIcon}
+                    alt="upload"
+                  />
+
+                  <Typography
+                    text={'Upload Documents'}
+                    sx={{
+                      marginLeft: '0.5rem'
+                    }}
+                  />
+                </Flex>
+              )
+            }}
+          />
+          <BecknButton
+            children={'Add DER'}
+            handleClick={handleAddDevice}
+            disabled={!category.trim() || uploadedFiles.length === 0}
+            sx={{ marginTop: '20px' }}
+            isLoading={isLoading}
+          />
+        </Flex>
+      </BottomModalScan>
+    </Box>
+  )
+}
+
+export default AddNewDerModal

apps/open-spark/components/deviceList/DeleteDErModal.tsx

@@ -0,0 +1,58 @@
+import BottomModalScan from '@beckn-ui/common/src/components/BottomModal/BottomModalScan'
+import { Typography } from '@beckn-ui/molecules'
+import BecknButton from '@beckn-ui/molecules/src/components/button'
+import { Box, Flex } from '@chakra-ui/react'
+import React from 'react'
+interface DeleteDErModalProps {
+  isOpen: boolean
+  onClose: () => void
+  handleConfirmDeleteDevice: () => void
+  isLoading?: boolean
+}
+
+const DeleteDErModal = (props: DeleteDErModalProps) => {
+  const { isOpen, onClose, handleConfirmDeleteDevice, isLoading } = props
+  return (
+    <Box>
+      <BottomModalScan
+        isOpen={isOpen}
+        onClose={onClose}
+        modalHeader="Attention"
+      >
+        <Flex
+          justifyContent="center"
+          alignItems="center"
+          flexDir="column"
+          padding="0 20px 0 20px"
+          gap="10px"
+        >
+          <Typography
+            text="Are you sure you want to delete"
+            fontSize="18px"
+            fontWeight="400"
+          />
+          <Typography
+            text="this item?"
+            fontSize="18px"
+            fontWeight="400"
+            sx={{ marginBottom: '10px' }}
+          />
+          <BecknButton
+            children="Yes I’m Sure"
+            variant="solid"
+            handleClick={handleConfirmDeleteDevice}
+            isLoading={isLoading}
+          />
+          <BecknButton
+            children="Cancel"
+            variant="outline"
+            color="#E93324"
+            handleClick={onClose}
+          />
+        </Flex>
+      </BottomModalScan>
+    </Box>
+  )
+}
+
+export default DeleteDErModal