From 153fee43605394c976c496be2e49e21b4acb80c2 Mon Sep 17 00:00:00 2001
From: Casey Dyer <dyersituations@gmail.com>
Date: Wed, 14 Aug 2024 12:31:18 -0700
Subject: [PATCH] fix: remove extra template tags creating render issues

---
 src/components/Checkout/DonationItem.vue      | 292 +++++++++---------
 src/components/Checkout/OrderTotals.vue       |   4 +-
 .../LoanCards/NewHomePageLoanCard.vue         |  28 +-
 .../Thanks/ThanksPageDonationOnly.vue         | 130 ++++----
 4 files changed, 223 insertions(+), 231 deletions(-)

diff --git a/src/components/Checkout/DonationItem.vue b/src/components/Checkout/DonationItem.vue
index 67e86a2b51..493d477f64 100644
--- a/src/components/Checkout/DonationItem.vue
+++ b/src/components/Checkout/DonationItem.vue
@@ -1,119 +1,118 @@
 <template>
 	<!-- DO NOT REMOVE basket-donation-item class -->
 	<div class="basket-donation-item">
-		<template>
-			<div class="tw-flex tw-flex-col md:tw-flex-row tw-pb-5">
-				<!-- donation image -->
-				<div class="tw-hidden md:tw-block tw-flex-none md:tw-mr-3 lg:tw-mr-4.5">
-					<img
-						class="tw-bg-brand-100 tw-border tw-border-gray-300 tw-w-12 tw-h-12 tw-p-1 tw-rounded"
-						:src="leafHeartUrl"
-						alt="donation line item image"
-						data-testid="basket-donation-image"
-					>
-				</div>
+		<div class="tw-flex tw-flex-col md:tw-flex-row tw-pb-5">
+			<!-- donation image -->
+			<div class="tw-hidden md:tw-block tw-flex-none md:tw-mr-3 lg:tw-mr-4.5">
+				<img
+					class="tw-bg-brand-100 tw-border tw-border-gray-300 tw-w-12 tw-h-12 tw-p-1 tw-rounded"
+					:src="leafHeartUrl"
+					alt="donation line item image"
+					data-testid="basket-donation-image"
+				>
+			</div>
 
-				<!-- donation text -->
-				<div class="tw-flex-auto">
-					<div class="tw-mb-0.5">
-						<div class="tw-flex tw-items-center tw-justify-between">
-							<div>
-								<div class="tw-w-full tw-flex">
-									<h2
-										class="tw-flex-1 md:tw-flex-grow tw-text-h3"
-										data-testid="basket-donation-title"
-									>
-										{{ basketDonationHeader }}
-									</h2>
-								</div>
-								<div
-									v-show="!editDonation"
-									class="md:tw-hidden"
+			<!-- donation text -->
+			<div class="tw-flex-auto">
+				<div class="tw-mb-0.5">
+					<div class="tw-flex tw-items-center tw-justify-between">
+						<div>
+							<div class="tw-w-full tw-flex">
+								<h2
+									class="tw-flex-1 md:tw-flex-grow tw-text-h3"
+									data-testid="basket-donation-title"
+								>
+									{{ basketDonationHeader }}
+								</h2>
+							</div>
+							<div
+								v-show="!editDonation"
+								class="md:tw-hidden"
+							>
+								<button
+									class="donation-amount"
+									data-testid="basket-donation-edit-button-mobile-amount"
+									v-kv-track-event="['basket', 'Edit Donation']"
+									@click="enterEditDonation"
+									title="Edit Donation"
 								>
-									<button
-										class="donation-amount"
-										data-testid="basket-donation-edit-button-mobile-amount"
-										v-kv-track-event="['basket', 'Edit Donation']"
-										@click="enterEditDonation"
+									{{ formattedAmount }}
+									<kv-material-icon
+										role="img"
+										aria-label="Edit Donation"
 										title="Edit Donation"
-									>
-										{{ formattedAmount }}
-										<kv-material-icon
-											role="img"
-											aria-label="Edit Donation"
-											title="Edit Donation"
-											class="edit-donation tw-text-action
+										class="edit-donation tw-text-action
 											tw-w-3.5
 											tw-h-3.5
 											tw-py-0.5
 											tw-hidden md:tw-inline-block
 											"
-											name="pencil"
-											:icon="mdiPencil"
-										/>
-									</button>
-									<button
-										class="donation-amount md:tw-hidden tw-flex-none tw-align-middle"
-										data-testid="basket-donation-edit-button-mobile-pencil"
-										v-kv-track-event="['basket', 'Edit Donation']"
-										@click="enterEditDonation"
+										name="pencil"
+										:icon="mdiPencil"
+									/>
+								</button>
+								<button
+									class="donation-amount md:tw-hidden tw-flex-none tw-align-middle"
+									data-testid="basket-donation-edit-button-mobile-pencil"
+									v-kv-track-event="['basket', 'Edit Donation']"
+									@click="enterEditDonation"
+									title="Edit Donation"
+								>
+									<kv-material-icon
+										role="img"
+										aria-label="Edit Donation"
 										title="Edit Donation"
-									>
-										<kv-material-icon
-											role="img"
-											aria-label="Edit Donation"
-											title="Edit Donation"
-											class="edit-donation tw-text-action
+										class="edit-donation tw-text-action
 										tw-w-3.5
 										tw-h-3.5
 										tw-py-0.5
 										md:tw-hidden"
-											name="pencil"
-											:icon="mdiPencil"
-										/>
-									</button>
-								</div>
-							</div>
-							<div class="tw-block md:tw-hidden tw-flex-none md:tw-mr-3 lg:tw-mr-4.5">
-								<img
-									class="tw-w-7 tw-h-7 tw-rounded"
-									:src="leafHeartUrl"
-									alt="donation line item image"
-									data-testid="basket-donation-image"
-								>
+										name="pencil"
+										:icon="mdiPencil"
+									/>
+								</button>
 							</div>
 						</div>
-
-						<div>
-							<div
-								class="donation-tagline tw-my-1 tw-max-w-2xl"
-								data-testid="basket-donation-tagline"
+						<div class="tw-block md:tw-hidden tw-flex-none md:tw-mr-3 lg:tw-mr-4.5">
+							<img
+								class="tw-w-7 tw-h-7 tw-rounded"
+								:src="leafHeartUrl"
+								alt="donation line item image"
+								data-testid="basket-donation-image"
 							>
-								<p
-									class="tw-text-base"
-								>
-									{{ basketDonationTagline }}
-								</p>
-							</div>
-							<button
-								class="tw-flex tw-items-center tw-text-base tw-text-link"
-								data-testid="basket-donation-info-lightbox"
-								@click="triggerDefaultLightbox"
-								v-kv-track-event="['basket', 'Donation Info Lightbox', 'Open Lightbox']"
+						</div>
+					</div>
+
+					<div>
+						<div
+							class="donation-tagline tw-my-1 tw-max-w-2xl"
+							data-testid="basket-donation-tagline"
+						>
+							<p
+								class="tw-text-base"
 							>
-								{{ donationDetailsLink }}
-								<kv-material-icon
-									class="tw-ml-0.5 tw-w-2 tw-h-2"
-									:icon="mdiArrowRight"
-								/>
-							</button>
+								{{ basketDonationTagline }}
+							</p>
 						</div>
+						<button
+							class="tw-flex tw-items-center tw-text-base tw-text-link"
+							data-testid="basket-donation-info-lightbox"
+							@click="triggerDefaultLightbox"
+							v-kv-track-event="['basket', 'Donation Info Lightbox', 'Open Lightbox']"
+						>
+							{{ donationDetailsLink }}
+							<kv-material-icon
+								class="tw-ml-0.5 tw-w-2 tw-h-2"
+								:icon="mdiArrowRight"
+							/>
+						</button>
 					</div>
 				</div>
+			</div>
 
-				<!-- donation total -->
-				<div
-					class="
+			<!-- donation total -->
+			<div
+				class="
 				tw-flex-none
 				tw-w-full
 				md:tw-w-auto
@@ -121,73 +120,72 @@
 				lg:tw-ml-4.5
 				tw-mt-1.5
 				md:tw-mt-0"
+			>
+				<div
+					v-show="!editDonation"
+					class="tw-hidden md:tw-block tw-text-right"
 				>
-					<div
-						v-show="!editDonation"
-						class="tw-hidden md:tw-block tw-text-right"
+					<button
+						class="donation-amount"
+						data-testid="basket-donation-edit-button-combined"
+						v-kv-track-event="['basket', 'Edit Donation']"
+						@click="enterEditDonation"
+						title="Edit Donation"
 					>
-						<button
-							class="donation-amount"
-							data-testid="basket-donation-edit-button-combined"
-							v-kv-track-event="['basket', 'Edit Donation']"
-							@click="enterEditDonation"
+						{{ formattedAmount }}
+						<kv-material-icon
+							role="img"
+							aria-label="Edit Donation"
 							title="Edit Donation"
-						>
-							{{ formattedAmount }}
-							<kv-material-icon
-								role="img"
-								aria-label="Edit Donation"
-								title="Edit Donation"
-								class="edit-donation tw-text-action
+							class="edit-donation tw-text-action
 								tw-w-3.5
 								tw-h-3.5
 								tw-py-0.5
 								tw-align-bottom
 								"
-								name="pencil"
-								:icon="mdiPencil"
-							/>
-						</button>
-					</div>
-					<div v-show="editDonation" class="small-12 columns donation-amount-input-wrapper">
-						<kv-text-input
-							class="donation-amount-input"
-							data-testid="basket-donation-edit-input"
-							name="donation"
-							id="donation"
-							v-model="amount"
-							@blur="validateInput"
-							@keyup.enter.prevent="updateDonation()"
+							name="pencil"
+							:icon="mdiPencil"
 						/>
-						<kv-button
-							variant="secondary"
-							class="update-donation-inline-button"
-							data-testid="basket-donation-edit-submit"
-							@click="updateDonation()"
-						>
-							Update
-						</kv-button>
-						<button
-							class="show-for-medium remove-wrapper"
-							@click="updateLoanAmount('remove')"
-							data-testid="basket-donation-remove"
-						>
-							<kv-material-icon
-								class="remove-x tw-text-tertiary"
-								name="small-x"
-								:from-sprite="true"
-								title="Remove donation"
-							/>
-						</button>
-					</div>
-					<donate-repayments
-						v-if="hasLoans"
-						@updating-totals="$emit('updating-totals', $event)"
-						@refreshtotals="$emit('refreshtotals')"
+					</button>
+				</div>
+				<div v-show="editDonation" class="small-12 columns donation-amount-input-wrapper">
+					<kv-text-input
+						class="donation-amount-input"
+						data-testid="basket-donation-edit-input"
+						name="donation"
+						id="donation"
+						v-model="amount"
+						@blur="validateInput"
+						@keyup.enter.prevent="updateDonation()"
 					/>
+					<kv-button
+						variant="secondary"
+						class="update-donation-inline-button"
+						data-testid="basket-donation-edit-submit"
+						@click="updateDonation()"
+					>
+						Update
+					</kv-button>
+					<button
+						class="show-for-medium remove-wrapper"
+						@click="updateLoanAmount('remove')"
+						data-testid="basket-donation-remove"
+					>
+						<kv-material-icon
+							class="remove-x tw-text-tertiary"
+							name="small-x"
+							:from-sprite="true"
+							title="Remove donation"
+						/>
+					</button>
 				</div>
+				<donate-repayments
+					v-if="hasLoans"
+					@updating-totals="$emit('updating-totals', $event)"
+					@refreshtotals="$emit('refreshtotals')"
+				/>
 			</div>
-		</template>
+		</div>
 		<!-- Donation nudge lightbox -->
 		<donation-nudge-lightbox
 			ref="nudgeLightbox"
diff --git a/src/components/Checkout/OrderTotals.vue b/src/components/Checkout/OrderTotals.vue
index 3c7d72579c..51dac9d5f4 100644
--- a/src/components/Checkout/OrderTotals.vue
+++ b/src/components/Checkout/OrderTotals.vue
@@ -186,9 +186,7 @@
 					v-if="isCorporateCampaign"
 					class="tw-w-auto tw-text-right tw-flex-1"
 				>
-					<template>
-						You'll pay:
-					</template>
+					You'll pay:
 				</div>
 				<div
 					class="tw-pl-2"
diff --git a/src/components/LoanCards/NewHomePageLoanCard.vue b/src/components/LoanCards/NewHomePageLoanCard.vue
index c895d2abc3..d7e38f2007 100644
--- a/src/components/LoanCards/NewHomePageLoanCard.vue
+++ b/src/components/LoanCards/NewHomePageLoanCard.vue
@@ -94,24 +94,22 @@
 			<div v-if="!isLoading" class="tw-flex-auto tw-mb-2">
 				<figure>
 					<figcaption class="tw-flex">
-						<template>
-							<div class="tw-flex-auto tw-text-left">
-								<p
-									class="tw-text-h3 tw-m-0 progress-text tw-mb-2 tw-mt-2"
-									data-testid="bp-summary-amount-to-go"
-								>
-									{{ Math.floor(fundraisingPercent) }}% FUNDED
-								</p>
-							</div>
+						<div class="tw-flex-auto tw-text-left">
 							<p
-								class="tw-flex-auto tw-text-right progress-text tw-mb-2 tw-mt-2"
-								data-testid="bp-summary-timeleft"
+								class="tw-text-h3 tw-m-0 progress-text tw-mb-2 tw-mt-2"
+								data-testid="bp-summary-amount-to-go"
 							>
-								<span lass="tw-text-h3 tw-block tw-m-0">
-									{{ $filters.numeral(loanAmount, '$0,0[.]00') }}
-								</span>
+								{{ Math.floor(fundraisingPercent) }}% FUNDED
 							</p>
-						</template>
+						</div>
+						<p
+							class="tw-flex-auto tw-text-right progress-text tw-mb-2 tw-mt-2"
+							data-testid="bp-summary-timeleft"
+						>
+							<span lass="tw-text-h3 tw-block tw-m-0">
+								{{ $filters.numeral(loanAmount, '$0,0[.]00') }}
+							</span>
+						</p>
 					</figcaption>
 					<kv-progress-bar
 						v-if="!isLoading"
diff --git a/src/components/Thanks/ThanksPageDonationOnly.vue b/src/components/Thanks/ThanksPageDonationOnly.vue
index 1c58eab522..d50b5b10e9 100644
--- a/src/components/Thanks/ThanksPageDonationOnly.vue
+++ b/src/components/Thanks/ThanksPageDonationOnly.vue
@@ -40,74 +40,72 @@
 					<h3	class="tw-mt-1 tw-mb-3 tw-text-left">
 						Share this story and your impact
 					</h3>
-					<template>
-						<div class="social tw-mt-4 tw-max-w-sm tw-mx-auto">
-							<button
-								data-testid="share-facebook-button"
-								class="social__btn social__btn--facebook"
-								@click="showSharePopUp(
-									facebookShareUrl({utmCampaign, utmContent}),
-									'Thanks for sharing to Facebook!')"
-								v-kv-track-event="
-									['post-checkout', 'share', 'facebook', utmCampaign]"
-							>
-								<kv-icon name="facebook-round" title="Facebook" class="social__icon" />
-								<span>Share on Facebook</span>
-							</button>
-							<button
-								data-testid="share-copy-link-button"
-								class="social__btn social__btn--link
+					<div class="social tw-mt-4 tw-max-w-sm tw-mx-auto">
+						<button
+							data-testid="share-facebook-button"
+							class="social__btn social__btn--facebook"
+							@click="showSharePopUp(
+								facebookShareUrl({utmCampaign, utmContent}),
+								'Thanks for sharing to Facebook!')"
+							v-kv-track-event="
+								['post-checkout', 'share', 'facebook', utmCampaign]"
+						>
+							<kv-icon name="facebook-round" title="Facebook" class="social__icon" />
+							<span>Share on Facebook</span>
+						</button>
+						<button
+							data-testid="share-copy-link-button"
+							class="social__btn social__btn--link
 										tw-border-action tw-border"
-								:class="copyStatus.class"
-								:disabled="copyStatus.disabled"
-								v-kv-track-event="
-									['post-checkout', 'share', 'copy-link', utmCampaign]"
-								@click="copyLink({utmCampaign, utmContent}, copyStatus.text)"
-							>
-								<kv-material-icon
-									name="clipboard"
-									class="social__icon"
-									:icon="mdiLink"
-								/>
-								<span>{{ copyStatus.text }}</span>
-							</button>
-							<button
-								data-testid="share-twitter-button"
-								class="social__btn social__btn--twitter"
-								v-kv-track-event="
-									['post-checkout', 'share', 'twitter', utmCampaign]"
-								@click="showSharePopUp(
-									twitterShareUrl({utmCampaign, utmContent}),
-									'Thanks for tweeting!')"
-							>
-								<kv-icon name="twitter" title="Twitter" class="social__icon" />
-								<span>Tweet your followers</span>
-							</button>
-							<button
-								data-testid="share-linkedin-button"
-								class="social__btn social__btn--linkedin"
-								v-kv-track-event="
-									['post-checkout', 'share', 'linkedin', utmCampaign]"
-								@click="showSharePopUp(
-									linkedInShareUrl({utmCampaign, utmContent}),
-									'Thanks for sharing to LinkedIn!')"
-							>
-								<kv-icon name="linkedin" title="LinkedIn" class="social__icon" />
-								<span>Share on LinkedIn</span>
-							</button>
-						</div>
-						<div class="tw-text-center tw-mt-2">
-							<router-link
-								class="tw-block tw-mx-auto tw-text-action
+							:class="copyStatus.class"
+							:disabled="copyStatus.disabled"
+							v-kv-track-event="
+								['post-checkout', 'share', 'copy-link', utmCampaign]"
+							@click="copyLink({utmCampaign, utmContent}, copyStatus.text)"
+						>
+							<kv-material-icon
+								name="clipboard"
+								class="social__icon"
+								:icon="mdiLink"
+							/>
+							<span>{{ copyStatus.text }}</span>
+						</button>
+						<button
+							data-testid="share-twitter-button"
+							class="social__btn social__btn--twitter"
+							v-kv-track-event="
+								['post-checkout', 'share', 'twitter', utmCampaign]"
+							@click="showSharePopUp(
+								twitterShareUrl({utmCampaign, utmContent}),
+								'Thanks for tweeting!')"
+						>
+							<kv-icon name="twitter" title="Twitter" class="social__icon" />
+							<span>Tweet your followers</span>
+						</button>
+						<button
+							data-testid="share-linkedin-button"
+							class="social__btn social__btn--linkedin"
+							v-kv-track-event="
+								['post-checkout', 'share', 'linkedin', utmCampaign]"
+							@click="showSharePopUp(
+								linkedInShareUrl({utmCampaign, utmContent}),
+								'Thanks for sharing to LinkedIn!')"
+						>
+							<kv-icon name="linkedin" title="LinkedIn" class="social__icon" />
+							<span>Share on LinkedIn</span>
+						</button>
+					</div>
+					<div class="tw-text-center tw-mt-2">
+						<router-link
+							class="tw-block tw-mx-auto tw-text-action
 									tw-underline hover:tw-text-action-highlight"
-								v-if="!isGuest"
-								to="/portfolio"
-								v-kv-track-event="['Thanks','click-portfolio-cta','No, continue to my portfolio']"
-							>
-								No, continue to my portfolio
-							</router-link>
-						</div>
-					</template>
+							v-if="!isGuest"
+							to="/portfolio"
+							v-kv-track-event="['Thanks','click-portfolio-cta','No, continue to my portfolio']"
+						>
+							No, continue to my portfolio
+						</router-link>
+					</div>
 				</div>
 			</kv-grid>
 		</kv-page-container>