Implement go to store button (#31)

keybraker · Dec 9, 2023 · 36c0f78 · 36c0f78
1 parent 41f2c9c
commit 36c0f78
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 13 deletions.
diff --git a/src/css/style.css b/src/css/style.css
@@ -1,6 +1,6 @@
 :root {
   --custom-light-red: #ff0000;
-  --flagged-item-box-shadow: 0px 0px 5px 2px var(--custom-light-red, #ff0000) !important;
+  --flagged-item-box-shadow: 0px 0px 5px 2px var(--custom-light-red) !important;
 }
 
 .display-none {
@@ -47,10 +47,9 @@ text-black {
 .label-text {
   border-radius: 2px !important;
   padding: 8px 12px !important;
-
   background-color: #ffdbdf !important;
   font-weight: bold !important;
-  color: red !important;
+  color: var(--custom-light-red) !important;
 }
 
 .price-checker-outline {
@@ -59,8 +58,42 @@ text-black {
   padding: 20px 24px !important;
 }
 
-.info-label-positive {
+.go-to-shop-button-positive:hover {
+  background-color: var(--color-text-marketplace-strong) !important;
+  transition: background-color 0.3s ease;
+}
+
+.go-to-shop-button-positive {
   border: 1px solid var(--color-text-success-default) !important;
+  border-radius: 32px !important;
+  padding: 8px 12px !important;
+  font-weight: 400 !important;
+  background-color: var(--color-text-success-default) !important;
+  color: var(--color-text-base-default) !important;
+}
+
+.go-to-shop-button-negative:hover {
+  background-color: #db791a !important;
+  transition: background-color 0.3s ease;
+}
+
+.go-to-shop-button-negative {
+  border: 1px solid var(--color-text-accent-default) !important;
+  border-radius: 32px !important;
+  padding: 8px 12px !important;
+  font-weight: 400 !important;
+  background-color: var(--color-text-accent-default) !important;
+  color: var(--color-text-base-default) !important;
+}
+
+.lowest-price-store-highlight {
+  border: 2px solid var(--color-text-success-default) !important;
+  box-shadow: 1px 1px 0 var(--color-text-success-default) !important;
+}
+
+.info-label-positive {
+  /* border: 1px solid var(--color-text-success-default) !important; */
+  border: 1px solid var(--color-background-success-weak) !important;
   line-height: 1.4 !important;
   font-size: 16px !important;
   font-weight: 500 !important;
@@ -69,7 +102,8 @@ text-black {
 }
 
 .info-label-negative {
-  border: 1px solid var(--custom-light-red, #ff0000) !important;
+  /* border: 1px solid var(--color-text-accent-default) !important; */
+  border: 1px solid var(--color-background-accent-weak) !important;
   line-height: 1.4 !important;
   font-size: 16px !important;
   font-weight: 500 !important;

diff --git a/src/decorators/PriceCheckerIndicator.ts b/src/decorators/PriceCheckerIndicator.ts
@@ -4,6 +4,7 @@ import { State } from "../types/State";
 interface LowestPriceData {
   formatted: string;
   unformatted: number;
+  shopId: number;
 }
 
 export class PriceCheckerIndicator {
@@ -54,8 +55,6 @@ export class PriceCheckerIndicator {
         return parseFloat(priceValue);
     }
 
-    //
-
     private getSKU(): string | null {
         const metaTag = document.querySelector("meta[itemprop=\"sku\"]") as HTMLMetaElement | null;
         return metaTag ? metaTag.content : null;
@@ -85,17 +84,20 @@ export class PriceCheckerIndicator {
             const responseJSON = await response.json();
             const productCards = responseJSON.product_cards as {
                 raw_price: number,
+                shop_id: number,
                 shipping_cost: number,
                 final_price_formatted?: string,
                 price: number,
             }[];
             const currency = responseJSON.price_min.trim().slice(-1);
+            let shopId = 0;
             let lowestPrice = Number.MAX_VALUE;
 
             Object.values(productCards).forEach(card => {
                 const totalCost = card.raw_price + card.shipping_cost;
                 if (totalCost < lowestPrice) {
                     lowestPrice = totalCost;
+                    shopId = card.shop_id;
                 }
             });
 
@@ -106,6 +108,7 @@ export class PriceCheckerIndicator {
             return {
                 formatted: `${lowestPrice} ${currency}`,
                 unformatted: lowestPrice,
+                shopId,
             };
         } catch (error) {
             console.error("There was a problem with the fetch operation:", error);
@@ -122,17 +125,17 @@ export class PriceCheckerIndicator {
         const priceIndication = document.createElement("div");
         const colFlex = document.createElement("div");
 
-        const status = this.btsPrice && this.lowestPriceData && this.btsPrice <= this.lowestPriceData.unformatted
-            ? "info-label-positive"
-            : "info-label-negative";
+        const isLowestPrice = !!this.btsPrice && !!this.lowestPriceData && this.btsPrice <= this.lowestPriceData.unformatted;
+        const checkerStyle = isLowestPrice ? "info-label-positive" : "info-label-negative";
 
-        priceIndication.classList.add("display-padding", "inline-flex-row", "price-checker-outline", status);
+        priceIndication.classList.add("display-padding", "inline-flex-row", "price-checker-outline", checkerStyle);
         colFlex.classList.add("inline-flex-col");
 
         const icon = document.createElement("div");
         const information = document.createElement("div");
         const disclaimer = document.createElement("div");
-        information.classList.add("font-bold");
+
+        information.classList.add("align-center", "font-bold");
         disclaimer.classList.add("align-end", "text-black");
 
         const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
@@ -156,11 +159,36 @@ export class PriceCheckerIndicator {
             : `${formattedLowestPrice}€ είναι η χαμηλότερη τιμή με μεταφορικά εκτός "Αγορά μέσω Skroutz"`;
 
         colFlex.appendChild(information);
-        // colFlex.appendChild(img);
+
+        const goToStoreButton = this.goToStoreButtonCreator(isLowestPrice);
+        colFlex.appendChild(goToStoreButton);
 
         priceIndication.appendChild(icon);
         priceIndication.appendChild(colFlex);
 
         return priceIndication;
     }
+
+    private goToStoreButtonCreator(isLowestPrice: boolean): HTMLButtonElement {
+        const goToStoreButton = document.createElement("button");
+        const buttonStyle = isLowestPrice ? "go-to-shop-button-positive" : "go-to-shop-button-negative";
+
+        goToStoreButton.classList.add(buttonStyle);
+        goToStoreButton.textContent = this.state.language === Language.ENGLISH
+            ? "Go to Shop"
+            : "Μετάβαση στο κατάστημα";
+        goToStoreButton.classList.add("custom-button-class");
+
+        goToStoreButton.addEventListener("click", () => {
+            const targetId = `shop-${this.lowestPriceData?.shopId}`;
+            const targetElement = document.getElementById(targetId);
+
+            if (targetElement) {
+                targetElement.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
+                targetElement.classList.add("lowest-price-store-highlight");
+            }
+        });
+
+        return goToStoreButton;
+    }
 }