Skip to content

Commit

Permalink
feat: PickUp Page redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
@CharlotteLaw
CharlotteLaw committed Apr 12, 2024
1 parent 19d0c3a commit 4b648af
Show file tree
Hide file tree
Showing 3 changed files with 214 additions and 63 deletions.
116 changes: 66 additions & 50 deletions src/app/orderConfirmationPickUp/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,34 @@ import { useState, useEffect } from 'react';
import { fetchUser } from '@/api/supabase/queries/user_queries';
import { fetchPickupTimesByID } from '@/api/supabase/queries/pickup_queries';
import { fetchCurrentOrdersByUser } from '@/api/supabase/queries/order_queries';
import { Body2Bold, Body2, Heading3Bold } from '@/styles/fonts';
import {
Body1,
Body1Bold,
Body2Light,
Heading3Bold,
Heading4Bold,
} from '@/styles/fonts';
import { fetchCartItemsWithQuantity } from '../../api/supabase/queries/cart_queries';

import BackButton from '../../components/BackButton/BackButton';

import NavBar from '../../components/NavBarFolder/NavBar';

import {
TextDiv,
TextDiv1,
BackButtonDiv,
FavoriteDiv,
ColDiv,
OutterFavoriteDiv,
OutterBox,
Label,
LabelBox,
ScrollDiv,
DateText,
CenterBox,
AddressDiv,
ShippingDetailsDiv,
BottomColumnDiv,
LeftColumnDiv,
RightColumnDiv,
DetailsHeader,
PageDiv,
CenterDiv,
} from './styles';

import { Product, User, Pickup } from '../../schema/schema';
Expand Down Expand Up @@ -66,49 +76,55 @@ export default function OrderConfirmationPickUp() {
return (
<div>
<NavBar />
<BackButton destination="./storefront" />
<CenterBox>
<OutterBox>
<Heading3Bold>
Thank you, {user?.first_name}. Your order has been submitted.
</Heading3Bold>

<OutterFavoriteDiv>
<ColDiv>
{/** change this to order number! */}
<DateText>Order No. {user?.cart_id}</DateText>
{/** got the date but please clean up the date format :) */}

<Body2Bold>Pick Up: {organizePickupTime()}</Body2Bold>
</ColDiv>
{/** mess w/ the height of the scrollDiv so that the locationn stays constant :) */}

<ScrollDiv>
{Cart.map(cartItem => (
<FavoriteDiv key={cartItem.id}>
<img
src={cartItem.photo}
alt={cartItem.name}
style={{
width: '150px',
height: '150px',
marginLeft: '80px',
marginRight: '100px',
}}
/>
<LabelBox>
<Label>{cartItem.name}</Label>
<p>Category: {cartItem.category}</p>
</LabelBox>
</FavoriteDiv>
))}
</ScrollDiv>
<AddressDiv>
<Body2>Location: 3170 23rd Street, San Francisco, CA 94110</Body2>
</AddressDiv>
</OutterFavoriteDiv>
</OutterBox>
</CenterBox>
<CenterDiv>
<PageDiv>
<BackButtonDiv>
<BackButton destination="./storefront" />
</BackButtonDiv>
<BottomColumnDiv>
<LeftColumnDiv>
<TextDiv>
<Heading3Bold>Your order has been submitted</Heading3Bold>
</TextDiv>
<OutterFavoriteDiv>
<TextDiv1>
<Heading4Bold>Order No. {user?.cart_id}</Heading4Bold>
</TextDiv1>
<ScrollDiv>
{Cart.map(cartItem => (
<FavoriteDiv key={cartItem.id}>
<img
src={cartItem.photo}
alt={cartItem.name}
style={{
width: '150px',
height: '150px',
marginLeft: '30px',
}}
/>
<LabelBox>
<Body1Bold>{cartItem.name}</Body1Bold>
<Body2Light>Category: {cartItem.category}</Body2Light>
</LabelBox>
</FavoriteDiv>
))}
</ScrollDiv>
</OutterFavoriteDiv>
</LeftColumnDiv>
<RightColumnDiv>
<ShippingDetailsDiv>
<Heading3Bold>Delivery Information</Heading3Bold>
<DetailsHeader>Pick Up Date</DetailsHeader>
<Body1>{organizePickupTime()}</Body1>
<DetailsHeader>Location</DetailsHeader>
<Body1>
Location: 3170 23rd Street, San Francisco, CA 94110
</Body1>
</ShippingDetailsDiv>
</RightColumnDiv>
</BottomColumnDiv>
</PageDiv>
</CenterDiv>
</div>
);
}
150 changes: 147 additions & 3 deletions src/app/orderConfirmationPickUp/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import NavBar from '../../components/NavBarFolder/NavBar';
export const FavoriteDiv = styled.div`
display: flex;
flex-direction: row;
align-items: start;
align-items: center;
justify-content: space-start;
width: 100%;
margin-bottom: 50px;
Expand All @@ -22,8 +22,11 @@ export const OutterFavoriteDiv = styled.div`
background: var(--White, #fff);
box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
width: 800px;
max-height: 600px;
margin-top: 10px;
max-height: 100%;
margin-top: 20px;
margin-bottom: 30px;
margin-right: 40px;
margin-left: 60px;
`;

export const ScrollDiv = styled.div`
Expand Down Expand Up @@ -90,6 +93,9 @@ export const Label = styled.p`
export const LabelBox = styled.div`
width: 150px;
height: 100%;
padding: 20px;
margin-left: 30px;
gap: 35px;
`;

export const HeaderText = styled.h3`
Expand Down Expand Up @@ -154,3 +160,141 @@ export const AddressDiv = styled.div`
display: flex;
align-items: flex-end;
`;

export const TopColumnDiv = styled.div`
display: flex;
flex-flow: column;
align-items: flex-start;
justify-content: space-around;
margin-bottom: 20px;
`;

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 LeftColumnDiv = styled.div`
display: flex;
flex-flow: column;
justify-content: space-evenly;
align-items: space-evenly;
width: 100%;
`;
export const RightColumnDiv = styled.div`
display: flex;
flex-flow: column;
align-items: start;
margin-left: 10px;
width: 100%;
`;

export const BackButtonDiv = styled.div`
display: flex;
flex-direction: row;
text-align: left;
width: 800px;
margin-left: 80px;
margin-bottom: 40px;
`;

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);
`;

export const BottomColumnDiv = styled.div`
display: flex;
flex-direction: row;
align-items: space-evenly;
justify-content: space-around;
width: 100%;
margin-left: 20px;
margin-bottom: 30px;
gap: 30px;
`;

export const TextDiv = styled.div`
display: flex;
flex-direction: row;
margin-left: 60px;
margin-top: 20px;
margin-bottom: 20px;
`;

export const TextDiv1 = styled.div`
display: flex;
flex-direction: row;
padding: 10px;
margin-left: 20px;
margin-top: 15px;
`;

export const PageDiv = styled.div`
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
`;

export const ShippingDetailsDiv = styled.div`
display: flex;
flex-direction: column;
align-items: flex-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: 100%;
padding: 36px 34px;
gap: 33px;
max-height: 100%;
margin-top: 93px;
margin-bottom: 30px;
margin-right: 40px;
`;

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 CenterDiv = styled.div`
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 20px;
`;
11 changes: 1 addition & 10 deletions src/app/pickup/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,21 +16,12 @@ import { Pickup, User, ProductWithQuantity } from '@/schema/schema';
import OrderSummary from '../../components/OrderSummaryFolder/OrderSummary';
import NavBar from '../../components/NavBarFolder/NavBar';
import {
HeaderShiftLeft,
OrderSummaryDiv,
HeaderShiftRight,
OrderTotalDiv,
PShiftLeft,
WhiteBackgroundDiv,
BackDiv,
Backtext,
PageDiv,
CheckoutButton,
ItemSummaryDiv,
ForceColumnDiv,
RightColumnDiv,
Qty,
PShiftRight,
PickupContent,
PickupContainer,
PickupTimeButton,
Expand Down Expand Up @@ -62,7 +53,7 @@ function DateInfoComponent(date: { date: unknown }) {

//

export default function Pickup() {
export default function PickUp() {
const [Cart, setCart] = useState<ProductWithQuantity[]>([]);
const [numberOfItems, setNumberOfItems] = useState(0);
const router = useRouter();
Expand Down

0 comments on commit 4b648af

Please sign in to comment.