ng-easycommerce-v18 0.0.1

package/projects/ng-easycommerce/src/lib/ec-services/product-detail.service.ts

@@ -0,0 +1,288 @@
+import { inject, Injectable } from '@angular/core';
+import { ProductsService } from './products.service';
+import { BehaviorSubject, firstValueFrom } from 'rxjs';
+import { Options, OptionValue, Product } from '../interfaces';
+import { ToastService } from './toast.service';
+import { CartService } from './cart.service';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class ProductDetailService {
+	private _productsService: ProductsService = inject(ProductsService);
+	private _toastService: ToastService = inject(ToastService);
+	private _cartService: CartService = inject(CartService);
+
+	private _productSubject = new BehaviorSubject<Product | null>({});
+	private _optionsSubject = new BehaviorSubject<any>({});
+	private _associatedDataSubject = new BehaviorSubject<any>({ price: '', stock: 0, picture: '' });
+
+	public product$ = this._productSubject.asObservable();
+	public options$ = this._optionsSubject.asObservable();
+	public associatedData$ = this._associatedDataSubject.asObservable();
+
+	private variants: any[] = []
+
+	constructor() { }
+	/**
+	 * Obtengo el producto a traves de su codigo e inicializo la configuración
+	 * del Servicio.
+	 * @param code 
+	 * @param variant 
+	 */
+	loadProduct(code: string, variant: boolean = false) {
+		firstValueFrom(this._productsService.getProductByCode(code, variant))
+			.then(res => {
+				variant ? this.initialize(res, code) : this.initialize(res)
+			})
+			.catch(err => { console.log(err); this._productSubject.next(null) });
+	}
+	/**
+	 * Carga el producto en el observable y la configuración de las variantes.
+	 * @param product 
+	 * @param variantCode 
+	 */
+	private initialize(product: Product, variantCode?: string) {
+		this._productSubject.next(product);
+		const aux: Product['options'] = product.options || [];
+		const options = aux?.map(option => this.toOption(option))
+		this._optionsSubject.next(options);
+		variantCode ? this.updateVariants(variantCode) : this.updateVariants();
+		this.variants.length && this.generateAssociatedDataFromVariants();
+	}
+	/**
+	 * Formate los datos para las opciones del producto.
+	 * @param option 
+	 * @returns 
+	 */
+	private toOption(option: Options) {
+		return {
+			name: option.label,
+			code: option.code,
+			type: option.type,
+			values: option.values.map((value: any) => ({ name: value.code, description: value.name, image: value.image, mobileImage: value.mobileImage, selected: false }))
+		}
+	}
+
+	/**
+	 * Cambia las opciones, obtiene el producto asociado a la opcion elegida.
+	 */
+	setOption(optionCode: any, optionValue: any) {
+		const options = this._optionsSubject.value;
+		const option = options.find((element: any) => element.code == optionCode).values.find((value: any) => value.name == optionValue);
+		option.selected = !option.selected;
+		options.find((element: any) => element.code == optionCode).values.forEach(
+			(value: any) => { if (value.name != option.name) value.selected = false }
+		);
+		this._optionsSubject.next(options);
+		this.updateVariants();
+		this.variants.length > 0 ? this.generateAssociatedDataFromVariants() : this._toastService.show('selection-not-available')
+	}
+	/**
+	 * Actualiza el observable de `associatedData` el cual se utiliza para mostrar los datos
+	 * en el frontend segun el producto y/o variante elegida.
+	 * Obtiene los datos de la variante y los formatea.
+	 */
+	generateAssociatedDataFromVariants() {
+		let associated: any = {};
+		if (this.variants.length == 1) {
+			const variant = this.variants[0];
+			console.log(variant)
+			associated.stock = variant.stock
+			associated.price = variant.price.toString();
+			associated.saleprice = variant.saleprice && variant.saleprice.toString() || undefined;
+			associated.discount = variant?.discount || undefined;
+			associated.properties = variant.properties ? this.beautifyProperties(variant.properties) : undefined;
+			associated.uniqueExternalCode = variant?.uniqueExternalCode || undefined;
+			associated.multipleQuantity = variant?.multipleQuantity || undefined;
+		} else {
+			associated.price = this.createPrice()
+			associated.saleprice = this.createSalePrice()
+			associated.stock = (this.variants.map(variant => variant.stock)).reduce((a, b) => a + b)
+			associated.discount = this.createDiscount()
+		}
+
+		('images' in this.variants[0] && this.variants[0].images.length > 0)
+			? associated.picture = this.variants[0].images[0]
+			: associated.picture = (this._associatedDataSubject.value?.picture || (this._productSubject.value && this._productSubject.value?.picturesdefault?.[0] || []));
+
+		associated.maximumAmount = this.variants[0]?.maximumAmount || 0
+		associated.minimumAmount = this.variants[0]?.minimumAmount || 0
+
+		associated.maximumItemsQuantity = this.variants[0]?.stock > 0 && 'maximumItemsQuantity' in this.variants[0] ? this.variants[0]?.maximumItemsQuantity : this.variants[0]?.stock
+		associated.minimumItemsQuantity = this.variants[0]?.stock > 0 && 'minimumItemsQuantity' in this.variants[0]
+			&& this.variants[0]?.minimumItemsQuantity > 0 ? this.variants[0]?.minimumItemsQuantity
+			: (this.variants[0]?.multipleQuantity ? this.variants[0]?.multipleQuantity : 1)
+
+		associated.finalConsumer = {
+			finalConsumerPrice: this.variants[0]?.final_consumer_price,
+			originalFinalConsumerPrice: this.variants[0]?.original_final_consumer_price,
+		}
+		associated.taxes = {
+			taxIncluded: this.variants[0]?.taxIncluded,
+			taxCategory: this.variants[0]?.taxCategory,
+		}
+		//console.log(associated)
+		this._associatedDataSubject.next(associated);
+	}
+	/**
+	 * Mejora los datos de las `properties`.
+	 * @param properties 
+	 * @returns 
+	 */
+	beautifyProperties(properties: any): any {
+		let beautifyData: any = [];
+		properties.forEach((prop: any) => {
+			for (let key in prop) {
+				beautifyData.push({ name: key, value: prop[key] })
+			}
+		})
+		return beautifyData
+	}
+	/**
+	 * Devuelve un descuento en caso de existir.
+	 * @returns 
+	 */
+	createDiscount(): any {
+		let allDiscounts: string = '';
+		this.variants.forEach(variant => {
+			variant.discount && (allDiscounts += ', ' + variant.discount);
+		})
+		if (allDiscounts == '') return undefined;
+		return allDiscounts;
+	}
+	/**
+	 * Devuelve el precio de venta.
+	 * @returns 
+	 */
+	createSalePrice(): any {
+		let minPrice: number = 0;
+		let maxPrice: number = 0;
+		let allPrices: any = this.variants.map(v => v.saleprice).filter(e => e !== undefined);
+		if (allPrices.length == 0) {
+			return undefined
+		}
+		minPrice = allPrices.reduce((a: number, b: number) => Math.min(a, b));
+		maxPrice = allPrices.reduce((a: number, b: number) => Math.max(a, b));
+		return minPrice == maxPrice ? maxPrice.toString() : minPrice + ' - ' + maxPrice;
+	}
+	/**
+	 * Devuelve el precio o los precios en caso de tener varias variantes con distintos precios.
+	 * @returns 
+	 */
+	createPrice(): any {
+		let minPrice: number = 0;
+		let maxPrice: number = 0;
+		let allPrice: any = this.variants.map(v => v.price)
+		minPrice = allPrice.reduce((a: number, b: number) => Math.min(a, b));
+		maxPrice = allPrice.reduce((a: number, b: number) => Math.max(a, b));
+		return minPrice == maxPrice ? maxPrice.toString() : minPrice + ' - ' + maxPrice;
+	}
+	/**
+	 * Actualiza las variantes.
+	 * @param code 
+	 */
+	updateVariants = (code?: string) => {
+		let variants = this._productSubject.value?.variants
+		//console.log(variants)
+		if (!code) {
+			this._optionsSubject.value.forEach((option: any) => {
+				option.values.forEach((value: any) => {
+					if (value.selected) {
+						variants = variants?.filter(variant => {
+							return variant.options.some((variantOption: any) => {
+								return (option.code in variantOption && variantOption[option.code] == value.name);
+							})
+						})
+					}
+				})
+			})
+		} else {
+			variants = variants?.filter(variant => variant.code == code);
+		}
+		this.variants = variants || [];
+		code && this.updateOptions();
+	}
+	/**
+	 * Actualiza las opciones
+	 */
+	private updateOptions = () => {
+		let { options } = this.variants.length && this.variants[0];
+		options && options.forEach((option: any) => Object.keys(option).forEach(key => this.setOption(key, option[key])))
+	}
+	/**
+	 * Agrega el producto al carrito.
+	 * @param quantity Cantidad del producto a agregar
+	 * @param variantCode Codigo de la variante.
+	 * @returns 
+	 */
+	addToCart(quantity: number, variantCode?: string){
+
+		if(!this.variants.length){
+			this._toastService.show('cant-buy')
+			return;
+		}
+		let productSelected = JSON.parse(JSON.stringify((this._productSubject.getValue())));
+
+		let variant:any;
+
+		switch(this.variants.length){
+			case 0:
+				this._toastService.show('no-variants');
+				break;
+			case 1:
+				this._associatedDataSubject.value.stock == 0
+					? this._toastService.show('out-of-stock')
+					: variant = this.variants[0]
+				break;
+			default:
+				if(variantCode){
+					variant = this.variants.find( variant =>  variant.code === variantCode)
+					if(variant.stock == 0){
+						this._toastService.show('out-of-stock')
+						variant = undefined
+					}
+				} else {
+					this._toastService.show('variants-left')
+				}
+				break;
+		}
+		if(!variant) return;
+		if(!this.validateQuantity(quantity)) return;
+
+		//agregar al servicio del carrito
+		this._cartService.addToCart(this.makeAffordableProduct(productSelected), quantity, variant.code);
+	}
+	/**
+	 * Genera un producto para hacer mas facíl el envio del elemento al backend.
+	 * @param productSelected 
+	 * @returns 
+	 */
+	private makeAffordableProduct(productSelected: Product) {
+        productSelected.price = parseFloat(this._associatedDataSubject.value.price);
+        productSelected.saleprice = parseFloat(this._associatedDataSubject.value.price);
+		productSelected.options = [];
+        this.variants[0].options.forEach((option:any) => productSelected.options = { ...productSelected.options, ...option })
+        return productSelected;
+    }
+	/**
+	 * Valida la cantidad que se quiere agregar de un producto.
+	 * Revisa que no supere el stock, el maximo de items que se puede agregar
+	 * asi como el minimo.
+	 * @param quantity 
+	 * @returns 
+	 */
+	private validateQuantity = (quantity: number) => {
+        const actualQuantity = this._cartService.getCountFromItemInCart(this.variants[0].code);
+        const asociatedData = this._associatedDataSubject.value;
+        if ((actualQuantity + quantity) > asociatedData.maximumItemsQuantity) {
+            this._toastService.show('maximum-items-quantity', { quantity: asociatedData.maximumItemsQuantity })
+            return false;
+        }
+        if ((actualQuantity + quantity) < asociatedData.minimumItemsQuantity) {
+            this._toastService.show('minimum-items-quantity', { quantity: asociatedData.minimumItemsQuantity })
+            return false;
+        }
+        return true
+    }
+}

package/projects/ng-easycommerce/src/lib/ec-services/products.service.ts

@@ -0,0 +1,162 @@
+import { EnvironmentInjector, inject, Injectable, runInInjectionContext, signal } from '@angular/core';
+import { BehaviorSubject, map, Observable, ReplaySubject, shareReplay, switchMap } from 'rxjs';
+import { DefaultFilter, FilterElement, FilterType, IFilter, Options, PaginationSettings, ParamsProductsWithUniqueVariant, Product } from '../interfaces';
+import { ConnectionService } from '../api';
+import { ApiConstantsService, CoreConstantsService } from '../constants';
+import { OptionsService } from './options.service';
+import { PaginationService } from './pagination.service';
+import { Filter, FilterFactory } from '../classes';
+import { FiltersService } from './filters.service';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ProductsService {
+    private _connection: ConnectionService = inject(ConnectionService);
+    private _apiConsts: ApiConstantsService = inject(ApiConstantsService);
+    private _optionsService: OptionsService = inject(OptionsService);
+    private _paginationService: PaginationService = inject(PaginationService);
+    private _consts: CoreConstantsService = inject(CoreConstantsService);
+
+    private _productsSubject: BehaviorSubject<Product[]> = new BehaviorSubject<Product[]>([])
+    public products$: Observable<Product[]> = this._productsSubject.asObservable();
+    private _filtersService: FiltersService = inject(FiltersService)
+
+    private searchValue = signal<string>('');
+
+    constructor() {
+        this._paginationService.reset$.subscribe(res => {
+            this._productsSubject.next([])
+        })
+        this._paginationService.paginationData$.subscribe(
+            products => {
+                const productsWithUniqueVariant = this._consts.getProductWithUniqueVariant();
+                if (productsWithUniqueVariant)
+                    products = this.getProductsWithUniqueVariant(products, this.getObjectWithVariant())
+                const currentProducts = this._productsSubject.value;
+                this._productsSubject.next([...currentProducts, ...products]);
+            }
+        )
+    }
+
+    //API URL
+    private _shopApiUrl = this._apiConsts.SHOP_API_URL;
+    productByCodeApi(code: string, variant: boolean) { return this._shopApiUrl + this._apiConsts.CHANNEL + '/products/by-code/' + (variant ? 'variant/' : '') + code + '?locale=' + this._apiConsts.LOCALE; }
+
+    /**
+     * Setea los filtros para obtener los productos.
+     * @param paginationSettings 
+     * @param searchValue 
+     */
+    getProductsForFilter(paginationSettings?: PaginationSettings, searchValue?: any): any {
+        searchValue ? this.searchValue.set(searchValue) : this.searchValue.set('');
+        paginationSettings && this._filtersService.setFilters(paginationSettings)
+    }
+    /**
+     * Actualiza los productos con los de la siguiente pagina.
+     */
+    updateProducts() {
+        if (!this._paginationService.getWaiting()) {
+            this._paginationService.getNext()
+        }
+    }
+    /**
+     * Devuelve el producto por codigo.
+     * @param code Codigo del producto
+     * @param variant Para indicar si es variante o no.
+     * @returns 
+     */
+    getProductByCode(code: string, variant: boolean): Observable<Product> {
+        return this._connection.get(this.productByCodeApi(code, variant));
+    }
+
+    /**
+     * Recibe una lista de productos y retorna los mismos productos tantas veces como variantes tenga.
+     * cada producto retornado tendrá una única variante.
+     * @param products  Array. Lista de productos.
+     * @param withOption 'type' tipo de opción, code: código de la opción. 'defaultFirstOption': en caso de que no se pueda desdoblar por la opción indicada si el valor es verdadero se intentara desdoblar por la primera opción asociada al producto.
+     * 'checkIfStock': en caso de que esta valor sea verdadero se realiza un control de que la variantes cuenten con stock para ser un producto desdoblado por la variante, si el valor es falso no se realiza dicho control y el producto se desdoblara con stock en 0.
+     * @returns arreglo con los productos desdoblados por la opción solicitada.
+     * (opción por defecto que se intenta hacer el desdoblamiento 'color', o bien si en le parámetro withOption el atributo 'defaultFirstOption' es verdadero se desdobla por la primera opción asociada al producto)
+     */
+    getProductsWithUniqueVariant = (products: Product[], withOption: ParamsProductsWithUniqueVariant = { type: 'color', code: 'color', defaultFirstOption: false, checkIfStock: true }) => {
+
+        !withOption['code'] && withOption['type'] && (withOption['code'] = withOption['type']) || !withOption['code'] && (withOption['code'] = 'color')
+        !withOption['type'] && withOption['code'] && (withOption['type'] = withOption['code']) || !withOption['type'] && (withOption['type'] = 'color')
+        !withOption.hasOwnProperty('defaultFirstOption') && (withOption['defaultFirstOption'] = false)
+        !withOption.hasOwnProperty('checkIfStock') && (withOption['checkIfStock'] = true)
+
+        let productsUniqueVariant: any[] = [];
+        products.forEach((product: any) => {
+            let variants = [...product?.variants];
+            let option = product.options.find((opt: any) => opt.type.toLowerCase() === withOption.type?.toLowerCase());
+            if (option) {
+                option.values.forEach((optionValue: any) => {
+                    let modified_product = JSON.parse(JSON.stringify(product));
+                    modified_product.options.find((option: any) => option.type.toLowerCase() == withOption.type?.toLowerCase()).values = [{ code: optionValue.code, name: optionValue.name }];
+                    //busco una variante con ese code para asignarle la lista de imagenes
+                    let variantAux = variants.find(
+                        variant => ((withOption.checkIfStock && variant.stock > 0) || withOption.checkIfStock == false)
+                            && variant.options.length
+                            && variant.options.some((op: any) => (op.hasOwnProperty(withOption.code?.toLowerCase()) || op.hasOwnProperty(withOption.code?.toUpperCase()))
+                                && (op[`${withOption.code?.toLowerCase()}`] || op[`${withOption.code?.toUpperCase()}`]) === optionValue.code)
+
+                    );
+                    //console.log("---",variantAux);
+                    variantAux && productsUniqueVariant.push(this.productWithVariantValues(modified_product, variantAux, optionValue));
+                })
+            } else {
+                /**
+                 * se modifica el caso para cuando se toma el primer `option` del producto para
+                 * armar la lista de productos con variantes.
+                 */
+                if (withOption.defaultFirstOption && product.options?.length) {
+                    let firstOptions = product.options[0]
+                    product.options[0].values.forEach((optionValue: any) => {
+
+                        let modified_product = JSON.parse(JSON.stringify(product));
+                        modified_product.options.find((option: Options) => option.type == firstOptions.type).values = [{ code: optionValue.code, name: optionValue.name }];
+
+                        let variantAux = variants.find(variant => {
+                            return variant.options.find((elem: any) => elem[firstOptions.code] == optionValue.code)
+                        })
+
+                        if (variantAux && variantAux.images.length == 0) {
+                            variantAux.images = product.picturesdefault
+                        }
+
+                        if (withOption.checkIfStock) {
+                            (variantAux && variantAux.stock > 0) ? productsUniqueVariant.push(this.productWithVariantValues(modified_product, variantAux, optionValue)) : null;
+                        } else {
+                            variantAux && productsUniqueVariant.push(this.productWithVariantValues(modified_product, variantAux, optionValue))
+                        }
+
+                    })
+                } else {
+                    productsUniqueVariant.push(product)
+                }
+
+            }
+        })
+        return productsUniqueVariant.length > 0 ? productsUniqueVariant : products;
+    }
+
+    productWithVariantValues = (product: Product, variant: any, optionValue: any) => {
+        product.picturesdefault = [...variant.images]
+        product.variant_id = variant.code; //lo dejo aca hasta asegurarnos de que no se estaba usando en otra parte.
+        product.stock = variant.stock || 0; //lo dejo aca hasta asegurarnos de que no se estaba usando en otra parte.
+        product.price = variant.price.toString() || '0';
+        product.currentOption = {
+            ...optionValue,
+            productCode: product.id,
+            variantCode: variant.code,
+            stock: variant.stock || 0,
+            finalPrice: variant.saleprice || variant.price || 0,
+        }
+        return product
+    }
+
+    private getObjectWithVariant = (): ParamsProductsWithUniqueVariant => {
+        return this._consts.getParamsProductsWithUniqueVariant()
+    }
+}

package/projects/ng-easycommerce/src/lib/ec-services/re-captcha.service.ts

@@ -0,0 +1,126 @@
+import { afterNextRender, inject, Injectable } from '@angular/core';
+import { RecaptchaSettings } from 'ng-recaptcha-2';
+import { BehaviorSubject, concatMap, firstValueFrom, map, Observable } from 'rxjs';
+import { ConnectionService } from '../api';
+import { ParametersService } from './parameters.service';
+import { ApiConstantsService } from '../constants';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class ReCaptchaService {
+
+	private _connection: ConnectionService = inject(ConnectionService);
+	private _paramsService: ParametersService = inject(ParametersService);
+	private _apiConsts: ApiConstantsService = inject(ApiConstantsService);
+
+	private _recaptchaSubject: BehaviorSubject<RecaptchaSettings> = new BehaviorSubject<RecaptchaSettings>({ siteKey: '' });
+	public recaptcha$ = this._recaptchaSubject.asObservable();
+
+	private params$ = this._paramsService.getParameters();
+	public params: any;
+
+	private urlBaseFormat: string = '';
+	private testing: string = "easycommercetech"
+	private productionEnvironment: Boolean = false;
+
+	private recaptchaSiteKeysUrl = './assets/recaptcha/recaptcha-site-keys.json';
+	private recaptchaSitesUrl = './assets/recaptcha/recaptcha-sites.json';
+	private recaptchaSitesUrlProd = './assets/recaptcha/recaptcha-sites-prod.json'
+
+	private RECAPTCHA_SITE_KEYS: any = []
+	private RECAPTCHA_SITES: any = []
+
+	constructor() {
+		this.params$.subscribe(params => this.params = params);	
+		this.initializer();
+		afterNextRender(()=> {
+			this.urlBaseFormat = this.formatUrl(location.href);
+			this.productionEnvironment = this.isProd();
+		})
+	}
+	/**
+     * Devuelve true si la url es de produccion, false en caso contrario. 
+     * @returns {Boolean}
+     */
+	private isProd(): Boolean {
+		return !this.urlBaseFormat.includes(this.testing)
+	}
+	/**
+     * Recibe una url y se encarga de quitarle "http", "/" y las demas rutas, para devolver la url
+     * del sitio con una formato limpio. Ejemplo "https://ejemplo.com.ar/ruta1/ruta2/" a "ejemplo.com.ar" 
+     * @param {string} url url que sera formateada 
+     * @returns {string} url formateada
+     */
+	private formatUrl(url: string): string {
+		return url.split("/").filter(e => e != "/").filter(e => !e.includes("http")).filter(e => e.length).slice(0,1).pop() || ''
+	}
+
+	/**
+     * Path que contiene la direccion del endpoint referido al captcha
+     * @returns {string} 
+     */
+    private captchaApi():string { return `${this._apiConsts.SHOP_API_URL}channels`;}
+	/**
+     * Prioriza si existe un parametro desde el backend de nombre 'recaptcha_key_canal', 
+     * de no existir este busca uno de tipo general de nombre 'recaptcha_key',
+     * y en caso de que este no exista se realiza lo siguiente: 
+     * carga las variables RECAPTCHA_SITES y RECAPTCHA_SITE_KEYS, con los valores
+     * de los Json estaticos, para posteriormente obtener la "siteKey"(clave del captcha) en caso
+     * de que no venga desde el backend. 
+     */
+	private initializer(): void {
+		let paramThisChannel = this.params.find((param:any) => param.code === `recaptcha_key_${this._apiConsts.CHANNEL}`)
+		if(paramThisChannel){
+			this._recaptchaSubject.next({siteKey: paramThisChannel.value});
+		}else{
+			let paramGeneral = this.params.find((param:any) => param.code === 'recaptcha_key')
+			if(paramGeneral){
+				this._recaptchaSubject.next({siteKey: paramGeneral.value});
+			} else {
+				this.getRecaptchaSites().pipe(
+					map((res:any) => this.RECAPTCHA_SITES = res),
+					concatMap( res => this.getRecaptchaSiteKeys().pipe(
+						map(res=> this.RECAPTCHA_SITE_KEYS = res)
+					))
+				).subscribe(
+					e => this.getSiteKey()
+				)
+			}
+		}
+	}
+
+	/**
+     * Obtiene los datos del archivo .json en donde se guardan las claves.
+     * @returns {Observable<any>} Datos obtenidos del archivo con las claves captcha
+     */
+	private getRecaptchaSiteKeys(): Observable<any>{
+		return this._connection.getWithFullUrl(this.recaptchaSiteKeysUrl)
+	}
+	/**
+     * Se obtiene los datos segun el entorno en que se ejecute
+     * @returns {Observable<any>} Datos obtenidos del archivo con las url de los sitios
+     */
+	private getRecaptchaSites(): Observable<any>{
+		return this.productionEnvironment ? 
+			this._connection.getWithFullUrl(this.recaptchaSitesUrlProd) :
+			this._connection.getWithFullUrl(this.recaptchaSitesUrl);
+	}
+	/**
+     * Genera una peticion para recibir la clave del recaptcha. En caso de no tener exito,
+     * utiliza los archivos estaticos para retornar una clave por defecto. Rellena el Observable con
+     * los datos generados.
+     */
+	private getSiteKey(){
+		firstValueFrom(this._connection.get(this.captchaApi())).then(
+			(res: any) => {
+				this._recaptchaSubject.next( {
+					siteKey: res.siteKey ? res.siteKey : this.RECAPTCHA_SITE_KEYS[this.RECAPTCHA_SITES[this.urlBaseFormat]]
+				})
+			},
+			(err: any) => {
+				this._recaptchaSubject.next({ siteKey: this.RECAPTCHA_SITE_KEYS[this.RECAPTCHA_SITES[this.urlBaseFormat]]})
+			}
+		)
+	}
+}