refactor: update importConfig function to accept File directly and enhance file input component in subscription page builder header

Author: kastov

src/pages/dashboard/utils/subscription-page-builder/ui/components/subscription-page-builder.page.component.tsx

@@ -115,15 +115,13 @@ export const SubscriptionPageBuilderComponent = () => {
         linkElement.click()
     }
 
-    const importConfig = (event: React.ChangeEvent<HTMLInputElement>) => {
-        setLoading(true)
-
-        const file = event.target.files?.[0]
+    const importConfig = (file: File | null) => {
         if (!file) {
-            setLoading(false)
             return
         }
 
+        setLoading(true)
+
         const reader = new FileReader()
         reader.onload = (e) => {
             try {
@@ -270,14 +268,14 @@ export const SubscriptionPageBuilderComponent = () => {
                     </Grid.Col>
                 </Grid>
 
-                <Modal onClose={close} opened={opened} size="lg" title="Validation errors">
+                <Modal centered onClose={close} opened={opened} size="lg" title="Validation errors">
                     <Alert
                         color="red"
                         icon={<IconAlertCircle size="1rem" />}
                         mb="md"
                         title="Invalid configuration"
                     >
-                        The configuration did not pass validation. The following errors are listed.
+                        The configuration did not pass validation.
                     </Alert>
                     <ScrollArea h={300} offsetScrollbars>
                         <Stack gap="xs">

src/widgets/dashboard/utils/subscription-page-builder-header/subscription-page-builder-header.widget.tsx

@@ -1,12 +1,12 @@
 import { IconCloudDownload, IconDownload, IconUpload } from '@tabler/icons-react'
-import { Accordion, Button, Group, Text } from '@mantine/core'
+import { Accordion, Button, FileInput, Group, Text } from '@mantine/core'
 import { PiInfoDuotone } from 'react-icons/pi'
 
 import { DataTableShared } from '@shared/ui/table'
 
 export function SubscriptionPageBuilderHeaderWidget(props: {
     exportConfig: () => void
-    importConfig: (event: React.ChangeEvent<HTMLInputElement>) => void
+    importConfig: (file: File | null) => void
     loadDefaultConfig: () => Promise<void>
 }) {
     const { exportConfig, importConfig, loadDefaultConfig } = props
@@ -28,15 +28,14 @@ export function SubscriptionPageBuilderHeaderWidget(props: {
                             Export Config
                         </Button>
 
-                        <Button component="label" leftSection={<IconUpload size="1rem" />}>
-                            Import Config
-                            <input
-                                accept=".json"
-                                onChange={importConfig}
-                                style={{ display: 'none' }}
-                                type="file"
-                            />
-                        </Button>
+                        <FileInput
+                            accept="application/json,.json"
+                            clearable
+                            leftSection={<IconUpload size="1rem" />}
+                            onChange={importConfig}
+                            placeholder="Upload Config"
+                            radius="lg"
+                        />
                     </Group>
                 }
                 title="Subscription Page Builder"