fix(admin-ui): Add ProductVariantPrice custom fields ui inputs (#3327)

Co-authored-by: Michael Bromley <[email protected]>

Author: Draykee

package-lock.json

@@ -195,12 +195,26 @@
                         [priceIncludesTax]="channelPriceIncludesTax$ | async"
                         [taxCategoryId]="detailForm.get('taxCategoryId')!.value"
                     />
+
+                    <div class="form-grid-span" *ngIf="customPriceFields.length">
+                        <div class="title-row">
+                            <span class="title">{{ 'common.custom-fields' | translate }}</span>
+                        </div>
+                        <vdr-tabbed-custom-fields
+                            entityName="ProductVariantPrice"
+                            [customFields]="customPriceFields"
+                            [customFieldsFormGroup]="price.get(['customFields'])"
+                            [readonly]="!(updatePermissions | hasPermission)"
+                        />
+                    </div>
                 </div>
+
                 <vdr-variant-price-strategy-detail
                     [channelPriceIncludesTax]="channelPriceIncludesTax$ | async"
                     [channelDefaultCurrencyCode]="channelDefaultCurrencyCode"
                     [variant]="variant"
                 />
+
                 <ng-container *ngIf="unusedCurrencyCodes$ | async as unusedCurrencyCodes">
                     <div *ngIf="unusedCurrencyCodes.length">
                         <vdr-dropdown>

packages/admin-ui/src/lib/catalog/src/components/product-variant-detail/product-variant-detail.component.html

@@ -29,3 +29,12 @@ vdr-product-variant-quick-jump {
         }
     }
 }
+
+.title-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.title {
+    font-size: var(--font-size-base);
+}

packages/admin-ui/src/lib/catalog/src/components/product-variant-detail/product-variant-detail.component.scss

@@ -71,6 +71,7 @@ export class ProductVariantDetailComponent
 {
     public readonly updatePermissions = [Permission.UpdateCatalog, Permission.UpdateProduct];
     readonly customFields = this.getCustomFieldConfig('ProductVariant');
+    readonly customPriceFields = this.getCustomFieldConfig('ProductVariantPrice');
     readonly customOptionFields = this.getCustomFieldConfig('ProductOption');
     stockLevels$: Observable<NonNullable<GetProductVariantDetailQuery['productVariant']>['stockLevels']>;
     detailForm = this.formBuilder.group<VariantFormValue>({
@@ -99,6 +100,7 @@ export class ProductVariantDetailComponent
             price: FormControl<number | null>;
             currencyCode: FormControl<CurrencyCode | null>;
             delete: FormControl<boolean | null>;
+            customFields: FormGroup<any>; //TODO: Add type
         }>
     >([]);
     assetChanges: SelectedAssets = {};
@@ -181,6 +183,7 @@ export class ProductVariantDetailComponent
                 currencyCode,
                 price: 0,
                 delete: false as boolean,
+                customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customPriceFields)),
             }),
         );
     }
@@ -246,6 +249,7 @@ export class ProductVariantDetailComponent
                                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                                 currencyCode: control.value.currencyCode!,
                                 delete: control.value.delete === true,
+                                customFields: control.get('customFields')?.value,
                             }));
                     }
                     return this.dataService.mutate(ProductVariantUpdateMutationDocument, {
@@ -353,13 +357,16 @@ export class ProductVariantDetailComponent
         }
         this.pricesForm.clear();
         for (const price of variant.prices) {
-            this.pricesForm.push(
-                this.formBuilder.group({
-                    price: price.price,
-                    currencyCode: price.currencyCode,
-                    delete: false as boolean,
-                }),
-            );
+            const priceForm = this.formBuilder.group({
+                price: price.price,
+                currencyCode: price.currencyCode,
+                delete: false as boolean,
+                customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customPriceFields)),
+            });
+            if (this.customPriceFields.length) {
+                this.setCustomFieldFormValues(this.customPriceFields, priceForm.get(['customFields']), price);
+            }
+            this.pricesForm.push(priceForm);
         }
         if (this.customFields.length) {
             this.setCustomFieldFormValues(

packages/admin-ui/src/lib/catalog/src/components/product-variant-detail/product-variant-detail.component.ts

@@ -1,4 +1,8 @@
-import { ASSET_FRAGMENT, PRODUCT_OPTION_FRAGMENT } from '@vendure/admin-ui/core';
+import {
+    ASSET_FRAGMENT,
+    PRODUCT_OPTION_FRAGMENT,
+    PRODUCT_VARIANT_PRICE_FRAGMENT,
+} from '@vendure/admin-ui/core';
 import { gql } from 'apollo-angular';
 
 export const PRODUCT_VARIANT_DETAIL_QUERY_PRODUCT_VARIANT_FRAGMENT = gql`
@@ -12,8 +16,7 @@ export const PRODUCT_VARIANT_DETAIL_QUERY_PRODUCT_VARIANT_FRAGMENT = gql`
         price
         currencyCode
         prices {
-            price
-            currencyCode
+            ...ProductVariantPrice
         }
         priceWithTax
         stockOnHand
@@ -87,6 +90,7 @@ export const PRODUCT_VARIANT_DETAIL_QUERY_PRODUCT_VARIANT_FRAGMENT = gql`
             }
         }
     }
+    ${PRODUCT_VARIANT_PRICE_FRAGMENT}
 `;
 
 export const PRODUCT_VARIANT_DETAIL_QUERY = gql`

packages/admin-ui/src/lib/catalog/src/components/product-variant-detail/product-variant-detail.graphql.ts

@@ -62,6 +62,13 @@ export const PRODUCT_OPTION_FRAGMENT = gql`
     }
 `;
 
+export const PRODUCT_VARIANT_PRICE_FRAGMENT = gql`
+    fragment ProductVariantPrice on ProductVariantPrice {
+        price
+        currencyCode
+    }
+`;
+
 export const PRODUCT_VARIANT_FRAGMENT = gql`
     fragment ProductVariant on ProductVariant {
         id