fix: modal styles

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

@@ -8,8 +8,7 @@ import {
     useXProps,
     useScroll,
     useDidUpdateEffect,
-    useTransitionState,
-    isLander
+    useTransitionState
 } from '../lib';
 import Header from './Header';
 import { LongTerm, ShortTerm, NoInterest, ProductList, PayIn1 } from './views';
@@ -66,14 +65,6 @@ const BodyContent = () => {
     const use5Dot1Design = productMeta?.['v5.1'];
     const useNewCheckoutDesign = features?.includes('new-checkout-design') ? 'true' : 'false';
 
-    // add v4Design or v5Design class to root html to update lander specific styles to v4 or v5 respectively
-    const documentClassName = document.documentElement.className;
-    if (useV4Design && isLander) {
-        document.documentElement.className = `${documentClassName} v4Design`;
-    }
-    if (useV5Design && isLander) {
-        document.documentElement.className = `${documentClassName} v5Design`;
-    }
     const isPreapproved = productMeta?.preapproved;
     const shouldShowPreapprovedBadge = productMeta?.showPreapprovedBadge;
     const preapprovalHeadline = content?.preapproval?.preapprovalHeadline;
@@ -127,14 +118,7 @@ const BodyContent = () => {
                 openProductList={openProductList}
             />
         ),
-        [VIEW_IDS.PRODUCT_LIST]: (
-            <ProductList
-                content={content}
-                useV5Design={useV5Design}
-                use5Dot1Design={use5Dot1Design}
-                setViewName={setViewName}
-            />
-        )
+        [VIEW_IDS.PRODUCT_LIST]: <ProductList content={content} setViewName={setViewName} />
     };
 
     // IMPORTANT: These elements cannot be nested inside of other elements.
@@ -171,11 +155,7 @@ const BodyContent = () => {
                     use5Dot1Design={use5Dot1Design}
                 />
             )}
-            <div
-                className={`content__container ${useV4Design ? 'v4Design' : ''} ${useV5Design ? 'v5Design' : ''} ${
-                    useNewCheckoutDesign === 'true' ? 'checkout' : ''
-                } ${use5Dot1Design ? 'v5Dot1Design' : ''} `}
-            >
+            <div className={`content__container ${useNewCheckoutDesign === 'true' ? 'checkout' : ''}`}>
                 <main className="main">
                     <div className="content__body">{viewComponents[viewName]}</div>
                 </main>

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

@@ -197,23 +197,14 @@ const Calculator = ({
     return (
         <div
             className={`calculator ${useNewCheckoutDesign === 'true' ? 'checkout' : ''} ${
-                useV5Design === 'true' ? 'v5Design' : ''
-            } ${cta ? 'border-checkout' : ''}`}
+                cta ? 'border-checkout' : ''
+            }`}
         >
-            <form
-                className={`form ${useV4Design === 'true' ? 'v4Design' : ''} ${
-                    useV5Design === 'true' ? 'v5Design' : ''
-                } ${useNewCheckoutDesign === 'true' ? 'checkout' : ''}`}
-                onSubmit={submit}
-            >
+            <form className={`form ${useNewCheckoutDesign === 'true' ? 'checkout' : ''}`} onSubmit={submit}>
                 <h3 className={`title ${cta ? 'checkout-title' : ''}`}>
                     {!hasInitialAmount ? genericTitle || title : title}
                 </h3>
-                <div
-                    className={`input__wrapper transitional ${useV5Design === 'true' ? 'v5Design' : ''} ${
-                        cta ? 'checkout' : ''
-                    }`}
-                >
+                <div className={`input__wrapper transitional ${cta ? 'checkout' : ''}`}>
                     <label htmlFor="purchase-amount" className={`input__label ${country}`}>
                         {renderInputLabelOnEmptyField(country)}
                     </label>
@@ -249,15 +240,13 @@ const Calculator = ({
                 <div
                     className={`finance-terms__disclaimer ${
                         !(hasInitialAmount || hasUsedInputField) || error ? 'no-amount' : ''
-                    } ${useV5Design === 'true' ? 'v5Design' : ''}`}
+                    }`}
                 >
                     {aprDisclaimer[0].aprDisclaimer}
                 </div>
             )}
             {(country === 'ES' || country === 'IT') && (
-                <div className={`finance-terms__disclaimer ${useV5Design === 'true' ? 'v5Design' : ''}`}>
-                    {genericDisclaimer}
-                </div>
+                <div className="finance-terms__disclaimer">{genericDisclaimer}</div>
             )}
         </div>
     );

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

@@ -10,28 +10,21 @@ const Donut = ({
     radiusV4andV5 = 5.5,
     viewBox = `0 0 ${2 * cx} ${2 * cy}`,
     style = { fontSize: '0.375rem' },
-    segmentStrokeWidth = 5.8,
     currentNum = 0,
     numOfPayments = 4,
     timeStamp,
     periodicPayment,
     qualifying,
-    useV4Design,
-    useV5Design,
-    use5Dot1Design,
     useNewCheckoutDesign
 }) => {
     const percentage = (currentNum / numOfPayments) * 100;
-    const segStrokeWidth = segmentStrokeWidth ?? strokeWidth;
     const strokeDasharray = `${percentage} ${100 - percentage}`;
-    const isV4OrV5Design = useV4Design === 'true' || useV5Design === 'true';
-    const isV5Design = useV5Design === 'true';
 
     const segments = (
         <circle
             cx={cx}
             cy={cy}
-            r={isV4OrV5Design ? radiusV4andV5 : radius}
+            r={radiusV4andV5}
             className="donut__percent"
             stroke-dasharray={strokeDasharray}
             stroke-dashoffset={25}
@@ -46,28 +39,21 @@ const Donut = ({
         <div
             className={`donut__single_payment ${
                 isQualifying ? 'donut__qualifying_payment' : 'donut__non_qualifying_payment'
-            } ${isV4OrV5Design && isBelowNumOfPayments ? isPi3 : ''}${
-                isV4OrV5Design && currentNum === numOfPayments ? 'donut__single_payment_line__end' : ''
+            } ${isBelowNumOfPayments ? isPi3 : ''}${
+                currentNum === numOfPayments ? 'donut__single_payment_line__end' : ''
             }`}
         >
-            <span
-                className={`${isV5Design ? 'v5Design' : ''} ${useNewCheckoutDesign === 'true' ? 'checkout' : ''} svg`}
-            >
+            <span className={`${useNewCheckoutDesign === 'true' ? 'checkout' : ''} svg`}>
                 <svg aria-hidden viewBox={viewBox} className="donut" style={style} xmlns="http://www.w3.org/2000/svg">
                     <circle
                         cx={cx}
                         cy={cy}
                         r={radius}
                         fill="transparent"
-                        className={isV4OrV5Design ? 'donut__background__line' : 'donut__background'}
+                        className="donut__background__line"
                         stroke-width={strokeWidth}
                     />
-                    <g
-                        stroke-width={isV4OrV5Design ? 0 : segStrokeWidth}
-                        // eslint-disable-next-line no-nested-ternary
-                        fill={use5Dot1Design ? '#686A6D' : isV4OrV5Design ? '#545D68' : 'transparent'}
-                        stroke-linecap={strokeLinecap}
-                    >
+                    <g stroke-width={0} fill="#686A6D" stroke-linecap={strokeLinecap}>
                         {segments}
                     </g>
                     <text x={cx} y={cy} text-anchor="middle">
@@ -78,20 +64,12 @@ const Donut = ({
             {/* eslint-disable-next-line jsx-a11y/aria-role */}
             <span aria-labelledby={`donut__payment__${currentNum} donut__timestamp__${currentNum}`} role="text">
                 {isQualifying && periodicPayment !== '-' && (
-                    <span
-                        className={`${isV4OrV5Design ? 'donut__payment_v5' : 'donut__payment'} ${
-                            use5Dot1Design ? 'donut__payment_v5Dot1' : ''
-                        }`}
-                        id={`donut__payment__${currentNum}`}
-                        aria-hidden="true"
-                    >
+                    <span className="donut__payment" id={`donut__payment__${currentNum}`} aria-hidden="true">
                         {periodicPayment}
                     </span>
                 )}
                 <span
-                    className={`${isV4OrV5Design ? 'donut__timestamp_v5' : 'donut__timestamp'} ${
-                        use5Dot1Design ? 'donut__timestamp_v5Dot1' : ''
-                    } ${useNewCheckoutDesign === 'true' ? 'checkout' : ''}`}
+                    className={`donut__timestamp ${useNewCheckoutDesign === 'true' ? 'checkout' : ''}`}
                     id={`donut__timestamp__${currentNum}`}
                     aria-hidden="true"
                 >

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

@@ -9,11 +9,7 @@ const Header = ({
     subheadline,
     isQualifying = 'false',
     qualifyingSubheadline,
-    closeButtonLabel = 'Close',
-    viewName,
-    useV4Design,
-    useV5Design,
-    use5Dot1Design
+    closeButtonLabel = 'Close'
 }) => {
     const { country } = useServerData();
     const [, handleClose] = useTransitionState();
@@ -39,18 +35,10 @@ const Header = ({
     return (
         <Fragment>
             <div aria-hidden="true" className="header__fixed-wrapper header__fixed-wrapper--front">
-                <div
-                    className={`header__background-wrapper header__background-wrapper--gradient ${
-                        useV4Design ? 'v4Design' : ''
-                    } ${useV5Design ? 'v5Design' : ''}`}
-                />
+                <div className="header__background-wrapper header__background-wrapper--gradient" />
             </div>
             <div aria-hidden="true" className="header__fixed-wrapper">
-                <div
-                    className={`header__background-wrapper ${useV4Design ? 'v4Design' : ''} ${
-                        useV5Design ? 'v5Design' : ''
-                    }`}
-                />
+                <div className="header__background-wrapper" />
             </div>
             <div className="header__icons">
                 <div className={`logo__wrapper ${isScrolled ? 'logo__wrapper--scroll' : ''}`}>
@@ -62,7 +50,7 @@ const Header = ({
                     // We don't need to render an 'x' button if the target is a lander since you will close via a
                     // merchant-provided close button from their own iframe, or by closing the window in the case of a webpage.
                     <button
-                        className={`close ${useV5Design ? 'v5Design' : ''}`}
+                        className="close"
                         aria-label={closeButtonLabel}
                         type="button"
                         id="close-btn"
@@ -73,43 +61,24 @@ const Header = ({
                     </button>
                 )}
                 <div className="header__fixed-wrapper header__fixed-wrapper--front">
-                    <div
-                        className={`header__background-wrapper header__background-wrapper--sticky ${
-                            useV4Design ? 'v4Design' : ''
-                        } ${useV5Design ? 'v5Design' : ''}`}
-                    />
+                    <div className="header__background-wrapper header__background-wrapper--sticky" />
                 </div>
             </div>
             <div className="header__content">
-                {!useV5Design && (
-                    <div>
-                        <Icon name={`${viewName}-desktop`} />
-                        <Icon name={`${viewName}-mobile`} />
-                        {/* <Icon name="background-pp-mobile" /> */}
-                    </div>
-                )}
                 <h2
                     // id used for aria-labelleby on modal container element
                     id="header__headline"
-                    className={`headline-${countryClassName} ${useV5Design ? 'v5Design' : ''} ${
-                        use5Dot1Design ? 'headline-new' : ''
-                    }`}
+                    className={`headline-${countryClassName}`}
                     // eslint-disable-next-line react/no-danger
                     dangerouslySetInnerHTML={{ __html: headline }}
                 />
                 {isQualifying === 'true' && qualifyingSubheadline !== '' ? (
-                    <p
-                        className={`subheadline_p subheadline-${countryClassName} qualifying ${
-                            useV5Design ? 'v5Design' : ''
-                        }`}
-                    >
+                    <p className={`subheadline_p subheadline-${countryClassName} qualifying`}>
                         {qualifyingSubheadline.replace(/(\s?EUR)/g, ' €')}
                     </p>
                 ) : (
                     <p
-                        className={`subheadline_p subheadline-${countryClassName} ${useV5Design ? 'v5Design' : ''} ${
-                            country === 'DE' ? 'DE' : ''
-                        }`}
+                        className={`subheadline_p subheadline-${countryClassName} ${country === 'DE' ? 'DE' : ''}`}
                         // eslint-disable-next-line react/no-danger
                         dangerouslySetInnerHTML={{
                             __html: currencyFormat(subheadline) ?? ''

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

@@ -2,16 +2,7 @@
 import { Fragment, h } from 'preact';
 import { currencyFormat } from '../lib';
 
-const Instructions = ({
-    instructions,
-    cta,
-    expandedState = false,
-    className = '',
-    useV4Design,
-    useV5Design,
-    country,
-    useNewCheckoutDesign
-}) => {
+const Instructions = ({ instructions, cta, expandedState = false, className = '', country, useNewCheckoutDesign }) => {
     const renderBullet = (index, design) => {
         return (
             <div className="instructions__bullet">
@@ -36,17 +27,9 @@ const Instructions = ({
     const renderInstructionsContent = () => {
         if (Array.isArray(instructions)) {
             return (
-                <ol
-                    className={`${expandedState ? '' : 'collapsed'} ${className} ${
-                        useV4Design === 'true' ? 'v4Design' : ''
-                    }`}
-                >
+                <ol className={`${expandedState ? '' : 'collapsed'} ${className}`}>
                     {instructions.map((instruction, index) => (
-                        <li
-                            className={`instructions__item-wrapper ${useV5Design ? 'v5Design' : ''} ${
-                                country === 'DE' ? 'DE' : ''
-                            }`}
-                        >
+                        <li className={`instructions__item-wrapper ${country === 'DE' ? 'DE' : ''}`}>
                             {renderBullet(index + 1, useNewCheckoutDesign)}
                             <div
                                 // eslint-disable-next-line react/no-danger
@@ -62,22 +45,14 @@ const Instructions = ({
             return (
                 <Fragment>
                     <h2
-                        className={`instructions__item-wrapper ${useV5Design ? 'v5Design' : ''} ${
-                            country === 'DE' ? 'DE' : ''
-                        }`}
+                        className={`instructions__item-wrapper ${country === 'DE' ? 'DE' : ''}`}
                         // eslint-disable-next-line react/no-danger
                         dangerouslySetInnerHTML={{ __html: instructions.instructionsHeadline }}
                     />
-                    <ol
-                        className={
-                            (`${expandedState ? '' : 'collapsed'}`,
-                            className,
-                            `${useV4Design === 'true' ? 'v4Design' : ''}`)
-                        }
-                    >
+                    <ol className={`${expandedState ? '' : 'collapsed'} ${className}`}>
                         {instructions.instructionsSubHeadline.map((instruction, index) => {
                             return (
-                                <li className={`instructions__item-wrapper ${useV5Design ? 'v5Design' : ''}`}>
+                                <li className="instructions__item-wrapper">
                                     {instructions.instructionsIcons
                                         ? renderIcons(Object.values(instructions.instructionsIcons)[index])
                                         : renderBullet(index + 1, useNewCheckoutDesign)}
@@ -107,11 +82,7 @@ const Instructions = ({
     };
 
     return (
-        <div
-            className={`content__row instructions ${useV5Design ? 'v5Design' : ''} ${
-                useNewCheckoutDesign === 'true' ? 'checkout' : ''
-            }`}
-        >
+        <div className={`content__row instructions ${useNewCheckoutDesign === 'true' ? 'checkout' : ''}`}>
             <div className={`${cta ? 'instructions__border-checkout' : ''}`}>{renderInstructionsContent()}</div>
         </div>
     );

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

@@ -5,8 +5,6 @@ import Icon from './Icon';
 
 const OfferAccordion = ({
     offer: { content, meta },
-    useV5Design,
-    use5Dot1Design,
     aprDisclaimer,
     index,
     activeSelection,
@@ -31,8 +29,8 @@ const OfferAccordion = ({
         <div
             id={index}
             className={`accordion__container ${activeSelection === index ? 'active' : ''} ${open} ${
-                useV5Design === 'true' ? 'v5Design' : ''
-            } ${use5Dot1Design ? 'v5Dot1Design' : ''} ${offerCountry || ''}`}
+                offerCountry || ''
+            }`}
         >
             <div className="accordion__content">
                 <div className="accordion__row">