refactor: ppcc modal edits

content/modals/US/v2_ppc_ni.json

@@ -23,33 +23,55 @@
         }
     },
     "content": {
-        "headline": "Pay over time <br />with PayPal Credit",
-        "subheadline": "Shop online with a reusable credit line.",
+        "headline": "Tap into special financing with the PayPal Credit Card",
         "instructions": [
-            "Apply now and get a decision in seconds.",
-            "Check out with PayPal and choose <strong>PayPal Credit</strong>.",
-            "No Interest if paid in full in 6 months on purchases of {formattedMinAmount}+"
+            "Apply now and get a decision in seconds. <br>No impact to credit score if declined.<sup>1</sup>",
+            "Check out with PayPal and choose your <strong>PayPal Credit</strong> account.",
+            "Special financing on PayPal purchases of {formattedMinAmount} or more."
         ],
         "terms": [
-            "Interest will be charged to your account from the purchase date if the balance is not paid in full within 6 months.",
-            "A minimum monthly payment is required and may or may not pay off the promotional purchase by the end of the 6 month period.",
-            "No interest will be charged on the purchase if you pay it off in full within 6 months. If you do not, interest will be charged on the purchase from the purchase date at the Purchase APR applicable to your account.",
-            "For New Accounts: Variable Purchase and Cash APR is {aprEntry.apr}%. Variable Penalty APR is 35.99%. The APRs are accurate as of {aprEntry.formattedDate} and will vary with the market based on the Prime Rate (as defined in your credit card agreement). Minimum Interest charge is $2.00.",
-            "Individual items that are less than {formattedMinAmount} qualify for special financing when combined for a total of {formattedMinAmount} or more in a single transaction.",
-            "Multiple separate transactions of less than {formattedMinAmount} per transaction cannot be combined to meet the minimum purchase amount."
+            "If approved, you'll get either a PayPal Credit Mastercard<sup>\u00AE</sup>, or PayPal Credit, a digital credit line for PayPal purchases.",
+            "Special financing for PayPal Credit Card and PayPal Credit: No interest if paid in full in 6 months on PayPal purchases of {formattedMinAmount} or more.",
+            [
+                "Interest will be charged to your account from the purchase date at the APR applicable to your account if the balance is not paid in full within 6 months."
+            ],
+            [
+                "A minimum monthly payment is required, which may not pay off the purchase by the end of the 6 month period."
+            ],
+            [
+                "Individual items less than {formattedMinAmount} qualify for special financing when combined for a total of {formattedMinAmount} or more in a single transaction. However, separate transactions cannot be combined to meet the minimum purchase amount."
+            ],
+            "All PayPal Credit Card and PayPal Credit purchases",
+            [
+                [
+                    "New Accounts as of 3/1/2025: Variable Purchase and Cash APR 30.39%. Variable Penalty APR 34.99%. APRs will vary with the market based on the Prime Rate. Min interest charge $2. PayPal Credit Mastercard: Cash Advance Fee 5% ($10 min). Foreign Trans Fee 3%. For current APRs, see account",
+                    [
+                        "Terms and Conditions",
+                        "https://www.synchronycredit.com/syfterms/html/PayPalCreditApplyTerms_combo.html",
+                        "."
+                    ]
+                ]
+            ],
+            [
+                "For standard purchases, if you pay your balance in full each month by the payment due date, you can avoid paying interest. you can also make minimum monthly payments, or any additional amount of your choosing, until you've paid off your balance according to your standard account terms, but interest charges may apply."
+            ],
+            [
+                "If you do not pay the required minimum monthly payment by the payment due date, you will be charged a late fee."
+            ]
         ],
         "buttonText": "Apply Now",
         "disclaimer": "Subject to credit approval",
-
         "footer": [
             [
-                "View the PayPal Credit",
-                ["Terms and Conditions.", "https://www.paypalobjects.com/marketing/web/us/en/ppcterms/ppcterms.html"]
+                "<sup>1</sup>An approved application will result in a hard credit inquiry, which may impact your credit score."
+            ],
+            [
+                "The PayPal Credit Card and PayPal Credit digital line are issued by Synchrony Bank. The PayPal Credit Card is issued pursuant to a license by Mastercard International Incorporated. Mastercard and the circles design are registered trademarks of Mastercard International Incorporated."
             ],
             [
-                "PayPal Credit is subject to credit approval as determined by the lender, Synchrony Bank, and is available to U.S. customers who are of legal age in their state of residence. You must pay with PayPal Credit to get the offers. Offers not valid on previous purchases, returns or exchanges. Minimum purchase required is before shipping and tax. For New Accounts: Variable Purchase and Cash APR is {aprEntry.apr}%. Variable Penalty APR is 35.99%. The APRs are accurate as of {aprEntry.formattedDate} and will vary with the market based on the Prime Rate (as defined in your credit card agreement). Minimum Interest charge is $2.00."
+                "Applications are subject to credit approval. You must be of legal age and reside in the US or its territories to apply."
             ],
-            ["Copyright {fullYear} Bill Me Later, Inc. All rights reserved."]
+            ["Copyright {fullYear} PayPal, Inc. All rights reserved."]
         ],
         "linkToProductList": "See other ways to pay over time"
     }

content/modals/US/v2_product_list.json

@@ -7,10 +7,10 @@
     },
     "content": {
         "headline": "<span aria-hidden='true'>Buy now, <br />pay over time</span><span class='sr-only'>Buy now, pay over time</span>",
-        "disclosure": "Terms apply for each option. Offer availability may depend on consumer & merchant eligibility.",
+        "disclosure": "Terms apply for each option. Offer availability may depend on consumer and merchant eligibility.",
         "instructions": {
             "payLater": "Get more info on Pay Later options.",
-            "credit": "Or shop with a reusable credit line."
+            "credit": "Shop with a reusable credit line."
         },
         "productTiles": {
             "payLater": [
@@ -27,8 +27,8 @@
             ],
             "credit": [
                 {
-                    "header": "PayPal Credit",
-                    "body": "No Interest if paid in full in 6 months for purchases of $149+.",
+                    "header": "PayPal Credit Card",
+                    "body": "No Interest if paid in full in 6 months on PayPal purchases of more than $149.",
                     "viewName": "PAYPAL_CREDIT_NO_INTEREST"
                 }
             ]

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

@@ -9,7 +9,7 @@ import styles from './styles.scss';
 import { useServerData, useApplyNow } from '../../../lib';
 
 export const NoInterest = ({
-    content: { instructions, terms, buttonText, disclaimer, footer, linkToProductList },
+    content: { headline, instructions, terms, buttonText, disclaimer, footer, linkToProductList },
     openProductList,
     use5Dot1Design
 }) => {
@@ -43,26 +43,54 @@ export const NoInterest = ({
                     </div>
                 </div>
             </div>
-            <div className="content__footer">
-                <div className="content__row terms">
-                    {terms.map(item => (
-                        <p className={`terms-item ${use5Dot1Design ? 'v5Dot1Design' : ''}`}>
-                            <span className={`terms-bullet ${use5Dot1Design ? 'v5Dot1Design' : ''}`} />
-                            <span className="terms-content">{item}</span>
-                        </p>
-                    ))}
+            {/* TODO - remove conditional, keep PPCC content structure, remove old PPC content structure after PPCC launch 7/14/2025 */}
+            {headline.includes('PayPal Credit Card') ? (
+                <div className="content__footer">
+                    <div className="content__row terms">
+                        {terms.map(item => (
+                            <p className={`terms-item ppcc ${use5Dot1Design ? 'v5Dot1Design' : ''}`}>
+                                {Array.isArray(item) && (
+                                    <span className={`terms-bullet ${use5Dot1Design ? 'v5Dot1Design' : ''}`} />
+                                )}
+                                <span className="terms-content">
+                                    {Array.isArray(item) ? (
+                                        item.map(subItem => <InlineLinks text={subItem} />)
+                                    ) : (
+                                        <InlineLinks text={item} />
+                                    )}
+                                </span>
+                            </p>
+                        ))}
+                    </div>
+                    <div className="content__row terms">
+                        {footer.map(lineContent => (
+                            <p className={`content__footer-item ${use5Dot1Design ? 'v5Dot1Design' : ''}`}>
+                                <InlineLinks text={lineContent} />
+                            </p>
+                        ))}
+                        {renderProductListLinkItem()}
+                    </div>
                 </div>
-                <div className="terms">
-                    {footer.map(lineContent => {
-                        return (
+            ) : (
+                <div className="content__footer">
+                    <div className="content__row terms">
+                        {terms.map(item => (
+                            <p className={`terms-item ${use5Dot1Design ? 'v5Dot1Design' : ''}`}>
+                                <span className={`terms-bullet ${use5Dot1Design ? 'v5Dot1Design' : ''}`} />
+                                <span className="terms-content">{item}</span>
+                            </p>
+                        ))}
+                    </div>
+                    <div className="terms">
+                        {footer.map(lineContent => (
                             <p className={`content__footer-item  ${use5Dot1Design ? 'v5Dot1Design' : ''}`}>
                                 <InlineLinks text={lineContent} />
                             </p>
-                        );
-                    })}
-                    {renderProductListLinkItem()}
+                        ))}
+                        {renderProductListLinkItem()}
+                    </div>
                 </div>
-            </div>
+            )}
             <div className="content__row dynamic no-interest">
                 <div className="button__fixed-wrapper">
                     <div className="button__container">

src/components/modal/v2/parts/views/NoInterest/styles.scss

@@ -129,10 +129,6 @@
                     color: $v5-gray;
                 }
 
-                @include desktop {
-                    margin-bottom: 10px;
-                }
-
                 @include mobile {
                     margin-bottom: 10px;
                 }
@@ -142,6 +138,20 @@
                         margin-bottom: 15px;
                     }
                 }
+
+                &.ppcc {
+                    @include desktop {
+                        margin-left: 17px;
+                        margin-bottom: 10px;
+                    }
+                    @include tablet {
+                        margin-left: 17px;
+                    }
+                    @include mobile {
+                        margin-left: 10px;
+                        margin-right: 10px;
+                    }
+                }
             }
 
             &-bullet {
@@ -165,6 +175,9 @@
                     color: $v5-gray;
                 }
             }
+            // &-content {
+
+            // }
         }
 
         &-item {

tests/functional/v2/utils/selectors.js

@@ -46,7 +46,7 @@ export const selectors = {
     noInterest: {
         // Apply Now button selectors unique to PPC NI view
         button: {
-            termsLink: '.content__footer-item > a',
+            termsLink: '.terms-content > a',
             applyNowBtn: '.button'
         }
     },

tests/playwright/util/selectors.js

@@ -46,7 +46,7 @@ export const selectors = {
     noInterest: {
         // Apply Now button selectors unique to PPC NI view
         button: {
-            termsLink: '.content__footer-item > a',
+            termsLink: '.terms-content > a',
             applyNowBtn: '.button'
         }
     },