From 31b669ea83a7c57f501e49d39a14c81f783f0494 Mon Sep 17 00:00:00 2001
From: Christopher <jazielquine@gmail.com>
Date: Thu, 8 Aug 2024 10:59:23 -0500
Subject: [PATCH] feat: No funciona el boton de ubicacion

---
 src/components/order/new-address.vue   | 250 +++++++++++++++----------
 src/components/order/summary-order.vue | 188 ++++++++++---------
 2 files changed, 247 insertions(+), 191 deletions(-)

diff --git a/src/components/order/new-address.vue b/src/components/order/new-address.vue
index c330e29d..0aad398e 100644
--- a/src/components/order/new-address.vue
+++ b/src/components/order/new-address.vue
@@ -18,9 +18,9 @@
 			v-model="newAddress.department"
 			@input="selectDepartment"
 		>
-		<div>
-		</div>
-			<span v-if="$v.newAddress.department.$invalid">El {{countryLabels.department}} es requerido
+			<div></div>
+			<span v-if="$v.newAddress.department.$invalid"
+				>El {{ countryLabels.department }} es requerido
 				<v-progress-circular
 					v-if="isToogleDp"
 					indeterminate
@@ -41,16 +41,18 @@
 			@input="selectProvince"
 			v-model="newAddress.province"
 		>
-		<div class="divSpinner">
-			<span  v-if="$v.newAddress.province.$invalid">La {{countryLabels.province}} es requerida</span>
-			<v-progress-circular
-				v-if="isTooglePr"
-				indeterminate
-				color="deep-orange"
-				:width="2"
-				:size="15"
-			></v-progress-circular>
-		</div>
+			<div class="divSpinner">
+				<span v-if="$v.newAddress.province.$invalid"
+					>La {{ countryLabels.province }} es requerida</span
+				>
+				<v-progress-circular
+					v-if="isTooglePr"
+					indeterminate
+					color="deep-orange"
+					:width="2"
+					:size="15"
+				></v-progress-circular>
+			</div>
 		</app-select>
 		<app-select
 			item-text="name"
@@ -63,16 +65,18 @@
 			v-model="newAddress.district"
 			@input="selectDistrict"
 		>
-		<div class="divSpinner">
-			<span v-if="$v.newAddress.district.$invalid">El {{countryLabels.district}} es requerido</span>
-			<v-progress-circular
-				v-if="isTooglePs"
-				indeterminate
-				color="deep-orange"
-				:width="2"
-				:size="15"
-			></v-progress-circular>
-		</div>
+			<div class="divSpinner">
+				<span v-if="$v.newAddress.district.$invalid"
+					>El {{ countryLabels.district }} es requerido</span
+				>
+				<v-progress-circular
+					v-if="isTooglePs"
+					indeterminate
+					color="deep-orange"
+					:width="2"
+					:size="15"
+				></v-progress-circular>
+			</div>
 		</app-select>
 		<app-input
 			data-cy="direccion"
@@ -80,7 +84,9 @@
 			class="mx-2 my-1 address-field field"
 			v-model="newAddress.addressLine1"
 		>
-			<span v-if="$v.newAddress.addressLine1.$invalid">La dirección es requerida</span>
+			<span v-if="$v.newAddress.addressLine1.$invalid"
+				>La dirección es requerida</span
+			>
 		</app-input>
 		<app-input
 			data-cy="apto"
@@ -98,16 +104,19 @@
 			v-model="newAddress.addressLine2"
 		>
 		</app-input>
-		<div class="mx-2 my-1 button-field field" v-if="flagMap">
+		<div class="mx-2 my-1 button-field field">
 			<a href="#" class="btn" @click.prevent="getMap()">Ubicar en el Mapa</a>
 		</div>
 		<div class="map mx-2 my-1 map-field" v-if="showMap">
 			<map-component
 				:zoom="16"
-				:markers="[{location: {lat: newAddress.latitude, lng: newAddress.longitude},}]"
-				:location="{lat: newAddress.latitude, lng: newAddress.longitude}"
-				:center="{lat: newAddress.latitude, lng: newAddress.longitude}"/>
-		</div>	
+				:markers="[
+					{ location: { lat: newAddress.latitude, lng: newAddress.longitude } },
+				]"
+				:location="{ lat: newAddress.latitude, lng: newAddress.longitude }"
+				:center="{ lat: newAddress.latitude, lng: newAddress.longitude }"
+			/>
+		</div>
 	</form>
 </template>
 <script>
@@ -128,30 +137,58 @@ function flagMap() {
 }
 
 function getMap() {
-	if (this.newAddress.department !== null &&
+	if (
+		this.newAddress.department !== null &&
 		this.newAddress.province !== null &&
-		this.newAddress.district) {
+		this.newAddress.district
+	) {
 		this.googleSearch();
+	} else {
+		this.showNotification(
+			'Debe seleccionar el Departamento, Provincia y Distrito.',
+			'warning',
+			null,
+			false,
+			2000,
+		);
 	}
 }
 
 function googleSearch() {
 	const geocoder = new google.maps.Geocoder();
-	const departmentName = this.departments.filter(d => d.id === this.newAddress.department);
-	const provinceName = this.provinces.filter(p => p.id === this.newAddress.province);
-	const disctrictName = this.districts.filter(d => d.id === this.newAddress.district);
-	geocoder.geocode({ address: `${departmentName[0].name} ${provinceName[0].name} ${disctrictName[0].name} ${this.newAddress.addressLine1}` }, (results, status) => {
-		if (status === google.maps.GeocoderStatus.OK) {
-			const lat = results[0].geometry.location.lat();
-			const lng = results[0].geometry.location.lng();
-			this.newAddress.latitude = lat;
-			this.newAddress.longitude = lng;
-			this.showMap = true;
-			this.setCustomerAddress();
-		} else {
-			console.error('Request failed.');
-		}
-	});
+	const departmentName = this.departments.filter(
+		d => d.id === this.newAddress.department,
+	);
+	const provinceName = this.provinces.filter(
+		p => p.id === this.newAddress.province,
+	);
+	const disctrictName = this.districts.filter(
+		d => d.id === this.newAddress.district,
+	);
+	geocoder.geocode(
+		{
+			address: `${departmentName[0].name} ${provinceName[0].name} ${disctrictName[0].name} ${this.newAddress.addressLine1}`,
+		},
+		(results, status) => {
+			if (status === google.maps.GeocoderStatus.OK) {
+				const lat = results[0].geometry.location.lat();
+				const lng = results[0].geometry.location.lng();
+				this.newAddress.latitude = lat;
+				this.newAddress.longitude = lng;
+				this.showMap = true;
+				this.setCustomerAddress();
+			} else {
+				this.showNotification(
+					'No se encontro esa ubicación en el mapa.',
+					'error',
+					null,
+					false,
+					4000,
+				);
+				console.error('Request failed.');
+			}
+		},
+	);
 }
 
 function selectDepartment(provinceId) {
@@ -195,7 +232,13 @@ async function calculateShippingCost(locationId, location) {
 		if (error.data.message === 'PRICE_NOT_CONFIGURATION') {
 			this.$store.dispatch('setShippingCostError', true);
 			this.$store.dispatch('setNoShippingCost');
-			this.showNotification('No es posible hacer envios a ese destino.', 'error', null, false, 8000);
+			this.showNotification(
+				'No es posible hacer envios a ese destino.',
+				'error',
+				null,
+				false,
+				8000,
+			);
 		}
 	}
 }
@@ -322,80 +365,79 @@ export default {
 <style lang="scss" scoped>
 .divSpinner {
 	margin: 2px;
-justify-content: space-between;
+	justify-content: space-between;
 }
 .v-progress-circular {
-  float: right;
+	float: right;
+}
+.new-address-form {
+	align-items: center;
+	display: flex;
+	justify-content: space-between;
+	flex-wrap: wrap;
+	margin-top: 20px;
 }
-	.new-address-form {
-		align-items: center;
-		display: flex;
-		justify-content: space-between;
-		flex-wrap: wrap;
-		margin-top: 20px;
-	}
 
-	.field {
-		height: 68px;
-	}
+.field {
+	height: 68px;
+}
 
-	.name-field,
-	.department-field {
-		flex: 1 1 40%;
+.name-field,
+.department-field {
+	flex: 1 1 40%;
 
-		@media (max-width: 925px) {
-			flex: 1 1 100%;
-		}
+	@media (max-width: 925px) {
+		flex: 1 1 100%;
 	}
+}
 
-	.district-field,
-	.province-field {
-		flex: 1 1 40%;
-	}
+.district-field,
+.province-field {
+	flex: 1 1 40%;
+}
 
-	.address-field {
-		flex: 1 1 60%;
-	}
+.address-field {
+	flex: 1 1 60%;
+}
 
-	.number-field {
-		flex: 1 1 20%;
+.number-field {
+	flex: 1 1 20%;
 
-		@media (max-width: 925px) {
-			flex: 1 1 100%;
-		}
+	@media (max-width: 925px) {
+		flex: 1 1 100%;
 	}
+}
 
-	.reference-field {
-		flex: 1 1 60%;
-		@media (max-width: 925px) {
-			flex: 1 1 100%;
-		}
+.reference-field {
+	flex: 1 1 60%;
+	@media (max-width: 925px) {
+		flex: 1 1 100%;
 	}
+}
 
+.button-field {
+	flex: 1 1 20%;
 
-	.button-field{
-		flex: 1 1 20%;
-
-		@media (max-width: 925px) {
-			flex: 1 1 100%;
-		}
-	}
-
-	.map-field{
+	@media (max-width: 925px) {
 		flex: 1 1 100%;
 	}
+}
 
-	.btn{
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		font-family: "Avenir Next Medium";
-		font-size: 12px;
-		height: 46.8px;
-		outline: none;
-		border: 1px solid rgb(227, 5, 23);
-		border-radius: 7px;
-		color: rgb(227, 5, 23);
-		text-decoration: none;
-	}
+.map-field {
+	flex: 1 1 100%;
+}
+
+.btn {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-family: 'Avenir Next Medium';
+	font-size: 12px;
+	height: 46.8px;
+	outline: none;
+	border: 1px solid rgb(227, 5, 23);
+	border-radius: 7px;
+	color: rgb(227, 5, 23);
+	text-decoration: none;
+}
 </style>
diff --git a/src/components/order/summary-order.vue b/src/components/order/summary-order.vue
index facb0bbb..0c498167 100644
--- a/src/components/order/summary-order.vue
+++ b/src/components/order/summary-order.vue
@@ -7,19 +7,28 @@
 			<div class="summary-amounts">
 				<p class="summary-amount-container separate">
 					<span>Subtotal</span>
-					<span data-cy="subtotal" class="summary-amount">{{getCurrencySymbol}}. {{getTotalToBuy | currencyFormat}}</span>
+					<span data-cy="subtotal" class="summary-amount"
+						>{{ getCurrencySymbol }}. {{ getTotalToBuy | currencyFormat }}</span
+					>
 				</p>
 				<p class="summary-amount-container separate">
 					<span>Descuento</span>
-					<span data-cy="discount" class="summary-amount">{{getCurrencySymbol}}. {{discount | currencyFormat}}</span>
+					<span data-cy="discount" class="summary-amount"
+						>{{ getCurrencySymbol }}. {{ discount | currencyFormat }}</span
+					>
 				</p>
 				<p class="summary-amount-container separate">
 					<span>Envío</span>
-					<span data-cy="shipping" class="summary-amount">{{getCurrencySymbol}}. {{getShippingCost | currencyFormat}}</span>
+					<span data-cy="shipping" class="summary-amount"
+						>{{ getCurrencySymbol }}.
+						{{ getShippingCost | currencyFormat }}</span
+					>
 				</p>
 				<p class="summary-amount-container total">
 					<span>Total</span>
-					<span data-cy="total" class="summary-total">{{getCurrencySymbol}}. {{total | currencyFormat}}</span>
+					<span data-cy="total" class="summary-total"
+						>{{ getCurrencySymbol }}. {{ total | currencyFormat }}</span
+					>
 				</p>
 			</div>
 		</section>
@@ -32,10 +41,10 @@
 				:background="globalColors.primary"
 				@click="goToMakeOrder"
 			/>
-			<app-button 
+			<app-button
 				data-cy="go-pay"
 				v-else-if="stepTwo"
-				:action=" `Pasar a Caja`"
+				:action="`Pasar a Caja`"
 				class="btn-order "
 				:background="globalColors.primary"
 				:disabled="invalidOrder || isToogleBtn ? true : false"
@@ -45,7 +54,7 @@
 			<app-button
 				data-cy="pay"
 				v-else-if="stepThree"
-				:action=" `Terminar Compra ${getCurrencySymbol}. ${listenerPriceOrder}`"
+				:action="`Terminar Compra ${getCurrencySymbol}. ${listenerPriceOrder}`"
 				class="btn-order"
 				:disabled="isOnlinePayment || isToogleBtn ? true : false"
 				:background="globalColors.primary"
@@ -61,9 +70,9 @@ import appButton from '@/components/shared/buttons/app-button';
 import { getDeeper, compose, setNewProperty } from '@/shared/lib';
 import { creditCard } from '@/shared/enums/wayPayment';
 
-
 function total() {
-	const totalBuyWithShipp = (this.getTotalToBuy - this.discount) + this.getShippingCost;
+	const totalBuyWithShipp =
+		this.getTotalToBuy - (this.discount + this.getShippingCost);
 	const newTotal = Number(totalBuyWithShipp.toFixed(2));
 	this.$store.commit('SET_TOTAL_BUY_SHIPP', newTotal);
 	return newTotal;
@@ -125,9 +134,14 @@ function discount() {
 }
 
 function isOnlinePayment() {
-	if (this.getWaypaymentsByCommerce && this.getWaypaymentsByCommerce.length > 0) {
+	if (
+		this.getWaypaymentsByCommerce &&
+		this.getWaypaymentsByCommerce.length > 0
+	) {
 		const selectedId = this.getWayPayment.wayPayment;
-		const paymentSelected = this.getWaypaymentsByCommerce.find(w => w.wayPaymentId === selectedId);
+		const paymentSelected = this.getWaypaymentsByCommerce.find(
+			w => w.wayPaymentId === selectedId,
+		);
 		const isOnline = creditCard.code === paymentSelected.code;
 		return isOnline;
 	}
@@ -143,7 +157,8 @@ function listenerPriceOrder() {
 	if (!decimals) {
 		return `${integer}.00`;
 	}
-	const newDecimals = decimals.length === 1 && decimals < 10 ? `${decimals}0` : decimals;
+	const newDecimals =
+		decimals.length === 1 && decimals < 10 ? `${decimals}0` : decimals;
 	return `${integer}.${newDecimals}`;
 }
 
@@ -201,91 +216,90 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-	.btns-summary-order {
-		@media (max-width:669px){
-			background-color: var(--bg-mobile-color);
-			border-radius: 10px;
-			position:fixed;
-			bottom: 0;
-			left: 0;
-			z-index: 11;
-			width:94%;
-			margin-left: 3%;
-			margin-right: 3%;
-			margin-bottom: 2px;
-		}
-	}
-	.summary-container {
-		position: relative;
-		top: 0;
-		margin: 0 auto;
-		max-width: 400px;
+.btns-summary-order {
+	@media (max-width: 669px) {
+		background-color: var(--bg-mobile-color);
+		border-radius: 10px;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		z-index: 11;
+		width: 94%;
+		margin-left: 3%;
+		margin-right: 3%;
+		margin-bottom: 2px;
 	}
+}
+.summary-container {
+	position: relative;
+	top: 0;
+	margin: 0 auto;
+	max-width: 400px;
+}
 
-	.summary-order {
-		background-color: white;
-		border-radius: 20px;
-		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.18);
-		margin-bottom: 10px;
-		padding: 8px;
-		width: 260px;
-	}
+.summary-order {
+	background-color: white;
+	border-radius: 20px;
+	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.18);
+	margin-bottom: 10px;
+	padding: 8px;
+	width: 260px;
+}
 
-	.summary-header {
-		border-bottom: 1px solid color(border);
-		color: color(dark);
-		font-family: font(demi);
-		font-size: size(medium);
-		font-weight: bold;
-		padding: 25px 50px 17px;
-	}
+.summary-header {
+	border-bottom: 1px solid color(border);
+	color: color(dark);
+	font-family: font(demi);
+	font-size: size(medium);
+	font-weight: bold;
+	padding: 25px 50px 17px;
+}
 
-	.summary-title {
-		margin: 0 auto;
-		white-space: nowrap;	
-	}
+.summary-title {
+	margin: 0 auto;
+	white-space: nowrap;
+}
 
-	.summary-amounts {
-		color: color(dark);
-		font-family: font(demi);
-		font-size: size(medium);
-		padding: 30px 32px 16px;
-	}
+.summary-amounts {
+	color: color(dark);
+	font-family: font(demi);
+	font-size: size(medium);
+	padding: 30px 32px 16px;
+}
 
-	.summary-amount-container {
-		align-items: center;
-		display: flex;
-		justify-content: space-between;
-		padding: 8px 5px;
-	}
+.summary-amount-container {
+	align-items: center;
+	display: flex;
+	justify-content: space-between;
+	padding: 8px 5px;
+}
 
-	.total {
-		margin-bottom: 0;
-	}
+.total {
+	margin-bottom: 0;
+}
 
-	.separate {
-		border-bottom: 1px solid color(border);
-	}
+.separate {
+	border-bottom: 1px solid color(border);
+}
 
-	.shipping {
-		padding-bottom: 12px;
-	}
+.shipping {
+	padding-bottom: 12px;
+}
 
-	.shipping-cost {
-		align-items: center;
-		display: flex;
-		justify-content: space-between;
-		width: 100%;
-	}
+.shipping-cost {
+	align-items: center;
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+}
 
-	.summary-amount {
-		color: color(base);
-		font-family: font(medium);
-		font-size: size(medium);
-	}
+.summary-amount {
+	color: color(base);
+	font-family: font(medium);
+	font-size: size(medium);
+}
 
-	.summay-total {
-		font-family: font(bold);
-	}
+.summay-total {
+	font-family: font(bold);
+}
 </style>
-