+ {currencyMeta?.symbol_native}
+ setLocalValue(v)}
+ allowDecimals={currencyMeta?.decimal_digits > 0}
+ decimalScale={isEditable ? undefined : currencyMeta?.decimal_digits}
+ customInput={isEditable ? currencyInput : currencySpan}
+ allowNegativeValue={false}
+ value={localValue.value}
+ decimalSeparator="."
+ placeholder="-"
+ />
+ {isRangeEnd && !isEditable && (
+
+ )}
+
+
+
+
+
+
+
+
+
+ Currencies
+
+ {currencies?.map((c) => (
+ {
+ event.preventDefault()
+ toggleCurrency(c.code)
+ }}
+ className="mb-1 cursor-pointer last:mb-0 hover:bg-gray-100"
+ >
+
+ ))}
+
+
+ Regions
+
+ {regions?.map((r) => (
+ {
+ event.preventDefault()
+ toggleRegion(r.id)
+ }}
+ className="mb-1 cursor-pointer last:mb-0 hover:bg-gray-100"
+ key={r.id}
+ >
+
+ ))}
+
+
+
+ )
+}
+
+export default EditPricesActions
diff --git a/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/edit-prices-table.tsx b/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/edit-prices-table.tsx
new file mode 100644
index 0000000000..009ef64107
--- /dev/null
+++ b/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/edit-prices-table.tsx
@@ -0,0 +1,508 @@
+import React, { useEffect, useMemo, useRef, useState } from "react"
+import { useAdminRegions, useAdminStore } from "medusa-react"
+import { Product } from "@medusajs/client-types"
+
+import { getCurrencyPricesOnly, getRegionPricesOnly } from "./utils"
+import CurrencyCell from "./currency-cell"
+import IconBuildingTax from "../../../fundamentals/icons/building-tax-icon"
+import { currencies as CURRENCY_MAP } from "../../../../utils/currencies"
+import Tooltip from "../../../atoms/tooltip"
+
+type EditPricesTableProps = {
+ product: Product
+ currencies: string[]
+ regions: string[]
+ onPriceUpdate: (prices: Record
+ {c.code.toUpperCase()}
+
+
+
+ {r.name}
+ {selectedRegions.includes(r.id) && (
+
+
+ e.preventDefault()
+ }
+ style={{ fontSize: 13, borderCollapse: "collapse" }}
+ className="w-full table-auto"
+ >
+
+
+
+ )
+}
+
+export default EditPricesTable
diff --git a/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/index.tsx b/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/index.tsx
new file mode 100644
index 0000000000..3ceb760e5f
--- /dev/null
+++ b/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/index.tsx
@@ -0,0 +1,365 @@
+import React, { useEffect, useMemo, useRef, useState } from "react"
+import { useAdminRegions, useAdminUpdateVariant } from "medusa-react"
+import { MoneyAmount, Product } from "@medusajs/client-types"
+import pick from "lodash/pick"
+import pickBy from "lodash/pickBy"
+import mapKeys from "lodash/mapKeys"
+
+import { currencies as CURRENCY_MAP } from "../../../../utils/currencies"
+
+import Modal from "../../../molecules/modal"
+import Fade from "../../../atoms/fade-wrapper"
+import Button from "../../../fundamentals/button"
+import {
+ getAllProductPricesCurrencies,
+ getAllProductPricesRegions,
+ getCurrencyPricesOnly,
+ getRegionPricesOnly,
+} from "./utils"
+import CrossIcon from "../../../fundamentals/icons/cross-icon"
+import EditPricesTable from "./edit-prices-table"
+import EditPricesActions from "./edit-prices-actions"
+import useNotification from "../../../../hooks/use-notification"
+import DeletePrompt from "../../delete-prompt"
+import SavePrompt from "./save-prompt"
+
+type EditPricesModalProps = {
+ close: () => void
+ product: Product
+}
+
+/**
+ * Return map of regionIds <> currency_codes
+ */
+function useRegionsCurrencyMap() {
+ const map = {}
+ const { regions: storeRegions } = useAdminRegions({
+ limit: 1000,
+ })
+
+ storeRegions?.forEach((r) => {
+ map[r.id] = r.currency_code
+ })
+
+ return useMemo(() => map, [storeRegions])
+}
+
+/**
+ * Edit prices modal container.
+ */
+function EditPricesModal(props: EditPricesModalProps) {
+ const editedPrices = useRef({})
+
+ const { regions: storeRegions } = useAdminRegions({
+ limit: 1000,
+ })
+
+ const regionCurrenciesMap = useRegionsCurrencyMap()
+ const regions = getAllProductPricesRegions(props.product).sort()
+ const currencies = getAllProductPricesCurrencies(props.product).sort()
+
+ const notification = useNotification()
+ const updateVariant = useAdminUpdateVariant(props.product.id)
+
+ const [showCloseConfirmationPrompt, setShowCloseConfirmationPrompt] =
+ useState(false)
+ const [showSaveConfirmationPrompt, setShowSaveConfirmationPrompt] =
+ useState(false)
+ const [selectedCurrencies, setSelectedCurrencies] = useState(currencies)
+ const [selectedRegions, setSelectedRegions] = useState| + Product + | + {props.currencies.map((c) => { + const currency = storeCurrencies?.find((sc) => sc.code === c) + return ( +
+
+ Price {c.toUpperCase()}
+ {currency?.includes_tax && (
+
+ |
+ )
+ })}
+ {props.regions.map((r) => {
+ const region = storeRegions?.find((sr) => sr.id === r)
+ if (!region) {
+ return null
+ }
+ return (
+
+
+
+
+ Price {region?.name}
+
+ ({region?.currency_code.toUpperCase()})
+
+ {region.includes_tax && (
+
+ |
+ )
+ })}
+
|---|---|---|
|
+
+ {props.product.thumbnail && (
+
+ |
+ {props.currencies.map((c) => (
+ + - + | + ))} + {props.regions.map((r) => ( ++ - + | + ))} +
| + {variant.title} {variant.sku && `∙ ${variant.sku}`} + | + + {props.currencies.map((c) => { + return ( +
+
+
+
+
+
+
+ esc
+
+
+
+
+
+
+
+ Saving changes
+
+ {hasHiddenColumns
+ ? `You have edited prices in hidden columns: (${hiddenEditedColumns.join(
+ ", "
+ )}). Do you wish to save these too?`
+ : "Save edited variant prices"}
+
+
+
+ {hasHiddenColumns && (
+
+
+
+
+