Repository navigation
Conversation
…itle weight to 500 (ORC-8443) (#435)
…ename CheckoutButton (ORC-8435) (#436)
handlePay waited for the billing address call before submit() turned the lock on, and by then the processing screen had replaced the form. On iOS that left about a second after the tap with a live form and a Pay button showing nothing. The form now locks and Pay spins from the tap, and a second tap in that time is ignored. PrimerCardForm gets the same optional editable prop as the billing form.
Generated by 🚫 Danger Swift against 11cad4b |
![unblocked[bot]](https://avatars.githubusercontent.com/in/166219?s=60&v=4){kind=small}
There was a problem hiding this comment.
1 issue found.
About Unblocked
Unblocked has been set up to automatically review your team's pull requests to identify genuine bugs and issues.
📖 Documentation — Learn more in our docs.
💬 Ask questions — Mention @unblocked to request a review or summary, or ask follow-up questions.
👍 Give feedback — React to comments with 👍 or 👎 to help us improve.
⚙️ Customize — Adjust settings in your preferences.
| <PrimerButton | ||
| title={t('primer_common_button_pay')} | ||
| onPress={handleSubmit} | ||
| variant="primary" | ||
| disabled={!canSubmit} | ||
| activeOpacity={0.7} | ||
| style={[styles.payButton, !canSubmit && styles.payButtonDisabled]} | ||
| accessibilityRole="button" | ||
| accessibilityState={{ disabled: !canSubmit }} | ||
| > | ||
| <Text style={styles.payButtonText}>{t('primer_common_button_pay')}</Text> | ||
| </TouchableOpacity> | ||
| /> |
There was a problem hiding this comment.
The PR description states "The bank screen's Pay button shows its spinner while it loads (ORC--8435, #436)" and even lists "the bank screen Pay spinner" as pending device verification, but the migrated PrimerButton receives no loading prop. PrimerButton only renders its ActivityIndicator when loading is true, so while the issuer list loads (isLoading), the Pay button is merely disabled (grey fill, no spinner), and after a tap the screen immediately replaces to processing — the spinner can never appear in any state.
If the intended behaviour matches the other screens in this PR (e.g. CardFormScreen), pass the loading state through:
<PrimerButton
title={t('primer_common_button_pay')}
onPress={handleSubmit}
variant="primary"
loading={isLoading}
disabled={!canSubmit}
/>(Confirm with design whether it should spin during the bank-list fetch or only during submit; as written it does neither.)
|
Generated by 🚫 Danger Kotlin against 11cad4b |
|
Appetize Android link: https://appetize.io/app/pwbbbby6be4kfm6kahe2fgfdim |
1 participant
Brings the Checkout Components styling work from
epic/stylingintoov/feat/components.Epic: ORC-7616.
Most changes were already reviewed in their own PR.
A few were pushed straight to
epic/stylingand show a commit hash instead. Those need the closest look.What this PR does
First batch, brought back
#445 took these PRs off this branch so the beta could ship without them.
The first commit here reverts #445, so they come back as they were reviewed.
primaryis nowbrandandbordersis nowwidths(typePrimerWidthTokens). Existing themes break, which is fine while 3.0 is in beta. (ORC-8229, refactor(components): move the theme onto the shared token vocabulary (ORC-8229) #415)yarn testruns every test undersrc, not onlysrc/__tests__. (fix(components): let the theme reach everything it should (ORC-8114) #416)sizes.xxlargetoken: 40 by default, was a fixed 44. (ORC-8263, fix(components): take field height from the size token (ORC-8263) #417)error. (ORC-8264, feat(components): give error text its own typography token (ORC-8264) #418)onBrandcolour. (ORC-8179, fix(components): give the primary button label an on-brand colour (ORC-8179) #420)fontFamilysetting changes the font of every text style, unless a style sets its own. (ORC-8268, feat(components): resolve every text style from one brand font (ORC-8268) #424)PrimerTextInputgetstextContentType. (ORC-8116, fix(components): translate the raw-data form labels and add autofill hints (ORC-8116) #426)loadercolour. (ORC-8271, fix(components): paint standalone spinners from the loader colour (ORC-8271) #427)gray300are removed from the theme. (ORC-8396, refactor(components): drop the raw palette colours from the theme (ORC-8396) #432)Second batch
Merged into
epic/stylingafter that.onBrandfollows the sheet colour unless the theme sets it, in light and dark. So by default the Pay label keeps the colour it had before. (ORC-8432, fix(components): paint the pay button label on the sheet it sits on (ORC-8432) #443, e381efc)bodySmallunless the theme setserror. (ORC-8433, fix(components): let error text follow bodySmall (ORC-8433) #439)titleXLargeis nowtitleXlarge.radii.baseandspacing.baseare added.radii.noneandspacing.xxxlargeare removed. (ORC-8443, fix(components): align token names with the other SDKs and drop the title weight to 500 (ORC-8443) #435)PrimerTextInputThemegets the matching fields. (ORC-8434, fix(components): apply all five typography settings to every text style (ORC-8434) #437)borderOutlinedSelected: saved cards, bank list and Klarna options. (ORC-8441, fix(components): read the selected border colour from its token (ORC-8441) #434)backgroundOutlinedDisabledfill andtextDisabledlabels. (ORC-8435, fix(components): lock the billing fields while a card payment runs, rename CheckoutButton (ORC-8435) #436)PrimerCardFormandPrimerBillingAddressFormget an optionaleditableprop. (ORC-8435, fix(components): lock the billing fields while a card payment runs, rename CheckoutButton (ORC-8435) #436, 1e806a9)CheckoutButtonis renamedPrimerButton, as on the other SDKs. (ORC-8435, fix(components): lock the billing fields while a card payment runs, rename CheckoutButton (ORC-8435) #436)settings.uiOptions.appearanceMode(LIGHT,DARK,SYSTEM) now picks light or dark for the checkout and its payment method logos. Components used outsidePrimerCheckoutProviderstill follow the phone. (ORC-8437, feat(components): honour appearanceMode on the checkout (ORC-8437) #441, 7bfdcf0)Parity fixes without a ticket
Found while comparing the RN example with the iOS and Android apps and Figma.
iconPrimary.PrimerTextInputgets an optionalleadingContent. (cbe2f98)Follow-up tickets
Known gaps on React Native, not in this PR.
Testing
appearanceModeSystem, Light and Dark, with the phone in light and in dark, on RN iOS and RN Android. All correct.Screenshots
Before is
ov/feat/components(82d72fcb). After is this branch. Both use the same example app and native SDKs; onlysrc/differs. They run the example's "Before/after: default theme" entry (Primer's default theme, the same session) in light and dark, on the iOS simulator and the Android emulator, so changes that need a merchant theme do not show here. Each image says what was wrong and what changed. On Android, the round button over a field is the keyboard's stylus button.RN iOS
More RN iOS screens (small changes)
RN Android
More RN Android screens (small changes)