\r\n \r\n {t(action.name)}\r\n \r\n \r\n
\r\n );\r\n }\r\n return {action.render(item)}
;\r\n })}\r\n {/* \r\n \r\n View\r\n \r\n
*/}\r\n \r\n {/* \r\n \r\n Edit\r\n \r\n
\r\n \r\n \r\n \r\n Delete\r\n \r\n
*/}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default ActionTable;\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { useSetState } from \"react-use\";\r\n\r\nconst Pagination = ({\r\n totalCount,\r\n setPaginateParams,\r\n paginateParams,\r\n disableSelectTableLength,\r\n}) => {\r\n const [pages, setPages] = useState([]);\r\n const [valuePage, setValuePage] = useSetState({\r\n truncate: false,\r\n curPage: 1,\r\n numLinksTwoSide: 1,\r\n });\r\n\r\n const fetchDataOffset = () => {\r\n setPaginateParams({\r\n offset: paginateParams.limit * (valuePage.curPage - 1),\r\n });\r\n };\r\n const handleChangePage = (type) => {\r\n if (type === \"prev\" && valuePage.curPage !== 1) {\r\n setValuePage({ curPage: valuePage.curPage - 1 });\r\n }\r\n if (type === \"next\" && valuePage.curPage !== pages.length) {\r\n setValuePage({ curPage: valuePage.curPage + 1 });\r\n }\r\n };\r\n const calCulatePagination = () => {\r\n const truncateRange = 5;\r\n const numberOfPage = Math.ceil(totalCount / paginateParams.limit);\r\n\r\n const tempPages = Array.from({ length: numberOfPage }, (_, i) => i + 1);\r\n let truncatedPages = [];\r\n\r\n const isTruncateRight =\r\n valuePage.curPage < truncateRange && valuePage.curPage >= 1;\r\n const isTruncateLeft =\r\n valuePage.curPage > tempPages.length - truncateRange + 1;\r\n const isTruncateMiddle = !isTruncateLeft && !isTruncateRight;\r\n\r\n if (tempPages.length > 0 && tempPages.length >= 10) {\r\n tempPages.forEach((page) => {\r\n if (\r\n isTruncateRight &&\r\n (page <= truncateRange || page === tempPages.length)\r\n ) {\r\n truncatedPages.push(page);\r\n }\r\n\r\n if (\r\n isTruncateLeft &&\r\n (page > tempPages.length - truncateRange || page === 1)\r\n ) {\r\n truncatedPages.push(page);\r\n }\r\n if (\r\n isTruncateMiddle &&\r\n ((page >= valuePage.curPage - 1 && page <= valuePage.curPage + 1) ||\r\n page === 1 ||\r\n page === tempPages.length)\r\n ) {\r\n truncatedPages.push(page);\r\n }\r\n });\r\n if (truncatedPages.length > 0) {\r\n if (isTruncateRight) {\r\n truncatedPages.splice(truncateRange, 0, \"...\");\r\n }\r\n if (isTruncateLeft) {\r\n truncatedPages.splice(\r\n truncatedPages.length - truncateRange,\r\n 0,\r\n \"...\"\r\n );\r\n }\r\n if (isTruncateMiddle) {\r\n truncatedPages.splice(1, 0, \"...\");\r\n truncatedPages.splice(truncatedPages.length - 1, 0, \"...\");\r\n }\r\n }\r\n }\r\n\r\n setPages(tempPages.length >= 10 ? truncatedPages : tempPages);\r\n };\r\n useEffect(() => {\r\n fetchDataOffset();\r\n }, [valuePage]);\r\n useEffect(() => {\r\n calCulatePagination();\r\n }, [totalCount, paginateParams]);\r\n return (\r\n \r\n {!disableSelectTableLength && (\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\nexport default Pagination;\r\n","import React, { ReactNode, useEffect, useState } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport Common from \"../../utils/Common\";\r\nimport { languageMapping, t, toAbsoluteUrl } from \"../../utils/utils\";\r\nimport ActionTable, { Actions } from \"./ActionTable\";\r\nimport Pagination from \"./Pagination\";\r\nimport { useSetState } from \"react-use\";\r\n\r\nimport { Box, TextField } from \"@mui/material\";\r\nimport MyDateRangePicker from \"../DatePicker/MyDateRangePicker\";\r\nimport DateRangePicker from \"react-bootstrap-daterangepicker\";\r\n\r\nimport { useIntl } from \"react-intl\";\r\nimport \"./style.scss\";\r\nimport moment from \"moment\";\r\nimport { useSelector } from \"react-redux\";\r\n\r\ntype Column = {\r\n title: string;\r\n\r\n className?: string;\r\n dataIndex?: string;\r\n render?: (value: any, row: any, index: number) => ReactNode;\r\n};\r\ntype ToolbarType = \"modal\" | \"filter\";\r\ntype ToolbarItem = {\r\n name?: string;\r\n type?: ToolbarType;\r\n component?: ReactNode;\r\n};\r\ntype dataSourceParams = {\r\n keyword?: string;\r\n order?: string;\r\n sort?: string;\r\n limit?: number;\r\n offset?: number;\r\n id?: string;\r\n targetId?: string;\r\n type?: number;\r\n languageId?: string;\r\n};\r\n\r\ninterface IProps {\r\n dataSource?: any;\r\n dataSourceParams?: dataSourceParams;\r\n columns: Column[];\r\n actions?: Actions[];\r\n refetch?: boolean;\r\n disableSearch?: boolean;\r\n toolbarRender?: ToolbarItem[];\r\n customCoreTable?: any;\r\n disableSelectTableLength?: boolean;\r\n disableHeader?: boolean;\r\n disablePagination?: boolean;\r\n staticItems?: any[];\r\n}\r\nconst Table = (props: IProps) => {\r\n const lang = useSelector((state: any) => state.i18n.lang);\r\n const { formatMessage } = useIntl();\r\n const [filterParams, setFilterParams] = useSetState<{\r\n sort: string;\r\n order: string;\r\n keyword: string;\r\n from: any;\r\n to: any;\r\n }>({\r\n sort: \"createdDate\",\r\n order: \"desc\",\r\n keyword: \"\",\r\n from: undefined,\r\n to: undefined,\r\n });\r\n\r\n const [keyword, setKeyword] = useState(\"\");\r\n const [paginateParams, setPaginateParams] = useSetState({\r\n limit: 10,\r\n offset: 0,\r\n });\r\n const [loading, setLoading] = useState(false);\r\n const [items, setItems] = useState- \r\n
- \r\n ...\r\n \r\n );\r\n }\r\n\r\n return (\r\n
\r\n {loading && (\r\n
\r\n );\r\n};\r\nexport default Table;\r\n","import Common from \"../utils/Common\";\r\nimport Config from \"../configs/Config\";\r\n\r\nexport const cancelOrder = (cancelOrderDTO) => {\r\n const stringCommandName = \"RejectOrder\";\r\n const stringDomain = \"Order\";\r\n let dataSend = {\r\n CommandName: stringCommandName,\r\n Domain: stringDomain,\r\n Content: JSON.stringify(cancelOrderDTO),\r\n ModifiedBy: localStorage.getItem(Config.userId),\r\n ModifiedDate: Common.formatDateTime(new Date()),\r\n TimeOutSecond: 10,\r\n };\r\n return Common.sendSyncCommand2(dataSend);\r\n};\r\nexport const getDeposits = (options) => {\r\n console.log(options.languageId, \"depostioopon\");\r\n const userId = localStorage.getItem(Config.userId);\r\n const merchantId = localStorage.getItem(Config.merchantId);\r\n\r\n if (options === undefined) options = {};\r\n if (options.languageId === undefined)\r\n options.languageId = localStorage.getItem(Config.languageId);\r\n if (options.limit === undefined) options.limit = 1000000;\r\n if (options.offset === undefined) options.offset = 0;\r\n if (options.order === undefined) options.order = \"desc\";\r\n if (options.sort === undefined) options.sort = \"createdDate\";\r\n if (options.from === undefined) options.from = null;\r\n if (options.to === undefined) options.to = null;\r\n if (options.type === undefined) options.type = Config.ProductTypes.Undefined;\r\n options.keyword = options.keyword === undefined ? \"\" : options.keyword;\r\n let param = `limit:${options.limit},offset:${options.offset},order:\"${options.order}\",sort:\"${options.sort}\"\r\n ,merchantId:\"${merchantId}\",targetId:\"${userId}\", keyword:\"${options.keyword}\", languageId:\"${options.languageId}\", type:${options.type}`;\r\n if (options.from) {\r\n param += `,from: \"${options.from}\"`;\r\n }\r\n if (options.to) {\r\n param += `,to:\"${options.to}\"`;\r\n }\r\n return Common.getDataGraphQl(`\r\n {\r\n depositorders(param:{${param}})\r\n {\r\n items{\r\n code,\r\n id\r\n orderType,\r\n status\r\n price\r\n costPrice\r\n addressName\r\n fromDate\r\n toDate\r\n point\r\n owner\r\n customerName\r\n status\r\n productName\r\n displayStatus\r\n },\r\n totalCount,\r\n success,\r\n message\r\n }\r\n }\r\n `);\r\n};\r\nexport const getDeposit = (id) => {\r\n const userId = localStorage.getItem(Config.userId);\r\n const merchantId = localStorage.getItem(Config.merchantId);\r\n const languageId = localStorage.getItem(Config.languageId);\r\n\r\n let param = `\r\n merchantId:\"${merchantId}\",languageId:\"${languageId}\",id:\"${id}\"`;\r\n\r\n return Common.getDataGraphQl(`\r\n {\r\n depositorder(param:{${param}})\r\n {\r\n\r\n code,\r\n id\r\n orderType,\r\n createdDate\r\n status\r\n price\r\n costPrice\r\n latitude\r\n longitude\r\n detailAddress\r\n addressName\r\n fromDate\r\n toDate\r\n point\r\n owner\r\n ownerEmail\r\n ownerMobile\r\n note\r\n referenceCode\r\n standardOccupancy\r\n images{\r\n id\r\n name\r\n path\r\n }\r\n \r\n customerName\r\n status\r\n productName\r\n displayStatus\r\n \r\n }\r\n }\r\n `);\r\n};\r\n\r\nexport const getOrders = (options) => {\r\n const languageId = localStorage.getItem(Config.languageId);\r\n const merchantId = localStorage.getItem(Config.merchantId);\r\n const tokenId = localStorage.getItem(Config.tokenId);\r\n if (!options) options = {};\r\n options = {\r\n limit: options.limit || 10,\r\n offset: options.offset || 0,\r\n order: options.order || \"desc\",\r\n sort: options.sort || \"createdDate\",\r\n keyword: options.keyword || \"\",\r\n from: options.from || null,\r\n to: options.to || null,\r\n };\r\n let params = `limit:${options.limit},offset:${options.offset},order:\"${options.order}\",sort:\"${options.sort}\"\r\n ,keyword:\"${options.keyword}\"\r\n ,tokenUser:\"${tokenId}\"\r\n ,languageId:\"${languageId}\"\r\n ,merchantId:\"${merchantId}\"`;\r\n if (options.from) {\r\n params += `,from: \"${options.from}\"`;\r\n }\r\n if (options.to) {\r\n params += `,to:\"${options.to}\"`;\r\n }\r\n var query = `\r\n {\r\n userorders(param:{${params}\r\n })\r\n {\r\n items {\r\n allStatus,\r\n grandTotal,\r\n id,\r\n code,\r\n createdDate,\r\n grandTotal,\r\n subTotal,\r\n paymentAmount,\r\n paymentMethodName,\r\n payments {\r\n allStatus,\r\n amount,\r\n code,\r\n id, note, paymentMethodId, paymentMethodName, referenceCode, targetId\r\n },\r\n delivery{\r\n addressDetail, trackingCode,amount\r\n },\r\n orderLines {\r\n id, targetName, originalPrice, price, quantity, total\r\n }, \r\n user {\r\n id, email, lastName, mobile\r\n },\r\n },\r\n \r\n totalCount\r\n }\r\n }\r\n `;\r\n return Common.getDataGraphQl(query);\r\n};\r\n\r\nexport const getOrderDetail = (orderId) => {\r\n const languageId = localStorage.getItem(Config.languageId);\r\n const merchantId = localStorage.getItem(Config.merchantId);\r\n const tokenId = localStorage.getItem(Config.tokenId);\r\n var query = `\r\n {\r\n order(param:{id:\"${orderId}\"\r\n ,languageId:\"${languageId}\"\r\n ,merchantId:\"${merchantId}\"\r\n ,tokenUser:\"${tokenId}\"\r\n })\r\n {\r\n \r\n id,\r\n code,\r\n allStatus,\r\n createdDate,\r\n grandTotal,\r\n code\r\n orderLines {\r\n id\r\n targetName\r\n price\r\n originalPrice\r\n quantity\r\n total\r\n }\r\n shippingAmount\r\n subTotal\r\n user{\r\n userName\r\n email\r\n mobile\r\n }\r\n payments{\r\n allStatus\r\n amount\r\n paymentMethodName\r\n }\r\n userEmail\r\n userName\r\n userMobile\r\n \r\n \r\n \r\n }\r\n }\r\n `;\r\n return Common.getDataGraphQl(query);\r\n};\r\nexport const getVacationOrderDetail = (orderId) => {\r\n const languageId = localStorage.getItem(Config.languageId);\r\n const merchantId = localStorage.getItem(Config.merchantId);\r\n const tokenId = localStorage.getItem(Config.tokenId);\r\n var query = `\r\n {\r\n vacationorder(param:{id:\"${orderId}\"\r\n ,languageId:\"${languageId}\"\r\n ,merchantId:\"${merchantId}\"\r\n ,tokenUser:\"${tokenId}\"\r\n })\r\n {\r\n note\r\n giftCodeAmount\r\n id,\r\n code,\r\n createdDate,\r\n grandTotal,\r\n code\r\n orderLines {\r\n id\r\n targetName\r\n price\r\n originalPrice\r\n quantity\r\n total\r\n product{\r\n images{\r\n path\r\n id\r\n }\r\n id,\r\n type,\r\n fromDate,\r\n toDate,\r\n expireDate\r\n }\r\n }\r\n shippingAmount\r\n subTotal\r\n user{\r\n userName\r\n email\r\n mobile\r\n }\r\n payments{\r\n allStatus\r\n amount\r\n paymentMethodName\r\n }\r\n userEmail\r\n userName\r\n userMobile\r\n \r\n \r\n \r\n }\r\n }\r\n `;\r\n return Common.getDataGraphQl(query);\r\n};\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { getOrdersAction } from \"../../actions/Order\";\r\nimport ActionTable from \"../../partials/table/ActionTable\";\r\nimport Table from \"../../partials/table/Table\";\r\nimport { getOrders } from \"../../services/OrderService\";\r\nimport Common from \"../../utils/Common\";\r\nimport { useComponentVisible } from \"../../utils/customHook\";\r\nimport { getOrderStatusById } from \"../../utils/OrderUtils\";\r\n\r\nconst Order = (props) => {\r\n const formatOrders = (orderLines) => {\r\n if (orderLines && orderLines.length > 0) {\r\n let orderLineArrStr = \"\";\r\n orderLines.forEach((item, i) => {\r\n orderLineArrStr = item.targetName + \", \" + orderLineArrStr;\r\n });\r\n orderLineArrStr = orderLineArrStr.substring(\r\n 0,\r\n orderLineArrStr.length - 2\r\n );\r\n orderLineArrStr =\r\n orderLineArrStr.length > 30\r\n ? orderLineArrStr.substring(0, 30) + \" ...\"\r\n : orderLineArrStr;\r\n\r\n return orderLineArrStr;\r\n }\r\n };\r\n const formatterOrderStatus = (value, row) => {\r\n return getOrderStatusById(value);\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n )}\r\n {!disableHeader && (\r\n \r\n {!disableSearch && (\r\n
\r\n )}\r\n\r\n \r\n
\r\n )}\r\n\r\n \r\n setFilterParams({ keyword })}\r\n >\r\n \r\n setKeyword(e.target.value)}\r\n onKeyDown={(e) => {\r\n if (e.key === \"Enter\") setFilterParams({ keyword });\r\n }}\r\n className=\"form-control form-control-solid w-md-250px ps-14 w-100\"\r\n placeholder={formatMessage({ id: \"Search\" })}\r\n />\r\n
\r\n \r\n
\r\n \r\n {\r\n picker.element.val(\"\");\r\n setFilterParams({\r\n from: undefined,\r\n to: undefined,\r\n });\r\n }}\r\n initialSettings={{\r\n showDropdowns: true,\r\n autoUpdateInput: false,\r\n locale: {\r\n cancelLabel: true,\r\n },\r\n }}\r\n onApply={(event, picker) => {\r\n picker.element.val(\r\n picker.startDate.format(\"DD/MM/YYYY\") +\r\n \" - \" +\r\n picker.endDate.format(\"DD/MM/YYYY\")\r\n );\r\n setFilterParams({\r\n from: moment(picker.startDate).format(\"YYYY-MM-DD\"),\r\n to: moment(picker.endDate).format(\"YYYY-MM-DD\"),\r\n });\r\n }}\r\n >\r\n
\r\n\r\n {toolbarRender && toolbarRender.map((toolbar) => toolbar.component)}\r\n \r\n {customCoreTable ? (\r\n React.cloneElement(customCoreTable, {\r\n ...props,\r\n items,\r\n })\r\n ) : (\r\n
\r\n \r\n \r\n \r\n \r\n {columns.map((column, index) => {\r\n return (\r\n {\r\n setFilterParams({\r\n order:\r\n filterParams.order === \"asc\" ? \"desc\" : \"asc\",\r\n sort: column.dataIndex,\r\n });\r\n }}\r\n key={column.title}\r\n className={`${\r\n column.className\r\n } cursor-pointer ${column.dataIndex ===\r\n filterParams.sort &&\r\n `sorting sorting_${filterParams.order}`}`}\r\n >\r\n \r\n {t(column.title)}\r\n {/* \r\n \r\n setFilterParams({\r\n order: \"asc\",\r\n sort: column.dataIndex,\r\n })\r\n }\r\n className=\"svg-icon svg-icon-6 position-absolute\"\r\n style={{marginBottom:\"15%\"}}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n */}\r\n \r\n \r\n );\r\n })}\r\n {actions && (\r\n {t(\"Actions\")} \r\n )}\r\n \r\n \r\n\r\n \r\n {items.length > 0 ? (\r\n items.map((item: any, index: number) => {\r\n return (\r\n \r\n {columns.map((column) => {\r\n return (\r\n \r\n {(column.render &&\r\n column.render(\r\n item[column.dataIndex || \"\"],\r\n item,\r\n index\r\n )) ||\r\n (column.dataIndex && item[column.dataIndex]) ||\r\n \"-\"}\r\n \r\n );\r\n })}\r\n {actions && actions.length > 0 && (\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 {!disablePagination && (\r\n \r\n {/*begin::Card body*/}\r\n
\r\n \r\n {/*begin::Wrapper*/}\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Title*/}\r\n\r\n {/*end::Title*/}\r\n {/*begin::Description*/}\r\n
\r\n {/*end::Wrapper*/}\r\n {/*begin::Illustration*/}\r\n \r\n {t(\"No data\")}.\r\n
\r\n {/*end::Description*/}\r\n {/*begin::Action*/}\r\n\r\n {/*end::Action*/}\r\n\r\n
\r\n {/*end::Illustration*/}\r\n \r\n {/*begin::Svg Icon | path: icons/duotune/arrows/arr061.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n
\r\n \r\n {/*begin::Title*/}\r\n
\r\n )}\r\n {t(title)}
\r\n {/*end::Title*/}\r\n {/*begin::Description*/}\r\n\r\n {/*end::Description*/}\r\n\r\n {children}\r\n
\r\n {!viewOnly && (\r\n \r\n \r\n {t(\"Cancel\")}\r\n \r\n \r\n {!loading && {t(\"Save Changes\")}}\r\n\r\n \r\n {t(\"Please wait\")} ...\r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n\r\n {/* \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Select*/}\r\n\r\n */}\r\n\r\n {/*end::Select*/}\r\n
\r\n \r\n {!formState.addressId && {errorList.addressId}}\r\n
\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Select*/}\r\n setFormState({ productId: e.target.value })}\r\n name=\"productId\"\r\n placeholder={formatMessage({ id: \"Select room class\" })}\r\n className=\"form-select form-select-solid\"\r\n >\r\n \r\n {productsExchange &&\r\n productsExchange.length > 0 &&\r\n productsExchange.map(product => (\r\n \r\n ))}\r\n \r\n\r\n {/*end::Select*/}\r\n
\r\n \r\n {!formState.productId && {errorList.productId}}\r\n
\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Select*/}\r\n \r\n \r\n \r\n {t(\"Adult\")}\r\n \r\n \r\n \r\n \r\n {productExchange.adultsStandard || \"N/A\"}\r\n \r\n \r\n \r\n \r\n {t(\"Children\")}\r\n \r\n \r\n \r\n \r\n {t(\"Age from\")}\r\n \r\n \r\n \r\n \r\n {t(\"To\")}\r\n \r\n \r\n \r\n \r\n {productExchange.childStandard || \"N/A\"}\r\n \r\n \r\n \r\n \r\n {productExchange.childAgeFrom || \"N/A\"}\r\n \r\n \r\n \r\n \r\n {productExchange.childAgeTo || \"N/A\"}\r\n \r\n */}\r\n\r\n {/*end::Select*/}\r\n \r\n
\r\n \r\n {/*begin::Icon*/}\r\n {/*begin::Svg Icon | path: icons/duotune/general/gen044.svg*/}\r\n\r\n {/*end::Svg Icon*/}\r\n {/*end::Icon*/}\r\n {/*begin::Wrapper*/}\r\n
\r\n\r\n {/* \r\n \r\n {t(\"Adult\")} :{\" \"}\r\n {productExchange.adultsStandard || \"N / A\"}\r\n
\r\n \r\n \r\n {t(\"Children\")} :{\" \"}\r\n {productExchange.childStandard || \"N / A\"}\r\n \r\n {t(\"Age from\")} :{\" \"}\r\n {productExchange.childAgeFrom || \"N / A\"}\r\n \r\n \r\n {t(\"To\")} :{\" \"}\r\n {productExchange.childAgeTo || \"N / A\"}\r\n \r\n
\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Select*/}\r\n {\r\n setDate({\r\n checkInDate: \"\",\r\n checkOutDate: \"\"\r\n });\r\n setKey({\r\n key1: Common.guid(),\r\n key2: Common.guid()\r\n });\r\n setNumberOfNights(e.target.value);\r\n }}\r\n className=\"form-select form-select-solid\"\r\n >\r\n {[3, 4, 7].map(num => (\r\n \r\n ))}\r\n \r\n\r\n {/*end::Select*/}\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n {/*end::Label*/}\r\n {/*begin::Input*/}\r\n {\r\n setDate({\r\n checkInDate: moment(picker.startDate).format(\"YYYY-MM-DD\"),\r\n checkOutDate: moment(picker.startDate)\r\n .add(numberOfNights, \"days\")\r\n .format(\"YYYY-MM-DD\")\r\n });\r\n }}\r\n initialSettings={{\r\n singleDatePicker: true,\r\n autoUpdateInput: false,\r\n\r\n minDate: moment(new Date()).add(3, \"months\"),\r\n\r\n locale: {\r\n cancelLabel: true\r\n }\r\n }}\r\n >\r\n
\r\n \r\n {!date.checkInDate && {errorList.checkInDate}}\r\n
\r\n \r\n \r\n {\r\n setDate({\r\n checkInDate: moment(picker.startDate)\r\n .subtract(numberOfNights, \"days\")\r\n .format(\"YYYY-MM-DD\"),\r\n checkOutDate: moment(picker.startDate).format(\"YYYY-MM-DD\")\r\n });\r\n }}\r\n initialSettings={{\r\n singleDatePicker: true,\r\n autoUpdateInput: false,\r\n minDate: moment(new Date())\r\n .add(3, \"months\")\r\n .add(numberOfNights, \"days\"),\r\n // showDropdowns: true,\r\n\r\n locale: {\r\n cancelLabel: true\r\n }\r\n }}\r\n >\r\n
\r\n \r\n {!date.checkOutDate && {errorList.checkOutDate}}\r\n
\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Input*/}\r\n setFormState({ referenceCode: e.target.value })}\r\n className=\"form-control form-control-solid\"\r\n name=\"contractCode\"\r\n />\r\n {/*end::Input*/}\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n \r\n {/*end::Label*/}\r\n {/*begin::Input*/}\r\n Upload ảnh trang có thông tin khu nghỉ trên hợp đồng\r\n
\r\n \r\n \r\n \r\n {/*begin::Inputs*/}\r\n uploadAvatar(event.target.files[0], \"image1\")}\r\n />\r\n\r\n {/*end::Inputs*/}\r\n \r\n
\r\n \r\n \r\n \r\n Upload ảnh trang có thông tin chủ sở hữủ trên hợp đồng\r\n {/*end::Label*/}\r\n {/*begin::Input*/}\r\n\r\n
\r\n \r\n \r\n \r\n {/*begin::Inputs*/}\r\n uploadAvatar(event.target.files[0], \"image2\")}\r\n />\r\n\r\n {/*end::Inputs*/}\r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n Upload ảnh trang có Chữ ký và Dấu mộc của chủ sở hữu và khu nghỉ trên hợp đồng hoặc\r\n thẻ sở hữu cùng các văn bản khác nếu có\r\n \r\n {/*end::Label*/}\r\n {/*begin::Input*/}\r\n\r\n
\r\n \r\n \r\n \r\n {/*begin::Inputs*/}\r\n uploadAvatar(event.target.files[0], \"image3\")}\r\n />\r\n\r\n {/*end::Inputs*/}\r\n \r\n
\r\n\r\n \r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Input*/}\r\n setFormState({ note: e.target.value })}\r\n class=\"form-control form-control-solid\"\r\n rows=\"3\"\r\n placeholder={formatMessage({ id: \"Deposit Note\" })}\r\n name=\"note\"\r\n />\r\n {/*end::Input*/}\r\n \r\n
\r\n {/*end::Input group*/}\r\n {/*begin::Input group*/}\r\n\r\n {/*end::Input group*/}\r\n {/*begin::Input group*/}\r\n\r\n {/*end::Input group*/}\r\n {/*begin::Input group*/}\r\n\r\n {/*end::Input group*/}\r\n \r\n\r\n \r\n
\r\n )\r\n }\r\n ]}\r\n actions={[\r\n {\r\n name: \"View\",\r\n type: \"navigation\",\r\n render(item) {\r\n return `/deposit/detail/${item.id}`;\r\n }\r\n }\r\n ]}\r\n />\r\n \r\n );\r\n};\r\n\r\nexport default Deposit;\r\n","export const ORDER = {\r\n GET_ORDER: 'order/GET_ORDER', \r\n GET_ORDER_DETAIL: 'order/SELECT_ORDER', \r\n SELECT_ORDER: 'order/SELECT_ORDER', \r\n CANCEL_ORDER: 'order/CANCEL_ORDER',\r\n CLEAR_ORDER_INFO_MESS: 'order/CLEAR_ORDER_INFO_MESS'\r\n\r\n};","import React, {\r\n createContext,\r\n useContext,\r\n useEffect,\r\n useMemo,\r\n useReducer\r\n} from \"react\";\r\n\r\n/**\r\n * Both context used to create inside react `redux`-like global state managed\r\n * entirely by react.\r\n *\r\n * @see https://kentcdodds.com/blog/how-to-use-react-context-effectively\r\n */\r\n\r\nconst LayoutContext = {\r\n /**\r\n * Stores layout state, can be consumed globally.\r\n */\r\n State: createContext(null),\r\n\r\n /**\r\n * Stores `dispatch` function to update layout state, intended to be internal.\r\n */\r\n Dispatch: createContext(null)\r\n};\r\n\r\n/**\r\n * Layout action types, used to filter out dispatched actions.\r\n */\r\nconst actionTypes = {\r\n /**\r\n * Initializes layout state from provided `{ pathname, menuConfig }` action\r\n * payload.\r\n */\r\n INIT: \"INIT\",\r\n\r\n /**\r\n * Updates current subheader from provided `{ title }` action payload.\r\n */\r\n SET_SUBHEADER: \"SET_SUBHEADER\",\r\n\r\n /**\r\n * Controls splash screen visibility.\r\n */\r\n SHOW_SPLASH_SCREEN: \"SHOW_SPLASH_SCREEN\",\r\n HIDE_SPLASH_SCREEN: \"HIDE_SPLASH_SCREEN\"\r\n};\r\n\r\n/**\r\n * Recursively runs over `items` to find `pageConfig` of `currentPage`.\r\n *\r\n * Returns `undefined` if there are no matches.\r\n */\r\nfunction findPageConfig(currentPage, items, breadcrumbs) {\r\n // Ignore non array `items`.\r\n if (!items || !Array.isArray(items)) {\r\n return;\r\n }\r\n\r\n for (const item of items) {\r\n // Return `item` if it's `page` matches `currentPage`\r\n if (currentPage === item.page && !item.submenu) {\r\n return item;\r\n }\r\n\r\n // Try to `pageConfig` in `item.submenu` if it is defined.\r\n if (item.submenu) {\r\n const pageConfig = findPageConfig(currentPage, item.submenu, breadcrumbs);\r\n if (pageConfig) {\r\n breadcrumbs.push(item);\r\n return pageConfig;\r\n }\r\n }\r\n }\r\n}\r\n\r\n/**\r\n * Used to lazily create initial layout state.\r\n */\r\nfunction init({ pathname, menuConfig }) {\r\n console.log(menuConfig);\r\n const currentPage = pathname.slice(1 /* Remove leading slash. */);\r\n let breadcrumbs = [];\r\n const pageConfig =\r\n findPageConfig(currentPage, menuConfig.aside.items, breadcrumbs) ||\r\n findPageConfig(currentPage, menuConfig.header.items, breadcrumbs);\r\n\r\n breadcrumbs.reverse();\r\n const state = { subheader: { title: \"\", breadcrumb: [], description: \"\" }, splashScreen: { refs: {} } };\r\n if (pageConfig) {\r\n breadcrumbs.push(pageConfig);\r\n state.subheader.title = pageConfig.title;\r\n state.subheader.breadcrumb = breadcrumbs;\r\n }\r\n\r\n return state;\r\n}\r\n\r\nfunction reducer(state, { type, payload }) {\r\n console.log(\"layoutContect\", type, payload)\r\n if (type === actionTypes.INIT) {\r\n const nextState = init(payload);\r\n\r\n // Update only subheader.\r\n return { ...state, subheader: nextState.subheader };\r\n }\r\n\r\n if (type === actionTypes.SET_SUBHEADER) {\r\n return { ...state, subheader: payload };\r\n }\r\n\r\n if (type === actionTypes.SHOW_SPLASH_SCREEN) {\r\n return {\r\n ...state,\r\n splashScreen: {\r\n ...state.splashScreen,\r\n refs: { ...state.splashScreen.refs, [payload.id]: true }\r\n }\r\n };\r\n }\r\n\r\n if (type === actionTypes.HIDE_SPLASH_SCREEN) {\r\n const { [payload.id]: skip, ...nextRefs } = state.splashScreen.refs;\r\n\r\n return {\r\n ...state,\r\n splashScreen: { ...state.splashScreen, refs: nextRefs }\r\n };\r\n }\r\n\r\n return state;\r\n}\r\n\r\n/**\r\n * Creates layout reducer and provides it's `state` and ` dispatch`.\r\n */\r\nexport function LayoutContextProvider({ history, children, menuConfig }) {\r\n const [state, dispatch] = useReducer(\r\n reducer,\r\n { menuConfig, pathname: history.location.pathname },\r\n // See https://reactjs.org/docs/hooks-reference.html#lazy-initialization\r\n init\r\n );\r\n\r\n // Subscribe to history changes and reinitialize on each change.\r\n useEffect(\r\n () =>\r\n history.listen(({ pathname }) => {\r\n dispatch({\r\n type: actionTypes.INIT,\r\n payload: { pathname, menuConfig }\r\n });\r\n }),\r\n\r\n /**\r\n * Passing `history` and `menuConfig` to `deps` ensures that `useEffect`\r\n * will cleanup current `history` listener and will dispatch `INIT`\r\n * with `menuConfig` reference from current render.\r\n *\r\n * @see https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect\r\n */\r\n [history, menuConfig]\r\n );\r\n\r\n const { refs: splashScreenRefs } = state.splashScreen;\r\n const splashScreenVisible = useMemo(\r\n () => Object.keys(splashScreenRefs).length > 0,\r\n [splashScreenRefs]\r\n );\r\n\r\n useEffect(() => {\r\n const splashScreen = document.getElementById(\"splash-screen\");\r\n\r\n if (splashScreenVisible) {\r\n splashScreen.classList.remove(\"hidden\");\r\n\r\n return () => {\r\n splashScreen.classList.add(\"hidden\");\r\n };\r\n }\r\n\r\n const timeout = setTimeout(() => {\r\n splashScreen.classList.add(\"hidden\");\r\n }, 1000);\r\n\r\n return () => {\r\n clearTimeout(timeout);\r\n };\r\n }, [splashScreenVisible]);\r\n\r\n // Pass state and dispatch to it's contexts.\r\n return (\r\n \r\n {depositStatus[v].name}\r\n
\r\n {title}
}\r\n *{title}
;\r\n * }\r\n */\r\nexport function useLayoutContext() {\r\n const context = useContext(LayoutContext.State);\r\n\r\n if (!context) {\r\n throw new Error(\"\");\r\n }\r\n\r\n return context;\r\n}\r\n\r\n/**\r\n * Used to override layout subheader state.\r\n */\r\nexport function LayoutSubheader({ title, breadcrumb, description }) {\r\n const dispatch = useContext(LayoutContext.Dispatch);\r\n\r\n useEffect(() => {\r\n dispatch({\r\n type: actionTypes.SET_SUBHEADER,\r\n payload: { title, breadcrumb, description }\r\n });\r\n }, [dispatch, title, breadcrumb, description]);\r\n\r\n return null;\r\n}\r\n\r\nexport function LayoutSplashScreen({ visible = false }) {\r\n const dispatch = useContext(LayoutContext.Dispatch);\r\n\r\n useEffect(() => {\r\n if (!visible) {\r\n return;\r\n }\r\n\r\n const id = Math.random();\r\n\r\n dispatch({ type: actionTypes.SHOW_SPLASH_SCREEN, payload: { id } });\r\n\r\n return () => {\r\n dispatch({ type: actionTypes.HIDE_SPLASH_SCREEN, payload: { id } });\r\n };\r\n }, [visible, dispatch]);\r\n\r\n return null;\r\n}\r\n","import React from 'react'\r\nimport { Link } from 'react-router-dom'\r\n\r\nconst Empty = () => {\r\n return (\r\n\r\n {/*begin::Card body*/}\r\n
\r\n\r\n )\r\n}\r\n\r\nexport default Empty","import React, { useEffect, useState } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { Redirect, useHistory, useLocation, useParams } from \"react-router-dom\";\r\nimport { getOrderDetailAction } from \"../../actions/Order\";\r\nimport Configuration from \"../../configs/Config\";\r\nimport { LayoutSplashScreen } from \"../../layout/LayoutContext\";\r\nimport Empty from \"../../partials/Empty\";\r\nimport { getOrderDetail } from \"../../services/OrderService\";\r\nimport Common from \"../../utils/Common\";\r\nimport { t, toAbsoluteUrl } from \"../../utils/utils\";\r\n\r\nconst PaymentStatus = {\r\n Created: 1,\r\n Process: 1 << 5,\r\n Canceled: 1 << 10, //1024\r\n Timeout: 1 << 15, //32768\r\n Failed: 1 << 20, //1048576\r\n Closed: 1 << 25, //33554432\r\n Refunded: 1 << 30,\r\n};\r\n\r\nexport function getPaymentStatus(payment) {\r\n let paymentStatus = {\r\n title: t(\"Not applied\"),\r\n\r\n className: \"#EEEEEE\",\r\n };\r\n if (payment) {\r\n if (\r\n (PaymentStatus.Refunded & payment.allStatus) ===\r\n PaymentStatus.Refunded\r\n ) {\r\n paymentStatus = {\r\n ...paymentStatus,\r\n title: t(\"Refunded\"),\r\n className: \"badge-danger\",\r\n };\r\n } else if (\r\n (PaymentStatus.Closed & payment.allStatus) ===\r\n PaymentStatus.Closed\r\n ) {\r\n paymentStatus = {\r\n ...paymentStatus,\r\n title: t(\"Closed\"),\r\n className: \"badge-success\",\r\n };\r\n } else if (\r\n (PaymentStatus.Failed & payment.allStatus) ===\r\n PaymentStatus.Failed\r\n ) {\r\n paymentStatus = {\r\n ...paymentStatus,\r\n title: t(\"Failed\"),\r\n className: \"badge-danger\",\r\n };\r\n } else if (\r\n (PaymentStatus.Timeout & payment.allStatus) ===\r\n PaymentStatus.Timeout\r\n ) {\r\n paymentStatus = {\r\n ...paymentStatus,\r\n title: t(\"Timeout\"),\r\n className: \"badge-danger\",\r\n };\r\n } else if (\r\n (payment.allStatus & PaymentStatus.Process) ===\r\n PaymentStatus.Process\r\n ) {\r\n paymentStatus = {\r\n ...paymentStatus,\r\n title: t(\"Processing\"),\r\n className: \"badge-warning\",\r\n };\r\n } else if (\r\n (payment.allStatus & PaymentStatus.Created) ===\r\n PaymentStatus.Created\r\n ) {\r\n paymentStatus = {\r\n ...paymentStatus,\r\n title: t(\"Created\"),\r\n className: \"badge-info\",\r\n };\r\n }\r\n } else {\r\n paymentStatus = { ...paymentStatus, className: \"badge-dark\" };\r\n }\r\n return paymentStatus;\r\n}\r\n\r\nconst OrderDetail = () => {\r\n const { id } = useParams();\r\n const history = useHistory();\r\n const [order, setOrder] = useState();\r\n\r\n useEffect(() => {\r\n getOrderDetail(id).then((res) => setOrder(res.order));\r\n }, []);\r\n if (!order) return \r\n {/*begin::Wrapper*/}\r\n
\r\n {/*end::Card body*/}\r\n\r\n {/*begin::Title*/}\r\n \r\n Homepage\r\n \r\n {/*end::Action*/}\r\n
\r\n {/*end::Wrapper*/}\r\n {/*begin::Illustration*/}\r\n Welcome!
\r\n {/*end::Title*/}\r\n {/*begin::Description*/}\r\n\r\n There are no subscriptions added yet.\r\n
\r\n Kickstart your business by adding a your first subscription\r\n
\r\n
\r\n {/*end::Illustration*/}\r\n \r\n \r\n {/*begin::Orders*/}\r\n
\r\n {/*end::Tab pane*/}\r\n \r\n {/*end::Tab content*/}\r\n \r\n );\r\n};\r\n\r\nexport default OrderDetail;\r\n","import Common from \"../utils/Common\";\r\nimport Configuration from \"../configs/Config\";\r\nimport axios from \"axios\";\r\n\r\nexport const getSchedules = ({ from, to, targetId }) => {\r\n return Common.getDataGraphQl(`\r\n {\r\n schedules(param:{merchantId: \"${Common.getCookie(\r\n \"merchantId\"\r\n )}\", from:\"${from}\", to:\"${to}\", targetId:\"${targetId}\"})\r\n {\r\n items{\r\n id\r\n name\r\n targetId\r\n triggerDateTime\r\n }\r\n totalCount\r\n }\r\n }\r\n `);\r\n};\r\n\r\nexport const getListCalendarDetails = (email, from, to) => {\r\n return axios.post(\r\n `${Configuration.urlApi}/Google/GetListCalendarDetails?emailAddress=${email}&startDate=${from}&endDate=${to}`\r\n );\r\n};\r\n\r\nexport const createCalendarEvent = ({\r\n emailAddress,\r\n startTime,\r\n endTime,\r\n summary,\r\n location,\r\n description,\r\n mintues\r\n}) => {\r\n return axios.post(\r\n `${Configuration.urlApi}/Google/CreateCalendarEvent?emailAddress=${emailAddress}&startTime=${startTime}&endTime=${endTime}&summary=${summary}&location=${location}&description=${description}&method=email&mintues=${mintues}`\r\n );\r\n};\r\n","import React from \"react\";\r\nimport \"./Event.scss\";\r\n\r\nexport function Event({ event }) {\r\n const { title } = event;\r\n\r\n return (\r\n <>\r\n \r\n {/*begin:::Tabs*/}\r\n history.goBack()}\r\n className=\"btn btn-light-primary btn-sm\"\r\n >\r\n \r\n {t(\"Back\")}\r\n \r\n {/*end::Button*/}\r\n {/*begin::Button*/}\r\n\r\n {/*end::Button*/}\r\n
\r\n {/*begin::Order summary*/}\r\n - \r\n {/*begin:::Tab item*/}\r\n
- \r\n
\r\n {/*begin::Order details*/}\r\n
\r\n {/*end::Order summary*/}\r\n {/*begin::Tab content*/}\r\n \r\n {/*begin::Card header*/}\r\n
\r\n {/*end::Order details*/}\r\n {/*begin::Customer details*/}\r\n \r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n \r\n {t(\"Order Details\")} (#{order.code})\r\n
\r\n\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Table*/}\r\n \r\n {/*begin::Table body*/}\r\n \r\n {/*begin::Date*/}\r\n
\r\n {/*end::Table*/}\r\n
\r\n | \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/files/fil002.svg*/}\r\n \r\n \r\n | \r\n \r\n {Common.formatDateTimeMoment(order.createdDate)}\r\n | \r\n|||
| \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/finance/fin008.svg*/}\r\n \r\n \r\n | \r\n \r\n {order.payments?.length > 0 ? (\r\n
| \r\n
\r\n {/*begin::Card header*/}\r\n
\r\n {/*end::Customer details*/}\r\n {/*begin::Documents*/}\r\n\r\n {/*end::Documents*/}\r\n \r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n {t(\"Customer Info\")}
\r\n\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Table*/}\r\n \r\n {/*begin::Table body*/}\r\n \r\n {/*begin::Customer name*/}\r\n
\r\n {/*end::Table*/}\r\n
\r\n | \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/communication/com006.svg*/}\r\n \r\n \r\n | \r\n \r\n \r\n {order.userName || \"N/A\"}\r\n \r\n | \r\n
| \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/communication/com011.svg*/}\r\n \r\n \r\n | \r\n \r\n \r\n {order.userEmail || \"N/A\"}\r\n \r\n | \r\n
| \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/electronics/elc003.svg*/}\r\n \r\n \r\n | \r\n \r\n {order.userMobile || \"N/A\"}\r\n | \r\n
\r\n {/*begin::Tab pane*/}\r\n \r\n {/*begin::Orders*/}\r\n
\r\n {/*end::Tab pane*/}\r\n {/*begin::Tab pane*/}\r\n \r\n
\r\n {/*end::Orders*/}\r\n \r\n {/*begin::Payment address*/}\r\n\r\n {/*end::Payment address*/}\r\n {/*begin::Shipping address*/}\r\n\r\n {/*end::Shipping address*/}\r\n
\r\n {/*begin::Product List*/}\r\n \r\n {/*begin::Card header*/}\r\n
\r\n {/*end::Product List*/}\r\n \r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n \r\n {t(\"Order\")} #{order.code}\r\n
\r\n\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Table*/}\r\n \r\n {/*begin::Table head*/}\r\n \r\n
\r\n {/*end::Table*/}\r\n
\r\n {order.allStatus == 1? \r\n | {t(\"Name\")} | \r\n{t(\"Price\")} | \r\n {/*\r\n {t(\"Origin Price\")}\r\n | */}\r\n\r\n {t(\"Quantity\")}\r\n | \r\n{t(\"Total\")} | \r\n
|---|---|---|---|---|
| {targetName} | \r\n {/*end::Product*/}\r\n {/*begin::SKU*/}\r\n\r\n {Common.formatMoney(price)}\r\n | \r\n {/*end::SKU*/}\r\n {/*begin::Quantity*/}\r\n {/*\r\n {Common.formatMoney(originalPrice)}\r\n | */}\r\n {/*end::Quantity*/}\r\n {/*begin::Price*/}\r\n{quantity} | \r\n {/*end::Price*/}\r\n {/*begin::Total*/}\r\n\r\n {Common.formatMoney(total)}\r\n | \r\n {/*end::Total*/}\r\n
| \r\n {t(\"Sub total\")}\r\n | \r\n\r\n {Common.formatMoney(order.subTotal)}\r\n | \r\n|||
| \r\n {t(\"Shipping Amount\")}\r\n | \r\n\r\n {Common.formatMoney(order.shippingAmount) ||\r\n Common.formatMoney(0)}\r\n | \r\n|||
| \r\n {t(\"Grand Total\")}\r\n | \r\n\r\n {Common.formatMoney(order.grandTotal)}\r\n | \r\n
\r\n {\r\n history.replace(`/checkout/${order.id}`);\r\n }}\r\n className=\"btn btn-primary\"\r\n >\r\n {t(\"Checkout\")}\r\n \r\n
\r\n : null}\r\n \r\n \r\n {/*begin::Order history*/}\r\n
\r\n {/*end::Orders*/}\r\n \r\n {/*begin::Card header*/}\r\n
\r\n {/*end::Order history*/}\r\n {/*begin::Order data*/}\r\n \r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n Order History
\r\n\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Table*/}\r\n \r\n {/*begin::Table head*/}\r\n \r\n
\r\n {/*end::Table*/}\r\n
\r\n | {t(\"Created Date\")} | \r\nComment | \r\nOrder Status | \r\nCustomer Notifed | \r\n
|---|---|---|---|
| 31/12/2021 | \r\n {/*end::Date*/}\r\n {/*begin::Comment*/}\r\nOrder completed | \r\n {/*end::Comment*/}\r\n {/*begin::Status*/}\r\n\r\n {/*begin::Badges*/}\r\n \r\n Completed\r\n \r\n {/*end::Badges*/}\r\n | \r\n {/*end::Status*/}\r\n {/*begin::Customer Notified*/}\r\n No | \r\n {/*end::Customer Notified*/}\r\n
| 30/12/2021 | \r\n {/*end::Date*/}\r\n {/*begin::Comment*/}\r\nOrder received by customer | \r\n {/*end::Comment*/}\r\n {/*begin::Status*/}\r\n\r\n {/*begin::Badges*/}\r\n \r\n Delivered\r\n \r\n {/*end::Badges*/}\r\n | \r\n {/*end::Status*/}\r\n {/*begin::Customer Notified*/}\r\n Yes | \r\n {/*end::Customer Notified*/}\r\n
| 29/12/2021 | \r\n {/*end::Date*/}\r\n {/*begin::Comment*/}\r\nOrder shipped from warehouse | \r\n {/*end::Comment*/}\r\n {/*begin::Status*/}\r\n\r\n {/*begin::Badges*/}\r\n \r\n Delivering\r\n \r\n {/*end::Badges*/}\r\n | \r\n {/*end::Status*/}\r\n {/*begin::Customer Notified*/}\r\n Yes | \r\n {/*end::Customer Notified*/}\r\n
| 28/12/2021 | \r\n {/*end::Date*/}\r\n {/*begin::Comment*/}\r\nPayment received | \r\n {/*end::Comment*/}\r\n {/*begin::Status*/}\r\n\r\n {/*begin::Badges*/}\r\n \r\n Processing\r\n \r\n {/*end::Badges*/}\r\n | \r\n {/*end::Status*/}\r\n {/*begin::Customer Notified*/}\r\n No | \r\n {/*end::Customer Notified*/}\r\n
| 27/12/2021 | \r\n {/*end::Date*/}\r\n {/*begin::Comment*/}\r\nPending payment | \r\n {/*end::Comment*/}\r\n {/*begin::Status*/}\r\n\r\n {/*begin::Badges*/}\r\n \r\n Pending\r\n \r\n {/*end::Badges*/}\r\n | \r\n {/*end::Status*/}\r\n {/*begin::Customer Notified*/}\r\n No | \r\n {/*end::Customer Notified*/}\r\n
| 26/12/2021 | \r\n {/*end::Date*/}\r\n {/*begin::Comment*/}\r\nPayment method updated | \r\n {/*end::Comment*/}\r\n {/*begin::Status*/}\r\n\r\n {/*begin::Badges*/}\r\n \r\n Pending\r\n \r\n {/*end::Badges*/}\r\n | \r\n {/*end::Status*/}\r\n {/*begin::Customer Notified*/}\r\n No | \r\n {/*end::Customer Notified*/}\r\n
| 25/12/2021 | \r\n {/*end::Date*/}\r\n {/*begin::Comment*/}\r\nPayment method expired | \r\n {/*end::Comment*/}\r\n {/*begin::Status*/}\r\n\r\n {/*begin::Badges*/}\r\n Failed \r\n {/*end::Badges*/}\r\n | \r\n {/*end::Status*/}\r\n {/*begin::Customer Notified*/}\r\n Yes | \r\n {/*end::Customer Notified*/}\r\n
| 24/12/2021 | \r\n {/*end::Date*/}\r\n {/*begin::Comment*/}\r\nPending payment | \r\n {/*end::Comment*/}\r\n {/*begin::Status*/}\r\n\r\n {/*begin::Badges*/}\r\n \r\n Pending\r\n \r\n {/*end::Badges*/}\r\n | \r\n {/*end::Status*/}\r\n {/*begin::Customer Notified*/}\r\n No | \r\n {/*end::Customer Notified*/}\r\n
| 23/12/2021 | \r\n {/*end::Date*/}\r\n {/*begin::Comment*/}\r\nOrder received | \r\n {/*end::Comment*/}\r\n {/*begin::Status*/}\r\n\r\n {/*begin::Badges*/}\r\n \r\n Pending\r\n \r\n {/*end::Badges*/}\r\n | \r\n {/*end::Status*/}\r\n {/*begin::Customer Notified*/}\r\n Yes | \r\n {/*end::Customer Notified*/}\r\n
\r\n {/*begin::Card header*/}\r\n
\r\n {/*end::Order data*/}\r\n \r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n Order Data
\r\n\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Table*/}\r\n \r\n {/*begin::Table body*/}\r\n \r\n {/*begin::IP address*/}\r\n
\r\n {/*end::Table*/}\r\n
\r\n | IP Address | \r\n172.68.221.26 | \r\n
| Forwarded IP | \r\n89.201.163.49 | \r\n
| User Agent | \r\n\r\n Mozilla/5.0 (Windows NT 10.0; Win64; x64)\r\n AppleWebKit/537.36 (KHTML, like Gecko)\r\n Chrome/96.0.4664.110 Safari/537.36\r\n | \r\n
| Accept Language | \r\n\r\n en-GB,en-US;q=0.9,en;q=0.8\r\n | \r\n
\r\n {title}\r\n
\r\n \r\n );\r\n}\r\n\r\nexport default Event;\r\n","import React, { useMemo, useState } from \"react\";\r\nimport { ModalBody } from \"react-bootstrap\";\r\nimport { Button, Modal, ModalHeader } from \"reactstrap\";\r\nimport Autocomplete from \"react-google-autocomplete\";\r\nimport { Col, FormGroup, Label, Row } from \"reactstrap\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport ReactDatePicker from \"react-datepicker\";\r\nimport FormFeedback from \"reactstrap/lib/FormFeedback\";\r\nimport moment from \"moment\";\r\nimport { ModalFooter } from \"react-bootstrap\";\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport \"./ModalCreateEvent.scss\";\r\nimport Spinner from \"reactstrap/lib/Spinner\";\r\nimport { toast } from \"react-toastify\";\r\nimport { createCalendarEvent } from \"../../services/ScheduleService\";\r\n\r\nfunction ModalCreateEvent({ dataModal, setData, email, onSuccess }) {\r\n const [isLoading, setLoading] = useState(false);\r\n const [location, setLocation] = useState();\r\n const { handleSubmit, register, errors, setError, clearError } = useForm();\r\n\r\n const onPlaceSelected = place => {\r\n const { formatted_address } = place;\r\n setLocation(formatted_address);\r\n };\r\n\r\n const handleClose = () => {\r\n setData({\r\n open: false\r\n });\r\n };\r\n\r\n const onCreate = values => {\r\n if (isLoading) return;\r\n if (!validate()) return;\r\n const { start, end } = dataModal;\r\n const from = moment(start).format(\"YYYY-MM-DDTHH:mm:ss\");\r\n const to = moment(end).format(\"YYYY-MM-DDTHH:mm:ss\");\r\n const { description, minutes, summary } = values;\r\n const requestData = {\r\n method: \"email\",\r\n emailAddress: email,\r\n startTime: from,\r\n endTime: to,\r\n summary,\r\n location,\r\n description,\r\n mintues: minutes\r\n };\r\n setLoading(true);\r\n createCalendarEvent(requestData)\r\n .then(res => {\r\n if (res && res.data && res.data.HtmlLink) {\r\n setLoading(false);\r\n onSuccess();\r\n return toast[\"success\"](\"Đặt lịch thành công.\");\r\n } else {\r\n return toast[\"error\"](\"Đã xảy ra lỗi khi đặt lịch.\");\r\n }\r\n })\r\n .catch(error => {\r\n setLoading(false);\r\n console.error(error);\r\n });\r\n };\r\n\r\n const minDate = useMemo(() => {\r\n const { start } = dataModal;\r\n // const diff = moment(start).diff(moment(new Date()), \"days\");\r\n return moment(start)\r\n .set(\"hour\", 8)\r\n .set(\"minute\", 0)\r\n .toDate();\r\n }, [dataModal]);\r\n\r\n const validate = () => {\r\n if (!location) {\r\n setError(\"address\", \"manual\", \"Trường bắt buộc\");\r\n return false;\r\n } else {\r\n clearError(\"address\");\r\n return true;\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n\r\n {errors.minutes && (\r\n \r\n
\r\n );\r\n};\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n userInfo: state.User.userInfo\r\n };\r\n};\r\nexport default connect(mapStateToProps)(Schedule);\r\n","import Configuration from \"../configs/Config\";\r\nimport axios from \"axios\";\r\nimport Common from \"../utils/Common\";\r\n\r\nexport const getListFileService = ({\r\n limit = 100,\r\n offset = 0,\r\n keyword = undefined,\r\n merchantId\r\n}) => {\r\n let _param = `merchantId:\"${merchantId}\", limit: ${limit}, offset: ${offset}`;\r\n _param += keyword ? `, keyword: \"${keyword}\"` : \"\";\r\n return Common.getDataGraphQl(`\r\n {\r\n files(param:{${_param}}){\r\n items {\r\n id,\r\n typeStorage,\r\n name,\r\n published,\r\n path,\r\n description\r\n },\r\n message,\r\n success,\r\n totalCount\r\n }\r\n }\r\n `);\r\n};\r\n\r\nexport const getDriveFiles = (email, folderId) => {\r\n return axios.post(\r\n `${Configuration.urlApi}/Google/GetListFileGoogleDrive?emailAddress=${email}&folderId=${folderId}`\r\n )\r\n};\r\n\r\nexport const getFileService = ({ id, merchantId }) => {\r\n return Common.getDataGraphQl(\r\n `\r\n {\r\n file(param:{id:\"${id}\",merchantId:\"${merchantId}\"}){\r\n id,\r\n name\r\n }\r\n }\r\n \r\n `\r\n );\r\n};\r\n\r\nexport const googleDrivePostFile = (email, formData, folderId) => {\r\n return axios.post(\r\n `${Configuration.urlApi}/Google/GoogleDrivePostFile?emailAddress=${email}&folderId=${folderId}`,\r\n formData\r\n );\r\n};\r\n","import React, { useEffect, useMemo, useRef, useState, useCallback } from \"react\";\r\nimport BootstrapTable from \"react-bootstrap-table-next\";\r\nimport paginationFactory from \"react-bootstrap-table2-paginator\";\r\nimport { Spinner, Button } from \"react-bootstrap\";\r\nimport { getListFileService, getDriveFiles } from \"../../services/DriveService\";\r\nimport overlayFactory from \"react-bootstrap-table2-overlay\";\r\nimport { useSelector } from \"react-redux\";\r\n\r\nimport \"./style.scss\";\r\nimport Configuration from \"../../configs/Config\";\r\nimport { Badge } from \"react-bootstrap\";\r\nimport { Link } from \"react-router-dom\";\r\n\r\nconst DriveList = props => {\r\n const userInfo = useSelector(state => state.User.userInfo);\r\n const [isLoading, setLoading] = useState(false);\r\n const merchantId = localStorage.getItem(Configuration.merchantId);\r\n\r\n const [state, setState] = useState({\r\n page: 1,\r\n sizePerPage: 10,\r\n hideSizePerPage: true,\r\n totalSize: 0,\r\n offset: 0,\r\n textSearch: \"\",\r\n field: \"createdDate\",\r\n sort: \"desc\",\r\n data: []\r\n });\r\n\r\n const refTable = useRef({\r\n textSearch: \"\",\r\n field: \"createdDate\",\r\n sort: \"desc\"\r\n });\r\n\r\n const handleTextSearch = value => {\r\n refTable.current.textSearch = value;\r\n };\r\n\r\n const onSearch = () => {\r\n const { page, sizePerPage } = state;\r\n const offset = (page - 1) * sizePerPage;\r\n loadData({\r\n limit: state.sizePerPage,\r\n offset,\r\n merchantId,\r\n keyword: refTable.current.textSearch\r\n });\r\n };\r\n\r\n const uploadFile = async () => {\r\n props.history.push(\"/drive/create\");\r\n };\r\n\r\n const folderId = \"1Xb7P22h3Ht9tXdbUOZno_EfdCGNA1KNg\"\r\n\r\n const loadData = async () => {\r\n setLoading(true);\r\n try {\r\n const response = await getDriveFiles(userInfo.email, folderId);\r\n if (response) {\r\n const name = Object.keys(response)[0];\r\n setState(() => ({\r\n data: response[name].DriveDetails\r\n }));\r\n }\r\n } catch (error) {\r\n console.error(error);\r\n } finally {\r\n setLoading(false);\r\n }\r\n };\r\n \r\n useEffect(() => {\r\n loadData(userInfo.email, folderId);\r\n }, [userInfo.email]);\r\n\r\n const handleTableChange = (_, { page, sizePerPage }) => {\r\n const offset = (page - 1) * sizePerPage;\r\n setState(state => ({\r\n ...state,\r\n page: page,\r\n offset\r\n }));\r\n loadData({\r\n limit: state.sizePerPage,\r\n offset,\r\n merchantId,\r\n keyword: refTable.current.textSearch\r\n });\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const columeStyle = { verticalAlign: \"middle\" };\r\n return [\r\n {\r\n text: \"Tên File\",\r\n dataField: \"FileName\",\r\n style: { ...columeStyle, maxWidth: 250, wordBreak: \"break-word\" },\r\n headerStyle: { maxWidth: 250 },\r\n headerAlign: (column, colIndex) => \"center\",\r\n align: \"left\"\r\n },\r\n {\r\n text: \"Trạng thái\",\r\n dataField: \"published\",\r\n style: { ...columeStyle, width: 150 },\r\n headerStyle: { width: 150 },\r\n headerAlign: (column, colIndex) => \"center\",\r\n align: \"center\",\r\n attrs: {\r\n valign: \"middle\"\r\n },\r\n formatter: (_, row) => {\r\n return row.published ? (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Lịch cá nhân
\r\n\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default DriveList;\r\n","import React, { createRef, useEffect, useMemo, useState, useCallback } from \"react\";\r\nimport { Spinner, Button, Form } from \"react-bootstrap\";\r\nimport {\r\n getFileService,\r\n googleDrivePostFile,\r\n getDriveFiles\r\n} from \"../../services/DriveService\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { toast } from \"react-toastify\";\r\n\r\nimport \"./style.scss\";\r\nimport Configuration from \"../../configs/Config\";\r\nimport Common from \"../../utils/Common\";\r\nimport { Col } from \"react-bootstrap\";\r\nimport { Row } from \"react-bootstrap\";\r\nimport FileType from \"file-type/browser\";\r\n\r\nconst DriveForm = props => {\r\n const id = props.match.params.id;\r\n const [isUploading, setUploading] = useState(false);\r\n const userInfo = useSelector(state => state.User.userInfo);\r\n const merchantId = localStorage.getItem(Configuration.merchantId);\r\n const [errors, setErrors] = useState({});\r\n const [state, setState] = useState({\r\n name: \"\"\r\n });\r\n\r\n const refFile = createRef();\r\n\r\n const validate = () => {\r\n let isValid = true;\r\n let nextErrors = {};\r\n if (!state.name) {\r\n isValid = false;\r\n nextErrors = { ...nextErrors, name: \"Vui lòng nhập tên file.\" };\r\n } else {\r\n nextErrors = { ...nextErrors, name: \"\" };\r\n }\r\n if (!id && !refFile.current.files.length === 0) {\r\n isValid = false;\r\n nextErrors = { ...nextErrors, file: \"Vui lòng chọn file.\" };\r\n } else {\r\n nextErrors = { ...nextErrors, file: \"\" };\r\n }\r\n setErrors(nextErrors);\r\n return isValid;\r\n };\r\n\r\n const fileChange = () => {\r\n // eslint-disable-next-line\r\n const name = refFile.current.value.replace(/.*[\\/\\\\]/, \"\");\r\n setState({\r\n ...state,\r\n name\r\n });\r\n };\r\n\r\n const loadData = async params => {\r\n setUploading(true);\r\n try {\r\n const response = await getFileService(params);\r\n if (response) {\r\n const name = Object.keys(response)[0];\r\n console.log(response[name]);\r\n setState(state => ({\r\n ...state,\r\n name: response[name].name\r\n }));\r\n }\r\n } catch (error) {\r\n console.error(error);\r\n } finally {\r\n setUploading(false);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (merchantId && id) {\r\n loadData({ id, merchantId });\r\n }\r\n }, [id, merchantId]);\r\n\r\n const title = useMemo(() => {\r\n return id ? \"Chỉnh sửa File\" : \"Tạo mới File\";\r\n }, [id]);\r\n\r\n const checkFileType = async file => {\r\n const type = await FileType.fromBlob(file);\r\n if (/image.*/.test(type.mime)) {\r\n return {\r\n fileType: Configuration.FileTypes.IMAGE,\r\n storageType: Configuration.StorageTypes.GOOGLE\r\n };\r\n }\r\n if (type.mime === \"application/pdf\") {\r\n return {\r\n fileType: Configuration.FileTypes.PDF,\r\n storageType: Configuration.StorageTypes.GOOGLE\r\n };\r\n }\r\n return null;\r\n };\r\n\r\n const folderId = \"1Xb7P22h3Ht9tXdbUOZno_EfdCGNA1KNg\"\r\n\r\n const uploadFile = async () => {\r\n if (isUploading) return;\r\n if (!validate()) return;\r\n const file = refFile.current.files[0];\r\n const fileType = await checkFileType(file);\r\n if (!fileType) return;\r\n const formData = new FormData();\r\n formData.append(\"\", file);\r\n setUploading(true);\r\n try {\r\n const response = await googleDrivePostFile(userInfo.email, formData, folderId);\r\n const { WebViewLink } = response.data;\r\n if (WebViewLink) {\r\n const body = {\r\n Id: Common.guid(),\r\n MerchantId: merchantId,\r\n Name: state.name,\r\n SubDescription: \"\",\r\n Description: \"\",\r\n TypeStorage: fileType.storageType,\r\n Type: fileType.fileType,\r\n Path: WebViewLink,\r\n ContentType: \"\",\r\n ContentLength: 0,\r\n CreatedDate: new Date(),\r\n CreatedBy: Common.getCookie(\"userId\")\r\n };\r\n await Common.sendCommand(\"File\", \"CreateFile\", body);\r\n props.history.push(\"/drive/list\");\r\n return toast[\"success\"](\"Upload file thành công.\");\r\n }\r\n } catch (error) {\r\n console.error(error);\r\n return toast[\"error\"](\"Upload file thất bại.\");\r\n } finally {\r\n setUploading(false);\r\n }\r\n };\r\n\r\n const updateFile = async () => {\r\n if (!validate()) return;\r\n const body = {\r\n Id: id,\r\n Name: state.name,\r\n SubDescription: \"\",\r\n Description: \"\",\r\n ModifiedDate: new Date(),\r\n ModifiedBy: Common.getCookie(\"userId\")\r\n };\r\n\r\n setUploading(true);\r\n try {\r\n const result = await Common.sendCommand(\"File\", \"UpdateFile\", body);\r\n if (result.data.Success) {\r\n props.history.push(\"/drive/list\");\r\n return toast[\"success\"](\"Cập nhật thông tin file thành công.\");\r\n } else return toast[\"error\"](\"Cập nhật thông tin file thất bại.\");\r\n } catch (error) {\r\n return toast[\"error\"](\"Cập nhật thông tin file thất bại.\");\r\n } finally {\r\n setUploading(false);\r\n }\r\n };\r\n\r\n const handleSubmit = e => {\r\n e.preventDefault();\r\n if (id) {\r\n updateFile();\r\n } else {\r\n uploadFile();\r\n }\r\n };\r\n\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 Danh sách File
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n handleTextSearch(event.target.value)}\r\n />\r\n
\r\n \r\n \r\n {isLoading && (\r\n
\r\n \r\n \r\n \r\n Upload\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default DriveForm;\r\n","import React from \"react\";\r\n\r\nconst Testview = () => {\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 {title}
\r\n\r\n {/*begin::Card*/}\r\n \r\n {/*begin::Modal dialog*/}\r\n
\r\n {/*end::Modal dialog*/}\r\n \r\n {/*end::Modal - New Card*/}\r\n {/*begin::Modal - Add task*/}\r\n \r\n {/*begin::Card header*/}\r\n \r\n \r\n Delete Selected\r\n \r\n
\r\n {/*end::Group actions*/}\r\n {/*begin::Modal - Adjust Balance*/}\r\n \r\n {/*begin::Card title*/}\r\n \r\n {/*begin::Svg Icon | path: icons/duotune/arrows/arr078.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}Export\r\n \r\n {/*end::Export*/}\r\n {/*begin::Add user*/}\r\n \r\n {/*begin::Svg Icon | path: icons/duotune/arrows/arr075.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}Add User\r\n \r\n {/*end::Add user*/}\r\n
\r\n {/*end::Toolbar*/}\r\n {/*begin::Group actions*/}\r\n \r\n {/*begin::Search*/}\r\n
\r\n {/*begin::Card title*/}\r\n {/*begin::Card toolbar*/}\r\n \r\n {/*begin::Svg Icon | path: icons/duotune/general/gen021.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n
\r\n {/*end::Search*/}\r\n \r\n {/*begin::Toolbar*/}\r\n \r\n {/*begin::Filter*/}\r\n \r\n {/*begin::Svg Icon | path: icons/duotune/general/gen031.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}Filter\r\n \r\n {/*begin::Menu 1*/}\r\n \r\n {/*begin::Header*/}\r\n
\r\n {/*end::Menu 1*/}\r\n {/*end::Filter*/}\r\n {/*begin::Export*/}\r\n \r\n
\r\n {/*end::Header*/}\r\n {/*begin::Separator*/}\r\n \r\n {/*end::Separator*/}\r\n {/*begin::Content*/}\r\n Filter Options
\r\n \r\n {/*begin::Input group*/}\r\n
\r\n {/*end::Content*/}\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 Select option\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {/*end::Input group*/}\r\n {/*begin::Input group*/}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Select option\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {/*end::Input group*/}\r\n {/*begin::Actions*/}\r\n \r\n \r\n Reset\r\n \r\n \r\n Apply\r\n \r\n
\r\n {/*end::Actions*/}\r\n \r\n
\r\n \r\n {/*begin::Modal content*/}\r\n
\r\n {/*end::Modal content*/}\r\n \r\n {/*begin::Modal header*/}\r\n
\r\n {/*end::Modal header*/}\r\n {/*begin::Modal body*/}\r\n \r\n {/*begin::Modal title*/}\r\n \r\n {/*begin::Svg Icon | path: icons/duotune/arrows/arr061.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n
\r\n {/*end::Close*/}\r\n Export Users
\r\n {/*end::Modal title*/}\r\n {/*begin::Close*/}\r\n\r\n {/*begin::Form*/}\r\n \r\n {/*begin::Input group*/}\r\n
\r\n {/*end::Modal body*/}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Input*/}\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 Select a role\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {/*end::Input group*/}\r\n {/*begin::Input group*/}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Input*/}\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 Select a format\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {/*end::Input group*/}\r\n {/*begin::Actions*/}\r\n \r\n \r\n Discard\r\n \r\n \r\n Submit\r\n \r\n Please wait...\r\n \r\n \r\n \r\n
\r\n {/*end::Actions*/}\r\n \r\n \r\n {/*end::Form*/}\r\n \r\n {/*begin::Modal content*/}\r\n
\r\n {/*end::Scroll*/}\r\n {/*begin::Actions*/}\r\n \r\n {/*begin::Modal header*/}\r\n
\r\n {/*end::Modal header*/}\r\n {/*begin::Modal body*/}\r\n \r\n {/*begin::Modal title*/}\r\n \r\n {/*begin::Svg Icon | path: icons/duotune/arrows/arr061.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n
\r\n {/*end::Close*/}\r\n Add User
\r\n {/*end::Modal title*/}\r\n {/*begin::Close*/}\r\n\r\n {/*begin::Form*/}\r\n \r\n {/*begin::Scroll*/}\r\n \r\n {/*begin::Input group*/}\r\n
\r\n {/*end::Input group*/}\r\n {/*begin::Input group*/}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Image placeholder*/}\r\n \r\n {/*begin::Preview existing avatar*/}\r\n \r\n \r\n {/*begin::Inputs*/}\r\n \r\n \r\n \r\n {/*end::Cancel*/}\r\n {/*begin::Remove*/}\r\n \r\n \r\n \r\n {/*end::Remove*/}\r\n
\r\n {/*end::Image input*/}\r\n {/*begin::Hint*/}\r\n \r\n Allowed file types: png, jpg, jpeg.\r\n
\r\n {/*end::Hint*/}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Input*/}\r\n
\r\n {/*end::Input group*/}\r\n {/*begin::Input group*/}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Input*/}\r\n
\r\n {/*end::Input group*/}\r\n {/*begin::Input group*/}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Roles*/}\r\n {/*begin::Input row*/}\r\n
\r\n {/*end::Input group*/}\r\n \r\n {/*begin::Radio*/}\r\n
\r\n {/*end::Input row*/}\r\n \r\n {/*begin::Input row*/}\r\n \r\n {/*begin::Input*/}\r\n \r\n
\r\n {/*end::Radio*/}\r\n \r\n Administrator\r\n
\r\n \r\n Best for business owners and company\r\n administrators\r\n
\r\n \r\n {/*end::Label*/}\r\n \r\n {/*begin::Radio*/}\r\n
\r\n {/*end::Input row*/}\r\n \r\n {/*begin::Input row*/}\r\n \r\n {/*begin::Input*/}\r\n \r\n
\r\n {/*end::Radio*/}\r\n \r\n Developer\r\n
\r\n \r\n Best for developers or people primarily using\r\n the API\r\n
\r\n \r\n {/*end::Label*/}\r\n \r\n {/*begin::Radio*/}\r\n
\r\n {/*end::Input row*/}\r\n \r\n {/*begin::Input row*/}\r\n \r\n {/*begin::Input*/}\r\n \r\n
\r\n {/*end::Radio*/}\r\n \r\n Analyst\r\n
\r\n \r\n Best for people who need full access to\r\n analytics data, but don't need to update\r\n business settings\r\n
\r\n \r\n {/*end::Label*/}\r\n \r\n {/*begin::Radio*/}\r\n
\r\n {/*end::Input row*/}\r\n \r\n {/*begin::Input row*/}\r\n \r\n {/*begin::Input*/}\r\n \r\n
\r\n {/*end::Radio*/}\r\n \r\n Support\r\n
\r\n \r\n Best for employees who regularly refund\r\n payments and respond to disputes\r\n
\r\n \r\n {/*end::Label*/}\r\n \r\n {/*begin::Radio*/}\r\n
\r\n {/*end::Input row*/}\r\n {/*end::Roles*/}\r\n \r\n {/*begin::Input*/}\r\n \r\n
\r\n {/*end::Radio*/}\r\n \r\n Trial\r\n
\r\n \r\n Best for people who need to preview content\r\n data, but don't need to make any updates\r\n
\r\n \r\n {/*end::Label*/}\r\n \r\n \r\n Discard\r\n \r\n \r\n Submit\r\n \r\n Please wait...\r\n \r\n \r\n \r\n
\r\n {/*end::Actions*/}\r\n \r\n \r\n {/*end::Form*/}\r\n \r\n {/*end::Modal body*/}\r\n \r\n {/*end::Modal content*/}\r\n \r\n {/*end::Modal dialog*/}\r\n \r\n {/*end::Modal - Add task*/}\r\n \r\n {/*end::Card toolbar*/}\r\n \r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n {/*begin::Table*/}\r\n \r\n
\r\n \r\n {/*end::Table*/}\r\n \r\n {/*end::Card body*/}\r\n \r\n {/*end::Card*/}\r\n \r\n );\r\n};\r\n\r\nexport default Testview;\r\n","import Configuration from \"../configs/Config\";\r\nimport Common from \"../utils/Common\";\r\n\r\nexport const getPointTransactions = (options) => {\r\n const languageId = localStorage.getItem(Configuration.languageId);\r\n const merchantId = localStorage.getItem(Configuration.merchantId);\r\n const tokenId = localStorage.getItem(Configuration.tokenId);\r\n const userId = localStorage.getItem(Configuration.userId);\r\n if (options === undefined) options = {};\r\n if (options.languageId === undefined)\r\n options.languageId = localStorage.getItem(Configuration.languageId);\r\n if (options.limit === undefined) options.limit = 1000000;\r\n if (options.offset === undefined) options.offset = 0;\r\n if (options.order === undefined) options.order = \"desc\";\r\n if (options.sort === undefined) options.sort = \"createdDate\";\r\n if (options.from === undefined) options.from = null;\r\n if (options.to === undefined) options.to = null;\r\n options.keyword = options.keyword === undefined ? \"\" : options.keyword;\r\n let param = `limit:${options.limit},offset:${options.offset},order:\"${options.order}\",sort:\"${options.sort}\"\r\n \r\n ,keyword:\"${options.keyword}\"\r\n ,tokenUser:\"${tokenId}\"\r\n ,targetId:\"${userId}\"\r\n ,languageId:\"${languageId}\"\r\n ,merchantId:\"${merchantId}\"`;\r\n if (options.from) {\r\n param += `,from: \"${options.from}\"`;\r\n }\r\n if (options.to) {\r\n param += `,to:\"${options.to}\"`;\r\n }\r\n var query = `\r\n {\r\n userpointtransactions(param:{${param}\r\n })\r\n {\r\n items {\r\n orderId\r\n id\r\n point\r\n targetName\r\n orderCode\r\n transactionType\r\n createdDate\r\n },\r\n \r\n totalCount\r\n }\r\n }\r\n `;\r\n return Common.getDataGraphQl(query);\r\n};\r\n","import * as React from \"react\";\r\nimport Configuration from \"../../../configs/Config\";\r\nimport { t, toAbsoluteUrl } from \"../../../utils/utils\";\r\nimport { Link, useLocation } from \"react-router-dom\";\r\nimport { useSelector } from \"react-redux\";\r\n\r\nexport default function NavbarProfile({setCurrentTab,currentTab}) {\r\n const userInfo = useSelector((state: any) => state.User.userInfo);\r\n const totalPoint = useSelector((state: any) => state.User.totalPoint);\r\n const userInfoMember = useSelector((state: any) => state.User.userInfoMember);\r\n const {\r\n userName,\r\n name,\r\n email,\r\n avatar,\r\n } = userInfo;\r\n const location = useLocation();\r\n console.log({ userInfo, totalPoint, userInfoMember }, \"18ss\");\r\n return (\r\n \r\n \r\n {/*begin::Table head*/}\r\n \r\n {/*begin::Table row*/}\r\n \r\n \r\n \r\n User\r\n \r\n \r\n Role\r\n \r\n \r\n Last login\r\n \r\n \r\n Two-step\r\n \r\n \r\n Joined Date\r\n \r\n \r\n Actions\r\n \r\n \r\n {/*end::Table row*/}\r\n \r\n {/*end::Table head*/}\r\n {/*begin::Table body*/}\r\n \r\n {/*begin::Table row*/}\r\n {/*end::Table row*/}\r\n {/*begin::Table row*/}\r\n {/*end::Table row*/}\r\n {/*begin::Table row*/}\r\n {/*end::Table row*/}\r\n {/*begin::Table row*/}\r\n {/*end::Table row*/}\r\n {/*begin::Table row*/}\r\n {/*end::Table row*/}\r\n {/*begin::Table row*/}\r\n {/*end::Table row*/}\r\n {/*begin::Table row*/}\r\n {/*end::Table row*/}\r\n {/*begin::Table row*/}\r\n {/*end::Table row*/}\r\n {/*begin::Table row*/}\r\n {/*end::Table row*/}\r\n {/*begin::Table row*/}\r\n {/*end::Table row*/}\r\n {/*begin::Table row*/}\r\n {/*end::Table row*/}\r\n {/*begin::Table row*/}\r\n {/*end::Table row*/}\r\n {/*begin::Table row*/}\r\n {/*end::Table row*/}\r\n {/*begin::Table row*/}\r\n {/*end::Table row*/}\r\n {/*begin::Table row*/}\r\n {/*end::Table row*/}\r\n {/*begin::Table row*/}\r\n {/*end::Table row*/}\r\n {/*begin::Table row*/}\r\n {/*end::Table row*/}\r\n {/*begin::Table row*/}\r\n {/*end::Table row*/}\r\n {/*begin::Table row*/}\r\n {/*end::Table row*/}\r\n {/*begin::Table row*/}\r\n {/*end::Table row*/}\r\n {/*begin::Table row*/}\r\n {/*end::Table row*/}\r\n \r\n {/*begin::Checkbox*/}\r\n \r\n \r\n {/*end::Checkbox*/}\r\n {/*begin::User=*/}\r\n \r\n {/*begin:: Avatar */}\r\n \r\n {/*end::User=*/}\r\n {/*begin::Role=*/}\r\n Administrator \r\n {/*end::Role=*/}\r\n {/*begin::Last login=*/}\r\n \r\n \r\n {/*end::Last login=*/}\r\n {/*begin::Two step=*/}\r\n \r\n 10 Nov 2022, 5:30 pm\r\n \r\n {/*begin::Joined*/}\r\n {/*begin::Action=*/}\r\n \r\n \r\n Actions\r\n {/*begin::Svg Icon | path: icons/duotune/arrows/arr072.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n \r\n {/*begin::Menu*/}\r\n \r\n {/*begin::Menu item*/}\r\n \r\n {/*end::Action=*/}\r\n \r\n \r\n {/*begin::Checkbox*/}\r\n \r\n \r\n {/*end::Checkbox*/}\r\n {/*begin::User=*/}\r\n \r\n {/*begin:: Avatar */}\r\n \r\n {/*end::User=*/}\r\n {/*begin::Role=*/}\r\n Analyst \r\n {/*end::Role=*/}\r\n {/*begin::Last login=*/}\r\n \r\n \r\n {/*end::Last login=*/}\r\n {/*begin::Two step=*/}\r\n \r\n \r\n {/*end::Two step=*/}\r\n {/*begin::Joined*/}\r\n \r\n 25 Oct 2022, 6:43 am\r\n \r\n {/*begin::Joined*/}\r\n {/*begin::Action=*/}\r\n \r\n \r\n Actions\r\n {/*begin::Svg Icon | path: icons/duotune/arrows/arr072.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n \r\n {/*begin::Menu*/}\r\n \r\n {/*begin::Menu item*/}\r\n \r\n {/*end::Action=*/}\r\n \r\n \r\n {/*begin::Checkbox*/}\r\n \r\n \r\n {/*end::Checkbox*/}\r\n {/*begin::User=*/}\r\n \r\n {/*begin:: Avatar */}\r\n \r\n {/*end::User=*/}\r\n {/*begin::Role=*/}\r\n Developer \r\n {/*end::Role=*/}\r\n {/*begin::Last login=*/}\r\n \r\n \r\n {/*end::Last login=*/}\r\n {/*begin::Two step=*/}\r\n \r\n 20 Jun 2022, 2:40 pm\r\n \r\n {/*begin::Joined*/}\r\n {/*begin::Action=*/}\r\n \r\n \r\n Actions\r\n {/*begin::Svg Icon | path: icons/duotune/arrows/arr072.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n \r\n {/*begin::Menu*/}\r\n \r\n {/*begin::Menu item*/}\r\n \r\n {/*end::Action=*/}\r\n \r\n \r\n {/*begin::Checkbox*/}\r\n \r\n \r\n {/*end::Checkbox*/}\r\n {/*begin::User=*/}\r\n \r\n {/*begin:: Avatar */}\r\n \r\n {/*end::User=*/}\r\n {/*begin::Role=*/}\r\n Support \r\n {/*end::Role=*/}\r\n {/*begin::Last login=*/}\r\n \r\n \r\n {/*end::Last login=*/}\r\n {/*begin::Two step=*/}\r\n \r\n \r\n {/*end::Two step=*/}\r\n {/*begin::Joined*/}\r\n \r\n 19 Aug 2022, 5:20 pm\r\n \r\n {/*begin::Joined*/}\r\n {/*begin::Action=*/}\r\n \r\n \r\n Actions\r\n {/*begin::Svg Icon | path: icons/duotune/arrows/arr072.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n \r\n {/*begin::Menu*/}\r\n \r\n {/*begin::Menu item*/}\r\n \r\n {/*end::Action=*/}\r\n \r\n \r\n {/*begin::Checkbox*/}\r\n \r\n \r\n {/*end::Checkbox*/}\r\n {/*begin::User=*/}\r\n \r\n {/*begin:: Avatar */}\r\n \r\n {/*end::User=*/}\r\n {/*begin::Role=*/}\r\n Developer \r\n {/*end::Role=*/}\r\n {/*begin::Last login=*/}\r\n \r\n \r\n {/*end::Last login=*/}\r\n {/*begin::Two step=*/}\r\n \r\n \r\n {/*end::Two step=*/}\r\n {/*begin::Joined*/}\r\n \r\n 10 Mar 2022, 9:23 pm\r\n \r\n {/*begin::Joined*/}\r\n {/*begin::Action=*/}\r\n \r\n \r\n Actions\r\n {/*begin::Svg Icon | path: icons/duotune/arrows/arr072.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n \r\n {/*begin::Menu*/}\r\n \r\n {/*begin::Menu item*/}\r\n \r\n {/*end::Action=*/}\r\n \r\n \r\n {/*begin::Checkbox*/}\r\n \r\n \r\n {/*end::Checkbox*/}\r\n {/*begin::User=*/}\r\n \r\n {/*begin:: Avatar */}\r\n \r\n {/*end::User=*/}\r\n {/*begin::Role=*/}\r\n Administrator \r\n {/*end::Role=*/}\r\n {/*begin::Last login=*/}\r\n \r\n \r\n {/*end::Last login=*/}\r\n {/*begin::Two step=*/}\r\n \r\n 21 Feb 2022, 11:30 am\r\n \r\n {/*begin::Joined*/}\r\n {/*begin::Action=*/}\r\n \r\n \r\n Actions\r\n {/*begin::Svg Icon | path: icons/duotune/arrows/arr072.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n \r\n {/*begin::Menu*/}\r\n \r\n {/*begin::Menu item*/}\r\n \r\n {/*end::Action=*/}\r\n \r\n \r\n {/*begin::Checkbox*/}\r\n \r\n \r\n {/*end::Checkbox*/}\r\n {/*begin::User=*/}\r\n \r\n {/*begin:: Avatar */}\r\n \r\n {/*end::User=*/}\r\n {/*begin::Role=*/}\r\n Trial \r\n {/*end::Role=*/}\r\n {/*begin::Last login=*/}\r\n \r\n \r\n {/*end::Last login=*/}\r\n {/*begin::Two step=*/}\r\n \r\n 20 Dec 2022, 8:43 pm\r\n \r\n {/*begin::Joined*/}\r\n {/*begin::Action=*/}\r\n \r\n \r\n Actions\r\n {/*begin::Svg Icon | path: icons/duotune/arrows/arr072.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n \r\n {/*begin::Menu*/}\r\n \r\n {/*begin::Menu item*/}\r\n \r\n {/*end::Action=*/}\r\n \r\n \r\n {/*begin::Checkbox*/}\r\n \r\n \r\n {/*end::Checkbox*/}\r\n {/*begin::User=*/}\r\n \r\n {/*begin:: Avatar */}\r\n \r\n {/*end::User=*/}\r\n {/*begin::Role=*/}\r\n Administrator \r\n {/*end::Role=*/}\r\n {/*begin::Last login=*/}\r\n \r\n \r\n {/*end::Last login=*/}\r\n {/*begin::Two step=*/}\r\n \r\n 25 Jul 2022, 5:30 pm\r\n \r\n {/*begin::Joined*/}\r\n {/*begin::Action=*/}\r\n \r\n \r\n Actions\r\n {/*begin::Svg Icon | path: icons/duotune/arrows/arr072.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n \r\n {/*begin::Menu*/}\r\n \r\n {/*begin::Menu item*/}\r\n \r\n {/*end::Action=*/}\r\n \r\n \r\n {/*begin::Checkbox*/}\r\n \r\n \r\n {/*end::Checkbox*/}\r\n {/*begin::User=*/}\r\n \r\n {/*begin:: Avatar */}\r\n \r\n {/*end::User=*/}\r\n {/*begin::Role=*/}\r\n Analyst \r\n {/*end::Role=*/}\r\n {/*begin::Last login=*/}\r\n \r\n \r\n {/*end::Last login=*/}\r\n {/*begin::Two step=*/}\r\n \r\n \r\n {/*end::Two step=*/}\r\n {/*begin::Joined*/}\r\n \r\n 10 Nov 2022, 5:20 pm\r\n \r\n {/*begin::Joined*/}\r\n {/*begin::Action=*/}\r\n \r\n \r\n Actions\r\n {/*begin::Svg Icon | path: icons/duotune/arrows/arr072.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n \r\n {/*begin::Menu*/}\r\n \r\n {/*begin::Menu item*/}\r\n \r\n {/*end::Action=*/}\r\n \r\n \r\n {/*begin::Checkbox*/}\r\n \r\n \r\n {/*end::Checkbox*/}\r\n {/*begin::User=*/}\r\n \r\n {/*begin:: Avatar */}\r\n \r\n {/*end::User=*/}\r\n {/*begin::Role=*/}\r\n Developer \r\n {/*end::Role=*/}\r\n {/*begin::Last login=*/}\r\n \r\n \r\n {/*end::Last login=*/}\r\n {/*begin::Two step=*/}\r\n \r\n 25 Oct 2022, 6:43 am\r\n \r\n {/*begin::Joined*/}\r\n {/*begin::Action=*/}\r\n \r\n \r\n Actions\r\n {/*begin::Svg Icon | path: icons/duotune/arrows/arr072.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n \r\n {/*begin::Menu*/}\r\n \r\n {/*begin::Menu item*/}\r\n \r\n {/*end::Action=*/}\r\n \r\n \r\n {/*end::Table body*/}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {/*end::Avatar*/}\r\n {/*begin::User details*/}\r\n \r\n
\r\n \r\n \r\n \r\n Emma Smith\r\n \r\n smith@kpmg.com\r\n
\r\n {/*begin::User details*/}\r\n Yesterday
\r\n \r\n \r\n Edit\r\n \r\n
\r\n {/*end::Menu item*/}\r\n {/*begin::Menu item*/}\r\n \r\n \r\n Delete\r\n \r\n
\r\n {/*end::Menu item*/}\r\n \r\n {/*end::Menu*/}\r\n \r\n
\r\n \r\n \r\n
\r\n {/*end::Avatar*/}\r\n {/*begin::User details*/}\r\n \r\n M\r\n
\r\n \r\n \r\n \r\n Melody Macy\r\n \r\n melody@altbox.com\r\n
\r\n {/*begin::User details*/}\r\n \r\n 20 mins ago\r\n
\r\n \r\n Enabled\r\n
\r\n \r\n \r\n Edit\r\n \r\n
\r\n {/*end::Menu item*/}\r\n {/*begin::Menu item*/}\r\n \r\n \r\n Delete\r\n \r\n
\r\n {/*end::Menu item*/}\r\n \r\n {/*end::Menu*/}\r\n \r\n
\r\n \r\n \r\n
\r\n {/*end::Avatar*/}\r\n {/*begin::User details*/}\r\n \r\n
\r\n \r\n \r\n \r\n Max Smith\r\n \r\n max@kt.com\r\n
\r\n {/*begin::User details*/}\r\n \r\n 3 days ago\r\n
\r\n \r\n \r\n Edit\r\n \r\n
\r\n {/*end::Menu item*/}\r\n {/*begin::Menu item*/}\r\n \r\n \r\n Delete\r\n \r\n
\r\n {/*end::Menu item*/}\r\n \r\n {/*end::Menu*/}\r\n \r\n
\r\n \r\n \r\n
\r\n {/*end::Avatar*/}\r\n {/*begin::User details*/}\r\n \r\n
\r\n \r\n \r\n \r\n Sean Bean\r\n \r\n sean@dellito.com\r\n
\r\n {/*begin::User details*/}\r\n \r\n 5 hours ago\r\n
\r\n \r\n Enabled\r\n
\r\n \r\n \r\n Edit\r\n \r\n
\r\n {/*end::Menu item*/}\r\n {/*begin::Menu item*/}\r\n \r\n \r\n Delete\r\n \r\n
\r\n {/*end::Menu item*/}\r\n \r\n {/*end::Menu*/}\r\n \r\n
\r\n \r\n \r\n
\r\n {/*end::Avatar*/}\r\n {/*begin::User details*/}\r\n \r\n
\r\n \r\n \r\n \r\n Brian Cox\r\n \r\n brian@exchange.com\r\n
\r\n {/*begin::User details*/}\r\n \r\n 2 days ago\r\n
\r\n \r\n Enabled\r\n
\r\n \r\n \r\n Edit\r\n \r\n
\r\n {/*end::Menu item*/}\r\n {/*begin::Menu item*/}\r\n \r\n \r\n Delete\r\n \r\n
\r\n {/*end::Menu item*/}\r\n \r\n {/*end::Menu*/}\r\n \r\n
\r\n \r\n \r\n
\r\n {/*end::Avatar*/}\r\n {/*begin::User details*/}\r\n \r\n C\r\n
\r\n \r\n \r\n \r\n Mikaela Collins\r\n \r\n mik@pex.com\r\n
\r\n {/*begin::User details*/}\r\n \r\n 5 days ago\r\n
\r\n \r\n \r\n Edit\r\n \r\n
\r\n {/*end::Menu item*/}\r\n {/*begin::Menu item*/}\r\n \r\n \r\n Delete\r\n \r\n
\r\n {/*end::Menu item*/}\r\n \r\n {/*end::Menu*/}\r\n \r\n
\r\n \r\n \r\n
\r\n {/*end::Avatar*/}\r\n {/*begin::User details*/}\r\n \r\n
\r\n \r\n \r\n \r\n Francis Mitcham\r\n \r\n f.mit@kpmg.com\r\n
\r\n {/*begin::User details*/}\r\n \r\n 3 weeks ago\r\n
\r\n \r\n \r\n Edit\r\n \r\n
\r\n {/*end::Menu item*/}\r\n {/*begin::Menu item*/}\r\n \r\n \r\n Delete\r\n \r\n
\r\n {/*end::Menu item*/}\r\n \r\n {/*end::Menu*/}\r\n \r\n
\r\n \r\n \r\n
\r\n {/*end::Avatar*/}\r\n {/*begin::User details*/}\r\n \r\n O\r\n
\r\n \r\n \r\n \r\n Olivia Wild\r\n \r\n olivia@corpmail.com\r\n
\r\n {/*begin::User details*/}\r\n Yesterday
\r\n \r\n \r\n Edit\r\n \r\n
\r\n {/*end::Menu item*/}\r\n {/*begin::Menu item*/}\r\n \r\n \r\n Delete\r\n \r\n
\r\n {/*end::Menu item*/}\r\n \r\n {/*end::Menu*/}\r\n \r\n
\r\n \r\n \r\n
\r\n {/*end::Avatar*/}\r\n {/*begin::User details*/}\r\n \r\n N\r\n
\r\n \r\n \r\n \r\n Neil Owen\r\n \r\n owen.neil@gmail.com\r\n
\r\n {/*begin::User details*/}\r\n \r\n 20 mins ago\r\n
\r\n \r\n Enabled\r\n
\r\n \r\n \r\n Edit\r\n \r\n
\r\n {/*end::Menu item*/}\r\n {/*begin::Menu item*/}\r\n \r\n \r\n Delete\r\n \r\n
\r\n {/*end::Menu item*/}\r\n \r\n {/*end::Menu*/}\r\n \r\n
\r\n \r\n \r\n
\r\n {/*end::Avatar*/}\r\n {/*begin::User details*/}\r\n \r\n
\r\n \r\n \r\n \r\n Dan Wilson\r\n \r\n dam@consilting.com\r\n
\r\n {/*begin::User details*/}\r\n \r\n 3 days ago\r\n
\r\n \r\n \r\n Edit\r\n \r\n
\r\n {/*end::Menu item*/}\r\n {/*begin::Menu item*/}\r\n \r\n \r\n Delete\r\n \r\n
\r\n {/*end::Menu item*/}\r\n \r\n {/*end::Menu*/}\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","import React, { useEffect, useState } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport Table from \"../../../partials/table/Table\";\r\nimport { getPointTransactions } from \"../../../services/TransactionService\";\r\nimport Common from \"../../../utils/Common\";\r\nimport { t } from \"../../../utils/utils\";\r\nimport NavbarProfile from \"../components/NavbarProfile\";\r\n\r\nconst PointTransaction = () => {\r\n return (\r\n \r\n
\r\n \r\n {/*begin::Details*/}\r\n
\r\n {/*end::Details*/}\r\n {/*begin::Navs*/}\r\n \r\n {/*begin: Pic*/}\r\n
\r\n {/*end::Info*/}\r\n \r\n
\r\n {/*end::Pic*/}\r\n {/*begin::Info*/}\r\n \r\n
\r\n \r\n {/*begin::Title*/}\r\n
\r\n\r\n {/*end::Title*/}\r\n {/*begin::Stats*/}\r\n\r\n {/*end::Stats*/}\r\n \r\n {/*begin::User*/}\r\n
\r\n \r\n {/*begin::Name*/}\r\n
\r\n {/*end::User*/}\r\n {/*begin::Actions*/}\r\n\r\n {/*end::Actions*/}\r\n \r\n \r\n {name}\r\n \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/general/gen026.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n \r\n
\r\n {/*end::Name*/}\r\n {/*begin::Info*/}\r\n \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/communication/com011.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n {email}\r\n \r\n
\r\n {/*end::Info*/}\r\n \r\n {/*begin::Wrapper*/}\r\n
\r\n {/*end::Wrapper*/}\r\n {/*begin::Progress*/}\r\n\r\n {/*end::Progress*/}\r\n \r\n {/*begin::Stats*/}\r\n
\r\n {/*end::Stats*/}\r\n \r\n {/*begin::Stat*/}\r\n
\r\n \r\n {/*begin::Number*/}\r\n
\r\n {/*end::Number*/}\r\n {/*begin::Label*/}\r\n \r\n {/*begin::Svg Icon | path: icons/duotune/arrows/arr066.svg*/}\r\n {totalPoint < 0 ? (\r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n \r\n )}\r\n\r\n \r\n {totalPoint > 0 ? totalPoint: 0}\r\n
\r\n \r\n {t(\"Available Point\")}\r\n
\r\n {/*end::Label*/}\r\n \r\n {/*begin::Number*/}\r\n
\r\n\r\n {/*end::Stat*/}\r\n {/*begin::Stat*/}\r\n\r\n {/*end::Stat*/}\r\n \r\n {/*begin::Svg Icon | path: icons/duotune/arrows/arr065.svg*/}\r\n\r\n {/*begin::Svg Icon | path: assets/media/icons/duotune/general/gen029.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n\r\n {/*end::Svg Icon*/}\r\n
\r\n {/*end::Number*/}\r\n {/*begin::Label*/}\r\n \r\n {userInfoMember}\r\n
\r\n \r\n {t(\"Membership\")}\r\n
\r\n {/*end::Label*/}\r\n - \r\n {/*begin::Nav item*/}\r\n
- \r\n
- \r\n
- \r\n setCurrentTab(\"pointTransaction\")}\r\n className={`nav-link cursor-pointer text-active-primary ms-0 me-10 py-5 ${\r\n currentTab === \"pointTransaction\"\r\n ? \"active\"\r\n : null\r\n }`}\r\n >\r\n {t(\"Point Transaction History\")}\r\n \r\n \r\n
- \r\n
- \r\n
\r\n {Array.from({ length: getNumberOfStars(value)}, (v, i) => i + 1).map(() => (\r\n \r\n \r\n \r\n ))}\r\n {\r\n !getNumberOfStars(value) &&
\r\n );\r\n};\r\n\r\nexport default Stars;\r\n","import Axios from \"axios\";\r\nimport moment from \"moment\";\r\n\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\nimport { useLocalStorage, useSetState } from \"react-use\";\r\nimport Configuration from \"../../../../configs/Config\";\r\nimport Common from \"../../../../utils/Common\";\r\nimport { t } from \"../../../../utils/utils\";\r\nimport _ from \"lodash\";\r\nimport DateRangePicker from \"react-bootstrap-daterangepicker\";\r\nimport { useIntl } from \"react-intl\";\r\nimport Select from \"react-select\";\r\nimport { getProductsVacation } from \"../../../../services/ProductService\";\r\nimport { useHistory } from \"react-router\";\r\nimport { GoongGeocode } from \"../../../../utils/Gonggeocode\";\r\nimport \"./style.scss\";\r\nimport { useComponentVisible } from \"../../../../utils/customHook\";\r\n\r\nimport Stars from \"../../../../partials/Stars\";\r\n\r\nexport const getStarName = (attributeList) => {\r\n let name = \"\";\r\n if (attributeList && attributeList.length > 0) {\r\n attributeList.forEach((attribute) => {\r\n if (attribute.name === \"Hạng sao\") {\r\n attribute.attributeValues.forEach((attributeValue) => {\r\n name = attributeValue.value;\r\n });\r\n }\r\n });\r\n }\r\n\r\n return name;\r\n};\r\n\r\nconst ProductVacation = () => {\r\n const { push } = useHistory();\r\n const [options, setOptions] = useState([]);\r\n const [\r\n currentAddress,\r\n setCurrentAddress,\r\n removeCurrentAddress,\r\n ] = useLocalStorage(\"address\");\r\n const [loading, setLoading] = useState(false);\r\n const [products, setProducts] = useState([]);\r\n const [initialSettings, setInitialSettings] = useSetState({\r\n minDate: new Date(),\r\n autoApply: true,\r\n showDropdowns: true,\r\n autoUpdateInput: false,\r\n locale: {\r\n cancelLabel: true,\r\n },\r\n });\r\n const [picker, setPicker] = useState();\r\n const [location, setLocation, removeLocation] = useLocalStorage(\"location\");\r\n const [childAges, setChildAges] = useLocalStorage(\"childAges\", []);\r\n\r\n const [peopleParams, setPeopleParams] = useLocalStorage(\"peopleParams\", {\r\n adult: 1,\r\n child: 0,\r\n });\r\n const {\r\n isComponentVisible: isFilterVisible,\r\n ref: filterRef,\r\n setIsComponentVisible: setIsFilterVisible,\r\n } = useComponentVisible();\r\n const {\r\n isComponentVisible,\r\n ref,\r\n setIsComponentVisible,\r\n } = useComponentVisible();\r\n const [productType, setProductType] = useLocalStorage(\"productType\", \"0\");\r\n const [sizeParams, setSizeParams] = useSetState({\r\n from: 0,\r\n size: 10,\r\n });\r\n const [keyword, setKeyword] = useState(\"\");\r\n const [datePickerKey, setDatePickerKey] = useState(Common.guid());\r\n const [filterParams, setFilterParams] = useState(\"\");\r\n const [dateParams, setDateParams, removeDateParams] = useLocalStorage(\r\n \"dateParams\"\r\n );\r\n const [filterList, setFilterList] = useState([]);\r\n const [totalCount, setTotalCount] = useState(0);\r\n const [sortParam, setSortParam] = useSetState({\r\n order: \"asc\",\r\n });\r\n const selectInputRef = useRef();\r\n\r\n const getAttributes = async () => {\r\n return await Axios.post(\r\n `https://es.izzi.asia/attributes/attribute/_search?from=0&size=${10}`,\r\n {\r\n _source: { includes: [] },\r\n query: {\r\n bool: {\r\n must: [\r\n {\r\n bool: {\r\n should: [\r\n {\r\n match_phrase: {\r\n merchantId: localStorage.getItem(\r\n Configuration.merchantId\r\n ),\r\n },\r\n },\r\n ],\r\n },\r\n },\r\n\r\n {\r\n match: {\r\n languageId: localStorage.getItem(Configuration.languageId),\r\n },\r\n },\r\n\r\n {\r\n match: {\r\n id:\r\n \"3fee7713-d206-9f5f-beeb-72fe25672ae1,48735999-dec3-da81-ebb6-5ddc014f70d0,15f88ad6-b990-aaba-0786-7d1e09bb859c\",\r\n },\r\n },\r\n ],\r\n },\r\n },\r\n },\r\n {\r\n headers: {\r\n \"Content-type\": \"application/json\",\r\n Authorization: `Basic ${window.btoa(\"amara:dSPKMcdQkG5X97b\")}`,\r\n },\r\n }\r\n );\r\n };\r\n const getStars = async () => {\r\n return await Axios.post(\r\n `https://es.izzi.asia/attributes/attribute/_search?from=0&size=${10}`,\r\n {\r\n _source: { includes: [] },\r\n query: {\r\n bool: {\r\n must: [\r\n {\r\n bool: {\r\n should: [\r\n {\r\n match_phrase: {\r\n merchantId: localStorage.getItem(\r\n Configuration.merchantId\r\n ),\r\n },\r\n },\r\n ],\r\n },\r\n },\r\n\r\n {\r\n match: {\r\n languageId: localStorage.getItem(Configuration.languageId),\r\n },\r\n },\r\n {\r\n match: {\r\n id: \"867ebf80-6135-c782-b91f-1ea57cd2a807\",\r\n },\r\n },\r\n ],\r\n },\r\n },\r\n },\r\n {\r\n headers: {\r\n \"Content-type\": \"application/json\",\r\n Authorization: `Basic ${window.btoa(\"amara:dSPKMcdQkG5X97b\")}`,\r\n },\r\n }\r\n );\r\n };\r\n const handleUpdatepeopleParams = (type, direction) => {\r\n if (\r\n (direction === \"minus\" && type === \"adult\" && peopleParams.adult === 1) ||\r\n (direction === \"minus\" && type === \"child\" && peopleParams.child === 0)\r\n ) {\r\n return;\r\n }\r\n if (direction === \"plus\" && type === \"adult\") {\r\n setPeopleParams({\r\n ...peopleParams,\r\n adult: peopleParams.adult + 1,\r\n });\r\n }\r\n if (direction === \"plus\" && type === \"child\") {\r\n setPeopleParams({\r\n ...peopleParams,\r\n child: peopleParams.child + 1,\r\n });\r\n const tempChildAges = [...childAges];\r\n tempChildAges.push(1);\r\n setChildAges(tempChildAges);\r\n }\r\n if (direction === \"minus\" && type === \"child\") {\r\n setPeopleParams({\r\n ...peopleParams,\r\n child: peopleParams.child - 1,\r\n });\r\n const tempChildAges = [...childAges];\r\n tempChildAges.pop();\r\n setChildAges(tempChildAges);\r\n }\r\n if (direction === \"minus\" && type === \"adult\") {\r\n setPeopleParams({\r\n ...peopleParams,\r\n adult: peopleParams.adult - 1,\r\n });\r\n }\r\n };\r\n const handleGetProductVacation = ({\r\n peopleParams,\r\n dateParams,\r\n filterParams,\r\n keyword,\r\n sortParam,\r\n productType,\r\n location,\r\n }) => {\r\n setSizeParams({\r\n from: 0,\r\n size: 10,\r\n });\r\n setLoading(true);\r\n getProductsVacation({\r\n dateParams,\r\n filterParams,\r\n keyword,\r\n sortParam,\r\n productType,\r\n location,\r\n peopleParams,\r\n })\r\n .then((res) => {\r\n setProducts(res.data.hits.hits);\r\n setTotalCount(res.data.hits.total);\r\n })\r\n .finally(() => setLoading(false));\r\n };\r\n\r\n const handleSetProductType = (type) => {\r\n setProductType(type);\r\n\r\n handleGetProductVacation({\r\n peopleParams,\r\n dateParams,\r\n filterParams,\r\n location,\r\n keyword,\r\n sortParam,\r\n productType: type,\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n setLoading(true);\r\n\r\n const tempChildAges = childAges;\r\n\r\n const adultTotal = peopleParams.adult;\r\n setChildAges([...tempChildAges]);\r\n setPeopleParams({\r\n adult: adultTotal,\r\n child: tempChildAges.length,\r\n });\r\n getStars().then((res) => {\r\n const datas = res.data.hits.hits;\r\n /* setFilterParams([\r\n ...datas.map((data) => ({ id: data._id, currentValue: \"\" })),\r\n ]); */\r\n setFilterList((oldFilterList) => {\r\n const tempList = datas.map((data) => ({\r\n id: data._id,\r\n label: data._source.name,\r\n values: [...data._source.attributeValues],\r\n }));\r\n return [...oldFilterList, ...tempList];\r\n });\r\n });\r\n getAttributes().then((res) => {\r\n const datas = res.data.hits.hits;\r\n /* setFilterParams([\r\n ...datas.map((data) => ({ id: data._id, currentValue: \"\" })),\r\n ]); */\r\n setFilterList((oldFilterList) => {\r\n const tempList = datas.map((data) => ({\r\n id: data._id,\r\n label: data._source.name,\r\n values: [...data._source.attributeValues],\r\n }));\r\n return [...oldFilterList, ...tempList];\r\n });\r\n });\r\n \r\n if (childAges || peopleParams.adult) {\r\n getProductsVacation({\r\n productType,\r\n location,\r\n dateParams,\r\n peopleParams: {\r\n adult: peopleParams.adult,\r\n child: childAges.length,\r\n },\r\n })\r\n .then((res) => {\r\n setProducts(res.data.hits.hits);\r\n setTotalCount(res.data.hits.total);\r\n })\r\n .finally(() => setLoading(false));\r\n }\r\n if (dateParams?.from && dateParams?.to) {\r\n const tempFrom = dateParams.from;\r\n\r\n const tempTo = dateParams.to;\r\n\r\n setInitialSettings({\r\n autoUpdateInput: true,\r\n startDate: moment(tempFrom).format(\"DD-MM-YYYY\"),\r\n endDate: moment(tempTo).format(\"DD-MM-YYYY\"),\r\n });\r\n }\r\n }, []);\r\n useEffect(() => {\r\n setDatePickerKey(Common.guid());\r\n }, [initialSettings]);\r\n useEffect(() => {\r\n if (_.isEmpty(filterParams)) {\r\n setFilterParams(\"\");\r\n }\r\n }, [filterParams]);\r\n\r\n return (\r\n <>\r\n Chưa có hạng sao
\r\n }\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {/*begin::Select2*/}\r\n \r\n {\r\n if (options.length === 0) {\r\n GoongGeocode.getPlacePredictions(\"ha noi\").then(\r\n (predictions) => {\r\n setOptions(\r\n predictions.map((prediction) => ({\r\n label: prediction.description,\r\n value: prediction.place_id,\r\n }))\r\n );\r\n }\r\n );\r\n }\r\n }}\r\n defaultValue={currentAddress}\r\n placeholder=\"Bạn muốn đến đâu?\"\r\n ref={selectInputRef}\r\n className=\"form-control-solid placeholder-gray-500\"\r\n styles={{\r\n valueContainer: (base) => ({\r\n ...base,\r\n marginRight: \"25px\",\r\n }),\r\n input: (base) => ({\r\n ...base,\r\n\r\n fontSize: \"1.1rem\",\r\n paddingLeft: \"2.5rem\",\r\n }),\r\n singleValue: (base) => ({\r\n ...base,\r\n paddingLeft: \"2.5rem\",\r\n }),\r\n placeholder: (base) => ({\r\n ...base,\r\n color: \"#a9a5bd\",\r\n fontWeight: 500,\r\n fontSize: \"1.2rem\",\r\n paddingLeft: \"2.5rem\",\r\n }),\r\n indicatorsContainer: () => ({\r\n display: \"none\",\r\n }),\r\n container: (base) => ({\r\n ...base,\r\n width: \"100%\",\r\n }),\r\n control: (base, state) => ({\r\n ...base,\r\n\r\n boxShadow: \"0 !important\",\r\n borderWidth: \"3px !important\",\r\n backgroundColor: \"#f5f8fa !important\",\r\n borderColor: \"#f5f8fa !important\",\r\n color: \"#5e6278 !important\",\r\n \"&:hover\": {\r\n color: \"#5e6278 !important\",\r\n borderWidth: \"3px !important\",\r\n backgroundColor: \"#f5f8fa !important\",\r\n borderColor: \"#f5f8fa !important\",\r\n },\r\n }),\r\n }}\r\n onChange={(e) => {\r\n console.log(e, 460);\r\n setCurrentAddress(e);\r\n if (e?.value) {\r\n GoongGeocode.fromPlaceId(e.value).then((place) => {\r\n const { lat, lng } = place.geometry.location;\r\n const tempLocation = { lat: lat(), lon: lng() };\r\n setLocation(tempLocation);\r\n });\r\n }\r\n }}\r\n onInputChange={(e) => {\r\n GoongGeocode.getPlacePredictions(e).then((predictions) => {\r\n setOptions(\r\n predictions.map((prediction) => ({\r\n label: prediction.description,\r\n value: prediction.place_id,\r\n }))\r\n );\r\n });\r\n }}\r\n options={options}\r\n />\r\n {\r\n selectInputRef.current.clearValue();\r\n setCurrentAddress();\r\n setLocation(\"\");\r\n }}\r\n style={{ right: 0 }}\r\n className=\"svg-icon svg-icon-1 position-absolute me-4 cursor-pointer\"\r\n >\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {\r\n setPicker(picker);\r\n picker.element.val(\r\n picker.startDate.format(\"DD/MM/YYYY\") +\r\n \" - \" +\r\n picker.endDate.format(\"DD/MM/YYYY\")\r\n );\r\n const formattedStartDate = moment(\r\n picker.startDate,\r\n \"YYYY-MM-DD\"\r\n );\r\n const formattedEndDate = moment(picker.endDate, \"YYYY-MM-DD\");\r\n setDateParams({\r\n from: formattedStartDate,\r\n to: formattedEndDate,\r\n });\r\n }}\r\n >\r\n {\r\n setInitialSettings({\r\n autoUpdateInput: false,\r\n });\r\n\r\n removeDateParams();\r\n }}\r\n style={{ right: 0 }}\r\n className=\"svg-icon svg-icon-1 position-absolute me-4 cursor-pointer\"\r\n >\r\n \r\n
\r\n \r\n \r\n {\r\n if (!peopleParams) {\r\n setPeopleParams({\r\n child: 0,\r\n adult: 1,\r\n });\r\n }\r\n setIsComponentVisible(true);\r\n }}\r\n />\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n {t(\"Adult\")}:\r\n\r\n
\r\n \r\n \r\n handleUpdatepeopleParams(\"adult\", \"minus\")\r\n }\r\n className=\"fas cursor-pointer fa-minus-circle position-absolute minus-circle-postion fs-3\"\r\n >\r\n \r\n {peopleParams.adult}\r\n \r\n \r\n handleUpdatepeopleParams(\"adult\", \"plus\")\r\n }\r\n className=\"fas cursor-pointer fa-plus-circle position-absolute plus-circle-postion fs-3\"\r\n >\r\n
\r\n \r\n {t(\"Children\")}:\r\n
\r\n {peopleParams.child > 0 && (\r\n <>\r\n \r\n \r\n handleUpdatepeopleParams(\"child\", \"minus\")\r\n }\r\n className=\"fas cursor-pointer fa-minus-circle position-absolute minus-circle-postion fs-3\"\r\n >\r\n \r\n {peopleParams.child}\r\n \r\n \r\n handleUpdatepeopleParams(\"child\", \"plus\")\r\n }\r\n className=\"fas cursor-pointer fa-plus-circle position-absolute plus-circle-postion fs-3\"\r\n >\r\n
\r\n Tuổi trẻ em
\r\n \r\n {childAges.map((v, index) => {\r\n return (\r\n
\r\n \r\n )}\r\n \r\n {\r\n const tempChildAges = [...childAges];\r\n tempChildAges[index] = +e.target.value;\r\n setChildAges(tempChildAges);\r\n }}\r\n className=\"form-select text-center form-select-solid\"\r\n >\r\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(\r\n (num) => {\r\n return ;\r\n }\r\n )}\r\n \r\n
\r\n );\r\n })}\r\n \r\n {\r\n if (!currentAddress) {\r\n removeCurrentAddress();\r\n } else {\r\n setCurrentAddress(currentAddress);\r\n }\r\n if (!location) {\r\n removeLocation();\r\n } else {\r\n setLocation(location);\r\n }\r\n handleGetProductVacation({\r\n peopleParams,\r\n dateParams,\r\n filterParams,\r\n location,\r\n keyword,\r\n sortParam,\r\n productType,\r\n });\r\n }}\r\n className=\"btn btn-primary\"\r\n >\r\n {t(\"Search\")}\r\n \r\n
\r\n \r\n {loading && (\r\n
\r\n {/*end::Card toolbar*/}\r\n \r\n \r\n \r\n \r\n
\r\n )}\r\n {/*begin::Card header*/}\r\n \r\n {/*begin::Card title*/}\r\n
\r\n \r\n \r\n {/*begin::Search*/}\r\n
\r\n {/*begin::Card title*/}\r\n {/*begin::Card toolbar*/}\r\n\r\n \r\n handleSetProductType(\"0\")}\r\n className={`btn ${\r\n productType === \"0\" ? \"btn-primary\" : \"btn-light\"\r\n } w-lg-200px w-100 me-lg-3 mb-3 mb-lg-0`}\r\n >\r\n {t(\"Extra Vacation\")}\r\n \r\n handleSetProductType(\"1\")}\r\n className={`btn ${\r\n productType === \"1\" ? \"btn-primary\" : \"btn-light\"\r\n } w-lg-200px w-100 me-lg-3 mb-3 mb-lg-0`}\r\n >\r\n {t(\"Timeshare\")}\r\n \r\n\r\n handleSetProductType(\"2\")}\r\n className={`btn ${\r\n productType === \"2\" ? \"btn-primary\" : \"btn-light\"\r\n } w-lg-200px w-100 `}\r\n >\r\n {t(\"Bonus Week\")}\r\n \r\n
\r\n {/*end::Search*/}\r\n \r\n {/*begin::Toolbar*/}\r\n \r\n {/*begin::Filter*/}\r\n setIsFilterVisible(true)}\r\n className=\"btn btn-light-primary me-3\"\r\n data-kt-menu-placement=\"bottom-end\"\r\n >\r\n {/*begin::Svg Icon | path: icons/duotune/general/gen031.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n {t(\"Filter\")}\r\n \r\n {/*begin::Menu 1*/}\r\n \r\n {/*begin::Header*/}\r\n
\r\n \r\n \r\n {\r\n setSortParam({\r\n order: e.target.value,\r\n });\r\n handleGetProductVacation({\r\n peopleParams,\r\n location,\r\n dateParams,\r\n filterParams,\r\n keyword,\r\n productType,\r\n sortParam: { order: e.target.value },\r\n });\r\n }}\r\n placeholder=\"Chọn hạng phòng\"\r\n class=\"form-select form-select-solid\"\r\n >\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {/*end::Header*/}\r\n {/*begin::Separator*/}\r\n \r\n {/*end::Separator*/}\r\n {/*begin::Content*/}\r\n \r\n {t(\"Filter Options\")}\r\n
\r\n \r\n {/*begin::Input group*/}\r\n {filterList.map((item) => {\r\n return (\r\n
\r\n {/*end::Content*/}\r\n \r\n \r\n {\r\n if (e.length > 0) {\r\n setFilterParams((oldFilterParams) => ({\r\n ...oldFilterParams,\r\n [item.id]: e,\r\n }));\r\n } else {\r\n setFilterParams((oldFilterParams) => {\r\n const tempFilterParams = { ...oldFilterParams };\r\n delete tempFilterParams[item.id];\r\n return tempFilterParams;\r\n });\r\n }\r\n }}\r\n options={item.values.map((value) => ({\r\n label: item.label === \"Hạng sao\"?
\r\n );\r\n })}\r\n\r\n \r\n \r\n setFilterParams(\"\")}\r\n className=\"btn btn-light btn-active-light-primary fw-semibold me-2 px-6\"\r\n >\r\n {t(\"Reset Settings\")}\r\n \r\n {\r\n handleGetProductVacation({\r\n peopleParams,\r\n location,\r\n dateParams,\r\n filterParams,\r\n keyword,\r\n sortParam,\r\n productType,\r\n });\r\n console.log(JSON.stringify(dateParams, \"726\"));\r\n }}\r\n >\r\n {t(\"Search\")}\r\n \r\n
\r\n {/*end::Actions*/}\r\n \r\n
\r\n \r\n {/*begin::Col*/}\r\n {products.length > 0 ? (\r\n products.map((product) => {\r\n const { _source } = product;\r\n return (\r\n
\r\n \r\n {/*begin::Card widget 15*/}\r\n
\r\n );\r\n })\r\n ) : (\r\n \r\n {/*begin::Body*/}\r\n
\r\n {/*end::Card widget 15*/}\r\n \r\n {/*begin::Row*/}\r\n
\r\n {/*end::Body*/}\r\n \r\n {/*begin::Col*/}\r\n
\r\n {/*end::Row*/}\r\n \r\n {/*begin::Overlay*/}\r\n \r\n push(\r\n `/product-vacation/detail/list-vacation/${encodeURIComponent(\r\n _source.friendlyUrl\r\n )}`\r\n )\r\n }\r\n >\r\n {/*begin::Image*/}\r\n 0\r\n ? Configuration.staticDomain +\r\n _source.images[0].path +\r\n \"?mode=crop&width=300&height=300\"\r\n : \"\"\r\n })`,\r\n }}\r\n />\r\n \r\n {/*end::Image*/}\r\n {/*begin::Action*/}\r\n\r\n {/*end::Action*/}\r\n \r\n {/*end::Overlay*/}\r\n
\r\n {/*end::Col*/}\r\n {/*begin::Col*/}\r\n \r\n {/*begin::Wrapper*/}\r\n
\r\n {/*end::Col*/}\r\n \r\n {/*begin::Header*/}\r\n\r\n {/*begin::Title*/}\r\n\r\n \r\n push(\r\n `/product-vacation/detail/list-vacation/${encodeURIComponent(\r\n _source.friendlyUrl\r\n )}`\r\n )\r\n }\r\n >\r\n {_source.name}\r\n \r\n\r\n
\r\n {/*end::Wrapper*/}\r\n \r\n
\r\n {/*end::Title*/}\r\n {/*begin::Items*/}\r\n\r\n {/*begin::Item*/}\r\n \r\n {/*begin::Symbol*/}\r\n\r\n
\r\n \r\n \r\n {_source.detailAddress || \"N / A\"}\r\n
\r\n\r\n {/*end::Info*/}\r\n\r\n {/*begin::Symbol*/}\r\n\r\n
\r\n \r\n {t(\"Price From\")}\r\n \r\n {_source.fromPointPrice}\r\n {\" \"}{t(\"point\")}\r\n
\r\n\r\n {/*end::Info*/}\r\n\r\n {/*begin::Symbol*/}\r\n\r\n
\r\n {/*end::Item*/}\r\n {/*begin::Item*/}\r\n\r\n {/*end::Item*/}\r\n\r\n {/*end::Items*/}\r\n\r\n {/*end::Header*/}\r\n {/*begin::Body*/}\r\n\r\n {/*end::Body*/}\r\n {/*begin::Footer*/}\r\n\r\n {/*end::Footer*/}\r\n \r\n
\r\n {/*begin::Card body*/}\r\n
\r\n )}\r\n\r\n {/*end::Col*/}\r\n {/*begin::Col*/}\r\n\r\n {/*end::Col*/}\r\n \r\n {/*begin::Wrapper*/}\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Title*/}\r\n\r\n {/*end::Title*/}\r\n {/*begin::Description*/}\r\n
\r\n {/*end::Wrapper*/}\r\n {/*begin::Illustration*/}\r\n \r\n {t(\"No data\")}.\r\n
\r\n {/*end::Description*/}\r\n {/*begin::Action*/}\r\n\r\n {/*end::Action*/}\r\n\r\n
\r\n {/*end::Illustration*/}\r\n \r\n
\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default ProductVacation;\r\n","import moment from \"moment\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { useHistory, useParams } from \"react-router-dom\";\r\nimport { useSetState } from \"react-use\";\r\nimport Configuration from \"../../configs/Config\";\r\nimport { getDeposit } from \"../../services/OrderService\";\r\nimport Common from \"../../utils/Common\";\r\nimport { GoongGeocode } from \"../../utils/Gonggeocode\";\r\nimport { t } from \"../../utils/utils\";\r\nimport { depositStatus } from \"./constant\";\r\n\r\nconst DepositDetail = (props) => {\r\n const history = useHistory();\r\n const { id } = useParams();\r\n console.log(props.location.state, \"4\");\r\n const [deposit, setDeposit] = useState({});\r\n\r\n const {\r\n status,\r\n createdDate,\r\n owner,\r\n fromDate,\r\n toDate,\r\n addressName,\r\n detailAddress,\r\n \r\n images,\r\n standardOccupancy,\r\n productName,\r\n note,\r\n ownerMobile,\r\n ownerEmail,\r\n referenceCode,\r\n } = deposit;\r\n console.log(deposit, \"1555\");\r\n\r\n useEffect(() => {\r\n getDeposit(id).then((res) => setDeposit({ ...res.depositorder }));\r\n }, []);\r\n\r\n const depositImageLabel = [\r\n \"Thông tin khu nghỉ trên hợp đồng\",\r\n \"Thông tin chủ sở hữu trên hợp đồng\",\r\n \"Chữ ký và Dấu mộc của chủ sở hữu và khu nghỉ trên hợp đồng\",\r\n ];\r\n return (\r\n \r\n {products.length < totalCount && (\r\n {\r\n getProductsVacation({\r\n peopleParams,\r\n dateParams,\r\n filterParams,\r\n keyword,\r\n sortParam,\r\n productType: productType.toString(),\r\n location,\r\n sizeParams: {\r\n from: sizeParams.from + 10,\r\n size: 10,\r\n },\r\n }).then((res) => {\r\n setProducts([...products, ...res.data.hits.hits]);\r\n setTotalCount(res.data.hits.total);\r\n });\r\n setSizeParams({\r\n from: sizeParams.from + 10,\r\n });\r\n }}\r\n className=\"btn btn-primary\"\r\n >\r\n {t(\"Load more\")}\r\n \r\n )}\r\n
\r\n \r\n \r\n {/*begin::Orders*/}\r\n
\r\n {/*end::Tab pane*/}\r\n \r\n {/*end::Tab content*/}\r\n \r\n );\r\n};\r\n\r\nexport default DepositDetail;\r\n","export const PRODUCT = {\r\n GET_PRODUCT_VACATION: \"product/GET_PRODUCT_VACATION\"\r\n}\r\n\r\n ","\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { useDebounce, useSetState } from \"react-use\";\r\n\r\nimport { v4 } from \"uuid\";\r\n\r\ndeclare const goongjs: any;\r\n\r\nexport type IControlMapProps = {\r\n lat: number | undefined;\r\n lng: number | undefined;\r\n onChange: (latLng: { lat: number; lng: number }) => Promise\r\n {/*begin:::Tabs*/}\r\n \r\n {/*begin:::Tab item*/}\r\n \r\n \r\n {t(\"Detail Deposit\")}\r\n \r\n \r\n {/* \r\n \r\n {t(\"Deposit History\")}\r\n \r\n */}\r\n {/*end:::Tab item*/}\r\n {/*begin:::Tab item*/}\r\n\r\n {/*end:::Tab item*/}\r\n \r\n {/*end:::Tabs*/}\r\n {/*begin::Button*/}\r\n history.goBack()}\r\n className=\"btn btn-icon btn-light btn-sm ms-auto\"\r\n >\r\n {/*begin::Svg Icon | path: icons/duotune/arrows/arr074.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n \r\n {/*end::Button*/}\r\n {/*begin::Button*/}\r\n\r\n {/*end::Button*/}\r\n
\r\n {/*begin::Order summary*/}\r\n \r\n {/*begin::Order details*/}\r\n\r\n {/*end::Order details*/}\r\n {/*begin::Customer details*/}\r\n
\r\n {/*end::Order summary*/}\r\n {/*begin::Tab content*/}\r\n \r\n {/*begin::Card header*/}\r\n
\r\n \r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n {t(\"Detail Address\")}
\r\n\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Table*/}\r\n \r\n {/*begin::Table body*/}\r\n \r\n {/*begin::Customer name*/}\r\n
\r\n {/*end::Table*/}\r\n
\r\n | \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/communication/com006.svg*/}\r\n\r\n {/*end::Svg Icon*/}\r\n {t(\"Address Name\")}\r\n \r\n | \r\n \r\n \r\n {/*begin:: Avatar */}\r\n\r\n {/*end::Avatar*/}\r\n {/*begin::Name*/}\r\n \r\n {addressName}\r\n \r\n {/*end::Name*/}\r\n \r\n | \r\n
| \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/electronics/elc003.svg*/}\r\n\r\n {/*end::Svg Icon*/}\r\n {t(\"Detail Address\")}\r\n \r\n | \r\n \r\n {detailAddress || \"N / A\"}\r\n | \r\n
\r\n {/*begin::Card header*/}\r\n
\r\n {/*end::Customer details*/}\r\n {/*begin::Documents*/}\r\n\r\n \r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n {t(\"Room Type Information\")}
\r\n\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Table*/}\r\n \r\n {/*begin::Table body*/}\r\n \r\n {/*begin::Customer name*/}\r\n
\r\n {/*end::Table*/}\r\n
\r\n | \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/communication/com006.svg*/}\r\n\r\n {t(\"Room class\")}\r\n \r\n | \r\n \r\n \r\n {/*begin:: Avatar */}\r\n\r\n {/*end::Avatar*/}\r\n {/*begin::Name*/}\r\n \r\n {productName || \"N / A\"}\r\n \r\n {/*end::Name*/}\r\n \r\n | \r\n
| \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/communication/com011.svg*/}\r\n\r\n {/*end::Svg Icon*/}\r\n {t(\"Number of standard visited customer\")}\r\n \r\n | \r\n \r\n \r\n {standardOccupancy || \"N / A\"}\r\n \r\n | \r\n
| \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/electronics/elc003.svg*/}\r\n\r\n {/*end::Svg Icon*/}\r\n {t(\"Number of nights\")}\r\n \r\n | \r\n \r\n {moment(toDate).diff(moment(fromDate), \"days\")}\r\n | \r\n
\r\n {/*begin::Card header*/}\r\n
\r\n\r\n {/*end::Documents*/}\r\n \r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n {t(\"Date Timeshare\")}
\r\n\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Table*/}\r\n \r\n {/*begin::Table body*/}\r\n \r\n {/*begin::Date*/}\r\n
\r\n {/*end::Table*/}\r\n
\r\n | \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/files/fil002.svg*/}\r\n\r\n {/*end::Svg Icon*/}\r\n \r\n {t(\"Created Date\")} \r\n | \r\n \r\n {createdDate &&\r\n Common.formatDateTime(createdDate, \"DD-MM-YYYY\")}\r\n | \r\n
| \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/finance/fin008.svg*/}\r\n\r\n {/*end::Svg Icon*/}\r\n {t(\"Status\")}\r\n \r\n | \r\n \r\n {status && (\r\n | \r\n
| \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/ecommerce/ecm006.svg*/}\r\n {/*end::Svg Icon*/} {t(\"Check-in date\")}\r\n \r\n | \r\n \r\n {moment(fromDate).format(\"DD/MM/YYYY\")}\r\n | \r\n
| \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/ecommerce/ecm006.svg*/}\r\n {/*end::Svg Icon*/} {t(\"Check-out date\")}\r\n \r\n | \r\n \r\n {moment(toDate).format(\"DD/MM/YYYY\")}\r\n | \r\n
\r\n {/*begin::Tab pane*/}\r\n \r\n {/*begin::Orders*/}\r\n
\r\n {/*end::Tab pane*/}\r\n {/*begin::Tab pane*/}\r\n \r\n
\r\n {/*end::Orders*/}\r\n \r\n {/*begin::Payment address*/}\r\n
\r\n {/*begin::Product List*/}\r\n \r\n
\r\n {/*end::Payment address*/}\r\n {/*begin::Shipping address*/}\r\n \r\n {/*begin::Background*/}\r\n
\r\n \r\n
\r\n {/*end::Background*/}\r\n {/*begin::Card header*/}\r\n \r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n {t(\"Owner Information\")}
\r\n\r\n
\r\n {/*end::Card body*/}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {t(\"Contract Code\")}\r\n \r\n {referenceCode}\r\n
\r\n\r\n
\r\n {/*end::Shipping address*/}\r\n \r\n {/*begin::Background*/}\r\n\r\n {/*end::Background*/}\r\n {/*begin::Card header*/}\r\n
\r\n \r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n {t(\"Note\")}
\r\n{note}
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Card header*/}\r\n
\r\n {/*end::Product List*/}\r\n \r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n {t(\"Image of deposit information\")}
\r\n\r\n
\r\n {/*end::Card body*/}\r\n \r\n {images?.length > 0 ? (\r\n images.map((image, index) => {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n })\r\n ) : (\r\n \r\n {depositImageLabel[index]}\r\n
\r\n\r\n Chưa có ảnh thông tin\r\n
\r\n )}\r\n \r\n {/*begin::Order history*/}\r\n
\r\n {/*end::Orders*/}\r\n \r\n {/*begin::Card header*/}\r\n
\r\n {/*end::Order history*/}\r\n {/*begin::Order data*/}\r\n\r\n {/*end::Order data*/}\r\n \r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n {t(\"History\")}
\r\n\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Table*/}\r\n \r\n {/*begin::Table head*/}\r\n \r\n
\r\n {/*end::Table*/}\r\n
\r\n | Date Added | \r\nComment | \r\nOrder Status | \r\nCustomer Notifed | \r\n
|---|---|---|---|
| 23/09/2022 | \r\n {/*end::Date*/}\r\n {/*begin::Comment*/}\r\nOrder completed | \r\n {/*end::Comment*/}\r\n {/*begin::Status*/}\r\n\r\n {/*begin::Badges*/}\r\n \r\n Completed\r\n \r\n {/*end::Badges*/}\r\n | \r\n {/*end::Status*/}\r\n {/*begin::Customer Notified*/}\r\n No | \r\n {/*end::Customer Notified*/}\r\n
| 22/09/2022 | \r\n {/*end::Date*/}\r\n {/*begin::Comment*/}\r\nOrder received by customer | \r\n {/*end::Comment*/}\r\n {/*begin::Status*/}\r\n\r\n {/*begin::Badges*/}\r\n \r\n Delivered\r\n \r\n {/*end::Badges*/}\r\n | \r\n {/*end::Status*/}\r\n {/*begin::Customer Notified*/}\r\n Yes | \r\n {/*end::Customer Notified*/}\r\n
| 21/09/2022 | \r\n {/*end::Date*/}\r\n {/*begin::Comment*/}\r\nOrder shipped from warehouse | \r\n {/*end::Comment*/}\r\n {/*begin::Status*/}\r\n\r\n {/*begin::Badges*/}\r\n \r\n Delivering\r\n \r\n {/*end::Badges*/}\r\n | \r\n {/*end::Status*/}\r\n {/*begin::Customer Notified*/}\r\n Yes | \r\n {/*end::Customer Notified*/}\r\n
| 20/09/2022 | \r\n {/*end::Date*/}\r\n {/*begin::Comment*/}\r\nPayment received | \r\n {/*end::Comment*/}\r\n {/*begin::Status*/}\r\n\r\n {/*begin::Badges*/}\r\n \r\n Processing\r\n \r\n {/*end::Badges*/}\r\n | \r\n {/*end::Status*/}\r\n {/*begin::Customer Notified*/}\r\n No | \r\n {/*end::Customer Notified*/}\r\n
| 19/09/2022 | \r\n {/*end::Date*/}\r\n {/*begin::Comment*/}\r\nPending payment | \r\n {/*end::Comment*/}\r\n {/*begin::Status*/}\r\n\r\n {/*begin::Badges*/}\r\n \r\n Pending\r\n \r\n {/*end::Badges*/}\r\n | \r\n {/*end::Status*/}\r\n {/*begin::Customer Notified*/}\r\n No | \r\n {/*end::Customer Notified*/}\r\n
| 18/09/2022 | \r\n {/*end::Date*/}\r\n {/*begin::Comment*/}\r\nPayment method updated | \r\n {/*end::Comment*/}\r\n {/*begin::Status*/}\r\n\r\n {/*begin::Badges*/}\r\n \r\n Pending\r\n \r\n {/*end::Badges*/}\r\n | \r\n {/*end::Status*/}\r\n {/*begin::Customer Notified*/}\r\n No | \r\n {/*end::Customer Notified*/}\r\n
| 17/09/2022 | \r\n {/*end::Date*/}\r\n {/*begin::Comment*/}\r\nPayment method expired | \r\n {/*end::Comment*/}\r\n {/*begin::Status*/}\r\n\r\n {/*begin::Badges*/}\r\n Failed \r\n {/*end::Badges*/}\r\n | \r\n {/*end::Status*/}\r\n {/*begin::Customer Notified*/}\r\n Yes | \r\n {/*end::Customer Notified*/}\r\n
| 16/09/2022 | \r\n {/*end::Date*/}\r\n {/*begin::Comment*/}\r\nPending payment | \r\n {/*end::Comment*/}\r\n {/*begin::Status*/}\r\n\r\n {/*begin::Badges*/}\r\n \r\n Pending\r\n \r\n {/*end::Badges*/}\r\n | \r\n {/*end::Status*/}\r\n {/*begin::Customer Notified*/}\r\n No | \r\n {/*end::Customer Notified*/}\r\n
| 15/09/2022 | \r\n {/*end::Date*/}\r\n {/*begin::Comment*/}\r\nOrder received | \r\n {/*end::Comment*/}\r\n {/*begin::Status*/}\r\n\r\n {/*begin::Badges*/}\r\n \r\n Pending\r\n \r\n {/*end::Badges*/}\r\n | \r\n {/*end::Status*/}\r\n {/*begin::Customer Notified*/}\r\n Yes | \r\n {/*end::Customer Notified*/}\r\n
setToggler(!toggler)}>\r\n {\r\n isStandAlone &&
\r\n \r\n );\r\n};\r\n\r\nexport default LightBoxWrapper;\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { Link, useLocation, useParams } from \"react-router-dom\";\r\nimport { GetProductVacationDetailAction } from \"../../../../actions/Product\";\r\nimport Configuration from \"../../../../configs/Config\";\r\nimport { Map } from \"../../../../partials/Map\";\r\nimport { t } from \"../../../../utils/utils\";\r\nimport FsLightBox from \"fslightbox-react\";\r\nimport CustomModal from \"../../../../partials/modal/Modal\";\r\nimport Stars from \"../../../../partials/Stars\";\r\nimport { getStarName } from \"../list\";\r\nimport { getProductsVacation } from \"../../../../services/ProductService\";\r\nimport LightBoxWrapper from \"../../../../layout/lightbox/LighboxWrapper\";\r\n\r\nconst NavbarDetailAddress = () => {\r\n const dispatch = useDispatch();\r\n const { friendlyUrl } = useParams();\r\n const [toggler, setToggler] = useState(false);\r\n const [visible, setVisible] = useState(false);\r\n const location = useLocation();\r\n\r\n const productVacation = useSelector((state) => state.Product.productVacation);\r\n console.log(productVacation, \"155\");\r\n useEffect(() => {\r\n // getProductsVacation({ sizeParams: { from: 0, size: 100 } });\r\n dispatch(\r\n GetProductVacationDetailAction({\r\n friendlyUrl,\r\n productType: JSON.parse(localStorage.getItem(\"productType\")) || \"0\",\r\n sizeParams: {\r\n from: 0,\r\n size: 1,\r\n },\r\n })\r\n );\r\n }, []);\r\n return (\r\n \r\n \r\n Xem thêm\r\n \r\n
\r\n \r\n {/* Configuration.staticDomain + img.path\r\n )}\r\n /> */}\r\n console.log(\"submit\")}\r\n onHide={() => setVisible(false)}\r\n visible={visible}\r\n >\r\n {\r\n return (\r\n new Promise() <\r\n boolean >\r\n ((resolve) => {\r\n resolve(true);\r\n })\r\n );\r\n }}\r\n />\r\n \r\n
\r\n \r\n\r\n {/*end::Details*/}\r\n \r\n {/*begin::Nav*/}\r\n \r\n {/*begin::Details*/}\r\n
\r\n \r\n
\r\n \r\n Configuration.staticDomain + img.path\r\n )}\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n {/* \r\n setVisible(true)}\r\n className=\"fw-semibold text-hover-primary cursor-pointer mb-4 fs-5 text-gray-400 w-300px w-lg-500px\"\r\n >\r\n \r\n {productVacation?.detailAddress}\r\n
\r\n \r\n \r\n {productVacation?.name}\r\n \r\n
\r\n \r\n {t(\"Room Price\")} từ :\r\n \r\n \r\n {productVacation?.fromPointPrice}\r\n \r\n {t(\"Point\")}\r\n \r\n \r\n
*/}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {productVacation?.email || \"N / A\"}\r\n
\r\n \r\n {/*begin::Svg Icon | path: /var/www/preview.keenthemes.com/kt-products/docs/metronic/html/releases/2022-10-09-043348/core/html/src/media/icons/duotune/communication/com011.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n\r\n
\r\n\r\n Email
\r\n \r\n \r\n {productVacation?.mobile || \"N / A\"}\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n {t(\"Mobile\")}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {t(\"Star Rating\")}\r\n
\r\n - \r\n {/*begin::Nav item*/}\r\n
- \r\n
- \r\n
- \r\n \r\n \r\n {/*end::Nav item*/}\r\n {/*begin::Nav item*/}\r\n\r\n {/*end::Nav item*/}\r\n {/*begin::Nav item*/}\r\n\r\n {/*end::Nav item*/}\r\n
\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Search;\r\n","import moment from \"moment\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport { toast } from \"react-toastify\";\r\nimport { useLocalStorage } from \"react-use\";\r\nimport Configuration from \"../../../../../../configs/Config\";\r\nimport Table from \"../../../../../../partials/table/Table\";\r\nimport Common from \"../../../../../../utils/Common\";\r\nimport { t } from \"../../../../../../utils/utils\";\r\n\r\nconst Product = ({ product, dateParams, loading }) => {\r\n const [isOpenListVacation, setIsOpenListVacation] = useState(false);\r\n const [localStoragePeopleParams] = useLocalStorage(\"peopleParams\", {\r\n adult: 1,\r\n child: 0,\r\n });\r\n console.log(dateParams, \"1888\");\r\n console.log(moment(\"2022-12-21\").isBefore(moment(\"2022-12-23\")), \"177\");\r\n const [localStorageChildAges] = useLocalStorage(\"childAges\", []);\r\n const history = useHistory();\r\n\r\n const handleCreateOrder = ({ ProductId }) => {\r\n const orderId = Common.guid();\r\n Common.sendCommand(\"Sale\", \"CreateVacationOrder\", {\r\n Id: orderId,\r\n MerchantId: localStorage.getItem(Configuration.merchantId),\r\n CustomerId: localStorage.getItem(Configuration.userId),\r\n ActionBy: localStorage.getItem(Configuration.userId),\r\n ProductId,\r\n AdultTotal: localStoragePeopleParams.adult,\r\n ChildrenAges: localStorageChildAges,\r\n }).then((res) => {\r\n if (res.data.Success) {\r\n toast.success(t(\"Create Order Successfully\"));\r\n history.push(`/checkout/${orderId}`);\r\n } else {\r\n toast.error(res.data.Message);\r\n }\r\n });\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n {/*begin::Title*/}\r\n\r\n {/*begin::Search*/}\r\n\r\n
\r\n \r\n \r\n \r\n \r\n\r\n {\r\n picker.element.val(\"\");\r\n setInputValues({\r\n dates: \"\",\r\n });\r\n }}\r\n initialSettings={initialSettings}\r\n onApply={(event, picker) => {\r\n setPicker(picker);\r\n picker.element.val(\r\n picker.startDate.format(\"DD/MM/YYYY\") +\r\n \" - \" +\r\n picker.endDate.format(\"DD/MM/YYYY\")\r\n );\r\n const formattedStartDate = moment(\r\n picker.startDate,\r\n \"YYYY-MM-DD\"\r\n );\r\n const formattedEndDate = moment(picker.endDate, \"YYYY-MM-DD\");\r\n setInputValues({\r\n dates: {\r\n from: formattedStartDate,\r\n to: formattedEndDate,\r\n },\r\n });\r\n }}\r\n >\r\n {\r\n setInitialSettings({\r\n autoUpdateInput: false,\r\n });\r\n setInputValues({\r\n dates: \"\",\r\n });\r\n }}\r\n style={{ right: 0 }}\r\n className=\"svg-icon svg-icon-1 position-absolute me-4 cursor-pointer\"\r\n >\r\n \r\n
\r\n \r\n \r\n {\r\n if (!inputValues.people) {\r\n setInputValues({\r\n people: {\r\n adult: 1,\r\n child: 0,\r\n },\r\n });\r\n }\r\n setIsComponentVisible(true);\r\n }}\r\n />\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n {t(\"Adult\")}:\r\n\r\n
\r\n \r\n \r\n handleUpdateSearchPeopleData(\"adult\", \"minus\")\r\n }\r\n className=\"fas cursor-pointer fa-minus-circle position-absolute minus-circle-postion fs-3\"\r\n >\r\n \r\n {inputValues.people.adult}\r\n \r\n \r\n handleUpdateSearchPeopleData(\"adult\", \"plus\")\r\n }\r\n className=\"fas cursor-pointer fa-plus-circle position-absolute plus-circle-postion fs-3\"\r\n >\r\n
\r\n \r\n {t(\"Children\")}:\r\n
\r\n {inputValues.people.child > 0 && (\r\n <>\r\n \r\n \r\n handleUpdateSearchPeopleData(\"child\", \"minus\")\r\n }\r\n className=\"fas cursor-pointer fa-minus-circle position-absolute minus-circle-postion fs-3\"\r\n >\r\n \r\n {inputValues.people.child}\r\n \r\n \r\n handleUpdateSearchPeopleData(\"child\", \"plus\")\r\n }\r\n className=\"fas cursor-pointer fa-plus-circle position-absolute plus-circle-postion fs-3\"\r\n >\r\n
\r\n Tuổi trẻ em
\r\n \r\n {childAges.map((v, index) => {\r\n return (\r\n
\r\n \r\n )}\r\n \r\n \r\n setChildAges((oldChildAges) => {\r\n const tempChildAges = [...oldChildAges];\r\n tempChildAges[index] = +e.target.value;\r\n return tempChildAges;\r\n })\r\n }\r\n className=\"form-select text-center form-select-solid\"\r\n >\r\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(\r\n (num) => {\r\n return ;\r\n }\r\n )}\r\n \r\n
\r\n );\r\n })}\r\n \r\n {\r\n setLoading(true);\r\n if (!inputValues.dates) {\r\n removeDateParams();\r\n setDateParams({\r\n from: new Date(),\r\n to: \"\",\r\n });\r\n } else {\r\n setLocalStorageDateParams({\r\n from: inputValues.dates.from,\r\n to: inputValues.dates.to,\r\n });\r\n\r\n setDateParams({\r\n from: inputValues.dates.from,\r\n to: inputValues.dates.to,\r\n });\r\n }\r\n\r\n setLocalStorageChildAges(childAges);\r\n setLocalStoragePeopleParams({\r\n child: inputValues.people.child,\r\n adult: inputValues.people.adult,\r\n });\r\n\r\n setPeopleParams({\r\n child: inputValues.people.child,\r\n adult: inputValues.people.adult,\r\n });\r\n _.debounce(() => {\r\n setLoading(false);\r\n }, 300)();\r\n }}\r\n className=\"btn btn-primary py-4 fs-3\"\r\n >\r\n {t(\"Search\")}\r\n \r\n
\r\n {/*end::Search*/}\r\n\r\n {/*end::Title*/}\r\n {/*begin::Controls*/}\r\n\r\n {/*end::Controls*/}\r\n \r\n {/*begin::Card widget 15*/}\r\n
\r\n );\r\n};\r\n\r\nexport default Product;\r\n","import moment from \"moment\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { useParams } from \"react-router\";\r\nimport { useSetState } from \"react-use\";\r\nimport { GetProductVacationDetailAction } from \"../../../../../../actions/Product\";\r\nimport Configuration from \"../../../../../../configs/Config\";\r\nimport Table from \"../../../../../../partials/table/Table\";\r\nimport Common from \"../../../../../../utils/Common\";\r\nimport { t, toAbsoluteUrl } from \"../../../../../../utils/utils\";\r\nimport NavbarDetailAddress from \"../../../component/NavbarDetailAddress\";\r\nimport Search from \"../../../component/Search\";\r\nimport Product from \"./Product\";\r\n\r\nconst ListProduct = () => {\r\n const [dateParams, setDateParams] = useSetState({\r\n from: new Date(),\r\n to: \"\",\r\n });\r\n const [peopleParams, setPeopleParams] = useState();\r\n const [loading, setLoading] = useState(false);\r\n const [products, setProducts] = useState([]);\r\n const productVacation = useSelector((state) => state.Product.productVacation);\r\n\r\n const tempProducts = productVacation?.products;\r\n useEffect(() => {\r\n if (tempProducts?.length > 0) {\r\n const filteredProducts = tempProducts\r\n .filter((product) => {\r\n return dateParams.from && !dateParams.to\r\n ? product.variants?.filter((variant) =>\r\n moment(variant.fromDate).isAfter(moment(dateParams.from))\r\n ).length > 0\r\n : product.variants?.filter((variant) =>\r\n moment(variant.fromDate).isAfter(moment(dateParams.from))\r\n ).length > 0;\r\n })\r\n .filter((product) =>\r\n peopleParams\r\n ? peopleParams.child <= product.childMax &&\r\n peopleParams.adult <= product.adultsMax\r\n : true\r\n );\r\n setProducts(filteredProducts);\r\n }\r\n }, [tempProducts, peopleParams, dateParams]);\r\n return (\r\n <>\r\n \r\n {loading && (\r\n
\r\n {/*end::Card widget 15*/}\r\n \r\n \r\n
\r\n )}\r\n {/*begin::Body*/}\r\n \r\n {/*begin::Row*/}\r\n
\r\n {/*end::Body*/}\r\n \r\n {/*begin::Col*/}\r\n \r\n moment(variant.fromDate).isAfter(\r\n moment(dateParams.from)\r\n )\r\n )\r\n : dateParams.from && dateParams.to\r\n ? product.variants?.filter(\r\n (variant) =>\r\n moment(variant.fromDate).isBetween(\r\n moment(dateParams.from),moment(dateParams.to)\r\n )\r\n )\r\n : product.variants\r\n }\r\n disableHeader\r\n columns={[\r\n {\r\n dataIndex: \"fromDate\",\r\n title: \"Check-in date\",\r\n\r\n render(v) {\r\n return moment(v).format(\"DD-MM-YYYY\");\r\n },\r\n },\r\n {\r\n dataIndex: \"toDate\",\r\n title: \"Check-out date\",\r\n\r\n render(v) {\r\n return moment(v).format(\"DD-MM-YYYY\");\r\n },\r\n },\r\n {\r\n title: \"Number of nights\",\r\n className: \"text-center\",\r\n render(v, row) {\r\n return (\r\n {\r\n handleCreateOrder({ ProductId: row.id });\r\n }}\r\n className=\"text-primary cursor-pointer cursor-p\"\r\n >\r\n {t(\"Hold Room\")}\r\n \r\n );\r\n },\r\n },\r\n ]}\r\n />\r\n \r\n )}\r\n
\r\n {/*end::Row*/}\r\n \r\n {/*begin::Overlay*/}\r\n \r\n {/*begin::Image*/}\r\n 0\r\n ? Configuration.staticDomain + product?.images[0].path\r\n : \"\"\r\n })`,\r\n }}\r\n />\r\n {/*end::Image*/}\r\n {/*begin::Action*/}\r\n\r\n {/*end::Action*/}\r\n \r\n {/*end::Overlay*/}\r\n
\r\n {/*end::Col*/}\r\n {/*begin::Col*/}\r\n \r\n {/*begin::Wrapper*/}\r\n
\r\n {/*end::Col*/}\r\n {isOpenListVacation && (\r\n <>\r\n \r\n {/*begin::Header*/}\r\n
\r\n\r\n {/*end::Wrapper*/}\r\n \r\n {/*begin::Title*/}\r\n
\r\n {/*end::Header*/}\r\n {/*begin::Body*/}\r\n\r\n {/*end::Body*/}\r\n {/*begin::Footer*/}\r\n \r\n \r\n {product.name}\r\n \r\n
\r\n \r\n
\r\n {/*end::Title*/}\r\n {/*begin::Items*/}\r\n \r\n {t(\"Price From\")}{\" \"}\r\n \r\n {Common.formatNumber(product.fromPointPrice)}\r\n {\" \"}{t(\"point\")}\r\n / {t(\"vacation\")}\r\n
\r\n\r\n \r\n {t(\"Adult\")} :{\" \"}\r\n \r\n {product.adultsStandard || \"N / A\"}\r\n \r\n {\" \"}-{\" \"}\r\n {t(\"Maximum\")} :{\" \"}\r\n \r\n {product.adultsMax || \"N / A\"}\r\n \r\n
\r\n \r\n \r\n {t(\"Children\")} :{\" \"}\r\n \r\n {product.childStandard || \"N / A\"}\r\n \r\n {\" \"}-{\" \"}\r\n {t(\"Maximum\")} :{\" \"}\r\n \r\n {product.childMax || \"N / A\"}\r\n \r\n
\r\n\r\n {/*end::Items*/}\r\n \r\n {/*begin::Actions*/}\r\n\r\n setIsOpenListVacation(!isOpenListVacation)}\r\n className=\"btn btn-primary btn-sm flex-shrink-0\"\r\n data-bs-toggle=\"modal\"\r\n data-bs-target=\"#kt_modal_users_search\"\r\n >\r\n {t(\"View Detail\")}\r\n \r\n {/*end::Actions*/}\r\n
\r\n\r\n {/*end::Footer*/}\r\n \r\n {t(\"List Vacation\")}\r\n
\r\n \r\n {moment(row.toDate).diff(\r\n moment(row.fromDate),\r\n \"days\"\r\n )}\r\n
\r\n );\r\n },\r\n },\r\n {\r\n dataIndex: \"pointPrice\",\r\n title: \"Giá (điểm)\",\r\n className: \"text-center\",\r\n render(v) {\r\n return {Common.formatNumber(v)} {t(\"pt\")} ;\r\n },\r\n },\r\n {\r\n title: \"Actions\",\r\n className: \"text-center\",\r\n render(v, row) {\r\n return (\r\n \r\n {/*begin::Col*/}\r\n {products.length > 0 ? (\r\n products.map((product) => {\r\n return (\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default ListProduct;\r\n","import React from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport Stars from \"../../../../../../partials/Stars\";\r\nimport { t } from \"../../../../../../utils/utils\";\r\nimport NavbarDetailAddress from \"../../../component/NavbarDetailAddress\";\r\n\r\nconst Information = () => {\r\n const productVacation = useSelector((state) => state.Product.productVacation);\r\n return (\r\n <>\r\n \r\n {/*begin::Card body*/}\r\n
\r\n )}\r\n\r\n {/*end::Col*/}\r\n {/*begin::Col*/}\r\n\r\n {/*end::Col*/}\r\n \r\n {/*begin::Wrapper*/}\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Title*/}\r\n\r\n {/*end::Title*/}\r\n {/*begin::Description*/}\r\n
\r\n {/*end::Wrapper*/}\r\n {/*begin::Illustration*/}\r\n\r\n {/*end::Illustration*/}\r\n \r\n {t(\"No data\")}.\r\n
\r\n {/*end::Description*/}\r\n {/*begin::Action*/}\r\n\r\n {/*end::Action*/}\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\nexport default Information;\r\n","import React, { useEffect } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { getUserInfoAction } from \"../../../actions/User\";\r\nimport Config from \"../../../configs/Config\";\r\nimport { IUser } from \"../../../types/interface\";\r\nimport Common from \"../../../utils/Common\";\r\nimport { t, toAbsoluteUrl } from \"../../../utils/utils\";\r\nimport NavbarProfile from \"../components/NavbarProfile\";\r\n\r\ninterface IProps {\r\n userInfo: IUser;\r\n setCurrentTab: any\r\n}\r\n\r\nconst OverView = (props: IProps) => {\r\n const {\r\n userName,\r\n name,\r\n email,\r\n mobile,\r\n dateOfBirth,\r\n } = props.userInfo;\r\n\r\n return (\r\n \r\n {t(\"Resort Information\")}\r\n
\r\n \r\n {productVacation.attributes.map((attribute) => {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n })}\r\n {attribute.name}
\r\n \r\n
\r\n \r\n {attribute.attributeValues.map((attributeValue) => {\r\n if (attribute.name === \"Hạng sao\") {\r\n return \r\n {attributeValue.value}\r\n \r\n );\r\n })}\r\n
\r\n \r\n {/*begin::Card header*/}\r\n
\r\n );\r\n};\r\nconst mapStateToProps = (state: any) => {\r\n return {\r\n userInfo: state.User.userInfo,\r\n };\r\n};\r\nconst mapDispatchToProps = {\r\n getUserInfoAction,\r\n};\r\nexport default connect(mapStateToProps, mapDispatchToProps)(OverView);\r\n","import * as React from \"react\";\r\nimport {\r\n getUserInfoAction,\r\n uploadAvatarAction,\r\n updateUserInfoAction,\r\n} from \"../../../actions/User\";\r\nimport { connect } from \"react-redux\";\r\nimport { IUser } from \"../../../types/interface\";\r\nimport NavbarProfile from \"../components/NavbarProfile\";\r\nimport Configuration from \"../../../configs/Config\";\r\nimport { t, toAbsoluteUrl } from \"../../../utils/utils\";\r\nimport { FieldValues, useForm } from \"react-hook-form\";\r\n\r\nimport Common from \"../../../utils/Common\";\r\nimport { changePasswordAction } from \"../../../actions/User\";\r\nimport {\r\n changePassword,\r\n getOauthUri,\r\n updateUserInfo,\r\n} from \"../../../services/UserService\";\r\nimport { toast } from \"react-toastify\";\r\nimport { Box } from \"@mui/material\";\r\nimport { Form } from \"react-bootstrap\";\r\nimport { useSetState } from \"react-use\";\r\nimport DateRangePicker from \"react-bootstrap-daterangepicker\";\r\nimport moment from \"moment\";\r\nimport Axios from \"axios\";\r\n\r\nconst formatDateTimeCell = (cellContent) => {\r\n console.log(cellContent, \"29\");\r\n return cellContent ? new Date(cellContent) : \"\";\r\n};\r\n\r\nfunction Setting({\r\n changePasswordAction,\r\n userInfo,\r\n updateUserInfoAction,\r\n uploadAvatarAction,\r\n getUserInfoAction,\r\n isUserAvatarLoading,\r\n updateUserAvatarResult,\r\n updateUserInfoResult,\r\n changePasswordResult,\r\n}) {\r\n console.log();\r\n const { register, handleSubmit, errors } = useForm({ mode: \"onChange\" });\r\n const {\r\n id,\r\n identifyNo,\r\n images,\r\n avatar,\r\n userName,\r\n dateOfBirth,\r\n firstName,\r\n lastName,\r\n email,\r\n mobile,\r\n companyName,\r\n companySite,\r\n } = userInfo;\r\n const [dob, setDob] = React.useState(\r\n dateOfBirth ? formatDateTimeCell(dateOfBirth) : \"\"\r\n );\r\n const [isLoading, setIsLoading] = React.useState(false);\r\n const [\r\n isChangePasswordBtnLoading,\r\n setIsChangePasswordBtnLoading,\r\n ] = React.useState(false);\r\n const [isConfirming, setConfirming] = React.useState(false);\r\n const [imageList, setImageList] = useSetState({\r\n avatar: {\r\n path: \"\",\r\n id: \"\",\r\n name: \"\",\r\n },\r\n frontImage: {\r\n path: \"\",\r\n id: \"\",\r\n name: \"\",\r\n },\r\n backImage: {\r\n path: \"\",\r\n id: \"\",\r\n name: \"\",\r\n },\r\n });\r\n const [isEditingPassword, setIsEditingPassword] = React.useState(false);\r\n const [state, setState] = useSetState({\r\n data: {},\r\n validationMessage: {},\r\n });\r\n const avatarFile = React.createRef();\r\n\r\n const handleAvatarChange = (file, type) => {\r\n if (file) {\r\n /* if (file) {\r\n var reader = new FileReader();\r\n reader.onload = function(e) {\r\n setImageList({\r\n image1: {\r\n Path: e.target.result,\r\n },\r\n });\r\n };\r\n reader.readAsDataURL(file);\r\n } */\r\n var reader = new FileReader();\r\n reader.onload = function(e) {\r\n var img = document.createElement(\"img\");\r\n img.onload = function(e) {\r\n var canvas = document.createElement(\"canvas\");\r\n var ctx = canvas.getContext(\"2d\");\r\n\r\n ctx.drawImage(img, 0, 0);\r\n\r\n var MAX_WIDTH = 800;\r\n var MAX_HEIGHT = 600;\r\n var width = img.width;\r\n var height = img.height;\r\n\r\n if (width > height) {\r\n if (width > MAX_WIDTH) {\r\n height *= MAX_WIDTH / width;\r\n width = MAX_WIDTH;\r\n }\r\n } else {\r\n if (height > MAX_HEIGHT) {\r\n width *= MAX_HEIGHT / height;\r\n height = MAX_HEIGHT;\r\n }\r\n }\r\n canvas.width = width;\r\n canvas.height = height;\r\n var ctx = canvas.getContext(\"2d\");\r\n ctx.drawImage(img, 0, 0, width, height);\r\n var dataUrl = canvas.toDataURL(file.type);\r\n if (type === \"avatar\") {\r\n setImageList({\r\n avatar: {\r\n path: dataUrl,\r\n id: Common.guid(),\r\n name: file.name,\r\n },\r\n });\r\n }\r\n if (type === \"frontImage\") {\r\n setImageList({\r\n frontImage: {\r\n path: dataUrl,\r\n id: Common.guid(),\r\n name: file.name,\r\n },\r\n });\r\n }\r\n if (type === \"backImage\") {\r\n setImageList({\r\n backImage: {\r\n path: dataUrl,\r\n id: Common.guid(),\r\n\r\n name: file.name,\r\n },\r\n });\r\n }\r\n };\r\n img.src = e.target.result;\r\n };\r\n reader.readAsDataURL(file);\r\n }\r\n\r\n /* console.log(dataURLtoFile(dataUrl, \"test\"), \"hehee\"); */\r\n };\r\n function dataURLtoFile(dataurl, filename) {\r\n var arr = dataurl.split(\",\"),\r\n mime = arr[0].match(/:(.*?);/)[1],\r\n bstr = atob(arr[1]),\r\n n = bstr.length,\r\n u8arr = new Uint8Array(n);\r\n while (n--) {\r\n u8arr[n] = bstr.charCodeAt(n);\r\n }\r\n console.log(arr, \"138\");\r\n return new File([u8arr], filename);\r\n }\r\n const handleUploadAvatar = async (file) => {\r\n const tokenId = localStorage.getItem(Configuration.tokenId);\r\n var bodyFormData = new FormData();\r\n bodyFormData.append(\"token\", tokenId);\r\n bodyFormData.append(\"file\", file);\r\n return await Axios.post(\r\n Configuration.urlApiCommand + \"/Image/UploadFile\",\r\n bodyFormData\r\n );\r\n };\r\n const handleConfirm = () => {\r\n if (isConfirming) return;\r\n setConfirming(true);\r\n getOauthUri(email)\r\n .then((res) => {\r\n console.log(res);\r\n setConfirming(false);\r\n if (res.data) {\r\n window.open(res.data, \"_blank\");\r\n }\r\n })\r\n .catch((error) => {\r\n setConfirming(false);\r\n console.error(error);\r\n });\r\n };\r\n const onSubmit = async ({ firstName, lastName, mobile, identifyNo }) => {\r\n setIsLoading(true);\r\n\r\n const uploadList = [];\r\n if (images && images.length > 0) {\r\n images\r\n .sort((a, b) => a.displayOrder - b.displayOrder)\r\n .forEach((img) => {\r\n uploadList.push(img.id);\r\n });\r\n }\r\n console.log(uploadList, \"208\");\r\n if (imageList.avatar.path) {\r\n const resAvatar = await handleUploadAvatar(\r\n dataURLtoFile(imageList.avatar.path, imageList.avatar.name)\r\n );\r\n uploadList[0] = resAvatar.data.Data[0].Id;\r\n }\r\n if (imageList.frontImage.path) {\r\n const resAvatar = await handleUploadAvatar(\r\n dataURLtoFile(imageList.frontImage.path, imageList.frontImage.name)\r\n );\r\n uploadList[1] = resAvatar.data.Data[0].Id;\r\n }\r\n if (imageList.backImage.path) {\r\n const resAvatar = await handleUploadAvatar(\r\n dataURLtoFile(imageList.backImage.path, imageList.backImage.name)\r\n );\r\n uploadList[2] = resAvatar.data.Data[0].Id;\r\n }\r\n console.log(moment(dob).format(\"DD-MM-YYYY\"), \"2399\");\r\n let userInfoUpdate = {\r\n Id: id,\r\n FirstName: firstName,\r\n LastName: lastName,\r\n CompanyName: companyName,\r\n CompanySite: companySite,\r\n Mobile: mobile,\r\n Email: email,\r\n DateOfBirth: moment(dob).format(\"YYYY-MM-DD\"),\r\n ImageId: null,\r\n ModifiedDate: Common.formatDateTime(new Date()),\r\n ModifiedBy: id,\r\n IdentifyNo: identifyNo,\r\n Images: Common.createRelationObjectArray(\r\n uploadList\r\n ).map((item, index) => ({ ...item, IsFeatured: index === 0 })),\r\n };\r\n const res = await updateUserInfo(userInfoUpdate);\r\n if (res.Success) {\r\n toast.success(\"Cập nhật thành công\");\r\n } else {\r\n toast.error(res.Message);\r\n }\r\n const tokenId = localStorage.getItem(Configuration.tokenId);\r\n await getUserInfoAction(tokenId);\r\n setIsLoading(false);\r\n };\r\n const handleUpdatePassword = () => {\r\n let { data, validationMessage } = state;\r\n const currentPasswordCheck =\r\n data.currentPassword && data.currentPassword.trim() !== \"\"\r\n ? \"\"\r\n : \"Mật khẩu cũ không được để trống\";\r\n const newPasswordCheck =\r\n data.newPassword && data.newPassword.trim() !== \"\"\r\n ? \"\"\r\n : \"Mật khẩu mới không được để trống\";\r\n let retypePasswordCheck =\r\n data.retypePassword && data.retypePassword.trim() !== \"\"\r\n ? \"\"\r\n : \"Mật khẩu mới không được để trống\";\r\n if (retypePasswordCheck === \"\") {\r\n retypePasswordCheck =\r\n data.retypePassword.trim() === data.newPassword.trim()\r\n ? \"\"\r\n : \"Mật khẩu nhập lại không trùng với mật khẩu mới\";\r\n }\r\n if (!currentPasswordCheck && !newPasswordCheck && !retypePasswordCheck) {\r\n setIsChangePasswordBtnLoading(true);\r\n\r\n let changePasswordDTO = {\r\n Id: id,\r\n OldPassword: data.currentPassword,\r\n Password: data.newPassword,\r\n ModifiedBy: id,\r\n ModifiedDate: Common.formatDateTime(new Date()),\r\n };\r\n changePassword(changePasswordDTO).then((res) => {\r\n if (res.Success) {\r\n toast.success(\"Cập nhật mật khẩu thành công\");\r\n } else {\r\n setState({\r\n validationMessage: {\r\n currentPassword: res.Message,\r\n },\r\n });\r\n }\r\n setIsChangePasswordBtnLoading(false);\r\n });\r\n } else {\r\n setState({\r\n validationMessage: {\r\n ...validationMessage,\r\n\r\n currentPassword: currentPasswordCheck,\r\n newPassword: newPasswordCheck,\r\n retypePassword: retypePasswordCheck,\r\n },\r\n });\r\n return;\r\n }\r\n };\r\n const handlerCurrentPassword = (value) => {\r\n //todo: process upload file\r\n let { data, validationMessage } = state;\r\n setState({\r\n data: {\r\n ...data,\r\n currentPassword: value ? value : \"\",\r\n },\r\n validationMessage: {\r\n ...validationMessage,\r\n currentPassword:\r\n value && value.trim() !== \"\" ? \"\" : \"Mật khẩu cũ không được để trống\",\r\n },\r\n });\r\n };\r\n const handleRetypePassword = (value) => {\r\n //todo: process upload file\r\n let { data, validationMessage } = state;\r\n let currentValidateMesage =\r\n value && value.trim() !== \"\" ? \"\" : \"Mật khẩu mới không được để trống\";\r\n if (currentValidateMesage === \"\") {\r\n currentValidateMesage =\r\n value.trim() === data.newPassword\r\n ? \"\"\r\n : \"Mật khẩu nhập lại không trùng với mật khẩu mới\";\r\n }\r\n setState({\r\n data: {\r\n ...data,\r\n retypePassword: value ? value.trim() : \"\",\r\n },\r\n validationMessage: {\r\n ...validationMessage,\r\n retypePassword: currentValidateMesage,\r\n },\r\n });\r\n };\r\n const handleNewPassword = (value) => {\r\n //todo: process upload file\r\n let { data, validationMessage } = state;\r\n let newPassword =\r\n value && value.trim() !== \"\" ? \"\" : \"Mật khẩu mới không được để trống\";\r\n\r\n setState({\r\n data: {\r\n ...data,\r\n newPassword: value ? value.trim() : \"\",\r\n },\r\n validationMessage: {\r\n ...validationMessage,\r\n newPassword: newPassword,\r\n },\r\n });\r\n };\r\n const onChangeHandler = (value, field) => {\r\n switch (field) {\r\n case \"currentPassword\":\r\n handlerCurrentPassword(value);\r\n break;\r\n case \"newPassword\":\r\n handleNewPassword(value);\r\n break;\r\n case \"retypePassword\":\r\n handleRetypePassword(value);\r\n break;\r\n default:\r\n break;\r\n }\r\n };\r\n\r\n const notifyAvatar = React.useMemo(() => {\r\n if (!updateUserAvatarResult) return null;\r\n return updateUserAvatarResult === \"Cập nhật avatar thành công\"\r\n ? toast.success(updateUserAvatarResult)\r\n : toast.error(updateUserAvatarResult);\r\n }, [updateUserAvatarResult]);\r\n\r\n return (\r\n <>\r\n \r\n {/*begin::Card title*/}\r\n props.setCurrentTab(\"setting\")}\r\n className=\"btn btn-primary align-self-center\"\r\n >\r\n {t(\"Edit Profile\")}\r\n \r\n {/*end::Action*/}\r\n
\r\n {/*begin::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n {/*end::Card title*/}\r\n {/*begin::Action*/}\r\n {t(\"Profile Details\")}
\r\n\r\n {/*begin::Row*/}\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Col*/}\r\n
\r\n {/*end::Row*/}\r\n {/*begin::Input group*/}\r\n \r\n {name}\r\n
\r\n {/*end::Col*/}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Col*/}\r\n
\r\n {/*end::Input group*/}\r\n {/*begin::Input group*/}\r\n \r\n {email}\r\n
\r\n {/*end::Col*/}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Col*/}\r\n
\r\n {/*end::Input group*/}\r\n {/*begin::Input group*/}\r\n \r\n \r\n {mobile || \"N/A\"}\r\n \r\n
\r\n {/*end::Col*/}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Col*/}\r\n
\r\n \r\n \r\n {Common.formatDateTime(dateOfBirth, \"dd/mm/yyyy\") || \"N / A\"}\r\n \r\n
\r\n {/*end::Col*/}\r\n \r\n {/*begin::Card header*/}\r\n \r\n {/*begin::Card title*/}\r\n
\r\n {/*begin::Card header*/}\r\n {/*begin::Content*/}\r\n \r\n
\r\n {/*end::Card title*/}\r\n {t(\"Profile Details\")}
\r\n\r\n {/*begin::Form*/}\r\n \r\n {/*begin::Card body*/}\r\n
\r\n \r\n {/*begin::Input group*/}\r\n
\r\n {/*end::Input group*/}\r\n {/*begin::Input group*/}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Col*/}\r\n
\r\n {/*end::Col*/}\r\n \r\n {/*begin::Image input*/}\r\n \r\n {/*begin::Preview existing avatar*/}\r\n\r\n \r\n \r\n {/*begin::Inputs*/}\r\n \r\n handleAvatarChange(event.target.files[0], \"avatar\")\r\n }\r\n />\r\n\r\n {/*end::Inputs*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Cancel*/}\r\n\r\n {/*end::Cancel*/}\r\n {/*begin::Remove*/}\r\n\r\n {/*end::Remove*/}\r\n
\r\n {/*end::Image input*/}\r\n {/*begin::Hint*/}\r\n \r\n Allowed file types: png, jpg, jpeg.\r\n
\r\n {/*end::Hint*/}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Col*/}\r\n
\r\n {/*end::Input group*/}\r\n {/*begin::Input group*/}\r\n \r\n {/*begin::Row*/}\r\n
\r\n {/*end::Col*/}\r\n \r\n
\r\n {/*end::Row*/}\r\n \r\n
\r\n {/*begin::Col*/}\r\n \r\n
\r\n \r\n {errors.firstName && (\r\n
\r\n First name is required
\r\n )}\r\n \r\n
\r\n {/*end::Col*/}\r\n {/*begin::Col*/}\r\n\r\n {/*end::Col*/}\r\n \r\n {errors.lastName &&
\r\n Last name is required
}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Col*/}\r\n
\r\n {/*end::Input group*/}\r\n {/*begin::Input group*/}\r\n \r\n ()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/,\r\n })}\r\n />\r\n
\r\n {/*end::Col*/}\r\n \r\n {errors.email?.type === \"required\" && (\r\n
\r\n Email is required
\r\n )}\r\n {errors.email?.type === \"pattern\" && (\r\n The email is not in the correct format
\r\n )}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Col*/}\r\n\r\n
\r\n {/*end::Input group*/}\r\n \r\n
\r\n {/*end::Col*/}\r\n \r\n {errors.mobile &&
\r\n {t(\"Phone number is required\")}
}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Col*/}\r\n\r\n
\r\n {/*begin::Input group*/}\r\n \r\n
\r\n {/*end::Col*/}\r\n \r\n {errors.identifyNo && (\r\n
\r\n {t(\"is a required property\")}
\r\n )}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Col*/}\r\n
\r\n \r\n \r\n {\r\n console.log(\r\n moment(picker.startDate).format(\"DD-MM-YYYY\"),\r\n \"433\"\r\n );\r\n\r\n setDob(picker.startDate);\r\n }}\r\n >\r\n
\r\n {/*end::Col*/}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Col*/}\r\n
\r\n {/*end::Col*/}\r\n \r\n {/*begin::Image input*/}\r\n \r\n {/*begin::Preview existing avatar*/}\r\n\r\n 1 &&\r\n images.find((img) => img.displayOrder === 1) &&\r\n Configuration.staticDomain +\r\n images.find((img) => img.displayOrder === 1)\r\n .path) ||\r\n toAbsoluteUrl(\"/media/users/default.jpg\")})`,\r\n }}\r\n />\r\n {/*end::Preview existing avatar*/}\r\n {/*begin::Label*/}\r\n \r\n \r\n {/*begin::Inputs*/}\r\n \r\n handleAvatarChange(\r\n event.target.files[0],\r\n \"frontImage\"\r\n )\r\n }\r\n />\r\n\r\n {/*end::Inputs*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Cancel*/}\r\n\r\n {/*end::Cancel*/}\r\n {/*begin::Remove*/}\r\n\r\n {/*end::Remove*/}\r\n
\r\n {/*end::Image input*/}\r\n {/*begin::Hint*/}\r\n \r\n Allowed file types: png, jpg, jpeg.\r\n
\r\n {/*end::Hint*/}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Col*/}\r\n
\r\n {/*end::Col*/}\r\n \r\n \r\n {/*end::Card body*/}\r\n {/*begin::Actions*/}\r\n \r\n {/*begin::Image input*/}\r\n \r\n {/*begin::Preview existing avatar*/}\r\n\r\n 2 &&\r\n images.find((img) => img.displayOrder === 2) &&\r\n Configuration.staticDomain +\r\n images.find((img) => img.displayOrder === 2)\r\n .path) ||\r\n toAbsoluteUrl(\"/media/users/default.jpg\")})`,\r\n }}\r\n />\r\n {/*end::Preview existing avatar*/}\r\n {/*begin::Label*/}\r\n \r\n \r\n {/*begin::Inputs*/}\r\n \r\n handleAvatarChange(event.target.files[0], \"backImage\")\r\n }\r\n />\r\n\r\n {/*end::Inputs*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Cancel*/}\r\n\r\n {/*end::Cancel*/}\r\n {/*begin::Remove*/}\r\n\r\n {/*end::Remove*/}\r\n
\r\n {/*end::Image input*/}\r\n {/*begin::Hint*/}\r\n \r\n Allowed file types: png, jpg, jpeg.\r\n
\r\n {/*end::Hint*/}\r\n \r\n e.preventDefault()} */\r\n type=\"submit\"\r\n className=\"btn btn-primary d-flex\"\r\n >\r\n {isLoading && (\r\n \r\n )}\r\n {t(\"Save Changes\")}\r\n \r\n
\r\n {/*end::Actions*/}\r\n \r\n \r\n \r\n {/*end::Form*/}\r\n \r\n {/*end::Content*/}\r\n \r\n \r\n {/*begin::Card header*/}\r\n
\r\n\r\n {/*end::Email Address*/}\r\n {/*begin::Separator*/}\r\n\r\n {/*end::Notice*/}\r\n \r\n {/*end::Card body*/}\r\n \r\n {/*end::Content*/}\r\n \r\n\r\n {notifyAvatar}\r\n \r\n );\r\n}\r\nconst mapStateToProps = (state) => {\r\n return {\r\n userInfo: state.User.userInfo,\r\n updateUserInfoResult: state.User.updateUserInfoResult,\r\n changePasswordResult: state.User.changePasswordResult,\r\n updateUserAvatarResult: state.User.updateUserAvatarResult,\r\n isLoading: state.User.isLoading,\r\n isUserAvatarLoading: state.User.isUserAvatarLoading,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n updateUserInfoAction,\r\n uploadAvatarAction,\r\n getUserInfoAction,\r\n changePasswordAction,\r\n};\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Setting);\r\n","import moment from \"moment\";\r\nimport React from \"react\";\r\nimport Configuration from \"../../configs/Config\";\r\nimport Common from \"../../utils/Common\";\r\nimport { t, toAbsoluteUrl } from \"../../utils/utils\";\r\n\r\nconst GridTable = (props) => {\r\n const { items } = props;\r\n console.log(props.items, 4);\r\n return (\r\n \r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Content*/}\r\n \r\n
\r\n {t(\"Sign-in Method\")}
\r\n\r\n {/*begin::Card body*/}\r\n \r\n setIsEditingPassword(true)}\r\n className=\"btn btn-light btn-active-light-primary\"\r\n >\r\n {t(\"Change password\")}\r\n \r\n
\r\n {/*end::Action*/}\r\n \r\n {/*begin::Email Address*/}\r\n \r\n {/*begin::Form*/}\r\n \r\n
\r\n {/*end::Edit*/}\r\n {/*begin::Action*/}\r\n \r\n {/*begin::Label*/}\r\n
\r\n \r\n \r\n
\r\n {/*end::Label*/}\r\n {/*begin::Edit*/}\r\n\r\n {/*end::Edit*/}\r\n {/*begin::Action*/}\r\n {/* */}\r\n {/*end::Action*/}\r\n Email
\r\n {userName}
\r\n \r\n {/*begin::Label*/}\r\n \r\n
\r\n {/*end::Label*/}\r\n {/*begin::Edit*/}\r\n {t(\"Password\")}
\r\n ************
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {t(\"Current password\")}\r\n \r\n \r\n onChangeHandler(\r\n event.target.value,\r\n \"currentPassword\"\r\n )\r\n }\r\n value={\r\n state.data.currentPassword\r\n ? state.data.currentPassword\r\n : \"\"\r\n }\r\n type=\"password\"\r\n className=\"form-control form-control-lg form-control-solid\"\r\n />\r\n \r\n
\r\n \r\n {state.validationMessage.currentPassword && (\r\n \r\n {state.validationMessage.currentPassword}\r\n \r\n )}\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {t(\"New password\")}\r\n \r\n \r\n onChangeHandler(event.target.value, \"newPassword\")\r\n }\r\n type=\"password\"\r\n className=\"form-control form-control-lg form-control-solid\"\r\n />\r\n \r\n\r\n
\r\n \r\n {state.validationMessage.newPassword && (\r\n {state.validationMessage.newPassword}\r\n )}\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {t(\"Confirm new password\")}\r\n \r\n \r\n onChangeHandler(\r\n event.target.value,\r\n \"retypePassword\"\r\n )\r\n }\r\n />\r\n \r\n
\r\n \r\n {state.validationMessage.retypePassword && (\r\n \r\n {state.validationMessage.retypePassword}\r\n \r\n )}\r\n
\r\n \r\n Password must be at least 8 character and contain symbols\r\n
\r\n\r\n \r\n \r\n {isChangePasswordBtnLoading && (\r\n \r\n )}\r\n {t(\"Update password\")}\r\n \r\n setIsEditingPassword(false)}\r\n id=\"kt_password_cancel\"\r\n type=\"button\"\r\n className=\"btn btn-color-gray-400 btn-active-light-primary px-6\"\r\n >\r\n {t(\"Cancel\")}\r\n \r\n
\r\n \r\n \r\n {/*end::Form*/}\r\n \r\n \r\n {items?.length > 0 ? items.map((item) => {\r\n return (\r\n
\r\n )}) : \r\n {/*begin::Feature post*/}\r\n \r\n {/*begin::Image*/}\r\n \r\n
\r\n {/*end::Feature post*/}\r\n \r\n {/*begin::Title*/}\r\n\r\n
\r\n {/*end::Body*/}\r\n \r\n {item.name}\r\n
\r\n\r\n {/*begin::Author*/}\r\n\r\n {/*end::Author*/}\r\n {/*begin::Date*/}\r\n\r\n {/*begin::Svg Icon | path: assets/media/icons/duotune/general/gen018.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n {item.addresses?.length > 0 && item.addresses[0]?.name}\r\n\r\n {/*end::Date*/}\r\n
\r\n {/*end::Title*/}\r\n {/*begin::Text*/}\r\n \r\n {moment(item.fromDate)\r\n .format(\"DD/MM/YYYY\")\r\n .toString()}{\" \"}\r\n - {moment(item.toDate).format(\"DD/MM/YYYY\")}\r\n
\r\n {/*end::Text*/}\r\n {/*begin::Content*/}\r\n \r\n {/*begin::Author*/}\r\n\r\n {/*end::Author*/}\r\n {/*begin::Date*/}\r\n {Common.formatMoney(item.price)}\r\n {/*end::Date*/}\r\n
\r\n {/*end::Content*/}\r\n \r\n {/*begin::Card body*/}\r\n
\r\n}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default GridTable;\r\n","import React from \"react\";\r\nimport Configuration from \"../../../configs/Config\";\r\nimport GridTable from \"../../../partials/gridTable\";\r\nimport Table from \"../../../partials/table/Table\";\r\nimport { getPaidProduct } from \"../../../services/ProductService\";\r\nimport Common from \"../../../utils/Common\";\r\nimport NavbarProfile from \"../components/NavbarProfile\";\r\n\r\nconst MyVacation = () => {\r\n return (\r\n \r\n {/*begin::Wrapper*/}\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Title*/}\r\n\r\n {/*end::Title*/}\r\n {/*begin::Description*/}\r\n
\r\n {/*end::Wrapper*/}\r\n {/*begin::Illustration*/}\r\n \r\n {t(\"No data\")}.\r\n
\r\n {/*end::Description*/}\r\n {/*begin::Action*/}\r\n\r\n {/*end::Action*/}\r\n\r\n
\r\n {/*end::Illustration*/}\r\n \r\n {/*begin::Content*/}\r\n
\r\n );\r\n};\r\n\r\nexport default Checkout;\r\n","import moment from \"moment\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { Link, useLocation, useParams } from \"react-router-dom\";\r\nimport Configuration from \"../../configs/Config\";\r\nimport { getVacationOrderDetail } from \"../../services/OrderService\";\r\nimport Common from \"../../utils/Common\";\r\nimport { t } from \"../../utils/utils\";\r\nimport \"./style.scss\";\r\n\r\ntype Props = {};\r\n\r\nconst Confirm = (props: Props) => {\r\n const { orderId } = useParams<{ orderId: string }>();\r\n const { state }: { state: { introduction: string } } = useLocation();\r\n const [productsDetail, setProductsDetail] = useState\r\n {/*begin::Form*/}\r\n \r\n {/*begin::Customer*/}\r\n
\r\n {/*end::Content*/}\r\n {/*begin::Sidebar*/}\r\n \r\n {/*begin::Card header*/}\r\n
\r\n\r\n {/*end::Customer*/}\r\n {/*begin::Pricing*/}\r\n\r\n {/*end::Pricing*/}\r\n {/*begin::Payment method*/}\r\n {/*end::Payment method*/}\r\n {/*begin::Card*/}\r\n\r\n \r\n {/*begin::Card title*/}\r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n {/*begin::Card title*/}\r\n {t(\"Customer\")}
\r\n\r\n {/*begin::Description*/}\r\n\r\n {/*end::Description*/}\r\n {/*begin::Selected customer*/}\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Avatar*/}\r\n
\r\n \r\n
\r\n {/*end::Avatar*/}\r\n {/*begin::Info*/}\r\n \r\n {/*begin::Name*/}\r\n \r\n {name}\r\n \r\n {/*end::Name*/}\r\n\r\n {/*begin::Email*/}\r\n \r\n {email}\r\n \r\n \r\n {mobile}\r\n \r\n {/*end::Email*/}\r\n
\r\n \r\n setVisible(true)}\r\n >\r\n {t(\"Change Info\")}\r\n \r\n
\r\n {/*end::Info*/}\r\n \r\n setVisible(false)}\r\n title=\"Change Info Customer\"\r\n >\r\n
\r\n {/*end::Customer add buttons*/}\r\n {/*begin::Customer change button*/}\r\n\r\n {/*end::Customer change button*/}\r\n {/*begin::Notice*/}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n setFormUserInfo({\r\n ...formUserInfo,\r\n name: e.target.value,\r\n })\r\n }\r\n value={formUserInfo?.name}\r\n className=\"form-control form-control-solid\"\r\n />\r\n
\r\n \r\n \r\n \r\n setFormUserInfo({\r\n ...formUserInfo,\r\n mobile: e.target.value,\r\n })\r\n }\r\n value={formUserInfo?.mobile}\r\n className=\"form-control form-control-solid\"\r\n />\r\n
\r\n \r\n \r\n \r\n setFormUserInfo({\r\n ...formUserInfo,\r\n email: e.target.value,\r\n })\r\n }\r\n value={formUserInfo?.email}\r\n className=\"form-control form-control-solid\"\r\n />\r\n
\r\n \r\n {/*begin::Wrapper*/}\r\n
\r\n {/*end::Notice*/}\r\n \r\n {/*begin::Content*/}\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n {/*end::Content*/}\r\n \r\n \r\n \r\n \r\n {userInfoMember}\r\n
\r\n \r\n {t(\"Available Point\")} :{\" \"}\r\n \r\n {totalPoint > 0 ? totalPoint: 0}\r\n \r\n
\r\n \r\n {\r\n if (\r\n e.target.value < 0 ||\r\n !e.target.value ||\r\n totalPoint < 0\r\n ) {\r\n setFormState({ tempPoint: 0 });\r\n return;\r\n }\r\n if (e.target.value > totalPoint) {\r\n setFormState({ tempPoint: totalPoint });\r\n return;\r\n }\r\n setFormState({ tempPoint: e.target.value });\r\n }}\r\n value={formState.tempPoint}\r\n />\r\n \r\n {!loadingState.isApplyingPoint && (\r\n {t(\"Apply\")}\r\n )}\r\n\r\n {loadingState.isApplyingPoint && (\r\n \r\n {t(\"Please wait\")}...{\" \"}\r\n \r\n \r\n )}\r\n \r\n
\r\n {/*end::Wrapper*/}\r\n \r\n {/*begin::Card header*/}\r\n
\r\n \r\n {/*begin::Card title*/}\r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n \r\n {t(\"Coupon Code\")}\r\n
\r\n
\r\n {/*begin::Card title*/}\r\n \r\n {t(\"Coupon Code\")}\r\n
\r\n \r\n {/*begin::Custom fields*/}\r\n\r\n {/*end::Custom fields*/}\r\n {/*begin::Invoice footer*/}\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Label*/}\r\n\r\n {/*end::Label*/}\r\n {\r\n setFormState({ tempGiftCode: e.target.value });\r\n }}\r\n className=\"form-control me-6 form-control-solid rounded-3\"\r\n />\r\n \r\n {!loadingState.isApplyingGiftCode && (\r\n {t(\"Apply\")}\r\n )}\r\n\r\n {loadingState.isApplyingGiftCode && (\r\n \r\n {t(\"Please wait\")}...{\" \"}\r\n \r\n \r\n )}\r\n \r\n
\r\n {/*end::Invoice footer*/}\r\n {/*begin::Option*/}\r\n\r\n {/*end::Option*/}\r\n \r\n {/*begin::Card header*/}\r\n
\r\n\r\n {/*end::Card*/}\r\n \r\n {/*end::Form*/}\r\n \r\n {/*begin::Card title*/}\r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n \r\n {t(\"Note\")}{\" \"}\r\n
\r\n
\r\n {/*begin::Card title*/}\r\n \r\n {t(\"Note\")}{\" \"}\r\n
\r\n \r\n {/*begin::Custom fields*/}\r\n\r\n {/*end::Custom fields*/}\r\n {/*begin::Invoice footer*/}\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Label*/}\r\n\r\n {/*end::Label*/}\r\n {\r\n setFormState({ note: e.target.value });\r\n }}\r\n className=\"form-control form-control-solid rounded-3\"\r\n rows={4}\r\n value={formState.note}\r\n />\r\n
\r\n {/*end::Invoice footer*/}\r\n {/*begin::Option*/}\r\n\r\n {/*end::Option*/}\r\n \r\n {/*begin::Pos order*/}\r\n
\r\n \r\n {/*begin::Header*/}\r\n
\r\n {/*end::Sidebar*/}\r\n \r\n
\r\n {/*end::Header*/}\r\n {/*begin::Body*/}\r\n \r\n {t(\"Order\")} #{productDetail?.code}\r\n
\r\n {/*begin::Toolbar*/}\r\n {/*end::Toolbar*/}\r\n\r\n {/*begin::Table container*/}\r\n {/*end::Table container*/}\r\n {/*begin::Summary*/}\r\n
\r\n {/*end::Pos order*/}\r\n \r\n
\r\n {/*end: Card Body*/}\r\n \r\n {products.productVacation?.targetName}\r\n
\r\n \r\n \r\n {t(\"Number of nights\")}\r\n \r\n {moment(products.productVacation?.product?.toDate).diff(\r\n moment(products.productVacation?.product?.fromDate),\r\n \"days\"\r\n )}{\" \"}\r\n {t(\"night\")}\r\n \r\n
\r\n \r\n {t(\"Adult\")}\r\n \r\n {products.productVacation?.product?.adultStandard}\r\n \r\n
\r\n \r\n {t(\"Children\")}\r\n \r\n {products.productVacation?.product?.childStandard}\r\n \r\n
\r\n \r\n {t(\"Check-in date\")}\r\n \r\n {moment(products.productVacation?.product?.fromDate).format(\r\n \"DD-MM-YYYY\"\r\n )}\r\n \r\n
\r\n \r\n {t(\"Check-out date\")}\r\n \r\n {moment(products.productVacation?.product?.toDate).format(\r\n \"DD-MM-YYYY\"\r\n )}\r\n \r\n
\r\n \r\n\r\n \r\n \r\n {t(\"Price\")} (\r\n {moment(products.productVacation?.product?.toDate).diff(\r\n moment(products.productVacation?.product?.fromDate),\r\n \"days\"\r\n )}{\" \"}\r\n {t(\"night\")})\r\n \r\n \r\n {Common.formatMoney(products.productVacation?.total)}\r\n \r\n
\r\n {products.productFee.length > 0 &&\r\n products.productFee.map((product) => {\r\n return (\r\n \r\n \r\n {product.targetName} (x{product.quantity})\r\n \r\n {product.total}\r\n
\r\n );\r\n })}\r\n\r\n \r\n {/*begin::Content*/}\r\n
\r\n {/*end::Summary*/}\r\n {/*begin::Payment Method*/}\r\n\r\n \r\n {t(\"Sub total\")}\r\n {t(\"Discount\")}\r\n {t(\"Used Point\")}\r\n {t(\"Total\")}\r\n
\r\n {/*end::Content*/}\r\n {/*begin::Content*/}\r\n \r\n \r\n {Common.formatMoney(productDetail?.grandTotal)}\r\n \r\n \r\n {Common.formatMoney(formState.preResultAmount)}\r\n \r\n {pointUsed}\r\n \r\n {Common.formatMoney(formState.grandTotal)}\r\n \r\n
\r\n {/*end::Content*/}\r\n \r\n {/*begin::Title*/}\r\n {formState.grandTotal > 0 && (\r\n <>\r\n \r\n {!loadingState.isConfirming && (\r\n {t(\"Check Out\")}\r\n )}\r\n\r\n {loadingState.isConfirming && (\r\n \r\n {t(\"Please wait\")}...{\" \"}\r\n \r\n \r\n )}\r\n \r\n {/*end::Actions*/}\r\n
\r\n {/*end::Payment Method*/}\r\n \r\n {t(\"Payment Method\")}\r\n
\r\n {/*end::Title*/}\r\n {/*begin::Radio group*/}\r\n\r\n {/*begin::Radio*/}\r\n {paymentMethods.length > 0 &&\r\n paymentMethods\r\n .filter((paymentMethod) => paymentMethod.type === 1)\r\n .map((paymentMethod) => {\r\n return (\r\n
\r\n \r\n )}\r\n\r\n {/*end::Radio group*/}\r\n {/*begin::Actions*/}\r\n \r\n \r\n {/*begin::Input*/}\r\n {\r\n setPaymentMethodName(paymentMethod.name);\r\n setPaymentMethodId(paymentMethod.id);\r\n setPaymentMethodIntroduction(\r\n JSON.parse(paymentMethod.configuration)\r\n ?.message\r\n );\r\n }}\r\n />\r\n
\r\n );\r\n })}\r\n\r\n {/*end::Radio*/}\r\n {/*begin::Radio*/}\r\n\r\n {/*end::Radio*/}\r\n \r\n {/*begin::Order details*/}\r\n
\r\n \r\n {/*begin::Card header*/}\r\n
\r\n {/*end::Order details*/}\r\n {/*begin::Customer details*/}\r\n \r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n {t(\"Order Details\")}
\r\n\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Table*/}\r\n \r\n {/*begin::Table body*/}\r\n \r\n
\r\n {/*end::Table*/}\r\n
\r\n | \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/finance/fin008.svg*/}\r\n \r\n \r\n | \r\n \r\n #{productsDetail?.code}\r\n | \r\n
| \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/files/fil002.svg*/}\r\n \r\n \r\n | \r\n \r\n {Common.formatDateTime(\r\n productsDetail?.createdDate,\r\n \"DD-MM-YYYY\"\r\n )}\r\n | \r\n
| \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/ecommerce/ecm006.svg*/}\r\n \r\n \r\n | \r\n \r\n {Common.formatMoney(productsDetail?.grandTotal)}\r\n | \r\n
\r\n {/*begin::Card header*/}\r\n
\r\n {/*end::Customer details*/}\r\n {/*begin::Documents*/}\r\n \r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n {t(\"Product Info\")}
\r\n\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Table*/}\r\n \r\n {/*begin::Table body*/}\r\n \r\n {/*begin::Customer name*/}\r\n
\r\n {/*end::Table*/}\r\n
\r\n | \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/electronics/elc003.svg*/}\r\n\r\n {/*end::Svg Icon*/}\r\n {t(\"Name\")}\r\n \r\n | \r\n \r\n | \r\n
| \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/communication/com006.svg*/}\r\n\r\n {/*end::Svg Icon*/}\r\n {t(\"Check-in date\")}\r\n \r\n | \r\n \r\n \r\n {/*begin:: Avatar */}\r\n\r\n {/*end::Avatar*/}\r\n {/*begin::Name*/}\r\n \r\n {moment(\r\n productsDetail?.orderLines[0]?.product.fromDate\r\n ).format(\"DD-MM-YYYY\")}\r\n \r\n {/*end::Name*/}\r\n \r\n | \r\n
| \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/communication/com011.svg*/}\r\n\r\n {/*end::Svg Icon*/}\r\n {t(\"Check-out date\")}\r\n \r\n | \r\n \r\n \r\n {moment(\r\n productsDetail?.orderLines[0]?.product.toDate\r\n ).format(\"DD-MM-YYYY\")}\r\n \r\n | \r\n
\r\n {/*begin::Card header*/}\r\n
\r\n {/*end::Documents*/}\r\n \r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n Khấu trừ
\r\n\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Table*/}\r\n \r\n {/*begin::Table body*/}\r\n \r\n {/*begin::Invoice*/}\r\n
\r\n {/*end::Table*/}\r\n
\r\n | \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/ecommerce/ecm008.svg*/}\r\n {/*end::Svg Icon*/}\r\n Số tiền giảm\r\n \r\n | \r\n \r\n | \r\n
| \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/ecommerce/ecm006.svg*/}\r\n {/*end::Svg Icon*/}Số tiền cần thanh toán\r\n \r\n | \r\n \r\n \r\n {Common.formatMoney(\r\n calculateGrandTotalLeft()?.grandTotalLeft\r\n )}\r\n \r\n | \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n {t(\"Back To Product Page\")}\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default Confirm;\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { Link, useLocation, useParams } from \"react-router-dom\";\r\nimport Configuration from \"../../configs/Config\";\r\nimport { getVacationOrderDetail } from \"../../services/OrderService\";\r\nimport Common from \"../../utils/Common\";\r\nimport { t } from \"../../utils/utils\";\r\nimport \"./style.scss\";\r\n\r\ntype Props = {};\r\n\r\nconst Confirm = (props: Props) => {\r\n const { orderId } = useParams<{ orderId: string }>();\r\n\r\n const [productsDetail, setProductsDetail] = useState\r\n
\r\n );\r\n};\r\n\r\nexport default Confirm;\r\n","import React from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { t, toAbsoluteUrl } from \"../../utils/utils\";\r\n\r\ntype Props = {};\r\n\r\nconst Error = (props: Props) => {\r\n return (\r\n \r\n \r\n
\r\n \r\n {t(\"Confirm order successfully\")}\r\n
\r\n\r\n {/*begin::Order details*/}\r\n
\r\n \r\n {/*begin::Card header*/}\r\n
\r\n {/*end::Order details*/}\r\n {/*begin::Customer details*/}\r\n \r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n {t(\"Order Details\")}
\r\n\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Table*/}\r\n \r\n {/*begin::Table body*/}\r\n \r\n
\r\n {/*end::Table*/}\r\n
\r\n | \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/finance/fin008.svg*/}\r\n \r\n \r\n | \r\n \r\n #{productsDetail?.code}\r\n | \r\n
| \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/files/fil002.svg*/}\r\n \r\n \r\n | \r\n \r\n {Common.formatDateTime(\r\n productsDetail?.createdDate,\r\n \"DD-MM-YYYY\"\r\n )}\r\n | \r\n
| \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/ecommerce/ecm006.svg*/}\r\n \r\n \r\n | \r\n \r\n {Common.formatMoney(productsDetail?.grandTotal)}\r\n | \r\n
\r\n {/*begin::Card header*/}\r\n
\r\n {/*end::Customer details*/}\r\n {/*begin::Documents*/}\r\n \r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n {t(\"Product Info\")}
\r\n\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Table*/}\r\n \r\n {/*begin::Table body*/}\r\n \r\n {/*begin::Customer name*/}\r\n
\r\n {/*end::Table*/}\r\n
\r\n | \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/electronics/elc003.svg*/}\r\n\r\n {/*end::Svg Icon*/}\r\n {t(\"Name\")}\r\n \r\n | \r\n |
| \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/communication/com006.svg*/}\r\n\r\n {/*end::Svg Icon*/}\r\n {t(\"Check-in date\")}\r\n \r\n | \r\n \r\n \r\n {/*begin:: Avatar */}\r\n\r\n {/*end::Avatar*/}\r\n {/*begin::Name*/}\r\n \r\n {Common.formatDateTime(\r\n productsDetail?.orderLines[0]?.product.fromDate,\r\n \"DD-MM-YYYY\"\r\n )}\r\n \r\n {/*end::Name*/}\r\n \r\n | \r\n
| \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/communication/com011.svg*/}\r\n\r\n {/*end::Svg Icon*/}\r\n {t(\"Check-out date\")}\r\n \r\n | \r\n \r\n \r\n {Common.formatDateTime(\r\n productsDetail?.orderLines[0]?.product.toDate,\r\n \"DD-MM-YYYY\"\r\n )}\r\n \r\n | \r\n
\r\n {/*begin::Card header*/}\r\n
\r\n {/*end::Documents*/}\r\n \r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n Khấu trừ
\r\n\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Table*/}\r\n \r\n {/*begin::Table body*/}\r\n \r\n {/*begin::Invoice*/}\r\n
\r\n {/*end::Table*/}\r\n
\r\n | \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/ecommerce/ecm008.svg*/}\r\n {/*end::Svg Icon*/}\r\n Số tiền giảm\r\n \r\n | \r\n \r\n | \r\n
| \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/ecommerce/ecm006.svg*/}\r\n {/*end::Svg Icon*/}Số tiền cần thanh toán\r\n \r\n \r\n | \r\n \r\n | \r\n
\r\n
\r\n \r\n {t(\"Back To Product Page\")}\r\n
\r\n \r\n {/*begin::Card body*/}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Error;\r\n","import React, { useState } from \"react\";\r\nimport Table from \"../../partials/table/Table\";\r\nimport Common from \"../../utils/Common\";\r\nimport { range } from \"lodash\";\r\nimport { useSetState } from \"react-use\";\r\nimport { t } from \"../../utils/utils\";\r\n\r\nimport { useHistory } from \"react-router-dom\";\r\nimport { getRentVacationProduct } from \"../../services/ProductService\";\r\n\r\ntype Props = {};\r\n\r\nexport function convertStatus(allStatus: number) {\r\n let status = \"\";\r\n let className = \"badge-light\";\r\n if (allStatus === 1) {\r\n status = \"Đã phát hành\";\r\n className = \"badge-primary\";\r\n }\r\n if (allStatus === 2) {\r\n status = \"Chưa phát hành\";\r\n className = \"badge-warning\";\r\n }\r\n if (allStatus === 4) {\r\n status = \"Quá hạn xử lý\";\r\n className = \"badge-dark\";\r\n }\r\n\r\n return { status, className };\r\n}\r\n\r\nconst ProductRental = (props: Props) => {\r\n const history = useHistory();\r\n\r\n return (\r\n <>\r\n \r\n {/*begin::Heading*/}\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Title*/}\r\n \r\n {t(\"Back To Product Page\")}\r\n \r\n {/*end::Action*/}\r\n
\r\n {/*end::Heading*/}\r\n {/*begin::Illustration*/}\r\n Xin lỗi, đơn hàng thanh toán chưa thành công
\r\n {/*end::Title*/}\r\n {/*begin::Description*/}\r\n\r\n Ấn vào nút bên dưới để quay về\r\n
trang sản phẩm\r\n
\r\n
\r\n {/*end::Illustration*/}\r\n \r\n \r\n
*/}\r\n \r\n );\r\n })}\r\n \r\n );\r\n};\r\n\r\nexport const scrollToField = (formKey: string, fieldKey: string) => {\r\n const el = document.querySelector(`[data-form-field-key=\"${formKey}_${fieldKey}\"]`);\r\n\r\n if (el) {\r\n const y = el.getBoundingClientRect().top + window.pageYOffset - 100;\r\n window.scrollTo({ top: y });\r\n }\r\n};\r\n\r\nexport default FormItems;\r\n","import React from \"react\";\r\nimport classNames from \"classnames\";\r\nimport { motion } from \"framer-motion\";\r\nimport { ComponentPropsWithRef, useState } from \"react\";\r\n\r\nexport type BoxImageProps = {\r\n isSelected?: boolean;\r\n name?: string;\r\n src: \"add\" | string;\r\n onRemove?: () => void;\r\n showCheck?: boolean;\r\n isUploading?: boolean;\r\n} & ComponentPropsWithRef<\"div\">; \r\n\r\nconst BoxImage = ({\r\n isSelected,\r\n name,\r\n src,\r\n showCheck,\r\n onRemove,\r\n isUploading,\r\n ...props\r\n}: BoxImageProps) => {\r\n const [isShown, setIsShown] = useState(false);\r\n\r\n return (\r\n \r\n
\r\n )}\r\n {typeof onRemove === \"function\" && isShown && (\r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n if (src === \"add\") {\r\n return (\r\n \r\n \r\n
\r\n Uploading...
\r\n \r\n \r\n
\r\n );\r\n }\r\n return (\r\n \r\n \r\n setValue(e.target.value)}\r\n />\r\n {value.length > 0 && (\r\n
\r\n );\r\n};\r\n\r\nconst WidgetImage = ({ value, onChange, ...props }: any) => {\r\n /* const { currentUser } = useAuth();\r\n const maxFiles = useMemo(() => {\r\n if (schema.maxItems && schema.maxItems > 0) {\r\n return schema.maxItems;\r\n }\r\n return MAX_UPLOAD;\r\n }, [schema]); */\r\n const value00 = useMemo setValue(\"\")}>\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 <>\r\n {renderModal()}\r\n \r\n
\r\n \r\n {\r\n setKeyword(keyword);\r\n setPage(0);\r\n }}\r\n />\r\n\r\n
\r\n \r\n \r\n
\r\n Choose {props.title}
\r\n\r\n upload()}\r\n accept=\"image/*\"\r\n />\r\n {\r\n // @ts-ignore\r\n document.getElementById(fileId).click();\r\n }}\r\n className=\"tw-mb-8 tw-w-full tw-flex tw-items-center tw-flex-col tw-gap-1 tw-h-[100px] hover:tw-cursor-pointer tw-rounded-lg border-dashed border-2 tw-border-cta tw-flex tw-items-center tw-justify-center\"\r\n style={{\r\n background: \"var(--kt-input-solid-bg)\",\r\n }}\r\n >\r\n \r\n
\r\n Choose / Drop images here
\r\n \r\n {map(uploading, (v: any, k) => {\r\n if (!v) return null;\r\n return {\r\n if (selected[image.id]) {\r\n setSelected({\r\n [image.id]: false,\r\n });\r\n } else {\r\n setSelected({\r\n [image.id]: image,\r\n });\r\n }\r\n }}\r\n />\r\n );\r\n })}\r\n
\r\n \r\n }\r\n nextLabel={}\r\n pageCount={Math.ceil(totalCount / ITEMS_PER_PAGE) || 1}\r\n breakClassName=\"page-item\"\r\n breakLinkClassName=\"page-link\"\r\n containerClassName=\"pagination justify-content-center !tw-flex-nowrap\"\r\n pageClassName=\"page-item\"\r\n pageLinkClassName=\"page-link\"\r\n previousClassName=\"page-item\"\r\n previousLinkClassName=\"page-link\"\r\n nextClassName=\"page-item\"\r\n nextLinkClassName=\"page-link\"\r\n activeClassName=\"active\"\r\n pageRangeDisplayed={2}\r\n marginPagesDisplayed={4}\r\n forcePage={page}\r\n onPageChange={({ selected: page }) => {\r\n setPage(page);\r\n }}\r\n />\r\n
\r\n \r\n \r\n {\r\n onChange(arraySelected);\r\n }}\r\n >\r\n Save changes\r\n \r\n
\r\n \r\n {\r\n setSelected({\r\n [image.id]: false,\r\n });\r\n onChange(\r\n map(\r\n {\r\n ...selected,\r\n [image.id]: false,\r\n },\r\n (v) => v\r\n ).filter((v) => !!v)\r\n );\r\n }}\r\n />\r\n );\r\n })}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default WidgetImage;\r\n\r\nexport const getImages = (formFieldData: any): ImageItemType[] => {\r\n if (typeof formFieldData === \"string\") {\r\n return JSON.parse(formFieldData);\r\n }\r\n if (Array.isArray(formFieldData)) {\r\n return formFieldData;\r\n }\r\n return [];\r\n};\r\n","import { Slide, toast } from \"react-toastify\";\r\nimport { ToastPromiseParams } from \"react-toastify/dist/core/toast\";\r\nimport { ToastOptions } from \"react-toastify/dist/types\";\r\n\r\nexport const asyncToast = async \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nconst VoucherList = ({ onChange, value, isVisible, setIsVisible, onSubmit }: Props) => {\r\n const { result } = useQueryListPromotion({ type: 16 });\r\n const [selected, setSelected] = useSetState\r\n {\r\n const temp: any = { ...selected };\r\n if (e.target.checked) {\r\n temp[item.id] = {\r\n ApplyBeforeCheckIn: +day,\r\n PromotionId: item.id,\r\n PluginDatas: item.pluginDatas[0],\r\n Name: item.name,\r\n };\r\n } else {\r\n temp[item.id] = false;\r\n }\r\n setSelected(temp);\r\n }}\r\n checked={selected[item.id]}\r\n />\r\n
\r\n \r\n {item.name} \r\n\r\n setStatus(+e.target.value)} row>\r\n {listTest.map((data) => (\r\n \r\n {status === PromotionType.setCalendar && (\r\n
\r\n \r\n Áp dụng trước ngày check-in{\" \"}\r\n setDay(e.target.value)}\r\n />{\" \"}\r\n ngày\r\n
\r\n )}\r\n Chọn chương trình giảm giá
\r\n setIsVisible(false)}>\r\nloading...
;\r\n return {renderModal()}
;\r\n};\r\n\r\nexport default VoucherList;\r\n","import { gql, useQuery } from \"urql\";\r\nimport { getCommonValues } from \"../../../utils/typeUltils\";\r\n\r\nconst queryListPromotion = gql`\r\n query ListPromotion(\r\n $keyword: String = \"\"\r\n $limit: Int = 10\r\n $offset: Int = 0\r\n $type: Int\r\n $active: Boolean\r\n $order: String = \"desc\"\r\n $sort: String = \"createdDate\"\r\n $merchantId: String = \"\"\r\n $languageId: String = \"\"\r\n $from: DateTime\r\n $to: DateTime\r\n ) {\r\n promotions(\r\n param: {\r\n keyword: $keyword\r\n limit: $limit\r\n offset: $offset\r\n order: $order\r\n type: $type\r\n active: $active\r\n sort: $sort\r\n merchantId: $merchantId\r\n languageId: $languageId\r\n fromUtc: $from\r\n toUtc: $to\r\n }\r\n ) {\r\n items {\r\n id\r\n active\r\n createdBy\r\n createdDate\r\n totalUsed\r\n totalAmountUsed\r\n totalCodes\r\n type\r\n fromDate\r\n toDate\r\n images{\r\n id\r\n path\r\n name\r\n }\r\n merchantId\r\n name\r\n promotionTargets {\r\n id\r\n targetName\r\n targetId\r\n }\r\n pluginDatas {\r\n id\r\n pluginId\r\n pluginName\r\n pluginType\r\n data\r\n dataContent\r\n priority\r\n }\r\n }\r\n totalCount\r\n success\r\n message\r\n }\r\n }\r\n`;\r\n\r\nexport function useQueryListPromotion({\r\n keyword = \"\",\r\n limit = 10,\r\n offset = 0,\r\n type,\r\n active,\r\n order = \"desc\",\r\n sort = \"createdDate\",\r\n\r\n from,\r\n to,\r\n requestPolicy = \"network-only\",\r\n}: any): { result: any; refetch: any } {\r\n const [result, refetch] = useQuery({\r\n query: queryListPromotion,\r\n variables: (() => {\r\n return {\r\n keyword,\r\n limit,\r\n offset,\r\n type,\r\n active,\r\n order,\r\n sort,\r\n ...getCommonValues([\"MerchantId\", \"LanguageId\"], true),\r\n from,\r\n to,\r\n };\r\n })(),\r\n requestPolicy,\r\n });\r\n\r\n return { result, refetch };\r\n}\r\n","import { Divider, Tooltip } from \"@mui/material\";\r\nimport Box from \"@mui/material/Box\";\r\nimport Chip from \"@mui/material/Chip\";\r\nimport Stack from \"@mui/material/Stack\";\r\nimport Typography from \"@mui/material/Typography\";\r\nimport _ from \"lodash\";\r\nimport moment from \"moment\";\r\nimport React, { useEffect, useMemo, useState } from \"react\";\r\nimport DateRangePicker from \"react-bootstrap-daterangepicker\";\r\nimport { Controller, useForm } from \"react-hook-form\";\r\nimport { toast } from \"react-toastify\";\r\nimport { useSetState } from \"react-use\";\r\nimport * as Yup from \"yup\";\r\n\r\nimport FormItems, { FormItemLabel, scrollToField } from \"../../partials/FormItems/FormItems\";\r\nimport WidgetImage from \"../../partials/Image\";\r\nimport { useQueryAddresses } from \"../../services/AddressService\";\r\nimport { createRentProduct, RentProduct } from \"../../services/commands/product\";\r\nimport { useQueryImages } from \"../../services/ImageService\";\r\nimport { sendCommandAndAffect } from \"../../utils/command\";\r\nimport Common from \"../../utils/Common\";\r\nimport { asyncToast } from \"../../utils/toast\";\r\nimport {\r\n formatDateTime,\r\n getCommonValues,\r\n stringBooleanToRealBoolean,\r\n} from \"../../utils/typeUltils\";\r\nimport { dataURLtoFile, handleUploadAvatar } from \"../deposit\";\r\nimport VoucherList, { MessagePromotionResponse } from \"./VoucherList\";\r\n\r\ntype Props = {};\r\n\r\nconst schema = Yup.object().shape({\r\n addressName: Yup.mixed().required(\"is a required property\"),\r\n adult: Yup.number()\r\n .required(\"is a required property\")\r\n .min(1, \"Số người lớn phải lớn hơn 0\")\r\n .max(10, \"Số người lớn phải nhỏ hơn 10\"),\r\n children: Yup.number()\r\n .required(\"is a required property\")\r\n .min(1, \"Số trẻ em phải lớn hơn 0 \")\r\n .max(10, \"Số trẻ em phải nhỏ hơn 10\"),\r\n bedRoom: Yup.mixed().required(\"is a required property\"),\r\n\r\n price: Yup.number()\r\n .required(\"is a required property\")\r\n .min(1000000, \"Số tiền cho thuê không được dưới 1.000.000\"),\r\n});\r\ninterface ICalculatePromotion {\r\n PromotionItems: { PromotionId: string; ApplyBeforeCheckIn }[];\r\n FromDate: Date;\r\n Amount: number;\r\n ModifiedDate: Date;\r\n ModifiedBy: string;\r\n}\r\nexport const calCulatePromotion = (values: ICalculatePromotion) => {\r\n return sendCommandAndAffect({\r\n domain: \"Promotion\",\r\n name: \"CalculateDiscountProductVacationRent\",\r\n values,\r\n });\r\n};\r\n\r\nconst Form = (props: Props) => {\r\n const [date, setDate] = useSetState\r\n
\r\n {/*begin::Aside column*/}\r\n \r\n {/*begin::Order details*/}\r\n\r\n {/*end::Order details*/}\r\n {/*begin::Order details*/}\r\n
\r\n {/*end::Order details*/}\r\n \r\n {/*begin::Card header*/}\r\n
\r\n {/*end::Card body*/}\r\n \r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n Thông tin sản phẩm cho thuê
\r\n\r\n {/*begin::Billing address*/}\r\n
\r\n {/*end::Billing address*/}\r\n \r\n {/*begin::Title*/}\r\n\r\n {/*begin::Input group*/}\r\n \r\n Khu nghỉ chưa có trong hệ thống. Để thêm khu nghỉ, liên hệ với chúng tôi{\" \"}\r\n \r\n tại đây\r\n \r\n \r\n ),\r\n },\r\n type: \"select\",\r\n dataSource: useQueryAddresses,\r\n },\r\n ]}\r\n />\r\n \r\n \r\n ({ label: v, value: v })),\r\n },\r\n {\r\n key: \"doubleBed\",\r\n label: \"Number Of Double Bed\",\r\n\r\n type: \"select\",\r\n dataSource: _.range(1, 9).map((v) => ({ label: v, value: v })),\r\n },\r\n {\r\n key: \"singleBed\",\r\n label: \"Number Of Single Bed\",\r\n\r\n type: \"select\",\r\n dataSource: _.range(1, 9).map((v) => ({ label: v, value: v })),\r\n },\r\n ]}\r\n />\r\n \r\n
\r\n \r\n ({ label: v, value: v })),\r\n },\r\n {\r\n key: \"hasKitchen\",\r\n label: \"Kitchen\",\r\n\r\n type: \"radio\",\r\n inputProps: {\r\n defaultValue: \"false\",\r\n },\r\n dataSource: [\r\n { value: true, label: \"Có\" },\r\n { value: false, label: \"Không\" },\r\n ],\r\n },\r\n ]}\r\n />\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n {\r\n picker.element.val(\"\");\r\n }}\r\n initialSettings={{\r\n showDropdowns: true,\r\n autoApply: true,\r\n startDate: date.fromDate,\r\n minDate: moment(new Date()).add(2, \"months\"),\r\n maxDate: moment(new Date()).add(2, \"years\"),\r\n\r\n autoUpdateInput: false,\r\n locale: {\r\n cancelLabel: true,\r\n },\r\n }}\r\n onApply={(event, picker) => {\r\n setDate({\r\n numberOfNights: moment(picker.endDate).diff(\r\n moment(picker.startDate),\r\n \"days\"\r\n ),\r\n });\r\n setDate({\r\n fromDate: picker.startDate,\r\n endDate: picker.endDate,\r\n });\r\n\r\n /* setFilterParams({\r\n from: moment(picker.startDate).format(\"YYYY-MM-DD\"),\r\n to: moment(picker.endDate).format(\"YYYY-MM-DD\"),\r\n }); */\r\n }}\r\n >\r\n
\r\n \r\n {\r\n picker.element.val(\"\");\r\n }}\r\n initialSettings={{\r\n showDropdowns: true,\r\n autoApply: true,\r\n minDate: moment(new Date()).add(2, \"months\"),\r\n maxDate: moment(new Date()).add(2, \"years\"),\r\n autoUpdateInput: false,\r\n locale: {\r\n cancelLabel: true,\r\n },\r\n }}\r\n onApply={(event, picker) => {\r\n setDate({\r\n startDate: moment(picker.startDate).format(\"DD/MM/YYYY\"),\r\n endDate: moment(picker.endDate).format(\"DD/MM/YYYY\"),\r\n });\r\n /* setFilterParams({\r\n from: moment(picker.startDate).format(\"YYYY-MM-DD\"),\r\n to: moment(picker.endDate).format(\"YYYY-MM-DD\"),\r\n }); */\r\n }}\r\n >\r\n
\r\n \r\n
\r\n {date.numberOfNights}
\r\n \r\n {\r\n if (form.watch(\"promotions\")?.length > 0) {\r\n handleApplyPromotion(form.watch(\"promotions\"), false, e.target.value);\r\n }\r\n },\r\n },\r\n },\r\n ]}\r\n />\r\n
\r\n\r\n \r\n Chương trình chiết khấu\r\n \r\n \r\n \r\n {\r\n if (+form.watch(\"price\") > 0) {\r\n setIsVisible(true);\r\n } else {\r\n toast.info(\r\n \"Giá cho thuê phải lơn hơn 0 để áp dụng chương trình khuyến mại\"\r\n );\r\n }\r\n }}\r\n className=\"ms-4 d-flex align-items-center text-primary cursor-pointer hover:tw-underline\"\r\n >\r\n \r\n Thêm chương trình khuyến mãi\r\n
\r\n \r\n {form.watch(\"promotions\")?.length > 0 &&\r\n form\r\n .watch(\"promotions\")\r\n\r\n .map((item) => (\r\n \r\n {\r\n const filteredArr = form\r\n .watch(\"promotions\")\r\n .filter((tempItem) => tempItem.PromotionId !== item.PromotionId);\r\n\r\n form.setValue(\"promotions\", filteredArr);\r\n handleApplyPromotion(filteredArr, true);\r\n }}\r\n />\r\n \r\n ))}\r\n
\r\n \r\n Tổng tiền chiết khấu \r\n \r\n {Common.formatMoney(\r\n priceAfterDiscount ? +form.watch(\"price\") - priceAfterDiscount : undefined\r\n )}\r\n \r\n Giá cho thuê sau chiết khấu \r\n \r\n {Common.formatMoney(priceAfterDiscount)}\r\n \r\n \r\n Phí cho thuê thành công\r\n 10% giá cho thuê, tối thiểu 500000đ\r\n \r\n \r\n {Common.formatMoney(+form.watch(\"price\") - ownerRevenue)}\r\n \r\n \r\n Doanh thu cho thuê của chủ sở hữu(chưa trừ thuế)\r\n 90% giá cho thuê\r\n \r\n \r\n {Common.formatMoney(+form.watch(\"price\") * (90 / 100))}\r\n \r\n \r\n Thuế thu nhập cá nhân\r\n 10% doanh thu cho thuê\r\n \r\n \r\n {Common.formatMoney(ownerRevenue * (10 / 100))}\r\n \r\n Tổng doanh thu ròng \r\n \r\n {Common.formatMoney(\r\n +form.watch(\"price\") -\r\n (+form.watch(\"price\") - ownerRevenue) -\r\n ownerRevenue * (10 / 100)\r\n )}\r\n \r\n
\r\n \r\n {\r\n if (!e.target.checked) {\r\n setState({\r\n image: {},\r\n });\r\n }\r\n }}\r\n className=\"form-check-input\"\r\n type=\"checkbox\"\r\n id=\"verifyStatus\"\r\n />\r\n \r\n
\r\n {form.watch(\"verifyStatus\") && (\r\n \r\n
\r\n )}\r\n\r\n \r\n
\r\n \r\n \r\n {/*end::Label*/}\r\n {/*begin::Input*/}\r\n \r\n Upload ảnh trang có thông tin khu nghỉ trên hợp đồng\r\n \r\n
\r\n \r\n \r\n \r\n {/*begin::Inputs*/}\r\n \r\n uploadAvatar(event.target.files[0], \"image1\")\r\n }\r\n />\r\n {/*end::Inputs*/}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n Upload ảnh trang có thông tin chủ sở hữủ trên hợp đồng\r\n \r\n {/*end::Label*/}\r\n {/*begin::Input*/}\r\n\r\n
\r\n \r\n \r\n \r\n {/*begin::Inputs*/}\r\n \r\n uploadAvatar(event.target.files[0], \"image2\")\r\n }\r\n />\r\n\r\n {/*end::Inputs*/}\r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n Upload ảnh trang có Chữ ký và Dấu mộc của chủ sở hữu và khu nghỉ trên hợp\r\n đồng hoặc thẻ sở hữu cùng các văn bản khác nếu có\r\n \r\n {/*end::Label*/}\r\n {/*begin::Input*/}\r\n\r\n
\r\n \r\n \r\n \r\n {/*begin::Inputs*/}\r\n \r\n uploadAvatar(event.target.files[0], \"image3\")\r\n }\r\n />\r\n\r\n {/*end::Inputs*/}\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n\r\n Chính sách cho thuê dành cho hội viên
\r\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae possimus quam\r\n facilis, cupiditate perspiciatis illum velit eveniet doloribus harum unde\r\n voluptates porro quisquam, reiciendis distinctio ipsa. Qui a sequi pariatur\r\n voluptate. Earum error iusto eveniet est, ea asperiores natus facilis inventore\r\n recusandae. Blanditiis sequi beatae maiores expedita. Illo tempora totam\r\n dignissimos nulla voluptatem eveniet hic tenetur inventore quae. Animi fugit vitae\r\n ab totam sit voluptas nemo similique eius quasi? Veritatis ad ea nostrum quam\r\n illum nesciunt architecto, aliquam, harum itaque cupiditate eum saepe vitae\r\n deserunt fugit praesentium repellat, reprehenderit accusamus corrupti? Libero\r\n voluptate sunt debitis hic quibusdam, aut repellendus consequuntur maiores, rerum\r\n soluta sint quisquam amet cum deserunt, temporibus fuga illum dolores blanditiis\r\n veniam voluptatum! Quas earum est quod eum minus quibusdam, reiciendis quaerat ab,\r\n eaque voluptatum repellat ex, doloribus cumque eos cupiditate porro consectetur\r\n reprehenderit a! Sit eaque quasi natus adipisci omnis a quam ea nisi reprehenderit\r\n minus, aspernatur unde! Expedita, sed quisquam et eum similique eligendi magni\r\n voluptatem nesciunt sint, illum facere officiis, assumenda ullam nostrum atque\r\n possimus dignissimos? Culpa asperiores id voluptate in odio cupiditate quis\r\n tempora quibusdam distinctio, suscipit fuga maiores beatae quas nostrum reiciendis\r\n facilis molestiae corrupti dignissimos debitis dolor quod? Ducimus maxime ipsa\r\n quod maiores, molestias vero inventore nemo, ratione repellendus est laborum\r\n doloremque voluptates ea quaerat dicta perferendis velit sunt! Illo, doloribus\r\n fugiat! Error suscipit voluptatum, dicta tenetur, tempore dolor, quae dolores\r\n dolorum accusamus soluta dignissimos et perspiciatis nam. Eaque ducimus\r\n consequuntur sunt eos error fugiat officiis, ipsum quod molestias possimus, alias\r\n repellat, minus voluptatum dolor nostrum! Quae ullam sunt corporis reprehenderit\r\n recusandae cupiditate distinctio quis atque sapiente aspernatur. Minus sit\r\n corporis iusto soluta hic incidunt eum doloribus voluptates asperiores veritatis\r\n quasi provident eius, mollitia, est ab necessitatibus rem aliquam facere\r\n laudantium eveniet alias ipsum. Blanditiis, nemo quidem veniam dolore facere\r\n harum, itaque hic quibusdam quis eos nesciunt earum cum dolorum labore adipisci\r\n sint, quas cupiditate ut recusandae voluptates? Consequatur molestiae explicabo\r\n quaerat quas saepe perspiciatis inventore eaque voluptatibus. Iste earum culpa\r\n provident recusandae vitae tenetur natus, omnis ut libero deserunt illum incidunt\r\n labore, sit fugit nobis ad pariatur commodi officiis? Laborum, dolores autem! Id\r\n repellat quisquam reiciendis recusandae minima eum mollitia pariatur fuga nostrum\r\n quasi iure facere, ex modi reprehenderit consectetur explicabo alias ullam fugit\r\n dolorem, eveniet perferendis optio. Nam iste, perferendis error neque obcaecati\r\n maiores iusto voluptatum distinctio et id aspernatur ratione blanditiis explicabo\r\n aut, ullam alias repellat dolorum cum rem consequuntur quidem nemo inventore!\r\n Repellendus totam praesentium perspiciatis dignissimos mollitia dolor assumenda,\r\n error consequatur? Libero deleniti earum numquam quibusdam minus voluptatibus\r\n reprehenderit rem suscipit voluptate vel. Dolores repudiandae, illo ipsa numquam\r\n ducimus hic et impedit tempora amet doloremque cupiditate, aliquid iure\r\n perferendis magni doloribus ut quae alias! Est eius recusandae pariatur blanditiis\r\n quidem itaque perferendis veniam quaerat aliquam assumenda debitis ut doloremque\r\n earum cupiditate delectus obcaecati dignissimos repellat nesciunt reprehenderit,\r\n quisquam illum laborum sed quis minus. Animi libero autem odit excepturi quia\r\n corrupti ratione soluta reiciendis, magni odio incidunt eos praesentium quibusdam\r\n repellat. Perspiciatis magnam tempore perferendis molestias distinctio nam?\r\n \r\n
\r\n\r\n {/*end::Checkbox*/}\r\n {/*begin::Shipping address*/}\r\n \r\n {/*begin::Title*/}\r\n
\r\n {/*end::Shipping address*/}\r\n Shipping Address
\r\n {/*end::Title*/}\r\n {/*begin::Input group*/}\r\n \r\n
\r\n {/*end::Input group*/}\r\n {/*begin::Input group*/}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Input*/}\r\n
\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Input*/}\r\n
\r\n \r\n
\r\n {/*end::Input group*/}\r\n {/*begin::Input group*/}\r\n\r\n {/*end::Input group*/}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Input*/}\r\n
\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Input*/}\r\n
\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Input*/}\r\n
\r\n \r\n {/*begin::Button*/}\r\n \r\n Hủy\r\n \r\n {/*end::Button*/}\r\n {/*begin::Button*/}\r\n \r\n {/*end::Button*/}\r\n
\r\n \r\n
\r\n \r\n {/*begin::Card header*/}\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Card title*/}\r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n\r\n {/*end::Card title*/}\r\n {/*begin::Card toolbar*/}\r\n\r\n {/*begin::Card toolbar*/}\r\n Ảnh sản phẩm
\r\n\r\n {/*begin::Image input*/}\r\n {/*begin::Image input placeholder*/}\r\n \r\n {/*begin::Preview existing avatar*/}\r\n \r\n \r\n {/*begin::Inputs*/}\r\n uploadAvatar(event.target.files[0], \"thumbnail\")}\r\n name=\"avatar\"\r\n accept=\".png, .jpg, .jpeg\"\r\n />\r\n \r\n {/*end::Inputs*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Cancel*/}\r\n\r\n {/*end::Cancel*/}\r\n {/*begin::Remove*/}\r\n \r\n \r\n \r\n {/*end::Remove*/}\r\n
\r\n {/*end::Image input*/}\r\n {/*begin::Description*/}\r\n \r\n {/*end::Description*/}\r\n \r\n {/*begin::Card header*/}\r\n
\r\n {/*end::Thumbnail settings*/}\r\n {/*begin::Status*/}\r\n {/*end::Template settings*/}{\" \"}\r\n \r\n \r\n\r\n {/*end::Aside column*/}\r\n {/*begin::Main column*/}\r\n\r\n {/*end::Main column*/}\r\n \r\n );\r\n};\r\n\r\nexport default Form;\r\n","import React, { Suspense, useEffect } from \"react\";\r\nimport { Redirect, Route, Switch, useHistory } from \"react-router-dom\";\r\n\r\nimport ChangePassword from \"../changePassword/ChangePassword\";\r\nimport Email from \"../email/Email\";\r\nimport Order from \"../order/Order\";\r\nimport Deposit from \"../deposit\";\r\n\r\nimport OrderDetail from \"../orderDetail/OrderDetail\";\r\n\r\nimport Schedule from \"../schedule/index\";\r\nimport { LayoutSplashScreen } from \"../../layout/LayoutContext\";\r\nimport DriveList from \"../drive/DriveList\";\r\nimport DriveForm from \"../drive/DriveForm\";\r\n\r\nimport TestView from \"../testview/Testview\";\r\n\r\nimport PointTransaction from \"../profile/pointTransaction\";\r\nimport { useSelector } from \"react-redux\";\r\nimport ProductVacation from \"../product/vacation/list\";\r\nimport DepositDetail from \"../deposit/Detail\";\r\n\r\nimport ListProduct from \"../product/vacation/detail/views/listProduct/List\";\r\nimport Information from \"../product/vacation/detail/views/information\";\r\nimport Profile from \"../profile/Profile\";\r\nimport Checkout from \"../checkout\";\r\n\r\nimport Confirm from \"../checkout/Confirm\";\r\nimport Success from \"../checkout/Success\";\r\nimport Error from \"../checkout/Error\";\r\nimport RentVacation from \"../rent-vacation\";\r\nimport RentVacationForm from \"../rent-vacation/Form\";\r\n\r\nexport default function HomePage() {\r\n const history = useHistory();\r\n const isAuth = useSelector((state) => state.auth.isAuth);\r\n console.log(history.location.pathname, isAuth, \"30\");\r\n\r\n useEffect(() => {\r\n if (history.location.pathname === \"/auth/login\" && isAuth) {\r\n window.location.href = \"/\";\r\n }\r\n }, [isAuth]);\r\n\r\n return (\r\n \r\n {/*begin::Card title*/}\r\n
\r\n {/*end::Card header*/}\r\n {/*begin::Card body*/}\r\n \r\n
\r\n\r\n {/*end::Card title*/}\r\n {/*begin::Card toolbar*/}\r\n\r\n {/*begin::Card toolbar*/}\r\n Album ảnh sản phẩm
\r\n\r\n {/*begin::Image input*/}\r\n {/*begin::Image input placeholder*/}\r\n\r\n {/*end::Remove*/}\r\n\r\n (\r\n
\r\n {/*end::Card body*/}\r\n \r\n {/*begin::Heaeder menu toggle*/}\r\n \r\n \r\n {/*begin::Svg Icon | path: icons/duotune/abstract/abs015.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n
\r\n \r\n {/*end::Heaeder menu toggle*/}\r\n {/*begin::Header Logo*/}\r\n \r\n \r\n
\r\n {/*end::Header Logo*/}\r\n {/*begin::Wrapper*/}\r\n \r\n {/*begin::Navbar*/}\r\n \r\n {/*end::Menu*/}\r\n
\r\n {/*end::Menu wrapper*/}\r\n \r\n {/*end::Navbar*/}\r\n {/*begin::Toolbar wrapper*/}\r\n \r\n {/*begin::Search*/}\r\n\r\n {/*end::Activities*/}\r\n {/*begin::Notifications*/}\r\n \r\n {/*begin::Heading*/}\r\n \r\n {/*begin::Title*/}\r\n
\r\n {/*end::Heading*/}\r\n {/*begin::Tab content*/}\r\n \r\n {/*begin::Menu- wrapper*/}\r\n \r\n {/*begin::Svg Icon | path: icons/duotune/general/gen022.svg*/}\r\n \r\n \r\n \r\n {/*end::Svg Icon*/}\r\n
\r\n {/*begin::Menu*/}\r\n \r\n {t(\"Notification\")}\r\n
\r\n {/*end::Title*/}\r\n {/*begin::Tabs*/}\r\n- \r\n
- \r\n
\r\n {/*begin::Tab panel*/}\r\n \r\n {/*begin::Items*/}\r\n\r\n {/*end::Items*/}\r\n {/*begin::View more*/}\r\n\r\n {/*begin::Item*/}\r\n {notifications && notifications.items?.length > 0 && (\r\n \r\n {item.createdDate}\r\n \r\n \r\n {/*end::Label*/}\r\n
\r\n );\r\n })}\r\n \r\n )}\r\n\r\n {/*end::Item*/}\r\n {/*begin::Item*/}\r\n\r\n {/*end::Item*/}\r\n\r\n {!notifications ||\r\n (notifications && notifications.length === 0 && (\r\n \r\n {notifications.items.map((item) => {\r\n return (\r\n {\r\n const objData = {\r\n Id: item.id,\r\n ModifiedDate: Common.formatDateTime(\r\n new Date()\r\n ),\r\n ModifiedBy: localStorage.getItem(\r\n Configuration.userId\r\n ),\r\n };\r\n await props.readNotificationAction(objData);\r\n if (item.urlReturn) {\r\n if (item.urlReturn.startsWith(\"http\")) {\r\n window\r\n .open(item.urlReturn, \"_blank\")\r\n .focus();\r\n }\r\n }\r\n }}\r\n className=\"d-flex flex-stack py-4 cursor-pointer\"\r\n >\r\n {/*begin::Section*/}\r\n
\r\n {/*end::Section*/}\r\n {/*begin::Label*/}\r\n \r\n \r\n {/*begin::Symbol*/}\r\n\r\n {/*end::Symbol*/}\r\n {/*begin::Title*/}\r\n
\r\n {/*end::Title*/}\r\n \r\n \r\n {item.message}\r\n
\r\n \r\n \r\n Chưa có thông báo mới\r\n {/*begin::Svg Icon | path: icons/duotune/arrows/arr064.svg*/}\r\n {/*end::Svg Icon*/}\r\n \r\n
\r\n ))}\r\n\r\n {/*end::View more*/}\r\n \r\n {/*end::Tab panel*/}\r\n {/*begin::Tab panel*/}\r\n \r\n
\r\n {/*end::Menu item*/}\r\n {/*begin::Menu separator*/}\r\n \r\n {/*end::Menu separator*/}\r\n {/*begin::Menu item*/}\r\n \r\n {/*begin::Avatar*/}\r\n
\r\n \r\n
\r\n {/*end::Avatar*/}\r\n {/*begin::Username*/}\r\n \r\n \r\n {email}\r\n \r\n
\r\n {/*end::Username*/}\r\n \r\n {firstName + \" \" + lastName}\r\n
\r\n \r\n {/*begin::Menu item*/}\r\n {languages.length > 0 &&\r\n languages.map((lang) => {\r\n return (\r\n \r\n dispatch(actions.setLanguage(lang.code, lang.id))\r\n }\r\n className=\"menu-item px-3\"\r\n >\r\n \r\n \r\n
\r\n );\r\n })}\r\n\r\n {/*end::Menu item*/}\r\n \r\n {/*end::Menu sub*/}\r\n \r\n {/*end::Menu item*/}\r\n {/*begin::Menu item*/}\r\n\r\n {/*end::Menu item*/}\r\n {/*begin::Menu item*/}\r\n \r\n \r\n {t(\"Logout\")}\r\n \r\n
\r\n {/*end::Menu item*/}\r\n {/*begin::Menu separator*/}\r\n \r\n {/*end::Menu separator*/}\r\n {/*begin::Menu item*/}\r\n\r\n {/*end::Menu item*/}\r\n \r\n\r\n {/*end::User account menu*/}\r\n {/*end::Menu wrapper*/}\r\n \r\n {/*end::User */}\r\n {/*begin::Aside mobile toggle*/}\r\n {/*end::Aside mobile toggle*/}\r\n \r\n {/*end::Toolbar wrapper*/}\r\n \r\n {/*end::Wrapper*/}\r\n \r\n {/*end::Container*/}\r\n \r\n );\r\n};\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n stateFull: state,\r\n menuConfig: state.builder.menuConfig,\r\n userInfo: state.User.userInfo,\r\n totalPoint: state.User.totalPoint,\r\n userInfoMember: state.User.userInfoMember,\r\n merchant: state.Merchant.merchant,\r\n userInfo: state.User.userInfo,\r\n notifications: state.Notification.notifications,\r\n };\r\n};\r\nconst mapDispatchToProps = {\r\n getUserInfoAction,\r\n getNotificationAction,\r\n readNotificationAction,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Header);\r\n","import { NOTIFICATION } from '../configs/constants/NotificaionConstant';\r\nimport {\r\n getNotification,\r\n readNotification\r\n} from '../services/NotificationService';\r\n\r\nexport const getNotificationAction = (limt, offset) => ({\r\n type: NOTIFICATION.GET_NOTIFICATION,\r\n payload: getNotification( limt, offset)\r\n});\r\n\r\nexport const readNotificationAction = (notificationDTO) => ({\r\n type: NOTIFICATION.READ_NOTIFICATION,\r\n payload: readNotification(notificationDTO)\r\n});\r\n\r\n\r\n\r\n\r\n\r\n\r\n","import Configuration from \"../configs/Config\";\r\nimport Common from \"../utils/Common\";\r\n\r\nexport const getNavigation = (id) => {\r\n const languageId = localStorage.getItem(Configuration.languageId);\r\n const merchantId = localStorage.getItem(Configuration.merchantId);\r\n const tokenId = localStorage.getItem(Configuration.tokenId);\r\n var query = `\r\n {\r\n navigation(param:{id:\"${id}\",tokenUser:\"${tokenId}\",languageId:\"${ languageId}\",merchantId:\"${merchantId}\"})\r\n {\r\n id,\r\n name,\r\n description\r\n navigation\r\n } \r\n }\r\n \r\n `\r\n return Common.getDataGraphQl(query);\r\n };\r\n\r\n export const getMembershipMenuNavigations = ({languageId}) => {\r\n\r\n const merchantId = localStorage.getItem(Configuration.merchantId);\r\n const tokenId = localStorage.getItem(Configuration.tokenId);\r\n var query = `\r\n {\r\n membershipmenunavigations(param:{ \r\n tokenUser:\"${tokenId}\"\r\n ,merchantId:\"${merchantId}\"\r\n ,languageId:\"${languageId}\"\r\n })\r\n {\r\n items {\r\n id\r\n name\r\n navigation\r\n }\r\n }\r\n }\r\n `;\r\n return Common.getDataGraphQl(query);\r\n};\r\n","import { toAbsoluteUrl } from \"../utils/utils\";\r\n\r\nexport const initLayoutConfig = {\r\n demo: \"demo4\",\r\n // Base Layout\r\n colors: {\r\n state: {\r\n brand: \"#366cf3\",\r\n light: \"#ffffff\",\r\n dark: \"#282a3c\",\r\n\r\n primary: \"#5867dd\",\r\n success: \"#34bfa3\",\r\n info: \"#36a3f7\",\r\n warning: \"#ffb822\",\r\n danger: \"#fd3995\",\r\n },\r\n base: {\r\n label: [\"#c5cbe3\", \"#a1a8c3\", \"#3d4465\", \"#3e4466\"],\r\n shape: [\"#f0f3ff\", \"#d9dffa\", \"#afb4d4\", \"#646c9a\"],\r\n },\r\n },\r\n self: {\r\n body: {\r\n \"background-image\": toAbsoluteUrl(\"/media/demos/demo4/header.jpg\"),\r\n },\r\n },\r\n loader: {\r\n enabled: true,\r\n type: \"brand\",\r\n },\r\n // Page toolbar\r\n toolbar: {\r\n display: true,\r\n },\r\n header: {\r\n self: {\r\n width: \"fixed\", // fixed|fluid\r\n fixed: {\r\n desktop: {\r\n enabled: true,\r\n mode: \"menu\", //supported modes: all, topbar, menu\r\n },\r\n mobile: true,\r\n },\r\n },\r\n menu: {\r\n self: {\r\n display: true,\r\n \"root-arrow\": false,\r\n \"icon-style\": \"duotone\",\r\n },\r\n desktop: {\r\n arrow: true,\r\n toggle: \"click\",\r\n submenu: {\r\n skin: \"light\",\r\n arrow: true,\r\n },\r\n },\r\n mobile: {\r\n submenu: {\r\n skin: \"dark\",\r\n accordion: true,\r\n },\r\n },\r\n },\r\n },\r\n subheader: {\r\n display: true,\r\n layout: \"subheader-v1\",\r\n fixed: true,\r\n width: \"fixed\", //fixed|fluid\r\n layouts: {\r\n \"subheader-v1\": \"Subheader v1\",\r\n \"subheader-v2\": \"Subheader v2\",\r\n \"subheader-v3\": \"Subheader v3\",\r\n \"subheader-v4\": \"Subheader v4\",\r\n },\r\n style: \"transparent\", // transparent|solid\r\n },\r\n // Content\r\n content: {\r\n width: \"fixed\", // fixed/fluid\r\n },\r\n footer: {\r\n self: {\r\n width: \"fixed\", // fixed|fluid\r\n layout: \"extended\", // extended|basic\r\n },\r\n },\r\n aside: {\r\n self: {\r\n fixed: false,\r\n },\r\n menu: {\r\n dropdown: true,\r\n },\r\n },\r\n breadCrumbConvert: {\r\n profile: {\r\n title: \"Profile\",\r\n },\r\n checkout: {\r\n title: \"Checkout\",\r\n },\r\n \"product-vacation\": {\r\n title: \"Resort\",\r\n items: [\r\n {\r\n path: \"/list\",\r\n title: \"List\",\r\n },\r\n {\r\n path: \"/detail\",\r\n title: \"Detail\",\r\n },\r\n ],\r\n },\r\n deposit: {\r\n title: \"Deposit\",\r\n items: [\r\n {\r\n path: \"/list\",\r\n title: \"List\",\r\n },\r\n {\r\n path:\"/detail\",\r\n title:\"Deposit\"\r\n }\r\n ],\r\n },\r\n \"product-rental\":{\r\n title:\"Product Rental\",\r\n items:[\r\n {\r\n path:\"/list\",\r\n title:\"List\",\r\n },\r\n {\r\n path:\"/create\",\r\n title:\"Create\",\r\n }\r\n ]\r\n }\r\n },\r\n};\r\n\r\nlet LayoutConfig = JSON.parse(JSON.stringify(initLayoutConfig)); // deep object copy\r\nexport default LayoutConfig;\r\n","import { t } from \"../utils/utils\";\r\n\r\nexport default {\r\n header: {\r\n self: {},\r\n items: [\r\n {\r\n title: \"Thông tin cá nhân\",\r\n root: true,\r\n alignment: \"left\",\r\n page: \"profile\",\r\n translate: \"Profile\",\r\n },\r\n {\r\n title: \"Danh sách đơn hàng\",\r\n root: true,\r\n alignment: \"left\",\r\n page: \"order\",\r\n translate: \"Order List\",\r\n },\r\n {\r\n title: \"Danh sách deposit\",\r\n root: true,\r\n alignment: \"left\",\r\n page: \"deposit\",\r\n \r\n },\r\n {\r\n title: \"Danh sách khu nghỉ\",\r\n root: true,\r\n alignment: \"left\",\r\n page: \"product-vacation/list\",\r\n \r\n },\r\n // {\r\n // title: \"Affiliate\",\r\n // root: true,\r\n // alignment: \"left\",\r\n // page: \"affiliate\",\r\n // translate: \"MENU.DASHBOARD\"\r\n // },\r\n {\r\n title: \"Đổi mật khẩu\",\r\n root: true,\r\n alignment: \"left\",\r\n page: \"change-password\",\r\n translate: \"MENU.DASHBOARD\",\r\n },\r\n {\r\n title: \"Đăng xuất\",\r\n root: true,\r\n alignment: \"left\",\r\n page: \"logout\",\r\n translate: \"MENU.DASHBOARD\",\r\n },\r\n ],\r\n },\r\n aside: {\r\n self: {},\r\n items: [],\r\n },\r\n appAside: {\r\n self: {},\r\n items: [\r\n \r\n {\r\n title: \"Deposit List\",\r\n root: true,\r\n alignment: \"left\",\r\n page: \"deposit\",\r\n \r\n icon: \"statement\",\r\n },\r\n {\r\n title: \"Order List\",\r\n root: true,\r\n alignment: \"left\",\r\n page: \"order\",\r\n \r\n icon: \"statement\",\r\n },\r\n {\r\n title: \"Danh sách khu nghỉ\",\r\n root: true,\r\n alignment: \"left\",\r\n page: \"product-vacation/list\",\r\n \r\n icon: \"statement\",\r\n },\r\n // {\r\n // title: \"Affiliate\",\r\n // root: true,\r\n // alignment: \"left\",\r\n // page: \"affiliate\",\r\n // translate: \"MENU.DASHBOARD\",\r\n // icon: \"stack\"\r\n // },\r\n ],\r\n },\r\n};\r\n","import objectPath from \"object-path\";\r\nimport { persistReducer } from \"redux-persist\";\r\nimport storage from \"redux-persist/lib/storage\";\r\n\r\nimport LayoutConfig from \"../layout/LayoutConfig\";\r\nimport MenuConfig from \"../layout/MenuConfig\";\r\n\r\nexport const actionTypes = {\r\n SetMenuConfig: \"builder/SET_MENU_CONFIG\",\r\n SetLayoutConfigs: \"builder/SET_LAYOUT_CONFIGS\",\r\n SetLayoutConfigsWithPageRefresh:\r\n \"builder/SET_LAYOUT_CONFIGS_WITH_PAGE_REFRESH\",\r\n SetHtmlClassService: \"builder/SET_HTML_CLASS_SERVICE\"\r\n};\r\n\r\nexport const selectors = {\r\n getClasses: (store, params) => {\r\n const { htmlClassServiceObjects } = store.builder;\r\n\r\n return htmlClassServiceObjects\r\n ? htmlClassServiceObjects.getClasses(params.path, params.toString)\r\n : \"\";\r\n },\r\n getAttributes: (store, params) => {\r\n if (params.path) {\r\n // if path is specified, get the value within object\r\n const { htmlClassServiceObjects } = store.builder;\r\n\r\n return htmlClassServiceObjects\r\n ? htmlClassServiceObjects.getAttributes(params.path)\r\n : [];\r\n }\r\n\r\n return [];\r\n },\r\n getConfig: (state, path) => {\r\n const { layoutConfig } = state.builder;\r\n\r\n if (path) {\r\n // if path is specified, get the value within object\r\n return objectPath.get(layoutConfig, path);\r\n }\r\n\r\n return \"\";\r\n },\r\n\r\n getLogo: ({ builder: { layoutConfig } }) => {\r\n const menuAsideLeftSkin = objectPath.get(layoutConfig, \"brand.self.skin\");\r\n // set brand logo\r\n const logoObject = objectPath.get(layoutConfig, \"self.logo\");\r\n let logo;\r\n if (typeof logoObject === \"string\") {\r\n logo = logoObject;\r\n }\r\n\r\n if (typeof logoObject === \"object\") {\r\n logo = objectPath.get(logoObject, menuAsideLeftSkin + \"\");\r\n }\r\n\r\n if (typeof logo === \"undefined\") {\r\n try {\r\n const logos = objectPath.get(this.layoutConfig, \"self.logo\");\r\n logo = logos[Object.keys(logos)[0]];\r\n } catch (e) {}\r\n }\r\n return logo;\r\n },\r\n\r\n getStickyLogo: store => {\r\n const { layoutConfig } = store.builder;\r\n let logo = objectPath.get(layoutConfig, \"self.logo.sticky\");\r\n if (typeof logo === \"undefined\") {\r\n logo = selectors.getLogo(store);\r\n }\r\n return logo + \"\";\r\n }\r\n};\r\n\r\nconst initialState = {\r\n menuConfig: MenuConfig,\r\n layoutConfig: LayoutConfig,\r\n htmlClassServiceObjects: undefined\r\n};\r\n\r\nexport const reducer = persistReducer(\r\n {\r\n storage,\r\n key: \"build-demo4\",\r\n blacklist: [\"htmlClassServiceObjects\", \"menuConfig\"]\r\n },\r\n (state = initialState, { type, payload }) => {\r\n switch (type) {\r\n case actionTypes.SetMenuConfig:\r\n return { ...state, menuConfig: payload };\r\n\r\n case actionTypes.SetLayoutConfigs:\r\n return { ...state, layoutConfig: payload };\r\n\r\n case actionTypes.SetLayoutConfigsWithPageRefresh: {\r\n return { ...state, layoutConfig: payload };\r\n }\r\n case actionTypes.SetHtmlClassService:\r\n return { ...state, htmlClassServiceObjects: payload };\r\n\r\n default:\r\n return state;\r\n }\r\n }\r\n);\r\n\r\nexport const actions = {\r\n setMenuConfig: payload => ({ payload, type: actionTypes.SetMenuConfig }),\r\n\r\n setLayoutConfigs: payload => ({\r\n payload,\r\n type: actionTypes.SetLayoutConfigs\r\n }),\r\n\r\n setLayoutConfigsWithPageRefresh: payload => ({\r\n payload,\r\n type: actionTypes.SetLayoutConfigsWithPageRefresh\r\n }),\r\n\r\n setHtmlClassService: payload => ({\r\n payload,\r\n type: actionTypes.SetHtmlClassService\r\n })\r\n};\r\n","\r\nexport function getMerchantLogo(images) {\r\n let logoPath = '';\r\n if (!images) { return '' }\r\n images.forEach((image) => {\r\n if (image.isFeatured) { logoPath = image.path }\r\n })\r\n return logoPath;\r\n}","import React from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { connect } from \"react-redux\";\r\nimport objectPath from \"object-path\";\r\n/* import KTToggle from \"../assets/js/toggle\"; */\r\nimport { toAbsoluteUrl } from \"../../utils/utils\";\r\nimport * as builder from \"../../reducers/builder\";\r\nimport Config from '../../configs/Config';\r\nimport {getMerchantLogo} from '../../utils/MerchantUtils';\r\n\r\n\r\nclass HeaderMobile extends React.Component {\r\n toggleButtonRef = React.createRef();\r\n headerMobileCssClasses = \"\";\r\n layoutConfig = this.props.layoutConfig;\r\n /* componentDidMount() {\r\n new KTToggle(this.toggleButtonRef.current, this.props.toggleOptions);\r\n } */\r\n\r\n render() {\r\n const {\r\n asideDisplay,\r\n headerMobileCssClasses,\r\n headerMobileAttributes,\r\n merchant\r\n } = this.props;\r\n\r\n const logoPath = merchant ? getMerchantLogo(merchant.images) : '';\r\n return (\r\n \r\n \r\n ![\"logo\"]()
\r\n \r\n
\r\n\r\n \r\n {asideDisplay && (\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\nconst mapStateToProps = store => ({\r\n headerMobileCssClasses: builder.selectors.getClasses(store, {\r\n path: \"header_mobile\",\r\n toString: true\r\n }),\r\n headerMobileAttributes: builder.selectors.getAttributes(store, {\r\n path: \"header_mobile\"\r\n }),\r\n asideDisplay: objectPath.get(\r\n store.builder.layoutConfig,\r\n \"aside.self.display\"\r\n ),\r\n toggleOptions: {\r\n target: \"body\",\r\n targetState: \"kt-header__topbar--mobile-on\",\r\n togglerState: \"kt-header-mobile__toolbar-topbar-toggler--active\"\r\n },\r\n merchant: store.Merchant.merchant,\r\n});\r\n\r\nexport default connect(mapStateToProps)(HeaderMobile);\r\n","/* eslint-disable no-script-url,jsx-a11y/anchor-is-valid */\r\nimport React from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { connect } from \"react-redux\";\r\nimport { toAbsoluteUrl } from \"../../utils/utils\";\r\nimport * as builder from \"../../reducers/builder\";\r\nimport Config from '../../configs/Config';\r\nimport {getMerchantLogo} from '../../utils/MerchantUtils';\r\n\r\nclass Brand extends React.Component {\r\n\r\n componentDidMount() {\r\n // eslint-disable-next-line no-undef\r\n console.log(\"Brand - componentDidMount\");\r\n }\r\n\r\n render() {\r\n const { merchant } = this.props;\r\n // console.log(merchant, \"merchant\")\r\n const logoPath = merchant ? getMerchantLogo(merchant.images) : '';\r\n console.log(\"Brand - render\");\r\n return (\r\n {item.section}
\r\n \r\n- \r\n {item.submenu.map((child, index) => (\r\n
\r\n \r\n\r\n {item[\"custom-class\"] === \"kt-menu__item--submenu-fullheight\" && (\r\n
\r\n )}\r\n \r\n );\r\n }\r\n}\r\n","import React from \"react\";\r\nimport MenuSection from \"./MenuSection\";\r\nimport MenuItemSeparator from \"./MenuItemSeparator\";\r\nimport MenuItem from \"./MenuItem\";\r\n\r\nexport default class MenuList extends React.Component {\r\n render() {\r\n const { currentUrl, menuConfig, layoutConfig } = this.props;\r\n\r\n return menuConfig.aside.items.map((child, index) => {\r\n return (\r\n \r\n
\r\n )}\r\n\r\n {item[\"custom-class\"] !== \"kt-menu__item--submenu-fullheight\" && (\r\n \r\n \r\n 
\r\n \r\n
\r\n )}\r\n - \r\n
{children}
;\r\n}\r\n\r\nconst mapStateToProps = store => ({\r\n \r\n});\r\n\r\nexport default connect(mapStateToProps)(KtContent);\r\n","import React from \"react\";\r\n\r\nconst getViewBox = name => {\r\n switch (name) {\r\n case \"schedule\":\r\n return \"0 0 64 64\";\r\n case \"stack\":\r\n return \"0 0 24 24\";\r\n case \"user\":\r\n return \"0 0 24 24\";\r\n case \"asterik\":\r\n return \"0 0 24 24\";\r\n case \"user-shield\":\r\n return \"0 0 24 24\";\r\n case \"email\":\r\n return \"0 0 24 24\";\r\n case \"credit-card\":\r\n return \"0 0 24 24\";\r\n case \"tax\":\r\n return \"0 0 24 24\";\r\n case \"statement\":\r\n return \"0 0 24 24\";\r\n case \"drive\":\r\n return \"0 0 512 512\";\r\n default:\r\n return \"0 0 24 24\";\r\n }\r\n};\r\n\r\nconst getPath = (name, props) => {\r\n switch (name) {\r\n case \"stack\":\r\n return (\r\n \r\n
\r\n {/*end:: Widgets/Applications/User/Profile1*/}\r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = store => ({\r\n stateFull: store,\r\n menuConfig: store.builder.menuConfig,\r\n userInfo: store.User.userInfo,\r\n totalPoint: store.User.totalPoint,\r\n userInfoMember: store.User.userInfoMember,\r\n\r\n});\r\n\r\nexport default connect(mapStateToProps)(MenuAsideApp);\r\n","import React from \"react\";\r\nimport { Link, useLocation } from \"react-router-dom\";\r\nimport { t } from \"../../utils/utils\";\r\nimport { initLayoutConfig } from \"../LayoutConfig\";\r\n\r\nimport \"./style.scss\";\r\n\r\ntype Props = {};\r\n\r\nconst Toolbar = (props: Props) => {\r\n const location = useLocation();\r\n const currentRouteName = location.pathname.split(\"/\")[1];\r\n const currentSubBreadCrumbs =\r\n initLayoutConfig.breadCrumbConvert[currentRouteName]?.items ;\r\n const arrRouteName =\r\n location.pathname !== \"/\" && location.pathname.split(\"/\");\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n <>\r\n
\r\n\r\n {/*begin::Widget */}\r\n
\r\n \r\n
\r\n {/*end::Widget */}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {userInfo.lastName}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Email:\r\n \r\n {userInfo.email}\r\n \r\n
\r\n \r\n Phone:\r\n \r\n {userInfo.mobile ? userInfo.mobile : \"\"}\r\n \r\n
\r\n {this.props.userInfoMember && (\r\n \r\n Hạng:\r\n \r\n {this.props.userInfoMember}\r\n \r\n
\r\n )}\r\n {this.props.totalPoint && (\r\n \r\n Điểm khả dụng:\r\n \r\n {this.props.totalPoint < 0 ? 0: this.props.totalPoint}\r\n \r\n
\r\n )}\r\n \r\n \r\n {menuConfig.items.map((item, index) => {\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\nexport default Toolbar;\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport objectPath from \"object-path\";\r\nimport Header from \"./header/Header\";\r\n// import SubHeader from \"./sub-header/SubHeader\";\r\nimport { withRouter } from \"react-router-dom\";\r\nimport HeaderMobile from \"./header/HeaderMobile\";\r\nimport AsideLeft from \"./aside/AsideLeft\";\r\nimport Footer from \"./footer/Footer\";\r\nimport HTMLClassService from \"./HTMLClassService\";\r\nimport LayoutConfig from \"./LayoutConfig\";\r\nimport MenuConfig from \"./MenuConfig\";\r\nimport LayoutInitializer from \"./LayoutInitializer\";\r\nimport KtContent from \"./KtContent\";\r\nimport MenuAsideApp from \"./aside/MenuAsideApp\";\r\nimport \"./assets/Base.scss\";\r\nimport { ToastContainer } from \"react-toastify\";\r\nimport Toolbar from \"./toolbar\";\r\n\r\nconst htmlClassService = new HTMLClassService();\r\n\r\nfunction Layout({\r\n children,\r\n asideDisplay,\r\n subheaderDisplay,\r\n selfLayout,\r\n layoutConfig,\r\n Merchant\r\n}) {\r\n \r\n htmlClassService.setConfig({...layoutConfig,izziMember: Merchant.merchant?.izziMember});\r\n // scroll to top after location changes\r\n window.scrollTo(0, 0);\r\n\r\n const contentCssClasses = htmlClassService.classes.content.join(\" \");\r\n const contentContainerCssClasses = htmlClassService.classes.content_container.join(\r\n \" \"\r\n );\r\n return selfLayout !== \"blank\" ? (\r\n \r\n {/*begin::Title*/}\r\n
\r\n \r\n {currentRouteName &&\r\n t(\r\n initLayoutConfig.breadCrumbConvert[currentRouteName]?.title ||\r\n \"N / A\"\r\n )}\r\n
\r\n {/*end::Title*/}\r\n {/*begin::Breadcrumb*/}\r\n- \r\n {/*begin::Item*/}\r\n
- \r\n \r\n {t(\"Home\")}\r\n \r\n \r\n {/*end::Item*/}\r\n {/*begin::Item*/}\r\n\r\n
- \r\n \r\n \r\n\r\n {currentSubBreadCrumbs && currentSubBreadCrumbs.length > 0 ? (\r\n currentSubBreadCrumbs.map((item, index) => {\r\n if (location.pathname.includes(currentRouteName + item.path)) {\r\n return (\r\n <>\r\n
- \r\n {t(item.title || \"N / A\") }\r\n \r\n {item.bullet && (\r\n
- \r\n \r\n \r\n )}\r\n \r\n );\r\n }\r\n })\r\n ) : (\r\n
- \r\n {t(currentRouteName || \"N / A\")}\r\n \r\n )}\r\n
\r\n
\r\n \r\n )}\r\n {!asideDisplay && (\r\n <>\r\n \r\n \r\n \r\n \r\n {children} \r\n
\r\n \r\n {children}\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 {children} \r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = ({ builder: { layoutConfig },Merchant }) => ({\r\n Merchant,\r\n layoutConfig,\r\n selfLayout: objectPath.get(layoutConfig, \"self.layout\"),\r\n asideDisplay: objectPath.get(layoutConfig, \"aside.self.display\"),\r\n subheaderDisplay: objectPath.get(layoutConfig, \"subheader.display\"),\r\n});\r\n\r\nexport default withRouter(connect(mapStateToProps)(Layout));\r\n","import * as utils from \"../utils/utils\";\r\n\r\nconst localStorageLastLocationKey = \"demo4-lastLocation\";\r\n\r\nfunction acceptLocation(lastLocation) {\r\n if (\r\n lastLocation &&\r\n lastLocation.pathname &&\r\n lastLocation.pathname !== \"/\" &&\r\n lastLocation.pathname.indexOf(\"auth\") === -1 &&\r\n lastLocation.pathname !== \"/logout\"\r\n ) {\r\n return true;\r\n }\r\n\r\n return false;\r\n}\r\n\r\nexport function saveLastLocation(lastLocation) {\r\n const localStorateLocations = utils.getStorage(localStorageLastLocationKey);\r\n let _useLocations = localStorateLocations\r\n ? JSON.parse(localStorateLocations)\r\n : [];\r\n\r\n if (acceptLocation(lastLocation)) {\r\n _useLocations.push(lastLocation.pathname);\r\n utils.setStorage(\r\n localStorageLastLocationKey,\r\n JSON.stringify(_useLocations),\r\n 120\r\n );\r\n }\r\n}\r\n\r\nexport function forgotLastLocation() {\r\n utils.removeStorage(localStorageLastLocationKey);\r\n}\r\n\r\nexport function getLastLocation() {\r\n const localStorateLocations = utils.getStorage(localStorageLastLocationKey);\r\n if (!localStorateLocations) {\r\n return \"/\";\r\n }\r\n\r\n const _userLocations = JSON.parse(localStorateLocations);\r\n const result = _userLocations.length > 0 ? _userLocations.pop() : \"/\";\r\n return result;\r\n}\r\n","import React from \"react\";\r\nimport { toAbsoluteUrl } from \"../../utils/utils\";\r\nimport \"../../layout/assets/sass/pages/error/error-6.scss\";\r\n\r\nexport function ErrorPage6() {\r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n}\r\n","import React from \"react\";\r\nimport { Redirect, Route, Switch } from \"react-router-dom\";\r\nimport { ErrorPage6 } from \"./ErrorPage6\";\r\n\r\nexport default function ErrorsPage() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n\r\n Oops...
\r\n\r\n Looks like something went wrong.\r\n
\r\n We're working on it\r\n
\r\n {/*begin::Form*/}\r\n \r\n {/*begin::Heading*/}\r\n
\r\n );\r\n};\r\nconst mapStateToProp = (state) => ({\r\n userInfo: state.User.userInfo,\r\n merchant: state.Merchant.merchant,\r\n lang: state.i18n.lang,\r\n});\r\n\r\nexport default connect(mapStateToProp)(ForgotPassword);\r\n","export const MERCHANT = {\r\n GET_MERCHANT_DETAIL: 'merchant/GET_MERCHANT_DETAIL', \r\n\r\n\r\n};","import { MERCHANT } from '../configs/constants/MerchantConstant';\r\nimport {\r\n getMerchantDetail\r\n} from '../services/MerchantService';\r\n\r\nexport const getMerchantDetailAction = () => ({\r\n type: MERCHANT.GET_MERCHANT_DETAIL,\r\n payload: getMerchantDetail()\r\n});\r\n\r\n\r\n\r\n\r\n\r\n\r\n","import { persistReducer } from \"redux-persist\";\r\nimport storage from \"redux-persist/lib/storage\";\r\nimport * as routerHelpers from \"../routers/RouterHelpers\";\r\n\r\nexport const actionTypes = {\r\n Login: \"[Login] Action\",\r\n Logout: \"[Logout] Action\",\r\n Register: \"[Register] Action\",\r\n UserRequested: \"[Request User] Action\",\r\n UserLoaded: \"[Load User] Auth API\",\r\n AuthSuccess: \"AuthSuccess\",\r\n};\r\n\r\nconst initialAuthState = {\r\n user: undefined,\r\n authToken: undefined,\r\n isAuth: undefined,\r\n};\r\n\r\nexport const reducer = persistReducer(\r\n { storage, key: \"demo4-auth\", whitelist: [\"user\", \"authToken\"] },\r\n (state = initialAuthState, action) => {\r\n switch (action.type) {\r\n case actionTypes.Login: {\r\n const { authToken } = action.payload;\r\n\r\n return { authToken, user: undefined };\r\n }\r\n\r\n case actionTypes.Register: {\r\n const { authToken } = action.payload;\r\n\r\n return { authToken, user: undefined };\r\n }\r\n\r\n case actionTypes.Logout: {\r\n routerHelpers.forgotLastLocation();\r\n return initialAuthState;\r\n }\r\n\r\n case actionTypes.UserLoaded: {\r\n const { user } = action.payload;\r\n\r\n return { ...state, user };\r\n }\r\n case actionTypes.AuthSuccess: {\r\n console.log(\" run this case 477\")\r\n return { ...state, isAuth: true };\r\n }\r\n default:\r\n return state;\r\n }\r\n }\r\n);\r\n\r\nexport const actions = {\r\n login: (authToken) => ({ type: actionTypes.Login, payload: { authToken } }),\r\n register: (authToken) => ({\r\n type: actionTypes.Register,\r\n payload: { authToken },\r\n }),\r\n logout: () => ({ type: actionTypes.Logout }),\r\n requestUser: (user) => ({\r\n type: actionTypes.UserRequested,\r\n payload: { user },\r\n }),\r\n fulfillUser: (user) => ({ type: actionTypes.UserLoaded, payload: { user } }),\r\n};\r\n","import { actionTypes } from \"../reducers/auth\";\r\n\r\n\r\nexport const setAuthSuccessAction = () => ({\r\n type: actionTypes.AuthSuccess\r\n\r\n});\r\n\r\n\r\n\r\n\r\n","import clsx from \"clsx\";\r\nimport React, { useEffect, useMemo, useRef, useState } from \"react\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { login } from \"../../services/UserService\";\r\nimport Config from \"../../configs/Config\";\r\nimport { connect } from \"react-redux\";\r\nimport {\r\n getUserInfoAction,\r\n getTotalPointAction,\r\n getInformationMemberAction,\r\n} from \"../../actions/User\";\r\nimport { getMerchantDetailAction } from \"../../actions/Merchant\";\r\nimport Swal from \"sweetalert2\";\r\nimport Spinner from \"../../layout/assets/icon/spinner/Spinner\";\r\nimport { Link, useLocation } from \"react-router-dom\";\r\nimport { languageMapping, t } from \"../../utils/utils\";\r\nimport { setAuthSuccessAction } from \"../../actions/Auth\";\r\n\r\nconst Login = ({\r\n lang,\r\n merchant,\r\n getUserInfoAction,\r\n getTotalPointAction,\r\n getMerchantDetailAction,\r\n getInformationMemberAction,\r\n setAuthSuccessAction,\r\n}) => {\r\n const location = useLocation();\r\n const [isLoading, setLoading] = useState(false);\r\n const refMerchantCode = useRef();\r\n\r\n useEffect(() => {\r\n let merchantCode = window.location.host.includes(\".local\")\r\n ? Config.merchantCode\r\n : window.location.host.split(\".\")[0];\r\n refMerchantCode.current = merchantCode;\r\n }, []);\r\n const { register, handleSubmit, errors } = useForm();\r\n\r\n //function lay du lieu\r\n const getUserData = async (token) => {\r\n //logic authen\r\n localStorage.setItem(Config.tokenId, token);\r\n\r\n await getUserInfoAction(token);\r\n await getTotalPointAction(token);\r\n await getMerchantDetailAction();\r\n await getInformationMemberAction(token, languageMapping[lang]);\r\n };\r\n\r\n const onSubmit = ({ email, password }) => {\r\n let objData = {\r\n UserName: email,\r\n Password: password,\r\n MerchantCode: merchant.code,\r\n };\r\n setLoading(true);\r\n login(objData).then((res) => {\r\n setLoading(false);\r\n\r\n const { Success, Data } = res.data;\r\n if (Success) {\r\n const { tokenId } = Data;\r\n if (tokenId) {\r\n getUserData(tokenId);\r\n setAuthSuccessAction();\r\n }\r\n } else {\r\n Swal.fire(\"Sai tên hoặc mật khẩu! Mời bạn đăng nhập lại.\");\r\n }\r\n });\r\n };\r\n\r\n return (\r\n \r\n {/*begin::Title*/}\r\n
\r\n {/*begin::Heading*/}\r\n {/*begin::Input group*/}\r\n {t(\"Forgot Password?\")}
\r\n {/*end::Title*/}\r\n {/*begin::Link*/}\r\n\r\n {t(\"Enter your email to reset your password\")}.\r\n
\r\n {/*end::Link*/}\r\n \r\n \r\n
\r\n {/*end::Input group*/}\r\n {/*begin::Actions*/}\r\n \r\n {errors.email.message}\r\n
\r\n )}\r\n \r\n \r\n {t(\"Reset Password\")}\r\n \r\n {t(\"Please wait\")}...\r\n \r\n \r\n \r\n \r\n {t(\"Sign In\")}\r\n \r\n
\r\n {/*end::Actions*/}\r\n \r\n \r\n {/*end::Form*/}\r\n \r\n {/*begin::Form*/}\r\n \r\n {/*begin::Heading*/}\r\n
\r\n );\r\n};\r\nconst mapStateToProp = (state) => ({\r\n userInfo: state.User.userInfo,\r\n merchant: state.Merchant.merchant,\r\n lang: state.i18n.lang,\r\n});\r\nconst mapDispatchToProps = {\r\n getUserInfoAction,\r\n getTotalPointAction,\r\n getMerchantDetailAction,\r\n getInformationMemberAction,\r\n setAuthSuccessAction,\r\n};\r\nexport default connect(mapStateToProp, mapDispatchToProps)(Login);\r\n","import clsx from \"clsx\";\r\nimport React, { useEffect, useMemo, useRef, useState } from \"react\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { login } from \"../../services/UserService\";\r\nimport Config from \"../../configs/Config\";\r\nimport { connect } from \"react-redux\";\r\nimport { getUserInfoAction, getTotalPointAction } from \"../../actions/User\";\r\nimport { getMerchantDetailAction } from \"../../actions/Merchant\";\r\nimport Swal from \"sweetalert2\";\r\nimport Spinner from \"../../layout/assets/icon/spinner/Spinner\";\r\nimport { Link } from \"react-router-dom\";\r\n\r\nconst Login = ({ getUserInfoAction, getTotalPointAction, getMerchantDetailAction }) => {\r\n const [isLoading, setLoading] = useState(false);\r\n const refMerchantCode = useRef();\r\n useEffect(() => {\r\n let merchantCode = window.location.host.startsWith(\"localhost\")\r\n ? Config.merchantCode\r\n : window.location.host.split(\".\")[0];\r\n refMerchantCode.current = merchantCode;\r\n }, []);\r\n const { register, handleSubmit, errors } = useForm();\r\n\r\n const getUserData = async token => {\r\n localStorage.setItem(Config.tokenId, token);\r\n await getUserInfoAction(token);\r\n await getTotalPointAction(token);\r\n await getMerchantDetailAction();\r\n };\r\n\r\n const onSubmit = ({ email, password }) => {\r\n let objData = {\r\n UserName: email,\r\n Password: password,\r\n MerchantCode: refMerchantCode.current\r\n };\r\n setLoading(true);\r\n login(objData).then(res => {\r\n setLoading(false);\r\n const { Success, Data } = res.data;\r\n if (Success) {\r\n const { tokenId } = Data;\r\n getUserData(tokenId);\r\n } else {\r\n Swal.fire(\"Sai tên hoặc mật khẩu! Mời bạn đăng nhập lại.\");\r\n }\r\n });\r\n };\r\n\r\n const siginButton = useMemo(() => {\r\n return isLoading ? \r\n {/*begin::Title*/}\r\n
\r\n {/*begin::Heading*/}\r\n {/*begin::Input group*/}\r\n \r\n {t(\"Sign In\")} \r\n
\r\n {/*end::Title*/}\r\n {/*begin::Link*/}\r\n {/*\r\n {t(\"New Here\")} ? {\" \"}\r\n \r\n {t(\"Create an Account\")}\r\n \r\n
*/}\r\n {/*end::Link*/}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Input*/}\r\n
\r\n {/*end::Input group*/}\r\n {/*begin::Input group*/}\r\n \r\n {errors.email &&
\r\n {t(errors.email.message)}
}\r\n \r\n {/*begin::Wrapper*/}\r\n
\r\n {/*end::Input group*/}\r\n {/*begin::Actions*/}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Link*/}\r\n \r\n {t(\"Forgot Password?\")} \r\n \r\n {/*end::Link*/}\r\n
\r\n {/*end::Wrapper*/}\r\n {/*begin::Input*/}\r\n \r\n {errors.password &&
\r\n {t(errors.password.message)}
}\r\n \r\n {/*begin::Submit button*/}\r\n \r\n {t(\"Sign in\")}\r\n \r\n {t(\"Please wait\")}...\r\n \r\n \r\n \r\n {/*end::Submit button*/}\r\n {/*begin::Separator*/}\r\n\r\n {/*end::Google link*/}\r\n
\r\n {/*end::Actions*/}\r\n \r\n \r\n {/*end::Form*/}\r\n \r\n
\r\n );\r\n};\r\nconst mapStateToProp = state => ({\r\n userInfo: state.User.userInfo\r\n});\r\nconst mapDispatchToProps = {\r\n getUserInfoAction,\r\n getTotalPointAction,\r\n getMerchantDetailAction\r\n};\r\n\r\nexport default connect(mapStateToProp, mapDispatchToProps)(Login);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { Link, Redirect, Route, Switch } from \"react-router-dom\";\r\nimport Configuration from \"../../configs/Config\";\r\nimport { getMerchantLogo } from \"../../utils/MerchantUtils\";\r\nimport { toAbsoluteUrl } from \"../../utils/utils\";\r\nimport ForgotPassword from \"./ForgotPassword\";\r\nimport Login from \"./Login\";\r\nimport OldLogin from \"./OldLogin\";\r\nimport Registration from \"./Registration\";\r\n\r\nconst AuthPage = ({ merchant }) => {\r\n const logoDark = JSON.parse(window.merchant?.data?.configuration || \"\")[\"DarkLogoPath\"];\r\n // const logoPath = merchant && merchant.images?.length > 0 ? merchant.images[0].path : \"\";\r\n console.log(merchant,\"13\")\r\n return (\r\n \r\n
\r\n\r\n \r\n Sign In
\r\n\r\n {/*begin::Authentication - Sign-in */}\r\n \r\n {/*begin::Content*/}\r\n
\r\n {/*end::Authentication - Sign-in*/}\r\n \r\n );\r\n};\r\nconst mapStateToProps = store => ({\r\n merchant: store.Merchant.merchant\r\n });\r\n \r\n export default connect(mapStateToProps)(AuthPage);\r\n","import clsx from \"clsx\";\r\nimport React, { useEffect, useMemo, useRef, useState } from \"react\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport Config from \"../../configs/Config\";\r\nimport Swal from \"sweetalert2\";\r\nimport Spinner from \"../../layout/assets/icon/spinner/Spinner\";\r\nimport { Link, useHistory } from \"react-router-dom\";\r\nimport Common from \"../../utils/Common\";\r\nimport { t } from \"../../utils/utils\";\r\nimport { useIntl } from \"react-intl\";\r\nimport { connect } from \"react-redux\";\r\n\r\nconst Registration = ({ merchant }) => {\r\n const [isLoading, setLoading] = useState(false);\r\n const { formatMessage } = useIntl();\r\n const history = useHistory();\r\n const { register, handleSubmit, errors, watch } = useForm();\r\n const [passwordVisibility, setPasswordVisibility] = useState(true);\r\n const refMerchantCode = useRef();\r\n const password = useRef({});\r\n password.current = watch(\"password\", \"\");\r\n useEffect(() => {\r\n let merchantCode = window.location.host.startsWith(\"localhost\")\r\n ? Config.merchantCode\r\n : window.location.host.split(\".\")[0];\r\n refMerchantCode.current = merchantCode;\r\n }, []);\r\n\r\n const onSubmit = ({ fullname, mobile, email, password }) => {\r\n var id = Common.guid();\r\n let objData = {\r\n Id: id,\r\n Name: fullname,\r\n Mobile: mobile,\r\n Email: email,\r\n MerchantCode: merchant.code,\r\n Password: password,\r\n ModifiedDate: Common.formatDateTime(new Date()),\r\n ModifiedBy: id,\r\n };\r\n setLoading(true);\r\n Common.sendSyncCommand(\r\n \"RegisterMemberMerchant\",\r\n \"CustomerRelationshipManagement\",\r\n objData,\r\n () => {\r\n setLoading(false);\r\n Swal.fire(\"Cảm ơn đã đăng ký tài khoản.\");\r\n setTimeout(() => {\r\n history.push(\"/auth/login\");\r\n }, 3000);\r\n },\r\n () => {\r\n setLoading(false);\r\n Swal.fire(\"Đăng kí thất bại!\");\r\n }\r\n );\r\n };\r\n\r\n return (\r\n \r\n {/*begin::Logo*/}\r\n \r\n \r\n \r\n {/*end::Wrapper*/}\r\n
\r\n {/*end::Content*/}\r\n {/*begin::Footer*/}\r\n \r\n {/*end::Footer*/}\r\n \r\n {/*begin::Form*/}\r\n \r\n {/*begin::Heading*/}\r\n
\r\n );\r\n};\r\nconst mapStateToProp = (state) => ({\r\n merchant: state.Merchant.merchant,\r\n});\r\nexport default connect(mapStateToProp)(Registration);\r\n","/**\r\n * High level router.\r\n *\r\n * Note: It's recommended to compose related routes in internal router\r\n * components (e.g: `src/pages/auth/AuthPage`, `src/pages/home/HomePage`).\r\n */\r\n\r\nimport React from \"react\";\r\nimport { Route, Switch, withRouter } from \"react-router-dom\";\r\nimport { shallowEqual, useSelector } from \"react-redux\";\r\nimport HomePage from \"../pages/home/HomePage\";\r\nimport { LayoutContextProvider } from \"../layout/LayoutContext\";\r\nimport Layout from \"../layout/Layout\";\r\nimport * as routerHelpers from \"./RouterHelpers\";\r\n\r\nimport ErrorsPage from \"../pages/errors/ErrorsPage\";\r\nimport LogoutPage from \"../pages/auth/Logout\";\r\nimport AuthPage from \"../pages/auth/AuthPage\";\r\n\r\nimport { Helmet } from \"react-helmet\";\r\n\r\nimport Configuration from \"../configs/Config\";\r\n\r\nimport \"moment/locale/vi\"\r\n\r\nexport const Routes = withRouter(({ history }) => {\r\n \r\n const { isAuthorized, menuConfig, userLastLocation, Merchant } = useSelector(\r\n ({ builder: { menuConfig }, User, Merchant }) => ({\r\n Merchant,\r\n menuConfig,\r\n isAuthorized: User?.userInfo?.id != null,\r\n userLastLocation: routerHelpers.getLastLocation(),\r\n auth2: User,\r\n }),\r\n shallowEqual\r\n );\r\n const merchant = Merchant.merchant;\r\n // console.log(merchant, \"merchant\")\r\n const title = JSON.parse(window.merchant?.data?.metaTag || \"\")[\"Title\"];\r\n const metaDesc = JSON.parse(window.merchant?.data?.metaTag || \"\")[\"Description\"];\r\n const metaImg = JSON.parse(window.merchant?.data?.metaTag || \"\")[\"Image\"];\r\n const metaKeyword = JSON.parse(window.merchant?.data?.metaTag || \"\")[\"Keyword\"];\r\n const favicon = JSON.parse(window.merchant?.data?.metaTag || \"\")[\"FaviconUrl\"];\r\n const isAuth = useSelector((state) => state.auth.isAuth);\r\n\r\n return (\r\n /* Create `LayoutContext` from current `history` and `menuConfig`. */\r\n \r\n {/*begin::Title*/}\r\n
\r\n {/*end::Heading*/}\r\n {/*begin::Action*/}\r\n\r\n {/*end::Action*/}\r\n {/*begin::Separator*/}\r\n {t(\"Create an Account\")}
\r\n {/*end::Title*/}\r\n {/*begin::Link*/}\r\n\r\n {t(\"Already have an account\")} ?{\" \"}\r\n \r\n {t(\"Sign in here\")}\r\n \r\n
\r\n {/*end::Link*/}\r\n \r\n \r\n OR\r\n \r\n
\r\n {/*end::Separator*/}\r\n {/*begin::Input group*/}\r\n \r\n \r\n
\r\n {/*end::Input group*/}\r\n {/*begin::Input group*/}\r\n \r\n {errors.fullname &&
\r\n {t(errors.fullname.message)}
}\r\n \r\n \r\n
\r\n {/*end::Input group*/}\r\n {/*begin::Input group*/}\r\n \r\n {errors.email &&
\r\n {t(errors.email.message)}
}\r\n \r\n \r\n
\r\n \r\n {errors.mobile &&
\r\n {t(errors.mobile.message)}
}\r\n \r\n {/*begin::Wrapper*/}\r\n
\r\n {/*end::Input group=*/}\r\n {/*begin::Input group*/}\r\n \r\n {/*begin::Label*/}\r\n \r\n {/*end::Label*/}\r\n {/*begin::Input wrapper*/}\r\n
\r\n {/*end::Wrapper*/}\r\n {/*begin::Hint*/}\r\n\r\n {/*end::Hint*/}\r\n \r\n setPasswordVisibility(!passwordVisibility)}\r\n >\r\n \r\n \r\n \r\n
\r\n {/*end::Input wrapper*/}\r\n \r\n {errors.password &&
\r\n {t(errors.password.message)}
}\r\n \r\n \r\n {\r\n console.log(\r\n { value, passwordCurrent: password.current },\r\n \"1877\"\r\n );\r\n return (\r\n value === password.current || t(\"Password does not match!\")\r\n );\r\n },\r\n })}\r\n name=\"confirmPassword\"\r\n />\r\n
\r\n {/*end::Input group*/}\r\n {/*begin::Input group*/}\r\n\r\n {/*end::Input group*/}\r\n {/*begin::Actions*/}\r\n \r\n {errors.confirmPassword && (\r\n
\r\n {t(errors.confirmPassword.message)}
\r\n )}\r\n \r\n {/*begin::Submit button*/}\r\n \r\n {t(\"Sign Up\")}\r\n \r\n {t(\"Please wait\")}...\r\n \r\n \r\n \r\n {/*end::Submit button*/}\r\n {/*begin::Separator*/}\r\n\r\n {/*end::Google link*/}\r\n
\r\n {/*end::Actions*/}\r\n \r\n \r\n {/*end::Form*/}\r\n