Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: PickUp Page redesign #80

Merged
merged 9 commits into from
Apr 15, 2024
Merged

feat: PickUp Page redesign #80

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4b648af
feat: PickUp Page redesign
CharlotteLaw Apr 12, 2024
6847997
feat: PickUp Page redesign
CharlotteLaw Apr 12, 2024
7561742
feat: Pick Up re-design
CharlotteLaw Apr 15, 2024
ecc7382
preRebase
BuyankhuuTsCAl Apr 15, 2024
486b284
buyankhuu's final touch
BuyankhuuTsCAl Apr 15, 2024
60d4c50
huh
BuyankhuuTsCAl Apr 15, 2024
4cc9f11
copied
BuyankhuuTsCAl Apr 15, 2024
c8a7a0f
prettier
BuyankhuuTsCAl Apr 15, 2024
32ad91c
d
BuyankhuuTsCAl Apr 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 66 additions & 50 deletions src/app/orderConfirmationPickUp/page.tsx
View file
Open in desktop
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>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you change the name of this div. I think in the past, someone might've copied the favorites style but we should prob rename them

<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>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here

))}
</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
Open in desktop
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;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't use black -> do color.black

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);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use the color file :)

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);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same issue

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%;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is there two max heights

margin-top: 93px;
margin-bottom: 30px;
margin-right: 40px;
`;

export const DetailsHeader = styled.p`
color: var(--Navy, #1b3679);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same idea

font-family: Public Sans, sans-serif;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if you imported the text file then you shouldn't need this part

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
Open in desktop
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
Loading