feat: Core-236 disclaimer text parsed and rendered from contentful wi…

…thin the footer

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>

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;

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: {

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