Merge branch 'fix/sale-widget-transaction-id' into test/merge-branch-…

…sale-widget

packages/checkout/sdk/src/widgets/definitions/events/sale.ts

@@ -28,6 +28,8 @@ export type SaleSuccess = {
     method: string;
     hash: string | undefined;
   }[];
+  /** The order reference id, use it to trace order throughout flow */
+  transactionId: string;
   [key: string]: unknown;
 };
 
@@ -51,6 +53,8 @@ export type SaleFailed = {
     method: string;
     hash: string | undefined;
   }[];
+  /** The order reference id, use it to trace order throughout flow */
+  transactionId: string;
 };
 
 /**

packages/checkout/widgets-lib/src/widgets/sale/SaleWidgetEvents.ts

@@ -27,6 +27,7 @@ export const sendSaleSuccessEvent = (
   paymentMethod: SalePaymentTypes | undefined,
   transactions: ExecutedTransaction[] = [],
   tokenIds: string[] = [],
+  transactionId: string = '',
 ) => {
   const event = new CustomEvent<
   WidgetEvent<WidgetType.SALE, SaleEventType.SUCCESS>
@@ -37,6 +38,7 @@ export const sendSaleSuccessEvent = (
         paymentMethod,
         transactions,
         tokenIds,
+        transactionId,
       },
     },
   });
@@ -51,6 +53,7 @@ export const sendSaleFailedEvent = (
   error: Record<string, unknown>,
   paymentMethod: SalePaymentTypes | undefined,
   transactions: ExecutedTransaction[] = [],
+  transactionId: string = '',
 ) => {
   const event = new CustomEvent<
   WidgetEvent<WidgetType.SALE, SaleEventType.FAILURE>
@@ -62,6 +65,7 @@ export const sendSaleFailedEvent = (
         error,
         paymentMethod,
         transactions,
+        transactionId,
         timestamp: new Date().getTime(),
       },
     },

packages/checkout/widgets-lib/src/widgets/sale/hooks/useSaleEvents.ts

@@ -67,7 +67,7 @@ export const useSaleEvent = () => {
     screen: string = defaultView,
     transactions: ExecutedTransaction[] = [],
     tokenIds: string[] = [],
-    details?: Record<string, unknown>,
+    details: Record<string, any> = {},
   ) => {
     track({
       ...commonProps,
@@ -84,22 +84,24 @@ export const useSaleEvent = () => {
         tokenIds,
       },
     });
-    sendSaleSuccessEvent(eventTarget, paymentMethod, transactions, tokenIds);
+    sendSaleSuccessEvent(eventTarget, paymentMethod, transactions, tokenIds, details.transactionId);
   };
 
   const sendFailedEvent = (
     reason: string,
     error: Record<string, unknown>,
     transactions: ExecutedTransaction[] = [],
     screen: string = defaultView,
+    details: Record<string, any> = {},
   ) => {
     track({
       ...commonProps,
-      screen: toPascalCase(screen),
+      screen: toPascalCase(screen || defaultView),
       control: 'Fail',
       controlType: 'Event',
       action: 'Failed',
       extras: {
+        ...details,
         transactions: toStringifyTransactions(transactions),
         ...error,
         ...orderProps,
@@ -108,7 +110,7 @@ export const useSaleEvent = () => {
         reason,
       },
     });
-    sendSaleFailedEvent(eventTarget, reason, error, paymentMethod, transactions);
+    sendSaleFailedEvent(eventTarget, reason, error, paymentMethod, transactions, details.transactionId);
   };
 
   const sendTransactionSuccessEvent = (transaction: ExecutedTransaction) => {

packages/checkout/widgets-lib/src/widgets/sale/hooks/useSignOrder.ts

@@ -141,6 +141,7 @@ const toSignResponse = (
       },
       rawData: transaction.raw_data,
     })),
+    transactionId: transactions.find((txn) => txn.method_call.startsWith('execute'))?.params.reference || '',
   };
 };
 

packages/checkout/widgets-lib/src/widgets/sale/types.ts

@@ -38,6 +38,7 @@ export type SignedTransaction = {
 export type SignResponse = {
   order: SignedOrder;
   transactions: SignedTransaction[];
+  transactionId: string;
 };
 
 export type SignOrderInput = {

packages/checkout/widgets-lib/src/widgets/sale/views/PayWithCard.tsx

@@ -14,7 +14,10 @@ export function PayWithCard() {
   const { sendPageView } = useSaleEvent();
   const [initialised, setInitialised] = useState(false);
   const {
-    goBackToPaymentMethods, goToErrorView, signResponse: signData, signTokenIds,
+    goBackToPaymentMethods,
+    goToErrorView,
+    signResponse: signData,
+    signTokenIds,
   } = useSaleContext();
   const { sendOrderCreated, sendCloseEvent, sendSuccessEvent } = useSaleEvent();
   const { t } = useTranslation();
@@ -58,6 +61,7 @@ export function PayWithCard() {
       nftDataBase64,
       quantity,
       signData,
+      transactionId: signData?.transactionId,
     };
 
     sendSuccessEvent(SaleWidgetViews.SALE_SUCCESS, [], signTokenIds, details);
@@ -97,6 +101,7 @@ export function PayWithCard() {
       nftDataBase64,
       quantity,
       signData,
+      transactionId: signData?.transactionId,
     });
   };
 

packages/checkout/widgets-lib/src/widgets/sale/views/PayWithCoins.tsx

@@ -43,7 +43,8 @@ export function PayWithCoins() {
         sendTransactionSuccessEvent(txn);
       },
       (error, txns) => {
-        sendFailedEvent(error.toString(), error, txns);
+        const details = { transactionId: signResponse?.transactionId };
+        sendFailedEvent(error.toString(), error, txns, undefined, details);
       },
     );
   };
@@ -57,7 +58,8 @@ export function PayWithCoins() {
 
   useEffect(() => {
     if (executeResponse?.done === true) {
-      sendSuccessEvent(SaleWidgetViews.SALE_SUCCESS, executeResponse?.transactions, signTokenIds);
+      const details = { transactionId: signResponse?.transactionId };
+      sendSuccessEvent(SaleWidgetViews.SALE_SUCCESS, executeResponse?.transactions, signTokenIds, details);
       sendCloseEvent(SaleWidgetViews.SALE_SUCCESS);
     }
   }, [executeResponse]);