feat: add experiment gating for US and GB preapproval badge

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')}",

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')}",

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'}
                 />
             ) : (
                 <Header

src/components/modal/v2/parts/CheckoutHeader.jsx

@@ -13,7 +13,8 @@ const CheckoutHeader = ({
     preapprovalHeadline,
     preapprovalSubHeadline,
     preapprovalLabel,
-    isPreapproved = 'false'
+    isPreapproved = 'false',
+    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,22 +76,22 @@ 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 ? (
                         <span className={`preapproved-label ${countryClassName}`}>{preapprovalLabel}</span>
                     ) : (
                         ''
                     )}
                 </div>
                 {isQualifying === 'true' && qualifyingSubheadline !== '' ? (
                     <p className={`subheadline_p subheadline-${countryClassName} qualifying checkout`}>
-                        {isPreapproved === 'true'
+                        {showPreapprovalContent
                             ? preapprovalSubHeadline
                             : qualifyingSubheadline.replace(/(\s?EUR)/g, ' €')}
                     </p>
@@ -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) ?? ''
                         }}
                     />
                 )}

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 = ({
                                 ))}
                             </div>
                         </div>
-                        {isPreapproved && (
+                        {showPreapprovalContent && (
                             <PreapprovalDisclaimer
                                 preapprovalDisclaimerBody={preapprovalDisclaimerBody}
                                 preapprovalDisclaimerHeadline={preapprovalDisclaimerHeadline}