-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3405 from kiva/Core-236
feat: Core-236 disclaimer text parsed and rendered from contentful wi…
- Loading branch information
Showing
7 changed files
with
265 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,169 @@ | ||
| <template> | ||
| <div class="row"> | ||
| <ol id="disclaimers" class="text-left"> | ||
| <li | ||
| v-for="(disclaimer, index) in fullyBuiltDisclaimerText" | ||
| :key="index" | ||
| v-html="disclaimer" | ||
| > | ||
| </li> | ||
| </ol> | ||
| </div> | ||
| </template> | ||
|
|
||
| <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 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: disclaimerQuery, | ||
| 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'); | ||
| // 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. | ||
| 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' | ||
| ); | ||
| }); | ||
| // 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) { | ||
| return false; | ||
| } | ||
| return settingWithinDateRange( | ||
| promoContent.fields, | ||
| 'startDate', | ||
| 'endDate' | ||
| ); | ||
| }); | ||
| if (activePromoBanner) { | ||
| // check for visibility based on current route and hiddenUrls field | ||
| 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 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)); | ||
| } | ||
| }); | ||
| } | ||
| // data for the hasPromoCredit function | ||
| 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; | ||
| } | ||
| } | ||
| }, | ||
| computed: { | ||
| // constructing the final form of the disclaimer text for display | ||
| fullyBuiltDisclaimerText() { | ||
| const builtDisclaimertext = []; | ||
| this.disclaimerContent.forEach(disclaimer => { | ||
| const prependDisclaimer = disclaimer.replace('<p>', '<p>Disclaimer: '); | ||
| 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; | ||
| } | ||
| } | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.