\r\n \r\n {renderContent()}\r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default AccountActive;","import axios from \"axios\";\r\nimport { getApiHeaderNotTime, getApiHeaderNotTimeForm } from \"../utils/getApiHeaders\";\r\nimport { getValue, checkPaymentTerms } from \"../utils/helper\";\r\n\r\n/**\r\n * Submit application\r\n * @param {*} form \r\n * @returns \r\n */\r\nexport function submitApplication(form){\r\n const options = {\r\n method: 'POST',\r\n url: process.env.REACT_APP_URL + `/application/submit`,\r\n headers: getApiHeaderNotTimeForm(),\r\n data: form\r\n }\r\n return axios(options)\r\n}\r\n\r\nexport function startReviewApplication(applicationId){\r\n const options = {\r\n method: 'PUT',\r\n url: process.env.REACT_APP_URL + `/application/${applicationId}/startreview`,\r\n headers: getApiHeaderNotTimeForm(),\r\n }\r\n return axios(options)\r\n}\r\n\r\nexport function holdApplication(applicationId){\r\n const options = {\r\n method: 'PUT',\r\n url: process.env.REACT_APP_URL + `/application/${applicationId}/onhold`,\r\n headers: getApiHeaderNotTimeForm(),\r\n }\r\n return axios(options)\r\n}\r\n\r\nexport function searchApplicatoin(query) {\r\n const options = {\r\n method: 'GET',\r\n url: process.env.REACT_APP_URL + `/application/search`,\r\n headers: getApiHeaderNotTime(),\r\n params: {\r\n pageNumber: query.pageNumber,\r\n pageSize: query.pageSize,\r\n status: query.status,\r\n text: getValue(query.text).trim(),\r\n country: getValue(query.country).trim()\r\n }\r\n }\r\n\r\n return axios(options)\r\n}\r\n\r\nexport function updateApplication(applicationId, form) {\r\n if(form.paymentCh == null)\r\n {\r\n form.paymentCh = \"\";\r\n }\r\n if(typeof form.additionalPaymentsCh == \"string\")\r\n {\r\n form.additionalPaymentsCh = form.additionalPaymentsCh.trim().split(\",\");\r\n }\r\n let formPaymentCh = form.paymentCh.toString().trim();\r\n if(!form.additionalPaymentsCh.includes(formPaymentCh))\r\n {\r\n form.additionalPaymentsCh.push(formPaymentCh);\r\n }\r\n let splittedTerms = form.additionalPaymentsCh.filter(payment => checkPaymentTerms(payment)).map(payment => {\r\n var paymentToReturn = payment;\r\n return paymentToReturn;\r\n }).sort();\r\n splittedTerms = [...new Set(splittedTerms)];\r\n form.additionalPaymentsCh = splittedTerms.join(\",\");\r\n // Destination\r\n if(Array.isArray(form.destinationCountryCh)){\r\n form.destinationCountryCh = form.destinationCountryCh.join(',');\r\n }\r\n const options = {\r\n method: 'PUT',\r\n url: process.env.REACT_APP_URL + `/application/${applicationId}/update`,\r\n headers: getApiHeaderNotTime(),\r\n data: JSON.stringify({...form })\r\n }\r\n\r\n return axios(options)\r\n}\r\n\r\nexport function completeApplication(applicationId) {\r\n const options = {\r\n method: 'PUT',\r\n url: process.env.REACT_APP_URL + `/application/${applicationId}/complete`,\r\n headers: getApiHeaderNotTime()\r\n }\r\n\r\n return axios(options)\r\n}\r\n\r\nexport function getApplicationById(id) {\r\n const options = {\r\n method: 'GET',\r\n url: process.env.REACT_APP_URL + `/application/${id}`,\r\n headers: getApiHeaderNotTime(),\r\n }\r\n\r\n return axios(options)\r\n}\r\n\r\nexport function rejectApplication(applicationId) {\r\n const options = {\r\n method: 'PUT',\r\n url: process.env.REACT_APP_URL + `/application/${applicationId}/reject`,\r\n headers: getApiHeaderNotTime()\r\n }\r\n\r\n return axios(options)\r\n}\r\n\r\nexport function getApplicationFileById(id) {\r\n const options = {\r\n method: 'GET',\r\n url: process.env.REACT_APP_URL + `/application/${id}/file`,\r\n responseType: 'blob', // Important\r\n headers: getApiHeaderNotTime(),\r\n }\r\n return axios(options)\r\n}\r\n\r\nexport function uploadApplicationFile(id, form) {\r\n const options = {\r\n method: 'PUT',\r\n url: process.env.REACT_APP_URL + `/application/${id}/file`,\r\n headers: getApiHeaderNotTimeForm(),\r\n data: form\r\n }\r\n return axios(options)\r\n}\r\n\r\nexport function getStatus() {\r\n const options = {\r\n method: 'GET',\r\n url: process.env.REACT_APP_URL + `/application/status`,\r\n headers: getApiHeaderNotTime(),\r\n }\r\n\r\n return axios(options)\r\n}\r\n\r\nexport function getStatusByCountry(country) {\r\n const options = {\r\n method: 'GET',\r\n url: process.env.REACT_APP_URL + `/application/status/${country}`,\r\n headers: getApiHeaderNotTimeForm()\r\n }\r\n return axios(options)\r\n}","import { Col, Skeleton } from \"antd\";\r\nimport React from \"react\";\r\n\r\nconst style = {\r\n padding: \"8px 10px\",\r\n borderRadius: \"10px\",\r\n WebkitBoxShadow: \"0px 0px 8px -4px #000000\",\r\n boxShadow: \"0px 0px 8px -4px #000000\",\r\n height: '100%'\r\n};\r\n\r\nconst Widget = (props) => {\r\n\r\n const { span, children, loading } = props;\r\n\r\n if (loading) {\r\n return (\r\n \r\n
\r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n {children}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Widget;\r\n","const appReducer = (state, action) => {\r\n // console.log(action);\r\n\r\n switch (action.type) {\r\n case appAction.SET_OPTIONS:\r\n return {\r\n ...state,\r\n options: action.payload\r\n }\r\n default:\r\n console.debug('app reducer UNDEFINED ACTION', action);\r\n return { ...state };\r\n }\r\n};\r\n\r\nexport const appAction = {\r\n SET_OPTIONS: 'SET_OPTIONS'\r\n}\r\n\r\nexport default appReducer;","import React, { createContext, useReducer } from 'react';\r\nimport appReducer from '../reducers/appReducer';\r\n\r\nexport const AppContext = createContext();\r\n\r\nconst initAppState = {\r\n options: {}\r\n};\r\n\r\nexport const AppContextProvider = props => {\r\n const [state, dispatch] = useReducer(appReducer, initAppState);\r\n\r\n return (\r\n Application Not Found
\r\n\r\n \r\n \r\n Reject\r\n \r\n
\r\n
\r\n {application ? 'Update Application' : 'Application Not Found'}
\r\n \r\n \r\n
\r\n );\r\n }\r\n }\r\n\r\n const renderModals = () => {\r\n if (application) {\r\n return (\r\n <>\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n {application.statusCh}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n Please make sure save before you complete the registration.
\r\nDo you want to register this user to Y-Ship Cloud?
\r\n \r\nDo you want to reject this application?
\r\n \r\nPlease make sure save changes before you hold the application.
\r\nDo you want to hold this application?
\r\n \r\n\r\n {renderPage()}\r\n {renderModals()}\r\n
\r\n )\r\n}\r\n\r\nexport default ApplicationEdit;","const applicationsReducer = (state, action) => {\r\n // console.log(action);\r\n\r\n switch (action.type) {\r\n case \"UPDATE_LIST\":\r\n\r\n return {\r\n ...state,\r\n currentPage: action.payload.currentPage,\r\n pageSize: action.payload.pageSize,\r\n totalPages: action.payload.totalPages,\r\n totalItems: action.payload.totalItems,\r\n items: action.payload.items\r\n };\r\n\r\n case 'APPLICATIONS_CHANGE_PAGE_SIZE':\r\n return {\r\n ...state,\r\n pageSize: action.payload.pageSize\r\n }\r\n\r\n case 'APPLICATIONS_CHANGE_CURRENT_PAGE':\r\n return {\r\n ...state,\r\n currentPage: action.payload.currentPage\r\n }\r\n case 'CHANGE_STATUS':\r\n return {\r\n ...state,\r\n status: action.payload,\r\n currentPage: 1\r\n }\r\n case 'CHANGE_SEARCH_TEXT':\r\n return {\r\n ...state,\r\n text: action.payload\r\n }\r\n case 'CHANGE_SEARCH_COUNTRY':\r\n return {\r\n ...state,\r\n country: action.payload\r\n }\r\n default:\r\n console.error('NO DEFINE ACTION', action);\r\n return { ...state };\r\n }\r\n};\r\n\r\nexport default applicationsReducer;\r\n","import React, { createContext, useReducer } from 'react';\r\nimport { ApplicationStatus } from '../constants';\r\nimport applicationsReducer from '../reducers/applicationsReducer';\r\n\r\n\r\nexport const ApplicationsContext = createContext();\r\n\r\nconst initAppState = {\r\n currentPage: 1,\r\n pageSize: 10,\r\n totalPages: 1,\r\n totalItems: 0,\r\n status: ApplicationStatus.UNDER_REVIEW,\r\n items: [],\r\n text:'',\r\n country:null,\r\n};\r\n\r\nexport const ApplicationsContextProvider = props => {\r\n const [state, dispatch] = useReducer(applicationsReducer, initAppState);\r\n\r\n return (\r\n \r\n \r\n
\r\n
\r\n {application ? 'Application' : 'Application Not Found'}
\r\n \r\n {renderButton(application.statusCh)}\r\n \r\n
\r\n );\r\n }\r\n }\r\n\r\n const handleStatusStyle = (status) => {\r\n if(status === ApplicationStatus.RECIEVE){\r\n return('receivedColor');\r\n }else if(status === ApplicationStatus.COMPLETE){\r\n return('completedColor');\r\n }else if(status === ApplicationStatus.REJECTED){\r\n return('rejectedColor');\r\n }\r\n }\r\n\r\n return (\r\n \r\n Application {application.applicationCodeCh}\r\n
\r\n \r\n \r\n {application.statusCh} \r\n \r\n } onClick={downloadOnClick} />\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n {renderPage()}\r\n
\r\n )\r\n}\r\n\r\nexport default ApplicationView;","import { Col, Row, Form, Input, Button, Checkbox, Spin } from \"antd\";\r\nimport React, { useContext, useState, useEffect } from \"react\";\r\nimport Widget from \"../../components/widget/Widget\";\r\nimport { tryLogin } from '../../apis/auth';\r\nimport { AuthContext } from \"../../contexts/AuthContext\";\r\nimport { showErrorMessage } from \"../../components/message\";\r\nimport './Login.css';\r\nimport { useNavigate } from \"react-router-dom\";\r\nimport { pattern } from \"../../utils/patterns\";\r\nimport { formValidateMessages } from '../../utils/patterns'\r\n\r\nconst Login = () => {\r\n const [authState, authReducer] = useContext(AuthContext);\r\n let navigator = useNavigate();\r\n\r\n const { login } = authState;\r\n\r\n const [inLogin, setInLogin] = useState(false);\r\n const [credential, setCredential] = useState({\r\n username: \"\",\r\n password: \"\",\r\n });\r\n\r\n const startLogin = () => {\r\n setInLogin(true);\r\n }\r\n\r\n const endLogin = () => {\r\n setInLogin(false);\r\n }\r\n\r\n useEffect(() => {\r\n if (login) {\r\n navigator('/dashboard');\r\n }\r\n }, [login]);\r\n\r\n const loginOnClick = () => {\r\n if (credential.username && credential.password) {\r\n startLogin();\r\n tryLogin(credential).then(res => {\r\n if (res.status === 200 && res.data.code === 10000) {\r\n var accessToken = res.data.payload.token.value;\r\n authReducer({ type: 'LOGIN', payload: accessToken });\r\n } else {\r\n showErrorMessage('Login Fail');\r\n }\r\n }).catch(err => {\r\n console.error(err);\r\n showErrorMessage(err?.response?.data?.message);\r\n }).finally(() => {\r\n endLogin();\r\n })\r\n }\r\n };\r\n\r\n const renderLoginButton = () => {\r\n if (inLogin) {\r\n return (\r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n \r\n } />\r\n
\r\n );\r\n }\r\n }\r\n ]\r\n\r\n const groupFormValidateMessages = {\r\n required: '${label} is required!',\r\n types: {\r\n email: '${label} is not a valid email!',\r\n },\r\n };\r\n\r\n const groupFormOnFinish = (group) => {\r\n console.log('save group', group);\r\n }\r\n\r\n const renderPermissionCheckBoxs = () => {\r\n\r\n if (systemPermissions && form.permissions) {\r\n let groupPermissions = groupBy(systemPermissions, p => p.contentTypeId);\r\n let permissionCheckBoxs = [];\r\n groupPermissions.forEach(k => {\r\n permissionCheckBoxs.push(\r\n )}\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {addUserOptions}\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default GroupEdit;","import axios from \"axios\";\r\nimport { getApiHeaderNotTime } from \"../utils/getApiHeaders\";\r\n\r\nexport function getGroups() {\r\n const options = {\r\n method: 'GET',\r\n url: process.env.REACT_APP_URL + `/group/all`,\r\n headers: getApiHeaderNotTime(),\r\n }\r\n\r\n return axios(options)\r\n}\r\n\r\nexport function getGroupOptions() {\r\n const options = {\r\n method: 'GET',\r\n url: process.env.REACT_APP_URL + `/group/options`,\r\n headers: getApiHeaderNotTime(),\r\n }\r\n\r\n return axios(options)\r\n}\r\n\r\nexport function getGroupById(groupId) {\r\n const options = {\r\n method: 'GET',\r\n url: process.env.REACT_APP_URL + `/group/${groupId}`,\r\n headers: getApiHeaderNotTime(),\r\n }\r\n\r\n return axios(options)\r\n}\r\n\r\n\r\nexport function addGroup(form) {\r\n const options = {\r\n method: 'POST',\r\n url: process.env.REACT_APP_URL + `/group/create`,\r\n headers: getApiHeaderNotTime(),\r\n data: JSON.stringify({\r\n groupName: form.name,\r\n permissions: form.permissions,\r\n userIds: form.userIds\r\n })\r\n }\r\n\r\n return axios(options)\r\n}\r\n\r\nexport function updateGroup(groupId, form) {\r\n const options = {\r\n method: 'PUT',\r\n url: process.env.REACT_APP_URL + `/group/${groupId}/update`,\r\n headers: getApiHeaderNotTime(),\r\n data: JSON.stringify({\r\n name: form.name,\r\n permissions: form.permissions\r\n })\r\n }\r\n\r\n return axios(options)\r\n}\r\n\r\nexport function addUserToGroup(groupId, userId) {\r\n const options = {\r\n method: 'PUT',\r\n url: process.env.REACT_APP_URL + `/group/${groupId}/adduser`,\r\n headers: getApiHeaderNotTime(),\r\n data: JSON.stringify({\r\n userId: userId\r\n })\r\n }\r\n\r\n return axios(options)\r\n}\r\n\r\nexport function removeUserFromGroup(groupId, userId) {\r\n const options = {\r\n method: 'PUT',\r\n url: process.env.REACT_APP_URL + `/group/${groupId}/removeuser`,\r\n headers: getApiHeaderNotTime(),\r\n data: JSON.stringify({\r\n userId: userId\r\n })\r\n }\r\n\r\n return axios(options)\r\n}\r\n\r\nexport function removeGroup(groupId) {\r\n const options = {\r\n method: 'DELETE',\r\n url: process.env.REACT_APP_URL + `/group/${groupId}/delete`,\r\n headers: getApiHeaderNotTime(),\r\n }\r\n\r\n return axios(options)\r\n}","import React, { useState, useEffect, useContext } from 'react';\r\nimport { Spin, Row, Col, Button, Table, Tag, Modal, Form, Input, Select, Tooltip } from 'antd';\r\nimport { PlusOutlined, EditOutlined, UsergroupAddOutlined, DeleteOutlined } from '@ant-design/icons'\r\nimport './Groups.css';\r\nimport Widget from '../../components/widget/Widget';\r\nimport { addGroup, getGroups, removeGroup } from '../../apis/group';\r\nimport { showErrorMessage, showSuccessMessage, showWarningMessage } from '../../components/message';\r\nimport { AuthContext } from '../../contexts/AuthContext';\r\nimport { useNavigate } from 'react-router-dom';\r\nimport { getUsers } from '../../apis/user';\r\nimport { getStaffs } from '../../apis/staff';\r\nimport CustomTable from '../../components/CustomTable/CustomTable';\r\n\r\nconst Groups = () => {\r\n\r\n const [groups, setGroups] = useState([]);\r\n const [loading, setLoading] = useState(false);\r\n\r\n const [loadingUser, setLoadingUser] = useState(false);\r\n const [staffs, setStaffs] = useState([]);\r\n const [selectedRemoveGroup, setSelectedRemoveGroup] = useState(null);\r\n const [removingGroup, setRemovingGroup] = useState(false);\r\n\r\n const [addingGroup, setAddingGroup] = useState(false);\r\n\r\n const [newGroupModalVisible, setNewGroupModalVisible] = useState(false);\r\n\r\n const [authState, authDispatch] = useContext(AuthContext);\r\n let navigate = useNavigate();\r\n\r\n const { permissions } = authState;\r\n\r\n useEffect(() => {\r\n fetchGroups();\r\n }, []);\r\n\r\n const fetchGroups = () => {\r\n setLoading(true);\r\n getGroups()\r\n .then(res => {\r\n if (res.status === 200 && res.data.code === 10000) {\r\n setGroups(res.data.payload);\r\n } else {\r\n console.debug(res.data);\r\n showErrorMessage('Fail to get groups');\r\n }\r\n })\r\n .catch(err => {\r\n console.debug(err);\r\n })\r\n .finally(() => {\r\n setLoading(false);\r\n })\r\n }\r\n\r\n const fetchUsers = () => {\r\n setLoadingUser(true);\r\n getStaffs()\r\n .then(res => {\r\n if (res.status === 200 && res.data.code === 10000) {\r\n setStaffs(res.data.payload);\r\n } else {\r\n console.debug('fail to load users', res.data);\r\n }\r\n })\r\n .catch(err => {\r\n console.debug('having issue load user', err);\r\n })\r\n .finally(() => {\r\n setLoadingUser(false);\r\n })\r\n }\r\n\r\n const editGroupBtnOnClick = (group) => {\r\n if (group) {\r\n navigate(`/dashboard/group/${group.id}/edit`);\r\n }\r\n }\r\n\r\n const removeGroupBtnOnClick = (group) => {\r\n setSelectedRemoveGroup(group);\r\n }\r\n\r\n const tableColumns = [\r\n {\r\n title: 'Name',\r\n dataIndex: 'name',\r\n key: 'name',\r\n },\r\n {\r\n title: 'Permissions',\r\n dataIndex: 'permissions',\r\n key: 'permissions',\r\n render: (t, r) => {\r\n if (permissions && r.permissions) {\r\n var groupPermissions = permissions.filter(p => r.permissions.includes(p.id));\r\n\r\n return (\r\n <>\r\n {groupPermissions.slice(0, 6).map(p => \r\n \r\n
\r\n
\r\n \r\n {renderTitle()}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n newGroupForm.submit()} disabled={addingGroup} >Create\r\n ]}>\r\n \r\n \r\n Yes\r\n ]}>\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default Groups;","import React, { useEffect, useContext, useState } from \"react\";\r\nimport { Layout, Menu, Row, Col, Avatar, Popover, Modal, Form, Input, Button, Tooltip } from \"antd\";\r\nimport { Link, Outlet, useLocation, useNavigate } from \"react-router-dom\";\r\nimport {\r\n UserOutlined,\r\n LaptopOutlined,\r\n HomeOutlined,\r\n} from \"@ant-design/icons\";\r\nimport { AuthContext } from \"../../contexts/AuthContext\";\r\nimport { getUserProfile as getUserProfileApi } from '../../apis/auth';\r\n\r\nimport './mainLayout.css';\r\nimport { getAllPermissions, getPermissions } from \"../../apis/permission\";\r\nimport { AuthAction } from \"../../reducers/authReducer\";\r\nimport { getOptions } from \"../../apis/common\";\r\nimport { AppContext } from \"../../contexts/AppContext\";\r\nimport { appAction } from \"../../reducers/appReducer\";\r\nimport { showErrorMessage, showSuccessMessage, showWarningMessage } from \"../../components/message\";\r\nimport { updatePassword } from \"../../apis/staff\";\r\nimport { pattern } from '../../utils/patterns';\r\nimport { scrollToPos } from \"../../utils/helper\";\r\n\r\nconst { SubMenu } = Menu;\r\nconst { Header, Content, Sider } = Layout;\r\n\r\nconst MainLayout = (props) => {\r\n const [authState, authDispatch] = useContext(AuthContext);\r\n const [appState, appDispatch] = useContext(AppContext);\r\n\r\n let navigate = useNavigate();\r\n let location = useLocation();\r\n\r\n const { token, user, } = authState;\r\n const [profileModalVisible, setProfileModalVisible] = useState(false);\r\n const [passwordInput, setPasswordInput] = useState('');\r\n const [updatingPassword, setUpdatingPassword] = useState(false);\r\n\r\n const [updatePasswordForm] = Form.useForm();\r\n\r\n useEffect(() => {\r\n var token = localStorage.getItem('access_token') || authState.token;\r\n if (token) {\r\n\r\n authDispatch({ type: 'LOGIN', payload: token });\r\n\r\n navigate(location.pathname);\r\n }\r\n\r\n fetchPermissions();\r\n fetchOptions();\r\n getUserProfile()\r\n }, [])\r\n\r\n const logoutHandler = () => {\r\n authDispatch({ type: 'LOGOUT' });\r\n }\r\n\r\n const getUserProfile = () => {\r\n getUserProfileApi()\r\n .then(res => {\r\n if (res.status === 200 && res.data.code === 10000) {\r\n authDispatch({ type: AuthAction.SET_USER_PROFILE, payload: res.data.payload });\r\n } else {\r\n logoutHandler();\r\n }\r\n })\r\n .catch(err => {\r\n logoutHandler();\r\n })\r\n }\r\n\r\n const fetchPermissions = () => {\r\n getAllPermissions()\r\n .then(res => {\r\n if (res.status === 200 && res.data.code === 10000) {\r\n authDispatch({ type: AuthAction.UPDATE_PERMISSIONS, payload: res.data.payload });\r\n }\r\n })\r\n .catch(err => {\r\n console.debug(err);\r\n })\r\n }\r\n\r\n /**\r\n * Get edit options and set it to app context\r\n * @returns \r\n */\r\n const fetchOptions = () => {\r\n getOptions()\r\n .then(res => {\r\n if (res.status === 200 && res.data.code === 10000) {\r\n appDispatch({ type: appAction.SET_OPTIONS, payload: res.data.payload });\r\n } else {\r\n console.debug('Fail to get options', res);\r\n }\r\n })\r\n .catch(err => {\r\n console.debug('Having issue to get options', err);\r\n })\r\n }\r\n\r\n const profilePopover = (\r\n \r\n \r\n \r\n } style={{ borderRadius: 10 }} />\r\n \r\n \r\n
\r\n
\r\n GROUPS
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {/*
*/}\r\n
\r\n Do you want to remove [{selectedRemoveGroup?.name}] group?
\r\n\r\n setProfileModalVisible(true)}\r\n style={{\r\n borderRadius: \"5px\",\r\n marginTop: \"5px\",\r\n borderBottom: '1px',\r\n }}\r\n >\r\n Profile\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default NotFound;","import { Select } from 'antd';\r\nimport propTypes from 'prop-types';\r\nimport React from 'react';\r\nimport { DefaultPaymentTerms } from '../../constants';\r\n\r\nconst DefaultPaymentTermSelect = ({value, addition, disabled, onChange}) => {\r\n\r\n const options = [];\r\n\r\n for(var i in DefaultPaymentTerms) {\r\n var obj = {};\r\n obj['id'] = i;\r\n obj['paymentTerm'] = DefaultPaymentTerms[i];\r\n options.push(obj);\r\n }\r\n\r\n return (\r\n \r\n )\r\n}\r\n\r\nDefaultPaymentTermSelect.defaultProps = {\r\n value: null,\r\n addition: [],\r\n disabled: false,\r\n}\r\n\r\nexport default DefaultPaymentTermSelect;","import React, { useContext, useEffect, useState } from 'react';\r\nimport { Button, Col, Form, Input, Modal, Row, Select, Spin, Table, Tooltip, Checkbox } from 'antd';\r\nimport { EditOutlined, ShopOutlined, CloseCircleOutlined, PlusCircleOutlined, UserOutlined } from '@ant-design/icons';\r\nimport Widget from '../../components/widget/Widget';\r\nimport { useNavigate, useParams } from 'react-router-dom';\r\n\r\nimport './ShipperDetail.css';\r\nimport { addShipperChannel, getShipperById, removeShipperChannel, updateShipperAddress, updateShipperChannel, updateShipperInfo } from '../../apis/shipper';\r\nimport { showErrorMessage, showSuccessMessage, showWarningMessage } from '../../components/message';\r\nimport { AppContext } from '../../contexts/AppContext';\r\nimport { convertOptionComponent, getValue, renderSelectOptions, checkPaymentTerms } from '../../utils/helper';\r\nimport { formValidateMessages } from '../../utils/patterns';\r\nimport CountrySelect from '../../components/countrySelect/CountrySelect';\r\nimport DefaultPaymentTermSelect from '../../components/paymentTermSelect/DefaultPaymentTermSelect';\r\nimport { DefaultPaymentTerms } from '../../constants';\r\nimport PaymentTermsSelect from '../../components/paymentTermSelect/PaymentTermsSelect';\r\nimport { PaymentTerms } from '../../constants';\r\nimport DestinationCountrySelect from '../../components/destinationCountrySelect/DestinationCountrySelect';\r\n\r\nconst ShipperDetail = () => {\r\n\r\n const [loading, setLoading] = useState(false);\r\n const [updating, setUpdating] = useState(false);\r\n const [shipper, setShipper] = useState(null);\r\n const [shipperInfoModalVisible, setShipperInfoModalVisible] = useState(false);\r\n const [shipperAddressModalVisible, setShipperAddressModalVisible] = useState(false);\r\n const [newChannelModalVisible, setNewChannelModalVisible] = useState(false);\r\n const [updateAddressConfirmModalVisible, setupdateAddressConfirmModalVisible] = useState(false);\r\n const [selectedRemoveChannel, setSelectedRemoveChannel] = useState(null);\r\n const [selectedUpdateChannel, setSelectedUpdateChannel] = useState(null);\r\n\r\n const { id } = useParams();\r\n let navigate = useNavigate();\r\n\r\n const [appState, appDispatch] = useContext(AppContext);\r\n const { options } = appState;\r\n\r\n const [shipperInfoUpdateForm] = Form.useForm();\r\n const [shipperAddressUpdateForm] = Form.useForm();\r\n const [newChannelForm] = Form.useForm();\r\n const [updateChannelForm] = Form.useForm();\r\n\r\n const channelColumn = [\r\n {\r\n title: 'Channel',\r\n dataIndex: 'channelId',\r\n key: 'channelId',\r\n render: (t, r) => {\r\n return getChannelName(r.channelId);\r\n }\r\n },\r\n {\r\n title: 'Shipper Code',\r\n dataIndex: 'shipperCodeCh',\r\n key: 'shipperCodeCh',\r\n render: (t, r) => {\r\n return (\r\n <>\r\n {t}\r\n Page Not Found
\r\n {renderBtn()}\r\n\r\n
\r\n \r\n \r\n \r\n } onClick={shipperInfoEditBtnOnClick} />\r\n \r\n \r\n
\r\n
\r\n \r\n Shipper Info\r\n
\r\n \r\n \r\n \r\n \r\n {shipper.shipperNameCh}\r\n \r\n \r\n {shipper.shipperShortName}\r\n \r\n \r\n \r\n {shipper.shipperCh}\r\n \r\n \r\n {shipper.serviceType}\r\n \r\n \r\n \r\n {renderBranch(shipper.branchId)}\r\n \r\n \r\n {shipper.defaultLengthUnitCh}\r\n \r\n \r\n {shipper.address.homepage}\r\n \r\n \r\n {renderPayment(shipper.paymentTermsCh)}\r\n \r\n \r\n \r\n {shipper.postOfLoadingCh}\r\n \r\n \r\n {shipper.defaultWeightUnitCh}\r\n \r\n \r\n {renderdefaultPayment(shipper.defaultPaymentTermCh)}\r\n \r\n \r\n \r\n {shipper.destinationCountryCh.split(',').join(', ')}\r\n \r\n \r\n {shipper.defaultCurrencyCh}\r\n \r\n \r\n {shipper.transmitFlg ? 'Yes' : 'No'}\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n } onClick={shipperAddressEditBtnOnClick} />\r\n \r\n \r\n
\r\n
\r\n \r\n Address\r\n
\r\n \r\n \r\n \r\n \r\n {shipper.address.attention}\r\n \r\n \r\n {shipper.address.address}\r\n \r\n \r\n {shipper.address.address2}\r\n \r\n \r\n {shipper.address.city}\r\n \r\n \r\n {shipper.address.state}\r\n \r\n \r\n {shipper.address.country}\r\n \r\n \r\n \r\n {shipper.address.zipcode}\r\n \r\n \r\n {shipper.address.phone}\r\n \r\n \r\n {shipper.address.mobile}\r\n \r\n \r\n {shipper.address.email}\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n } onClick={addChannelBtnOnClick} disabled={updating} />\r\n \r\n \r\n
\r\n
\r\n \r\n Channels\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n } />\r\n */}\r\n \r\n
\r\n
\r\n \r\n Users\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n }\r\n }\r\n\r\n return (\r\n Shipper Not Found
\r\n\r\n \r\n shipperInfoUpdateForm.submit()} >Save\r\n ]} onCancel={shipperInfoEditClose}>\r\n \r\n \r\n\r\n Save\r\n ]} onCancel={shipperAddressEditOnClose}>\r\n \r\n \r\n\r\n Yes]}>\r\n newChannelForm.submit()} disabled={updating}>Save\r\n ]} onCancel={newChannelModalOnClose}>\r\n \r\n \r\n\r\n Remove\r\n ]} onCancel={removeChannelModalOnClose}>\r\n \r\n\r\n updateChannelForm.submit()} disabled={updating}>Save\r\n ]} onCancel={updateChannelModalOnClose}>\r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default ShipperDetail;","import axios from \"axios\";\r\nimport { getApiHeaderNotTime } from \"../utils/getApiHeaders\";\r\nimport { getValue, checkPaymentTerms } from \"../utils/helper\";\r\n\r\n// const searchCondition = {\r\n// pageNumber: 0,\r\n// pageSize: 10,\r\n// name: '',\r\n// shipperCode: '',\r\n// branch: '',\r\n// ServiceType: ''\r\n// }\r\n\r\n/**\r\n * \r\n * @param {*} searchCondition \r\n * @returns \r\n */\r\nexport function searchShipperss(searchCondition) {\r\n const options = {\r\n method: 'GET',\r\n url: process.env.REACT_APP_URL + '/shipper/search',\r\n headers: getApiHeaderNotTime(),\r\n params: {\r\n name: getValue(searchCondition.name).trim(),\r\n shipperCode: getValue(searchCondition.shipperCode).trim(),\r\n branch: searchCondition.branch,\r\n pageNumber: searchCondition.pageNumber || 1,\r\n pageSize: searchCondition.pageSize || 10,\r\n country: searchCondition.country\r\n }\r\n }\r\n\r\n return axios(options)\r\n}\r\n\r\nexport function getShipperById(shipperId) {\r\n const options = {\r\n method: 'GET',\r\n url: process.env.REACT_APP_URL + `/shipper/${shipperId}`,\r\n headers: getApiHeaderNotTime(),\r\n }\r\n\r\n return axios(options)\r\n}\r\n\r\n/**\r\n * Update shipper basic info\r\n * @param {*} shipperId \r\n * @param {*} form \r\n * @returns \r\n */\r\nexport function updateShipperInfo(shipperId, form) {\r\n if(typeof form.paymentTerms == \"string\")\r\n {\r\n form.paymentTerms = form.paymentTerms.trim().split(\",\");\r\n }\r\n let defaultPaymentTerm = form.defaultPaymentTerm.toString().trim()\r\n if(!form.paymentTerms.includes(defaultPaymentTerm))\r\n {\r\n form.paymentTerms.push(defaultPaymentTerm);\r\n }\r\n let splittedTerms = form.paymentTerms.filter(payment => checkPaymentTerms(payment)).map(payment => {\r\n var paymentToReturn = payment;\r\n return paymentToReturn;\r\n }).sort();\r\n splittedTerms = [...new Set(splittedTerms)];\r\n form.paymentTerms = splittedTerms.join(\",\");\r\n form.destinationCountry = Array.isArray(form.destinationCountry) ? form.destinationCountry.join(',') : form.destinationCountry;\r\n const options = {\r\n method: 'PUT',\r\n url: process.env.REACT_APP_URL + `/shipper/${shipperId}/updateInfo`,\r\n headers: getApiHeaderNotTime(),\r\n data: JSON.stringify({\r\n shipperCode: form.shipperCode,\r\n shipperName: form.shipperName,\r\n defaultPaymentTerm: form.defaultPaymentTerm,\r\n paymentTerms: form.paymentTerms,\r\n destinationCountry: form.destinationCountry,\r\n transmitFlg: form.transmitFlg\r\n })\r\n }\r\n\r\n return axios(options);\r\n}\r\n\r\n/**\r\n * Update shipper basic info\r\n * @param {*} shipperId \r\n * @param {*} form \r\n * @returns \r\n */\r\n export function updateShipperAddress(shipperId, form) {\r\n const options = {\r\n method: 'PUT',\r\n url: process.env.REACT_APP_URL + `/shipper/${shipperId}/updateaddress`,\r\n headers: getApiHeaderNotTime(),\r\n data: JSON.stringify({\r\n attention: form.attention,\r\n address: form.address,\r\n address2: form.address2,\r\n city: form.city,\r\n state: form.state,\r\n country: form.country,\r\n zipcode: form.zipcode,\r\n phone: form.phone,\r\n mobile: form.mobile,\r\n email: form.email,\r\n })\r\n }\r\n\r\n return axios(options);\r\n}\r\n\r\nexport function addShipperChannel(shipperId, form) {\r\n const options = {\r\n method: 'PUT',\r\n url: process.env.REACT_APP_URL + `/shipper/${shipperId}/addchannel`,\r\n headers: getApiHeaderNotTime(),\r\n data: JSON.stringify({\r\n channel: form.channel,\r\n shipperCode: form.shipperCode,\r\n })\r\n }\r\n\r\n return axios(options);\r\n}\r\n\r\nexport function updateShipperChannel(shipperId, form) {\r\n const options = {\r\n method: 'PUT',\r\n url: process.env.REACT_APP_URL + `/shipper/${shipperId}/updatechannel`,\r\n headers: getApiHeaderNotTime(),\r\n data: JSON.stringify({\r\n channel: form.channel,\r\n shipperCode: form.shipperCode,\r\n })\r\n }\r\n\r\n return axios(options);\r\n}\r\n\r\nexport function removeShipperChannel(shipperId, channel) {\r\n const options = {\r\n method: 'DELETE',\r\n url: process.env.REACT_APP_URL + `/shipper/${shipperId}/removechannel`,\r\n headers: getApiHeaderNotTime(),\r\n data: JSON.stringify({\r\n channel: channel\r\n })\r\n }\r\n\r\n return axios(options);\r\n}","import React, { useState, useEffect, useContext } from 'react';\r\nimport { Col, Row, Spin, Button, Collapse, Table, Form, Input, Select } from 'antd';\r\nimport { UserAddOutlined, EditOutlined } from '@ant-design/icons';\r\nimport Widget from '../../components/widget/Widget';\r\nimport { searchShipperss } from '../../apis/shipper';\r\nimport { showErrorMessage } from '../../components/message';\r\nimport { renderSelectOptions } from '../../utils/helper';\r\nimport { AppContext } from '../../contexts/AppContext';\r\nimport './Shippers.css';\r\nimport { useNavigate } from 'react-router-dom';\r\nimport ReloadBtn from '../../components/reloadBtn/ReloadBtn';\r\nimport CustomTable from '../../components/CustomTable/CustomTable';\r\nimport { getUserProfile as getUserProfileApi } from '../../apis/auth';\r\nimport { AuthContext } from '../../contexts/AuthContext';\r\nimport { AuthAction } from \"../../reducers/authReducer\";\r\n\r\n\r\nconst Shippers = () => {\r\n\r\n const [filter, setFilter] = useState(\r\n {\r\n name: '',\r\n shipperCode: '',\r\n branch: '',\r\n serviceType: '',\r\n country: ''\r\n }\r\n )\r\n const [pagination, setPagination] = useState({\r\n pageNumber: 1,\r\n pageSize: 10,\r\n total: 0,\r\n })\r\n\r\n const [shippers, setShippers] = useState([])\r\n const [loading, setLoading] = useState(false);\r\n const [userCountry, setUserCountry] = useState('');\r\n const [loadProfile, setLoadProfile] = useState(false);\r\n\r\n const [appState, appDispatch] = useContext(AppContext);\r\n const [authState, authDispatch] = useContext(AuthContext);\r\n let navigate = useNavigate();\r\n\r\n const { options } = appState;\r\n\r\n const tableColumns = [\r\n {\r\n title: 'Name',\r\n dataIndex: 'shipperNameCh',\r\n key: 'shipperNameCh',\r\n },\r\n {\r\n title: 'Shipper Code',\r\n dataIndex: 'shipperCh',\r\n key: 'shipperCh',\r\n },\r\n {\r\n title: 'Service Type',\r\n dataIndex: 'serviceType',\r\n key: 'serviceType',\r\n },\r\n {\r\n title: 'Branch',\r\n dataIndex: 'branchShortNameCh',\r\n key: 'branchShortNameCh',\r\n },\r\n {\r\n title: 'Address',\r\n dataIndex: 'address',\r\n key: 'address',\r\n render: (t, r) => {\r\n return `${r.address1Ch} ${r.address2Ch} (${r.countryCh})`;\r\n }\r\n },\r\n {\r\n title: '',\r\n dataIndex: '',\r\n key: '',\r\n width: 10,\r\n render: (t, r) => {\r\n return \r\n ]}>\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n {renderContent()}\r\n SHIPPER - {shipper?.shipperNameCh}
\r\n \r\n If you update this shipper's address, it will update their all their un-transmitted shipment data automatically in Y-Ship Cloud.
\r\nand please update shipper information in KTE.
\r\nDo you want to update the address?
\r\n \r\n\r\nDo you want to remove {getChannelName(selectedRemoveChannel)} channel?
\r\n\r\n \r\n
\r\n
\r\n STAFFS
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n setSearchText(e.target.value)}\r\n />\r\n
\r\n {/*
*/}\r\n
\r\n Do you want to reset user [{selectedResetPasswordUser?.user?.username}] password?
\r\n \r\n\r\nNew password: {newPassword}
\r\n {renderPage()}\r\n
\r\n );\r\n}\r\n\r\nexport default Staffs;","import React, { useEffect, useContext, useState } from 'react';\r\nimport { Tooltip, Spin, Row, Col, Button, Form, Modal, Select, Input } from 'antd';\r\nimport { UserOutlined, EditOutlined } from '@ant-design/icons';\r\nimport './UserDetail.css';\r\nimport Widget from '../../components/widget/Widget';\r\nimport { showErrorMessage, showSuccessMessage, showWarningMessage } from '../../components/message';\r\nimport { getUserById, updateUserInfo } from '../../apis/user';\r\nimport { useNavigate, useParams } from 'react-router-dom';\r\nimport { AccountStatus, AccountStatusIds, UserRoles } from '../../constants';\r\nimport AccountActive from '../accountActive/AccountActive';\r\nimport { convertOptionComponent, renderSelectOptions } from '../../utils/helper';\r\nimport { AppContext } from '../../contexts/AppContext';\r\nimport { AuthContext } from '../../contexts/AuthContext';\r\nimport { AuthAction } from '../../reducers/authReducer';\r\nimport { formValidateMessages, pattern } from '../../utils/patterns';\r\nimport { getUserProfile as getUserProfileApi } from '../../apis/auth';\r\nimport { render } from '@testing-library/react';\r\n\r\nconst UserDetail = () => {\r\n\r\n const { id } = useParams();\r\n\r\n const [loading, setLoading] = useState(false);\r\n const [updating, setUpdating] = useState(false);\r\n const [userInfo, setUserInfo] = useState(null);\r\n const [userFrom, setUserFrom] = useState('');\r\n const [userInfoModalVisible, setUserInfoModalVisible] = useState(false);\r\n\r\n const [appState, appDispatch] = useContext(AppContext); \r\n const [authState, authDispatch] = useContext(AuthContext);\r\n\r\n let [userInfoUpdateForm] = Form.useForm();\r\n const { options } = appState;\r\n\r\n let navigate = useNavigate();\r\n\r\n useEffect(() => { \r\n getUserProfile();\r\n }, [])\r\n useEffect(() => { \r\n fetchUserInfo(id);\r\n }, [id])\r\n const logoutHandler = () => {\r\n authDispatch({ type: 'LOGOUT' });\r\n }\r\n const getUserProfile = () => {\r\n getUserProfileApi()\r\n .then(res => {\r\n if (res.status === 200 && res.data.code === 10000) {\r\n authDispatch({ type: AuthAction.SET_USER_PROFILE, payload: res.data.payload });\r\n setUserFrom(res.data.payload.country.trim());\r\n }else{\r\n logoutHandler();\r\n }\r\n })\r\n .catch(err => {\r\n logoutHandler();\r\n })\r\n }\r\n const fetchUserInfo = (id) => {\r\n if (id) {\r\n setLoading(true);\r\n getUserById(id)\r\n .then(res => {\r\n if (res.status === 200 && res.data.code === 10000) {\r\n setUserInfo(res.data.payload);\r\n } else {\r\n showErrorMessage('Fail to get user info.');\r\n console.error(res.data);\r\n }\r\n })\r\n .catch(err => {\r\n showErrorMessage('Issue occur when getting user info');\r\n console.error(err.response);\r\n })\r\n .finally(() => {\r\n setLoading(false);\r\n })\r\n } else {\r\n showErrorMessage('Cannot get user info');\r\n setUserInfo(null);\r\n }\r\n }\r\n\r\n const renderUserInfoWidgetContent = () => {\r\n if (userInfo) {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n {userInfo ? `${userInfo.firstNameCh} ${userInfo.lastNameCh} - ${userInfo.username}` : 'User Detail'}
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n {renderUserInfoWidgetContent()}\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n Account Address\r\n \r\n \r\n
\r\n
\r\n \r\n {renderUserAddressWidgetContent()}\r\n
\r\n \r\n \r\n {renderPage()}\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default UserDetail;","import axios from \"axios\";\r\nimport { getApiHeaderNotTime } from \"../utils/getApiHeaders\";\r\n\r\nexport function getUsersByCountry(searchCondition) {\r\n const options = {\r\n method: 'GET',\r\n url: process.env.REACT_APP_URL + '/user',\r\n headers: getApiHeaderNotTime(),\r\n params: {\r\n text: searchCondition.text, \r\n country: searchCondition.country,\r\n pageNumber: searchCondition.pageNumber,\r\n pageSize: searchCondition.pageSize\r\n }\r\n }\r\n\r\n return axios(options)\r\n}\r\nexport function getUsers(searchCondition) {\r\n const options = {\r\n method: 'GET',\r\n url: process.env.REACT_APP_URL + '/user',\r\n headers: getApiHeaderNotTime(),\r\n params: {\r\n text: searchCondition.text,\r\n pageNumber: searchCondition.pageNumber,\r\n pageSize: searchCondition.pageSize\r\n }\r\n }\r\n return axios(options)\r\n}\r\nexport function getUserById(id) {\r\n const options = {\r\n method: 'GET',\r\n url: process.env.REACT_APP_URL + `/user/${id}`,\r\n headers: getApiHeaderNotTime(),\r\n }\r\n\r\n return axios(options)\r\n}\r\n\r\nexport function updateUserInfo(userId, form){\r\n const options = {\r\n method: 'PUT',\r\n url: process.env.REACT_APP_URL + `/user/${userId}/updateinfo`,\r\n headers: getApiHeaderNotTime(),\r\n data: {\r\n username: form.username,\r\n firstName: form.firstName,\r\n lastName: form.lastName,\r\n email: form.email,\r\n role: form.role\r\n }\r\n }\r\n\r\n return axios(options)\r\n}","export default __webpack_public_path__ + \"static/media/submit.e61a0730.png\";","export default __webpack_public_path__ + \"static/media/review.500c9f85.png\";","export default __webpack_public_path__ + \"static/media/check.278e3e6d.png\";","import { Tooltip } from 'antd';\r\nimport { QuestionCircleOutlined } from '@ant-design/icons';\r\nimport React from 'react';\r\n\r\nconst TooltipLabel = ({ label, tooltip }) => {\r\n return (\r\n \r\n {label || ''}\r\n {tooltip ? : <>}\r\n
\r\n )\r\n}\r\n\r\nexport default TooltipLabel;","import React, { useEffect, useState } from 'react';\r\nimport { Alert, Button, Card, Checkbox, Col, Collapse, Divider, Form, Input, Layout, Result, Row, Select, Space, Spin, Tooltip } from 'antd';\r\nimport { QuestionCircleOutlined } from '@ant-design/icons'\r\nimport step1Img from '../../resource/img/submit.png';\r\nimport step2Img from '../../resource/img/review.png';\r\nimport step3Img from '../../resource/img/check.png';\r\nimport './UserRegister.css';\r\nimport { Link } from 'react-router-dom';\r\nimport { showErrorMessage, showSuccessMessage } from '../../components/message';\r\nimport { getFileExt } from '../../utils/helper';\r\nimport { submitApplication } from '../../apis/application';\r\nimport { formValidateMessages, pattern } from '../../utils/patterns';\r\nimport CountrySelect from '../../components/countrySelect/CountrySelect';\r\nimport TooltipLabel from '../../components/tooltipLabel/TooltipLabel';\r\n\r\nconst formInit = {\r\n isNewAccount: true,\r\n isFulfillment: false,\r\n username: '',\r\n password: '',\r\n passwordConfirm: '',\r\n address: '',\r\n city: '',\r\n state: '',\r\n zipcode: ''\r\n}\r\n\r\nconst UserRegister = () => {\r\n\r\n let [form] = Form.useForm();\r\n const [isNew, setIsNew] = useState(true);\r\n const [fulfillmentDisabled, setFulfillmentDisabled] = useState(false);\r\n const [selectedFile, setSelectedFile] = useState(null);\r\n const [selectedFileName, setSelectedFileName] = useState(null);\r\n const [submitting, setSubmitting] = useState(false);\r\n const [applicationNumber, setApplicationNumber] = useState();\r\n const [errorMessage, setErrorMessage] = useState('');\r\n\r\n const [isAgree, setIsAgree] = useState(false);\r\n const [volumeWeight, setVolumeWeight] = useState(false);\r\n\r\n const onFormSubmit = (f) => {\r\n console.log('on submit', f);\r\n\r\n if (!validateApplicationForm(f)) {\r\n return;\r\n }\r\n\r\n let submitForm = new FormData();\r\n for (let key in f) {\r\n if (f[key]) {\r\n submitForm.append(key, f[key]);\r\n }\r\n }\r\n\r\n if (selectedFile) {\r\n submitForm.append('productFile', selectedFile);\r\n }\r\n\r\n // console.log('application submit', submitForm);\r\n // for (var value of submitForm.values()) {\r\n // console.log(value);\r\n // }\r\n\r\n\r\n setSubmitting(true);\r\n submitApplication(submitForm)\r\n .then(res => {\r\n if (res.status === 200 && res.data.code === 10000) {\r\n showSuccessMessage('Application Submit Successfully');\r\n setApplicationNumber(res.data.payload);\r\n form.resetFields();\r\n setErrorMessage(null);\r\n } else {\r\n console.log(res.data);\r\n showErrorMessage('Fail to submit the application. Code: ' + res.data.code);\r\n }\r\n })\r\n .catch(err => {\r\n console.error('Here is error' + err);\r\n\r\n setErrorMessage(err.response.data.message);\r\n })\r\n .finally(() => {\r\n setSubmitting(false);\r\n })\r\n\r\n }\r\n\r\n const validateApplicationForm = (form) => {\r\n if (!form.username || !form.password) {\r\n setErrorMessage('Please provide username and password!')\r\n return false;\r\n }\r\n if (form.password !== form.passwordConfirm) {\r\n setErrorMessage('Password and Password Confirm must match!');\r\n return false;\r\n }\r\n\r\n if (!form.companyName || !form.firstName || !form.lastName) {\r\n setErrorMessage('Please provide shipper information!');\r\n return false;\r\n }\r\n\r\n if (!form.address || !form.city || !form.state || !form.zipcode || !form.country || !form.email || !form.phone) {\r\n setErrorMessage('Please provide seller address information!');\r\n return false;\r\n }\r\n\r\n if (!isAgree) {\r\n setErrorMessage('Please agree the Yamato Term & Policy!');\r\n return false;\r\n }\r\n\r\n return true;\r\n }\r\n\r\n const onSelectFile = (e) => {\r\n console.log('file selected', e);\r\n\r\n let ext = getFileExt(e.target.value).toLowerCase();\r\n\r\n if (ext !== 'csv' && ext !== 'tsv' && ext !== 'xls' && ext !== 'xlsx') {\r\n setErrorMessage('Product file only accept flat file (csv/tsv) and Excel (xls/xlsx) format');\r\n setSelectedFile(null);\r\n setSelectedFileName(null);\r\n form.setFieldsValue({\r\n productFile: null\r\n });\r\n } else {\r\n setSelectedFileName(e.target.value);\r\n setSelectedFile(e.target.files[0]);\r\n form.setFieldsValue({\r\n productFile: e.target.files[0]\r\n });\r\n }\r\n }\r\n\r\n const isNewOnChange = (e) => {\r\n setIsNew(!e.target.checked);\r\n form.setFieldsValue({\r\n isNewAccount: !e.target.checked\r\n })\r\n }\r\n\r\n const isFulfillmentOnChange = (e) => {\r\n form.setFieldsValue({\r\n isFulfillment: e.target.checked\r\n })\r\n }\r\n\r\n const volumeWeightChange = (e) => {\r\n form.setFieldsValue({\r\n volumeWeight: e.target.checked\r\n })\r\n }\r\n\r\n const handlingChargeChange = (e) =>{\r\n form.setFieldsValue({\r\n handlingCharge: e.target.checked\r\n })\r\n }\r\n\r\n const renderErrorMessage = () => {\r\n if (errorMessage) {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n 
\r\n
\r\n \r\n Step 1: Submit Application\r\n\r\n
\r\n \r\n
\r\n Fill out the registration form below and upload your product data file containing information such as SKU, Marketplace ID (e.g., ASIN), Title, Description, etc. The product data file should be in text (CSV/TSV), or Excel (XLS, XLSX) format.
\r\n\r\n 
\r\n
\r\n \r\n Step 2: Yamato Review\r\n
\r\n \r\n
\r\n \r\n Yamato will perform a thorough compliance check based on the provided information. Depending on the product type and volume, this may take a few days. Through this check, if we find any potential problems for customs clearance for import into Japan for one or more of your products, you will be contacted by a customer service representative to discuss how to resolve those issues.\r\n
\r\n\r\n 
\r\n
\r\n \r\n Step 3: Registration Complete\r\n
\r\n \r\n
\r\n \r\n Once the review is complete, an email will be sent to you with the login information for the new account. Please follow the directions in the email to get started with Y-Ship Cloud.\r\n
\r\n\r\n \r\n Please use an email address} />}\r\n required={true}\r\n rules={[\r\n { required: true },\r\n { pattern: pattern.email, message: 'username is not valid' }\r\n ]}\r\n name={['username']}>\r\n \r\n \r\n Your password must be at least 8 characters long and contain: \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Let Yamato fulfill your orders.
This requires an additional operation fee. Currently Korea is not supported with this service.} />} name={['isFulfillment']} >\r\n \r\n \r\n
\r\n
\r\n \r\n Account
\r\n - 1 lower case character
- 1 upper case character
- 1 special character: !@#$%^&*
This requires an additional operation fee. Currently Korea is not supported with this service.} />} name={['isFulfillment']} >\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n An estimated Package Volume Weight will display when entering package information into Y-Ship Cloud} />} name={['volumeWeight']} >\r\n \r\n \r\n Please do not use a P.O Box.} />} required={true} name={['address']} rules={[{ required: true }, {pattern: pattern.alphnum, message: 'address can only contain number, alphabetic letter, and special characters'}]}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n\r\n Shipper Information
\r\n \r\n \r\n \r\n \r\n Only accept CVS (csv/tsv) and Excel (xls/xlsx) type.
Max file size allowed - 10MB\r\n \r\n \r\n \r\n \r\n
\r\n {renderErrorMessage()}\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n Product Data File
\r\n Max file size allowed - 10MB\r\n
\r\n \r\n \r\n
\r\n {renderContent()}\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default UserRegister;","import { Table } from 'antd';\r\nimport React, { useEffect, useContext, useState } from 'react';\r\nimport { Row, Col, Collapse, Form, Input, Select, Button, Spin } from 'antd';\r\nimport { UserAddOutlined, EditOutlined } from '@ant-design/icons'\r\nimport Widget from '../../components/widget/Widget';\r\nimport { AppContext } from '../../contexts/AppContext';\r\nimport { getValue, renderSelectOptions } from '../../utils/helper';\r\nimport { useNavigate } from 'react-router-dom';\r\nimport { getUsersByCountry } from '../../apis/user';\r\nimport { showErrorMessage, showSuccessMessage } from '../../components/message';\r\nimport ReloadBtn from '../../components/reloadBtn/ReloadBtn';\r\nimport CustomTable from '../../components/CustomTable/CustomTable';\r\nimport { getUserProfile as getUserProfileApi } from '../../apis/auth';\r\nimport { AuthContext } from '../../contexts/AuthContext';\r\nimport { AuthAction } from \"../../reducers/authReducer\";\r\n\r\nconst Users = () => {\r\n\r\n const [loading, setLoading] = useState(false);\r\n const [filter, setFilter] = useState({\r\n text: '', country: '',\r\n });\r\n\r\n const initPagination = {\r\n pageNumber: 1,\r\n pageSize: 10,\r\n total: 1,\r\n };\r\n const [pagination, setPagination] = useState(initPagination);\r\n const [userList, setUserList] = useState([]);\r\n const [userCountry, setUserCountry] = useState();\r\n const [loadProfile, setLoadProfile] = useState(false);\r\n const [appState, appDispatch] = useContext(AppContext);\r\n const [authState, authDispatch] = useContext(AuthContext);\r\n let navigate = useNavigate();\r\n\r\n const { options } = appState;\r\n\r\n const tableColumn = [\r\n {\r\n title: 'Name',\r\n dataIndex: 'shipperNameCh',\r\n key: 'shipperNameCh',\r\n render: (t, r) => `${r.firstNameCh} ${r.lastNameCh}`\r\n },\r\n {\r\n title: 'Username',\r\n dataIndex: 'username',\r\n key: 'username',\r\n },\r\n {\r\n title: '',\r\n dataIndex: 'isActive',\r\n key: 'isActive',\r\n width: 10,\r\n render: (t, r) => {\r\n return