diff --git a/client/src/App.tsx b/client/src/App.tsx index 00edef7..c4116fe 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -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 ( @@ -38,10 +40,18 @@ function App() { path="/signup/" element={} /> + } + /> } /> + } + /> ); diff --git a/client/src/components/AccountSideBar.tsx b/client/src/components/AccountSideBar.tsx new file mode 100644 index 0000000..8734336 --- /dev/null +++ b/client/src/components/AccountSideBar.tsx @@ -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 ( +
+
+ Account +
+ + + + + John Doe +
+
+ + + + +
+ {isGiftingOpen && ( +
+
+ +
+
+
+ +
+
+ )} +
+ + + + +
+ {isBudgetOpen && ( +
+ {/*Add dropdown types here*/} +
+ )} +
+ + + + +
+ {isCalendarOpen && ( +
+ {/*Add dropdown types here*/} +
+ )} +
+
+ ); +}; + +export default AccountSideBar; \ No newline at end of file diff --git a/client/src/components/Home/NavBarUpdated.tsx b/client/src/components/Home/NavBarUpdated.tsx index 8a988a5..1085794 100644 --- a/client/src/components/Home/NavBarUpdated.tsx +++ b/client/src/components/Home/NavBarUpdated.tsx @@ -1,4 +1,5 @@ import { useState } from "react"; +import logoImage from "../images/logo.png" const Navbar = () => { const [activeButton, setActiveButton] = useState(""); @@ -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 ( -
-
+
+
-
- - +
+ Logo +
+
+ + - + - + + + + {/* + */}
diff --git a/client/src/components/PurchaseFiveCredits.tsx b/client/src/components/PurchaseFiveCredits.tsx new file mode 100644 index 0000000..146b947 --- /dev/null +++ b/client/src/components/PurchaseFiveCredits.tsx @@ -0,0 +1,22 @@ +import FiveCreditImage from '../images/purchase_five_credits.svg' + +const PurchaseFiveCredits = () => { + + return ( +
+ 5 Request Credits +
+ caits-logo.svg +
+
+ $55 +
+
+ ); + }; + + export default PurchaseFiveCredits; + + + + \ No newline at end of file diff --git a/client/src/components/PurchaseOneCredit.tsx b/client/src/components/PurchaseOneCredit.tsx new file mode 100644 index 0000000..b4427c2 --- /dev/null +++ b/client/src/components/PurchaseOneCredit.tsx @@ -0,0 +1,21 @@ +import OneCreditImage from '../images/purchase_one_credit.svg' + +const PurchaseOneCredit = () => { + + return ( +
+ 1 Request Credit +
+ caits-logo.svg +
+
+ $30 +
+
+ ); +}; + +export default PurchaseOneCredit; + + + diff --git a/client/src/components/PurchaseThreeCredits.tsx b/client/src/components/PurchaseThreeCredits.tsx new file mode 100644 index 0000000..e7c705e --- /dev/null +++ b/client/src/components/PurchaseThreeCredits.tsx @@ -0,0 +1,24 @@ +import ThreeCreditImage from '../images/purchase_three_credit.svg' + +const PurchaseThreeCredits = () => { + + return ( +
+ 3 Request Credits +
+ caits-logo.svg +
+
+ $45 +
+
+ + ); + }; + + export default PurchaseThreeCredits; + + + + + diff --git a/client/src/components/SampleOrderSummary.tsx b/client/src/components/SampleOrderSummary.tsx new file mode 100644 index 0000000..531fe0c --- /dev/null +++ b/client/src/components/SampleOrderSummary.tsx @@ -0,0 +1,43 @@ +const SampleOrderSummary = () => { + return ( +
+
+ + + + Order Summary +
+
+ + + + + + + + + + + + + + + + +
+ 1 Request Credit + + + + + +
+
+ $30.00 +
+
+
+ ); +}; + +export default SampleOrderSummary; diff --git a/client/src/images/logo.png b/client/src/images/logo.png new file mode 100644 index 0000000..21da18f Binary files /dev/null and b/client/src/images/logo.png differ diff --git a/client/src/images/profile_photo.svg b/client/src/images/profile_photo.svg new file mode 100644 index 0000000..7935288 --- /dev/null +++ b/client/src/images/profile_photo.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/client/src/images/purchase_five_credits.svg b/client/src/images/purchase_five_credits.svg new file mode 100644 index 0000000..3ae4e9a --- /dev/null +++ b/client/src/images/purchase_five_credits.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/src/images/purchase_one_credit.svg b/client/src/images/purchase_one_credit.svg new file mode 100644 index 0000000..2a026fb --- /dev/null +++ b/client/src/images/purchase_one_credit.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/src/images/purchase_three_credit.svg b/client/src/images/purchase_three_credit.svg new file mode 100644 index 0000000..6d4c522 --- /dev/null +++ b/client/src/images/purchase_three_credit.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/src/index.css b/client/src/index.css index d87d853..6a40489 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -6,4 +6,57 @@ .btn-primary { @apply py-2 bg-green rounded-md text-sm text-white } + .bg-DFB2AA { + background-color: #DFB2AA; + } + .bg-B79D94 { + background-color: #B79D94; + } + .bg-FFF9F4 { + background-color: #FFF9F4; + } + .bg-F4E6DC { + background-color: #F4E6DC; + } + .text-A65A5A { + color: #A65A5A; + } + .text-FFF9F4 { + color: #FFF9F4; + } + .bg-273F2A { + background-color: #273F2A; + } + .bg-FBF2EB { + background-color: #FBF2EB; + } + .bg-DFB2AA { + background-color: #DFB2AA; + } + .bg-A65A5A { + background-color: #A65A5A; + } + .vertical-outlined-rectangle { + display: flex; + flex-direction: column; + align-items: center; + width: 300px; + height: 430px; + border: 2px solid #B79D94; + border-radius: 4px; + font-size: 24px; + font-weight: 700px; + font-family: 'Proxima Nova, Arial, sans-serif' + } + .order-summary-rectangle { + display: flex; + flex-direction: column; + width: 835px; + height: 202px; + border: 2px solid #B79D94; + border-radius: 4px; + font-size: 24px; + font-weight: 700px; + font-family: 'Proxima Nova, Arial, sans-serif' + } } diff --git a/client/src/logo.png b/client/src/logo.png deleted file mode 100644 index 6d84c51..0000000 Binary files a/client/src/logo.png and /dev/null differ diff --git a/client/src/pages/RequestPurchaseSuccess.tsx b/client/src/pages/RequestPurchaseSuccess.tsx new file mode 100644 index 0000000..dbb716d --- /dev/null +++ b/client/src/pages/RequestPurchaseSuccess.tsx @@ -0,0 +1,50 @@ +import Navbar from "../components/NavBarUpdated"; +import AccountSideBar from "../components/AccountSideBar"; +import SampleOrderSummary from "../components/SampleOrderSummary"; + +const RequestPurchaseSuccess = () => { + + const submitRequestButtonStyle = "px-4 py-2 text-FFF9F4 text-s bg-273F2A rounded-md"; + const startShoppingButtonStyle = "px-4 py-2 text-273F2A text-s bg-FFF9F4 rounded-md"; + + return ( +
+ + +
+ +
+
+
+
Gifting
+
Thank You!
+
+ We have received your purchase, and you will receive an order confirmation email shortly to + johndoe@gmail.com. + In the meantime, submit a request to Cait, or explore her curated gift selections for any occasion!
+
+
+ + +
+
+ +
+
+
+
+
+ ); +}; + +export default RequestPurchaseSuccess; diff --git a/client/src/pages/RequestPurchasingPage.tsx b/client/src/pages/RequestPurchasingPage.tsx new file mode 100644 index 0000000..616b684 --- /dev/null +++ b/client/src/pages/RequestPurchasingPage.tsx @@ -0,0 +1,66 @@ +import Navbar from "../components/NavBarUpdated"; +import { useState } from 'react'; +import PurchaseOneCredit from "../components/PurchaseOneCredit"; +import PurchaseThreeCredits from "../components/PurchaseThreeCredits"; +import PurchaseFiveCredits from "../components/PurchaseFiveCredits"; +import AccountSideBar from "../components/AccountSideBar"; + +const RequestsPurchasingPage = () => { + const [activeButton, setActiveButton] = useState(""); + + const handleButtonClick = (buttonName: any) => { + setActiveButton(buttonName); + }; + + const buttonStyle = "px-4 py-2 text-FFF9F4 text-s bg-273F2A rounded-md"; + const activeButtonStyle = "bg-273F2A"; + + return ( +
+ + +
+ + +
+
+
+
Gifting
+
Purchase Gift Requests
+
+
+ + + +
+
+ + + +
+
+
+
+
+ ); +}; + +export default RequestsPurchasingPage;