120 lines
4.4 KiB
JavaScript
120 lines
4.4 KiB
JavaScript
import { Box, Typography } from '@mui/joy'
|
|
import ModalActions from '../../../components/common/ModalActions'
|
|
import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
|
|
|
|
const NativeCancelSubscriptionModal = ({ isOpen, onClose }) => {
|
|
const { ResponsiveModal } = useResponsiveModal()
|
|
|
|
return (
|
|
<ResponsiveModal
|
|
open={isOpen}
|
|
onClose={onClose}
|
|
size='lg'
|
|
title='Cancel Subscription'
|
|
footer={
|
|
<ModalActions
|
|
stackOnMobile
|
|
tertiary={{ label: 'Dismiss', onClick: onClose }}
|
|
secondary={{
|
|
label: "I'll cancel from my app store",
|
|
onClick: onClose,
|
|
}}
|
|
primary={{
|
|
label: 'Cancel desktop subscription',
|
|
color: 'danger',
|
|
onClick: () => onClose('desktop'),
|
|
}}
|
|
/>
|
|
}
|
|
>
|
|
<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).
|
|
</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.
|
|
</Typography>
|
|
</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.
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Box mb={3}>
|
|
<Typography level='title-md' mb={2} color='primary'>
|
|
For Web/Desktop Subscriptions:
|
|
</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.
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Typography level='body-sm' mb={3} color='neutral'>
|
|
Your subscription will remain active until the end of your current
|
|
billing period.
|
|
</Typography>
|
|
</Box>
|
|
</ResponsiveModal>
|
|
)
|
|
}
|
|
|
|
export default NativeCancelSubscriptionModal
|