diff --git a/packages/admin-next/dashboard/src/hooks/api/products.tsx b/packages/admin-next/dashboard/src/hooks/api/products.tsx
index f12ecb64d3..80fee0531e 100644
--- a/packages/admin-next/dashboard/src/hooks/api/products.tsx
+++ b/packages/admin-next/dashboard/src/hooks/api/products.tsx
@@ -343,3 +343,31 @@ export const useExportProducts = (
...options,
})
}
+
+export const useImportProducts = (
+ options?: UseMutationOptions<
+ HttpTypes.AdminImportProductResponse,
+ FetchError,
+ HttpTypes.AdminImportProductRequest
+ >
+) => {
+ return useMutation({
+ mutationFn: (payload) => sdk.admin.product.import(payload),
+ onSuccess: (data, variables, context) => {
+ options?.onSuccess?.(data, variables, context)
+ },
+ ...options,
+ })
+}
+
+export const useConfirmImportProducts = (
+ options?: UseMutationOptions<{}, FetchError, string>
+) => {
+ return useMutation({
+ mutationFn: (payload) => sdk.admin.product.confirmImport(payload),
+ onSuccess: (data, variables, context) => {
+ options?.onSuccess?.(data, variables, context)
+ },
+ ...options,
+ })
+}
diff --git a/packages/admin-next/dashboard/src/i18n/translations/en.json b/packages/admin-next/dashboard/src/i18n/translations/en.json
index 1f670696d0..7150e68fce 100644
--- a/packages/admin-next/dashboard/src/i18n/translations/en.json
+++ b/packages/admin-next/dashboard/src/i18n/translations/en.json
@@ -350,7 +350,22 @@
},
"import": {
"header": "Import Product List",
- "description": "Import products by providing a CSV file in a pre-defined format"
+ "description": "Import products by providing a CSV file in a pre-defined format",
+ "template": {
+ "title": "Unsure about how to arrange your list?",
+ "description": "Download the template below to ensure you are following the correct format."
+ },
+ "upload": {
+ "title": "Upload a CSV file",
+ "description": "Through imports you can add or update products. To update existing products you must use the existing handle and ID, to update existing variants you must use the existing ID. You will be asked for confirmation before we import products.",
+ "preprocessing": "Preprocessing...",
+ "productsToCreate": "Products will be created",
+ "productsToUpdate": "Products will be updated"
+ },
+ "success": {
+ "title": "We are processing your import",
+ "description": "Importing data may take a while. We will notify you when we are done."
+ }
},
"deleteWarning": "You are about to delete the product {{title}}. This action cannot be undone.",
"variants": "Variants",
diff --git a/packages/admin-next/dashboard/src/routes/products/product-import/components/import-summary.tsx b/packages/admin-next/dashboard/src/routes/products/product-import/components/import-summary.tsx
new file mode 100644
index 0000000000..5f15b5942a
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/product-import/components/import-summary.tsx
@@ -0,0 +1,51 @@
+import { HttpTypes } from "@medusajs/types"
+import { Divider } from "../../../../components/common/divider"
+import { Text } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+
+export const ImportSummary = ({
+ summary,
+}: {
+ summary: HttpTypes.AdminImportProductResponse["summary"]
+}) => {
+ const { t } = useTranslation()
+
+ return (
+
+ )
+}
+
+const Stat = ({
+ title,
+ description,
+}: {
+ title: string
+ description: string
+}) => {
+ return (
+
+
+ {title}
+
+
+
+ {description}
+
+
+ )
+}
diff --git a/packages/admin-next/dashboard/src/routes/products/product-import/components/upload-import.tsx b/packages/admin-next/dashboard/src/routes/products/product-import/components/upload-import.tsx
new file mode 100644
index 0000000000..e722aaa4f4
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/product-import/components/upload-import.tsx
@@ -0,0 +1,60 @@
+import { useState } from "react"
+import { FileType, FileUpload } from "../../../../components/common/file-upload"
+import { Hint } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+
+const SUPPORTED_FORMATS = ["text/csv"]
+const SUPPORTED_FORMATS_FILE_EXTENSIONS = [".csv"]
+
+export const UploadImport = ({
+ onUploaded,
+}: {
+ onUploaded: (file: File) => void
+}) => {
+ const { t } = useTranslation()
+ const [error, setError] = useState
()
+
+ const hasInvalidFiles = (fileList: FileType[]) => {
+ const invalidFile = fileList.find(
+ (f) => !SUPPORTED_FORMATS.includes(f.file.type)
+ )
+
+ if (invalidFile) {
+ setError(
+ t("products.media.invalidFileType", {
+ name: invalidFile.file.name,
+ types: SUPPORTED_FORMATS_FILE_EXTENSIONS.join(", "),
+ })
+ )
+
+ return true
+ }
+
+ return false
+ }
+
+ return (
+
+
{
+ setError(undefined)
+ if (hasInvalidFiles(files)) {
+ return
+ }
+ onUploaded(files[0].file)
+ }}
+ />
+
+ {error && (
+
+ {error}
+
+ )}
+
+ {filename ? (
+
+ ) : (
+
+ )}
+
+
+ {data?.summary && !!filename && (
+
+
+
+ )}
+
+
+ {t("products.import.template.title")}
+
+
+ {t("products.import.template.description")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/packages/admin-next/dashboard/src/routes/products/product-list/components/product-list-table/product-list-table.tsx b/packages/admin-next/dashboard/src/routes/products/product-list/components/product-list-table/product-list-table.tsx
index 7d1279cd75..d725a89315 100644
--- a/packages/admin-next/dashboard/src/routes/products/product-list/components/product-list-table/product-list-table.tsx
+++ b/packages/admin-next/dashboard/src/routes/products/product-list/components/product-list-table/product-list-table.tsx
@@ -64,9 +64,9 @@ export const ProductListTable = () => {
- {/*
diff --git a/packages/core/js-sdk/src/admin/product.ts b/packages/core/js-sdk/src/admin/product.ts
index dc321670dc..4a57377f37 100644
--- a/packages/core/js-sdk/src/admin/product.ts
+++ b/packages/core/js-sdk/src/admin/product.ts
@@ -1,9 +1,4 @@
-import {
- AdminBatchProductVariantInventoryItemRequest,
- AdminBatchProductVariantInventoryItemResponse,
- HttpTypes,
- SelectParams,
-} from "@medusajs/types"
+import { HttpTypes, SelectParams } from "@medusajs/types"
import { Client } from "../client"
import { ClientHeaders } from "../types"
@@ -13,6 +8,45 @@ export class Product {
this.client = client
}
+ async import(
+ body: HttpTypes.AdminImportProductRequest,
+ query?: {},
+ headers?: ClientHeaders
+ ) {
+ const form = new FormData()
+ form.append("file", body.file)
+
+ return await this.client.fetch(
+ `/admin/products/import`,
+ {
+ method: "POST",
+ headers: {
+ ...headers,
+ // Let the browser determine the content type.
+ "content-type": null,
+ },
+ body: form,
+ query,
+ }
+ )
+ }
+
+ async confirmImport(
+ transactionId: string,
+ query?: {},
+ headers?: ClientHeaders
+ ) {
+ return await this.client.fetch<{}>(
+ `/admin/products/import/${transactionId}/confirm`,
+ {
+ method: "POST",
+ headers,
+ body: {},
+ query,
+ }
+ )
+ }
+
async export(
body: HttpTypes.AdminExportProductRequest,
query?: HttpTypes.AdminProductListParams,
diff --git a/packages/core/types/src/http/product/admin/payloads.ts b/packages/core/types/src/http/product/admin/payloads.ts
index 9ae597950b..7958e8b823 100644
--- a/packages/core/types/src/http/product/admin/payloads.ts
+++ b/packages/core/types/src/http/product/admin/payloads.ts
@@ -2,7 +2,9 @@ import { BatchMethodRequest } from "../../../common"
import { ProductStatus } from "../common"
export interface AdminExportProductRequest {}
-export interface AdminImportProductRequest {}
+export interface AdminImportProductRequest {
+ file: File
+}
export interface AdminBatchProductRequest
extends BatchMethodRequest {}