Jon/fix/apple-branding-2

CHANGELOG.md

@@ -4,6 +4,10 @@
 
 - changed: Wording in light account persistent notification
 
+## 4.15.1
+
+- fixed: "Apple Pay" title per latest branding requirements
+
 ## 4.16.0
 
 - added: "Transaction Details" button to `SwapSuccessScene`

src/__tests__/__snapshots__/GuiPlugins.test.ts.snap

@@ -211,6 +211,7 @@ Settlement: 5 min - 24 hours",
   },
   {
     "cryptoCodes": [],
+    "customTitleKey": "applepay",
     "deepPath": "",
     "deepQuery": {},
     "description": "Fee: 5-7%
@@ -221,7 +222,7 @@ Settlement: 10 - 30 minutes",
       "credit",
     ],
     "pluginId": "creditcard",
-    "title": "Pay with Apple Pay",
+    "title": "",
   },
   {
     "cryptoCodes": [],

src/components/scenes/GuiPluginListScene.tsx

@@ -12,6 +12,7 @@ import { checkAndShowLightBackupModal } from '../../actions/BackupModalActions'
 import { checkAndSetRegion, showCountrySelectionModal } from '../../actions/CountryListActions'
 import { getDeviceSettings, writeDeveloperPluginUri } from '../../actions/DeviceSettingsActions'
 import { NestedDisableMap } from '../../actions/ExchangeInfoActions'
+import paymentTypeLogoApplePay from '../../assets/images/paymentTypes/paymentTypeLogoApplePay.png'
 import { FLAG_LOGO_URL } from '../../constants/CdnConstants'
 import { COUNTRY_CODES } from '../../constants/CountryConstants'
 import buyPluginJsonRaw from '../../constants/plugins/buyPluginList.json'
@@ -316,6 +317,30 @@ class GuiPluginList extends React.PureComponent<Props, State> {
     onPluginOpened()
   }
 
+  renderTitle = (guiPluginRow: GuiPluginRow) => {
+    const styles = getStyles(this.props.theme)
+    const { title, customTitleKey } = guiPluginRow
+
+    switch (customTitleKey) {
+      case 'applepay':
+        // Per Apple branding guidelines, "Pay With" is NOT to be translated.
+        return (
+          <View style={styles.titleAppleContainer}>
+            <EdgeText style={styles.titleText} numberOfLines={1}>
+              {'Pay with '}
+            </EdgeText>
+            <Image style={styles.titleAppleLogo} source={paymentTypeLogoApplePay} />
+          </View>
+        )
+      default:
+        return (
+          <EdgeText style={styles.titleText} numberOfLines={1}>
+            {title}
+          </EdgeText>
+        )
+    }
+  }
+
   renderPlugin = ({ item, index }: ListRenderItemInfo<GuiPluginRow>) => {
     const { theme } = this.props
     const { pluginId } = item
@@ -328,7 +353,6 @@ class GuiPluginList extends React.PureComponent<Props, State> {
     const partnerLogoThemeKey = pluginPartnerLogos[pluginId]
     const pluginPartnerLogo = partnerLogoThemeKey ? theme[partnerLogoThemeKey] : { uri: getPartnerIconUri(item.partnerIconPath ?? '') }
     const poweredBy = plugin.poweredBy ?? plugin.displayName
-
     return (
       <EdgeAnim enter={{ type: 'fadeInDown', distance: 30 * (index + 1) }} style={styles.hackContainer}>
         <EdgeCard
@@ -344,9 +368,7 @@ class GuiPluginList extends React.PureComponent<Props, State> {
           paddingRem={[1, 0.5, 1, 0.5]}
         >
           <View style={styles.cardContentContainer}>
-            <EdgeText style={styles.titleText} numberOfLines={1}>
-              {item.title}
-            </EdgeText>
+            {this.renderTitle(item)}
             {item.description === '' ? null : <EdgeText style={styles.subtitleText}>{item.description}</EdgeText>}
             {poweredBy != null && item.partnerIconPath != null ? (
               <>
@@ -529,6 +551,19 @@ const getStyles = cacheStyles((theme: Theme) => ({
   titleText: {
     fontFamily: theme.fontFaceMedium
   },
+  titleAppleContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-end',
+    flexShrink: 1
+  },
+  titleAppleLogo: {
+    height: theme.rem(1),
+    width: 'auto',
+    aspectRatio: 150 / 64,
+    resizeMode: 'contain',
+    marginBottom: 1
+  },
   subtitleText: {
     marginTop: theme.rem(0.25),
     fontSize: theme.rem(0.75),

src/constants/plugins/buyPluginList.json

@@ -319,7 +319,8 @@
     "paymentType": "applepay",
     "description": "Fee: 5-7%\nSettlement: 10 - 30 minutes",
     "paymentTypes": ["credit"],
-    "title": "Pay with Apple Pay",
+    "title": "",
+    "customTitleKey": "applepay",
     "forCountries": [
       "AD", "AE", "AF", "AG", "AI", "AL", "AM", "AO", "AQ", "AR",
       "AS", "AT", "AU", "AW", "AZ", "BA", "BB", "BD", "BE", "BF",

src/types/GuiPluginTypes.ts

@@ -78,6 +78,8 @@ export interface GuiPluginRow {
 
   title: string
   description: string
+  /** Overrides `title` with a defined React node definition */
+  customTitleKey?: string
   paymentType?: FiatPaymentType
   partnerIconPath?: string
   paymentTypeLogoKey?: string
@@ -105,6 +107,7 @@ const asGuiPluginJsonRow = asObject({
 
   // List display options:
   title: asOptional(asString),
+  customTitleKey: asOptional(asString),
   description: asOptional(asString),
   partnerIconPath: asOptional(asString),
   paymentTypeLogoKey: asOptional(asString),

src/util/GuiPluginTools.ts

@@ -62,6 +62,7 @@ export function filterGuiPluginJson(
     if (row.deepQuery != null) merged.deepQuery = { ...merged.deepQuery, ...row.deepQuery }
     if (row.paymentType != null) merged.paymentType = row.paymentType
     if (row.title != null) merged.title = row.title
+    if (row.customTitleKey != null) merged.customTitleKey = row.customTitleKey
     if (row.description != null) merged.description = row.description
     if (row.partnerIconPath != null) merged.partnerIconPath = row.partnerIconPath
     if (row.paymentTypeLogoKey != null) merged.paymentTypeLogoKey = row.paymentTypeLogoKey