From 1b311a69a2c61802a7469289a5cc4fba23312a26 Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Thu, 16 Sep 2021 12:45:36 +0700
Subject: [PATCH] :bug: bug: fix bug in Delivery Item

---
 .../account/DeliveryItem/DeliveryItem.tsx        |  4 ++--
 .../components/IdAndStatus/IdAndStatus.tsx       |  4 ++--
 .../components/ReOrder/ReOrder.module.scss       | 16 ++++++++++++++--
 .../DeliveryItem/components/ReOrder/ReOrder.tsx  | 12 ++++++++----
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/components/modules/account/DeliveryItem/DeliveryItem.tsx b/src/components/modules/account/DeliveryItem/DeliveryItem.tsx
index a8ccbb69d..b42a0f91e 100644
--- a/src/components/modules/account/DeliveryItem/DeliveryItem.tsx
+++ b/src/components/modules/account/DeliveryItem/DeliveryItem.tsx
@@ -9,7 +9,7 @@ import ReOrder from './components/ReOrder/ReOrder'
 
 interface DeliveryItemProps {
     id: string;
-    status: "Waiting" | "Delivering" | "Delivered";
+    status: "waiting" | "delivering" | "delivered";
     products: string[];
     totalPrice: number;
 }
@@ -21,7 +21,7 @@ const DeliveryItem = ({ id, status, products, totalPrice } : DeliveryItemProps)
             <div className={s.separator}></div>
             <Products products={products} />
             <TotalPrice totalPrice={totalPrice} />
-            <ReOrder show={status === "Delivered" ? true : false}/>
+            <ReOrder visible={status === "delivered" ? true : false}/>
         </section>
     )
 }
diff --git a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx
index 578c94f97..d09868272 100644
--- a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx
+++ b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx
@@ -5,10 +5,10 @@ import s from './IdAndStatus.module.scss'
 
 interface IdAndStatusProps {
     id?: string;
-    status: "Waiting" | "Delivering" | "Delivered";
+    status: "waiting" | "delivering" | "delivered";
 }
 
-const IdAndStatus = ({ id, status="Waiting" } : IdAndStatusProps) => {
+const IdAndStatus = ({ id, status="waiting" } : IdAndStatusProps) => {
     return (
         <div className={s.idAndStatus}>
             <div className={s.id}>
diff --git a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss
index 517dd2e4f..8b855196e 100644
--- a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss
+++ b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss
@@ -1,9 +1,21 @@
 @import '../../../../../../styles/utilities';
 
 .reOrder {
-    @apply hidden;
+    @apply hidden shape-common text-white font-bold;
+    background-color: var(--primary);
     margin-right: 1.2rem;
-    &.show {
+    padding: .4rem .6rem;
+
+    @screen lg {
+        padding: .8rem 1.2rem;
+        margin-right: 2.4rem;
+    }
+
+    &.visible {
         @apply block;
     }
+    
+    &:hover {
+        @apply cursor-pointer;
+    }
 }
\ No newline at end of file
diff --git a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx
index aaef9153c..4d6164676 100644
--- a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx
+++ b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx
@@ -1,18 +1,22 @@
 import classNames from "classnames"
 import React from "react"
 import { ButtonCommon } from "src/components/common"
+import Link from 'next/link'
 import s from './ReOrder.module.scss'
 
 interface ReOrderProps {
-    show: boolean;
+    visible: boolean;
+    href?: string;
 }
 
-const ReOrder = ({ show=false } : ReOrderProps) => {
+const ReOrder = ({ visible=false, href="#" } : ReOrderProps) => {
     return (
         <div className={classNames(s.reOrder, {
-            [s.show]: show
+            [s.visible]: visible
         })}>
-            <ButtonCommon>Re-Order</ButtonCommon>
+            <Link href={href}>
+                <a>Re-Order</a>
+            </Link>
         </div>
     )
 }