From 83a7d693adb50fc3f475d718c62fadb250f702a9 Mon Sep 17 00:00:00 2001 From: Buyankhuu Tsolmonkhuu Date: Wed, 17 Apr 2024 14:03:39 -0700 Subject: [PATCH 1/9] new branch --- src/app/orderConfirmationPickUp/page.tsx | 26 ++++++++++++----------- src/app/orderConfirmationPickUp/styles.ts | 16 +++++++------- 2 files changed, 22 insertions(+), 20 deletions(-) diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx index 871a0e1e..7cde8b21 100644 --- a/src/app/orderConfirmationPickUp/page.tsx +++ b/src/app/orderConfirmationPickUp/page.tsx @@ -9,41 +9,44 @@ import { getOrderById, } from '@/api/supabase/queries/order_queries'; import { + Body2Bold, + Body2, + Heading3Bold, Body1, Body1Bold, - Body2Light, - Heading3Bold, Heading4Bold, + Body2Light, } from '@/styles/fonts'; +import { fetchCartItemsWithQuantity } from '../../api/supabase/queries/cart_queries'; 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, + ColDiv, OutterFavoriteDiv, + TextDiv1, + OutterBox, + Label, LabelBox, - LabelBox1, ScrollDiv, ShippingDetailsDiv, ImageDiv, BottomColumnDiv, - Wrapper, + LabelBox1, LeftColumnDiv, RightColumnDiv, DetailsHeader, 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([]); const [user, setUser] = useState(); @@ -95,10 +98,9 @@ export default function OrderConfirmationPickUp() { Your order has been submitted - - Order No. {orderIDFromSearch} + Order No. {user?.cart_id} {Cart.map(cartItem => ( diff --git a/src/app/orderConfirmationPickUp/styles.ts b/src/app/orderConfirmationPickUp/styles.ts index d142d103..32b850c6 100644 --- a/src/app/orderConfirmationPickUp/styles.ts +++ b/src/app/orderConfirmationPickUp/styles.ts @@ -26,9 +26,8 @@ export const OutterFavoriteDiv = styled.div` max-height: 100%; margin-top: 20px; margin-right: 60px; - margin-left: 60px; - padding-right: 20px; - padding-left: 10px; + margin-left: 40px; + padding-right: 15px; padding-top: 10px; `; @@ -232,7 +231,6 @@ export const RightColumnDiv = styled.div` display: flex; flex-flow: column; align-items: start; - margin-left: 10px; width: 100%; `; @@ -241,7 +239,7 @@ export const BackButtonDiv = styled.div` flex-direction: row; text-align: left; width: 800px; - margin-left: 80px; + margin-left: 60px; margin-bottom: 40px; `; @@ -261,6 +259,7 @@ export const BottomColumnDiv = styled.div` justify-content: space-around; width: 100%; margin-left: 20px; + margin-right: 20px; margin-bottom: 30px; gap: 30px; `; @@ -268,7 +267,7 @@ export const BottomColumnDiv = styled.div` export const TextDiv = styled.div` display: flex; flex-direction: row; - margin-left: 60px; + margin-left: 40px; margin-top: 20px; margin-bottom: 20px; `; @@ -287,6 +286,7 @@ export const PageDiv = styled.div` justify-content: flex-start; align-items: flex-start; width: 100%; + margin-bottom: 40px; `; export const ShippingDetailsDiv = styled.div` @@ -296,7 +296,7 @@ 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; @@ -322,4 +322,4 @@ export const CenterDiv = styled.div` justify-content: center; width: 100%; padding: 20px; -`; +`; \ No newline at end of file From 3add398b5ac281677719a58e5ca2eeb4fc8d3c17 Mon Sep 17 00:00:00 2001 From: CharlotteLaw Date: Thu, 18 Apr 2024 15:50:09 -0700 Subject: [PATCH 2/9] temp --- src/app/orderConfirmationPickUp/page.tsx | 7 +++- src/app/orderConfirmationPickUp/styles.ts | 47 +++++++++++++++-------- 2 files changed, 35 insertions(+), 19 deletions(-) diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx index 7cde8b21..0a448c5c 100644 --- a/src/app/orderConfirmationPickUp/page.tsx +++ b/src/app/orderConfirmationPickUp/page.tsx @@ -17,8 +17,9 @@ import { Heading4Bold, Body2Light, } from '@/styles/fonts'; -import { fetchCartItemsWithQuantity } from '../../api/supabase/queries/cart_queries'; import { useSearchParams } from 'next/navigation'; + + import BackButton from '../../components/BackButton/BackButton'; import NavBar from '../../components/NavBarFolder/NavBar'; @@ -39,6 +40,7 @@ import { LeftColumnDiv, RightColumnDiv, DetailsHeader, + Wrapper2, PageDiv, CenterDiv, BackButtonDiv, @@ -47,6 +49,7 @@ import { import { Product, User, Pickup } from '../../schema/schema'; import { fetchCartItemsWithQuantityByID } from '../../api/supabase/queries/cart_queries'; + export default function OrderConfirmationPickUp() { const [Cart, setCart] = useState([]); const [user, setUser] = useState(); @@ -76,7 +79,6 @@ export default function OrderConfirmationPickUp() { function organizePickupTime() { const startTime = pickupTime?.start_time.toLocaleString(); - const endTime = pickupTime?.end_time.toLocaleString(); const date = startTime == null ? ['0', '0', '0'] @@ -138,6 +140,7 @@ export default function OrderConfirmationPickUp() { + diff --git a/src/app/orderConfirmationPickUp/styles.ts b/src/app/orderConfirmationPickUp/styles.ts index 32b850c6..255792de 100644 --- a/src/app/orderConfirmationPickUp/styles.ts +++ b/src/app/orderConfirmationPickUp/styles.ts @@ -9,10 +9,10 @@ export const FavoriteDiv = styled.div` flex-direction: row; align-items: center; justify-content: space-between; - width: 100%; + width: 750px; margin-bottom: 50px; margin-top: 30px; - margin-right: 20px; + margin-right: 10px; `; export const OutterFavoriteDiv = styled.div` @@ -22,18 +22,19 @@ export const OutterFavoriteDiv = styled.div` border-radius: 10px; background: var(--White, #fff); box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); - width: 800px; max-height: 100%; + max-width: 750px; margin-top: 20px; - margin-right: 60px; - margin-left: 40px; - padding-right: 15px; - padding-top: 10px; + margin-right: 10px; + margin-left: 20px; + padding-right: 7px; + padding-top: 7px; `; export const ScrollDiv = styled.div` overflow: scroll; - width: 100%; + overflow-x: hidden; + max-width: 100%; `; export const ImageDiv = styled.div` @@ -225,13 +226,13 @@ export const LeftColumnDiv = styled.div` flex-flow: column; justify-content: space-evenly; align-items: space-evenly; - width: 100%; + width: 800px; `; export const RightColumnDiv = styled.div` display: flex; flex-flow: column; - align-items: start; - width: 100%; + align-items: left; + width: 475px; `; export const BackButtonDiv = styled.div` @@ -239,8 +240,9 @@ export const BackButtonDiv = styled.div` flex-direction: row; text-align: left; width: 800px; - margin-left: 60px; + margin-left: 40px; margin-bottom: 40px; + margin-top: 20px; `; export const WhiteBackgroundDiv = styled.div` @@ -252,6 +254,14 @@ 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,15 +271,15 @@ export const BottomColumnDiv = styled.div` 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: 40px; - margin-top: 20px; - margin-bottom: 20px; + margin-left: 20px; + margin-top: 10px; + margin-bottom: 10px; `; export const TextDiv1 = styled.div` @@ -286,10 +296,12 @@ 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` + display: flex; flex-direction: column; align-items: flex-start; @@ -302,7 +314,7 @@ export const ShippingDetailsDiv = styled.div` padding: 36px 34px; gap: 33px; max-height: 100%; - margin-top: 93px; + margin-top: 75px; margin-bottom: 30px; margin-right: 40px; `; @@ -320,6 +332,7 @@ export const CenterDiv = styled.div` display: flex; align-items: center; justify-content: center; + position: relative; width: 100%; padding: 20px; `; \ No newline at end of file From b287da70273f0befb5c5c6b437883b203f43b605 Mon Sep 17 00:00:00 2001 From: CharlotteLaw Date: Sun, 21 Apr 2024 14:33:11 -0700 Subject: [PATCH 3/9] temp --- src/app/orderConfirmationPickUp/page.tsx | 12 +- src/app/orderConfirmationPickUp/styles.ts | 23 ++- src/app/orderHistory/page.tsx | 7 +- src/app/orderHistory/styles.ts | 16 +- src/app/orderPage/page.tsx | 122 +++++++++++---- src/app/orderPage/styles.ts | 146 ++++++++++++++++-- src/app/profileScreen/page.tsx | 47 +++--- src/app/profileScreen/styles.ts | 55 +++++-- src/components/BackButton/BackButton.tsx | 4 +- src/components/BackButton/styles.ts | 7 +- .../OrderHistory/OrderHistoryText.tsx | 13 +- src/components/OrderHistory/styles.ts | 9 +- .../ViewAllButton/ViewAllButton.tsx | 9 +- src/components/ViewAllButton/styles.ts | 9 ++ 14 files changed, 363 insertions(+), 116 deletions(-) diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx index 94d72e70..8400dd97 100644 --- a/src/app/orderConfirmationPickUp/page.tsx +++ b/src/app/orderConfirmationPickUp/page.tsx @@ -4,6 +4,7 @@ import { useState, useEffect } from 'react'; import { fetchUser } from '@/api/supabase/queries/user_queries'; import { fetchPickupTimesByID } from '@/api/supabase/queries/pickup_queries'; +import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries'; import { fetchCurrentOrdersByUser, getOrderById, @@ -34,13 +35,11 @@ import { LabelBox, ScrollDiv, ShippingDetailsDiv, - ImageDiv, BottomColumnDiv, - LabelBox1, LeftColumnDiv, RightColumnDiv, DetailsHeader, - Wrapper2, + ImageDiv, PageDiv, CenterDiv, BackButtonDiv, @@ -57,10 +56,13 @@ export default function OrderConfirmationPickUp() { const searchParams = useSearchParams(); const orderIDFromSearch = searchParams.get('orderID'); + useEffect(() => { async function fetchProducts() { + const cartItems = (await fetchCartItemsWithQuantityByID( orderIDFromSearch, + )) as Product[]; setCart(cartItems); } @@ -117,13 +119,13 @@ export default function OrderConfirmationPickUp() { }} /> - + {cartItem.name}
Category: {cartItem.category} - +
+ - 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 9b2e322a..5bbdb6b1 100644 --- a/src/app/orderHistory/styles.ts +++ b/src/app/orderHistory/styles.ts @@ -12,22 +12,36 @@ 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: 900px; margin: 0 auto; // This will center the OutterBox `; export const OrderHistoryContainer = styled.div` + display: flex; flex-direction: column; align-items: center; border-radius: 10px; background: var(--White, #fff); + background-color: pink; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); width: 800px; // Width of the outer box height: 700px; overflow: scroll; - margin-top: 10px; + margin-top: 20px; + margin-bottom: 50px; padding: 0; // Ensure there's no padding pushing the internal boxes inward `; diff --git a/src/app/orderPage/page.tsx b/src/app/orderPage/page.tsx index 6d2d0fd9..3f990351 100644 --- a/src/app/orderPage/page.tsx +++ b/src/app/orderPage/page.tsx @@ -1,7 +1,8 @@ 'use client'; import { useState, useEffect } from 'react'; -import { Body1, Body2 } from '@/styles/fonts'; +import { Check, X, Send } from 'react-feather'; +import { Body1, Body2Light, Heading3Bold, Heading4Bold, Body2, Heading2, Body1Bold } from '@/styles/fonts'; import { useSearchParams } from 'next/navigation'; import BackButton from '../../components/BackButton/BackButton'; @@ -14,13 +15,23 @@ import NavBar from '../../components/NavBarFolder/NavBar'; import { FavoriteDiv, - Body1Bold, OutterFavoriteDiv, BackButtonDiv, + DetailsHeader, + RightColumnDiv, + TextDiv, + TextDiv1, OutterBox, OutterDiv, - Heading, + ImageDiv, + BottomColumnDiv, + ShippingDetailsDiv, + LabelBox, + LeftColumnDiv, + ScrollDiv, ProductNameDiv, + PageDiv, + CenterDiv, StatusButton, } from './styles'; @@ -76,40 +87,87 @@ export default function OrderPage() { } fetchProducts(); }, []); + + const status = order?.order_status?.toLowerCase() || 'default'; return (
+ + + + + + + + + {formatDate(order?.created_at)} + + + + Order No. {order?.cart_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 + Location + 3170 23rd Street, San Francisco, CA 94110 + + + + + +
); } + + + diff --git a/src/app/orderPage/styles.ts b/src/app/orderPage/styles.ts index c2c236bb..122fc5fe 100644 --- a/src/app/orderPage/styles.ts +++ b/src/app/orderPage/styles.ts @@ -5,16 +5,50 @@ import { Heart } from 'react-feather'; import NavBar from '../../components/NavBarFolder/NavBar'; export const FavoriteDiv = styled.div` +display: flex; +flex-direction: row; +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: start; + align-items: space-evenly; justify-content: space-around; width: 100%; - margin-bottom: 50px; - margin-top: 30px; + margin-left: 10px; + margin-bottom: 30px; + gap: 10px; `; -export const OutterFavoriteDiv = styled.div` +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; @@ -25,6 +59,7 @@ export const OutterFavoriteDiv = styled.div` height: 700px; overflow: scroll; margin-top: 20px; + padding-top: 15px; `; export const BackDiv = styled.button` @@ -66,7 +101,8 @@ export const BackButtonDiv = styled.div` display: flex; flex-direction: row; gap: 200px; - margin-bottom: 55px; + margin-bottom: 50px; + margin-top: 50px; text-align: left; width: 800px; `; @@ -116,26 +152,116 @@ 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` font-size: 16px; font-style: normal; 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: 93px; + margin-bottom: 30px; + margin-right: 40px; +`; + +export const RightColumnDiv = styled.div` + display: flex; + flex-flow: column; + align-items: start; + margin-left: 10px; + width: 100%; +`; + +export const TextDiv1 = styled.div` + display: flex; + flex-direction: row; + margin-top: 20px; +`; + +export const TextDiv = styled.div` + display: flex; + flex-direction: row; + margin-left: 60px; + margin-top: 20px; + margin-bottom: 20px; +`; + +export const LeftColumnDiv = styled.div` + display: flex; + flex-flow: column; + justify-content: space-evenly; + align-items: space-evenly; + width: 100%; +`; \ No newline at end of file diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx index 0b98511a..6a46952f 100644 --- a/src/app/profileScreen/page.tsx +++ b/src/app/profileScreen/page.tsx @@ -10,6 +10,7 @@ import { Heading1, Body1Bold, Body2Bold, + Body2Light, Body2, } from '@/styles/fonts'; import { @@ -36,8 +37,10 @@ import BackButton from '../../components/BackButton/BackButton'; import { LogOutButton, NavBarMovedUP, - AccountDetails, + AccountDetailsDeliv, + AccountDetailsPickUp, HeadingBack, + Spacing, HeadingSpacing, TextSpacing, OrderHistory, @@ -81,14 +84,15 @@ function FavoriteSection(props: { {favorite.name} -

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

+ + {favorite.name} + + + Category: {favorite.category} + clickFunctions({ fav: favorite })} @@ -206,13 +210,13 @@ function OrderHistorySection(props: { Orders: Order[] }) { > Order No. {Orders[0].id} - {fD} - +
{icon} @@ -287,38 +291,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 +330,7 @@ function AccountDetailSectionPickUp(props: { user: User }) { return (
- + Account Details @@ -351,7 +354,7 @@ function AccountDetailSectionPickUp(props: { user: User }) { {user?.phone_numbers} - +
); } @@ -433,7 +436,7 @@ export default function Profile() { - + diff --git a/src/app/profileScreen/styles.ts b/src/app/profileScreen/styles.ts index 884f01b1..8b5acb0b 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,9 +92,10 @@ export const LogOutButton = styled.button` font-weight: 600; line-height: normal; border: transparent; - border-radius: 5px; - width: 405px; - height: 70px; + border-radius: 10px; + width: 500px; + height: 55px; + margin-top: 40px; `; /* transform: translateY(200px); */ @@ -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; `; @@ -112,6 +130,7 @@ export const HeartIcon = styled(Heart)` `; export const BackButtonDiv = styled.div` + margin-top: 50px; margin-bottom: 40px; `; @@ -127,6 +146,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; @@ -150,7 +174,6 @@ export const ColumnDiv = styled.div` `; export const LogOutDiv = styled.div` - margin-top: 50px; margin-right: 30px; display: flex; justify-content: center; diff --git a/src/components/BackButton/BackButton.tsx b/src/components/BackButton/BackButton.tsx index 11722ab4..563910c8 100644 --- a/src/components/BackButton/BackButton.tsx +++ b/src/components/BackButton/BackButton.tsx @@ -1,4 +1,4 @@ -import { Body1 } from '@/styles/fonts'; +import { Body1, 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 82155a18..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; - gap: 5px; + width: 60px; &:hover { text-decoration: underline; } `; export const ArrowLeftIcon = styled(ArrowLeft)` - width: 24px; - height: 24px; + width: 18px; + height: 18px; `; diff --git a/src/components/OrderHistory/OrderHistoryText.tsx b/src/components/OrderHistory/OrderHistoryText.tsx index 3c109481..d2c1d1b7 100644 --- a/src/components/OrderHistory/OrderHistoryText.tsx +++ b/src/components/OrderHistory/OrderHistoryText.tsx @@ -1,8 +1,9 @@ import React from 'react'; import { useRouter } from 'next/navigation'; +import { Check, CheckCircle, X, Send } from 'react-feather'; import querystring from 'querystring'; -import { Heading4Bold, Body1, OrderStatusFont } from '@/styles/fonts'; +import { Heading4Bold, Body1, Body2, OrderStatusFont } from '@/styles/fonts'; 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'; @@ -61,7 +62,7 @@ export default function OrderDetails(props: OrderDetailsProps) { > Order No. {orderNumber} viewOrder(orderNumber)}> - View Order + View Order
@@ -102,7 +103,7 @@ export default function OrderDetails(props: OrderDetailsProps) { > Order No. {orderNumber} viewOrder(orderNumber)}> - View Order + View Order
@@ -143,7 +144,7 @@ export default function OrderDetails(props: OrderDetailsProps) { > Order No. {orderNumber} viewOrder(orderNumber)}> - View Order + View Order @@ -156,7 +157,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 c321c849..b5adf0ef 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, Loader } from 'react-feather'; import COLORS from '../../styles/colors'; export const containerStyle = styled.div` @@ -166,7 +166,8 @@ export const GalleryImage = styled.img` export const RowDiv = styled.div` width: 700px; height: 400px; - margin-bottom: 50px; + margin-bottom: 20px; + margin-top: 20px; `; export const OrderStatusDiv = styled.div` @@ -194,7 +195,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 +213,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/ViewAllButton/ViewAllButton.tsx b/src/components/ViewAllButton/ViewAllButton.tsx index a5a574f4..d629c442 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, Body2Bold } 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..17ce6d93 100644 --- a/src/components/ViewAllButton/styles.ts +++ b/src/components/ViewAllButton/styles.ts @@ -1,7 +1,11 @@ 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 +17,8 @@ export const ViewAllDiv = styled.div` `; export const placeHolder = ''; + +export const ArrowRightIcon = styled(ArrowRight)` + width: 20px; + height: 20px; +`; From 1d4191bd3e2d0a77ade2c56370137b9bfd4ad628 Mon Sep 17 00:00:00 2001 From: CharlotteLaw Date: Sun, 21 Apr 2024 14:40:05 -0700 Subject: [PATCH 4/9] ip --- src/app/orderConfirmationPickUp/page.tsx | 24 +++++++++++++---------- src/app/orderConfirmationPickUp/styles.ts | 18 ++++++++--------- 2 files changed, 23 insertions(+), 19 deletions(-) diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx index c9b612ce..c358b909 100644 --- a/src/app/orderConfirmationPickUp/page.tsx +++ b/src/app/orderConfirmationPickUp/page.tsx @@ -9,41 +9,45 @@ import { getOrderById, } from '@/api/supabase/queries/order_queries'; import { + Body2Bold, + Body2, + Heading3Bold, Body1, Body1Bold, - Body2Light, - Heading3Bold, Heading4Bold, + Body2Light, } from '@/styles/fonts'; import { useSearchParams } from 'next/navigation'; -import { fetchCartItemsWithQuantityByID } from '../../api/supabase/queries/cart_queries'; +import { fetchCartItemsWithQuantity,fetchCartItemsWithQuantityByID } 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, + TextDiv1, + OutterBox, + Label, LabelBox, - LabelBox1, ScrollDiv, ShippingDetailsDiv, ImageDiv, BottomColumnDiv, - Wrapper, + LabelBox1, LeftColumnDiv, RightColumnDiv, DetailsHeader, PageDiv, CenterDiv, + BackButtonDiv, + TextDiv, } from './styles'; import { Product, User, Pickup } from '../../schema/schema'; - + export default function OrderConfirmationPickUp() { const [Cart, setCart] = useState([]); const [user, setUser] = useState(); @@ -97,7 +101,7 @@ export default function OrderConfirmationPickUp() { - Order No. {orderIDFromSearch} + Order No. {user?.cart_id} {Cart.map(cartItem => ( diff --git a/src/app/orderConfirmationPickUp/styles.ts b/src/app/orderConfirmationPickUp/styles.ts index 4f2e25a8..e357575d 100644 --- a/src/app/orderConfirmationPickUp/styles.ts +++ b/src/app/orderConfirmationPickUp/styles.ts @@ -26,9 +26,8 @@ export const OutterFavoriteDiv = styled.div` max-height: 100%; margin-top: 20px; margin-right: 60px; - margin-left: 60px; - padding-right: 20px; - padding-left: 10px; + margin-left: 40px; + padding-right: 15px; padding-top: 10px; `; @@ -232,7 +231,6 @@ export const RightColumnDiv = styled.div` display: flex; flex-flow: column; align-items: start; - margin-left: 10px; width: 100%; `; @@ -241,8 +239,8 @@ export const BackButtonDiv = styled.div` flex-direction: row; text-align: left; width: 800px; - margin-left: 80px; - margin-top: 40px; + margin-left: 60px; + margin-bottom: 40px; `; export const WhiteBackgroundDiv = styled.div` @@ -261,6 +259,7 @@ export const BottomColumnDiv = styled.div` justify-content: space-around; width: 100%; margin-left: 20px; + margin-right: 20px; margin-bottom: 30px; gap: 30px; `; @@ -268,7 +267,7 @@ export const BottomColumnDiv = styled.div` export const TextDiv = styled.div` display: flex; flex-direction: row; - margin-left: 60px; + margin-left: 40px; margin-top: 20px; margin-bottom: 20px; `; @@ -287,6 +286,7 @@ export const PageDiv = styled.div` justify-content: flex-start; align-items: flex-start; width: 100%; + margin-bottom: 40px; `; export const ShippingDetailsDiv = styled.div` @@ -296,7 +296,7 @@ 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; @@ -322,4 +322,4 @@ export const CenterDiv = styled.div` justify-content: center; width: 100%; padding: 20px; -`; +`; \ No newline at end of file From 704ad419b596c8deed9a9fd59b15ed58c37d8ffd Mon Sep 17 00:00:00 2001 From: CharlotteLaw Date: Sun, 21 Apr 2024 14:41:01 -0700 Subject: [PATCH 5/9] ip --- src/app/orderConfirmationPickUp/page.tsx | 3 +- src/app/orderConfirmationPickUp/styles.ts | 47 +++++++++++++++-------- 2 files changed, 32 insertions(+), 18 deletions(-) diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx index c358b909..5f1b8215 100644 --- a/src/app/orderConfirmationPickUp/page.tsx +++ b/src/app/orderConfirmationPickUp/page.tsx @@ -40,6 +40,7 @@ import { LeftColumnDiv, RightColumnDiv, DetailsHeader, + Wrapper2, PageDiv, CenterDiv, BackButtonDiv, @@ -77,7 +78,6 @@ export default function OrderConfirmationPickUp() { function organizePickupTime() { const startTime = pickupTime?.start_time.toLocaleString(); - const endTime = pickupTime?.end_time.toLocaleString(); const date = startTime == null ? ['0', '0', '0'] @@ -159,6 +159,7 @@ export default function OrderConfirmationPickUp() { + diff --git a/src/app/orderConfirmationPickUp/styles.ts b/src/app/orderConfirmationPickUp/styles.ts index e357575d..255792de 100644 --- a/src/app/orderConfirmationPickUp/styles.ts +++ b/src/app/orderConfirmationPickUp/styles.ts @@ -9,10 +9,10 @@ export const FavoriteDiv = styled.div` flex-direction: row; align-items: center; justify-content: space-between; - width: 100%; + width: 750px; margin-bottom: 50px; margin-top: 30px; - margin-right: 20px; + margin-right: 10px; `; export const OutterFavoriteDiv = styled.div` @@ -22,18 +22,19 @@ export const OutterFavoriteDiv = styled.div` border-radius: 10px; background: var(--White, #fff); box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); - width: 800px; max-height: 100%; + max-width: 750px; margin-top: 20px; - margin-right: 60px; - margin-left: 40px; - padding-right: 15px; - padding-top: 10px; + margin-right: 10px; + margin-left: 20px; + padding-right: 7px; + padding-top: 7px; `; export const ScrollDiv = styled.div` overflow: scroll; - width: 100%; + overflow-x: hidden; + max-width: 100%; `; export const ImageDiv = styled.div` @@ -225,13 +226,13 @@ export const LeftColumnDiv = styled.div` flex-flow: column; justify-content: space-evenly; align-items: space-evenly; - width: 100%; + width: 800px; `; export const RightColumnDiv = styled.div` display: flex; flex-flow: column; - align-items: start; - width: 100%; + align-items: left; + width: 475px; `; export const BackButtonDiv = styled.div` @@ -239,8 +240,9 @@ export const BackButtonDiv = styled.div` flex-direction: row; text-align: left; width: 800px; - margin-left: 60px; + margin-left: 40px; margin-bottom: 40px; + margin-top: 20px; `; export const WhiteBackgroundDiv = styled.div` @@ -252,6 +254,14 @@ 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,15 +271,15 @@ export const BottomColumnDiv = styled.div` 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: 40px; - margin-top: 20px; - margin-bottom: 20px; + margin-left: 20px; + margin-top: 10px; + margin-bottom: 10px; `; export const TextDiv1 = styled.div` @@ -286,10 +296,12 @@ 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` + display: flex; flex-direction: column; align-items: flex-start; @@ -302,7 +314,7 @@ export const ShippingDetailsDiv = styled.div` padding: 36px 34px; gap: 33px; max-height: 100%; - margin-top: 205px; + margin-top: 75px; margin-bottom: 30px; margin-right: 40px; `; @@ -320,6 +332,7 @@ export const CenterDiv = styled.div` display: flex; align-items: center; justify-content: center; + position: relative; width: 100%; padding: 20px; `; \ No newline at end of file From 257f0042c117136c1e57d13c61d714c1d5636a0d Mon Sep 17 00:00:00 2001 From: CharlotteLaw Date: Sun, 21 Apr 2024 14:42:46 -0700 Subject: [PATCH 6/9] ip --- src/app/orderConfirmationPickUp/page.tsx | 12 +- src/app/orderConfirmationPickUp/styles.ts | 16 +- src/app/orderHistory/page.tsx | 9 +- src/app/orderHistory/styles.ts | 24 +++ src/app/orderPage/page.tsx | 122 +++++++++++---- src/app/orderPage/styles.ts | 146 ++++++++++++++++-- src/app/profileScreen/page.tsx | 47 +++--- src/app/profileScreen/styles.ts | 59 +++++-- src/components/BackButton/BackButton.tsx | 8 + src/components/BackButton/styles.ts | 9 ++ .../OrderHistory/OrderHistoryText.tsx | 13 +- src/components/OrderHistory/styles.ts | 12 +- .../ViewAllButton/ViewAllButton.tsx | 9 +- src/components/ViewAllButton/styles.ts | 9 ++ 14 files changed, 390 insertions(+), 105 deletions(-) diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx index 5f1b8215..090e4bc1 100644 --- a/src/app/orderConfirmationPickUp/page.tsx +++ b/src/app/orderConfirmationPickUp/page.tsx @@ -4,6 +4,7 @@ import { useState, useEffect } from 'react'; import { fetchUser } from '@/api/supabase/queries/user_queries'; import { fetchPickupTimesByID } from '@/api/supabase/queries/pickup_queries'; +import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries'; import { fetchCurrentOrdersByUser, getOrderById, @@ -34,13 +35,11 @@ import { LabelBox, ScrollDiv, ShippingDetailsDiv, - ImageDiv, BottomColumnDiv, - LabelBox1, LeftColumnDiv, RightColumnDiv, DetailsHeader, - Wrapper2, + ImageDiv, PageDiv, CenterDiv, BackButtonDiv, @@ -56,10 +55,13 @@ export default function OrderConfirmationPickUp() { const searchParams = useSearchParams(); const orderIDFromSearch = searchParams.get('orderID'); + useEffect(() => { async function fetchProducts() { + const cartItems = (await fetchCartItemsWithQuantityByID( orderIDFromSearch, + )) as Product[]; setCart(cartItems); } @@ -116,13 +118,13 @@ export default function OrderConfirmationPickUp() { }} /> - + {cartItem.name}
Category: {cartItem.category} - +
+ +<<<<<<< HEAD
Order History
+======= + + Order History +>>>>>>> b287da7 (temp) {orderIds.length > 0 ? ( orderIds.map((orderId: number) => ( diff --git a/src/app/orderHistory/styles.ts b/src/app/orderHistory/styles.ts index a93abdc1..4746ba4c 100644 --- a/src/app/orderHistory/styles.ts +++ b/src/app/orderHistory/styles.ts @@ -13,6 +13,17 @@ 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; @@ -20,16 +31,29 @@ export const OutterBox = styled.div` `; export const OrderHistoryContainer = styled.div` + display: flex; flex-direction: column; align-items: center; border-radius: 10px; +<<<<<<< HEAD background: ${COLORS.white}; 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; +======= + background: var(--White, #fff); + background-color: pink; + box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); + width: 800px; // Width of the outer box + height: 700px; + overflow: scroll; + margin-top: 20px; + margin-bottom: 50px; + padding: 0; // Ensure there's no padding pushing the internal boxes inward +>>>>>>> b287da7 (temp) `; export const OrderHistoryBox = styled.div` diff --git a/src/app/orderPage/page.tsx b/src/app/orderPage/page.tsx index 6d2d0fd9..27bfbf09 100644 --- a/src/app/orderPage/page.tsx +++ b/src/app/orderPage/page.tsx @@ -1,7 +1,8 @@ 'use client'; import { useState, useEffect } from 'react'; -import { Body1, Body2 } from '@/styles/fonts'; +import { Check, X, Send } from 'react-feather'; +import { Body1, Body2Light, Heading3Bold, Heading4Bold, Body2, Heading2, Body1Bold } from '@/styles/fonts'; import { useSearchParams } from 'next/navigation'; import BackButton from '../../components/BackButton/BackButton'; @@ -14,13 +15,23 @@ import NavBar from '../../components/NavBarFolder/NavBar'; import { FavoriteDiv, - Body1Bold, OutterFavoriteDiv, BackButtonDiv, + DetailsHeader, + RightColumnDiv, + TextDiv, + TextDiv1, OutterBox, OutterDiv, - Heading, + ImageDiv, + BottomColumnDiv, + ShippingDetailsDiv, + LabelBox, + LeftColumnDiv, + ScrollDiv, ProductNameDiv, + PageDiv, + CenterDiv, StatusButton, } from './styles'; @@ -76,40 +87,87 @@ export default function OrderPage() { } fetchProducts(); }, []); + + const status = order?.order_status?.toLowerCase() || 'default'; return (
+ + + + + + + + + {formatDate(order?.created_at)} + + + + Order No + + + {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 + Location + 3170 23rd Street, San Francisco, CA 94110 + + + + + +
); } + + + diff --git a/src/app/orderPage/styles.ts b/src/app/orderPage/styles.ts index c2c236bb..122fc5fe 100644 --- a/src/app/orderPage/styles.ts +++ b/src/app/orderPage/styles.ts @@ -5,16 +5,50 @@ import { Heart } from 'react-feather'; import NavBar from '../../components/NavBarFolder/NavBar'; export const FavoriteDiv = styled.div` +display: flex; +flex-direction: row; +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: start; + align-items: space-evenly; justify-content: space-around; width: 100%; - margin-bottom: 50px; - margin-top: 30px; + margin-left: 10px; + margin-bottom: 30px; + gap: 10px; `; -export const OutterFavoriteDiv = styled.div` +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; @@ -25,6 +59,7 @@ export const OutterFavoriteDiv = styled.div` height: 700px; overflow: scroll; margin-top: 20px; + padding-top: 15px; `; export const BackDiv = styled.button` @@ -66,7 +101,8 @@ export const BackButtonDiv = styled.div` display: flex; flex-direction: row; gap: 200px; - margin-bottom: 55px; + margin-bottom: 50px; + margin-top: 50px; text-align: left; width: 800px; `; @@ -116,26 +152,116 @@ 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` font-size: 16px; font-style: normal; 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: 93px; + margin-bottom: 30px; + margin-right: 40px; +`; + +export const RightColumnDiv = styled.div` + display: flex; + flex-flow: column; + align-items: start; + margin-left: 10px; + width: 100%; +`; + +export const TextDiv1 = styled.div` + display: flex; + flex-direction: row; + margin-top: 20px; +`; + +export const TextDiv = styled.div` + display: flex; + flex-direction: row; + margin-left: 60px; + margin-top: 20px; + margin-bottom: 20px; +`; + +export const LeftColumnDiv = styled.div` + display: flex; + flex-flow: column; + justify-content: space-evenly; + align-items: space-evenly; + width: 100%; +`; \ No newline at end of file diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx index 0b98511a..6a46952f 100644 --- a/src/app/profileScreen/page.tsx +++ b/src/app/profileScreen/page.tsx @@ -10,6 +10,7 @@ import { Heading1, Body1Bold, Body2Bold, + Body2Light, Body2, } from '@/styles/fonts'; import { @@ -36,8 +37,10 @@ import BackButton from '../../components/BackButton/BackButton'; import { LogOutButton, NavBarMovedUP, - AccountDetails, + AccountDetailsDeliv, + AccountDetailsPickUp, HeadingBack, + Spacing, HeadingSpacing, TextSpacing, OrderHistory, @@ -81,14 +84,15 @@ function FavoriteSection(props: { {favorite.name} -

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

+ + {favorite.name} + + + Category: {favorite.category} + clickFunctions({ fav: favorite })} @@ -206,13 +210,13 @@ function OrderHistorySection(props: { Orders: Order[] }) { > Order No. {Orders[0].id} - {fD} - +
{icon} @@ -287,38 +291,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 +330,7 @@ function AccountDetailSectionPickUp(props: { user: User }) { return (
- + Account Details @@ -351,7 +354,7 @@ function AccountDetailSectionPickUp(props: { user: User }) { {user?.phone_numbers} - +
); } @@ -433,7 +436,7 @@ export default function Profile() { - + diff --git a/src/app/profileScreen/styles.ts b/src/app/profileScreen/styles.ts index 1ee1f70b..c5e39346 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,9 +92,16 @@ export const LogOutButton = styled.button` font-weight: 600; line-height: normal; border: transparent; +<<<<<<< HEAD border-radius: 5px; width: 405px; height: 50px; +======= + border-radius: 10px; + width: 500px; + height: 55px; + margin-top: 40px; +>>>>>>> b287da7 (temp) `; /* transform: translateY(200px); */ @@ -100,7 +124,7 @@ export const FavoriteDiv = styled.div` align-items: center; justify-content: space-around; width: 100%; - margin-bottom: 50px; + margin-bottom: 20px; margin-top: 30px; `; @@ -112,8 +136,13 @@ export const HeartIcon = styled(Heart)` `; export const BackButtonDiv = styled.div` +<<<<<<< HEAD margin-bottom: 30px; margin-top: 50px; +======= + margin-top: 50px; + margin-bottom: 40px; +>>>>>>> b287da7 (temp) `; export const HeaderDiv = styled.div` @@ -128,6 +157,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,7 +185,6 @@ export const ColumnDiv = styled.div` `; export const LogOutDiv = styled.div` - margin-top: 50px; margin-right: 30px; display: flex; justify-content: center; diff --git a/src/components/BackButton/BackButton.tsx b/src/components/BackButton/BackButton.tsx index bff2d899..1ec02351 100644 --- a/src/components/BackButton/BackButton.tsx +++ b/src/components/BackButton/BackButton.tsx @@ -1,4 +1,8 @@ +<<<<<<< HEAD import { Body1Bold } from '@/styles/fonts'; +======= +import { Body1, Body2Bold } from '@/styles/fonts'; +>>>>>>> b287da7 (temp) import { BackLink, ArrowLeftIcon } from './styles'; export default function BackButton(props: { destination: string }) { @@ -6,7 +10,11 @@ export default function BackButton(props: { destination: string }) { return ( +<<<<<<< HEAD Back +======= + Back +>>>>>>> b287da7 (temp) ); } diff --git a/src/components/BackButton/styles.ts b/src/components/BackButton/styles.ts index 4abb943e..f8bfe12c 100644 --- a/src/components/BackButton/styles.ts +++ b/src/components/BackButton/styles.ts @@ -9,14 +9,23 @@ export const BackLink = styled(Link)` align-items: center; justify-content: space-between; color: ${COLORS.black}; +<<<<<<< HEAD width: 75px; +======= + width: 60px; +>>>>>>> b287da7 (temp) &:hover { text-decoration: underline; } `; export const ArrowLeftIcon = styled(ArrowLeft)` +<<<<<<< HEAD width: 20px; height: 20px; +======= + width: 18px; + height: 18px; +>>>>>>> b287da7 (temp) `; diff --git a/src/components/OrderHistory/OrderHistoryText.tsx b/src/components/OrderHistory/OrderHistoryText.tsx index 3c109481..d2c1d1b7 100644 --- a/src/components/OrderHistory/OrderHistoryText.tsx +++ b/src/components/OrderHistory/OrderHistoryText.tsx @@ -1,8 +1,9 @@ import React from 'react'; import { useRouter } from 'next/navigation'; +import { Check, CheckCircle, X, Send } from 'react-feather'; import querystring from 'querystring'; -import { Heading4Bold, Body1, OrderStatusFont } from '@/styles/fonts'; +import { Heading4Bold, Body1, Body2, OrderStatusFont } from '@/styles/fonts'; 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'; @@ -61,7 +62,7 @@ export default function OrderDetails(props: OrderDetailsProps) { > Order No. {orderNumber} viewOrder(orderNumber)}> - View Order + View Order
@@ -102,7 +103,7 @@ export default function OrderDetails(props: OrderDetailsProps) { > Order No. {orderNumber} viewOrder(orderNumber)}> - View Order + View Order
@@ -143,7 +144,7 @@ export default function OrderDetails(props: OrderDetailsProps) { > Order No. {orderNumber} viewOrder(orderNumber)}> - View Order + View Order @@ -156,7 +157,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..546d6c2b 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, Loader } from 'react-feather'; import COLORS from '../../styles/colors'; export const containerStyle = styled.div` @@ -165,8 +165,14 @@ 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; +>>>>>>> b287da7 (temp) `; export const OrderStatusDiv = styled.div` @@ -194,7 +200,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 +218,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/ViewAllButton/ViewAllButton.tsx b/src/components/ViewAllButton/ViewAllButton.tsx index a5a574f4..d629c442 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, Body2Bold } 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..17ce6d93 100644 --- a/src/components/ViewAllButton/styles.ts +++ b/src/components/ViewAllButton/styles.ts @@ -1,7 +1,11 @@ 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 +17,8 @@ export const ViewAllDiv = styled.div` `; export const placeHolder = ''; + +export const ArrowRightIcon = styled(ArrowRight)` + width: 20px; + height: 20px; +`; From 46a8b0359eb827142b5b9bedb518d8db5ecd4830 Mon Sep 17 00:00:00 2001 From: CharlotteLaw Date: Sun, 21 Apr 2024 15:01:24 -0700 Subject: [PATCH 7/9] fixed after rebasing --- src/app/orderConfirmationPickUp/page.tsx | 4 -- src/app/orderConfirmationPickUp/styles.ts | 5 +-- src/app/orderHistory/page.tsx | 13 +------ src/app/orderHistory/styles.ts | 14 +------ src/app/orderPage/page.tsx | 47 +++++++++++++---------- src/app/orderPage/styles.ts | 32 +++++++-------- src/app/profileScreen/page.tsx | 11 ++---- src/app/profileScreen/styles.ts | 12 ------ src/components/BackButton/BackButton.tsx | 18 +-------- src/components/BackButton/styles.ts | 19 --------- src/components/FooterFolder/Footer.tsx | 4 +- src/components/FooterFolder/styles.ts | 3 +- src/components/OrderHistory/styles.ts | 2 +- src/components/ViewAllButton/styles.ts | 1 - 14 files changed, 56 insertions(+), 129 deletions(-) diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx index fd2d7c18..87f454cf 100644 --- a/src/app/orderConfirmationPickUp/page.tsx +++ b/src/app/orderConfirmationPickUp/page.tsx @@ -55,13 +55,10 @@ export default function OrderConfirmationPickUp() { const searchParams = useSearchParams(); const orderIDFromSearch = searchParams.get('orderID'); - useEffect(() => { async function fetchProducts() { - const cartItems = (await fetchCartItemsWithQuantityByID( orderIDFromSearch, - )) as Product[]; setCart(cartItems); } @@ -161,7 +158,6 @@ export default function OrderConfirmationPickUp() { - diff --git a/src/app/orderConfirmationPickUp/styles.ts b/src/app/orderConfirmationPickUp/styles.ts index 5e993154..d31ade33 100644 --- a/src/app/orderConfirmationPickUp/styles.ts +++ b/src/app/orderConfirmationPickUp/styles.ts @@ -99,14 +99,12 @@ export const Label = styled.p` margin-top: 20px; `; - export const ImageDiv = styled.p` width: 150px; height: 150px; align-items: center; justify-content: center; display: flex; - `; export const LabelBox = styled.div` @@ -244,7 +242,6 @@ 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; @@ -331,4 +328,4 @@ export const CenterDiv = styled.div` position: relative; width: 100%; padding: 20px; -`; \ No newline at end of file +`; diff --git a/src/app/orderHistory/page.tsx b/src/app/orderHistory/page.tsx index 6c57ea2a..232de1e7 100644 --- a/src/app/orderHistory/page.tsx +++ b/src/app/orderHistory/page.tsx @@ -31,20 +31,9 @@ function OrderHistory() { - -<<<<<<< HEAD -<<<<<<< HEAD -
- Order History -
-======= + Order History ->>>>>>> b287da7 (temp) -======= - - Order History ->>>>>>> b287da70273f0befb5c5c6b437883b203f43b605 {orderIds.length > 0 ? ( orderIds.map((orderId: number) => ( diff --git a/src/app/orderHistory/styles.ts b/src/app/orderHistory/styles.ts index 4746ba4c..f6d06db4 100644 --- a/src/app/orderHistory/styles.ts +++ b/src/app/orderHistory/styles.ts @@ -36,24 +36,12 @@ export const OrderHistoryContainer = styled.div` flex-direction: column; align-items: center; border-radius: 10px; -<<<<<<< HEAD background: ${COLORS.white}; 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; -======= - background: var(--White, #fff); - background-color: pink; - box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); - width: 800px; // Width of the outer box - height: 700px; - overflow: scroll; margin-top: 20px; - margin-bottom: 50px; - padding: 0; // Ensure there's no padding pushing the internal boxes inward ->>>>>>> b287da7 (temp) + padding-top: 10px; `; export const OrderHistoryBox = styled.div` diff --git a/src/app/orderPage/page.tsx b/src/app/orderPage/page.tsx index 27bfbf09..ef75b971 100644 --- a/src/app/orderPage/page.tsx +++ b/src/app/orderPage/page.tsx @@ -2,7 +2,16 @@ import { useState, useEffect } from 'react'; import { Check, X, Send } from 'react-feather'; -import { Body1, Body2Light, Heading3Bold, Heading4Bold, Body2, Heading2, Body1Bold } from '@/styles/fonts'; +import { + Body1, + Body2Light, + Heading3Bold, + Heading4Bold, + Body3, + Body2, + Heading2, + Body1Bold, +} from '@/styles/fonts'; import { useSearchParams } from 'next/navigation'; import BackButton from '../../components/BackButton/BackButton'; @@ -87,7 +96,7 @@ export default function OrderPage() { } fetchProducts(); }, []); - + const status = order?.order_status?.toLowerCase() || 'default'; return ( @@ -101,24 +110,24 @@ export default function OrderPage() { - {formatDate(order?.created_at)} + Order No. {order?.id} - - Order No - + + Order Date: {order?.id} + - {orders.map(product => ( - - - {product.name} - + {orders.map(product => ( + + + {product.name} + {product.name} @@ -162,12 +171,8 @@ export default function OrderPage() { - ); } - - - diff --git a/src/app/orderPage/styles.ts b/src/app/orderPage/styles.ts index 122fc5fe..9424e7aa 100644 --- a/src/app/orderPage/styles.ts +++ b/src/app/orderPage/styles.ts @@ -5,16 +5,16 @@ import { Heart } from 'react-feather'; import NavBar from '../../components/NavBarFolder/NavBar'; export const FavoriteDiv = styled.div` -display: flex; -flex-direction: row; -align-items: center; -justify-content: space-between; -width: 100%; -margin-bottom: 50px; -margin-top: 30px; -margin-right: 20px; -margin-left: 40px; -gap: 70px; + display: flex; + flex-direction: row; + 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` @@ -25,7 +25,7 @@ export const BottomColumnDiv = styled.div` width: 100%; margin-left: 10px; margin-bottom: 30px; - gap: 10px; + gap: 20px; `; export const ScrollDiv = styled.div` @@ -48,10 +48,10 @@ export const LabelBox = styled.div` height: 100%; `; -export const OutterFavoriteDiv = styled.div` +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); @@ -60,6 +60,7 @@ export const OutterFavoriteDiv = styled.div` overflow: scroll; margin-top: 20px; padding-top: 15px; + margin-left: 60px; `; export const BackDiv = styled.button` @@ -185,7 +186,6 @@ export const StatusButton = styled.button<{ status: string }>` }}; `; - export const Body1Bold = styled.p` font-size: 16px; font-style: normal; @@ -242,12 +242,14 @@ export const RightColumnDiv = styled.div` align-items: start; margin-left: 10px; width: 100%; + margin-top: 8px; `; export const TextDiv1 = styled.div` display: flex; flex-direction: row; margin-top: 20px; + background-color: pink; `; export const TextDiv = styled.div` @@ -264,4 +266,4 @@ export const LeftColumnDiv = styled.div` justify-content: space-evenly; align-items: space-evenly; width: 100%; -`; \ No newline at end of file +`; diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx index 6a46952f..588c86d3 100644 --- a/src/app/profileScreen/page.tsx +++ b/src/app/profileScreen/page.tsx @@ -87,12 +87,9 @@ function FavoriteSection(props: { style={{ width: '100px', height: '100px' }} /> - - {favorite.name} - - - Category: {favorite.category} - + {favorite.name} + + Category: {favorite.category} clickFunctions({ fav: favorite })} @@ -436,7 +433,7 @@ export default function Profile() { - + diff --git a/src/app/profileScreen/styles.ts b/src/app/profileScreen/styles.ts index 016c1444..5272fd80 100644 --- a/src/app/profileScreen/styles.ts +++ b/src/app/profileScreen/styles.ts @@ -92,22 +92,10 @@ export const LogOutButton = styled.button` font-weight: 600; line-height: normal; border: transparent; -<<<<<<< HEAD -<<<<<<< HEAD - border-radius: 5px; - width: 405px; - height: 50px; -======= -======= ->>>>>>> b287da70273f0befb5c5c6b437883b203f43b605 border-radius: 10px; width: 500px; height: 55px; margin-top: 40px; -<<<<<<< HEAD ->>>>>>> b287da7 (temp) -======= ->>>>>>> b287da70273f0befb5c5c6b437883b203f43b605 `; /* transform: translateY(200px); */ diff --git a/src/components/BackButton/BackButton.tsx b/src/components/BackButton/BackButton.tsx index d10762db..a59c6d92 100644 --- a/src/components/BackButton/BackButton.tsx +++ b/src/components/BackButton/BackButton.tsx @@ -1,12 +1,4 @@ -<<<<<<< HEAD -<<<<<<< HEAD -import { Body1Bold } from '@/styles/fonts'; -======= -import { Body1, Body2Bold } from '@/styles/fonts'; ->>>>>>> b287da7 (temp) -======= -import { Body1, Body2Bold } from '@/styles/fonts'; ->>>>>>> b287da70273f0befb5c5c6b437883b203f43b605 +import { Body1Bold, Body1, Body2Bold } from '@/styles/fonts'; import { BackLink, ArrowLeftIcon } from './styles'; export default function BackButton(props: { destination: string }) { @@ -14,15 +6,7 @@ export default function BackButton(props: { destination: string }) { return ( -<<<<<<< HEAD -<<<<<<< HEAD - Back -======= Back ->>>>>>> b287da7 (temp) -======= - Back ->>>>>>> b287da70273f0befb5c5c6b437883b203f43b605 ); } diff --git a/src/components/BackButton/styles.ts b/src/components/BackButton/styles.ts index d20ac5bd..34fe39e8 100644 --- a/src/components/BackButton/styles.ts +++ b/src/components/BackButton/styles.ts @@ -9,32 +9,13 @@ export const BackLink = styled(Link)` align-items: center; justify-content: space-between; color: ${COLORS.black}; -<<<<<<< HEAD -<<<<<<< HEAD - width: 75px; - -======= - width: 60px; ->>>>>>> b287da7 (temp) -======= width: 60px; ->>>>>>> b287da70273f0befb5c5c6b437883b203f43b605 &:hover { text-decoration: underline; } `; export const ArrowLeftIcon = styled(ArrowLeft)` -<<<<<<< HEAD -<<<<<<< HEAD - width: 20px; - height: 20px; -======= - width: 18px; - height: 18px; ->>>>>>> b287da7 (temp) -======= width: 18px; height: 18px; ->>>>>>> b287da70273f0befb5c5c6b437883b203f43b605 `; diff --git a/src/components/FooterFolder/Footer.tsx b/src/components/FooterFolder/Footer.tsx index 45fa2c42..7cb4eef9 100644 --- a/src/components/FooterFolder/Footer.tsx +++ b/src/components/FooterFolder/Footer.tsx @@ -26,7 +26,7 @@ import { export default function Footer({ ...rest }) { const router = useRouter(); return ( -
+ Contact Us @@ -122,6 +122,6 @@ export default function Footer({ ...rest }) { }} /> -
+ ); } diff --git a/src/components/FooterFolder/styles.ts b/src/components/FooterFolder/styles.ts index 1829fe3f..e9c70d54 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/OrderHistory/styles.ts b/src/components/OrderHistory/styles.ts index b82b034c..bc97dbb0 100644 --- a/src/components/OrderHistory/styles.ts +++ b/src/components/OrderHistory/styles.ts @@ -203,7 +203,7 @@ export const OrderStatusApprovedDiv = styled.div` export const OrderStatusSubmittedDiv = styled.div` width: 300px; height: 35px; - background: var(--Greyish, #E6E6E6); + background: var(--Greyish, #e6e6e6); display: flex; justify-content: center; align-items: center; diff --git a/src/components/ViewAllButton/styles.ts b/src/components/ViewAllButton/styles.ts index 17ce6d93..c77c4441 100644 --- a/src/components/ViewAllButton/styles.ts +++ b/src/components/ViewAllButton/styles.ts @@ -2,7 +2,6 @@ import styled from 'styled-components'; import { ArrowRight } from 'react-feather'; import COLORS from '../../styles/colors'; - export const ViewAllDiv = styled.div` width: 80px; gap: 5px; From c5f1306d87c64d1e87a82fe6cd9689fe0244db52 Mon Sep 17 00:00:00 2001 From: CharlotteLaw Date: Sun, 21 Apr 2024 15:35:00 -0700 Subject: [PATCH 8/9] Week 7 and 8 Sprint --- src/app/delivery/page.tsx | 1 - src/app/orderConfirmationDelivery/page.tsx | 6 +- src/app/orderConfirmationPickUp/page.tsx | 13 +- src/app/orderConfirmationPickUp/styles.ts | 14 +- src/app/orderHistory/styles.ts | 2 +- src/app/orderPage/page.tsx | 76 ++++---- src/app/orderPage/styles.ts | 13 +- src/app/pickup/page.tsx | 3 +- src/app/profileScreen/page.tsx | 3 +- src/app/profileScreen/styles.ts | 8 - src/app/storefront/productButtons.tsx | 1 - src/components/BackButton/BackButton.tsx | 2 +- src/components/FooterFolder/Footer.tsx | 180 +++++++++--------- src/components/FooterFolder/styles.ts | 4 +- .../OrderHistory/OrderHistoryText.tsx | 1 - src/components/OrderHistory/styles.ts | 2 +- .../ViewAllButton/ViewAllButton.tsx | 2 +- 17 files changed, 154 insertions(+), 177 deletions(-) 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/orderConfirmationDelivery/page.tsx b/src/app/orderConfirmationDelivery/page.tsx index c82042cb..1ea95717 100644 --- a/src/app/orderConfirmationDelivery/page.tsx +++ b/src/app/orderConfirmationDelivery/page.tsx @@ -6,7 +6,7 @@ import { fetchCurrentUserAddress, } from '@/api/supabase/queries/user_queries'; -import { Body1, Body2Light, Heading3Bold, Heading4Bold } from '@/styles/fonts'; +import { Body1, Heading3Bold, Heading4Bold } from '@/styles/fonts'; import { useSearchParams } from 'next/navigation'; import BackButton from '../../components/BackButton/BackButton'; @@ -29,7 +29,6 @@ import { } from './styles'; import { Product, User, Address } from '../../schema/schema'; -import { Body1Bold } from '../orderPage/styles'; import { BackButtonDiv } from '../orderConfirmationPickUp/styles'; export default function OrderConfirmationDelivery() { @@ -43,7 +42,6 @@ export default function OrderConfirmationDelivery() { const cartItems = (await fetchCartItemsWithQuantityByID( orderIDFromSearch, )) as Product[]; - console.log(cartItems); setCart(cartItems); } @@ -56,7 +54,7 @@ export default function OrderConfirmationDelivery() { fetchProducts(); setUserDetails(); - }, []); + }, ); return (
diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx index 87f454cf..9dc9630b 100644 --- a/src/app/orderConfirmationPickUp/page.tsx +++ b/src/app/orderConfirmationPickUp/page.tsx @@ -4,14 +4,8 @@ import { useState, useEffect } from 'react'; import { fetchUser } from '@/api/supabase/queries/user_queries'; import { fetchPickupTimesByID } from '@/api/supabase/queries/pickup_queries'; -import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries'; +import { getOrderById } from '@/api/supabase/queries/order_queries'; import { - fetchCurrentOrdersByUser, - getOrderById, -} from '@/api/supabase/queries/order_queries'; -import { - Body2Bold, - Body2, Heading3Bold, Body1, Body1Bold, @@ -26,11 +20,8 @@ import NavBar from '../../components/NavBarFolder/NavBar'; import { FavoriteDiv, - ColDiv, OutterFavoriteDiv, TextDiv1, - OutterBox, - Label, LabelBox, ScrollDiv, ShippingDetailsDiv, @@ -73,7 +64,7 @@ export default function OrderConfirmationPickUp() { fetchProducts(); setUserDetails(); - }, []); + }); function organizePickupTime() { const startTime = pickupTime?.start_time.toLocaleString(); diff --git a/src/app/orderConfirmationPickUp/styles.ts b/src/app/orderConfirmationPickUp/styles.ts index d31ade33..62262800 100644 --- a/src/app/orderConfirmationPickUp/styles.ts +++ b/src/app/orderConfirmationPickUp/styles.ts @@ -23,10 +23,7 @@ export const OutterFavoriteDiv = styled.div` border-radius: 10px; background: var(--White, #fff); box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); -<<<<<<< HEAD -======= width: 700px; ->>>>>>> b287da70273f0befb5c5c6b437883b203f43b605 max-height: 100%; max-width: 750px; margin-top: 20px; @@ -99,7 +96,7 @@ export const Label = styled.p` margin-top: 20px; `; -export const ImageDiv = styled.p` +export const ImageDiv = styled.div` width: 150px; height: 150px; align-items: center; @@ -255,12 +252,8 @@ export const BottomColumnDiv = styled.div` align-items: space-evenly; justify-content: space-around; width: 100%; -<<<<<<< HEAD margin-left: 20px; margin-right: 20px; -======= - margin-left: 10px; ->>>>>>> b287da70273f0befb5c5c6b437883b203f43b605 margin-bottom: 30px; gap: 10px; `; @@ -290,7 +283,6 @@ export const PageDiv = styled.div` `; export const ShippingDetailsDiv = styled.div` - display: flex; flex-direction: column; align-items: flex-start; @@ -303,11 +295,7 @@ export const ShippingDetailsDiv = styled.div` padding: 36px 34px; gap: 33px; max-height: 100%; -<<<<<<< HEAD margin-top: 75px; -======= - margin-top: 93px; ->>>>>>> b287da70273f0befb5c5c6b437883b203f43b605 margin-bottom: 30px; margin-right: 40px; `; diff --git a/src/app/orderHistory/styles.ts b/src/app/orderHistory/styles.ts index f6d06db4..3ef05566 100644 --- a/src/app/orderHistory/styles.ts +++ b/src/app/orderHistory/styles.ts @@ -28,10 +28,10 @@ export const OutterBox = styled.div` width: 800px; margin-top: 40px; margin-bottom: 70px; + min-height: 50px; `; export const OrderHistoryContainer = styled.div` - display: flex; flex-direction: column; align-items: center; diff --git a/src/app/orderPage/page.tsx b/src/app/orderPage/page.tsx index ef75b971..69493174 100644 --- a/src/app/orderPage/page.tsx +++ b/src/app/orderPage/page.tsx @@ -1,18 +1,16 @@ 'use client'; import { useState, useEffect } from 'react'; -import { Check, X, Send } from 'react-feather'; import { Body1, Body2Light, Heading3Bold, - Heading4Bold, - Body3, - Body2, Heading2, Body1Bold, } from '@/styles/fonts'; +import { fetchUser } from '@/api/supabase/queries/user_queries'; import { useSearchParams } from 'next/navigation'; +import { fetchPickupTimesByID } from '@/api/supabase/queries/pickup_queries'; import BackButton from '../../components/BackButton/BackButton'; import { @@ -29,22 +27,19 @@ import { DetailsHeader, RightColumnDiv, TextDiv, - TextDiv1, - OutterBox, - OutterDiv, ImageDiv, BottomColumnDiv, ShippingDetailsDiv, LabelBox, + TextDiv2, LeftColumnDiv, ScrollDiv, - ProductNameDiv, PageDiv, CenterDiv, - StatusButton, + TextDiv1, } from './styles'; -import { ProductWithQuantity, Order } from '../../schema/schema'; +import { ProductWithQuantity, Order, Pickup, User } from '../../schema/schema'; function formatDate(date: string | undefined): string { if (!date) return ''; @@ -72,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; @@ -83,6 +88,13 @@ export default function OrderPage() { currOrderId = 32; } + async function setUserDetails() { + const fetchedUser = await fetchUser(); + const currOrder = await getOrderById(Number(orderIDFromSearch)); + const pickup = await fetchPickupTimesByID(currOrder.pickup_time_id); + setPickupTime(pickup); + } + const [order, setOrder] = useState(); useEffect(() => { @@ -95,9 +107,19 @@ export default function OrderPage() { setOrder(currOrder); } fetchProducts(); - }, []); + setUserDetails(); + }); - const status = order?.order_status?.toLowerCase() || 'default'; + 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 (
@@ -113,9 +135,12 @@ export default function OrderPage() { Order No. {order?.id} - - Order Date: {order?.id} - + + Order Date: {formatDate(order?.created_at)} + + + Order Time: {formatTime(order?.created_at)} + {orders.map(product => ( @@ -137,25 +162,7 @@ export default function OrderPage() { -
- - Quantity: - - - {product.quantity} - -
+ Quantity: {product.quantity} ))} @@ -166,6 +173,7 @@ export default function OrderPage() { 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 9424e7aa..52092ced 100644 --- a/src/app/orderPage/styles.ts +++ b/src/app/orderPage/styles.ts @@ -104,6 +104,7 @@ export const BackButtonDiv = styled.div` gap: 200px; margin-bottom: 50px; margin-top: 50px; + margin-left: 60px; text-align: left; width: 800px; `; @@ -231,7 +232,7 @@ export const ShippingDetailsDiv = styled.div` padding: 36px 34px; gap: 33px; max-height: 100%; - margin-top: 93px; + margin-top: 52px; margin-bottom: 30px; margin-right: 40px; `; @@ -248,15 +249,21 @@ export const RightColumnDiv = styled.div` export const TextDiv1 = styled.div` display: flex; flex-direction: row; + margin-left: 40px; margin-top: 20px; - background-color: pink; `; export const TextDiv = styled.div` display: flex; flex-direction: row; margin-left: 60px; - margin-top: 20px; +`; + +export const TextDiv2 = styled.div` + display: flex; + flex-direction: row; + margin-left: 40px; + margin-top: 5px; margin-bottom: 20px; `; diff --git a/src/app/pickup/page.tsx b/src/app/pickup/page.tsx index 097b878e..534e5b32 100644 --- a/src/app/pickup/page.tsx +++ b/src/app/pickup/page.tsx @@ -10,7 +10,7 @@ import { totalNumberOfItemsInCart, } from '@/api/supabase/queries/cart_queries'; import { useState, useEffect } from 'react'; -import { useRouter, useSearchParams } from 'next/navigation'; +import { useRouter } from 'next/navigation'; import { Heading4Bold } from '@/styles/fonts'; import { fetchNRecentPickupTimes } from '@/api/supabase/queries/pickup_queries'; import { @@ -157,7 +157,6 @@ 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}`); diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx index 588c86d3..fb6a1639 100644 --- a/src/app/profileScreen/page.tsx +++ b/src/app/profileScreen/page.tsx @@ -5,7 +5,6 @@ import { toast, ToastContainer } from 'react-toastify'; import { useEffect, useState } from 'react'; import { Heading2, - Body3, Heading3, Heading1, Body1Bold, @@ -32,7 +31,7 @@ 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, diff --git a/src/app/profileScreen/styles.ts b/src/app/profileScreen/styles.ts index 5272fd80..a3db9031 100644 --- a/src/app/profileScreen/styles.ts +++ b/src/app/profileScreen/styles.ts @@ -130,16 +130,8 @@ export const HeartIcon = styled(Heart)` `; export const BackButtonDiv = styled.div` -<<<<<<< HEAD -<<<<<<< HEAD - margin-bottom: 30px; margin-top: 50px; -======= -======= ->>>>>>> b287da70273f0befb5c5c6b437883b203f43b605 - margin-top: 50px; margin-bottom: 40px; ->>>>>>> b287da7 (temp) `; export const HeaderDiv = 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 a59c6d92..d639e431 100644 --- a/src/components/BackButton/BackButton.tsx +++ b/src/components/BackButton/BackButton.tsx @@ -1,4 +1,4 @@ -import { Body1Bold, Body1, Body2Bold } from '@/styles/fonts'; +import { Body2Bold } from '@/styles/fonts'; import { BackLink, ArrowLeftIcon } from './styles'; export default function BackButton(props: { destination: string }) { diff --git a/src/components/FooterFolder/Footer.tsx b/src/components/FooterFolder/Footer.tsx index 7cb4eef9..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 e9c70d54..98701886 100644 --- a/src/components/FooterFolder/styles.ts +++ b/src/components/FooterFolder/styles.ts @@ -119,8 +119,8 @@ export const SVGWrapper = styled.div` `; export const Wrapper = styled.div` - min-height: 100%; - width:100%; + min-height: 100%; + width: 100%; position: relative; background: var(--Light-Periwinkle, #f4f7ff); display: flex; diff --git a/src/components/OrderHistory/OrderHistoryText.tsx b/src/components/OrderHistory/OrderHistoryText.tsx index d2c1d1b7..d5c78ab5 100644 --- a/src/components/OrderHistory/OrderHistoryText.tsx +++ b/src/components/OrderHistory/OrderHistoryText.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { useRouter } from 'next/navigation'; -import { Check, CheckCircle, X, Send } from 'react-feather'; import querystring from 'querystring'; import { Heading4Bold, Body1, Body2, OrderStatusFont } from '@/styles/fonts'; diff --git a/src/components/OrderHistory/styles.ts b/src/components/OrderHistory/styles.ts index bc97dbb0..35756710 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, Send, Loader } from 'react-feather'; +import { X, Check, Send } from 'react-feather'; import COLORS from '../../styles/colors'; export const containerStyle = styled.div` diff --git a/src/components/ViewAllButton/ViewAllButton.tsx b/src/components/ViewAllButton/ViewAllButton.tsx index d629c442..2298c75a 100644 --- a/src/components/ViewAllButton/ViewAllButton.tsx +++ b/src/components/ViewAllButton/ViewAllButton.tsx @@ -1,5 +1,5 @@ import Link from 'next/link'; -import { Body2, Body2Bold } from '@/styles/fonts'; +import { Body2 } from '@/styles/fonts'; import { ArrowRightIcon, ViewAllDiv } from './styles'; export default function BackButton(props: { destination: string }) { From 0c497ffa604d1a861f8fac67277446b2133764a5 Mon Sep 17 00:00:00 2001 From: CharlotteLaw Date: Sun, 21 Apr 2024 15:36:45 -0700 Subject: [PATCH 9/9] Week 7 and 8 Sprint --- src/app/orderConfirmationDelivery/page.tsx | 2 +- src/app/orderPage/page.tsx | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/app/orderConfirmationDelivery/page.tsx b/src/app/orderConfirmationDelivery/page.tsx index 1ea95717..c35cbd09 100644 --- a/src/app/orderConfirmationDelivery/page.tsx +++ b/src/app/orderConfirmationDelivery/page.tsx @@ -54,7 +54,7 @@ export default function OrderConfirmationDelivery() { fetchProducts(); setUserDetails(); - }, ); + }); return (
diff --git a/src/app/orderPage/page.tsx b/src/app/orderPage/page.tsx index 69493174..e6cb6488 100644 --- a/src/app/orderPage/page.tsx +++ b/src/app/orderPage/page.tsx @@ -39,7 +39,7 @@ import { TextDiv1, } from './styles'; -import { ProductWithQuantity, Order, Pickup, User } from '../../schema/schema'; +import { ProductWithQuantity, Order, Pickup } from '../../schema/schema'; function formatDate(date: string | undefined): string { if (!date) return ''; @@ -89,7 +89,6 @@ export default function OrderPage() { } async function setUserDetails() { - const fetchedUser = await fetchUser(); const currOrder = await getOrderById(Number(orderIDFromSearch)); const pickup = await fetchPickupTimesByID(currOrder.pickup_time_id); setPickupTime(pickup);