Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cc 32 request purchasing page #73

Merged
merged 6 commits into from
Dec 3, 2023
Merged

Cc 32 request purchasing page #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9505d5f
purchase request page
hmcclew Nov 22, 2023
6027b44
account side bar
hmcclew Nov 22, 2023
de5a647
purchase success page
hmcclew Nov 22, 2023
7a1d75b
update nav bar
hmcclew Nov 22, 2023
fdf7f6e
text color updates
hmcclew Nov 22, 2023
109a92a
svgs not inline
hmcclew Nov 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions client/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import {AdminProvider} from "./Context/AdminContext.tsx";
import GiftManagementPage from "./pages/GiftManagementPage.tsx";
import LoginPage from "./pages/LoginPage.tsx";
import SignUpPage from "./pages/SignUpPage.tsx";
import RequestsPurchasingPage from "./pages/RequestPurchasingPage.tsx";
import RequestPurchaseSuccess from "./pages/RequestPurchaseSuccess.tsx";

function App() {
return (
Expand Down Expand Up @@ -38,10 +40,18 @@ function App() {
path="/signup/"
element={<SignUpPage/>}
/>
<Route
path="/purchase-requests/"
element={<RequestsPurchasingPage/>}
/>
<Route
path="/login/"
element={<LoginPage/>}
/>
<Route
path="/success/"
element={<RequestPurchaseSuccess/>}
/>
</Routes>
</Router>
);
Expand Down
175 changes: 175 additions & 0 deletions client/src/components/AccountSideBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
import { useState } from 'react';

const AccountSideBar = () => {
const [isGiftingOpen, setIsGiftingOpen] = useState(false);
const [isBudgetOpen, setIsBudgetOpen] = useState(false);
const [isCalendarOpen, setIsCalendarOpen] = useState(false);
const [isPurchaseGiftsClicked, setIsPurchaseGiftsClicked] = useState(false);
const [isGifteesClicked, setIsGifteesClicked] = useState(false);
const [isGiftRequestHistoryClicked, setIsGiftRequestHistoryClicked] = useState(false);

const toggleGifting = () => {
setIsGiftingOpen(!isGiftingOpen);
};

const toggleBudget = () => {
setIsBudgetOpen(!isBudgetOpen);
};

const toggleCalendar = () => {
setIsCalendarOpen(!isCalendarOpen);
};

const purchaseGifts = () => {
setIsPurchaseGiftsClicked(!isPurchaseGiftsClicked);
};


const giftRequestHistory = () => {
setIsGiftRequestHistoryClicked(!isGiftRequestHistoryClicked);;
};

const viewGiftees = () => {
setIsGifteesClicked(!isGifteesClicked);;
};


return (
<div className="flex flex-col bg-FBF2EB" style={{ width: '366px'}}>
<div style={{ fontFamily: 'The Seasons', fontSize: '36px', marginLeft: '40px', marginTop: "50px" }}>
Account
<div className="flex flex-row items-center" style={{ fontFamily: 'The Seasons', fontSize: '24px', marginTop: '50px' }}>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#DFB2AA"/>
<path d="M24 16C25.0609 16 26.0783 16.4214 26.8284 17.1716C27.5786 17.9217 28 18.9391 28 20C28 21.0609 27.5786 22.0783 26.8284 22.8284C26.0783 23.5786 25.0609 24 24 24C22.9391 24 21.9217 23.5786 21.1716 22.8284C20.4214 22.0783 20 21.0609 20 20C20 18.9391 20.4214 17.9217 21.1716 17.1716C21.9217 16.4214 22.9391 16 24 16ZM24 26C28.42 26 32 27.79 32 30V32H16V30C16 27.79 19.58 26 24 26Z" fill="#32211E"/>
</svg>
<span style={{ marginLeft: '18px' }}>John Doe</span>
</div>
<div className="flex flex-row items-center" style={{ fontFamily: 'The Seasons', fontSize: '24px', marginLeft: '20px', marginTop: '40px' }}>
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.5801 4.60547H16.4001C16.5101 4.29547 16.5801 3.95547 16.5801 3.60547C16.5801 1.94547 15.2401 0.605469 13.5801 0.605469C12.5301 0.605469 11.6201 1.14547 11.0801 1.95547L10.5801 2.62547L10.0801 1.94547C9.54008 1.14547 8.63008 0.605469 7.58008 0.605469C5.92008 0.605469 4.58008 1.94547 4.58008 3.60547C4.58008 3.95547 4.65008 4.29547 4.76008 4.60547H2.58008C1.47008 4.60547 0.590078 5.49547 0.590078 6.60547L0.580078 17.6055C0.580078 18.7155 1.47008 19.6055 2.58008 19.6055H18.5801C19.6901 19.6055 20.5801 18.7155 20.5801 17.6055V6.60547C20.5801 5.49547 19.6901 4.60547 18.5801 4.60547ZM13.5801 2.60547C14.1301 2.60547 14.5801 3.05547 14.5801 3.60547C14.5801 4.15547 14.1301 4.60547 13.5801 4.60547C13.0301 4.60547 12.5801 4.15547 12.5801 3.60547C12.5801 3.05547 13.0301 2.60547 13.5801 2.60547ZM7.58008 2.60547C8.13008 2.60547 8.58008 3.05547 8.58008 3.60547C8.58008 4.15547 8.13008 4.60547 7.58008 4.60547C7.03008 4.60547 6.58008 4.15547 6.58008 3.60547C6.58008 3.05547 7.03008 2.60547 7.58008 2.60547ZM18.5801 17.6055H2.58008V15.6055H18.5801V17.6055ZM18.5801 12.6055H2.58008V6.60547H7.66008L5.58008 9.43547L7.20008 10.6055L9.58008 7.36547L10.5801 6.00547L11.5801 7.36547L13.9601 10.6055L15.5801 9.43547L13.5001 6.60547H18.5801V12.6055Z" fill="#A65A5A"/>
</svg>
<button
style={{
background: 'none',
border: 'none',
cursor: 'pointer',
fontFamily: 'The Seasons',
fontSize: '24px',
marginLeft: '20px',
}}
onClick={toggleGifting}
>
Gifting
</button>
</div>
{isGiftingOpen && (
<div
style={{
background: '#FBF2EB',
padding: '10px',
fontSize: '16px',
}}
>
<div style={{marginTop: "10px"}}>
<button
style={{
background: isPurchaseGiftsClicked ? '#DFB2AA' : 'none',
width: "265px",
borderLeft: isPurchaseGiftsClicked ? '6px solid #A65A5A' : 'none',
fontWeight: isPurchaseGiftsClicked ? 'bold' : 'normal',
}}
onClick={purchaseGifts} >
Purchase Gift Requests
</button>
</div>
<div style={{marginTop: "10px"}}><button
style={{
background: isGiftRequestHistoryClicked ? '#DFB2AA' : 'none',
width: "265px",
borderLeft: isGiftRequestHistoryClicked ? '6px solid #A65A5A' : 'none',
fontWeight: isGiftRequestHistoryClicked ? 'bold' : 'normal',
paddingRight: '20px',
}}
onClick={giftRequestHistory} >
Gift Request History
</button></div>
<div style={{marginTop: "10px"}}>
<button
style={{
background: isGifteesClicked ? '#DFB2AA' : 'none',
width: "265px",
borderLeft: isGifteesClicked ? '6px solid #A65A5A' : 'none',
fontWeight: isGifteesClicked ? 'bold' : 'normal',
paddingRight: '105px',
}}
onClick={viewGiftees} >
Giftees
</button>
</div>
</div>
)}
<div className="flex flex-row items-center" style={{ fontFamily: 'The Seasons', fontSize: '24px', marginLeft: '20px', marginTop: '40px' }}>
<svg width="11" height="19" viewBox="0 0 11 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.78444 8.33889C3.38833 7.71611 2.61778 7.07222 2.61778 6.06944C2.61778 4.91889 3.68389 4.11667 5.46778 4.11667C7.34667 4.11667 8.04333 5.01389 8.10667 6.33333H10.4394C10.3656 4.51778 9.25722 2.85 7.05111 2.31167V0H3.88444V2.28C1.83667 2.72333 0.19 4.05333 0.19 6.09056C0.19 8.52889 2.20611 9.74278 5.15111 10.45C7.79 11.0833 8.31778 12.0122 8.31778 12.9939C8.31778 13.7222 7.80056 14.8833 5.46778 14.8833C3.29333 14.8833 2.43833 13.9122 2.32222 12.6667H0C0.126667 14.9783 1.85778 16.2767 3.88444 16.7094V19H7.05111V16.7306C9.10944 16.34 10.7456 15.1472 10.7456 12.9833C10.7456 9.98556 8.18056 8.96167 5.78444 8.33889Z" fill="#32211E"/>
</svg>
<button
style={{
background: 'none',
border: 'none',
cursor: 'pointer',
fontFamily: 'The Seasons',
fontSize: '24px',
marginLeft: '30px',
}}
onClick={toggleBudget}
>
Budgets
</button>
</div>
{isBudgetOpen && (
<div
style={{
background: '#FBF2EB',
padding: '10px',
fontSize: '16px',
}}
>
{/*Add dropdown types here*/}
</div>
)}
<div className="flex flex-row items-center" style={{ fontFamily: 'The Seasons', fontSize: '24px', marginLeft: '20px', marginTop: '40px' }}>
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.5455 1.72727H14.6818V0H12.9545V1.72727H4.31818V0H2.59091V1.72727H1.72727C0.777273 1.72727 0 2.50455 0 3.45455V17.2727C0 18.2227 0.777273 19 1.72727 19H15.5455C16.4955 19 17.2727 18.2227 17.2727 17.2727V3.45455C17.2727 2.50455 16.4955 1.72727 15.5455 1.72727ZM15.5455 17.2727H1.72727V6.04545H15.5455V17.2727Z" fill="#32211E"/>
</svg>
<button
style={{
background: 'none',
border: 'none',
cursor: 'pointer',
fontFamily: 'The Seasons',
fontSize: '24px',
marginLeft: '20px',
}}
onClick={toggleCalendar}
>
Calendar
</button>
</div>
{isCalendarOpen && (
<div
style={{
background: '#FBF2EB',
padding: '10px',
fontSize: '16px',
}}
>
{/*Add dropdown types here*/}
</div>
)}
</div>
</div>
);
};

export default AccountSideBar;
36 changes: 25 additions & 11 deletions client/src/components/Home/NavBarUpdated.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useState } from "react";
import logoImage from "../images/logo.png"

const Navbar = () => {
const [activeButton, setActiveButton] = useState("");
Expand All @@ -8,12 +9,12 @@ const Navbar = () => {
};

const buttonStyle =
"px-4 py-2 text-black text-xs rounded-md border-gray-400";
const activeButtonStyle = "bg-gray-400";
"px-4 py-2 text-black text-s rounded-md border-gray-400";
const activeButtonStyle = "bg-DFB2AA";

return (
<div className="bg-gray-100 p-2">
<div className="flex" style={{ maxWidth: "1440px" }}>
<div className="bg-FFF9F4 p-5">
<div className="flex">
<div className="flex space-x-2">
<button
className={`${buttonStyle} ${
Expand All @@ -37,18 +38,31 @@ const Navbar = () => {
}`}
onClick={() => handleButtonClick("More")}
>
More
About
</button>
</div>
<div className="ml-auto flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" className="w-4 h-4" style={{ marginRight: '10px' }}>
<path fillRule="evenodd" d="M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z" clipRule="evenodd" />
<div className="flex items-center justify-center flex-grow">
<img
src={logoImage}
alt="Logo"
className="w-15 h-15"
/>
</div>
<div className="ml-auto flex items-center space-x-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" className="w-6 h-6" style={{ marginRight: '10px' }}>
<path fill-rule="evenodd" d="M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z" clip-rule="evenodd" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" className="w-4 h-4" style={{ marginRight: '10px' }}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="pink" className="w-6 h-6" style={{ marginRight: '10px' }}>
<path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
</svg>
<button
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" className="w-6 h-6" style={{marginRight: "30px"}}>
<path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd" />
</svg>



{/* <button
className={`${buttonStyle} ${
activeButton === "LogIn" ? activeButtonStyle : ""
}`}
Expand All @@ -63,7 +77,7 @@ const Navbar = () => {
onClick={() => handleButtonClick("SignUp")}
>
Sign Up
</button>
</button> */}
</div>
</div>
</div>
Expand Down
22 changes: 22 additions & 0 deletions client/src/components/PurchaseFiveCredits.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import FiveCreditImage from '../images/purchase_five_credits.svg'

const PurchaseFiveCredits = () => {

return (
<div className="flex flex-col vertical-outlined-rectangle bg-FFF9F4">
5 Request Credits
<div className="flex items-center justify-center flex-1">
<img src={FiveCreditImage} alt="caits-logo.svg" className="mx-auto" />
</div>
<div className='bg-F4E6DC w-full h-59 text-center p-2'>
$55
</div>
</div>
);
};

export default PurchaseFiveCredits;




21 changes: 21 additions & 0 deletions client/src/components/PurchaseOneCredit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import OneCreditImage from '../images/purchase_one_credit.svg'

const PurchaseOneCredit = () => {

return (
<div className="flex flex-col vertical-outlined-rectangle bg-FFF9F4">
1 Request Credit
<div className="flex items-center justify-center flex-1">
<img src={OneCreditImage} alt="caits-logo.svg" className="mx-auto" />
</div>
<div className='bg-F4E6DC w-full h-59 text-center p-2'>
$30
</div>
</div>
);
};

export default PurchaseOneCredit;



24 changes: 24 additions & 0 deletions client/src/components/PurchaseThreeCredits.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import ThreeCreditImage from '../images/purchase_three_credit.svg'

const PurchaseThreeCredits = () => {

return (
<div className="flex flex-col vertical-outlined-rectangle bg-FFF9F4">
3 Request Credits
<div className="flex items-center justify-center flex-1">
<img src={ThreeCreditImage} alt="caits-logo.svg" className="mx-auto" />
</div>
<div className='bg-F4E6DC w-full h-59 text-center p-2'>
$45
</div>
</div>

);
};

export default PurchaseThreeCredits;





43 changes: 43 additions & 0 deletions client/src/components/SampleOrderSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
const SampleOrderSummary = () => {
return (
<div className="flex flex-col order-summary-rectangle bg-FFF9F4">
<div className="flex flex-row items-center" style={{ paddingLeft: '20px', margin: '10px 0' }}>
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 6.5H17C17 3.7 14.8 1.5 12 1.5C9.2 1.5 7 3.7 7 6.5H5C3.9 6.5 3 7.4 3 8.5V20.5C3 21.6 3.9 22.5 5 22.5H19C20.1 22.5 21 21.6 21 20.5V8.5C21 7.4 20.1 6.5 19 6.5ZM12 3.5C13.7 3.5 15 4.8 15 6.5H9C9 4.8 10.3 3.5 12 3.5ZM19 20.5H5V8.5H19V20.5ZM12 12.5C10.3 12.5 9 11.2 9 9.5H7C7 12.3 9.2 14.5 12 14.5C14.8 14.5 17 12.3 17 9.5H15C15 11.2 13.7 12.5 12 12.5Z" fill="#32211E" />
</svg>
<span style={{ marginLeft: '10px' }}>Order Summary</span>
</div>
<div className="flex flex-row" style={{marginLeft: '20px'}}>
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="#F9DCD7"/>
<circle cx="50" cy="50" r="41.5" fill="#F9DCD7" stroke="#BC2C36"/>
<g clip-path="url(#clip0_1944_6921)">
<path d="M65.4942 71.9083H34.5023C34.0482 71.9083 33.6816 71.546 33.6816 71.0973V47.4482C33.6816 46.9995 34.0482 46.6372 34.5023 46.6372H65.4942C65.9483 46.6372 66.3148 46.9995 66.3148 47.4482V71.0973C66.3148 71.546 65.9483 71.9083 65.4942 71.9083ZM35.3229 70.2863H64.6736V48.2592H35.3229V70.2863Z" fill="#BC2C36"/>
<path d="M68.1794 48.2535H31.8206C31.3665 48.2535 31 47.8912 31 47.4425V40.4624C31 40.0136 31.3665 39.6514 31.8206 39.6514H68.1794C68.6335 39.6514 69 40.0136 69 40.4624V47.4425C69 47.8912 68.6335 48.2535 68.1794 48.2535ZM32.6412 46.6315H67.3588V41.2734H32.6412V46.6315Z" fill="#BC2C36"/>
<path d="M54.4688 72.0002H45.5296C45.0755 72.0002 44.709 71.638 44.709 71.1892V47.4428C44.709 46.9941 45.0755 46.6318 45.5296 46.6318H54.4688C54.9229 46.6318 55.2895 46.9941 55.2895 47.4428V71.1892C55.2895 71.638 54.9229 72.0002 54.4688 72.0002ZM46.3502 70.3782H53.6482V48.2539H46.3502V70.3782Z" fill="#BC2C36"/>
<path d="M49.7694 40.7275C49.567 40.7275 49.3646 40.6518 49.2114 40.5112C48.9762 40.2949 48.8886 39.9651 48.9871 39.6677C49.3208 38.6459 52.3845 29.6274 56.8541 28.1947C58.1178 27.7892 59.4035 28.027 60.5797 28.8759C61.9528 29.8707 62.1334 30.9899 62.0404 31.7469C61.5371 35.8776 51.252 40.1868 50.0813 40.6626C49.9828 40.7058 49.8734 40.7221 49.7694 40.7221V40.7275ZM58.0631 29.622C57.8279 29.622 57.5926 29.6599 57.3574 29.7356C54.808 30.552 52.4282 35.3045 51.1918 38.408C55.1691 36.5805 60.153 33.6392 60.4101 31.5522C60.4484 31.2386 60.4101 30.7629 59.6113 30.1843C59.0916 29.8113 58.5828 29.622 58.0686 29.622H58.0631Z" fill="#BC2C36"/>
<path d="M50.2289 40.7274C50.125 40.7274 50.0155 40.7058 49.9171 40.668C48.7463 40.1922 38.4667 35.883 37.958 31.7523C37.865 30.9899 38.0455 29.8761 39.4187 28.8813C40.5949 28.0216 41.8805 27.7891 43.1443 28.1946C47.6139 29.622 50.672 38.6458 51.0112 39.6677C51.1097 39.9705 51.0222 40.3003 50.7869 40.5112C50.6337 40.6517 50.4313 40.7274 50.2289 40.7274ZM41.9352 29.622C41.421 29.622 40.9067 29.8058 40.3925 30.1843C39.5937 30.7628 39.5554 31.244 39.5937 31.5522C39.8508 33.6392 44.8293 36.5805 48.812 38.4079C47.5756 35.3045 45.1958 30.552 42.6464 29.7355C42.4112 29.6599 42.1759 29.622 41.9407 29.622H41.9352Z" fill="#BC2C36"/>
</g>
<defs>
<clipPath id="clip0_1944_6921">
<rect width="38" height="44" fill="white" transform="translate(31 28)"/>
</clipPath>
</defs>
</svg>
<div className="flex flex-col" style={{marginLeft: '20px', fontWeight: "bold"}}>
1 Request Credit
<svg width="46" height="27" viewBox="0 0 46 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="46" height="27" rx="4" fill="#F9DCD7"/>
<path d="M20 10.3057L19.1943 9.5L16 12.6943L12.8057 9.5L12 10.3057L15.1943 13.5L12 16.6943L12.8057 17.5L16 14.3057L19.1943 17.5L20 16.6943L16.8057 13.5L20 10.3057Z" fill="#BC2C36"/>
<path d="M30.848 18V9.088L29.136 10.896L28.336 10.08L31.008 7.328H32.176V18H30.848Z" fill="#BC2C36"/>
</svg>
</div>
<div style={{ color: '#BC2C36', marginLeft: 'auto', paddingRight: '20px', fontWeight: "bold"}}>
$30.00
</div>
</div>
</div>
);
};

export default SampleOrderSummary;
Binary file added client/src/images/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions client/src/images/profile_photo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading