From 03ed547b933bd5bef378a02af4d4e882bc1ba7a1 Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Sun, 7 Apr 2024 16:52:22 -0700 Subject: [PATCH 1/2] 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)` From 596cd110e3e83311ac96ef5be845e03776eaefd5 Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Sun, 7 Apr 2024 16:57:01 -0700 Subject: [PATCH 2/2] fix: prettier eslint --- src/app/orderConfirmationDelivery/page.tsx | 95 +++++++++------------ src/app/orderConfirmationDelivery/styles.ts | 7 +- 2 files changed, 44 insertions(+), 58 deletions(-) diff --git a/src/app/orderConfirmationDelivery/page.tsx b/src/app/orderConfirmationDelivery/page.tsx index ecc19109..18239809 100644 --- a/src/app/orderConfirmationDelivery/page.tsx +++ b/src/app/orderConfirmationDelivery/page.tsx @@ -24,7 +24,6 @@ import { RightColumnDiv, DetailsHeader, PageDiv, - TopColumnDiv, CenterDiv, } from './styles'; @@ -57,59 +56,49 @@ export default function OrderConfirmationDelivery() {
- - - - - - Your order has been submitted - - - Order No. {user?.cart_id} - - {Cart.map(cartItem => ( - - {cartItem.name} - - {cartItem.name} - Category: {cartItem.category} - - - ))} - - - - - - - Delivery Information - - - Estimated Date - - - date - - - Location - - - {userAddress?.street}, {userAddress?.city},{' '} {userAddress?.zipcode} - - - - - + + + + + Your order has been submitted + + Order No. {user?.cart_id} + + {Cart.map(cartItem => ( + + {cartItem.name} + + {cartItem.name} + Category: {cartItem.category} + + + ))} + + + + + + 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 107538f9..e72f1ef1 100644 --- a/src/app/orderConfirmationDelivery/styles.ts +++ b/src/app/orderConfirmationDelivery/styles.ts @@ -130,8 +130,6 @@ export const HeaderText = styled.h3` line-height: normal; `; - - export const ShippingDetailsDiv = styled.div` display: flex; flex-direction: column; @@ -149,13 +147,12 @@ export const ShippingDetailsDiv = styled.div` `; export const DetailsHeader = styled.p` -color: var(--Navy, #1B3679); + 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` @@ -239,4 +236,4 @@ export const WhiteBackgroundDiv = styled.div` padding-top: 20px; box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1); -`; \ No newline at end of file +`;