feat: integrate i18n for translation in various components
- 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.
This commit is contained in:
Mo Tarbin
@@ -1,27 +1,38 @@
|
||||
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='Cancel Subscription'
|
||||
title={t('nativeCancel.title')}
|
||||
footer={
|
||||
<ModalActions
|
||||
stackOnMobile
|
||||
tertiary={{ label: 'Dismiss', onClick: onClose }}
|
||||
tertiary={{ label: t('nativeCancel.dismiss'), onClick: onClose }}
|
||||
secondary={{
|
||||
label: "I'll cancel from my app store",
|
||||
label: t('nativeCancel.cancelViaStore'),
|
||||
onClick: onClose,
|
||||
}}
|
||||
primary={{
|
||||
label: 'Cancel desktop subscription',
|
||||
label: t('nativeCancel.cancelDesktop'),
|
||||
color: 'danger',
|
||||
onClick: () => onClose('desktop'),
|
||||
}}
|
||||
@@ -30,87 +41,46 @@ const NativeCancelSubscriptionModal = ({ isOpen, onClose }) => {
|
||||
>
|
||||
<Box>
|
||||
<Typography level='body-md' mb={3}>
|
||||
To cancel your subscription, please follow the instructions for your
|
||||
platform (you should cancel through the same platform you used to
|
||||
subscribe).
|
||||
{t('nativeCancel.intro')}
|
||||
</Typography>
|
||||
|
||||
<Box mb={3}>
|
||||
<Typography level='title-md' mb={2} color='primary'>
|
||||
For iOS (iPhone/iPad):
|
||||
</Typography>
|
||||
<Typography level='body-sm' mb={1}>
|
||||
1. Open the <strong>Settings</strong> app on your device
|
||||
</Typography>
|
||||
<Typography level='body-sm' mb={1}>
|
||||
2. Tap your name at the top of the screen
|
||||
</Typography>
|
||||
<Typography level='body-sm' mb={1}>
|
||||
3. Tap <strong>Subscriptions</strong>
|
||||
</Typography>
|
||||
<Typography level='body-sm' mb={1}>
|
||||
4. Find and tap <strong>Donetick</strong>
|
||||
</Typography>
|
||||
<Typography level='body-sm' mb={2}>
|
||||
5. Tap <strong>Cancel Subscription</strong>
|
||||
</Typography>
|
||||
<Typography level='body-sm' mb={2} color='warning'>
|
||||
<strong>Note:</strong> If you subscribed through iOS and are using
|
||||
the web/desktop version, you must cancel through iOS Settings as
|
||||
described above.
|
||||
{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'>
|
||||
For Android:
|
||||
</Typography>
|
||||
<Typography level='body-sm' mb={1}>
|
||||
1. Open the <strong>Google Play Store</strong> app
|
||||
</Typography>
|
||||
<Typography level='body-sm' mb={1}>
|
||||
2. Tap the profile icon in the top right
|
||||
</Typography>
|
||||
<Typography level='body-sm' mb={1}>
|
||||
3. Tap <strong>Payments & subscriptions</strong>
|
||||
</Typography>
|
||||
<Typography level='body-sm' mb={1}>
|
||||
4. Tap <strong>Subscriptions</strong>
|
||||
</Typography>
|
||||
<Typography level='body-sm' mb={1}>
|
||||
5. Find and tap <strong>Donetick</strong>
|
||||
</Typography>
|
||||
<Typography level='body-sm' mb={2}>
|
||||
6. Tap <strong>Cancel subscription</strong>
|
||||
</Typography>
|
||||
<Typography level='body-sm' mb={2} color='warning'>
|
||||
<strong>Note:</strong> If you subscribed through Google Play and are
|
||||
using the web/desktop version, you must cancel through Google Play
|
||||
as described above.
|
||||
{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'>
|
||||
For Web/Desktop Subscriptions:
|
||||
{t('nativeCancel.webHeading')}
|
||||
</Typography>
|
||||
<Typography level='body-sm' mb={2}>
|
||||
If you originally subscribed through our website or desktop app, you
|
||||
can cancel your subscription by going to the Account Settings
|
||||
section on our website. using a web browser
|
||||
</Typography>
|
||||
<Typography level='body-sm' mb={2} color='warning'>
|
||||
<strong>Important:</strong> You must cancel your subscription
|
||||
through the same platform where you originally subscribed. If you
|
||||
subscribed through the iOS App Store or Google Play Store (even if
|
||||
you're now using the web/desktop version), you must cancel
|
||||
through that original platform using the instructions above.
|
||||
{t('nativeCancel.webBody')}
|
||||
</Typography>
|
||||
<Step i18nKey='nativeCancel.webNote' mb={2} color='warning' />
|
||||
</Box>
|
||||
|
||||
<Typography level='body-sm' mb={3} color='neutral'>
|
||||
Your subscription will remain active until the end of your current
|
||||
billing period.
|
||||
{t('nativeCancel.footer')}
|
||||
</Typography>
|
||||
</Box>
|
||||
</ResponsiveModal>
|
||||
|
||||
Reference in New Issue
Block a user