From 03ed547b933bd5bef378a02af4d4e882bc1ba7a1 Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Sun, 7 Apr 2024 16:52:22 -0700 Subject: [PATCH] finished making page --- src/app/orderConfirmationDelivery/page.tsx | 74 +++++---- src/app/orderConfirmationDelivery/styles.ts | 159 ++++++++++++++++---- src/components/BackButton/styles.ts | 1 + 3 files changed, 179 insertions(+), 55 deletions(-) diff --git a/src/app/orderConfirmationDelivery/page.tsx b/src/app/orderConfirmationDelivery/page.tsx index 412e9231..ecc19109 100644 --- a/src/app/orderConfirmationDelivery/page.tsx +++ b/src/app/orderConfirmationDelivery/page.tsx @@ -6,7 +6,7 @@ import { fetchUserAddress, } from '@/api/supabase/queries/user_queries'; -import { Body2, Heading3Bold } from '@/styles/fonts'; +import { Body1, Body2Light, Heading3Bold, Heading4Bold } from '@/styles/fonts'; import BackButton from '../../components/BackButton/BackButton'; import { fetchCartItemsWithQuantity } from '../../api/supabase/queries/cart_queries'; @@ -16,18 +16,20 @@ import NavBar from '../../components/NavBarFolder/NavBar'; import { FavoriteDiv, OutterFavoriteDiv, - HeaderText, - OutterBox, - Label, LabelBox, ScrollDiv, - AddressText, - DateText, - CenterBox, - AddressDiv, + ShippingDetailsDiv, + BottomColumnDiv, + LeftColumnDiv, + RightColumnDiv, + DetailsHeader, + PageDiv, + TopColumnDiv, + CenterDiv, } from './styles'; import { Product, User, Address } from '../../schema/schema'; +import { Body1Bold } from '../orderPage/styles'; export default function OrderConfirmationDelivery() { const [Cart, setCart] = useState([]); @@ -52,17 +54,18 @@ export default function OrderConfirmationDelivery() { }, []); return ( -
+
- - - - + + + + + - Thank you, {user?.first_name}. Your order has been placed. + Your order has been submitted - Order No. {user?.cart_id} + Order No. {user?.cart_id} {Cart.map(cartItem => ( @@ -72,26 +75,41 @@ export default function OrderConfirmationDelivery() { style={{ width: '150px', height: '150px', - marginLeft: '80px', - marginRight: '100px', + marginLeft: '30px', }} /> - -

Category: {cartItem.category}

+ {cartItem.name} + Category: {cartItem.category} ))} - - - Shipping Address: {userAddress?.street}, {userAddress?.city},{' '} - {userAddress?.zipcode} - - - - -
+ + + + + Delivery Information + + + Estimated Date + + + date + + + Location + + + {userAddress?.street}, {userAddress?.city},{' '} {userAddress?.zipcode} + + + + + + + + ); } diff --git a/src/app/orderConfirmationDelivery/styles.ts b/src/app/orderConfirmationDelivery/styles.ts index 56f2625a..107538f9 100644 --- a/src/app/orderConfirmationDelivery/styles.ts +++ b/src/app/orderConfirmationDelivery/styles.ts @@ -7,11 +7,28 @@ import NavBar from '../../components/NavBarFolder/NavBar'; export const FavoriteDiv = styled.div` display: flex; flex-direction: row; - align-items: start; - justify-content: space-start; + align-items: flex-start; + justify-content: flex-start; width: 100%; margin-bottom: 50px; margin-top: 30px; + gap: 120px; +`; + +export const OrderDetailsDiv = styled.div` + width: 750px; + height: auto; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; +`; + +export const CenterDiv = styled.div` + display: flex; + align-items: center; + justify-content: center; + width: 100%; `; export const OutterFavoriteDiv = styled.div` @@ -21,10 +38,13 @@ export const OutterFavoriteDiv = styled.div` border-radius: 10px; background: var(--White, #fff); box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); - width: 800px; + width: 650px; height: auto; - max-height: 600px; - margin-top: 10px; + max-height: 793px; + margin-top: 5px; + margin-bottom: 50px; + gap: 24px; + padding: 36px 32px; `; export const ScrollDiv = styled.div` @@ -42,10 +62,11 @@ export const BackDiv = styled.button` margin-bottom: 25px; margin-top: 25px; margin-left: 25px; + width: 100%; `; export const OutterBox = styled.div` - width: 900px; + width: 750px; height: auto; display: flex; flex-direction: column; @@ -80,18 +101,20 @@ export const NavBarMovedUP = styled(NavBar)` `; export const Label = styled.p` - margin-top: 20px; + margin-top: 9px; +`; + +export const Category = styled.p` + margin-top: 10px; `; export const LabelBox = styled.div` width: 150px; height: 100%; -`; - -export const CenterBox = styled.div` display: flex; - justify-content: center; - height: 700px; + align-self: center; + flex-direction: column; + gap: 9px; `; export const HeaderText = styled.h3` @@ -107,31 +130,113 @@ export const HeaderText = styled.h3` line-height: normal; `; -export const AddressText = styled.p` + + +export const ShippingDetailsDiv = styled.div` + display: flex; + flex-direction: column; + align-items: space-start; + border-radius: 10px; + background: var(--White, #fff); + box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); + width: 467px; + height: auto; + max-height: 793px; + margin-top: 10px; + margin-bottom: 50px; + padding: 36px 34px; + gap: 33px; +`; + +export const DetailsHeader = styled.p` +color: var(--Navy, #1B3679); + font-family: Public Sans, sans-serif; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: normal; + +`; + +export const DetailsText = styled.p` color: var(--Black, #101010); font-family: Public Sans; font-size: 17px; font-style: normal; font-weight: 400; line-height: normal; + margin-top: 20px; +`; + +export const BottomColumnDiv = styled.div` + display: flex; + flex-flow: row; + align-items: space-evenly; + justify-content: space-around; + width: 100%; +`; + +export const PageDiv = styled.div` + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + width: 100%; +`; + +export const TopColumnDiv = styled.div` + display: flex; + flex-flow: column; + align-items: flex-start; + justify-content: space-around; margin-bottom: 20px; - margin-left: 45px; `; -export const DateText = styled.p` - color: var(--Black, #101010); - margin-top: 20px; - margin-left: 45px; - font-family: Public Sans; - font-size: 25px; - font-style: normal; - font-weight: 700; - line-height: normal; - text-decoration-line: underline; +export const OrderSummaryDiv = styled.div` + overflow: scroll; + width: 350px; + height: 300px; +`; + +export const ItemSummaryDiv = styled.div` + display: flex; + flex-direction: row; + margin-bottom: 20px; + justify-content: space-between; + padding-left: 10px; + padding-right: 10px; +`; + +export const OrderTotalDiv = styled.div` + height: 50px; + padding-top: 10px; + width: 350px; + padding-left: 0px; + border-top: 1px black solid; + display: flex; + flex-flow: row; + justify-content: space-between; `; -export const AddressDiv = styled.div` - position: relative; +export const LeftColumnDiv = styled.div` display: flex; - align-items: flex-end; + flex-flow: column; + justify-content: space-evenly; + align-items: space-evenly; `; +export const RightColumnDiv = styled.div` + display: flex; + flex-flow: column; + margin-left: 20px; + margin-top: 127px; +`; + +export const WhiteBackgroundDiv = styled.div` + border-radius: 8px; + background: var(--White, #fff); + height: 430px; + width: 350px; + padding-top: 20px; + + box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1); +`; \ No newline at end of file diff --git a/src/components/BackButton/styles.ts b/src/components/BackButton/styles.ts index cbebf07a..4530a6e6 100644 --- a/src/components/BackButton/styles.ts +++ b/src/components/BackButton/styles.ts @@ -13,6 +13,7 @@ export const BackDiv = styled.button` margin-left: 0px; margin-top: 55px; gap: 5px; + margin-bottom: 25px; `; export const ImageWithSize = styled(Image)`