Merge pull request #316 from Build-Squad/mudit/eng-239-disable-declin…

…e-and-accept-buttons-for-order-requests-page ENG 239 disable decline and accept buttons for order requests page
Build-Squad · Apr 12, 2024 · 26730b6 · 26730b6
2 parents 53392ce + 8ef69c8
commit 26730b6
Show file tree

Hide file tree

Showing 13 changed files with 121 additions and 51 deletions.
diff --git a/src/api/marketplace/accounts/tasks.py b/src/api/marketplace/accounts/tasks.py
@@ -54,11 +54,6 @@ def updateAccessTokens():
                     logger.error(
                         f"Error refreshing token for {twitter_account.id}, {twitter_account.user_name}: {e}")
                     continue
-                logger.info(
-                    f"New Access token for {twitter_account.id}, {twitter_account.user_name}: {new_token['access_token']}")
-                logger.info(
-                    f"New Refresh token for {twitter_account.id}, {twitter_account.user_name}: {new_token['refresh_token']}")
-
                 # Update the TwitterAccount model with the new tokens
                 twitter_account.access_token = new_token["access_token"]
                 twitter_account.refresh_token = new_token["refresh_token"]

diff --git a/src/api/marketplace/orders/views.py b/src/api/marketplace/orders/views.py
@@ -215,14 +215,21 @@ def post(self, request):
                         When(min_publish_date__gte=Now(), then=True),
                         default=False,
                         output_field=BooleanField(),
+                    ),
+                    is_accepted_or_pending=Case(
+                        When(Q(status='accepted') | Q(
+                            status='pending'), then=True),
+                        default=False,
+                        output_field=BooleanField(),
                     )
                 ).order_by(
                     '-is_future',
                     Case(
                         When(is_future=True, then=F('time_difference')),
                         When(is_future=False, then=F('time_difference') * -1),
                         output_field=DateTimeField(),
-                    )
+                    ),
+                    '-is_accepted_or_pending',
                 )
             elif "order_by" in filters:
                 orders = orders.order_by(filters["order_by"])

diff --git a/src/ui/app/business/dashboard/page.tsx b/src/ui/app/business/dashboard/page.tsx
@@ -66,6 +66,11 @@ import CancelIcon from "@mui/icons-material/Cancel";
 import RuleOutlinedIcon from "@mui/icons-material/RuleOutlined";
 import ManualVerifyModal from "@/src/components/dashboardComponents/manualVerifyModal";
 import WalletConnectModal from "@/src/components/web3Components/walletConnectModal";
+import { useAppDispatch, useAppSelector } from "@/src/hooks/useRedux";
+import {
+  endCancellation,
+  startCancellation,
+} from "@/src/reducers/orderCancellationSlice";
 
 const tabs = [
   {
@@ -83,6 +88,10 @@ const tabs = [
 ];
 export default function BusinessDashboardPage() {
   const router = useRouter();
+  const dispatch = useAppDispatch();
+  const cancellationInProgress = useAppSelector(
+    (state) => state.orderCancellation.cancellationInProgress
+  );
   const [connectWallet, setConnectWallet] = useState(false);
   const searchParams = useSearchParams();
   const [selectedOrder, setSelectedOrder] = useState<OrderType | null>(null);
@@ -255,7 +264,6 @@ export default function BusinessDashboardPage() {
 
   const handleUserInteraction = async () => {
     try {
-      setLoading(true);
       const { isSuccess, data, message } = await postService(
         `orders/order-list/`,
         {
@@ -282,7 +290,6 @@ export default function BusinessDashboardPage() {
         }
       }
     } finally {
-      setLoading(false);
     }
   };
 
@@ -360,6 +367,7 @@ export default function BusinessDashboardPage() {
           <CircularProgress color="inherit" size={20} />
         </>
       );
+      dispatch(startCancellation());
       const cancellationNotification = enqueueSnackbar(
         `Cancelling ${order?.order_code}, please wait for confirmation`,
         {
@@ -374,10 +382,12 @@ export default function BusinessDashboardPage() {
       );
       if (isSuccess) {
         closeSnackbar(cancellationNotification);
+        dispatch(endCancellation());
         notification("Order cancelled successfully", "success");
         getOrders();
       } else {
         closeSnackbar(cancellationNotification);
+        dispatch(endCancellation());
         notification(
           message ? message : "Something went wrong, couldn't cancel order",
           "error",
@@ -833,6 +843,7 @@ export default function BusinessDashboardPage() {
                   setSelectedOrder(params?.row);
                   setOpen(true);
                 }}
+                disabled={cancellationInProgress}
               >
                 <EditNoteIcon />
               </IconButton>
@@ -864,6 +875,7 @@ export default function BusinessDashboardPage() {
                   order={params?.row}
                   updateStatus={getOrders}
                   setConnectWallet={setConnectWallet}
+                  disabled={cancellationInProgress}
                 />
               )}
             {(params?.row?.status === ORDER_STATUS.ACCEPTED ||
@@ -878,10 +890,13 @@ export default function BusinessDashboardPage() {
                     cancelOrder(params?.row);
                   }}
                   deleteElement={
-                    <HighlightOffIcon color="secondary" sx={{ mt: 1 }} />
+                    <IconButton disabled={cancellationInProgress}>
+                      <HighlightOffIcon />
+                    </IconButton>
                   }
                   title={`Order ${params?.row?.order_code}`}
                   hide={true}
+                  disabled={cancellationInProgress}
                 />
               )}
           </Box>

diff --git a/src/ui/app/influencer/dashboard/page.tsx b/src/ui/app/influencer/dashboard/page.tsx
@@ -280,7 +280,6 @@ export default function BusinessDashboardPage() {
 
   const handleUserInteraction = async () => {
     try {
-      setLoading(true);
       const { isSuccess, data, message } = await postService(
         `orders/order-list/`,
         {
@@ -296,7 +295,6 @@ export default function BusinessDashboardPage() {
         }
       }
     } finally {
-      setLoading(false);
     }
   };
 

diff --git a/src/ui/app/influencer/orders/page.tsx b/src/ui/app/influencer/orders/page.tsx
@@ -1,13 +1,16 @@
 "use client";
+import BackIcon from "@/public/svg/Back.svg";
 import Star from "@/public/svg/Star.svg";
 import { notification } from "@/src/components/shared/notification";
 import { postService, putService } from "@/src/services/httpServices";
-import { KeyboardBackspace, OpenInFull } from "@mui/icons-material";
-import BackIcon from "@/public/svg/Back.svg";
+import { OpenInFull } from "@mui/icons-material";
 import Image from "next/image";
 
+import XfluencerLogo from "@/public/svg/Xfluencer_Logo_Beta.svg";
 import OrderSummaryDetails from "@/src/components/dashboardComponents/orderSummaryDetails";
 import OrderSummaryTable from "@/src/components/dashboardComponents/orderSummaryTable";
+import RouteProtection from "@/src/components/shared/routeProtection";
+import { DriveEta } from "@mui/icons-material";
 import {
   Box,
   Button,
@@ -29,21 +32,27 @@ import {
   GridTreeNodeWithRender,
 } from "@mui/x-data-grid";
 import NextLink from "next/link";
-import React, { useEffect, useState } from "react";
-import RouteProtection from "@/src/components/shared/routeProtection";
 import { useRouter } from "next/navigation";
-import Joyride, { ACTIONS, EVENTS, STATUS } from "react-joyride";
-import XfluencerLogo from "@/public/svg/Xfluencer_Logo_Beta.svg";
-import { DriveEta } from "@mui/icons-material";
 import { closeSnackbar, enqueueSnackbar } from "notistack";
+import React, { useEffect, useState } from "react";
+import Joyride, { ACTIONS, EVENTS, STATUS } from "react-joyride";
+import { useAppDispatch, useAppSelector } from "@/src/hooks/useRedux";
+import {
+  endCancellation,
+  startCancellation,
+} from "@/src/reducers/orderCancellationSlice";
 
 export default function Orders() {
   const router = useRouter();
-  const [open, setOpen] = React.useState(false);
+  const cancellationInProgress = useAppSelector(
+    (state) => state.orderCancellation.cancellationInProgress
+  );
+  const dispatch = useAppDispatch();
   const [selectedAction, setSelectedAction] = useState({
     status: "",
     orderId: "",
   });
+  const [open, setOpen] = React.useState(false);
   const [loading, setLoading] = useState(false);
   const [actionLoading, setActionLoading] = useState(false);
   const [orders, setOrders] = useState<OrderType[]>([]);
@@ -356,6 +365,7 @@ export default function Orders() {
                 setSelectedAction({ status: "Accept", orderId });
                 handleClickOpen();
               }}
+              disabled={cancellationInProgress}
             >
               Accept
             </Button>
@@ -369,6 +379,7 @@ export default function Orders() {
                 setSelectedAction({ status: "Decline", orderId });
                 handleClickOpen();
               }}
+              disabled={cancellationInProgress}
             >
               Decline
             </Button>
@@ -396,6 +407,7 @@ export default function Orders() {
     pagination.current_page_number,
     pagination.current_page_size,
     actionLoading,
+    cancellationInProgress,
   ]);
 
   const handleAction = async () => {
@@ -410,6 +422,7 @@ export default function Orders() {
             <CircularProgress color="inherit" size={20} />
           </>
         );
+        dispatch(startCancellation());
         const cancellationNotification = enqueueSnackbar(
           `Declining order request, please wait for confirmation`,
           {
@@ -424,6 +437,7 @@ export default function Orders() {
         );
         if (isSuccess) {
           closeSnackbar(cancellationNotification);
+          dispatch(endCancellation());
           getOrders();
           notification(
             "Order request was declined successfully",
@@ -432,6 +446,7 @@ export default function Orders() {
           );
         } else {
           closeSnackbar(cancellationNotification);
+          dispatch(endCancellation());
           notification(
             message ? message : "Something went wrong, couldn't cancel order",
             "error"

diff --git a/src/ui/app/layout.tsx b/src/ui/app/layout.tsx
@@ -38,26 +38,26 @@ export default function RootLayout({
         <title>Xfluencer Beta</title>
       </head>
       <body className={inter.className}>
-        <SnackbarProvider
-          maxSnack={5}
-          autoHideDuration={2000}
-          anchorOrigin={{
-            vertical: "top",
-            horizontal: "center",
-          }}
-          preventDuplicate
-        >
-          <Provider store={storeRef.current}>
-            <PersistGate loading={null} persistor={persistorRef.current}>
-              <ThemeRegistry options={{ key: "mui-theme" }}>
+        <Provider store={storeRef.current}>
+          <PersistGate loading={null} persistor={persistorRef.current}>
+            <ThemeRegistry options={{ key: "mui-theme" }}>
+              <SnackbarProvider
+                maxSnack={5}
+                autoHideDuration={2000}
+                anchorOrigin={{
+                  vertical: "top",
+                  horizontal: "center",
+                }}
+                preventDuplicate
+              >
                 <WalletContextProvider>
                   <Navbar />
                   {children}
                 </WalletContextProvider>
-              </ThemeRegistry>
-            </PersistGate>
-          </Provider>
-        </SnackbarProvider>
+              </SnackbarProvider>
+            </ThemeRegistry>
+          </PersistGate>
+        </Provider>
       </body>
     </html>
   );

diff --git a/src/ui/src/components/notificationPanel/index.tsx b/src/ui/src/components/notificationPanel/index.tsx
@@ -37,7 +37,7 @@ export default function NotificationPanel({
   const [notificationsAnchor, setNotificationsAnchor] = React.useState(null);
   const openNotifications = Boolean(notificationsAnchor);
   const [notifications, setNotifications] = useState<NotificationType[]>([]);
-  const [onlyUnread, setOnlyUnread] = useState<boolean | null>(null);
+  const [onlyUnread, setOnlyUnread] = useState<boolean | null>(true);
   const [pagination, setPagination] = useState<PaginationType>({
     total_data_count: 0,
     total_page_count: 0,
@@ -127,10 +127,6 @@ export default function NotificationPanel({
     }));
   };
 
-  useEffect(() => {
-    setOnlyUnread(null);
-  }, [openNotifications]);
-
   useEffect(() => {
     const delayDebounceFn = setTimeout(() => {
       getNotifications();
@@ -194,7 +190,7 @@ export default function NotificationPanel({
               borderRadius: "none",
               boxShadow: "0px 3px 7px #00000026",
               minHeight: 300,
-              maxHeight: 700,
+              maxHeight: "85vh",
               overflow: "auto",
               px: 2,
               py: 1,

diff --git a/src/ui/src/components/shared/confirmCancel/index.tsx b/src/ui/src/components/shared/confirmCancel/index.tsx
@@ -21,6 +21,7 @@ interface Props {
   hide?: boolean;
   deleteElement: React.ReactNode;
   sx?: any;
+  disabled?: boolean;
 }
 
 const Transition = React.forwardRef(function Transition(
@@ -39,6 +40,7 @@ export const ConfirmCancel: React.FC<Props> = ({
   hide = false,
   deleteElement,
   sx,
+  disabled,
 }) => {
   const [open, setOpen] = React.useState<boolean>(false);
   return (
@@ -49,8 +51,12 @@ export const ConfirmCancel: React.FC<Props> = ({
     >
       <Tooltip title="Cancel">
         <Box
-          onClick={() => setOpen(true)}
-          sx={{ width: "100%", cursor: "pointer" }}
+          onClick={() => {
+            if (!disabled) {
+              setOpen(true);
+            }
+          }}
+          sx={{ width: "100%", cursor: disabled ? "not-allowed" : "pointer" }}
         >
           {deleteElement}
         </Box>

diff --git a/src/ui/src/components/web3Components/cancelEscrow/index.tsx b/src/ui/src/components/web3Components/cancelEscrow/index.tsx
@@ -25,6 +25,7 @@ type CancelEscrowProps = {
   order: OrderType;
   updateStatus: () => void;
   setConnectWallet: (value: boolean) => void;
+  disabled: boolean;
 };
 
 const programId = new PublicKey(idl.metadata.address);
@@ -33,6 +34,7 @@ export default function CancelEscrow({
   updateStatus,
   order,
   setConnectWallet,
+  disabled,
 }: CancelEscrowProps) {
   const [localLoading, setLocalLoading] = useState(false);
   const connection = new Connection(`${process.env.NEXT_PUBLIC_RPC_LINK}`, {
@@ -124,7 +126,7 @@ export default function CancelEscrow({
           const tx = new Transaction().add(ix);
 
           const options = {
-            skipPreflight: true,
+            skipPreflight: process.env.NEXT_PUBLIC_RPC_LINK?.includes("devnet"),
           };
 
           try {
@@ -230,7 +232,10 @@ export default function CancelEscrow({
         onClick={() => {
           cancelEscrow();
         }}
-        disabled={localLoading}
+        disabled={localLoading || disabled}
+        sx={{
+          cursor: disabled ? "not-allowed" : "pointer",
+        }}
       >
         <DownloadingIcon />
       </IconButton>

diff --git a/src/ui/src/components/web3Components/claimEscrow/index.tsx b/src/ui/src/components/web3Components/claimEscrow/index.tsx
@@ -123,7 +123,7 @@ export default function ClaimEscrow({
           const tx = new Transaction().add(ix);
 
           const options = {
-            skipPreflight: true,
+            skipPreflight: process.env.NEXT_PUBLIC_RPC_LINK?.includes("devnet"),
           };
 
           try {