fix: transaction id copy issue

apps/api/src/app/organization/dtos/member-repsonse.dto.ts → apps/api/src/app/organization/dtos/member-response.dto.ts

@@ -74,5 +74,5 @@ export class MemberResponseDto {
 
   @ApiProperty()
   @IsString()
-  _organisationId: string;
+  _organizationId: string;
 }

apps/api/src/app/organization/organization.controller.ts

@@ -42,7 +42,7 @@ import { UpdateMemberRolesDto } from './dtos/update-member-roles.dto';
 import { ExternalApiAccessible } from '../auth/framework/external-api.decorator';
 import { ApiResponse } from '../shared/framework/response.decorator';
 import { OrganizationBrandingResponseDto, OrganizationResponseDto } from './dtos/organization-response.dto';
-import { MemberResponseDto } from './dtos/member-repsonse.dto';
+import { MemberResponseDto } from './dtos/member-response.dto';
 @Controller('/organizations')
 @UseInterceptors(ClassSerializerInterceptor)
 @UseGuards(JwtAuthGuard)

apps/web/src/components/execution-detail/ExecutionDetailsModal.tsx

@@ -1,12 +1,14 @@
 import { useEffect, useState } from 'react';
-import { Center, LoadingOverlay, Modal, UnstyledButton, useMantineTheme } from '@mantine/core';
+import { ActionIcon, Center, LoadingOverlay, Modal, Tooltip, UnstyledButton, useMantineTheme } from '@mantine/core';
+import { useClipboard } from '@mantine/hooks';
 import { useQuery } from '@tanstack/react-query';
 import { JobStatusEnum } from '@novu/shared';
 
 import { ExecutionDetailsAccordion } from './ExecutionDetailsAccordion';
 import { ExecutionDetailsFooter } from './ExecutionDetailsFooter';
 import { getNotification } from '../../api/activity';
 import { colors, shadows, Text, Title } from '../../design-system';
+import { Check, Copy } from '../../design-system/icons';
 import { When } from '../utils/When';
 import { useNotificationStatus } from '../../pages/activities/hooks/useNotificationStatus';
 
@@ -31,6 +33,7 @@ export function ExecutionDetailsModal({
       refetchInterval: shouldRefetch ? 1000 : false,
     }
   );
+  const transactionIdClipboard = useClipboard({ timeout: 1000 });
 
   const status = useNotificationStatus(response?.data);
 
@@ -48,10 +51,33 @@ export function ExecutionDetailsModal({
     _digestedNotificationId: digestedNotificationId,
     to: subscriberVariables,
     template,
+    transactionId,
   } = response?.data || {};
   const { triggers } = template || {};
   const identifier = triggers ? triggers[0]?.identifier : undefined;
 
+  const ModalTitle = () => {
+    return (
+      <div>
+        <Title size={2}>Execution Details for {template?.name ?? ''}</Title>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <Text color={colors.B80}>Transaction Id: {transactionId}</Text>
+          {!isInitialLoading && (
+            <Tooltip data-test-id={'Tooltip'} label={transactionIdClipboard.copied ? 'Copied!' : 'Copy Key'}>
+              <ActionIcon
+                color={colors.B80}
+                variant="transparent"
+                onClick={() => transactionIdClipboard.copy(transactionId)}
+              >
+                {transactionIdClipboard.copied ? <Check /> : <Copy />}
+              </ActionIcon>
+            </Tooltip>
+          )}
+        </div>
+      </div>
+    );
+  };
+
   return (
     <Modal
       opened={modalVisibility}
@@ -67,7 +93,7 @@ export function ExecutionDetailsModal({
           paddingInline: '8px',
         },
       }}
-      title={<Title size={2}>Execution Details for {template?.name ?? ''}</Title>}
+      title={<ModalTitle />}
       sx={{ backdropFilter: 'blur(10px)' }}
       shadow={theme.colorScheme === 'dark' ? shadows.dark : shadows.medium}
       radius="md"