+
+
+ {t('uploading')}
+
+
+ {name}
+
+ {' ยท '}
+ {bytesToSize(size)}
+
+
+
+ )
+}
+
+export default ValidatingScreen
diff --git a/react/components/UploadingScreen/index.tsx b/react/components/UploadingScreen/index.tsx
new file mode 100644
index 00000000..332b1c3e
--- /dev/null
+++ b/react/components/UploadingScreen/index.tsx
@@ -0,0 +1,2 @@
+export { default as ValidationScreen } from './UploadingScreen'
+export type { UploadingScreenProps } from './UploadingScreen'
diff --git a/react/components/utils/bytesToSize.ts b/react/components/utils/bytesToSize.ts
new file mode 100644
index 00000000..74ecfdc8
--- /dev/null
+++ b/react/components/utils/bytesToSize.ts
@@ -0,0 +1,10 @@
+export const bytesToSize = (bytes: number) => {
+ const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
+
+ if (bytes === 0) return '0 Bytes'
+ const i = Math.floor(Math.log(bytes) / Math.log(1024))
+
+ if (i === 0) return `${bytes} ${sizes[i]}`
+
+ return `${Math.round(bytes / 1024 ** i)}${sizes[i]}`
+}
diff --git a/react/hooks/useBulkImportDetailsQuery.ts b/react/hooks/useBulkImportDetailsQuery.ts
index 67336dc2..8d359cbf 100644
--- a/react/hooks/useBulkImportDetailsQuery.ts
+++ b/react/hooks/useBulkImportDetailsQuery.ts
@@ -1,13 +1,26 @@
import useSWR from 'swr'
import { getBulkImportDetails } from '../services'
+import type { BulkImportDetails } from '../services/getBulkImportDetails'
-const useBulkImportDetailsQuery = (importId: string) => {
+export type UseBulkImportDetailsQueryProps = {
+ importId?: string
+ onSuccess?: (data: BulkImportDetails) => void
+ refreshInterval?: number
+}
+
+const useBulkImportDetailsQuery = ({
+ importId,
+ onSuccess,
+ refreshInterval = 0,
+}: UseBulkImportDetailsQueryProps) => {
return useSWR(
importId ? `/buyer-orgs/${importId}` : null,
() => getBulkImportDetails(importId),
{
+ refreshInterval,
revalidateOnFocus: false,
+ onSuccess,
}
)
}
diff --git a/react/hooks/useBulkImportsQuery.ts b/react/hooks/useBulkImportsQuery.ts
index d06aabe5..73383ab4 100644
--- a/react/hooks/useBulkImportsQuery.ts
+++ b/react/hooks/useBulkImportsQuery.ts
@@ -24,7 +24,7 @@ const useBulkImportQuery = (
account ? '/buyer-orgs' : null,
() => getBulkImportList(account),
{
- refreshInterval: shouldPoll ? 5 * 1000 : 0, // 30 seconds
+ refreshInterval: shouldPoll ? 30 * 1000 : 0, // 30 seconds
onError: errorData => {
const status = errorData?.response?.status ?? 0
diff --git a/react/hooks/useValidateBulkImport.ts b/react/hooks/useValidateBulkImport.ts
new file mode 100644
index 00000000..5c6f1ef0
--- /dev/null
+++ b/react/hooks/useValidateBulkImport.ts
@@ -0,0 +1,18 @@
+import useSWRMutation from 'swr/mutation'
+
+import { validateBulkImport } from '../services'
+
+const useValidateBulkImport = ({ onSuccess }: { onSuccess?: () => void }) => {
+ const { trigger } = useSWRMutation(
+ '/buyer-orgs/start',
+ (_, { arg }: { arg: { importId: string } }) =>
+ validateBulkImport(arg.importId),
+ {
+ onSuccess,
+ }
+ )
+
+ return { startBulkImportValidation: trigger }
+}
+
+export default useValidateBulkImport
diff --git a/react/package.json b/react/package.json
index e18dd221..6367053a 100644
--- a/react/package.json
+++ b/react/package.json
@@ -1,6 +1,6 @@
{
"name": "vtex.b2b-organizations",
- "version": "1.29.2",
+ "version": "1.30.0",
"license": "UNLICENSED",
"scripts": {
"test": "vtex-test-tools test --passWithNoTests"
@@ -36,7 +36,7 @@
},
"dependencies": {
"@vtex/admin-ui": "^0.136.1",
- "@vtex/bulk-import-ui": "1.1.6",
+ "@vtex/bulk-import-ui": "1.1.8",
"@vtex/css-handles": "^1.0.0",
"apollo-client": "^2.6.10",
"axios": "1.4.0",
diff --git a/react/services/getBulkImportDetails.ts b/react/services/getBulkImportDetails.ts
index 070e59d6..65d726f9 100644
--- a/react/services/getBulkImportDetails.ts
+++ b/react/services/getBulkImportDetails.ts
@@ -1,12 +1,14 @@
import bulkImportClient from '.'
import type { ImportDetails, ImportReportData } from '../types/BulkImport'
-type BulkImportList = Omit