result ts

import { Component, OnInit, ViewEncapsulation } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { Subject, takeUntil } from "rxjs";
import { environment } from "src/environments/environment";
import { RestApiService } from "src/app/core/services/rest-api.service";

@Component({
	selector: "app-result",
	templateUrl: "./result.component.html",
	styleUrl: "./result.component.scss",
	encapsulation: ViewEncapsulation.None,
})
export class ResultComponent implements OnInit {
	unsubscriber: Subject<any> = new Subject<any>();
	backendURL = environment.backendURL;

	isOnline = true;
	isStandalone = false;

	footerBtnText = "Recommencer";

	// Component functionality
	selectedRegion: string = "";
	isCopied: boolean = false;

	// Wheel data
	productData: any;
	userWheelStatus: "lose" | "win" = "win";
	userWheelProductType: "physical" | "voucher" | "" = "";
	userWheelProductCode: string = "";
	userWheelProductImg: string = "";

	// Result data
	isInputHasValue: boolean = false;
	resultMessage: string = "";

	constructor(
		private router: Router,
		private activatedRoute: ActivatedRoute,
		private restApiService: RestApiService
	) {}

	// --------------------------------------------------------------------------------------------
	// @ Lifecycle hooks
	// --------------------------------------------------------------------------------------------
	ngOnInit(): void {
		const storedWinningProduct = localStorage.getItem("winningProduct");
		if (storedWinningProduct) {
			const winningProduct = JSON.parse(storedWinningProduct);
			this.productData = winningProduct.product;

			if (this.productData) {
				this.userWheelStatus = "win";
				this.userWheelProductType = this.productData.category;
				this.userWheelProductImg = this.productData.img.url;

				if (this.userWheelProductType === "physical") {
					this.resultMessage = "Pour récupérer ton cadeau, contacte le numéro XXX dans un délai de 10 jours";
				} else {
					this.footerBtnText = "Suivant";
					this.resultMessage = "Prends une capture d'écran du code affiché pour pouvoir l'utiliser plus tard";
				}
			}
		}

		this.restApiService
			.get("vouchers-codes/getVoucher")
			.pipe(takeUntil(this.unsubscriber))
			.subscribe({
				next: (response) => {
					this.userWheelProductCode = `${response.data.code}197364022`;
				},
				error: (error) => {
					console.log(error.message);
				},
			});
	}

	ngOnDestroy(): void {
		this.unsubscriber.next(null);
		this.unsubscriber.complete();
	}

	// --------------------------------------------------------------------------------------------
	// @ Events
	// --------------------------------------------------------------------------------------------
	onFooterBtnClick() {
		if (this.userWheelProductType === "voucher" && this.selectedRegion !== "") {
			this.isInputHasValue = true;
		} else {
			this.router.navigate(["../policy"], { relativeTo: this.activatedRoute });
		}
	}

	onRegionChange(event: Event) {
		this.selectedRegion = (event.target as HTMLSelectElement).value;
	}

	// --------------------------------------------------------------------------------------------
	// @ Function
	// --------------------------------------------------------------------------------------------
	handleClipboardEvent() {
		this.isCopied = true;
	}
}