feat(admin-ui): Add ui for multiple prices per variant

packages/admin-ui/i18n-coverage.json

@@ -1,69 +1,69 @@
 {
-  "generatedOn": "2023-06-02T14:07:46.839Z",
-  "lastCommit": "686dbcbe221581232110f06f8016eadeda55a59d",
+  "generatedOn": "2023-06-02T20:04:27.753Z",
+  "lastCommit": "c15dd2323377708b52aacf4dcbd332e6128395c2",
   "translationStatus": {
     "cs": {
-      "tokenCount": 728,
+      "tokenCount": 729,
       "translatedCount": 546,
       "percentage": 75
     },
     "de": {
-      "tokenCount": 728,
+      "tokenCount": 729,
       "translatedCount": 529,
       "percentage": 73
     },
     "en": {
-      "tokenCount": 728,
-      "translatedCount": 727,
+      "tokenCount": 729,
+      "translatedCount": 728,
       "percentage": 100
     },
     "es": {
-      "tokenCount": 728,
+      "tokenCount": 729,
       "translatedCount": 571,
       "percentage": 78
     },
     "fr": {
-      "tokenCount": 728,
+      "tokenCount": 729,
       "translatedCount": 566,
       "percentage": 78
     },
     "it": {
-      "tokenCount": 728,
+      "tokenCount": 729,
       "translatedCount": 570,
       "percentage": 78
     },
     "pl": {
-      "tokenCount": 728,
+      "tokenCount": 729,
       "translatedCount": 380,
       "percentage": 52
     },
     "pt_BR": {
-      "tokenCount": 728,
+      "tokenCount": 729,
       "translatedCount": 544,
       "percentage": 75
     },
     "pt_PT": {
-      "tokenCount": 728,
+      "tokenCount": 729,
       "translatedCount": 579,
-      "percentage": 80
+      "percentage": 79
     },
     "ru": {
-      "tokenCount": 728,
+      "tokenCount": 729,
       "translatedCount": 569,
       "percentage": 78
     },
     "uk": {
-      "tokenCount": 728,
+      "tokenCount": 729,
       "translatedCount": 569,
       "percentage": 78
     },
     "zh_Hans": {
-      "tokenCount": 728,
+      "tokenCount": 729,
       "translatedCount": 515,
       "percentage": 71
     },
     "zh_Hant": {
-      "tokenCount": 728,
+      "tokenCount": 729,
       "translatedCount": 360,
       "percentage": 49
     }

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

@@ -22,7 +22,8 @@
                 [disabled]="
                     (detailForm.invalid ||
                         stockLevelsForm.invalid ||
-                        (detailForm.pristine && stockLevelsForm.pristine)) &&
+                        pricesForm.invalid ||
+                        (detailForm.pristine && stockLevelsForm.pristine && pricesForm.pristine)) &&
                     !assetsChanged()
                 "
             >
@@ -150,27 +151,65 @@
                             </option>
                         </select>
                     </vdr-form-field>
-                    <vdr-form-field [label]="'catalog.price' | translate" for="sku">
-                        <vdr-currency-input
-                            *ngIf="!(channelPriceIncludesTax$ | async)"
-                            [currencyCode]="variant.currencyCode"
-                            [readonly]="!(updatePermissions | hasPermission)"
-                            formControlName="price"
-                        />
-                        <vdr-currency-input
-                            *ngIf="channelPriceIncludesTax$ | async"
-                            [currencyCode]="variant.currencyCode"
-                            [readonly]="!(updatePermissions | hasPermission)"
-                            formControlName="priceWithTax"
-                        />
+                </div>
+                <div class="form-grid prices" *ngFor="let price of pricesForm.controls" [formGroup]="price">
+                    <vdr-form-field
+                        [label]="
+                            ('catalog.price' | translate) +
+                            (1 < pricesForm.length ? ' (' + price.value.currencyCode + ')' : '')
+                        "
+                        [tooltip]="
+                            1 < pricesForm.length && price.value.currencyCode === channelDefaultCurrencyCode
+                                ? ('catalog.default-currency' | translate)
+                                : undefined
+                        "
+                        for="price"
+                    >
+                        <div class="price-wrapper" [class.pending-deletion]="price.value.delete === true">
+                            <vdr-currency-input
+                                name="price"
+                                [currencyCode]="price.value.currencyCode"
+                                [readonly]="!(updatePermissions | hasPermission) || price.value.delete === true"
+                                formControlName="price"
+                            />
+                            <div *ngIf="1 < pricesForm.controls.length">
+                                <button
+                                    class="button-small delete-button"
+                                    [disabled]="price.value.currencyCode === channelDefaultCurrencyCode"
+                                    (click)="toggleDeletePrice(price.get('delete'))"
+                                >
+                                    <clr-icon shape="trash"></clr-icon>
+                                </button>
+                            </div>
+                        </div>
                     </vdr-form-field>
                     <vdr-variant-price-detail
-                        [price]="detailForm.get('price')!.value"
-                        [currencyCode]="variant.currencyCode"
+                        [price]="price.value.price"
+                        [currencyCode]="price.value.currencyCode"
                         [priceIncludesTax]="channelPriceIncludesTax$ | async"
                         [taxCategoryId]="detailForm.get('taxCategoryId')!.value"
                     />
                 </div>
+                <ng-container *ngIf="unusedCurrencyCodes$ | async as unusedCurrencyCodes">
+                    <div *ngIf="unusedCurrencyCodes.length">
+                        <vdr-dropdown>
+                            <button class="button mt-2" vdrDropdownTrigger>
+                                <clr-icon shape="plus"></clr-icon>
+                                {{ 'catalog.add-price-in-another-currency' | translate }}
+                                <clr-icon shape="ellipsis-vertical"></clr-icon>
+                            </button>
+                            <vdr-dropdown-menu>
+                                <button
+                                    vdrDropdownItem
+                                    *ngFor="let currencyCode of unusedCurrencyCodes"
+                                    (click)="addPriceInCurrency(currencyCode)"
+                                >
+                                    {{ currencyCode | localeCurrencyName }}
+                                </button>
+                            </vdr-dropdown-menu>
+                        </vdr-dropdown>
+                    </div>
+                </ng-container>
             </vdr-card>
             <vdr-card [title]="'catalog.stock-levels' | translate">
                 <div class="form-grid">

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

@@ -8,8 +8,24 @@ vdr-product-variant-quick-jump {
     flex: 1;
     margin-right: calc(var(--space-unit) * 2);
 }
-.stock-levels {
+.stock-levels, .prices {
     margin-top: calc(var(--space-unit) * 2);
     padding-top: calc(var(--space-unit) * 2);
     border-top: 1px solid var(--color-weight-150);
 }
+.price-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--space-unit);
+    width: 100%;
+
+    &.pending-deletion {
+        vdr-currency-input {
+            opacity: 0.7;
+        }
+        .delete-button {
+            background-color: var(--color-error-700);
+            color: var(--color-error-100);
+        }
+    }
+}

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

@@ -5,6 +5,7 @@ import {
     Asset,
     CreateProductVariantInput,
     createUpdatedTranslatable,
+    CurrencyCode,
     DataService,
     findTranslation,
     GetProductVariantDetailDocument,
@@ -32,6 +33,7 @@ import {
     switchMap,
     switchMapTo,
     take,
+    tap,
 } from 'rxjs/operators';
 import { ProductDetailService } from '../../providers/product-detail/product-detail.service';
 import { ApplyFacetDialogComponent } from '../apply-facet-dialog/apply-facet-dialog.component';
@@ -46,8 +48,6 @@ interface VariantFormValue {
     enabled: boolean;
     sku: string;
     name: string;
-    price: number;
-    priceWithTax: number;
     taxCategoryId: string;
     stockOnHand: number;
     useGlobalOutOfStockThreshold: boolean;
@@ -77,8 +77,6 @@ export class ProductVariantDetailComponent
         enabled: false,
         sku: '',
         name: '',
-        price: 0,
-        priceWithTax: 0,
         taxCategoryId: '',
         stockOnHand: 0,
         useGlobalOutOfStockThreshold: true,
@@ -97,14 +95,23 @@ export class ProductVariantDetailComponent
             stockAllocated: FormControl<number | null>;
         }>
     >([]);
+    pricesForm = this.formBuilder.array<
+        FormGroup<{
+            price: FormControl<number | null>;
+            currencyCode: FormControl<CurrencyCode | null>;
+            delete: FormControl<boolean | null>;
+        }>
+    >([]);
     assetChanges: SelectedAssets = {};
     taxCategories$: Observable<Array<ItemOf<GetProductVariantDetailQuery, 'taxCategories'>>>;
     unusedStockLocation$: Observable<Array<ItemOf<GetProductVariantDetailQuery, 'stockLocations'>>>;
+    unusedCurrencyCodes$: Observable<string[]>;
     channelPriceIncludesTax$: Observable<boolean>;
     readonly GlobalFlag = GlobalFlag;
     globalTrackInventory: boolean;
     globalOutOfStockThreshold: number;
     facetValues$: Observable<NonNullable<GetProductVariantDetailQuery['productVariant']>['facetValues']>;
+    channelDefaultCurrencyCode: CurrencyCode;
 
     constructor(
         private productDetailService: ProductDetailService,
@@ -125,6 +132,15 @@ export class ProductVariantDetailComponent
             this.changeDetector.markForCheck();
         });
         this.taxCategories$ = this.result$.pipe(map(data => data.taxCategories.items));
+        const availableCurrencyCodes$ = this.result$.pipe(
+            tap(data => (this.channelDefaultCurrencyCode = data.activeChannel.defaultCurrencyCode)),
+            map(data => data.activeChannel.availableCurrencyCodes),
+        );
+        this.unusedCurrencyCodes$ = combineLatest(this.pricesForm.valueChanges, availableCurrencyCodes$).pipe(
+            map(([prices, currencyCodes]) =>
+                currencyCodes.filter(code => !prices.map(p => p.currencyCode).includes(code)),
+            ),
+        );
         const stockLocations$ = this.result$.pipe(map(data => data.stockLocations.items));
         this.unusedStockLocation$ = combineLatest(this.entity$, stockLocations$).pipe(
             map(([entity, stockLocations]) => {
@@ -160,6 +176,21 @@ export class ProductVariantDetailComponent
         this.destroy();
     }
 
+    addPriceInCurrency(currencyCode: CurrencyCode) {
+        this.pricesForm.push(
+            this.formBuilder.group({
+                currencyCode,
+                price: 0,
+                delete: false as boolean,
+            }),
+        );
+    }
+
+    toggleDeletePrice(deleteFormControl: FormControl) {
+        deleteFormControl.setValue(!deleteFormControl.value);
+        deleteFormControl.markAsDirty();
+    }
+
     addStockLocation(stockLocation: ItemOf<GetProductVariantDetailQuery, 'stockLocations'>) {
         this.stockLevelsForm.push(
             this.formBuilder.group({
@@ -188,7 +219,6 @@ export class ProductVariantDetailComponent
                             'enabled',
                             'translations',
                             'sku',
-                            'price',
                             'taxCategoryId',
                             'facetValueIds',
                             'featuredAssetId',
@@ -201,7 +231,6 @@ export class ProductVariantDetailComponent
                         ],
                     ) as UpdateProductVariantInput;
                     if (this.stockLevelsForm.dirty) {
-                        const stockLevelsFormValue = this.stockLevelsForm.value;
                         input.stockLevels = this.stockLevelsForm.controls
                             .filter(control => control.dirty)
                             .map(control => ({
@@ -211,6 +240,17 @@ export class ProductVariantDetailComponent
                                 stockOnHand: control.value.stockOnHand!,
                             }));
                     }
+                    if (this.pricesForm.dirty) {
+                        input.prices = this.pricesForm.controls
+                            .filter(control => control.dirty)
+                            .map(control => ({
+                                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                                price: control.value.price!,
+                                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                                currencyCode: control.value.currencyCode!,
+                                delete: control.value.delete === true,
+                            }));
+                    }
                     return this.dataService.mutate(ProductVariantUpdateMutationDocument, {
                         input: [input],
                     });
@@ -220,6 +260,7 @@ export class ProductVariantDetailComponent
                 result => {
                     this.detailForm.markAsPristine();
                     this.stockLevelsForm.markAsPristine();
+                    this.pricesForm.markAsPristine();
                     this.assetChanges = {};
                     this.notificationService.success(_('common.notify-update-success'), {
                         entity: 'ProductVariant',
@@ -298,8 +339,6 @@ export class ProductVariantDetailComponent
             enabled: variant.enabled,
             sku: variant.sku,
             name: variantTranslation ? variantTranslation.name : '',
-            price: variant.price,
-            priceWithTax: variant.priceWithTax,
             taxCategoryId: variant.taxCategory.id,
             stockOnHand: variant.stockLevels[0]?.stockOnHand ?? 0,
             useGlobalOutOfStockThreshold: variant.useGlobalOutOfStockThreshold,
@@ -318,6 +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,
+                }),
+            );
+        }
         if (this.customFields.length) {
             this.setCustomFieldFormValues(
                 this.customFields,

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

@@ -11,6 +11,10 @@ export const PRODUCT_VARIANT_DETAIL_QUERY_PRODUCT_VARIANT_FRAGMENT = gql`
         name
         price
         currencyCode
+        prices {
+            price
+            currencyCode
+        }
         priceWithTax
         stockOnHand
         stockAllocated
@@ -109,6 +113,11 @@ export const PRODUCT_VARIANT_DETAIL_QUERY = gql`
             }
             totalItems
         }
+        activeChannel {
+            id
+            availableCurrencyCodes
+            defaultCurrencyCode
+        }
     }
     ${PRODUCT_VARIANT_DETAIL_QUERY_PRODUCT_VARIANT_FRAGMENT}
 `;

packages/admin-ui/src/lib/static/i18n-messages/cs.json

@@ -58,6 +58,7 @@
     "add-facet-value": "Přidat hodnotu atributu",
     "add-facets": "Přidat atribut",
     "add-option": "Přidat možnost",
+    "add-price-in-another-currency": "",
     "add-stock-location": "",
     "asset": "",
     "asset-preview-links": "",

packages/admin-ui/src/lib/static/i18n-messages/de.json

@@ -58,6 +58,7 @@
     "add-facet-value": "Facettenwert hinzufügen",
     "add-facets": "Facetten hinzufügen",
     "add-option": "Option hinzufügen",
+    "add-price-in-another-currency": "",
     "add-stock-location": "",
     "asset": "",
     "asset-preview-links": "",

packages/admin-ui/src/lib/static/i18n-messages/en.json

@@ -58,6 +58,7 @@
     "add-facet-value": "Add facet value",
     "add-facets": "Add facets",
     "add-option": "Add option",
+    "add-price-in-another-currency": "Add a price in another currency",
     "add-stock-location": "Add stock location",
     "asset": "Asset",
     "asset-preview-links": "Asset preview links",

packages/admin-ui/src/lib/static/i18n-messages/es.json

@@ -58,6 +58,7 @@
     "add-facet-value": "Añadir valor de faceta",
     "add-facets": "Añadir facetas",
     "add-option": "Añadir opción",
+    "add-price-in-another-currency": "",
     "add-stock-location": "",
     "asset": "",
     "asset-preview-links": "",

packages/admin-ui/src/lib/static/i18n-messages/fr.json

@@ -58,6 +58,7 @@
     "add-facet-value": "Ajout valeur du composant",
     "add-facets": "Ajout composant",
     "add-option": "Ajout option",
+    "add-price-in-another-currency": "",
     "add-stock-location": "",
     "asset": "",
     "asset-preview-links": "",

packages/admin-ui/src/lib/static/i18n-messages/it.json

@@ -58,6 +58,7 @@
     "add-facet-value": "Aggiungi valore attributo",
     "add-facets": "Aggiungi attributi",
     "add-option": "Aggiungi opzione",
+    "add-price-in-another-currency": "",
     "add-stock-location": "",
     "asset": "",
     "asset-preview-links": "",

packages/admin-ui/src/lib/static/i18n-messages/pl.json

@@ -58,6 +58,7 @@
     "add-facet-value": "Dodaj nazwe faseta",
     "add-facets": "Dodaj faset",
     "add-option": "Dodaj opcje",
+    "add-price-in-another-currency": "",
     "add-stock-location": "",
     "asset": "",
     "asset-preview-links": "",

packages/admin-ui/src/lib/static/i18n-messages/pt_BR.json

@@ -58,6 +58,7 @@
     "add-facet-value": "Adiciona valor para etiqueta",
     "add-facets": "Adiciona etiqueta",
     "add-option": "Adiciona opção",
+    "add-price-in-another-currency": "",
     "add-stock-location": "",
     "asset": "",
     "asset-preview-links": "",

packages/admin-ui/src/lib/static/i18n-messages/pt_PT.json

@@ -58,6 +58,7 @@
     "add-facet-value": "Adicionar novo valor",
     "add-facets": "Adicionar etiqueta",
     "add-option": "Adicionar opção",
+    "add-price-in-another-currency": "",
     "add-stock-location": "",
     "asset": "",
     "asset-preview-links": "",

packages/admin-ui/src/lib/static/i18n-messages/ru.json

@@ -58,6 +58,7 @@
     "add-facet-value": "Добавить значение тега",
     "add-facets": "Добавить тег",
     "add-option": "Добавить опции",
+    "add-price-in-another-currency": "",
     "add-stock-location": "",
     "asset": "",
     "asset-preview-links": "",

packages/admin-ui/src/lib/static/i18n-messages/uk.json

@@ -58,6 +58,7 @@
     "add-facet-value": "Додати значення тегу",
     "add-facets": "Додати тег",
     "add-option": "Додати опцію",
+    "add-price-in-another-currency": "",
     "add-stock-location": "",
     "asset": "",
     "asset-preview-links": "",

packages/admin-ui/src/lib/static/i18n-messages/zh_Hans.json

@@ -58,6 +58,7 @@
     "add-facet-value": "添加特征值",
     "add-facets": "添加特征",
     "add-option": "添加规格组",
+    "add-price-in-another-currency": "",
     "add-stock-location": "",
     "asset": "",
     "asset-preview-links": "",

packages/admin-ui/src/lib/static/i18n-messages/zh_Hant.json

@@ -58,6 +58,7 @@
     "add-facet-value": "新增特徵值",
     "add-facets": "新增特徵",
     "add-option": "新增規格選項",
+    "add-price-in-another-currency": "",
     "add-stock-location": "",
     "asset": "",
     "asset-preview-links": "",

packages/asset-server-plugin/e2e/graphql/generated-e2e-asset-server-plugin-types.ts

@@ -4494,6 +4494,7 @@ export type ProductVariant = Node & {
   outOfStockThreshold: Scalars['Int'];
   price: Scalars['Money'];
   priceWithTax: Scalars['Money'];
+  prices: Array<ProductVariantPrice>;
   product: Product;
   productId: Scalars['ID'];
   sku: Scalars['String'];
@@ -4556,6 +4557,21 @@ export type ProductVariantListOptions = {
   take?: InputMaybe<Scalars['Int']>;
 };
 
+export type ProductVariantPrice = {
+  currencyCode: CurrencyCode;
+  price: Scalars['Int'];
+};
+
+/**
+ * Used to set up update the price of a ProductVariant in a particular Channel.
+ * If the `delete` flag is `true`, the price will be deleted for the given Channel.
+ */
+export type ProductVariantPriceInput = {
+  currencyCode: CurrencyCode;
+  delete?: InputMaybe<Scalars['Boolean']>;
+  price: Scalars['Money'];
+};
+
 export type ProductVariantSortParameter = {
   createdAt?: InputMaybe<SortOrder>;
   id?: InputMaybe<SortOrder>;
@@ -6103,7 +6119,10 @@ export type UpdateProductVariantInput = {
   id: Scalars['ID'];
   optionIds?: InputMaybe<Array<Scalars['ID']>>;
   outOfStockThreshold?: InputMaybe<Scalars['Int']>;
+  /** Sets the price for the ProductVariant in the Channel's default currency */
   price?: InputMaybe<Scalars['Money']>;
+  /** Allows multiple prices to be set for the ProductVariant in different currencies. */
+  prices?: InputMaybe<Array<ProductVariantPriceInput>>;
   sku?: InputMaybe<Scalars['String']>;
   stockLevels?: InputMaybe<Array<StockLevelInput>>;
   stockOnHand?: InputMaybe<Scalars['Int']>;

packages/common/src/generated-types.ts

@@ -4613,6 +4613,7 @@ export type ProductVariant = Node & {
   outOfStockThreshold: Scalars['Int'];
   price: Scalars['Money'];
   priceWithTax: Scalars['Money'];
+  prices: Array<ProductVariantPrice>;
   product: Product;
   productId: Scalars['ID'];
   sku: Scalars['String'];
@@ -4676,6 +4677,22 @@ export type ProductVariantListOptions = {
   take?: InputMaybe<Scalars['Int']>;
 };
 
+export type ProductVariantPrice = {
+  __typename?: 'ProductVariantPrice';
+  currencyCode: CurrencyCode;
+  price: Scalars['Int'];
+};
+
+/**
+ * Used to set up update the price of a ProductVariant in a particular Channel.
+ * If the `delete` flag is `true`, the price will be deleted for the given Channel.
+ */
+export type ProductVariantPriceInput = {
+  currencyCode: CurrencyCode;
+  delete?: InputMaybe<Scalars['Boolean']>;
+  price: Scalars['Money'];
+};
+
 export type ProductVariantSortParameter = {
   createdAt?: InputMaybe<SortOrder>;
   id?: InputMaybe<SortOrder>;
@@ -6276,7 +6293,10 @@ export type UpdateProductVariantInput = {
   id: Scalars['ID'];
   optionIds?: InputMaybe<Array<Scalars['ID']>>;
   outOfStockThreshold?: InputMaybe<Scalars['Int']>;
+  /** Sets the price for the ProductVariant in the Channel's default currency */
   price?: InputMaybe<Scalars['Money']>;
+  /** Allows multiple prices to be set for the ProductVariant in different currencies. */
+  prices?: InputMaybe<Array<ProductVariantPriceInput>>;
   sku?: InputMaybe<Scalars['String']>;
   stockLevels?: InputMaybe<Array<StockLevelInput>>;
   stockOnHand?: InputMaybe<Scalars['Int']>;