From b89f76d02df1d752867ed7bf4ea7e8527881f1f3 Mon Sep 17 00:00:00 2001
From: migbash <20924663+migbash@users.noreply.github.com>
Date: Mon, 6 Mar 2023 18:53:37 +0000
Subject: [PATCH] fix: #1010;

---
 .../_FeaturedMatch_Widget.svelte              | 107 +++++++++++++-----
 .../home/featured_match/interface-fixture.ts  |   9 +-
 .../home/featured_match/response_models.ts    |   4 +-
 3 files changed, 84 insertions(+), 36 deletions(-)

diff --git a/src/lib/components/page/home/featured_match/_FeaturedMatch_Widget.svelte b/src/lib/components/page/home/featured_match/_FeaturedMatch_Widget.svelte
index 8faec0499..e8f8291ab 100644
--- a/src/lib/components/page/home/featured_match/_FeaturedMatch_Widget.svelte
+++ b/src/lib/components/page/home/featured_match/_FeaturedMatch_Widget.svelte
@@ -35,10 +35,12 @@
 	} from '$lib/models/home/featured_match/response_models';
 	import type { fixture } from '$lib/store/vote_fixture';
 // [ℹ] key component assets;
+	import { page } from '$app/stores';
 	import {
 		dlog,
 		FM_W_H_STY, FM_W_H_TAG, FM_W_H_TOG, logErrorGroup
 	} from '$lib/utils/debug';
+	import { platfrom_lang_ssr } from '$lib/utils/platform-functions';
 	import no_featured_match_visual from './assets/no_featured_match_visual.svg';
 	import no_featured_match_visual_dark from './assets/no_featured_match_visual_dark.svg';
 
@@ -357,6 +359,19 @@
 		);
 	});
 
+  // ~~~~~~~~~~~~~~~~~~~~~
+	// (SSR) LANG SVELTE | IMPORTANT
+	// ~~~~~~~~~~~~~~~~~~~~~
+
+	let server_side_language = platfrom_lang_ssr(
+		$page?.route?.id,
+		$page?.error,
+		$page?.params?.lang
+	);
+	dlog(
+		`server_side_language: ${server_side_language}`
+	);
+
 	// ~~~~~~~~~~~~~~~~~~~~~
 	// COMPONENT TIMER CLOCK
 	// ~~~~~~~~~~~~~~~~~~~~~
@@ -456,6 +471,14 @@
 		countD_h = '0' + countD_h;
 	}
 
+  let show_countdown: boolean = true;
+
+  $: if (countD_sec.includes('-')) {
+		show_countdown = false;
+	} else {
+		show_countdown = true;
+	}
+
 	// ~~~~~~~~~~~~~~~~~~~~~
 	// COLOR-THIEF INSTANCE
 	// ~~~~~~~~~~~~~~~~~~~~~
@@ -730,36 +753,52 @@
 							<!-- [ℹ] fixture-timer-clock 
               -->
 							<div style="align-self: center;">
-								<p
-									class="w-500 x-large desktop-x-large"
-								>
-									{countD_h}:{countD_min}:{countD_sec}
-								</p>
-								<p
-									class="w-400 small color-grey desktop-medium"
-									style="white-space: nowrap;"
-								>
-									{getOrdinalNum(
-										FEATURED_MATCH_WIDGET_DATA.time.getDate()
-									)}
-									{monthNames[
-										FEATURED_MATCH_WIDGET_DATA.time
-											.getMonth()
-											.toString()
-									]}
-									{FEATURED_MATCH_WIDGET_DATA.time
-										.getFullYear()
-										.toString()
-										.substr(-2)},
-									{FEATURED_MATCH_WIDGET_DATA.time
-										.getHours()
-										.toString()}:{(
-										'0' +
-										FEATURED_MATCH_WIDGET_DATA.time
-											.getMinutes()
-											.toString()
-									).slice(-2)}h
-								</p>
+                {#if show_countdown}
+                  <p
+                    class="w-500 x-large desktop-x-large"
+                  >
+                    {countD_h}:{countD_min}:{countD_sec}
+                  </p>
+                  <p
+                    class="w-400 small color-grey desktop-medium"
+                    style="white-space: nowrap;"
+                  >
+                    {getOrdinalNum(
+                      FEATURED_MATCH_WIDGET_DATA.time.getDate()
+                    )}
+                    {monthNames[
+                      FEATURED_MATCH_WIDGET_DATA.time
+                        .getMonth()
+                        .toString()
+                    ]}
+                    {FEATURED_MATCH_WIDGET_DATA.time
+                      .getFullYear()
+                      .toString()
+                      .substr(-2)},
+                    {FEATURED_MATCH_WIDGET_DATA.time
+                      .getHours()
+                      .toString()}:{(
+                      '0' +
+                      FEATURED_MATCH_WIDGET_DATA.time
+                        .getMinutes()
+                        .toString()
+                    ).slice(-2)}h
+                  </p>
+                {:else}
+                  <a
+                    href="{
+                      FEATURED_MATCH_WIDGET_DATA?.fix_urls != null 
+                        ? FEATURED_MATCH_WIDGET_DATA?.fix_urls[server_side_language] 
+                        : ''}
+                    ">
+                    <button
+                      id="watch-match-btn"
+                      class="btn-primary-v2">
+                      Watch the Match
+                    </button>
+                  </a>
+                {/if}
+                
 							</div>
 
 							<!-- [ℹ] second-team 
@@ -2044,6 +2083,14 @@
   COMPONENT STYLE
 =================-->
 <style>
+
+  button#watch-match-btn {
+    padding: 10px 16px;
+    font-size: 14px;
+    box-shadow: 0px 3px 8px rgba(212, 84, 12, 0.32);
+    border-radius: 8px;
+  }
+
 	#featured-no-match-box {
 		padding: 20px;
 		background: #ffffff;
diff --git a/src/lib/models/home/featured_match/interface-fixture.ts b/src/lib/models/home/featured_match/interface-fixture.ts
index 49f355315..9ce3f56bc 100644
--- a/src/lib/models/home/featured_match/interface-fixture.ts
+++ b/src/lib/models/home/featured_match/interface-fixture.ts
@@ -1,9 +1,9 @@
-import type { ScoresTournamentsUrls } from '../../hasura';
+import type { ScoresTournamentsUrls, Urls } from '../../hasura';
 import type { SelectedFixture_LiveOdds_Response } from './firebase-real-db-interface';
 import type {
-	BestPlayers_Data,
-	SelectedFixutre,
-	TranslationsResponse
+  BestPlayers_Data,
+  SelectedFixutre,
+  TranslationsResponse
 } from './response_models';
 
 /**
@@ -81,6 +81,7 @@ export interface FixtureResponse {
 	selected_data: SelectedFixutre;
 	league_id: number;
 	urls?: ScoresTournamentsUrls;
+  fix_urls?: Urls;
 }
 
 /**
diff --git a/src/lib/models/home/featured_match/response_models.ts b/src/lib/models/home/featured_match/response_models.ts
index ad180e2db..a2c4f26fa 100644
--- a/src/lib/models/home/featured_match/response_models.ts
+++ b/src/lib/models/home/featured_match/response_models.ts
@@ -1,7 +1,7 @@
 import type { BETARENA_HASURA_scores_tournaments } from '../../hasura';
 import type {
-	FixtureResponse,
-	MatchVotes
+  FixtureResponse,
+  MatchVotes
 } from './interface-fixture';
 
 /**