refactor(Zalando): rewrite activity (#9071)

* chore(Zalando): rewrite activity * style(Zalando): format metadata * chore(Zalando): remove old variables
PreMiD · Jan 3, 2025 · 9cc4b0e · 9cc4b0e
1 parent 0f08f94
commit 9cc4b0e
Show file tree

Hide file tree

Showing 2 changed files with 146 additions and 68 deletions.
diff --git a/websites/Z/Zalando/metadata.json b/websites/Z/Zalando/metadata.json
@@ -7,20 +7,28 @@
 	},
 	"service": "Zalando",
 	"description": {
-		"en": "Zalando | Buy shoes online: Shoes from top brands.",
-		"nl": "Zalando online shop | Kleding, schoenen, sportartikelen, accessoires en meer | Jouw favoriete brands voor dames, heren en kids",
+		"en": "Zalando | Fashion, beauty, sport, accessoires | Your favorite brands for woman, men & kids.",
+		"nl": "Zalando online | Mode, beauty, sport & accessoires | Jouw favoriete merken voor dames, heren & kids.",
 		"zh_CN": "Zalando 是总部位于德国柏林的大型网络电子商城， 其主要产品是服装和鞋类。",
 		"ga_IE": "Zalando | Ceannaigh bróga ar líne: Bróga ó na brandaí is fearr."
 	},
 	"url": "www.zalando.com",
 	"regExp": "([a-z0-9-]+[.])*zalando([.][a-z]+)+[/]",
-	"version": "1.2.24",
+	"version": "1.3.0",
 	"logo": "https://cdn.rcd.gg/PreMiD/websites/Z/Zalando/assets/logo.png",
 	"thumbnail": "https://cdn.rcd.gg/PreMiD/websites/Z/Zalando/assets/thumbnail.png",
 	"color": "#f47127",
 	"category": "other",
 	"tags": [
 		"shop",
 		"fashion"
+	],
+	"settings": [
+		{
+			"id": "buttons",
+			"title": "Show Buttons",
+			"icon": "fas fa-compress-arrows-alt",
+			"value": true
+		}
 	]
 }
diff --git a/websites/Z/Zalando/presence.ts b/websites/Z/Zalando/presence.ts
@@ -3,7 +3,7 @@ const presence = new Presence({
 	}),
 	browsingTimestamp = Math.floor(Date.now() / 1000);
 
-let user: HTMLElement, title: HTMLElement, language: string;
+let language: string;
 
 // TODO: Convert to Presences#getStrings()
 /**
@@ -14,123 +14,193 @@ function getTranslation(stringName: string): string {
 	switch (stringName) {
 		case "HomePage":
 			switch (language) {
-				case "nl":
+				case "nl-NL":
 					return "Bekijkt de startpagina";
 				default:
-					return "Viewing home page";
+					return "Viewing the homepage ";
+			}
+		case "Browsing":
+			switch (language) {
+				case "nl-NL":
+					return "Aan het bladeren";
+				default:
+					return "Browsing ";
+			}
+		case "ViewProductButton":
+			switch (language) {
+				case "nl-NL":
+					return "Bekijk Product";
+				default:
+					return "View Item";
 			}
 		case "ProductView":
 			switch (language) {
-				case "nl":
+				case "nl-NL":
 					return "Bekijkt product:";
 				default:
 					return "Viewing product:";
 			}
 		case "BrandView":
 			switch (language) {
-				case "nl":
+				case "nl-NL":
 					return "Bekijkt merk:";
 				default:
 					return "Viewing brand:";
 			}
-		case "CategoryView":
+		case "TypeView":
+			switch (language) {
+				case "nl-NL":
+					return "Bekijkt {type}";
+				default:
+					return "Viewing {type}";
+			}
+		case "ViewBrandButton":
 			switch (language) {
-				case "nl":
-					return "Bekijkt categorie:";
+				case "nl-NL":
+					return "Bekijk Merk";
 				default:
-					return "Viewing category:";
+					return "View Brand";
 			}
 		case "Cart":
 			switch (language) {
-				case "nl":
+				case "nl-NL":
 					return "Bekijkt zijn winkelwagen";
 				default:
 					return "Viewing their cart";
 			}
 		case "Wishlist":
 			switch (language) {
-				case "nl":
+				case "nl-NL":
 					return "Bekijkt zijn verlanglijstje";
 				default:
 					return "Viewing their wishlist";
 			}
 		case "AccountSettings":
 			switch (language) {
-				case "nl":
+				case "nl-NL":
 					return "Bekijkt zijn account";
 				default:
 					return "Viewing their account";
 			}
-			break;
 		case "FAQ":
 			switch (language) {
-				case "nl":
+				case "nl-NL":
 					return "Bekijkt de veel gestelde vragen";
 				default:
 					return "Viewing the FAQ";
 			}
+		case "Collections":
+			switch (language) {
+				case "nl-NL":
+					return "Bekijkt de collectie van {collection}";
+				default:
+					return "Viewing the collection of {collection}";
+			}
 		default:
 			presence.error(
-				"Unknown StringName please contact the Developer of this presence!\nYou can contact him/her in the PreMiD Discord (discord.premid.app)"
+				"Unknown StringName please contact the Developer of this presence!\nYou can contact them in the PreMiD Discord (discord.premid.app)"
 			);
 			return "Unknown stringName";
 	}
 }
 
 presence.on("UpdateData", async () => {
 	const presenceData: PresenceData = {
-		largeImageKey:
-			"https://cdn.rcd.gg/PreMiD/websites/Z/Zalando/assets/logo.png",
-		startTimestamp: browsingTimestamp,
-	};
-
-	({ language } = window.navigator); //Make this change-able with presence settings
-	//en = English
-	//nl = Nederlands
-	//Language list can be found here: https://api.premid.app/v2/langFile/list
-
+			largeImageKey:
+				"https://cdn.rcd.gg/PreMiD/websites/Z/Zalando/assets/logo.png",
+			startTimestamp: browsingTimestamp,
+		},
+		{ href, pathname } = document.location,
+		elements = {
+			navigation: document.querySelector('[aria-label="Breadcrumb"]'),
+			brand: document.querySelector("h1 > div > a"),
+		},
+		buttons = await presence.getSetting<boolean>("buttons");
 	if (
-		document.location.pathname === "/" ||
-		document.location.pathname.includes("home/")
+		!language ||
+		language !== document.querySelector("html")?.getAttribute("lang")
 	)
-		presenceData.details = getTranslation("HomePage");
-	else if (document.location.pathname.includes(".html")) {
-		user = document.querySelector(
-			".h-container.h-product-title.topSection.h-align-left > div:nth-child(2) > h1"
-		);
-		title = document.querySelector(
-			".h-container.h-product-title.topSection.h-align-left > div:nth-child(1) > a > h2"
-		);
-		presenceData.details = getTranslation("ProductView");
-		presenceData.state = `${user.textContent} > ${title.textContent}`;
-	} else if (
-		document.querySelector(
-			"#z-nvg-cognac-root > div > z-grid > z-grid-item:nth-child(2) > div > div > div > div > h1 > span > a"
-		) !== null
-	) {
-		user = document.querySelector<HTMLAnchorElement>(
-			"#z-nvg-cognac-root > div > z-grid > z-grid-item:nth-child(2) > div > div > div > div > h1 > span > a"
-		);
-		presenceData.details = getTranslation("BrandView");
-		presenceData.state = user.textContent;
-	} else if (
-		document.querySelector<HTMLUListElement>(
-			"#z-nvg-cognac-root > div > z-grid > z-grid-item:nth-child(2) > div > div > nav > ul"
-		) !== null
-	) {
-		user = document.querySelector<HTMLUListElement>(
-			"#z-nvg-cognac-root > div > z-grid > z-grid-item:nth-child(2) > div > div > nav > ul"
-		);
-		presenceData.details = getTranslation("CategoryView");
-		presenceData.state = user.textContent;
-	} else if (document.location.pathname.includes("/cart/"))
-		presenceData.details = getTranslation("Cart");
-	else if (document.location.pathname.includes("/wishlist/"))
-		presenceData.details = getTranslation("Wishlist");
-	else if (document.location.pathname.includes("/myaccount/"))
-		presenceData.details = getTranslation("AccountSettings");
-	else if (document.location.pathname.includes("/faq/"))
-		presenceData.details = getTranslation("FAQ");
+		language = document.querySelector("html")?.getAttribute("lang") ?? "";
+
+	//other = English
+	//nl-NL = Nederlands
+
+	switch (true) {
+		case pathname === "/":
+		case pathname.includes("home/"): {
+			presenceData.details = getTranslation("HomePage");
+			break;
+		}
+		case pathname.includes("/cart/"): {
+			presenceData.details = getTranslation("Cart");
+			break;
+		}
+		case pathname.includes("/wishlist/"): {
+			presenceData.details = getTranslation("Wishlist");
+			break;
+		}
+		case pathname.includes("/myaccount/"): {
+			presenceData.details = getTranslation("AccountSettings");
+			break;
+		}
+		case pathname.includes("/faq/"): {
+			presenceData.details = getTranslation("FAQ");
+			break;
+		}
+		case pathname.includes("/collections/"): {
+			// When you're viewing a collection with collection in url
+			presenceData.details = getTranslation("Collections").replace(
+				"{collection}",
+				document.querySelector("#title-wrapper > div > h1")?.textContent
+			);
+			break;
+		}
+		case pathname.endsWith(".html"): {
+			// When you're viewing a product
+			presenceData.details = getTranslation("ProductView");
+			presenceData.state = document.querySelector("h1")?.textContent; // Product name & brand
+			presenceData.buttons = [
+				{
+					label: getTranslation("ViewProductButton"),
+					url: href,
+				},
+			];
+			break;
+		}
+		case !!elements?.brand?.getAttribute("title"): {
+			// When you're viewing a brand
+			presenceData.details = getTranslation("BrandView");
+			presenceData.state = elements.brand.getAttribute("title");
+			presenceData.buttons = [
+				{
+					label: getTranslation("ViewBrandButton"),
+					url: href,
+				},
+			];
+			break;
+		}
+		case !!elements?.navigation: {
+			// When you're viewing a collection without collection in url
+			presenceData.details = getTranslation("TypeView").replace(
+				"{type}",
+				document.querySelector("h1")?.textContent?.toLowerCase()
+			);
+			presenceData.state = Array.from(
+				document
+					.querySelector('[aria-label="Breadcrumb"]')
+					.querySelectorAll("li") || []
+			)
+				?.map(x => x?.textContent)
+				?.join(" => ");
+			break;
+		}
+		default: {
+			presenceData.details = getTranslation("Browsing");
+			break;
+		}
+	}
+
+	if (!buttons && presenceData.buttons) delete presenceData.buttons;
 
 	if (presenceData.details) presence.setActivity(presenceData);
 	else presence.setActivity();