feat(admin-ui): Use new cancelPayment mutation to cancel payments

Relates to #1637.

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

@@ -6266,6 +6266,11 @@ export type DiscountFragment = (
   & Pick<Discount, 'adjustmentSource' | 'amount' | 'amountWithTax' | 'description' | 'type'>
 );
 
+export type PaymentFragment = (
+  { __typename?: 'Payment' }
+  & Pick<Payment, 'id' | 'transactionId' | 'amount' | 'method' | 'state' | 'metadata'>
+);
+
 export type RefundFragment = (
   { __typename?: 'Refund' }
   & Pick<Refund, 'id' | 'state' | 'items' | 'shipping' | 'adjustment' | 'transactionId' | 'paymentId'>
@@ -6419,7 +6424,7 @@ export type SettlePaymentMutationVariables = Exact<{
 
 export type SettlePaymentMutation = { settlePayment: (
     { __typename?: 'Payment' }
-    & Pick<Payment, 'id' | 'transactionId' | 'amount' | 'method' | 'state' | 'metadata'>
+    & PaymentFragment
   ) | (
     { __typename?: 'SettlePaymentError' }
     & Pick<SettlePaymentError, 'paymentErrorMessage'>
@@ -6434,6 +6439,24 @@ export type SettlePaymentMutation = { settlePayment: (
     & ErrorResult_OrderStateTransitionError_Fragment
   ) };
 
+export type CancelPaymentMutationVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type CancelPaymentMutation = { cancelPayment: (
+    { __typename?: 'Payment' }
+    & PaymentFragment
+  ) | (
+    { __typename?: 'CancelPaymentError' }
+    & Pick<CancelPaymentError, 'paymentErrorMessage'>
+    & ErrorResult_CancelPaymentError_Fragment
+  ) | (
+    { __typename?: 'PaymentStateTransitionError' }
+    & Pick<PaymentStateTransitionError, 'transitionError'>
+    & ErrorResult_PaymentStateTransitionError_Fragment
+  ) };
+
 export type TransitionPaymentToStateMutationVariables = Exact<{
   id: Scalars['ID'];
   state: Scalars['String'];
@@ -6442,7 +6465,7 @@ export type TransitionPaymentToStateMutationVariables = Exact<{
 
 export type TransitionPaymentToStateMutation = { transitionPaymentToState: (
     { __typename?: 'Payment' }
-    & Pick<Payment, 'id' | 'transactionId' | 'amount' | 'method' | 'state' | 'metadata'>
+    & PaymentFragment
   ) | (
     { __typename?: 'PaymentStateTransitionError' }
     & Pick<PaymentStateTransitionError, 'transitionError'>
@@ -9675,6 +9698,10 @@ export namespace Discount {
   export type Fragment = DiscountFragment;
 }
 
+export namespace Payment {
+  export type Fragment = PaymentFragment;
+}
+
 export namespace Refund {
   export type Fragment = RefundFragment;
 }
@@ -9744,17 +9771,23 @@ export namespace SettlePayment {
   export type Variables = SettlePaymentMutationVariables;
   export type Mutation = SettlePaymentMutation;
   export type SettlePayment = (NonNullable<SettlePaymentMutation['settlePayment']>);
-  export type PaymentInlineFragment = (DiscriminateUnion<(NonNullable<SettlePaymentMutation['settlePayment']>), { __typename?: 'Payment' }>);
   export type SettlePaymentErrorInlineFragment = (DiscriminateUnion<(NonNullable<SettlePaymentMutation['settlePayment']>), { __typename?: 'SettlePaymentError' }>);
   export type PaymentStateTransitionErrorInlineFragment = (DiscriminateUnion<(NonNullable<SettlePaymentMutation['settlePayment']>), { __typename?: 'PaymentStateTransitionError' }>);
   export type OrderStateTransitionErrorInlineFragment = (DiscriminateUnion<(NonNullable<SettlePaymentMutation['settlePayment']>), { __typename?: 'OrderStateTransitionError' }>);
 }
 
+export namespace CancelPayment {
+  export type Variables = CancelPaymentMutationVariables;
+  export type Mutation = CancelPaymentMutation;
+  export type CancelPayment = (NonNullable<CancelPaymentMutation['cancelPayment']>);
+  export type CancelPaymentErrorInlineFragment = (DiscriminateUnion<(NonNullable<CancelPaymentMutation['cancelPayment']>), { __typename?: 'CancelPaymentError' }>);
+  export type PaymentStateTransitionErrorInlineFragment = (DiscriminateUnion<(NonNullable<CancelPaymentMutation['cancelPayment']>), { __typename?: 'PaymentStateTransitionError' }>);
+}
+
 export namespace TransitionPaymentToState {
   export type Variables = TransitionPaymentToStateMutationVariables;
   export type Mutation = TransitionPaymentToStateMutation;
   export type TransitionPaymentToState = (NonNullable<TransitionPaymentToStateMutation['transitionPaymentToState']>);
-  export type PaymentInlineFragment = (DiscriminateUnion<(NonNullable<TransitionPaymentToStateMutation['transitionPaymentToState']>), { __typename?: 'Payment' }>);
   export type PaymentStateTransitionErrorInlineFragment = (DiscriminateUnion<(NonNullable<TransitionPaymentToStateMutation['transitionPaymentToState']>), { __typename?: 'PaymentStateTransitionError' }>);
 }
 

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

@@ -12,6 +12,17 @@ export const DISCOUNT_FRAGMENT = gql`
     }
 `;
 
+export const PAYMENT_FRAGMENT = gql`
+    fragment Payment on Payment {
+        id
+        transactionId
+        amount
+        method
+        state
+        metadata
+    }
+`;
+
 export const REFUND_FRAGMENT = gql`
     fragment Refund on Refund {
         id
@@ -263,14 +274,7 @@ export const GET_ORDER = gql`
 export const SETTLE_PAYMENT = gql`
     mutation SettlePayment($id: ID!) {
         settlePayment(id: $id) {
-            ... on Payment {
-                id
-                transactionId
-                amount
-                method
-                state
-                metadata
-            }
+            ...Payment
             ...ErrorResult
             ... on SettlePaymentError {
                 paymentErrorMessage
@@ -284,25 +288,37 @@ export const SETTLE_PAYMENT = gql`
         }
     }
     ${ERROR_RESULT_FRAGMENT}
+    ${PAYMENT_FRAGMENT}
+`;
+
+export const CANCEL_PAYMENT = gql`
+    mutation CancelPayment($id: ID!) {
+        cancelPayment(id: $id) {
+            ...Payment
+            ...ErrorResult
+            ... on CancelPaymentError {
+                paymentErrorMessage
+            }
+            ... on PaymentStateTransitionError {
+                transitionError
+            }
+        }
+    }
+    ${ERROR_RESULT_FRAGMENT}
+    ${PAYMENT_FRAGMENT}
 `;
 
 export const TRANSITION_PAYMENT_TO_STATE = gql`
     mutation TransitionPaymentToState($id: ID!, $state: String!) {
         transitionPaymentToState(id: $id, state: $state) {
-            ... on Payment {
-                id
-                transactionId
-                amount
-                method
-                state
-                metadata
-            }
+            ...Payment
             ...ErrorResult
             ... on PaymentStateTransitionError {
                 transitionError
             }
         }
     }
+    ${PAYMENT_FRAGMENT}
     ${ERROR_RESULT_FRAGMENT}
 `;
 

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

@@ -4,6 +4,7 @@ import {
     AddNoteToOrderInput,
     CancelOrder,
     CancelOrderInput,
+    CancelPayment,
     CreateFulfillment,
     DeleteOrderNote,
     FulfillOrderInput,
@@ -33,6 +34,7 @@ import {
     ADD_MANUAL_PAYMENT_TO_ORDER,
     ADD_NOTE_TO_ORDER,
     CANCEL_ORDER,
+    CANCEL_PAYMENT,
     CREATE_FULFILLMENT,
     DELETE_ORDER_NOTE,
     GET_ORDER,
@@ -81,6 +83,12 @@ export class OrderDataService {
         });
     }
 
+    cancelPayment(id: string) {
+        return this.baseDataService.mutate<CancelPayment.Mutation, CancelPayment.Variables>(CANCEL_PAYMENT, {
+            id,
+        });
+    }
+
     transitionPaymentToState(id: string, state: string) {
         return this.baseDataService.mutate<
             TransitionPaymentToState.Mutation,

packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.ts

@@ -210,10 +210,9 @@ export class OrderDetailComponent
     }
 
     transitionPaymentState({ payment, state }: { payment: OrderDetail.Payments; state: string }) {
-        this.dataService.order
-            .transitionPaymentToState(payment.id, state)
-            .subscribe(({ transitionPaymentToState }) => {
-                switch (transitionPaymentToState.__typename) {
+        if (state === 'Cancelled') {
+            this.dataService.order.cancelPayment(payment.id).subscribe(({ cancelPayment }) => {
+                switch (cancelPayment.__typename) {
                     case 'Payment':
                         this.notificationService.success(_('order.transitioned-payment-to-state-success'), {
                             state,
@@ -222,10 +221,34 @@ export class OrderDetailComponent
                         this.fetchHistory.next();
                         break;
                     case 'PaymentStateTransitionError':
-                        this.notificationService.error(transitionPaymentToState.message);
+                        this.notificationService.error(cancelPayment.transitionError);
+                        break;
+                    case 'CancelPaymentError':
+                        this.notificationService.error(cancelPayment.paymentErrorMessage);
                         break;
                 }
             });
+        } else {
+            this.dataService.order
+                .transitionPaymentToState(payment.id, state)
+                .subscribe(({ transitionPaymentToState }) => {
+                    switch (transitionPaymentToState.__typename) {
+                        case 'Payment':
+                            this.notificationService.success(
+                                _('order.transitioned-payment-to-state-success'),
+                                {
+                                    state,
+                                },
+                            );
+                            this.dataService.order.getOrder(this.id).single$.subscribe();
+                            this.fetchHistory.next();
+                            break;
+                        case 'PaymentStateTransitionError':
+                            this.notificationService.error(transitionPaymentToState.message);
+                            break;
+                    }
+                });
+        }
     }
 
     canAddFulfillment(order: OrderDetail.Fragment): boolean {

packages/admin-ui/src/lib/order/src/components/order-payment-card/order-payment-card.component.ts

@@ -23,6 +23,6 @@ export class OrderPaymentCardComponent {
         if (!this.payment) {
             return [];
         }
-        return this.payment.nextStates.filter(s => s !== 'Settled');
+        return this.payment.nextStates.filter(s => s !== 'Settled' && s !== 'Error');
     }
 }