From a201475feee1aca7d7e552c558f03645848945ca Mon Sep 17 00:00:00 2001
From: antoniof <m1aw@users.noreply.github.com>
Date: Thu, 22 Aug 2024 19:18:36 +0200
Subject: [PATCH] show ancv id in order

---
 .../components/PaymentMethod/OrderPaymentMethods.tsx | 12 ++++++++++--
 packages/lib/src/types/global-types.ts               |  4 +++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/OrderPaymentMethods.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/OrderPaymentMethods.tsx
index 2b8669014b..2b664a62e1 100644
--- a/packages/lib/src/components/Dropin/components/PaymentMethod/OrderPaymentMethods.tsx
+++ b/packages/lib/src/components/Dropin/components/PaymentMethod/OrderPaymentMethods.tsx
@@ -3,8 +3,16 @@ import PaymentMethodIcon from './PaymentMethodIcon';
 import { useCoreContext } from '../../../../core/Context/CoreProvider';
 import useImage from '../../../../core/Context/useImage';
 import './OrderPaymentMethods.scss';
+import { Order, OrderStatus } from '../../../../types';
 
-export const OrderPaymentMethods = ({ order, orderStatus, onOrderCancel, brandLogoConfiguration }) => {
+type OrderPaymentMethodsProps = {
+    order: Order;
+    orderStatus: OrderStatus;
+    onOrderCancel: (order) => void;
+    brandLogoConfiguration: any;
+};
+
+export const OrderPaymentMethods = ({ order, orderStatus, onOrderCancel, brandLogoConfiguration }: OrderPaymentMethodsProps) => {
     const { i18n } = useCoreContext();
     const getImage = useImage();
 
@@ -20,7 +28,7 @@ export const OrderPaymentMethods = ({ order, orderStatus, onOrderCancel, brandLo
                                     type={orderPaymentMethod.type}
                                     src={brandLogoConfiguration[orderPaymentMethod.type] || getImage()(orderPaymentMethod.type)}
                                 />
-                                •••• {orderPaymentMethod.lastFour}
+                                {orderPaymentMethod.label ? `${orderPaymentMethod.label}` : `•••• ${orderPaymentMethod.lastFour}`}
                             </div>
 
                             {onOrderCancel && (
diff --git a/packages/lib/src/types/global-types.ts b/packages/lib/src/types/global-types.ts
index 42ecdfb057..da6a680352 100644
--- a/packages/lib/src/types/global-types.ts
+++ b/packages/lib/src/types/global-types.ts
@@ -246,8 +246,10 @@ export interface OrderStatus {
     expiresAt: string;
     paymentMethods: {
         amount?: PaymentAmount;
-        lastFour: string;
+        lastFour?: string;
         type: string;
+        name?: string;
+        label?: string;
     }[];
     pspReference: string;
     reference: string;