Add Chevrons for ITES Accordion

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

@@ -183,6 +183,24 @@ const Icon = ({ name = '', content }) => {
                     />
                 </svg>
             );
+        case 'chevron-up':
+            return (
+                <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M20.0307 15.8925C19.961 15.9623 19.8783 16.0176 19.7873 16.0553C19.6962 16.0931 19.5986 16.1125 19.5001 16.1125C19.4015 16.1125 19.3039 16.0931 19.2128 16.0553C19.1218 16.0176 19.0391 15.9623 18.9694 15.8925L12.0001 8.92223L5.03068 15.8925C4.88995 16.0333 4.69907 16.1123 4.50005 16.1123C4.30103 16.1123 4.11016 16.0333 3.96943 15.8925C3.8287 15.7518 3.74963 15.5609 3.74963 15.3619C3.74963 15.1629 3.8287 14.972 3.96943 14.8313L11.4694 7.33129C11.5391 7.26156 11.6218 7.20624 11.7128 7.1685C11.8039 7.13076 11.9015 7.11133 12.0001 7.11133C12.0986 7.11133 12.1962 7.13076 12.2873 7.1685C12.3783 7.20624 12.461 7.26156 12.5307 7.33129L20.0307 14.8313C20.1004 14.9009 20.1557 14.9837 20.1935 15.0747C20.2312 15.1658 20.2506 15.2634 20.2506 15.3619C20.2506 15.4605 20.2312 15.5581 20.1935 15.6491C20.1557 15.7402 20.1004 15.8229 20.0307 15.8925Z"
+                        fill="black"
+                    />
+                </svg>
+            );
+        case 'chevron-down':
+            return (
+                <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M20.0307 9.89237L12.5307 17.3924C12.461 17.4621 12.3783 17.5174 12.2873 17.5552C12.1962 17.5929 12.0986 17.6123 12.0001 17.6123C11.9015 17.6123 11.8039 17.5929 11.7128 17.5552C11.6218 17.5174 11.5391 17.4621 11.4694 17.3924L3.96943 9.89237C3.8287 9.75164 3.74963 9.56077 3.74963 9.36175C3.74963 9.16272 3.8287 8.97185 3.96943 8.83112C4.11016 8.69039 4.30103 8.61133 4.50005 8.61133C4.69907 8.61133 4.88995 8.69039 5.03068 8.83112L12.0001 15.8014L18.9694 8.83112C19.0391 8.76144 19.1218 8.70616 19.2129 8.66845C19.3039 8.63074 19.4015 8.61133 19.5001 8.61133C19.5986 8.61133 19.6962 8.63074 19.7872 8.66845C19.8783 8.70616 19.961 8.76144 20.0307 8.83112C20.1004 8.9008 20.1556 8.98353 20.1933 9.07457C20.2311 9.16562 20.2505 9.2632 20.2505 9.36175C20.2505 9.46029 20.2311 9.55787 20.1933 9.64892C20.1556 9.73996 20.1004 9.82269 20.0307 9.89237Z"
+                        fill="black"
+                    />
+                </svg>
+            );
         case 'warning':
             return (
                 <svg

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

@@ -1,6 +1,7 @@
 /** @jsx h */
 import { h } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
+import Icon from './Icon';
 
 const OfferAccordion = ({
     offer: { content, meta },
@@ -33,47 +34,65 @@ const OfferAccordion = ({
                 useV5Design === 'true' ? 'v5Design' : ''
             } ${use5Dot1Design ? 'v5Dot1Design' : ''} ${offerCountry || ''}`}
         >
-            <div className="accordion__row">
+            <div className="accordion__content">
+                <div className="accordion__row">
+                    <button
+                        className="accordion__header-container"
+                        type="button"
+                        onClick={() => {
+                            setActiveSelection(index);
+                            setOpen(open ? '' : 'open');
+                        }}
+                    >
+                        <div className="accordion__offer-field-header ">
+                            {currencySymbolFormat(termsLabel?.offerPayment)}
+                            {offerCountry === 'IT' || offerCountry === 'ES' ? '*' : ''}
+                        </div>
+                        <div className="accordion__offer-field-header">{termsLabel?.offerNumInstallments}</div>
+                    </button>
+                </div>
+                <div className="accordion__collapsible">
+                    <div className="accordion__row">
+                        <div className="accordion__offer-field-title">{termsLabel?.eMoney}</div>
+                        <div className="accordion__offer-field-value">
+                            {currencySymbolFormat(meta?.formattedTransactionAmount)}
+                        </div>
+                    </div>
+                    <div className="accordion__row">
+                        <div className="accordion__offer-field-title">{termsLabel?.totalInterest}</div>
+                        <div className="accordion__offer-field-value">
+                            {currencySymbolFormat(meta?.formattedTotalInterest)}
+                        </div>
+                    </div>
+                    <div className="accordion__row">
+                        <div className="accordion__offer-field-title">{termsLabel?.total}</div>
+                        <div className="accordion__offer-field-value">
+                            {currencySymbolFormat(meta?.formattedTotalCost)}
+                        </div>
+                    </div>
+                    <div className="accordion__row">
+                        <div
+                            className="accordion__offer-apr-disclaimer"
+                            // eslint-disable-next-line react/no-danger
+                            dangerouslySetInnerHTML={{ __html: aprDisclaimer }}
+                        />
+                    </div>
+                </div>
+            </div>
+            {(offerCountry === 'IT' || offerCountry === 'ES') && (
                 <button
-                    className="accordion__header-container"
+                    className="accordion__chevron-col"
                     type="button"
                     onClick={() => {
                         setActiveSelection(index);
                         setOpen(open ? '' : 'open');
                     }}
                 >
-                    <div className="accordion__offer-field-header ">
-                        {currencySymbolFormat(termsLabel?.offerPayment)}
-                        {offerCountry === 'IT' || offerCountry === 'ES' ? '*' : ''}
+                    <div className="accordion__chevron">
+                        <Icon name={`chevron-${open ? 'up' : 'down'}`} />
                     </div>
-                    <div className="accordion__offer-field-header">{termsLabel?.offerNumInstallments}</div>
                 </button>
-            </div>
-            <div className="accordion__collapsible">
-                <div className="accordion__row">
-                    <div className="accordion__offer-field-title">{termsLabel?.eMoney}</div>
-                    <div className="accordion__offer-field-value">
-                        {currencySymbolFormat(meta?.formattedTransactionAmount)}
-                    </div>
-                </div>
-                <div className="accordion__row">
-                    <div className="accordion__offer-field-title">{termsLabel?.totalInterest}</div>
-                    <div className="accordion__offer-field-value">
-                        {currencySymbolFormat(meta?.formattedTotalInterest)}
-                    </div>
-                </div>
-                <div className="accordion__row">
-                    <div className="accordion__offer-field-title">{termsLabel?.total}</div>
-                    <div className="accordion__offer-field-value">{currencySymbolFormat(meta?.formattedTotalCost)}</div>
-                </div>
-                <div className="accordion__row">
-                    <div
-                        className="accordion__offer-apr-disclaimer"
-                        // eslint-disable-next-line react/no-danger
-                        dangerouslySetInnerHTML={{ __html: aprDisclaimer }}
-                    />
-                </div>
-            </div>
+            )}
         </div>
     );
 };

src/components/modal/v2/styles/components/_offer-accordion.scss

@@ -47,8 +47,33 @@
                 outline: 3px solid #0070e0;
             }
         }
+         &.IT,
+        &.ES {
+            display: flex;
+
+            .accordion__content {
+                flex: 1;
+            }
+
+            .accordion__chevron-col {
+                display: flex;
+                align-items: flex-start;
+                padding: 25px 18px 22px 0;
+                justify-content: center;
+                background: none;
+                border: none;
+                cursor: pointer;
+            }
+
+            .accordion__chevron {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
     }
 
+
     &__header-container {
         font-family: $paypal-open;
         font-size: 18px;
@@ -69,6 +94,7 @@
             }
         }
     }
+
 
     &__collapsible {
         display: flex;

tests/functional/v2/testFn/longTerm.js

@@ -9,6 +9,7 @@ const {
             openAccordion,
             accordionHeaderContainer,
             accordionFieldHeader,
+            accordionContent,
             accordionCollapsible,
             accordionRow,
             accordionFieldValue
@@ -134,7 +135,7 @@ export const showCorrectOfferBreakdownAccordion = async (contentWindow, modalCon
     await contentWindow.waitForSelector(openAccordion);
 
     const offerValuesArr = await contentWindow.$$eval(
-        `${openAccordion} > ${accordionCollapsible} > ${accordionRow} > ${accordionFieldValue}`,
+        `${openAccordion} > ${accordionContent} > ${accordionCollapsible} > ${accordionRow} > ${accordionFieldValue}`,
         elements => Array.from(elements).map(element => element.innerText)
     );
 

tests/functional/v2/utils/selectors.js

@@ -67,6 +67,7 @@ export const selectors = {
             openAccordion: '.open',
             accordionHeaderContainer: '.accordion__header-container',
             accordionFieldHeader: '.accordion__offer-field-header',
+            accordionContent: '.accordion__content',
             accordionCollapsible: '.accordion__collapsible',
             accordionRow: '.accordion__row',
             accordionFieldValue: '.accordion__offer-field-value'