diff --git a/src/api/supabase/queries/cart_queries.ts b/src/api/supabase/queries/cart_queries.ts index 2f1bee77..c8062040 100644 --- a/src/api/supabase/queries/cart_queries.ts +++ b/src/api/supabase/queries/cart_queries.ts @@ -206,7 +206,6 @@ export async function fetchCartItemsWithQuantity(): Promise< }); const fetchedProducts = await Promise.all(productPromises); - console.log(fetchedProducts); return fetchedProducts; } diff --git a/src/api/supabase/queries/delivery_queries.ts b/src/api/supabase/queries/delivery_queries.ts new file mode 100644 index 00000000..baa88631 --- /dev/null +++ b/src/api/supabase/queries/delivery_queries.ts @@ -0,0 +1,15 @@ +import supabase from '../createClient'; + +export type DeliveryTimes = { + delivery_group: number; + delivery_time: number; +}; + +export async function fetchDeliveryTimes(): Promise { + const { data, error } = await supabase.from('delivery_times').select('*'); + + if (error) { + throw new Error(`Error fetching delivery times: ${error.message}`); + } + return data; +} diff --git a/src/api/supabase/queries/order_queries.ts b/src/api/supabase/queries/order_queries.ts index f3e44c69..e011398d 100644 --- a/src/api/supabase/queries/order_queries.ts +++ b/src/api/supabase/queries/order_queries.ts @@ -38,12 +38,10 @@ export async function createOrder() { .insert({ user_id: user.id }) .select('*') .single(); - console.log(order); if (error) { throw new Error(`Error creating order: ${error.message}`); } - console.log(order.id); await supabase .from('profiles') .update({ cart_id: order.id }) diff --git a/src/api/supabase/queries/product_queries.ts b/src/api/supabase/queries/product_queries.ts index 6112c195..85ec9fbb 100644 --- a/src/api/supabase/queries/product_queries.ts +++ b/src/api/supabase/queries/product_queries.ts @@ -88,7 +88,6 @@ export async function filterProduct(productType: string): Promise { export async function convertCategoryToNumber( productType: string, ): Promise { - console.log(productType); const { data: buttonVal, error } = await supabase .from('storefront_buttons') .select('*') @@ -104,7 +103,6 @@ export async function convertCategoryToNumber( export async function fetchUnprescribedCategory( productType: string, ): Promise { - console.log(productType); const productTypeConverted = await convertCategoryToNumber(productType); const { data: products, error } = await supabase diff --git a/src/api/supabase/queries/user_queries.ts b/src/api/supabase/queries/user_queries.ts index 4b70bbcb..6a6c75a8 100644 --- a/src/api/supabase/queries/user_queries.ts +++ b/src/api/supabase/queries/user_queries.ts @@ -1,8 +1,6 @@ -import { Lekton } from 'next/font/google'; import supabase from '../createClient'; import { User, Product } from '../../../schema/schema'; import { fetchProductByID } from './product_queries'; -import { convertButtonNumberToCategory } from './button_queries'; /** * fetchUser is a function that fetches the user data from the database and returns the user object. @@ -55,12 +53,12 @@ export async function fetchUserByUUID(uuid: string) { .single(); if (error) { - console.error('Error fetching user data:', error); + throw new Error(`Error fetching user data: ${error.message}`); } return user; } catch (error) { - console.error('Error:', error); + throw new Error(`Error`); throw error; } } @@ -125,13 +123,12 @@ export async function fetchUserAddress(uuid: string) { .single(); if (error) { - console.error('Error fetching user data:', error); + throw new Error(`Error fetching user data: ${error.message}`); } return user; } catch (error) { - console.error('Error:', error); - throw error; + throw new Error(`Error:`); } } @@ -148,7 +145,6 @@ export async function fetchCurrentUserAddress() { .eq('user_id', user.id) .limit(1) .single(); - console.log(address); if (error) { console.error('Error fetching user data:', error); diff --git a/src/app/[productId]/Buttons.tsx b/src/app/[productId]/Buttons.tsx index 3cfe8355..9cc8d802 100644 --- a/src/app/[productId]/Buttons.tsx +++ b/src/app/[productId]/Buttons.tsx @@ -1,5 +1,7 @@ import React, { useState } from 'react'; import { toast } from 'react-toastify'; +import { Plus, Minus } from 'react-feather'; +import { Body1Bold } from '@/styles/fonts'; import { ButtonsWrapper, AddToCartButton, @@ -37,11 +39,11 @@ export default function Buttons(props: { productNumber: number }) { - – + - {quantity} + {quantity} - + + diff --git a/src/app/[productId]/page.tsx b/src/app/[productId]/page.tsx index 3a45652a..55cd995a 100644 --- a/src/app/[productId]/page.tsx +++ b/src/app/[productId]/page.tsx @@ -2,8 +2,11 @@ import { useEffect, useState } from 'react'; import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries'; -import { Body1, Heading1, Body2Light } from '@/styles/fonts'; -import { fetchProductByID } from '../../api/supabase/queries/product_queries'; +import { Body1, Heading1, Body2Light, Body2Bold, Body3 } from '@/styles/fonts'; +import { + fetchProductByID, + fetchUserProducts, +} from '../../api/supabase/queries/product_queries'; import BackButton from '../../components/BackButton/BackButton'; import 'react-toastify/dist/ReactToastify.css'; @@ -13,8 +16,13 @@ import { DescriptionContainer, ToastPopUP, Fullscreen, + LeftColumnDiv, + FavoritePopup, + HeartContainer, + HeartIcon, + TopRightContainer, } from './styles'; - +import { addOrRemoveProductFromFavorite } from '../../api/supabase/queries/user_queries'; import NavBar from '../../components/NavBarFolder/NavBar'; import { Product } from '../../schema/schema'; import Buttons from './Buttons'; @@ -25,6 +33,8 @@ export default function ItemDisplay({ params: { productId: number }; }) { const [Item, setItem] = useState(); + const [IsFavorite, setIsFavorite] = useState(false); + const [FilteredProducts, setFilteredProducts] = useState([]); useEffect(() => { async function fetchProducts() { @@ -33,8 +43,12 @@ export default function ItemDisplay({ response.category = await convertButtonNumberToCategory( response.category, ); + const data = (await fetchUserProducts()) as Product[]; + + setIsFavorite(!!data.find(item => item.id === params.productId)); if (response) { setItem(response); + setFilteredProducts(data); } } catch (error) { // console.error(error); @@ -44,6 +58,14 @@ export default function ItemDisplay({ fetchProducts(); }, [params.productId]); + async function handleFavorite() { + await addOrRemoveProductFromFavorite( + await fetchProductByID(params.productId), + !IsFavorite, + ); + setIsFavorite(!IsFavorite); + } + return ( @@ -53,31 +75,38 @@ export default function ItemDisplay({ limit={1} hideProgressBar /> -
- -
- - {Item?.name} - + + + + {Item?.name} + + - {Item?.name} + + {Item?.name} + handleFavorite()}> + + + {IsFavorite ? 'Remove from favorites' : 'Add to favorites'} + + + + + - {Item?.category} + Category: {Item?.category} - - Product ID: {Item?.id} - + Product Details: - Product Details: + {Item?.description} - {Item?.description} diff --git a/src/app/[productId]/styles.ts b/src/app/[productId]/styles.ts index e96cbb27..285c5f76 100644 --- a/src/app/[productId]/styles.ts +++ b/src/app/[productId]/styles.ts @@ -1,43 +1,45 @@ import styled from 'styled-components'; import { ToastContainer } from 'react-toastify'; +import { Body3 } from '@/styles/fonts'; +import { Heart } from 'react-feather'; import COLORS from '../../styles/colors'; -export const BackButton = styled.button` +export const LeftColumnDiv = styled.div` display: flex; - padding-top: 230px; - padding-left: 30px; - width: 100px; - height: 40px; - background-color: transparent; - border-color: transparent; - font-size: 15px; + flex-direction: column; + gap: 25px; `; export const DescriptionContainer = styled.div` display: flex; - margin-left: 50px; - margin-right: 50px; + margin-top: 50px; width: 1440px; height: 400px; + justify-content: space-around; + align-self: center; + justify-self: center; +`; + +export const TopRightContainer = styled.div` + display: flex; + justify-content: space-between; + width: 440px; `; export const ImageContainer = styled.div` - margin: 50px; width: 500px; height: 500px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; - margin-left: 200px; background-color: ${COLORS.lightGrey}; `; export const TextContainer = styled.div` - margin-left: 70px; width: 440px; height: 350px; - margin-top: 50px; + margin-top: 41px; `; export const ButtonsWrapper = styled.div` @@ -46,7 +48,7 @@ export const ButtonsWrapper = styled.div` align-items: center; width: 450px; height: 50px; - margin-top: 20px; + margin-top: 40px; `; export const QuantityButton = styled.div` @@ -71,6 +73,7 @@ export const PlusMinusButton = styled.button` font-size: 20px; color: ${COLORS.navy}; `; + export const AddToCartButton = styled.button` width: 265px; height: 50px; @@ -85,6 +88,45 @@ export const AddToCartButton = styled.button` border-color: transparent; `; +export const HeartIcon = styled(Heart)<{ $favorited: boolean }>` + width: 30px; + height: 30px; + color: ${props => (props.$favorited ? COLORS.marineBlue : COLORS.black)}; + fill: ${props => (props.$favorited ? COLORS.marineBlue : 'none')}; + position: relative; +`; + +export const HeartContainer = styled.button` + right: 16px; + top: 16px; + background-color: transparent; + border: none; + cursor: pointer; +`; + +export const FavoritePopup = styled.div` + position: absolute; + visibility: hidden; + width: 150px; + border-radius: 8px; + padding: 8px; + // Find better way to refactor this, it shouldn't need a calc + transform: translate(calc(-50% + 15px), -40px); + z-index: 1; + + color: ${COLORS.black}; + background: ${COLORS.lightPeriwinkle}; + box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.2); + + ${Body3} { + display: inline; + } + + ${HeartContainer}:hover & { + visibility: visible; + } +`; + export const ToastPopUP = styled(ToastContainer)` position: fixed; z-index: 100; @@ -94,4 +136,5 @@ export const ToastPopUP = styled(ToastContainer)` export const Fullscreen = styled.div` width: 100%; height: 100%; + display: grid; `; diff --git a/src/app/cart/styles.tsx b/src/app/cart/styles.tsx index ee956f99..b9593f7b 100644 --- a/src/app/cart/styles.tsx +++ b/src/app/cart/styles.tsx @@ -339,7 +339,7 @@ export const OrderContainer = styled.div` export const RightColumnDiv = styled.div` flex: 1; margin-top: 30px; - padding-left: 20px; + margin-bottom: 30px; `; export const Heading = styled.h1` @@ -379,5 +379,5 @@ export const CategorySpacing = styled.div` `; export const OrderSumSectionSpacing = styled.div` - margin-left: 135px; + margin-left: 65px; `; diff --git a/src/app/delivery/page.tsx b/src/app/delivery/page.tsx index 1e66b420..6d7540e6 100644 --- a/src/app/delivery/page.tsx +++ b/src/app/delivery/page.tsx @@ -9,7 +9,6 @@ import { import querystring from 'querystring'; import { createOrder, - fetchCurrentOrdersByUser, updateOrderStatus, } from '@/api/supabase/queries/order_queries'; import BackButton from '../../components/BackButton/BackButton'; diff --git a/src/app/favorites/individualItem.tsx b/src/app/favorites/individualItem.tsx new file mode 100644 index 00000000..c93d7088 --- /dev/null +++ b/src/app/favorites/individualItem.tsx @@ -0,0 +1,63 @@ +import React, { useState } from 'react'; + +import { useRouter } from 'next/navigation'; + +import { Body1Bold, Body2, Body3 } from '@/styles/fonts'; + +import { + HeartIcon, + Hover, + FavoriteDiv, + ProductNameDiv, + ViewItem, + TransparentButton, +} from './styles'; + +import { addOrRemoveProductFromFavorite } from '../../api/supabase/queries/user_queries'; + +import { Product } from '../../schema/schema'; + +export default function IndividualItem(props: { + favorite: Product; + setFavorites: (category: Product[]) => void; + Favorites: Product[]; +}) { + const { favorite, Favorites, setFavorites } = props; + const router = useRouter(); + const [hovering, setHovering] = useState(false); + + async function clickFunctions(props2: { fav: Product }) { + const { fav } = props2; + addOrRemoveProductFromFavorite(fav, false); + setFavorites(Favorites.filter(Prod => Prod.id !== fav.id)); + } + + return ( + + {favorite.name} + + + {favorite.name} + Category: {favorite.category} + router.push(`/${favorite.id}`)}> + View Item + + + + clickFunctions({ fav: favorite })} + onMouseEnter={() => setHovering(true)} + onMouseLeave={() => setHovering(false)} + > + + Remove from favorites + + + + + ); +} diff --git a/src/app/favorites/page.tsx b/src/app/favorites/page.tsx index 8c16242d..506e203e 100644 --- a/src/app/favorites/page.tsx +++ b/src/app/favorites/page.tsx @@ -1,49 +1,39 @@ 'use client'; import { useState, useEffect } from 'react'; -import { useRouter } from 'next/navigation'; -import { Body1Bold, Body2, Heading1 } from '@/styles/fonts'; +import { Heading1 } from '@/styles/fonts'; +import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries'; import BackButton from '../../components/BackButton/BackButton'; -import { - arrayOfFavorites, - addOrRemoveProductFromFavorite, -} from '../../api/supabase/queries/user_queries'; +import { arrayOfFavorites } from '../../api/supabase/queries/user_queries'; import NavBar from '../../components/NavBarFolder/NavBar'; -import { - FavoriteDiv, - OutterFavoriteDiv, - OutterBox, - ProductNameDiv, - HeartIcon, - TransparentButton, - ViewItem, - Fullscreen, - ImageLinkWrapper, -} from './styles'; +import { OutterFavoriteDiv, OutterBox, Fullscreen } from './styles'; +import IndividualItem from './individualItem'; import { Product } from '../../schema/schema'; export default function FavoritesPage() { const [Favorites, setFavorites] = useState([]); - const router = useRouter(); async function fetchProducts() { const data = (await arrayOfFavorites()) as Product[]; - setFavorites(data); + const mapCategories = await Promise.all( + data.map(async product => { + const updateCategory = await convertButtonNumberToCategory( + product.category, + ); + return { ...product, category: updateCategory }; + }), + ); + + setFavorites(mapCategories); } useEffect(() => { fetchProducts(); }, []); - async function clickFunctions(props: { fav: Product }) { - const { fav } = props; - addOrRemoveProductFromFavorite(fav, false); - setFavorites(Favorites.filter(Prod => Prod.id !== fav.id)); - } - return ( @@ -52,29 +42,12 @@ export default function FavoritesPage() { Favorites {Favorites.map(favorite => ( - - - {favorite.name} - - - - {favorite.name} - Category: {favorite.category} - router.push(`/${favorite.id}`)}> - View Item - - - - clickFunctions({ fav: favorite })} - > - - - + ))} diff --git a/src/app/favorites/styles.ts b/src/app/favorites/styles.ts index acd1f56c..479119e8 100644 --- a/src/app/favorites/styles.ts +++ b/src/app/favorites/styles.ts @@ -43,9 +43,11 @@ export const BackDiv = styled.button` export const OutterBox = styled.div` width: 800px; height: 100%; - - margin-top: 50px; - margin-bottom: 50px; + margin-top: 40px; + display: flex; + flex-direction: column; + gap: 20px; + margin-bottom: 20px; `; export const Backtext = styled.p` @@ -58,6 +60,7 @@ export const HeartIcon = styled(Heart)` height: 30px; fill: #333286; margin-right: 25px; + margin-bottom: 40px; `; export const TransparentButton = styled.button` @@ -66,6 +69,22 @@ export const TransparentButton = styled.button` cursor: pointer; `; +export const Hover = styled.div<{ $ishovering?: boolean }>` + visibility: ${props => (props.$ishovering ? 'visible' : 'hidden')}; + transform: translate(-10px, 0px); + margin-bottom: 7px; + color: black; + border: none; + width: 156px; + height: 26px; + border-radius: 8px; + background: var(--Light-Periwinkle, #f4f7ff); + box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.2); + padding-top: 6px; + position: relative; + text-align: center; +`; + export const NavBarMovedUP = styled(NavBar)` position: relative; `; diff --git a/src/app/globals.css b/src/app/globals.css index 4d40d22d..5b0dbd13 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -84,7 +84,11 @@ body { max-width: 100vw; min-height: 100vh; } - +button { + &:hover { + cursor: pointer; + } +} body { background: white; color: black; diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 93fcea70..89fbfbac 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -1,6 +1,7 @@ 'use client'; import { useState } from 'react'; + import Image from 'next/image'; import supabase from '@/api/supabase/createClient'; import { Body1, Heading1 } from '@/styles/fonts'; diff --git a/src/app/login/styles.ts b/src/app/login/styles.ts index 41968785..03fb0708 100644 --- a/src/app/login/styles.ts +++ b/src/app/login/styles.ts @@ -3,11 +3,14 @@ import styled from 'styled-components'; import COLORS from '../../styles/colors'; export const LoginBox = styled.div` + display: flex; width: 500px; height: 420px; - border: 1px solid ${COLORS.neutralGrey}; justify-self: center; align-self: center; + background-color: ${COLORS.white}; + box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1); + border-radius: 10px; `; export const LoginContent = styled.div` @@ -15,7 +18,6 @@ export const LoginContent = styled.div` flex-direction: column; align-self: center; justify-self: center; - margin-top: 30px; text-color: ${COLORS.black}; `; @@ -78,8 +80,10 @@ export const Fullscreen = styled.div` width: 100%; height: 100vh; display: grid; + background-color: ${COLORS.lightGrey}; `; export const InputField = styled.div` position: relative; + background-color: ${COLORS.lightGrey}; `; diff --git a/src/app/orderConfirmationDelivery/page.tsx b/src/app/orderConfirmationDelivery/page.tsx index c82042cb..3de50ae5 100644 --- a/src/app/orderConfirmationDelivery/page.tsx +++ b/src/app/orderConfirmationDelivery/page.tsx @@ -6,8 +6,18 @@ import { fetchCurrentUserAddress, } from '@/api/supabase/queries/user_queries'; -import { Body1, Body2Light, Heading3Bold, Heading4Bold } from '@/styles/fonts'; +import { + Body1, + Body2, + Body2Light, + Heading3Bold, + Heading4Bold, +} from '@/styles/fonts'; import { useSearchParams } from 'next/navigation'; +import { + DeliveryTimes, + fetchDeliveryTimes, +} from '@/api/supabase/queries/delivery_queries'; import BackButton from '../../components/BackButton/BackButton'; import { fetchCartItemsWithQuantityByID } from '../../api/supabase/queries/cart_queries'; @@ -26,6 +36,7 @@ import { DetailsHeader, PageDiv, CenterDiv, + Quantity, } from './styles'; import { Product, User, Address } from '../../schema/schema'; @@ -38,12 +49,12 @@ export default function OrderConfirmationDelivery() { const [userAddress, setUserAddress] = useState
(); const searchParams = useSearchParams(); const orderIDFromSearch = searchParams.get('orderID'); + const [delivTimes, setDelivTimes] = useState([]); useEffect(() => { async function fetchProducts() { const cartItems = (await fetchCartItemsWithQuantityByID( orderIDFromSearch, )) as Product[]; - console.log(cartItems); setCart(cartItems); } @@ -53,19 +64,44 @@ export default function OrderConfirmationDelivery() { const address = await fetchCurrentUserAddress(); setUserAddress(address); } + async function fetchDelivTimes() { + const deliv = await fetchDeliveryTimes(); + setDelivTimes(deliv); + } fetchProducts(); setUserDetails(); + fetchDelivTimes(); }, []); + function organizeDelivTime() { + const userGrp = user?.delivery_group == null ? 1 : user?.delivery_group; + const Time = delivTimes[userGrp]?.delivery_time.toLocaleString(); + const date = + Time == null ? ['0', '0', '0'] : Time?.substring(0, 10).split('-'); + const months = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December', + ]; + const dateStr = `${months[parseInt(date[1], 10)]} ${date[2]}, ${date[0]}`; + return `${dateStr}`; + } + return (
- - - @@ -85,26 +121,14 @@ export default function OrderConfirmationDelivery() { }} /> -
- - Quantity: - - - {cartItem.quantity} - -
+ {cartItem.name} + Category: {cartItem.category} + + + Quantity: {cartItem.quantity} + + ))} @@ -114,7 +138,7 @@ export default function OrderConfirmationDelivery() { Delivery Information Estimated Date - {user?.delivery_group} + {organizeDelivTime()} Location {userAddress?.street}, {userAddress?.city},{' '} diff --git a/src/app/orderConfirmationDelivery/styles.ts b/src/app/orderConfirmationDelivery/styles.ts index e72f1ef1..618a5919 100644 --- a/src/app/orderConfirmationDelivery/styles.ts +++ b/src/app/orderConfirmationDelivery/styles.ts @@ -8,11 +8,17 @@ export const FavoriteDiv = styled.div` display: flex; flex-direction: row; align-items: flex-start; - justify-content: flex-start; + justify-content: space-between; width: 100%; margin-bottom: 50px; margin-top: 30px; - gap: 120px; +`; + +export const Quantity = styled.div` + display: flex; + align-self: center; + justify-content: flex-start; + margin-right: 40px; `; export const OrderDetailsDiv = styled.div` @@ -216,16 +222,18 @@ export const OrderTotalDiv = styled.div` `; export const LeftColumnDiv = styled.div` + margin-top: 30px; display: flex; flex-flow: column; justify-content: space-evenly; align-items: space-evenly; + gap: 20px; `; export const RightColumnDiv = styled.div` display: flex; flex-flow: column; margin-left: 20px; - margin-top: 127px; + margin-top: 123px; `; export const WhiteBackgroundDiv = styled.div` diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx index c9b612ce..9dc9630b 100644 --- a/src/app/orderConfirmationPickUp/page.tsx +++ b/src/app/orderConfirmationPickUp/page.tsx @@ -4,45 +4,40 @@ import { useState, useEffect } from 'react'; import { fetchUser } from '@/api/supabase/queries/user_queries'; import { fetchPickupTimesByID } from '@/api/supabase/queries/pickup_queries'; +import { getOrderById } from '@/api/supabase/queries/order_queries'; import { - fetchCurrentOrdersByUser, - getOrderById, -} from '@/api/supabase/queries/order_queries'; -import { + Heading3Bold, Body1, Body1Bold, - Body2Light, - Heading3Bold, Heading4Bold, + Body2Light, } from '@/styles/fonts'; import { useSearchParams } from 'next/navigation'; -import { fetchCartItemsWithQuantityByID } from '../../api/supabase/queries/cart_queries'; import BackButton from '../../components/BackButton/BackButton'; import NavBar from '../../components/NavBarFolder/NavBar'; import { - TextDiv, - TextDiv1, - BackButtonDiv, FavoriteDiv, OutterFavoriteDiv, + TextDiv1, LabelBox, - LabelBox1, ScrollDiv, ShippingDetailsDiv, - ImageDiv, BottomColumnDiv, - Wrapper, LeftColumnDiv, RightColumnDiv, DetailsHeader, + ImageDiv, PageDiv, CenterDiv, + BackButtonDiv, + TextDiv, } from './styles'; import { Product, User, Pickup } from '../../schema/schema'; +import { fetchCartItemsWithQuantityByID } from '../../api/supabase/queries/cart_queries'; export default function OrderConfirmationPickUp() { const [Cart, setCart] = useState([]); @@ -69,11 +64,10 @@ export default function OrderConfirmationPickUp() { fetchProducts(); setUserDetails(); - }, []); + }); function organizePickupTime() { const startTime = pickupTime?.start_time.toLocaleString(); - const endTime = pickupTime?.end_time.toLocaleString(); const date = startTime == null ? ['0', '0', '0'] @@ -97,7 +91,7 @@ export default function OrderConfirmationPickUp() { - Order No. {orderIDFromSearch} + Order No. {user?.cart_id} {Cart.map(cartItem => ( @@ -112,13 +106,13 @@ export default function OrderConfirmationPickUp() { }} /> - + {cartItem.name}
Category: {cartItem.category} - +
>>>>>> 0c497ffa604d1a861f8fac67277446b2133764a5 + align-items: left; + width: 475px; `; export const BackButtonDiv = styled.div` @@ -241,8 +238,15 @@ export const BackButtonDiv = styled.div` flex-direction: row; text-align: left; width: 800px; - margin-left: 80px; - margin-top: 40px; +<<<<<<< HEAD + + margin-left: 40px; + +======= + margin-left: 40px; +>>>>>>> 0c497ffa604d1a861f8fac67277446b2133764a5 + margin-bottom: 40px; + margin-top: 20px; `; export const WhiteBackgroundDiv = styled.div` @@ -254,6 +258,13 @@ export const WhiteBackgroundDiv = styled.div` box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1); `; +export const Wrapper2 = styled.div` + display: flex; + flex-direction: col; + align-items: space-evenly; + justify-content: space-around; +`; + export const BottomColumnDiv = styled.div` display: flex; flex-direction: row; @@ -261,24 +272,23 @@ export const BottomColumnDiv = styled.div` justify-content: space-around; width: 100%; margin-left: 20px; + margin-right: 20px; margin-bottom: 30px; - gap: 30px; + gap: 10px; `; export const TextDiv = styled.div` display: flex; flex-direction: row; - margin-left: 60px; - margin-top: 20px; - margin-bottom: 20px; + margin-left: 20px; + margin-top: 10px; + margin-bottom: 10px; `; export const TextDiv1 = styled.div` display: flex; flex-direction: row; - padding: 10px; - margin-left: 20px; - margin-top: 15px; + margin-top: 20px; `; export const PageDiv = styled.div` @@ -287,6 +297,10 @@ export const PageDiv = styled.div` justify-content: flex-start; align-items: flex-start; width: 100%; + + position: relative; + + margin-bottom: 40px; `; export const ShippingDetailsDiv = styled.div` @@ -296,13 +310,13 @@ export const ShippingDetailsDiv = styled.div` border-radius: 10px; background: var(--White, #fff); box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); - width: 467px; + width: 475px; height: auto; max-height: 100%; padding: 36px 34px; gap: 33px; max-height: 100%; - margin-top: 205px; + margin-top: 75px; margin-bottom: 30px; margin-right: 40px; `; @@ -320,6 +334,7 @@ export const CenterDiv = styled.div` display: flex; align-items: center; justify-content: center; + position: relative; width: 100%; padding: 20px; `; diff --git a/src/app/orderHistory/page.tsx b/src/app/orderHistory/page.tsx index e02c8e1e..232de1e7 100644 --- a/src/app/orderHistory/page.tsx +++ b/src/app/orderHistory/page.tsx @@ -1,7 +1,7 @@ 'use client'; import React, { useEffect, useState } from 'react'; -import { Heading1, Body1 } from '@/styles/fonts'; +import { Heading2, Body1 } from '@/styles/fonts'; import OrderDetailsWithProducts from '../../components/OrderHistory/OrderHistoryBox'; import { fetchOrderIdsByUserIdSorted } from '../../api/supabase/queries/order_queries'; import Footer from '../../components/FooterFolder/Footer'; @@ -10,6 +10,7 @@ import { OutterBox, NavBarMovedUP, Fullscreen, + BackButtonDiv, } from './styles'; import BackButton from '../../components/BackButton/BackButton'; @@ -29,10 +30,10 @@ function OrderHistory() { - -
- Order History -
+ + + + Order History {orderIds.length > 0 ? ( orderIds.map((orderId: number) => ( diff --git a/src/app/orderHistory/styles.ts b/src/app/orderHistory/styles.ts index a93abdc1..3ef05566 100644 --- a/src/app/orderHistory/styles.ts +++ b/src/app/orderHistory/styles.ts @@ -13,10 +13,22 @@ export const NavBarMovedUP = styled(NavBar)` position: relative; `; +export const BackButtonDiv = styled.div` + display: flex; + flex-direction: row; + gap: 200px; + margin-bottom: 30px; + margin-top: 50px; + text-align: left; + width: 800px; + padding-right: 40px; +`; + export const OutterBox = styled.div` width: 800px; margin-top: 40px; margin-bottom: 70px; + min-height: 50px; `; export const OrderHistoryContainer = styled.div` @@ -28,8 +40,8 @@ export const OrderHistoryContainer = styled.div` box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); width: 800px; // Width of the outer box height: auto; - margin-top: 10px; - padding-top: 40px; + margin-top: 20px; + padding-top: 10px; `; export const OrderHistoryBox = styled.div` diff --git a/src/app/orderPage/page.tsx b/src/app/orderPage/page.tsx index 6d2d0fd9..d4cc521d 100644 --- a/src/app/orderPage/page.tsx +++ b/src/app/orderPage/page.tsx @@ -1,8 +1,17 @@ 'use client'; import { useState, useEffect } from 'react'; -import { Body1, Body2 } from '@/styles/fonts'; +import { + Body1, + Body2Light, + Heading3Bold, + Heading4Bold, + Heading2, + Body1Bold, +} from '@/styles/fonts'; + import { useSearchParams } from 'next/navigation'; +import { fetchPickupTimesByID } from '@/api/supabase/queries/pickup_queries'; import BackButton from '../../components/BackButton/BackButton'; import { @@ -14,17 +23,23 @@ import NavBar from '../../components/NavBarFolder/NavBar'; import { FavoriteDiv, - Body1Bold, OutterFavoriteDiv, BackButtonDiv, - OutterBox, - OutterDiv, - Heading, - ProductNameDiv, - StatusButton, + DetailsHeader, + RightColumnDiv, + TextDiv, + ImageDiv, + BottomColumnDiv, + ShippingDetailsDiv, + LabelBox, + LeftColumnDiv, + ScrollDiv, + PageDiv, + CenterDiv, + TextDiv1, } from './styles'; -import { ProductWithQuantity, Order } from '../../schema/schema'; +import { ProductWithQuantity, Order, Pickup } from '../../schema/schema'; function formatDate(date: string | undefined): string { if (!date) return ''; @@ -52,8 +67,18 @@ function formatDate(date: string | undefined): string { return `${month} ${day}, ${year}`; } +function formatTime(date: string | undefined): string { + if (!date) return ''; + + const hour = date.substring(11, 13); + const minute = date.substring(14, 16); + + return `${hour}:${minute}`; +} + export default function OrderPage() { const [orders, setOrders] = useState([]); + const [pickupTime, setPickupTime] = useState(); const searchParams = useSearchParams(); const orderIDFromSearch = searchParams.get('orderID'); let currOrderId = 0; @@ -63,6 +88,12 @@ export default function OrderPage() { currOrderId = 32; } + async function setUserDetails() { + const currOrder = await getOrderById(Number(orderIDFromSearch)); + const pickup = await fetchPickupTimesByID(currOrder.pickup_time_id); + setPickupTime(pickup); + } + const [order, setOrder] = useState(); useEffect(() => { @@ -75,41 +106,77 @@ export default function OrderPage() { setOrder(currOrder); } fetchProducts(); - }, []); + setUserDetails(); + }); + + function organizePickupTime() { + const startTime = pickupTime?.start_time.toLocaleString(); + + const date = + startTime == null + ? ['0', '0', '0'] + : startTime?.substring(0, 10).split('-'); + const dateStr = `${date[1]}/${date[2]}/${date[0]}`; + return `${dateStr}`; + } return (
+ + + + + + + + + {formatDate(order?.created_at)} + + + + Order No. {order?.id} + + + {orders.map(product => ( + + + {product.name} + - - - - - - {formatDate(order?.created_at)} - - {' '} - {order?.order_status}{' '} - - - - {orders.map(product => ( - - {product.name} - - {product.name} - Category: {product.category} - - - ))} - - + + {product.name} +
+ + Category: {product.category} + + + + Quantity: {product.quantity} + + + ))} + + + + + + Pickup Information + Time Slot + {organizePickupTime()} (10:00 am - 12:30 pm) + Location + 3170 23rd Street, San Francisco, CA 94110 + + + + +
); } diff --git a/src/app/orderPage/styles.ts b/src/app/orderPage/styles.ts index c2c236bb..52092ced 100644 --- a/src/app/orderPage/styles.ts +++ b/src/app/orderPage/styles.ts @@ -7,17 +7,51 @@ import NavBar from '../../components/NavBarFolder/NavBar'; export const FavoriteDiv = styled.div` display: flex; flex-direction: row; - align-items: start; - justify-content: space-around; + align-items: center; + justify-content: space-between; width: 100%; margin-bottom: 50px; margin-top: 30px; + margin-right: 20px; + margin-left: 40px; + gap: 70px; +`; + +export const BottomColumnDiv = styled.div` + display: flex; + flex-direction: row; + align-items: space-evenly; + justify-content: space-around; + width: 100%; + margin-left: 10px; + margin-bottom: 30px; + gap: 20px; +`; + +export const ScrollDiv = styled.div` + overflow: scroll; + overflow-x: hidden; + max-width: 100%; +`; + +export const ImageDiv = styled.p` + width: 150px; + height: 150px; + align-items: center; + justify-content: center; + display: flex; + margin-right: 20px; +`; + +export const LabelBox = styled.div` + width: 200px; + height: 100%; `; export const OutterFavoriteDiv = styled.div` display: flex; flex-direction: column; - align-items: center; + align-items: left; border-radius: 10px; background: var(--White, #fff); box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); @@ -25,6 +59,8 @@ export const OutterFavoriteDiv = styled.div` height: 700px; overflow: scroll; margin-top: 20px; + padding-top: 15px; + margin-left: 60px; `; export const BackDiv = styled.button` @@ -66,7 +102,9 @@ export const BackButtonDiv = styled.div` display: flex; flex-direction: row; gap: 200px; - margin-bottom: 55px; + margin-bottom: 50px; + margin-top: 50px; + margin-left: 60px; text-align: left; width: 800px; `; @@ -116,21 +154,37 @@ export const ViewItem = styled.button` border-radius: 14px; `; -export const StatusButton = styled.button` +export const StatusButton = styled.button<{ status: string }>` margin-left: auto; margin-right: 0; color: black; text-align: center; - width: 210px; + max-width: 100%; height: 30px; flex-shrink: 0; padding-top: 3px; - padding-right: 10px; - padding-left: 10px; + padding-right: 30px; + padding-left: 30px; padding-bottom: 3px; + display: flex; + gap: 15px; + flex-direction: row; + align-items: center; /* Center vertically */ + justify-content: center; border: none; border-radius: 16.5px; - background: var(--Baby-Blue, #c7ddff); + background-color: ${props => { + switch (props.status) { + case 'submitted': + return 'var(--Greyish, #E6E6E6)'; + case 'rejected': + return 'var(--Light-Red, #FDD)'; + case 'approved': + return 'var(--Lime-Green, #CEE8BE)'; + default: + return 'white'; + } + }}; `; export const Body1Bold = styled.p` @@ -139,3 +193,84 @@ export const Body1Bold = styled.p` font-weight: 600; line-height: normal; `; + +export const PageDiv = styled.div` + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + width: 100%; +`; + +export const CenterDiv = styled.div` + display: flex; + align-items: center; + justify-content: center; + width: 100%; + padding: 20px; +`; + +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 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: 52px; + margin-bottom: 30px; + margin-right: 40px; +`; + +export const RightColumnDiv = styled.div` + display: flex; + flex-flow: column; + align-items: start; + margin-left: 10px; + width: 100%; + margin-top: 8px; +`; + +export const TextDiv1 = styled.div` + display: flex; + flex-direction: row; + margin-left: 40px; + margin-top: 20px; +`; + +export const TextDiv = styled.div` + display: flex; + flex-direction: row; + margin-left: 60px; +`; + +export const TextDiv2 = styled.div` + display: flex; + flex-direction: row; + margin-left: 40px; + margin-top: 5px; + margin-bottom: 20px; +`; + +export const LeftColumnDiv = styled.div` + display: flex; + flex-flow: column; + justify-content: space-evenly; + align-items: space-evenly; + width: 100%; +`; diff --git a/src/app/orderPageDelivery/page.tsx b/src/app/orderPageDelivery/page.tsx new file mode 100644 index 00000000..07f89aaf --- /dev/null +++ b/src/app/orderPageDelivery/page.tsx @@ -0,0 +1,200 @@ +'use client'; + +import { useState, useEffect } from 'react'; +import { + fetchUser, + fetchCurrentUserAddress, +} from '@/api/supabase/queries/user_queries'; + +import { + Body1, + Body2, + Body2Light, + Heading2Bold, + Heading3Bold, +} from '@/styles/fonts'; +import { useSearchParams } from 'next/navigation'; +import { + DeliveryTimes, + fetchDeliveryTimes, +} from '@/api/supabase/queries/delivery_queries'; +import { + fetchOrderProductsbyOrderId, + getOrderById, +} from '@/api/supabase/queries/order_queries'; +import BackButton from '../../components/BackButton/BackButton'; + +import NavBar from '../../components/NavBarFolder/NavBar'; + +import { + FavoriteDiv, + OutterFavoriteDiv, + LabelBox, + ScrollDiv, + ShippingDetailsDiv, + BottomColumnDiv, + LeftColumnDiv, + RightColumnDiv, + DetailsHeader, + PageDiv, + CenterDiv, + Quantity, + StatusButton, +} from './styles'; + +import { User, Address, ProductWithQuantity, Order } from '../../schema/schema'; +import { Body1Bold } from '../orderPage/styles'; + +export default function OrderPageDelivery() { + const [orders, setOrders] = useState([]); + const searchParams = useSearchParams(); + const orderIDFromSearch = searchParams.get('orderID'); + let currOrderId = 0; + const [delivTimes, setDelivTimes] = useState([]); + + if (orderIDFromSearch !== null) { + currOrderId = parseInt(orderIDFromSearch, 10); + } else { + currOrderId = 32; + } + + const [order, setOrder] = useState(); + const [userAddress, setUserAddress] = useState
(); + const [user, setUser] = useState(); + const months = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December', + ]; + + useEffect(() => { + async function fetchProducts() { + const data = (await fetchOrderProductsbyOrderId( + currOrderId, + )) as ProductWithQuantity[]; + const currOrder = await getOrderById(currOrderId); + setOrders(data); + setOrder(currOrder); + } + + async function setUserDetails() { + const fetchedUser = await fetchUser(); + setUser(fetchedUser); + const address = await fetchCurrentUserAddress(); + setUserAddress(address); + } + async function fetchDelivTimes() { + const deliv = await fetchDeliveryTimes(); + setDelivTimes(deliv); + } + + fetchDelivTimes(); + fetchProducts(); + setUserDetails(); + }, []); + + function organizeDelivTime() { + const userGrp = user?.delivery_group == null ? 1 : user?.delivery_group; + const Time = delivTimes[userGrp]?.delivery_time.toLocaleString(); + const date = + Time == null ? ['0', '0', '0'] : Time?.substring(0, 10).split('-'); + const dateStr = `${months[parseInt(date[1], 10) - 1]} ${date[2]}, ${ + date[0] + }`; + return `${dateStr}`; + } + + function organizeOrderDate() { + const Time = order?.created_at.toLocaleString(); + const date = + Time == null ? ['0', '0', '0'] : Time?.substring(0, 10).split('-'); + const dateStr = `${months[parseInt(date[1], 10) - 1]} ${date[2]}, ${ + date[0] + }`; + return `${dateStr}`; + } + + function organizeOrderTime() { + const Time = order?.created_at.toLocaleString(); + + let ampm = 'AM'; + const date = + Time == null ? ['00', '00'] : Time?.substring(11, 16).split(':'); + + if (parseInt(date[0], 10) >= 12) { + date[0] = (parseInt(date[0], 10) - 12).toLocaleString(); + ampm = 'PM'; + } + const timeStr = `${date[0]}:${date[1]} ${ampm}`; + return `${timeStr}`; + } + + return ( +
+ + + + + + + Order No. {orderIDFromSearch} + + Order Date: {organizeOrderDate()} + Order Time: {organizeOrderTime()} + + {orders.map(product => ( + + {product.name} + + {product.name} + Category: {product.category} + + + + Quantity: {product.quantity} + + + + ))} + + + + + + {' '} + {order?.order_status}{' '} + + + Delivery Information + Estimated Date + {organizeDelivTime()} + Location + + {userAddress?.street}, {userAddress?.city},{' '} + {userAddress?.zipcode} + + + + + + +
+ ); +} diff --git a/src/app/orderPageDelivery/styles.ts b/src/app/orderPageDelivery/styles.ts new file mode 100644 index 00000000..588dc25c --- /dev/null +++ b/src/app/orderPageDelivery/styles.ts @@ -0,0 +1,265 @@ +import styled from 'styled-components'; + +import { Heart } from 'react-feather'; + +import NavBar from '../../components/NavBarFolder/NavBar'; + +export const FavoriteDiv = styled.div` + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + width: 100%; + margin-bottom: 50px; + margin-top: 30px; +`; + +export const Quantity = styled.div` + display: flex; + align-self: center; + justify-content: flex-start; + margin-right: 40px; +`; + +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` + 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: 650px; + height: auto; + max-height: 793px; + margin-top: 5px; + margin-bottom: 50px; + gap: 24px; + padding: 36px 32px; +`; + +export const ScrollDiv = styled.div` + overflow: scroll; + width: 100%; +`; + +export const BackDiv = styled.button` + display: flex; + flex-direction: row; + align: center; + color: black; + background-color: transparent; + border: transparent; + margin-bottom: 25px; + margin-top: 25px; + margin-left: 25px; + width: 100%; +`; + +export const OutterBox = styled.div` + width: 750px; + height: auto; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; +`; + +export const Backtext = styled.p` + color: var(--Black, #101010); + /* Body 1 - Bold, button */ + font-family: Public Sans; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: normal; +`; + +export const HeartIcon = styled(Heart)` + color: #333286; + width: 30px; + height: 30px; + fill: #333286; +`; + +export const TransparentButton = styled.button` + background-color: transparent; + border: transparent; +`; + +export const NavBarMovedUP = styled(NavBar)` + position: static; +`; + +export const Label = styled.p` + margin-top: 9px; +`; + +export const Category = styled.p` + margin-top: 10px; +`; + +export const LabelBox = styled.div` + width: 150px; + height: 100%; + display: flex; + align-self: center; + flex-direction: column; + gap: 9px; +`; + +export const HeaderText = styled.h3` + color: var(--Black, #101010); + margin-top: 30px; + margin-bottom: 20px; + text: center; + color: var(--Black, #101010); + font-family: Public Sans; + font-size: 35px; + font-style: normal; + font-weight: 700; + line-height: normal; +`; + +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; +`; + +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` + margin-top: 30px; + display: flex; + flex-flow: column; + justify-content: space-evenly; + align-items: space-evenly; + gap: 20px; +`; +export const RightColumnDiv = styled.div` + display: flex; + flex-flow: column; + margin-left: 20px; + margin-top: 84px; +`; + +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 StatusButton = styled.button` + margin-left: auto; + margin-right: 0; + color: black; + text-align: center; + width: 210px; + height: 30px; + flex-shrink: 0; + padding-top: 3px; + padding-right: 10px; + padding-left: 10px; + padding-bottom: 3px; + border: none; + border-radius: 16.5px; + background: var(--Baby-Blue, #c7ddff); + margin-bottom: 14px; +`; diff --git a/src/app/pickup/page.tsx b/src/app/pickup/page.tsx index 097b878e..bd8d8ea3 100644 --- a/src/app/pickup/page.tsx +++ b/src/app/pickup/page.tsx @@ -1,6 +1,9 @@ 'use client'; // import { GlobalStyle } from "@/styles/components"; + +import 'react-toastify/dist/ReactToastify.css'; +import { toast } from 'react-toastify'; import { ArrowLeft } from 'react-feather'; import { fetchUser } from '@/api/supabase/queries/user_queries'; import querystring from 'querystring'; @@ -10,8 +13,8 @@ import { totalNumberOfItemsInCart, } from '@/api/supabase/queries/cart_queries'; import { useState, useEffect } from 'react'; -import { useRouter, useSearchParams } from 'next/navigation'; -import { Heading4Bold } from '@/styles/fonts'; +import { useRouter } from 'next/navigation'; +import { Body1, Heading4Bold } from '@/styles/fonts'; import { fetchNRecentPickupTimes } from '@/api/supabase/queries/pickup_queries'; import { updateCartPickupId, @@ -36,6 +39,7 @@ import { PickupContent, PickupContainer, PickupTimeButton, + ToastPopUP, } from './styles'; function DateInfoComponent(date: { date: unknown }) { @@ -100,6 +104,12 @@ export default function PickUp() { return (
+ router.push('/cart')}> @@ -116,10 +126,22 @@ export default function PickUp() { Phone Number {Profile?.phone_numbers} -
+
Time Slot
- +
+ {' '} + Pick Up times: 10:00 AM - 12:00 PM{' '} +
+
+ Location: 3170 23rd Street, San Francisco, CA 94110 +
{Time.map(time => ( ))}
-
Pick Up times: 10:00 AM - 12:00 PM
-
Location: 3170 23rd Street, San Francisco, CA 94110
@@ -157,12 +177,13 @@ export default function PickUp() { await updateOrderStatus(orderID, OrderStatus.Submitted); await createOrder(); const newestOrder = await fetchCartIdFromUser(); - console.log(newestOrder); await updateOrderStatus(newestOrder, OrderStatus.inProgress); const queryString = querystring.stringify({ orderID }); router.push(`/orderConfirmationPickUp?${queryString}`); - } else { - // TODO handle the case where they didn't select a time! + } + if (selectedPickupIndex === 0) { + toast(`You must select a pick-up date!`); + toast.clearWaitingQueue(); } }} > diff --git a/src/app/pickup/styles.ts b/src/app/pickup/styles.ts index 35365312..af517b07 100644 --- a/src/app/pickup/styles.ts +++ b/src/app/pickup/styles.ts @@ -1,5 +1,6 @@ import styled from 'styled-components'; +import { ToastContainer } from 'react-toastify'; import COLORS from '../../styles/colors'; import NavBar from '../../components/NavBarFolder/NavBar'; @@ -263,3 +264,9 @@ export const HeaderShiftLeft = styled.h2` export const PShiftLeft = styled.p` margin-left: 15px; `; + +export const ToastPopUP = styled(ToastContainer)` + position: fixed; + z-index: 100; + transform: translatey(90px); +`; diff --git a/src/app/profileScreen/individualItem.tsx b/src/app/profileScreen/individualItem.tsx new file mode 100644 index 00000000..f5f308ee --- /dev/null +++ b/src/app/profileScreen/individualItem.tsx @@ -0,0 +1,63 @@ +import React, { useState } from 'react'; + +import { Body1Bold, Body2, Body3 } from '@/styles/fonts'; + +import { HeartIcon, Hover, FavoriteDiv, ProductNameDiv } from './styles'; + +import { addOrRemoveProductFromFavorite } from '../../api/supabase/queries/user_queries'; + +import { Product } from '../../schema/schema'; +import { TransparentButton } from '../favorites/styles'; + +export default function IndividualItem(props: { + favorite: Product; + setFavorites: (category: Product[]) => void; + Favorites: Product[]; +}) { + const { favorite, Favorites, setFavorites } = props; + const [hovering, setHovering] = useState(false); + + // useEffect(() => { + // async function changeCategory() { + // try { + // favorite.category = await convertButtonNumberToCategory( + // favorite.category, + // ); + // } catch (error) { + // // console.error(error); + // } + // } + + // changeCategory(); + // }, []); + + async function clickFunctions(props2: { fav: Product }) { + const { fav } = props2; + addOrRemoveProductFromFavorite(fav, false); + setFavorites(Favorites.filter(Prod => Prod.id !== fav.id)); + } + + return ( + + {favorite.name} + + {favorite.name} + Category: {favorite.category} + + clickFunctions({ fav: favorite })} + onMouseEnter={() => setHovering(true)} + onMouseLeave={() => setHovering(false)} + > + + Remove from favorites + + + + + ); +} diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx index 0b98511a..70584754 100644 --- a/src/app/profileScreen/page.tsx +++ b/src/app/profileScreen/page.tsx @@ -5,15 +5,15 @@ import { toast, ToastContainer } from 'react-toastify'; import { useEffect, useState } from 'react'; import { Heading2, - Body3, Heading3, Heading1, Body1Bold, Body2Bold, + Body2Light, Body2, } from '@/styles/fonts'; +import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries'; import { - addOrRemoveProductFromFavorite, arrayOfFavorites, fetchUser, fetchCurrentUserAddress, @@ -31,20 +31,19 @@ import { fetchOrderProductById, fetchProductWithQuantityById, } from '@/api/supabase/queries/order_queries'; -import { Check, CheckCircle, X, Send } from 'react-feather'; +import { Check, X, Send } from 'react-feather'; import BackButton from '../../components/BackButton/BackButton'; import { LogOutButton, NavBarMovedUP, - AccountDetails, + AccountDetailsDeliv, + AccountDetailsPickUp, HeadingBack, + Spacing, HeadingSpacing, TextSpacing, OrderHistory, FavoritesContainer, - ProductNameDiv, - FavoriteDiv, - HeartIcon, BackButtonDiv, BlankSpace, HeaderDiv, @@ -56,18 +55,13 @@ import { } from './styles'; import { signOut } from '../../api/supabase/auth/auth'; import 'react-toastify/dist/ReactToastify.css'; -import { TransparentButton } from '../favorites/styles'; +import IndividualItem from './individualItem'; function FavoriteSection(props: { Favorites: Product[]; setFavorites: (category: Product[]) => void; }) { const { Favorites, setFavorites } = props; - async function clickFunctions(props2: { fav: Product }) { - const { fav } = props2; - addOrRemoveProductFromFavorite(fav, false); - setFavorites(Favorites.filter(Prod => Prod.id !== fav.id)); - } if (Favorites.length > 0) { return (
@@ -77,25 +71,12 @@ function FavoriteSection(props: { {Favorites.slice(0, 2).map(favorite => ( - - {favorite.name} - -

- {favorite.name} -
- Product ID: {favorite.id} -

- - clickFunctions({ fav: favorite })} - > - - - + ))}
@@ -206,13 +187,13 @@ function OrderHistorySection(props: { Orders: Order[] }) { > Order No. {Orders[0].id} - {fD} - +
{icon} @@ -287,38 +268,37 @@ function AccountDetailSectionDelivery(props: { user: User }) { }, []); return (
- + Account Details Name - + {user?.first_name} {user?.last_name} - + Email - {user?.email} + {user?.email} - Phone - {user?.phone_numbers} + {user?.phone_numbers} Address - + {UserAddress?.street}, {UserAddress?.city}, {UserAddress?.zipcode} - + - +
); } @@ -327,7 +307,7 @@ function AccountDetailSectionPickUp(props: { user: User }) { return (
- + Account Details @@ -351,7 +331,7 @@ function AccountDetailSectionPickUp(props: { user: User }) { {user?.phone_numbers} - +
); } @@ -383,11 +363,6 @@ export default function Profile() { const [Orders, setOrder] = useState([]); - async function fetchProducts() { - const data = (await arrayOfFavorites()) as Product[]; - setFavorites(data); - } - async function fetchOrders() { const data = (await fetchOrdersByUserIdSorted()) as Order[]; setOrder(data); @@ -397,11 +372,25 @@ export default function Profile() { const data = await fetchUser(); setUser(data); } + async function fetchProducts() { + const data = (await arrayOfFavorites()) as Product[]; + const mapCategories = await Promise.all( + data.map(async product => { + const updateCategory = await convertButtonNumberToCategory( + product.category, + ); + return { ...product, category: updateCategory }; + }), + ); + setFavorites(mapCategories); + } + useEffect(() => { fetchProducts(); fetchOrders(); getUser(); }, []); + if (user === undefined) { return

Loading User

; } diff --git a/src/app/profileScreen/styles.ts b/src/app/profileScreen/styles.ts index 1ee1f70b..8f0e4090 100644 --- a/src/app/profileScreen/styles.ts +++ b/src/app/profileScreen/styles.ts @@ -21,9 +21,8 @@ export const HeadingBack = styled.div` margin-right: 75px; `; -export const AccountDetails = styled.div` - margin-top: 50px; - margin-right: 30px; +export const AccountDetailsDeliv = styled.div` + margin-top: 40px; width: 500px; height: 350px; border-radius: 10px; @@ -35,25 +34,41 @@ export const AccountDetails = styled.div` padding-top: 29px; padding-right: 29px; padding-left: 29px; - padding-bottom: 29px; + padding-bottom: 32px; +`; + +export const AccountDetailsPickUp = styled.div` + margin-top: 40px; + width: 500px; + height: 310px; + border-radius: 10px; + background: ${COLORS.white}; + box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); + display: flex; + flex-direction: column; + align-items: left; + padding-top: 29px; + padding-right: 29px; + padding-left: 29px; + padding-bottom: 32px; + margin-bottom: 40px; `; export const OrderHistory = styled.div` - margin-top: 50px; + margin-top: 40px; width: 600px; height: 350px; border-radius: 10px; background: ${COLORS.white}; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); - padding-top: 23px; - padding-right: 23px; - padding-left: 23px; - padding-bottom: 23px; + padding-top: 29px; + padding-right: 29px; + padding-left: 29px; + padding-bottom: 29px; + margin-left: 60px; `; export const FavoritesContainer = styled.div` - margin-top: 50px; - width: 600px; height: 350px; border-radius: 10px; @@ -63,6 +78,8 @@ export const FavoritesContainer = styled.div` padding-right: 23px; padding-left: 23px; padding-bottom: 23px; + margin-left: 30px; + margin-top: 40px; `; export const LogOutButton = styled.button` @@ -75,6 +92,7 @@ export const LogOutButton = styled.button` font-weight: 600; line-height: normal; border: transparent; + border-radius: 5px; width: 405px; height: 50px; @@ -100,7 +118,7 @@ export const FavoriteDiv = styled.div` align-items: center; justify-content: space-around; width: 100%; - margin-bottom: 50px; + margin-bottom: 20px; margin-top: 30px; `; @@ -109,11 +127,28 @@ export const HeartIcon = styled(Heart)` width: 25px; height: 25px; fill: #333286; + margin-bottom: 40px; +`; + +export const Hover = styled.div<{ $ishovering?: boolean }>` + visibility: ${props => (props.$ishovering ? 'visible' : 'hidden')}; + transform: translate(0px, -1px); + margin-bottom: 7px; + color: black; + border: none; + width: 156px; + height: 26px; + border-radius: 8px; + background: var(--Light-Periwinkle, #f4f7ff); + box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.2); + padding-top: 6px; + position: relative; + text-align: center; `; export const BackButtonDiv = styled.div` - margin-bottom: 30px; margin-top: 50px; + margin-bottom: 40px; `; export const HeaderDiv = styled.div` @@ -128,6 +163,11 @@ export const ProductNameDiv = styled.div` width: 250px; `; +export const Spacing = styled.div` + height: 10px; + width: 100%; +`; + export const BlankSpace = styled.div` width: 250px; height: 200px; @@ -151,12 +191,12 @@ export const ColumnDiv = styled.div` `; export const LogOutDiv = styled.div` - margin-top: 50px; margin-right: 30px; display: flex; justify-content: center; width: 500px; height: 350px; + margin-top: 40px; `; export const MessageDiv = styled.div` diff --git a/src/app/storefront/productButtons.tsx b/src/app/storefront/productButtons.tsx index 076e25a4..23b99371 100644 --- a/src/app/storefront/productButtons.tsx +++ b/src/app/storefront/productButtons.tsx @@ -68,7 +68,6 @@ export default function ProductButtons(props: { // Applying the filter to the categories of the product if (category !== 'All') { - console.log(category); const products = await filterUserProducts(category); if (products !== null) { setFiltredProducts(products); diff --git a/src/components/BackButton/BackButton.tsx b/src/components/BackButton/BackButton.tsx index bff2d899..d639e431 100644 --- a/src/components/BackButton/BackButton.tsx +++ b/src/components/BackButton/BackButton.tsx @@ -1,4 +1,4 @@ -import { Body1Bold } from '@/styles/fonts'; +import { Body2Bold } from '@/styles/fonts'; import { BackLink, ArrowLeftIcon } from './styles'; export default function BackButton(props: { destination: string }) { @@ -6,7 +6,7 @@ export default function BackButton(props: { destination: string }) { return ( - Back + Back ); } diff --git a/src/components/BackButton/styles.ts b/src/components/BackButton/styles.ts index 4abb943e..34fe39e8 100644 --- a/src/components/BackButton/styles.ts +++ b/src/components/BackButton/styles.ts @@ -9,14 +9,13 @@ export const BackLink = styled(Link)` align-items: center; justify-content: space-between; color: ${COLORS.black}; - width: 75px; - + width: 60px; &:hover { text-decoration: underline; } `; export const ArrowLeftIcon = styled(ArrowLeft)` - width: 20px; - height: 20px; + width: 18px; + height: 18px; `; diff --git a/src/components/FooterFolder/Footer.tsx b/src/components/FooterFolder/Footer.tsx index 45fa2c42..bb9714ef 100644 --- a/src/components/FooterFolder/Footer.tsx +++ b/src/components/FooterFolder/Footer.tsx @@ -23,105 +23,103 @@ import { ArrowUpRightIcon, } from './styles'; -export default function Footer({ ...rest }) { +export default function Footer() { const router = useRouter(); return ( -
- - - Contact Us - Phone: (415) 674-4700 - - { - window.location.href = - 'https://www.facebook.com/ShantiProjectSF/'; - }} - > - - - - - { - window.location.href = - 'https://www.youtube.com/channel/UCc3DMrL7_KDOzeJNVkoFrsA'; - }} - > - - - - - { - window.location.href = - 'https://www.instagram.com/shantiprojectsf/'; - }} - > - - - - - - - - - Mission District - - 3170 23rd Street - San Francisco, CA 94110 - - - { - window.location.href = - 'https://maps.app.goo.gl/LJWvkdhwrRMhjEZs7'; - }} - > - SEE ON MAP - - - - - - - + + Contact Us + Phone: (415) 674-4700 + + { + window.location.href = + 'https://www.facebook.com/ShantiProjectSF/'; + }} + > + + + + + router.push('/storefront')} + onClick={() => { + window.location.href = + 'https://www.youtube.com/channel/UCc3DMrL7_KDOzeJNVkoFrsA'; + }} > - Shop - - + + + + router.push('/profileScreen')} + onClick={() => { + window.location.href = + 'https://www.instagram.com/shantiprojectsf/'; + }} > - Profile - - + + + + + + + + Mission District + + 3170 23rd Street + San Francisco, CA 94110 + + + router.push('/cart')} + onClick={() => { + window.location.href = + 'https://maps.app.goo.gl/LJWvkdhwrRMhjEZs7'; + }} > - Cart - - + SEE ON MAP + + + + + + + router.push('/storefront')} + > + Shop + + router.push('/profileScreen')} + > + Profile + + router.push('/cart')} + > + Cart + + - logo pic - -
+ logo pic + ); } diff --git a/src/components/FooterFolder/styles.ts b/src/components/FooterFolder/styles.ts index 1829fe3f..98701886 100644 --- a/src/components/FooterFolder/styles.ts +++ b/src/components/FooterFolder/styles.ts @@ -119,7 +119,8 @@ export const SVGWrapper = styled.div` `; export const Wrapper = styled.div` - min-height: 100%; /*or 100vh */ + min-height: 100%; + width: 100%; position: relative; background: var(--Light-Periwinkle, #f4f7ff); display: flex; diff --git a/src/components/InputFieldsFolder/styles.ts b/src/components/InputFieldsFolder/styles.ts index aad7eb73..2fa8ed20 100644 --- a/src/components/InputFieldsFolder/styles.ts +++ b/src/components/InputFieldsFolder/styles.ts @@ -4,7 +4,7 @@ import COLORS from '../../styles/colors'; export const Input1 = styled.input<{ $pickColor?: boolean }>` color: ${props => (props.$pickColor ? '#203354' : COLORS.black)}; - background: ${props => (props.$pickColor ? '#ADD8E6' : COLORS.white)}; + background: ${props => (props.$pickColor ? '#ADD8E6' : COLORS.lightGrey)}; stroke-width: 1px; width: 420px; height: 40px; @@ -31,8 +31,9 @@ export const Input = styled.input<{ stroke-width: 1px; color: ${COLORS.black}; border: 1.5px solid - ${props => (props.$wrongLogin ? COLORS.darkRed : COLORS.black)}; - background: ${props => (props.$pickColor ? COLORS.lightRed : COLORS.white)}; + ${props => (props.$wrongLogin ? COLORS.darkRed : COLORS.neutralGrey)}; + background: ${props => + props.$pickColor ? COLORS.lightRed : COLORS.lightGrey}; width: 420px; height: 40px; padding-left: 10px; diff --git a/src/components/OrderHistory/OrderHistoryText.tsx b/src/components/OrderHistory/OrderHistoryText.tsx index 3c109481..34200de5 100644 --- a/src/components/OrderHistory/OrderHistoryText.tsx +++ b/src/components/OrderHistory/OrderHistoryText.tsx @@ -1,8 +1,9 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { useRouter } from 'next/navigation'; import querystring from 'querystring'; -import { Heading4Bold, Body1, OrderStatusFont } from '@/styles/fonts'; +import { Heading4Bold, Body1, OrderStatusFont, Body2 } from '@/styles/fonts'; +import { fetchUser } from '@/api/supabase/queries/user_queries'; import { ViewOrderButton, ArrowIcon, @@ -11,7 +12,7 @@ import { OrderStatusApprovedDiv, CrossStyled, OrderStatusSubmittedDiv, - LoaderStyled, + SendStyle, } from './styles'; // Adjust the import path as necessary import { Order, OrderStatus } from '../../schema/schema'; @@ -34,11 +35,25 @@ interface OrderDetailsProps { export default function OrderDetails(props: OrderDetailsProps) { const { date, orderNumber, order } = props; const router = useRouter(); + const [deliveryEnabled, setDeliveryEnabled] = useState(false); - const viewOrder = (orderID: string) => { + useEffect(() => { + async function fetchDelivery() { + const data = await fetchUser(); + setDeliveryEnabled(data.delivery_allowed); + } + + fetchDelivery(); + }, []); + + async function viewOrder(orderID: string) { const queryString = querystring.stringify({ orderID }); - router.push(`/orderPage?${queryString}`); - }; + if (deliveryEnabled) { + router.push(`/orderPageDelivery?${queryString}`); + } else { + router.push(`/orderPage?${queryString}`); + } + } if (order.order_status === OrderStatus.Rejected) { return (
Order No. {orderNumber} viewOrder(orderNumber)}> - View Order + View Order
@@ -102,7 +117,7 @@ export default function OrderDetails(props: OrderDetailsProps) { > Order No. {orderNumber} viewOrder(orderNumber)}> - View Order + View Order
@@ -143,7 +158,7 @@ export default function OrderDetails(props: OrderDetailsProps) { > Order No. {orderNumber} viewOrder(orderNumber)}> - View Order + View Order
@@ -156,7 +171,7 @@ export default function OrderDetails(props: OrderDetailsProps) { {formatDate(date)} - + Order Submitted
diff --git a/src/components/OrderHistory/styles.ts b/src/components/OrderHistory/styles.ts index fec7e6c7..2bb0093f 100644 --- a/src/components/OrderHistory/styles.ts +++ b/src/components/OrderHistory/styles.ts @@ -1,6 +1,6 @@ // styles.ts import styled from 'styled-components'; -import { X, Check, Loader } from 'react-feather'; +import { X, Check, Send } from 'react-feather'; import COLORS from '../../styles/colors'; export const containerStyle = styled.div` @@ -165,8 +165,21 @@ export const GalleryImage = styled.img` export const RowDiv = styled.div` width: 700px; +<<<<<<< HEAD height: 300px; margin-bottom: 20px; +======= + height: 400px; + margin-bottom: 20px; + margin-top: 20px; +<<<<<<< HEAD +>>>>>>> b287da7 (temp) +======= +<<<<<<< HEAD +>>>>>>> b287da7 (temp) +======= +>>>>>>> b287da70273f0befb5c5c6b437883b203f43b605 +>>>>>>> 0c497ffa604d1a861f8fac67277446b2133764a5 `; export const OrderStatusDiv = styled.div` @@ -194,7 +207,7 @@ export const OrderStatusApprovedDiv = styled.div` export const OrderStatusSubmittedDiv = styled.div` width: 300px; height: 35px; - background: var(--Baby-Blue, #c7ddff); + background: var(--Greyish, #e6e6e6); display: flex; justify-content: center; align-items: center; @@ -212,7 +225,7 @@ export const CheckStyled = styled(Check)` margin-right: 10px; `; -export const LoaderStyled = styled(Loader)` +export const SendStyle = styled(Send)` stroke-width: 3px; margin-right: 10px; `; diff --git a/src/components/OrderSummaryFolder/OrderSummary.tsx b/src/components/OrderSummaryFolder/OrderSummary.tsx index 07f03669..9cf046cc 100644 --- a/src/components/OrderSummaryFolder/OrderSummary.tsx +++ b/src/components/OrderSummaryFolder/OrderSummary.tsx @@ -1,6 +1,6 @@ 'use client'; -import { Body1, Body2, Heading2Bold, Body1Bold } from '@/styles/fonts'; +import { Body1, Heading2Bold, Body1Bold, Body2Light } from '@/styles/fonts'; import { OrderSummaryDiv, HeaderShiftRight, @@ -24,8 +24,8 @@ export default function OrderSummary(props: { Order Summary - Product Name - Qty. + PRODUCT NAME + QTY {cart.map(cartItem => ( diff --git a/src/components/OrderSummaryFolder/styles.ts b/src/components/OrderSummaryFolder/styles.ts index e90a18ef..16fd4a3f 100644 --- a/src/components/OrderSummaryFolder/styles.ts +++ b/src/components/OrderSummaryFolder/styles.ts @@ -1,3 +1,4 @@ +import COLORS from '@/styles/colors'; import styled from 'styled-components'; export const OrderSummaryDiv = styled.div` @@ -37,6 +38,10 @@ export const WhiteBackgroundDiv = styled.div` width: 350px; padding: 20px; box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1); + display: flex; + justify-content: center; + align-items: flex-start; + flex-direction: column; `; export const HeaderShiftRight = styled.h2` @@ -57,7 +62,8 @@ export const OrderSummaryHeaderDiv = styled.div` justify-content: space-between; align-items: center; flex-direction: row; - margin-bottom: 10px; + margin-bottom: 15px; + color: ${COLORS.marineBlue}; `; export const ItemNameDiv = styled.div` diff --git a/src/components/ViewAllButton/ViewAllButton.tsx b/src/components/ViewAllButton/ViewAllButton.tsx index a5a574f4..2298c75a 100644 --- a/src/components/ViewAllButton/ViewAllButton.tsx +++ b/src/components/ViewAllButton/ViewAllButton.tsx @@ -1,15 +1,14 @@ import Link from 'next/link'; -import { ArrowRight } from 'react-feather'; -import { Body1Point5 } from '@/styles/fonts'; -import { ViewAllDiv } from './styles'; +import { Body2 } from '@/styles/fonts'; +import { ArrowRightIcon, ViewAllDiv } from './styles'; export default function BackButton(props: { destination: string }) { const { destination } = props; return ( - View All - + View All + ); diff --git a/src/components/ViewAllButton/styles.ts b/src/components/ViewAllButton/styles.ts index 248778df..c77c4441 100644 --- a/src/components/ViewAllButton/styles.ts +++ b/src/components/ViewAllButton/styles.ts @@ -1,7 +1,10 @@ import styled from 'styled-components'; +import { ArrowRight } from 'react-feather'; import COLORS from '../../styles/colors'; export const ViewAllDiv = styled.div` + width: 80px; + gap: 5px; display: flex; align-items: center; color: ${COLORS.black}; @@ -13,3 +16,8 @@ export const ViewAllDiv = styled.div` `; export const placeHolder = ''; + +export const ArrowRightIcon = styled(ArrowRight)` + width: 20px; + height: 20px; +`;