1fa4748168
- Updated NativeCancelSubscriptionModal to use translation keys for titles and messages. - Enhanced CircleSetupView with translation for notifications and UI text. - Refactored ThingsView to implement translation for notifications, titles, and descriptions. - Added translation support in AdvancedOptionsSection for labels and descriptions. - Implemented i18n in RepeatPickerField for various UI elements and labels.
91 lines
3.1 KiB
JavaScript
91 lines
3.1 KiB
JavaScript
import { Box, Typography } from '@mui/joy'
|
|
import { Trans, useTranslation } from 'react-i18next'
|
|
|
|
import ModalActions from '../../../components/common/ModalActions'
|
|
import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
|
|
|
|
// The store steps embed bolded UI names mid-sentence, so they go through
|
|
// <Trans> rather than t() — translators keep the emphasis where their own
|
|
// word order needs it.
|
|
const Step = ({ i18nKey, ...props }) => (
|
|
<Typography level='body-sm' {...props}>
|
|
<Trans i18nKey={i18nKey} ns='settings' components={{ b: <strong /> }} />
|
|
</Typography>
|
|
)
|
|
|
|
const NativeCancelSubscriptionModal = ({ isOpen, onClose }) => {
|
|
const { ResponsiveModal } = useResponsiveModal()
|
|
const { t } = useTranslation('settings')
|
|
|
|
return (
|
|
<ResponsiveModal
|
|
open={isOpen}
|
|
onClose={onClose}
|
|
size='lg'
|
|
title={t('nativeCancel.title')}
|
|
footer={
|
|
<ModalActions
|
|
stackOnMobile
|
|
tertiary={{ label: t('nativeCancel.dismiss'), onClick: onClose }}
|
|
secondary={{
|
|
label: t('nativeCancel.cancelViaStore'),
|
|
onClick: onClose,
|
|
}}
|
|
primary={{
|
|
label: t('nativeCancel.cancelDesktop'),
|
|
color: 'danger',
|
|
onClick: () => onClose('desktop'),
|
|
}}
|
|
/>
|
|
}
|
|
>
|
|
<Box>
|
|
<Typography level='body-md' mb={3}>
|
|
{t('nativeCancel.intro')}
|
|
</Typography>
|
|
|
|
<Box mb={3}>
|
|
<Typography level='title-md' mb={2} color='primary'>
|
|
{t('nativeCancel.iosHeading')}
|
|
</Typography>
|
|
<Step i18nKey='nativeCancel.iosStep1' mb={1} />
|
|
<Step i18nKey='nativeCancel.iosStep2' mb={1} />
|
|
<Step i18nKey='nativeCancel.iosStep3' mb={1} />
|
|
<Step i18nKey='nativeCancel.iosStep4' mb={1} />
|
|
<Step i18nKey='nativeCancel.iosStep5' mb={2} />
|
|
<Step i18nKey='nativeCancel.iosNote' mb={2} color='warning' />
|
|
</Box>
|
|
|
|
<Box mb={3}>
|
|
<Typography level='title-md' mb={2} color='primary'>
|
|
{t('nativeCancel.androidHeading')}
|
|
</Typography>
|
|
<Step i18nKey='nativeCancel.androidStep1' mb={1} />
|
|
<Step i18nKey='nativeCancel.androidStep2' mb={1} />
|
|
<Step i18nKey='nativeCancel.androidStep3' mb={1} />
|
|
<Step i18nKey='nativeCancel.androidStep4' mb={1} />
|
|
<Step i18nKey='nativeCancel.androidStep5' mb={1} />
|
|
<Step i18nKey='nativeCancel.androidStep6' mb={2} />
|
|
<Step i18nKey='nativeCancel.androidNote' mb={2} color='warning' />
|
|
</Box>
|
|
|
|
<Box mb={3}>
|
|
<Typography level='title-md' mb={2} color='primary'>
|
|
{t('nativeCancel.webHeading')}
|
|
</Typography>
|
|
<Typography level='body-sm' mb={2}>
|
|
{t('nativeCancel.webBody')}
|
|
</Typography>
|
|
<Step i18nKey='nativeCancel.webNote' mb={2} color='warning' />
|
|
</Box>
|
|
|
|
<Typography level='body-sm' mb={3} color='neutral'>
|
|
{t('nativeCancel.footer')}
|
|
</Typography>
|
|
</Box>
|
|
</ResponsiveModal>
|
|
)
|
|
}
|
|
|
|
export default NativeCancelSubscriptionModal
|