From 4a8731e5111ca5945fb335bab448e2085a9ade9d Mon Sep 17 00:00:00 2001
From: admin <fakc445@gmail.com>
Date: Mon, 16 Sep 2024 00:36:35 +0300
Subject: [PATCH] feat: deal id display

---
 package.json                                  |  4 ++
 .../Dnd/DealSummaryCard/DealSummaryCard.tsx   | 44 ++++++++++++++++---
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 1a375ed..c94de9a 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,10 @@
     "generate-client": "openapi --input http://127.0.0.1:8000/openapi.json --output ./src/client --client axios --useOptions --useUnionTypes"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@hello-pangea/dnd": "^16.6.0",
     "@mantine/core": "^7.11.2",
     "@mantine/dates": "^7.11.2",
diff --git a/src/components/Dnd/DealSummaryCard/DealSummaryCard.tsx b/src/components/Dnd/DealSummaryCard/DealSummaryCard.tsx
index d5c6a33..4ea1106 100644
--- a/src/components/Dnd/DealSummaryCard/DealSummaryCard.tsx
+++ b/src/components/Dnd/DealSummaryCard/DealSummaryCard.tsx
@@ -2,9 +2,11 @@ import {FC} from "react";
 import {DealService, DealSummary} from "../../../client";
 import styles from './DealSummaryCard.module.css';
 
-import {ActionIcon, Text, Image, Badge} from '@mantine/core';
+import {ActionIcon, Badge, CopyButton, Flex, Image, Popover, rem, Text} from '@mantine/core';
 import classNames from "classnames";
 import {useDealPageContext} from "../../../pages/LeadsPage/contexts/DealPageContext.tsx";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faCheck} from "@fortawesome/free-solid-svg-icons";
 
 type Props = {
     dealSummary: DealSummary
@@ -55,7 +57,9 @@ const DealSummaryCard: FC<Props> = ({dealSummary}) => {
                     </Text>
                 </div>
             </div>
-            <div className={classNames(styles['flex-row'], styles['flex-row-right'])}>
+            <div
+
+                className={classNames(styles['flex-row'], styles['flex-row-right'])}>
                 <div className={styles['flex-item']}>
                     <ActionIcon variant={"transparent"}>
                         <Image src={dealSummary.baseMarketplace?.iconUrl || ""}/>
@@ -66,11 +70,37 @@ const DealSummaryCard: FC<Props> = ({dealSummary}) => {
                         {new Date(dealSummary.deadline).toLocaleString('ru-RU').slice(0, -3)}
                     </Text>
                 </div>
-                <div className={styles['flex-item']}>
-                    <Badge variant={"light"} radius={"sm"}>
-                        ID: {dealSummary.id}
-                    </Badge>
-                </div>
+                <CopyButton value={"https://google.com"}>
+                    {({copy, copied}) => (
+                        <Popover opened={copied} withArrow>
+                            <Popover.Target>
+                                <div
+
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        copy();
+                                    }}
+                                    className={styles['flex-item']}>
+                                    <Badge variant={"light"} radius={"sm"}>
+                                        ID: {dealSummary.id}
+                                    </Badge>
+                                </div>
+                            </Popover.Target>
+                            <Popover.Dropdown>
+                                <Flex justify={"center"} align={"center"} gap={rem(5)}>
+                                    <FontAwesomeIcon
+                                        bounce
+                                        style={{animationIterationCount: 1}}
+                                        icon={faCheck}
+                                    />
+                                    <Text size={"xs"}>ID сделки скопирован</Text>
+                                </Flex>
+
+                            </Popover.Dropdown>
+                        </Popover>
+                    )}
+                </CopyButton>
+
             </div>
 
         </div>