add third party app payment method

teambtcmap · Feb 4, 2024 · d2c002b · d2c002b
1 parent 9509195
commit d2c002b
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 6 deletions.
diff --git a/src/lib/map/setup.ts b/src/lib/map/setup.ts
@@ -676,11 +676,16 @@ export const generateMarker = (
 
 		const verified = verifiedArr(element);
 
+		const thirdParty =
+			element.tags?.['payment:lightning:requires_companion_app'] === 'yes' &&
+			element.tags['payment:lightning:companion_app_url'];
+
 		const paymentMethod =
 			element.tags &&
 			(element.tags['payment:onchain'] ||
 				element.tags['payment:lightning'] ||
-				element.tags['payment:lightning_contactless']);
+				element.tags['payment:lightning_contactless'] ||
+				thirdParty);
 
 		const popupContainer = L.DomUtil.create('div');
 
@@ -886,6 +891,12 @@ ${
 					<span class='block text-mapLabel text-xs'>Payment Methods</span>
 
 					<div class='w-full flex space-x-2 mt-0.5'>
+					${
+						thirdParty
+							? `<a href=${element.tags?.['payment:lightning:companion_app_url']} target="_blank" rel="noreferrer">
+								<i class="fa-solid fa-mobile-screen-button w-6 h-6 !text-primary dark:!text-white hover:!text-link dark:hover:!text-link transition-colors" title="Third party app required"></i>
+							   </a>`
+							: `
 						<img src=${
 							element.tags && element.tags['payment:onchain'] === 'yes'
 								? theme === 'dark'
@@ -943,8 +954,9 @@ ${
 								? 'Lightning Contactless accepted'
 								: element.tags && element.tags['payment:lightning_contactless'] === 'no'
 									? 'Lightning contactless not accepted'
-									: 'Lightning Contactless unknown'
-						}"/>
+									: 'Lightning contactless unknown'
+						}"/>`
+					}
 					</div>
 				</div>`
 		: ''

diff --git a/src/routes/merchant/[id]/+page.svelte b/src/routes/merchant/[id]/+page.svelte
@@ -119,11 +119,16 @@
 		instagram = merchant.osm_json.tags?.instagram || merchant.osm_json.tags?.['contact:instagram'];
 		facebook = merchant.osm_json.tags?.facebook || merchant.osm_json.tags?.['contact:facebook'];
 
+		thirdParty =
+			merchant.osm_json.tags?.['payment:lightning:requires_companion_app'] === 'yes' &&
+			merchant.osm_json.tags['payment:lightning:companion_app_url'];
+
 		paymentMethod =
 			merchant.osm_json.tags &&
 			(merchant.osm_json.tags['payment:onchain'] ||
 				merchant.osm_json.tags['payment:lightning'] ||
-				merchant.osm_json.tags['payment:lightning_contactless']);
+				merchant.osm_json.tags['payment:lightning_contactless'] ||
+				thirdParty);
 
 		lat = latCalc(merchant['osm_json']);
 		long = longCalc(merchant['osm_json']);
@@ -230,13 +235,21 @@
 	let instagram: string | undefined;
 	let facebook: string | undefined;
 
+	let thirdParty: boolean | undefined;
 	let paymentMethod: string | undefined;
 
+	let thirdPartyTooltip: HTMLAnchorElement;
 	let onchainTooltip: HTMLImageElement;
 	let lnTooltip: HTMLImageElement;
 	let nfcTooltip: HTMLImageElement;
 	let verifiedTooltip: HTMLSpanElement;
 
+	$: thirdPartyTooltip &&
+		merchant &&
+		tippy([thirdPartyTooltip], {
+			content: 'Third party app required'
+		});
+
 	$: onchainTooltip &&
 		merchant &&
 		tippy([onchainTooltip], {
@@ -267,7 +280,7 @@
 					? 'Lightning Contactless accepted'
 					: merchant.osm_json.tags?.['payment:lightning_contactless'] === 'no'
 						? 'Lightning contactless not accepted'
-						: 'Lightning Contactless unknown'
+						: 'Lightning contactless unknown'
 		});
 
 	$: verifiedTooltip &&
@@ -551,7 +564,19 @@
 					<div>
 						<h4 class="uppercase text-primary dark:text-white">Accepted Payments</h4>
 						<div class="mt-1 flex items-center justify-center space-x-2">
-							{#if typeof window !== 'undefined'}
+							{#if thirdParty}
+								<a
+									bind:this={thirdPartyTooltip}
+									href={merchant.osm_json.tags?.['payment:lightning:companion_app_url']}
+									target="_blank"
+									rel="noreferrer"
+								>
+									<i
+										class="fa-solid fa-mobile-screen-button h-8 w-8 text-primary transition-colors hover:text-link dark:text-white dark:hover:text-link"
+									>
+									</i>
+								</a>
+							{:else if typeof window !== 'undefined'}
 								<img
 									bind:this={onchainTooltip}
 									src={merchant.osm_json.tags?.['payment:onchain'] === 'yes'