fix localization

Author: situchan

src/stories/Form.stories.tsx

@@ -13,6 +13,7 @@ import Picker from '@components/Picker';
 import StateSelector from '@components/StateSelector';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
+import useLocalize from '@hooks/useLocalize';
 import {isRequiredFulfilled} from '@libs/ValidationUtils';
 import {clearErrors, setDraftValues, setErrors, setIsLoading} from '@userActions/FormActions';
 import CONST from '@src/CONST';
@@ -63,6 +64,8 @@ const story: Meta<typeof FormProvider> = {
 };
 
 function Template(props: FormProviderProps & FormProviderOnyxProps) {
+    const {translate} = useLocalize();
+
     // Form consumes data from Onyx, so we initialize Onyx with the necessary data here
     setIsLoading(props.formID, !!props.formState?.isLoading);
     setDraftValues(props.formID, props.draftValues);
@@ -99,7 +102,7 @@ function Template(props: FormProviderProps & FormProviderOnyxProps) {
                 label="Street"
                 inputID="street"
                 containerStyles={defaultStyles.mt4}
-                hint="common.noPO"
+                hint={translate('common.noPO')}
             />
             <InputWrapper
                 InputComponent={DatePicker}

src/stories/PromotedActionBar.stories.tsx

@@ -14,8 +14,7 @@ const story = {
     component: PromotedActionsBar,
 };
 
-type PromotedActionWithText = Omit<PromotedAction, 'translationKey'> & {text: string};
-type PromotedActionsBarPropsWithText = Omit<PromotedActionsBarProps, 'promotedActions'> & {promotedActions: PromotedActionWithText[]};
+type PromotedActionsBarPropsWithText = Omit<PromotedActionsBarProps, 'promotedActions'> & {promotedActions: PromotedAction[]};
 type StoryType = typeof Template & {args?: Partial<PromotedActionsBarPropsWithText>};
 
 function Template(args: PromotedActionsBarProps) {
@@ -33,29 +32,29 @@ const promotedActions = [
     {
         key: 'join',
         icon: 'CommentBubbles',
-        text: 'Join',
+        translationKey: 'common.message',
         onSelected: () => {},
     },
     {
         key: 'pin',
         icon: 'Pin',
-        text: 'Pin',
+        translationKey: 'common.pin',
         onSelected: () => {},
     },
     {
         key: 'share',
         icon: 'QrCode',
-        text: 'Share',
+        translationKey: 'common.share',
         onSelected: () => {},
     },
-] satisfies PromotedActionWithText[];
+] satisfies PromotedAction[];
 
 const defaultPromotedAction = {
     key: '',
     icon: 'ChatBubbles',
-    text: '',
+    translationKey: 'common.join',
     onSelected: () => {},
-} satisfies PromotedActionWithText;
+} satisfies PromotedAction;
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args