ad

components/MainNavigation.tsx

@@ -12,10 +12,7 @@ import CartIcon from './CartIcon'
 import { IProduct } from '../interfaces'
 import { useState } from 'react'
 import ProductList from './Product/ProductList'
-function MainNavigation({user, products} : any) : JSX.Element {
-  if(!products){
-    return <></>
-  }
+function MainNavigation({user, products = []} : any) : JSX.Element {
   const [loggedInUser, loading, error] = useAuthState(auth);
 
   const [searchTerm, setSearchTerm] = useState('');
@@ -35,17 +32,21 @@ function MainNavigation({user, products} : any) : JSX.Element {
           <Image src={Logo} alt='logo' width={33} height={41} />
           <div className='title'>Candup</div>
         </Link>
-        <ConfigProvider
-         theme={{
-          token: {
-            colorPrimary: '#FF4206',
-          },
-        }}
-        >
-            <Input className='search-bar' placeholder="Search..." prefix={<SearchOutlined />} value={searchTerm} onChange={handleSearch}/>
-        </ConfigProvider>
         {
-          searchTerm && (
+          products.length != 0 && (
+            <ConfigProvider
+              theme={{
+                token: {
+                  colorPrimary: '#FF4206',
+                },
+              }}
+              >
+                  <Input className='search-bar' placeholder="Search..." prefix={<SearchOutlined />} value={searchTerm} onChange={handleSearch}/>
+              </ConfigProvider>
+          )
+        }
+        {
+          (searchTerm && products.length != 0) && (
             <div className='search-result'>
               {
                 <ProductList products={filteredProducts} category="Search Result"/>

components/Order/OrderDetailsComponent.tsx

@@ -42,7 +42,7 @@ function OrderDetailsComponent(props: {
 <Typography.Paragraph
             editable={{
               icon: <HighlightOutlined />,
-              tooltip: "click to edit text",
+              tooltip: "Điền số điện thoại người nhận",
               onChange: data[1].handler,
               enterIcon: null,
             }}

components/Order/OrderItemComponent.tsx

@@ -2,6 +2,7 @@ import { Col, Image, InputNumber, Row, Typography } from "antd";
 import React, { useState } from "react";
 import { Product } from "../../container/OrderContainer";
 import { ICart } from "../../interfaces";
+import convertToDongString from "../../utils/convert";
 
 interface Props {
   product: ICart,
@@ -23,6 +24,9 @@ function OrderItemComponent(props:Props) {
       <Col span={6}>
         <Image src={product.product.image.src} width={100} height={100}/>
       </Col>
+      <Col span={8}>
+        <Typography.Title level={5}>{product.product.name}</Typography.Title>
+      </Col>
       <Col span={6}>
         <InputNumber
           min={0}
@@ -31,11 +35,8 @@ function OrderItemComponent(props:Props) {
           value={product.quantity}
         ></InputNumber>
       </Col>
-      <Col span={8}>
-        <Typography.Title level={5}>{product.product.name}</Typography.Title>
-      </Col>
       <Col span={4}>
-        <Typography.Text>{product.product.price}</Typography.Text>
+        <Typography.Text>{convertToDongString(product.product.price)}</Typography.Text>
       </Col>
     </Row>
   );

components/Order/OrderItemListComponent.tsx

@@ -1,8 +1,9 @@
-import { Button, Typography, Select } from "antd";
+import { Button, Row, Col, Typography, Select } from "antd";
 import React, { useEffect, useState } from "react";
 import OrderItemComponent from "./OrderItemComponent";
 import { Product } from "../../container/OrderContainer";
 import { ICart } from "../../interfaces";
+import convertToDongString from "../../utils/convert";
 
 interface Props {
   ProductList: ICart[]
@@ -20,6 +21,16 @@ function OrderItemListComponent(props: Props) {
   return (
     <div className="flex flex-col mx-[10vw]">
       <Typography.Title level={3}>Thông tin giỏ hàng</Typography.Title>
+      <Row className="my-[2vh]">
+      <Col span={6}>Hình ảnh
+      </Col>
+      <Col span={8}>Tên sản phẩm
+      </Col>
+      <Col span={6}>Số lượng
+      </Col>
+      <Col span={4}> Đơn giá
+      </Col>
+    </Row>
       {ProductList.map((p) => (
         <OrderItemComponent
           product={p}
@@ -28,11 +39,11 @@ function OrderItemListComponent(props: Props) {
       ))}
       <div className="flex flex-row justify-between">
         <Typography.Title level={3}>Phí ship:</Typography.Title>
-        <Typography.Text className="text-base">{deliveryFee}</Typography.Text>
+        <Typography.Text className="text-base">{convertToDongString(deliveryFee)}</Typography.Text>
       </div>
       <div className="flex flex-row justify-between">
         <Typography.Title level={3}>Tổng tiền:</Typography.Title>
-        <Typography.Text className="text-base">{total}</Typography.Text>
+        <Typography.Text className="text-base">{convertToDongString(total)}</Typography.Text>
       </div>
       <div className="flex flex-row justify-between">
         <Typography.Title level={3}>Phương Thức thanh toán:</Typography.Title>

components/Product/Product.tsx

@@ -17,6 +17,7 @@ function Product({product}: IProps) : JSX.Element {
     notification.success({
       message: 'Thêm sản phẩm thành công',
       description: 'Bạn đã thêm sản phẩm ' + product.name + ' vào giỏ hàng',
+      placement: 'topLeft',
       duration: 2,
     });
   }

components/Table/ShipperReciveOrders.tsx

@@ -29,11 +29,9 @@ const columns: ColumnsType<Shipper> = [
         dataIndex: "products",
         key: "products",
         render: (products:Product[], t) => {
-          const total = products.reduce((a,b) => {
-            return a + b.product.price;
-          }, 0)
+
 
-          return <h2>{total + t.deliveryFee }</h2>;
+          return <h2>{convertToDongString(t.total) }</h2>;
         },
       },
     {
@@ -70,7 +68,7 @@ const columns: ColumnsType<Shipper> = [
                 <Button
                     type="primary"
                     onClick={handleOnClick}
-                >Nhận đơn
+                >Xem chi tiết
                 </Button>
             </div> 
             )

container/OrderContainer.tsx

@@ -1,20 +1,17 @@
-<<<<<<< HEAD
-import { Button, Typography, Select, message } from "antd";
-=======
 import { Button, message, Typography } from "antd";
->>>>>>> main
 import { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import OrderDetailsComponent from "../components/Order/OrderDetailsComponent";
 import OrderDetailsComponent1 from "../components/Order/OrderDetailComponent1";
 import OrderItemListComponent from "../components/Order/OrderItemListComponent";
 import { ICart, IProduct } from "../interfaces";
-import { Dispatch, RootState } from "../store";
+import { Dispatch, RootState, store } from "../store";
 import { Modal } from "antd";
 import ProductList from "../components/Product/ProductList";
-import { createOrder } from "../utils/firebase";
+import { createOrder, db } from "../utils/firebase";
 import { useAuthState } from "react-firebase-hooks/auth";
 import { auth } from "../utils/firebase";
+import { doc, setDoc } from "firebase/firestore";
 export interface Product {
   price: number;
   name: string;
@@ -55,14 +52,15 @@ function OrderContainer(props: any): JSX.Element {
     section: "Thông tin người nhận",
     sub: ["Tên người nhận", "SĐT người nhận"],
   };
+  console.log("PROPS", props.user)
 
 
   const [cart, setCart] = useState({
     ProductList: props.user.cart,
     Location: "202",
     DeliveryTime: "9:15-9:30",
     RecipientName: props.user.displayName,
-    PhoneNumber: props.user.phoneNumber,
+    PhoneNumber: props.user.phoneNumber || "09",
     PaymentMethod: "Cash",
     DeliveryFee: 0,
     Total: 0
@@ -90,6 +88,7 @@ function OrderContainer(props: any): JSX.Element {
   };
 
   //update total when productList is changed
+  const {dispatch} = store;
 
   useEffect(() => {
     let temp = 0;
@@ -158,8 +157,15 @@ function OrderContainer(props: any): JSX.Element {
     setIsModalOpen(false);
   };
 
-  const handleSubmit = () => {
-<<<<<<< HEAD
+  const handleSubmit = async () => {
+    dispatch.user.setUserInfo({phoneNumber: cart.PhoneNumber})
+    const phoneNumberRegex = /^(03[2-9]|05[689]|07[06-9]|08[1-9]|09[0-9])+([0-9]{7})$/;
+
+    console.log("CART", cart)
+    if(cart.ProductList.length == 0){
+      message.error("Cart must not be empty")
+      return
+    }
     if (cart.Location == ""){
       message.error("Delivery location must be set")
       return
@@ -172,22 +178,27 @@ function OrderContainer(props: any): JSX.Element {
       message.error("Recipient Name must not be empty")
       return
     }
-    if (cart.PhoneNumber == ""){
-      message.error("Phone Number must not be empty")
+    if (phoneNumberRegex.test(cart.PhoneNumber) == false){
+      message.error("Invalid Vietnamese phone number")
       return
     }
-    message.info("Order has been placed")
     //push data to DB
+
 
-=======
     if(loggedInUser){
       createOrder({
         ...cart,
+        total: cart.Total,
         user: loggedInUser.uid,
       });
+      dispatch.user.clearProductCart();
+
+      setDoc(
+        doc(db, 'users', loggedInUser.uid),{phoneNumber: cart.PhoneNumber},
+        {merge: true}
+      )
     }
     message.success("Đặt hàng thành công");
->>>>>>> main
   }
 
 

pages/_app.tsx

@@ -6,34 +6,40 @@ import { PersistGate } from "redux-persist/lib/integration/react";
 
 import { doc, serverTimestamp, setDoc } from "firebase/firestore";
 import { AppProps } from "next/app";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useAuthState } from "react-firebase-hooks/auth";
 import { store } from "../store";
-import { auth, db } from '../utils/firebase';
+import { auth, db, getUserFromFirebase } from '../utils/firebase';
 import LoginPage from "../components/Login";
 import { Loading } from "react-admin";
 
 
 function MyApp({ Component, pageProps }: AppProps) {
   const [loggedInUser, loading, error] = useAuthState(auth);
+  const [user, setUser] = useState<any>(null);
   console.log("LOGGED IN USER", loggedInUser);
 const persistor = getPersistor();
+const {dispatch} = store;
 
   useEffect(() => {
+    getUserFromFirebase(loggedInUser?.uid).then((user) => {
+      setUser(user);
+    } );
     const setUserInFirebase = async () => {
       try {
         if(loggedInUser){
+          const data = {
+            email: loggedInUser.email,
+            lastSeen: serverTimestamp(),
+            photoURL: loggedInUser.photoURL,
+            displayName: loggedInUser.displayName,
+            phoneNumber: loggedInUser.phoneNumber
+          }
           await setDoc(
-            doc(db, 'users', loggedInUser.uid),
-            {
-              email: loggedInUser.email,
-              lastSeen: serverTimestamp(),
-              photoURL: loggedInUser.photoURL,
-              displayName: loggedInUser.displayName,
-              phoneNumber: loggedInUser.phoneNumber
-            },
+            doc(db, 'users', loggedInUser.uid),data,
             {merge: true}
           )
+          dispatch.user.setUserInfo(data);
         }
       } catch(error) {
         console.log("ERROR SETTING USER INFO IN FIREBASE", error)

pages/shipper/[id]/index.tsx

@@ -20,7 +20,7 @@ type Props = {};
 
 const orange = "#FF4206";
 
-export default function ShipperOrderDetailPage({}: Props) {
+export default function ShipperOrderDetailPage({ }: Props) {
   const newRouter = useRouter();
   const [loggedInUser, loadingAuth, errorAuth] = useAuthState(auth);
   const [order, setOrder] = useState<Shipper>();
@@ -100,13 +100,11 @@ export default function ShipperOrderDetailPage({}: Props) {
 
                 <h1 style={{ color: orange }}>{user?.displayName}</h1>
                 <h3>Số điện thoại người nhận</h3>
-                <h1 style={{ color: orange }}>{user?.defaultPhoneNumber}</h1>
+                <h1 style={{ color: orange }}>  {order?.phoneNumber}
+                </h1>
                 <h3>Thời gian giao hàng</h3>
                 <h1 style={{ color: orange }}>
-                  {moment
-                    .unix(order?.deliveryTime?.seconds || 0)
-                    .locale("vi")
-                    .format("LLLL")}
+                  {order?.deliveryTime}
                 </h1>
               </div>
               <div>
@@ -117,12 +115,7 @@ export default function ShipperOrderDetailPage({}: Props) {
                 <h3>Tổng đơn</h3>
                 <h1 style={{ color: orange }}>
                   {convertToDongString(
-                    order
-                      ? order?.products.reduce(
-                          (a, b) => a + b.product.price,
-                          0
-                        ) + order.deliveryFee
-                      : 0
+                    order ? order.total : 0
                   )}
                 </h1>
                 <h3>Địa điểm</h3>

store/models/user.ts

@@ -32,6 +32,28 @@ export const user  = createModel()({
 
       };
     },
+    clearProductCart(state):IUser {
+      // Clear product to cart
+        // const newCart : ICart[] = [...state.cart];
+        // const index = newCart.findIndex((item: ICart) => item.product.id === payload.id);
+        // if (index !== -1) {
+        //   newCart.splice(index, 1);
+        // }
+
+      return {
+        ...state,
+        cart: []
+
+      };
+    },
+    setUserInfo(state, payload):IUser {
+      console.log("This is current root state", state);
+      return {
+        ...state,
+        ...payload
+      };
+
+    }
   },
   effects: (dispatch) => ({
     // handle state changes with impure functions.

types/shipper.types.ts

@@ -4,10 +4,12 @@ export interface Shipper {
   user: User;
   status: string;
   deliveryFee: number;
-  totalPrice: number;
+  total: number;
   location: string;
   products: Product[];
   deliveryTime: DeliveryTime;
+
+
 }
 
 export interface Create {