Merge pull request #1593 from Adyen/feature/sessions-onOrderCancel

Add onOrderCancel to sessions
Adyen · May 10, 2022 · be1a3e5 · be1a3e5
2 parents 5e21b6d + 753535c
commit be1a3e5
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 8 deletions.
diff --git a/packages/lib/src/components/Dropin/components/DropinComponent.tsx b/packages/lib/src/components/Dropin/components/DropinComponent.tsx
@@ -2,7 +2,7 @@ import { Component, h } from 'preact';
 import PaymentMethodList from './PaymentMethod/PaymentMethodList';
 import Status from './status';
 import getOrderStatus from '../../../core/Services/order-status';
-import { DropinComponentProps, DropinComponentState, DropinStatusProps } from '../types';
+import { DropinComponentProps, DropinComponentState, DropinStatusProps, onOrderCancelData } from '../types';
 import './DropinComponent.scss';
 import { UIElementStatus } from '../../types';
 
@@ -41,6 +41,8 @@ export class DropinComponent extends Component<DropinComponentProps, DropinCompo
                 }
             }
         );
+
+        this.onOrderCancel = this.getOnOrderCancel();
     };
 
     public setStatus = (status: UIElementStatus, props: DropinStatusProps = {}) => {
@@ -92,6 +94,27 @@ export class DropinComponent extends Component<DropinComponentProps, DropinCompo
         this.setState({ activePaymentMethod: null });
     }
 
+    /**
+     * getOnOrderCancel decides which onOrderCancel logic should be used, manual or sessions
+     */
+    private getOnOrderCancel = () => {
+        if (this.props.onOrderCancel) {
+            return (data: onOrderCancelData) => {
+                this.props.onOrderCancel(data);
+            };
+        }
+        if (this.props.session) {
+            return (data: onOrderCancelData) =>
+                this.props.session
+                    .cancelOrder(data)
+                    .then(() => this.props._parentInstance.update({ order: null }))
+                    .catch(error => this.setStatus(error?.message || 'error'));
+        }
+        return null;
+    };
+
+    private onOrderCancel: (data: onOrderCancelData) => void;
+
     render(props, { elements, instantPaymentElements, status, activePaymentMethod, cachedPaymentMethods }) {
         const isLoading = status.type === 'loading';
         const isRedirecting = status.type === 'redirect';
@@ -121,7 +144,7 @@ export class DropinComponent extends Component<DropinComponentProps, DropinCompo
                                 cachedPaymentMethods={cachedPaymentMethods}
                                 order={this.props.order}
                                 orderStatus={this.state.orderStatus}
-                                onOrderCancel={this.props.onOrderCancel}
+                                onOrderCancel={this.onOrderCancel}
                                 onSelect={this.handleOnSelectPaymentMethod}
                                 openFirstPaymentMethod={this.props.openFirstPaymentMethod}
                                 openFirstStoredPaymentMethod={this.props.openFirstStoredPaymentMethod}

diff --git a/packages/lib/src/components/Dropin/types.ts b/packages/lib/src/components/Dropin/types.ts
@@ -65,10 +65,14 @@ export interface DropinElementProps extends UIElementProps {
     onDisableStoredPaymentMethod?: (storedPaymentMethod, resolve, reject) => void;
 }
 
+export interface onOrderCancelData {
+    order: Order;
+}
+
 export interface DropinComponentProps extends DropinElementProps {
     onCreateElements: any;
     onChange: (newState?: object) => void;
-    onOrderCancel?: (order: Order) => void;
+    onOrderCancel?: (data: onOrderCancelData) => void;
 }
 
 interface DropinStatus {

diff --git a/packages/lib/src/components/types.ts b/packages/lib/src/components/types.ts
@@ -4,6 +4,7 @@ import UIElement from './UIElement';
 import Core from '../core';
 import Analytics from '../core/Analytics';
 import RiskElement from '../core/RiskModule';
+import Session from "../core/CheckoutSession";
 
 export interface PaymentResponse {
     action?: PaymentAction;
@@ -42,10 +43,7 @@ export interface IUIElement {
 export type UIElementStatus = 'ready' | 'loading' | 'error' | 'success';
 
 export interface UIElementProps extends BaseElementProps {
-    session?: {
-        id: string;
-        data: string;
-    };
+    session?: Session;
     onChange?: (state: any, element: UIElement) => void;
     onValid?: (state: any, element: UIElement) => void;
     beforeSubmit?: (state: any, element: UIElement, actions: any) => Promise<void>;

diff --git a/packages/lib/src/core/CheckoutSession/CheckoutSession.ts b/packages/lib/src/core/CheckoutSession/CheckoutSession.ts
@@ -11,8 +11,10 @@ import {
     CheckoutSessionDetailsResponse,
     CheckoutSessionOrdersResponse,
     CheckoutSessionPaymentResponse,
-    CheckoutSessionSetupResponse
+    CheckoutSessionSetupResponse,
 } from '../../types';
+import cancelOrder from '../Services/sessions/cancel-order';
+import {onOrderCancelData} from "../../components/Dropin/types";
 
 class Session {
     private readonly session: CheckoutSession;
@@ -111,6 +113,20 @@ class Session {
         });
     }
 
+    /**
+     * Cancels an order for the current session
+     */
+    cancelOrder(data: onOrderCancelData): Promise<CheckoutSessionOrdersResponse> {
+        return cancelOrder(data.order, this).then(response => {
+            if (response.sessionData) {
+                this.updateSessionData(response.sessionData);
+            }
+
+            return response;
+        });
+    }
+
+
     /**
      * Gets the stored session but only if the current id and the stored id match
      */

diff --git a/packages/lib/src/core/Services/sessions/cancel-order.ts b/packages/lib/src/core/Services/sessions/cancel-order.ts
@@ -0,0 +1,19 @@
+import { httpPost } from '../http';
+import Session from '../../CheckoutSession';
+import {CheckoutSessionOrdersResponse, Order} from '../../../types';
+import { API_VERSION } from './constants';
+
+/**
+ */
+function cancelOrder(order: Order, session: Session): Promise<CheckoutSessionOrdersResponse> {
+    const path = `${API_VERSION}/sessions/${session.id}/orders/cancel?clientKey=${session.clientKey}`;
+
+    const data = {
+        sessionData: session.data,
+        order: order
+    };
+
+    return httpPost({ loadingContext: session.loadingContext, path, errorLevel: 'fatal' }, data);
+}
+
+export default cancelOrder;