feat(admin-ui): UI for deletion of PaymentMethods

packages/admin-ui/i18n-coverage.json

@@ -1,49 +1,49 @@
 {
-  "generatedOn": "2021-02-16T10:13:22.418Z",
-  "lastCommit": "d3b0f606ed5071419ddd6cb052de8fffb195de9e",
+  "generatedOn": "2021-04-08T11:34:06.531Z",
+  "lastCommit": "f97cd4fcf3f1467ae6274dde2f664088c5eb82ff",
   "translationStatus": {
     "cs": {
-      "tokenCount": 771,
+      "tokenCount": 772,
       "translatedCount": 753,
       "percentage": 98
     },
     "de": {
-      "tokenCount": 771,
-      "translatedCount": 594,
-      "percentage": 77
+      "tokenCount": 772,
+      "translatedCount": 731,
+      "percentage": 95
     },
     "en": {
-      "tokenCount": 771,
-      "translatedCount": 768,
+      "tokenCount": 772,
+      "translatedCount": 771,
       "percentage": 100
     },
     "es": {
-      "tokenCount": 771,
+      "tokenCount": 772,
       "translatedCount": 456,
       "percentage": 59
     },
     "fr": {
-      "tokenCount": 771,
+      "tokenCount": 772,
       "translatedCount": 690,
       "percentage": 89
     },
     "pl": {
-      "tokenCount": 771,
+      "tokenCount": 772,
       "translatedCount": 549,
       "percentage": 71
     },
     "pt_BR": {
-      "tokenCount": 771,
+      "tokenCount": 772,
       "translatedCount": 749,
       "percentage": 97
     },
     "zh_Hans": {
-      "tokenCount": 771,
+      "tokenCount": 772,
       "translatedCount": 531,
       "percentage": 69
     },
     "zh_Hant": {
-      "tokenCount": 771,
+      "tokenCount": 772,
       "translatedCount": 531,
       "percentage": 69
     }

packages/admin-ui/src/lib/core/src/common/generated-types.ts

@@ -409,6 +409,8 @@ export type Mutation = {
   /** Delete one or more FacetValues */
   deleteFacetValues: Array<DeletionResponse>;
   deleteOrderNote: DeletionResponse;
+  /** Delete a PaymentMethod */
+  deletePaymentMethod: DeletionResponse;
   /** Delete a Product */
   deleteProduct: DeletionResponse;
   /** Delete a ProductVariant */
@@ -777,6 +779,12 @@ export type MutationDeleteOrderNoteArgs = {
 };
 
 
+export type MutationDeletePaymentMethodArgs = {
+  id: Scalars['ID'];
+  force?: Maybe<Scalars['Boolean']>;
+};
+
+
 export type MutationDeleteProductArgs = {
   id: Scalars['ID'];
 };
@@ -7291,6 +7299,17 @@ export type UpdatePaymentMethodMutation = { updatePaymentMethod: (
     & PaymentMethodFragment
   ) };
 
+export type DeletePaymentMethodMutationVariables = Exact<{
+  id: Scalars['ID'];
+  force?: Maybe<Scalars['Boolean']>;
+}>;
+
+
+export type DeletePaymentMethodMutation = { deletePaymentMethod: (
+    { __typename?: 'DeletionResponse' }
+    & Pick<DeletionResponse, 'result' | 'message'>
+  ) };
+
 export type GlobalSettingsFragment = (
   { __typename?: 'GlobalSettings' }
   & Pick<GlobalSettings, 'id' | 'availableLanguages' | 'trackInventory' | 'outOfStockThreshold'>
@@ -9477,6 +9496,12 @@ export namespace UpdatePaymentMethod {
   export type UpdatePaymentMethod = (NonNullable<UpdatePaymentMethodMutation['updatePaymentMethod']>);
 }
 
+export namespace DeletePaymentMethod {
+  export type Variables = DeletePaymentMethodMutationVariables;
+  export type Mutation = DeletePaymentMethodMutation;
+  export type DeletePaymentMethod = (NonNullable<DeletePaymentMethodMutation['deletePaymentMethod']>);
+}
+
 export namespace GlobalSettings {
   export type Fragment = GlobalSettingsFragment;
   export type ServerConfig = (NonNullable<GlobalSettingsFragment['serverConfig']>);

packages/admin-ui/src/lib/core/src/data/definitions/settings-definitions.ts

@@ -444,6 +444,15 @@ export const UPDATE_PAYMENT_METHOD = gql`
     ${PAYMENT_METHOD_FRAGMENT}
 `;
 
+export const DELETE_PAYMENT_METHOD = gql`
+    mutation DeletePaymentMethod($id: ID!, $force: Boolean) {
+        deletePaymentMethod(id: $id, force: $force) {
+            result
+            message
+        }
+    }
+`;
+
 export const GLOBAL_SETTINGS_FRAGMENT = gql`
     fragment GlobalSettings on GlobalSettings {
         id

packages/admin-ui/src/lib/core/src/data/providers/settings-data.service.ts

@@ -18,6 +18,7 @@ import {
     CreateZoneInput,
     DeleteChannel,
     DeleteCountry,
+    DeletePaymentMethod,
     DeleteTaxCategory,
     DeleteTaxRate,
     DeleteZone,
@@ -70,6 +71,7 @@ import {
     CREATE_ZONE,
     DELETE_CHANNEL,
     DELETE_COUNTRY,
+    DELETE_PAYMENT_METHOD,
     DELETE_TAX_CATEGORY,
     DELETE_TAX_RATE,
     DELETE_ZONE,
@@ -340,6 +342,16 @@ export class SettingsDataService {
         );
     }
 
+    deletePaymentMethod(id: string, force: boolean) {
+        return this.baseDataService.mutate<DeletePaymentMethod.Mutation, DeletePaymentMethod.Variables>(
+            DELETE_PAYMENT_METHOD,
+            {
+                id,
+                force,
+            },
+        );
+    }
+
     getPaymentMethodOperations() {
         return this.baseDataService.query<GetPaymentMethodOperations.Query>(GET_PAYMENT_METHOD_OPERATIONS);
     }

packages/admin-ui/src/lib/settings/src/components/payment-method-list/payment-method-list.component.html

@@ -19,6 +19,7 @@
     <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.enabled' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
+    <vdr-dt-column></vdr-dt-column>
     <ng-template let-paymentMethod="item">
         <td class="left align-middle">{{ paymentMethod.code }}</td>
         <td class="left align-middle">{{ paymentMethod.enabled }}</td>
@@ -29,5 +30,25 @@
                 [linkTo]="['./', paymentMethod.id]"
             ></vdr-table-row-action>
         </td>
+        <td class="right align-middle">
+            <vdr-dropdown>
+                <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
+                    {{ 'common.actions' | translate }}
+                    <clr-icon shape="caret down"></clr-icon>
+                </button>
+                <vdr-dropdown-menu vdrPosition="bottom-right">
+                    <button
+                        type="button"
+                        class="delete-button"
+                        (click)="deletePaymentMethod(paymentMethod.id)"
+                        [disabled]="!('DeleteSettings' | hasPermission)"
+                        vdrDropdownItem
+                    >
+                        <clr-icon shape="trash" class="is-danger"></clr-icon>
+                        {{ 'common.delete' | translate }}
+                    </button>
+                </vdr-dropdown-menu>
+            </vdr-dropdown>
+        </td>
     </ng-template>
 </vdr-data-table>

packages/admin-ui/src/lib/settings/src/components/payment-method-list/payment-method-list.component.ts

@@ -1,8 +1,16 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { BaseListComponent } from '@vendure/admin-ui/core';
-import { GetPaymentMethodList } from '@vendure/admin-ui/core';
-import { DataService } from '@vendure/admin-ui/core';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import {
+    BaseListComponent,
+    DataService,
+    DeletionResult,
+    GetPaymentMethodList,
+    ModalService,
+    NotificationService,
+} from '@vendure/admin-ui/core';
+import { EMPTY } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
 
 @Component({
     selector: 'vdr-payment-method-list',
@@ -14,11 +22,65 @@ export class PaymentMethodListComponent extends BaseListComponent<
     GetPaymentMethodList.Query,
     GetPaymentMethodList.Items
 > {
-    constructor(private dataService: DataService, router: Router, route: ActivatedRoute) {
+    constructor(
+        private dataService: DataService,
+        router: Router,
+        route: ActivatedRoute,
+        private modalService: ModalService,
+        private notificationService: NotificationService,
+    ) {
         super(router, route);
         super.setQueryFn(
             (...args: any[]) => this.dataService.settings.getPaymentMethods(...args).refetchOnChannelChange(),
             data => data.paymentMethods,
         );
     }
+
+    deletePaymentMethod(paymentMethodId: string) {
+        this.showModalAndDelete(paymentMethodId)
+            .pipe(
+                switchMap(response => {
+                    if (response.result === DeletionResult.DELETED) {
+                        return [true];
+                    } else {
+                        return this.showModalAndDelete(paymentMethodId, response.message || '').pipe(
+                            map(r => r.result === DeletionResult.DELETED),
+                        );
+                    }
+                }),
+                // Refresh the cached facets to reflect the changes
+                switchMap(() => this.dataService.settings.getPaymentMethods(100).single$),
+            )
+            .subscribe(
+                () => {
+                    this.notificationService.success(_('common.notify-delete-success'), {
+                        entity: 'PaymentMethod',
+                    });
+                    this.refresh();
+                },
+                err => {
+                    this.notificationService.error(_('common.notify-delete-error'), {
+                        entity: 'PaymentMethod',
+                    });
+                },
+            );
+    }
+
+    private showModalAndDelete(paymentMethodId: string, message?: string) {
+        return this.modalService
+            .dialog({
+                title: _('settings.confirm-delete-payment-method'),
+                body: message,
+                buttons: [
+                    { type: 'secondary', label: _('common.cancel') },
+                    { type: 'danger', label: _('common.delete'), returnValue: true },
+                ],
+            })
+            .pipe(
+                switchMap(res =>
+                    res ? this.dataService.settings.deletePaymentMethod(paymentMethodId, !!message) : EMPTY,
+                ),
+                map(res => res.deletePaymentMethod),
+            );
+    }
 }

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

@@ -713,6 +713,7 @@
     "add-products-to-test-order": "Přidat produkty do testovací objednávky",
     "channel": "Kanál",
     "channel-token": "Token kanálu",
+    "confirm-delete-payment-method": "",
     "confirm-delete-role": "Smazat roli?",
     "confirm-delete-tax-category": "Smazat daňovou kategorii?",
     "confirm-delete-tax-rate": "Smazat daňovou sazbu?",

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

@@ -713,6 +713,7 @@
     "add-products-to-test-order": "Produkte zur Testbestellung hinzufügen",
     "channel": "Kanal",
     "channel-token": "Kanal-Token",
+    "confirm-delete-payment-method": "",
     "confirm-delete-role": "Rolle löschen?",
     "confirm-delete-tax-category": "Steuerkategorie löschen?",
     "confirm-delete-tax-rate": "Steuersatz löschen?",
@@ -804,4 +805,4 @@
     "job-result": "Job-Ergebnis",
     "job-state": "Job-Status"
   }
-}
+}

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

@@ -713,6 +713,7 @@
     "add-products-to-test-order": "Add products to the test order",
     "channel": "Channel",
     "channel-token": "Channel token",
+    "confirm-delete-payment-method": "Delete payment method?",
     "confirm-delete-role": "Delete role?",
     "confirm-delete-tax-category": "Delete tax category?",
     "confirm-delete-tax-rate": "Delete tax rate?",

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

@@ -713,6 +713,7 @@
     "add-products-to-test-order": "",
     "channel": "Canal de ventas",
     "channel-token": "Token de canal",
+    "confirm-delete-payment-method": "",
     "confirm-delete-role": "¿Eliminar rol?",
     "confirm-delete-tax-category": "¿Eliminar categoría de impuestos?",
     "confirm-delete-tax-rate": "¿Eliminar tasa de impuestos?",

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

@@ -713,6 +713,7 @@
     "add-products-to-test-order": "Ajouter des produits à la commande de test",
     "channel": "Canal",
     "channel-token": "Jeton de canal",
+    "confirm-delete-payment-method": "",
     "confirm-delete-role": "Supprimer le role ?",
     "confirm-delete-tax-category": "Supprimer la catégorie de taxe ?",
     "confirm-delete-tax-rate": "Supprimer le taux de taxe ?",

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

@@ -713,6 +713,7 @@
     "add-products-to-test-order": "Dodaj produkty do testowanego zamówienia",
     "channel": "Kanał",
     "channel-token": "Token kanału",
+    "confirm-delete-payment-method": "",
     "confirm-delete-role": "Usunąć role?",
     "confirm-delete-tax-category": "Usunąć kategorię podatkową?",
     "confirm-delete-tax-rate": "Usunąć stawke podatkową?",

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

@@ -713,6 +713,7 @@
     "add-products-to-test-order": "Adicionar produdos para o pedido de teste",
     "channel": "Canal",
     "channel-token": "Token do canal",
+    "confirm-delete-payment-method": "",
     "confirm-delete-role": "Exluir regra?",
     "confirm-delete-tax-category": "Excluir categoria de imposto?",
     "confirm-delete-tax-rate": "Excluir taxa de imposto?",

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

@@ -713,6 +713,7 @@
     "add-products-to-test-order": "添加产品到测试订单",
     "channel": "销售渠道",
     "channel-token": "渠道唯一码",
+    "confirm-delete-payment-method": "",
     "confirm-delete-role": "确认删除角色?",
     "confirm-delete-tax-category": "确认删除税表分类?",
     "confirm-delete-tax-rate": "去人删除税率?",

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

@@ -713,6 +713,7 @@
     "add-products-to-test-order": "新增產品到測試訂單",
     "channel": "渠道",
     "channel-token": "渠道唯一碼",
+    "confirm-delete-payment-method": "",
     "confirm-delete-role": "確認移除角色?",
     "confirm-delete-tax-category": "確認移除税表分類?",
     "confirm-delete-tax-rate": "確認移除税率?",