알람

src/pages/setting/setting-page.tsx

@@ -1,18 +1,92 @@
+import { useAppAlarmConsentMutation } from '@/entities/alarm/api/use-app-alarm-consent-mutation';
+import { useAppAlarmFindMutation } from '@/entities/alarm/api/use-app-alarm-find-mutation';
+import { AppAlarmConsentParams, AppAlarmConsentResponse, AppAlarmFindParams, AppAlarmFindResponse, MERCHANT_ADMIN_APP } from '@/entities/alarm/model/types';
 import { HeaderType } from '@/entities/common/model/types';
+import { useStore } from '@/shared/model/store';
 import { 
 	useSetHeaderTitle,
 	useSetHeaderType,
 	useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
+import { ChangeEvent, useEffect, useState } from 'react';
 
 export const SettingPage = () => {
+  let userInfo = useStore.getState().UserStore.userInfo;
   useSetHeaderTitle('설정');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
 
+  const {mutateAsync: appAlarmFind} = useAppAlarmFindMutation();
+  const {mutateAsync: appAlarmConsent} = useAppAlarmConsentMutation();
+
+  const [alarmSetting, setAlarmSetting] = useState<Record<string, boolean>>({
+    '21': false,
+    '11': false,
+    '31': false,
+    '41': false,
+    '61': false,
+    '62': false,
+    '15': false
+  });
+
+
   const onClickPrivacyPolicy = () => {
     window.open('https://www.nicevan.co.kr/privacy-policy', '_blank');
   };
+  
+  const callAppAlarmFind = () => {
+    if(userInfo.usrid){
+      let params: AppAlarmFindParams = {
+        usrid: userInfo.usrid,
+        appCl: MERCHANT_ADMIN_APP.MERCHANT_ADMIN_APP
+      };
+      appAlarmFind(params).then((rs: AppAlarmFindResponse) => {
+        responseAlarmSetting(rs);
+      });
+    }
+  };
+
+  const responseAlarmSetting = (data: AppAlarmFindResponse) => {
+    let responseAlarms: Record<string, boolean> = {};
+    for(let i=0;i<data.alarmAgree.length;i++){
+      let item = data.alarmAgree[i];
+      if(item){
+        let appNotificationSubCategory = item.appNotificationSubCategory;
+        let appNotificationAllowed = item.appNotificationAllowed;
+        responseAlarms['' + appNotificationSubCategory] = appNotificationAllowed;
+      }
+    }
+    setAlarmSetting({
+      ...alarmSetting,
+      ...responseAlarms
+    });
+  };
+
+  const callAppAlarmConsent = (value: boolean, alarmCode: string) => {
+    if(userInfo.usrid){
+      let params: AppAlarmConsentParams = {
+        usrid: userInfo.usrid,
+        appCl: MERCHANT_ADMIN_APP.MERCHANT_ADMIN_APP,
+        appNotificationSubCategory: alarmCode,
+        appNotificationAllowed: value
+      };
+      appAlarmConsent(params).then((rs: AppAlarmConsentResponse) => {
+        setAlarmSetting({
+          ...alarmSetting,
+          ...{ ['' + alarmCode]: value }
+        });
+      }).catch((e: any) => {
+        setAlarmSetting({
+          ...alarmSetting,
+          ...{ ['' + alarmCode]: !value }
+        });
+      });
+    }
+  };
+  
+  useEffect(() => {
+    callAppAlarmFind();
+  }, []);
 
   return (
     <>
@@ -33,28 +107,44 @@ export const SettingPage = () => {
             <div className="settings-row">
               <div className="settings-row-title">서비스 운영 및 장애</div>
               <label className="settings-switch">
-                <input type="checkbox" />
+                <input 
+                  type="checkbox" 
+                  checked={ alarmSetting['21'] }
+                  onChange={ (e: ChangeEvent<HTMLInputElement>) => callAppAlarmConsent(e.target.checked, '21') }
+                />
                 <span className="slider"></span>
               </label>
             </div>
             <div className="settings-row">
               <div className="settings-row-title">무이자 혜택 및 이벤트</div>
               <label className="settings-switch">
-                <input type="checkbox" />
+                <input 
+                  type="checkbox" 
+                  checked={ alarmSetting['11'] }
+                  onChange={ (e: ChangeEvent<HTMLInputElement>) => callAppAlarmConsent(e.target.checked, '11') }
+                />
                 <span className="slider"></span>
               </label>
             </div>
             <div className="settings-row">
               <div className="settings-row-title">서비스 이용 및 정책 변경</div>
               <label className="settings-switch">
-                <input type="checkbox" />
+                <input 
+                  type="checkbox" 
+                  checked={ alarmSetting['31'] }
+                  onChange={ (e: ChangeEvent<HTMLInputElement>) => callAppAlarmConsent(e.target.checked, '31') }
+                />
                 <span className="slider"></span>
               </label>
             </div>
             <div className="settings-row">
               <div className="settings-row-title">NICE소식 및 기타 정보</div>
               <label className="settings-switch">
-                <input type="checkbox" />
+                <input 
+                  type="checkbox" 
+                  checked={ alarmSetting['41'] }
+                  onChange={ (e: ChangeEvent<HTMLInputElement>) => callAppAlarmConsent(e.target.checked, '41') }
+                />
                 <span className="slider"></span>
               </label>
             </div>
@@ -65,14 +155,22 @@ export const SettingPage = () => {
             <div className="settings-row">
               <div className="settings-row-title">정산처리 현황</div>
               <label className="settings-switch">
-                <input type="checkbox" />
+                <input 
+                  type="checkbox" 
+                  checked={ alarmSetting['61'] }
+                  onChange={ (e: ChangeEvent<HTMLInputElement>) => callAppAlarmConsent(e.target.checked, '61') }
+                />
                 <span className="slider"></span>
               </label>
             </div>
             <div className="settings-row nopadding">
               <div className="settings-row-title">정산한도 알림</div>
               <label className="settings-switch">
-                <input type="checkbox" />
+                <input 
+                  type="checkbox" 
+                  checked={ alarmSetting['62'] }
+                  onChange={ (e: ChangeEvent<HTMLInputElement>) => callAppAlarmConsent(e.target.checked, '62') }
+                />
                 <span className="slider"></span>
               </label>
             </div>
@@ -84,7 +182,11 @@ export const SettingPage = () => {
             <div className="settings-row link">
               <div className="settings-row-title bd-style">마케팅 정보 수신 동의</div>
               <label className="settings-switch">
-                <input type="checkbox" />
+                <input 
+                  type="checkbox" 
+                  checked={ alarmSetting['15'] }
+                  onChange={ (e: ChangeEvent<HTMLInputElement>) => callAppAlarmConsent(e.target.checked, '15') }
+                />
                 <span className="slider"></span>
               </label>
             </div>