diff --git a/package.json b/package.json index 8dbfdcf..f9eca2f 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,8 @@ "clean-webpack-plugin": "^4.0.0" }, "scripts": { + "start:chrome": "web-ext run --source-dir ./build/chrome_build/", + "start:firefox": "web-ext run --source-dir ./build/firefox_build/", "build:chrome": "webpack --env chrome", "build:firefox": "webpack --env firefox", "lint": "eslint \"**/*.ts\"", diff --git a/src/css/style.css b/src/css/style.css index 6205310..8ec871b 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -83,7 +83,7 @@ text-black { padding: 8px 12px !important; font-weight: 400 !important; background-color: var(--color-border-danger-0) !important; - color: var(--color-text-base-default) !important; + color: var(--color-text-danger-3) !important; } .lowest-price-store-highlight { diff --git a/src/decorators/PriceCheckerIndicator.ts b/src/decorators/PriceCheckerIndicator.ts index 51a9cc5..8317b26 100644 --- a/src/decorators/PriceCheckerIndicator.ts +++ b/src/decorators/PriceCheckerIndicator.ts @@ -10,6 +10,10 @@ interface LowestPriceData { shopId: number; } +function roundToZero(value: number, precision = 1e-10) { + return Math.abs(value) < precision ? 0 : value; +} + export class PriceCheckerIndicator { private state: State; private btsPrice: number | undefined = undefined; @@ -45,6 +49,8 @@ export class PriceCheckerIndicator { private createPriceIndicationElement(): HTMLDivElement { const priceIndication = document.createElement("div"); const colFlex = document.createElement("div"); + const rowFlex = document.createElement("div"); + const otherLowestPrice = document.createElement("div"); const shippingCost = this.btsShippingCost ?? 0; let isLowestPrice = false; @@ -56,53 +62,71 @@ export class PriceCheckerIndicator { priceIndication.classList.add("display-padding", "inline-flex-row", "price-checker-outline", checkerStyle); colFlex.classList.add("inline-flex-col"); + rowFlex.classList.add("inline-flex-row"); + otherLowestPrice.classList.add("price"); - const icon = document.createElement("div"); - const brand = document.createElement("div"); - const brandLink = document.createElement("a"); - const information = document.createElement("div"); - const disclaimer = document.createElement("div"); - - icon.classList.add("align-center", "icon-border"); - brand.classList.add("icon-border", "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"); - svgElement.setAttribute("viewBox", "0 96 960 960"); - svgElement.setAttribute("width", "16"); - svgElement.setAttribute("height", "16"); + const priceComma = document.createElement("span"); + const priceDecimal = document.createElement("span"); + const currencySymbol = document.createElement("span"); + const loyaltyPoints = document.createElement("span"); + const shippingInfo = document.createElement("span"); - const img = document.createElement("img"); - img.src = "https://raw.githubusercontent.com/keybraker/reskroutzed/main/src/assets/icons/128.png"; - img.alt = "reSkroutzed"; - img.width = 16; - img.height = 16; + const lowestPrice = this.lowestPriceData ? this.lowestPriceData.unformatted : undefined; + const [integerPart, decimalPart] = (lowestPrice?.toFixed(2) ?? "?").split("."); + + priceComma.textContent = ","; + priceDecimal.textContent = decimalPart; + currencySymbol.textContent = "€"; + + priceComma.classList.add("comma"); + + otherLowestPrice.textContent = integerPart; + otherLowestPrice.appendChild(priceComma); + otherLowestPrice.appendChild(priceDecimal); + otherLowestPrice.appendChild(currencySymbol); + otherLowestPrice.appendChild(loyaltyPoints); + otherLowestPrice.appendChild(shippingInfo); + + const priceDifference = document.createElement("span"); + const priceDifferenceExplanation = document.createElement("span"); + + const diff = roundToZero((lowestPrice ?? 0) - (this.btsPrice ?? 0) - shippingCost); + + console.log("lowestPrice :>> ", lowestPrice); + console.log("this.btsPrice :>> ", this.btsPrice); + console.log("shippingCost :>> ", shippingCost); + console.log("diff === 0 :>> ", `${diff} === 0 :>> `, diff === 0); + + if (diff > 0) { + priceDifference.textContent = ` ${diff} / ${diff.toFixed(2)}€`; + priceDifferenceExplanation.textContent = this.state.language === Language.ENGLISH + ? " more expensive" + : " ακριβότερο"; + } else if (diff < 0) { + priceDifference.textContent = ` ${diff.toFixed(2)}€`; + priceDifferenceExplanation.textContent = this.state.language === Language.ENGLISH + ? " cheaper" + : " φτηνότερο"; + } - icon.appendChild(img); + rowFlex.appendChild(otherLowestPrice); + rowFlex.appendChild(priceDifference); + rowFlex.appendChild(priceDifferenceExplanation); - const lowestPrice = this.lowestPriceData ? this.lowestPriceData.unformatted : undefined; - const formattedLowestPrice = lowestPrice?.toFixed(2); + colFlex.appendChild(rowFlex); + const information = document.createElement("div"); information.textContent = this.state.language === Language.ENGLISH - ? `${formattedLowestPrice}€ is the lowest price with shipping apart from "Buy through Skroutz"` - : `${formattedLowestPrice}€ είναι η χαμηλότερη τιμή με μεταφορικά εκτός "Αγορά μέσω Skroutz"`; + ? "is the lowest price with shipping apart from \"Buy through Skroutz\"" + : "είναι η χαμηλότερη τιμή με μεταφορικά εκτός \"Αγορά μέσω Skroutz\""; + information.classList.add("align-center", "font-bold"); + colFlex.appendChild(information); const goToStoreButton = this.goToStoreButtonCreator(isLowestPrice); colFlex.appendChild(goToStoreButton); - brandLink.href = "https://paypal.me/tsiakkas"; - brandLink.textContent = "by reSkroutzed"; - brandLink.classList.add("icon-border", "font-bold"); - - brand.appendChild(brandLink); - brand.appendChild(icon); - - brand.appendChild(icon); - colFlex.appendChild(brand); - - priceIndication.title = this.state.language === Language.ENGLISH + priceIndication.title = this.state.language === Language.ENGLISH ? `(note that "Buy through Skroutz" is ${this.btsPrice}€ + ${shippingCost}€ shipping)` : `(σημειώστε ότι "Αγορά μέσω Skroutz" είναι ${this.btsPrice}€ + ${shippingCost}€ μεταφορικά)`; priceIndication.appendChild(colFlex); @@ -110,6 +134,7 @@ export class PriceCheckerIndicator { 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"; diff --git a/src/manifest_chrome.json b/src/manifest_chrome.json index da0e3f8..3f6bb01 100644 --- a/src/manifest_chrome.json +++ b/src/manifest_chrome.json @@ -1,7 +1,7 @@ { "name": "reSkroutzed", "description": "Flags sponsored products on Skroutz.gr", - "version": "1.6.4", + "version": "1.6.5", "manifest_version": 3, "permissions": [], "host_permissions": [ diff --git a/src/manifest_firefox.json b/src/manifest_firefox.json index 576b85c..5b0fae6 100644 --- a/src/manifest_firefox.json +++ b/src/manifest_firefox.json @@ -1,7 +1,7 @@ { "name": "reSkroutzed", "description": "Flags sponsored products on Skroutz.gr", - "version": "1.6.4", + "version": "1.6.5", "manifest_version": 3, "permissions": [], "host_permissions": [ diff --git a/src/retrievers/buyThroughSkroutzShippingCostRetriever.ts b/src/retrievers/buyThroughSkroutzShippingCostRetriever.ts index 0220e1b..128d899 100644 --- a/src/retrievers/buyThroughSkroutzShippingCostRetriever.ts +++ b/src/retrievers/buyThroughSkroutzShippingCostRetriever.ts @@ -9,8 +9,5 @@ export function buyThroughSkroutzShippingCostRetriever() { const articleEm = document.querySelector("article.offering-card"); const shippingCostEm = articleEm?.querySelector("em"); - const a = shippingCostEm ? elementToNumber(shippingCostEm) : undefined; - console.log("a :>> ", a); - - return a; + return shippingCostEm ? elementToNumber(shippingCostEm) : undefined; }