Merge pull request #147 from afterpay/feature/modal-theme

Feature: modal theme and id

README.md

@@ -118,7 +118,7 @@ class ExampleActivity: Activity {
 
 ### Launching the Checkout (v2)
 
-Launch the Afterpay checkout v2 flow by starting the intent provided by the SDK for the given options. 
+Launch the Afterpay checkout v2 flow by starting the intent provided by the SDK for the given options.
 
 > When creating a checkout token, `popupOriginUrl` must be set to `https://static.afterpay.com`. The SDK’s example merchant server sets the parameter [here](https://github.com/afterpay/sdk-example-server/blob/master/src/routes/checkout.ts#L28). See the [API reference][express-checkout] for more details! Failing to do so will cause undefined behavior.
 
@@ -199,7 +199,7 @@ class ReceiptFragment : Fragment() {
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         // ...
-        
+
         view.findViewById<AfterpayWidgetView>(R.id.afterpay_widget)
             .init(token, ::onWidgetExternalLink, ::onWidgetUpdate, ::onWidgetError)
     }
@@ -338,6 +338,27 @@ afterpayBreakdown.introText = AfterpayIntroText.MAKE_TITLE
 
 Given the above, the price breakdown text will be rendered `Make 4 interest-free payments of $##.##`
 
+##### More Info Options
+Setting `moreInfoOptions` is optional and of type `AfterpayMoreInfoOptions`. This class has two constructors.
+The first takes a single parameter:
+- `modalId`: a `string` that is the filename of a modal hosted on Afterpay static.
+
+The second takes two parameters:
+- `modalTheme`: an enum of type `AfterpayModalTheme` with the following options: `MINT` (default) and `WHITE`.
+- `isCbtEnabled`: a `boolean` to indicate if the modal should show the Cross Border Trade details in the modal
+
+**Note**
+Not all combinations of Locales and CBT are available.
+
+```kotlin
+val afterpayBreakdown = view.findViewById<AfterpayPriceBreakdown>(R.id.afterpayPriceBreakdown)
+afterpayBreakdown.moreInfoOptions = AfterpayMoreInfoOptions(
+    modalTheme = AfterpayModalTheme.WHITE
+)
+```
+
+Given the above, when clicking the more info "link", the modal that opens will be white in the current locale as set in configuration.
+
 ## Security
 
 To limit the possibility of a man-in-the-middle attack during the checkout process, certificate pinning can be configured for the Afterpay portal. Please refer to the Android [Network Security Configuration][network-config] documentation for more information.

afterpay/src/main/kotlin/com/afterpay/android/view/AfterpayModalTheme.kt

@@ -0,0 +1,6 @@
+package com.afterpay.android.view
+
+enum class AfterpayModalTheme(val slug: String) {
+    MINT(""),
+    WHITE("-theme-white");
+}

afterpay/src/main/kotlin/com/afterpay/android/view/AfterpayMoreInfoOptions.kt

@@ -0,0 +1,47 @@
+package com.afterpay.android.view
+
+import com.afterpay.android.Afterpay
+
+class AfterpayMoreInfoOptions {
+    private var modalId: String? = null
+    private var modalTheme: AfterpayModalTheme = AfterpayModalTheme.MINT
+    private var isCbtEnabled: Boolean = false
+
+    /**
+     * Set up options for the more info link in AfterpayPriceBreakdown
+     *
+     * @param modalId the filename of a modal hosted on Afterpay static
+     */
+    constructor(modalId: String) {
+        this.modalId = modalId
+    }
+
+    /**
+     * Set up options for the more info link in AfterpayPriceBreakdown
+     *
+     * **Notes:**
+     * - Not all combinations of Locales and CBT are available.
+     *
+     * @param modalTheme the color theme used when displaying the modal
+     * @param isCbtEnabled whether to show the Cross Border Trade details in the modal
+     */
+    constructor(
+        modalTheme: AfterpayModalTheme = AfterpayModalTheme.MINT,
+        isCbtEnabled: Boolean = false
+    ) {
+        this.modalTheme = modalTheme
+        this.isCbtEnabled = isCbtEnabled
+    }
+
+    internal fun modalFile(): String {
+        modalId?.let {
+            return "$it.html"
+        }
+
+        val locale = "${Afterpay.locale.language}_${Afterpay.locale.country}"
+        val cbt = if (isCbtEnabled) "-cbt" else ""
+        val theme = modalTheme.slug
+
+        return "$locale$theme$cbt.html"
+    }
+}

afterpay/src/main/kotlin/com/afterpay/android/view/AfterpayPriceBreakdown.kt

@@ -64,6 +64,12 @@ class AfterpayPriceBreakdown @JvmOverloads constructor(
             updateText()
         }
 
+    var moreInfoOptions: AfterpayMoreInfoOptions = AfterpayMoreInfoOptions()
+        set(value) {
+            field = value
+            updateText()
+        }
+
     private val textView: TextView = TextView(context).apply {
         setTextColor(context.resolveColorAttr(android.R.attr.textColorPrimary))
         setLinkTextColor(context.resolveColorAttr(android.R.attr.textColorSecondary))
@@ -77,8 +83,7 @@ class AfterpayPriceBreakdown @JvmOverloads constructor(
     // The terms and conditions are tied to the configured locale on the configuration
     private val infoUrl: String
         get() {
-            val locale = "${Afterpay.locale.language}_${Afterpay.locale.country}"
-            return "https://static.afterpay.com/modal/$locale.html"
+            return "https://static.afterpay.com/modal/${moreInfoOptions.modalFile()}"
         }
 
     init {

example/src/main/kotlin/com/example/afterpay/shopping/ShoppingFragment.kt

@@ -17,6 +17,8 @@ import androidx.recyclerview.widget.LinearLayoutManager
 import androidx.recyclerview.widget.ListAdapter
 import androidx.recyclerview.widget.RecyclerView
 import com.afterpay.android.view.AfterpayIntroText
+import com.afterpay.android.view.AfterpayModalTheme
+import com.afterpay.android.view.AfterpayMoreInfoOptions
 import com.afterpay.android.view.AfterpayPriceBreakdown
 import com.example.afterpay.R
 import com.example.afterpay.data.Product
@@ -65,6 +67,9 @@ class ShoppingFragment : Fragment() {
         val afterpayBreakdown = view.findViewById<AfterpayPriceBreakdown>(R.id.shopping_afterpayPriceBreakdown)
         afterpayBreakdown.introText = AfterpayIntroText.PAY_IN
         afterpayBreakdown.showInterestFreeText = false
+        afterpayBreakdown.moreInfoOptions = AfterpayMoreInfoOptions(
+            modalTheme = AfterpayModalTheme.WHITE
+        )
 
         lifecycleScope.launchWhenCreated {
             viewModel.state.collectLatest { state ->