Expose admin-ui for custom fields on ProductVariantPrice.

[lzzfnc]

Is your feature request related to a problem? Please describe.

Custom fields for ProductVariantPrice at the moment don't expose an admin-ui.

Describe the solution you'd like

Custom fields are rendered as it happens for other entities.

Describe alternatives you've considered

@michaelbromley mentioned a workaround here:

A work-around solution would be to define a Custom Detail Component block on the product variant detail page as part of a UI extension, and in that block you can have a form which exposes the custom fields. The main drawback here is that it will not be hooked up to the overall form save mechanism for the detail page, so changes made to the custom fields would need their own "save" button inside the custom detail component.

#2654 (comment)

Additional context

I'm trying to setup a system to show discounts on product variants in the catalog. As far as I understood, In order to display the discounted prices in the catalog this cannot be made with a promotion, since it gets applied during checkout, so I'm going with custom fields.

At the moment I managed to implement a single channel version adding a Recommended Retail Price custom field to the ProductVariant, the only problem is that this custom field seems to be not channel aware, meaning that I cannot have the same product with different discounts in different channels. It seems that is possible to set the custom field to ProductVariantPrice intead, and that would be channel-aware apparently. However it doesn't expose any field in the admin UI.

[lzzfnc]

I would be up to work on a contribution for this, @michaelbromley could you point me at where to start? Are there any example to follow in the source?

For the ui part I imagine probably to work here, but not sure if also the services should be addressed

https://github.com/vendure-ecommerce/vendure/tree/8f99b2dac250ca110b6a5ff4e0fa8aebff424888/packages/admin-ui/src/lib/catalog/src/components/product-variant-detail

[michaelbromley]

Great, here's some pointers:

• First you'll need to get access to the custom field defs for prices, in the same way we do here for ProductVariant and ProductOption.
• This config then gets passed to the TabbedCustomFieldComponent in the template, which will render the controls

[lzzfnc]

After some tryouts I realized that ProductVariantPrice is actually an array of prices, so had to consider that when dealing with the binding.

The customFields are rendered properly now, but an error that comes when trying to update them is

Variable "$input" got invalid value { price: 124500, currencyCode: "USD", delete: false, customFields: { RRP: 130000 } } at "input[0].prices[0]"; Field "customFields" is not defined by type "ProductVariantPriceInput".

@michaelbromley I'm wondering if I have to include it in the type definition somewhere?

[dlhck]

@lzzfnc you might need to update the input type here:

vendure/packages/core/src/api/schema/admin-api/product.api.graphql

Line 137 in a735bdf

input ProductVariantPriceInput {

[lzzfnc]

Hey thanks for the hint!

I had a look at the schema you linked, but it doesn't seem that hard coding the customField field to the input there is the way to deal with it? Mostly because there are no other inputs with custom fields there.

I wonder if the way to do it could be to add a function addProductVariantPriceCustomFields function to graphql-custom-fields.ts,

https://github.com/vendure-ecommerce/vendure/blob/a735bdf9eaadb83251eec1a135b084569d10e333/packages/core/src/api/config/graphql-custom-fields.ts

and then using it in the buildSchemaForAPI function

vendure/packages/core/src/api/config/configure-graphql-module.ts

Line 145 in a735bdf

async function buildSchemaForApi(apiType: 'shop' | 'admin'): Promise<GraphQLSchema> {