Merge branch 'main' into shipper

components/CartIcon.tsx

@@ -0,0 +1,33 @@
+import { ShoppingCartOutlined } from '@ant-design/icons';
+import { Badge } from 'antd';
+import { useRouter } from 'next/router';
+import { connect } from 'react-redux';
+import { Dispatch, RootState } from "../store"
+
+const mapState = (state: RootState) => ({
+  user: state.user,
+});
+const mapDispatch = (dispatch: Dispatch) => ({
+  increment: () => dispatch.count.increment(1),
+  incrementAsync: () => dispatch.count.incrementAsync(1),
+});
+type StateProps = ReturnType<typeof mapState>;
+type DispatchProps = ReturnType<typeof mapDispatch>;
+type Props = StateProps & DispatchProps;
+
+
+
+function Cart(props:StateProps) : JSX.Element {
+  const router = useRouter();
+  return (
+    <div className='flex justify-center align-middle' onClick={() => router.push("/order")}>
+      <Badge count={props.user.cart.length} color="#FF4206" className='cursor-pointer'>
+        <ShoppingCartOutlined className='cart-icon'/>
+      </Badge>
+    </div>
+  )
+}
+
+const CartIcon = connect(mapState, mapDispatch)(Cart);
+
+export default CartIcon

components/LandingUI.tsx

@@ -1,4 +1,4 @@
-import { Badge, Col, Row } from "antd"
+import { Badge, Col, Row, Skeleton } from "antd"
 import Image from "next/image"
 import Product from "./Product/Product"
 import { FieldTimeOutlined } from '@ant-design/icons';
@@ -30,7 +30,7 @@ const products = [
   },
 ]
 
-function LandingUI() : JSX.Element {
+function LandingUI({products} : any) : JSX.Element {
   return (
     <Row className="landing-ui">
       <Col span={14} className="slogan">
@@ -41,16 +41,22 @@ function LandingUI() : JSX.Element {
         <div className="text-[72px] font-bold text-[#FF4206]">Your University</div>
       </Col>
       <Col span={10} className="hero">
-        <div className="hero-product">
-            <div>
-              <Product product={products[0]}/>
-              <Product product={products[0]}/>
-            </div>
-            <div>
-              <Product product={products[0]}/>
-              <Product product={products[0]}/>
-            </div>
-        </div>
+        {
+          products ? (
+            <div className="hero-product">
+              <div>
+                <Product product={products[0]}/>
+                <Product product={products[1]}/>
+              </div>
+              <div>
+                <Product product={products[2]}/>
+                <Product product={products[3]}/>
+              </div>
+          </div>
+          ) : (
+            <Skeleton />
+          )
+        }
         <Image src={Hero} className="hero-image" alt="hero" width={400} height={600}/>
       </Col>
     </Row>

components/MainNavigation.tsx

@@ -8,7 +8,8 @@ import Logo from '../public/main/logo.svg'
 import { signOut } from 'firebase/auth'
 import { auth } from '../utils/firebase'
 import { useAuthState } from 'react-firebase-hooks/auth'
-function MainNavigation() : JSX.Element {
+import CartIcon from './CartIcon'
+function MainNavigation({user} : any) : JSX.Element {
   const [loggedInUser, loading, error] = useAuthState(auth);
 
   return (
@@ -30,9 +31,7 @@ function MainNavigation() : JSX.Element {
       </div>
       {/* User */}
       <div className='right'>
-        <Badge count={5} color="#FF4206">
-          <ShoppingCartOutlined className='cart-icon'/>
-        </Badge>
+        <CartIcon />
         <Dropdown menu={
           {
             items: [

components/Order/OrderDetailsComponent.tsx

@@ -0,0 +1,56 @@
+import { Typography } from "antd";
+import { Col, Row } from "antd";
+import { useState } from "react";
+import { HighlightOutlined } from "@ant-design/icons";
+import React from "react";
+
+function OrderDetailsComponent(props: {
+  headings: {section: string, sub: string[]}
+  data: {info: string, handler: (value: string) => void}[]
+}) {
+  const headings = props.headings;
+  const data = props.data;
+
+  return (
+    <div className="flex flex-col mx-[10vw] my-[3vw]">
+      <div className="flex flex-row justify-between">
+        <Typography.Title className="m-0 p-0" level={3}>
+          {headings.section}
+        </Typography.Title>
+        {/* <Typography.Title className="m-0 p-0 text-orange-500" level={5}>
+          {deliveryInfo.option}
+        </Typography.Title> */}
+      </div>
+      <Row>
+        <Col span={12}>
+          <Typography.Title level={5}>{headings.sub[0]}</Typography.Title>
+        </Col>
+        <Col span={12}>
+          <Typography.Title level={5}>{headings.sub[1]}</Typography.Title>
+        </Col>
+      </Row>
+      <Row>
+        <Col span={12}>
+          <Typography.Paragraph
+            editable={{
+              icon: <HighlightOutlined />,
+              tooltip: "click to edit text",
+              onChange: data[0].handler,
+              enterIcon: null,
+            }}
+          >{data[0].info}</Typography.Paragraph>
+        </Col>
+        <Col span={12}><Typography.Paragraph
+            editable={{
+              icon: <HighlightOutlined />,
+              tooltip: "click to edit text",
+              onChange: data[1].handler,
+              enterIcon: null,
+            }}
+          >{data[1].info}</Typography.Paragraph></Col>
+      </Row>
+    </div>
+  );
+}
+
+export default OrderDetailsComponent;

components/Order/OrderItemComponent.tsx

@@ -0,0 +1,44 @@
+import { Col, Image, InputNumber, Row, Typography } from "antd";
+import React, { useState } from "react";
+import { Product } from "../../container/OrderContainer";
+import { ICart } from "../../interfaces";
+
+interface Props {
+  product: ICart,
+  handler: (id:string, value:number) => void
+}
+
+function OrderItemComponent(props:Props) {
+    let {product, handler} = props
+
+    // console.log("product", product)
+
+    const itemAmountChangeHandler = (value: any) => {
+        console.log(value);
+        if (typeof value === 'number')
+        handler(product.product.id, value)
+    }
+  return (
+    <Row className="my-[2vh]">
+      <Col span={6}>
+        <Image src={product.product.image.src} />
+      </Col>
+      <Col span={6}>
+        <InputNumber
+          min={0}
+          max={10}
+          onChange={itemAmountChangeHandler}
+          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>
+      </Col>
+    </Row>
+  );
+}
+
+export default OrderItemComponent;

components/Order/OrderItemListComponent.tsx

@@ -0,0 +1,42 @@
+import { Button, Typography } from "antd";
+import React, { useEffect, useState } from "react";
+import OrderItemComponent from "./OrderItemComponent";
+import { Product } from "../../container/OrderContainer";
+import { ICart } from "../../interfaces";
+
+interface Props {
+  ProductList: ICart[]
+  quantityChangeHandler: (id:string, value:number) => void
+  total: number
+  deliveryFee: number
+}
+
+function OrderItemListComponent(props: Props) {
+
+  const {ProductList, quantityChangeHandler, total, deliveryFee} = props
+
+
+  return (
+    <div className="flex flex-col mx-[10vw]">
+      <Typography.Title level={3}>Thông tin giỏ hàng</Typography.Title>
+      {ProductList.map((p) => (
+        <OrderItemComponent
+          product={p}
+          handler={quantityChangeHandler}
+        ></OrderItemComponent>
+      ))}
+      <div className="flex flex-row justify-between">
+        <Typography.Title level={3}>Phí ship:</Typography.Title>
+        <Typography.Text className="text-base">{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>
+      </div>
+
+    </div>
+  );
+}
+
+export default OrderItemListComponent;
+