From d4d0027a2bde844a26d3475143afe73210a83029 Mon Sep 17 00:00:00 2001
From: mkzie2 <mkzie2@gmail.com>
Date: Mon, 12 Aug 2024 18:56:25 +0700
Subject: [PATCH 1/8] fix: request early cancellation form does not save draft

---
 src/ONYXKEYS.ts                      |  3 +
 src/components/FeedbackSurvey.tsx    | 82 ++++++++++++++++++----------
 src/types/form/FeedbackSurveyForm.ts | 19 +++++++
 src/types/form/index.ts              |  1 +
 4 files changed, 75 insertions(+), 30 deletions(-)
 create mode 100644 src/types/form/FeedbackSurveyForm.ts

diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index 7102d6396381..d083d74fffae 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -571,6 +571,8 @@ const ONYXKEYS = {
         REIMBURSEMENT_ACCOUNT_FORM_DRAFT: 'reimbursementAccountDraft',
         PERSONAL_BANK_ACCOUNT_FORM: 'personalBankAccount',
         PERSONAL_BANK_ACCOUNT_FORM_DRAFT: 'personalBankAccountDraft',
+        FEEDBACK_SURVEY_FORM: 'feedbackSurveyForm',
+        FEEDBACK_SURVEY_FORM_DRAFT: 'feedbackSurveyFormDraft',
         EXIT_SURVEY_REASON_FORM: 'exitSurveyReasonForm',
         EXIT_SURVEY_REASON_FORM_DRAFT: 'exitSurveyReasonFormDraft',
         EXIT_SURVEY_RESPONSE_FORM: 'exitSurveyResponseForm',
@@ -643,6 +645,7 @@ type OnyxFormValuesMapping = {
     [ONYXKEYS.FORMS.ROOM_SETTINGS_FORM]: FormTypes.RoomSettingsForm;
     [ONYXKEYS.FORMS.NEW_TASK_FORM]: FormTypes.NewTaskForm;
     [ONYXKEYS.FORMS.EDIT_TASK_FORM]: FormTypes.EditTaskForm;
+    [ONYXKEYS.FORMS.FEEDBACK_SURVEY_FORM]: FormTypes.FeedbackSurveyForm;
     [ONYXKEYS.FORMS.EXIT_SURVEY_REASON_FORM]: FormTypes.ExitSurveyReasonForm;
     [ONYXKEYS.FORMS.EXIT_SURVEY_RESPONSE_FORM]: FormTypes.ExitSurveyResponseForm;
     [ONYXKEYS.FORMS.MONEY_REQUEST_DESCRIPTION_FORM]: FormTypes.MoneyRequestDescriptionForm;
diff --git a/src/components/FeedbackSurvey.tsx b/src/components/FeedbackSurvey.tsx
index 71b0da06bd5f..df3c11cfd468 100644
--- a/src/components/FeedbackSurvey.tsx
+++ b/src/components/FeedbackSurvey.tsx
@@ -1,15 +1,21 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {translateLocal} from '@libs/Localize';
 import CONST from '@src/CONST';
 import type {FeedbackSurveyOptionID} from '@src/CONST';
-import type {TranslationPaths} from '@src/languages/types';
+import ONYXKEYS from '@src/ONYXKEYS';
+import INPUT_IDS from '@src/types/form/FeedbackSurveyForm';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import FixedFooter from './FixedFooter';
+import FormProvider from './Form/FormProvider';
+import InputWrapper from './Form/InputWrapper';
 import FormAlertWithSubmitButton from './FormAlertWithSubmitButton';
-import SingleOptionSelector from './SingleOptionSelector';
+import RadioButtons from './RadioButtons';
+import type {Choice} from './RadioButtons';
 import Text from './Text';
 import TextInput from './TextInput';
 
@@ -36,40 +42,44 @@ type FeedbackSurveyProps = {
     isLoading?: boolean;
 };
 
-type Option = {
-    key: FeedbackSurveyOptionID;
-    label: TranslationPaths;
-};
-
-const OPTIONS: Option[] = [
-    {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},
+const OPTIONS: Choice[] = [
+    {value: CONST.FEEDBACK_SURVEY_OPTIONS.TOO_LIMITED.ID, label: translateLocal(CONST.FEEDBACK_SURVEY_OPTIONS.TOO_LIMITED.TRANSLATION_KEY)},
+    {value: CONST.FEEDBACK_SURVEY_OPTIONS.TOO_EXPENSIVE.ID, label: translateLocal(CONST.FEEDBACK_SURVEY_OPTIONS.TOO_EXPENSIVE.TRANSLATION_KEY)},
+    {value: CONST.FEEDBACK_SURVEY_OPTIONS.INADEQUATE_SUPPORT.ID, label: translateLocal(CONST.FEEDBACK_SURVEY_OPTIONS.INADEQUATE_SUPPORT.TRANSLATION_KEY)},
+    {value: CONST.FEEDBACK_SURVEY_OPTIONS.BUSINESS_CLOSING.ID, label: translateLocal(CONST.FEEDBACK_SURVEY_OPTIONS.BUSINESS_CLOSING.TRANSLATION_KEY)},
 ];
 
 function FeedbackSurvey({title, description, onSubmit, optionRowStyles, footerText, isNoteRequired, isLoading}: FeedbackSurveyProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const theme = useTheme();
+    const [draft, draftResults] = useOnyx(ONYXKEYS.FORMS.FEEDBACK_SURVEY_FORM_DRAFT);
+    const isLoadingDraft = isLoadingOnyxValue(draftResults);
 
-    const selectCircleStyles: StyleProp<ViewStyle> = {borderColor: theme.border};
-    const [reason, setReason] = useState<Option>();
-    const [note, setNote] = useState('');
+    const [reason, setReason] = useState<FeedbackSurveyOptionID | undefined>(draft?.reason);
+    const [note, setNote] = useState(draft?.note);
     const [shouldShowReasonError, setShouldShowReasonError] = useState(false);
 
-    const handleOptionSelect = (option: Option) => {
+    useEffect(() => {
+        if (isLoadingDraft) {
+            return;
+        }
+        setNote(draft?.note);
+        setReason(draft?.reason);
+    // eslint-disable-next-line react-hooks/exhaustive-deps - only sync with Onyx after finish loading
+    }, [isLoadingDraft]);
+
+    const handleOptionSelect = (option: FeedbackSurveyOptionID) => {
         setShouldShowReasonError(false);
         setReason(option);
     };
 
     const handleSubmit = () => {
-        if (!reason || (isNoteRequired && !note.trim())) {
+        if (!reason || (isNoteRequired && !note?.trim())) {
             setShouldShowReasonError(true);
             return;
         }
 
-        onSubmit(reason.key, note.trim());
+        onSubmit(reason, note?.trim());
     };
 
     const handleSetNote = (text: string) => {
@@ -81,25 +91,37 @@ function FeedbackSurvey({title, description, onSubmit, optionRowStyles, footerTe
     };
 
     return (
-        <View style={[styles.flexGrow1, styles.justifyContentBetween]}>
+        <FormProvider
+            formID={ONYXKEYS.FORMS.FEEDBACK_SURVEY_FORM}
+            style={[styles.flexGrow1, styles.justifyContentBetween]}
+            onSubmit={handleSubmit}
+            submitButtonText={translate('common.submit')}
+            isSubmitButtonVisible={false}
+            enabledWhenOffline
+        >
             <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, optionRowStyles]}
-                    selectCircleStyles={selectCircleStyles}
-                    selectedOptionKey={reason?.key}
-                    onSelectOption={handleOptionSelect}
+                <InputWrapper
+                    InputComponent={RadioButtons}
+                    inputID={INPUT_IDS.REASON}
+                    items={OPTIONS}
+                    radioButtonStyle={[styles.mb7, optionRowStyles]}
+                    value={reason as string}
+                    onPress={handleOptionSelect as (value: string) => void}
+                    shouldSaveDraft
                 />
                 {!!reason && (
                     <>
                         <Text style={[styles.textNormalThemeText, styles.mb3]}>{translate('feedbackSurvey.additionalInfoTitle')}</Text>
-                        <TextInput
+                        <InputWrapper
+                            InputComponent={TextInput}
+                            inputID={INPUT_IDS.NOTE}
                             label={translate('feedbackSurvey.additionalInfoInputLabel')}
                             accessibilityLabel={translate('feedbackSurvey.additionalInfoInputLabel')}
                             role={CONST.ROLE.PRESENTATION}
                             onChangeText={handleSetNote}
+                            shouldSaveDraft
                             value={note}
                         />
                     </>
@@ -117,7 +139,7 @@ function FeedbackSurvey({title, description, onSubmit, optionRowStyles, footerTe
                     isLoading={isLoading}
                 />
             </FixedFooter>
-        </View>
+        </FormProvider>
     );
 }
 
diff --git a/src/types/form/FeedbackSurveyForm.ts b/src/types/form/FeedbackSurveyForm.ts
new file mode 100644
index 000000000000..b8cd68fd6630
--- /dev/null
+++ b/src/types/form/FeedbackSurveyForm.ts
@@ -0,0 +1,19 @@
+import type {ValueOf} from 'type-fest';
+import type {FeedbackSurveyOptionID} from '@src/CONST';
+import type Form from './Form';
+
+const INPUT_IDS = {
+    REASON: 'reason',
+    NOTE: 'note',
+} as const;
+
+type FeedbackSurveyForm = Form<
+    ValueOf<typeof INPUT_IDS>,
+    {
+        [INPUT_IDS.REASON]: FeedbackSurveyOptionID;
+        [INPUT_IDS.NOTE]: string;
+    }
+>;
+
+export type {FeedbackSurveyForm};
+export default INPUT_IDS;
diff --git a/src/types/form/index.ts b/src/types/form/index.ts
index 60c068b2bea1..fad83628e711 100644
--- a/src/types/form/index.ts
+++ b/src/types/form/index.ts
@@ -5,6 +5,7 @@ export type {DisplayNameForm} from './DisplayNameForm';
 export type {EditTaskForm} from './EditTaskForm';
 export type {ExitSurveyReasonForm} from './ExitSurveyReasonForm';
 export type {ExitSurveyResponseForm} from './ExitSurveyResponseForm';
+export type {FeedbackSurveyForm} from './FeedbackSurveyForm';
 export type {GetPhysicalCardForm} from './GetPhysicalCardForm';
 export type {HomeAddressForm} from './HomeAddressForm';
 export type {IKnowTeacherForm} from './IKnowTeacherForm';

From 0aa63b9de75b38bec9034d337c3d63934ea96bf2 Mon Sep 17 00:00:00 2001
From: mkzie2 <mkzie2@gmail.com>
Date: Tue, 13 Aug 2024 00:34:15 +0700
Subject: [PATCH 2/8] separate formIDs

---
 src/ONYXKEYS.ts                                     |  9 ++++++---
 src/components/FeedbackSurvey.tsx                   | 13 ++++++++-----
 .../DisableAutoRenewSurveyPage/index.tsx            |  2 ++
 .../RequestEarlyCancellationPage/index.tsx          |  2 ++
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index d083d74fffae..8ac06ab9fceb 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -571,8 +571,10 @@ const ONYXKEYS = {
         REIMBURSEMENT_ACCOUNT_FORM_DRAFT: 'reimbursementAccountDraft',
         PERSONAL_BANK_ACCOUNT_FORM: 'personalBankAccount',
         PERSONAL_BANK_ACCOUNT_FORM_DRAFT: 'personalBankAccountDraft',
-        FEEDBACK_SURVEY_FORM: 'feedbackSurveyForm',
-        FEEDBACK_SURVEY_FORM_DRAFT: 'feedbackSurveyFormDraft',
+        DISABLE_AUTO_RENEW_SURVEY_FORM: 'disableAutoRenewSurveyForm',
+        DISABLE_AUTO_RENEW_SURVEY_FORM_DRAFT: 'disableAutoRenewSurveyFormDraft',
+        REQUEST_EARLY_CANCELLATION_FORM: 'requestEarlyCancellationForm',
+        REQUEST_EARLY_CANCELLATION_FORM_DRAFT: 'requestEarlyCancellationFormDraft',
         EXIT_SURVEY_REASON_FORM: 'exitSurveyReasonForm',
         EXIT_SURVEY_REASON_FORM_DRAFT: 'exitSurveyReasonFormDraft',
         EXIT_SURVEY_RESPONSE_FORM: 'exitSurveyResponseForm',
@@ -645,7 +647,8 @@ type OnyxFormValuesMapping = {
     [ONYXKEYS.FORMS.ROOM_SETTINGS_FORM]: FormTypes.RoomSettingsForm;
     [ONYXKEYS.FORMS.NEW_TASK_FORM]: FormTypes.NewTaskForm;
     [ONYXKEYS.FORMS.EDIT_TASK_FORM]: FormTypes.EditTaskForm;
-    [ONYXKEYS.FORMS.FEEDBACK_SURVEY_FORM]: FormTypes.FeedbackSurveyForm;
+    [ONYXKEYS.FORMS.DISABLE_AUTO_RENEW_SURVEY_FORM]: FormTypes.FeedbackSurveyForm;
+    [ONYXKEYS.FORMS.REQUEST_EARLY_CANCELLATION_FORM]: FormTypes.FeedbackSurveyForm;
     [ONYXKEYS.FORMS.EXIT_SURVEY_REASON_FORM]: FormTypes.ExitSurveyReasonForm;
     [ONYXKEYS.FORMS.EXIT_SURVEY_RESPONSE_FORM]: FormTypes.ExitSurveyResponseForm;
     [ONYXKEYS.FORMS.MONEY_REQUEST_DESCRIPTION_FORM]: FormTypes.MoneyRequestDescriptionForm;
diff --git a/src/components/FeedbackSurvey.tsx b/src/components/FeedbackSurvey.tsx
index df3c11cfd468..7f22e6d2bdc5 100644
--- a/src/components/FeedbackSurvey.tsx
+++ b/src/components/FeedbackSurvey.tsx
@@ -7,7 +7,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {translateLocal} from '@libs/Localize';
 import CONST from '@src/CONST';
 import type {FeedbackSurveyOptionID} from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
+import type ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/FeedbackSurveyForm';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import FixedFooter from './FixedFooter';
@@ -20,6 +20,9 @@ import Text from './Text';
 import TextInput from './TextInput';
 
 type FeedbackSurveyProps = {
+    /** A unique Onyx key identifying the form */
+    formID: typeof ONYXKEYS.FORMS.DISABLE_AUTO_RENEW_SURVEY_FORM | typeof ONYXKEYS.FORMS.REQUEST_EARLY_CANCELLATION_FORM;
+
     /** Title of the survey */
     title: string;
 
@@ -49,10 +52,10 @@ const OPTIONS: Choice[] = [
     {value: CONST.FEEDBACK_SURVEY_OPTIONS.BUSINESS_CLOSING.ID, label: translateLocal(CONST.FEEDBACK_SURVEY_OPTIONS.BUSINESS_CLOSING.TRANSLATION_KEY)},
 ];
 
-function FeedbackSurvey({title, description, onSubmit, optionRowStyles, footerText, isNoteRequired, isLoading}: FeedbackSurveyProps) {
+function FeedbackSurvey({title, description, onSubmit, optionRowStyles, footerText, isNoteRequired, isLoading, formID}: FeedbackSurveyProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const [draft, draftResults] = useOnyx(ONYXKEYS.FORMS.FEEDBACK_SURVEY_FORM_DRAFT);
+    const [draft, draftResults] = useOnyx(`${formID}Draft`);
     const isLoadingDraft = isLoadingOnyxValue(draftResults);
 
     const [reason, setReason] = useState<FeedbackSurveyOptionID | undefined>(draft?.reason);
@@ -65,7 +68,7 @@ function FeedbackSurvey({title, description, onSubmit, optionRowStyles, footerTe
         }
         setNote(draft?.note);
         setReason(draft?.reason);
-    // eslint-disable-next-line react-hooks/exhaustive-deps - only sync with Onyx after finish loading
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps - only sync with Onyx after finish loading
     }, [isLoadingDraft]);
 
     const handleOptionSelect = (option: FeedbackSurveyOptionID) => {
@@ -92,7 +95,7 @@ function FeedbackSurvey({title, description, onSubmit, optionRowStyles, footerTe
 
     return (
         <FormProvider
-            formID={ONYXKEYS.FORMS.FEEDBACK_SURVEY_FORM}
+            formID={formID}
             style={[styles.flexGrow1, styles.justifyContentBetween]}
             onSubmit={handleSubmit}
             submitButtonText={translate('common.submit')}
diff --git a/src/pages/settings/Subscription/DisableAutoRenewSurveyPage/index.tsx b/src/pages/settings/Subscription/DisableAutoRenewSurveyPage/index.tsx
index 4895c119470c..655658363e87 100644
--- a/src/pages/settings/Subscription/DisableAutoRenewSurveyPage/index.tsx
+++ b/src/pages/settings/Subscription/DisableAutoRenewSurveyPage/index.tsx
@@ -8,6 +8,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as Subscription from '@userActions/Subscription';
 import type {FeedbackSurveyOptionID} from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 
 function DisableAutoRenewSurveyPage() {
     const {translate} = useLocalize();
@@ -31,6 +32,7 @@ function DisableAutoRenewSurveyPage() {
             />
             <ScrollView contentContainerStyle={[styles.flexGrow1, styles.pt3]}>
                 <FeedbackSurvey
+                    formID={ONYXKEYS.FORMS.DISABLE_AUTO_RENEW_SURVEY_FORM}
                     title={translate('subscription.subscriptionSettings.helpUsImprove')}
                     description={translate('subscription.subscriptionSettings.whatsMainReason')}
                     onSubmit={handleSubmit}
diff --git a/src/pages/settings/Subscription/RequestEarlyCancellationPage/index.tsx b/src/pages/settings/Subscription/RequestEarlyCancellationPage/index.tsx
index 4e691a57a48d..ab148f8d8edc 100644
--- a/src/pages/settings/Subscription/RequestEarlyCancellationPage/index.tsx
+++ b/src/pages/settings/Subscription/RequestEarlyCancellationPage/index.tsx
@@ -17,6 +17,7 @@ import * as Report from '@userActions/Report';
 import * as Subscription from '@userActions/Subscription';
 import type {CancellationType, FeedbackSurveyOptionID} from '@src/CONST';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
 function RequestEarlyCancellationPage() {
@@ -98,6 +99,7 @@ function RequestEarlyCancellationPage() {
     const surveyContent = useMemo(
         () => (
             <FeedbackSurvey
+                formID={ONYXKEYS.FORMS.REQUEST_EARLY_CANCELLATION_FORM}
                 title={translate('subscription.subscriptionSettings.helpUsImprove')}
                 description={translate('subscription.requestEarlyCancellation.subtitle')}
                 onSubmit={handleSubmit}

From 62f57e6dabd1da8c38959f04d863a5836cf00d2d Mon Sep 17 00:00:00 2001
From: mkzie2 <mkzie2@gmail.com>
Date: Tue, 13 Aug 2024 09:58:45 +0700
Subject: [PATCH 3/8] fix lint

---
 src/components/FeedbackSurvey.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FeedbackSurvey.tsx b/src/components/FeedbackSurvey.tsx
index 7f22e6d2bdc5..0913dcf87ea7 100644
--- a/src/components/FeedbackSurvey.tsx
+++ b/src/components/FeedbackSurvey.tsx
@@ -68,7 +68,7 @@ function FeedbackSurvey({title, description, onSubmit, optionRowStyles, footerTe
         }
         setNote(draft?.note);
         setReason(draft?.reason);
-        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps - only sync with Onyx after finish loading
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [isLoadingDraft]);
 
     const handleOptionSelect = (option: FeedbackSurveyOptionID) => {

From ce4993f2998214f67a9241359f14004da84bd1d2 Mon Sep 17 00:00:00 2001
From: mkzie2 <mkzie2@gmail.com>
Date: Wed, 14 Aug 2024 16:37:36 +0700
Subject: [PATCH 4/8] use draft values directly without states and clear draft
 on submit

---
 src/components/FeedbackSurvey.tsx | 45 +++++++++++--------------------
 1 file changed, 15 insertions(+), 30 deletions(-)

diff --git a/src/components/FeedbackSurvey.tsx b/src/components/FeedbackSurvey.tsx
index 0913dcf87ea7..88bfa504d2ea 100644
--- a/src/components/FeedbackSurvey.tsx
+++ b/src/components/FeedbackSurvey.tsx
@@ -1,15 +1,15 @@
-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as FormActions from '@libs/actions/FormActions';
 import {translateLocal} from '@libs/Localize';
 import CONST from '@src/CONST';
 import type {FeedbackSurveyOptionID} from '@src/CONST';
-import type ONYXKEYS from '@src/ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/FeedbackSurveyForm';
-import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import FixedFooter from './FixedFooter';
 import FormProvider from './Form/FormProvider';
 import InputWrapper from './Form/InputWrapper';
@@ -55,42 +55,29 @@ const OPTIONS: Choice[] = [
 function FeedbackSurvey({title, description, onSubmit, optionRowStyles, footerText, isNoteRequired, isLoading, formID}: FeedbackSurveyProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const [draft, draftResults] = useOnyx(`${formID}Draft`);
-    const isLoadingDraft = isLoadingOnyxValue(draftResults);
-
-    const [reason, setReason] = useState<FeedbackSurveyOptionID | undefined>(draft?.reason);
-    const [note, setNote] = useState(draft?.note);
+    const [draft] = useOnyx(`${formID}Draft`);
     const [shouldShowReasonError, setShouldShowReasonError] = useState(false);
 
-    useEffect(() => {
-        if (isLoadingDraft) {
-            return;
-        }
-        setNote(draft?.note);
-        setReason(draft?.reason);
-        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, [isLoadingDraft]);
-
-    const handleOptionSelect = (option: FeedbackSurveyOptionID) => {
+    const handleOptionSelect = () => {
         setShouldShowReasonError(false);
-        setReason(option);
     };
 
     const handleSubmit = () => {
-        if (!reason || (isNoteRequired && !note?.trim())) {
+        if (!draft?.reason || (isNoteRequired && !draft?.note.trim())) {
             setShouldShowReasonError(true);
             return;
         }
 
-        onSubmit(reason, note?.trim());
+        onSubmit(draft?.reason, draft?.note.trim());
+        FormActions.clearDraftValues(ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM);
     };
 
-    const handleSetNote = (text: string) => {
-        setNote(text);
-
-        if (isNoteRequired && shouldShowReasonError) {
-            setShouldShowReasonError(false);
+    const handleSetNote = () => {
+        if (!isNoteRequired || !shouldShowReasonError) {
+            return;
         }
+
+        setShouldShowReasonError(false);
     };
 
     return (
@@ -110,11 +97,10 @@ function FeedbackSurvey({title, description, onSubmit, optionRowStyles, footerTe
                     inputID={INPUT_IDS.REASON}
                     items={OPTIONS}
                     radioButtonStyle={[styles.mb7, optionRowStyles]}
-                    value={reason as string}
-                    onPress={handleOptionSelect as (value: string) => void}
+                    onPress={handleOptionSelect}
                     shouldSaveDraft
                 />
-                {!!reason && (
+                {!!draft?.reason && (
                     <>
                         <Text style={[styles.textNormalThemeText, styles.mb3]}>{translate('feedbackSurvey.additionalInfoTitle')}</Text>
                         <InputWrapper
@@ -125,7 +111,6 @@ function FeedbackSurvey({title, description, onSubmit, optionRowStyles, footerTe
                             role={CONST.ROLE.PRESENTATION}
                             onChangeText={handleSetNote}
                             shouldSaveDraft
-                            value={note}
                         />
                     </>
                 )}

From ed9a8cbbfd93f59667f700a27a8dc59edbf7668c Mon Sep 17 00:00:00 2001
From: mkzie2 <mkzie2@gmail.com>
Date: Wed, 14 Aug 2024 17:01:33 +0700
Subject: [PATCH 5/8] use optional chaining where appropriate

---
 src/components/FeedbackSurvey.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/FeedbackSurvey.tsx b/src/components/FeedbackSurvey.tsx
index 88bfa504d2ea..1a9f119d694e 100644
--- a/src/components/FeedbackSurvey.tsx
+++ b/src/components/FeedbackSurvey.tsx
@@ -63,12 +63,12 @@ function FeedbackSurvey({title, description, onSubmit, optionRowStyles, footerTe
     };
 
     const handleSubmit = () => {
-        if (!draft?.reason || (isNoteRequired && !draft?.note.trim())) {
+        if (!draft?.reason || (isNoteRequired && !draft.note?.trim())) {
             setShouldShowReasonError(true);
             return;
         }
 
-        onSubmit(draft?.reason, draft?.note.trim());
+        onSubmit(draft.reason, draft.note?.trim());
         FormActions.clearDraftValues(ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM);
     };
 

From 0fa78662dd4ceef90d020d7449399bbc409f4f82 Mon Sep 17 00:00:00 2001
From: mkzie2 <mkzie2@gmail.com>
Date: Thu, 15 Aug 2024 10:45:29 +0700
Subject: [PATCH 6/8] type import and clear formID drafts

---
 src/components/FeedbackSurvey.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/FeedbackSurvey.tsx b/src/components/FeedbackSurvey.tsx
index 1a9f119d694e..3ceddf366b91 100644
--- a/src/components/FeedbackSurvey.tsx
+++ b/src/components/FeedbackSurvey.tsx
@@ -8,7 +8,7 @@ import * as FormActions from '@libs/actions/FormActions';
 import {translateLocal} from '@libs/Localize';
 import CONST from '@src/CONST';
 import type {FeedbackSurveyOptionID} from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
+import type ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/FeedbackSurveyForm';
 import FixedFooter from './FixedFooter';
 import FormProvider from './Form/FormProvider';
@@ -69,7 +69,7 @@ function FeedbackSurvey({title, description, onSubmit, optionRowStyles, footerTe
         }
 
         onSubmit(draft.reason, draft.note?.trim());
-        FormActions.clearDraftValues(ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM);
+        FormActions.clearDraftValues(formID);
     };
 
     const handleSetNote = () => {

From 6dc5cd9284dc86bb695b8899a8c80aba4d7ac861 Mon Sep 17 00:00:00 2001
From: mkzie2 <mkzie2@gmail.com>
Date: Thu, 15 Aug 2024 23:01:13 +0700
Subject: [PATCH 7/8] memoize options

---
 src/components/FeedbackSurvey.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/FeedbackSurvey.tsx b/src/components/FeedbackSurvey.tsx
index 3ceddf366b91..25421ff61e7e 100644
--- a/src/components/FeedbackSurvey.tsx
+++ b/src/components/FeedbackSurvey.tsx
@@ -1,11 +1,10 @@
-import React, {useState} from 'react';
+import React, {useMemo, useState} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as FormActions from '@libs/actions/FormActions';
-import {translateLocal} from '@libs/Localize';
 import CONST from '@src/CONST';
 import type {FeedbackSurveyOptionID} from '@src/CONST';
 import type ONYXKEYS from '@src/ONYXKEYS';
@@ -45,19 +44,22 @@ type FeedbackSurveyProps = {
     isLoading?: boolean;
 };
 
-const OPTIONS: Choice[] = [
-    {value: CONST.FEEDBACK_SURVEY_OPTIONS.TOO_LIMITED.ID, label: translateLocal(CONST.FEEDBACK_SURVEY_OPTIONS.TOO_LIMITED.TRANSLATION_KEY)},
-    {value: CONST.FEEDBACK_SURVEY_OPTIONS.TOO_EXPENSIVE.ID, label: translateLocal(CONST.FEEDBACK_SURVEY_OPTIONS.TOO_EXPENSIVE.TRANSLATION_KEY)},
-    {value: CONST.FEEDBACK_SURVEY_OPTIONS.INADEQUATE_SUPPORT.ID, label: translateLocal(CONST.FEEDBACK_SURVEY_OPTIONS.INADEQUATE_SUPPORT.TRANSLATION_KEY)},
-    {value: CONST.FEEDBACK_SURVEY_OPTIONS.BUSINESS_CLOSING.ID, label: translateLocal(CONST.FEEDBACK_SURVEY_OPTIONS.BUSINESS_CLOSING.TRANSLATION_KEY)},
-];
-
 function FeedbackSurvey({title, description, onSubmit, optionRowStyles, footerText, isNoteRequired, isLoading, formID}: FeedbackSurveyProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const [draft] = useOnyx(`${formID}Draft`);
     const [shouldShowReasonError, setShouldShowReasonError] = useState(false);
 
+    const options = useMemo<Choice[]>(
+        () => [
+            {value: CONST.FEEDBACK_SURVEY_OPTIONS.TOO_LIMITED.ID, label: translate(CONST.FEEDBACK_SURVEY_OPTIONS.TOO_LIMITED.TRANSLATION_KEY)},
+            {value: CONST.FEEDBACK_SURVEY_OPTIONS.TOO_EXPENSIVE.ID, label: translate(CONST.FEEDBACK_SURVEY_OPTIONS.TOO_EXPENSIVE.TRANSLATION_KEY)},
+            {value: CONST.FEEDBACK_SURVEY_OPTIONS.INADEQUATE_SUPPORT.ID, label: translate(CONST.FEEDBACK_SURVEY_OPTIONS.INADEQUATE_SUPPORT.TRANSLATION_KEY)},
+            {value: CONST.FEEDBACK_SURVEY_OPTIONS.BUSINESS_CLOSING.ID, label: translate(CONST.FEEDBACK_SURVEY_OPTIONS.BUSINESS_CLOSING.TRANSLATION_KEY)},
+        ],
+        [translate],
+    );
+
     const handleOptionSelect = () => {
         setShouldShowReasonError(false);
     };
@@ -95,7 +97,7 @@ function FeedbackSurvey({title, description, onSubmit, optionRowStyles, footerTe
                 <InputWrapper
                     InputComponent={RadioButtons}
                     inputID={INPUT_IDS.REASON}
-                    items={OPTIONS}
+                    items={options}
                     radioButtonStyle={[styles.mb7, optionRowStyles]}
                     onPress={handleOptionSelect}
                     shouldSaveDraft

From 1fe780682fcd54260820b19638f48a80ed77d3d7 Mon Sep 17 00:00:00 2001
From: mkzie2 <mkzie2@gmail.com>
Date: Fri, 16 Aug 2024 16:17:20 +0700
Subject: [PATCH 8/8] use state for reason

---
 src/components/FeedbackSurvey.tsx | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/FeedbackSurvey.tsx b/src/components/FeedbackSurvey.tsx
index 25421ff61e7e..a17cca5efae4 100644
--- a/src/components/FeedbackSurvey.tsx
+++ b/src/components/FeedbackSurvey.tsx
@@ -1,4 +1,4 @@
-import React, {useMemo, useState} from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
@@ -9,6 +9,7 @@ import CONST from '@src/CONST';
 import type {FeedbackSurveyOptionID} from '@src/CONST';
 import type ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/FeedbackSurveyForm';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import FixedFooter from './FixedFooter';
 import FormProvider from './Form/FormProvider';
 import InputWrapper from './Form/InputWrapper';
@@ -47,9 +48,12 @@ type FeedbackSurveyProps = {
 function FeedbackSurvey({title, description, onSubmit, optionRowStyles, footerText, isNoteRequired, isLoading, formID}: FeedbackSurveyProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const [draft] = useOnyx(`${formID}Draft`);
+    const [draft, draftResults] = useOnyx(`${formID}Draft`);
+    const [reason, setReason] = useState<string | undefined>(draft?.reason);
     const [shouldShowReasonError, setShouldShowReasonError] = useState(false);
 
+    const isLoadingDraft = isLoadingOnyxValue(draftResults);
+
     const options = useMemo<Choice[]>(
         () => [
             {value: CONST.FEEDBACK_SURVEY_OPTIONS.TOO_LIMITED.ID, label: translate(CONST.FEEDBACK_SURVEY_OPTIONS.TOO_LIMITED.TRANSLATION_KEY)},
@@ -60,7 +64,17 @@ function FeedbackSurvey({title, description, onSubmit, optionRowStyles, footerTe
         [translate],
     );
 
-    const handleOptionSelect = () => {
+    useEffect(() => {
+        if (!draft?.reason || isLoadingDraft) {
+            return;
+        }
+
+        setReason(draft.reason);
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- only sync with draft data when it is loaded
+    }, [isLoadingDraft]);
+
+    const handleOptionSelect = (value: string) => {
+        setReason(value);
         setShouldShowReasonError(false);
     };
 
@@ -102,7 +116,7 @@ function FeedbackSurvey({title, description, onSubmit, optionRowStyles, footerTe
                     onPress={handleOptionSelect}
                     shouldSaveDraft
                 />
-                {!!draft?.reason && (
+                {!!reason && (
                     <>
                         <Text style={[styles.textNormalThemeText, styles.mb3]}>{translate('feedbackSurvey.additionalInfoTitle')}</Text>
                         <InputWrapper