admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add sample JoyRide walkthrough.

Browse Source
This commit is contained in:
Patrick Fic
2024-03-12 10:48:27 -04:00
parent d9d30b59f0
commit 5623497e32
9 changed files with 339 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
client/src/pages/manage/manage.page.component.jsx
View File

@@ -1,29 +1,32 @@
import {FloatButton, Layout, Spin} from "antd";
import { FloatButton, Layout, Spin } from "antd";
// import preval from "preval.macro";
import React, {lazy, Suspense, useEffect, useState} from "react";
import {useTranslation} from "react-i18next";
import {connect} from "react-redux";
import {Link, Route, Routes} from "react-router-dom";
import {createStructuredSelector} from "reselect";
import React, { lazy, Suspense, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Link, Route, Routes } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import BreadCrumbs from "../../components/breadcrumbs/breadcrumbs.component";
import ChatAffixContainer from "../../components/chat-affix/chat-affix.container";
import ConflictComponent from "../../components/conflict/conflict.component";
import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
//import FooterComponent from "../../components/footer/footer.component";
//Component Imports
import * as Sentry from "@sentry/react";
import Joyride from 'react-joyride';
import TestComponent from "../../components/_test/test.page";
import HeaderContainer from "../../components/header/header.container";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import PartnerPingComponent from "../../components/partner-ping/partner-ping.component";
import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-status.component";
import TestComponent from "../../components/_test/test.page";
import {requestForToken} from "../../firebase/firebase.utils";
import {selectBodyshop, selectInstanceConflict,} from "../../redux/user/user.selectors";
import * as Sentry from "@sentry/react";
import { requestForToken } from "../../firebase/firebase.utils";
import { selectBodyshop, selectInstanceConflict, } from "../../redux/user/user.selectors";
import "./manage.page.styles.scss";
import UpdateAlert from "../../components/update-alert/update-alert.component";
import { setJoyRideFinished } from "../../redux/application/application.actions.js";
import { selectEnableJoyRide, selectJoyRideSteps } from "../../redux/application/application.selectors.js";
import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
import "./manage.page.styles.scss";
const JobsPage = lazy(() => import("../jobs/jobs.page"));
@@ -179,12 +182,22 @@ const TtApprovals = lazy(() =>
const {Content, Footer} = Layout;
const mapStateToProps = createStructuredSelector({
conflict: selectInstanceConflict,
bodyshop: selectBodyshop,
enableJoyRide: selectEnableJoyRide,
joyRideSteps: selectJoyRideSteps
});
export function Manage({conflict, bodyshop}) {
const mapDispatchToProps = (dispatch) => ({
setJoyRideFinished: (steps) => dispatch(setJoyRideFinished(steps)),
});
export function Manage({conflict, bodyshop,enableJoyRide,joyRideSteps,setJoyRideFinished}) {
const {t} = useTranslation();
const [chatVisible] = useState(false);
@@ -469,46 +482,65 @@ export function Manage({conflict, bodyshop}) {
else PageContent = AppRouteTable;
return (
<>
<ChatAffixContainer bodyshop={bodyshop} chatVisible={chatVisible}/>
<Layout style={{minHeight: '100vh'}} className="layout-container">
<UpdateAlert/>
<HeaderContainer/>
<Content className="content-container">
<PartnerPingComponent/>
<Sentry.ErrorBoundary fallback={<ErrorBoundary/>} showDialog>
{PageContent}
</Sentry.ErrorBoundary>
<>
<ChatAffixContainer bodyshop={bodyshop} chatVisible={chatVisible} />
<Layout style={{ minHeight: '100vh' }} className="layout-container">
<UpdateAlert />
<HeaderContainer />
<Content className="content-container">
<Joyride
debug
run={enableJoyRide}
steps={joyRideSteps}
continuous
hideCloseButton
scrollToFirstStep
showProgress
showSkipButton
callback={(props) => {
if (props.action === 'reset') {
setJoyRideFinished();
}
}}
/>
<PartnerPingComponent />
<Sentry.ErrorBoundary fallback={<ErrorBoundary />} showDialog>
{PageContent}
</Sentry.ErrorBoundary>
<FloatButton.BackTop style={{right: 100, bottom: 25}}/>
</Content>
<Footer>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
margin: "1rem 0rem",
}}
>
<div style={{display: "flex"}}>
<div>
{`${InstanceRenderManager({imex: t("titles.imexonline"), rome: t("titles.romeonline"), promanager:t("titles.promanager")})} ${
import.meta.env.VITE_APP_GIT_SHA || 'Local Build'
} - ${import.meta.env.VITE_APP_GIT_SHA_DATE}`}
</div>
<div id="noticeable-widget" style={{marginLeft: "1rem"}}/>
</div>
<Link to="/disclaimer" target="_blank" style={{color: "#ccc"}}>
Disclaimer & Notices
</Link>
</div>
</Footer>
</Layout>
</>
<FloatButton.BackTop style={{ right: 100, bottom: 25 }} />
</Content>
<Footer>
<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
margin: '1rem 0rem',
}}
>
<div style={{ display: 'flex' }}>
{`Joy Ride Status: ${enableJoyRide}`}
<div>
{`${InstanceRenderManager({
imex: t('titles.imexonline'),
rome: t('titles.romeonline'),
promanager: t('titles.promanager'),
})} ${import.meta.env.VITE_APP_GIT_SHA || 'Local Build'} - ${
import.meta.env.VITE_APP_GIT_SHA_DATE
}`}
</div>
<div id="noticeable-widget" style={{ marginLeft: '1rem' }} />
</div>
<Link to="/disclaimer" target="_blank" style={{ color: '#ccc' }}>
Disclaimer & Notices
</Link>
</div>
</Footer>
</Layout>
</>
);
}
export default connect(mapStateToProps, null)(Manage);
export default connect(mapStateToProps, mapDispatchToProps)(Manage);