From 257f0042c117136c1e57d13c61d714c1d5636a0d Mon Sep 17 00:00:00 2001 From: CharlotteLaw Date: Sun, 21 Apr 2024 14:42:46 -0700 Subject: [PATCH] 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; +`;