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 6bb15969b1e99..0eae4c7ab8223 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 dd2d59cf6fcf8..e01d71026cfa7 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 0000000000000..5485e914fd2ef --- /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 646271b01804a..6bb2cbf5f8ab9 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 0eae4c7ab8223..16282e93d4b62 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 e01d71026cfa7..86e9055700038 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 5485e914fd2ef..28f68624d6251 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 0000000000000..e158bc5588cbc --- /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 0000000000000..d70d2d1ef5527 --- /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 0000000000000..7722e25266577 --- /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 8d3f53be9396c..47480649cd89e 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 0000000000000..bf8860a507ed4 --- /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 4686a2adf71db..d2836c3c6aa4b 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 bf8860a507ed4..cf0157db48e80 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 0000000000000..090a7b0d3474f --- /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 28f68624d6251..9d4e16ef773b0 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 d2836c3c6aa4b..8348579e8a89d 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 cf0157db48e80..2b5f30930f9dc 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 0000000000000..843d30f6e3463 --- /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 9d4e16ef773b0..4599d2376ca03 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 6bb2cbf5f8ab9..33c7251765c4d 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 c53d7ea816f85..46eac1e94aa43 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 843d30f6e3463..346cdaea86b73 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 4599d2376ca03..799bfaa1826a1 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 2b5f30930f9dc..d065f96d6d994 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 d065f96d6d994..04ccb8dc3925d 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 090a7b0d3474f..54fcb9b8ea79c 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 2a85ee8b65959..e9374aa7c9750 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 64ac5cb71a382..2acbbc3cd0eda 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 f28c395f1b40f..c7732575aaa65 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 be12d66a4f9a2..6eef4331c304f 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 f6aff02c801c5..ea12afe904406 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 346cdaea86b73..0eed6fd99ea52 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 799bfaa1826a1..d95c82c758f53 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 54fcb9b8ea79c..621b8465adba1 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 d95c82c758f53..31200fe270732 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 33c7251765c4d..fc0404b407a4a 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 04ccb8dc3925d..865c3250db6ee 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 31200fe270732..c68780bc9cd3b 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 7a3e8eb9f6797..47ec71e2fb298 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 9ab89eeb673fd..f766e5af46e96 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 865c3250db6ee..a787c20f515c8 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 0000000000000..580ee60c597c3 --- /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 3d248498a8e45..96104932c899c 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 c68780bc9cd3b..350d84d00a46e 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 ? (