{children}
\n \n )\n}\n","export default {\n STATUS: {\n PENDING: 'pending',\n RUNNING: 'running',\n DONE: 'done',\n CANCEL: 'cancel',\n },\n PAGINATION: {\n PAGE: 0,\n SIZE: 10,\n },\n URL: {\n TUTORIAL: 'https://hotro.bombot.vn/',\n FACEBOOK: 'https://www.facebook.com/?ref=bombot',\n EXTENSION: 'https://bombot.short.gy/bombot-extension',\n },\n PACKAGE: {\n TRIAL: 'trial',\n },\n ACTIONS: {\n DETAIL: 'DETAIL',\n EDIT: 'EDIT',\n FILTER: 'FILTER',\n },\n OTP: {\n SEC: '60',\n },\n GENDER: {\n MALE: 'MALE',\n FEMALE: 'FEMALE',\n },\n MENU: {\n HOME: {\n NAME: 'menu.overall',\n LINK: '/trang-chu',\n },\n CUSTOMER: {\n NAME: 'menu.customer',\n LINK: '/quan-ly-khach-hang',\n },\n FANPAGE: {\n NAME: 'menu.fanpage',\n LINK: '/quan-ly-fan-page',\n },\n CAMPAGIGN: {\n NAME: 'menu.campaign',\n LINK: '/quan-ly-chien-dich',\n },\n TAG: {\n NAME: 'menu.tag',\n LINK: '/quan-ly-tag',\n },\n SCENARIO: {\n NAME: 'menu.scenario',\n LINK: '/quan-ly-kich-ban',\n },\n SETTING_ACCOUNT: {\n NAME: 'menu.account',\n LINK: '/quan-ly-tai-khoan',\n },\n },\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { makeStyles } from '@material-ui/core/styles'\nimport {\n HourglassEmpty,\n PlayCircleFilled,\n PauseCircleFilled,\n CheckCircle,\n} from '@material-ui/icons'\n\n// Styles\nconst useStyles = makeStyles((theme) => ({\n base: {\n padding: theme.spacing(1.5), // Padding mặc định\n borderRadius: '4px',\n margin: theme.spacing(1, 0),\n display: 'flex',\n alignItems: 'center',\n },\n pending: {\n color: 'blue',\n backgroundColor: 'rgba(33, 150, 243, 0.2)', // Xanh dương nhạt\n },\n running: {\n color: 'teal',\n backgroundColor: 'rgba(0, 128, 128, 0.2)', // Màu xanh ngọc nhạt\n },\n cancel: {\n color: 'orange',\n backgroundColor: 'rgba(255, 152, 0, 0.2)', // Cam nhạt\n },\n done: {\n color: 'darkgreen',\n backgroundColor: 'rgba(34, 139, 34, 0.2)', // Xanh lá đậm nhạt\n },\n small: {\n padding: theme.spacing(1), // Padding nhỏ\n fontSize: '12px !important',\n '& $icon': {\n fontSize: '16px !important',\n },\n },\n medium: {\n padding: '8px 12px', // Padding vừa\n fontSize: '14px !important',\n '& $icon': {\n fontSize: '20px !important',\n },\n },\n large: {\n padding: theme.spacing(2), // Padding lớn\n fontSize: '16px !important',\n '& $icon': {\n fontSize: '24px !important',\n },\n },\n icon: {\n marginRight: theme.spacing(1),\n },\n textsmall: {\n fontSize: '12px !important',\n },\n textmedium: {\n fontSize: '14px !important',\n },\n textlarge: {\n fontSize: '16px !important',\n },\n}))\n\n// Component\nconst CampaignStatusLabel = ({ message, type, size = 'medium', ...res }) => {\n const classes = useStyles()\n\n // Map trạng thái sang class\n let statusClass\n let IconComponent\n\n if (type === 'pending' || type === 'init') {\n statusClass = classes.pending\n IconComponent = HourglassEmpty\n } else if (type === 'running') {\n statusClass = classes.running\n IconComponent = PlayCircleFilled\n } else if (type === 'cancel' || type === 'paused') {\n statusClass = classes.cancel\n IconComponent = PauseCircleFilled\n } else if (type === 'done') {\n statusClass = classes.done\n IconComponent = CheckCircle\n }\n\n // Kết hợp class của kích thước\n const sizeClass = classes[size] || classes.medium\n\n let textStatusClass = classes[`text${size}`]\n\n return IconComponent ? (\n {message}
\n \n ) : null\n}\n\n// PropTypes\nCampaignStatusLabel.propTypes = {\n message: PropTypes.string.isRequired,\n type: PropTypes.oneOf(['pending', 'running', 'cancel', 'done']).isRequired,\n size: PropTypes.oneOf(['small', 'medium', 'large']),\n}\n\nCampaignStatusLabel.defaultProps = {\n size: 'medium',\n}\n\n// Export trạng thái\nexport const campaignStatusDir = {\n pending: 'Initial',\n running: 'Running',\n cancel: 'Paused',\n done: 'Completed',\n}\n\nexport default CampaignStatusLabel\n","import { Button, IconButton, TextField, Tooltip } from \"@material-ui/core\";\nimport InputAdornment from \"@material-ui/core/InputAdornment\";\nimport Paper from \"@material-ui/core/Paper\";\nimport { makeStyles, styled } from \"@material-ui/core/styles\";\nimport Table from \"@material-ui/core/Table\";\nimport TableBody from \"@material-ui/core/TableBody\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableContainer from \"@material-ui/core/TableContainer\";\nimport TableHead from \"@material-ui/core/TableHead\";\nimport TablePagination from \"@material-ui/core/TablePagination\";\nimport TableRow from \"@material-ui/core/TableRow\";\nimport TableSortLabel from \"@material-ui/core/TableSortLabel\";\nimport { CheckOutlined, CheckRounded, SortRounded } from \"@material-ui/icons\";\nimport ClearIcon from \"@material-ui/icons/Clear\";\nimport SearchIcon from \"@material-ui/icons/Search\";\nimport Pagination from \"@material-ui/lab/Pagination\";\nimport cn from \"classnames\";\nimport Flex from \"components/Flex\";\nimport { CheckIcon, ChevronDown, FilterIcon } from \"lucide-react\";\nimport moment from \"moment\";\nimport PropTypes from \"prop-types\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useHistory } from \"react-router-dom/cjs/react-router-dom.min\";\nimport types from \"../constants/types\";\nimport ButtonComponent from \"./Button\";\nimport CampaignStatusLabel from \"views/Scenario/components/CampaignStatusLabel\";\nimport { useRef } from \"react\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: \"100%\"\n },\n paper: {\n width: \"100%\",\n // marginBottom: theme.spacing(2),\n boxShadow: \"0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)\",\n borderRadius: \"0px\",\n overflow: \"hidden\",\n border: \"1px solid rgb(222, 225, 230)\"\n },\n table: {\n minWidth: \"100%\"\n },\n tableHead: {\n backgroundColor: \"#F4F4F4FF\"\n },\n tableHeadCell: {\n fontWeight: \"bold\"\n },\n tableCell: {\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n padding: \"12px 16px\",\n minWidth: \"150px\"\n },\n ordNumberCell: {\n width: \"80px\",\n minWidth: \"80px\"\n },\n idCell: {\n width: \"180px\",\n minWidth: \"180px\"\n },\n nameCell: {\n width: \"250px\",\n minWidth: \"250px\"\n },\n pageNameCell: {\n width: \"200px\",\n minWidth: \"200px\"\n },\n creatorCell: {\n width: \"180px\",\n minWidth: \"180px\"\n },\n dateTimeCell: {\n width: \"160px\",\n minWidth: \"160px\"\n },\n statusCell: {\n width: \"140px\",\n minWidth: \"140px\",\n \"& span\": {\n padding: \"6px 12px\",\n borderRadius: \"4px\",\n fontWeight: \"500\",\n display: \"inline-block\",\n width: \"100%\",\n textAlign: \"center\"\n }\n },\n numberCell: {\n width: \"120px\",\n minWidth: \"120px\"\n },\n copyButton: {\n padding: 4,\n \"&:hover\": {\n backgroundColor: \"rgba(0, 0, 0, 0.04)\"\n }\n },\n wrapperSearch: {\n width: 500,\n marginBottom: theme.spacing(2)\n },\n noData: {\n color: \"rgba(0,0,0,.5)\",\n fontWeight: \"bold\",\n textAlign: \"center\",\n padding: theme.spacing(3)\n },\n clickableRow: {\n cursor: \"pointer\",\n \"&:hover\": {\n backgroundColor: \"rgba(0, 0, 0, 0.04)\"\n }\n },\n actionCell: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n borderLeft: \"0.2px solid rgb(246, 239, 239)\",\n backgroundColor: \"#fafafa\",\n position: \"sticky\",\n right: 0,\n top: 0,\n zIndex: 1\n },\n actionButton: {\n background: \"none\",\n padding: 0,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n color: \"rgb(0, 123, 255)\",\n fontWeight: 600,\n transition: \"all 0.3s ease\",\n \"&:hover\": {\n backgroundColor: \"rgba(33, 150, 243, 0.2)\"\n }\n },\n actionBtnDetail: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n padding: \"6px 10px\",\n borderRadius: \"8px\"\n },\n actionTitle: {\n margin: 0,\n fontSize: \"10px !important\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\"\n },\n buttonSearch: {\n backgroundColor: \"#05AE34\",\n color: \"white\",\n padding: \"6px 16px\",\n \"&:hover\": {\n backgroundColor: \"#048A2D\"\n }\n },\n textField: {\n backgroundColor: \"#ffffff\",\n \"& .MuiOutlinedInput-root\": {}\n },\n p0: {\n padding: \"0\",\n margin: \"0\"\n },\n witdhOrd: {\n minWidth: \"140px\",\n padding: \"0 8px !important\"\n },\n f600: {\n fontWeight: 600\n },\n heightHeader: {\n height: \"52px\"\n },\n rowItem: {\n cursor: \"pointer\"\n }\n}));\n\nconst headCells = [\n {\n id: \"ord_number\",\n numeric: true,\n disablePadding: true,\n label: \"overall.lastest_campaign.ord_number\"\n },\n {\n id: \"id\",\n numeric: true,\n disablePadding: true,\n label: \"overall.lastest_campaign.campaign_id\"\n },\n {\n id: \"name\",\n numeric: true,\n disablePadding: true,\n label: \"overall.lastest_campaign.campaign_name\"\n },\n {\n id: \"fanpage\",\n numeric: true,\n disablePadding: true,\n label: \"overall.lastest_campaign.page_name\"\n },\n {\n id: \"author\",\n numeric: true,\n disablePadding: true,\n label: \"overall.lastest_campaign.creator\"\n },\n {\n id: \"createdAt\",\n numeric: true,\n disablePadding: true,\n label: \"overall.lastest_campaign.create_time\"\n },\n {\n id: \"status\",\n numeric: true,\n disablePadding: true,\n label: \"overall.lastest_campaign.status\"\n },\n {\n id: \"timeStart\",\n numeric: true,\n disablePadding: true,\n label: \"overall.lastest_campaign.start_time\"\n },\n\n {\n id: \"totalScenario\",\n numeric: true,\n disablePadding: true,\n label: \"overall.lastest_campaign.scenario\"\n },\n\n {\n id: \"numberCus\",\n numeric: true,\n disablePadding: true,\n label: \"overall.lastest_campaign.customer\"\n },\n\n {\n id: \"numberCusSuccess\",\n numeric: true,\n disablePadding: true,\n label: \"overall.lastest_campaign.successful_customer\"\n },\n\n {\n id: \"numberCusFailed\",\n numeric: true,\n disablePadding: true,\n label: \"overall.lastest_campaign.failed_customer\"\n },\n\n {\n id: \"numberCusNotSend\",\n numeric: true,\n disablePadding: true,\n label: \"overall.lastest_campaign.pending_customer\"\n },\n\n {\n id: \"totalMess\",\n numeric: true,\n disablePadding: true,\n label: \"overall.lastest_campaign.message\"\n },\n\n {\n id: \"messSuccss\",\n numeric: true,\n disablePadding: true,\n label: \"overall.lastest_campaign.successful_message\"\n },\n {\n id: \"messFail\",\n numeric: true,\n disablePadding: true,\n label: \"overall.lastest_campaign.failed_message\"\n },\n {\n id: \"messNotSend\",\n numeric: true,\n disablePadding: true,\n label: \"overall.lastest_campaign.pending_message\"\n }\n];\n\nfunction EnhancedTableHead(props) {\n const { classes, t } = props;\n\n return (\n{t('common.btn.action')}
\n */}\n \n {isSearch && (\n \n \n \n {search && (\n {\n setSearch(\"\");\n handleSubmitApply(\"\");\n }}\n size=\"small\"\n >\n \n )\n }}\n />\n \n {t(\"common.btn.search\")}\n \n }\n backgroundColor=\"#05AE34\"\n color=\"white\"\n handleClickButton={() => handleSubmitSearch(search)}\n style={{\n minWidth: \"fit-content\",\n padding: \"6px 16px\"\n }}\n />\n \n )}\n\n {isShowFilter && (\n \n \n \n \n
\n\n {/* name: z-a */}\n {t(\"common.btn.sort\")}
\n \n }\n backgroundColor=\"#05AE34\"\n color=\"white\"\n handleClickButton={handleToggleSortModal}\n style={{\n minWidth: \"fit-content\",\n padding: \"6px 16px\",\n background: \"#05AE34\"\n }}\n />\n\n {openSortModal && (\n{t(\"campaign_management.name\")}
\n\n {/* name: a-z */}\n\n \n (e.currentTarget.style.backgroundColor = \"#E1E1E1FF\")\n }\n onMouseLeave={(e) =>\n (e.currentTarget.style.backgroundColor =\n sortNameOrder === \"name,asc\" ? \"#d8fcd2\" : \"#fff\")\n }\n onClick={() => handleSortName(\"name,asc\")}\n className=\"\"\n style={{\n display: \"flex\",\n justifyContent: \"start\",\n alignItems: \"center\",\n width: \"100%\",\n color: \"#333\",\n backgroundColor:\n sortNameOrder === \"name,asc\" ? \"#d8fcd2\" : \"#fff\"\n }}\n >\n \n
\n\n A - Z
\n \n \n \n (e.currentTarget.style.backgroundColor = \"#E1E1E1FF\")\n }\n onMouseLeave={(e) =>\n (e.currentTarget.style.backgroundColor =\n sortNameOrder === \"name,desc\" ? \"#d8fcd2\" : \"#fff\")\n }\n onClick={() => handleSortName(\"name,desc\")}\n style={{\n display: \"flex\",\n justifyContent: \"start\",\n alignItems: \"center\",\n width: \"100%\",\n color: \"#333\",\n backgroundColor:\n sortNameOrder === \"name,desc\" ? \"#d8fcd2\" : \"#fff\"\n }}\n >\n \n
\n\n Z - A
\n \n \n\n {t(\"campaign_management.time\")}
\n\n {/* newest-oldest */}\n\n \n (e.currentTarget.style.backgroundColor = \"#E1E1E1FF\")\n }\n onMouseLeave={(e) =>\n (e.currentTarget.style.backgroundColor =\n sortDateRangeOrder === \"createdAt,desc\"\n ? \"#d8fcd2\"\n : \"#fff\")\n }\n onClick={() => handleSortDateRange(\"createdAt,desc\")}\n className=\"\"\n style={{\n display: \"flex\",\n justifyContent: \"start\",\n alignItems: \"center\",\n width: \"100%\",\n color: \"#333\",\n backgroundColor:\n sortDateRangeOrder === \"createdAt,desc\"\n ? \"#d8fcd2\"\n : \"#fff\"\n }}\n >\n \n
\n \n \n {t(\"campaign_management.newest_oldest\")}\n \n
\n \n \n\n {/* oldest-newest */}\n \n \n (e.currentTarget.style.backgroundColor = \"#E1E1E1FF\")\n }\n onMouseLeave={(e) =>\n (e.currentTarget.style.backgroundColor =\n sortDateRangeOrder === \"createdAt,asc\"\n ? \"#d8fcd2\"\n : \"#fff\")\n }\n onClick={() => handleSortDateRange(\"createdAt,asc\")}\n className=\"\"\n style={{\n display: \"flex\",\n justifyContent: \"start\",\n alignItems: \"center\",\n width: \"100%\",\n color: \"#333\",\n backgroundColor:\n sortDateRangeOrder === \"createdAt,asc\"\n ? \"#d8fcd2\"\n : \"#fff\"\n }}\n >\n \n
\n \n {\" \"}\n \n {t(\"campaign_management.oldest_newest\")}\n \n
\n \n \n\n {t(\"campaign_management.date_range\")}
\n{t(\"campaign_management.status.title\")}
\n */}\n setIsOpen(true)}\n >\n {isOpen && (\n \n
\n\n {dataStatus.map((status) => (\n \n {/* Checkbox for \"All\" option */}\n handleSelect(\"all\")}\n >\n \n {selectedStatus.length === dataStatus.length && (\n
\n {t(\"campaign_management.status.all\")}\n \n
\n \n \n {t(\"campaign_management.scenario.name\")}\n
\n{t(\"update.no_data\")}
\n )}\n\n 
\n
\n );\n}\n\nLoading.propTypes = {};\n\nLoading.defaultProps = {};\n","import List from '@material-ui/core/List'\nimport ListItem from '@material-ui/core/ListItem'\nimport ListItemIcon from '@material-ui/core/ListItemIcon'\nimport ListItemText from '@material-ui/core/ListItemText'\nimport { makeStyles } from '@material-ui/core/styles'\nimport AddAlertIcon from '@material-ui/icons/AddAlert'\nimport DehazeIcon from '@material-ui/icons/Dehaze'\nimport ForumIcon from '@material-ui/icons/Forum'\nimport GetAppIcon from '@material-ui/icons/GetApp'\nimport cn from 'classnames'\nimport Flex from 'components/Flex'\nimport { CalendarIcon, Flag, Gauge, Monitor, Tags, UserIcon } from 'lucide-react'\nimport React, { useEffect } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useHistory } from 'react-router-dom'\nimport ButtonComponent from '../../components/Button'\nimport types from '../../constants/types'\nimport IMAGES from '../../images'\n\nconst useStyles = makeStyles({\n root: {\n width: 250,\n },\n list: {\n width: 250,\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n },\n listDehaze: {\n width: 60,\n height: '100%',\n position: 'relative',\n overflowX: 'hidden',\n },\n fullList: {\n width: 'auto',\n },\n logoDehaze: {\n textAlign: 'right',\n '& img': {\n width: 'auto',\n display: 'inline-block',\n margin: '45px auto 30px',\n position: 'relative',\n right: 8,\n },\n },\n logo: {\n textAlign: 'center',\n '& img': {\n width: '50%',\n display: 'inline-block',\n margin: '30px auto',\n },\n },\n text: {\n '& span': {\n fontSize: 15,\n },\n },\n button: {\n margin: '5px 0px',\n display: 'inline-block',\n width: 'calc(100% - 30px)',\n },\n bottom: {\n textAlign: 'center',\n position: 'absolute',\n bottom: '0px',\n },\n wrapperSidebar: {\n width: 250,\n },\n active: {\n background: '#05AE34',\n color: 'white',\n '& .MuiListItemIcon-root': {\n color: 'white',\n },\n },\n dehazeIcon: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n paddingLeft: 12,\n paddingRight: 12,\n '&:hover': {\n cursor: 'pointer',\n },\n },\n dehazeIconDehaze: {\n top: '50%',\n left: '75px',\n position: 'fixed',\n transform: 'translateY(-50%)',\n '&:hover': {\n cursor: 'pointer',\n },\n },\n logoIconDehaze: {\n display: 'none',\n },\n dehazeList: {\n display: 'none',\n },\n container: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n gap: '10px',\n },\n})\n\nexport default function TemporaryDrawer(props) {\n const classes = useStyles()\n const history = useHistory()\n const { t } = useTranslation()\n const { onMenu, getMenu, onDehaze, dehaze } = props\n const [state, setState] = React.useState({\n top: false,\n left: true,\n bottom: false,\n right: false,\n })\n const [activeMenu, setActiveMenu] = React.useState(null)\n const toggleDrawer = (anchor, open) => (event) => {\n if (\n event.type === 'keydown' &&\n (event.key === 'Tab' || event.key === 'Shift')\n ) {\n return\n }\n\n setState({ ...state, [anchor]: open })\n }\n const menu = [\n {\n name: t(types.MENU.HOME.NAME),\n icon: \n
\n\n {dehaze && (\n \n
\n\n \n
\n \n \n 
\n \n
\n \n handleDehazeIcon()}>\n
\n - \n {menu.map((item, index) => (\n
\n
\n - \n
\n handleDehazeIcon()}\n >\n
\n )}\n \n )\n\n // const listDehaze = () => (\n\n // );\n\n return (\n // \n \n 
\n \n
\n\n - \n {menu.map((item, index) => (\n
\n
\n - \n
\n // {[\"left\", \"right\", \"top\", \"bottom\"].map((anchor) => (\n // \n // \n // {/* */}\n // \n // {list(anchor)}\n // \n // \n // ))}\n //
\n list()\n )\n}\n","import { pathKeys } from \"../../constants\";\nexport default {\n appReducer: {\n user: {},\n loading: false,\n },\n loginReducer: {\n account: {},\n statusLogined: null,\n forgotPassword: null,\n },\n homeReducer: {\n verifyNumberPhone: false,\n share: [],\n dashboard: {},\n verifyNumberPhoneError: false,\n },\n sidebarReducer: {\n menu: `Tổng quan`,\n dehaze: false\n },\n campaignReducer: {},\n fanpageReducer: {\n fanpageFull: [],\n },\n settingAccountReducer: {\n messageUnlink: \"\",\n whatYouNeed: {},\n changePassword: null,\n inviteCode: {},\n unlink: false,\n messageInviteError: \"\"\n },\n dialogPolicyPointReducer:{\n whatYouNeed: {},\n redeemPoints: {},\n },\n customerReducer: {\n createCustomerSucss: false,\n customerAll: [],\n customer: null,\n detail: {},\n // edit: {},\n selected: {},\n fanpageSelected: {},\n tagFacebookSelectedAll: false,\n selectTagFacebook: {},\n setLoadingImport: false,\n importSuccess: false,\n fanPageDetail: {},\n customerCheck: [],\n messageImport: \"\"\n },\n inviteReducer: {\n confirmInviteCode: null,\n },\n};\n","import { createSlice } from \"@reduxjs/toolkit\";\nimport initialState from \"../../configs/redux/initialState\";\n\nconst sidebarReducer = createSlice({\n name: \"sidebar\",\n initialState: initialState.sidebarReducer,\n reducers: {\n setMenu: (state, action) => {\n state.menu = action.payload;\n },\n setDehaze: (state, action) => {\n state.dehaze = action.payload;\n },\n \n }\n});\n\nexport const {\n setMenu,\n setDehaze\n} = sidebarReducer.actions;\n\nexport default sidebarReducer.reducer;\n","\n// import { history } from \"../../configs/history\";\nimport {\n setMenu,\n setDehaze\n} from \"./SidebarReducer\";\n\nexport function menu(menu) {\n return dispatch => {\n return dispatch(setMenu(menu));\n \n };\n}\nexport function onDehaze(value) {\n return dispatch => {\n return dispatch(setDehaze(value));\n \n };\n}\n","import { createSelector } from \"@reduxjs/toolkit\";\nexport const menu = state => state.sidebarReducer.menu;\nexport const dehaze = state => state.sidebarReducer.dehaze;\n\nexport const getMenu = createSelector(\n [menu],\n (menu) => {\n return menu;\n }\n);\n","import SidebarPage from \"./SidebarContainer\";\n\nexport default SidebarPage;\n","import { connect } from \"react-redux\";\nimport { withRouter } from 'react-router-dom';\nimport SidebarView from \"./SidebarView\";\nimport * as actionsSidebar from \"./SidebarActions\";\nimport * as selectorsSidebar from \"./SidebarSelectors\";\nconst mapStateToProps = state => {\n return {\n getMenu: selectorsSidebar.getMenu(state),\n dehaze: selectorsSidebar.dehaze(state),\n };\n};\n\nconst mapDispatchToProps = dispatch => ({\n onMenu: (data) => dispatch(actionsSidebar.menu(data)),\n onDehaze: (value) => dispatch(actionsSidebar.onDehaze(value)),\n});\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(SidebarView));\n","import React, { useEffect, useState } from 'react'\nimport { useHistory } from 'react-router-dom'\nimport { fade, makeStyles, withStyles } from '@material-ui/core/styles'\nimport { pathKeys } from '../../constants'\nimport types from '../../constants/types'\nimport AppBar from '@material-ui/core/AppBar'\nimport Toolbar from '@material-ui/core/Toolbar'\nimport MenuItem from '@material-ui/core/MenuItem'\nimport Menu from '@material-ui/core/Menu'\nimport ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'\nimport Button from '@material-ui/core/Button'\nimport Avatar from '@material-ui/core/Avatar'\nimport ExitToAppIcon from '@material-ui/icons/ExitToApp'\nimport ListItemIcon from '@material-ui/core/ListItemIcon'\nimport ListItemText from '@material-ui/core/ListItemText'\nimport AccountCircleIcon from '@material-ui/icons/AccountCircle'\nimport InfoIcon from '@material-ui/icons/Info'\nimport FormDialog from '../../components/FormDialog'\nimport cn from 'classnames'\nimport Flex from 'components/Flex'\nimport { useTranslation } from 'react-i18next'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { selectShare } from 'views/Home/HomeContainer'\nimport { handleUpgrade } from 'utils/helper'\nimport CloseIcon from '@material-ui/icons/Close'\n\nconst StyledMenu = withStyles({\n paper: {\n marginTop: 10,\n border: 'none !important',\n },\n})((props) => (\n \n \n \n \n handleCloseVersion()}\n >\n
\n )\n}\n","const baseUrl = `${process.env.REACT_APP_API_URL}`\n\n// eslint-disable-next-line import/no-anonymous-default-export\nexport default {\n shared: {\n getWhatYouNeed: `${baseUrl}api/v1.0/shared/getWhatYouNeed`, // get\n getDashboard: `${baseUrl}api/v1.0/shared/dashboard`, // get\n },\n dashboard: {\n getMessageStatistic: `${baseUrl}api/v1.0/getStatistic/message`, // get\n getCampaignStatistic: `${baseUrl}api/v1.0/getStatistic/campaign`, // get\n getScenarioStatistic: `${baseUrl}api/v1.0/getStatistic/scenario`, // get\n getCustomerStatistic: `${baseUrl}api/v1.0/getStatistic/customer`, // get\n getGenAIStatistic: `${baseUrl}api/v1.0/genAI/getStatistic`, // get\n getFanpageStatistic: `${baseUrl}api/v1.0/fanPage/reportPage`, // get\n getTagBombotStatistic: `${baseUrl}api/v1.0/bombotTags/getStatistic`, // get\n getTagFacebookStatistic: `${baseUrl}api/v1.0/facebookTags/getStatistic`, // get\n },\n appConfig: {\n api: `${baseUrl}api/v1.0/appConfig`, // get\n addLog: `${baseUrl}api/v1.0/log`, // post\n },\n user: {\n loginSocial: `${baseUrl}api/v1.0/user/login_social`, // get\n user: `${baseUrl}api/v1.0/user`, // put\n login: `${baseUrl}api/v1.0/user/login`, // get\n verifyPhone: `${baseUrl}api/v1.0/user/verify`, // get\n getOTP: `${baseUrl}api/v1.0/user/getOTP`, // get\n changePassword: `${baseUrl}api/v1.0/user/changePassword`, // get\n getInviteCode: `${baseUrl}api/v1.0/user/getInviteCode`, // get\n confirmInviteCode: `${baseUrl}api/v1.0/user/confirmInviteCode`, // get\n forgotPassword: `${baseUrl}api/v1.0/user/resetPassword`, // get\n redeemPoints: `${baseUrl}api/v1.0/user/redeemPoints`, // get, doi diem\n unlink: `${baseUrl}api/v1.0/user/unlink`, // DELETE\n },\n fanpageApi: {\n reportPage: `${baseUrl}api/v1.0/fanPage/reportPage`, // get\n fanPageDetail: `${baseUrl}api/v1.0/fanPageDetail`, // post\n },\n campaignApi: {\n campaign: `${baseUrl}api/v1.0/campaign`, // get\n },\n scenarioApi: {\n scenario: `${baseUrl}api/v1.0/campaign/857636ce-e9f7-48c9-8474-9ae5fa309392/scenario?id=857636ce-e9f7-48c9-8474-9ae5fa309392&page=0&sort=createdAt,asc`, // get\n },\n customerApi: {\n customer: `${baseUrl}api/v1.0/customer`, // get\n create: `${baseUrl}api/v1.0/campaign`, // post\n addCampainByPart: `${baseUrl}api/v1.0/campaign/addCampainByPart`, // post\n addCampaignNoScenario: `${baseUrl}api/v1.0/campaign/addCampaignNoScenario`, // post\n createCustomer: `${baseUrl}api/v1.0/campaignCustomer`, // post\n addMultiCustomersBombotTags: `${baseUrl}api/v1.0/customer/customersBombotTags`, // post\n deleteMultiCustomersBombotTags: `${baseUrl}api/v1.0/customer/customersBombotTags`, // delete\n },\n}\n","import axiosClient from \"./axiosClient\";\nimport urlApi from \"./url\";\n\nconst getGuide = (params) => {\n return axiosClient.get(`${urlApi.appConfig.api}/guide_webapp`, { params });\n};\n\nconst getCountry = (params) => {\n return axiosClient.get(`${urlApi.appConfig.api}/country`, { params });\n};\n\nconst recordLog = (payload) => {\n return axiosClient.post(urlApi.appConfig.addLog, payload);\n};\nconst AppConfigAPI = {\n getGuide,\n recordLog,\n getCountry,\n};\n\nexport default AppConfigAPI;\n","import axios from 'axios'\nimport queryString from 'query-string'\nimport AppConfigAPI from './appConfig'\nimport i18n from 'i18next'\n\n// Set up default config for http requests here\n// Please have a look at here `https://github.com/axios/axios#request- config` for the full list of configs\nconst axiosClient = axios.create({\n baseURL: process.env.REACT_APP_API_URL,\n headers: localStorage.getItem('token')\n ? {\n 'content-type': 'application/json',\n authorization: localStorage.getItem('token') || undefined,\n }\n : {\n 'content-type': 'application/json',\n },\n paramsSerializer: (params) => queryString.stringify(params),\n})\n\naxiosClient.interceptors.request.use(async (config) => {\n // Handle token here ...\n if (i18n.language) {\n config.headers.lang = i18n.language?.substring(0, 2)\n }\n\n if (localStorage.getItem('token')) {\n config.headers.authorization = localStorage.getItem('token')\n }\n return config\n})\n\nlet retry = 0\n\naxiosClient.interceptors.response.use(\n (response) => {\n if (response && response.data) {\n return response.data\n }\n retry = 0\n return response\n },\n async (error) => {\n const payload = {\n errorCode: error?.response?.status || 0,\n message: 'webapp',\n }\n if (error.response?.data?.error?.message) {\n error.message = error.response.data.error.message\n payload.debug = error.response.data.error.message\n } else {\n payload.debug = error.message\n }\n if (error && error.response && error.response.status === 401) {\n console.log('error 401', error)\n localStorage.removeItem('token')\n localStorage.removeItem('id')\n window.location.reload(true)\n }\n if (retry === 0) AppConfigAPI.recordLog([payload])\n retry++\n // Handle errors\n throw error\n }\n)\n\nexport default axiosClient\n","// import { BehaviorSubject } from 'rxjs';\nimport axios from 'axios'\nimport axiosClient from './axiosClient'\nimport urlApi from './url'\nimport { pathKeys } from '../constants'\n\nexport const accountApi = {\n login,\n apiAuthenticate,\n onSubmitEmail,\n changePassword,\n logout,\n getInviteCode,\n transferToAccount,\n updateNotiPermissionToken,\n}\n\nfunction onSubmitEmail(params) {\n return new Promise((resolve, reject) => {\n const response = axiosClient.post(`${urlApi.user.login}`, params)\n if (response) {\n resolve(response)\n } else {\n reject(null)\n }\n })\n}\n\nfunction changePassword(params) {\n return new Promise((resolve, reject) => {\n const response = axiosClient.post(`${urlApi.user.changePassword}`, params)\n if (response) {\n resolve(response)\n } else {\n reject(null)\n }\n })\n}\n\nfunction getInviteCode(params) {\n return new Promise((resolve, reject) => {\n const response = axiosClient.get(`${urlApi.user.getInviteCode}`)\n if (response) {\n resolve(response)\n } else {\n reject(null)\n }\n })\n}\n\nfunction getMeFacebook() {\n return new Promise((resolve, reject) => {\n window.FB.api(\n '/me',\n {\n fields:\n 'id,email,first_name,last_name,name,picture.width(200).height(200)',\n },\n function (response) {\n if (response) {\n resolve(response)\n } else {\n reject(null)\n }\n }\n )\n })\n}\n\nfunction authLoginFacebook() {\n // Hàm api.getUser() trả về một promise object\n return new Promise((resolve, reject) => {\n window.FB.login(\n function (response) {\n if (response) {\n resolve(response)\n } else {\n reject(null)\n }\n },\n {\n auth_type: 'rerequest',\n scope: 'email, public_profile,pages_show_list',\n enable_profile_selector: true,\n return_scopes: true,\n }\n // { scope: \"email\" }\n )\n })\n}\n\nfunction apiAuthenticate(authResponse, me, ref) {\n return new Promise((resolve, reject) => {\n const params = {\n id: authResponse.userID,\n name: me.name,\n email: me.email,\n avatar: me.picture.data.url,\n fbAccessToken: authResponse.accessToken,\n }\n if (ref) params.partnerId = ref\n const response = axios.post(`${urlApi.user.loginSocial}`, params)\n if (response) {\n resolve(response)\n } else {\n reject(null)\n }\n })\n}\n\nfunction login(ref) {\n return new Promise((resolve, reject) => {\n window.FB.getLoginStatus(function (response) {\n if (response.status === 'connected') {\n getMeFacebook().then((me) => {\n apiAuthenticate(response.authResponse, me, ref).then(\n (loginSocial) => {\n resolve({ ...loginSocial.data, email: me.email })\n }\n )\n })\n } else {\n authLoginFacebook().then((auth) => {\n if (auth.authResponse) {\n getMeFacebook().then((me) => {\n apiAuthenticate(auth.authResponse, me, ref).then(\n (loginSocial) => {\n resolve({ ...loginSocial.data, email: me.email })\n }\n )\n })\n } else {\n reject(null)\n }\n })\n }\n })\n })\n}\n\nfunction logout() {\n localStorage.removeItem('token')\n localStorage.removeItem('id')\n window.FB.getLoginStatus(function (response) {\n if (response && response.status === 'connected') {\n window.FB.logout(function (response) {\n window.location.href = `${pathKeys.LOGIN}`\n })\n } else if (response.status === 'unknown') {\n window.FB.logout(function (response) {})\n window.location.href = `${pathKeys.LOGIN}`\n }\n window.location.reload(true)\n })\n\n // window.FB.api('/me/permissions', 'delete', null, (res) => {\n // if (res) {\n // window.FB.logout();\n // }\n // window.location.href = `${pathKeys.LOGIN}`;\n // });\n}\n\nfunction transferToAccount(payload) {\n return new Promise((resolve, reject) => {\n const response = axiosClient.post(`/api/v1.0/user/changeMainUser`, payload)\n if (response) {\n resolve(response)\n } else {\n reject(null)\n }\n })\n}\n\nfunction updateNotiPermissionToken(payload) {\n return new Promise((resolve, reject) => {\n const response = axiosClient.post(\n `/api/v1.0/user/subscribeNotification`,\n payload\n )\n if (response) {\n resolve(response)\n } else {\n reject(null)\n }\n })\n}\n","import axiosClient from \"./axiosClient\";\nimport urlApi from \"./url\";\nconst appApi = {\n getUser: (uid) => {\n return axiosClient.get(`${urlApi.user.user}/${uid}`);\n },\n forgotPassword: (params) => {\n return axiosClient.get(`${urlApi.user.forgotPassword}`, {params});\n },\n \n};\n\nexport default appApi;\n","import { createSlice } from \"@reduxjs/toolkit\";\nimport initialState from \"../../configs/redux/initialState\";\n\nconst loginReducer = createSlice({\n name: \"login\",\n initialState: initialState.loginReducer,\n reducers: {\n setAccount: (state, action) => {\n state.account = action.payload;\n },\n setStatusLogined: (state, action) => {\n state.statusLogined = action.payload;\n },\n setForgotPassword: (state, action) => {\n state.forgotPassword = action.payload;\n },\n \n }\n});\n\nexport const {\n setAccount,\n setStatusLogined,\n setForgotPassword\n} = loginReducer.actions;\n\nexport default loginReducer.reducer;\n","import { createSlice } from \"@reduxjs/toolkit\";\nimport initialState from \"../../configs/redux/initialState\";\n\n// IMPORTANT: Note that with @reduxjs/toolkit, you can change state directly.\n\nconst appReducer = createSlice({\n name: \"app\",\n initialState: {\n ...initialState.appReducer,\n share: null,\n },\n reducers: {\n showLoading(state, action) {\n state.loading = true;\n },\n hideLoading(state, action) {\n state.loading = false;\n },\n setUser(state, action) {\n state.user = action.payload;\n },\n setLoading(state, action) {\n state.loading = action.payload;\n },\n setShare(state, action) {\n state.share = action.payload;\n },\n },\n});\n\nexport const { showLoading, hideLoading, setUser, setLoading, setShare } =\n appReducer.actions;\n\nexport default appReducer.reducer;\n","import { accountApi } from \"../../api/accountApi\";\nimport appApi from \"../../api/appApi\";\nimport _ from \"lodash\";\nimport {\n setAccount,\n setStatusLogined,\n setForgotPassword,\n} from \"./LoginReducer\";\nimport { setUser, setLoading } from \"../App/AppReducer\";\n\nexport function login(ref) {\n return (dispatch) => {\n dispatch(setLoading(true));\n return accountApi.login(ref).then(\n (res) => {\n localStorage.setItem(\"token\", res.token);\n localStorage.setItem(\"id\", res.id);\n dispatch(setAccount(res));\n dispatch(setUser(res));\n return appApi.getUser(res.id).then(\n (res) => {\n dispatch(setUser(res));\n dispatch(setLoading(false));\n },\n (error) => {\n dispatch(setStatusLogined(false));\n dispatch(setLoading(false));\n }\n );\n },\n (error) => {\n dispatch(setLoading(false));\n }\n );\n };\n}\n\nexport function onSubmitEmail(params) {\n return (dispatch) => {\n dispatch(setLoading(true));\n return accountApi.onSubmitEmail(params).then(\n (res) => {\n if (_.isObject(res) && res.id) {\n localStorage.setItem(\"token\", res.token);\n localStorage.setItem(\"id\", res.id);\n dispatch(setAccount(res));\n dispatch(setUser(res));\n } else {\n dispatch(setStatusLogined(false));\n }\n dispatch(setLoading(false));\n },\n (error) => {\n dispatch(setStatusLogined(false));\n dispatch(setLoading(false));\n }\n );\n };\n}\n\nexport function onLogout() {\n return (dispatch) => {\n return accountApi.logout();\n };\n}\n\nexport function onSubmitForgotPassword(params) {\n return (dispatch) => {\n dispatch(setLoading(true));\n return appApi.forgotPassword(params).then(\n (res) => {\n if (res && !_.isObject(res)) {\n dispatch(setForgotPassword(true));\n } else {\n dispatch(setForgotPassword(false));\n }\n dispatch(setLoading(false));\n },\n (error) => {\n dispatch(setForgotPassword(false));\n dispatch(setLoading(false));\n }\n );\n };\n}\n","import { createSelector } from \"@reduxjs/toolkit\";\n\nconst selectAppReducer = (state) => state.appReducer;\nexport const user = (state) => state.appReducer.user;\nexport const loading = (state) => state.appReducer.loading;\n\nexport const selectUser = createSelector(user, (user) => {\n return user;\n});\n\nexport const selectShare = createSelector(selectAppReducer, (state) => {\n return state.share;\n});\n","import { createSelector } from \"@reduxjs/toolkit\";\nexport const verifyNumberPhone = (state) => state.homeReducer.verifyNumberPhone;\nexport const share = (state) => state.homeReducer.share;\nexport const dashboard = (state) => state.homeReducer.dashboard;\nexport const verifyNumberPhoneError = (state) =>\n state.homeReducer.verifyNumberPhoneError;\nexport const selectErrorVerifyPhone = (state) =>\n state.homeReducer.verifyNumberPhoneError;\n\nexport const getVerifyNumberPhone = createSelector(\n [verifyNumberPhone],\n (verify) => {\n return verify;\n }\n);\n\nexport const selectUser = createSelector(share, (share) => {\n return share.user;\n});\n","import HeaderPage from \"./HeaderContainer\";\n\nexport default HeaderPage;\n","import { connect } from \"react-redux\";\nimport { withRouter } from 'react-router-dom';\nimport HeaderView from \"./HeaderView\";\nimport * as selectorsSidebar from \"../Sidebar/SidebarSelectors\";\nimport * as actionsSidebar from \"../Sidebar/SidebarActions\";\nimport * as actionsLogin from \"../Login/LoginActions\";\nimport * as selectorsApp from \"../App/AppSelectors\";\nimport * as selectorsHome from \"../Home/HomeSelectors\";\nconst mapStateToProps = state => {\n return {\n getMenu: selectorsSidebar.getMenu(state),\n user: selectorsApp.user(state),\n share: selectorsHome.share(state),\n dehaze: selectorsSidebar.dehaze(state),\n };\n};\n\nconst mapDispatchToProps = dispatch => ({\n onMenu: (data) => dispatch(actionsSidebar.menu(data)),\n onLogout: () => dispatch(actionsLogin.onLogout()),\n \n \n});\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(HeaderView));\n","import i18n from 'i18next'\nimport LanguageDetector from 'i18next-browser-languagedetector'\nimport { initReactI18next } from 'react-i18next'\nimport Backend from 'i18next-http-backend'\nimport appApi from 'api/appApi'\ni18n\n .use(LanguageDetector)\n .use(Backend)\n .use(initReactI18next)\n // init i18next\n // for all options read: https://www.i18next.com/overview/configuration-options\n .init({\n // debug: true,\n fallbackLng: 'en',\n interpolation: {\n escapeValue: false,\n },\n })\n .then(async () => {\n try {\n const uid = localStorage.getItem('id')\n if (!uid) throw new Error('new client')\n const user = await appApi.getUser(uid)\n if (!user.lang) {\n if (!uid) throw new Error('new client')\n }\n i18n.changeLanguage(user.lang)\n } catch (error) {\n // i18n.changeLanguage(\"vi\");\n }\n })\n\nexport default i18n\n","import i18n from 'utils/i18n'\nimport axiosClient from './axiosClient'\nimport urlApi from './url'\nconst homeApi = {\n updateUser: (params, uid) => {\n return axiosClient.put(`${urlApi.user.user}/${uid}`, params);\n },\n verifyNumberPhone: (params) => {\n return axiosClient.get(`${urlApi.user.verifyPhone}`, { params });\n },\n getOTP: (params) => {\n return axiosClient.get(`${urlApi.user.getOTP}`, { params });\n },\n getWhatYouNeed: (params) => {\n return axiosClient.get(`${urlApi.shared.getWhatYouNeed}`, {\n params: {\n ...params,\n lang:\n i18n?.language === \"en-US\" || !i18n?.language ? \"en\" : i18n?.language\n }\n });\n },\n getDashboard: (params) => {\n return axiosClient.get(`${urlApi.shared.getDashboard}`, { params });\n },\n\n getTagBombotStatistic: (params) => {\n return axiosClient.get(`${urlApi.dashboard.getTagBombotStatistic}`, {\n params\n });\n },\n\n getTagFacebookStatistic: (params) => {\n return axiosClient.get(`${urlApi.dashboard.getTagFacebookStatistic}`, {\n params\n });\n },\n\n getMessageStatistic: (params) => {\n return axiosClient.get(`${urlApi.dashboard.getMessageStatistic}`, {\n params\n });\n },\n\n getCampaignStatistic: (params) => {\n return axiosClient.get(`${urlApi.dashboard.getCampaignStatistic}`, {\n params\n });\n },\n\n getScenarioStatistic: (params) => {\n return axiosClient.get(`${urlApi.dashboard.getScenarioStatistic}`, {\n params\n });\n },\n\n getFanpageStatistic: (params) => {\n return axiosClient.get(`${urlApi.dashboard.getFanpageStatistic}`, {\n params\n });\n },\n\n getCustomerStatistic: (params) => {\n return axiosClient.get(`${urlApi.dashboard.getCustomerStatistic}`, {\n params\n });\n },\n\n getGenAIStatistic: (params) => {\n return axiosClient.get(`${urlApi.dashboard.getGenAIStatistic}`, {\n params\n });\n }\n};\n\nexport default homeApi\n","import { createSlice } from \"@reduxjs/toolkit\";\nimport initialState from \"../../configs/redux/initialState\";\n\nconst homeReducer = createSlice({\n name: \"home\",\n initialState: initialState.homeReducer,\n reducers: {\n verifyNumberPhone: (state, action) => {\n state.verifyNumberPhone = action.payload;\n },\n share: (state, action) => {\n state.share = action.payload;\n },\n dashboard: (state, action) => {\n state.dashboard = action.payload;\n },\n verifyNumberPhoneError: (state, action) => {\n state.verifyNumberPhoneError = action.payload;\n },\n \n }\n});\n\nexport const {\n verifyNumberPhone,\n share,\n dashboard,\n verifyNumberPhoneError\n} = homeReducer.actions;\n\nexport default homeReducer.reducer;\n","import homeApi from \"../../api/homeApi\";\nimport {\n verifyNumberPhone,\n share,\n dashboard,\n verifyNumberPhoneError,\n} from \"./HomeReducer\";\nimport { setUser, setLoading } from \"../App/AppReducer\";\nimport _ from \"lodash\";\nimport { showError } from \"stores/alert/slice.alert\";\n\nexport function updateUser(data, uid) {\n return (dispatch) => {\n dispatch(setLoading(true));\n return homeApi.updateUser(data, uid).then(\n (res) => {\n dispatch(setUser(res));\n dispatch(setLoading(false));\n return res;\n },\n (error) => {\n dispatch(setLoading(false));\n return error;\n }\n );\n };\n}\n\nexport function onVerifyNumberPhone(verify, data, uid) {\n return (dispatch) => {\n dispatch(setLoading(true));\n return dispatch(\n updateUser(\n {\n ...data,\n verify: true,\n },\n uid\n )\n );\n };\n}\n\nexport function onVerifyNumberPhoneVoice(verify, data, uid) {\n const params = {\n phone: verify.phone,\n otp: verify.otp,\n };\n return (dispatch) => {\n dispatch(setLoading(true));\n return homeApi.verifyNumberPhone(params).then(\n (res) => {\n dispatch(setLoading(false));\n dispatch(verifyNumberPhoneError(false));\n\n dispatch(verifyNumberPhone(true));\n return dispatch(updateUser(data, uid));\n },\n () => {\n dispatch(setLoading(false));\n if (verify.otp) {\n dispatch(verifyNumberPhoneError(true));\n }\n dispatch(verifyNumberPhone(false));\n }\n );\n };\n}\n\nexport function onGetOtp(data) {\n const params = {\n phone: data.phone,\n type: data.type,\n };\n return (dispatch) => {\n dispatch(setLoading(true));\n dispatch(verifyNumberPhoneError(false));\n dispatch(setLoading(false));\n return homeApi.getOTP(params).then(\n (res) => {\n dispatch(setLoading(false));\n },\n (error) => {\n dispatch(showError(error.message));\n dispatch(setLoading(false));\n }\n );\n };\n}\n\nexport function onWhatYouNeed() {\n const params = {\n fields: \"user,users,package,history,version,versions,business,province\",\n };\n return (dispatch) => {\n dispatch(setLoading(true));\n return homeApi.getWhatYouNeed(params).then(\n (res) => {\n dispatch(share(res));\n dispatch(setLoading(false));\n },\n (error) => {\n dispatch(setLoading(false));\n }\n );\n };\n}\n\nexport function onDashboard() {\n return (dispatch) => {\n dispatch(setLoading(true));\n return homeApi.getDashboard().then(\n (res) => {\n dispatch(dashboard(res));\n dispatch(setLoading(false));\n },\n (error) => {\n dispatch(setLoading(false));\n }\n );\n };\n}\n","import React, { useMemo } from 'react'\n\nimport { useTranslation } from 'react-i18next'\nimport { Button, MenuItem, Menu } from '@material-ui/core'\nimport TranslateIcon from '@material-ui/icons/Translate'\nimport Flex from 'components/Flex'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { updateUser } from 'views/Home/HomeActions'\nimport { selectUser } from 'views/App/AppSelectors'\n\nconst ChangeLanguage = ({ isUser }) => {\n const [anchorEl, setAnchorEl] = React.useState(null)\n const { i18n } = useTranslation()\n const dispatch = useDispatch()\n const user = useSelector(selectUser)\n\n const handleChangeLanguage = (lng) => {\n handleClose()\n i18n.changeLanguage(lng)\n if (isUser) {\n updateLngUser(lng)\n }\n }\n const currentLanguage = useMemo(() => {\n if (!i18n?.language) return 'Change language'\n switch (i18n.language?.substring(0, 2)) {\n case 'kh':\n return 'ភាសាខ្មែរ'\n case 'vi':\n return 'Tiếng Việt'\n case 'en':\n return 'English'\n default:\n return 'Change language'\n }\n }, [i18n.language])\n\n const updateLngUser = (lng) => {\n dispatch(\n updateUser(\n {\n ...user,\n lang: lng,\n },\n user.id\n )\n )\n }\n\n const onSelectLanguage = (event) => {\n setAnchorEl(event.currentTarget)\n }\n\n const handleClose = () => {\n setAnchorEl(null)\n }\n\n const languages = [\n {\n label: 'Tiếng Việt',\n value: 'vi',\n },\n {\n label: 'English',\n value: 'en',\n },\n {\n label: 'ភាសាខ្មែរ',\n value: 'kh',\n },\n ]\n\n return (\n <>\n \n \n
\n {titlePage}
\n\n handleClickPay()}\n >\n {t('common.btn.upgrade')}\n \n \n {user.avatar ? (\n \n \n handleSettingAccount()}>\n \n \n \n handleVersion()}>\n \n \n \n handleLogOut()}>\n \n \n \n \n\n \n
\n \n {user && user.name}
\n \n\n
\n \n {t('version.title')}
\n![\"icon\"](\"/image/vn.png\")
\n )}\n {lng.label === 'English' && (\n ![\"icon\"](\"/image/usa.png\")
\n )}\n {lng.label === 'ភាសាខ្មែរ' && (\n ![\"icon\"](\"/image/cam.png\")
\n )}\n {lng.label}\n \n ))}\n \n \n )\n}\n\nexport default ChangeLanguage\n","import React, { useMemo } from \"react\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport SidebarContainer from \"../Sidebar\";\nimport HeaderContainer from \"../Header\";\nimport cn from \"classnames\";\nimport { useTranslation } from \"react-i18next\";\nimport ChangeLanguage from \"components/ChangeLanguage\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {},\n sidebar: {\n width: 250,\n float: \"left\",\n height: \"100vh\",\n overflowY: \"auto\",\n boxShadow: \"0 0 2rem 0 rgba(136,152,170,.15)!important\",\n background: \"white\",\n position: \"fixed\",\n top: 0,\n left: 0,\n transition: \"width 0.3s ease, left 0.3s ease\",\n },\n sidebarDehaze: {\n width: 60,\n float: \"left\",\n height: \"100vh\",\n overflowY: \"auto\",\n boxShadow: \"0 0 2rem 0 rgba(136,152,170,.15)!important\",\n background: \"white\",\n position: \"fixed\",\n top: 0,\n left: 0,\n zIndex: 10,\n transition: \"width 0.3s ease, left 0.3s ease\",\n },\n contentRight: {\n width: \"calc(100% - 250px)\",\n height: \"calc(100vh - 70px - 73px)\",\n overflow: \"auto\",\n float: \"right\",\n paddingLeft: 15,\n paddingRight: 15,\n marginTop: 76,\n transition: \"width 0.3s ease\",\n },\n contentRightDehaze: {\n width: \"calc(100% - 60px)\",\n height: \"calc(100vh - 70px - 73px)\",\n overflow: \"auto\",\n float: \"right\",\n paddingLeft: 15,\n paddingRight: 15,\n marginTop: 76,\n transition: \"width 0.3s ease\",\n },\n footer: {\n height: 70,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n paddingRight: 15,\n paddingLeft: 15,\n color: \"#05ae34\",\n bottom: 0,\n width: \"calc(100% - 280px)\",\n background: \"#F6F9FC\",\n position: \"fixed\",\n zIndex: 99,\n transition: \"width 0.3s ease\",\n },\n footerDehaze: {\n height: 70,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n paddingRight: 15,\n paddingLeft: 15,\n color: \"#05ae34\",\n bottom: 0,\n width: \"calc(100% - 90px)\", // Width when sidebar is collapsed\n background: \"#F6F9FC\",\n position: \"fixed\",\n zIndex: 99,\n transition: \"width 0.3s ease\",\n },\n right: {\n display: \"flex\",\n alignItems: \"center\",\n \"& a\": {\n marginLeft: 15,\n color: \"#05ae34\",\n textDecoration: \"none\",\n },\n },\n}));\n\nconst MainLayoutView = (props) => {\n const { children, dehaze } = props;\n const classes = useStyles();\n const { t, i18n } = useTranslation();\n const configPage = useMemo(() => {\n if (i18n.language?.substring(0, 2) === \"kh\") {\n return {\n page_id: \"102636822160260\",\n app_id: \"4087907114572119\",\n };\n } else {\n return {\n page_id: \"103634791744953\",\n app_id: \"4087907114572119\",\n };\n }\n }, [i18n.language]);\n\n return (\n \n \n
\n \n );\n};\n\nMainLayoutView.propTypes = {};\n\nMainLayoutView.defaultProps = {};\n\nexport default MainLayoutView;","import {\n FormControl,\n Tooltip,\n IconButton,\n makeStyles,\n} from \"@material-ui/core\";\nimport Flex from \"components/Flex\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport OtpInput from \"react-otp-input\";\nimport FormDialog from \"../../../../components/FormDialog\";\nimport ArrowBackIcon from \"@material-ui/icons/ArrowBack\";\nimport styles from \"../../styles.module.scss\";\nimport firebase from \"firebase\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport ButtonLoading from \"components/ButtonLoading\";\nimport { Skeleton } from \"@material-ui/lab\";\nimport { verifyNumberPhoneError } from \"views/Home/HomeReducer\";\nimport { selectErrorVerifyPhone } from \"views/Home/HomeSelectors\";\nimport homeApi from \"api/homeApi\";\nimport { setLoading } from \"views/App/AppReducer\";\nimport { showError } from \"stores/alert/slice.alert\";\nimport smsExample from \"../../../../assets/images/code.jpg\";\nimport { useTranslation } from \"react-i18next\";\n\nconst useStyles = makeStyles((theme) => ({\n account: {\n display: \"flex\",\n alignItems: \"center\",\n background: \"#f0f0f0\",\n padding: 15,\n },\n right: {\n marginLeft: 15,\n },\n wrapAccount: {\n padding: 15,\n },\n form: {\n width: \"100%\",\n },\n number: {\n fontWeight: \"bold\",\n },\n errorCode: {\n margin: \"10px 0px 0px 10px\",\n fontSize: \"14px\",\n color: \"red\",\n textAlign: \"center\",\n },\n}));\n\nlet appVerifier,\n interval,\n secondRef = 60;\n\nconst DialogVerifyPhone = ({\n phone,\n handleBackVerify,\n handleVerify,\n handleVerifyOtpVoice,\n}) => {\n const classes = useStyles();\n const dispatch = useDispatch();\n const [isShowInputVerify, setIsShowInputVerify] = useState(false);\n const [code, setCode] = useState(\"\");\n const [loadingVerify, setLoadingVerify] = useState(false);\n const [loadingCaptcha, setLoadingCaptcha] = useState(true);\n const [seconds, setSeconds] = useState(60);\n const [captchaArea, setCaptchaArea] = useState(null);\n const errorVerify = useSelector(selectErrorVerifyPhone);\n const [typeReceive, setTypeReceive] = useState(1);\n const { i18n, t } = useTranslation();\n\n const onRefChange = useCallback((node) => {\n setCaptchaArea(node);\n }, []);\n useEffect(() => {\n if (captchaArea) {\n appVerifier = new firebase.auth.RecaptchaVerifier(captchaArea, {\n size: 200,\n callback: () => {\n onSignInSubmit();\n },\n });\n appVerifier.render().then(() => {\n setLoadingCaptcha(false);\n });\n }\n }, [captchaArea]);\n\n const onSignInSubmit = () => {\n receiveCode();\n };\n\n const receiveCode = () => {\n setErrorVerify(false);\n firebase\n .auth()\n .signInWithPhoneNumber(phone, appVerifier)\n .then((confirmationResult) => {\n console.log('receiveCode confirmationResult', confirmationResult);\n window.confirmationResult = confirmationResult;\n\n interval = setInterval(() => {\n if (secondRef > 0) {\n setSeconds((old) => old - 1);\n secondRef -= 1;\n } else {\n clearInterval(interval);\n }\n }, 1000);\n setIsShowInputVerify(true);\n })\n .catch((err) => {\n console.log('receiveCode err', err);\n dispatch(showError(err.message));\n });\n };\n\n const onConfirm = () => {\n setErrorVerify(false);\n if (typeReceive === 1) {\n setLoadingVerify(true);\n window.confirmationResult\n .confirm(code)\n .then(() => {\n handleVerify(code);\n })\n .catch((error) => {\n console.log(error);\n setErrorVerify(true);\n })\n .then(() => {\n setLoadingVerify(false);\n });\n } else {\n handleVerifyOtpVoice(code);\n }\n };\n\n const resetCount = () => {\n if (interval) clearInterval(interval);\n setSeconds(60);\n secondRef = 60;\n };\n\n const resendCode = () => {\n if (seconds > 0) return;\n setCode(\"\");\n setTypeReceive(1);\n resetCount();\n setLoadingCaptcha(true);\n setIsShowInputVerify(false);\n };\n\n const handleCodeResquestVoice = async () => {\n // if (seconds > 0) return;\n setCode(\"\");\n setTypeReceive(2);\n const params = { phone: phone, type: 2 };\n try {\n dispatch(setLoading(true));\n await homeApi.getOTP(params);\n dispatch(setLoading(false));\n resetCount();\n\n interval = setInterval(() => {\n if (secondRef > 0) {\n setSeconds((old) => old - 1);\n secondRef -= 1;\n } else {\n clearInterval(interval);\n }\n }, 1000);\n } catch (error) {\n dispatch(showError(error.message));\n dispatch(setLoading(false));\n }\n };\n\n const setErrorVerify = (isError) => {\n dispatch(verifyNumberPhoneError(isError));\n };\n\n return (\n \n
\n {children}
\n \n
\n \n © 2021{\" \"}\n \n @Bombot.vn\n \n
\n \n \n {t(\"footer.affiliate\")}\n \n \n {t(\"footer.policy\")}\n \n \n {t(\"footer.private_policy\")}\n \n
\n \n \n \n <>\n {typeReceive === 1 && (\n setCode(otp)}\n numInputs={typeReceive === 1 ? 6 : 4}\n separator={-}\n />\n {errorVerify && (\n onConfirm()}\n type=\"button\"\n isLoading={loadingVerify}\n />\n\n \n \n ) : (\n \n {loadingCaptcha && (\n \n )}\n
\n \n \n handleBackVerify()}\n color=\"secondary\"\n className=\"btn_icon\"\n >\n \n
\n {isShowInputVerify ? (\n \n
\n {t(\"phone_verification.title\")}
\n\n\n {t(\"phone_verification.description\")}{\" \"}\n {phone}\n
\n\n 
\n
\n )}\n \n {t(\"phone_verification.sample_sms\")}\n
\n{t(\"noti.otp\")}
\n )}\n\n {t(\"phone_verification.not_received_otp\")}\n
\n\n
\n \n \n \n \n
\n );\n};\n\nexport default Chart;\n","import {\n Card,\n CardContent,\n IconButton,\n makeStyles,\n Tooltip\n} from '@material-ui/core'\nimport moment from 'moment'\nimport { useCallback, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { Link } from 'react-router-dom'\nimport Flex from '../../../../components/Flex'\nimport { pathKeys } from '../../../../constants'\nimport styles from '../../styles.module.scss'\nimport { DashboardEmpty } from '../Chart'\n\nconst useStyles = makeStyles((theme) => ({\n copyButton: {\n padding: 4,\n \"&:hover\": {\n backgroundColor: \"rgba(0, 0, 0, 0.04)\"\n }\n },\n card: {\n borderRadius: \"12px\" \n }\n}));\n\nconst AccountInfo = ({ data }) => {\n const { t } = useTranslation()\n\n const [copied, setCopied] = useState(false)\n\n const classes = useStyles()\n\n const handleCopy = useCallback((id) => {\n navigator.clipboard.writeText(id).then(() => {\n setCopied(true)\n setTimeout(() => setCopied(false), 2000)\n })\n }, [])\n\n return (\n {t(\"overall.campaign_and_message.title\")}
\n {!data?.campaign?.totalCampaigns ? (\n\n \n \n \n \n \n \n {t(\"common.btn.campaign\")}\n \n \n
\n )}\n \n
\n \n
\n \n \n \n \n {t(\"overall.account_info.title\")}\n \n {!data?.info?.id ? (\n \n
\n \n \n {t(\"account_management.label\")}\n \n \n \n )}\n \n \n
\n );\n}\n\nexport default AccountInfo\n","import React from 'react'\nimport { Controller } from 'react-hook-form'\nimport TextField from '@material-ui/core/TextField'\nimport { makeStyles } from '@material-ui/core/styles'\nimport {\n DateRangeDelimiter,\n LocalizationProvider,\n DesktopDateRangePicker,\n} from '@material-ui/pickers'\nimport DateFnsUtils from '@material-ui/pickers/adapter/date-fns'\nimport Flex from 'components/Flex'\nimport { useTranslation } from 'react-i18next'\nimport DateRangeIcon from '@material-ui/icons/DateRange'\n\n// Sử dụng makeStyles để tạo styles\nconst useStyles = makeStyles((theme) => ({\n inputPicker: {\n width: '110px',\n '& input': {\n fontSize: '12px', // Kích thước chữ trong input\n padding: '8px', // Giảm padding\n },\n },\n delimiter: {\n fontSize: '12px',\n margin: '0 8px',\n },\n adornedEnd: {\n paddingRight: 0, // Customize the right padding\n },\n}))\n\nconst BaseDatePicker2 = ({\n control,\n name,\n defaultValue,\n rules,\n styles,\n ...rest\n}) => {\n const { t } = useTranslation()\n const classes = useStyles()\n\n return (\n | {t(\"overall.account_info.account_id\")}: | \n\n | \n
|---|---|
| {t(\"overall.account_info.type\")}: | \n\n {t(\"overall.account_info.\" + data?.info?.type)}\n | \n
| {t(\"overall.account_info.giftPoint\")}: | \n{data?.info?.giftPoint} | \n
| {t(\"overall.account_info.expire_date\")}: | \n\n {data?.info?.expiredAt\n ? data?.info?.expiredAt > \"2100-12-24T05:46:34.304+00:00\"\n ? t(\"overall.account_info.lifetime\")\n : moment(data.info.expiredAt).format(\"DD/MM/YYYY HH:mm\")\n : \"-\"}\n | \n
| {t(\"overall.account_info.linked_account\")}: | \n{data?.info?.numRef} | \n
| {t(\"overall.account_info.amount_customer\")}: | \n{data?.customer?.totalCus} | \n
| {t(\"overall.account_info.amount_fanpage\")}: | \n{data?.fanpage?.totalPage} | \n
\n \n {title}\n \n \n {number}\n \n \n {percent}\n \n
\n \n )\n}\n\nexport default LegendItem\n","import React, { useEffect, useMemo, useState } from 'react'\nimport homeApi from '../../../../api/homeApi'\nimport { Card } from '@material-ui/core'\nimport { Doughnut } from 'react-chartjs-2'\nimport BaseDatePicker2 from '../../../../components/Form/BaseDatePicker2'\nimport { useForm } from 'react-hook-form'\nimport moment from 'moment'\nimport Flex from '../../../../components/Flex'\nimport { useTranslation } from 'react-i18next'\nimport LegendItem from './LegendItem'\n\nconst CampaignChart = ({ style, ...res }) => {\n const [data, setData] = useState(null)\n const { t } = useTranslation()\n\n const { control, watch } = useForm({\n defaultValues: {\n date: [moment().subtract(30, 'days').toDate(), new Date()],\n },\n })\n\n useEffect(() => {\n ;(async () => {\n try {\n const date = watch('date')\n const res = await homeApi.getCampaignStatistic({\n from: moment(date[0]).format('YYYY-MM-DD'),\n to: moment(date[1]).format('YYYY-MM-DD'),\n })\n setData(res)\n } catch (error) {\n console.log(error)\n }\n })()\n }, [watch('date')])\n\n const totalCampaigns = data?.totalCampaigns || 0\n\n const dataCampaigns = useMemo(() => {\n return {\n labels: [\n `${t(\"dashboard.campaign_stopped\")}`, // Stopped\n `${t(\"dashboard.campaign_not_started\")}`, // Not Started\n `${t(\"dashboard.campaign_completed\")}`, // Completed\n `${t(\"dashboard.campaign_running\")}` // Running\n ],\n datasets: [\n {\n data: [\n data?.totalCampaignCancel || 0, // Stopped\n data?.totalCampaignPending || 0, // Not Started\n data?.totalCampaignDone || 0, // Completed\n data?.totalCampaignRunning || 0 // Running\n ],\n backgroundColor: [\"#ff6f91\", \"#ffb74d\", \"#81c784\", \"#64b5f6\"],\n hoverBackgroundColor: [\"#ff3d67\", \"#ff9800\", \"#4caf50\", \"#1e88e5\"]\n }\n ]\n };\n }, [data, t]);\n\n const doughnutOptions = {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n display: false,\n },\n },\n }\n\n const textOverlay = {\n id: 'text-center',\n beforeDatasetsDraw(chart) {\n const { ctx } = chart\n ctx.save()\n ctx.font = '600 14px sans-serif'\n ctx.fillStyle = '#000000de'\n ctx.textAlign = 'center'\n ctx.textBaseline = 'middle'\n ctx.fillText(\n `${totalCampaigns}`,\n chart.getDatasetMeta(0).data[0].x,\n chart.getDatasetMeta(0).data[0].y\n )\n },\n }\n\n const isEmpty = totalCampaigns === 0\n\n return (\n \n {t(\"dashboard.campaign\")}\n
\n\n\n {t(\"dashboard.no_data\")}\n
\n \n ) : (\n\n
\n\n \n {t('dashboard.customer')}\n
\n\n\n {t('dashboard.no_data')}\n
\n \n ) : (\n\n
\n\n \n {t(\"common.btn.filter\")}\n
\n\n
\n \n\n \n \n
\n\n \n {customerStatistic.totalCus}\n
\n\n \n
\n\n \n \n
\n\n \n \n {customerStatistic.percentMale?.toFixed(2)}%\n \n
\n {t(\"dashboard.male\")}
\n\n {customerStatistic.totalMale}\n
\n\n \n
\n\n \n \n {customerStatistic.percentFemale?.toFixed(2)}%\n \n
\n {t(\"dashboard.female\")}
\n\n {customerStatistic.totalFemale}\n
\n\n \n
\n \n \n {customerStatistic.percentOther?.toFixed(2)}%\n \n
\n {t(\"dashboard.other\")}
\n\n {customerStatistic.totalOther}\n
\n\n \n
\n \n \n
\n \n \n
\n\n \n \n {customerStatistic.percentHavePhone?.toFixed(2)}%\n \n
\n \n {t(\"dashboard.have_phone_number\")}\n
\n\n {customerStatistic.totalHavePhone}\n
\n\n \n
\n \n \n {customerStatistic.percentNotHavePhone?.toFixed(2)}%\n \n
\n \n {t(\"dashboard.not_have_phone_number\")}\n
\n\n {customerStatistic.totalNotHavePhone}\n
\n\n \n
\n \n \n \n \n \n \n );\n}\n\nexport default CustomerOverview\n","import React, { useEffect, useMemo, useState } from \"react\";\nimport homeApi from \"../../../../api/homeApi\";\nimport { Card } from \"@material-ui/core\";\nimport { Bar } from \"react-chartjs-2\";\nimport { useTranslation } from \"react-i18next\";\n\nconst FanpageChart = ({ style, ...res }) => {\n const { t } = useTranslation();\n const [data, setData] = useState(null);\n\n useEffect(() => {\n (async () => {\n try {\n const res = await homeApi.getFanpageStatistic({\n page: 0,\n size: 15,\n });\n setData(res);\n } catch (error) {\n console.log(error);\n }\n })();\n }, []);\n\n const chartCustomerPerFanpages = useMemo(() => {\n return {\n labels: data?.content?.map((item) => item.name) || [], // Directly using fanpage names\n datasets: [\n {\n label: t(\"dashboard.customer_count\"),\n data: data?.content?.map((item) => item.totalCus) || [], // Directly using customer counts\n backgroundColor: \"rgba(75, 192, 192, 0.6)\",\n borderColor: \"rgba(75, 192, 192, 1)\",\n borderWidth: 1\n }\n ]\n };\n }, [data, t]);\n\n const barOptions = {\n indexAxis: \"y\", // This makes the bar chart horizontal\n responsive: true,\n plugins: {\n legend: {\n position: \"top\"\n },\n title: {\n display: true\n }\n },\n scales: {\n x: {\n beginAtZero: true,\n ticks: {\n callback: function (value) {\n return Math.floor(value); // Round down to the nearest whole number\n }\n }\n }\n }\n };\n\n return (\n {t(\"dashboard.customer_fanpage\")}
\n{t('dashboard.no_data')}
\n\n {t('dashboard.message')}\n
\n\n\n {t('dashboard.no_data')}\n
\n \n ) : (\n\n
\n\n \n {t('dashboard.scenario')}\n
\n\n\n {t('dashboard.no_data')}\n
\n \n ) : (\n\n
\n\n {t('noti.loading')}
// Or another loading message\n }\n\n return (\n - \n
- {t(\"account_management.service_information.helloText\")} {name} \n
- {t(\"account_management.service_information.finishText\")} {point<250?1:(point<500?3:6)} {t(\"account_management.service_information.monthText\")} {t(\"account_management.service_information.feeText\")} {t(\"account_management.service_information.usedText\")} \n
- {t(\"account_management.service_information.pointCost\")} {point}{t(\"account_management.service_information.receiverText\")} \n
- \n \n \n \n \n
\n
\n \n {data[step]?.title}\n
\n\n \n \n
\n \n );\n}\n","import React, { useState } from \"react\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport IMAGES from \"../../../../../src/images\";\n\nconst MessengerButton = ({ name, point, handleClose }) => {\n const useStyles = makeStyles((theme) => ({\n root: {\n },\n\n //\n chatBox: {\n position: \"fixed\",\n bottom: \"80px\",\n right: \"27px\",\n zIndex: 100,\n\n \"& div\": {\n width: \"54px\",\n marginBottom: \"8px\",\n cursor: \"pointer\",\n \"& .image\": {\n \"& img\": {\n width: \"100%\",\n filter: \"drop-shadow(0px 3px 6px rgb(0 0 0 / 0.25))\",\n }\n }\n }\n },\n\n btnItem: {\n position: \"relative\",\n '& .text-content': {\n display: 'none',\n width: \"fit-content\",\n padding: \"10px\",\n backgroundColor: \"white\",\n position: \"absolute\",\n right: \"120%\",\n top: \"50%\",\n borderRadius: \"6px\",\n boxShadow: \"0 1.93465px 7.73859px rgba(0,0,0,.15)\",\n transform: \"translateY(-50%)\",\n },\n '&:hover .text-content': {\n display: 'block',\n },\n },\n closeBtn: {\n transition: \"0.5s linear\",\n \"&:hover\": {\n transform: \"rotate(360deg)\",\n transition: \"0.5s linear\",\n }\n },\n }));\n const classes = useStyles();\n const [isOpen, setIsOpen] = useState(false);\n\n const onOpen = () => {\n setIsOpen(!isOpen);\n\n };\n return (\n \n \n {tourConfig.map((label, index) => {\n const stepProps = {};\n const labelProps = {};\n if (isStepSkipped(index)) {\n stepProps.completed = false;\n }\n return (\n \n \n );\n })}\n \n
\n \n \n \n {t(\"update.back\")}\n \n\n \n {activeStep === tourConfig.length - 1\n ? t(\"common.btn.close\")\n : t(\"update.next\")}\n \n \n
\n \n\n {/* */}\n {isOpen &&\n
\n\n );\n};\nexport default MessengerButton;","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { makeStyles } from '@material-ui/core/styles'\nimport {\n HourglassEmpty,\n PlayCircleFilled,\n PauseCircleFilled,\n CheckCircle,\n} from '@material-ui/icons'\n\n// Styles\nconst useStyles = makeStyles((theme) => ({\n base: {\n padding: theme.spacing(1.5), // Padding mặc định\n borderRadius: '4px',\n margin: theme.spacing(1, 0),\n display: 'flex',\n alignItems: 'center',\n },\n pending: {\n color: 'blue',\n backgroundColor: 'rgba(33, 150, 243, 0.2)', // Xanh dương nhạt\n },\n running: {\n color: 'teal',\n backgroundColor: 'rgba(0, 128, 128, 0.2)', // Màu xanh ngọc nhạt\n },\n cancel: {\n color: 'orange',\n backgroundColor: 'rgba(255, 152, 0, 0.2)', // Cam nhạt\n },\n done: {\n color: 'darkgreen',\n backgroundColor: 'rgba(34, 139, 34, 0.2)', // Xanh lá đậm nhạt\n },\n small: {\n padding: theme.spacing(1), // Padding nhỏ\n fontSize: '12px !important',\n '& $icon': {\n fontSize: '16px !important',\n },\n },\n medium: {\n padding: '8px 12px', // Padding vừa\n fontSize: '14px !important',\n '& $icon': {\n fontSize: '20px !important',\n },\n },\n large: {\n padding: theme.spacing(2), // Padding lớn\n fontSize: '16px !important',\n '& $icon': {\n fontSize: '24px !important',\n },\n },\n icon: {\n marginRight: theme.spacing(1),\n },\n textsmall: {\n fontSize: '12px !important',\n },\n textmedium: {\n fontSize: '14px !important',\n },\n textlarge: {\n fontSize: '16px !important',\n },\n}))\n\n// Component\nconst CampaignStatusLabel = ({\n message,\n type,\n size = 'medium',\n icon,\n ...res\n}) => {\n const classes = useStyles()\n\n // Map trạng thái sang class\n let statusClass\n let IconComponent\n\n if (type === 'pending') {\n statusClass = classes.pending\n IconComponent = HourglassEmpty\n } else if (type === 'running') {\n statusClass = classes.running\n IconComponent = PlayCircleFilled\n } else if (type === 'cancel') {\n statusClass = classes.cancel\n IconComponent = PauseCircleFilled\n } else if (type === 'done') {\n statusClass = classes.done\n IconComponent = CheckCircle\n }\n\n // Kết hợp class của kích thước\n const sizeClass = classes[size] || classes.medium\n\n let textStatusClass = classes[`text${size}`]\n\n return IconComponent ? (\n \n\n
\n }\n\n {\n !isOpen &&\n \n
\n\n \n \n 
\n \n
\n \n hotro.bombot.vn\n
\n \n
\n \n\n \n \n 
\n \n
\n \n 028.7101.0134\n
\n \n
\n\n \n \n 
\n \n
\n \n mailto:hotro@bombot.vn\n
\n \n
\n \n \n \n 
\n \n
\n onOpen()}>\n
\n \n 
\n
\n onOpen()}>\n
\n }\n\n \n 
\n
\n {message}
\n \n ) : null\n}\n\n// PropTypes\nCampaignStatusLabel.propTypes = {\n message: PropTypes.string.isRequired,\n type: PropTypes.oneOf(['pending', 'running', 'cancel', 'done']).isRequired,\n size: PropTypes.oneOf(['small', 'medium', 'large']),\n}\n\nCampaignStatusLabel.defaultProps = {\n size: 'medium',\n}\n\n// Export trạng thái\nexport const campaignStatusDir = {\n pending: 'Initial',\n running: 'Running',\n cancel: 'Paused',\n done: 'Completed',\n}\n\nexport default CampaignStatusLabel\n","import { CircularProgress } from '@material-ui/core'\nimport React from 'react'\n\nconst LoadingWrapper = ({ children, isOpen, style, ...res }) => {\n return (\n\n {children}\n {isOpen && (\n \n
\n )}\n \n )\n}\n\nexport default LoadingWrapper\n","import React from 'react'\n\nconst CoppyIcon = ({ height, width }) => {\n return (\n \n )\n}\n\nexport default CoppyIcon\n","import axiosClient from './axiosClient'\nimport urlApi from './url'\n\nconst baseUrl = `${process.env.REACT_APP_API_URL}`\n\nconst scenarioApi = {\n get: (params) => {\n return axiosClient.get(`${baseUrl}api/v1.0/scenario`, { params })\n },\n deleteScenario: (payload) => {\n return axiosClient\n .delete(\n `${baseUrl}api/v1.0/campaign/${payload?.id}/scenario/${payload?.scenarioId}`,\n {\n data: payload,\n }\n )\n .then((res) => res.data)\n },\n}\n\nexport default scenarioApi\n","import React from 'react'\nimport ButtonComponent from '../Button'\nimport { useTranslation } from 'react-i18next'\nimport FormDialog from '../FormDialog'\nimport cn from 'classnames'\nimport { makeStyles } from '@material-ui/core'\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n padding: '15px 15px 15px 0px',\n },\n paper: {\n width: '100%',\n marginBottom: theme.spacing(2),\n },\n table: {\n minWidth: '100%',\n },\n visuallyHidden: {\n border: 0,\n clip: 'rect(0 0 0 0)',\n height: 1,\n margin: -1,\n overflow: 'hidden',\n padding: 0,\n position: 'absolute',\n top: 20,\n width: 1,\n },\n noData: {\n color: 'rgba(0,0,0,.5)',\n fontWeight: 'bold',\n textAlign: 'center',\n paddingBottom: 15,\n },\n buttonIEA: {\n width: '100%',\n textAlign: 'right',\n marginRight: '15px',\n paddingRight: '15px',\n '& button': {\n marginLeft: 15,\n },\n },\n avatar: {\n margin: '0px auto',\n },\n titlePopup: {\n textAlign: 'center',\n color: '#05AE34',\n },\n wrapButtonPopup: {\n textAlign: 'center',\n },\n}))\n\nconst ConfirmModal = ({ open, handleSubmit, handleCancel, title }) => {\n const { t } = useTranslation()\n const classes = useStyles()\n\n return (\n \n
\n \n {title}\n
\n\n
\n \n \n \n {/* \n \n
\n \n {scenarioList?.content?.length === 0 && (\n \n \n {t(\"update.no_data\")}\n \n
\n )}\n \n {/* {isPagination && scenarioList?.content?.length > 0 && (\n <>\n \n \n \n handleSubmit()}\n />\n \n \n
\n \n {isVerify && (\n \n
\n \n {user.avatar ? (\n
\n \n
\n \n {t('form_collect_info.title')}{' '}\n {user.name}!\n
{' '}\n{t('form_collect_info.description')}.
\n{t('form_collect_info.helper')}
\n{t('form_collect_info.helper_2')}
\n\n handleChange('name', event.target.value)}\n />\n {!_.isEmpty(nameError) && (\n
\n {nameError}
\n )}\n\n handleChange('phone', phone)}\n />\n {/* handleChange(\"phone\", event.target.value)}\n /> */}\n {!_.isEmpty(phoneError) && (\n
\n {phoneError}
\n )}\n\n handleChange('email', event.target.value)}\n />\n {!_.isEmpty(emailError) && (\n
\n {emailError}
\n )}\n\n option?.name || ''}\n onChange={(e, value) => {\n handleChange('business', value)\n }}\n renderInput={(params) => (\n
\n\n \n \n handleChange('company', event.target.value)\n }\n />\n
\n \n handleChange('country', value)}\n renderInput={(params) => (\n
\n {country && country !== 'Other' && (\n {countryError}
\n )}\n\n option || ''}\n style={{ marginTop: 10 }}\n value={province || ''}\n onChange={(e, value) => handleChange('province', value)}\n renderInput={(params) => (\n
\n )}\n\n {proviceError}
\n )} */}\n\n \n
\n {isVisibleIntroduce && (\n \n
\n\n {t('overall.statistic')}
\n\n
\n \n
\n\n {t('overall.lastest_campaign.title')}
\n\n\n
\n \n
\n \n
\n {t('overall.lastest_scenario.title')}
\n\n
\n \n \n \n {/* \n \n \n \n
\n\n */}\n {/* handleClickButtonFacebook()}\n icon={\n \n
*/}\n {t(\"login.login\")}
*/}\n {/*\n \n \n handleChange(\"email\", event.target.value)\n }\n startAdornment={\n \n \n }\n />\n \n handleChange(\"password\", event.target.value)\n }\n startAdornment={\n \n \n }\n />\n handleForgotPasswordPopup()}\n >\n {t(\"login.forgot_password.title\")}\n \n\n handleSubmit()}\n />\n handleClickButtonFacebook()}\n icon={\n \n \n
\n {t(\"login.welcom_to\")}
\n\n {t(\"login.bulk_messaging_application\")}\n
\n{t(\"login.or\")}
\n{t(\"noti.login_error\")}
\n )}\n\n
\n \n \n );\n};\n\nLoginView.propTypes = {};\n\nLoginView.defaultProps = {};\n\nexport default LoginView;\n","import LoginPage from \"./LoginContainer\";\n\nexport default LoginPage;\n","import { connect } from \"react-redux\";\nimport { withRouter } from \"react-router-dom\";\nimport LoginView from \"./LoginView\";\nimport * as actionsLogin from \"./LoginActions\";\nimport * as selectorsLogin from \"./LoginSelectors\";\nimport * as selectorsApp from \"../App/AppSelectors\";\nconst mapStateToProps = (state) => {\n return {\n getAccount: selectorsLogin.getAccount(state),\n statusLogined: selectorsLogin.statusLogined(state),\n forgotPassword: selectorsLogin.forgotPassword(state),\n loading: selectorsApp.loading(state),\n };\n};\n\nconst mapDispatchToProps = (dispatch) => ({\n login: (ref) => dispatch(actionsLogin.login(ref)),\n handleSubmitEmail: (params) => dispatch(actionsLogin.onSubmitEmail(params)),\n onSubmitForgotPassword: (params) =>\n dispatch(actionsLogin.onSubmitForgotPassword(params)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(LoginView);\n","import React, { useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { pathKeys } from \"../constants\";\nimport _ from \"lodash\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport { useHistory } from \"react-router-dom\";\nimport Table from \"@material-ui/core/Table\";\nimport TableBody from \"@material-ui/core/TableBody\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableContainer from \"@material-ui/core/TableContainer\";\nimport TableHead from \"@material-ui/core/TableHead\";\nimport TablePagination from \"@material-ui/core/TablePagination\";\nimport TableRow from \"@material-ui/core/TableRow\";\nimport TableSortLabel from \"@material-ui/core/TableSortLabel\";\nimport Paper from \"@material-ui/core/Paper\";\nimport cn from \"classnames\";\nimport SearchIcon from \"@material-ui/icons/Search\";\nimport InputAdornment from \"@material-ui/core/InputAdornment\";\nimport moment from \"moment\";\nimport types from \"../constants/types\";\nimport ButtonComponent from \"./Button\";\nimport Pagination from \"@material-ui/lab/Pagination\";\nimport Flex from \"./Flex\";\nimport { Button, TextField } from \"@material-ui/core\";\nimport Tour from \"reactour\";\nimport {\n getIsGuideByKey,\n GUIDE_TYPE_ENUM,\n setIsGuideByKey\n} from \"utils/helper\";\nimport { useSelector } from \"react-redux\";\nimport { selectGuideListByKey } from \"stores/config/config.selector\";\nimport { useTranslation } from \"react-i18next\";\nconst headCells = [\n {\n id: \"ord_number_Fanpage\",\n numeric: true,\n disablePadding: true,\n label: \"fanpage_management.list.ord_number\"\n },\n {\n id: \"nameFanpage\",\n numeric: true,\n disablePadding: true,\n label: \"fanpage_management.list.page_name\"\n },\n {\n id: \"id\",\n numeric: true,\n disablePadding: true,\n label: \"fanpage_management.list.page_id\"\n },\n {\n id: \"time\",\n numeric: true,\n disablePadding: true,\n label: \"fanpage_management.list.last_update_time\"\n },\n {\n id: \"totalCus\",\n numeric: true,\n disablePadding: true,\n label: \"fanpage_management.list.amount_customer\"\n }\n // { id: \"actions\", numeric: true, disablePadding: true, label: \"Thao tác\" },\n];\n\nfunction EnhancedTableHead(props) {\n const { classes } = props;\n const { t } = useTranslation();\n return (\n \n {t(\"login.forgot_password.title\")}\n
\n\n {t(\"login.forgot_password.description\")}\n
\n {forgotPassword != null && !forgotPassword && (\n{t(\"noti.email_not_exist\")}
\n )}\n {forgotPassword != null && forgotPassword && (\n{t(\"noti.reset_password\")}
\n )}\n\n \n handleChangeForgotPassword(\n \"emailForgotPassword\",\n event.target.value\n )\n }\n startAdornment={\n \n \n }\n />\n handleForgotPassword()}\n />\n
\n \n \n \n setSearch(event.target.value)}\n placeholder={t(\"fanpage_management.search\")}\n style={{ width: 500 }}\n onKeyDown={onKeyDown}\n InputProps={{\n startAdornment: (\n \n \n )\n }}\n />\n \n {t(\"common.btn.search\")}\n \n }\n backgroundColor=\"#05AE34\"\n color=\"white\"\n handleClickButton={() => handleSubmitSearch()}\n style={{\n minWidth: \"fit-content\",\n padding: \"6px 16px\"\n }}\n />\n \n {/* handleSearch(\"search\", event.target.value)}\n startAdornment={\n \n \n }\n /> */}\n \n
\n \n \n
\n \n \n \n \n \n {(rows || []).map((row, index) => {\n return (\n handleClickFanpage(row.id)}\n >\n \n {page * rowsPerPage + index + 1}\n \n {row.name} \n {row.id} \n \n {moment(row.updatedAt).format(\"DD/MM/YYYY HH:mm\")}\n \n {row.totalCus} \n {/* \n handleSubmitOpenExtension()}\n />\n */}\n \n );\n })}\n \n \n \n {rows.length == 0 && (\n handleChange(page - 1)}\n />\n \n )}\n \n {/* {rows.length > 0 && (\n
\n \n );\n}\n\nEnhancedTable.propTypes = {\n data: PropTypes.array,\n search: PropTypes.string,\n isSearch: PropTypes.bool,\n isPagination: PropTypes.bool,\n getData: PropTypes.func,\n handleGetData: PropTypes.func\n};\n\nEnhancedTable.defaultProps = {\n isPagination: true,\n isSearch: true,\n handleGetData: (f) => f,\n getData: (f) => f,\n data: [],\n search: null\n};\n","import React, { useEffect, useState } from \"react\";\nimport MainLayout from \"../MainLayout\";\nimport ListFanpageComponent from \"../../components/ListFanpage\";\nimport Loading from \"../../components/Loading\";\nimport MessengerButton from \"./../Home/items/MessengerButton\";\n\nconst FanpageView = (props) => {\n const { getFanpage, fanpage, user, loading } = props;\n const [data, setData] = useState([]);\n\n useEffect(() => {\n setData(fanpage);\n }, [fanpage]);\n\n const handleGetData = (params) => {\n getFanpage(params);\n };\n\n return (\n {t(\"update.no_data\")}
\n )}\n {isPagination && rows.length > 0 && (\n <>\n\n \n
\n )\n}\n\nexport default ModalTagsBombot\n","import React from \"react\";\nimport { Controller } from \"react-hook-form\";\nimport { MenuItem, Select } from \"@material-ui/core\";\nimport { useTranslation } from \"react-i18next\";\n\nconst BaseSelect = ({\n errors,\n name,\n options,\n defaultValue,\n control,\n style,\n ...props\n}) => {\n const { t } = useTranslation(0);\n return (\n <>\n {errors[name]?.message}
\n )}\n \n );\n};\n\nexport default BaseSelect;\n","export const FIELD_OPTIONS = [\n {\n label: 'customer_management.list.uid',\n value: 'uid',\n },\n {\n label: 'customer_management.list.facebook_name',\n value: 'name',\n },\n {\n label: 'customer_management.list.gender',\n value: 'gender',\n },\n {\n label: 'customer_management.list.phone',\n value: 'phone',\n },\n {\n label: 'customer_management.list.facebook_tag',\n value: 'fbTags',\n },\n {\n label: 'customer_management.list.bombot_tag',\n value: 'bombotTags',\n },\n {\n label: 'customer_management.list.last_update_time',\n value: 'lastSyncTime',\n },\n {\n label: 'customer_management.list.last_inbox_time',\n value: 'lastInboxTime',\n },\n {\n label: 'customer_management.list.last_customer_inbox_time',\n value: 'lastCustomerInboxTime',\n },\n]\nexport const OPERATION_OPTION_NAME = [\n {\n label: 'customer_management.customer_filter.contain',\n value: 'contain',\n },\n {\n label: 'customer_management.customer_filter.not_contain',\n value: 'ncontain',\n },\n]\n\nexport const OPERATION_TAGS_OPTION = [\n {\n label: 'update.customer_filter.in',\n value: 'in',\n },\n {\n label: 'update.customer_filter.notin',\n value: 'notin',\n },\n]\n\nexport const GENDER_OPTION = [\n {\n label: 'customer_management.customer_filter.is',\n value: '==',\n },\n {\n label: 'customer_management.customer_filter.is_not',\n value: '!=',\n },\n]\nexport const OPERATION_OPTION = [...GENDER_OPTION, ...OPERATION_TAGS_OPTION]\n\nexport const OPERATION_TIME_OPTION = [\n {\n label: 'customer_management.customer_filter.range',\n value: 'bw',\n },\n]\n\nexport const OPERATION_PHONE_OPTION = [\n {\n label: 'customer_management.customer_filter.is',\n value: 'exists',\n },\n]\n\nexport const GENDER_OPTIONS = [\n {\n label: 'update.gender.male',\n value: 'MALE',\n },\n {\n label: 'update.gender.female',\n value: 'FEMALE',\n },\n {\n label: 'update.gender.other',\n value: 'NEUTER',\n },\n]\n\nexport const PHONE_OPTIONS = [\n {\n label: 'update.customer_filter.in',\n value: 'true',\n },\n {\n label: 'update.customer_filter.notin',\n value: 'false',\n },\n]\n","import React from \"react\";\nimport { TextField } from \"@material-ui/core\";\nimport { Controller } from \"react-hook-form\";\nimport { useTranslation } from \"react-i18next\";\n\nconst BaseInput = ({ errors, name, ...props }) => {\n const { t } = useTranslation();\n return (\n <>\n{errors[name]?.message}
\n )}\n \n );\n};\n\nexport default BaseInput;\n","import { TextField } from \"@material-ui/core\";\nimport Autocomplete from \"@material-ui/lab/Autocomplete\";\nimport React from \"react\";\nimport { Controller } from \"react-hook-form\";\nimport { useTranslation } from \"react-i18next\";\n\nconst BaseAutocomplete = ({\n errors,\n name,\n options,\n defaultValue,\n control,\n inputStyle = {},\n ...props\n}) => {\n const { t } = useTranslation();\n return (\n{value.label}
;\n }}\n value={field.value || []}\n renderInput={(params) => (\n\n
\n \n \n \n {type === 'bombotTag' ? 'Bombot Tags' : 'Facebook Tags'}\n \n\n \n
\n \n {type === 'bombotTag' && (\n \n Save\n \n )}\n \n
\n \n {t(\"update.no_data\")}
\n )}\n \n\n {bombotTagData?.content?.length > 0 && (\n{t(\"common.btn.delete\")}
\n{t(\"update.no_data\")}
\n )}\n \n\n {!_.isNull(selectedTag) && (\n{t('common.btn.delete')}
\n\n \n handleChangeCampaign(\"titleCampaign\", event.target.value)\n }\n />\n
\n \n \n {t(\"customer_management.create_campaign.title\")}\n
\n{error}
\n\n handleSubmitCreateCampaign()}\n />\n
\n \n
\n \n {isSearch && (\n \n {t(\"customer_management.tags.list_title\")}\n
\n\n {(selectedModalTags || []).map((item, idx) => {\n let obj = _.find(\n (fanpageSelected && fanpageSelected.bombotTags) || [],\n function (obj) {\n return obj.id === item;\n }\n );\n if (!_.isEmpty(obj)) {\n return (\n
\n \n \n {obj.name}\n \n
\n );\n }\n })}\n \n \n \n setSearch(event.target.value)}\n placeholder={t(\"customer_management.search\")}\n style={{ maxWidth: 500, width: \"100%\" }}\n id=\"input-with-icon-textfield\"\n className=\"bg-white\"\n onKeyDown={onKeyDown}\n InputProps={{\n startAdornment: (\n \n \n )\n }}\n />\n \n {t(\"common.btn.search\")}\n \n }\n backgroundColor=\"#05AE34\"\n color=\"white\"\n handleClickButton={() => handleSearch(\"search\", search)}\n style={{\n minWidth: \"fit-content\",\n padding: \"6px 16px\"\n }}\n />\n \n \n {/* \n \n }\n backgroundColor=\"#05AE34\"\n color=\"white\"\n disabled={_.isEmpty(fanpageSelected) ? true : false}\n handleClickButton={() => setIsOpenModalManageTag(true)}\n /> */}\n \n \n }\n backgroundColor=\"#05AE34\"\n color=\"white\"\n disabled={_.isEmpty(fanpageSelected) ? true : false}\n handleClickButton={() => handleSubmitFilter()}\n />\n \n
\n )}\n\n {t('common.btn.manage_tag')}
\n{t(\"common.btn.filter_customer\")}
\n{t(\"common.btn.update_info\")}
\n \n }\n backgroundColor=\"#05AE34\"\n color=\"white\"\n disabled={_.isEmpty(fanpageSelected) ? true : false}\n handleClickButton={handleClick}\n />\n \n \n\n {t(\"customer_management.list.amount_customer\")}:\n \n {!isCheckedAllPage && isUseCheckedAllPage\n ? 0\n : totalNumber <= 0\n ? 0\n : totalNumber}\n \n \n /{parseInt(data && data.totalElements)}\n \n
\n \n )}\n\n \n \n
\n \n {rows.length == 0 && (\n \n
\n\n {!_.isNull(selectedTags) && (\n {t(\"update.no_data\")}
\n )}\n {isPagination && rows.length > 0 && (\n\n \n \n handleOpenExtention()}\n disabled={_.isEmpty(fanpageSelected) ? true : false}\n /> */}\n \n setIsOpenModalManageTag(false)}\n getData={() => {\n return getData({\n page: page,\n size: rowsPerPage,\n search: `pageId==${fanpageSelected.id};${\n search && `uid|name==` + search\n }`,\n sort: \"lastInboxTime,desc\"\n });\n }}\n getFanpage={getFanpage}\n fanpageSelected={fanpageSelected}\n />\n )}\n
\n \n {fileNameSelected}\n
\nĐã import khách hàng!
\n\n
\n Thành công: {data?.updateSuccessful || 0}
\nThất bại: {data?.updateFailed || 0}
\n\n \n {visibleItems}\n
\n \n \n )\n}\n\nexport default VirtualScroll\n","import React, { useEffect, useMemo, useRef, useState } from 'react'\nimport _ from 'lodash'\nimport { useHistory } from 'react-router-dom'\nimport clsx from 'clsx'\nimport { makeStyles } from '@material-ui/core/styles'\nimport MainLayout from '../MainLayout'\nimport FormControl from '@material-ui/core/FormControl'\nimport GetAppIcon from '@material-ui/icons/GetApp'\nimport ListCustomerComponent from '../../components/ListCustomer'\nimport FormDialog from '../../components/FormDialog'\nimport ButtonComponent from '../../components/Button'\nimport Grid from '@material-ui/core/Grid'\nimport TextField from '@material-ui/core/TextField'\nimport RadioGroup from '@material-ui/core/RadioGroup'\nimport Radio from '@material-ui/core/Radio'\nimport FormLabel from '@material-ui/core/FormLabel'\nimport { Button, Chip } from '@material-ui/core'\nimport SearchIcon from '@material-ui/icons/Search'\nimport FormControlLabel from '@material-ui/core/FormControlLabel'\nimport FormGroup from '@material-ui/core/FormGroup'\nimport Checkbox from '@material-ui/core/Checkbox'\nimport types from '../../constants/types'\nimport moment from 'moment'\nimport IMAGES from '../../images'\nimport Autocomplete from '@material-ui/lab/Autocomplete'\nimport DeleteIcon from '@material-ui/icons/Delete'\nimport Loading from '../../components/Loading'\nimport { getFanpageDetail } from 'views/Fanpage/FanpageActions'\nimport { useDispatch, useSelector } from 'react-redux'\nimport Flex from 'components/Flex'\nimport BaseSelectFile from 'components/BaseSelectFile'\nimport cn from 'classnames'\nimport { selectFilterCus, selectImportResult } from './CustomerSelectors'\nimport Tour from 'reactour'\nimport { selectSearchUidName } from './CustomerSelectors'\nimport { getIsGuideByKey, GUIDE_TYPE_ENUM, setIsGuideByKey } from 'utils/helper'\nimport { selectGuideListByKey } from 'stores/config/config.selector'\nimport ModalResultImport from './item/ModalResultImport'\nimport { useTranslation } from 'react-i18next'\nimport MessengerButton from './../Home/items/MessengerButton'\nimport TagPreviewItem from '../../components/TagPreviewItem'\nimport { colorDir1, getRandomTag } from '../../components/TagPreviewModal'\nimport VirtualScroll from '../../components/VirtualScroll'\n\nconst useStyles = makeStyles((theme) => ({\n wrapSelectFanpage: {\n marginTop: 30,\n // width: 'calc(100% - 15px)',\n width: '100%',\n '& h4': {\n marginBottom: 5,\n color: '#05AE34',\n fontSize: 16,\n },\n },\n wrapSelect: {\n width: '100%',\n marginTop: '12px',\n marginBottom: '12px',\n },\n select: {\n // margin: \"5px 0px !important\",\n },\n wrapSelectLabel: {\n zIndex: 1,\n fontSize: 16,\n paddingLeft: 10,\n marginTop: 7,\n '&.MuiFormLabel-filled': {\n display: 'none !important',\n },\n '&.Mui-focused': {\n display: 'none !important',\n },\n },\n\n root: {\n '&:hover': {\n backgroundColor: 'transparent',\n },\n },\n icon: {\n borderRadius: '50%',\n width: 16,\n height: 16,\n boxShadow:\n 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',\n backgroundColor: '#f5f8fa',\n backgroundImage:\n 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',\n '$root.Mui-focusVisible &': {\n outline: '2px auto rgba(19,124,189,.6)',\n outlineOffset: 2,\n },\n 'input:hover ~ &': {\n backgroundColor: '#ebf1f5',\n },\n 'input:disabled ~ &': {\n boxShadow: 'none',\n background: 'rgba(206,217,224,.5)',\n },\n },\n checkedIcon: {\n backgroundColor: '#05AE34',\n backgroundImage:\n 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',\n '&:before': {\n display: 'block',\n width: 16,\n height: 16,\n backgroundImage: 'radial-gradient(#fff,#fff 28%,transparent 32%)',\n content: '\"\"',\n },\n 'input:hover ~ &': {\n backgroundColor: '#106ba3',\n },\n },\n wrapRadioGroup: {\n display: 'inline-block',\n flexWrap: 'inherit',\n flexDirection: 'inherit',\n marginLeft: 15,\n fontSize: '16px',\n marginTop: 10,\n },\n // wrapperPopup: {\n // \"& h4\": {\n // color: \"#05AE34\",\n // paddingLeft: 15,\n // },\n // \"& .MuiInputLabel-filled.MuiInputLabel-shrink\": {\n // top: \"-25px\",\n // color: \"rgba(0, 0, 0, 0.87) !important\",\n // width: \"100%\",\n // fontSize: \"16px\",\n // transform: \"inherit\",\n // },\n // \"& .MuiInputLabel-filled\": {\n // top: \"-25px\",\n // color: \"rgba(0, 0, 0, 0.87) !important\",\n // width: \"100%\",\n // fontSize: \"16px\",\n // transform: \"inherit\",\n // },\n // \"& .MuiFilledInput-input\": {\n // padding: \"10px 12px 10px 2px !important\",\n // },\n // },\n // radioGroup: {\n // flexWrap: \"inherit\",\n // flexDirection: \"inherit\",\n // \"& label\": {\n // float: \"left\",\n // },\n // },\n // textField: {\n // width: \"100%\",\n // padding: \"0px 15px\",\n // margin: \"35px 0px 10px 0px\",\n // \"& .MuiInputLabel-filled\": {\n // marginLeft: 15,\n // },\n // },\n formControlCheckbox: {\n margin: '15px 0px 0px 15px',\n width: 'calc(100% - 30px)',\n '& .MuiFormLabel-root': {\n marginBottom: 5,\n fontSize: 16,\n },\n '& .MuiFormControlLabel-label': {\n fontSize: 16,\n },\n '& .MuiCheckbox-colorSecondary.Mui-checked': {\n color: '#05AE34',\n },\n '& .MuiFormLabel-root': {\n color: 'rgba(0, 0, 0, 0.87)',\n fontSize: 16,\n },\n },\n wrapButton: {\n width: '100%',\n display: 'inline-block',\n },\n button: {\n display: 'inline-block',\n width: 130,\n float: 'right',\n margin: '30px 15px 30px 0px',\n },\n title: {\n color: '#05AE34',\n },\n wrapButtonImport: {\n textAlign: 'right',\n },\n wrapBox: {\n padding: '15px 42px 30px 15px',\n },\n buttonChange: {\n margin: '0px 0px 0px 10px',\n },\n importInput: {\n margin: '15px 0px 30px 0px',\n },\n inboxDate: {\n left: 15,\n top: -5,\n width: 200,\n marginTop: 25,\n // marginwrapperPopupwrapperPopupTop: 25,\n '& label': {\n color: 'rgba(0, 0, 0, 0.87) !important',\n fontSize: '16px',\n transform: 'inherit',\n top: '-10px',\n width: '100%',\n },\n '& .MuiInputBase-formControl': {\n width: 140,\n },\n '& $root': {\n width: 120,\n },\n '& .MuiInputBase-input': {\n width: 120,\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n opacity: 0,\n cursor: 'pointer',\n boxSizing: 'border-box',\n },\n '& .MuiInputBase-input::-webkit-calendar-picker-indicator': {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n margin: 0,\n padding: 0,\n cursor: 'pointer',\n },\n },\n inboxTime: {\n left: 15,\n top: -5,\n width: 200,\n marginTop: 25,\n // marginwrapperPopupwrapperPopupTop: 25,\n '& label': {\n color: 'rgba(0, 0, 0, 0.87) !important',\n fontSize: '16px',\n transform: 'inherit',\n top: '-10px',\n width: '100%',\n },\n '& .MuiInputBase-formControl': {\n width: 140,\n },\n '& $root': {\n width: 120,\n },\n },\n inboxTimeLast: {\n right: 30,\n position: 'absolute',\n top: -5,\n marginTop: 25,\n // marginwrapperPopupwrapperPopupTop: 25,\n '& label': {\n color: 'rgba(0, 0, 0, 0.87) !important',\n fontSize: '16px',\n transform: 'inherit',\n top: '-10px',\n width: '100%',\n },\n '& .MuiInputBase-formControl': {\n width: 140,\n },\n '& $root': {\n width: 120,\n },\n\n '& .MuiInputBase-input::-webkit-calendar-picker-indicator': {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n margin: 0,\n padding: 0,\n cursor: 'pointer',\n },\n },\n wrapperLoading: {\n height: 100,\n position: 'relative',\n textAlign: 'center',\n top: -20,\n '& img': {\n height: 100,\n position: 'absolute',\n top: 0,\n left: 'calc(50% - 50px)',\n width: 100,\n },\n '& p': {\n position: 'absolute',\n bottom: -11,\n textAlign: 'center',\n width: '100%',\n },\n },\n noData: {\n marginTop: 15,\n marginBottom: 10,\n color: 'rgba(0, 0, 0, 0.38)',\n },\n addTag: {\n width: '100%',\n marginBottom: 15,\n },\n wrapCheckbox: {\n position: 'relative',\n '&:hover': {\n '& $delete': {\n display: 'inline-block',\n },\n },\n },\n delete: {\n display: 'none',\n position: 'absolute',\n right: '-8%',\n top: '50%',\n transform: 'translateY(-50%)',\n '&:hover': {\n cursor: 'pointer',\n },\n },\n wrapButtonPopup: {\n textAlign: 'right',\n paddingBottom: 30,\n paddingRight: 15,\n },\n tagFormGroup: {\n // height: '200px',\n // overflowY: 'auto',\n // overflowX: 'hidden',\n display: 'initial',\n marginTop: '15px',\n '& .MuiFormControlLabel-root': {\n width: '100%',\n },\n },\n fromToIcon: {\n position: 'absolute',\n top: '45px',\n left: '180px',\n },\n}))\n\nfunction StyledRadio(props) {\n const classes = useStyles()\n\n return (\n \n \n handleChange('addTagBombot', event.target.value)\n }\n />\n {messageAddTag && (\n
\n \n {t('customer_management.add_bombot_tag.insert_tag_name')}\n
\n{messageAddTag}
\n )}\n\n handleSubmitAddTag()}\n disabled={loadingImport ? true : false}\n />\n
\n \n {/*
\n \n \n Xác nhân\n
*/}\n\n {t('update.delete_tag.desc')}?\n
\n\n handleCloseConfirmDeleteTag()}\n />\n handleConfirmDeleteTag()}\n />\n
\n \n \n \n \n }\n backgroundColor=\"#FF8000\"\n color=\"white\"\n handleClickButton={() => handleDownloadExcel()}\n />\n \n \n handleChange('identification', data)}\n >\n \n {loadingImport && (\n \n {message}\n \n )}\n
\n \n \n {t('customer_management.import_customer.title')}\n
\n{t('common.btn.download_template')}
\n\n {t('customer_management.import_customer.description')}\n
\n\n
\n {/* \n {t('customer_management.import_customer.choose_option')}\n
\n\n \n
\n )}\n {!loadingImport && message && (\n {t('update.import_customer.loading')}
\n\n handleCloseImport()}\n disabled={loadingImport ? true : false}\n />\n handleSubmitImportExcel()}\n disabled={loadingImport ? true : false}\n />\n
\n \n \n \n {/* thanh chọn fanpage */}\n {\n setSelectedPageId(data?.id || null)\n handleChangeFanpage('fanpage', data)\n }}\n getOptionLabel={(option) => option?.name || ''}\n value={fanpageSelected || null}\n renderInput={(params) => {\n console.log('params ==>', params)\n return (\n {\n console.log(\n 'event.target.value ==>',\n event.target.value\n )\n }\n // handleChangeFanpage('fanpage', event.target.value)\n }\n />\n )\n }}\n />\n\n {/* button quet khach hang */}\n
\n\n {/* Fanpage
\n\n\n \n
\n \n \n \n handleChange('uid', event.target.value)}\n />\n \n handleChange('nameFacebook', event.target.value)\n }\n />\n \n \n \n \n {/* gioi tinh */}\n \n \n
\n \n {`${\n isActions == types.ACTIONS.DETAIL\n ? t('update.cus_info.title_detail')\n : isActions == types.ACTIONS.FILTER\n ? t('customer_management.customer_filter.title')\n : t('update.cus_info.title_edit')\n }`}
\n\n {t('customer_management.list.gender')}\n
\n \n \n handleCheckedTagBombot(item)\n }\n name={item.id}\n style={{ paddingTop: 0, paddingBottom: 0 }}\n disabled={\n isActions == types.ACTIONS.DETAIL\n ? true\n : false\n }\n />\n }\n label={\n handleDeteleTag(item)}\n >\n
\n )\n }),\n ]}\n visibleItemsLength={50}\n containerHeight={'200px'}\n />\n \n handleCheckedTagBombot(item)}\n name={item.id}\n style={{ paddingTop: 0, paddingBottom: 0 }}\n disabled={\n isActions == types.ACTIONS.DETAIL\n ? true\n : false\n }\n />\n }\n label={\n handleDeteleTag(item)}\n >\n
\n )\n })}\n \n \n (e.target.style.backgroundColor = '#f0f0f0')\n }\n onMouseLeave={(e) =>\n (e.target.style.backgroundColor = 'white')\n }\n onClick={() => handleOpenAddTag()}\n >\n {t('update.action.add_tag')}\n \n
\n )}\n \n \n \n {t('dashboard.sync_to_fanpage_not_supported')}\n \n
\n\n \n \n {value != null && moment(value).format('DD/MM/YYYY')}\n
\n {t(\"common.btn.sort\")}
\n \n }\n backgroundColor=\"#05AE34\"\n color=\"white\"\n handleClickButton={handleToggleSortModal}\n style={{\n minWidth: \"fit-content\",\n padding: \"6px 16px\",\n background: \"#05AE34\"\n }}\n />\n\n {openSortModal && (\n{t(\"campaign_management.name\")}
\n\n {/* name: a-z */}\n\n \n (e.currentTarget.style.backgroundColor = \"#E1E1E1FF\")\n }\n onMouseLeave={(e) =>\n (e.currentTarget.style.backgroundColor =\n sortNameOrder === \"name,asc\" ? \"#d8fcd2\" : \"#fff\")\n }\n onClick={() => handleSortName(\"name,asc\")}\n className=\"\"\n style={{\n display: \"flex\",\n justifyContent: \"start\",\n alignItems: \"center\",\n width: \"100%\",\n color: \"#333\",\n backgroundColor:\n sortNameOrder === \"name,asc\" ? \"#d8fcd2\" : \"#fff\"\n }}\n >\n \n
\n\n A - Z
\n \n \n\n {/* name: z-a */}\n \n \n (e.currentTarget.style.backgroundColor = \"#E1E1E1FF\")\n }\n onMouseLeave={(e) =>\n (e.currentTarget.style.backgroundColor =\n sortNameOrder === \"name,desc\" ? \"#d8fcd2\" : \"#fff\")\n }\n onClick={() => handleSortName(\"name,desc\")}\n style={{\n display: \"flex\",\n justifyContent: \"start\",\n alignItems: \"center\",\n width: \"100%\",\n color: \"#333\",\n backgroundColor:\n sortNameOrder === \"name,desc\" ? \"#d8fcd2\" : \"#fff\"\n }}\n >\n \n
\n\n Z - A
\n \n \n\n {t(\"campaign_management.time\")}
\n\n {/* newest-oldest */}\n\n \n (e.currentTarget.style.backgroundColor = \"#E1E1E1FF\")\n }\n onMouseLeave={(e) =>\n (e.currentTarget.style.backgroundColor =\n sortDateRangeOrder === \"createdAt,desc\"\n ? \"#d8fcd2\"\n : \"#fff\")\n }\n onClick={() => handleSortDateRange(\"createdAt,desc\")}\n className=\"\"\n style={{\n display: \"flex\",\n justifyContent: \"start\",\n alignItems: \"center\",\n width: \"100%\",\n color: \"#333\",\n backgroundColor:\n sortDateRangeOrder === \"createdAt,desc\"\n ? \"#d8fcd2\"\n : \"#fff\"\n }}\n >\n \n
\n \n \n {t(\"campaign_management.newest_oldest\")}\n \n
\n \n \n\n {/* oldest-newest */}\n \n \n (e.currentTarget.style.backgroundColor = \"#E1E1E1FF\")\n }\n onMouseLeave={(e) =>\n (e.currentTarget.style.backgroundColor =\n sortDateRangeOrder === \"createdAt,asc\"\n ? \"#d8fcd2\"\n : \"#fff\")\n }\n onClick={() => handleSortDateRange(\"createdAt,asc\")}\n className=\"\"\n style={{\n display: \"flex\",\n justifyContent: \"start\",\n alignItems: \"center\",\n width: \"100%\",\n color: \"#333\",\n backgroundColor:\n sortDateRangeOrder === \"createdAt,asc\"\n ? \"#d8fcd2\"\n : \"#fff\"\n }}\n >\n \n
\n \n {\" \"}\n \n {t(\"campaign_management.oldest_newest\")}\n \n
\n \n \n\n {t(\"campaign_management.date_range\")}
\n{t(\"campaign_management.status.title\")}
\n */}\n setIsOpen(true)}\n >\n {isOpen && (\n setIsOpen(false)}\n style={{\n position: \"absolute\",\n top: \"100%\",\n left: 0,\n zIndex: 3,\n width: \"100%\",\n backgroundColor: \"white\",\n border: \"1px solid #D1D5DB\",\n borderRadius: \"0.375rem\",\n boxShadow: \"0 1px 2px rgba(0, 0, 0, 0.1)\",\n marginTop: \"4px\"\n }}\n >\n
\n {t(\"campaign_management.status.all\")}\n \n\n {dataStatus.map((status) => (\n \n {/* Checkbox for \"All\" option */}\n handleSelect(\"all\")}\n >\n \n {selectedStatus.length === dataStatus.length && (\n \n
\n )}\n {t(\"update.no_data\")}
\n )} */}\n {/* {isPagination && rows.length > 0 && ( */}\n\n \n \n \n \n {(rows || []).map((row, index) => {\n return (\n \n \n {moment(row.updatedAt).format(\"DD/MM/YYYY HH:mm\")}\n \n {row.id} \n {row.name} \n {row.amount} \n {row.method} \n \n {_.upperCase(row.status) == _.upperCase(types.STATUS.DONE)\n ? \"Hoàn thành\"\n : _.upperCase(row.status) ==\n _.upperCase(types.STATUS.PENDING)\n ? \"Chưa chạy\"\n : \"Đang chạy\"}\n \n \n );\n })}\n \n \n \n {rows.length == 0 && (\n \n {/* {rows.length > 0 && (\n
\n );\n}\n","import React, { useEffect, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport { makeStyles } from '@material-ui/core/styles'\nimport _ from 'lodash'\nimport {\n Table,\n TableBody,\n TableCell,\n TableContainer,\n TableHead,\n TableRow,\n TableSortLabel,\n Paper,\n Avatar,\n FormControlLabel,\n Switch,\n} from '@material-ui/core'\nimport { Button, Tooltip, Snackbar, Alert } from '@mui/material'\nimport moment from 'moment'\nimport cn from 'classnames'\nimport ButtonComponent from './Button'\nimport FormDialog from './FormDialog'\nimport { useTranslation } from 'react-i18next'\nimport { BiTransfer } from 'react-icons/bi'\n\nconst headCells = [\n {\n id: 'avatar',\n numeric: true,\n disablePadding: true,\n label: 'account_management.linked_account.avatar',\n },\n {\n id: 'accountName',\n numeric: true,\n disablePadding: true,\n label: 'account_management.linked_account.name',\n },\n {\n id: 'sdt',\n numeric: true,\n disablePadding: true,\n label: 'account_management.linked_account.phone',\n },\n {\n id: 'email',\n numeric: true,\n disablePadding: true,\n label: 'account_management.linked_account.email',\n },\n {\n id: 'lastTime',\n numeric: true,\n disablePadding: true,\n label: 'account_management.linked_account.last_logged_in',\n },\n {\n id: 'account_type',\n numeric: true,\n disablePadding: true,\n label: 'account_management.linked_account.type',\n },\n {\n id: 'action',\n numeric: true,\n disablePadding: true,\n label: 'account_management.linked_account.action',\n },\n]\n\nfunction EnhancedTableHead(props) {\n const { t } = useTranslation()\n return (\n {t(\"update.no_data\")}
\n )}\n {/*\n \n \n \n \n {(rows || []).map((row, index) => {\n return (\n \n \n {row.avatar ? (\n \n {row.name} \n {row.phone} \n {row.email} \n \n {moment(row.lastLogin).format(\"DD/MM/YYYY HH:mm\")}\n \n \n {row.usedWithUserId\n ? t(\"overall.account_info.linked_account\")\n : t(\"overall.account_info.main_account\")}\n \n \n {row.usedWithUserId ? (\n \n handleSubmitUnlink(row)}\n />\n\n {!user.usedWithUserId && (\n \n
\n }\n className=\"btn--rounder\"\n backgroundColor=\"#05ae34\"\n color=\"white\"\n style={{\n height: \"32px\",\n padding: \"6px 16px\",\n minWidth: \"40px\" // Width nhỏ hơn cho button icon\n }}\n handleClickButton={() => {\n setTransferedId(row.id);\n handleOpenTransferConfirm(true);\n }}\n />\n )}\n \n ) : (\n {t(\"update.no_data\")}
\n )}\n \n \n\n\n \n \n \n {t(\"common.btn.add_account\")}\n \n \n \n\n \n {t(\"account_management.service_information.transfer_main_account\")}\n \n
\n\n \n
\n \n {t(\"account_management.linked_account.unlink\")}\n
\n\n
\n - \n
- {t(\"account_management.tab_policy_point.specialProgram\")} “{t(\"account_management.tab_policy_point.getMoreFree\")}” {t(\"account_management.tab_policy_point.whoHaveBeen\")} \n
- ✊ {t(\"account_management.tab_policy_point.haveAnOppor\")} \n
- 💎 {t(\"account_management.tab_policy_point.missions\")} \n
- 🎁 {t(\"account_management.tab_policy_point.getMoreTime\")} \n
- {t(\"account_management.tab_policy_point.scope\")}: \n
- {t(\"account_management.tab_policy_point.including\")} \n
- {t(\"account_management.tab_policy_point.specialNote\")}: \n
- {t(\"account_management.tab_policy_point.notAllowed\")} \n
- {t(\"account_management.tab_policy_point.rules\")}: \n
- {t(\"account_management.tab_policy_point.pointEarned\")} \n
- {t(\"account_management.tab_policy_point.thePoints\")} \n \n
\n
\n
\n
| {t(\"account_management.tab_policy_point.task\")} | \n{t(\"account_management.tab_policy_point.rewardPoints\")} | \n
|---|---|
| \n {t(\"account_management.tab_policy_point.dailyLogin\")}\n \n {t(\"account_management.tab_policy_point.logInbombot\")} | \n {t(\"account_management.tab_policy_point.pointDay\")} | \n
| \n {t(\"account_management.tab_policy_point.reviewBombot\")}\n \n {t(\"account_management.tab_policy_point.postARenew\")}\n \n {t(\"account_management.tab_policy_point.afterPosting\")}\n \n {t(\"account_management.tab_policy_point.afterPosting1\")} \n {t(\"account_management.tab_policy_point.afterPosting2\")}\n | \n {t(\"account_management.tab_policy_point.pointPost\")} | \n
| \n {t(\"account_management.tab_policy_point.spread\")}\n \n {t(\"account_management.tab_policy_point.inviteFriend\")}: https://bombot.vn/?ref={whatYouNeed?.user?.myAffId}\n \n {t(\"account_management.tab_policy_point.scroreIs\")} | \n {t(\"account_management.tab_policy_point.pointSuccessful\")} | \n
| \n {t(\"account_management.tab_policy_point.receiveRewards\")}\n \n {t(\"account_management.tab_policy_point.friendWho\")}:\n https://bombot.vn/?ref={whatYouNeed?.user?.myAffId} | \n \n {t(\"account_management.tab_policy_point.pointPayment\")}\n \n {t(\"account_management.tab_policy_point.comission\")} | \n
{t(\"account_management.service_information.giftPoint\")}: {(redeemPoints && redeemPoints.giftPoint) ? redeemPoints.giftPoint : whatYouNeed?.package?.giftPoint}
\n{t(\"account_management.tab_policy_point.choiseGift\")}
\n\n \n
\n
\n \n
\n \n
\n \n \n \n {updateInfoSuccess && (\n
\n {t(\"account_management.account_information.title\")}
\n\n \n {\n e.stopPropagation();\n handleCopy(user?.id);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000); // Reset \"copied\" after 2 seconds\n }}\n size=\"small\"\n style={{\n marginLeft: \"12px\"\n }}\n >\n
\n \n handleChange(\"name\", event.target.value)}\n />\n {!_.isEmpty(nameError) && (\n
\n {nameError}
\n )}\n\n \n handleChange(\"phone\", event.target.value)\n }\n />\n {!_.isEmpty(phoneError) && (\n
\n {phoneError}
\n )}\n\n \n handleChange(\"email\", event.target.value)\n }\n />\n {!_.isEmpty(emailError) && (\n
\n {emailError}
\n )}\n\n \n handleChange(\"company\", event.target.value)\n }\n />\n
\n {/* \n option?.name || \"\"}\n style={{ marginTop: 0, height: \"auto\" }}\n onChange={(e, value) => handleChange(\"business\", value)}\n value={user_business || []}\n renderInput={(params) => (\n
\n\n {/* value
}\n renderOption={(option, { selected }) => (\n <>\n\n handleChange(\"country\", value)}\n renderInput={(params) => (\n
\n {!_.isEmpty(countryError) && (\n {countryError}
\n )}\n {country && country !== \"Other\" && (\n\n option || \"\"}\n style={{ marginTop: 10 }}\n onChange={(e, value) => handleChange(\"province\", value)}\n value={province || \"\"}\n renderInput={(params) => (\n
\n )}\n {updateInfoSuccess}
\n )}\n {updateInfoError && (\n{updateInfoError}
\n )}\n\n handleSubmitChangeInfo()}\n />\n
\n \n
\n \n
\n {t(\"account_management.service_information.title\")}
\n\n {user.avatar ? (\n \n \n {user?.name?.charAt(0)}\n \n \n )}\n handleOpenChangePassword()}\n >\n {t(\"common.btn.reset_password\")}\n \n handleOpenIsViewPolicyPoint()}\n >\n {t(\"account_management.service_information.privacyPoint\")}\n \n
\n {user.name}
\n\n {t(\"account_management.service_information.giftPoint\")}:{\" \"}\n {whatYouNeed?.package?.giftPoint}\n
\n\n {t(\"account_management.service_information.expire_date\")}:{\" \"}\n \n {moment(\n whatYouNeed &&\n whatYouNeed.package &&\n whatYouNeed.package.expiredAt\n ).format(\"DD/MM/YYYY HH:mm\")}\n \n
\n- \n
- \n \n\n
\n {t(\"account_management.service_information.total_mess\")}\n
\n \n {whatYouNeed &&\n whatYouNeed.package &&\n whatYouNeed.package.totalMes > 1000000000\n ? t(\"account_management.service_information.unlimited\")\n : whatYouNeed &&\n whatYouNeed.package &&\n whatYouNeed.package.totalMes}\n \n \n - \n \n\n
\n {t(\"account_management.service_information.sent_mess\")}\n
\n \n {whatYouNeed &&\n whatYouNeed.package &&\n whatYouNeed.package.totalSent}\n \n \n - \n \n\n
\n {t(\"account_management.service_information.remain_mess\")}\n
\n \n {whatYouNeed &&\n whatYouNeed.package &&\n whatYouNeed.package.type &&\n whatYouNeed.package.totalMes > 1000000000\n ? t(\"account_management.service_information.unlimited\")\n : whatYouNeed &&\n whatYouNeed.package &&\n whatYouNeed.package.totalMes -\n whatYouNeed.package.totalSent}\n \n \n
\n handleSubmitInviteCode()}\n data={whatYouNeed}\n handleUnlink={(item) => handleUnlink(item)}\n messageUnlink={messageUnlink}\n messageInviteError={messageInviteError}\n statusUnlink={unlink}\n user={user}\n handleOpenTransferConfirm={() => setIsShowConfirmTransfer(true)}\n setTransferedId={setTransferedId}\n handleOpenTransfer={() => setIsOpenTransfer(true)}\n />\n
\n {t(\"account_management.linked_account.title\")}
\n\n
\n {t(\"account_management.payment_history.title\")}
\n\n \n {!user.noPwSet && (\n \n handleChangePassword(\"passwordOld\", event.target.value)\n }\n name=\"password\"\n inputProps={{\n type: \"password\",\n autoComplete: \"new-password\"\n }}\n />\n )}\n \n handleChangePassword(\"passwordNew\", event.target.value)\n }\n name=\"passwordNew\"\n inputProps={{\n type: \"password\",\n autoComplete: \"new-password\"\n }}\n />\n \n handleChangePassword(\"passwordNew2\", event.target.value)\n }\n name=\"passwordNew2\"\n inputProps={{\n type: \"password\",\n autoComplete: \"new-password\"\n }}\n />\n \n )}\n
\n \n\n \n {t(\"common.btn.reset_password\")}\n
\n {!isChangePasswordSucss && (\n\n {_.isEmpty(errorPassword) ? (\n isChangePasswordSucss != null && (\n handleClosePoup()}\n />\n handleSubmitChangePassword()}\n />\n
\n \n {isChangePasswordSucss && (\n \n {t(\"noti.change_password\")}\n \n )}\n {!isChangePasswordSucss && (\n \n {t(\"noti.password_invalid\")}\n \n )}\n
\n )\n ) : (\n\n \n {errorPassword}\n \n
\n )}\n\n
\n \n\n {isOpenTransfer && (\n \n {t(\"account_management.linked_account.invite_account.title\")}\n
\n{copySuccess}
\n {inviteCode && inviteCode.code ? (\n\n {t(\n \"account_management.linked_account.invite_account.description\"\n )}\n
\n ) : (\n\n
\n )}\n \n {messageInviteError != \"\" && messageInviteError != null\n ? messageInviteError\n : t(\"noti.limit_account\")}\n
\n\n {inviteCode && inviteCode.code && (\n <>\n copyToClipboard()}\n />\n \n )}\n
\n \n
\n
\n \n \n {t(\"account_management.tab_policy_point.title\")}\n
\n\n
\n handleCloseInviteCodePopup()}\n >\n
\n \n )\n}\n\nInvitePageView.propTypes = {}\n\nInvitePageView.defaultProps = {}\n\nexport default InvitePageView\n","import { createSlice } from \"@reduxjs/toolkit\";\nimport initialState from \"../../configs/redux/initialState\";\n\nconst inviteReducer = createSlice({\n name: \"inviteReducer\",\n initialState: initialState.inviteReducer,\n reducers: {\n \n setConfirmInviteCode: (state, action) => {\n state.confirmInviteCode = action.payload;\n },\n }\n});\n\nexport const {\n setConfirmInviteCode\n} = inviteReducer.actions;\n\nexport default inviteReducer.reducer;\n","// import { useHistory } from \"react-router-dom\";\nimport appApi from \"../../api/appApi\";\nimport { setLoading, setShare, setUser } from \"./AppReducer\";\nimport homeApi from \"api/homeApi\";\n// const history = useHistory();\nexport function onGetUser(uid) {\n return (dispatch) => {\n return appApi.getUser(uid).then(\n (res) => {\n dispatch(setUser(res));\n // history.push(pathKeys.HOME);\n },\n (error) => {\n throw error;\n }\n );\n };\n}\n\nexport function onWhatYouNeed() {\n const params = {\n fields: \"user,users,package,history,version,versions,business,province\",\n };\n return (dispatch) => {\n dispatch(setLoading(true));\n return homeApi.getWhatYouNeed(params).then(\n (res) => {\n dispatch(setShare(res));\n dispatch(setLoading(false));\n },\n (error) => {\n dispatch(setLoading(false));\n }\n );\n };\n}\n","\n\nimport { createSelector } from \"@reduxjs/toolkit\";\nexport const confirmInviteCode = state => state.inviteReducer.confirmInviteCode;\n\n","import InvitePage from \"./InviteContainer\";\n\nexport default InvitePage;\n","import { connect } from \"react-redux\";\nimport { withRouter } from 'react-router-dom';\nimport InvitePageView from \"./InviteView\";\nimport * as actionsInvite from \"./InviteActions\";\nimport * as selectorsApp from \"../App/AppSelectors\";\nimport * as actionsApp from \"../App/AppActions\";\nimport * as actionsLogin from \"../Login/LoginActions\";\nimport * as selectorsInvite from \"./InviteSelectors\";\nconst mapStateToProps = state => {\n return {\n user: selectorsApp.user(state),\n statusConfirmInviteCode: selectorsInvite.confirmInviteCode(state),\n loading: selectorsApp.loading(state),\n };\n};\n\nconst mapDispatchToProps = dispatch => ({\n login: () => dispatch(actionsLogin.login()),\n confirmInviteCode: (params) => dispatch(actionsInvite.confirmInviteCode(params)),\n onGetUser: (uid) => dispatch(actionsApp.onGetUser(uid)),\n});\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(InvitePageView));\n","import inviteApi from \"../../api/inviteApi\";\nimport { setConfirmInviteCode } from \"./InviteReducer\";\nimport { setLoading } from \"../App/AppReducer\";\nimport _ from \"lodash\";\n\nexport function confirmInviteCode(code) {\n return (dispatch) => {\n dispatch(setLoading(true));\n return inviteApi.confirmInvite(code).then(\n (res) => {\n dispatch(setConfirmInviteCode(res));\n dispatch(setLoading(false));\n },\n (error) => {\n dispatch(setConfirmInviteCode(false));\n dispatch(setLoading(false));\n }\n );\n };\n}\n","import { createSlice } from '@reduxjs/toolkit'\nimport AppConfigAPI from 'api/appConfig'\n\nexport const configSlice = createSlice({\n name: 'configs',\n initialState: {\n loading: false,\n error: null,\n guides: null,\n countries: [],\n },\n reducers: {\n startGetGuide: (state) => {\n state.loading = true\n state.error = false\n },\n getGuideSuccess: (state, action) => {\n state.loading = false\n state.guides = action.payload\n },\n getGuideFailed: (state) => {\n state.loading = false\n },\n startGetCountries: (state) => {\n state.loading = true\n state.error = false\n },\n getCountriesSuccess: (state, action) => {\n state.loading = false\n state.countries = action.payload || []\n },\n getCountriesFailed: (state) => {\n state.loading = false\n },\n },\n})\n\nexport const {\n startGetGuide,\n getGuideSuccess,\n getGuideFailed,\n startGetCountries,\n getCountriesSuccess,\n getCountriesFailed,\n} = configSlice.actions\n\nexport const getGuide = (params) => async (dispatch) => {\n try {\n dispatch(startGetGuide())\n const res = await AppConfigAPI.getGuide(params)\n dispatch(getGuideSuccess(res.content?.value))\n } catch (error) {\n dispatch(getGuideFailed(error))\n }\n}\n\nexport const getCountries = (params) => async (dispatch) => {\n try {\n dispatch(startGetCountries())\n const res = await AppConfigAPI.getCountry(params)\n dispatch(getCountriesSuccess(res.content?.value))\n } catch (error) {\n dispatch(getCountriesFailed(error))\n }\n}\n\nexport default configSlice.reducer\n","export const selectAlert = (state) => state.alert\n","import React from \"react\";\nimport Snackbar from \"@material-ui/core/Snackbar\";\nimport MuiAlert from \"@material-ui/lab/Alert\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { selectAlert } from \"stores/alert/selectors.alert\";\nimport { resetAlert } from \"stores/alert/slice.alert\";\n\nfunction Alert(props) {\n return \n handleSubmitButton()}\n />\n
\n \n {t('update.invite')}
\n {!statusConfirmInviteCode && statusConfirmInviteCode != null && (\n{t('update.error_invite')}
\n )}\n\n \n \n {alert?.message}\n \n \n {children}\n
\n );\n};\n\nexport default AlertProvider;\n","export const FirebaseConfig = {\n apiKey: 'AIzaSyAXT7RncitAtPwbTck9UBYtYyY_vxYSS94',\n authDomain: 'bombot-13368.firebaseapp.com',\n projectId: 'bombot-13368',\n storageBucket: 'bombot-13368.appspot.com',\n messagingSenderId: '566498998743',\n appId: '1:566498998743:web:adae2e0623bc157fde3392',\n measurementId: 'G-7227W64HF5',\n}\n\nexport const vapidKey =\n 'BEdVrkl_sB-fT48WQPCNtmAhjrnkjRLOR6jhlcYxcXcEitpRVEQIX2C6rXjAV7xgNzwDsotaW6XZ5mJABCQrNG0'\n","import React, { useEffect } from 'react'\nimport { showError, showSuccess } from '../../stores/alert/slice.alert'\nimport firebase from 'firebase'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { vapidKey } from '../../constants/firebase'\nimport { useHistory } from 'react-router-dom/cjs/react-router-dom.min'\nimport { pathKeys } from '../../constants'\nimport { accountApi } from '../../api/accountApi'\nimport { selectUser } from '../App/AppSelectors'\n\nconst NotiPermission = () => {\n const messaging = firebase.messaging()\n\n const history = useHistory()\n\n const user = useSelector(selectUser)\n\n const dispatch = useDispatch()\n\n const requestForToken = () => {\n return messaging\n .getToken(messaging, {\n vapidKey: vapidKey,\n })\n .then((currentToken) => {\n return currentToken\n })\n }\n\n function getUserIdFromURL() {\n const url = new URL(window.location.href)\n const params = new URLSearchParams(url.search)\n return params.get('userId')\n }\n\n useEffect(() => {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker\n .register('/firebase-messaging-sw.js')\n .then((registration) => {\n return requestForToken()\n })\n .then((notiToken) => {\n const userId = getUserIdFromURL()\n\n if (!userId) return\n\n const payload = {\n userId,\n token: notiToken,\n }\n\n return accountApi.updateNotiPermissionToken(payload)\n })\n .then((res) => {\n dispatch(showSuccess('Get Notification Permision Successfully'))\n\n history.push(pathKeys.HOME)\n })\n .catch((error) => {\n if (\n error.message ===\n \"Failed to execute 'subscribe' on 'PushManager': Subscription failed - no active Service Worker\"\n ) {\n window.location.reload()\n }\n console.error('Service Worker registration failed:', error)\n\n dispatch(showError('Cannot Get Notification Permision Successfully'))\n })\n }\n }, [])\n\n return <>\n}\n\nexport default NotiPermission\n","export const selectLoading = (state) => state.loading.loading\n","import React, { Suspense, useEffect, useState } from 'react'\nimport { Route, Switch, Redirect, useHistory } from 'react-router-dom'\nimport _ from 'lodash'\nimport { pathKeys } from '../../constants'\nimport { withRouter } from 'react-router-dom'\nimport { withStyles } from '@material-ui/core/styles'\nimport { connect, useDispatch, useSelector } from 'react-redux'\nimport Home from '../Home'\nimport Login from '../Login'\nimport Fanpage from '../Fanpage'\nimport Customer from '../Customer'\nimport Scenario from '../Scenario'\nimport Campaign from '../Campaign'\nimport Tag from '../Tag'\nimport SettingAccount from '../SettingAccount'\nimport Invite from '../Invite'\nimport { getCountries, getGuide } from 'stores/config/config.slice'\nimport { isGetGuideData } from 'utils/helper'\nimport firebase from 'firebase'\nimport AlertProvider from 'hook/AlertProvider'\nimport { FirebaseConfig } from 'constants/firebase'\nimport 'utils/i18n'\nimport { onWhatYouNeed } from './AppActions'\nimport i18n from 'i18next'\nimport { selectUser } from './AppSelectors'\nimport { updateUser } from 'views/Home/HomeActions'\nimport { useTranslation } from 'react-i18next'\nimport 'firebase/messaging'\nimport NotiPermission from '../NotiPermission'\nimport Loading from '../../components/Loading'\nimport { selectLoading } from '../../stores/loading/selectors.loading'\n\nif (!firebase.apps.length) {\n firebase.initializeApp(FirebaseConfig)\n}\nfirebase.analytics()\n\nconst styles = (theme) => ({})\n\nconst App = (props) => {\n const { onGetUser, user } = props\n const dispatch = useDispatch()\n const history = useHistory()\n const userApp = useSelector(selectUser)\n const loading = useSelector(selectLoading)\n\n useEffect(() => {\n const uid = localStorage.getItem('id')\n if (uid) dispatch(onWhatYouNeed())\n // localStorage.setItem(\"id\", `2978907629003644`);\n // localStorage.setItem(\n // \"token\",\n // `eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIyOTc4OTA3NjI5MDAzNjQ0IiwiaXNzIjoiYm9tQm90IiwiZXhwIjoxNjMxMDQ1MjU2LCJpYXQiOjE2MzA5NTg4NTZ9.MtUpkmslH-wek_C1IKNLncepdEXscslW18OwmwpH9cQ`\n // );\n }, [])\n\n useEffect(() => {\n if (userApp?.id) {\n if (isGetGuideData() && i18n?.language) {\n dispatch(getGuide({ lang: i18n.language?.substring(0, 2) }))\n }\n dispatch(getCountries({ lang: i18n.language?.substring(0, 2) }))\n dispatch(\n updateUser(\n {\n lang: i18n.language?.substring(0, 2),\n },\n userApp.id\n )\n )\n }\n }, [userApp?.id, i18n.language])\n\n useEffect(() => {\n const uid = localStorage.getItem('id')\n const searchParam = new URLSearchParams(window.location.search)\n const getLang = searchParam.get('lang')\n\n let search = ''\n if (/(vi|en|kh)/g.test(getLang)) {\n i18n.changeLanguage(getLang)\n }\n\n if (uid) {\n onGetUser(uid)\n if (getLang) {\n search = `?lang=${getLang}`\n if (/(vi|en|kh)/g.test(getLang)) {\n dispatch(\n updateUser(\n {\n lang: getLang,\n },\n userApp.id\n )\n )\n }\n }\n } else {\n if (window.location.pathname === pathKeys.NOTI_PERMISSION) {\n return\n }\n\n const getRef = searchParam.get('ref')\n if (getRef) search += `?ref=${getRef}`\n if (getLang) {\n search += `${getRef ? '&' : '?'}lang=${getLang}`\n } else {\n if (userApp?.id) {\n dispatch(\n updateUser(\n {\n lang: i18n.language?.substring(0, 2),\n },\n userApp.id\n )\n )\n }\n }\n if (getRef === 'invite-code') {\n history.push({\n pathname: pathKeys.INVITE,\n search,\n })\n } else if (getRef === 'noti-permission') {\n history.push({\n pathname: pathKeys.NOTI_PERMISSION,\n search,\n })\n } else {\n history.push({\n pathname: pathKeys.LOGIN,\n search,\n })\n }\n }\n }, [onGetUser, userApp?.id])\n\n useEffect(() => {\n // if (i18n.language) {\n // console.log(\"cjhay den deay\");\n // const upgrade_form = document.querySelector(\".b24-form-wrapper\");\n // console.log(\n // \"🚀 ~ file: AppView.js:124 ~ useEffect ~ upgrade_form\",\n // upgrade_form\n // );\n // var script_tag = document.createElement(\"script\");\n // script_tag.type = \"text/javascript\";\n // script_tag.id = \"upgrade_script\";\n // if (upgrade_form) {\n // upgrade_form.remove();\n // }\n // switch (i18n.language?.substr(0, 2)) {\n // case \"vi\": {\n // script_tag.setAttribute(\"data-b24-form\", \"inline/50/d6om7y\");\n // script_tag.setAttribute(\"data-skip-moving\", \"true\");\n // script_tag.text = `(function (w, d, u) {\n // var s = d.createElement('script'); s.async = true; s.src = u + '?' + (Date.now() / 180000 | 0);\n // var h = d.getElementsByTagName('script')[0]; h.parentNode.insertBefore(s, h);\n // })(window, document, 'https://cdn.bitrix24.vn/b10890131/crm/form/loader_50.js');`;\n // document.querySelector(\"#wrapperForm\").appendChild(script_tag);\n // break;\n // }\n // case \"en\": {\n // script_tag.setAttribute(\"data-b24-form\", \"inline/52/zwdewh\");\n // script_tag.setAttribute(\"data-skip-moving\", \"true\");\n // script_tag.text = `(function (w, d, u) {\n // var s = d.createElement('script'); s.async = true; s.src = u + '?' + (Date.now() / 180000 | 0);\n // var h = d.getElementsByTagName('script')[0]; h.parentNode.insertBefore(s, h);\n // })(window, document, 'https://cdn.bitrix24.vn/b10890131/crm/form/loader_52.js');`;\n // document.querySelector(\"#wrapperForm\").appendChild(script_tag);\n // break;\n // }\n // case \"kh\": {\n // var script_tag = document.createElement(\"script\");\n // script_tag.id = \"upgrade_script\";\n // script_tag.type = \"text/javascript\";\n // script_tag.setAttribute(\"data-b24-form\", \"inline/79/4ozc5t\");\n // script_tag.setAttribute(\"data-skip-moving\", \"true\");\n // script_tag.text = `(function (w, d, u) {\n // var s = d.createElement('script'); s.async = true; s.src = u + '?' + (Date.now() / 180000 | 0);\n // var h = d.getElementsByTagName('script')[0]; h.parentNode.insertBefore(s, h);\n // })(window, document, 'https://cdn.bitrix24.vn/b10890131/crm/form/loader_79.js');`;\n // document.querySelector(\"#wrapperForm\").appendChild(script_tag);\n // break;\n // }\n // default:\n // break;\n // }\n // }\n }, [i18n.language])\n\n useEffect(() => {\n if (document.getElementById('wrapperForm')) {\n const uid = localStorage.getItem('id')\n if (document.getElementById('wrapperUserId')) {\n document\n .getElementById('wrapperUserId')\n .append(\n parseHTML(\n `${i18n.t('update.id_bombot')} ${\n uid || (user && user.id)\n }`\n )\n )\n }\n const funcClose = function () {\n document.body.classList.remove('block-upgrade')\n }\n document.getElementById('overlay-upgrade').onclick = funcClose\n }\n }, [user])\n\n const parseHTML = (html) => {\n var t = document.createElement('template')\n t.innerHTML = html\n return t.content.cloneNode(true)\n }\n\n // useEffect(() => {\n // const url_string = window.location.href; //window.location.href\n // const url = new URL(url_string);\n // const ref = url.searchParams.get(\"ref\");\n // const pathname = url.pathname;\n // // if (ref != 'invite-code' && pathname != '/invite-code') {\n // // // if (_.isEmpty(user)) {\n // // // history.push(pathKeys.HOME);\n // // // history.push(pathKeys.LOGIN);\n // // // } else {\n // // // history.push(pathKeys.HOME);\n // // // }\n // // } else {\n // // history.push(pathKeys.INVITE);\n // // }\n // }, [user]);\n\n return (\n <>\n