From 987141ab2d1aada3199e1d726ef88539dc6ff897 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Frane=20Poli=C4=87?= <16856471+fPolic@users.noreply.github.com> Date: Fri, 7 Jun 2024 10:59:19 +0200 Subject: [PATCH] fix(dashboard) editor columns (#7534) * fix: reorg variant editor columns, auto select default sales channel when creating products * fix: remove return * fix: add placeholders on options create inputs, add placeholder for chip input * fix: gaps on details pages * fix: address feedback --- .../src/components/data-grid/utils.ts | 8 +- .../dashboard/src/i18n/translations/en.json | 6 + .../campaign-detail/campaign-detail.tsx | 2 +- .../category-detail/category-detail.tsx | 2 +- .../inventory-detail/inventory-detail.tsx | 2 +- .../location-details/location-details.tsx | 2 +- .../order-fulfillment-section.tsx | 2 +- .../orders/order-detail/order-detail.tsx | 6 +- .../routes/orders/order-list/order-list.tsx | 2 +- .../pricing/pricing-detail/pricing-detail.tsx | 2 +- .../product-create-form.tsx | 14 +- .../product-create-variants-form.tsx | 172 +++--------------- .../product-create/product-create.tsx | 17 +- .../routes/products/product-create/utils.ts | 28 ++- .../product-detail/product-detail.tsx | 6 +- .../promotion-detail/promotion-detail.tsx | 2 +- .../reservation-detail/reservation-detail.tsx | 2 +- .../container/container.stories.tsx | 2 +- 18 files changed, 92 insertions(+), 185 deletions(-) diff --git a/packages/admin-next/dashboard/src/components/data-grid/utils.ts b/packages/admin-next/dashboard/src/components/data-grid/utils.ts index eba0cf78dd..8682df363b 100644 --- a/packages/admin-next/dashboard/src/components/data-grid/utils.ts +++ b/packages/admin-next/dashboard/src/components/data-grid/utils.ts @@ -97,7 +97,7 @@ export function getFieldsInRange( } export function convertArrayToPrimitive< - T extends "boolean" | "number" | "string", + T extends "boolean" | "number" | "string" >(values: string[], type: T) { const convertedValues: any[] = [] @@ -172,7 +172,7 @@ type DataGridHelperColumnsProps = { * * @default false */ - disableHidding?: boolean + disableHiding?: boolean } export function createDataGridHelper() { @@ -186,13 +186,13 @@ export function createDataGridHelper() { cell, type = "string", asString, - disableHidding = false, + disableHiding = false, }: DataGridHelperColumnsProps) => columnHelper.display({ id, header, cell, - enableHiding: !disableHidding, + enableHiding: !disableHiding, meta: { type, asString, diff --git a/packages/admin-next/dashboard/src/i18n/translations/en.json b/packages/admin-next/dashboard/src/i18n/translations/en.json index 79e95175a1..3159837cb9 100644 --- a/packages/admin-next/dashboard/src/i18n/translations/en.json +++ b/packages/admin-next/dashboard/src/i18n/translations/en.json @@ -184,6 +184,12 @@ "header": "Variants", "subHeadingTitle": "Yes, this is a product with variants", "subHeadingDescription": "When unchecked we will create a default variant for you", + "optionTitle": { + "placeholder": "Size" + }, + "optionValues": { + "placeholder": "Small, Medium, Large" + }, "productVariants": { "label": "Product variants", "hint": "This ranking will affect how the variants are ranked in your frontend.", diff --git a/packages/admin-next/dashboard/src/routes/campaigns/campaign-detail/campaign-detail.tsx b/packages/admin-next/dashboard/src/routes/campaigns/campaign-detail/campaign-detail.tsx index 55ff7ce337..8355fbb38c 100644 --- a/packages/admin-next/dashboard/src/routes/campaigns/campaign-detail/campaign-detail.tsx +++ b/packages/admin-next/dashboard/src/routes/campaigns/campaign-detail/campaign-detail.tsx @@ -43,7 +43,7 @@ export const CampaignDetail = () => { ) })}
-
+
{after.widgets.map((w, i) => { diff --git a/packages/admin-next/dashboard/src/routes/categories/category-detail/category-detail.tsx b/packages/admin-next/dashboard/src/routes/categories/category-detail/category-detail.tsx index a7e8d7f536..a35ad399cc 100644 --- a/packages/admin-next/dashboard/src/routes/categories/category-detail/category-detail.tsx +++ b/packages/admin-next/dashboard/src/routes/categories/category-detail/category-detail.tsx @@ -44,7 +44,7 @@ export const CategoryDetail = () => { ) })}
-
+
{after.widgets.map((w, i) => { diff --git a/packages/admin-next/dashboard/src/routes/inventory/inventory-detail/inventory-detail.tsx b/packages/admin-next/dashboard/src/routes/inventory/inventory-detail/inventory-detail.tsx index 46fb6dea70..e9d279f920 100644 --- a/packages/admin-next/dashboard/src/routes/inventory/inventory-detail/inventory-detail.tsx +++ b/packages/admin-next/dashboard/src/routes/inventory/inventory-detail/inventory-detail.tsx @@ -45,7 +45,7 @@ export const InventoryDetail = () => { return (
-
+
diff --git a/packages/admin-next/dashboard/src/routes/locations/location-details/location-details.tsx b/packages/admin-next/dashboard/src/routes/locations/location-details/location-details.tsx index 97bcf0207b..69eb600247 100644 --- a/packages/admin-next/dashboard/src/routes/locations/location-details/location-details.tsx +++ b/packages/admin-next/dashboard/src/routes/locations/location-details/location-details.tsx @@ -52,7 +52,7 @@ export const LocationDetails = () => { ) })}
-
+
{after.widgets.map((w, i) => { return ( diff --git a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-fulfillment-section/order-fulfillment-section.tsx b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-fulfillment-section/order-fulfillment-section.tsx index d7e6f3690a..8625dc5bdc 100644 --- a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-fulfillment-section/order-fulfillment-section.tsx +++ b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-fulfillment-section/order-fulfillment-section.tsx @@ -36,7 +36,7 @@ export const OrderFulfillmentSection = ({ const fulfillments = order.fulfillments || [] return ( -
+
{fulfillments.map((f, index) => ( diff --git a/packages/admin-next/dashboard/src/routes/orders/order-detail/order-detail.tsx b/packages/admin-next/dashboard/src/routes/orders/order-detail/order-detail.tsx index d331a51fcc..6e8eae1d6d 100644 --- a/packages/admin-next/dashboard/src/routes/orders/order-detail/order-detail.tsx +++ b/packages/admin-next/dashboard/src/routes/orders/order-detail/order-detail.tsx @@ -39,7 +39,7 @@ export const OrderDetail = () => { } return ( -
+
{before.widgets.map((w, i) => { return (
@@ -48,7 +48,7 @@ export const OrderDetail = () => { ) })}
-
+
{/* */} @@ -64,7 +64,7 @@ export const OrderDetail = () => {
-
+
{sideBefore.widgets.map((w, i) => { return (
diff --git a/packages/admin-next/dashboard/src/routes/orders/order-list/order-list.tsx b/packages/admin-next/dashboard/src/routes/orders/order-list/order-list.tsx index 033ed23345..5e25a07663 100644 --- a/packages/admin-next/dashboard/src/routes/orders/order-list/order-list.tsx +++ b/packages/admin-next/dashboard/src/routes/orders/order-list/order-list.tsx @@ -5,7 +5,7 @@ import before from "virtual:medusa/widgets/order/list/before" export const OrderList = () => { return ( -
+
{before.widgets.map((w, i) => { return (
diff --git a/packages/admin-next/dashboard/src/routes/pricing/pricing-detail/pricing-detail.tsx b/packages/admin-next/dashboard/src/routes/pricing/pricing-detail/pricing-detail.tsx index e3e904b2c9..ff66d85ad3 100644 --- a/packages/admin-next/dashboard/src/routes/pricing/pricing-detail/pricing-detail.tsx +++ b/packages/admin-next/dashboard/src/routes/pricing/pricing-detail/pricing-detail.tsx @@ -34,7 +34,7 @@ export const PricingDetail = () => { ) })}
-
+
{after.widgets.map((w, i) => { diff --git a/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-form/product-create-form.tsx b/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-form/product-create-form.tsx index 6b24fa3c6d..0304f7a4bc 100644 --- a/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-form/product-create-form.tsx +++ b/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-form/product-create-form.tsx @@ -3,6 +3,7 @@ import { Button, ProgressStatus, ProgressTabs, toast } from "@medusajs/ui" import { useEffect, useMemo, useState } from "react" import { useForm, useWatch } from "react-hook-form" import { useTranslation } from "react-i18next" +import { SalesChannelDTO } from "@medusajs/types" import { RouteFocusModal, useRouteModal, @@ -35,7 +36,11 @@ const SAVE_DRAFT_BUTTON = "save-draft-button" let LAST_VISITED_TAB: Tab | null = null -export const ProductCreateForm = () => { +type ProductCreateFormProps = { defaultChannel?: SalesChannelDTO } + +export const ProductCreateForm = ({ + defaultChannel, +}: ProductCreateFormProps) => { const [tab, setTab] = useState(Tab.DETAILS) const [tabState, setTabState] = useState({ [Tab.DETAILS]: "in-progress", @@ -48,7 +53,12 @@ export const ProductCreateForm = () => { const { handleSuccess } = useRouteModal() const form = useForm({ - defaultValues: PRODUCT_CREATE_FORM_DEFAULTS, + defaultValues: { + ...PRODUCT_CREATE_FORM_DEFAULTS, + sales_channels: defaultChannel + ? [{ id: defaultChannel.id, name: defaultChannel.name }] + : [], + }, resolver: zodResolver(ProductCreateSchema), }) diff --git a/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-variants-form/product-create-variants-form.tsx b/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-variants-form/product-create-variants-form.tsx index 9bcb4f0f31..6069b07ee7 100644 --- a/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-variants-form/product-create-variants-form.tsx +++ b/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-variants-form/product-create-variants-form.tsx @@ -1,4 +1,4 @@ -import { ProductVariantDTO } from "@medusajs/types" +import { ProductVariantDTO, RegionDTO } from "@medusajs/types" import { useMemo } from "react" import { UseFormReturn, useWatch } from "react-hook-form" import { useTranslation } from "react-i18next" @@ -11,6 +11,7 @@ import { createDataGridHelper } from "../../../../../components/data-grid/utils" import { DataGridCurrencyCell } from "../../../../../components/data-grid/data-grid-cells/data-grid-currency-cell" import { DataGridBooleanCell } from "../../../../../components/data-grid/data-grid-cells/data-grid-boolean-cell" import { DataGridCountrySelectCell } from "../../../../../components/data-grid/data-grid-cells/data-grid-country-select-cell" +import { useRegions } from "../../../../../hooks/api/regions" type ProductCreateVariantsFormProps = { form: UseFormReturn @@ -19,9 +20,10 @@ type ProductCreateVariantsFormProps = { export const ProductCreateVariantsForm = ({ form, }: ProductCreateVariantsFormProps) => { + const { regions } = useRegions({ limit: 9999 }) + const { store, isPending, isError, error } = useStore({ fields: "supported_currency_codes", - limit: 9999, }) const variants = useWatch({ @@ -39,6 +41,7 @@ export const ProductCreateVariantsForm = ({ const columns = useColumns({ options, currencies: store?.supported_currency_codes, + regions, }) const variantData = useMemo( @@ -66,9 +69,11 @@ const columnHelper = createDataGridHelper() const useColumns = ({ options, currencies = [], + regions = [], }: { options: any // CreateProductOptionSchemaType[] currencies?: string[] + regions: RegionDTO[] }) => { const { t } = useTranslation() @@ -90,7 +95,7 @@ const useColumns = ({ ) }, - disableHidding: true, + disableHiding: true, }), columnHelper.column({ id: "title", @@ -118,45 +123,6 @@ const useColumns = ({ ) }, }), - columnHelper.column({ - id: "ean", - name: t("fields.ean"), - header: t("fields.ean"), - cell: (context) => { - return ( - - ) - }, - }), - columnHelper.column({ - id: "upc", - name: t("fields.upc"), - header: t("fields.upc"), - cell: (context) => { - return ( - - ) - }, - }), - columnHelper.column({ - id: "barcode", - name: t("fields.barcode"), - header: t("fields.barcode"), - cell: (context) => { - return ( - - ) - }, - }), columnHelper.column({ id: "manage_inventory", @@ -189,7 +155,7 @@ const useColumns = ({ columnHelper.column({ id: "inventory_kit", - name: t("fields.allowBackorder"), + name: t("fields.inventoryKit"), header: t("fields.inventoryKit"), cell: (context) => { return ( @@ -220,111 +186,23 @@ const useColumns = ({ }) }), - columnHelper.column({ - id: "mid_code", - name: t("fields.midCode"), - header: t("fields.midCode"), - cell: (context) => { - return ( - - ) - }, - }), - columnHelper.column({ - id: "hs_code", - name: t("fields.hsCode"), - header: t("fields.hsCode"), - cell: (context) => { - return ( - - ) - }, - }), - columnHelper.column({ - id: "width", - name: t("fields.width"), - header: t("fields.width"), - cell: (context) => { - return ( - - ) - }, - }), - columnHelper.column({ - id: "length", - name: t("fields.length"), - header: t("fields.length"), - cell: (context) => { - return ( - - ) - }, - }), - columnHelper.column({ - id: "height", - name: t("fields.height"), - header: t("fields.height"), - cell: (context) => { - return ( - - ) - }, - }), - columnHelper.column({ - id: "weight", - name: t("fields.weight"), - header: t("fields.weight"), - cell: (context) => { - return ( - - ) - }, - }), - columnHelper.column({ - id: "material", - name: t("fields.material"), - header: t("fields.material"), - cell: (context) => { - return ( - - ) - }, - }), - columnHelper.column({ - id: "origin_country", - name: t("fields.countryOfOrigin"), - header: t("fields.countryOfOrigin"), - cell: (context) => { - return ( - - ) - }, + ...regions.map((region) => { + return columnHelper.column({ + id: `price_${region.id}`, + name: `Price ${region.name}`, + header: `Price ${region.name}`, + cell: (context) => { + return ( + + ) + }, + }) }), ], - [currencies, options, t] + [currencies, regions, options, t] ) } diff --git a/packages/admin-next/dashboard/src/routes/products/product-create/product-create.tsx b/packages/admin-next/dashboard/src/routes/products/product-create/product-create.tsx index 4afe1261ac..1f5acf111b 100644 --- a/packages/admin-next/dashboard/src/routes/products/product-create/product-create.tsx +++ b/packages/admin-next/dashboard/src/routes/products/product-create/product-create.tsx @@ -1,10 +1,25 @@ import { RouteFocusModal } from "../../../components/route-modal" import { ProductCreateForm } from "./components/product-create-form/product-create-form" +import { useStore } from "../../../hooks/api/store" +import { useSalesChannel } from "../../../hooks/api/sales-channels" export const ProductCreate = () => { + const { store } = useStore({ + fields: "default_sales_channel", + }) + + const { sales_channel, isPending } = useSalesChannel( + store?.default_sales_channel_id, + { + enabled: !!store, + } + ) + + const canDisplayForm = store && !isPending + return ( - + {canDisplayForm && } ) } diff --git a/packages/admin-next/dashboard/src/routes/products/product-create/utils.ts b/packages/admin-next/dashboard/src/routes/products/product-create/utils.ts index ef995c3062..eb0ee003fb 100644 --- a/packages/admin-next/dashboard/src/routes/products/product-create/utils.ts +++ b/packages/admin-next/dashboard/src/routes/products/product-create/utils.ts @@ -56,10 +56,19 @@ export const normalizeVariants = ( manage_inventory: variant.manage_inventory || undefined, allow_backorder: variant.allow_backorder || undefined, // TODO: inventory - should be added to the workflow - prices: Object.entries(variant.prices || {}).map(([key, value]: any) => ({ - currency_code: key, - amount: getDbAmount(castNumber(value), key), - })), + prices: Object.entries(variant.prices || {}) + .map(([key, value]: any) => { + if (key.startsWith("reg_")) { + // TODO: route needs to accept region prices as well + return undefined + } else { + return { + currency_code: key, + amount: getDbAmount(castNumber(value), key), + } + } + }) + .filter((v) => !!v), })) } @@ -70,19 +79,8 @@ export const decorateVariantsWithDefaultValues = ( ...variant, title: variant.title || "", sku: variant.sku || "", - ean: variant.ean || "", - upc: variant.upc || "", - barcode: variant.barcode || "", manage_inventory: variant.manage_inventory || false, allow_backorder: variant.allow_backorder || false, inventory_kit: variant.inventory_kit || false, - mid_code: variant.mid_code || "", - hs_code: variant.hs_code || "", - width: variant.width || "", - height: variant.height || "", - weight: variant.weight || "", - length: variant.length || "", - material: variant.material || "", - origin_country: variant.origin_country || "", })) } diff --git a/packages/admin-next/dashboard/src/routes/products/product-detail/product-detail.tsx b/packages/admin-next/dashboard/src/routes/products/product-detail/product-detail.tsx index ba8805e0e3..35aeb03d1e 100644 --- a/packages/admin-next/dashboard/src/routes/products/product-detail/product-detail.tsx +++ b/packages/admin-next/dashboard/src/routes/products/product-detail/product-detail.tsx @@ -48,8 +48,8 @@ export const ProductDetail = () => {
) })} -
-
+
+
@@ -65,7 +65,7 @@ export const ProductDetail = () => {
-
+
{sideBefore.widgets.map((w, i) => { return (
diff --git a/packages/admin-next/dashboard/src/routes/promotions/promotion-detail/promotion-detail.tsx b/packages/admin-next/dashboard/src/routes/promotions/promotion-detail/promotion-detail.tsx index cd57e5e543..c5b4549309 100644 --- a/packages/admin-next/dashboard/src/routes/promotions/promotion-detail/promotion-detail.tsx +++ b/packages/admin-next/dashboard/src/routes/promotions/promotion-detail/promotion-detail.tsx @@ -41,7 +41,7 @@ export const PromotionDetail = () => { ) })}
-
+
{ ) })}
-
+
{after.widgets.map((w, i) => { return ( diff --git a/packages/design-system/ui/src/components/container/container.stories.tsx b/packages/design-system/ui/src/components/container/container.stories.tsx index 54c49d25cb..b9094bc896 100644 --- a/packages/design-system/ui/src/components/container/container.stories.tsx +++ b/packages/design-system/ui/src/components/container/container.stories.tsx @@ -29,7 +29,7 @@ export const InLayout: Story = {
Menubar
-
+
Section 1