Skip to content

Commit

Permalink
finished making page
Browse files Browse the repository at this point in the history
  • Loading branch information
Monique Cheng committed Apr 7, 2024
1 parent 1e473b2 commit 03ed547
Show file tree
Hide file tree
Showing 3 changed files with 179 additions and 55 deletions.
74 changes: 46 additions & 28 deletions src/app/orderConfirmationDelivery/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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<Product[]>([]);
Expand All @@ -52,17 +54,18 @@ export default function OrderConfirmationDelivery() {
}, []);

return (
<div>
<main>
<NavBar />

<BackButton destination="./storefront" />
<CenterBox>
<OutterBox>
<CenterDiv>
<PageDiv>
<BottomColumnDiv>
<LeftColumnDiv>
<BackButton destination="./storefront" />
<Heading3Bold>
Thank you, {user?.first_name}. Your order has been placed.
Your order has been submitted
</Heading3Bold>
<OutterFavoriteDiv>
<DateText>Order No. {user?.cart_id}</DateText>
<Heading4Bold>Order No. {user?.cart_id}</Heading4Bold>
<ScrollDiv>
{Cart.map(cartItem => (
<FavoriteDiv key={cartItem.id}>
Expand All @@ -72,26 +75,41 @@ export default function OrderConfirmationDelivery() {
style={{
width: '150px',
height: '150px',
marginLeft: '80px',
marginRight: '100px',
marginLeft: '30px',
}}
/>
<LabelBox>
<Label>{cartItem.name}</Label>
<p>Category: {cartItem.category}</p>
<Body1Bold>{cartItem.name}</Body1Bold>
<Body2Light>Category: {cartItem.category}</Body2Light>
</LabelBox>
</FavoriteDiv>
))}
</ScrollDiv>
<AddressDiv>
<Body2>
Shipping Address: {userAddress?.street}, {userAddress?.city},{' '}
{userAddress?.zipcode}
</Body2>
</AddressDiv>
</OutterFavoriteDiv>
</OutterBox>
</CenterBox>
</div>
</LeftColumnDiv>
<RightColumnDiv>
<ShippingDetailsDiv>
<Heading3Bold>
Delivery Information
</Heading3Bold>
<DetailsHeader>
Estimated Date
</DetailsHeader>
<Body1>
date
</Body1>
<DetailsHeader>
Location
</DetailsHeader>
<Body1>
{userAddress?.street}, {userAddress?.city},{' '} {userAddress?.zipcode}
</Body1>
</ShippingDetailsDiv>
</RightColumnDiv>
</BottomColumnDiv>
</PageDiv>
</CenterDiv>

</main>
);
}
159 changes: 132 additions & 27 deletions src/app/orderConfirmationDelivery/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand All @@ -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`
Expand All @@ -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;
Expand Down Expand Up @@ -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`
Expand All @@ -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);
`;
1 change: 1 addition & 0 deletions src/components/BackButton/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)`
Expand Down

0 comments on commit 03ed547

Please sign in to comment.