From ffede73246745d6d2ea8c8dc6e379483e6f23a39 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Wed, 1 Sep 2021 09:04:39 +0700 Subject: [PATCH] :sparkles: feat: Delivery Item --- .../DeliveryItem/DeliveryItem.module.scss | 15 ++++++++++ .../account/DeliveryItem/DeliveryItem.tsx | 30 +++++++++++++++++++ .../IdAndStatus/IdAndStatus.module.scss | 30 +++++++++++++++++++ .../components/IdAndStatus/IdAndStatus.tsx | 25 ++++++++++++++++ .../components/Products/Products.tsx | 28 +++++++++++++++++ .../components/ReOrder/ReOrder.module.scss | 17 +++++++++++ .../components/ReOrder/ReOrder.tsx | 21 +++++++++++++ .../TotalPrice/TotalPrice.module.scss | 10 +++++++ .../components/TotalPrice/TotalPrice.tsx | 18 +++++++++++ 9 files changed, 194 insertions(+) create mode 100644 src/components/modules/account/DeliveryItem/DeliveryItem.module.scss create mode 100644 src/components/modules/account/DeliveryItem/DeliveryItem.tsx create mode 100644 src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss create mode 100644 src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx create mode 100644 src/components/modules/account/DeliveryItem/components/Products/Products.tsx create mode 100644 src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss create mode 100644 src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx create mode 100644 src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss create mode 100644 src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.tsx diff --git a/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss b/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss new file mode 100644 index 000000000..564a21d9a --- /dev/null +++ b/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss @@ -0,0 +1,15 @@ +@import '../../../../styles/utilities'; + +.deliveryItem { + @apply flex bg-gray items-center; + border-radius: 50% 20% 60% 2%/ 10% 20% 10% 50%; + margin-bottom: 1.6rem; +} + +.separator { + border-left: 2px dashed #EBEBEB; + margin-left: 2.4rem; + margin-right: 2.4rem; + max-height: 9.2rem; + min-height: 8.6rem; +} \ No newline at end of file diff --git a/src/components/modules/account/DeliveryItem/DeliveryItem.tsx b/src/components/modules/account/DeliveryItem/DeliveryItem.tsx new file mode 100644 index 000000000..781861f47 --- /dev/null +++ b/src/components/modules/account/DeliveryItem/DeliveryItem.tsx @@ -0,0 +1,30 @@ +import React from "react" +import s from './DeliveryItem.module.scss' + +import IdAndStatus from './components/IdAndStatus/IdAndStatus' +import Products from './components/Products/Products' +import TotalPrice from './components/TotalPrice/TotalPrice' +import ReOrder from './components/ReOrder/ReOrder' + + +interface DeliveryItemProps { + id: string; + status: "waiting" | "delivering" | "delivered"; + products: string[]; + totalPrice: number; + reOrderLink?: string; +} + +const DeliveryItem = ({ id, status, products, totalPrice, reOrderLink } : DeliveryItemProps) => { + return ( +
+ +
+ + + +
+ ) +} + +export default DeliveryItem \ No newline at end of file diff --git a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss new file mode 100644 index 000000000..a7d5cd989 --- /dev/null +++ b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss @@ -0,0 +1,30 @@ +@import '../../../../../../styles/utilities'; + +.idAndStatus { + @apply items-center; + padding: 2.4rem 0 2.4rem 2.4rem; + + .id { + @apply font-bold; + margin-bottom: .8rem; + } + + .deliveryStatus { + @apply font-bold text-white; + font-size: 1.2rem; + line-height: 2rem; + padding: 0 .8rem; + border-radius: 0.5rem; + width: fit-content; + + &.waiting { + background-color: #D9A645; + } + &.delivering { + background-color: var(--info-dark); + } + &.delivered { + background-color: var(--positive); + } + } +} \ No newline at end of file diff --git a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx new file mode 100644 index 000000000..841dd530f --- /dev/null +++ b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx @@ -0,0 +1,25 @@ +import classNames from "classnames" +import React from "react" +import s from './IdAndStatus.module.scss' + + +interface IdAndStatusProps { + id?: string; + status: "waiting" | "delivering" | "delivered"; +} + +const IdAndStatus = ({ id, status="waiting" } : IdAndStatusProps) => { + return ( +
+
+ {id} +
+
{status} +
+
+ ) +} + +export default IdAndStatus \ No newline at end of file diff --git a/src/components/modules/account/DeliveryItem/components/Products/Products.tsx b/src/components/modules/account/DeliveryItem/components/Products/Products.tsx new file mode 100644 index 000000000..a9dcc70dc --- /dev/null +++ b/src/components/modules/account/DeliveryItem/components/Products/Products.tsx @@ -0,0 +1,28 @@ +import React from "react" + +interface ProductsProps { + products: string[]; +} + +const Products = ({ products } : ProductsProps) => { + + function toString(products:string[]): string { + let strProducts = ""; + products.map((prod, i) => { + if (i === 0) { + strProducts += prod; + } else { + strProducts += `, ${prod}` + } + }); + return strProducts; + } + + return ( +
+ {toString(products)} +
+ ) +} + +export default Products \ No newline at end of file diff --git a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss new file mode 100644 index 000000000..ddb3100d1 --- /dev/null +++ b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss @@ -0,0 +1,17 @@ +@import '../../../../../../styles/utilities'; + +.reOrder { + @apply text-white custom-border-radius hidden; + padding: .8rem 1.2rem; + margin-right: 2.4rem; + background-color: var(--positive); + + &.show { + @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 new file mode 100644 index 000000000..f3dda4b81 --- /dev/null +++ b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx @@ -0,0 +1,21 @@ +import classNames from "classnames" +import React from "react" +import s from './ReOrder.module.scss' + + +interface ReOrderProps { + show: string; + href?: string; +} + +const ReOrder = ({ show="" ,href } : ReOrderProps) => { + return ( +
+ Re-Order +
+ ) +} + +export default ReOrder \ No newline at end of file diff --git a/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss b/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss new file mode 100644 index 000000000..b4d128781 --- /dev/null +++ b/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss @@ -0,0 +1,10 @@ +@import '../../../../../../styles/utilities'; + +.totalPrice { + margin-left: auto; + margin-right: 2.4rem; + + .price { + @apply font-bold sub-headline; + } +} \ No newline at end of file diff --git a/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.tsx b/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.tsx new file mode 100644 index 000000000..153149e85 --- /dev/null +++ b/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.tsx @@ -0,0 +1,18 @@ +import React from "react" +import s from './TotalPrice.module.scss' + + +interface TotalPriceProps { + totalPrice: number; +} + +const TotalPrice = ({ totalPrice } : TotalPriceProps) => { + return ( +
+
Total
+
Rp {totalPrice}
+
+ ) +} + +export default TotalPrice \ No newline at end of file