From 26c01933e22238a86e11a21a442f5760e6fb4c82 Mon Sep 17 00:00:00 2001
From: Joshua <joshuadstarkey@gmail.com>
Date: Tue, 9 Nov 2021 12:19:15 -0700
Subject: [PATCH 1/7] feat: Core-236 disclaimer text parsed and rendered from
 contentful within the footer

---
 .../WwwFrame/DisclaimersContentful.vue        | 135 ++++++++++++++++++
 .../Banners/GenericPromoBanner.vue            |  22 +++
 src/components/WwwFrame/TheFooter.vue         |   5 +-
 src/util/settingsUtils.js                     |  17 +++
 4 files changed, 178 insertions(+), 1 deletion(-)
 create mode 100644 src/components/WwwFrame/DisclaimersContentful.vue

diff --git a/src/components/WwwFrame/DisclaimersContentful.vue b/src/components/WwwFrame/DisclaimersContentful.vue
new file mode 100644
index 0000000000..5c29137880
--- /dev/null
+++ b/src/components/WwwFrame/DisclaimersContentful.vue
@@ -0,0 +1,135 @@
+<template>
+	<div class="row">
+		<ol class="text-left">
+			<li
+				id="disclaimers"
+				v-for="(disclaimer, index) in fullyBuiltDisclaimerText"
+				:key="index"
+			>
+				<!-- v-html="disclaimer" -->
+				{{ disclaimer }}
+			</li>
+		</ol>
+	</div>
+</template>
+
+<script>
+import _get from 'lodash/get';
+import gql from 'graphql-tag';
+import { settingEnabled, settingWithinDateRange } from '@/util/settingsUtils';
+import { documentToHtmlString } from '~/@contentful/rich-text-html-renderer';
+
+const bannerQuery = gql`query bannerQuery {
+	contentful {
+		entries(contentType: "uiSetting", contentKey: "ui-global-promo")
+	}
+}`;
+
+export default {
+	data() {
+		return {
+			disclaimerContent: [],
+		};
+	},
+	inject: ['apollo', 'cookieStore'],
+	apollo: {
+		query: bannerQuery,
+		preFetch: true,
+		result({ data }) {
+			// gather contentful content and the uiSetting key ui-global-promo
+			const contentfulContent = data?.contentful?.entries?.items ?? [];
+			const uiGlobalPromoSetting = contentfulContent.find(item => item.fields.key === 'ui-global-promo');
+
+			// exit if missing setting or fields
+			if (!uiGlobalPromoSetting || !uiGlobalPromoSetting.fields) {
+				return false;
+			}
+			// uiGlobalPromoSetting can contain an array of different banners with
+			// different start/end dates first determine if setting is enabled.
+
+			// DO I NEED THIS CHECK, SINCE IF THERE'S INACTIVE BANNERS WITHIN DATE RANGE
+			// WE STILL WANT TO DISPLAY THE DISCLAIMERS... RIGHT?
+			const isGlobalSettingEnabled = settingEnabled(
+				uiGlobalPromoSetting.fields,
+				'active',
+				'startDate',
+				'endDate'
+			);
+
+			// if setting is enabled determine which banner to display
+			if (isGlobalSettingEnabled) {
+				const activePromoBanner = uiGlobalPromoSetting.fields.content.find(promoContent => {
+					return settingEnabled(
+						promoContent.fields,
+						'active',
+						'startDate',
+						'endDate'
+					);
+				});
+				console.log('activePromoBanner', activePromoBanner);
+				console.log('uiGlobalPromoSetting.fields.content', uiGlobalPromoSetting.fields.content);
+				// All 3 banners are present here
+				// gather all inactive promo banners by their start and end dates
+				const inactivePromoBanners = uiGlobalPromoSetting.fields.content.filter(promoContent => {
+					if (promoContent.fields.active) {
+						console.log('I feel triggered');
+						return false;
+					}
+					return settingWithinDateRange(
+						promoContent.fields,
+						'startDate',
+						'endDate'
+					);
+				});
+				// only 1 banner here
+				console.log('Filtered disclaimerContent', inactivePromoBanners);
+
+				if (activePromoBanner) {
+					// check for visibility based on current route and hiddenUrls field
+
+					// WHAT DO WE WANT TO BASE THE DISCLAIMER VISIBILTY ON?
+					const hiddenUrls = _get(activePromoBanner, 'fields.hiddenUrls', []);
+					if (hiddenUrls.includes(this.$route.path)) {
+						return false;
+					}
+
+					// check for visibility on promo session override
+					const showForPromo = _get(activePromoBanner, 'fields.showForPromo', false);
+					if (this.hasPromoSession && !showForPromo) {
+						return false;
+					}
+
+					// set the disclaimer text if it exists in active promo banner
+					const activeDisclaimerText = activePromoBanner?.fields?.disclaimers ?? null;
+
+					// if there's an active disclaimer, push that disclaimer to the disclaimerContent for display
+					if (activeDisclaimerText) {
+						this.disclaimerContent.push(documentToHtmlString(activeDisclaimerText));
+					}
+
+					// go through the inactive promoBanners, if within date range and disclaimer text exists
+					// push that disclaimer text to disclaimerContent
+					if (inactivePromoBanners.length > 0) {
+						inactivePromoBanners.forEach(item => {
+							const itemDisclaimer = item?.fields?.disclaimers ?? null;
+							if (itemDisclaimer) {
+								this.disclaimerContent.push(documentToHtmlString(itemDisclaimer));
+							}
+						});
+					}
+				}
+			}
+		}
+	},
+	computed: {
+		// Constructing the final form of the disclaimer text for display
+		fullyBuiltDisclaimerText() {
+			const builtDisclaimertext = [];
+			this.disclaimerContent.forEach(disclaimer => {
+				builtDisclaimertext.push(`Disclaimer: ${disclaimer}`);
+			});
+			return builtDisclaimertext;
+		}
+	}
+};
+</script>
diff --git a/src/components/WwwFrame/PromotionalBanner/Banners/GenericPromoBanner.vue b/src/components/WwwFrame/PromotionalBanner/Banners/GenericPromoBanner.vue
index fa5d061cb6..e2b59cb16a 100644
--- a/src/components/WwwFrame/PromotionalBanner/Banners/GenericPromoBanner.vue
+++ b/src/components/WwwFrame/PromotionalBanner/Banners/GenericPromoBanner.vue
@@ -12,6 +12,14 @@
 			<div class="content" v-html="promoBannerContent.richText">
 			</div>
 		</component>
+		<a
+			v-if="hasDisclaimer"
+			href="#disclaimers"
+			class="disclaimer-indicator"
+			v-kv-track-event="['promo', 'click-Contentful-banner', 'disclaimer-superscript', '1']"
+		>
+			1
+		</a>
 	</div>
 </template>
 
@@ -34,6 +42,7 @@ export default {
 					kvTrackEvent: [],
 					link: '',
 					richText: '',
+					disclaimer: '',
 				};
 			}
 		},
@@ -67,6 +76,9 @@ export default {
 		},
 		trimmedLink() {
 			return this.promoBannerContent?.link?.trim() ?? '';
+		},
+		hasDisclaimer() {
+			return this.promoBannerContent.disclaimer !== '';
 		}
 	},
 };
@@ -113,6 +125,16 @@ export default {
 		fill: inherit;
 	}
 
+	.disclaimer-indicator {
+		color: $kiva-icon-green;
+		font-size: 0.875rem;
+
+		&:hover,
+		&:active {
+			color: $kiva-darkgreen;
+		}
+	}
+
 	.banner-link,
 	.banner-wrapper {
 		display: flex;
diff --git a/src/components/WwwFrame/TheFooter.vue b/src/components/WwwFrame/TheFooter.vue
index d5a92952ea..07d92c637f 100644
--- a/src/components/WwwFrame/TheFooter.vue
+++ b/src/components/WwwFrame/TheFooter.vue
@@ -1,5 +1,6 @@
 <template>
 	<footer class="www-footer" :style="cssVars">
+		<disclaimers />
 		<nav class="small-footer hide-for-large" aria-label="Footer navigation">
 			<div class="row collapse">
 				<div class="column">
@@ -706,12 +707,14 @@ import { getYear } from 'date-fns';
 import getCacheKey from '@/util/getCacheKey';
 import KvAccordionItem from '@/components/Kv/KvAccordionItem';
 import KvIcon from '@/components/Kv/KvIcon';
+import Disclaimers from '@/components/WwwFrame/DisclaimersContentful';
 
 export default {
 	name: 'TheFooter',
 	components: {
 		KvAccordionItem,
-		KvIcon
+		KvIcon,
+		Disclaimers,
 	},
 	serverCacheKey: props => getCacheKey(props.theme ? `footerThemed${props.theme.themeKey}` : 'footer'),
 	props: {
diff --git a/src/util/settingsUtils.js b/src/util/settingsUtils.js
index 9d260e959d..a1df5075cf 100644
--- a/src/util/settingsUtils.js
+++ b/src/util/settingsUtils.js
@@ -65,6 +65,23 @@ export function settingEnabled(data, enabledKey, startTimeKey, endTimeKey) {
 	return enabled && isWithinInterval(new Date(), { start: startTime, end: endTime });
 }
 
+/**
+ * Determine if a feature or setting is currently active (ie. within date range)
+ *
+ * @param {object} data
+ * @param {string} startTimeKey
+ * @param {string} endTimeKey
+ * @returns {object}
+ */
+export function settingWithinDateRange(data, startTimeKey, endTimeKey) {
+	const startTime = readDateSetting(data, startTimeKey);
+	const endTime = readDateSetting(data, endTimeKey);
+	return isWithinInterval(new Date(), {
+		start: startTime,
+		end: endTime
+	});
+}
+
 /**
  * Convert a string to a 32 bit integer
  * Inspiration: https://stackoverflow.com/a/8831937

From 12413d94acd149805dca1e1e1bfe40f9350491e0 Mon Sep 17 00:00:00 2001
From: Joshua <joshuadstarkey@gmail.com>
Date: Wed, 10 Nov 2021 10:02:19 -0700
Subject: [PATCH 2/7] feat: core-236 adding superscript to appeal banner open &
 closed versions

---
 .../WwwFrame/DisclaimersContentful.vue        | 47 +++++++++----------
 .../AppealBanner/AppealBannerCircular.vue     | 29 ++++++++++++
 .../AppealBannerCircularContainer.vue         |  4 ++
 .../Banners/GenericPromoBanner.vue            |  5 +-
 src/util/settingsUtils.js                     |  2 +-
 5 files changed, 60 insertions(+), 27 deletions(-)

diff --git a/src/components/WwwFrame/DisclaimersContentful.vue b/src/components/WwwFrame/DisclaimersContentful.vue
index 5c29137880..7ca99d4f78 100644
--- a/src/components/WwwFrame/DisclaimersContentful.vue
+++ b/src/components/WwwFrame/DisclaimersContentful.vue
@@ -1,13 +1,11 @@
 <template>
 	<div class="row">
-		<ol class="text-left">
+		<ol id="disclaimers" class="text-left">
 			<li
-				id="disclaimers"
 				v-for="(disclaimer, index) in fullyBuiltDisclaimerText"
 				:key="index"
+				v-html="disclaimer"
 			>
-				<!-- v-html="disclaimer" -->
-				{{ disclaimer }}
 			</li>
 		</ol>
 	</div>
@@ -36,6 +34,7 @@ export default {
 		query: bannerQuery,
 		preFetch: true,
 		result({ data }) {
+			this.disclaimerContent = [];
 			// gather contentful content and the uiSetting key ui-global-promo
 			const contentfulContent = data?.contentful?.entries?.items ?? [];
 			const uiGlobalPromoSetting = contentfulContent.find(item => item.fields.key === 'ui-global-promo');
@@ -66,13 +65,15 @@ export default {
 						'endDate'
 					);
 				});
-				console.log('activePromoBanner', activePromoBanner);
-				console.log('uiGlobalPromoSetting.fields.content', uiGlobalPromoSetting.fields.content);
-				// All 3 banners are present here
+
 				// gather all inactive promo banners by their start and end dates
 				const inactivePromoBanners = uiGlobalPromoSetting.fields.content.filter(promoContent => {
+					const hiddenUrls = promoContent?.fields?.hiddenUrls ?? [];
+					// Check hiddenUrl for display of disclaimers
+					if (hiddenUrls.includes(this.$route.path)) {
+						return false;
+					}
 					if (promoContent.fields.active) {
-						console.log('I feel triggered');
 						return false;
 					}
 					return settingWithinDateRange(
@@ -81,13 +82,9 @@ export default {
 						'endDate'
 					);
 				});
-				// only 1 banner here
-				console.log('Filtered disclaimerContent', inactivePromoBanners);
 
 				if (activePromoBanner) {
 					// check for visibility based on current route and hiddenUrls field
-
-					// WHAT DO WE WANT TO BASE THE DISCLAIMER VISIBILTY ON?
 					const hiddenUrls = _get(activePromoBanner, 'fields.hiddenUrls', []);
 					if (hiddenUrls.includes(this.$route.path)) {
 						return false;
@@ -102,21 +99,22 @@ export default {
 					// set the disclaimer text if it exists in active promo banner
 					const activeDisclaimerText = activePromoBanner?.fields?.disclaimers ?? null;
 
-					// if there's an active disclaimer, push that disclaimer to the disclaimerContent for display
+					// if there's an active promo banner with a disclaimer,
+					// push that disclaimer to the disclaimerContent for display
 					if (activeDisclaimerText) {
 						this.disclaimerContent.push(documentToHtmlString(activeDisclaimerText));
 					}
+				}
 
-					// go through the inactive promoBanners, if within date range and disclaimer text exists
-					// push that disclaimer text to disclaimerContent
-					if (inactivePromoBanners.length > 0) {
-						inactivePromoBanners.forEach(item => {
-							const itemDisclaimer = item?.fields?.disclaimers ?? null;
-							if (itemDisclaimer) {
-								this.disclaimerContent.push(documentToHtmlString(itemDisclaimer));
-							}
-						});
-					}
+				// go through the inactive promoBanners, if within date range and disclaimer text exists
+				// push that disclaimer text to disclaimerContent
+				if (inactivePromoBanners.length > 0) {
+					inactivePromoBanners.forEach(item => {
+						const itemDisclaimer = item?.fields?.disclaimers ?? null;
+						if (itemDisclaimer) {
+							this.disclaimerContent.push(documentToHtmlString(itemDisclaimer));
+						}
+					});
 				}
 			}
 		}
@@ -126,7 +124,8 @@ export default {
 		fullyBuiltDisclaimerText() {
 			const builtDisclaimertext = [];
 			this.disclaimerContent.forEach(disclaimer => {
-				builtDisclaimertext.push(`Disclaimer: ${disclaimer}`);
+				const prependDisclaimer = disclaimer.replace('<p>', '<p>Disclaimer: ');
+				builtDisclaimertext.push(prependDisclaimer);
 			});
 			return builtDisclaimertext;
 		}
diff --git a/src/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBannerCircular.vue b/src/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBannerCircular.vue
index 8658e64ad4..22f625c7ae 100644
--- a/src/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBannerCircular.vue
+++ b/src/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBannerCircular.vue
@@ -38,6 +38,16 @@
 				</div>
 				<div class="appeal-banner__content small-12 columns">
 					<h3 class="appeal-banner__title strong" v-html="headline"></h3>
+					<a
+						v-if="disclaimer"
+						href="#disclaimers"
+						class="appeal-banner__disclaimer-indicator"
+						v-kv-track-event="['promo', 'click-Contentful-banner', 'disclaimer-superscript', '1']"
+					>
+						<sup>
+							1
+						</sup>
+					</a>
 					<div class="appeal-banner__body" v-html="body"></div>
 					<ul class="appeal-banner__amount-list">
 						<li v-for="(buttonAmount, index) in buttonAmounts"
@@ -96,6 +106,16 @@
 			<div class="appeal-banner__content row align-middle">
 				<div class="columns">
 					<h4 class="appeal-banner__title" v-html="headline"></h4>
+					<a
+						v-if="disclaimer"
+						href="#disclaimers"
+						class="appeal-banner__disclaimer-indicator"
+						v-kv-track-event="['promo', 'click-Contentful-banner', 'disclaimer-superscript', '1']"
+					>
+						<sup>
+							1
+						</sup>
+					</a>
 				</div>
 				<div class="shrink columns">
 					<kv-button
@@ -161,6 +181,10 @@ export default {
 			type: Boolean,
 			default: true
 		},
+		disclaimer: {
+			type: Boolean,
+			default: false
+		}
 	},
 	computed: {
 		isLoading() {
@@ -225,6 +249,11 @@ export default {
 
 	&__title {
 		margin-bottom: rem-calc(4);
+		display: inline;
+	}
+
+	&__disclaimer-indicator {
+		color: $kiva-text-dark;
 	}
 
 	&__amount-list {
diff --git a/src/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBannerCircularContainer.vue b/src/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBannerCircularContainer.vue
index 5822a237d9..2b5a7eec57 100644
--- a/src/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBannerCircularContainer.vue
+++ b/src/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBannerCircularContainer.vue
@@ -7,6 +7,7 @@
 		:body="body"
 		:image-url="imageUrl"
 		:is-open="isOpen"
+		:disclaimer="hasDisclaimer"
 		@toggle-banner="onToggleBanner"
 		@amount-selected="onAmountSelected"
 	/>
@@ -70,6 +71,9 @@ export default {
 			return this.appealBannerContent?.additionalContent
 				?.find(content => content?.fields?.name === 'Progress Meter Image')
 				.fields?.images?.[0]?.fields?.file?.url || '';
+		},
+		hasDisclaimer() {
+			return this.appealBannerContent?.disclaimer !== '';
 		}
 	},
 	created() {
diff --git a/src/components/WwwFrame/PromotionalBanner/Banners/GenericPromoBanner.vue b/src/components/WwwFrame/PromotionalBanner/Banners/GenericPromoBanner.vue
index e2b59cb16a..7e31abb7fe 100644
--- a/src/components/WwwFrame/PromotionalBanner/Banners/GenericPromoBanner.vue
+++ b/src/components/WwwFrame/PromotionalBanner/Banners/GenericPromoBanner.vue
@@ -18,7 +18,9 @@
 			class="disclaimer-indicator"
 			v-kv-track-event="['promo', 'click-Contentful-banner', 'disclaimer-superscript', '1']"
 		>
-			1
+			<sup>
+				1
+			</sup>
 		</a>
 	</div>
 </template>
@@ -127,7 +129,6 @@ export default {
 
 	.disclaimer-indicator {
 		color: $kiva-icon-green;
-		font-size: 0.875rem;
 
 		&:hover,
 		&:active {
diff --git a/src/util/settingsUtils.js b/src/util/settingsUtils.js
index a1df5075cf..b345135423 100644
--- a/src/util/settingsUtils.js
+++ b/src/util/settingsUtils.js
@@ -71,7 +71,7 @@ export function settingEnabled(data, enabledKey, startTimeKey, endTimeKey) {
  * @param {object} data
  * @param {string} startTimeKey
  * @param {string} endTimeKey
- * @returns {object}
+ * @returns {boolean}
  */
 export function settingWithinDateRange(data, startTimeKey, endTimeKey) {
 	const startTime = readDateSetting(data, startTimeKey);

From d3272fb43ae310bffa447435b9be0dafbbf02823 Mon Sep 17 00:00:00 2001
From: Joshua <joshuadstarkey@gmail.com>
Date: Wed, 10 Nov 2021 10:23:00 -0700
Subject: [PATCH 3/7] feat: core-236 cleanup

---
 src/components/WwwFrame/DisclaimersContentful.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/WwwFrame/DisclaimersContentful.vue b/src/components/WwwFrame/DisclaimersContentful.vue
index 7ca99d4f78..f2112692dd 100644
--- a/src/components/WwwFrame/DisclaimersContentful.vue
+++ b/src/components/WwwFrame/DisclaimersContentful.vue
@@ -45,9 +45,6 @@ export default {
 			}
 			// uiGlobalPromoSetting can contain an array of different banners with
 			// different start/end dates first determine if setting is enabled.
-
-			// DO I NEED THIS CHECK, SINCE IF THERE'S INACTIVE BANNERS WITHIN DATE RANGE
-			// WE STILL WANT TO DISPLAY THE DISCLAIMERS... RIGHT?
 			const isGlobalSettingEnabled = settingEnabled(
 				uiGlobalPromoSetting.fields,
 				'active',
@@ -69,7 +66,7 @@ export default {
 				// gather all inactive promo banners by their start and end dates
 				const inactivePromoBanners = uiGlobalPromoSetting.fields.content.filter(promoContent => {
 					const hiddenUrls = promoContent?.fields?.hiddenUrls ?? [];
-					// Check hiddenUrl for display of disclaimers
+					// check hiddenUrl for display of disclaimers
 					if (hiddenUrls.includes(this.$route.path)) {
 						return false;
 					}
@@ -120,7 +117,7 @@ export default {
 		}
 	},
 	computed: {
-		// Constructing the final form of the disclaimer text for display
+		// constructing the final form of the disclaimer text for display
 		fullyBuiltDisclaimerText() {
 			const builtDisclaimertext = [];
 			this.disclaimerContent.forEach(disclaimer => {

From 41390cd5885235025342cf179abe32139a384f98 Mon Sep 17 00:00:00 2001
From: Joshua <joshuadstarkey@gmail.com>
Date: Wed, 10 Nov 2021 10:41:11 -0700
Subject: [PATCH 4/7] feat: core-236 adding margin spacing to body after
 removing from headline

---
 .../Banners/AppealBanner/AppealBannerCircular.vue               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBannerCircular.vue b/src/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBannerCircular.vue
index 22f625c7ae..151b93e14a 100644
--- a/src/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBannerCircular.vue
+++ b/src/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBannerCircular.vue
@@ -248,7 +248,6 @@ export default {
 	}
 
 	&__title {
-		margin-bottom: rem-calc(4);
 		display: inline;
 	}
 
@@ -332,6 +331,7 @@ export default {
 	}
 
 	&__body {
+		margin-top: rem-calc(4);
 		margin-bottom: 1rem;
 		white-space: pre-wrap;
 

From ecbbf0a90424bf485e0f61601f517a07d34c0a32 Mon Sep 17 00:00:00 2001
From: Joshua <joshuadstarkey@gmail.com>
Date: Wed, 10 Nov 2021 15:11:41 -0700
Subject: [PATCH 5/7] feat: core-236 adding data needed to calculate
 hasPromoSession within disclaimerContentful

---
 .../WwwFrame/DisclaimersContentful.vue        | 44 +++++++++++++++++--
 src/components/WwwFrame/TheBannerArea.vue     |  2 +-
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/components/WwwFrame/DisclaimersContentful.vue b/src/components/WwwFrame/DisclaimersContentful.vue
index f2112692dd..fa9be385f3 100644
--- a/src/components/WwwFrame/DisclaimersContentful.vue
+++ b/src/components/WwwFrame/DisclaimersContentful.vue
@@ -1,4 +1,4 @@
-<template>
+s<template>
 	<div class="row">
 		<ol id="disclaimers" class="text-left">
 			<li
@@ -13,25 +13,46 @@
 
 <script>
 import _get from 'lodash/get';
+import numeral from 'numeral';
 import gql from 'graphql-tag';
 import { settingEnabled, settingWithinDateRange } from '@/util/settingsUtils';
 import { documentToHtmlString } from '~/@contentful/rich-text-html-renderer';
 
-const bannerQuery = gql`query bannerQuery {
+const disclaimerQuery = gql`query disclaimerQuery($basketId: String) {
 	contentful {
 		entries(contentType: "uiSetting", contentKey: "ui-global-promo")
 	}
+	my {
+		userAccount {
+			id
+			promoBalance
+		}
+	}
+	shop (basketId: $basketId) {
+		id
+		basket {
+			id
+			hasFreeCredits
+			totals {
+				redemptionCodeAvailableTotal
+			}
+		}
+		lendingRewardOffered
+	}
 }`;
 
 export default {
 	data() {
 		return {
 			disclaimerContent: [],
+			lendingRewardOffered: false,
+			bonusBalance: 0,
+			hasFreeCredits: false,
 		};
 	},
 	inject: ['apollo', 'cookieStore'],
 	apollo: {
-		query: bannerQuery,
+		query: disclaimerQuery,
 		preFetch: true,
 		result({ data }) {
 			this.disclaimerContent = [];
@@ -113,6 +134,13 @@ export default {
 						}
 					});
 				}
+
+				// data for the hasPromoCredit function
+				const promoBalance = numeral(data.my.userAccount.promoBalance);
+				const basketPromoBalance = numeral(data.shop.totals.redemptionCodeAvailableTotal);
+				this.bonusBalance = promoBalance + basketPromoBalance;
+				this.lendingRewardOffered = data.shop.lendingRewardOffered;
+				this.hasFreeCredits = data.shop.basket.hasFreeCredits;
 			}
 		}
 	},
@@ -125,6 +153,16 @@ export default {
 				builtDisclaimertext.push(prependDisclaimer);
 			});
 			return builtDisclaimertext;
+		},
+		hasPromoSession() {
+			// check if the user has Promo Credit
+			// (lending reward credit, bonus credit, or free credit)
+			// if they have any of the above, the banners are hidden
+			// so we also hide the disclaimer section
+			if (this.lendingRewardOffered || this.bonusBalance > 0 || this.hasFreeCredits) {
+				return true;
+			}
+			return false;
 		}
 	}
 };
diff --git a/src/components/WwwFrame/TheBannerArea.vue b/src/components/WwwFrame/TheBannerArea.vue
index d23b20968a..e37d084a6c 100644
--- a/src/components/WwwFrame/TheBannerArea.vue
+++ b/src/components/WwwFrame/TheBannerArea.vue
@@ -40,7 +40,7 @@ export default {
 		hasPromoSession() {
 			// Check if the user has Promo Credit
 			// (lending reward credit, bonus credit, or free credit)
-			// If the have any of the above, we hide the banner area
+			// If they have any of the above, we hide the banner area
 			if (this.lendingRewardOffered || this.bonusBalance > 0 || this.hasFreeCredits) {
 				return true;
 			}

From 1e5fcfafbca99b5af61b04ff6003c98382325aa4 Mon Sep 17 00:00:00 2001
From: Joshua <joshuadstarkey@gmail.com>
Date: Thu, 11 Nov 2021 17:02:43 -0700
Subject: [PATCH 6/7] feat: core-236 adding smoothScroll to disclaimers anchor
 click

---
 src/components/WwwFrame/DisclaimersContentful.vue     |  2 +-
 .../Banners/AppealBanner/AppealBannerCircular.vue     | 10 ++++++++--
 .../PromotionalBanner/Banners/GenericPromoBanner.vue  | 11 ++++++++++-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/WwwFrame/DisclaimersContentful.vue b/src/components/WwwFrame/DisclaimersContentful.vue
index fa9be385f3..c33494a75a 100644
--- a/src/components/WwwFrame/DisclaimersContentful.vue
+++ b/src/components/WwwFrame/DisclaimersContentful.vue
@@ -1,4 +1,4 @@
-s<template>
+<template>
 	<div class="row">
 		<ol id="disclaimers" class="text-left">
 			<li
diff --git a/src/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBannerCircular.vue b/src/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBannerCircular.vue
index 151b93e14a..d384a57c33 100644
--- a/src/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBannerCircular.vue
+++ b/src/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBannerCircular.vue
@@ -40,7 +40,7 @@
 					<h3 class="appeal-banner__title strong" v-html="headline"></h3>
 					<a
 						v-if="disclaimer"
-						href="#disclaimers"
+						@click="scrollToSection('#disclaimers')"
 						class="appeal-banner__disclaimer-indicator"
 						v-kv-track-event="['promo', 'click-Contentful-banner', 'disclaimer-superscript', '1']"
 					>
@@ -138,6 +138,7 @@
 <script>
 // import numeral from 'numeral';
 import smoothReflow from 'vue-smooth-reflow';
+import smoothScrollMixin from '@/plugins/smooth-scroll-mixin';
 
 import KvButton from '@/components/Kv/KvButton';
 import KvIcon from '@/components/Kv/KvIcon';
@@ -151,7 +152,7 @@ export default {
 		KvProgressCircle,
 		KvContentfulImg
 	},
-	mixins: [smoothReflow],
+	mixins: [smoothReflow, smoothScrollMixin],
 	props: {
 		targetAmount: {
 			type: Number,
@@ -217,6 +218,11 @@ export default {
 		onClickToggleBanner() {
 			this.$emit('toggle-banner', !this.isOpen);
 		},
+		scrollToSection(sectionId) {
+			const elementToScrollTo = document.querySelector(sectionId);
+			const topOfSectionToScrollTo = elementToScrollTo?.offsetTop ?? 0;
+			this.smoothScrollTo({ yPosition: topOfSectionToScrollTo, millisecondsToAnimate: 750 });
+		}
 	},
 	mounted() {
 		this.$smoothReflow();
diff --git a/src/components/WwwFrame/PromotionalBanner/Banners/GenericPromoBanner.vue b/src/components/WwwFrame/PromotionalBanner/Banners/GenericPromoBanner.vue
index 7e31abb7fe..f8e3d1e1c5 100644
--- a/src/components/WwwFrame/PromotionalBanner/Banners/GenericPromoBanner.vue
+++ b/src/components/WwwFrame/PromotionalBanner/Banners/GenericPromoBanner.vue
@@ -14,7 +14,7 @@
 		</component>
 		<a
 			v-if="hasDisclaimer"
-			href="#disclaimers"
+			@click="scrollToSection('#disclaimers')"
 			class="disclaimer-indicator"
 			v-kv-track-event="['promo', 'click-Contentful-banner', 'disclaimer-superscript', '1']"
 		>
@@ -27,11 +27,13 @@
 
 <script>
 import KvIcon from '@/components/Kv/KvIcon';
+import smoothScrollMixin from '@/plugins/smooth-scroll-mixin';
 
 export default {
 	components: {
 		KvIcon
 	},
+	mixins: [smoothScrollMixin],
 	props: {
 		iconKey: {
 			type: String,
@@ -49,6 +51,13 @@ export default {
 			}
 		},
 	},
+	methods: {
+		scrollToSection(sectionId) {
+			const elementToScrollTo = document.querySelector(sectionId);
+			const topOfSectionToScrollTo = elementToScrollTo?.offsetTop ?? 0;
+			this.smoothScrollTo({ yPosition: topOfSectionToScrollTo, millisecondsToAnimate: 750 });
+		}
+	},
 	computed: {
 		// if the promoBannerContent includes a link, render a router-link element, else render a plain div
 		currentWrapperComponent() {

From 7309044ec5d09a183bd054b527cc8e893d81078e Mon Sep 17 00:00:00 2001
From: Joshua <joshuadstarkey@gmail.com>
Date: Fri, 12 Nov 2021 15:09:10 -0700
Subject: [PATCH 7/7] feat: refactoring a little, cleaning up console error

---
 .../WwwFrame/DisclaimersContentful.vue        |  8 +++----
 src/util/settingsUtils.js                     | 24 +++++++++----------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/components/WwwFrame/DisclaimersContentful.vue b/src/components/WwwFrame/DisclaimersContentful.vue
index c33494a75a..c6b6d33a7b 100644
--- a/src/components/WwwFrame/DisclaimersContentful.vue
+++ b/src/components/WwwFrame/DisclaimersContentful.vue
@@ -75,7 +75,7 @@ export default {
 
 			// if setting is enabled determine which banner to display
 			if (isGlobalSettingEnabled) {
-				const activePromoBanner = uiGlobalPromoSetting.fields.content.find(promoContent => {
+				const activePromoBanner = uiGlobalPromoSetting?.fields?.content?.find(promoContent => {
 					return settingEnabled(
 						promoContent.fields,
 						'active',
@@ -85,7 +85,7 @@ export default {
 				});
 
 				// gather all inactive promo banners by their start and end dates
-				const inactivePromoBanners = uiGlobalPromoSetting.fields.content.filter(promoContent => {
+				const inactivePromoBanners = uiGlobalPromoSetting?.fields?.content?.filter(promoContent => {
 					const hiddenUrls = promoContent?.fields?.hiddenUrls ?? [];
 					// check hiddenUrl for display of disclaimers
 					if (hiddenUrls.includes(this.$route.path)) {
@@ -136,8 +136,8 @@ export default {
 				}
 
 				// data for the hasPromoCredit function
-				const promoBalance = numeral(data.my.userAccount.promoBalance);
-				const basketPromoBalance = numeral(data.shop.totals.redemptionCodeAvailableTotal);
+				const promoBalance = numeral(data?.my?.userAccount?.promoBalance ?? 0);
+				const basketPromoBalance = numeral(data?.shop?.totals?.redemptionCodeAvailableTotal ?? 0);
 				this.bonusBalance = promoBalance + basketPromoBalance;
 				this.lendingRewardOffered = data.shop.lendingRewardOffered;
 				this.hasFreeCredits = data.shop.basket.hasFreeCredits;
diff --git a/src/util/settingsUtils.js b/src/util/settingsUtils.js
index b345135423..c3ecf52f42 100644
--- a/src/util/settingsUtils.js
+++ b/src/util/settingsUtils.js
@@ -50,36 +50,34 @@ export function readJSONSetting(data, key) {
 }
 
 /**
- * Determine if a feature or setting is enabled and currently active.
+ * Determine if a feature or setting is currently active (ie. within date range)
  *
  * @param {object} data
- * @param {string} enabledKey
  * @param {string} startTimeKey
  * @param {string} endTimeKey
  * @returns {boolean}
  */
-export function settingEnabled(data, enabledKey, startTimeKey, endTimeKey) {
-	const enabled = readBoolSetting(data, enabledKey);
+export function settingWithinDateRange(data, startTimeKey, endTimeKey) {
 	const startTime = readDateSetting(data, startTimeKey);
 	const endTime = readDateSetting(data, endTimeKey);
-	return enabled && isWithinInterval(new Date(), { start: startTime, end: endTime });
+	return isWithinInterval(new Date(), {
+		start: startTime,
+		end: endTime
+	});
 }
 
 /**
- * Determine if a feature or setting is currently active (ie. within date range)
+ * Determine if a feature or setting is enabled and currently active.
  *
  * @param {object} data
+ * @param {string} enabledKey
  * @param {string} startTimeKey
  * @param {string} endTimeKey
  * @returns {boolean}
  */
-export function settingWithinDateRange(data, startTimeKey, endTimeKey) {
-	const startTime = readDateSetting(data, startTimeKey);
-	const endTime = readDateSetting(data, endTimeKey);
-	return isWithinInterval(new Date(), {
-		start: startTime,
-		end: endTime
-	});
+export function settingEnabled(data, enabledKey, startTimeKey, endTimeKey) {
+	const enabled = readBoolSetting(data, enabledKey);
+	return enabled && settingWithinDateRange(data, startTimeKey, endTimeKey);
 }
 
 /**