+
+
+
+
+ {products.map(productVal => (
+
+ {productDetails[productVal.product_id]}
+ {productVal.quantity}
+
+ ))}
+
+
+
+ Order Total
+ {totalQuantity}
+
+
+
+ );
+}
+
+export default ItemRows;
diff --git a/src/app/delivery/page.tsx b/src/app/delivery/page.tsx
new file mode 100644
index 00000000..1e66b420
--- /dev/null
+++ b/src/app/delivery/page.tsx
@@ -0,0 +1,100 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+ fetchUser,
+ fetchUserAddress,
+} from '@/api/supabase/queries/user_queries';
+import querystring from 'querystring';
+import {
+ createOrder,
+ fetchCurrentOrdersByUser,
+ updateOrderStatus,
+} from '@/api/supabase/queries/order_queries';
+import BackButton from '../../components/BackButton/BackButton';
+import {
+ fetchCartIdFromUser,
+ fetchCartItemsWithQuantity,
+ totalNumberOfItemsInCart,
+} from '../../api/supabase/queries/cart_queries';
+import { Heading1, Normal700Text } from '../../styles/fonts';
+import {
+ ProductWithQuantity,
+ User,
+ Address,
+ OrderStatus,
+} from '../../schema/schema';
+import OrderSummary from '../../components/OrderSummaryFolder/OrderSummary';
+import NavBar from '../../components/NavBarFolder/NavBar';
+import {
+ DeliveryContainer,
+ OrderContainer,
+ OrderButton,
+ InformationContainer,
+ InformationText,
+ BackButtonDiv,
+ OutterDiv,
+} from './styles';
+
+export default function App() {
+ const [numberOfItems, setNumberOfItems] = useState(0);
+ const [cart, setCart] = useState
+
+ Quantity:
+
+
+ {cartItem.quantity}
+
+
+
+
+
+
+
+
+
+
+ Your order has been submitted
+
+
+
+ Order No. {orderIDFromSearch}
+
+
+ {Cart.map(cartItem => (
+
+
+ 
+
+
+ {cartItem.name}
+
+
+ Category: {cartItem.category}
+
+
+
+
+
+ ))}
+
+
+
+
+
+ Pickup Information
+ Time Slot
+ {organizePickupTime()} (10:00 am - 12:30 pm)
+ Location
+ 3170 23rd Street, San Francisco, CA 94110
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/orderConfirmationPickUp/styles.ts b/src/app/orderConfirmationPickUp/styles.ts
new file mode 100644
index 00000000..4f2e25a8
--- /dev/null
+++ b/src/app/orderConfirmationPickUp/styles.ts
@@ -0,0 +1,325 @@
+import styled from 'styled-components';
+
+import { Heart } from 'react-feather';
+
+import NavBar from '../../components/NavBarFolder/NavBar';
+
+export const FavoriteDiv = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ margin-bottom: 50px;
+ margin-top: 30px;
+ margin-right: 20px;
+`;
+
+export const OutterFavoriteDiv = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ border-radius: 10px;
+ background: var(--White, #fff);
+ box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
+ width: 800px;
+ max-height: 100%;
+ margin-top: 20px;
+ margin-right: 60px;
+ margin-left: 60px;
+ padding-right: 20px;
+ padding-left: 10px;
+ padding-top: 10px;
+`;
+
+export const ScrollDiv = styled.div`
+ overflow: scroll;
+ width: 100%;
+`;
+
+export const ImageDiv = styled.div`
+ box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.08);
+ width: 150px;
+ height: 150px;
+ margin-left: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`;
+
+export const Wrapper = styled.div`
+ padding: 15px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`;
+
+export const BackDiv = styled.button`
+ display: flex;
+ flex-direction: row;
+ align: center;
+ color: black;
+ background-color: transparent;
+ border: transparent;
+ margin-bottom: 25px;
+ margin-top: 25px;
+ margin-left: 25px;
+`;
+
+export const OutterBox = styled.div`
+ width: 900px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+`;
+
+export const CenterBox = styled.div`
+ display: flex;
+ justify-content: center;
+`;
+
+export const Backtext = styled.p`
+ color: var(--Black, #101010);
+
+ /* Body 1 - Bold, button */
+ font-family: Public Sans;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+`;
+
+export const HeartIcon = styled(Heart)`
+ color: #333286;
+ width: 30px;
+ height: 30px;
+ fill: #333286;
+`;
+
+export const TransparentButton = styled.button`
+ background-color: transparent;
+ border: transparent;
+`;
+
+export const NavBarMovedUP = styled(NavBar)`
+ position: static;
+`;
+
+export const Label = styled.p`
+ margin-top: 20px;
+`;
+
+export const LabelBox1 = styled.div`
+ width: 250px;
+ height: 100%;
+ padding: 20px;
+`;
+
+export const LabelBox = styled.div`
+ width: 150px;
+ height: 100%;
+ padding: 20px;
+ gap: 50px;
+ margin-right: 30px;
+`;
+
+export const HeaderText = styled.h3`
+ color: var(--Black, #101010);
+ margin-top: 30px;
+ margin-bottom: 20px;
+ text: center;
+ color: var(--Black, #101010);
+ font-family: Public Sans;
+ font-size: 35px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+`;
+
+export const AddressText = styled.p`
+ color: var(--Black, #101010);
+ font-family: Public Sans;
+ font-size: 17px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ margin-bottom: 20px;
+ margin-left: 45px;
+`;
+
+export const DateText = styled.p`
+ color: var(--Black, #101010);
+ margin-top: 20px;
+ margin-left: 45px;
+
+ font-family: Public Sans;
+ font-size: 25px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+ text-decoration-line: underline;
+`;
+
+export const PickUpText = styled.p`
+ color: var(--Marine-Blue, #333286);
+ text-align: right;
+ /* Body 2 - Bold */
+ font-family: Public Sans;
+ font-size: 15px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+ margin-top: 15px;
+`;
+
+export const ColDiv = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ width: 750px;
+`;
+
+export const AddressDiv = styled.div`
+ position: relative;
+ display: flex;
+ align-items: flex-end;
+`;
+
+export const TopColumnDiv = styled.div`
+ display: flex;
+ flex-flow: column;
+ align-items: flex-start;
+ justify-content: space-around;
+ margin-bottom: 20px;
+`;
+
+export const OrderSummaryDiv = styled.div`
+ overflow: scroll;
+ width: 350px;
+ height: 300px;
+`;
+
+export const ItemSummaryDiv = styled.div`
+ display: flex;
+ flex-direction: row;
+ margin-bottom: 20px;
+ justify-content: space-between;
+ padding-left: 10px;
+ padding-right: 10px;
+`;
+
+export const OrderTotalDiv = styled.div`
+ height: 50px;
+ padding-top: 10px;
+ width: 350px;
+ padding-left: 0px;
+ border-top: 1px black solid;
+ display: flex;
+ flex-flow: row;
+ justify-content: space-between;
+`;
+
+export const LeftColumnDiv = styled.div`
+ display: flex;
+ flex-flow: column;
+ justify-content: space-evenly;
+ align-items: space-evenly;
+ width: 100%;
+`;
+export const RightColumnDiv = styled.div`
+ display: flex;
+ flex-flow: column;
+ align-items: start;
+ margin-left: 10px;
+ width: 100%;
+`;
+
+export const BackButtonDiv = styled.div`
+ display: flex;
+ flex-direction: row;
+ text-align: left;
+ width: 800px;
+ margin-left: 80px;
+ margin-top: 40px;
+`;
+
+export const WhiteBackgroundDiv = styled.div`
+ border-radius: 8px;
+ background: var(--White, #fff);
+ height: 430px;
+ width: 350px;
+ padding-top: 20px;
+ box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1);
+`;
+
+export const BottomColumnDiv = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: space-evenly;
+ justify-content: space-around;
+ width: 100%;
+ margin-left: 20px;
+ margin-bottom: 30px;
+ gap: 30px;
+`;
+
+export const TextDiv = styled.div`
+ display: flex;
+ flex-direction: row;
+ margin-left: 60px;
+ margin-top: 20px;
+ margin-bottom: 20px;
+`;
+
+export const TextDiv1 = styled.div`
+ display: flex;
+ flex-direction: row;
+ padding: 10px;
+ margin-left: 20px;
+ margin-top: 15px;
+`;
+
+export const PageDiv = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+ width: 100%;
+`;
+
+export const ShippingDetailsDiv = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ border-radius: 10px;
+ background: var(--White, #fff);
+ 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: 205px;
+ margin-bottom: 30px;
+ margin-right: 40px;
+`;
+
+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 CenterDiv = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ padding: 20px;
+`;
diff --git a/src/app/orderHistory/page.tsx b/src/app/orderHistory/page.tsx
new file mode 100644
index 00000000..e02c8e1e
--- /dev/null
+++ b/src/app/orderHistory/page.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { Heading1, Body1 } from '@/styles/fonts';
+import OrderDetailsWithProducts from '../../components/OrderHistory/OrderHistoryBox';
+import { fetchOrderIdsByUserIdSorted } from '../../api/supabase/queries/order_queries';
+import Footer from '../../components/FooterFolder/Footer';
+import {
+ OrderHistoryContainer,
+ OutterBox,
+ NavBarMovedUP,
+ Fullscreen,
+} from './styles';
+import BackButton from '../../components/BackButton/BackButton';
+
+function OrderHistory() {
+ const [orderIds, setOrderIds] = useState+
+
+ Quantity:
+
+
+ {cartItem.quantity}
+
+
+
+ Order History
+
+
+
+
+
+
+ {formatDate(order?.created_at)}
+
+ {' '}
+ {order?.order_status} {' '}
+
+
+
+ {orders.map(product => (
+
+ 
+
+ {product.name}
+ Category: {product.category}
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/src/app/orderPage/styles.ts b/src/app/orderPage/styles.ts
new file mode 100644
index 00000000..c2c236bb
--- /dev/null
+++ b/src/app/orderPage/styles.ts
@@ -0,0 +1,141 @@
+import styled from 'styled-components';
+
+import { Heart } from 'react-feather';
+
+import NavBar from '../../components/NavBarFolder/NavBar';
+
+export const FavoriteDiv = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: start;
+ justify-content: space-around;
+ width: 100%;
+ margin-bottom: 50px;
+ margin-top: 30px;
+`;
+
+export const OutterFavoriteDiv = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ border-radius: 10px;
+ background: var(--White, #fff);
+ box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
+ width: 800px;
+ height: 700px;
+ overflow: scroll;
+ margin-top: 20px;
+`;
+
+export const BackDiv = styled.button`
+ display: flex;
+ flex-direction: row;
+ align: center;
+ color: black;
+ background-color: transparent;
+ border: transparent;
+ margin-bottom: 25px;
+ margin-top: 25px;
+`;
+
+export const OutterBox = styled.div`
+ width: 800px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ margin-bottom: 100px;
+`;
+
+export const Heading = styled.h1`
+ font-family: 'Public Sans', sans-serif;
+ color: black;
+ margin-bottom: 0px;
+ font-size: 30px;
+`;
+
+export const OutterDiv = styled.div`
+ display: flex;
+ flex-direction: row;
+ gap: 200px;
+ width: 800px;
+`;
+
+export const BackButtonDiv = styled.div`
+ display: flex;
+ flex-direction: row;
+ gap: 200px;
+ margin-bottom: 55px;
+ text-align: left;
+ width: 800px;
+`;
+
+export const Backtext = styled.p`
+ padding-top: 5px;
+`;
+
+export const HeartIcon = styled(Heart)`
+ color: #333286;
+ width: 30px;
+ height: 30px;
+ fill: #333286;
+ margin-right: 25px;
+`;
+
+export const TransparentButton = styled.button`
+ background-color: transparent;
+ border: transparent;
+`;
+
+export const NavBarMovedUP = styled(NavBar)`
+ position: relative;
+`;
+
+export const ProductNameDiv = styled.div`
+ width: 350px;
+ height: 100%;
+ gap: 40px;
+`;
+
+export const ViewItem = styled.button`
+ background: #1b3679;
+ color: #fbfbfb;
+ text-align: center;
+ width: 132px;
+ height: 28px;
+ flex-shrink: 0;
+ margin-top: 26px;
+ padding-top: 3px;
+ padding-right: 10px;
+ padding-left: 10px;
+ padding-bottom: 3px;
+ border: none;
+ border-radius: 5px;
+ line-height: normal;
+ border-radius: 14px;
+`;
+
+export const StatusButton = styled.button`
+ margin-left: auto;
+ margin-right: 0;
+ color: black;
+ text-align: center;
+ width: 210px;
+ height: 30px;
+ flex-shrink: 0;
+ padding-top: 3px;
+ padding-right: 10px;
+ padding-left: 10px;
+ padding-bottom: 3px;
+ border: none;
+ border-radius: 16.5px;
+ background: var(--Baby-Blue, #c7ddff);
+`;
+
+export const Body1Bold = styled.p`
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+`;
diff --git a/src/app/page.module.css b/src/app/page.module.css
new file mode 100644
index 00000000..6676d2c6
--- /dev/null
+++ b/src/app/page.module.css
@@ -0,0 +1,229 @@
+.main {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ padding: 6rem;
+ min-height: 100vh;
+}
+
+.description {
+ display: inherit;
+ justify-content: inherit;
+ align-items: inherit;
+ font-size: 0.85rem;
+ max-width: var(--max-width);
+ width: 100%;
+ z-index: 2;
+ font-family: var(--font-mono);
+}
+
+.description a {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.description p {
+ position: relative;
+ margin: 0;
+ padding: 1rem;
+ background-color: rgba(var(--callout-rgb), 0.5);
+ border: 1px solid rgba(var(--callout-border-rgb), 0.3);
+ border-radius: var(--border-radius);
+}
+
+.code {
+ font-weight: 700;
+ font-family: var(--font-mono);
+}
+
+.grid {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(25%, auto));
+ max-width: 100%;
+ width: var(--max-width);
+}
+
+.card {
+ padding: 1rem 1.2rem;
+ border-radius: var(--border-radius);
+ background: rgba(var(--card-rgb), 0);
+ border: 1px solid rgba(var(--card-border-rgb), 0);
+ transition: background 200ms, border 200ms;
+}
+
+.card span {
+ display: inline-block;
+ transition: transform 200ms;
+}
+
+.card h2 {
+ font-weight: 600;
+ margin-bottom: 0.7rem;
+}
+
+.card p {
+ margin: 0;
+ opacity: 0.6;
+ font-size: 0.9rem;
+ line-height: 1.5;
+ max-width: 30ch;
+}
+
+.center {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ padding: 4rem 0;
+}
+
+.center::before {
+ background: var(--secondary-glow);
+ border-radius: 50%;
+ width: 480px;
+ height: 360px;
+ margin-left: -400px;
+}
+
+.center::after {
+ background: var(--primary-glow);
+ width: 240px;
+ height: 180px;
+ z-index: -1;
+}
+
+.center::before,
+.center::after {
+ content: '';
+ left: 50%;
+ position: absolute;
+ filter: blur(45px);
+ transform: translateZ(0);
+}
+
+.logo {
+ position: relative;
+}
+/* Enable hover only on non-touch devices */
+@media (hover: hover) and (pointer: fine) {
+ .card:hover {
+ background: rgba(var(--card-rgb), 0.1);
+ border: 1px solid rgba(var(--card-border-rgb), 0.15);
+ }
+
+ .card:hover span {
+ transform: translateX(4px);
+ }
+}
+
+@media (prefers-reduced-motion) {
+ .card:hover span {
+ transform: none;
+ }
+}
+
+/* Mobile */
+@media (max-width: 700px) {
+ .content {
+ padding: 4rem;
+ }
+
+ .grid {
+ grid-template-columns: 1fr;
+ margin-bottom: 120px;
+ max-width: 320px;
+ text-align: center;
+ }
+
+ .card {
+ padding: 1rem 2.5rem;
+ }
+
+ .card h2 {
+ margin-bottom: 0.5rem;
+ }
+
+ .center {
+ padding: 8rem 0 6rem;
+ }
+
+ .center::before {
+ transform: none;
+ height: 300px;
+ }
+
+ .description {
+ font-size: 0.8rem;
+ }
+
+ .description a {
+ padding: 1rem;
+ }
+
+ .description p,
+ .description div {
+ display: flex;
+ justify-content: center;
+ position: fixed;
+ width: 100%;
+ }
+
+ .description p {
+ align-items: center;
+ inset: 0 0 auto;
+ padding: 2rem 1rem 1.4rem;
+ border-radius: 0;
+ border: none;
+ border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
+ background: linear-gradient(
+ to bottom,
+ rgba(var(--background-start-rgb), 1),
+ rgba(var(--callout-rgb), 0.5)
+ );
+ background-clip: padding-box;
+ backdrop-filter: blur(24px);
+ }
+
+ .description div {
+ align-items: flex-end;
+ pointer-events: none;
+ inset: auto 0 0;
+ padding: 2rem;
+ height: 200px;
+ background: linear-gradient(
+ to bottom,
+ transparent 0%,
+ rgb(var(--background-end-rgb)) 40%
+ );
+ z-index: 1;
+ }
+}
+
+/* Tablet and Smaller Desktop */
+@media (min-width: 701px) and (max-width: 1120px) {
+ .grid {
+ grid-template-columns: repeat(2, 50%);
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ .vercelLogo {
+ filter: invert(1);
+ }
+
+ .logo {
+ filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
+ }
+}
+
+@keyframes rotate {
+ from {
+ transform: rotate(360deg);
+ }
+ to {
+ transform: rotate(0deg);
+ }
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 00000000..ad5ea152
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,88 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import supabase from '@/api/supabase/createClient';
+import { Body1, Heading1 } from '@/styles/fonts';
+import LoginForm from '@/components/LoginFormFolder/LoginForm';
+
+import {
+ Fullscreen,
+ LoginBox,
+ LoginContent,
+ WelcomeSign,
+ Button,
+ ErrorMessage,
+ EyeOffIcon,
+ EyeIcon,
+} from './login/styles';
+
+export default function App() {
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [errorMessage, setErrorMessage] = useState('');
+ const [isError, setIsError] = useState
+
+
+ router.push('/cart')}>
+ Back
+
+
+
+ Pick Up
+
+ Name
+
+ {Profile?.first_name} {Profile?.last_name}
+
+ Phone Number
+ {Profile?.phone_numbers}
+
+
+
+ {
+ if (selectedPickupIndex !== 0) {
+ await updateCartPickupId(selectedPickupIndex); // TODO double check if this is correct
+ const orderID = await fetchCartIdFromUser();
+ await updateOrderStatus(orderID, OrderStatus.Submitted);
+ await createOrder();
+ const newestOrder = await fetchCartIdFromUser();
+ await updateOrderStatus(newestOrder, OrderStatus.inProgress);
+ const queryString = querystring.stringify({ orderID });
+ router.push(`/orderConfirmationPickUp?${queryString}`);
+ }
+ if (selectedPickupIndex === 0) {
+ toast(`You must select a pick-up date!`);
+ toast.clearWaitingQueue();
+ }
+ }}
+ >
+ Checkout
+
+
+
+
+ );
+}
diff --git a/src/app/pickup/styles.ts b/src/app/pickup/styles.ts
new file mode 100644
index 00000000..af517b07
--- /dev/null
+++ b/src/app/pickup/styles.ts
@@ -0,0 +1,272 @@
+import styled from 'styled-components';
+
+import { ToastContainer } from 'react-toastify';
+import COLORS from '../../styles/colors';
+
+import NavBar from '../../components/NavBarFolder/NavBar';
+
+import Footer from '../../components/FooterFolder/Footer';
+
+export const PickupContainer = styled.div`
+ width: 730px;
+ height: 400px;
+ padding-left: 22px;
+`;
+
+export const PickupContent = styled.div`
+ width: 730px;
+ height: 50px;
+ border-radius: 4px;
+ margin-top: 14px;
+ margin-bottom: 14px;
+ border: 1px solid ${COLORS.neutralGrey};
+ background: ${COLORS.lightGrey};
+ display: flex; /* Use flexbox */
+ align-items: center; /* Center vertically */
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ padding-left: 20px;
+`;
+
+export const PickupTimeButton = styled.button<{ $isSelected?: boolean }>`
+ background: ${props =>
+ props.$isSelected ? COLORS.periwinkle : COLORS.lightGrey};
+ height: 124px;
+ width: 242px;
+ margin-top: 20px;
+ margin-right: 31px;
+ margin-bottom: 20px;
+
+ border: none;
+ border-radius: 5px;
+
+ color: black;
+ text-align: center;
+ font-family: 'Public Sans', sans-serif;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+
+ box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1);
+`;
+
+export const FavoriteDiv = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: start;
+ justify-content: space-around;
+ width: 100%;
+ margin-bottom: 50px;
+ margin-top: 30px;
+`;
+
+export const OutterFavoriteDiv = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ border-radius: 10px;
+
+ width: 800px;
+ height: 500px;
+ overflow: scroll;
+ margin-top: 10px;
+`;
+
+export const BackDiv = styled.button`
+ display: flex;
+ flex-direction: row;
+ align: center;
+ color: black;
+ background-color: transparent;
+ border: transparent;
+ margin-bottom: 25px;
+ margin-top: 25px;
+`;
+
+export const OutterBox = styled.div`
+ width: 900px;
+ margin-left: 300px;
+`;
+
+export const Backtext = styled.p`
+ padding-top: 5px;
+`;
+
+export const NavBarZeroIndex = styled(NavBar)`
+ z-index: 0;
+ position: fixed;
+ margin-bottom: 100px;
+`;
+
+export const FooterMoved = styled(Footer)`
+ transform: translateY(300px);
+`;
+
+export const TransparentButton = styled.button`
+ background-color: transparent;
+ border: transparent;
+`;
+
+export const NavBarMovedUP = styled(NavBar)`
+ position: static;
+`;
+
+export const ButtonsWrapper = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 200px;
+ height: 50px;
+ margin-top: 20px;
+`;
+
+export const QtyText = styled.div`
+ margin-top: 30px;
+ margin-right: 20px;
+ margin-bottom: 5px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ text-align: right;
+`;
+
+export const ItemText = styled.div`
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+`;
+
+export const QuantityText = styled.div`
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ text-align: right;
+`;
+
+export const Label = styled.p`
+ margin-top: 20px;
+`;
+
+export const LabelBox = styled.div`
+ width: 150px;
+ height: 100%;
+`;
+
+export const PageDiv = styled.div`
+ display: flex;
+ flex-flow: row;
+ width: 100%;
+ justify-content: space-around;
+`;
+
+export const OrderSummaryDiv = styled.div`
+ overflow: scroll;
+ width: 350px;
+ height: 300px;
+`;
+
+export const ItemSummaryDiv = styled.div`
+ display: flex;
+ flex-direction: row;
+ margin-bottom: 20px;
+ justify-content: space-between;
+ padding-left: 10px;
+ padding-right: 10px;
+`;
+
+export const OrderTotalDiv = styled.div`
+ height: 50px;
+ padding-top: 10px;
+ width: 350px;
+ padding-left: 0px;
+ border-top: 1px black solid;
+ display: flex;
+ flex-flow: row;
+ justify-content: space-between;
+`;
+
+export const ForceColumnDiv = styled.div`
+ display: flex;
+ flex-flow: column;
+ margin-left: 50px;
+`;
+
+export const CheckoutButton = styled.button`
+ background: #1b3679;
+
+ height: 40px;
+ margin-top: 20px;
+
+ border: none;
+ border-radius: 5px;
+
+ color: var(--White, #fff);
+ text-align: center;
+ font-family: 'Public Sans', sans-serif;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+`;
+
+export const Qty = styled.p`
+ width: 100%;
+ padding-left: 290px;
+`;
+
+export const OrderButton = styled.button`
+ margin-top: 26px;
+ width: 350px;
+ height: 50px;
+ flex-shrink: 0;
+ align-items: center;
+ background: ${COLORS.navy};
+ border-radius: 8px;
+ color: ${COLORS.white};
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+`;
+
+export const RightColumnDiv = styled.div`
+ display: flex;
+ flex-flow: column;
+ margin-left: 150px;
+ margin-top: 100px;
+`;
+
+export const WhiteBackgroundDiv = styled.div`
+ border-radius: 8px;
+ background: var(--White, #fff);
+ height: 430px;
+ width: 350px;
+ padding-top: 20px;
+
+ box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1);
+`;
+
+export const HeaderShiftRight = styled.h2`
+ margin-right: 30px;
+`;
+
+export const PShiftRight = styled.p`
+ margin-right: 30px;
+`;
+
+export const HeaderShiftLeft = styled.h2`
+ margin-left: 15px;
+`;
+
+export const PShiftLeft = styled.p`
+ margin-left: 15px;
+`;
+
+export const ToastPopUP = styled(ToastContainer)`
+ position: fixed;
+ z-index: 100;
+ transform: translatey(90px);
+`;
diff --git a/src/app/profileScreen/individualItem.tsx b/src/app/profileScreen/individualItem.tsx
new file mode 100644
index 00000000..69288d69
--- /dev/null
+++ b/src/app/profileScreen/individualItem.tsx
@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react';
+
+import { Body1Bold, Body2, Body3 } from '@/styles/fonts';
+
+import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries';
+import { HeartIcon, Hover, FavoriteDiv, ProductNameDiv } from './styles';
+
+import { addOrRemoveProductFromFavorite } from '../../api/supabase/queries/user_queries';
+
+import { Product } from '../../schema/schema';
+import { TransparentButton } from '../favorites/styles';
+
+export default function IndividualItem(props: {
+ favorite: Product;
+ setFavorites: (category: Product[]) => void;
+ Favorites: Product[];
+}) {
+ const { favorite, Favorites, setFavorites } = props;
+ const [hovering, setHovering] = useState(false);
+
+ // useEffect(() => {
+ // async function changeCategory() {
+ // try {
+ // favorite.category = await convertButtonNumberToCategory(
+ // favorite.category,
+ // );
+ // } catch (error) {
+ // // console.error(error);
+ // }
+ // }
+
+ // changeCategory();
+ // }, []);
+
+ async function clickFunctions(props2: { fav: Product }) {
+ const { fav } = props2;
+ addOrRemoveProductFromFavorite(fav, false);
+ setFavorites(Favorites.filter(Prod => Prod.id !== fav.id));
+ }
+
+ return (
+
+ Time Slot
+
+
+ {' '}
+ Pick Up times: 10:00 AM - 12:00 PM {' '}
+
+
+ Location: 3170 23rd Street, San Francisco, CA 94110
+
+
+ {Time.map(time => (
+ handleButtonClick(time.id)}
+ >
+
+ ))}
+
+
+ {String(
+ DateInfoComponent({ date: time.start_time })
+ ?.getDayOfWeek,
+ )}
+
+
+ {
+ DateInfoComponent({ date: time.start_time })
+ ?.dateAsMonthDay
+ }
+
+
+
+ Order No. {Orders[0].id}
+
+
+ {fD}
+
+
+ {firstOrderProducts.map(product => (
+
+
+
+ {icon}
+
+ {Orders[0].order_status}
+
+
+
+
+
+ ))}
+ Loading User
; + } + return ( +
+
+ Shop {CategoryWord}
+
+
+
+
+ );
+}
diff --git a/src/app/storefront/productButtons.tsx b/src/app/storefront/productButtons.tsx
new file mode 100644
index 00000000..23b99371
--- /dev/null
+++ b/src/app/storefront/productButtons.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+
+import { fetchButtonCategories } from '@/api/supabase/queries/button_queries';
+import {
+ CategoryButton,
+ CategoryButtonLabel,
+ IndividualContainer,
+} from './styles';
+
+import {
+ fetchUserProducts,
+ filterUserProducts,
+} from '../../api/supabase/queries/product_queries';
+
+import { Product } from '../../schema/schema';
+
+export default function ProductButtons(props: {
+ value: string;
+ setFiltredProducts: (category: Product[]) => void;
+ content: string;
+ setCategoryWord: (word: string) => void;
+ index: number;
+ setClickedButton: (clicked: number) => void;
+ clickedButton: number;
+}) {
+ const {
+ value,
+ content,
+ setFiltredProducts,
+ setCategoryWord,
+ index,
+ setClickedButton,
+ clickedButton,
+ } = props;
+
+ async function applyFilter(
+ e: React.MouseEvent{District}
+{Phone}
+
+
+ {text}
+
+
+
+
+
+ );
+}
diff --git a/src/components/NavBarFolder/NavBar.tsx b/src/components/NavBarFolder/NavBar.tsx
new file mode 100644
index 00000000..c0f92fd5
--- /dev/null
+++ b/src/components/NavBarFolder/NavBar.tsx
@@ -0,0 +1,62 @@
+import Image from 'next/image';
+import React, { useEffect, useState } from 'react';
+
+import { Body2, Body2Bold } from '@/styles/fonts';
+import { totalNumberOfItemsInCart } from '../../api/supabase/queries/cart_queries';
+
+import {
+ NavBarComp,
+ ButtonsDiv,
+ CartTotalCircle,
+ UserProfileIcon,
+ ShoppingCartIcon,
+ IconWithLabelLink,
+} from './styles';
+
+export default function NavBar({ ...rest }) {
+ const [data, setData] = useState(0);
+ const [isZero, setIsZero] = useState(true);
+
+ useEffect(() => {
+ const fetchData = async () => {
+ setData(await totalNumberOfItemsInCart());
+ };
+ fetchData();
+ }, []);
+
+ useEffect(() => {
+ const changeData = async () => {
+ if (data > 0) {
+ setIsZero(false);
+ }
+ };
+ changeData();
+ }, [data]);
+
+ return (
+ Loading...
;
+ }
+
+ if (!order) {
+ return
+
+ {formatDate(date)}
+
+
+ Order Rejected
+
+
+ );
+ }
+ if (order.order_status === OrderStatus.Complete) {
+ return (
+
+ Order No. {orderNumber}
+ viewOrder(orderNumber)}>
+ View Order
+
+
+
+
+
+ {formatDate(date)}
+
+
+ Order Approved
+
+
+ );
+ }
+ if (order.order_status === OrderStatus.Submitted) {
+ return (
+
+ Order No. {orderNumber}
+ viewOrder(orderNumber)}>
+ View Order
+
+
+
+
+
+ {formatDate(date)}
+
+
+ Order Submitted
+
+
+ );
+ }
+ return
+ Order No. {orderNumber}
+ viewOrder(orderNumber)}>
+ View Order
+
+
+
+ ; +} diff --git a/src/components/OrderHistory/styles.ts b/src/components/OrderHistory/styles.ts new file mode 100644 index 00000000..fec7e6c7 --- /dev/null +++ b/src/components/OrderHistory/styles.ts @@ -0,0 +1,218 @@ +// styles.ts +import styled from 'styled-components'; +import { X, Check, Loader } from 'react-feather'; +import COLORS from '../../styles/colors'; + +export const containerStyle = styled.div` + width: 250px; // This width might be too small if it's meant to contain the OrderDiv + height: 250px; + margin-right: auto; // Center the container if that's the intention + margin-left: auto; // Center the container if that's the intention + color: ${COLORS.black}; + font-family: Public Sans; + font-size: 20px; + font-style: normal; + line-height: normal; +`; + +export const imageGalleryStyle = { + display: 'flex', + overflowX: 'auto', + gap: '10px', + // Add more styles as needed +}; + +export const viewButtonStyle = { + marginTop: '10px', + backgroundColor: 'blue', + color: 'white', + padding: '10px 20px', + cursor: 'pointer', + // Add more styles as needed +}; + +export const ViewOrderButton = styled.button` + overflow: hidden; + color: var(--Black, #101010); + text-align: right; + text-overflow: ellipsis; + line-height: normal; + background: none; + border: none; + cursor: pointer; + display: flex; + align-items: center; + &:hover { + text-decoration: underline; + } +`; + +export const ArrowIcon = styled.div` + width: 0; + height: 0; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 5px solid var(--Black, #101010); + margin-left: 5px; +`; + +export const OrderDiv = styled.div` + display: flex; + flex-direction: row; + align-items: start; + justify-content: space-between; // Changed to space-between to align items to the edges + width: 100%; + margin-bottom: 50px; + margin-top: 30px; + padding-left: 30px; // Adjust as necessary to align with the left edge + padding-right: 130px; // Adjust as necessary to align with the right edge +`; + +export const OrderApproved = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; /* Assuming you want the checkmark and text to be at the start */ + background-color: #cee8be; /* Or the exact color from the image */ + color: white; + color: var(--Black, #101010); + font-family: 'Public Sans'; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: normal; + + border-radius: 20px; /* Adjust for the exact curvature you want */ + gap: 14px; /* Space between the checkmark and text */ + width: 245px; + margin-top: 18px; + padding-left: 10px; /* Adjust as necessary to align with the left edge */ + padding-right: 10px; /* Adjust as necessary to align with the right edge */ + padding-top: 5px; /* Adjust as necessary to align with the top edge */ + padding-bottom: 5px; /* Adjust as necessary to align with the bottom edge */ +`; + +export const OrderReject = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; /* Assuming you want the checkmark and text to be at the start */ + background-color: #fdd; /* Or the exact color from the image */ + color: white; + color: var(--Black, #101010); + font-family: 'Public Sans'; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: normal; + + border-radius: 20px; /* Adjust for the exact curvature you want */ + gap: 14px; /* Space between the checkmark and text */ + width: 245px; + margin-top: 18px; + padding-left: 10px; /* Adjust as necessary to align with the left edge */ + padding-right: 10px; /* Adjust as necessary to align with the right edge */ + padding-top: 5px; /* Adjust as necessary to align with the top edge */ + padding-bottom: 5px; /* Adjust as necessary to align with the bottom edge */ +`; + +export const OrderReady = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; /* Assuming you want the checkmark and text to be at the start */ + background-color: #fdd; /* Or the exact color from the image */ + color: white; + color: var(--Black, #101010); + font-family: 'Public Sans'; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: normal; + + border-radius: 20px; /* Adjust for the exact curvature you want */ + gap: 14px; /* Space between the checkmark and text */ + width: 245px; + margin-top: 18px; + padding-left: 10px; /* Adjust as necessary to align with the left edge */ + padding-right: 10px; /* Adjust as necessary to align with the right edge */ + padding-top: 5px; /* Adjust as necessary to align with the top edge */ + padding-bottom: 5px; /* Adjust as necessary to align with the bottom edge */ +`; + +export const GalleryContainer = styled.div` + display: flex; + overflow-x: auto; + gap: 10px; + padding: 10px; +`; + +export const ImageContainer = styled.div` + flex: 0 0 auto; + background-color: var(--Greyish, #e6e6e6); + width: 124px; + height: 124px; + display: flex; + justify-content: center; + align-items: center; +`; + +export const GalleryImage = styled.img` + height: 115px; + width: 115px; + display: block; +`; + +export const RowDiv = styled.div` + width: 700px; + height: 300px; + margin-bottom: 20px; +`; + +export const OrderStatusDiv = styled.div` + width: 300px; + height: 35px; + background: var(--Light-Red, #fdd); + display: flex; + justify-content: center; + align-items: center; + border-radius: 20px; + margin-top: 15px; +`; + +export const OrderStatusApprovedDiv = styled.div` + width: 300px; + height: 35px; + background: var(--Lime-Green, #cee8be); + display: flex; + justify-content: center; + align-items: center; + border-radius: 20px; + margin-top: 15px; +`; + +export const OrderStatusSubmittedDiv = styled.div` + width: 300px; + height: 35px; + background: var(--Baby-Blue, #c7ddff); + display: flex; + justify-content: center; + align-items: center; + border-radius: 20px; + margin-top: 15px; +`; + +export const CrossStyled = styled(X)` + stroke-width: 5px; + margin-right: 10px; +`; + +export const CheckStyled = styled(Check)` + stroke-width: 5px; + margin-right: 10px; +`; + +export const LoaderStyled = styled(Loader)` + stroke-width: 3px; + margin-right: 10px; +`; diff --git a/src/components/OrderSummaryFolder/OrderSummary.tsx b/src/components/OrderSummaryFolder/OrderSummary.tsx new file mode 100644 index 00000000..9cf046cc --- /dev/null +++ b/src/components/OrderSummaryFolder/OrderSummary.tsx @@ -0,0 +1,48 @@ +'use client'; + +import { Body1, Heading2Bold, Body1Bold, Body2Light } from '@/styles/fonts'; +import { + OrderSummaryDiv, + HeaderShiftRight, + OrderTotalDiv, + WhiteBackgroundDiv, + AlignItemCenter, + ItemSummaryDiv, + OrderSummaryHeaderDiv, + ItemNameDiv, +} from './styles'; +import { ProductWithQuantity } from '../../schema/schema'; + +export default function OrderSummary(props: { + cart: ProductWithQuantity[]; + numberOfItems: number; +}) { + const { cart, numberOfItems } = props; + + return ( +
+
+ );
+}
diff --git a/src/components/PickUpFolder/PickupInputs.tsx b/src/components/PickUpFolder/PickupInputs.tsx
new file mode 100644
index 00000000..553c022d
--- /dev/null
+++ b/src/components/PickUpFolder/PickupInputs.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import { useState } from 'react';
+import { FormHeaders } from '../../app/login/styles';
+import { Input } from '../InputFieldsFolder/styles';
+
+export default function PickupInputs(props: {
+ text: string;
+ placeholder: string;
+ inputType: string;
+}) {
+ const { text, placeholder, inputType } = props;
+ const [inputValue, setInputValue] = useState('');
+
+ const handleChange = (e: React.ChangeEvent
+ {text}
+
+
+