-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: implement card section for subscription
- Loading branch information
1 parent
23232b4
commit 183e74e
Showing
13 changed files
with
274 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains 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 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 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
64 changes: 64 additions & 0 deletions
64
src/pages/settings/Subscription/CardSection/CardSection.tsx
This file contains 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,64 @@ | ||
import React from 'react'; | ||
import {View} from 'react-native'; | ||
import {useOnyx} from 'react-native-onyx'; | ||
import Icon from '@components/Icon'; | ||
import * as Expensicons from '@components/Icon/Expensicons'; | ||
import Section from '@components/Section'; | ||
import Text from '@components/Text'; | ||
import useLocalize from '@hooks/useLocalize'; | ||
import useTheme from '@hooks/useTheme'; | ||
import useThemeStyles from '@hooks/useThemeStyles'; | ||
import ONYXKEYS from '@src/ONYXKEYS'; | ||
import {isEmptyObject} from '@src/types/utils/EmptyObject'; | ||
import CardSectionActions from './CardSectionActions'; | ||
import CardSectionDataEmpty from './CardSectionDataEmpty'; | ||
|
||
function CardSection() { | ||
const {translate} = useLocalize(); | ||
const styles = useThemeStyles(); | ||
const theme = useTheme(); | ||
const [fundList] = useOnyx(ONYXKEYS.FUND_LIST); | ||
|
||
const defaultCard = Object.values(fundList ?? {}).find((card) => card.isDefault); | ||
|
||
return ( | ||
<Section | ||
title={translate('subscription.cardSection.title')} | ||
subtitle={translate('subscription.cardSection.subtitle')} | ||
isCentralPane | ||
titleStyles={styles.textStrong} | ||
subtitleMuted | ||
> | ||
<View style={styles.mt5}> | ||
<View style={[styles.flexRow, styles.flex1]}> | ||
{!isEmptyObject(defaultCard?.accountData) && ( | ||
<> | ||
<View style={[styles.flexRow, styles.flex1, styles.gap3]}> | ||
<Icon | ||
src={Expensicons.CreditCard} | ||
additionalStyles={styles.subscriptionCardIcon} | ||
fill={theme.text} | ||
large | ||
/> | ||
<View> | ||
<Text>{translate('subscription.cardSection.cardEnding', {cardNumber: defaultCard?.accountData?.cardNumber})}</Text> | ||
<Text style={styles.mutedNormalTextLabel}> | ||
{translate('subscription.cardSection.cardInfo', { | ||
name: defaultCard?.accountData?.addressName, | ||
expiration: `${defaultCard?.accountData?.cardMonth}/${defaultCard?.accountData?.cardYear}`, | ||
currency: defaultCard?.accountData?.currency, | ||
})} | ||
</Text> | ||
</View> | ||
</View> | ||
<CardSectionActions /> | ||
</> | ||
)} | ||
{isEmptyObject(defaultCard?.accountData) && <CardSectionDataEmpty />} | ||
</View> | ||
</View> | ||
</Section> | ||
); | ||
} | ||
|
||
export default CardSection; |
5 changes: 5 additions & 0 deletions
5
src/pages/settings/Subscription/CardSection/CardSectionActions/index.native.tsx
This file contains 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,5 @@ | ||
function CardSectionActions() { | ||
return null; | ||
} | ||
|
||
export default CardSectionActions; |
56 changes: 56 additions & 0 deletions
56
src/pages/settings/Subscription/CardSection/CardSectionActions/index.tsx
This file contains 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,56 @@ | ||
import React, {useMemo, useRef, useState} from 'react'; | ||
import {View} from 'react-native'; | ||
import * as Expensicons from '@components/Icon/Expensicons'; | ||
import ThreeDotsMenu from '@components/ThreeDotsMenu'; | ||
import type ThreeDotsMenuProps from '@components/ThreeDotsMenu/types'; | ||
import useLocalize from '@hooks/useLocalize'; | ||
import useWindowDimensions from '@hooks/useWindowDimensions'; | ||
import type {AnchorPosition} from '@styles/index'; | ||
import CONST from '@src/CONST'; | ||
|
||
function CardSectionActions() { | ||
const {isSmallScreenWidth} = useWindowDimensions(); | ||
const {translate} = useLocalize(); | ||
const [threeDotsMenuPosition, setThreeDotsMenuPosition] = useState<AnchorPosition>({horizontal: 0, vertical: 0}); | ||
const threeDotsMenuContainerRef = useRef<View>(null); | ||
|
||
const overflowMenu: ThreeDotsMenuProps['menuItems'] = useMemo( | ||
() => [ | ||
{ | ||
icon: Expensicons.CreditCard, | ||
text: translate('subscription.cardSection.changeCard'), | ||
onSelected: () => {}, // TODO: update with navigation to add card screen | ||
}, | ||
{ | ||
icon: Expensicons.MoneyCircle, | ||
text: translate('subscription.cardSection.changeCurrency'), | ||
onSelected: () => {}, // TODO: update with navigation to change currency screen | ||
}, | ||
], | ||
[translate], | ||
); | ||
|
||
return ( | ||
<View ref={threeDotsMenuContainerRef}> | ||
<ThreeDotsMenu | ||
onIconPress={() => { | ||
if (isSmallScreenWidth) { | ||
return; | ||
} | ||
threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => { | ||
setThreeDotsMenuPosition({ | ||
horizontal: x + width, | ||
vertical: y + height, | ||
}); | ||
}); | ||
}} | ||
menuItems={overflowMenu} | ||
anchorPosition={threeDotsMenuPosition} | ||
anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}} | ||
shouldOverlay | ||
/> | ||
</View> | ||
); | ||
} | ||
|
||
export default CardSectionActions; |
30 changes: 30 additions & 0 deletions
30
src/pages/settings/Subscription/CardSection/CardSectionDataEmpty/index.native.tsx
This file contains 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,30 @@ | ||
import React from 'react'; | ||
import {View} from 'react-native'; | ||
import Icon from '@components/Icon'; | ||
import * as Expensicons from '@components/Icon/Expensicons'; | ||
import Text from '@components/Text'; | ||
import useLocalize from '@hooks/useLocalize'; | ||
import useTheme from '@hooks/useTheme'; | ||
import useThemeStyles from '@hooks/useThemeStyles'; | ||
|
||
function CardSectionDataEmpty() { | ||
const {translate} = useLocalize(); | ||
const styles = useThemeStyles(); | ||
const theme = useTheme(); | ||
|
||
return ( | ||
<View style={[styles.flexRow, styles.flex1, styles.gap3]}> | ||
<Icon | ||
src={Expensicons.CreditCardExclamation} | ||
additionalStyles={styles.subscriptionCardIcon} | ||
fill={theme.icon} | ||
large | ||
/> | ||
<View style={styles.alignSelfCenter}> | ||
<Text style={[styles.mutedNormalTextLabel, styles.textBold]}>{translate('subscription.cardSection.cardNotFound')}</Text> | ||
</View> | ||
</View> | ||
); | ||
} | ||
|
||
export default CardSectionDataEmpty; |
18 changes: 18 additions & 0 deletions
18
src/pages/settings/Subscription/CardSection/CardSectionDataEmpty/index.tsx
This file contains 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,18 @@ | ||
import React from 'react'; | ||
import Button from '@components/Button'; | ||
import useLocalize from '@hooks/useLocalize'; | ||
|
||
function CardSectionDataEmpty() { | ||
const {translate} = useLocalize(); | ||
|
||
return ( | ||
<Button | ||
text={translate('subscription.cardSection.addCardButton')} | ||
onPress={() => {}} // TODO: update with navigation to add card screen | ||
success | ||
large | ||
/> | ||
); | ||
} | ||
|
||
export default CardSectionDataEmpty; |
12 changes: 12 additions & 0 deletions
12
src/pages/settings/Subscription/ReducedFunctionalityMessage/index.native.tsx
This file contains 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,12 @@ | ||
import Text from '@components/Text'; | ||
import useLocalize from '@hooks/useLocalize'; | ||
import useThemeStyles from '@hooks/useThemeStyles'; | ||
|
||
function ReducedFunctionalityMessage() { | ||
const styles = useThemeStyles(); | ||
const {translate} = useLocalize(); | ||
|
||
return <Text style={styles.sectionListMutedInfo}>{translate('subscription.mobileReducedFunctionalityMessage')}</Text>; | ||
} | ||
|
||
export default ReducedFunctionalityMessage; |
5 changes: 5 additions & 0 deletions
5
src/pages/settings/Subscription/ReducedFunctionalityMessage/index.tsx
This file contains 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,5 @@ | ||
function ReducedFunctionalityMessage() { | ||
return null; | ||
} | ||
|
||
export default ReducedFunctionalityMessage; |
This file contains 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 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