Merge pull request #64 from Build-Squad/ENG-28-Redux-Setup-Checkout-Page

ENG 28 redux setup checkout page
Build-Squad · Jan 3, 2024 · 2dd1cf1 · 2dd1cf1
2 parents f5fcd08 + 90e5b31
commit 2dd1cf1
Show file tree

Hide file tree

Showing 9 changed files with 279 additions and 152 deletions.
diff --git a/src/ui/app/business/components/banner/index.tsx b/src/ui/app/business/components/banner/index.tsx
@@ -22,6 +22,7 @@ export default function Banner({}: Props) {
     <Box
       sx={{
         border: "1px solid #000",
+        borderTop: "none",
         backgroundImage: "url(/Business_Landing_page.png)",
         backgroundSize: "cover",
         display: "flex",

diff --git a/src/ui/app/business/components/faqSection/index.tsx b/src/ui/app/business/components/faqSection/index.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 
 import {

diff --git a/src/ui/app/components/navbar/index.tsx b/src/ui/app/components/navbar/index.tsx
@@ -125,7 +125,10 @@ export default function Navbar({
   }, [isTwitterUserLoggedIn, isAccountSsetupComplete]);
 
   return (
-    <AppBar position="static" sx={{ boxShadow: "none" }}>
+    <AppBar
+      position="static"
+      sx={{ boxShadow: "none", borderBottom: "1px solid #000" }}
+    >
       <Toolbar
         component="nav"
         sx={{ display: "flex", justifyContent: "space-between" }}
@@ -136,6 +139,9 @@ export default function Navbar({
             width="150"
             height="20"
             alt="bgimg"
+            onClick={() => {
+              router.push("/");
+            }}
           />
         </Box>
         {isTwitterUserLoggedIn ? null : (

diff --git a/src/ui/app/influencer/profile/[id]/_services/index.tsx b/src/ui/app/influencer/profile/[id]/_services/index.tsx
@@ -4,7 +4,8 @@ import CheckoutModal from "@/src/components/checkoutModal";
 import CreateUpdateService from "@/src/components/profileComponents/createUpdateService";
 import { ConfirmDelete } from "@/src/components/shared/confirmDeleteModal";
 import { notification } from "@/src/components/shared/notification";
-import { useAppSelector } from "@/src/hooks/useRedux";
+import { useAppDispatch, useAppSelector } from "@/src/hooks/useRedux";
+import { addOrderItem, resetCart } from "@/src/reducers/cartSlice";
 import { deleteService, getService } from "@/src/services/httpServices";
 import DeleteIcon from "@mui/icons-material/Delete";
 import EditIcon from "@mui/icons-material/Edit";
@@ -25,16 +26,15 @@ import Image from "next/image";
 import React, { useEffect } from "react";
 
 type ServiceProps = {
-  currentUser: UserType | null;
+  currentInfluencer: UserType | null;
   id: string;
 };
 
-const Services = ({ currentUser, id }: ServiceProps) => {
+const Services = ({ currentInfluencer, id }: ServiceProps) => {
+  const dispatch = useAppDispatch();
+  const cart = useAppSelector((state) => state.cart);
   const loggedInUser = useAppSelector((state) => state.user?.user);
   const [type, setType] = React.useState<string | null>(null);
-  const [checkedOutServices, setCheckedOutServices] = React.useState<
-    ServiceType[]
-  >([]);
   const [services, setServices] = React.useState<ServiceType[]>([]);
   const [pagination, setPagination] = React.useState<PaginationType>({
     total_data_count: 0,
@@ -48,6 +48,8 @@ const Services = ({ currentUser, id }: ServiceProps) => {
   const [selectedService, setSelectedService] =
     React.useState<ServiceType | null>(null);
   const [deleteLoading, setDeleteLoading] = React.useState<boolean>(false);
+  const [openCheckoutModal, setOpenCheckoutModal] =
+    React.useState<boolean>(false);
 
   const getServices = async () => {
     try {
@@ -109,6 +111,21 @@ const Services = ({ currentUser, id }: ServiceProps) => {
     }));
   };
 
+  const addItemToCart = (service: ServiceType) => {
+    // Check if the service is already in the cart
+    dispatch(
+      addOrderItem({
+        influencer: currentInfluencer,
+        service: service,
+      })
+    );
+  };
+
+  const closeCheckoutModal = () => {
+    dispatch(resetCart());
+    setOpenCheckoutModal(false);
+  };
+
   useEffect(() => {
     if (refreshPage) {
       getServices();
@@ -126,6 +143,12 @@ const Services = ({ currentUser, id }: ServiceProps) => {
     }
   }, [openModal]);
 
+  useEffect(() => {
+    if (cart?.orderItems?.length > 0) {
+      setOpenCheckoutModal(true);
+    }
+  }, [cart]);
+
   return (
     <Box
       sx={{
@@ -225,10 +248,11 @@ const Services = ({ currentUser, id }: ServiceProps) => {
                   </Card>
                 </Grid>
               )}
-              {services?.map((service) => {
+              {services?.map((serviceItem) => {
                 // Attach the platform_price to the service object
                 // It will be price + price * (platform_fee / 100)
                 // Take care of type conversion
+                let service = { ...serviceItem };
                 service.platform_price = (
                   parseFloat(service.price.toString()) +
                   parseFloat(service.price.toString()) *
@@ -456,10 +480,7 @@ const Services = ({ currentUser, id }: ServiceProps) => {
                               fullWidth
                               onClick={(e) => {
                                 e.stopPropagation();
-                                setCheckedOutServices((prev) => [
-                                  ...prev,
-                                  service,
-                                ]);
+                                addItemToCart(service);
                               }}
                               disabled={
                                 service.package.influencer === loggedInUser?.id
@@ -477,10 +498,7 @@ const Services = ({ currentUser, id }: ServiceProps) => {
                               fullWidth
                               onClick={(e) => {
                                 e.stopPropagation();
-                                setCheckedOutServices((prev) => [
-                                  ...prev,
-                                  service,
-                                ]);
+                                addItemToCart(service);
                               }}
                               disabled={
                                 service.package.influencer === loggedInUser?.id
@@ -520,11 +538,9 @@ const Services = ({ currentUser, id }: ServiceProps) => {
         serviceItem={selectedService}
       />
       <CheckoutModal
-        open={checkedOutServices.length > 0}
-        handleClose={() => {
-          setCheckedOutServices([]);
-        }}
-        serviceItems={checkedOutServices}
+        open={openCheckoutModal}
+        handleClose={closeCheckoutModal}
+        currentInfluencer={currentInfluencer}
       />
     </Box>
   );

diff --git a/src/ui/app/influencer/profile/[id]/page.tsx b/src/ui/app/influencer/profile/[id]/page.tsx
@@ -110,6 +110,7 @@ const ProfileLayout = ({
               sx={{
                 backgroundImage: "url(/profileBanner.png)",
                 border: "1px solid #000",
+                borderTop: "none",
                 display: "flex",
                 minHeight: "200px",
                 width: "100%",
@@ -449,7 +450,7 @@ const ProfileLayout = ({
                   ))}
                 </Box>
                 <Box sx={{ p: 2 }}>
-                  <Services currentUser={currentUser} id={params.id} />
+                  <Services currentInfluencer={currentUser} id={params.id} />
                 </Box>
               </Grid>
             </Grid>