Update afterpay/clearpay to support FR and ES.

payments-ui-core/res/values/donottranslate.xml

@@ -14,12 +14,6 @@
     <string name="stripe_paymentsheet_payment_method_affirm">Affirm</string>
     <!--    <string name="paymentsheet_payment_method_item_card_number">····%1$s</string>-->
 
-    <!-- Message shown for Afterpay/Clearpay payments. Placeholder will be replaced with the installment amount,
-    and the Afterpay/Clearpay logo will be added at the end of the message, so the translation must make sense
-    when reading as: "Pay in 4 interest-free payments of $100 with <Afterpay> ⓘ"
-        This will not be translated initially as it must have specific values per language -->
-    <string name="afterpay_clearpay_message">Pay in 4 interest-free payments of %s with</string>
-
     <!--    &lt;!&ndash; Label indicating the payment intent is in testmode &ndash;&gt;-->
     <!--    <string name="stripe_paymentsheet_test_mode_indicator">TEST MODE</string>-->
 </resources>

payments-ui-core/res/values/strings.xml

@@ -38,6 +38,8 @@
   <string name="address_label_suburb">Suburb</string>
   <!-- Used to describe an address field. -->
   <string name="address_label_village_township">Village or Township</string>
+  <!-- This shows the message on Buy Now Pay Later LPM, afterpay.  After the word "with" an Afterpay logo is displayed.  can be moved to move the logo in the string. -->
+  <string name="afterpay_clearpay_message"><![CDATA[Pay in <num_installments/> interest-free payments of <installment_price/> with <img/>]]></string>
   <!-- Billing address section title for card form entry. -->
   <string name="billing_details">Billing address</string>
   <!-- Used when a required field is blank and submit is clicked. -->

payments-ui-core/src/main/java/com/stripe/android/ui/core/elements/AfterpayClearpayElementUI.kt

@@ -5,6 +5,8 @@ import android.net.Uri
 import androidx.annotation.RestrictTo
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.MaterialTheme
@@ -17,6 +19,8 @@ import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.PlaceholderVerticalAlign
+import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
@@ -31,6 +35,48 @@ import com.stripe.android.ui.core.shouldUseDarkDynamicColor
 fun AfterpayClearpayElementUI(
     enabled: Boolean,
     element: AfterpayClearpayHeaderElement
+) {
+    AfterpayClearpayElementUINew(enabled = enabled, element = element)
+    AfterpayClearpayElementUIOriginal(enabled = enabled, element = element)
+}
+
+@Composable
+@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
+fun AfterpayClearpayElementUINew(
+    enabled: Boolean,
+    element: AfterpayClearpayHeaderElement
+) {
+    val context = LocalContext.current
+    val messageFormatString = element.getLabel(context.resources)
+        .replace("<img/>", "<img src=\"afterpay\"/>")
+
+    Html(
+        html = messageFormatString,
+        enabled = false,
+        imageGetter = mapOf(
+            "afterpay" to EmbeddableImage(
+                R.drawable.stripe_ic_afterpay_clearpay_logo,
+                R.string.stripe_paymentsheet_payment_method_afterpay_clearpay,
+                colorFilter = if (MaterialTheme.colors.surface.shouldUseDarkDynamicColor()) {
+                    null
+                } else {
+                    ColorFilter.tint(Color.White)
+                }
+            )
+        ),
+        modifier = Modifier.padding(4.dp, 8.dp, 4.dp, 4.dp),
+        color = MaterialTheme.paymentsColors.subtitle,
+        style = MaterialTheme.typography.h6,
+        urlSpanStyle = SpanStyle(),
+        imageAlign = PlaceholderVerticalAlign.Bottom
+    )
+}
+
+@Composable
+@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
+fun AfterpayClearpayElementUIOriginal(
+    enabled: Boolean,
+    element: AfterpayClearpayHeaderElement
 ) {
     val context = LocalContext.current
 
@@ -39,10 +85,11 @@ fun AfterpayClearpayElementUI(
         crossAxisAlignment = FlowCrossAxisAlignment.Center
     ) {
         Text(
-            element.getLabel(context.resources),
+            element.getLabelOriginal(context.resources),
             Modifier
                 .padding(end = 4.dp),
-            color = MaterialTheme.paymentsColors.subtitle
+            color = MaterialTheme.paymentsColors.subtitle,
+            style = MaterialTheme.typography.h6,
         )
         Image(
             painter = painterResource(R.drawable.stripe_ic_afterpay_clearpay_logo),

payments-ui-core/src/main/java/com/stripe/android/ui/core/elements/AfterpayClearpayHeaderElement.kt

@@ -21,16 +21,51 @@ data class AfterpayClearpayHeaderElement(
 
     val infoUrl = url.format(Locale.current.region.lowercase())
 
-    fun getLabel(resources: Resources) =
-        resources.getString(
-            R.string.afterpay_clearpay_message,
-            CurrencyFormatter.format(
-                amount.value / 4,
-                amount.currencyCode
+
+    fun getLabelOriginal(resources: Resources): String {
+        val numInstallments = when (amount.currencyCode.lowercase()) {
+            "eur" -> 3
+            else -> 4
+        }
+
+        return resources.getString(
+            R.string.afterpay_clearpay_message
+        ).replace("<num_installments/>", numInstallments.toString())
+            .replace(
+                "<installment_price/>", CurrencyFormatter.format(
+                    amount.value / numInstallments,
+                    amount.currencyCode
+                )
+            )
+            .replace(
+                "<img/>",
+                ""
+            )
+    }
+
+    fun getLabel(resources: Resources): String {
+        val numInstallments = when (amount.currencyCode.lowercase()) {
+            "eur" -> 3
+            else -> 4
+        }
+        return resources.getString(
+            R.string.afterpay_clearpay_message
+        ).replace("<num_installments/>", numInstallments.toString())
+            .replace(
+                "<installment_price/>", CurrencyFormatter.format(
+                    amount.value / numInstallments,
+                    amount.currencyCode
+                )
             )
-        )
+            // The no break space will keep the afterpay logo and (i) on the same line.
+            .replace(
+                "<img/>",
+                "<img/>$NO_BREAK_SPACE<a href=\"$infoUrl\"><b>ⓘ</b></a>"
+            )
+    }
 
     companion object {
         const val url = "https://static-us.afterpay.com/javascript/modal/%s_rebrand_modal.html"
+        const val NO_BREAK_SPACE = "\u00A0"
     }
 }

payments-ui-core/src/main/java/com/stripe/android/ui/core/elements/Html.kt

@@ -48,7 +48,8 @@ private const val LINK_TAG = "URL"
 @RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
 data class EmbeddableImage(
     @DrawableRes val id: Int,
-    @StringRes val contentDescription: Int
+    @StringRes val contentDescription: Int,
+    val colorFilter: androidx.compose.ui.graphics.ColorFilter? = null
 )
 
 /**
@@ -64,7 +65,9 @@ fun Html(
     color: Color,
     style: TextStyle,
     modifier: Modifier = Modifier,
-    urlSpanStyle: SpanStyle = SpanStyle(textDecoration = TextDecoration.Underline)
+    enabled: Boolean = true,
+    urlSpanStyle: SpanStyle = SpanStyle(textDecoration = TextDecoration.Underline),
+    imageAlign: PlaceholderVerticalAlign = PlaceholderVerticalAlign.AboveBaseline
 ) {
     val inlineContentMap = imageGetter.entries.associate { (key, value) ->
         val painter = painterResource(value.id)
@@ -76,7 +79,7 @@ fun Html(
             Placeholder(
                 newWidth,
                 MaterialTheme.typography.body1.fontSize,
-                PlaceholderVerticalAlign.AboveBaseline
+                imageAlign
             ),
             children = {
                 Image(
@@ -86,7 +89,8 @@ fun Html(
                     painter = painter,
                     contentDescription = stringResource(
                         value.contentDescription
-                    )
+                    ),
+                    colorFilter = value.colorFilter
                 )
             }
         )
@@ -98,18 +102,21 @@ fun Html(
     ClickableText(
         annotatedText,
         modifier = modifier
-            .semantics(mergeDescendants = true) {}, // makes it a separate accessibile item,
+            .semantics(mergeDescendants = true) {}, // makes it a separate accessible item,
         inlineContent = inlineContentMap,
         color = color,
         style = style,
         onClick = {
-            annotatedText
-                .getStringAnnotations(LINK_TAG, it, it)
-                .firstOrNull()?.let { annotation ->
-                    val openURL = Intent(Intent.ACTION_VIEW)
-                    openURL.data = Uri.parse(annotation.item)
-                    context.startActivity(openURL)
-                }
+            if (enabled) {
+                //Position is the position of the tag in the string
+                annotatedText
+                    .getStringAnnotations(LINK_TAG, it, it)
+                    .firstOrNull()?.let { annotation ->
+                        val openURL = Intent(Intent.ACTION_VIEW)
+                        openURL.data = Uri.parse(annotation.item)
+                        context.startActivity(openURL)
+                    }
+            }
         }
     )
 }
@@ -217,8 +224,19 @@ private fun ClickableText(
     val layoutResult = remember { mutableStateOf<TextLayoutResult?>(null) }
     val pressIndicator = Modifier.pointerInput(onClick) {
         detectTapGestures { pos ->
+            var nonPlaceholderPosition = pos
+            // If the position is in the bounds of a placeholder set the position to the end of the placeholder.
+            layoutResult.value?.placeholderRects?.filterNotNull()?.firstOrNull {
+                pos.x > it.topLeft.x && pos.x < it.topRight.x
+            }?.let {
+                nonPlaceholderPosition = it.topRight.copy(
+                    x = it.topRight.x + 0.1f
+                )
+            }
+
             layoutResult.value?.let { layoutResult ->
-                onClick(layoutResult.getOffsetForPosition(pos))
+                // we need to account for offset and change to an index by subtracting 1.
+                onClick(layoutResult.getOffsetForPosition(nonPlaceholderPosition) - 1)
             }
         }
     }