Merge pull request #549 from Pinelab-studio/feat/cancel-complete-button

Disable buttons on ArrangingPayment
Pinelab-studio · Dec 17, 2024 · a989c76 · a989c76
2 parents 2179d95 + eb7db01
commit a989c76
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 23 deletions.
diff --git a/packages/vendure-plugin-admin-ui-helpers/CHANGELOG.md b/packages/vendure-plugin-admin-ui-helpers/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 1.2.1 (2024-06-21)
+
+- Disable buttons on the `ArrangingPayment` state and allow vendure error to bubble by using a `Promise` instead of an `Observable`
+
 # 1.2.0 (2024-06-21)
 
 - Updated Vendure to 2.2.6

diff --git a/packages/vendure-plugin-admin-ui-helpers/package.json b/packages/vendure-plugin-admin-ui-helpers/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pinelab/vendure-plugin-admin-ui-helpers",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Vendure plugin for various admin ui helpers. Cancel button, complete order button etc.",
   "author": "Martijn van de Brug <[email protected]>",
   "homepage": "https://pinelab-plugins.com/",

diff --git a/packages/vendure-plugin-admin-ui-helpers/src/ui/cancel-order-button.module.ts b/packages/vendure-plugin-admin-ui-helpers/src/ui/cancel-order-button.module.ts
@@ -1,9 +1,8 @@
 import { addActionBarItem, SharedModule } from '@vendure/admin-ui/core';
 import { NgModule } from '@angular/core';
-import { Observable } from 'rxjs';
-import { cancel, refund } from './order-state.util';
+import { Observable, firstValueFrom } from 'rxjs';
+import { cancel, mapEntityToButtonState, refund } from './order-state.util';
 import { RouterModule } from '@angular/router';
-
 @NgModule({
   imports: [
     SharedModule,
@@ -20,29 +19,29 @@ import { RouterModule } from '@angular/router';
       buttonStyle: 'outline',
       icon: 'times-circle',
       locationId: 'order-detail',
+      buttonState: mapEntityToButtonState,
       routerLink: [],
       onClick: async (event, { route, dataService, notificationService }) => {
         try {
           if (!window.confirm('This will cancel and refund. Are you sure?')) {
             return;
           }
           const orderId = route.snapshot.params.id;
-          dataService.order
-            .getOrder(orderId)
-            .single$.subscribe(async (response) => {
-              if (!response?.order) {
-                return notificationService.error('Could not find order...');
-              }
-              if (
-                response.order.state === 'PaymentSettled' ||
-                response.order.state === 'Delivered' ||
-                response.order.state === 'Shipped'
-              ) {
-                await refund(dataService, response.order);
-              }
-              await cancel(dataService, response.order);
-              notificationService.success('Order refunded and cancelled');
-            });
+          const response = await firstValueFrom(
+            dataService.order.getOrder(orderId).single$
+          );
+          if (!response?.order) {
+            return notificationService.error('Could not find order...');
+          }
+          if (
+            response.order.state === 'PaymentSettled' ||
+            response.order.state === 'Delivered' ||
+            response.order.state === 'Shipped'
+          ) {
+            await refund(dataService, response.order);
+          }
+          await cancel(dataService, response.order);
+          notificationService.success('Order refunded and cancelled');
         } catch (e: any) {
           notificationService.error(e.message);
           console.error(e);

diff --git a/packages/vendure-plugin-admin-ui-helpers/src/ui/complete-order-button.module.ts b/packages/vendure-plugin-admin-ui-helpers/src/ui/complete-order-button.module.ts
@@ -1,7 +1,11 @@
 import { addActionBarItem, SharedModule } from '@vendure/admin-ui/core';
 import { NgModule } from '@angular/core';
 import { Observable } from 'rxjs';
-import { transitionToDelivered, transitionToShipped } from './order-state.util';
+import {
+  mapEntityToButtonState,
+  transitionToDelivered,
+  transitionToShipped,
+} from './order-state.util';
 import { RouterModule } from '@angular/router';
 
 @NgModule({
@@ -20,6 +24,7 @@ import { RouterModule } from '@angular/router';
       buttonStyle: 'outline',
       icon: 'check-circle',
       locationId: 'order-detail',
+      buttonState: mapEntityToButtonState,
       routerLink: [],
       onClick: async (event, { route, dataService, notificationService }) => {
         try {

diff --git a/packages/vendure-plugin-admin-ui-helpers/src/ui/order-state.util.ts b/packages/vendure-plugin-admin-ui-helpers/src/ui/order-state.util.ts
@@ -1,8 +1,9 @@
-import { DataService } from '@vendure/admin-ui/core';
+import { ActionBarContext, DataService } from '@vendure/admin-ui/core';
 import {
   FulfillmentStateTransitionError,
   OrderDetailFragment,
-} from '@vendure/admin-ui/core/common/generated-types';
+} from '@vendure/admin-ui/core';
+import { map } from 'rxjs';
 import { ErrorResult, RefundOrderStateError } from '@vendure/core';
 
 export async function transitionToShipped(
@@ -117,3 +118,12 @@ export async function cancel(
     throw Error(`${errorResult.errorCode} - ${errorResult.message}`);
   }
 }
+
+export function mapEntityToButtonState(context: ActionBarContext) {
+  return context.entity$.pipe(
+    map((entity) => ({
+      disabled: entity?.state === 'ArrangingPayment',
+      visible: true,
+    }))
+  );
+}