refactor: allow inline links in Pay in 30 modal and update legal disclosure (#1212)

Author: yeul

content/modals/DE/pay_in_1.json

@@ -28,10 +28,21 @@
         "instructions": [
             "Wählen Sie PayPal als Bezahlmethode aus und nutzen Sie die Option,<strong> 30 Tage später zu bezahlen.</strong>",
             "Schließen Sie Ihren Einkauf in wenigen Schritten ab.",
-            "Sie benötigen mehr als 30 Tage? Gegen eine Gebühr kann die Zahlung aufgeschoben werden."
+            "Sie benötigen mehr als 30 Tage? Optional kann eine Verlängerung der Zahlungsfrist um weitere 30 Tage oder alternativ um 54 Tage gegen Gebühr beantragt werden."
         ],
         "disclosure": [
-            "* Vorbehaltlich Kreditwürdigkeitsprüfung. Erhältlich für Einkäufe i.Hv. {formattedMinAmount} - {formattedMaxAmount}. Nutzungsvoraussetzung ist ein deutsches PayPal-Privatkonto mit einer verknüpften Debitkarte oder einem Bankkonto mit gültigem SEPA-Lastschriftmandat als Zahlungsquelle."
+            "Vorbehaltlich Kreditwürdigkeitsprüfung. Für Einkäufe zwischen {formattedMinAmount} - {formattedMaxAmount}. Es gelten die ",
+            [
+                "Bezahlung nach 30 Tagen Bedingungen.",
+                "https://www.paypalobjects.com/marketing/web24/de/ppe/Pay_in_30_Days_Terms_&_Conditions_July2024.pdf",
+                "Bedingungen für die Nutzung von Bezahlung nach 30 Tagen, öffnet in neuem Tab"
+            ],
+            " Nutzungsvoraussetzung ist ein deutsches PayPal-Privatkonto mit einer verknüpften Debitkarte oder einem Bankkonto mit gültigem SEPA-Lastschriftmandat als Zahlungsquelle. Optional kannst du beantragen, die Zahlungsfrist zusätzlich um weitere 30 Tage (auf insgesamt 60 Tage) oder alternativ um 54 Tage (auf insgesamt 84 Tage) gegen Gebühr zu verlängern. Die Höhe der Gebühr wird transparent vor Abschluss der Verlängerung im PayPal-Konto angezeigt. Für die Verlängerung gelten die ",
+            [
+                "Bedingungen für Mehr Zeit zum Bezahlen.",
+                "https://www.paypalobjects.com/marketing/web24/de/ppe/Mehr_Zeit_zum_Bezahlen_Besondere_Nutzungsbedingungen_072024_Marketing_Pages.pdf",
+                "Besondere Nutzungsbedingungen für die Nutzung von Mehr Zeit zum Bezahlen, öffnet in neuem Tab"
+            ]
         ],
         "navLinkPrefix": "Um Ihren Einkauf in monatlichen Raten zu zahlen,",
         "linkToProductList": "wählen Sie die PayPal Ratenzahlung."

content/modals/DE/pay_in_1_en.json

@@ -29,10 +29,22 @@
         "instructions": [
             "Choose PayPal at checkout to use <strong> Pay in 30 Days.</strong>",
             "Complete your purchase in a few quick steps.",
-            "Need more than 30 days? Postpone once for a fee."
+            "Need more than 30 days? Optionally, you can apply to extend the payment deadline for a fee by an additional 30 days or alternatively by 54 days."
         ],
         "disclosure": [
-            "* Subject to Credit Check. Available for purchases between {formattedMinAmount} - {formattedMaxAmount}. Eligible customers must have a German private PayPal account with a linked debit card or bank account with valid SEPA mandate as a funding instrument."
+            "Subject to credit check. For purchases between {formattedMinAmount} - {formattedMaxAmount}. ",
+            [
+                "Terms for Pay in 30 Days",
+                "https://www.paypalobjects.com/marketing/web24/de/ppe/Pay_in_30_Days_Terms_&_Conditions_July2024.pdf",
+                " Terms for Pay in 30 Days, opens new tab"
+            ],
+            " apply. Eligible customers must have a German PayPal account with a linked debit card or bank account with a valid SEPA mandate as a funding instrument. Optionally, you can apply to extend the payment deadline by an additional 30 days (to a total of 60 days) or alternatively by 54 days (to a total of 84 days) for a fee. The amount of the fee will be displayed transparently in your PayPal account before the extension is completed. For the extension, ",
+            [
+                " Bedingungen für Mehr Zeit zum Bezahlen",
+                "https://www.paypalobjects.com/marketing/web24/de/ppe/Mehr_Zeit_zum_Bezahlen_Besondere_Nutzungsbedingungen_072024_Marketing_Pages.pdf",
+                "Bedingungen für Mehr Zeit zum Bezahlen, opens new tab"
+            ],
+            " apply."
         ],
         "navLinkPrefix": "For monthly Pay Later Options,",
         "linkToProductList": "see PayPal Ratenzahlung."

src/components/modal/v2/parts/views/PayIn1/Content.jsx

@@ -3,6 +3,7 @@
 import { h, Fragment } from 'preact';
 import Instructions from '../../Instructions';
 import ProductListLink from '../../ProductListLink';
+import InlineLinks from '../../InlineLinks';
 import styles from './styles.scss';
 
 import { useServerData } from '../../../lib/providers';
@@ -43,7 +44,7 @@ export const PayIn1 = ({
                 </div>
             </div>
             <div className={`content__row disclosure ${useV5Design ? 'v5Design' : ''} ${country === 'DE' ? 'DE' : ''}`}>
-                <p> {currencyFormat(disclosure)} </p>
+                <InlineLinks text={currencyFormat(disclosure)} />
             </div>
             <div className="content__row productLink">
                 <div className="productLink__container">{renderProductListLink()}</div>