## PayPal Credit Messaging

#### iOS Spike
We have spiked out this work in the following public repo: https://github.com/jaxdesmarais/PayPalMessagingSpike

Notes:
- The `BT` prefix will be removed for class/enum names in PPCP
- PPCP will also be able to remove the `@objc` anotations
- All wrapper classes can be found in the directory `PayPalMessage`

#### Open Questions

- **BT/PPCP SDK questions:**
- Do we need to offer the partner parameters on PPCP (BT will not use them)
- The current entry point to generate the view is`PayPalMessageView.createView(request)`
- We can consider alternate names for both the `PayPalMessageView` class and `createView(_:)` method
- What do we want to call the module?

- **Credit Messaging SDK questions:**
- What format is the Buyer's country in? - 2 character code
- Timeline on being available for package managers? Status on open source?
- **Bugs**
- When `onError` is called, we expect no UI to be drawn. Currently for error cases, the Messaging SDK is drawing a transparent frame that is clickable and launches the messaging modal & web view. - working to resolve
- We can only use your client ID - do we need something to be enabled for merchants to use this or are there scopes that need to be added to all merchant accounts in sand/prod? - jax to sync with nathan on

- **Credit Messaging SDK concerns:**
- Accessibility / Platform standards
- Link hit area
- The `Link` UIAccessibilityTrait is usually for blue highlighted text to launch a web page.
- Unexpected to have static text launching a web page.
- Modal action
- Expect link to launch web page only (not a modal), and button to launch native UI/app navigation.
- *"Links open a URL in an external browser. This the important distinction between buttons. Only apply the trait of link when the users interaction with the control will take them out of your application and into Safari."*
- Accessibility blog [1](https://mobilea11y.com/blog/traits/) & [2](https://www.deque.com/blog/ios-traits/)
- Modal UI
- Prefer no modal at all for messaging component, only web view.
- Merchants will not want a foreign UI sheet that they have no control over the design of in their app.
- LE merchants use custom everything - buttons, colors, fonts, modals, etc

#### Proposed Interface

import UIKit
import BraintreeCore
import PayPalMessages // merchants will instead import our wrapper module here

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()

        let apiClient = BTAPIClient(authorization: "sandbox_9dbg82cq_dcpspy2brwdjr3qn")!
        let request = BTPayPalCreditMessageRequest()
        request.offerType = .payLaterLongTerm
        request.amount = 2.0
        request.logoType = .primary
        request.textAlignment = .center

        let payPalMessageView = BTPayPalCreditMessageView(apiClient: apiClient)
        payPalMessageView.delegate = self
        payPalMessageView.createView(request)

        payPalMessageView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(payPalMessageView)

        NSLayoutConstraint.activate([
            payPalMessageView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            payPalMessageView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            payPalMessageView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            payPalMessageView.heightAnchor.constraint(equalToConstant: 80)
        ])
    }
}

extension ViewController: BTPayPalCreditMessageDelegate {

    func didSelect(_ payPalCreditMessageView: BTPayPalCreditMessageView) {
        print("DELEGATE: didSelect/onClick fired")
    }
    
    func willApply(_ payPalCreditMessageView: BTPayPalCreditMessageView) {
        print("DELEGATE: willApply/onApply fired")
    }
    
    func willAppear(_ payPalCreditMessageView: BTPayPalCreditMessageView) {
        print("DELEGATE: willAppear/onLoading fired")
    }
    
    func didAppear(_ payPalCreditMessageView: BTPayPalCreditMessageView) {
        print("DELEGATE: didAppear/onSuccess fired")
    }
    
    func onError(_ payPalCreditMessageView: BTPayPalCreditMessageView, error: Error) {
        print("DELEGATE: onError fired with \(error.localizedDescription)")
    }
}

##### Configuration Request

import Foundation

@objcMembers public class BTPayPalCreditMessageRequest: NSObject {

    /// Price expressed in cents amount based on the current context (i.e. individual product price vs total cart price)
    public var amount: Double?

    /// Message screen location (e.g. product, cart, home)
    public var placement: BTPayPalCreditMessagePlacement = .none

    /// Preferred message offer to display
    public var offerType: BTPayPalCreditMessageOfferType = .none

    /// Consumer's country (Integrations must be approved by PayPal to use this option)
    public var buyerCountry: String?

    /// Logo type option for a PayPal Message
    /// Defaults to `.inline`
    public var logoType: BTPayPalCreditMessageLogoType = .inline

    /// Text alignment option for a PayPal Message
    /// Defaults to `.right`
    public var textAlignment: BTPayPalCreditMessageTextAlignment = .right

    /// Text and logo color option for a PayPal Message
    // Defaults to `.black`
    public var color: BTPayPalCreditMessageColor = .black

//    // PPCP ONLY IF NEEDED
//    /// PayPal encrypted merchant ID. For partner integrations only.
//    public var merchantID: String?
//
//    /// Partner BN Code / Attribution ID assigned to the account. For partner integrations only.
//    public var partnerAttributionID: String?

    init(
        amount: Double? = nil,
        placement: BTPayPalCreditMessagePlacement = .none,
        offerType: BTPayPalCreditMessageOfferType = .none,
        buyerCountry: String? = nil,
        logoType: BTPayPalCreditMessageLogoType = .inline,
        textAlignment: BTPayPalCreditMessageTextAlignment = .right,
        color: BTPayPalCreditMessageColor = .black
    ) {
        self.amount = amount
        self.placement = placement
        self.offerType = offerType
        self.buyerCountry = buyerCountry
        self.logoType = logoType
        self.textAlignment = textAlignment
        self.color = color
    }
}