From b43b00a78a71d9c0213b0301005069867d5742ec Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 29 May 2024 14:51:58 +0200 Subject: [PATCH 01/15] add translations --- src/languages/en.ts | 9 +++++++++ src/languages/es.ts | 9 +++++++++ 2 files changed, 18 insertions(+) diff --git a/src/languages/en.ts b/src/languages/en.ts index 6bb15969b1e9..0eae4c7ab822 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3136,5 +3136,14 @@ export default { saveWithExpensifyDescription: 'Use our savings calculator to see how cash back from the Expensify Card can reduce your Expensify bill.', saveWithExpensifyButton: 'Learn more', }, + details: { + title: 'Subscription details', + annual: 'Annual subscription', + payPerUse: 'Pay-per-use', + subscriptionSize: 'Subscription size', + headsUp: + "Heads up: If you don’t set your subscription size now, we’ll set it automatically to your first month's active member count. You’ll then be committed to paying for at least this number of members for the next 12 months. You can increase your subscription size at any time, but you can’t decrease it until your subscription is over.", + zeroCommitment: 'Zero commitment at the discounted annual subscription rate', + }, }, } satisfies TranslationBase; diff --git a/src/languages/es.ts b/src/languages/es.ts index dd2d59cf6fcf..e01d71026cfa 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -3640,5 +3640,14 @@ export default { saveWithExpensifyDescription: 'Utiliza nuestra calculadora de ahorro para ver cómo el reembolso en efectivo de la Tarjeta Expensify puede reducir tu factura de Expensify', saveWithExpensifyButton: 'Más información', }, + details: { + title: 'Datos de suscripción', + annual: 'Suscripción anual', + payPerUse: 'Pago por uso', + subscriptionSize: 'Tamaño de suscripción', + headsUp: + 'Atención: Si no estableces ahora el tamaño de tu suscripción, lo haremos automáticamente con el número de suscriptores activos del primer mes. A partir de ese momento, estarás suscrito para pagar al menos por ese número de afiliados durante los 12 meses siguientes. Puedes aumentar el tamaño de tu suscripción en cualquier momento, pero no puedes reducirlo hasta que finalice tu suscripción.', + zeroCommitment: 'Compromiso cero con la tarifa de suscripción anual reducida', + }, }, } satisfies EnglishTranslation; From 439794eb8b05d8b9bf6d2fc1bb1c9c9a5afa0df0 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 29 May 2024 15:26:20 +0200 Subject: [PATCH 02/15] start implementing section UI --- .../SubscriptionDetails/index.tsx | 30 +++++++++++++++++++ .../Subscription/SubscriptionSettingsPage.tsx | 2 ++ 2 files changed, 32 insertions(+) create mode 100644 src/pages/settings/Subscription/SubscriptionDetails/index.tsx diff --git a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx new file mode 100644 index 000000000000..5485e914fd2e --- /dev/null +++ b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import * as Expensicons from '@components/Icon/Expensicons'; +import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; +import Section from '@components/Section'; +import Text from '@components/Text'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; + +function SubscriptionDetails() { + const {translate} = useLocalize(); + const styles = useThemeStyles(); + + return ( +
+ Test + +
+ ); +} + +export default SubscriptionDetails; diff --git a/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx b/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx index 646271b01804..6bb2cbf5f8ab 100644 --- a/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx +++ b/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx @@ -6,6 +6,7 @@ import useLocalize from '@hooks/useLocalize'; import useWindowDimensions from '@hooks/useWindowDimensions'; import Navigation from '@libs/Navigation/Navigation'; import * as Subscription from '@userActions/Subscription'; +import SubscriptionDetails from './SubscriptionDetails'; import SubscriptionPlan from './SubscriptionPlan'; function SubscriptionSettingsPage() { @@ -25,6 +26,7 @@ function SubscriptionSettingsPage() { icon={Illustrations.CreditCardsNew} /> + ); } From d6e9e0e7f54fb3a25fb5d66ec0fe29ab76e74ecc Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 29 May 2024 16:03:21 +0200 Subject: [PATCH 03/15] add heads up section --- src/languages/en.ts | 5 +++-- src/languages/es.ts | 5 +++-- .../Subscription/SubscriptionDetails/index.tsx | 10 ++++++---- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index 0eae4c7ab822..16282e93d4b6 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3141,8 +3141,9 @@ export default { annual: 'Annual subscription', payPerUse: 'Pay-per-use', subscriptionSize: 'Subscription size', - headsUp: - "Heads up: If you don’t set your subscription size now, we’ll set it automatically to your first month's active member count. You’ll then be committed to paying for at least this number of members for the next 12 months. You can increase your subscription size at any time, but you can’t decrease it until your subscription is over.", + headsUpTitle: 'Heads up: ', + headsUpBody: + "If you don’t set your subscription size now, we’ll set it automatically to your first month's active member count. You’ll then be committed to paying for at least this number of members for the next 12 months. You can increase your subscription size at any time, but you can’t decrease it until your subscription is over.", zeroCommitment: 'Zero commitment at the discounted annual subscription rate', }, }, diff --git a/src/languages/es.ts b/src/languages/es.ts index e01d71026cfa..86e905570003 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -3645,8 +3645,9 @@ export default { annual: 'Suscripción anual', payPerUse: 'Pago por uso', subscriptionSize: 'Tamaño de suscripción', - headsUp: - 'Atención: Si no estableces ahora el tamaño de tu suscripción, lo haremos automáticamente con el número de suscriptores activos del primer mes. A partir de ese momento, estarás suscrito para pagar al menos por ese número de afiliados durante los 12 meses siguientes. Puedes aumentar el tamaño de tu suscripción en cualquier momento, pero no puedes reducirlo hasta que finalice tu suscripción.', + headsUpTitle: 'Atención: ', + headsUpBody: + 'Si no estableces ahora el tamaño de tu suscripción, lo haremos automáticamente con el número de suscriptores activos del primer mes. A partir de ese momento, estarás suscrito para pagar al menos por ese número de afiliados durante los 12 meses siguientes. Puedes aumentar el tamaño de tu suscripción en cualquier momento, pero no puedes reducirlo hasta que finalice tu suscripción.', zeroCommitment: 'Compromiso cero con la tarifa de suscripción anual reducida', }, }, diff --git a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx index 5485e914fd2e..28f68624d625 100644 --- a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx +++ b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import * as Expensicons from '@components/Icon/Expensicons'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import Section from '@components/Section'; import Text from '@components/Text'; @@ -16,13 +15,16 @@ function SubscriptionDetails() { isCentralPane titleStyles={styles.textStrong} > - Test + + {translate('subscription.details.headsUpTitle')} + {translate('subscription.details.headsUpBody')} + ); } From 6222434bdd403f3dc30c1eccac2fcd5c9d54a700 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 31 May 2024 10:53:33 +0200 Subject: [PATCH 04/15] add new illustrations --- ...mple-illustration__subscription-annual.svg | 82 ++++++++++++++++ .../simple-illustration__subscription-ppu.svg | 27 ++++++ .../subscription-details__approvedlogo.svg | 94 +++++++++++++++++++ src/components/Icon/Illustrations.ts | 6 ++ 4 files changed, 209 insertions(+) create mode 100644 assets/images/simple-illustrations/simple-illustration__subscription-annual.svg create mode 100644 assets/images/simple-illustrations/simple-illustration__subscription-ppu.svg create mode 100644 assets/images/subscription-details__approvedlogo.svg diff --git a/assets/images/simple-illustrations/simple-illustration__subscription-annual.svg b/assets/images/simple-illustrations/simple-illustration__subscription-annual.svg new file mode 100644 index 000000000000..e158bc5588cb --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__subscription-annual.svg @@ -0,0 +1,82 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__subscription-ppu.svg b/assets/images/simple-illustrations/simple-illustration__subscription-ppu.svg new file mode 100644 index 000000000000..d70d2d1ef552 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__subscription-ppu.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + diff --git a/assets/images/subscription-details__approvedlogo.svg b/assets/images/subscription-details__approvedlogo.svg new file mode 100644 index 000000000000..7722e2526657 --- /dev/null +++ b/assets/images/subscription-details__approvedlogo.svg @@ -0,0 +1,94 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index 8d3f53be9396..47480649cd89 100644 --- a/src/components/Icon/Illustrations.ts +++ b/src/components/Icon/Illustrations.ts @@ -78,6 +78,8 @@ import SanFrancisco from '@assets/images/simple-illustrations/simple-illustratio import ShieldYellow from '@assets/images/simple-illustrations/simple-illustration__shield.svg'; import SmallRocket from '@assets/images/simple-illustrations/simple-illustration__smallrocket.svg'; import SplitBill from '@assets/images/simple-illustrations/simple-illustration__splitbill.svg'; +import SubscriptionAnnual from '@assets/images/simple-illustrations/simple-illustration__subscription-annual.svg'; +import SubscriptionPPU from '@assets/images/simple-illustrations/simple-illustration__subscription-ppu.svg'; import Tag from '@assets/images/simple-illustrations/simple-illustration__tag.svg'; import TeachersUnite from '@assets/images/simple-illustrations/simple-illustration__teachers-unite.svg'; import ThumbsUpStars from '@assets/images/simple-illustrations/simple-illustration__thumbsupstars.svg'; @@ -86,6 +88,7 @@ import TrashCan from '@assets/images/simple-illustrations/simple-illustration__t import TreasureChest from '@assets/images/simple-illustrations/simple-illustration__treasurechest.svg'; import WalletAlt from '@assets/images/simple-illustrations/simple-illustration__wallet-alt.svg'; import Workflows from '@assets/images/simple-illustrations/simple-illustration__workflows.svg'; +import ExpensifyApprovedLogo from '@assets/images/subscription-details__approvedlogo.svg'; export { Abracadabra, @@ -176,4 +179,7 @@ export { Tag, CarIce, Lightbulb, + SubscriptionAnnual, + SubscriptionPPU, + ExpensifyApprovedLogo, }; From 153daee15ce1bc579e04eb50d3caad9a8fcc4b04 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 31 May 2024 11:34:05 +0200 Subject: [PATCH 05/15] implement Optionitem component --- src/components/OptionsPicker/OptionItem.tsx | 60 +++++++++++++++++++++ src/styles/index.ts | 6 +++ 2 files changed, 66 insertions(+) create mode 100644 src/components/OptionsPicker/OptionItem.tsx diff --git a/src/components/OptionsPicker/OptionItem.tsx b/src/components/OptionsPicker/OptionItem.tsx new file mode 100644 index 000000000000..bf8860a507ed --- /dev/null +++ b/src/components/OptionsPicker/OptionItem.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import {View} from 'react-native'; +import Icon from '@components/Icon'; +import {PressableWithFeedback} from '@components/Pressable'; +import SelectCircle from '@components/SelectCircle'; +import Text from '@components/Text'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; +import variables from '@styles/variables'; +import CONST from '@src/CONST'; +import type IconAsset from '@src/types/utils/IconAsset'; + +type OptionItemProps = { + /** Text to be rendered */ + title: string; + + /** Icon to be displayed above the title */ + icon: IconAsset; + + /** Press handler */ + onPress: () => void; + + /** Indicates whether the option is currently selected (active) */ + isSelected: boolean; + + /** Indicates whether the option is disabled */ + isDisabled?: boolean; +}; + +function OptionItem({title, icon, onPress, isSelected, isDisabled = false}: OptionItemProps) { + const styles = useThemeStyles(); + const {translate} = useLocalize(); + + return ( + + + + + + {title} + + + + + + + + ); +} + +export default OptionItem; diff --git a/src/styles/index.ts b/src/styles/index.ts index 4686a2adf71d..d2836c3c6aa4 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -2800,6 +2800,12 @@ const styles = (theme: ThemeColors) => borderRadius: variables.componentBorderRadiusMedium, }, + borderedContentCardFocused: { + borderWidth: 1, + borderColor: theme.borderFocus, + borderRadius: variables.componentBorderRadiusMedium, + }, + sectionMenuItem: { borderRadius: 8, paddingHorizontal: 8, From ca235036b91dbcb4c1131b246cd891a83d9af91f Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 31 May 2024 13:48:21 +0200 Subject: [PATCH 06/15] implement OptionsPicker component --- src/components/OptionsPicker/OptionItem.tsx | 6 +- src/components/OptionsPicker/index.tsx | 58 +++++++++++++++++++ .../SubscriptionDetails/index.tsx | 32 ++++++++++ src/styles/index.ts | 4 ++ 4 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 src/components/OptionsPicker/index.tsx diff --git a/src/components/OptionsPicker/OptionItem.tsx b/src/components/OptionsPicker/OptionItem.tsx index bf8860a507ed..cf0157db48e8 100644 --- a/src/components/OptionsPicker/OptionItem.tsx +++ b/src/components/OptionsPicker/OptionItem.tsx @@ -37,6 +37,7 @@ function OptionItem({title, icon, onPress, isSelected, isDisabled = false}: Opti role={CONST.ROLE.BUTTON} accessibilityLabel={translate('common.close')} disabled={isDisabled} + wrapperStyle={[styles.flex1]} > @@ -49,7 +50,10 @@ function OptionItem({title, icon, onPress, isSelected, isDisabled = false}: Opti {title} - + diff --git a/src/components/OptionsPicker/index.tsx b/src/components/OptionsPicker/index.tsx new file mode 100644 index 000000000000..090a7b0d3474 --- /dev/null +++ b/src/components/OptionsPicker/index.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import type {StyleProp, ViewStyle} from 'react-native'; +import {View} from 'react-native'; +import useThemeStyles from '@hooks/useThemeStyles'; +import type IconAsset from '@src/types/utils/IconAsset'; +import OptionItem from './OptionItem'; + +type OptionsPickerItem = { + /** A unique identifier for each option */ + key: string; + + /** Text to be displayed */ + title: string; + + /** Icon to be displayed above the title */ + icon: IconAsset; +}; + +type OptionsPickerProps = { + /** Options list */ + options: OptionsPickerItem[]; + + /** Selected option's identifier */ + selectedOption: string; + + /** Option select handler */ + onOptionSelected: (option: string) => void; + + /** Indicates whether the picker is disabled */ + isDisabled?: boolean; + + /** Optional style */ + style?: StyleProp; +}; + +function OptionsPicker({options, selectedOption, onOptionSelected, style, isDisabled = false}: OptionsPickerProps) { + const styles = useThemeStyles(); + + return ( + + {options.map((option, index) => ( + + onOptionSelected(option.key)} + /> + {index < options.length - 1 && } + + ))} + + ); +} + +export default OptionsPicker; +export type {OptionsPickerItem}; diff --git a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx index 28f68624d625..9d4e16ef773b 100644 --- a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx +++ b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx @@ -1,26 +1,58 @@ import React from 'react'; +import * as Illustrations from '@components/Icon/Illustrations'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; +import type {OptionsPickerItem} from '@components/OptionsPicker'; +import OptionsPicker from '@components/OptionsPicker'; import Section from '@components/Section'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import CONST from '@src/CONST'; function SubscriptionDetails() { const {translate} = useLocalize(); const styles = useThemeStyles(); + const [selectedOption, setSelectedOption] = React.useState(CONST.SUBSCRIPTION.TYPE.ANNUAL); + + const options: OptionsPickerItem[] = [ + { + key: CONST.SUBSCRIPTION.TYPE.ANNUAL, + title: translate('subscription.details.annual'), + icon: Illustrations.SubscriptionAnnual, + }, + { + key: CONST.SUBSCRIPTION.TYPE.PAYPERUSE, + title: translate('subscription.details.payPerUse'), + icon: Illustrations.SubscriptionPPU, + }, + ]; + + const onOptionSelected = (option: string) => { + setSelectedOption(option); + }; + return (
+ + {/* + + */} {translate('subscription.details.headsUpTitle')} {translate('subscription.details.headsUpBody')} diff --git a/src/styles/index.ts b/src/styles/index.ts index d2836c3c6aa4..8348579e8a89 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -2813,6 +2813,10 @@ const styles = (theme: ThemeColors) => alignItems: 'center', }, + sectionSelectCircle: { + backgroundColor: colors.productDark200, + }, + qrShareSection: { width: 264, }, From a4fa1e719968fec4659ee5f53b02ef1db04b0155 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 3 Jun 2024 10:24:02 +0200 Subject: [PATCH 07/15] implement mobile subscription details section and subscription size part --- src/components/OptionsPicker/OptionItem.tsx | 26 ++++--- .../SubscriptionDetails/index.native.tsx | 75 +++++++++++++++++++ .../SubscriptionDetails/index.tsx | 63 ++++++++++++---- .../Subscription/SubscriptionSettingsPage.tsx | 7 +- src/types/onyx/Account.ts | 6 ++ 5 files changed, 149 insertions(+), 28 deletions(-) create mode 100644 src/pages/settings/Subscription/SubscriptionDetails/index.native.tsx diff --git a/src/components/OptionsPicker/OptionItem.tsx b/src/components/OptionsPicker/OptionItem.tsx index cf0157db48e8..2b5f30930f9d 100644 --- a/src/components/OptionsPicker/OptionItem.tsx +++ b/src/components/OptionsPicker/OptionItem.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import type {StyleProp, ViewStyle} from 'react-native'; import {View} from 'react-native'; import Icon from '@components/Icon'; import {PressableWithFeedback} from '@components/Pressable'; @@ -18,16 +19,19 @@ type OptionItemProps = { icon: IconAsset; /** Press handler */ - onPress: () => void; + onPress?: () => void; /** Indicates whether the option is currently selected (active) */ - isSelected: boolean; + isSelected?: boolean; /** Indicates whether the option is disabled */ isDisabled?: boolean; + + /** Optional style prop */ + style?: StyleProp; }; -function OptionItem({title, icon, onPress, isSelected, isDisabled = false}: OptionItemProps) { +function OptionItem({title, icon, onPress, isSelected = false, isDisabled = false, style}: OptionItemProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -37,7 +41,7 @@ function OptionItem({title, icon, onPress, isSelected, isDisabled = false}: Opti role={CONST.ROLE.BUTTON} accessibilityLabel={translate('common.close')} disabled={isDisabled} - wrapperStyle={[styles.flex1]} + wrapperStyle={[styles.flex1, style]} > @@ -49,12 +53,14 @@ function OptionItem({title, icon, onPress, isSelected, isDisabled = false}: Opti /> {title} - - - + {!isDisabled ? ( + + + + ) : null} diff --git a/src/pages/settings/Subscription/SubscriptionDetails/index.native.tsx b/src/pages/settings/Subscription/SubscriptionDetails/index.native.tsx new file mode 100644 index 000000000000..843d30f6e346 --- /dev/null +++ b/src/pages/settings/Subscription/SubscriptionDetails/index.native.tsx @@ -0,0 +1,75 @@ +import React from 'react'; +import {View} from 'react-native'; +import {useOnyx} from 'react-native-onyx'; +import Icon from '@components/Icon'; +import * as Illustrations from '@components/Icon/Illustrations'; +import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; +import OptionItem from '@components/OptionsPicker/OptionItem'; +import Section from '@components/Section'; +import Text from '@components/Text'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; +import variables from '@styles/variables'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; + +function SubscriptionDetails() { + const {translate} = useLocalize(); + const styles = useThemeStyles(); + const [privateSubscription] = useOnyx(ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION); + + const [account] = useOnyx(ONYXKEYS.ACCOUNT); + + return ( +
+ {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */} + {account?.isApprovedAccountant || account?.isApprovedAccountantClient ? ( + + + {translate('subscription.details.zeroCommitment')} + + ) : ( + <> + {privateSubscription?.type === CONST.SUBSCRIPTION.TYPE.PAYPERUSE ? ( + + ) : ( + + )} + {privateSubscription?.userCount ? ( + + ) : ( + + {translate('subscription.details.headsUpTitle')} + {translate('subscription.details.headsUpBody')} + + )} + + )} +
+ ); +} + +export default SubscriptionDetails; diff --git a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx index 9d4e16ef773b..4599d2376ca0 100644 --- a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx +++ b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx @@ -1,4 +1,7 @@ import React from 'react'; +import {View} from 'react-native'; +import {useOnyx} from 'react-native-onyx'; +import Icon from '@components/Icon'; import * as Illustrations from '@components/Icon/Illustrations'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import type {OptionsPickerItem} from '@components/OptionsPicker'; @@ -7,13 +10,17 @@ import Section from '@components/Section'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import variables from '@styles/variables'; import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; function SubscriptionDetails() { const {translate} = useLocalize(); const styles = useThemeStyles(); + const [privateSubscription] = useOnyx(ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION); - const [selectedOption, setSelectedOption] = React.useState(CONST.SUBSCRIPTION.TYPE.ANNUAL); + const [selectedOption, setSelectedOption] = React.useState(privateSubscription?.type ?? CONST.SUBSCRIPTION.TYPE.ANNUAL); + const [account] = useOnyx(ONYXKEYS.ACCOUNT); const options: OptionsPickerItem[] = [ { @@ -32,31 +39,55 @@ function SubscriptionDetails() { setSelectedOption(option); }; - return ( -
- + const subscriptionSizeSection = privateSubscription?.userCount ? ( + + ) : ( + <> - {/* - - */} {translate('subscription.details.headsUpTitle')} {translate('subscription.details.headsUpBody')} + + ); + + return ( +
+ {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */} + {account?.isApprovedAccountant || account?.isApprovedAccountantClient ? ( + + + {translate('subscription.details.zeroCommitment')} + + ) : ( + <> + + {subscriptionSizeSection} + + )}
); } diff --git a/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx b/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx index 6bb2cbf5f8ab..33c7251765c4 100644 --- a/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx +++ b/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx @@ -2,6 +2,7 @@ import React, {useEffect} from 'react'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Illustrations from '@components/Icon/Illustrations'; import ScreenWrapper from '@components/ScreenWrapper'; +import ScrollView from '@components/ScrollView'; import useLocalize from '@hooks/useLocalize'; import useWindowDimensions from '@hooks/useWindowDimensions'; import Navigation from '@libs/Navigation/Navigation'; @@ -25,8 +26,10 @@ function SubscriptionSettingsPage() { shouldShowBackButton={isSmallScreenWidth} icon={Illustrations.CreditCardsNew} /> - - + + + + ); } diff --git a/src/types/onyx/Account.ts b/src/types/onyx/Account.ts index c53d7ea816f8..46eac1e94aa4 100644 --- a/src/types/onyx/Account.ts +++ b/src/types/onyx/Account.ts @@ -63,6 +63,12 @@ type Account = { /** Object containing all account information necessary to connect with Spontana */ travelSettings?: TravelSettings; + + /** Indicates whether the user is an approved accountant */ + isApprovedAccountant?: boolean; + + /** Indicates whether the user is a client of an approved accountant */ + isApprovedAccountantClient?: boolean; }; export default Account; From e4374cb7fd8ec975f964c1dac678eddcb4ef3621 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 3 Jun 2024 11:41:23 +0200 Subject: [PATCH 08/15] remove subscription size section from pay per use variant --- .../SubscriptionDetails/index.native.tsx | 33 ++++++++++------- .../SubscriptionDetails/index.tsx | 37 +++++++++++-------- 2 files changed, 41 insertions(+), 29 deletions(-) diff --git a/src/pages/settings/Subscription/SubscriptionDetails/index.native.tsx b/src/pages/settings/Subscription/SubscriptionDetails/index.native.tsx index 843d30f6e346..346cdaea86b7 100644 --- a/src/pages/settings/Subscription/SubscriptionDetails/index.native.tsx +++ b/src/pages/settings/Subscription/SubscriptionDetails/index.native.tsx @@ -20,6 +20,25 @@ function SubscriptionDetails() { const [account] = useOnyx(ONYXKEYS.ACCOUNT); + // This section is only shown when the subscription is annual + let subscripitionSizeSection = null; + + if (privateSubscription?.type === CONST.SUBSCRIPTION.TYPE.ANNUAL) { + subscripitionSizeSection = privateSubscription?.userCount ? ( + + ) : ( + + {translate('subscription.details.headsUpTitle')} + {translate('subscription.details.headsUpBody')} + + ); + } + return (
)} - {privateSubscription?.userCount ? ( - - ) : ( - - {translate('subscription.details.headsUpTitle')} - {translate('subscription.details.headsUpBody')} - - )} + {subscripitionSizeSection} )}
diff --git a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx index 4599d2376ca0..799bfaa1826a 100644 --- a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx +++ b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx @@ -39,27 +39,32 @@ function SubscriptionDetails() { setSelectedOption(option); }; - const subscriptionSizeSection = privateSubscription?.userCount ? ( - - ) : ( - <> + // This section is only shown when the subscription is annual + let subscriptionSizeSection = null; + + if (privateSubscription?.type === CONST.SUBSCRIPTION.TYPE.ANNUAL) { + subscriptionSizeSection = privateSubscription?.userCount ? ( - - {translate('subscription.details.headsUpTitle')} - {translate('subscription.details.headsUpBody')} - - - ); + ) : ( + <> + + + {translate('subscription.details.headsUpTitle')} + {translate('subscription.details.headsUpBody')} + + + ); + } return (
Date: Mon, 3 Jun 2024 14:07:00 +0200 Subject: [PATCH 09/15] change OptionItems layout --- src/components/OptionsPicker/OptionItem.tsx | 27 ++++++++++++--------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/src/components/OptionsPicker/OptionItem.tsx b/src/components/OptionsPicker/OptionItem.tsx index 2b5f30930f9d..d065f96d6d99 100644 --- a/src/components/OptionsPicker/OptionItem.tsx +++ b/src/components/OptionsPicker/OptionItem.tsx @@ -44,23 +44,28 @@ function OptionItem({title, icon, onPress, isSelected = false, isDisabled = fals wrapperStyle={[styles.flex1, style]} > - - + + - {title} + {!isDisabled ? ( + + + + ) : null} - {!isDisabled ? ( - - - - ) : null} + + {title} + From 6f1ab305e1ad3c81dbed0dcdd6391159b2be5b02 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 3 Jun 2024 15:48:49 +0200 Subject: [PATCH 10/15] make updates based on comments --- src/components/OptionsPicker/OptionItem.tsx | 13 +++--- src/components/OptionsPicker/index.tsx | 13 +++--- src/hooks/useSubscriptionPlan.ts | 9 +--- src/libs/API/types.ts | 2 +- src/libs/actions/Subscription.ts | 2 +- .../SaveWithExpensifyButton/index.native.tsx | 2 + .../SaveWithExpensifyButton/index.tsx | 2 + .../SubscriptionDetails/index.native.tsx | 15 +++---- .../SubscriptionDetails/index.tsx | 42 ++++++++++--------- .../Subscription/SubscriptionPlan.tsx | 2 + 10 files changed, 57 insertions(+), 45 deletions(-) diff --git a/src/components/OptionsPicker/OptionItem.tsx b/src/components/OptionsPicker/OptionItem.tsx index d065f96d6d99..04ccb8dc3925 100644 --- a/src/components/OptionsPicker/OptionItem.tsx +++ b/src/components/OptionsPicker/OptionItem.tsx @@ -9,11 +9,12 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import CONST from '@src/CONST'; +import type {TranslationPaths} from '@src/languages/types'; import type IconAsset from '@src/types/utils/IconAsset'; type OptionItemProps = { /** Text to be rendered */ - title: string; + title: TranslationPaths; /** Icon to be displayed above the title */ icon: IconAsset; @@ -31,7 +32,7 @@ type OptionItemProps = { style?: StyleProp; }; -function OptionItem({title, icon, onPress, isSelected = false, isDisabled = false, style}: OptionItemProps) { +function OptionItem({title, icon, onPress, isSelected = false, isDisabled, style}: OptionItemProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -51,20 +52,20 @@ function OptionItem({title, icon, onPress, isSelected = false, isDisabled = fals width={variables.iconHeader} height={variables.iconHeader} /> - {!isDisabled ? ( + {!isDisabled && ( - ) : null} + )} - {title} + {translate(title)} @@ -72,4 +73,6 @@ function OptionItem({title, icon, onPress, isSelected = false, isDisabled = fals ); } +OptionItem.displayName = 'OptionItem'; + export default OptionItem; diff --git a/src/components/OptionsPicker/index.tsx b/src/components/OptionsPicker/index.tsx index 090a7b0d3474..54fcb9b8ea79 100644 --- a/src/components/OptionsPicker/index.tsx +++ b/src/components/OptionsPicker/index.tsx @@ -1,7 +1,8 @@ -import React from 'react'; +import React, {Fragment} from 'react'; import type {StyleProp, ViewStyle} from 'react-native'; import {View} from 'react-native'; import useThemeStyles from '@hooks/useThemeStyles'; +import type {TranslationPaths} from '@src/languages/types'; import type IconAsset from '@src/types/utils/IconAsset'; import OptionItem from './OptionItem'; @@ -10,7 +11,7 @@ type OptionsPickerItem = { key: string; /** Text to be displayed */ - title: string; + title: TranslationPaths; /** Icon to be displayed above the title */ icon: IconAsset; @@ -33,13 +34,13 @@ type OptionsPickerProps = { style?: StyleProp; }; -function OptionsPicker({options, selectedOption, onOptionSelected, style, isDisabled = false}: OptionsPickerProps) { +function OptionsPicker({options, selectedOption, onOptionSelected, style, isDisabled}: OptionsPickerProps) { const styles = useThemeStyles(); return ( {options.map((option, index) => ( - + onOptionSelected(option.key)} /> {index < options.length - 1 && } - + ))} ); } +OptionsPicker.displayName = 'OptionsPicker'; + export default OptionsPicker; export type {OptionsPickerItem}; diff --git a/src/hooks/useSubscriptionPlan.ts b/src/hooks/useSubscriptionPlan.ts index 2a85ee8b6595..e9374aa7c975 100644 --- a/src/hooks/useSubscriptionPlan.ts +++ b/src/hooks/useSubscriptionPlan.ts @@ -1,5 +1,6 @@ import {useMemo} from 'react'; import {useOnyx} from 'react-native-onyx'; +import * as PolicyUtils from '@libs/PolicyUtils'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; @@ -8,13 +9,7 @@ function useSubscriptionPlan() { const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY); // Filter workspaces in which user is the admin and the type is either corporate (control) or team (collect) - const adminPolicies = useMemo( - () => - Object.values(policies ?? {}).filter( - (policy) => policy?.role === CONST.POLICY.ROLE.ADMIN && (CONST.POLICY.TYPE.CORPORATE === policy?.type || CONST.POLICY.TYPE.TEAM === policy?.type), - ), - [policies], - ); + const adminPolicies = useMemo(() => Object.values(policies ?? {}).filter((policy) => PolicyUtils.isPolicyAdmin(policy) && PolicyUtils.isPaidGroupPolicy(policy)), [policies]); if (isEmptyObject(adminPolicies)) { return null; diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts index 64ac5cb71a38..2acbbc3cd0ed 100644 --- a/src/libs/API/types.ts +++ b/src/libs/API/types.ts @@ -527,7 +527,7 @@ type ReadCommandParameters = { [READ_COMMANDS.OPEN_POLICY_MORE_FEATURES_PAGE]: Parameters.OpenPolicyMoreFeaturesPageParams; [READ_COMMANDS.OPEN_POLICY_ACCOUNTING_PAGE]: Parameters.OpenPolicyAccountingPageParams; [READ_COMMANDS.SEARCH]: Parameters.SearchParams; - [READ_COMMANDS.OPEN_SUBSCRIPTION_PAGE]: EmptyObject; + [READ_COMMANDS.OPEN_SUBSCRIPTION_PAGE]: null; }; const SIDE_EFFECT_REQUEST_COMMANDS = { diff --git a/src/libs/actions/Subscription.ts b/src/libs/actions/Subscription.ts index f28c395f1b40..c7732575aaa6 100644 --- a/src/libs/actions/Subscription.ts +++ b/src/libs/actions/Subscription.ts @@ -5,7 +5,7 @@ import {READ_COMMANDS} from '@libs/API/types'; * Fetches data when the user opens the SubscriptionSettingsPage */ function openSubscriptionPage() { - API.read(READ_COMMANDS.OPEN_SUBSCRIPTION_PAGE, {}); + API.read(READ_COMMANDS.OPEN_SUBSCRIPTION_PAGE, null); } export { diff --git a/src/pages/settings/Subscription/SaveWithExpensifyButton/index.native.tsx b/src/pages/settings/Subscription/SaveWithExpensifyButton/index.native.tsx index be12d66a4f9a..6eef4331c304 100644 --- a/src/pages/settings/Subscription/SaveWithExpensifyButton/index.native.tsx +++ b/src/pages/settings/Subscription/SaveWithExpensifyButton/index.native.tsx @@ -3,4 +3,6 @@ function SaveWithExpensifyButton() { return null; } +SaveWithExpensifyButton.displayName = 'SaveWithExpensifyButton'; + export default SaveWithExpensifyButton; diff --git a/src/pages/settings/Subscription/SaveWithExpensifyButton/index.tsx b/src/pages/settings/Subscription/SaveWithExpensifyButton/index.tsx index f6aff02c801c..ea12afe90440 100644 --- a/src/pages/settings/Subscription/SaveWithExpensifyButton/index.tsx +++ b/src/pages/settings/Subscription/SaveWithExpensifyButton/index.tsx @@ -20,4 +20,6 @@ function SaveWithExpensifyButton() { ); } +SaveWithExpensifyButton.displayName = 'SaveWithExpensifyButton'; + export default SaveWithExpensifyButton; diff --git a/src/pages/settings/Subscription/SubscriptionDetails/index.native.tsx b/src/pages/settings/Subscription/SubscriptionDetails/index.native.tsx index 346cdaea86b7..0eed6fd99ea5 100644 --- a/src/pages/settings/Subscription/SubscriptionDetails/index.native.tsx +++ b/src/pages/settings/Subscription/SubscriptionDetails/index.native.tsx @@ -21,10 +21,10 @@ function SubscriptionDetails() { const [account] = useOnyx(ONYXKEYS.ACCOUNT); // This section is only shown when the subscription is annual - let subscripitionSizeSection = null; + let subscriptionSizeSection: React.JSX.Element | null = null; if (privateSubscription?.type === CONST.SUBSCRIPTION.TYPE.ANNUAL) { - subscripitionSizeSection = privateSubscription?.userCount ? ( + subscriptionSizeSection = privateSubscription?.userCount ? ( - {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */} - {account?.isApprovedAccountant || account?.isApprovedAccountantClient ? ( + {!!account?.isApprovedAccountant || !!account?.isApprovedAccountantClient ? ( {privateSubscription?.type === CONST.SUBSCRIPTION.TYPE.PAYPERUSE ? ( ) : ( )} - {subscripitionSizeSection} + {subscriptionSizeSection} )}
); } +SubscriptionDetails.displayName = 'SubscriptionDetails'; + export default SubscriptionDetails; diff --git a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx index 799bfaa1826a..d95c82c758f5 100644 --- a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx +++ b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx @@ -1,6 +1,7 @@ -import React from 'react'; +import React, {useState} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; +import type {ValueOf} from 'type-fest'; import Icon from '@components/Icon'; import * as Illustrations from '@components/Icon/Illustrations'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; @@ -14,33 +15,35 @@ import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +type SubscriptionVariant = ValueOf; + +const options: OptionsPickerItem[] = [ + { + key: CONST.SUBSCRIPTION.TYPE.ANNUAL, + title: 'subscription.details.annual', + icon: Illustrations.SubscriptionAnnual, + }, + { + key: CONST.SUBSCRIPTION.TYPE.PAYPERUSE, + title: 'subscription.details.payPerUse', + icon: Illustrations.SubscriptionPPU, + }, +]; + function SubscriptionDetails() { const {translate} = useLocalize(); const styles = useThemeStyles(); const [privateSubscription] = useOnyx(ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION); - const [selectedOption, setSelectedOption] = React.useState(privateSubscription?.type ?? CONST.SUBSCRIPTION.TYPE.ANNUAL); + const [selectedOption, setSelectedOption] = useState(privateSubscription?.type ?? CONST.SUBSCRIPTION.TYPE.ANNUAL); const [account] = useOnyx(ONYXKEYS.ACCOUNT); - const options: OptionsPickerItem[] = [ - { - key: CONST.SUBSCRIPTION.TYPE.ANNUAL, - title: translate('subscription.details.annual'), - icon: Illustrations.SubscriptionAnnual, - }, - { - key: CONST.SUBSCRIPTION.TYPE.PAYPERUSE, - title: translate('subscription.details.payPerUse'), - icon: Illustrations.SubscriptionPPU, - }, - ]; - const onOptionSelected = (option: string) => { - setSelectedOption(option); + setSelectedOption(option as SubscriptionVariant); }; // This section is only shown when the subscription is annual - let subscriptionSizeSection = null; + let subscriptionSizeSection: React.JSX.Element | null = null; if (privateSubscription?.type === CONST.SUBSCRIPTION.TYPE.ANNUAL) { subscriptionSizeSection = privateSubscription?.userCount ? ( @@ -72,8 +75,7 @@ function SubscriptionDetails() { isCentralPane titleStyles={styles.textStrong} > - {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */} - {account?.isApprovedAccountant || account?.isApprovedAccountantClient ? ( + {!!account?.isApprovedAccountant || !!account?.isApprovedAccountantClient ? ( Date: Mon, 3 Jun 2024 18:44:54 +0200 Subject: [PATCH 11/15] add generic typing to OptionsPicker, unify styling --- src/components/OptionsPicker/index.tsx | 14 +++++++------- .../Subscription/SubscriptionDetails/index.tsx | 6 +++--- .../Subscription/SubscriptionSettingsPage.tsx | 4 +++- 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/OptionsPicker/index.tsx b/src/components/OptionsPicker/index.tsx index 54fcb9b8ea79..621b8465adba 100644 --- a/src/components/OptionsPicker/index.tsx +++ b/src/components/OptionsPicker/index.tsx @@ -6,9 +6,9 @@ import type {TranslationPaths} from '@src/languages/types'; import type IconAsset from '@src/types/utils/IconAsset'; import OptionItem from './OptionItem'; -type OptionsPickerItem = { +type OptionsPickerItem = { /** A unique identifier for each option */ - key: string; + key: TKey; /** Text to be displayed */ title: TranslationPaths; @@ -17,15 +17,15 @@ type OptionsPickerItem = { icon: IconAsset; }; -type OptionsPickerProps = { +type OptionsPickerProps = { /** Options list */ - options: OptionsPickerItem[]; + options: Array>; /** Selected option's identifier */ - selectedOption: string; + selectedOption: TKey; /** Option select handler */ - onOptionSelected: (option: string) => void; + onOptionSelected: (option: TKey) => void; /** Indicates whether the picker is disabled */ isDisabled?: boolean; @@ -34,7 +34,7 @@ type OptionsPickerProps = { style?: StyleProp; }; -function OptionsPicker({options, selectedOption, onOptionSelected, style, isDisabled}: OptionsPickerProps) { +function OptionsPicker({options, selectedOption, onOptionSelected, style, isDisabled}: OptionsPickerProps) { const styles = useThemeStyles(); return ( diff --git a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx index d95c82c758f5..31200fe27073 100644 --- a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx +++ b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx @@ -17,7 +17,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; type SubscriptionVariant = ValueOf; -const options: OptionsPickerItem[] = [ +const options: Array> = [ { key: CONST.SUBSCRIPTION.TYPE.ANNUAL, title: 'subscription.details.annual', @@ -38,8 +38,8 @@ function SubscriptionDetails() { const [selectedOption, setSelectedOption] = useState(privateSubscription?.type ?? CONST.SUBSCRIPTION.TYPE.ANNUAL); const [account] = useOnyx(ONYXKEYS.ACCOUNT); - const onOptionSelected = (option: string) => { - setSelectedOption(option as SubscriptionVariant); + const onOptionSelected = (option: SubscriptionVariant) => { + setSelectedOption(option); }; // This section is only shown when the subscription is annual diff --git a/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx b/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx index 33c7251765c4..fc0404b407a4 100644 --- a/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx +++ b/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx @@ -4,6 +4,7 @@ import * as Illustrations from '@components/Icon/Illustrations'; import ScreenWrapper from '@components/ScreenWrapper'; import ScrollView from '@components/ScrollView'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import Navigation from '@libs/Navigation/Navigation'; import * as Subscription from '@userActions/Subscription'; @@ -13,6 +14,7 @@ import SubscriptionPlan from './SubscriptionPlan'; function SubscriptionSettingsPage() { const {isSmallScreenWidth} = useWindowDimensions(); const {translate} = useLocalize(); + const styles = useThemeStyles(); useEffect(() => { Subscription.openSubscriptionPage(); @@ -26,7 +28,7 @@ function SubscriptionSettingsPage() { shouldShowBackButton={isSmallScreenWidth} icon={Illustrations.CreditCardsNew} /> - + From 67507bb85a9856192225820ae4ee86c8821bbb0f Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 4 Jun 2024 09:03:54 +0200 Subject: [PATCH 12/15] apply suggested changes --- src/components/OptionsPicker/OptionItem.tsx | 2 +- src/pages/settings/Subscription/SubscriptionDetails/index.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/OptionsPicker/OptionItem.tsx b/src/components/OptionsPicker/OptionItem.tsx index 04ccb8dc3925..865c3250db6e 100644 --- a/src/components/OptionsPicker/OptionItem.tsx +++ b/src/components/OptionsPicker/OptionItem.tsx @@ -40,7 +40,7 @@ function OptionItem({title, icon, onPress, isSelected = false, isDisabled, style diff --git a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx index 31200fe27073..c68780bc9cd3 100644 --- a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx +++ b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx @@ -43,6 +43,7 @@ function SubscriptionDetails() { }; // This section is only shown when the subscription is annual + // An onPress action is going to be assigned to these buttons in phase 2 let subscriptionSizeSection: React.JSX.Element | null = null; if (privateSubscription?.type === CONST.SUBSCRIPTION.TYPE.ANNUAL) { From e09329dfd5df67d50a9c350819c076d5e440920e Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 4 Jun 2024 15:15:57 +0200 Subject: [PATCH 13/15] change border radius and icon size --- src/pages/settings/Subscription/SubscriptionPlan.tsx | 2 ++ src/styles/index.ts | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Subscription/SubscriptionPlan.tsx b/src/pages/settings/Subscription/SubscriptionPlan.tsx index 7a3e8eb9f679..47ec71e2fb29 100644 --- a/src/pages/settings/Subscription/SubscriptionPlan.tsx +++ b/src/pages/settings/Subscription/SubscriptionPlan.tsx @@ -69,6 +69,8 @@ function SubscriptionPlan() { {benefit} diff --git a/src/styles/index.ts b/src/styles/index.ts index 9ab89eeb673f..f766e5af46e9 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -2799,13 +2799,13 @@ const styles = (theme: ThemeColors) => borderedContentCard: { borderWidth: 1, borderColor: theme.border, - borderRadius: variables.componentBorderRadiusMedium, + borderRadius: variables.componentBorderRadiusNormal, }, borderedContentCardFocused: { borderWidth: 1, borderColor: theme.borderFocus, - borderRadius: variables.componentBorderRadiusMedium, + borderRadius: variables.componentBorderRadiusNormal, }, sectionMenuItem: { From 42de07c387bb0bbbd24176a8a75eb62eb731522e Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 4 Jun 2024 15:27:41 +0200 Subject: [PATCH 14/15] remove borderedContentCardFocused style --- src/components/OptionsPicker/OptionItem.tsx | 2 +- .../settings/Subscription/SubscriptionSettingsPage.tsx | 2 +- src/styles/index.ts | 6 ------ 3 files changed, 2 insertions(+), 8 deletions(-) diff --git a/src/components/OptionsPicker/OptionItem.tsx b/src/components/OptionsPicker/OptionItem.tsx index 865c3250db6e..a787c20f515c 100644 --- a/src/components/OptionsPicker/OptionItem.tsx +++ b/src/components/OptionsPicker/OptionItem.tsx @@ -44,7 +44,7 @@ function OptionItem({title, icon, onPress, isSelected = false, isDisabled, style disabled={isDisabled} wrapperStyle={[styles.flex1, style]} > - + borderRadius: variables.componentBorderRadiusNormal, }, - borderedContentCardFocused: { - borderWidth: 1, - borderColor: theme.borderFocus, - borderRadius: variables.componentBorderRadiusNormal, - }, - sectionMenuItem: { borderRadius: 8, paddingHorizontal: 8, From 352e3543e12639e1a8207320c5d07c96531987ca Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 4 Jun 2024 18:27:18 +0200 Subject: [PATCH 15/15] add light theme ExpensifyApproved! logo --- ...scription-details__approvedlogo--light.svg | 91 +++++++++++++++++++ src/components/Icon/Illustrations.ts | 2 + .../SubscriptionDetails/index.tsx | 6 +- 3 files changed, 97 insertions(+), 2 deletions(-) create mode 100644 assets/images/subscription-details__approvedlogo--light.svg diff --git a/assets/images/subscription-details__approvedlogo--light.svg b/assets/images/subscription-details__approvedlogo--light.svg new file mode 100644 index 000000000000..580ee60c597c --- /dev/null +++ b/assets/images/subscription-details__approvedlogo--light.svg @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index 3d248498a8e4..96104932c899 100644 --- a/src/components/Icon/Illustrations.ts +++ b/src/components/Icon/Illustrations.ts @@ -90,6 +90,7 @@ import TrashCan from '@assets/images/simple-illustrations/simple-illustration__t import TreasureChest from '@assets/images/simple-illustrations/simple-illustration__treasurechest.svg'; import WalletAlt from '@assets/images/simple-illustrations/simple-illustration__wallet-alt.svg'; import Workflows from '@assets/images/simple-illustrations/simple-illustration__workflows.svg'; +import ExpensifyApprovedLogoLight from '@assets/images/subscription-details__approvedlogo--light.svg'; import ExpensifyApprovedLogo from '@assets/images/subscription-details__approvedlogo.svg'; export { @@ -184,6 +185,7 @@ export { SubscriptionAnnual, SubscriptionPPU, ExpensifyApprovedLogo, + ExpensifyApprovedLogoLight, SendMoney, CheckmarkCircle, }; diff --git a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx index c68780bc9cd3..350d84d00a46 100644 --- a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx +++ b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx @@ -33,10 +33,12 @@ const options: Array> = [ function SubscriptionDetails() { const {translate} = useLocalize(); const styles = useThemeStyles(); + const [privateSubscription] = useOnyx(ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION); + const [account] = useOnyx(ONYXKEYS.ACCOUNT); + const [preferredTheme] = useOnyx(ONYXKEYS.PREFERRED_THEME); const [selectedOption, setSelectedOption] = useState(privateSubscription?.type ?? CONST.SUBSCRIPTION.TYPE.ANNUAL); - const [account] = useOnyx(ONYXKEYS.ACCOUNT); const onOptionSelected = (option: SubscriptionVariant) => { setSelectedOption(option); @@ -79,7 +81,7 @@ function SubscriptionDetails() { {!!account?.isApprovedAccountant || !!account?.isApprovedAccountantClient ? (