diff --git a/content/modals/GB/short_term_xo.json b/content/modals/GB/short_term_xo.json index 94994dfcf3..955be6bad9 100644 --- a/content/modals/GB/short_term_xo.json +++ b/content/modals/GB/short_term_xo.json @@ -9,6 +9,7 @@ "useV5Design": "true", "apr": "{apr}", "preapproved": "false", + "showPreapprovedBadge": "false", "variables": { "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}", "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}", diff --git a/content/modals/US/v2_short_term_xo.json b/content/modals/US/v2_short_term_xo.json index 45ac5bb066..2838f4d70c 100644 --- a/content/modals/US/v2_short_term_xo.json +++ b/content/modals/US/v2_short_term_xo.json @@ -9,6 +9,7 @@ "apr": "{apr}", "useV5Design": "true", "preapproved": "false", + "showPreapprovedBadge": "false", "variables": { "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}", "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}", diff --git a/src/components/modal/v2/parts/BodyContent.jsx b/src/components/modal/v2/parts/BodyContent.jsx index 6a8246c36e..f7e99be58a 100644 --- a/src/components/modal/v2/parts/BodyContent.jsx +++ b/src/components/modal/v2/parts/BodyContent.jsx @@ -75,6 +75,7 @@ const BodyContent = () => { document.documentElement.className = `${documentClassName} v5Design`; } const isPreapproved = productMeta?.preapproved; + const shouldShowPreapprovedBadge = productMeta?.showPreapprovedBadge; const preapprovalHeadline = content?.preapproval?.preapprovalHeadline; const preapprovalSubHeadline = content?.preapproval?.preapprovalSubHeadline; const preapprovalLabel = content?.preapproval?.preapprovalLabel; @@ -154,6 +155,7 @@ const BodyContent = () => { preapprovalLabel={preapprovalLabel} // toggles preapproval content isPreapproved={isPreapproved ?? 'false'} + shouldShowPreapprovedBadge={shouldShowPreapprovedBadge ?? 'false'} /> ) : (
{ const { country } = useServerData(); const [, handleClose] = useTransitionState(); @@ -33,6 +34,9 @@ const CheckoutHeader = ({ // Used to specifically target styles to a specific country const countryClassName = country?.toLowerCase(); + // Only show preapproved badge if user is preapproved AND in the treatment group + const showPreapprovalContent = isPreapproved === 'true' && shouldShowPreapprovedBadge === 'true'; + // IMPORTANT: These elements cannot be nested inside of other elements. // They are using very precise CSS position sticky rules that require this // specific adjacent DOM structure @@ -72,14 +76,14 @@ const CheckoutHeader = ({ // id used for aria-labelleby on modal container element id="header__headline" className={ - isPreapproved === 'true' + showPreapprovalContent ? `headline-${countryClassName}-preapproved` : `headline-${countryClassName}` } // eslint-disable-next-line react/no-danger - dangerouslySetInnerHTML={{ __html: isPreapproved === 'true' ? preapprovalHeadline : headline }} + dangerouslySetInnerHTML={{ __html: showPreapprovalContent ? preapprovalHeadline : headline }} /> - {isPreapproved === 'true' ? ( + {showPreapprovalContent ? ( {preapprovalLabel} ) : ( '' @@ -87,7 +91,7 @@ const CheckoutHeader = ({ {isQualifying === 'true' && qualifyingSubheadline !== '' ? (

- {isPreapproved === 'true' + {showPreapprovalContent ? preapprovalSubHeadline : qualifyingSubheadline.replace(/(\s?EUR)/g, ' €')}

@@ -96,8 +100,7 @@ const CheckoutHeader = ({ className={`subheadline_p subheadline-${countryClassName} checkout`} // eslint-disable-next-line react/no-danger dangerouslySetInnerHTML={{ - __html: - currencyFormat(isPreapproved === 'true' ? preapprovalSubHeadline : subheadline) ?? '' + __html: currencyFormat(showPreapprovalContent ? preapprovalSubHeadline : subheadline) ?? '' }} /> )} diff --git a/src/components/modal/v2/parts/views/ShortTerm/Content.jsx b/src/components/modal/v2/parts/views/ShortTerm/Content.jsx index 98b54c0637..0a49afec19 100644 --- a/src/components/modal/v2/parts/views/ShortTerm/Content.jsx +++ b/src/components/modal/v2/parts/views/ShortTerm/Content.jsx @@ -24,7 +24,7 @@ export const ShortTerm = ({ learnMoreLink, cta }, - productMeta: { qualifying, periodicPayment, useV4Design, useV5Design, preapproved }, + productMeta: { qualifying, periodicPayment, useV4Design, useV5Design, preapproved, showPreapprovedBadge }, openProductList, useNewCheckoutDesign, use5Dot1Design @@ -35,6 +35,8 @@ export const ShortTerm = ({ const isQualifying = qualifying === 'true'; const isPreapproved = preapproved === 'true'; + const shouldShowPreapprovedBadge = showPreapprovedBadge === 'true'; + const showPreapprovalContent = isPreapproved && shouldShowPreapprovedBadge; const preapprovalDisclaimerHeadline = preapproval?.preapprovalDisclaimerHeadline; const preapprovalDisclaimerBody = preapproval?.preapprovalDisclaimerBody; @@ -143,7 +145,7 @@ export const ShortTerm = ({ ))} - {isPreapproved && ( + {showPreapprovalContent && (