taro/src/pages/notification/setting.tsx

import { View, Text, Switch, ScrollView } from "@tarojs/components";
import Metric from "@/features/trackSomething/components/Metric";
import { useDidShow, usePullDownRefresh, useShareAppMessage } from "@tarojs/taro";
import { useTranslation } from "react-i18next";
import Segment from '@/components/navigation/Segment'
import { useEffect, useState } from "react";
import { kIsAndroid, rpxToPx } from "@/utils/tools";
import './setting.scss'
import { getNotifySettings, postNotifySettings } from "@/services/notifications";
import { ColorType } from "@/context/themes/color";

export default function Page() {
    const { t } = useTranslation()
    const [segmentIndex, setSegmentIndex] = useState(0)
    const [notification, setNotification] = useState<any>(null)
    const [isExtra, setIsExtra] = useState(false)
    const [isSunrise, setIsSunrise] = useState(false)
    const [isSunset, setIsSunset] = useState(false)
    const [isSolarNoon, setIsSolarNoon] = useState(false)
    const [loaded, setLoaded] = useState(false)

    useEffect(() => {
        checkSetting()
        getSettings()
    }, [])

    function getSettings() {
        getNotifySettings().then(res => {
            var dt = (res as any).notification
            setNotification(dt)
            setIsExtra(dt.fast_sleep.extra_reminders.in_app == 'ON')
            setIsSunrise(dt.follow_sun.sunrise.in_app == 'ON')
            setIsSunset(dt.follow_sun.sunset.in_app == 'ON')
            setIsSolarNoon(dt.follow_sun.solar_noon.in_app == 'ON')
            setLoaded(true)
        })
    }

    function checkSetting() {
        console.log('notification setting begin')
        if (process.env.TARO_ENV == 'rn' && kIsAndroid) {
            var Jto = require('react-native').NativeModules.NativeBridge;
            Jto.getChannelStatus().then(result => {
                var data = JSON.parse(result);
                console.log('notification setting', data)
            })
        }

    }

    function goSetting() {
        if (process.env.TARO_ENV == 'rn' && kIsAndroid) {
            var Jto = require('react-native').NativeModules.NativeBridge;
            Jto.openNotificationSettings()
        }
    }

    function free() {
        return <View className="setting_container">
            <View className="setting_section">
                <Text className="setting_section_title">Fasting</Text>
            </View>
            <Text className="setting_header">Reminders</Text>
            <View className="setting_cell">
                <Text className="setting_cell_title" style={{ flex: 1 }}>At your scheduled time</Text>
                <Text className="setting_cell_value1">{notification.fast_sleep.reminders.in_app}</Text>
            </View>
            <Text className="setting_footer">A timely reminder so you never miss your scheduled time for fasting.</Text>
        </View>
    }

    function pro() {
        return <ScrollView style={{ flex: 1 }}>
            <View className="setting_container">
                <View className="setting_section">
                    <Text className="setting_section_title">Fasting with/or Sleep</Text>
                </View>
                <Text className="setting_header">Reminders</Text>
                <View className="setting_cell">
                    <Text className="setting_cell_title" style={{ flex: 1 }}>At my scheduled time</Text>
                    <Text className="setting_cell_value1">Always</Text>
                </View>
                <Text className="setting_footer">A timely reminder so you never miss your scheduled time for fasting or sleep.</Text>
                <Text className="setting_header">Extra Reminders</Text>
                <View className="setting_cell">
                    <Text className="setting_cell_title" style={{ flex: 1 }}>If I missed previous action</Text>
                    <Switch className="myswitch" checked={isExtra} color={ColorType.fast} onChange={(e) => {
                        // setIsMulti(e.detail.value)
                        postNotifySettings({
                            notification:{
                                fast_sleep:{
                                    extra_reminders:{
                                        in_app:e.detail.value?'ON':'OFF'
                                    }
                                }
                            }
                        })
                    }}/>
                </View>
                <Text className="setting_footer">In cases when you missed a previous action, you receive another reminder to log it together with the current action. This gives you extra protection against any streak loss.</Text>
                <View className="setting_section">
                    <Text className="setting_section_title">Follow the Sun (PRO)</Text>
                </View>
                <Text className="setting_header">Reminders for Your Daily Local Sun Schedule</Text>
                <View className="setting_cell_group">
                    <View className="setting_cell_group_item">
                        <Text className="setting_cell_title" style={{ flex: 1 }}>Sunrise</Text>
                        <Switch className="myswitch" checked={isSunrise} color={ColorType.fast} onChange={(e) => {
                        // setIsMulti(e.detail.value)
                        postNotifySettings({
                            notification:{
                                follow_sun:{
                                    sunrise:{
                                        in_app:e.detail.value?'ON':'OFF'
                                    }
                                }
                            }
                        }).then(res=>{
                            global.swiperDayNightRefresh()
                        })
                    }}/>
                    </View>
                    <View className="setting_cell_group_item">
                        <Text className="setting_cell_title" style={{ flex: 1 }}>Sunset</Text>
                        <Switch className="myswitch" checked={isSunset} color={ColorType.fast} onChange={(e) => {
                        // setIsMulti(e.detail.value)
                        postNotifySettings({
                            notification:{
                                follow_sun:{
                                    sunset:{
                                        in_app:e.detail.value?'ON':'OFF'
                                    }
                                }
                            }
                        }).then(res=>{
                            global.swiperDayNightRefresh()
                        })
                    }}/>
                    </View>
                    <View className="setting_cell_group_item">
                        <Text className="setting_cell_title" style={{ flex: 1 }}>Solar Noon</Text>
                        <Switch className="myswitch" checked={isSolarNoon} color={ColorType.fast} onChange={(e) => {
                        // setIsMulti(e.detail.value)
                        postNotifySettings({
                            notification:{
                                follow_sun:{
                                    solar_noon:{
                                        in_app:e.detail.value?'ON':'OFF'
                                    }
                                }
                            }
                        }).then(res=>{
                            global.swiperDayNightRefresh()
                        })
                    }}/>
                    </View>
                </View>
                <Text className="setting_footer">Note if live in polar region, during time of Polar Day (Midnight Sun) when the Sun is up all day and during time of Polar Night when the Sun is down all day, the only reminder available is for daily Solar Noon.</Text>
            </View>
        </ScrollView>
    }

    return <View className="container" style={{ flex: 1 }}>
        {/* <View className='setting_segment'>
            <Segment titles={[
                `Free`,
                `Pro`,
            ]}
                changed={(e) => {
                    setSegmentIndex(e);
                    // global.segmentIndex = e
                    // console.log('segment item click', e)
                }} />
        </View> */}

        {
            loaded && pro()
        }
        {
            process.env.TARO_ENV == 'rn' && kIsAndroid && <View className="setting_tip" onClick={goSetting}>
                <Text className="setting_tip_text">Jump to App's Notifications settings{'>>'}</Text>
            </View>
        }
    </View>
}