refactor: add 0% TAEG to IT Pi3 messages and modals (#929)

* update IT content * update * update * update local content * update test selectors * test workflow * undo test
paypal · May 10, 2023 · 81abc19 · 81abc19
1 parent 784c773
commit 81abc19
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 38 deletions.
diff --git a/content/messages/IT/short_term_nq.json b/content/messages/IT/short_term_nq.json
@@ -22,5 +22,8 @@
         ]
     ],
     "subHeadline": [],
-    "disclaimer": [["Scopri di più", ["default"]]]
+    "disclaimer": [
+        [["TAEG 0%."], ["xsmall"]],
+        ["Scopri di più", ["default"]]
+    ]
 }
diff --git a/content/messages/IT/short_term_q.json b/content/messages/IT/short_term_q.json
@@ -22,5 +22,8 @@
 
     "subHeadline": [],
 
-    "disclaimer": [["Scopri di più", ["default"]]]
+    "disclaimer": [
+        [["TAEG 0%."], ["xsmall"]],
+        ["Scopri di più", ["default"]]
+    ]
 }
diff --git a/content/modals/IT/short_term.json b/content/modals/IT/short_term.json
@@ -45,13 +45,13 @@
         ],
         "disclosure": [
             [
-                "Disponibile solo su acquisti idonei da {formattedMinAmount} a {formattedMaxAmount}. L’idoneità di Paga in 3 rate è soggetta ad approvazione. Consulta il"
+                "Disponibile solo su acquisti idonei da {formattedMinAmount} a {formattedMaxAmount}. Devi essere residente in Italia e avere un conto PayPal. <strong>TAEG 0%</strong>. L’idoneità di Paga in 3 rate è soggetta ad approvazione. Consulta il"
             ],
             ["foglio informativo", "https://www.paypal.com/it/webapps/mpp/ua/pay-in-3-infosheet-full?locale.x=it_IT"],
             ["e i"],
             ["termini e le condizioni", "https://www.paypal.com/it/webapps/mpp/ua/pay-in-3-full?locale.x=it_IT"],
             [
-                "per maggiori informazioni. Finanziamento con acconto richiesto. Disponibile solo per clienti persone fisiche residenti in Italia. Finanziamento di due mesi. Hai un periodo di 14 giorni per recedere dal tuo finanziamento. Il creditore è PayPal (Europe) S.à rl et Cie, SCA, 22-24 Boulevard Royal, L-2449 Lussemburgo. Un finanziamento è un impegno vincolante che deve essere rimborsato e può influenzare il tuo merito creditizio. Assicurati di essere in grado di ripagare prima di prendere un impegno."
+                "per maggiori informazioni. Disponibile solo per clienti persone fisiche maggiorenni. Hai un periodo di 14 giorni per recedere dal tuo finanziamento. Il creditore è PayPal (Europe) S.à rl et Cie, SCA, 22-24 Boulevard Royal, L-2449 Lussemburgo. Un finanziamento è un impegno vincolante che deve essere rimborsato e può influenzare il tuo merito creditizio. Assicurati di essere in grado di ripagare prima di prendere un impegno. Queste informazioni sono fornite da PayPal."
             ]
         ]
     }

diff --git a/src/server/locale/IT/mutations/short_term_nq.js b/src/server/locale/IT/mutations/short_term_nq.js
@@ -42,7 +42,7 @@ export default {
                         tag: 'medium'
                     }
                 ],
-                disclaimer: ['default'],
+                disclaimer: ['xsmall', 'default'],
                 styles: []
             }
         ],
@@ -66,7 +66,7 @@ export default {
             'default',
             ({ textSize }) => ({
                 styles: [
-                    textWrap(textSize * 40.5, textSize, 'IT'),
+                    textWrap(textSize * 48.5, textSize, 'IT'),
                     xSmallFallback(textSize * 23),
                     messageLogoWidth(false, textSize * 4, textSize * 1.25),
                     setLogoTop(textSize * 20)
@@ -79,33 +79,33 @@ export default {
                     },
                     { tag: 'xsmall' }
                 ],
-                disclaimer: ['default']
+                disclaimer: ['xsmall', 'default']
             })
         ],
         [
             'logo.type:primary && logo.position:right',
             ({ textSize }) => ({
                 styles: [
                     xSmallFallback(textSize * 17.4),
-                    setLogoTop(textSize * 41.5),
+                    setLogoTop(textSize * 49),
                     messageLogoWidth(textSize * 6, textSize * 4, textSize * 1.25)
                 ]
             })
         ],
         [
             'logo.type:primary && logo.position:top',
             ({ textSize }) => ({
-                styles: [xSmallFallback(textSize * 17.4), messageLogoWidth(textSize * 6, textSize * 4, textSize * 1.25)]
+                styles: [xSmallFallback(textSize * 21), messageLogoWidth(textSize * 6, textSize * 4, textSize * 1.25)]
             })
         ],
         [
             'logo.type:alternative',
             ({ textSize }) => ({
                 styles: [
-                    `@media screen and (max-width: ${textSize * 10.6}px) { .message__content { white-space: nowrap; }}`,
-                    textWrap(textSize * 36.5, textSize, 'IT'),
+                    `@media screen and (max-width: ${textSize * 14}px) { .message__content { white-space: nowrap; }}`,
+                    textWrap(textSize * 44, textSize, 'IT'),
                     xSmallFallback(textSize * 19),
-                    altNoWrap(textSize * 10.6),
+                    altNoWrap(textSize * 14),
                     messageLogoWidth(textSize * 1.75, textSize * 4, textSize * 1.25)
                 ],
                 logo: Logo.PP_PAYPAL.COLOR[0]
@@ -114,7 +114,7 @@ export default {
         [
             'logo.type:none',
             ({ textSize }) => ({
-                styles: [xSmallFallback(textSize * 22)],
+                styles: [xSmallFallback(textSize * 24)],
                 logo: false,
                 headline: [
                     {
@@ -136,7 +136,7 @@ export default {
         [
             'logo.type:inline',
             ({ textSize }) => ({
-                styles: [xSmallFallback(textSize * 22), `.message__logo { width: ${textSize * 4}px }`],
+                styles: [xSmallFallback(textSize * 24), `.message__logo { width: ${textSize * 4}px }`],
                 logo: Logo.NO_PP_MONOGRAM.COLOR,
                 headline: [
                     {

diff --git a/src/server/locale/IT/mutations/short_term_q.js b/src/server/locale/IT/mutations/short_term_q.js
@@ -43,7 +43,7 @@ export default {
                         tag: 'medium'
                     }
                 ],
-                disclaimer: ['default'],
+                disclaimer: ['xsmall', 'default'],
                 styles: []
             }
         ],
@@ -67,7 +67,7 @@ export default {
             'default',
             ({ textSize }) => ({
                 styles: [
-                    textWrap(textSize * 32, textSize, 'IT'),
+                    textWrap(textSize * 37, textSize, 'IT'),
                     xSmallFallback(textSize * 18),
                     messageLogoWidth(false, textSize * 4, textSize * 1.25),
                     setLogoTop(textSize * 16),
@@ -82,7 +82,7 @@ export default {
                     },
                     { tag: 'xsmall' }
                 ],
-                disclaimer: ['default']
+                disclaimer: ['xsmall', 'default']
             })
         ],
         [
@@ -92,7 +92,7 @@ export default {
                     `@media screen and (max-width: ${textSize *
                         18.5}px) { .message__headline > .tag--medium > span > span:first-child { white-space: normal; } }`,
                     xSmallFallback(textSize * 16),
-                    setLogoTop(textSize * 32),
+                    setLogoTop(textSize * 37),
                     messageLogoWidth(textSize * 6, textSize * 4, textSize * 1.25),
                     addPeriod()
                 ]
@@ -114,10 +114,10 @@ export default {
             'logo.type:alternative',
             ({ textSize }) => ({
                 styles: [
-                    `@media screen and (max-width: ${textSize * 10.6}px) { .message__content { white-space: nowrap; }}`,
-                    textWrap(textSize * 32, textSize, 'IT'),
+                    `@media screen and (max-width: ${textSize * 14}px) { .message__content { white-space: nowrap; }}`,
+                    textWrap(textSize * 33.5, textSize, 'IT'),
                     xSmallFallback(textSize * 14),
-                    altNoWrap(textSize * 10.6),
+                    altNoWrap(textSize * 14),
                     messageLogoWidth(textSize * 1.75, textSize * 4, textSize * 1.25),
                     addPeriod()
                 ],
@@ -135,7 +135,7 @@ export default {
         [
             'logo.type:none',
             ({ textSize }) => ({
-                styles: [xSmallFallback(textSize * 18)],
+                styles: [xSmallFallback(textSize * 19)],
                 logo: false,
                 headline: [
                     {
@@ -153,7 +153,7 @@ export default {
         [
             'logo.type:inline',
             ({ textSize }) => ({
-                styles: [xSmallFallback(textSize * 18), `.message__logo { width: ${textSize * 4}px }`],
+                styles: [xSmallFallback(textSize * 19), `.message__logo { width: ${textSize * 4}px }`],
                 logo: Logo.NO_PP_MONOGRAM.COLOR,
                 headline: [
                     {

diff --git a/src/server/locale/IT/styles/flex/base.css b/src/server/locale/IT/styles/flex/base.css
@@ -23,11 +23,6 @@
     white-space: nowrap;
 }
 
-.message__disclaimer > span > span:only-child,
-.message__disclaimer > span > span.em {
-    text-decoration: underline;
-}
-
 .message__logo:nth-of-type(1) {
     width: 27px;
     display: inline-block;

diff --git a/tests/functional/v2/testFn/multi.js b/tests/functional/v2/testFn/multi.js
@@ -7,7 +7,7 @@ const {
         contentWrapper,
         headerContent,
         h2,
-        h3,
+        subheadlineContent,
         button: { close, productList }
     },
     productList: { tile },
@@ -73,8 +73,8 @@ export const viewsShareAmount = async (contentWindow, testName) => {
     await contentWindow.click(`${tile}:nth-child(2)`);
     await page.waitFor(2 * 1000);
 
-    await contentWindow.waitForSelector(`${headerContent} > ${h3}`);
-    const subheadline = await contentWindow.$eval(h3, element => element.innerText);
+    await contentWindow.waitForSelector(`${headerContent} > ${subheadlineContent}`);
+    const subheadline = await contentWindow.$eval(subheadlineContent, element => element.innerText);
 
     await contentWindow.waitForSelector(productList);
     await contentWindow.click(productList);

diff --git a/tests/functional/v2/testFn/payIn1.js b/tests/functional/v2/testFn/payIn1.js
@@ -1,16 +1,16 @@
 import { selectors, modalSnapshot } from '../utils/index';
 
 const {
-    modal: { contentWrapper, headerContent, h3 }
+    modal: { contentWrapper, headerContent, subheadlineContent }
 } = selectors;
 
 /**
  * Ensures pay in 1 view opens and has expected content.
  */
 export const openPayIn1View = async (contentWindow, modalContent, testName) => {
     await contentWindow.waitForSelector(contentWrapper);
-    await contentWindow.waitForSelector(`${headerContent} > ${h3}`);
-    const subheadline = await contentWindow.$eval(h3, element => element.innerText);
+    await contentWindow.waitForSelector(`${headerContent} > ${subheadlineContent}`);
+    const subheadline = await contentWindow.$eval(subheadlineContent, element => element.innerText);
 
     expect(subheadline).toContain(modalContent.subheadline);
     await modalSnapshot(testName, contentWindow);

diff --git a/tests/functional/v2/testFn/shortTerm.js b/tests/functional/v2/testFn/shortTerm.js
@@ -1,7 +1,7 @@
 import { selectors, modalSnapshot } from '../utils/index';
 
 const {
-    modal: { contentWrapper, contentRow, headerContent, h3 },
+    modal: { contentWrapper, contentRow, headerContent, subheadlineContent },
     shortTerm: {
         donuts: { periodicPayment }
     }
@@ -12,8 +12,8 @@ const {
  */
 export const openShortTermView = async (contentWindow, modalContent, testName) => {
     await contentWindow.waitForSelector(contentWrapper);
-    await contentWindow.waitForSelector(`${headerContent} > ${h3}`);
-    const subheadline = await contentWindow.$eval(h3, element => element.innerText);
+    await contentWindow.waitForSelector(`${headerContent} > ${subheadlineContent}`);
+    const subheadline = await contentWindow.$eval(subheadlineContent, element => element.innerText);
 
     expect(subheadline).toContain(modalContent.subheadline);
     await modalSnapshot(testName, contentWindow);

diff --git a/tests/functional/v2/utils/selectors.js b/tests/functional/v2/utils/selectors.js
@@ -15,7 +15,7 @@ export const selectors = {
         // headerContainer: '.header__container',
         headerContent: '.header__content',
         h2: 'h2',
-        h3: 'h3',
+        subheadlineContent: '.subheadline_p',
 
         // Body content selectors
         contentWrapper: '.content__wrapper',