@splpi/dms-estore-upload 1.0.0 → 1.0.1
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.
- package/README.md +125 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
# @splpi/dms-estore-upload
|
|
2
|
+
|
|
3
|
+
A React upload dialog component for integrating with the St. Peter Group Document Management System (DMS). Used in eStorev2 to collect and upload customer documents (Government ID, Specimen Signatures) to the DMS API.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @splpi/dms-estore-upload
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### Peer Dependencies
|
|
14
|
+
|
|
15
|
+
Make sure these are already installed in your project:
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install react react-dom @chakra-ui/react react-icons
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { DmsUploadRequirements } from '@splpi/dms-estore-upload';
|
|
27
|
+
import { useRef } from 'react';
|
|
28
|
+
|
|
29
|
+
export default function YourPage() {
|
|
30
|
+
const uploadRef = useRef(null);
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<DmsUploadRequirements
|
|
34
|
+
apiBase="http://192.168.23.126:5129"
|
|
35
|
+
uploadedBy="customer@email.com"
|
|
36
|
+
PrimaryMdButton={PrimaryMdButton}
|
|
37
|
+
onChange={(file) => {
|
|
38
|
+
// Fires immediately when user selects a Government ID file.
|
|
39
|
+
// Use this to call your OCR API and pre-fill form fields.
|
|
40
|
+
console.log('ID file selected:', file);
|
|
41
|
+
}}
|
|
42
|
+
onBeforeNext={(uploadFn) => {
|
|
43
|
+
// Registers the upload function with the parent.
|
|
44
|
+
// Call uploadRef.current() on your Next button click.
|
|
45
|
+
uploadRef.current = uploadFn;
|
|
46
|
+
}}
|
|
47
|
+
onIdUploadComplete={(result) => {
|
|
48
|
+
// Fires after the Government ID is uploaded to DMS.
|
|
49
|
+
console.log(result.driveFileId, result.fileName);
|
|
50
|
+
}}
|
|
51
|
+
onSignatureUploadComplete={(result) => {
|
|
52
|
+
// Fires after each specimen signature is uploaded to DMS.
|
|
53
|
+
console.log(result.driveFileId, result.fileName);
|
|
54
|
+
}}
|
|
55
|
+
/>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### Wiring up the Next button
|
|
61
|
+
|
|
62
|
+
The component does **not** upload immediately on file select. Upload is triggered by calling the function registered via `onBeforeNext` — typically on your Next button click.
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
const uploadRef = useRef(null);
|
|
66
|
+
|
|
67
|
+
// Pass to DmsUploadRequirements:
|
|
68
|
+
onBeforeNext={(uploadFn) => { uploadRef.current = uploadFn; }}
|
|
69
|
+
|
|
70
|
+
// Then on your Next button:
|
|
71
|
+
<NextButton
|
|
72
|
+
onClick={async () => {
|
|
73
|
+
if (uploadRef.current) {
|
|
74
|
+
const result = await uploadRef.current();
|
|
75
|
+
if (!result.success) return; // stop if upload failed
|
|
76
|
+
}
|
|
77
|
+
// proceed to next step
|
|
78
|
+
setUploadDialogOpen(false);
|
|
79
|
+
setNextDialogOpen(true);
|
|
80
|
+
}}
|
|
81
|
+
/>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
---
|
|
85
|
+
|
|
86
|
+
## Props
|
|
87
|
+
|
|
88
|
+
| Prop | Type | Required | Description |
|
|
89
|
+
|------|------|----------|-------------|
|
|
90
|
+
| `apiBase` | `string` | ✅ | Base URL of the DMS API (e.g. `http://192.168.23.126:5129`) |
|
|
91
|
+
| `uploadedBy` | `string` | ✅ | Customer identifier — usually their email address |
|
|
92
|
+
| `PrimaryMdButton` | `React.ComponentType` | ✅ | Themed button component from `st-peter-ui` used for the camera button |
|
|
93
|
+
| `onChange` | `(file: File) => void` | ❌ | Fires immediately when user selects a Government ID file, before Next is clicked |
|
|
94
|
+
| `onBeforeNext` | `(uploadFn: () => Promise<{ success: boolean }>) => void` | ❌ | Registers the upload trigger function with the parent component |
|
|
95
|
+
| `onIdUploadComplete` | `(result: UploadResult) => void` | ❌ | Fires after the Government ID is successfully uploaded to DMS |
|
|
96
|
+
| `onSignatureUploadComplete` | `(result: UploadResult) => void` | ❌ | Fires after each specimen signature is successfully uploaded to DMS |
|
|
97
|
+
|
|
98
|
+
### UploadResult
|
|
99
|
+
|
|
100
|
+
```ts
|
|
101
|
+
{
|
|
102
|
+
driveFileId: string;
|
|
103
|
+
fileName: string;
|
|
104
|
+
}
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
---
|
|
108
|
+
|
|
109
|
+
## How It Works
|
|
110
|
+
|
|
111
|
+
1. User selects a Government ID file → `onChange` fires immediately (for OCR pre-fill)
|
|
112
|
+
2. User selects specimen signature files
|
|
113
|
+
3. User clicks **Next** → parent calls `uploadRef.current()`
|
|
114
|
+
4. Component uploads all files to the DMS API
|
|
115
|
+
5. Files are saved to Google Drive and recorded in the database with `is_final = 0`
|
|
116
|
+
6. `onIdUploadComplete` and `onSignatureUploadComplete` fire with the upload results
|
|
117
|
+
7. A later step in the purchase flow sets `is_final = 1` to confirm the documents
|
|
118
|
+
|
|
119
|
+
---
|
|
120
|
+
|
|
121
|
+
## Notes
|
|
122
|
+
|
|
123
|
+
- Files are uploaded to the DMS API endpoint `POST /api/files/direct-upload`
|
|
124
|
+
- The `is_final = 0` flag means the upload is temporary until confirmed by the purchase flow
|
|
125
|
+
- This component is intended for internal St. Peter Group use only
|