asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(dashboard): Clean Edit Variant form payload of empty strings (#7512)

Browse Source 
* fix(dashboard): Clean Edit Variant form paylod of empty strings

* fix(dashboard,medusa): Allow passing null to update variant to unset fields

* fix product edit form

* cleanup

* cleanup

* pass prop
This commit is contained in:
Kasper Fabricius Kristensen
2024-05-29 17:09:40 +02:00
committed by GitHub
parent 4483b7980d
commit e5e5eb6e18
8 changed files with 272 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/admin-next/dashboard/src/i18n/translations/en.json
View File

@@ -244,7 +244,8 @@
"tooltip": "The handle is used to reference the product in your storefront. If not specified, the handle will be generated from the product title."
},
"description": {
"label": "Description"
"label": "Description",
"hint": "Give your product a short and clear description.<0/>120-160 characters is the recommended length for search engines."
},
"discountable": {
"label": "Discountable",

48
packages/admin-next/dashboard/src/lib/form-helpers.ts Normal file
View File

@@ -0,0 +1,48 @@
import { castNumber } from "./cast-number"
export function parseOptionalFormValue<T>(
value: T,
nullify = true
): T | undefined | null {
if (typeof value === "string" && value.trim() === "") {
return nullify ? null : undefined
}
if (Array.isArray(value) && value.length === 0) {
return nullify ? null : undefined
}
return value
}
type Nullable<T> = { [K in keyof T]: T[K] | null }
export function parseOptionalFormData<T extends Record<string, unknown>>(
data: T,
nullify = true
): Nullable<T> {
return Object.entries(data).reduce((acc, [key, value]) => {
return {
...acc,
[key]: parseOptionalFormValue(value, nullify),
}
}, {} as Nullable<T>)
}
export function parseOptionalFormNumber(
value?: string | number,
nullify = true
) {
if (
typeof value === "undefined" ||
(typeof value === "string" && value.trim() === "")
) {
return nullify ? null : undefined
}
if (typeof value === "string") {
return castNumber(value)
}
return value
}

349
packages/admin-next/dashboard/src/routes/products/product-edit-variant/components/product-edit-variant-form/product-edit-variant-form.tsx
View File

@@ -5,7 +5,6 @@ import { useForm } from "react-hook-form"
import { useTranslation } from "react-i18next"
import { z } from "zod"
import { Fragment } from "react"
import { Divider } from "../../../../../components/common/divider"
import { Form } from "../../../../../components/common/form"
import { Combobox } from "../../../../../components/inputs/combobox"
@@ -15,13 +14,15 @@ import {
useRouteModal,
} from "../../../../../components/route-modal"
import { useUpdateProductVariant } from "../../../../../hooks/api/products"
import { castNumber } from "../../../../../lib/cast-number"
import {
parseOptionalFormData,
parseOptionalFormNumber,
} from "../../../../../lib/form-helpers"
import { optionalInt } from "../../../../../lib/validation"
type ProductEditVariantFormProps = {
product: Product
variant: ProductVariant
isStockAndInventoryEnabled?: boolean
}
const ProductEditVariantSchema = z.object({
@@ -31,7 +32,6 @@ const ProductEditVariantSchema = z.object({
ean: z.string().optional(),
upc: z.string().optional(),
barcode: z.string().optional(),
inventory_quantity: optionalInt,
manage_inventory: z.boolean(),
allow_backorder: z.boolean(),
weight: optionalInt,
@@ -48,7 +48,6 @@ const ProductEditVariantSchema = z.object({
export const ProductEditVariantForm = ({
product,
variant,
isStockAndInventoryEnabled = false,
}: ProductEditVariantFormProps) => {
const { t } = useTranslation()
const { handleSuccess } = useRouteModal()
@@ -81,65 +80,38 @@ export const ProductEditVariantForm = ({
resolver: zodResolver(ProductEditVariantSchema),
})
const { mutateAsync, isLoading } = useUpdateProductVariant(
const { mutateAsync, isPending } = useUpdateProductVariant(
product.id,
variant.id
)
const handleSubmit = form.handleSubmit(async (data) => {
const parseNumber = (value?: string | number) => {
if (typeof value === "undefined" || value === "") {
return undefined
}
if (typeof value === "string") {
return castNumber(value)
}
return value
}
const {
title,
weight,
height,
width,
length,
inventory_quantity,
allow_backorder,
manage_inventory,
sku,
ean,
upc,
barcode,
...rest
options,
...optional
} = data
/**
* If stock and inventory is not enabled, we need to send the inventory and
* stock related fields to the API. If it is enabled, it should be handled
* in the separate stock and inventory form.
*/
const conditionalPayload = !isStockAndInventoryEnabled
? {
sku,
ean,
upc,
barcode,
inventory_quantity: parseNumber(inventory_quantity),
allow_backorder,
manage_inventory,
}
: {}
const nullableData = parseOptionalFormData(optional)
await mutateAsync(
{
id: variant.id,
weight: parseNumber(weight),
height: parseNumber(height),
width: parseNumber(width),
length: parseNumber(length),
...conditionalPayload,
...rest,
weight: parseOptionalFormNumber(weight),
height: parseOptionalFormNumber(height),
width: parseOptionalFormNumber(width),
length: parseOptionalFormNumber(length),
title,
allow_backorder,
manage_inventory,
options,
...nullableData,
},
{
onSuccess: () => {
@@ -218,165 +190,130 @@ export const ProductEditVariantForm = ({
})}
</div>
<Divider />
{!isStockAndInventoryEnabled && (
<Fragment>
<div className="flex flex-col gap-y-8">
<div className="flex flex-col gap-y-4">
<Heading level="h2">
{t("products.variant.inventory.header")}
</Heading>
<Form.Field
control={form.control}
name="sku"
render={({ field }) => {
return (
<Form.Item>
<Form.Label optional>{t("fields.sku")}</Form.Label>
<Form.Control>
<Input {...field} />
</Form.Control>
<Form.ErrorMessage />
</Form.Item>
)
}}
/>
<Form.Field
control={form.control}
name="ean"
render={({ field }) => {
return (
<Form.Item>
<Form.Label optional>{t("fields.ean")}</Form.Label>
<Form.Control>
<Input {...field} />
</Form.Control>
<Form.ErrorMessage />
</Form.Item>
)
}}
/>
<Form.Field
control={form.control}
name="upc"
render={({ field }) => {
return (
<Form.Item>
<Form.Label optional>{t("fields.upc")}</Form.Label>
<Form.Control>
<Input {...field} />
</Form.Control>
<Form.ErrorMessage />
</Form.Item>
)
}}
/>
<Form.Field
control={form.control}
name="barcode"
render={({ field }) => {
return (
<Form.Item>
<Form.Label optional>
{t("fields.barcode")}
</Form.Label>
<Form.Control>
<Input {...field} />
</Form.Control>
<Form.ErrorMessage />
</Form.Item>
)
}}
/>
<Form.Field
control={form.control}
name="inventory_quantity"
render={({ field }) => {
return (
<Form.Item>
<Form.Label>
{t("fields.inventoryQuantity")}
</Form.Label>
<Form.Control>
<Input type="number" {...field} />
</Form.Control>
<Form.ErrorMessage />
</Form.Item>
)
}}
/>
</div>
<Form.Field
control={form.control}
name="manage_inventory"
render={({ field: { value, onChange, ...field } }) => {
return (
<Form.Item>
<div className="flex flex-col gap-y-1">
<div className="flex items-center justify-between">
<Form.Label>
{t(
"products.variant.inventory.manageInventoryLabel"
)}
</Form.Label>
<Form.Control>
<Switch
checked={value}
onCheckedChange={(checked) =>
onChange(!!checked)
}
{...field}
/>
</Form.Control>
</div>
<Form.Hint>
{t(
"products.variant.inventory.manageInventoryHint"
)}
</Form.Hint>
</div>
<Form.ErrorMessage />
</Form.Item>
)
}}
/>
<Form.Field
control={form.control}
name="allow_backorder"
render={({ field: { value, onChange, ...field } }) => {
return (
<Form.Item>
<div className="flex flex-col gap-y-1">
<div className="flex items-center justify-between">
<Form.Label>
{t(
"products.variant.inventory.allowBackordersLabel"
)}
</Form.Label>
<Form.Control>
<Switch
checked={value}
onCheckedChange={(checked) =>
onChange(!!checked)
}
{...field}
/>
</Form.Control>
</div>
<Form.Hint>
{t(
"products.variant.inventory.allowBackordersHint"
)}
</Form.Hint>
</div>
<Form.ErrorMessage />
</Form.Item>
)
}}
/>
</div>
<Divider />
</Fragment>
)}
<div className="flex flex-col gap-y-8">
<div className="flex flex-col gap-y-4">
<Heading level="h2">
{t("products.variant.inventory.header")}
</Heading>
<Form.Field
control={form.control}
name="sku"
render={({ field }) => {
return (
<Form.Item>
<Form.Label optional>{t("fields.sku")}</Form.Label>
<Form.Control>
<Input {...field} />
</Form.Control>
<Form.ErrorMessage />
</Form.Item>
)
}}
/>
<Form.Field
control={form.control}
name="ean"
render={({ field }) => {
return (
<Form.Item>
<Form.Label optional>{t("fields.ean")}</Form.Label>
<Form.Control>
<Input {...field} />
</Form.Control>
<Form.ErrorMessage />
</Form.Item>
)
}}
/>
<Form.Field
control={form.control}
name="upc"
render={({ field }) => {
return (
<Form.Item>
<Form.Label optional>{t("fields.upc")}</Form.Label>
<Form.Control>
<Input {...field} />
</Form.Control>
<Form.ErrorMessage />
</Form.Item>
)
}}
/>
<Form.Field
control={form.control}
name="barcode"
render={({ field }) => {
return (
<Form.Item>
<Form.Label optional>{t("fields.barcode")}</Form.Label>
<Form.Control>
<Input {...field} />
</Form.Control>
<Form.ErrorMessage />
</Form.Item>
)
}}
/>
</div>
<Form.Field
control={form.control}
name="manage_inventory"
render={({ field: { value, onChange, ...field } }) => {
return (
<Form.Item>
<div className="flex flex-col gap-y-1">
<div className="flex items-center justify-between">
<Form.Label>
{t("products.variant.inventory.manageInventoryLabel")}
</Form.Label>
<Form.Control>
<Switch
checked={value}
onCheckedChange={(checked) => onChange(!!checked)}
{...field}
/>
</Form.Control>
</div>
<Form.Hint>
{t("products.variant.inventory.manageInventoryHint")}
</Form.Hint>
</div>
<Form.ErrorMessage />
</Form.Item>
)
}}
/>
<Form.Field
control={form.control}
name="allow_backorder"
render={({ field: { value, onChange, ...field } }) => {
return (
<Form.Item>
<div className="flex flex-col gap-y-1">
<div className="flex items-center justify-between">
<Form.Label>
{t("products.variant.inventory.allowBackordersLabel")}
</Form.Label>
<Form.Control>
<Switch
checked={value}
onCheckedChange={(checked) => onChange(!!checked)}
{...field}
/>
</Form.Control>
</div>
<Form.Hint>
{t("products.variant.inventory.allowBackordersHint")}
</Form.Hint>
</div>
<Form.ErrorMessage />
</Form.Item>
)
}}
/>
</div>
<Divider />
<div className="flex flex-col gap-y-4">
<Heading level="h2">{t("products.attributes")}</Heading>
<Form.Field
@@ -495,7 +432,7 @@ export const ProductEditVariantForm = ({
{t("actions.cancel")}
</Button>
</RouteDrawer.Close>
<Button type="submit" size="small" isLoading={isLoading}>
<Button type="submit" size="small" isLoading={isPending}>
{t("actions.save")}
</Button>
</div>

6
packages/admin-next/dashboard/src/routes/products/product-edit-variant/loader.ts
View File

@@ -9,11 +9,7 @@ const queryKey = (id: string) => {
}
const queryFn = async (id: string) => {
const productRes = await client.products.retrieve(id)
return {
initialData: productRes,
isStockAndInventoryEnabled: false,
}
return await client.products.retrieve(id)
}
const editProductVariantQuery = (id: string) => ({

7
packages/admin-next/dashboard/src/routes/products/product-edit-variant/product-edit-variant.tsx
View File

@@ -3,12 +3,12 @@ import { Heading } from "@medusajs/ui"
import { useTranslation } from "react-i18next"
import { json, useLoaderData, useParams } from "react-router-dom"
import { RouteDrawer } from "../../../components/route-modal"
import { useProduct } from "../../../hooks/api/products"
import { ProductEditVariantForm } from "./components/product-edit-variant-form"
import { editProductVariantLoader } from "./loader"
import { useProduct } from "../../../hooks/api/products"
export const ProductEditVariant = () => {
const loaderData = useLoaderData() as Awaited<
const initialData = useLoaderData() as Awaited<
ReturnType<typeof editProductVariantLoader>
>
@@ -16,7 +16,7 @@ export const ProductEditVariant = () => {
const { id, variant_id } = useParams()
const { product, isLoading, isError, error } = useProduct(id!, undefined, {
initialData: loaderData?.initialData,
initialData,
})
const variant = product?.variants.find(
@@ -45,7 +45,6 @@ export const ProductEditVariant = () => {
<ProductEditVariantForm
product={product}
variant={variant as unknown as ProductVariant}
isStockAndInventoryEnabled={loaderData?.isStockAndInventoryEnabled}
/>
)}
</RouteDrawer>

22
packages/admin-next/dashboard/src/routes/products/product-edit/components/edit-product-form/edit-product-form.tsx
View File

@@ -12,6 +12,7 @@ import {
useRouteModal,
} from "../../../../../components/route-modal"
import { useUpdateProduct } from "../../../../../hooks/api/products"
import { parseOptionalFormData } from "../../../../../lib/form-helpers"
type EditProductFormProps = {
product: Product
@@ -20,10 +21,10 @@ type EditProductFormProps = {
const EditProductSchema = zod.object({
status: zod.enum(["draft", "published", "proposed", "rejected"]),
title: zod.string().min(1),
subtitle: zod.string(),
subtitle: zod.string().optional(),
handle: zod.string().min(1),
material: zod.string(),
description: zod.string(),
material: zod.string().optional(),
description: zod.string().optional(),
discountable: zod.boolean(),
})
@@ -44,13 +45,20 @@ export const EditProductForm = ({ product }: EditProductFormProps) => {
resolver: zodResolver(EditProductSchema),
})
const { mutateAsync, isLoading } = useUpdateProduct(product.id)
const { mutateAsync, isPending } = useUpdateProduct(product.id)
const handleSubmit = form.handleSubmit(async (data) => {
const { title, discountable, handle, status, ...optional } = data
const nullableData = parseOptionalFormData(optional)
await mutateAsync(
{
...data,
status: data.status as ProductStatus,
title,
discountable,
handle,
status: status as ProductStatus,
...nullableData,
},
{
onSuccess: () => {
@@ -249,7 +257,7 @@ export const EditProductForm = ({ product }: EditProductFormProps) => {
{t("actions.cancel")}
</Button>
</RouteDrawer.Close>
<Button size="small" type="submit" isLoading={isLoading}>
<Button size="small" type="submit" isLoading={isPending}>
{t("actions.save")}
</Button>
</div>

48
packages/core/types/src/product/common.ts
View File

@@ -1183,19 +1183,19 @@ export interface CreateProductVariantDTO {
/**
* The SKU of the product variant.
*/
sku?: string
sku?: string | null
/**
* The barcode of the product variant.
*/
barcode?: string
barcode?: string | null
/**
* The EAN of the product variant.
*/
ean?: string
ean?: string | null
/**
* The UPC of the product variant.
*/
upc?: string
upc?: string | null
/**
* Whether the product variant can be ordered when it's out of stock.
*/
@@ -1207,35 +1207,35 @@ export interface CreateProductVariantDTO {
/**
* The HS Code of the product variant.
*/
hs_code?: string
hs_code?: string | null
/**
* The origin country of the product variant.
*/
origin_country?: string
origin_country?: string | null
/**
* The MID Code of the product variant.
*/
mid_code?: string
mid_code?: string | null
/**
* The material of the product variant.
*/
material?: string
material?: string | null
/**
* The weight of the product variant.
*/
weight?: number
weight?: number | null
/**
* The length of the product variant.
*/
length?: number
length?: number | null
/**
* The height of the product variant.
*/
height?: number
height?: number | null
/**
* The width of the product variant.
*/
width?: number
width?: number | null
/**
* The options of the variant. Each key is an option's title, and value
* is an option's value. If an option with the specified title doesn't exist,
@@ -1280,19 +1280,19 @@ export interface UpdateProductVariantDTO {
/**
* The SKU of the product variant.
*/
sku?: string
sku?: string | null
/**
* The barcode of the product variant.
*/
barcode?: string
barcode?: string | null
/**
* The EAN of the product variant.
*/
ean?: string
ean?: string | null
/**
* The UPC of the product variant.
*/
upc?: string
upc?: string | null
/**
* Whether the product variant can be ordered when it's out of stock.
*/
@@ -1304,35 +1304,35 @@ export interface UpdateProductVariantDTO {
/**
* The HS Code of the product variant.
*/
hs_code?: string
hs_code?: string | null
/**
* The origin country of the product variant.
*/
origin_country?: string
origin_country?: string | null
/**
* The MID Code of the product variant.
*/
mid_code?: string
mid_code?: string | null
/**
* The material of the product variant.
*/
material?: string
material?: string | null
/**
* The weight of the product variant.
*/
weight?: number
weight?: number | null
/**
* The length of the product variant.
*/
length?: number
length?: number | null
/**
* The height of the product variant.
*/
height?: number
height?: number | null
/**
* The width of the product variant.
*/
width?: number
width?: number | null
/**
* The product variant options to associate with the product variant.
*/

63
packages/medusa/src/api/admin/products/validators.ts
View File

@@ -126,21 +126,21 @@ export type AdminCreateProductVariantType = z.infer<
>
export const AdminCreateProductVariant = z.object({
title: z.string(),
sku: z.string().optional(),
ean: z.string().optional(),
upc: z.string().optional(),
barcode: z.string().optional(),
hs_code: z.string().optional(),
mid_code: z.string().optional(),
sku: z.string().nullable().optional(),
ean: z.string().nullable().optional(),
upc: z.string().nullable().optional(),
barcode: z.string().nullable().optional(),
hs_code: z.string().nullable().optional(),
mid_code: z.string().nullable().optional(),
allow_backorder: z.boolean().optional().default(false),
manage_inventory: z.boolean().optional().default(true),
variant_rank: z.number().optional(),
weight: z.number().optional(),
length: z.number().optional(),
height: z.number().optional(),
width: z.number().optional(),
origin_country: z.string().optional(),
material: z.string().optional(),
weight: z.number().nullable().optional(),
length: z.number().nullable().optional(),
height: z.number().nullable().optional(),
width: z.number().nullable().optional(),
origin_country: z.string().nullable().optional(),
material: z.string().nullable().optional(),
metadata: z.record(z.unknown()).optional(),
prices: z.array(AdminCreateVariantPrice),
options: z.record(z.string()).optional(),
@@ -172,29 +172,38 @@ export type AdminCreateProductType = z.infer<typeof AdminCreateProduct>
export const AdminCreateProduct = z
.object({
title: z.string(),
subtitle: z.string().optional(),
description: z.string().optional(),
subtitle: z.string().nullable().optional(),
description: z.string().nullable().optional(),
is_giftcard: z.boolean().optional().default(false),
discountable: z.boolean().optional().default(true),
images: z.array(z.object({ url: z.string() })).optional(),
thumbnail: z.string().optional(),
images: z
.array(z.object({ url: z.string() }))
.nullable()
.optional(),
thumbnail: z.string().nullable().optional(),
handle: z.string().optional(),
status: statusEnum.optional().default(ProductStatus.DRAFT),
type_id: z.string().nullable().optional(),
collection_id: z.string().nullable().optional(),
categories: z.array(AdminCreateProductProductCategory).optional(),
tags: z.array(AdminUpdateProductTag).optional(),
categories: z
.array(AdminCreateProductProductCategory)
.nullable()
.optional(),
tags: z.array(AdminUpdateProductTag).nullable().optional(),
options: z.array(AdminCreateProductOption).optional(),
variants: z.array(AdminCreateProductVariant).optional(),
sales_channels: z.array(z.object({ id: z.string() })).optional(),
weight: z.number().optional(),
length: z.number().optional(),
height: z.number().optional(),
width: z.number().optional(),
hs_code: z.string().optional(),
mid_code: z.string().optional(),
origin_country: z.string().optional(),
material: z.string().optional(),
sales_channels: z
.array(z.object({ id: z.string() }))
.nullable()
.optional(),
weight: z.number().nullable().optional(),
length: z.number().nullable().optional(),
height: z.number().nullable().optional(),
width: z.number().nullable().optional(),
hs_code: z.string().nullable().optional(),
mid_code: z.string().nullable().optional(),
origin_country: z.string().nullable().optional(),
material: z.string().nullable().optional(),
metadata: z.record(z.unknown()).optional(),
})
.strict()