349 lines
11 KiB
TypeScript
349 lines
11 KiB
TypeScript
import {
|
|
Fragment,
|
|
useCallback,
|
|
useEffect,
|
|
useState
|
|
} from 'react';
|
|
import { Outlet } from 'react-router-dom';
|
|
import { HeaderNavigation } from '@/widgets/navigation/header';
|
|
import { FooterNavigation } from '@/widgets/navigation/footer';
|
|
import { PullToRefresh } from '@/widgets/pull-to-refresh/pull-to-refresh';
|
|
import { useNavigate } from '@/shared/lib/hooks';
|
|
import { useScrollToTop } from '@/shared/lib/hooks/use-scroll-to-top';
|
|
import {
|
|
CodeListItem,
|
|
CodesSelectParams,
|
|
CodesSelectPostResponse,
|
|
HeaderType
|
|
} from '@/entities/common/model/types';
|
|
import { useHomeGroupsMutation } from '@/entities/home/api/use-home-groups-mutation';
|
|
import { useUserInfo } from '@/entities/user/lib/use-user-info';
|
|
import { useAppBridge } from '@/hooks';
|
|
import { useStore } from '@/shared/model/store';
|
|
import { getLocalStorage, setLocalStorage } from '@/shared/lib';
|
|
import { StorageKeys } from '@/shared/constants/local-storage';
|
|
import { HomeGroupsParams, HomeGroupsResponse } from '@/entities/home/model/types';
|
|
import { BusinessPropertyByMidParams, BusinessPropertyByMidResponse, LoginResponse, ShortcutUserParams, ShortcutUserResponse, UserFindAuthMethodParams, UserFindAuthMethodResponse } from '@/entities/user/model/types';
|
|
import { useShortcutUserMutation } from '@/entities/user/api/use-shortcut-user-mutation';
|
|
import { useShortcutDefaultMutation } from '@/entities/user/api/use-shortcut-detault-mutation';
|
|
import { useBusinessPropertyByMidMutation } from '@/entities/user/api/use-business-property-by-mid-mutation';
|
|
import { useUserFindAuthMethodMutation } from '@/entities/user/api/use-user-find-authmethod-mutation';
|
|
import { useCodesSelectMutation } from '@/entities/common/api/use-codes-select-mutation';
|
|
|
|
export interface ContextType {
|
|
setOnBack: (onBack: () => void) => void;
|
|
setHeaderTitle: (title: string) => void;
|
|
setIsPullToRefreshEnabled: (enabled: boolean) => void;
|
|
setMenuOn: (menuOn: boolean) => void;
|
|
setHeaderType: (headerType: HeaderType) => void;
|
|
setFooterMode: (footerMode: boolean) => void;
|
|
setFooterCurrentPage: (footerCurrentPage?: string | null) => void;
|
|
setFavoriteEdit: (favoriteEdit?: boolean) => void;
|
|
};
|
|
|
|
export interface CallCodesSelectProps {
|
|
codeCl: string;
|
|
code1Filter?: Array<any>;
|
|
};
|
|
export interface OnSetCommonCodesProps {
|
|
data: Array<CodeListItem>;
|
|
codeCl: string;
|
|
code1Filter?: Array<any>;
|
|
};
|
|
|
|
export const SubLayout = () => {
|
|
useScrollToTop();
|
|
const {
|
|
callLogin,
|
|
updateUserData
|
|
} = useUserInfo();
|
|
|
|
const [onBack, setOnBack] = useState(undefined);
|
|
const [headerTitle, setHeaderTitle] = useState<string>('');
|
|
const [isPullToRefreshEnabled, setIsPullToRefreshEnabled] = useState<boolean>(false);
|
|
const [menuOn, setMenuOn] = useState<boolean>(false);
|
|
const [headerType, setHeaderType] = useState<HeaderType>(HeaderType.NoHeader);
|
|
const [footerMode, setFooterMode] = useState<boolean>(false);
|
|
const [footerCurrentPage, setFooterCurrentPage] = useState<undefined | string | null>(undefined);
|
|
const [favoriteEdit, setFavoriteEdit] = useState<boolean>(false);
|
|
const [headerNavigationKey, setHeaderNavigationKey] = useState<number>(1);
|
|
const [loginSuccess, setLoginSuccess] = useState<boolean>(false);
|
|
const [mid, setMid] = useState<string>();
|
|
|
|
const { isNativeEnvironment } = useAppBridge();
|
|
const { mutateAsync: homeGroups } = useHomeGroupsMutation();
|
|
const { mutateAsync: codesSelect} = useCodesSelectMutation();
|
|
const { mutateAsync: shortcutUser } = useShortcutUserMutation();
|
|
const { mutateAsync: shortcutDefault } = useShortcutDefaultMutation();
|
|
const { mutateAsync: businessPropertyByMid } = useBusinessPropertyByMidMutation();
|
|
const { mutateAsync: findAuthMethod } = useUserFindAuthMethodMutation();
|
|
|
|
const wrapperClassName = 'wrapper';
|
|
|
|
const callHomeGroups = () => {
|
|
let userInfo = useStore.getState().UserStore.userInfo;
|
|
let params: HomeGroupsParams = {
|
|
userid: userInfo.usrid
|
|
};
|
|
homeGroups(params).then((rs: HomeGroupsResponse) => {
|
|
useStore.getState().UserStore.setUserMids(rs.mids);
|
|
let options: Array<Record<string, string>> = rs.mids.map((value, index) => {
|
|
return {
|
|
name: value,
|
|
value: value
|
|
};
|
|
});
|
|
useStore.getState().UserStore.setSelectOptionsMids(options);
|
|
|
|
if(!!rs.mids[0]){
|
|
useStore.getState().UserStore.setMid(rs.mids[0]);
|
|
setMid(rs.mids[0]);
|
|
}
|
|
setLoginSuccess(true);
|
|
setHeaderNavigationKey(headerNavigationKey + 1);
|
|
|
|
|
|
});
|
|
};
|
|
|
|
const callBusinessPropertyByMid = () => {
|
|
if(!!mid){
|
|
let params: BusinessPropertyByMidParams = {
|
|
mid: mid
|
|
};
|
|
businessPropertyByMid(params).then((rs: BusinessPropertyByMidResponse) => {
|
|
console.log(rs);
|
|
});
|
|
}
|
|
|
|
};
|
|
|
|
const callSortcutDefault = () => {
|
|
console.log("============================callSortcutDefault")
|
|
let userInfo = useStore.getState().UserStore.userInfo;
|
|
if(userInfo.usrid){
|
|
let params: ShortcutUserParams = {
|
|
usrid: userInfo.usrid
|
|
};
|
|
shortcutUser(params).then((rs: ShortcutUserResponse) => {
|
|
// Modify iconFilePath to use menu_icon_{menuId}.svg format
|
|
console.log("============================rs", rs)
|
|
const modifiedShortcuts = rs.shortcuts.map(shortcut => ({
|
|
...shortcut,
|
|
iconFilePath: `menu_icon_${shortcut.menuId}.svg`
|
|
}));
|
|
|
|
console.log("============================modifiedShortcuts", modifiedShortcuts)
|
|
useStore.getState().UserStore.setUserFavorite(modifiedShortcuts);
|
|
});
|
|
}
|
|
};
|
|
|
|
const callShortcutUser = () => {
|
|
console.log("============================callShortcutUser")
|
|
let userInfo = useStore.getState().UserStore.userInfo;
|
|
if(userInfo.usrid){
|
|
let params: ShortcutUserParams = {
|
|
usrid: userInfo.usrid
|
|
};
|
|
shortcutUser(params).then((rs: ShortcutUserResponse) => {
|
|
console.log("============================rs", rs)
|
|
if(!rs.usingDefault && rs.shortcuts){
|
|
if(rs.shortcuts.length > 0){
|
|
const modifiedShortcuts = rs.shortcuts.map(shortcut => ({
|
|
...shortcut,
|
|
iconFilePath: `/images/menu_icon_${shortcut.menuId}.svg`
|
|
}));
|
|
|
|
console.log("============================modifiedShortcuts", modifiedShortcuts)
|
|
useStore.getState().UserStore.setUserFavorite(modifiedShortcuts);
|
|
}
|
|
else{
|
|
callSortcutDefault();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
};
|
|
|
|
const callFindAuthMethod = () => {
|
|
let userInfo = useStore.getState().UserStore.userInfo;
|
|
if(!!userInfo.usrid && !! mid){
|
|
let params: UserFindAuthMethodParams = {
|
|
usrid: userInfo.usrid,
|
|
mid: mid
|
|
};
|
|
findAuthMethod(params).then((rs: any) => {
|
|
let emails = rs.emails.map((value: any, index: any) => {
|
|
return value.content;
|
|
});
|
|
console.log('emails -->', emails)
|
|
useStore.getState().UserStore.setUserEmails(emails);
|
|
let options: Array<Record<string, string>> = emails.map((value: any, index: any) => {
|
|
return {
|
|
name: value,
|
|
value: value
|
|
};
|
|
});
|
|
useStore.getState().UserStore.setSelectOptionsEmails(options);
|
|
if(!!emails[0]){
|
|
useStore.getState().UserStore.setEmail(emails[0]);
|
|
}
|
|
});
|
|
}
|
|
|
|
};
|
|
|
|
const handleLogin = useCallback(async () => {
|
|
let userParmas;
|
|
if(!isNativeEnvironment){
|
|
userParmas = {
|
|
id: 'nictest00',
|
|
password: 'nictest00'
|
|
};
|
|
|
|
// userParmas = {
|
|
// id: 'medi9332',
|
|
// password: 'medi9332'
|
|
// };
|
|
|
|
}
|
|
callLogin(userParmas).then(() => {
|
|
callHomeGroups();
|
|
callShortcutUser();
|
|
|
|
callCodesSelect({ codeCl: '0001' });
|
|
callCodesSelect({ codeCl: '0002' });
|
|
|
|
let filter0022: Array<string> = ['01', '02', '03', '05', '14', '21', '24', '26', '31'];
|
|
callCodesSelect({
|
|
codeCl: '0022',
|
|
code1Filter: filter0022
|
|
});
|
|
|
|
callCodesSelect({ codeCl: '0074' });
|
|
|
|
}).catch((error: any) => {
|
|
setLoginSuccess(false);
|
|
});
|
|
}, []);
|
|
|
|
const callCodesSelect = ({
|
|
codeCl,
|
|
code1Filter
|
|
}: CallCodesSelectProps) => {
|
|
let params: CodesSelectParams = {
|
|
codeCl: codeCl,
|
|
useCl: 0,
|
|
method: 'post'
|
|
};
|
|
|
|
codesSelect(params).then((rs: CodesSelectPostResponse) => {
|
|
if(rs){
|
|
onSetCommonCodes({
|
|
data: rs.codeList,
|
|
codeCl: codeCl,
|
|
code1Filter: code1Filter
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
const onSetCommonCodes = ({
|
|
data,
|
|
codeCl,
|
|
code1Filter
|
|
}: OnSetCommonCodesProps) => {
|
|
if(codeCl === '0001'){
|
|
|
|
useStore.getState().CommonStore.setCreditCardList(data);
|
|
}
|
|
else if(codeCl === '0002'){
|
|
useStore.getState().CommonStore.setBankList(data);
|
|
}
|
|
else if(codeCl === '0022'){
|
|
let options = [];
|
|
options = data.map((value, index) => {
|
|
return {
|
|
name: value.desc1,
|
|
value: value.code1
|
|
}
|
|
});
|
|
if(!!code1Filter){
|
|
options = options.filter((value, index) => {
|
|
return code1Filter.includes(value.value);
|
|
});
|
|
}
|
|
options = options.sort((a, b) => {
|
|
if(a > b) return 1;
|
|
else if(a < b) return -1;
|
|
else return 0;
|
|
});
|
|
options.unshift({
|
|
name: '전체', value: ''
|
|
});
|
|
useStore.getState().CommonStore.setServiceCodes(options);
|
|
}
|
|
else if(codeCl === '0074'){
|
|
useStore.getState().CommonStore.setVirtualBankList(data);
|
|
}
|
|
};
|
|
|
|
const saveToken = (token: LoginResponse) => {
|
|
updateUserData(token);
|
|
};
|
|
|
|
window.saveToken = saveToken;
|
|
|
|
useEffect(() => {
|
|
handleLogin();
|
|
}, []);
|
|
useEffect(() => {
|
|
if(!!mid){
|
|
// callBusinessPropertyByMid();
|
|
callFindAuthMethod();
|
|
}
|
|
}, [mid]);
|
|
|
|
return (
|
|
<div className={ wrapperClassName }>
|
|
<Fragment>
|
|
<HeaderNavigation
|
|
onBack={ onBack }
|
|
headerTitle={ headerTitle }
|
|
menuOn={ menuOn }
|
|
setMenuOn={ setMenuOn }
|
|
headerType={ headerType }
|
|
favoriteEdit={ favoriteEdit }
|
|
key={ headerNavigationKey }
|
|
loginSuccess={ loginSuccess }
|
|
/>
|
|
{ loginSuccess &&
|
|
<Outlet
|
|
context={{
|
|
setOnBack,
|
|
setHeaderTitle,
|
|
setIsPullToRefreshEnabled,
|
|
setMenuOn,
|
|
setHeaderType,
|
|
setFooterMode,
|
|
setFooterCurrentPage,
|
|
setFavoriteEdit
|
|
}}
|
|
/>
|
|
}
|
|
{
|
|
footerMode &&
|
|
<FooterNavigation
|
|
setMenuOn={ setMenuOn }
|
|
footerCurrentPage={ footerCurrentPage }
|
|
setFavoriteEdit={ setFavoriteEdit }
|
|
></FooterNavigation>
|
|
}
|
|
|
|
</Fragment>
|
|
</div>
|
|
);
|
|
};
|