-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Add billing currency #43572
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Add billing currency #43572
Changes from all commits
Commits
Show all changes
36 commits
Select commit
Hold shift + click to select a range
61859a6
Add billing currency
narefyev91 bc42f72
Merge branch 'refs/heads/main' into add-billing-currency
narefyev91 370f305
fix lint
narefyev91 3736030
change hint text position
narefyev91 52cb5a5
update cvv
narefyev91 b8705b0
fix ts and broken complex expression checks
narefyev91 acce063
Merge branch 'refs/heads/main' into add-billing-currency
narefyev91 78c84ef
fix ts
narefyev91 85bfa1b
updates after design review
narefyev91 dc44700
updates after design review
narefyev91 68a71f7
Merge branch 'refs/heads/main' into add-billing-currency
narefyev91 b4f6b1f
Merge branch 'refs/heads/main' into add-billing-currency
narefyev91 89f91d4
refactoring for naming, add preparation for 3ds flow
narefyev91 5e0691c
clean up
narefyev91 d02ffaf
clean up
narefyev91 0de6d73
earlier return
narefyev91 625b3f9
Merge branch 'refs/heads/main' into add-billing-currency
narefyev91 e7bcd41
clean up
narefyev91 c0ff628
updates after c+ review
narefyev91 da5f4af
fix ts
narefyev91 6d2432e
add not found page for native, add edit payment card logic
narefyev91 5380b0f
Merge branch 'refs/heads/main' into add-billing-currency
narefyev91 bc01fbe
add lost page
narefyev91 e38e702
Merge branch 'refs/heads/main' into add-billing-currency
narefyev91 0c639f8
prettier
narefyev91 b6a8ee3
fix ts
narefyev91 e21dfaa
fix url
narefyev91 a6ba5c0
fix url
narefyev91 51856c6
fix ts
narefyev91 9baf820
fix virtualization error
narefyev91 24af72f
fix after expensify review
narefyev91 7e3c249
Merge branch 'refs/heads/main' into add-billing-currency
narefyev91 fe290d6
re-run lint checks
narefyev91 5650e5b
Merge branch 'refs/heads/main' into add-billing-currency
narefyev91 71519b5
Merge branch 'refs/heads/main' into add-billing-currency
narefyev91 3714818
Merge branch 'refs/heads/main' into add-billing-currency
narefyev91 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
142 changes: 142 additions & 0 deletions
142
src/components/AddPaymentCard/PaymentCardChangeCurrencyForm.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| import React, {useCallback, useMemo, useState} from 'react'; | ||
| import {View} from 'react-native'; | ||
| import type {ValueOf} from 'type-fest'; | ||
| import FormProvider from '@components/Form/FormProvider'; | ||
| import InputWrapper from '@components/Form/InputWrapper'; | ||
| import type {FormInputErrors, FormOnyxValues} from '@components/Form/types'; | ||
| import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; | ||
| import SelectionList from '@components/SelectionList'; | ||
| import RadioListItem from '@components/SelectionList/RadioListItem'; | ||
| import TextInput from '@components/TextInput'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import * as ValidationUtils from '@libs/ValidationUtils'; | ||
| import CONST from '@src/CONST'; | ||
| import ONYXKEYS from '@src/ONYXKEYS'; | ||
| import INPUT_IDS from '@src/types/form/ChangeBillingCurrencyForm'; | ||
| import PaymentCardCurrencyHeader from './PaymentCardCurrencyHeader'; | ||
| import PaymentCardCurrencyModal from './PaymentCardCurrencyModal'; | ||
|
|
||
| type PaymentCardFormProps = { | ||
| initialCurrency?: ValueOf<typeof CONST.CURRENCY>; | ||
| isSecurityCodeRequired?: boolean; | ||
| changeBillingCurrency: (currency?: ValueOf<typeof CONST.CURRENCY>, values?: FormOnyxValues<typeof ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM>) => void; | ||
| }; | ||
|
|
||
| const REQUIRED_FIELDS = [INPUT_IDS.SECURITY_CODE]; | ||
|
|
||
| function PaymentCardChangeCurrencyForm({changeBillingCurrency, isSecurityCodeRequired, initialCurrency}: PaymentCardFormProps) { | ||
| const styles = useThemeStyles(); | ||
| const {translate} = useLocalize(); | ||
|
|
||
| const [isCurrencyModalVisible, setIsCurrencyModalVisible] = useState(false); | ||
| const [currency, setCurrency] = useState<ValueOf<typeof CONST.CURRENCY>>(initialCurrency ?? CONST.CURRENCY.USD); | ||
|
|
||
| const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM> => { | ||
| const errors = ValidationUtils.getFieldRequiredErrors(values, REQUIRED_FIELDS); | ||
|
|
||
| if (values.securityCode && !ValidationUtils.isValidSecurityCode(values.securityCode)) { | ||
| errors.securityCode = translate('addPaymentCardPage.error.securityCode'); | ||
| } | ||
|
|
||
| return errors; | ||
| }; | ||
|
|
||
| const {sections} = useMemo( | ||
| () => ({ | ||
| sections: [ | ||
| { | ||
| data: (Object.keys(CONST.CURRENCY) as Array<ValueOf<typeof CONST.CURRENCY>>).map((currencyItem) => ({ | ||
| text: currencyItem, | ||
| value: currencyItem, | ||
| keyForList: currencyItem, | ||
| isSelected: currencyItem === currency, | ||
| })), | ||
| }, | ||
| ], | ||
| }), | ||
| [currency], | ||
| ); | ||
|
|
||
| const showCurrenciesModal = useCallback(() => { | ||
| setIsCurrencyModalVisible(true); | ||
| }, []); | ||
|
|
||
| const changeCurrency = useCallback((selectedCurrency: ValueOf<typeof CONST.CURRENCY>) => { | ||
| setCurrency(selectedCurrency); | ||
| setIsCurrencyModalVisible(false); | ||
| }, []); | ||
|
|
||
| const selectCurrency = useCallback( | ||
| (selectedCurrency: ValueOf<typeof CONST.CURRENCY>) => { | ||
| setCurrency(selectedCurrency); | ||
| changeBillingCurrency(selectedCurrency); | ||
| }, | ||
| [changeBillingCurrency], | ||
| ); | ||
|
|
||
| if (isSecurityCodeRequired) { | ||
| return ( | ||
| <FormProvider | ||
| formID={ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM} | ||
| validate={validate} | ||
| onSubmit={(values) => changeBillingCurrency(currency, values)} | ||
| submitButtonText={translate('common.save')} | ||
| scrollContextEnabled | ||
| style={[styles.mh5, styles.flexGrow1]} | ||
| > | ||
| <PaymentCardCurrencyHeader /> | ||
| <> | ||
| <View style={[styles.mt5, styles.mhn5]}> | ||
| <MenuItemWithTopDescription | ||
| shouldShowRightIcon | ||
| title={currency} | ||
| descriptionTextStyle={styles.textNormal} | ||
| description={translate('common.currency')} | ||
| onPress={showCurrenciesModal} | ||
| /> | ||
| </View> | ||
| <InputWrapper | ||
| InputComponent={TextInput} | ||
| inputID={INPUT_IDS.SECURITY_CODE} | ||
| label={translate('addDebitCardPage.cvv')} | ||
| aria-label={translate('addDebitCardPage.cvv')} | ||
| role={CONST.ROLE.PRESENTATION} | ||
| maxLength={4} | ||
| containerStyles={[styles.mt5]} | ||
| inputMode={CONST.INPUT_MODE.NUMERIC} | ||
| /> | ||
| </> | ||
| <PaymentCardCurrencyModal | ||
| isVisible={isCurrencyModalVisible} | ||
| currencies={Object.keys(CONST.CURRENCY) as Array<ValueOf<typeof CONST.CURRENCY>>} | ||
| currentCurrency={currency} | ||
| onCurrencyChange={changeCurrency} | ||
| onClose={() => setIsCurrencyModalVisible(false)} | ||
| /> | ||
| </FormProvider> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <View style={[styles.mh5, styles.flexGrow1]}> | ||
| <SelectionList | ||
| headerContent={<PaymentCardCurrencyHeader isSectionList />} | ||
| initiallyFocusedOptionKey={currency} | ||
| containerStyle={[styles.mhn5]} | ||
| sections={sections} | ||
| onSelectRow={(option) => { | ||
| selectCurrency(option.value); | ||
| }} | ||
| showScrollIndicator | ||
| shouldStopPropagation | ||
| shouldUseDynamicMaxToRenderPerBatch | ||
| ListItem={RadioListItem} | ||
| /> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| PaymentCardChangeCurrencyForm.displayName = 'PaymentCardChangeCurrencyForm'; | ||
|
|
||
| export default PaymentCardChangeCurrencyForm; | ||
28 changes: 28 additions & 0 deletions
28
src/components/AddPaymentCard/PaymentCardCurrencyHeader.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import React from 'react'; | ||
| import {View} from 'react-native'; | ||
| import Text from '@components/Text'; | ||
| import TextLink from '@components/TextLink'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import CONST from '@src/CONST'; | ||
|
|
||
| function PaymentCardCurrencyHeader({isSectionList}: {isSectionList?: boolean}) { | ||
| const styles = useThemeStyles(); | ||
| const {translate} = useLocalize(); | ||
| return ( | ||
| <View style={[isSectionList && styles.mh5]}> | ||
| <Text style={[styles.mt3, isSectionList && styles.mb5]}> | ||
| {`${translate('billingCurrency.note')}`}{' '} | ||
| <TextLink | ||
| style={styles.link} | ||
| href={CONST.PRICING} | ||
| >{`${translate('billingCurrency.noteLink')}`}</TextLink>{' '} | ||
| {`${translate('billingCurrency.noteDetails')}`} | ||
| </Text> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| PaymentCardCurrencyHeader.displayName = 'PaymentCardCurrencyHeader'; | ||
|
|
||
| export default PaymentCardCurrencyHeader; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.