From 633a2855a05b3524c2ec8068586c0519b264464e Mon Sep 17 00:00:00 2001 From: Michal Muzyk Date: Wed, 5 Jun 2024 15:09:42 +0200 Subject: [PATCH 1/6] feat: subscription size action --- .../SubscriptionDetails/index.tsx | 35 +++++++++---------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx index 350d84d00a46..ccf6b7cafa18 100644 --- a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx +++ b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx @@ -11,9 +11,11 @@ import Section from '@components/Section'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import Navigation from '@libs/Navigation/Navigation'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import ROUTES from '@src/ROUTES'; type SubscriptionVariant = ValueOf; @@ -44,33 +46,30 @@ function SubscriptionDetails() { setSelectedOption(option); }; - // 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; + const onSubscriptionSizePress = () => { + Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION_SIZE); + }; - if (privateSubscription?.type === CONST.SUBSCRIPTION.TYPE.ANNUAL) { - subscriptionSizeSection = privateSubscription?.userCount ? ( - - ) : ( + // This section is only shown when the subscription is annual + const subscriptionSizeSection: React.JSX.Element | null = + privateSubscription?.type === CONST.SUBSCRIPTION.TYPE.ANNUAL ? ( <> - - {translate('subscription.details.headsUpTitle')} - {translate('subscription.details.headsUpBody')} - + {!privateSubscription?.userCount && ( + + {translate('subscription.details.headsUpTitle')} + {translate('subscription.details.headsUpBody')} + + )} - ); - } + ) : null; return (
Date: Thu, 6 Jun 2024 09:21:22 +0200 Subject: [PATCH 2/6] fix: change condition for displaying size section --- src/pages/settings/Subscription/SubscriptionDetails/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx index ccf6b7cafa18..9d858fa995ef 100644 --- a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx +++ b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx @@ -52,7 +52,7 @@ function SubscriptionDetails() { // This section is only shown when the subscription is annual const subscriptionSizeSection: React.JSX.Element | null = - privateSubscription?.type === CONST.SUBSCRIPTION.TYPE.ANNUAL ? ( + selectedOption === CONST.SUBSCRIPTION.TYPE.ANNUAL ? ( <> Date: Thu, 6 Jun 2024 10:32:29 +0200 Subject: [PATCH 3/6] fix: cr fixes --- src/components/OptionsPicker/OptionItem.tsx | 5 +---- src/languages/en.ts | 2 +- src/languages/es.ts | 2 +- .../settings/Subscription/SubscriptionSettingsPage.tsx | 9 +++++++-- src/styles/index.ts | 4 ---- 5 files changed, 10 insertions(+), 12 deletions(-) diff --git a/src/components/OptionsPicker/OptionItem.tsx b/src/components/OptionsPicker/OptionItem.tsx index a787c20f515c..629187044b92 100644 --- a/src/components/OptionsPicker/OptionItem.tsx +++ b/src/components/OptionsPicker/OptionItem.tsx @@ -54,10 +54,7 @@ function OptionItem({title, icon, onPress, isSelected = false, isDisabled, style /> {!isDisabled && ( - + )} diff --git a/src/languages/en.ts b/src/languages/en.ts index 8ed0ef8207f1..b8d487faab14 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3217,7 +3217,7 @@ export default { eachMonth: 'Each month, your subscription covers up to the number of active members set above. Any time you increase your subscription size, you’ll start a new 12-month subscription at that new size.', note: 'Note: An active member is anyone who has created, edited, submitted, approved, reimbursed, or exported expense data tied to your company workspace.', - confirmDetails: 'Confirm your new annual subscription details', + confirmDetails: 'Confirm your new annual subscription details:', subscriptionSize: 'Subscription size', activeMembers: ({size}) => `${size} active members/month`, subscriptionRenews: 'Subscription renews', diff --git a/src/languages/es.ts b/src/languages/es.ts index 2316a5d09c9f..fde907378ba7 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -3723,7 +3723,7 @@ export default { eachMonth: 'Cada mes, tu suscripción cubre hasta el número de miembros activos establecido anteriormente. Cada vez que aumentes el tamaño de tu suscripción, iniciarás una nueva suscripción de 12 meses con ese nuevo tamaño.', note: 'Nota: Un miembro activo es cualquiera que haya creado, editado, enviado, aprobado, reembolsado, o exportado datos de gastos vinculados al espacio de trabajo de tu empresa.', - confirmDetails: 'Confirma los datos de tu nueva suscripción anual', + confirmDetails: 'Confirma los datos de tu nueva suscripción anual:', subscriptionSize: 'Tamaño de suscripción', activeMembers: ({size}) => `${size} miembros activos/mes`, subscriptionRenews: 'Renovación de la suscripción', diff --git a/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx b/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx index 932c83c1b7d2..0480399a8323 100644 --- a/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx +++ b/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx @@ -1,4 +1,5 @@ import React, {useEffect} from 'react'; +import {View} from 'react-native'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Illustrations from '@components/Icon/Illustrations'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -7,6 +8,7 @@ import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useSubscriptionPlan from '@hooks/useSubscriptionPlan'; import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import Navigation from '@libs/Navigation/Navigation'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; import * as Subscription from '@userActions/Subscription'; @@ -15,6 +17,7 @@ import SubscriptionPlan from './SubscriptionPlan'; function SubscriptionSettingsPage() { const {shouldUseNarrowLayout} = useResponsiveLayout(); + const {isSmallScreenWidth} = useWindowDimensions(); const {translate} = useLocalize(); const styles = useThemeStyles(); const subscriptionPlan = useSubscriptionPlan(); @@ -36,8 +39,10 @@ function SubscriptionSettingsPage() { icon={Illustrations.CreditCardsNew} /> - - + + + + ); diff --git a/src/styles/index.ts b/src/styles/index.ts index 718942582801..1fdcc7bc8c0c 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -2818,10 +2818,6 @@ const styles = (theme: ThemeColors) => alignItems: 'center', }, - sectionSelectCircle: { - backgroundColor: colors.productDark200, - }, - qrShareSection: { width: 264, }, From 2a8fd0981c39f23d448717425edd48779ab6a001 Mon Sep 17 00:00:00 2001 From: Michal Muzyk Date: Thu, 6 Jun 2024 15:43:52 +0200 Subject: [PATCH 4/6] fix: changed select circle bg --- src/components/OptionsPicker/OptionItem.tsx | 5 ++++- src/styles/index.ts | 4 ++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/OptionsPicker/OptionItem.tsx b/src/components/OptionsPicker/OptionItem.tsx index 629187044b92..a787c20f515c 100644 --- a/src/components/OptionsPicker/OptionItem.tsx +++ b/src/components/OptionsPicker/OptionItem.tsx @@ -54,7 +54,10 @@ function OptionItem({title, icon, onPress, isSelected = false, isDisabled, style /> {!isDisabled && ( - + )} diff --git a/src/styles/index.ts b/src/styles/index.ts index 88d3084b45a7..023e6eabd1f9 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -2818,6 +2818,10 @@ const styles = (theme: ThemeColors) => alignItems: 'center', }, + sectionSelectCircle: { + backgroundColor: theme.highlightBG, + }, + qrShareSection: { width: 264, }, From 7f60a5d7db1d8710412a1a22a7eba0ef1d87bfec Mon Sep 17 00:00:00 2001 From: Michal Muzyk Date: Fri, 7 Jun 2024 15:47:03 +0200 Subject: [PATCH 5/6] fix: set default size to empty string --- .../settings/Subscription/SubscriptionSize/substeps/Size.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Subscription/SubscriptionSize/substeps/Size.tsx b/src/pages/settings/Subscription/SubscriptionSize/substeps/Size.tsx index 75e0add6dd5e..15be8842b3bb 100644 --- a/src/pages/settings/Subscription/SubscriptionSize/substeps/Size.tsx +++ b/src/pages/settings/Subscription/SubscriptionSize/substeps/Size.tsx @@ -20,7 +20,7 @@ function Size({onNext}: SizeProps) { const defaultValues = { // TODO this is temporary and default value will be replaced in next phase once data in ONYX is ready - [INPUT_IDS.SUBSCRIPTION_SIZE]: '0', + [INPUT_IDS.SUBSCRIPTION_SIZE]: '', }; return ( From 9d915406e6522f6b7d7dc2a832eb70dbcdd131af Mon Sep 17 00:00:00 2001 From: Michal Muzyk Date: Mon, 10 Jun 2024 08:59:10 +0200 Subject: [PATCH 6/6] fix: added autoFocus to size input --- .../settings/Subscription/SubscriptionSize/substeps/Size.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/settings/Subscription/SubscriptionSize/substeps/Size.tsx b/src/pages/settings/Subscription/SubscriptionSize/substeps/Size.tsx index 15be8842b3bb..cdcc65197cbd 100644 --- a/src/pages/settings/Subscription/SubscriptionSize/substeps/Size.tsx +++ b/src/pages/settings/Subscription/SubscriptionSize/substeps/Size.tsx @@ -4,6 +4,7 @@ import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; import Text from '@components/Text'; import TextInput from '@components/TextInput'; +import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import type {SubStepProps} from '@hooks/useSubStep/types'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -17,6 +18,7 @@ type SizeProps = SubStepProps; function Size({onNext}: SizeProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); + const {inputCallbackRef} = useAutoFocusInput(); const defaultValues = { // TODO this is temporary and default value will be replaced in next phase once data in ONYX is ready @@ -35,6 +37,7 @@ function Size({onNext}: SizeProps) { {translate('subscription.subscriptionSize.yourSize')}