Commit 8b06619
Jon Tzeng
Add custom title renderer for Apple Pay
1 parent a223883 commit 8b06619
4 files changed
Lines changed: 47 additions & 6 deletions
File tree
- src
- __tests__/__snapshots__
- components/scenes
- constants/plugins
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -4,6 +4,10 @@ | |||
| 4 | 4 | ||
| 5 | 5 | - changed: Wording in light account persistent notification | |
| 6 | 6 | ||
| 7 | + ## 4.15.1 | ||
| 8 | + | ||
| 9 | + - fixed: "Apple Pay" title per latest branding requirements | ||
| 10 | + | ||
| 7 | 11 | ## 4.16.0 | |
| 8 | 12 | ||
| 9 | 13 | - added: "Transaction Details" button to `SwapSuccessScene` | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -211,6 +211,7 @@ Settlement: 5 min - 24 hours", | |||
| 211 | 211 | }, | |
| 212 | 212 | { | |
| 213 | 213 | "cryptoCodes": [], | |
| 214 | + "customTitleKey": "applepay", | ||
| 214 | 215 | "deepPath": "", | |
| 215 | 216 | "deepQuery": {}, | |
| 216 | 217 | "description": "Fee: 5-7% | |
@@ -221,7 +222,7 @@ Settlement: 10 - 30 minutes", | |||
| 221 | 222 | "credit", | |
| 222 | 223 | ], | |
| 223 | 224 | "pluginId": "creditcard", | |
| 224 | - "title": "Pay with Apple Pay", | ||
| 225 | + "title": "", | ||
| 225 | 226 | }, | |
| 226 | 227 | { | |
| 227 | 228 | "cryptoCodes": [], | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -12,6 +12,7 @@ import { checkAndShowLightBackupModal } from '../../actions/BackupModalActions' | |||
| 12 | 12 | import { checkAndSetRegion, showCountrySelectionModal } from '../../actions/CountryListActions' | |
| 13 | 13 | import { getDeviceSettings, writeDeveloperPluginUri } from '../../actions/DeviceSettingsActions' | |
| 14 | 14 | import { NestedDisableMap } from '../../actions/ExchangeInfoActions' | |
| 15 | + import paymentTypeLogoApplePay from '../../assets/images/paymentTypes/paymentTypeLogoApplePay.png' | ||
| 15 | 16 | import { FLAG_LOGO_URL } from '../../constants/CdnConstants' | |
| 16 | 17 | import { COUNTRY_CODES } from '../../constants/CountryConstants' | |
| 17 | 18 | import buyPluginJsonRaw from '../../constants/plugins/buyPluginList.json' | |
@@ -316,6 +317,30 @@ class GuiPluginList extends React.PureComponent<Props, State> { | |||
| 316 | 317 | onPluginOpened() | |
| 317 | 318 | } | |
| 318 | 319 | ||
| 320 | + renderTitle = (guiPluginRow: GuiPluginRow) => { | ||
| 321 | + const styles = getStyles(this.props.theme) | ||
| 322 | + const { title, customTitleKey } = guiPluginRow | ||
| 323 | + | ||
| 324 | + switch (customTitleKey) { | ||
| 325 | + case 'applepay': | ||
| 326 | + // Per Apple branding guidelines, "Pay With" is NOT to be translated. | ||
| 327 | + return ( | ||
| 328 | + <View style={styles.titleAppleContainer}> | ||
| 329 | + <EdgeText style={styles.titleText} numberOfLines={1}> | ||
| 330 | + {'Pay with '} | ||
| 331 | + </EdgeText> | ||
| 332 | + <Image style={styles.titleAppleLogo} source={paymentTypeLogoApplePay} /> | ||
| 333 | + </View> | ||
| 334 | + ) | ||
| 335 | + default: | ||
| 336 | + return ( | ||
| 337 | + <EdgeText style={styles.titleText} numberOfLines={1}> | ||
| 338 | + {title} | ||
| 339 | + </EdgeText> | ||
| 340 | + ) | ||
| 341 | + } | ||
| 342 | + } | ||
| 343 | + | ||
| 319 | 344 | renderPlugin = ({ item, index }: ListRenderItemInfo<GuiPluginRow>) => { | |
| 320 | 345 | const { theme } = this.props | |
| 321 | 346 | const { pluginId } = item | |
@@ -328,7 +353,6 @@ class GuiPluginList extends React.PureComponent<Props, State> { | |||
| 328 | 353 | const partnerLogoThemeKey = pluginPartnerLogos[pluginId] | |
| 329 | 354 | const pluginPartnerLogo = partnerLogoThemeKey ? theme[partnerLogoThemeKey] : { uri: getPartnerIconUri(item.partnerIconPath ?? '') } | |
| 330 | 355 | const poweredBy = plugin.poweredBy ?? plugin.displayName | |
| 331 | - | ||
| 332 | 356 | return ( | |
| 333 | 357 | <EdgeAnim enter={{ type: 'fadeInDown', distance: 30 * (index + 1) }} style={styles.hackContainer}> | |
| 334 | 358 | <EdgeCard | |
@@ -344,9 +368,7 @@ class GuiPluginList extends React.PureComponent<Props, State> { | |||
| 344 | 368 | paddingRem={[1, 0.5, 1, 0.5]} | |
| 345 | 369 | > | |
| 346 | 370 | <View style={styles.cardContentContainer}> | |
| 347 | - <EdgeText style={styles.titleText} numberOfLines={1}> | ||
| 348 | - {item.title} | ||
| 349 | - </EdgeText> | ||
| 371 | + {this.renderTitle(item)} | ||
| 350 | 372 | {item.description === '' ? null : <EdgeText style={styles.subtitleText}>{item.description}</EdgeText>} | |
| 351 | 373 | {poweredBy != null && item.partnerIconPath != null ? ( | |
| 352 | 374 | <> | |
@@ -529,6 +551,19 @@ const getStyles = cacheStyles((theme: Theme) => ({ | |||
| 529 | 551 | titleText: { | |
| 530 | 552 | fontFamily: theme.fontFaceMedium | |
| 531 | 553 | }, | |
| 554 | + titleAppleContainer: { | ||
| 555 | + flexDirection: 'row', | ||
| 556 | + justifyContent: 'flex-start', | ||
| 557 | + alignItems: 'flex-end', | ||
| 558 | + flexShrink: 1 | ||
| 559 | + }, | ||
| 560 | + titleAppleLogo: { | ||
| 561 | + height: theme.rem(1), | ||
| 562 | + width: 'auto', | ||
| 563 | + aspectRatio: 150 / 64, | ||
| 564 | + resizeMode: 'contain', | ||
| 565 | + marginBottom: 1 | ||
| 566 | + }, | ||
| 532 | 567 | subtitleText: { | |
| 533 | 568 | marginTop: theme.rem(0.25), | |
| 534 | 569 | fontSize: theme.rem(0.75), | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -319,7 +319,8 @@ | |||
| 319 | 319 | "paymentType": "applepay", | |
| 320 | 320 | "description": "Fee: 5-7%\nSettlement: 10 - 30 minutes", | |
| 321 | 321 | "paymentTypes": ["credit"], | |
| 322 | - "title": "Pay with Apple Pay", | ||
| 322 | + "title": "", | ||
| 323 | + "customTitleKey": "applepay", | ||
| 323 | 324 | "forCountries": [ | |
| 324 | 325 | "AD", "AE", "AF", "AG", "AI", "AL", "AM", "AO", "AQ", "AR", | |
| 325 | 326 | "AS", "AT", "AU", "AW", "AZ", "BA", "BB", "BD", "BE", "BF", | |
0 commit comments