Skip to content

Commit

Permalink
main
Browse files Browse the repository at this point in the history
  • Loading branch information
BuyankhuuTsCAl committed Apr 21, 2024
2 parents 6f15259 + 5c3ec58 commit 421406a
Show file tree
Hide file tree
Showing 9 changed files with 167 additions and 55 deletions.
6 changes: 5 additions & 1 deletion src/app/[productId]/Buttons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,11 @@ export default function Buttons(props: { productNumber: number }) {
// used hyphen instead of dash for display
const changeCart = () => {
addToCart(productNumber, quantity);
toast(`you have added ${quantity} items to the cart!`);
if (quantity <= 1) {
toast(`you have added ${quantity} item to the cart!`);
} else {
toast(`you have added ${quantity} items to the cart!`);
}
};

return (
Expand Down
5 changes: 4 additions & 1 deletion src/app/cart/cartItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
TransparentButton,
LabelBox,
ImageBackground,
CategorySpacing,
} from './styles';

import Buttons from './Buttons';
Expand Down Expand Up @@ -46,7 +47,9 @@ export default function CartItem(props: {
</ImageBackground>
<LabelBox>
<Heading4Bold>{cartItemProduct.name}</Heading4Bold>
<Body2>Category: {cartItemProduct.category}</Body2>
<CategorySpacing>
<Body2>Category: {cartItemProduct.category}</Body2>
</CategorySpacing>
</LabelBox>
<Buttons
productNumber={cartItemProduct.id}
Expand Down
19 changes: 11 additions & 8 deletions src/app/cart/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
LeftColumnDiv,
RightColumnDiv,
ContentDiv,
OrderSumSectionSpacing,
} from './styles';

import { ProductWithQuantity } from '../../schema/schema';
Expand Down Expand Up @@ -73,14 +74,16 @@ export default function OrderPage() {
</CartItemsDiv>
</LeftColumnDiv>
<RightColumnDiv>
<OrderSummary cart={cart} numberOfItems={numberOfItems} />
<CheckoutButton
// change this function so that the flow makes sense and that there is items within the cart
onClick={() => checkDelivery()}
disabled={numberOfItems === 0}
>
Check Out
</CheckoutButton>
<OrderSumSectionSpacing>
<OrderSummary cart={cart} numberOfItems={numberOfItems} />
<CheckoutButton
// change this function so that the flow makes sense and that there is items within the cart
onClick={() => checkDelivery()}
disabled={numberOfItems === 0}
>
Check Out
</CheckoutButton>
</OrderSumSectionSpacing>
</RightColumnDiv>
</ContentDiv>
</PageDiv>
Expand Down
22 changes: 15 additions & 7 deletions src/app/cart/styles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,6 @@ export const FavoriteDiv = styled.div`
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
max-width: 750px;
width: 100%;
`;

export const ImageBackground = styled.div`
Expand All @@ -30,7 +27,6 @@ export const CartItemsDiv = styled.div`
flex-direction: column;
align-items: center;
border-radius: 10px;
width: 750px;
overflow: auto;
gap: 32px;
margin-top: 20px;
Expand Down Expand Up @@ -65,8 +61,9 @@ export const Backtext = styled.p`
export const TrashIcon = styled(Trash2)`
width: 30px;
height: 30px;
color: black;
color: navy;
margin-right: 30px;
margin-left: 50px;
margin-top: 28px;
`;

Expand All @@ -77,7 +74,7 @@ export const FooterMoved = styled(Footer)`
export const TransparentButton = styled.button`
background-color: transparent;
border: transparent;
padding-left: 40px;
margin-left: 40px;
margin-bottom: 25px;
`;

Expand All @@ -102,10 +99,13 @@ export const QuantityButton = styled.div`
width: 165px;
height: 50px;
border-radius: 8px;
font-size: 18px;
font-weight: bold;
background-color: ${COLORS.white};
border: 2px solid ${COLORS.navy};
color: ${COLORS.navy};
cursor: pointer;
margin-left: 200px;
`;

export const PlusMinusButton = styled.button`
Expand All @@ -125,13 +125,13 @@ export const Label = styled.p`

export const LabelBox = styled.div`
width: 150px;
margin-left: 50px;
`;

export const ContentDiv = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 100px;
padding-left: 50px;
background-color: ${COLORS.offWhite};
`;
Expand Down Expand Up @@ -373,3 +373,11 @@ export const CheckoutButton = styled.button`
background: #0e2351;
}
`;

export const CategorySpacing = styled.div`
margin-top: 15px;
`;

export const OrderSumSectionSpacing = styled.div`
margin-left: 135px;
`;
25 changes: 23 additions & 2 deletions src/app/orderConfirmationDelivery/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import {

import { Product, User, Address } from '../../schema/schema';
import { Body1Bold } from '../orderPage/styles';
import { BackButtonDiv } from '../orderConfirmationPickUp/styles';

export default function OrderConfirmationDelivery() {
const [Cart, setCart] = useState<Product[]>([]);
Expand Down Expand Up @@ -62,6 +63,9 @@ export default function OrderConfirmationDelivery() {
<NavBar />
<CenterDiv>
<PageDiv>
<BackButtonDiv>
<BackButton destination="./storefront" />
</BackButtonDiv>
<BottomColumnDiv>
<LeftColumnDiv>
<BackButton destination="./storefront" />
Expand All @@ -81,8 +85,25 @@ export default function OrderConfirmationDelivery() {
}}
/>
<LabelBox>
<Body1Bold>{cartItem.name}</Body1Bold>
<Body2Light>Category: {cartItem.category}</Body2Light>
<div>
<span
style={{
display: 'inline-block',
fontWeight: 'bold',
marginRight: '4px',
}}
>
Quantity:
</span>
<span
style={{
display: 'inline-block',
fontSize: '16px',
}}
>
{cartItem.quantity}
</span>
</div>
</LabelBox>
</FavoriteDiv>
))}
Expand Down
27 changes: 23 additions & 4 deletions src/app/orderConfirmationPickUp/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,6 @@ export default function OrderConfirmationPickUp() {
<TextDiv>
<Heading3Bold>Your order has been submitted</Heading3Bold>
</TextDiv>

<OutterFavoriteDiv>
<TextDiv1>
<Heading4Bold>Order No. {orderIDFromSearch}</Heading4Bold>
Expand All @@ -116,10 +115,30 @@ export default function OrderConfirmationPickUp() {
<LabelBox1>
<Body1Bold>{cartItem.name}</Body1Bold>
<br />
<Body2Light>Category: {cartItem.category}</Body2Light>
<Body2Light style={{ marginTop: '-10px' }}>
Category: {cartItem.category}
</Body2Light>
</LabelBox1>
<LabelBox>
<Body1Bold>Quantity: {cartItem.quantity}</Body1Bold>
<div>
<span
style={{
display: 'inline-block',
fontWeight: 'bold',
marginRight: '4px',
}}
>
Quantity:
</span>
<span
style={{
display: 'inline-block',
fontSize: '16px',
}}
>
{cartItem.quantity}
</span>
</div>
</LabelBox>
</FavoriteDiv>
))}
Expand All @@ -128,7 +147,7 @@ export default function OrderConfirmationPickUp() {
</LeftColumnDiv>
<RightColumnDiv>
<ShippingDetailsDiv>
<Heading3Bold>Delivery Information</Heading3Bold>
<Heading3Bold>Pickup Information</Heading3Bold>
<DetailsHeader>Time Slot</DetailsHeader>
<Body1>{organizePickupTime()} (10:00 am - 12:30 pm)</Body1>
<DetailsHeader>Location</DetailsHeader>
Expand Down
4 changes: 2 additions & 2 deletions src/app/orderConfirmationPickUp/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,7 @@ export const BackButtonDiv = styled.div`
text-align: left;
width: 800px;
margin-left: 80px;
margin-bottom: 40px;
margin-top: 40px;
`;

export const WhiteBackgroundDiv = styled.div`
Expand Down Expand Up @@ -302,7 +302,7 @@ export const ShippingDetailsDiv = styled.div`
padding: 36px 34px;
gap: 33px;
max-height: 100%;
margin-top: 93px;
margin-top: 205px;
margin-bottom: 30px;
margin-right: 40px;
`;
Expand Down
110 changes: 82 additions & 28 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,34 +1,88 @@
/* eslint-disable @typescript-eslint/no-unused-vars */

'use client';

import React, { useEffect } from 'react';

import Link from 'next/link';
// import { fullFavItemTest } from '../api/supabase/queries/tests/user_test';

export default function Checkout() {
// testFetchUserData();
// testAddUserAddress();
// testFetchOrderByUUID();
// testFetchOrders();
// testGetOrderById();
// testToggleOrderProgress();
// testFetchProducts();
// testFetchProductByName();
// testFetchPickupData();
// testFetchPickupTimesByUUID();
// testUpdateAllOrdersProgressToTrue();
// useEffect(() => {
// async function testEverything() {
// await arrayOfFavorites();
// }
// testEverything();
// });
import { useState } from 'react';
import Image from 'next/image';
import supabase from '@/api/supabase/createClient';
import { Body1, Heading1 } from '@/styles/fonts';
import LoginForm from '@/components/LoginFormFolder/LoginForm';

import {
Fullscreen,
LoginBox,
LoginContent,
WelcomeSign,
Button,
ErrorMessage,
EyeOffIcon,
EyeIcon,
} from './login/styles';

export default function App() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [errorMessage, setErrorMessage] = useState('');
const [isError, setIsError] = useState<boolean>(false);
const [showPassword, setShowPassword] = useState<boolean>(false);

const handleLogin = async () => {
const { error } = await supabase.auth.signInWithPassword({
email,
password,
});

setErrorMessage('');

if (error) {
setErrorMessage('Incorrect email or password');
setIsError(true);
} else {
window.location.href = '/storefront';
}
};

return (
<main>
<Link href="/login">Login</Link>
</main>
<Fullscreen>
<Image
src="/images/ShantiLogo.png"
alt="logo pic"
width={125}
height={65}
style={{
position: 'absolute',
top: '30px',
left: '30px',
}}
/>
<LoginBox>
<LoginContent>
<WelcomeSign>
<Heading1>Welcome</Heading1>
</WelcomeSign>

<LoginForm
isError={isError}
changeUserName={setEmail}
changePassword={setPassword}
showPassword={showPassword}
/>
{showPassword ? (
<EyeIcon
onClick={() => setShowPassword(false)}
style={{ cursor: 'pointer' }}
/>
) : (
<EyeOffIcon
onClick={() => setShowPassword(true)}
style={{ cursor: 'pointer' }}
/>
)}

{errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
<Button style={{ cursor: 'pointer' }} onClick={handleLogin}>
<Body1>Log In</Body1>
</Button>
</LoginContent>
</LoginBox>
</Fullscreen>
);
}
4 changes: 2 additions & 2 deletions src/components/NavBarFolder/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ export const CartTotalCircle = styled.div<{ $isZero?: boolean }>`
height: 24px;
border-radius: 50%;
position: absolute;
top: -12px;
right: -12px;
top: -13px;
right: -13px;
display: flex;
justify-content: center;
align-items: center;
Expand Down

0 comments on commit 421406a

Please sign in to comment.