From c08b8c690fd0540324f8b693400b1bf4e0ce1e33 Mon Sep 17 00:00:00 2001 From: Stevche Radevski Date: Mon, 29 Jul 2024 12:24:04 +0300 Subject: [PATCH] fix: Add product import template to import UI --- .../product-import/helpers/import-template.ts | 13 +++++++++++++ .../products/product-import/product-import.tsx | 12 ++++++++---- 2 files changed, 21 insertions(+), 4 deletions(-) create mode 100644 packages/admin-next/dashboard/src/routes/products/product-import/helpers/import-template.ts diff --git a/packages/admin-next/dashboard/src/routes/products/product-import/helpers/import-template.ts b/packages/admin-next/dashboard/src/routes/products/product-import/helpers/import-template.ts new file mode 100644 index 0000000000000..ba29b691d26f5 --- /dev/null +++ b/packages/admin-next/dashboard/src/routes/products/product-import/helpers/import-template.ts @@ -0,0 +1,13 @@ +const ProductImportCSV = + "data:text/csv;charset=utf-8," + + `Product Id;Product Handle;Product Title;Product Subtitle;Product Description;Product Status;Product Thumbnail;Product Weight;Product Length;Product Width;Product Height;Product HS Code;Product Origin Country;Product MID Code;Product Material;Product Collection Title;Product Collection Handle;Product Type;Product Tags;Product Discountable;Product External Id;Product Profile Name;Product Profile Type;Variant Id;Variant Title;Variant SKU;Variant Barcode;Variant Inventory Quantity;Variant Allow Backorder;Variant Manage Inventory;Variant Weight;Variant Length;Variant Width;Variant Height;Variant HS Code;Variant Origin Country;Variant MID Code;Variant Material;Price EUR;Price USD;Option 1 Name;Option 1 Value;Image 1 Url;Image 2 Url +;coffee-mug-v2;Medusa Coffee Mug;;Every programmer's best friend.;published;https://medusa-public-images.s3.eu-west-1.amazonaws.com/coffee-mug.png;400;;;;;;;;;;;;true;;;;;One Size;;;100;false;true;;;;;;;;;1000;1200;Size;One Size;https://medusa-public-images.s3.eu-west-1.amazonaws.com/coffee-mug.png; +;sweatpants-v2;Medusa Sweatpants;;Reimagine the feeling of classic sweatpants. With our cotton sweatpants, everyday essentials no longer have to be ordinary.;published;https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-front.png;400;;;;;;;;;;;;true;;;;;S;;;100;false;true;;;;;;;;;2950;3350;Size;S;https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-front.png;https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-back.png +;sweatpants-v2;Medusa Sweatpants;;Reimagine the feeling of classic sweatpants. With our cotton sweatpants, everyday essentials no longer have to be ordinary.;published;https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-front.png;400;;;;;;;;;;;;true;;;;;M;;;100;false;true;;;;;;;;;2950;3350;Size;M;https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-front.png;https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-back.png +;sweatpants-v2;Medusa Sweatpants;;Reimagine the feeling of classic sweatpants. With our cotton sweatpants, everyday essentials no longer have to be ordinary.;published;https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-front.png;400;;;;;;;;;;;;true;;;;;L;;;100;false;true;;;;;;;;;2950;3350;Size;L;https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-front.png;https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-back.png +;sweatpants-v2;Medusa Sweatpants;;Reimagine the feeling of classic sweatpants. With our cotton sweatpants, everyday essentials no longer have to be ordinary.;published;https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-front.png;400;;;;;;;;;;;;true;;;;;XL;;;100;false;true;;;;;;;;;2950;3350;Size;XL;https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-front.png;https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-back.png +` + +export const getProductImportCsvTemplate = () => { + return encodeURI(ProductImportCSV) +} diff --git a/packages/admin-next/dashboard/src/routes/products/product-import/product-import.tsx b/packages/admin-next/dashboard/src/routes/products/product-import/product-import.tsx index 4e82a8c35f920..c5399231c13fb 100644 --- a/packages/admin-next/dashboard/src/routes/products/product-import/product-import.tsx +++ b/packages/admin-next/dashboard/src/routes/products/product-import/product-import.tsx @@ -1,12 +1,13 @@ import { Button, Heading, Text, toast } from "@medusajs/ui" import { RouteDrawer, useRouteModal } from "../../../components/modals" import { useTranslation } from "react-i18next" -import { useState } from "react" +import { useMemo, useState } from "react" import { useConfirmImportProducts, useImportProducts } from "../../../hooks/api" import { UploadImport } from "./components/upload-import" import { ImportSummary } from "./components/import-summary" import { Trash } from "@medusajs/icons" import { FilePreview } from "../../../components/common/file-preview" +import { getProductImportCsvTemplate } from "./helpers/import-template" export const ProductImport = () => { const { t } = useTranslation() @@ -34,6 +35,10 @@ const ProductImportContent = () => { const { mutateAsync: confirm } = useConfirmImportProducts() const { handleSuccess } = useRouteModal() + const productImportTemplateContent = useMemo(() => { + return getProductImportCsvTemplate() + }, []) + const handleUploaded = async (file: File) => { setFilename(file.name) await importProducts( @@ -112,9 +117,8 @@ const ProductImportContent = () => {