@ledvance/group-ui-biz-bundle 1.0.62 → 1.0.64

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/group-ui-biz-bundle",
   "pid": [],
   "uiid": "",
-  "version": "1.0.62",
+  "version": "1.0.64",
   "scripts": {},
   "dependencies": {
     "@ledvance/base": "^1.x",

package/src/modules/sleepWakeUp/Router.ts

@@ -0,0 +1,25 @@
+import {NavigationRoute} from "tuya-panel-kit";
+import SleepWakeUpPage from "./SleepWakeUpPage";
+import SleepWakeUpDetailPage from "./SleepWakeUpDetailPage";
+import {ui_biz_routerKey} from "../../navigation/Routers";
+
+const SleepWakeUpPageRouters: NavigationRoute[] = [
+  {
+    name: ui_biz_routerKey.group_ui_biz_sleep_wakeUp,
+    component: SleepWakeUpPage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    },
+  },
+  {
+    name: ui_biz_routerKey.group_ui_biz_sleep_wakeUp_detail,
+    component: SleepWakeUpDetailPage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    },
+  },
+]
+
+export default SleepWakeUpPageRouters

package/src/modules/sleepWakeUp/SleepWakeUpActions.ts

@@ -0,0 +1,83 @@
+import {useFeatureHook} from "@ledvance/base/src/models/modules/NativePropsSlice"
+
+export interface SleepWakeUpItem {
+  isSleep: boolean
+  enable: boolean
+  weeks: number[]
+  fade: number
+  time: number
+  hue: number
+  sat: number
+  value: number
+  brightness: number
+  temperature: number
+  duration: number
+  name: string
+  index: number
+  isColorMode: boolean
+  settingTime: number
+}
+
+interface LightConfig {
+  sleepMode: SleepWakeUpItem[]
+  wakeupMode: SleepWakeUpItem[]
+}
+
+export function useSleepPlan() {
+  return useFeatureHook<LightConfig, SleepWakeUpItem[]>('sleepMode', [], (val) => encodeSleepOrWakeUp(val))
+}
+
+export function useWakeUpPlan() {
+  return useFeatureHook<LightConfig, SleepWakeUpItem[]>('wakeupMode', [], (val) => encodeSleepOrWakeUp(val))
+}
+
+export function getStartTime(item: SleepWakeUpItem) {
+  const time = item.time - (item.isSleep ? 0 : item.fade * 5)
+  return time < 0 ? time + 1440 : time
+}
+
+export function getEndTime(item: SleepWakeUpItem) {
+  const time = item.time + (item.isSleep ? item.fade * 5 : item.duration * 5)
+  return time > 1440 ? time - 1440 : time
+}
+
+const encodeSleepOrWakeUp = (items: SleepWakeUpItem[]) => {
+  const bytes: number[] = []
+  bytes.push(numToByte(0))
+  bytes.push(numToByte(items.length))
+  for (const item of items) {
+    bytes.push(numToByte(item.enable ? 1 : 0))
+    bytes.push(weeksToByte(item.weeks))
+    bytes.push(numToByte(item.fade))
+    const hour = Math.trunc(item.time / 60)
+    const minute = item.time % 60
+    bytes.push(numToByte(hour))
+    bytes.push(numToByte(minute))
+    bytes.push(...numToTwoBytes(item.hue))
+    bytes.push(numToByte(item.sat))
+    bytes.push(numToByte(item.value))
+    bytes.push(numToByte(item.brightness))
+    bytes.push(numToByte(item.temperature))
+    if (!item.isSleep) {
+      bytes.push(numToByte(item.duration || 0))
+    }
+  }
+
+  return bytesToHex(bytes)
+}
+
+const numToByte = (num: number) => {
+  return num & 0xFF
+}
+
+const numToTwoBytes = (num: number) => {
+  return [numToByte(num >> 8), numToByte(num)]
+}
+
+const weeksToByte = (weeks: number[]) => {
+  return weeks.reduce((byte, week, index) => byte | (week << index), 0)
+}
+
+const bytesToHex = (bytes: number[]) => {
+  return bytes.map(byte => byte.toString(16).padStart(2, '0')).join('')
+}

package/src/modules/sleepWakeUp/SleepWakeUpDetailPage.tsx

@@ -0,0 +1,662 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import Page from '@ledvance/base/src/components/Page';
+import I18n from '@ledvance/base/src/i18n';
+import res from '@ledvance/base/src/res';
+import { TimerPicker, Utils } from 'tuya-panel-kit';
+import { useReactive, useUpdateEffect } from 'ahooks';
+import TextField from '@ledvance/base/src/components/TextField';
+import LdvPickerView from '@ledvance/base/src/components/ldvPickerView';
+import LdvWeekView from '@ledvance/base/src/components/weekSelect';
+import {
+  convertMinutesTo12HourFormat,
+  loopText,
+  showDialog,
+} from '@ledvance/base/src/utils/common';
+import Spacer from '@ledvance/base/src/components/Spacer';
+import DeleteButton from '@ledvance/base/src/components/DeleteButton';
+import { SleepWakeUpPageRouteParams } from './SleepWakeUpPage';
+import LdvSwitch from '@ledvance/base/src/components/ldvSwitch';
+import {cloneDeep, isEqual, omit} from 'lodash';
+import { useSystemTimeFormate } from '@ledvance/base/src/models/modules/NativePropsSlice';
+import { Result } from '@ledvance/base/src/models/modules/Result';
+import InfoText from '@ledvance/base/src/components/InfoText';
+import LampAdjustView from '@ledvance/base/src/components/LampAdjustView';
+import Card from '@ledvance/base/src/components/Card';
+import { hsv2Hex, mapFloatToRange } from '@ledvance/base/src/utils';
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils';
+import { useParams } from '@ledvance/base/src/hooks/Hooks';
+import ColorTempAdjustView from '@ledvance/base/src/components/ColorTempAdjustView';
+import ColorAdjustView from '@ledvance/base/src/components/ColorAdjustView';
+import {getEndTime, getStartTime, SleepWakeUpItem} from "./SleepWakeUpActions";
+
+const { convertX: cx } = Utils.RatioUtils;
+const { toFixedString } = Utils.NumberUtils;
+const { withTheme } = Utils.ThemeUtils
+
+interface SleepWakeUpDetailPageProps extends SleepWakeUpPageRouteParams {
+  mode: 'add' | 'edit';
+  isSleep: boolean;
+  scheduleItem: any;
+  modDeleteTimeSchedule: (
+    mode: 'add' | 'edit' | 'del',
+    isSleep: boolean,
+    sleepWakeUp: SleepWakeUpItem
+  ) => Promise<Result<any>>;
+}
+
+const SleepWakeUpDetailPage = (props: {theme?: any}) => {
+  const navigation = useNavigation();
+  const params = useParams<SleepWakeUpDetailPageProps>();
+  const is24HourClock = useSystemTimeFormate();
+  const state = useReactive({
+    sleepWakeUp: cloneDeep(params.scheduleItem) as SleepWakeUpItem,
+    loading: false,
+  });
+
+  useEffect(() => {
+    if (params.mode !== 'edit') return;
+    if (state.sleepWakeUp.isColorMode) {
+      state.sleepWakeUp.brightness = 100;
+    } else {
+      state.sleepWakeUp.sat = 100;
+      state.sleepWakeUp.value = 100;
+    }
+  }, []);
+
+  useUpdateEffect(() => {
+    if (state.sleepWakeUp.fade === 0) {
+      state.sleepWakeUp.fade = 1;
+    }
+    if (state.sleepWakeUp.fade > 24) {
+      state.sleepWakeUp.fade = 24;
+    }
+  }, [state.sleepWakeUp.fade]);
+
+  useUpdateEffect(() => {
+    if (state.sleepWakeUp.duration > 24) {
+      state.sleepWakeUp.duration = 24;
+    }
+  }, [state.sleepWakeUp.duration]);
+
+  const getBlockColor = useCallback(() => {
+    if (state.sleepWakeUp.isColorMode) {
+      const sat = Math.round(mapFloatToRange(state.sleepWakeUp.sat / 100, 30, 100));
+      return hsv2Hex(state.sleepWakeUp.hue, sat, 100);
+    }
+    return cctToColor(state.sleepWakeUp.temperature);
+  }, [state.sleepWakeUp]);
+
+  const showBackDialog = () => {
+    const excludeKeys: string[] = []
+    if (state.sleepWakeUp.isColorMode) {
+      excludeKeys.push('brightness', 'temperature')
+    } else {
+      excludeKeys.push('hue', 'sat', 'value')
+    }
+    return !isEqual(omit(params.scheduleItem, excludeKeys), omit(state.sleepWakeUp, excludeKeys))
+  };
+
+  const caSubmit = useMemo(() => {
+    return state.sleepWakeUp.name?.length > 0 && state.sleepWakeUp.name?.length < 33;
+  }, [state.sleepWakeUp.name]);
+
+  const mixLightCard = useMemo(() => {
+    const applyList = params.applyForList.map(item => {
+      if (item.type === 'mainLight' && state.sleepWakeUp.isColorMode) {
+        return {
+          ...item,
+          enable: false,
+        };
+      }
+      if (item.type === 'secondaryLight' && !state.sleepWakeUp.isColorMode) {
+        return {
+          ...item,
+          enable: false,
+        };
+      }
+      return item;
+    });
+    return (
+      <View>
+        {applyList.map(item => (
+          <View key={`${item.dp}-key`}>
+            <Card style={{ marginHorizontal: cx(24) }}>
+              <LdvSwitch
+                title={item.key}
+                color={props.theme.card.background}
+                colorAlpha={1}
+                enable={
+                  item.type === 'mainLight'
+                    ? !state.sleepWakeUp.isColorMode
+                    : state.sleepWakeUp.isColorMode
+                }
+                setEnable={(enable: boolean) => {
+                  state.sleepWakeUp.isColorMode = item.type === 'mainLight' ? !enable : enable;
+                }}
+              />
+              {item.type === 'mainLight' && !state.sleepWakeUp.isColorMode ? (
+                <View>
+                  <ColorTempAdjustView
+                    isSupportBrightness={!!params.isSupportBrightness}
+                    isSupportTemperature={!!params.isSupportTemperature}
+                    colorTemp={state.sleepWakeUp.temperature}
+                    brightness={state.sleepWakeUp.brightness}
+                    onBrightnessChangeComplete={bright => {
+                      state.sleepWakeUp.brightness = bright;
+                    }}
+                    onCCTChangeComplete={cct => {
+                      state.sleepWakeUp.temperature = cct;
+                    }}
+                  />
+                  <Spacer height={cx(16)} />
+                </View>
+              ) : item.type === 'secondaryLight' && state.sleepWakeUp.isColorMode ? (
+                <View>
+                  <ColorAdjustView
+                    h={state.sleepWakeUp.hue}
+                    s={state.sleepWakeUp.sat}
+                    v={state.sleepWakeUp.value}
+                    reserveSV={true}
+                    minSaturation={1}
+                    onHSVChangeComplete={(h, s, v) => {
+                      state.sleepWakeUp.hue = h;
+                      state.sleepWakeUp.sat = s;
+                      state.sleepWakeUp.value = v;
+                    }}
+                  />
+                  <Spacer />
+                </View>
+              ) : null}
+            </Card>
+            <Spacer />
+          </View>
+        ))}
+      </View>
+    );
+  }, [params.applyForList, JSON.stringify(state.sleepWakeUp)]);
+
+
+  const styles = StyleSheet.create({
+    cardContainer: {
+      marginHorizontal: cx(24),
+    },
+    textField: {
+      marginHorizontal: cx(24),
+    },
+    picker: {
+      marginHorizontal: cx(24),
+      marginVertical: cx(15),
+      color: props.theme.global.backgournd,
+    },
+    week: {},
+    itemTitle: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontWeight: 'bold',
+      fontFamily: 'helvetica_neue_lt_std_bd',
+      marginBottom: cx(10),
+    },
+    skillListItem: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      height: cx(30),
+      alignItems: 'center',
+      marginVertical: cx(5),
+    },
+    summaryContainer: {
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      marginBottom: cx(10),
+      marginHorizontal: cx(24),
+    },
+    summaryImg: {
+      height: cx(12),
+      width: cx(12),
+      tintColor: props.theme.global.fontColor,
+    },
+    summaryLeft: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      minWidth: cx(90),
+    },
+    leftTitle: {
+      fontSize: cx(14),
+      color: props.theme.global.fontColor,
+    },
+    summaryRight: {
+      flexDirection: 'column',
+      marginLeft: cx(21),
+      borderRadius: cx(16),
+      backgroundColor: '#cbcbcb',
+    },
+    rightItem: {
+      paddingHorizontal: cx(12),
+      color: props.theme.global.fontColor,
+    },
+    rightTitle: {
+      paddingLeft: cx(12),
+      paddingRight: cx(12),
+      fontSize: cx(10),
+      textAlign: 'center',
+      alignSelf: 'flex-start',
+    },
+    filletCorner: {
+      flexDirection: 'row',
+      backgroundColor: '#cbcbcb',
+      borderRadius: cx(16),
+      alignSelf: 'flex-start',
+    },
+  })
+
+  return (
+    <Page
+      backText={I18n.getLang('add_sleepschedule_one_source_system_back_text')}
+      showBackDialog={showBackDialog() && caSubmit}
+      loading={state.loading}
+      backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
+      backDialogContent={I18n.getLang(
+        params.isSleep
+          ? 'cancel_dialog_leave_unsaved_sleepschedule_note'
+          : 'cancel_dialog_leave_unsaved_wakeupschedule_note'
+      )}
+      rightButtonIcon={showBackDialog() && caSubmit ? res.ic_check : res.ic_uncheck}
+      rightButtonIconClick={async () => {
+        if (!showBackDialog() || !caSubmit || state.loading) return;
+        state.loading = true;
+        if (state.sleepWakeUp.isColorMode) {
+          state.sleepWakeUp.brightness = 0;
+          state.sleepWakeUp.temperature = 0;
+        } else {
+          state.sleepWakeUp.hue = 0;
+          state.sleepWakeUp.sat = 0;
+          state.sleepWakeUp.value = 0;
+        }
+        state.sleepWakeUp.enable = true
+        const res = await params.modDeleteTimeSchedule(
+          params.mode,
+          state.sleepWakeUp.isSleep,
+          {...state.sleepWakeUp, settingTime: new Date().getTime()}
+        );
+        state.loading = false;
+        if (res.success) {
+          navigation.goBack();
+        }
+      }}
+      headlineText={I18n.getLang(
+        params.isSleep
+          ? params.mode === 'add'
+            ? 'add_sleepschedule_one_source_headline_text'
+            : 'edit_sleepschedule_headline_text'
+          : params.mode === 'add'
+            ? 'add_wakeupschedule_one_source_headline_text'
+            : 'edit_wakeupschedule_headline_text'
+      )}
+    >
+      <ScrollView
+        nestedScrollEnabled={true}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+      >
+        <TextField
+          style={styles.cardContainer}
+          value={state.sleepWakeUp.name}
+          showError={state.sleepWakeUp.name.length > 32}
+          maxLength={33}
+          errorText={I18n.getLang('add_new_dynamic_mood_alert_text')}
+          placeholder={I18n.getLang('add_new_trigger_time_inputfield_value_text')}
+          onChangeText={(t: string) => {
+            state.sleepWakeUp.name = t;
+          }}
+        />
+        {/* pick */}
+        <TimerPicker
+          itemTextColor={props.theme.global.fontColor}
+          style={{ paddingVertical: cx(0), marginVertical: cx(0), backgroundColor: props.theme.global.background }}
+          is12Hours={!is24HourClock}
+          singlePicker={true}
+          amText={I18n.getLang('manage_user_calendar_label_am')}
+          pmText={I18n.getLang('manage_user_calendar_label_pm')}
+          startTime={state.sleepWakeUp.time}
+          symbol={''}
+          onTimerChange={time => {
+            state.sleepWakeUp.time = time
+          }}
+        />
+
+        {/* week */}
+        <View style={styles.week}>
+          <LdvWeekView
+            value={state.sleepWakeUp.weeks}
+            onSelect={(weekIdx: number) => {
+              state.sleepWakeUp.weeks = state.sleepWakeUp.weeks.map((week, idx) => {
+                if (idx === weekIdx - 1) {
+                  return week === 1 ? 0 : 1;
+                }
+                return week;
+              });
+            }}
+          />
+          <Spacer />
+          <Text style={{ marginHorizontal: cx(24), color: props.theme.global.fontColor }}>{loopText(state.sleepWakeUp.weeks)}</Text>
+          <Spacer />
+        </View>
+
+        {/* Apply for */}
+        <View style={styles.cardContainer}>
+          <Text style={styles.itemTitle}>
+            {I18n.getLang('timeschedule_add_schedule_subheadline_text')}
+          </Text>
+          <View
+            style={{
+              backgroundColor: props.theme.card.board,
+              borderRadius: 4,
+              minHeight: cx(50),
+              flex: 1,
+              justifyContent: 'center',
+            }}
+          >
+            <View
+              style={{
+                marginHorizontal: cx(8),
+                marginTop: cx(8),
+                borderRadius: 4,
+              }}
+            >
+              {params.applyForList.map(apply => (
+                <View
+                  key={`${apply.dp}-key`}
+                  style={{
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    backgroundColor: props.theme.global.background,
+                    marginBottom: cx(8),
+                  }}
+                >
+                  <Text
+                    style={{
+                      color: props.theme.global.fontColor,
+                      fontSize: cx(14),
+                      marginHorizontal: cx(6),
+                      marginVertical: cx(9),
+                    }}
+                  >
+                    {apply.key}
+                  </Text>
+                </View>
+              ))}
+            </View>
+          </View>
+          <Spacer />
+        </View>
+
+        {/* Device state */}
+        <View>
+          <Text style={[styles.itemTitle, styles.cardContainer]}>
+            {I18n.getLang('timeschedule_add_schedule_subheadline2_text')}
+          </Text>
+          {params.isMixLight ? (
+            mixLightCard
+          ) : (
+            <Card style={styles.cardContainer}>
+              <LdvSwitch
+                title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
+                color={getBlockColor()}
+                colorAlpha={1}
+                enable={false}
+                showSwitch={false}
+                setEnable={() => {}}
+              />
+              <LampAdjustView
+                isSupportColor={!!params.isSupportColor}
+                isSupportTemperature={!!params.isSupportTemperature}
+                isSupportBrightness={!!params.isSupportBrightness}
+                isColorMode={state.sleepWakeUp.isColorMode}
+                reserveSV={true}
+                setIsColorMode={() => {
+                  state.sleepWakeUp.isColorMode = !state.sleepWakeUp.isColorMode;
+                }}
+                h={state.sleepWakeUp.hue}
+                s={state.sleepWakeUp.sat}
+                v={state.sleepWakeUp.value}
+                onHSVChange={(h, s, v) => {
+                  state.sleepWakeUp.hue = h;
+                  state.sleepWakeUp.sat = s;
+                  state.sleepWakeUp.value = v;
+                }}
+                onHSVChangeComplete={(h, s, v) => {
+                  state.sleepWakeUp.hue = h;
+                  state.sleepWakeUp.sat = s;
+                  state.sleepWakeUp.value = v;
+                }}
+                colorTemp={state.sleepWakeUp.temperature}
+                brightness={state.sleepWakeUp.brightness}
+                onCCTChange={cct => {
+                  state.sleepWakeUp.temperature = cct;
+                }}
+                onCCTChangeComplete={cct => {
+                  state.sleepWakeUp.temperature = cct;
+                }}
+                onBrightnessChange={brightness => {
+                  state.sleepWakeUp.brightness = brightness;
+                }}
+                onBrightnessChangeComplete={brightness => {
+                  state.sleepWakeUp.brightness = brightness;
+                }}
+              />
+            </Card>
+          )}
+        </View>
+        <Spacer />
+        {/* Settings */}
+        <View style={styles.cardContainer}>
+          <Text style={styles.itemTitle}>
+            {I18n.getLang('timeschedule_add_schedule_subheadline4_text')}
+          </Text>
+          <Spacer />
+          <Text style={{color: props.theme.global.secondFontColor}}>
+            {I18n.getLang(
+              params.isSleep
+                ? 'add_sleepschedule_one_source_settings_text'
+                : 'add_wakeupschedule_settings_text'
+            )}
+          </Text>
+          <LdvPickerView
+            style={styles.picker}
+            hour={toFixedString(Math.trunc((state.sleepWakeUp.fade * 5) / 60), 2)}
+            minute={toFixedString((state.sleepWakeUp.fade * 5) % 60, 2)}
+            minutesStep={5}
+            setHour={v => {
+              const m = (state.sleepWakeUp.fade * 5) % 60;
+              state.sleepWakeUp.fade = (Number(v) * 60 + m) / 5;
+            }}
+            setMinute={v => {
+              const h = Math.trunc((state.sleepWakeUp.fade * 5) / 60);
+              state.sleepWakeUp.fade = (h * 60 + Number(v)) / 5;
+            }}
+            unit={['h', 'min']}
+            maxHour={3}
+          />
+          <Text style={{color: props.theme.global.secondFontColor}}>
+            {I18n.formatValue(
+              params.isSleep
+                ? 'add_sleepschedule_one_source_settings_text2'
+                : 'add_wakeupschedule_settings_text2',
+              `${convertMinutesTo12HourFormat(params.isSleep ? getEndTime(state.sleepWakeUp) : getStartTime(state.sleepWakeUp), is24HourClock)}`
+            )}
+          </Text>
+          <Spacer />
+          {!params.isSleep && (
+            <View style={{ marginHorizontal: -cx(16), marginTop: -cx(20) }}>
+              <LdvSwitch
+                title={I18n.getLang('add_wakeupschedule_settings_text3')}
+                enable={state.sleepWakeUp.duration > 0}
+                color={props.theme.global.background}
+                colorAlpha={1}
+                setEnable={v => {
+                  state.sleepWakeUp.duration = v ? 1 : 0;
+                }}
+              />
+            </View>
+          )}
+          {state.sleepWakeUp.duration > 0 && (
+            <>
+              <Text style={{ fontSize: cx(14), color: props.theme.global.secondFontColor }}>
+                {I18n.getLang('add_wakeupschedule_settings_text4')}
+              </Text>
+              <LdvPickerView
+                style={styles.picker}
+                hour={toFixedString(Math.trunc((state.sleepWakeUp.duration * 5) / 60), 2)}
+                minute={toFixedString((state.sleepWakeUp.duration * 5) % 60, 2)}
+                minutesStep={5}
+                setHour={v => {
+                  const m = (state.sleepWakeUp.duration * 5) % 60;
+                  if (Number(v) === 0 && m === 0) {
+                    state.sleepWakeUp.duration = 1;
+                  } else {
+                    state.sleepWakeUp.duration = (Number(v) * 60 + m) / 5;
+                  }
+                }}
+                setMinute={v => {
+                  const h = Math.trunc((state.sleepWakeUp.duration * 5) / 60);
+                  if (Number(v) === 0 && h === 0) {
+                    state.sleepWakeUp.duration = 1;
+                  } else {
+                    state.sleepWakeUp.duration = (h * 60 + Number(v)) / 5;
+                  }
+                }}
+                unit={['h', 'min']}
+                maxHour={3}
+              />
+              <Text style={{color: props.theme.global.secondFontColor}}>
+                {I18n.formatValue(
+                  'add_wakeupschedule_settings_text5',
+                  `${convertMinutesTo12HourFormat(
+                    getEndTime(state.sleepWakeUp),
+                    is24HourClock
+                  )}`
+                )}
+              </Text>
+              <Spacer />
+            </>
+          )}
+        </View>
+        {/* Summary */}
+        <Text style={[styles.itemTitle, styles.cardContainer]}>
+          {I18n.getLang('add_sleepschedule_one_source_subheadline4_text')}
+        </Text>
+        <View style={styles.summaryContainer}>
+          <InfoText
+            icon={res.summary_icon1}
+            text={I18n.getLang('feature_summary_frequency_headline')}
+            iconStyle={styles.summaryImg}
+            textStyle={styles.leftTitle}
+            style={styles.summaryLeft}
+          />
+          <View style={styles.summaryRight}>
+            <Text style={styles.rightItem}>{loopText(state.sleepWakeUp.weeks)}</Text>
+          </View>
+        </View>
+        <View style={styles.summaryContainer}>
+          <InfoText
+            icon={res.summary_icon2}
+            text={I18n.getLang('feature_summary_time_headline')}
+            iconStyle={styles.summaryImg}
+            textStyle={styles.leftTitle}
+            style={styles.summaryLeft}
+          />
+          <View style={styles.summaryRight}>
+            <Text style={styles.rightItem}>
+              {`${convertMinutesTo12HourFormat(getStartTime(state.sleepWakeUp), is24HourClock)} - ${convertMinutesTo12HourFormat(getEndTime(state.sleepWakeUp), is24HourClock)}`}
+            </Text>
+          </View>
+        </View>
+        <View style={[styles.summaryContainer, { alignItems: 'flex-start' }]}>
+          <InfoText
+            icon={res.summary_icon3}
+            text={I18n.getLang('motion_detection_add_time_schedule_actions_text1')}
+            iconStyle={styles.summaryImg}
+            textStyle={styles.leftTitle}
+            style={styles.summaryLeft}
+          />
+          <View style={{ marginLeft: cx(24), flex: 1 }}>
+            <Text style={{ fontSize: cx(12), color: props.theme.global.fontColor }}>
+              {I18n.getLang(
+                !params.isSleep ? 'feature_summary_action_txt_11' : 'feature_summary_action_txt_10'
+              )}
+            </Text>
+            <View style={styles.filletCorner}>
+              <Text style={styles.rightTitle}>
+                {params.isMixLight ? (state.sleepWakeUp.isColorMode ? params.applyForList[1].key : params.applyForList[0].key) : params.applyForList[0].key}
+              </Text>
+            </View>
+            <Spacer height={cx(10)}/>
+            <Text style={{ fontSize: cx(12), color: props.theme.global.fontColor }}>
+              {I18n.getLang(
+                params.isSleep
+                  ? 'feature_summary_action_txt_2'
+                  : state.sleepWakeUp.duration
+                    ? 'feature_summary_action_txt_12'
+                    : 'feature_summary_action_txt_1'
+              )}
+            </Text>
+            <View style={styles.filletCorner}>
+              <Text style={styles.rightTitle}>
+                {convertMinutesTo12HourFormat(
+                  params.isSleep
+                    ? getEndTime(state.sleepWakeUp)
+                    : getEndTime(state.sleepWakeUp),
+                  is24HourClock
+                )}
+              </Text>
+            </View>
+          </View>
+        </View>
+        <Spacer />
+        {/* Delete btn */}
+        {params.mode === 'edit' && (
+          <View style={styles.cardContainer}>
+            <DeleteButton
+              text={I18n.getLang('edit_timeschedule_bttn_text')}
+              onPress={async () => {
+                showDialog({
+                  method: 'confirm',
+                  title: I18n.getLang(
+                    params.isSleep
+                      ? 'cancel_dialog_delete_item_sleepschedule_titel'
+                      : 'cancel_dialog_delete_item_wakeupschedule_titel'
+                  ),
+                  subTitle: I18n.getLang(
+                    params.isSleep
+                      ? 'cancel_dialog_delete_item_sleepschedule_description'
+                      : 'cancel_dialog_delete_item_wakeupschedule_description'
+                  ),
+                  onConfirm: async (_, { close }) => {
+                    close();
+                    if (state.loading) return;
+                    state.loading = true;
+                    const res = await params.modDeleteTimeSchedule(
+                      'del',
+                      state.sleepWakeUp.isSleep,
+                      state.sleepWakeUp
+                    );
+                    state.loading = false;
+                    if (res.success) {
+                      navigation.goBack();
+                    }
+                  },
+                });
+              }}
+            />
+          </View>
+        )}
+        <Spacer />
+      </ScrollView>
+    </Page>
+  );
+};
+
+
+export default withTheme(SleepWakeUpDetailPage)

package/src/modules/sleepWakeUp/SleepWakeUpPage.tsx

@@ -0,0 +1,430 @@
+import React, {useCallback, useEffect, useMemo} from "react";
+import {FlatList, Image, StyleSheet, Text, View} from 'react-native'
+import Page from '@ledvance/base/src/components/Page'
+import Tag from '@ledvance/base/src/components/Tag'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import {useNavigation} from '@react-navigation/native'
+import I18n from '@ledvance/base/src/i18n'
+import res from '@ledvance/base/src/res'
+import {useDeviceInfo, useSystemTimeFormate} from "@ledvance/base/src/models/modules/NativePropsSlice";
+import {useReactive, useUpdateEffect} from "ahooks";
+import CustomListDialog from "@ledvance/base/src/components/CustomListDialog";
+import {SwitchButton, Utils} from "tuya-panel-kit";
+import {convertMinutesTo12HourFormat, getIsClosed, loopText} from "@ledvance/base/src/utils/common";
+import TextButton from "@ledvance/base/src/components/TextButton";
+import {ui_biz_routerKey} from "../../navigation/Routers";
+import {cloneDeep} from "lodash";
+import Card from "@ledvance/base/src/components/Card";
+import {useParams} from "@ledvance/base/src/hooks/Hooks";
+import {ApplyForItem} from "@ledvance/base/src/utils/interface";
+import {getEndTime, getStartTime, SleepWakeUpItem, useSleepPlan, useWakeUpPlan} from "./SleepWakeUpActions";
+
+const cx = Utils.RatioUtils.convertX
+const {parseTimer} = Utils.TimeUtils
+const { withTheme } = Utils.ThemeUtils
+
+export interface SleepWakeUpPageRouteParams {
+  isSupportColor?: boolean
+  isSupportTemperature?: boolean
+  isSupportBrightness?: boolean
+  isMixLight?: boolean
+  sleepModeDpCode: string
+  wakeUpDpCode: string
+  applyForList: ApplyForItem[];
+}
+
+const MAX_SCHEDULE = 4
+const SleepWakeUpPage = (props: {theme?: any}) => {
+  const deviceInfo = useDeviceInfo()
+  const navigation = useNavigation()
+  const is24HourClock = useSystemTimeFormate()
+  const params = useParams<SleepWakeUpPageRouteParams>()
+  const [wakeUpList, setWakeUpList] = useWakeUpPlan()
+  const [sleepList, setSleepList] = useSleepPlan()
+  const state = useReactive({
+    showAddSchedulePopover: false,
+    sleepTagChecked: false,
+    wakeUpTagChecked: false,
+    sleepScheduleList: cloneDeep(sleepList),
+    wakeUpScheduleList: cloneDeep(wakeUpList),
+    filteredScheduleList: [] as any[],
+  })
+
+  const isMaxNum = useMemo(() => {
+    return state.sleepScheduleList.length >= MAX_SCHEDULE && state.wakeUpScheduleList.length >= MAX_SCHEDULE
+  }, [state.sleepScheduleList, state.wakeUpScheduleList])
+
+  useUpdateEffect(() =>{
+    state.sleepScheduleList = cloneDeep(sleepList)
+  }, [sleepList])
+
+  useUpdateEffect(() =>{
+    state.wakeUpScheduleList = cloneDeep(wakeUpList)
+  }, [wakeUpList])
+
+
+  const onAddScheduleDialogItemClick = useCallback((isSleep: boolean, mode: 'add' | 'edit', scheduleItem: SleepWakeUpItem) => {
+    if (mode === 'add' && isSleep && state.sleepScheduleList.length === MAX_SCHEDULE) return
+    if (mode === 'add' && !isSleep && state.wakeUpScheduleList.length === MAX_SCHEDULE) return
+    navigateToEdit({
+      ...params,
+      mode,
+      isSleep,
+      scheduleItem: cloneDeep(scheduleItem),
+      modDeleteTimeSchedule
+    })
+    state.showAddSchedulePopover = false
+  }, [state.filteredScheduleList])
+
+  const modDeleteTimeSchedule = async (mode: 'add' | 'edit' | 'del', isSleep: boolean, sleepWakeUp: SleepWakeUpItem) => {
+    let cloneSleepWakeUp: SleepWakeUpItem[] = isSleep ? cloneDeep(state.sleepScheduleList) : cloneDeep(state.wakeUpScheduleList)
+    if (mode === 'add') {
+      cloneSleepWakeUp = [
+        ...cloneSleepWakeUp,
+        {
+          ...sleepWakeUp,
+          index: cloneSleepWakeUp.length,
+        }
+      ]
+    }
+    if (mode === 'del') {
+      cloneSleepWakeUp = cloneSleepWakeUp.filter(item => sleepWakeUp.index !== item.index)
+    }
+    if (mode === 'edit') {
+      cloneSleepWakeUp = cloneSleepWakeUp.map(item => {
+        if (item.index === sleepWakeUp.index) {
+          return sleepWakeUp
+        }
+        return item
+      })
+    }
+
+    const res = isSleep ? await setSleepList(cloneSleepWakeUp) : await setWakeUpList(cloneSleepWakeUp)
+    if(res.success){
+      if(isSleep){
+        state.sleepScheduleList = cloneDeep(cloneSleepWakeUp)
+      }else{
+        state.wakeUpScheduleList = cloneDeep(cloneSleepWakeUp)
+      }
+      return {
+        success: true
+      }
+    }else{
+      return {
+        success: false
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (state.sleepTagChecked === state.wakeUpTagChecked) {
+      state.filteredScheduleList = [...state.sleepScheduleList, ...state.wakeUpScheduleList]
+    } else if (state.sleepTagChecked) {
+      state.filteredScheduleList = state.sleepScheduleList
+    } else {
+      state.filteredScheduleList = state.wakeUpScheduleList
+    }
+  }, [state.sleepTagChecked, state.wakeUpTagChecked, state.sleepScheduleList, state.wakeUpScheduleList])
+
+  const getTipText = useCallback(() => {
+    if (state.sleepScheduleList.length >= MAX_SCHEDULE && state.wakeUpScheduleList.length >= MAX_SCHEDULE) return "both"
+    if (state.sleepScheduleList.length >= MAX_SCHEDULE) return "sleep"
+    if (state.wakeUpScheduleList.length >= MAX_SCHEDULE) return "wakeup"
+  }, [state.sleepScheduleList, state.wakeUpScheduleList])
+
+  const hasScheduleList = useCallback(() => {
+    return !!(state.sleepScheduleList.length && state.wakeUpScheduleList.length)
+  }, [state.sleepScheduleList, state.wakeUpScheduleList])
+
+  const navigateToEdit = (params) => {
+    navigation.navigate(ui_biz_routerKey.group_ui_biz_sleep_wakeUp_detail, params)
+  }
+
+  const isSleepMax = useMemo(() => {
+    return state.sleepScheduleList.length >= MAX_SCHEDULE
+  }, [state.sleepScheduleList])
+
+  const isWakeUpMax = useMemo(() => {
+    return state.wakeUpScheduleList.length >= MAX_SCHEDULE
+  }, [state.wakeUpScheduleList])
+
+  const styles = StyleSheet.create({
+    tagLine: {
+      flexDirection: 'row',
+      marginHorizontal: cx(24),
+    },
+    infoLine: {
+      marginHorizontal: cx(24),
+    },
+    addMoodPopover: {
+      width: cx(210),
+      height: cx(90.5),
+      marginStart: cx(115),
+      marginTop: cx(100),
+      backgroundColor: props.theme.card.background,
+    },
+    popoverItem: {
+      width: cx(210),
+      height: cx(45),
+      alignItems: 'flex-start',
+    },
+    emptyListCon: {
+      flex: 1,
+      alignItems: 'center',
+    },
+    emptyImage: {
+      width: cx(225),
+      height: cx(198),
+    },
+    emptyText: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    emptyNoTime: {
+      fontSize: cx(14),
+      lineHeight: cx(20),
+      textAlign: 'center',
+      fontFamily: 'helvetica_neue_lt_std_roman',
+      color: props.theme.global.fontColor
+    },
+    emptyBtnView: {
+      alignItems: 'center'
+    },
+    emptyBtn: {
+      backgroundColor: props.theme.button.active,
+      borderRadius: cx(5),
+      paddingHorizontal: cx(15),
+      paddingVertical: cx(10)
+    },
+    addTimer: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      // width,
+      marginVertical: cx(20),
+    },
+    disableItemText: {
+      color: '#CBCBCB',
+      fontSize: cx(16),
+    },
+    randomTimingCard: {
+      marginHorizontal: cx(24),
+      paddingHorizontal: cx(16),
+    },
+    switchLine: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    time: {
+      flex: 1,
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontWeight: 'bold',
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    switchBtn: {},
+    loopText: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+      height: cx(20)
+    },
+    tag: {
+      alignSelf: 'flex-start',
+      borderRadius: cx(16),
+      height: cx(16),
+      backgroundColor: props.theme.tag.background,
+      paddingHorizontal: cx(10),
+    },
+    tagTitle: {
+      fontSize: cx(10),
+      textAlign: 'center',
+      fontFamily: 'PingFangSC-Medium',
+      color: props.theme.tag.fontColor
+    },
+  })
+
+
+  return (
+    <>
+      <Page
+        backText={deviceInfo.name}
+        onBackClick={navigation.goBack}
+        headlineText={I18n.getLang('add_sleepschedule_one_source_system_back_text')}
+        headlineIcon={isMaxNum ? undefined : res.device_panel_schedule_add}
+        onHeadlineIconClick={() => {
+          state.showAddSchedulePopover = !state.showAddSchedulePopover
+        }}
+      >
+        <View style={{ marginHorizontal: cx(24) }}>
+          <Text style={{ color: props.theme.global.fontColor, fontSize: cx(12) }}>
+            {I18n.getLang('timeschedule_overview_description_text')}
+          </Text>
+        </View>
+        <Spacer />
+        {!!getTipText() && <View style={{ marginHorizontal: cx(24), marginVertical: cx(10), flexDirection: 'row', alignItems: 'center' }}>
+          <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.warning }} source={res.ic_warning_amber} />
+          {getTipText() === "sleep" && <Text style={{fontSize: cx(12), color: props.theme.global.secondFontColor}}>{I18n.getLang('sleepwakeschedule_warning_max_number_sleep_text')}</Text>}
+          {getTipText() === "wakeup" && <Text style={{fontSize: cx(12), color: props.theme.global.secondFontColor}}>{I18n.getLang('sleepwakeschedule_warning_max_number_wakeup_text')}</Text>}
+          {getTipText() === "both" && <Text style={{fontSize: cx(12), color: props.theme.global.secondFontColor}}>{I18n.getLang('sleepwakeschedule_warning_max_number_both_text')}</Text>}
+          <Spacer />
+        </View>}
+        {hasScheduleList() && <View style={styles.tagLine}>
+          <Tag
+            checked={state.sleepTagChecked}
+            text={I18n.getLang('sleepwakeschedule_field_3_Times_chips2_text')}
+            onCheckedChange={checked => {
+              state.sleepTagChecked = checked
+            }} />
+          <Spacer width={cx(8)} height={0} />
+          <Tag
+            checked={state.wakeUpTagChecked}
+            text={I18n.getLang('sleepwakeschedule_field_3_Times_chips_text')}
+            onCheckedChange={checked => {
+              state.wakeUpTagChecked = checked
+            }} />
+        </View>}
+        {state.filteredScheduleList.length ?
+          <FlatList
+            data={state.filteredScheduleList}
+            renderItem={({ item }) => (
+              <SleepWakeUpCard
+                is24HourClock={is24HourClock}
+                styles={styles}
+                sleepWakeUp={item}
+                onPress={() => {
+                  onAddScheduleDialogItemClick(item.isSleep, 'edit', item)
+                }}
+                onSwitch={async (v) => {
+                  await modDeleteTimeSchedule('edit', item.isSleep, {
+                    ...item,
+                    enable: v,
+                    settingTime: new Date().getTime()
+                  })
+                }}
+              />
+            )}
+            ListHeaderComponent={() => (<Spacer height={cx(10)} />)}
+            ItemSeparatorComponent={() => (<Spacer />)}
+            ListFooterComponent={() => (<Spacer />)}
+            keyExtractor={(item, idx) => `${item.isSleep ? 'sleep' : 'wakeUp'}_${idx}`}
+          /> :
+          <View style={styles.emptyListCon}>
+            <Spacer height={cx(70)} />
+            <Image
+              style={styles.emptyImage}
+              source={res.scheduleEmpty}
+              resizeMode="contain" />
+            <Spacer height={cx(20)} />
+            <View style={styles.emptyText}>
+              <Image
+                source={{ uri: res.device_panel_schedule_alert }}
+                style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor }}
+              />
+              <Text style={styles.emptyNoTime}>
+                {
+                  !hasScheduleList() ?
+                    I18n.getLang('sleepwakeschedule_empty_information_text') :
+                    I18n.getLang('sleepwakeschedule_empty_filtering_information_text')
+                }
+              </Text>
+            </View>
+            {!hasScheduleList() &&
+              <View style={styles.emptyBtnView}>
+                <Spacer />
+                <TextButton
+                  style={styles.emptyBtn}
+                  textStyle={isSleepMax ? styles.disableItemText : { color: props.theme.button.fontColor }}
+                  text={I18n.getLang('sleepwakeschedule_add_button_text1')}
+                  onPress={() => onAddScheduleDialogItemClick(true, 'add', getNewSleepWakeUp(true, params))}
+                />
+                <Spacer />
+                <TextButton
+                  style={styles.emptyBtn}
+                  textStyle={isWakeUpMax ? styles.disableItemText : { color: props.theme.button.fontColor }}
+                  text={I18n.getLang('sleepwakeschedule_add_button_text2')}
+                  onPress={() => onAddScheduleDialogItemClick(false, 'add', getNewSleepWakeUp(false, params))}
+                />
+              </View>}
+          </View>
+        }
+      </Page>
+      <CustomListDialog
+        show={state.showAddSchedulePopover}
+        style={styles.addMoodPopover}
+        itemStyle={styles.popoverItem}
+        onDismiss={() => {
+          state.showAddSchedulePopover = false
+        }}
+        data={[
+          {
+            text: I18n.getLang('sleepwakeschedule_add_button_text1'),
+            value: true,
+            isMax: isSleepMax
+          },
+          {
+            text: I18n.getLang('sleepwakeschedule_add_button_text2'),
+            value: false,
+            isMax: isWakeUpMax
+          },
+        ]}
+        onItemPress={(isSleep) => onAddScheduleDialogItemClick(isSleep, 'add', getNewSleepWakeUp(isSleep, params))}
+      />
+    </>
+  )
+}
+
+const SleepWakeUpCard = ({ sleepWakeUp, is24HourClock, onSwitch, onPress, styles }: {
+  sleepWakeUp: SleepWakeUpItem,
+  onSwitch: (enable: boolean) => void,
+  onPress: () => void
+  is24HourClock: boolean
+  styles: StyleSheet.NamedStyles<any>
+}) => {
+  const closed = getIsClosed({weeks: sleepWakeUp.weeks, settingTime: sleepWakeUp.settingTime, endTime: getEndTime(sleepWakeUp)})
+  return (
+    <Card style={styles.randomTimingCard} onPress={onPress}>
+      <Spacer height={cx(16)} />
+      <View style={styles.switchLine}>
+        <Text style={styles.time}>
+          {`${convertMinutesTo12HourFormat(getStartTime(sleepWakeUp), is24HourClock)} - ${convertMinutesTo12HourFormat(getEndTime(sleepWakeUp), is24HourClock)}`}</Text>
+        <SwitchButton
+          value={sleepWakeUp.enable && closed}
+          thumbStyle={{ elevation: 0 }}
+          onValueChange={onSwitch} />
+      </View>
+      <Text style={styles.loopText}>{loopText(sleepWakeUp.weeks, parseTimer(getStartTime(sleepWakeUp) * 60))}</Text>
+      <Spacer height={cx(5)} />
+      <Text style={styles.loopText}>{sleepWakeUp.name}</Text>
+      <Spacer height={cx(10)} />
+      <View style={styles.tag}>
+        <Text style={styles.tagTitle}>
+          {I18n.getLang(sleepWakeUp.isSleep ? 'sleepwakeschedule_field_3_Times_chips2_text' : 'sleepwakeschedule_field_3_Times_chips_text')}
+        </Text>
+      </View>
+      <Spacer />
+    </Card>
+  )
+}
+
+
+const getNewSleepWakeUp = (isSleep: boolean, params: SleepWakeUpPageRouteParams) => {
+  const hour = isSleep ? 23 : 7
+  return {
+    enable: true,
+    name: '',
+    weeks: [0, 0, 0, 0, 0, 0, 0],
+    fade: 6,
+    time: hour * 60,
+    hue: 0,
+    sat: 100,
+    value: 100,
+    brightness: 100,
+    temperature: 0,
+    duration: 0,
+    isColorMode: !!params.isSupportColor,
+    isSleep,
+    settingTime: new Date().getTime()
+  } as SleepWakeUpItem
+}
+
+export default withTheme(SleepWakeUpPage)

package/src/navigation/Routers.ts

@@ -24,4 +24,6 @@ export const ui_biz_routerKey = {
   'group_ui_biz_fixed_time_plug_detail': 'group_ui_biz_fixed_time_plug_detail',
   'group_ui_biz_fixed_timing_light': 'group_ui_biz_fixed_timing_light',
   'group_ui_biz_fixed_timing_light_detail': 'group_ui_biz_fixed_timing_light_detail',
+  'group_ui_biz_sleep_wakeUp': 'group_ui_biz_sleep_wakeUp',
+  'group_ui_biz_sleep_wakeUp_detail': 'group_ui_biz_sleep_wakeUp_detail',
 }