feat(admin-ui): refresh products when a BatchJob is completed (#4840)

2023-08-25 07:34:48 +00:00
parent f07dc0384f
commit 0c7c2eeeab
12 changed files with 121 additions and 31 deletions
@@ -0,0 +1,16 @@
+const PricingImportCSV =
+  "data:text/csv;charset=utf-8," +
+  `Product Variant ID,SKU,Price EUR,Price NA [USD]
+,MEDUSA-SWEAT-SMALL,15,13.5
+variant_1234,,15,13.5
+`
+
+export function downloadPricingImportCSVTemplate() {
+  const encodedUri = encodeURI(PricingImportCSV)
+  const link = document.createElement("a")
+  link.setAttribute("href", encodedUri)
+  link.setAttribute("download", "product-import-template.csv")
+  document.body.appendChild(link)
+
+  link.click()
+}
@@ -13,6 +13,7 @@ import {
 import UploadModal from "../../../components/organisms/upload-modal"
 import useNotification from "../../../hooks/use-notification"
 import { usePolling } from "../../../providers/polling-provider"
+import { downloadPricingImportCSVTemplate } from "./download-template"

 /**
 * Hook returns a batch job. The endpoint is polled every 2s while the job is processing.
@@ -171,10 +172,6 @@ function ImportPrices(props: ImportPricesProps) {
    }
  }

-  const templateLink = process.env.ADMIN_PATH
-    ? `${process.env.ADMIN_PATH}/temp/price-list-import-template.csv`
-    : `/temp/price-list-import-template.csv`
-
  return (
    <UploadModal
      type="prices"
@@ -190,7 +187,7 @@ function ImportPrices(props: ImportPricesProps) {
      summary={getSummary()}
      onFileRemove={onFileRemove}
      processUpload={processUpload}
-      templateLink={templateLink}
+      onDownloadTemplate={downloadPricingImportCSVTemplate}
    />
  )
 }
@@ -0,0 +1,18 @@
+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 function downloadProductImportCSVTemplate() {
+  const encodedUri = encodeURI(ProductImportCSV)
+  const link = document.createElement("a")
+  link.setAttribute("href", encodedUri)
+  link.setAttribute("download", "product-import-template.csv")
+  document.body.appendChild(link)
+
+  link.click()
+}
@@ -13,6 +13,7 @@ import {
 import UploadModal from "../../../components/organisms/upload-modal"
 import useNotification from "../../../hooks/use-notification"
 import { usePolling } from "../../../providers/polling-provider"
+import { downloadProductImportCSVTemplate } from "./download-template"

 /**
 * Hook returns a batch job. The endpoint is polled every 2s while the job is processing.
@@ -177,10 +178,6 @@ function ImportProducts(props: ImportProductsProps) {
    }
  }

-  const templateLink = process.env.ADMIN_PATH
-    ? `${process.env.ADMIN_PATH}/temp/product-import-template.csv`
-    : "/temp/product-import-template.csv"
-
  return (
    <UploadModal
      type="products"
@@ -194,7 +191,7 @@ function ImportProducts(props: ImportProductsProps) {
      onFileRemove={onFileRemove}
      processUpload={processUpload}
      fileTitle={"products list"}
-      templateLink={templateLink}
+      onDownloadTemplate={downloadProductImportCSVTemplate}
      errorMessage={batchJob?.result?.errors?.join(" \n")}
      description2Title="Unsure about how to arrange your list?"
      description2Text="Download the template below to ensure you are following the correct format."
@@ -96,6 +96,7 @@ const Overview = () => {
            </Button>
          </div>
        )
+
      default:
        return (
          <div className="flex space-x-2">