From 02ea9ac3ac87f1091c6f21c689ccfc55080b17cc Mon Sep 17 00:00:00 2001 From: Philip Korsholm <88927411+pKorsholm@users.noreply.github.com> Date: Thu, 23 Nov 2023 15:31:32 +0000 Subject: [PATCH] feat(admin-ui): Delete pricing forms from edit + create variant modals (#5676) --- .changeset/khaki-eyes-fetch.md | 5 + .../forms/general/prices-form/index.tsx | 173 ------------------ .../general/prices-form/nested-price.tsx | 123 ------------- .../create-flow-variant-form/index.tsx | 17 +- .../edit-flow-variant-form/index.tsx | 14 +- .../variant-prices-form/index.tsx | 21 --- .../edit-prices-modal/index.tsx | 33 ++-- 7 files changed, 32 insertions(+), 354 deletions(-) create mode 100644 .changeset/khaki-eyes-fetch.md delete mode 100644 packages/admin-ui/ui/src/components/forms/general/prices-form/index.tsx delete mode 100644 packages/admin-ui/ui/src/components/forms/general/prices-form/nested-price.tsx delete mode 100644 packages/admin-ui/ui/src/components/forms/product/variant-form/variant-prices-form/index.tsx diff --git a/.changeset/khaki-eyes-fetch.md b/.changeset/khaki-eyes-fetch.md new file mode 100644 index 0000000000..5c20b29f32 --- /dev/null +++ b/.changeset/khaki-eyes-fetch.md @@ -0,0 +1,5 @@ +--- +"@medusajs/admin-ui": patch +--- + +fix(admin-ui): delete edit variant prices in favor of bulk editor diff --git a/packages/admin-ui/ui/src/components/forms/general/prices-form/index.tsx b/packages/admin-ui/ui/src/components/forms/general/prices-form/index.tsx deleted file mode 100644 index c89b4bc55d..0000000000 --- a/packages/admin-ui/ui/src/components/forms/general/prices-form/index.tsx +++ /dev/null @@ -1,173 +0,0 @@ -import { useAdminRegions, useAdminStore } from "medusa-react" -import { useEffect, useMemo } from "react" -import { FieldArrayWithId, useFieldArray } from "react-hook-form" -import { NestedForm } from "../../../../utils/nested-form" -import NestedPrice from "./nested-price" - -type PricePayload = { - id: string | null - amount: number | null - currency_code: string - region_id: string | null - includes_tax?: boolean -} - -type PriceObject = FieldArrayWithId< - { - __nested__: PricesFormType - }, - "__nested__.prices", - "id" -> & { index: number } - -export type PricesFormType = { - prices: PricePayload[] -} - -export type NestedPriceObject = { - currencyPrice: PriceObject - regionPrices: (PriceObject & { regionName: string })[] -} - -type Props = { - form: NestedForm - required?: boolean -} - -/** - * Re-usable nested form used to submit pricing information for products and their variants. - * Fetches store currencies and regions from the backend, and allows the user to specify both - * currency and region specific prices. - * @example - * - */ -const PricesForm = ({ form }: Props) => { - const { store } = useAdminStore() - const { regions } = useAdminRegions() - - const { control, path } = form - - const { append, update, fields } = useFieldArray({ - control, - name: path("prices"), - }) - - useEffect(() => { - if (!regions || !store || !fields) { - return - } - - regions.forEach((reg) => { - if (!fields.some((field) => field.region_id === reg.id)) { - append({ - id: null, - region_id: reg.id, - amount: null, - currency_code: reg.currency_code, - includes_tax: reg.includes_tax, - }) - } - }) - - store.currencies.forEach((cur) => { - if (!fields.some((field) => field.currency_code === cur.code)) { - append({ - id: null, - currency_code: cur.code, - amount: null, - region_id: null, - includes_tax: cur.includes_tax, - }) - } - }) - - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [regions, store, fields]) - - // Ensure that prices are up to date with their respective tax inclusion setting - useEffect(() => { - if (!regions || !fields || !store) { - return - } - - regions.forEach((reg) => { - const regionPrice = fields.findIndex( - (field) => !!field && field.region_id === reg.id - ) - - if ( - regionPrice !== -1 && - fields[regionPrice].includes_tax !== reg.includes_tax - ) { - update(regionPrice, { - ...fields[regionPrice], - includes_tax: reg.includes_tax, - }) - } - }) - - store.currencies.forEach((cur) => { - const currencyPrice = fields.findIndex( - (field) => - !!field && !field.region_id && field.currency_code === cur.code - ) - - if ( - currencyPrice !== -1 && - fields[currencyPrice].includes_tax !== cur.includes_tax - ) { - update(currencyPrice, { - ...fields[currencyPrice], - includes_tax: cur.includes_tax, - }) - } - }) - - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [regions, store]) - - const priceObj = useMemo(() => { - const obj: Record = {} - - const currencyPrices = fields.filter((field) => field.region_id === null) - const regionPrices = fields.filter((field) => field.region_id !== null) - - currencyPrices.forEach((price) => { - obj[price.currency_code!] = { - currencyPrice: { - ...price, - index: fields.indexOf(price), - }, - regionPrices: regionPrices - .filter( - (regionPrice) => regionPrice.currency_code === price.currency_code - ) - .map((rp) => ({ - ...rp, - regionName: regions?.find((r) => r.id === rp.region_id)?.name || "", - index: fields.indexOf(rp), - })), - } - }) - - return obj - }, [fields, regions]) - - return ( -
-
- {Object.values(priceObj).map((po) => { - return ( - - ) - })} -
-
- ) -} - -export default PricesForm diff --git a/packages/admin-ui/ui/src/components/forms/general/prices-form/nested-price.tsx b/packages/admin-ui/ui/src/components/forms/general/prices-form/nested-price.tsx deleted file mode 100644 index 8a073b5abd..0000000000 --- a/packages/admin-ui/ui/src/components/forms/general/prices-form/nested-price.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import { NestedPriceObject, PricesFormType } from "." - -import CoinsIcon from "../../../fundamentals/icons/coins-icon" -import { Controller } from "react-hook-form" -import IncludesTaxTooltip from "../../../atoms/includes-tax-tooltip" -import MapPinIcon from "../../../fundamentals/icons/map-pin-icon" -import { NestedForm } from "../../../../utils/nested-form" -import PriceFormInput from "./price-form-input" -import TriangleRightIcon from "../../../fundamentals/icons/triangle-right-icon" -import clsx from "clsx" -import { currencies } from "../../../../utils/currencies" -import useToggleState from "../../../../hooks/use-toggle-state" - -type Props = { - form: NestedForm - nestedPrice: NestedPriceObject -} - -const NestedPrice = ({ form, nestedPrice }: Props) => { - const { state, toggle } = useToggleState() - - const { control, path } = form - const { currencyPrice, regionPrices } = nestedPrice - return ( -
-
- -
-
- -
-
- - {currencyPrice.currency_code.toUpperCase()} - - - {currencies[currencyPrice.currency_code.toUpperCase()].name} - - -
-
- { - return ( - - ) - }} - /> -
-
    - {regionPrices.map((rp) => { - return ( -
    -
    -
    - -
    -
    - - {rp.regionName} - - -
    -
    - { - return ( - - ) - }} - /> -
    - ) - })} -
-
- ) -} - -export default NestedPrice diff --git a/packages/admin-ui/ui/src/components/forms/product/variant-form/create-flow-variant-form/index.tsx b/packages/admin-ui/ui/src/components/forms/product/variant-form/create-flow-variant-form/index.tsx index c4a758ae8f..1ac5bfd99e 100644 --- a/packages/admin-ui/ui/src/components/forms/product/variant-form/create-flow-variant-form/index.tsx +++ b/packages/admin-ui/ui/src/components/forms/product/variant-form/create-flow-variant-form/index.tsx @@ -1,28 +1,26 @@ -import { UseFormReturn } from "react-hook-form" -import { nestedForm } from "../../../../../utils/nested-form" -import InputError from "../../../../atoms/input-error" -import IconTooltip from "../../../../molecules/icon-tooltip" -import Accordion from "../../../../organisms/accordion" -import { PricesFormType } from "../../../general/prices-form" import CustomsForm, { CustomsFormType } from "../../customs-form" import DimensionsForm, { DimensionsFormType } from "../../dimensions-form" import VariantGeneralForm, { VariantGeneralFormType, } from "../variant-general-form" -import VariantPricesForm from "../variant-prices-form" import VariantSelectOptionsForm, { VariantOptionValueType, VariantSelectOptionsFormType, } from "../variant-select-options-form" import VariantStockForm, { VariantStockFormType } from "../variant-stock-form" +import Accordion from "../../../../organisms/accordion" +import IconTooltip from "../../../../molecules/icon-tooltip" +import InputError from "../../../../atoms/input-error" +import { UseFormReturn } from "react-hook-form" +import { nestedForm } from "../../../../../utils/nested-form" + export type CreateFlowVariantFormType = { /** * Used to identify the variant during product create flow. Will not be submitted to the backend. */ _internal_id?: string general: VariantGeneralFormType - prices: PricesFormType stock: VariantStockFormType options: VariantSelectOptionsFormType customs: CustomsFormType @@ -77,9 +75,6 @@ const CreateFlowVariantForm = ({ form, options, onCreateOption }: Props) => { - - - diff --git a/packages/admin-ui/ui/src/components/forms/product/variant-form/edit-flow-variant-form/index.tsx b/packages/admin-ui/ui/src/components/forms/product/variant-form/edit-flow-variant-form/index.tsx index 1059aa5e31..9ab784d243 100644 --- a/packages/admin-ui/ui/src/components/forms/product/variant-form/edit-flow-variant-form/index.tsx +++ b/packages/admin-ui/ui/src/components/forms/product/variant-form/edit-flow-variant-form/index.tsx @@ -1,19 +1,18 @@ -import { useFieldArray, UseFormReturn } from "react-hook-form" import CustomsForm, { CustomsFormType } from "../../customs-form" import DimensionsForm, { DimensionsFormType } from "../../dimensions-form" +import MetadataForm, { MetadataFormType } from "../../../general/metadata-form" +import { UseFormReturn, useFieldArray } from "react-hook-form" import VariantGeneralForm, { VariantGeneralFormType, } from "../variant-general-form" import VariantStockForm, { VariantStockFormType } from "../variant-stock-form" -import { useFeatureFlag } from "../../../../../providers/feature-flag-provider" -import { nestedForm } from "../../../../../utils/nested-form" +import Accordion from "../../../../organisms/accordion" import IconTooltip from "../../../../molecules/icon-tooltip" import InputField from "../../../../molecules/input" -import Accordion from "../../../../organisms/accordion" -import MetadataForm, { MetadataFormType } from "../../../general/metadata-form" import { PricesFormType } from "../../../general/prices-form" -import VariantPricesForm from "../variant-prices-form" +import { nestedForm } from "../../../../../utils/nested-form" +import { useFeatureFlag } from "../../../../../providers/feature-flag-provider" export type EditFlowVariantFormType = { /** @@ -97,9 +96,6 @@ const EditFlowVariantForm = ({ form, isEdit }: Props) => { - - - {showStockAndInventory && ( diff --git a/packages/admin-ui/ui/src/components/forms/product/variant-form/variant-prices-form/index.tsx b/packages/admin-ui/ui/src/components/forms/product/variant-form/variant-prices-form/index.tsx deleted file mode 100644 index 87a558c6a1..0000000000 --- a/packages/admin-ui/ui/src/components/forms/product/variant-form/variant-prices-form/index.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { NestedForm } from "../../../../../utils/nested-form" -import PricesForm, { PricesFormType } from "../../../general/prices-form" - -type Props = { - form: NestedForm -} - -const VariantPricesForm = ({ form }: Props) => { - return ( -
-

- Configure the pricing for this variant. -

-
- -
-
- ) -} - -export default VariantPricesForm 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 index 1ce14aab7e..1879a88e2c 100644 --- 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 @@ -1,27 +1,26 @@ import { MoneyAmount, Product } from "@medusajs/client-types" -import mapKeys from "lodash/mapKeys" -import pick from "lodash/pick" -import pickBy from "lodash/pickBy" -import { useAdminRegions, useAdminUpdateVariant } from "medusa-react" -import { useEffect, useMemo, useRef, useState } from "react" - -import { currencies as CURRENCY_MAP } from "../../../../utils/currencies" - -import useNotification from "../../../../hooks/use-notification" -import Fade from "../../../atoms/fade-wrapper" -import Button from "../../../fundamentals/button" -import CrossIcon from "../../../fundamentals/icons/cross-icon" -import Modal from "../../../molecules/modal" -import DeletePrompt from "../../delete-prompt" -import EditPricesActions from "./edit-prices-actions" -import EditPricesTable from "./edit-prices-table" -import SavePrompt from "./save-prompt" import { getAllProductPricesCurrencies, getAllProductPricesRegions, getCurrencyPricesOnly, getRegionPricesOnly, } from "./utils" +import { useAdminRegions, useAdminUpdateVariant } from "medusa-react" +import { useEffect, useMemo, useRef, useState } from "react" + +import Button from "../../../fundamentals/button" +import { currencies as CURRENCY_MAP } from "../../../../utils/currencies" +import CrossIcon from "../../../fundamentals/icons/cross-icon" +import DeletePrompt from "../../delete-prompt" +import EditPricesActions from "./edit-prices-actions" +import EditPricesTable from "./edit-prices-table" +import Fade from "../../../atoms/fade-wrapper" +import Modal from "../../../molecules/modal" +import SavePrompt from "./save-prompt" +import mapKeys from "lodash/mapKeys" +import pick from "lodash/pick" +import pickBy from "lodash/pickBy" +import useNotification from "../../../../hooks/use-notification" type EditPricesModalProps = { close: () => void