From 5ae57d9e45c7dca9f5e6c78232895f3e1b7b29de Mon Sep 17 00:00:00 2001
From: Michal Muzyk <mimuzyk@gmail.com>
Date: Mon, 3 Jun 2024 09:49:49 +0200
Subject: [PATCH 01/13] feat: subscription settings ui

---
 src/CONST.ts                                  |  1 +
 src/components/FeedbackSurvey.tsx             | 75 +++++++++++++++
 src/languages/en.ts                           | 21 ++++
 src/languages/es.ts                           | 21 ++++
 .../DisableAutoRenewSurveyPage.tsx            | 35 +++++++
 .../Subscription/SubscriptionSettingsPage.tsx |  2 +
 .../SubscriptionSettingsSection.tsx           | 96 +++++++++++++++++++
 .../workflows/ToggleSettingsOptionRow.tsx     | 15 ++-
 8 files changed, 261 insertions(+), 5 deletions(-)
 create mode 100644 src/components/FeedbackSurvey.tsx
 create mode 100644 src/pages/settings/Subscription/DisableAutoRenewSurveyPage.tsx
 create mode 100644 src/pages/settings/Subscription/SubscriptionSettingsSection.tsx

diff --git a/src/CONST.ts b/src/CONST.ts
index 6517ece4276d..000ad3798d72 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -594,6 +594,7 @@ const CONST = {
     ONFIDO_TERMS_OF_SERVICE_URL: 'https://onfido.com/terms-of-service/',
     LIST_OF_RESTRICTED_BUSINESSES: 'https://community.expensify.com/discussion/6191/list-of-restricted-businesses',
     TRAVEL_TERMS_URL: `${USE_EXPENSIFY_URL}/travelterms`,
+    CORPORATE_KARMA_URL: `${USE_EXPENSIFY_URL}/corporate-karma`,
 
     // Use Environment.getEnvironmentURL to get the complete URL with port number
     DEV_NEW_EXPENSIFY_URL: 'https://dev.new.expensify.com:',
diff --git a/src/components/FeedbackSurvey.tsx b/src/components/FeedbackSurvey.tsx
new file mode 100644
index 000000000000..92743c1f3f0e
--- /dev/null
+++ b/src/components/FeedbackSurvey.tsx
@@ -0,0 +1,75 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
+import type {TranslationPaths} from '@src/languages/types';
+import Button from './Button';
+import FixedFooter from './FixedFooter';
+import FormAlertWithSubmitButton from './FormAlertWithSubmitButton';
+import SingleOptionSelector from './SingleOptionSelector';
+import Text from './Text';
+
+type FeedbackSurveyProps = {
+    /** Title of the survey */
+    title: string;
+    /** Description of the survey */
+    description: string;
+    /** Callback to be called when the survey is submitted */
+    onSubmit: () => void;
+};
+
+const OPTION_KEYS = {
+    IMPROVEMENT: 'improvement',
+    EXPENSIVE: 'expensive',
+    SUPPORT: 'support',
+    CLOSING: 'closing',
+};
+
+type Option = {
+    key: string;
+    label: TranslationPaths;
+};
+
+const OPTIONS: Option[] = [
+    {key: OPTION_KEYS.IMPROVEMENT, label: 'subscription.subscriptionSettings.functionalityNeeds'},
+    {key: OPTION_KEYS.EXPENSIVE, label: 'subscription.subscriptionSettings.tooExpensive'},
+    {key: OPTION_KEYS.SUPPORT, label: 'subscription.subscriptionSettings.inadequateCustomerSupport'},
+    {key: OPTION_KEYS.CLOSING, label: 'subscription.subscriptionSettings.companyClosing'},
+];
+
+function FeedbackSurvey({title, description, onSubmit}: FeedbackSurveyProps) {
+    const {translate} = useLocalize();
+    const [reason, setReason] = useState<Option>();
+    const [shouldShowReasonError, setShouldShowReasonError] = useState(false);
+
+    const handleOptionSelect = (option: Option) => {
+        setReason(option);
+    };
+
+    return (
+        <View>
+            <Text>{title}</Text>
+            <Text>{description}</Text>
+            <SingleOptionSelector
+                options={OPTIONS}
+                selectedOptionKey={reason?.key}
+                onSelectOption={handleOptionSelect}
+            />
+            <FixedFooter>
+                <Button
+                    onPress={onSubmit}
+                    text={translate('common.submit')}
+                />
+                <FormAlertWithSubmitButton
+                    isAlertVisible={shouldShowReasonError}
+                    onSubmit={onSubmit}
+                    message="reportCardLostOrDamaged.reasonError"
+                    buttonText={translate('common.submit')}
+                />
+            </FixedFooter>
+        </View>
+    );
+}
+
+FeedbackSurvey.displayName = 'FeedbackSurvey';
+
+export default FeedbackSurvey;
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 635248caaf88..37b6c33948ab 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -3106,4 +3106,25 @@ export default {
     systemMessage: {
         mergedWithCashTransaction: 'matched a receipt to this transaction.',
     },
+    subscription: {
+        subscriptionSettings: {
+            title: 'Subscription settings',
+            autoRenew: 'Auto-renew',
+            yourAnnual: 'Your annual subscription will automatically renew on (date). You can switch to pay-per-use starting 30 days before renewal.',
+            autoIncrease: 'Auto-increase annual seats',
+            saveUpTo: 'Save up to $10/month per active member',
+            automaticallyIncrease:
+                'Automatically increase your annual seats to accommodate for active members that exceed your subscription size. Note: This will extend your annual subscription end date.',
+            donateToExpensify: 'Donate $1 to Expensify.org for every $500 your team spends each month.',
+            disableAutoRenew: 'Disable auto-renew',
+            helpUsImprove: 'Help us improve Expensify',
+            whatsMainReason: 'What’s the main reason you’re disabling auto-renew on your subscription?',
+            functionalityNeeds: 'Functionality needs improvement',
+            tooExpensive: 'Too expensive',
+            inadequateCustomerSupport: 'Inadequate customer support',
+            companyClosing: 'Company closing, downsizing, or acquired',
+            renewsOn: ({date}) => `Renews on ${date}`,
+            corporateKarma: 'Corporate Karma',
+        },
+    },
 } satisfies TranslationBase;
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 0886e614273a..a0e141ee7a21 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -3610,4 +3610,25 @@ export default {
     systemMessage: {
         mergedWithCashTransaction: 'encontró un recibo para esta transacción.',
     },
+    subscription: {
+        subscriptionSettings: {
+            title: 'Configuración de suscripción',
+            autoRenew: 'Auto-renovación',
+            yourAnnual: 'Tu suscripción anual se renovará el (date). Puedes cambiar a pago-por-uso a partir de los 30 días previos a la renovación.',
+            autoIncrease: 'Auto-incremento',
+            saveUpTo: 'Ahorre hasta $10 al mes por miembro activo',
+            automaticallyIncrease:
+                'Aumenta automáticamente tus plazas anuales para dar lugar a los miembros activos que superen el tamaño de tu suscripción. Nota: Esto ampliará la fecha de finalización de tu suscripción anual.',
+            donateToExpensify: 'Dona $1 a Expensify.org por cada $500 que tu equipo gaste cada mes.',
+            disableAutoRenew: 'Desactivar auto-renovación',
+            helpUsImprove: 'Ayúdanos a mejorar Expensify',
+            whatsMainReason: '¿Cuál es la razón principal por la que deseas desactivar la auto-renovación de tu suscripción?',
+            functionalityNeeds: 'Hay que mejorar la funcionalidad',
+            tooExpensive: 'Demasiado caro',
+            inadequateCustomerSupport: 'Atención al cliente inadecuada',
+            companyClosing: 'Cierre, reducción, o adquisición de la empresa',
+            renewsOn: ({date}) => `Renews on ${date}`, // TODO translate
+            corporateKarma: 'Corporate Karma', // TODO translate
+        },
+    },
 } satisfies EnglishTranslation;
diff --git a/src/pages/settings/Subscription/DisableAutoRenewSurveyPage.tsx b/src/pages/settings/Subscription/DisableAutoRenewSurveyPage.tsx
new file mode 100644
index 000000000000..7fb26ad71f43
--- /dev/null
+++ b/src/pages/settings/Subscription/DisableAutoRenewSurveyPage.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import FeedbackSurvey from '@components/FeedbackSurvey';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import * as Illustrations from '@components/Icon/Illustrations';
+import ScreenWrapper from '@components/ScreenWrapper';
+import useLocalize from '@hooks/useLocalize';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import Navigation from '@libs/Navigation/Navigation';
+
+function DisableAutoRenewSurveyPage() {
+    const {isSmallScreenWidth} = useWindowDimensions();
+    const {translate} = useLocalize();
+
+    const handleSubmit = () => {};
+
+    return (
+        <ScreenWrapper testID={DisableAutoRenewSurveyPage.displayName}>
+            <HeaderWithBackButton
+                title={translate('workspace.common.subscription')}
+                onBackButtonPress={() => Navigation.goBack()}
+                shouldShowBackButton={isSmallScreenWidth}
+                icon={Illustrations.CreditCardsNew}
+            />
+            <FeedbackSurvey
+                title={translate('subscription.subscriptionSettings.disableAutoRenew')}
+                description={translate('subscription.subscriptionSettings.whatsMainReason')}
+                onSubmit={handleSubmit}
+            />
+        </ScreenWrapper>
+    );
+}
+
+DisableAutoRenewSurveyPage.displayName = 'DisableAutoRenewSurveyPage';
+
+export default DisableAutoRenewSurveyPage;
diff --git a/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx b/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx
index 83ede1532efc..349e563482e1 100644
--- a/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx
+++ b/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx
@@ -5,6 +5,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Navigation from '@libs/Navigation/Navigation';
+import SubscriptionSettingsSection from './SubscriptionSettingsSection';
 
 function SubscriptionSettingsPage() {
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -18,6 +19,7 @@ function SubscriptionSettingsPage() {
                 shouldShowBackButton={isSmallScreenWidth}
                 icon={Illustrations.CreditCardsNew}
             />
+            <SubscriptionSettingsSection />
         </ScreenWrapper>
     );
 }
diff --git a/src/pages/settings/Subscription/SubscriptionSettingsSection.tsx b/src/pages/settings/Subscription/SubscriptionSettingsSection.tsx
new file mode 100644
index 000000000000..bd1d5bd7652f
--- /dev/null
+++ b/src/pages/settings/Subscription/SubscriptionSettingsSection.tsx
@@ -0,0 +1,96 @@
+import {format} from 'date-fns';
+import React, {useMemo} from 'react';
+import {View} from 'react-native';
+import Section from '@components/Section';
+import Text from '@components/Text';
+import TextLink from '@components/TextLink';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import ToggleSettingOptionRow from '@pages/workspace/workflows/ToggleSettingsOptionRow';
+import CONST from '@src/CONST';
+
+function SubscriptionSettingsSection() {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const theme = useTheme();
+
+    // TODO these values will come from API in next phase
+    const isAutoRenewOn = true;
+    const isAutoIncreaseOn = false;
+    const isCorporateKarmaOn = true;
+
+    // TODO this will come from API in next phase
+    const isCollectPlan = true;
+    // TODO this will come from API in next phase
+    const expirationDate = format(new Date(), CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT);
+
+    // TODO all actions will be implemented in next phase
+    const handleAutoRenewToggle = () => {};
+    const handleAutoIncreaseToggle = () => {};
+    const handleCorporateKarmaToggle = () => {};
+
+    const customTitle = useMemo(() => {
+        const customTitleSecondSentenceStyles = [styles.textNormal, {color: theme.success}];
+
+        return (
+            <View style={[styles.flexRow, styles.flex1, styles.alignItemsCenter]}>
+                <Text style={[styles.mr1, styles.textNormalThemeText]}>{translate('subscription.subscriptionSettings.autoIncrease')}</Text>
+                <Text style={customTitleSecondSentenceStyles}>{translate('subscription.subscriptionSettings.saveUpTo')}</Text>
+            </View>
+        );
+    }, [styles.alignItemsCenter, styles.flex1, styles.flexRow, styles.mr1, styles.textNormal, styles.textNormalThemeText, theme.success, translate]);
+
+    return (
+        <Section
+            title={translate('subscription.subscriptionSettings.title')}
+            titleStyles={[styles.textStrong]}
+            isCentralPane
+        >
+            {isCollectPlan ? (
+                <>
+                    <View style={[styles.mt5]}>
+                        <ToggleSettingOptionRow
+                            title={translate('subscription.subscriptionSettings.autoRenew')}
+                            switchAccessibilityLabel={translate('subscription.subscriptionSettings.autoRenew')}
+                            onToggle={handleAutoRenewToggle}
+                            isActive={isAutoRenewOn}
+                        />
+                        <Text style={[styles.mutedTextLabel, styles.mt2]}>{translate('subscription.subscriptionSettings.renewsOn', {date: expirationDate})}</Text>
+                    </View>
+                    <View style={[styles.mt3]}>
+                        <ToggleSettingOptionRow
+                            customTitle={customTitle}
+                            switchAccessibilityLabel={translate('subscription.subscriptionSettings.autoRenew')}
+                            onToggle={handleAutoIncreaseToggle}
+                            isActive={isAutoIncreaseOn}
+                        />
+                        <Text style={[styles.mutedTextLabel, styles.mt2]}>{translate('subscription.subscriptionSettings.automaticallyIncrease')}</Text>
+                    </View>
+                </>
+            ) : (
+                <View style={[styles.mt5]}>
+                    <ToggleSettingOptionRow
+                        title={translate('subscription.subscriptionSettings.corporateKarma')}
+                        switchAccessibilityLabel={translate('subscription.subscriptionSettings.corporateKarma')}
+                        onToggle={handleCorporateKarmaToggle}
+                        isActive={isCorporateKarmaOn}
+                    />
+                    <View style={[styles.flexRow, styles.mt2, styles.alignItemsCenter]}>
+                        <Text style={[styles.mutedTextLabel, styles.mr1]}>{translate('subscription.subscriptionSettings.donateToExpensify')}</Text>
+                        <TextLink
+                            style={[styles.label]}
+                            href={CONST.CORPORATE_KARMA_URL}
+                        >
+                            {translate('common.learnMore')}
+                        </TextLink>
+                    </View>
+                </View>
+            )}
+        </Section>
+    );
+}
+
+SubscriptionSettingsSection.displayName = 'SubscriptionSettingsSection';
+
+export default SubscriptionSettingsSection;
diff --git a/src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx b/src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx
index d2aea2a2f987..d812ae0dfe19 100644
--- a/src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx
+++ b/src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx
@@ -13,7 +13,9 @@ type ToggleSettingOptionRowProps = {
     /** Icon to be shown for the option */
     icon?: IconAsset;
     /** Title of the option */
-    title: string;
+    title?: string;
+    /** Custom title for the option */
+    customTitle?: React.ReactNode;
     /** Subtitle of the option */
     subtitle?: string;
     /** Accessibility label for the switch */
@@ -44,6 +46,7 @@ const ICON_SIZE = 48;
 function ToggleSettingOptionRow({
     icon,
     title,
+    customTitle,
     subtitle,
     switchAccessibilityLabel,
     shouldPlaceSubtitleBelowSwitch,
@@ -83,10 +86,12 @@ function ToggleSettingOptionRow({
                                 additionalStyles={[styles.mr3]}
                             />
                         )}
-                        <View style={[styles.flexColumn, styles.flex1]}>
-                            <Text style={[styles.textNormal, styles.lh20, titleStyle]}>{title}</Text>
-                            {!shouldPlaceSubtitleBelowSwitch && subtitle && subTitleView}
-                        </View>
+                        {customTitle ?? (
+                            <View style={[styles.flexColumn, styles.flex1]}>
+                                <Text style={[styles.textNormal, styles.lh20, titleStyle]}>{title}</Text>
+                                {!shouldPlaceSubtitleBelowSwitch && subtitle && subTitleView}
+                            </View>
+                        )}
                     </View>
                     <Switch
                         accessibilityLabel={switchAccessibilityLabel}

From 7881f60e399cce6d110eab37c64ed39f046e8b00 Mon Sep 17 00:00:00 2001
From: Michal Muzyk <mimuzyk@gmail.com>
Date: Mon, 3 Jun 2024 14:31:55 +0200
Subject: [PATCH 02/13] feat: disable auto renew page

---
 src/ROUTES.ts                                 |  1 +
 src/SCREENS.ts                                |  1 +
 src/components/FeedbackSurvey.tsx             | 63 +++++++++++--------
 src/components/SingleOptionSelector.tsx       | 13 +++-
 src/languages/en.ts                           | 11 ++--
 src/languages/es.ts                           | 13 ++--
 .../ModalStackNavigators/index.tsx            |  1 +
 .../CENTRAL_PANE_TO_RHP_MAPPING.ts            |  2 +-
 src/libs/Navigation/linkingConfig/config.ts   |  3 +
 .../DisableAutoRenewSurveyPage.tsx            | 20 +++---
 .../SubscriptionSettingsSection.tsx           | 37 +++++++----
 11 files changed, 106 insertions(+), 59 deletions(-)

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 82acc26e3100..3f88e7ab6fec 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -102,6 +102,7 @@ const ROUTES = {
     SETTINGS_PRONOUNS: 'settings/profile/pronouns',
     SETTINGS_PREFERENCES: 'settings/preferences',
     SETTINGS_SUBSCRIPTION: 'settings/subscription',
+    SETTINGS_SUBSCRIPTION_DISABLE_AUTO_RENEW_SURVEY: 'settings/subscription/disable-auto-renew-survey',
     SETTINGS_PRIORITY_MODE: 'settings/preferences/priority-mode',
     SETTINGS_LANGUAGE: 'settings/preferences/language',
     SETTINGS_THEME: 'settings/preferences/theme',
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
index 1ec1462da32c..0e9c0cfbe759 100644
--- a/src/SCREENS.ts
+++ b/src/SCREENS.ts
@@ -106,6 +106,7 @@ const SCREENS = {
 
         SUBSCRIPTION: {
             ROOT: 'Settings_Subscription',
+            DISABLE_AUTO_RENEW_SURVEY: 'Settings_Subscription_DisableAutoRenewSurvey',
         },
     },
     SAVE_THE_WORLD: {
diff --git a/src/components/FeedbackSurvey.tsx b/src/components/FeedbackSurvey.tsx
index 92743c1f3f0e..1e5d36981d2b 100644
--- a/src/components/FeedbackSurvey.tsx
+++ b/src/components/FeedbackSurvey.tsx
@@ -1,8 +1,10 @@
+import {CONST as COMMON_CONST} from 'expensify-common/lib/CONST';
 import React, {useState} from 'react';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import type {TranslationPaths} from '@src/languages/types';
-import Button from './Button';
 import FixedFooter from './FixedFooter';
 import FormAlertWithSubmitButton from './FormAlertWithSubmitButton';
 import SingleOptionSelector from './SingleOptionSelector';
@@ -14,14 +16,7 @@ type FeedbackSurveyProps = {
     /** Description of the survey */
     description: string;
     /** Callback to be called when the survey is submitted */
-    onSubmit: () => void;
-};
-
-const OPTION_KEYS = {
-    IMPROVEMENT: 'improvement',
-    EXPENSIVE: 'expensive',
-    SUPPORT: 'support',
-    CLOSING: 'closing',
+    onSubmit: (reason: Option) => void;
 };
 
 type Option = {
@@ -30,39 +25,53 @@ type Option = {
 };
 
 const OPTIONS: Option[] = [
-    {key: OPTION_KEYS.IMPROVEMENT, label: 'subscription.subscriptionSettings.functionalityNeeds'},
-    {key: OPTION_KEYS.EXPENSIVE, label: 'subscription.subscriptionSettings.tooExpensive'},
-    {key: OPTION_KEYS.SUPPORT, label: 'subscription.subscriptionSettings.inadequateCustomerSupport'},
-    {key: OPTION_KEYS.CLOSING, label: 'subscription.subscriptionSettings.companyClosing'},
+    {key: COMMON_CONST.SUBSCRIPTION_CHANGE_REASONS.TOO_LIMITED.id, label: 'feedbackSurvey.functionalityNeeds'},
+    {key: COMMON_CONST.SUBSCRIPTION_CHANGE_REASONS.TOO_EXPENSIVE.id, label: 'feedbackSurvey.tooExpensive'},
+    {key: COMMON_CONST.SUBSCRIPTION_CHANGE_REASONS.INADEQUATE_SUPPORT.id, label: 'feedbackSurvey.inadequateCustomerSupport'},
+    {key: COMMON_CONST.SUBSCRIPTION_CHANGE_REASONS.BUSINESS_CLOSING.id, label: 'feedbackSurvey.companyClosing'},
 ];
 
 function FeedbackSurvey({title, description, onSubmit}: FeedbackSurveyProps) {
     const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const theme = useTheme();
+
+    const selectCircleStyles = {borderColor: theme.border};
     const [reason, setReason] = useState<Option>();
     const [shouldShowReasonError, setShouldShowReasonError] = useState(false);
 
     const handleOptionSelect = (option: Option) => {
+        setShouldShowReasonError(false);
         setReason(option);
     };
 
+    const handleSubmit = () => {
+        if (!reason) {
+            setShouldShowReasonError(true);
+            return;
+        }
+
+        onSubmit(reason);
+    };
+
     return (
-        <View>
-            <Text>{title}</Text>
-            <Text>{description}</Text>
-            <SingleOptionSelector
-                options={OPTIONS}
-                selectedOptionKey={reason?.key}
-                onSelectOption={handleOptionSelect}
-            />
-            <FixedFooter>
-                <Button
-                    onPress={onSubmit}
-                    text={translate('common.submit')}
+        <View style={[styles.flexGrow1, styles.justifyContentBetween]}>
+            <View style={[styles.mh5]}>
+                <Text style={[styles.textHeadline]}>{title}</Text>
+                <Text style={[styles.mt1, styles.mb3, styles.textNormalThemeText]}>{description}</Text>
+                <SingleOptionSelector
+                    options={OPTIONS}
+                    optionRowStyles={[styles.mb7]}
+                    selectCircleStyles={[selectCircleStyles]}
+                    selectedOptionKey={reason?.key}
+                    onSelectOption={handleOptionSelect}
                 />
+            </View>
+            <FixedFooter>
                 <FormAlertWithSubmitButton
                     isAlertVisible={shouldShowReasonError}
-                    onSubmit={onSubmit}
-                    message="reportCardLostOrDamaged.reasonError"
+                    onSubmit={handleSubmit}
+                    message="common.error.pleaseCompleteForm"
                     buttonText={translate('common.submit')}
                 />
             </FixedFooter>
diff --git a/src/components/SingleOptionSelector.tsx b/src/components/SingleOptionSelector.tsx
index 9832167e3f6a..c1088f9cd153 100644
--- a/src/components/SingleOptionSelector.tsx
+++ b/src/components/SingleOptionSelector.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -22,9 +23,15 @@ type SingleOptionSelectorProps = {
 
     /** Function to be called when an option is selected */
     onSelectOption?: (item: Item) => void;
+
+    /** Styles for the option row element */
+    optionRowStyles?: StyleProp<ViewStyle>;
+
+    /** Styles for the select circle */
+    selectCircleStyles?: StyleProp<ViewStyle>;
 };
 
-function SingleOptionSelector({options = [], selectedOptionKey, onSelectOption = () => {}}: SingleOptionSelectorProps) {
+function SingleOptionSelector({options = [], selectedOptionKey, onSelectOption = () => {}, optionRowStyles, selectCircleStyles}: SingleOptionSelectorProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     return (
@@ -35,7 +42,7 @@ function SingleOptionSelector({options = [], selectedOptionKey, onSelectOption =
                     key={option.key}
                 >
                     <PressableWithoutFeedback
-                        style={styles.singleOptionSelectorRow}
+                        style={[styles.singleOptionSelectorRow, optionRowStyles]}
                         onPress={() => onSelectOption(option)}
                         role={CONST.ROLE.BUTTON}
                         accessibilityState={{checked: selectedOptionKey === option.key}}
@@ -44,7 +51,7 @@ function SingleOptionSelector({options = [], selectedOptionKey, onSelectOption =
                     >
                         <SelectCircle
                             isChecked={selectedOptionKey ? selectedOptionKey === option.key : false}
-                            selectCircleStyles={[styles.ml0, styles.singleOptionSelectorCircle]}
+                            selectCircleStyles={[styles.ml0, styles.singleOptionSelectorCircle, selectCircleStyles]}
                         />
                         <Text>{translate(option.label)}</Text>
                     </PressableWithoutFeedback>
diff --git a/src/languages/en.ts b/src/languages/en.ts
index b13b45930d97..bb66e983ce37 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -241,6 +241,7 @@ export default {
             enterAmount: 'Enter an amount.',
             enterDate: 'Enter a date.',
             invalidTimeRange: 'Please enter a time using the 12-hour clock format (e.g., 2:30 PM).',
+            pleaseCompleteForm: 'Please complete the form above to continue.',
         },
         comma: 'comma',
         semicolon: 'semicolon',
@@ -3156,12 +3157,14 @@ export default {
             disableAutoRenew: 'Disable auto-renew',
             helpUsImprove: 'Help us improve Expensify',
             whatsMainReason: 'What’s the main reason you’re disabling auto-renew on your subscription?',
-            functionalityNeeds: 'Functionality needs improvement',
-            tooExpensive: 'Too expensive',
-            inadequateCustomerSupport: 'Inadequate customer support',
-            companyClosing: 'Company closing, downsizing, or acquired',
             renewsOn: ({date}) => `Renews on ${date}`,
             corporateKarma: 'Corporate Karma',
         },
     },
+    feedbackSurvey: {
+        functionalityNeeds: 'Functionality needs improvement',
+        tooExpensive: 'Too expensive',
+        inadequateCustomerSupport: 'Inadequate customer support',
+        companyClosing: 'Company closing, downsizing, or acquired',
+    },
 } satisfies TranslationBase;
diff --git a/src/languages/es.ts b/src/languages/es.ts
index a82c31ee7103..cddeb9f52a46 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -231,6 +231,8 @@ export default {
             enterAmount: 'Introduce un importe.',
             enterDate: 'Introduce una fecha.',
             invalidTimeRange: 'Por favor, introduce una hora entre 1 y 12 (por ejemplo, 2:30 PM).',
+            // TODO translate
+            pleaseCompleteForm: 'Please complete the form above to continue.',
         },
         comma: 'la coma',
         semicolon: 'el punto y coma',
@@ -3662,12 +3664,15 @@ export default {
             disableAutoRenew: 'Desactivar auto-renovación',
             helpUsImprove: 'Ayúdanos a mejorar Expensify',
             whatsMainReason: '¿Cuál es la razón principal por la que deseas desactivar la auto-renovación de tu suscripción?',
-            functionalityNeeds: 'Hay que mejorar la funcionalidad',
-            tooExpensive: 'Demasiado caro',
-            inadequateCustomerSupport: 'Atención al cliente inadecuada',
-            companyClosing: 'Cierre, reducción, o adquisición de la empresa',
             renewsOn: ({date}) => `Renews on ${date}`, // TODO translate
             corporateKarma: 'Corporate Karma', // TODO translate
         },
     },
+    // TODO translate
+    feedbackSurvey: {
+        functionalityNeeds: 'Functionality needs improvement',
+        tooExpensive: 'Too expensive',
+        inadequateCustomerSupport: 'Inadequate customer support',
+        companyClosing: 'Company closing, downsizing, or acquired',
+    },
 } satisfies EnglishTranslation;
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
index dad9178aaf45..ee7e437e1e18 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
@@ -222,6 +222,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.SETTINGS.PROFILE.STATUS_CLEAR_AFTER]: () => require('../../../../pages/settings/Profile/CustomStatus/StatusClearAfterPage').default as React.ComponentType,
     [SCREENS.SETTINGS.PROFILE.STATUS_CLEAR_AFTER_DATE]: () => require('../../../../pages/settings/Profile/CustomStatus/SetDatePage').default as React.ComponentType,
     [SCREENS.SETTINGS.PROFILE.STATUS_CLEAR_AFTER_TIME]: () => require('../../../../pages/settings/Profile/CustomStatus/SetTimePage').default as React.ComponentType,
+    [SCREENS.SETTINGS.SUBSCRIPTION.DISABLE_AUTO_RENEW_SURVEY]: () => require('../../../../pages/settings/Subscription/DisableAutoRenewSurveyPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.RATE_AND_UNIT]: () => require('../../../../pages/workspace/reimburse/WorkspaceRateAndUnitPage/InitialPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.RATE_AND_UNIT_RATE]: () => require('../../../../pages/workspace/reimburse/WorkspaceRateAndUnitPage/RatePage').default as React.ComponentType,
     [SCREENS.WORKSPACE.RATE_AND_UNIT_UNIT]: () => require('../../../../pages/workspace/reimburse/WorkspaceRateAndUnitPage/UnitPage').default as React.ComponentType,
diff --git a/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts b/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts
index 154ab63aad77..25e7ecdc08ac 100755
--- a/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts
+++ b/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts
@@ -39,7 +39,7 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<CentralPaneName, string[]>> =
     [SCREENS.SETTINGS.SAVE_THE_WORLD]: [SCREENS.I_KNOW_A_TEACHER, SCREENS.INTRO_SCHOOL_PRINCIPAL, SCREENS.I_AM_A_TEACHER],
     [SCREENS.SETTINGS.TROUBLESHOOT]: [SCREENS.SETTINGS.CONSOLE],
     [SCREENS.SEARCH.CENTRAL_PANE]: [SCREENS.SEARCH.REPORT_RHP],
-    [SCREENS.SETTINGS.SUBSCRIPTION.ROOT]: [],
+    [SCREENS.SETTINGS.SUBSCRIPTION.ROOT]: [SCREENS.SETTINGS.SUBSCRIPTION.DISABLE_AUTO_RENEW_SURVEY],
 };
 
 export default CENTRAL_PANE_TO_RHP_MAPPING;
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
index 2bd3642ce912..723f2947aa67 100644
--- a/src/libs/Navigation/linkingConfig/config.ts
+++ b/src/libs/Navigation/linkingConfig/config.ts
@@ -277,6 +277,9 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [SCREENS.SETTINGS.PROFILE.STATUS_CLEAR_AFTER_TIME]: {
                             path: ROUTES.SETTINGS_STATUS_CLEAR_AFTER_TIME,
                         },
+                        [SCREENS.SETTINGS.SUBSCRIPTION.DISABLE_AUTO_RENEW_SURVEY]: {
+                            path: ROUTES.SETTINGS_SUBSCRIPTION_DISABLE_AUTO_RENEW_SURVEY,
+                        },
                         [SCREENS.WORKSPACE.CURRENCY]: {
                             path: ROUTES.WORKSPACE_PROFILE_CURRENCY.route,
                         },
diff --git a/src/pages/settings/Subscription/DisableAutoRenewSurveyPage.tsx b/src/pages/settings/Subscription/DisableAutoRenewSurveyPage.tsx
index 7fb26ad71f43..f8ef7c68f792 100644
--- a/src/pages/settings/Subscription/DisableAutoRenewSurveyPage.tsx
+++ b/src/pages/settings/Subscription/DisableAutoRenewSurveyPage.tsx
@@ -1,28 +1,30 @@
 import React from 'react';
 import FeedbackSurvey from '@components/FeedbackSurvey';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import * as Illustrations from '@components/Icon/Illustrations';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import Navigation from '@libs/Navigation/Navigation';
 
 function DisableAutoRenewSurveyPage() {
-    const {isSmallScreenWidth} = useWindowDimensions();
     const {translate} = useLocalize();
 
-    const handleSubmit = () => {};
+    const handleSubmit = () => {
+        // TODO API call to submit feedback will be implemented in next phase
+    };
 
     return (
-        <ScreenWrapper testID={DisableAutoRenewSurveyPage.displayName}>
+        <ScreenWrapper
+            testID={DisableAutoRenewSurveyPage.displayName}
+            includeSafeAreaPaddingBottom={false}
+            shouldEnablePickerAvoiding={false}
+            shouldEnableMaxHeight
+        >
             <HeaderWithBackButton
-                title={translate('workspace.common.subscription')}
+                title={translate('subscription.subscriptionSettings.disableAutoRenew')}
                 onBackButtonPress={() => Navigation.goBack()}
-                shouldShowBackButton={isSmallScreenWidth}
-                icon={Illustrations.CreditCardsNew}
             />
             <FeedbackSurvey
-                title={translate('subscription.subscriptionSettings.disableAutoRenew')}
+                title={translate('subscription.subscriptionSettings.helpUsImprove')}
                 description={translate('subscription.subscriptionSettings.whatsMainReason')}
                 onSubmit={handleSubmit}
             />
diff --git a/src/pages/settings/Subscription/SubscriptionSettingsSection.tsx b/src/pages/settings/Subscription/SubscriptionSettingsSection.tsx
index bd1d5bd7652f..6da883ed4b76 100644
--- a/src/pages/settings/Subscription/SubscriptionSettingsSection.tsx
+++ b/src/pages/settings/Subscription/SubscriptionSettingsSection.tsx
@@ -1,5 +1,5 @@
 import {format} from 'date-fns';
-import React, {useMemo} from 'react';
+import React, {useMemo, useState} from 'react';
 import {View} from 'react-native';
 import Section from '@components/Section';
 import Text from '@components/Text';
@@ -7,18 +7,20 @@ import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@navigation/Navigation';
 import ToggleSettingOptionRow from '@pages/workspace/workflows/ToggleSettingsOptionRow';
 import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
 
 function SubscriptionSettingsSection() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();
 
-    // TODO these values will come from API in next phase
-    const isAutoRenewOn = true;
-    const isAutoIncreaseOn = false;
-    const isCorporateKarmaOn = true;
+    // TODO these default state values will come from API in next phase
+    const [autoRenew, setAutoRenew] = useState(true);
+    const [autoIncrease, setAutoIncrease] = useState(false);
+    const [corporateKarma, setCorporateKarma] = useState(true);
 
     // TODO this will come from API in next phase
     const isCollectPlan = true;
@@ -26,9 +28,22 @@ function SubscriptionSettingsSection() {
     const expirationDate = format(new Date(), CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT);
 
     // TODO all actions will be implemented in next phase
-    const handleAutoRenewToggle = () => {};
-    const handleAutoIncreaseToggle = () => {};
-    const handleCorporateKarmaToggle = () => {};
+    const handleAutoRenewToggle = () => {
+        if (!autoRenew) {
+            // TODO make API call to enable auto renew here
+            setAutoRenew(true);
+            return;
+        }
+        Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION_DISABLE_AUTO_RENEW_SURVEY);
+    };
+    const handleAutoIncreaseToggle = () => {
+        // TODO make API call to toggle auto increase here
+        setAutoIncrease(!autoIncrease);
+    };
+    const handleCorporateKarmaToggle = () => {
+        // TODO make API call to toggle corporate karma here
+        setCorporateKarma(!corporateKarma);
+    };
 
     const customTitle = useMemo(() => {
         const customTitleSecondSentenceStyles = [styles.textNormal, {color: theme.success}];
@@ -54,7 +69,7 @@ function SubscriptionSettingsSection() {
                             title={translate('subscription.subscriptionSettings.autoRenew')}
                             switchAccessibilityLabel={translate('subscription.subscriptionSettings.autoRenew')}
                             onToggle={handleAutoRenewToggle}
-                            isActive={isAutoRenewOn}
+                            isActive={autoRenew}
                         />
                         <Text style={[styles.mutedTextLabel, styles.mt2]}>{translate('subscription.subscriptionSettings.renewsOn', {date: expirationDate})}</Text>
                     </View>
@@ -63,7 +78,7 @@ function SubscriptionSettingsSection() {
                             customTitle={customTitle}
                             switchAccessibilityLabel={translate('subscription.subscriptionSettings.autoRenew')}
                             onToggle={handleAutoIncreaseToggle}
-                            isActive={isAutoIncreaseOn}
+                            isActive={autoIncrease}
                         />
                         <Text style={[styles.mutedTextLabel, styles.mt2]}>{translate('subscription.subscriptionSettings.automaticallyIncrease')}</Text>
                     </View>
@@ -74,7 +89,7 @@ function SubscriptionSettingsSection() {
                         title={translate('subscription.subscriptionSettings.corporateKarma')}
                         switchAccessibilityLabel={translate('subscription.subscriptionSettings.corporateKarma')}
                         onToggle={handleCorporateKarmaToggle}
-                        isActive={isCorporateKarmaOn}
+                        isActive={corporateKarma}
                     />
                     <View style={[styles.flexRow, styles.mt2, styles.alignItemsCenter]}>
                         <Text style={[styles.mutedTextLabel, styles.mr1]}>{translate('subscription.subscriptionSettings.donateToExpensify')}</Text>

From 2f96052eed1169e419458d93d5bb43f1264cafc9 Mon Sep 17 00:00:00 2001
From: Michal Muzyk <mimuzyk@gmail.com>
Date: Mon, 3 Jun 2024 14:57:12 +0200
Subject: [PATCH 03/13] fix: translations and cut corporate karma

---
 src/CONST.ts                                  |  1 -
 src/languages/en.ts                           |  2 -
 src/languages/es.ts                           | 11 ++--
 .../SubscriptionSettingsSection.tsx           | 66 +++++--------------
 4 files changed, 22 insertions(+), 58 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index fdf3b2738570..de4e3305eddc 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -588,7 +588,6 @@ const CONST = {
     ONFIDO_TERMS_OF_SERVICE_URL: 'https://onfido.com/terms-of-service/',
     LIST_OF_RESTRICTED_BUSINESSES: 'https://community.expensify.com/discussion/6191/list-of-restricted-businesses',
     TRAVEL_TERMS_URL: `${USE_EXPENSIFY_URL}/travelterms`,
-    CORPORATE_KARMA_URL: `${USE_EXPENSIFY_URL}/corporate-karma`,
 
     // Use Environment.getEnvironmentURL to get the complete URL with port number
     DEV_NEW_EXPENSIFY_URL: 'https://dev.new.expensify.com:',
diff --git a/src/languages/en.ts b/src/languages/en.ts
index bb66e983ce37..cda16c7726bf 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -3153,12 +3153,10 @@ export default {
             saveUpTo: 'Save up to $10/month per active member',
             automaticallyIncrease:
                 'Automatically increase your annual seats to accommodate for active members that exceed your subscription size. Note: This will extend your annual subscription end date.',
-            donateToExpensify: 'Donate $1 to Expensify.org for every $500 your team spends each month.',
             disableAutoRenew: 'Disable auto-renew',
             helpUsImprove: 'Help us improve Expensify',
             whatsMainReason: 'What’s the main reason you’re disabling auto-renew on your subscription?',
             renewsOn: ({date}) => `Renews on ${date}`,
-            corporateKarma: 'Corporate Karma',
         },
     },
     feedbackSurvey: {
diff --git a/src/languages/es.ts b/src/languages/es.ts
index cddeb9f52a46..dfd496094391 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -3660,19 +3660,16 @@ export default {
             saveUpTo: 'Ahorre hasta $10 al mes por miembro activo',
             automaticallyIncrease:
                 'Aumenta automáticamente tus plazas anuales para dar lugar a los miembros activos que superen el tamaño de tu suscripción. Nota: Esto ampliará la fecha de finalización de tu suscripción anual.',
-            donateToExpensify: 'Dona $1 a Expensify.org por cada $500 que tu equipo gaste cada mes.',
             disableAutoRenew: 'Desactivar auto-renovación',
             helpUsImprove: 'Ayúdanos a mejorar Expensify',
             whatsMainReason: '¿Cuál es la razón principal por la que deseas desactivar la auto-renovación de tu suscripción?',
             renewsOn: ({date}) => `Renews on ${date}`, // TODO translate
-            corporateKarma: 'Corporate Karma', // TODO translate
         },
     },
-    // TODO translate
     feedbackSurvey: {
-        functionalityNeeds: 'Functionality needs improvement',
-        tooExpensive: 'Too expensive',
-        inadequateCustomerSupport: 'Inadequate customer support',
-        companyClosing: 'Company closing, downsizing, or acquired',
+        functionalityNeeds: 'Hay que mejorar la funcionalidad',
+        tooExpensive: 'Demasiado caro',
+        inadequateCustomerSupport: 'Atención al cliente inadecuada',
+        companyClosing: 'Cierre, reducción, o adquisición de la empresa',
     },
 } satisfies EnglishTranslation;
diff --git a/src/pages/settings/Subscription/SubscriptionSettingsSection.tsx b/src/pages/settings/Subscription/SubscriptionSettingsSection.tsx
index 6da883ed4b76..54a7143ef2f6 100644
--- a/src/pages/settings/Subscription/SubscriptionSettingsSection.tsx
+++ b/src/pages/settings/Subscription/SubscriptionSettingsSection.tsx
@@ -3,7 +3,6 @@ import React, {useMemo, useState} from 'react';
 import {View} from 'react-native';
 import Section from '@components/Section';
 import Text from '@components/Text';
-import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -20,10 +19,7 @@ function SubscriptionSettingsSection() {
     // TODO these default state values will come from API in next phase
     const [autoRenew, setAutoRenew] = useState(true);
     const [autoIncrease, setAutoIncrease] = useState(false);
-    const [corporateKarma, setCorporateKarma] = useState(true);
 
-    // TODO this will come from API in next phase
-    const isCollectPlan = true;
     // TODO this will come from API in next phase
     const expirationDate = format(new Date(), CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT);
 
@@ -40,10 +36,6 @@ function SubscriptionSettingsSection() {
         // TODO make API call to toggle auto increase here
         setAutoIncrease(!autoIncrease);
     };
-    const handleCorporateKarmaToggle = () => {
-        // TODO make API call to toggle corporate karma here
-        setCorporateKarma(!corporateKarma);
-    };
 
     const customTitle = useMemo(() => {
         const customTitleSecondSentenceStyles = [styles.textNormal, {color: theme.success}];
@@ -62,46 +54,24 @@ function SubscriptionSettingsSection() {
             titleStyles={[styles.textStrong]}
             isCentralPane
         >
-            {isCollectPlan ? (
-                <>
-                    <View style={[styles.mt5]}>
-                        <ToggleSettingOptionRow
-                            title={translate('subscription.subscriptionSettings.autoRenew')}
-                            switchAccessibilityLabel={translate('subscription.subscriptionSettings.autoRenew')}
-                            onToggle={handleAutoRenewToggle}
-                            isActive={autoRenew}
-                        />
-                        <Text style={[styles.mutedTextLabel, styles.mt2]}>{translate('subscription.subscriptionSettings.renewsOn', {date: expirationDate})}</Text>
-                    </View>
-                    <View style={[styles.mt3]}>
-                        <ToggleSettingOptionRow
-                            customTitle={customTitle}
-                            switchAccessibilityLabel={translate('subscription.subscriptionSettings.autoRenew')}
-                            onToggle={handleAutoIncreaseToggle}
-                            isActive={autoIncrease}
-                        />
-                        <Text style={[styles.mutedTextLabel, styles.mt2]}>{translate('subscription.subscriptionSettings.automaticallyIncrease')}</Text>
-                    </View>
-                </>
-            ) : (
-                <View style={[styles.mt5]}>
-                    <ToggleSettingOptionRow
-                        title={translate('subscription.subscriptionSettings.corporateKarma')}
-                        switchAccessibilityLabel={translate('subscription.subscriptionSettings.corporateKarma')}
-                        onToggle={handleCorporateKarmaToggle}
-                        isActive={corporateKarma}
-                    />
-                    <View style={[styles.flexRow, styles.mt2, styles.alignItemsCenter]}>
-                        <Text style={[styles.mutedTextLabel, styles.mr1]}>{translate('subscription.subscriptionSettings.donateToExpensify')}</Text>
-                        <TextLink
-                            style={[styles.label]}
-                            href={CONST.CORPORATE_KARMA_URL}
-                        >
-                            {translate('common.learnMore')}
-                        </TextLink>
-                    </View>
-                </View>
-            )}
+            <View style={[styles.mt5]}>
+                <ToggleSettingOptionRow
+                    title={translate('subscription.subscriptionSettings.autoRenew')}
+                    switchAccessibilityLabel={translate('subscription.subscriptionSettings.autoRenew')}
+                    onToggle={handleAutoRenewToggle}
+                    isActive={autoRenew}
+                />
+                <Text style={[styles.mutedTextLabel, styles.mt2]}>{translate('subscription.subscriptionSettings.renewsOn', {date: expirationDate})}</Text>
+            </View>
+            <View style={[styles.mt3]}>
+                <ToggleSettingOptionRow
+                    customTitle={customTitle}
+                    switchAccessibilityLabel={translate('subscription.subscriptionSettings.autoRenew')}
+                    onToggle={handleAutoIncreaseToggle}
+                    isActive={autoIncrease}
+                />
+                <Text style={[styles.mutedTextLabel, styles.mt2]}>{translate('subscription.subscriptionSettings.automaticallyIncrease')}</Text>
+            </View>
         </Section>
     );
 }

From 7da4c58eb7ca7e01f1be3f8dc277debefcc206a5 Mon Sep 17 00:00:00 2001
From: Michal Muzyk <mimuzyk@gmail.com>
Date: Mon, 3 Jun 2024 15:14:20 +0200
Subject: [PATCH 04/13] fix: cr fixes

---
 src/components/FeedbackSurvey.tsx                              | 2 ++
 src/pages/settings/Subscription/DisableAutoRenewSurveyPage.tsx | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/FeedbackSurvey.tsx b/src/components/FeedbackSurvey.tsx
index 1e5d36981d2b..4da734815d54 100644
--- a/src/components/FeedbackSurvey.tsx
+++ b/src/components/FeedbackSurvey.tsx
@@ -13,8 +13,10 @@ import Text from './Text';
 type FeedbackSurveyProps = {
     /** Title of the survey */
     title: string;
+
     /** Description of the survey */
     description: string;
+
     /** Callback to be called when the survey is submitted */
     onSubmit: (reason: Option) => void;
 };
diff --git a/src/pages/settings/Subscription/DisableAutoRenewSurveyPage.tsx b/src/pages/settings/Subscription/DisableAutoRenewSurveyPage.tsx
index f8ef7c68f792..706efead9e98 100644
--- a/src/pages/settings/Subscription/DisableAutoRenewSurveyPage.tsx
+++ b/src/pages/settings/Subscription/DisableAutoRenewSurveyPage.tsx
@@ -21,7 +21,7 @@ function DisableAutoRenewSurveyPage() {
         >
             <HeaderWithBackButton
                 title={translate('subscription.subscriptionSettings.disableAutoRenew')}
-                onBackButtonPress={() => Navigation.goBack()}
+                onBackButtonPress={Navigation.goBack}
             />
             <FeedbackSurvey
                 title={translate('subscription.subscriptionSettings.helpUsImprove')}

From 690d095623120c177bd1c5dd1943e944523a3cb0 Mon Sep 17 00:00:00 2001
From: Michal Muzyk <mimuzyk@gmail.com>
Date: Mon, 3 Jun 2024 16:09:04 +0200
Subject: [PATCH 05/13] fix: translations

---
 src/languages/es.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/languages/es.ts b/src/languages/es.ts
index dfd496094391..dfb60b37d189 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -231,8 +231,7 @@ export default {
             enterAmount: 'Introduce un importe.',
             enterDate: 'Introduce una fecha.',
             invalidTimeRange: 'Por favor, introduce una hora entre 1 y 12 (por ejemplo, 2:30 PM).',
-            // TODO translate
-            pleaseCompleteForm: 'Please complete the form above to continue.',
+            pleaseCompleteForm: 'Por favor complete el formulario de arriba para continuar..',
         },
         comma: 'la coma',
         semicolon: 'el punto y coma',
@@ -3663,7 +3662,7 @@ export default {
             disableAutoRenew: 'Desactivar auto-renovación',
             helpUsImprove: 'Ayúdanos a mejorar Expensify',
             whatsMainReason: '¿Cuál es la razón principal por la que deseas desactivar la auto-renovación de tu suscripción?',
-            renewsOn: ({date}) => `Renews on ${date}`, // TODO translate
+            renewsOn: ({date}) => `Se renovará el ${date}`,
         },
     },
     feedbackSurvey: {

From 2ca5e3cf796bd870c187ba6d0a848f2dc01d890d Mon Sep 17 00:00:00 2001
From: Michal Muzyk <mimuzyk@gmail.com>
Date: Tue, 4 Jun 2024 09:42:57 +0200
Subject: [PATCH 06/13] fix: remove memo

---
 .../SubscriptionSettingsSection.tsx           | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/pages/settings/Subscription/SubscriptionSettingsSection.tsx b/src/pages/settings/Subscription/SubscriptionSettingsSection.tsx
index 54a7143ef2f6..c21607fc69db 100644
--- a/src/pages/settings/Subscription/SubscriptionSettingsSection.tsx
+++ b/src/pages/settings/Subscription/SubscriptionSettingsSection.tsx
@@ -1,5 +1,5 @@
 import {format} from 'date-fns';
-import React, {useMemo, useState} from 'react';
+import React, {useState} from 'react';
 import {View} from 'react-native';
 import Section from '@components/Section';
 import Text from '@components/Text';
@@ -37,16 +37,13 @@ function SubscriptionSettingsSection() {
         setAutoIncrease(!autoIncrease);
     };
 
-    const customTitle = useMemo(() => {
-        const customTitleSecondSentenceStyles = [styles.textNormal, {color: theme.success}];
-
-        return (
-            <View style={[styles.flexRow, styles.flex1, styles.alignItemsCenter]}>
-                <Text style={[styles.mr1, styles.textNormalThemeText]}>{translate('subscription.subscriptionSettings.autoIncrease')}</Text>
-                <Text style={customTitleSecondSentenceStyles}>{translate('subscription.subscriptionSettings.saveUpTo')}</Text>
-            </View>
-        );
-    }, [styles.alignItemsCenter, styles.flex1, styles.flexRow, styles.mr1, styles.textNormal, styles.textNormalThemeText, theme.success, translate]);
+    const customTitleSecondSentenceStyles = [styles.textNormal, {color: theme.success}];
+    const customTitle = (
+        <View style={[styles.flexRow, styles.flex1, styles.alignItemsCenter]}>
+            <Text style={[styles.mr1, styles.textNormalThemeText]}>{translate('subscription.subscriptionSettings.autoIncrease')}</Text>
+            <Text style={customTitleSecondSentenceStyles}>{translate('subscription.subscriptionSettings.saveUpTo')}</Text>
+        </View>
+    );
 
     return (
         <Section

From a5ad54af17eaac1b575458aa7cc283159d5f6fb9 Mon Sep 17 00:00:00 2001
From: Michal Muzyk <mimuzyk@gmail.com>
Date: Tue, 4 Jun 2024 10:12:10 +0200
Subject: [PATCH 07/13] fix: whitespaces before comments

---
 .../workspace/workflows/ToggleSettingsOptionRow.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx b/src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx
index e1d54e0ba05e..76125659a6f3 100644
--- a/src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx
+++ b/src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx
@@ -12,30 +12,43 @@ import type IconAsset from '@src/types/utils/IconAsset';
 type ToggleSettingOptionRowProps = {
     /** Icon to be shown for the option */
     icon?: IconAsset;
+
     /** Title of the option */
     title?: string;
+
     /** Custom title for the option */
     customTitle?: React.ReactNode;
+
     /** Subtitle of the option */
     subtitle?: string;
+
     /** Accessibility label for the switch */
     switchAccessibilityLabel: string;
+
     /** subtitle should show below switch and title */
     shouldPlaceSubtitleBelowSwitch?: boolean;
+
     /** Used to apply styles to the outermost container */
     wrapperStyle?: StyleProp<ViewStyle>;
+
     /** Whether the option is enabled or not */
     isActive: boolean;
+
     /** Callback to be called when the switch is toggled */
     onToggle: (isEnabled: boolean) => void;
+
     /** SubMenuItems will be shown when the option is enabled */
     subMenuItems?: React.ReactNode;
+
     /** If there is a pending action, we will grey out the option */
     pendingAction?: PendingAction;
+
     /** Any error message to show */
     errors?: Errors;
+
     /** Callback to close the error messages */
     onCloseError?: () => void;
+
     /** Whether the toggle should be disabled */
     disabled?: boolean;
 

From 06b74cc13c0b135fd56da0939682512660d3b819 Mon Sep 17 00:00:00 2001
From: Michal Muzyk <mimuzyk@gmail.com>
Date: Tue, 4 Jun 2024 13:02:18 +0200
Subject: [PATCH 08/13] fix: cr fixes

---
 src/components/FeedbackSurvey.tsx                     | 11 ++++++-----
 .../Subscription/SubscriptionSettingsSection.tsx      |  9 +++++----
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/FeedbackSurvey.tsx b/src/components/FeedbackSurvey.tsx
index 4da734815d54..8d6cb2de3009 100644
--- a/src/components/FeedbackSurvey.tsx
+++ b/src/components/FeedbackSurvey.tsx
@@ -1,5 +1,6 @@
 import {CONST as COMMON_CONST} from 'expensify-common/lib/CONST';
 import React, {useState} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
@@ -38,7 +39,7 @@ function FeedbackSurvey({title, description, onSubmit}: FeedbackSurveyProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
 
-    const selectCircleStyles = {borderColor: theme.border};
+    const selectCircleStyles: StyleProp<ViewStyle> = {borderColor: theme.border};
     const [reason, setReason] = useState<Option>();
     const [shouldShowReasonError, setShouldShowReasonError] = useState(false);
 
@@ -58,13 +59,13 @@ function FeedbackSurvey({title, description, onSubmit}: FeedbackSurveyProps) {
 
     return (
         <View style={[styles.flexGrow1, styles.justifyContentBetween]}>
-            <View style={[styles.mh5]}>
-                <Text style={[styles.textHeadline]}>{title}</Text>
+            <View style={styles.mh5}>
+                <Text style={styles.textHeadline}>{title}</Text>
                 <Text style={[styles.mt1, styles.mb3, styles.textNormalThemeText]}>{description}</Text>
                 <SingleOptionSelector
                     options={OPTIONS}
-                    optionRowStyles={[styles.mb7]}
-                    selectCircleStyles={[selectCircleStyles]}
+                    optionRowStyles={styles.mb7}
+                    selectCircleStyles={selectCircleStyles}
                     selectedOptionKey={reason?.key}
                     onSelectOption={handleOptionSelect}
                 />
diff --git a/src/pages/settings/Subscription/SubscriptionSettingsSection.tsx b/src/pages/settings/Subscription/SubscriptionSettingsSection.tsx
index c21607fc69db..0dab4237bd52 100644
--- a/src/pages/settings/Subscription/SubscriptionSettingsSection.tsx
+++ b/src/pages/settings/Subscription/SubscriptionSettingsSection.tsx
@@ -1,5 +1,6 @@
 import {format} from 'date-fns';
 import React, {useState} from 'react';
+import type {StyleProp, TextStyle} from 'react-native';
 import {View} from 'react-native';
 import Section from '@components/Section';
 import Text from '@components/Text';
@@ -37,7 +38,7 @@ function SubscriptionSettingsSection() {
         setAutoIncrease(!autoIncrease);
     };
 
-    const customTitleSecondSentenceStyles = [styles.textNormal, {color: theme.success}];
+    const customTitleSecondSentenceStyles: StyleProp<TextStyle> = [styles.textNormal, {color: theme.success}];
     const customTitle = (
         <View style={[styles.flexRow, styles.flex1, styles.alignItemsCenter]}>
             <Text style={[styles.mr1, styles.textNormalThemeText]}>{translate('subscription.subscriptionSettings.autoIncrease')}</Text>
@@ -48,10 +49,10 @@ function SubscriptionSettingsSection() {
     return (
         <Section
             title={translate('subscription.subscriptionSettings.title')}
-            titleStyles={[styles.textStrong]}
+            titleStyles={styles.textStrong}
             isCentralPane
         >
-            <View style={[styles.mt5]}>
+            <View style={styles.mt5}>
                 <ToggleSettingOptionRow
                     title={translate('subscription.subscriptionSettings.autoRenew')}
                     switchAccessibilityLabel={translate('subscription.subscriptionSettings.autoRenew')}
@@ -60,7 +61,7 @@ function SubscriptionSettingsSection() {
                 />
                 <Text style={[styles.mutedTextLabel, styles.mt2]}>{translate('subscription.subscriptionSettings.renewsOn', {date: expirationDate})}</Text>
             </View>
-            <View style={[styles.mt3]}>
+            <View style={styles.mt3}>
                 <ToggleSettingOptionRow
                     customTitle={customTitle}
                     switchAccessibilityLabel={translate('subscription.subscriptionSettings.autoRenew')}

From f866282c0038e131d611cb535165d56d4fd209e9 Mon Sep 17 00:00:00 2001
From: Michal Muzyk <mimuzyk@gmail.com>
Date: Tue, 4 Jun 2024 13:55:23 +0200
Subject: [PATCH 09/13] fix: add new const for feedback survey options

---
 src/CONST.ts                      | 18 ++++++++++++++++++
 src/components/FeedbackSurvey.tsx | 10 +++++-----
 src/languages/en.ts               |  6 +++---
 src/languages/es.ts               |  6 +++---
 4 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index aa3ade14b040..23892df017ee 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -4799,6 +4799,24 @@ const CONST = {
     },
 
     SUBSCRIPTION_SIZE_LIMIT: 20000,
+    FEEDBACK_SURVEY_OPTIONS: {
+        TOO_LIMITED: {
+            ID: 'tooLimited',
+            TRANSLATION_KEY: 'feedbackSurvey.tooLimited',
+        },
+        TOO_EXPENSIVE: {
+            ID: 'tooExpensive',
+            TRANSLATION_KEY: 'feedbackSurvey.tooExpensive',
+        },
+        INADEQUATE_SUPPORT: {
+            ID: 'inadequateSupport',
+            TRANSLATION_KEY: 'feedbackSurvey.inadequateSupport',
+        },
+        BUSINESS_CLOSING: {
+            ID: 'businessClosing',
+            TRANSLATION_KEY: 'feedbackSurvey.businessClosing',
+        },
+    },
 } as const;
 
 type Country = keyof typeof CONST.ALL_COUNTRIES;
diff --git a/src/components/FeedbackSurvey.tsx b/src/components/FeedbackSurvey.tsx
index 8d6cb2de3009..9a6e20202cfd 100644
--- a/src/components/FeedbackSurvey.tsx
+++ b/src/components/FeedbackSurvey.tsx
@@ -1,10 +1,10 @@
-import {CONST as COMMON_CONST} from 'expensify-common/lib/CONST';
 import React, {useState} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import FixedFooter from './FixedFooter';
 import FormAlertWithSubmitButton from './FormAlertWithSubmitButton';
@@ -28,10 +28,10 @@ type Option = {
 };
 
 const OPTIONS: Option[] = [
-    {key: COMMON_CONST.SUBSCRIPTION_CHANGE_REASONS.TOO_LIMITED.id, label: 'feedbackSurvey.functionalityNeeds'},
-    {key: COMMON_CONST.SUBSCRIPTION_CHANGE_REASONS.TOO_EXPENSIVE.id, label: 'feedbackSurvey.tooExpensive'},
-    {key: COMMON_CONST.SUBSCRIPTION_CHANGE_REASONS.INADEQUATE_SUPPORT.id, label: 'feedbackSurvey.inadequateCustomerSupport'},
-    {key: COMMON_CONST.SUBSCRIPTION_CHANGE_REASONS.BUSINESS_CLOSING.id, label: 'feedbackSurvey.companyClosing'},
+    {key: CONST.FEEDBACK_SURVEY_OPTIONS.TOO_LIMITED.ID, label: CONST.FEEDBACK_SURVEY_OPTIONS.TOO_LIMITED.TRANSLATION_KEY},
+    {key: CONST.FEEDBACK_SURVEY_OPTIONS.TOO_EXPENSIVE.ID, label: CONST.FEEDBACK_SURVEY_OPTIONS.TOO_EXPENSIVE.TRANSLATION_KEY},
+    {key: CONST.FEEDBACK_SURVEY_OPTIONS.INADEQUATE_SUPPORT.ID, label: CONST.FEEDBACK_SURVEY_OPTIONS.INADEQUATE_SUPPORT.TRANSLATION_KEY},
+    {key: CONST.FEEDBACK_SURVEY_OPTIONS.BUSINESS_CLOSING.ID, label: CONST.FEEDBACK_SURVEY_OPTIONS.BUSINESS_CLOSING.TRANSLATION_KEY},
 ];
 
 function FeedbackSurvey({title, description, onSubmit}: FeedbackSurveyProps) {
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 8f2b89e14e84..7ad65229dfab 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -3183,9 +3183,9 @@ export default {
         },
     },
     feedbackSurvey: {
-        functionalityNeeds: 'Functionality needs improvement',
+        tooLimited: 'Functionality needs improvement',
         tooExpensive: 'Too expensive',
-        inadequateCustomerSupport: 'Inadequate customer support',
-        companyClosing: 'Company closing, downsizing, or acquired',
+        inadequateSupport: 'Inadequate customer support',
+        businessClosing: 'Company closing, downsizing, or acquired',
     },
 } satisfies TranslationBase;
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 9208a1f91081..f051c71668aa 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -3689,9 +3689,9 @@ export default {
         },
     },
     feedbackSurvey: {
-        functionalityNeeds: 'Hay que mejorar la funcionalidad',
+        tooLimited: 'Hay que mejorar la funcionalidad',
         tooExpensive: 'Demasiado caro',
-        inadequateCustomerSupport: 'Atención al cliente inadecuada',
-        companyClosing: 'Cierre, reducción, o adquisición de la empresa',
+        inadequateSupport: 'Atención al cliente inadecuada',
+        businessClosing: 'Cierre, reducción, o adquisición de la empresa',
     },
 } satisfies EnglishTranslation;

From 09b95380516a249a0bb4553dfad2a4d4ad954595 Mon Sep 17 00:00:00 2001
From: Michal Muzyk <mimuzyk@gmail.com>
Date: Wed, 5 Jun 2024 10:08:56 +0200
Subject: [PATCH 10/13] fix: cr fixes

---
 src/components/FeedbackSurvey.tsx                |  7 +++++--
 .../Subscription/DisableAutoRenewSurveyPage.tsx  | 16 +++++++++++-----
 ...tingsSection.tsx => SubscriptionSettings.tsx} |  6 +++---
 .../Subscription/SubscriptionSettingsPage.tsx    |  4 ++--
 4 files changed, 21 insertions(+), 12 deletions(-)
 rename src/pages/settings/Subscription/{SubscriptionSettingsSection.tsx => SubscriptionSettings.tsx} (95%)

diff --git a/src/components/FeedbackSurvey.tsx b/src/components/FeedbackSurvey.tsx
index 9a6e20202cfd..3b7d6475262b 100644
--- a/src/components/FeedbackSurvey.tsx
+++ b/src/components/FeedbackSurvey.tsx
@@ -20,6 +20,9 @@ type FeedbackSurveyProps = {
 
     /** Callback to be called when the survey is submitted */
     onSubmit: (reason: Option) => void;
+
+    /** Styles for the option row element */
+    optionRowStyles?: StyleProp<ViewStyle>;
 };
 
 type Option = {
@@ -34,7 +37,7 @@ const OPTIONS: Option[] = [
     {key: CONST.FEEDBACK_SURVEY_OPTIONS.BUSINESS_CLOSING.ID, label: CONST.FEEDBACK_SURVEY_OPTIONS.BUSINESS_CLOSING.TRANSLATION_KEY},
 ];
 
-function FeedbackSurvey({title, description, onSubmit}: FeedbackSurveyProps) {
+function FeedbackSurvey({title, description, onSubmit, optionRowStyles}: FeedbackSurveyProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -64,7 +67,7 @@ function FeedbackSurvey({title, description, onSubmit}: FeedbackSurveyProps) {
                 <Text style={[styles.mt1, styles.mb3, styles.textNormalThemeText]}>{description}</Text>
                 <SingleOptionSelector
                     options={OPTIONS}
-                    optionRowStyles={styles.mb7}
+                    optionRowStyles={[styles.mb7, optionRowStyles]}
                     selectCircleStyles={selectCircleStyles}
                     selectedOptionKey={reason?.key}
                     onSelectOption={handleOptionSelect}
diff --git a/src/pages/settings/Subscription/DisableAutoRenewSurveyPage.tsx b/src/pages/settings/Subscription/DisableAutoRenewSurveyPage.tsx
index 706efead9e98..b470a6ed76a6 100644
--- a/src/pages/settings/Subscription/DisableAutoRenewSurveyPage.tsx
+++ b/src/pages/settings/Subscription/DisableAutoRenewSurveyPage.tsx
@@ -2,11 +2,14 @@ import React from 'react';
 import FeedbackSurvey from '@components/FeedbackSurvey';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
+import ScrollView from '@components/ScrollView';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 
 function DisableAutoRenewSurveyPage() {
     const {translate} = useLocalize();
+    const styles = useThemeStyles();
 
     const handleSubmit = () => {
         // TODO API call to submit feedback will be implemented in next phase
@@ -23,11 +26,14 @@ function DisableAutoRenewSurveyPage() {
                 title={translate('subscription.subscriptionSettings.disableAutoRenew')}
                 onBackButtonPress={Navigation.goBack}
             />
-            <FeedbackSurvey
-                title={translate('subscription.subscriptionSettings.helpUsImprove')}
-                description={translate('subscription.subscriptionSettings.whatsMainReason')}
-                onSubmit={handleSubmit}
-            />
+            <ScrollView contentContainerStyle={[styles.flexGrow1, styles.pt3]}>
+                <FeedbackSurvey
+                    title={translate('subscription.subscriptionSettings.helpUsImprove')}
+                    description={translate('subscription.subscriptionSettings.whatsMainReason')}
+                    onSubmit={handleSubmit}
+                    optionRowStyles={styles.flex1}
+                />
+            </ScrollView>
         </ScreenWrapper>
     );
 }
diff --git a/src/pages/settings/Subscription/SubscriptionSettingsSection.tsx b/src/pages/settings/Subscription/SubscriptionSettings.tsx
similarity index 95%
rename from src/pages/settings/Subscription/SubscriptionSettingsSection.tsx
rename to src/pages/settings/Subscription/SubscriptionSettings.tsx
index 0dab4237bd52..51021e30f125 100644
--- a/src/pages/settings/Subscription/SubscriptionSettingsSection.tsx
+++ b/src/pages/settings/Subscription/SubscriptionSettings.tsx
@@ -12,7 +12,7 @@ import ToggleSettingOptionRow from '@pages/workspace/workflows/ToggleSettingsOpt
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 
-function SubscriptionSettingsSection() {
+function SubscriptionSettings() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -74,6 +74,6 @@ function SubscriptionSettingsSection() {
     );
 }
 
-SubscriptionSettingsSection.displayName = 'SubscriptionSettingsSection';
+SubscriptionSettings.displayName = 'SubscriptionSettings';
 
-export default SubscriptionSettingsSection;
+export default SubscriptionSettings;
diff --git a/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx b/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx
index a3d2ad8f9c1c..1cd3b98499c0 100644
--- a/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx
+++ b/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx
@@ -12,7 +12,7 @@ import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import * as Subscription from '@userActions/Subscription';
 import SubscriptionDetails from './SubscriptionDetails';
 import SubscriptionPlan from './SubscriptionPlan';
-import SubscriptionSettingsSection from './SubscriptionSettingsSection';
+import SubscriptionSettings from './SubscriptionSettings';
 
 function SubscriptionSettingsPage() {
     const {shouldUseNarrowLayout} = useResponsiveLayout();
@@ -39,7 +39,7 @@ function SubscriptionSettingsPage() {
             <ScrollView style={styles.pt3}>
                 <SubscriptionPlan />
                 <SubscriptionDetails />
-                <SubscriptionSettingsSection />
+                <SubscriptionSettings />
             </ScrollView>
         </ScreenWrapper>
     );

From 4d7d132fe1b886f5a36e5bdf3b041cc5fb74a890 Mon Sep 17 00:00:00 2001
From: Michal Muzyk <mimuzyk@gmail.com>
Date: Thu, 6 Jun 2024 11:27:35 +0200
Subject: [PATCH 11/13] fix: adjusted section displaying

---
 .../Subscription/SubscriptionSettings/index.native.tsx     | 5 +++++
 .../index.tsx}                                             | 7 +++++++
 2 files changed, 12 insertions(+)
 create mode 100644 src/pages/settings/Subscription/SubscriptionSettings/index.native.tsx
 rename src/pages/settings/Subscription/{SubscriptionSettings.tsx => SubscriptionSettings/index.tsx} (92%)

diff --git a/src/pages/settings/Subscription/SubscriptionSettings/index.native.tsx b/src/pages/settings/Subscription/SubscriptionSettings/index.native.tsx
new file mode 100644
index 000000000000..e1443501e2f4
--- /dev/null
+++ b/src/pages/settings/Subscription/SubscriptionSettings/index.native.tsx
@@ -0,0 +1,5 @@
+function SubscriptionSettings() {
+    return null;
+}
+
+export default SubscriptionSettings;
diff --git a/src/pages/settings/Subscription/SubscriptionSettings.tsx b/src/pages/settings/Subscription/SubscriptionSettings/index.tsx
similarity index 92%
rename from src/pages/settings/Subscription/SubscriptionSettings.tsx
rename to src/pages/settings/Subscription/SubscriptionSettings/index.tsx
index 51021e30f125..f6d071aeadf0 100644
--- a/src/pages/settings/Subscription/SubscriptionSettings.tsx
+++ b/src/pages/settings/Subscription/SubscriptionSettings/index.tsx
@@ -2,6 +2,7 @@ import {format} from 'date-fns';
 import React, {useState} from 'react';
 import type {StyleProp, TextStyle} from 'react-native';
 import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
@@ -10,12 +11,14 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@navigation/Navigation';
 import ToggleSettingOptionRow from '@pages/workspace/workflows/ToggleSettingsOptionRow';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
 function SubscriptionSettings() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();
+    const [privateSubscription] = useOnyx(ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION);
 
     // TODO these default state values will come from API in next phase
     const [autoRenew, setAutoRenew] = useState(true);
@@ -38,6 +41,10 @@ function SubscriptionSettings() {
         setAutoIncrease(!autoIncrease);
     };
 
+    if (privateSubscription?.type === CONST.SUBSCRIPTION.TYPE.PAYPERUSE) {
+        return null;
+    }
+
     const customTitleSecondSentenceStyles: StyleProp<TextStyle> = [styles.textNormal, {color: theme.success}];
     const customTitle = (
         <View style={[styles.flexRow, styles.flex1, styles.alignItemsCenter]}>

From 80b5c3675f429ef29a06a1e16e7b6d35aec77403 Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Thu, 6 Jun 2024 16:04:42 +0200
Subject: [PATCH 12/13] display values from API in subscription settings
 section

---
 src/languages/en.ts                                      | 2 +-
 src/languages/es.ts                                      | 2 +-
 .../settings/Subscription/SubscriptionSettings/index.tsx | 9 ++++-----
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index a88bcbf599ae..e8d14b5c1c97 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -3276,7 +3276,7 @@ export default {
             disableAutoRenew: 'Disable auto-renew',
             helpUsImprove: 'Help us improve Expensify',
             whatsMainReason: 'What’s the main reason you’re disabling auto-renew on your subscription?',
-            renewsOn: ({date}) => `Renews on ${date}`,
+            renewsOn: ({date}) => `Renews on ${date}.`,
         },
     },
     feedbackSurvey: {
diff --git a/src/languages/es.ts b/src/languages/es.ts
index d27a3e6ca865..c3f7a0ef9750 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -3783,7 +3783,7 @@ export default {
             disableAutoRenew: 'Desactivar auto-renovación',
             helpUsImprove: 'Ayúdanos a mejorar Expensify',
             whatsMainReason: '¿Cuál es la razón principal por la que deseas desactivar la auto-renovación de tu suscripción?',
-            renewsOn: ({date}) => `Se renovará el ${date}`,
+            renewsOn: ({date}) => `Se renovará el ${date}.`,
         },
     },
     feedbackSurvey: {
diff --git a/src/pages/settings/Subscription/SubscriptionSettings/index.tsx b/src/pages/settings/Subscription/SubscriptionSettings/index.tsx
index f6d071aeadf0..8c8963bcef92 100644
--- a/src/pages/settings/Subscription/SubscriptionSettings/index.tsx
+++ b/src/pages/settings/Subscription/SubscriptionSettings/index.tsx
@@ -24,8 +24,7 @@ function SubscriptionSettings() {
     const [autoRenew, setAutoRenew] = useState(true);
     const [autoIncrease, setAutoIncrease] = useState(false);
 
-    // TODO this will come from API in next phase
-    const expirationDate = format(new Date(), CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT);
+    const expirationDate = privateSubscription?.endDate ? format(new Date(privateSubscription?.endDate), CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT) : null;
 
     // TODO all actions will be implemented in next phase
     const handleAutoRenewToggle = () => {
@@ -64,16 +63,16 @@ function SubscriptionSettings() {
                     title={translate('subscription.subscriptionSettings.autoRenew')}
                     switchAccessibilityLabel={translate('subscription.subscriptionSettings.autoRenew')}
                     onToggle={handleAutoRenewToggle}
-                    isActive={autoRenew}
+                    isActive={privateSubscription?.autoRenew ?? false}
                 />
-                <Text style={[styles.mutedTextLabel, styles.mt2]}>{translate('subscription.subscriptionSettings.renewsOn', {date: expirationDate})}</Text>
+                {!!expirationDate && <Text style={[styles.mutedTextLabel, styles.mt2]}>{translate('subscription.subscriptionSettings.renewsOn', {date: expirationDate})}</Text>}
             </View>
             <View style={styles.mt3}>
                 <ToggleSettingOptionRow
                     customTitle={customTitle}
                     switchAccessibilityLabel={translate('subscription.subscriptionSettings.autoRenew')}
                     onToggle={handleAutoIncreaseToggle}
-                    isActive={autoIncrease}
+                    isActive={privateSubscription?.addNewUsersAutomatically ?? false}
                 />
                 <Text style={[styles.mutedTextLabel, styles.mt2]}>{translate('subscription.subscriptionSettings.automaticallyIncrease')}</Text>
             </View>

From f3cba594c17c61c20cd341f88660cc5989d722f1 Mon Sep 17 00:00:00 2001
From: Michal Muzyk <mimuzyk@gmail.com>
Date: Fri, 7 Jun 2024 10:34:33 +0200
Subject: [PATCH 13/13] fix: small cr fixes

---
 src/CONST.ts                                  |  4 ++++
 src/languages/en.ts                           |  3 +--
 src/languages/es.ts                           |  3 +--
 .../index.native.tsx                          | 19 +++++++++++++++++++
 .../index.tsx}                                |  0
 .../SubscriptionSettings/index.tsx            | 17 ++++++++++++-----
 6 files changed, 37 insertions(+), 9 deletions(-)
 create mode 100644 src/pages/settings/Subscription/DisableAutoRenewSurveyPage/index.native.tsx
 rename src/pages/settings/Subscription/{DisableAutoRenewSurveyPage.tsx => DisableAutoRenewSurveyPage/index.tsx} (100%)

diff --git a/src/CONST.ts b/src/CONST.ts
index 7ec8e5fc0cb3..e2613d75003f 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -4815,6 +4815,10 @@ const CONST = {
     },
 
     SUBSCRIPTION_SIZE_LIMIT: 20000,
+    SUBSCRIPTION_POSSIBLE_COST_SAVINGS: {
+        COLLECT_PLAN: 10,
+        CONTROL_PLAN: 18,
+    },
     FEEDBACK_SURVEY_OPTIONS: {
         TOO_LIMITED: {
             ID: 'tooLimited',
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 0ccbdc2e6bf5..d39a9e23ac54 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -3288,9 +3288,8 @@ export default {
         subscriptionSettings: {
             title: 'Subscription settings',
             autoRenew: 'Auto-renew',
-            yourAnnual: 'Your annual subscription will automatically renew on (date). You can switch to pay-per-use starting 30 days before renewal.',
             autoIncrease: 'Auto-increase annual seats',
-            saveUpTo: 'Save up to $10/month per active member',
+            saveUpTo: ({amountSaved}) => `Save up to $${amountSaved}/month per active member`,
             automaticallyIncrease:
                 'Automatically increase your annual seats to accommodate for active members that exceed your subscription size. Note: This will extend your annual subscription end date.',
             disableAutoRenew: 'Disable auto-renew',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index fcb4e8620703..94251f4e909e 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -3795,9 +3795,8 @@ export default {
         subscriptionSettings: {
             title: 'Configuración de suscripción',
             autoRenew: 'Auto-renovación',
-            yourAnnual: 'Tu suscripción anual se renovará el (date). Puedes cambiar a pago-por-uso a partir de los 30 días previos a la renovación.',
             autoIncrease: 'Auto-incremento',
-            saveUpTo: 'Ahorre hasta $10 al mes por miembro activo',
+            saveUpTo: ({amountSaved}) => `Ahorre hasta $${amountSaved} al mes por miembro activo`,
             automaticallyIncrease:
                 'Aumenta automáticamente tus plazas anuales para dar lugar a los miembros activos que superen el tamaño de tu suscripción. Nota: Esto ampliará la fecha de finalización de tu suscripción anual.',
             disableAutoRenew: 'Desactivar auto-renovación',
diff --git a/src/pages/settings/Subscription/DisableAutoRenewSurveyPage/index.native.tsx b/src/pages/settings/Subscription/DisableAutoRenewSurveyPage/index.native.tsx
new file mode 100644
index 000000000000..9d197d2e43b0
--- /dev/null
+++ b/src/pages/settings/Subscription/DisableAutoRenewSurveyPage/index.native.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
+import ScreenWrapper from '@components/ScreenWrapper';
+
+function DisableAutoRenewSurveyPage() {
+    return (
+        <ScreenWrapper
+            testID={DisableAutoRenewSurveyPage.displayName}
+            includeSafeAreaPaddingBottom
+            shouldEnableMaxHeight
+        >
+            <FullPageNotFoundView shouldShow />
+        </ScreenWrapper>
+    );
+}
+
+DisableAutoRenewSurveyPage.displayName = 'DisableAutoRenewSurveyPage';
+
+export default DisableAutoRenewSurveyPage;
diff --git a/src/pages/settings/Subscription/DisableAutoRenewSurveyPage.tsx b/src/pages/settings/Subscription/DisableAutoRenewSurveyPage/index.tsx
similarity index 100%
rename from src/pages/settings/Subscription/DisableAutoRenewSurveyPage.tsx
rename to src/pages/settings/Subscription/DisableAutoRenewSurveyPage/index.tsx
diff --git a/src/pages/settings/Subscription/SubscriptionSettings/index.tsx b/src/pages/settings/Subscription/SubscriptionSettings/index.tsx
index f6d071aeadf0..887f6c041f2e 100644
--- a/src/pages/settings/Subscription/SubscriptionSettings/index.tsx
+++ b/src/pages/settings/Subscription/SubscriptionSettings/index.tsx
@@ -1,4 +1,4 @@
-import {format} from 'date-fns';
+import {addMonths, format} from 'date-fns';
 import React, {useState} from 'react';
 import type {StyleProp, TextStyle} from 'react-native';
 import {View} from 'react-native';
@@ -6,6 +6,7 @@ import {useOnyx} from 'react-native-onyx';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useSubscriptionPlan from '@hooks/useSubscriptionPlan';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@navigation/Navigation';
@@ -18,14 +19,16 @@ function SubscriptionSettings() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();
+    const subscriptionPlan = useSubscriptionPlan();
     const [privateSubscription] = useOnyx(ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION);
 
+    const isCollect = subscriptionPlan === CONST.POLICY.TYPE.TEAM;
+
     // TODO these default state values will come from API in next phase
     const [autoRenew, setAutoRenew] = useState(true);
     const [autoIncrease, setAutoIncrease] = useState(false);
 
-    // TODO this will come from API in next phase
-    const expirationDate = format(new Date(), CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT);
+    const autoRenewalDate = privateSubscription?.endDate ? format(addMonths(new Date(privateSubscription?.endDate), 1), CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT) : '';
 
     // TODO all actions will be implemented in next phase
     const handleAutoRenewToggle = () => {
@@ -49,7 +52,11 @@ function SubscriptionSettings() {
     const customTitle = (
         <View style={[styles.flexRow, styles.flex1, styles.alignItemsCenter]}>
             <Text style={[styles.mr1, styles.textNormalThemeText]}>{translate('subscription.subscriptionSettings.autoIncrease')}</Text>
-            <Text style={customTitleSecondSentenceStyles}>{translate('subscription.subscriptionSettings.saveUpTo')}</Text>
+            <Text style={customTitleSecondSentenceStyles}>
+                {translate('subscription.subscriptionSettings.saveUpTo', {
+                    amountSaved: isCollect ? CONST.SUBSCRIPTION_POSSIBLE_COST_SAVINGS.COLLECT_PLAN : CONST.SUBSCRIPTION_POSSIBLE_COST_SAVINGS.CONTROL_PLAN,
+                })}
+            </Text>
         </View>
     );
 
@@ -66,7 +73,7 @@ function SubscriptionSettings() {
                     onToggle={handleAutoRenewToggle}
                     isActive={autoRenew}
                 />
-                <Text style={[styles.mutedTextLabel, styles.mt2]}>{translate('subscription.subscriptionSettings.renewsOn', {date: expirationDate})}</Text>
+                <Text style={[styles.mutedTextLabel, styles.mt2]}>{translate('subscription.subscriptionSettings.renewsOn', {date: autoRenewalDate})}</Text>
             </View>
             <View style={styles.mt3}>
                 <ToggleSettingOptionRow