able to claim a given offer

TLI-Group-1 · Dec 9, 2021 · 86e6981 · 86e6981
1 parent d8aea49
commit 86e6981
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 13 deletions.
diff --git a/css/details.css b/css/details.css
@@ -115,6 +115,7 @@ main > nav {
 
 main > div {
     height: 42rem;
+    border-radius: 0 0 1.1rem 1.1rem;
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
@@ -141,6 +142,7 @@ main > div aside {
     border-radius: 0 0 0 1.1rem;
     overflow-y: auto;
     overscroll-behavior-y: contain;
+    scrollbar-color: #ffffff #1d2345;
 }
 
 @media (max-width: 670px) {
@@ -178,9 +180,10 @@ main > div section {
 
 section div.loan-offer-details {
     padding: 2rem;
-    border-radius: 0 0 1.1rem 0;
     overflow-y: auto;
     overscroll-behavior-y: contain;
+    scrollbar-color: #36cf9b #1d2345;
+    border-radius: 0 0 1.1rem 0;
     display: flex;
     flex-direction: column;
     row-gap: 2rem;
@@ -219,6 +222,7 @@ div.loan-offer-details ul {
 div.loan-offer-details ul li span {
     font-weight: 500;
     font-size: 1.2rem;
+    text-transform: capitalize;
 }
 
 main > div section div.loan-offer-details input {

diff --git a/css/index.css b/css/index.css
@@ -334,7 +334,7 @@ div.cars-container {
     width: 100%;
     border-radius: 0 0 0 1.1rem;
     padding: 1rem;
-    font-weight: 500;
+    font-weight: 600;
 }
 .car-offer button.claim-btn span.claim-text:hover {
     width: 80%;

diff --git a/css/main.css b/css/main.css
@@ -308,6 +308,7 @@ footer div.footer-spacer {
 }
 .loan-offer-entry span.offer-car-info {
     font-weight: 600;
+    text-transform: capitalize;
 }
 .loan-offer-entry span.offer-loan-info {
     color: #333333;

diff --git a/details.html b/details.html
@@ -36,7 +36,7 @@
 <body>
     <main class="card border-thin">
         <header>
-            <div class="region-dark go-back" onclick="window.history.go(-1);">
+            <div class="region-dark go-back" onclick="goBack();">
                 <img src="./assets/icons/arrow-back-min.svg" alt="Back">
                 <h3>Return to your search</h3>
             </div>

diff --git a/js/api.js b/js/api.js
@@ -85,5 +85,20 @@ var api = {
             console.log(response);
             throw "HTTP status: " + response.status;
         }
+    },
+
+    claimOffer: async function(userID, OfferID) {
+        // send the search query to the backend API
+        const response = await fetch(
+            this.API_URL + '/claimOffer?user_id=' + userID + '&offer_id=' + OfferID
+        );
+
+        if (response.status == 200) {
+            return;
+        }
+        else {
+            console.log(response);
+            throw "HTTP status: " + response.status;
+        }
     }
 };
diff --git a/js/details.js b/js/details.js
@@ -35,6 +35,14 @@ async function onPageLoad() {
     await getOfferDetails(userID, offerSelected);
 }
 
+/*
+    Function that takes the user back to the discovery page
+*/
+function goBack() {
+    let userID = fetchQueryParamByKey('user_id');
+    window.location.href = '/?user_id=' + userID;
+}
+
 /*
     Claimed offers list operations
 */
@@ -70,13 +78,12 @@ async function getOfferDetails(userID, offerID) {
         // display the offer details
         renderOfferDetails(
             details['brand'], details['model'], details['year'], details['kms'],
-            details['price'], details['loanAmount'], details['interestRate'], details['termMo'],
-            details['totalSum']
+            details['price'], details['loan_amount'], details['interest_rate'],
+            details['term_mo'], details['total_sum']
         )
     }
     catch (e) {
         console.log(e);
-        console.log(window.location.search);
     }
 }
 

diff --git a/js/discover.js b/js/discover.js
@@ -203,13 +203,14 @@ async function submitSearch() {
     on each item.
 */
 function displayCarsOrOffers(listings) {
+    // clear out the cars/offers container
     removeAllCarsOffers();
 
     // add all car/loan offer listings to the container
     for (const item of listings) {
         addCarToContainer(
             item['offer_id'], item['brand'], item['model'], item['year'], item['kms'],
-            item['price'], item['apr'], item['payment_mo'], item['term_length'],
+            item['price'], item['interest_rate'], item['payment_mo'], item['term_mo'],
             item['total_sum']
         )
     }
@@ -301,15 +302,63 @@ function setCarsOffersLoading() {
 */
 
 /*
-
+    Visually toggle the specified claim button between claimed and unclaimed
 */
-
+function toggleButtonClaimed(id) {
+    let claimButton = document.querySelector('button.claim-btn[name="' + id +'"]');
+    for (let part of claimButton.children) {
+        // modify the text component
+        if (part.className.includes('claim-text')) {
+            // unclaimed state
+            if (part.className.includes('btn-dark-blue')) {
+                part.className = part.className.replace('btn-dark-blue', 'btn-red');
+                part.textContent = 'Offer claimed';
+            }
+            // claimed state
+            else {
+                part.className = part.className.replace('btn-red', 'btn-dark-blue');
+                part.textContent = 'Claim this offer';
+            }
+        }
+        // modify the heart component
+        if (part.className.includes('claim-heart')) {
+            // unclaimed state
+            if (part.className.includes('bg-heart-empty')) {
+                part.className = part.className.replace('bg-heart-empty', 'bg-heart-filled');
+                part.className = part.className.replace('btn-red', 'btn-dark-blue');
+            }
+            // claimed state
+            else {
+                part.className = part.className.replace('bg-heart-filled', 'bg-heart-empty');
+                part.className = part.className.replace('btn-dark-blue', 'btn-red');
+            }
+        }
+    }
+}
 
 /*
-    TODO: claim a given loan offer
+    Claim a given loan offer
 */
 async function claimOffer(id) {
-    console.log('Claiming ' + id);
+    const userID = fetchQueryParamByKey('user_id');
+    // attempt to claim the specified offer at the backend API
+    try {
+        // make the API call
+        await api.claimOffer(userID, id);
+
+        // display the offer details
+        toggleButtonClaimed(id);
+
+        // update the claimed offers widget, fetch and display the user's claimed offers
+        const userOffer = await fetchClaimedOffers(userID);
+        if (userOffer !== null) {
+            const offersDetailsLink = document.getElementById('offersDetailsLink');
+            offersDetailsLink.style.visibility = 'visible';
+        }
+    }
+    catch (e) {
+        console.log(e);
+    }
 }
 
 

diff --git a/js/main.js b/js/main.js
@@ -76,8 +76,8 @@ function displayClaimedOffers(offers, userID) {
     removeAllLoanOffers();
     for (const offer of offers) {
         addOfferToContainer(
-            userID, offer['offerId'], offer['brand'], offer['model'], offer['year'],
-            offer['interestRate'], offer['termMo'], offer['totalSum']
+            userID, offer['offer_id'], offer['brand'], offer['model'], offer['year'],
+            offer['interest_rate'], offer['term_mo'], offer['total_sum']
         );
     }
 }