added interface and get locale from mock data

src/components/@shared/FormFields/BoxSelection/index.tsx

@@ -4,7 +4,6 @@ import Loader from '@shared/atoms/Loader'
 import styles from './index.module.css'
 
 const cx = classNames.bind(styles)
-
 export interface BoxSelectionOption {
   name: string
   value?: string
@@ -14,18 +13,20 @@ export interface BoxSelectionOption {
   text?: JSX.Element | string
 }
 
+export interface BoxSelectionProps {
+  name: string
+  options: BoxSelectionOption[]
+  disabled?: boolean
+  handleChange?: (event: ChangeEvent<HTMLInputElement>) => void
+}
+
 export default function BoxSelection({
   name,
   options,
   disabled,
   handleChange,
   ...props
-}: {
+}: BoxSelectionProps): JSX.Element {
-  name: string
-  options: BoxSelectionOption[]
-  disabled?: boolean
-  handleChange?: (event: ChangeEvent<HTMLInputElement>) => void
-}): JSX.Element {
   const styleClassesWrapper = cx({
     boxSelectionsWrapper: true,
     [styles.disabled]: disabled

src/components/@shared/Price/PriceUnit/index.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import PriceUnit, { PriceUnitProps } from '@shared/Price/PriceUnit'
-import { useUserPreferences } from '@context/UserPreferences'
+import { locale } from '.storybook/__mockdata__'
 
 export default {
   title: 'Component/@shared/Price/PriceUnit',
@@ -9,9 +9,6 @@ export default {
 } as ComponentMeta<typeof PriceUnit>
 
 const Template: ComponentStory<typeof PriceUnit> = (args: PriceUnitProps) => {
-  const { locale } = useUserPreferences()
-
-  if (!locale) return
   return <PriceUnit {...args} />
 }
 
@@ -21,5 +18,6 @@ interface Props {
 
 export const Default: Props = Template.bind({})
 Default.args = {
-  price: '11.12333'
+  price: '11.12333',
+  locale
 }

src/components/@shared/Price/index.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import Price, { PriceProps } from '@shared/Price'
 import { AccessDetails } from 'src/@types/Price'
+import { locale } from '.storybook/__mockdata__'
 
 export default {
   title: 'Component/@shared/Price',
@@ -39,5 +40,6 @@ const accessDetailsData = {
 
 export const Default: Props = Template.bind({})
 Default.args = {
-  accessDetails: accessDetailsData as AccessDetails
+  accessDetails: accessDetailsData as AccessDetails,
+  locale
 }