From 9b3ac4654fa560adbf71d572389e3545a39bc38e Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Thu, 14 Mar 2024 21:57:26 +0700
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20create=20trans?=
 =?UTF-8?q?fer=20project=20dialog=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projects/Dialog/TransferProjectDialog.tsx | 47 +++++++++++++++++++
 .../org-slug/projects/id/settings/General.tsx | 27 +++++------
 2 files changed, 58 insertions(+), 16 deletions(-)
 create mode 100644 packages/frontend/src/components/projects/Dialog/TransferProjectDialog.tsx

diff --git a/packages/frontend/src/components/projects/Dialog/TransferProjectDialog.tsx b/packages/frontend/src/components/projects/Dialog/TransferProjectDialog.tsx
new file mode 100644
index 00000000..7d26ab93
--- /dev/null
+++ b/packages/frontend/src/components/projects/Dialog/TransferProjectDialog.tsx
@@ -0,0 +1,47 @@
+import ConfirmDialog, {
+  ConfirmDialogProps,
+} from 'components/shared/ConfirmDialog';
+import React from 'react';
+
+interface TransferProjectDialogProps extends ConfirmDialogProps {
+  projectName: string;
+  from: string;
+  to: string;
+}
+
+export const TransferProjectDialog = ({
+  projectName,
+  from,
+  to,
+  open,
+  handleCancel,
+  handleConfirm,
+  ...props
+}: TransferProjectDialogProps) => {
+  return (
+    <ConfirmDialog
+      {...props}
+      dialogTitle="Transfer project?"
+      handleCancel={handleCancel}
+      open={open}
+      confirmButtonTitle="Yes, confirm transfer"
+      handleConfirm={handleConfirm}
+    >
+      <p className="text-sm text-elements-high-em">
+        Upon confirmation, your project{' '}
+        <span className="text-sm font-mono text-elements-on-secondary bg-controls-secondary rounded px-0.5">
+          {projectName}
+        </span>{' '}
+        will be transferred from{' '}
+        <span className="text-sm font-mono text-elements-on-secondary bg-controls-secondary rounded px-0.5">
+          {from}
+        </span>{' '}
+        to{' '}
+        <span className="text-sm font-mono text-elements-on-secondary bg-controls-secondary rounded px-0.5">
+          {to}
+        </span>
+        .
+      </p>
+    </ConfirmDialog>
+  );
+};
diff --git a/packages/frontend/src/pages/org-slug/projects/id/settings/General.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/General.tsx
index 22d42089..8c1d0bd7 100644
--- a/packages/frontend/src/pages/org-slug/projects/id/settings/General.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/settings/General.tsx
@@ -6,11 +6,11 @@ import { Organization } from 'gql-client';
 
 import { Button, Typography, Input, Option } from '@material-tailwind/react';
 
-import DeleteProjectDialog from '../../../../../components/projects/project/settings/DeleteProjectDialog';
-import ConfirmDialog from '../../../../../components/shared/ConfirmDialog';
-import { useGQLClient } from '../../../../../context/GQLClientContext';
-import AsyncSelect from '../../../../../components/shared/AsyncSelect';
-import { OutletContextType } from '../../../../../types';
+import DeleteProjectDialog from 'components/projects/project/settings/DeleteProjectDialog';
+import { useGQLClient } from 'context/GQLClientContext';
+import AsyncSelect from 'components/shared/AsyncSelect';
+import { OutletContextType } from 'types';
+import { TransferProjectDialog } from 'components/projects/Dialog/TransferProjectDialog';
 
 const CopyIcon = ({ value }: { value: string }) => {
   return (
@@ -230,19 +230,14 @@ const GeneralTabPanel = () => {
             Transfer
           </Button>
         </form>
-        <ConfirmDialog
-          dialogTitle="Transfer project"
-          handleOpen={() => setOpenTransferDialog(!openTransferDialog)}
+        <TransferProjectDialog
+          handleCancel={() => setOpenTransferDialog(!openTransferDialog)}
           open={openTransferDialog}
-          confirmButtonTitle="Yes, Confirm transfer"
           handleConfirm={handleTransferProject}
-          color="blue"
-        >
-          <Typography variant="small" placeholder={''}>
-            Upon confirmation, your project {project.name} will be transferred
-            from {project.organization.name} to {selectedUserOrgName}.
-          </Typography>
-        </ConfirmDialog>
+          projectName={project.name}
+          from={project.organization.name}
+          to={selectedUserOrgName}
+        />
       </div>
       <div className="mb-1">
         <Typography variant="h6" placeholder={''}>