Merge pull request #220 from moderntribe/ftc-wizard

FTC wizard & error page

packages/site-settings/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @moderntribe/sitedetails
 
+## 1.0.1
+
+### Patch Changes
+
+- Updated dependencies [b01e5af]
+- Updated dependencies [81f8d17]
+  - @moderntribe/wme-ui@3.1.0
+
 ## 1.0.0
 
 ### Major Changes

packages/site-settings/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@moderntribe/site-settings",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"description": "Site settings foundation",
 	"source": "src/index.tsx",
 	"main": "dist/umd/index.js",

packages/sitebuilder/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @moderntribe/sitebuilder
 
+## 3.0.0
+
+### Major Changes
+
+- 81f8d17: The FTC Wizard now can be completed and will gather all required data from the user
+
+### Patch Changes
+
+- Updated dependencies [b01e5af]
+- Updated dependencies [81f8d17]
+  - @moderntribe/wme-ui@3.1.0
+
 ## 2.0.1
 
 ### Patch Changes

packages/sitebuilder/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@moderntribe/sitebuilder",
-	"version": "2.0.1",
+	"version": "3.0.0",
 	"description": "SiteBuilder foundation",
 	"source": "src/index.tsx",
 	"main": "dist/umd/index.js",
@@ -11,7 +11,7 @@
 	],
 	"scripts": {
 		"build": "rollup --config node:@moderntribe/rollup-config --environment NODE_ENV:production",
-		"dev": "rollup --config node:@moderntribe/rollup-config --watch",
+		"dev": "rollup --config node:@moderntribe/rollup-config",
 		"lint": "eslint . --ext ts,tsx",
 		"lint:fix": "eslint . --fix --ext ts,tsx",
 		"test": "echo \"Error: no test specified\" && exit 1"

packages/sitebuilder/src/components/Frame.tsx

@@ -15,7 +15,7 @@ export const Frame = ({ children }: ChildrenProps) => {
 		boxShadow: currentStep === 1 ? 'none' : '0px 0px 32px 0px #0000001a',
 		alignSelf: 'center',
 		margin: '0px auto',
-		width: activeDevice === 'desktop' ? '100%' : 'auto',
+		width: activeDevice.breakpoint === 'desktop' ? '100%' : 'auto',
 		height: '100%',
 	};
 

packages/sitebuilder/src/components/ModalDeviceSelection.tsx

@@ -2,16 +2,30 @@ import { Box, SvgIcon } from '@mui/material';
 import { DesktopWindows, TabletMac, PhoneIphone } from '@mui/icons-material';
 import { useWizard } from '@sb/hooks';
 
-interface DevicesInterface {
-	desktop: typeof SvgIcon;
-	tablet: typeof SvgIcon;
-	mobile: typeof SvgIcon;
+export interface DeviceInterface {
+		icon: typeof SvgIcon;
+		width: string;
+}
+
+export interface DevicesInterface {
+	desktop: DeviceInterface;
+	tablet: DeviceInterface;
+	mobile: DeviceInterface;
 }
 
 const devices:DevicesInterface = {
-	desktop: DesktopWindows,
-	tablet: TabletMac,
-	mobile: PhoneIphone,
+	desktop: {
+		icon: DesktopWindows,
+		width: '100%',
+	},
+	tablet: {
+		icon: TabletMac,
+		width: '768px',
+	},
+	mobile: {
+		icon: PhoneIphone,
+		width: '480px',
+	},
 };
 
 const deviceSx = {
@@ -26,22 +40,32 @@ const deviceSx = {
 	}
 };
 
+const wrapperSx = {
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	zIndex: 1,
+};
+
 export const ModalDeviceSelection = () => {
 	const { setActiveDevice, wizardState: { activeDevice } } = useWizard();
 
-	const handleDeviceClick = (nextDevice: string) => {
-		if (nextDevice === activeDevice) {
+	const handleDeviceClick = (nextDevice: keyof DevicesInterface) => {
+		if (nextDevice === activeDevice.breakpoint) {
 			return;
 		}
-		setActiveDevice(nextDevice);
+		setActiveDevice({
+			breakpoint: nextDevice,
+			width: devices[ nextDevice ].width
+		});
 	};
 
-	return <Box sx={ { display: 'flex', alignItems: 'center' } }>
-		{ (Object.keys(devices) as Array<keyof typeof devices>).map((key) => {
-			const DeviceName = devices[ key ];
+	return <Box sx={ wrapperSx }>
+		{ (Object.keys(devices) as Array<keyof typeof devices>).map((key: keyof DevicesInterface) => {
+			const DeviceName = devices[ key ].icon;
 			return <DeviceName
 				key={ key }
-				sx={ activeDevice === key ? deviceSx.active : deviceSx.default }
+				sx={ activeDevice.breakpoint === key ? deviceSx.active : deviceSx.default }
 				onClick={ () => handleDeviceClick(key) }
 			/>;
 		}) }

packages/sitebuilder/src/components/NotificationOverlay.tsx

@@ -0,0 +1,20 @@
+import { Box } from '@mui/material';
+
+const ErrorScreenWrapper = {
+	position: 'fixed',
+	top: '0',
+	left: '0',
+	width: '100vw',
+	height: '100vh',
+	display: 'flex',
+	justifyContent: 'center',
+	alignItems: 'center',
+	backgroundColor: '#fff',
+	zIndex: 15
+};
+
+export const NotificationOverlay = (props: { children: React.ReactNode }) => {
+	const { children } = props;
+
+	return <Box sx={ ErrorScreenWrapper }>{ children }</Box>;
+};

packages/sitebuilder/src/components/WizardSidebar.tsx

@@ -35,7 +35,8 @@ export const WizardSidebar = (props: WizardSidebarProps) => {
 					position: 'fixed',
 					top: 0,
 					left: 0,
-					height: '100vh'
+					height: '100vh',
+					width: '100%'
 				} }
 			>
 				<Sidebar

packages/sitebuilder/src/components/index.ts

@@ -9,3 +9,4 @@ export * from './Loading';
 export * from './JumpNav';
 export * from './WizardSidebar';
 export * from './WizardExitButton';
+export * from './NotificationOverlay';

packages/sitebuilder/src/constants/index.ts

@@ -1,4 +1,4 @@
-import { cards } from "./cards.temp";
+import { cards } from './cards.temp';
 
 export const SITEBUILDER = window.sitebuilder;
 

packages/sitebuilder/src/contexts/WizardProvider.tsx

@@ -3,13 +3,23 @@ import { useSearchParams, useNavigate, useParams } from 'react-router-dom';
 import { handleTelemetryRequest } from '@sb/utils/handleTelemetryRequest';
 import { WIZARDS } from '@sb/constants';
 
+export interface ActiveDevice {
+	breakpoint: string;
+	width: string;
+}
+
 export interface WizardProviderStateInterface {
 	lastStep: number | null;
 	isLastStep: boolean;
 	hideExit: boolean;
 	showCloseWarning: boolean | null;
-	activeDevice: string;
+	activeDevice: ActiveDevice;
 	hasStepped: boolean;
+	error?: {
+		showError: boolean;
+		title?: string;
+		message?: string;
+	};
 }
 
 export interface WizardProviderContextInterface {
@@ -21,23 +31,29 @@ export interface WizardProviderContextInterface {
 	closeAll: () => void;
 	setShowCloseWarning: (showCloseWarning: boolean) => void;
 	setHideExit: (hideExit: boolean) => void;
-	setActiveDevice: (device: string) => void;
+	setActiveDevice: (device: ActiveDevice) => void;
+	setError: (
+		showErrorScreen: boolean,
+		title?: string,
+		message?: string
+	) => void;
 }
 
 const initialState: WizardProviderStateInterface = {
 	lastStep: null,
 	isLastStep: false,
 	hideExit: false,
 	showCloseWarning: null,
-	activeDevice: 'desktop',
-	hasStepped: false,
+	activeDevice: { breakpoint: 'desktop', width: '100%' },
+	hasStepped: false
 };
 
 export const WizardContext =
 	createContext<WizardProviderContextInterface | null>(null);
 
 const WizardProvider = ({ children }: { children: React.ReactNode }) => {
-	const [wizardState, setWizardState] = useState<WizardProviderStateInterface>(initialState);
+	const [wizardState, setWizardState] =
+		useState<WizardProviderStateInterface>(initialState);
 	const [searchParams, setSearchParams] = useSearchParams({ step: '1' });
 	const currentStep = searchParams.get('step')
 		? Number(searchParams.get('step'))
@@ -116,13 +132,35 @@ const WizardProvider = ({ children }: { children: React.ReactNode }) => {
 		});
 	};
 
-	const setActiveDevice = (device: string) => {
+	const setActiveDevice = (device: ActiveDevice) => {
 		setWizardState({
 			...wizardState,
 			activeDevice: device
 		});
 	};
 
+	const setError = (
+		showErrorScreen: boolean,
+		title?: string,
+		message?: string
+	) => {
+		if (! showErrorScreen) {
+			setWizardState({
+				...wizardState,
+				error: undefined
+			});
+		} else {
+			setWizardState({
+				...wizardState,
+				error: {
+					showError: true,
+					title,
+					message
+				}
+			});
+		}
+	};
+
 	return (
 		<WizardContext.Provider
 			value={ {
@@ -134,7 +172,8 @@ const WizardProvider = ({ children }: { children: React.ReactNode }) => {
 				closeAll,
 				setShowCloseWarning,
 				setHideExit,
-				setActiveDevice
+				setActiveDevice,
+				setError
 			} }
 		>
 			{ children }

packages/sitebuilder/src/hooks/useWizard.ts

@@ -11,7 +11,8 @@ export function useWizard() {
 		closeAll,
 		setShowCloseWarning,
 		setHideExit,
-		setActiveDevice
+		setActiveDevice,
+		setError
 	} = useContext(WizardContext) as WizardProviderContextInterface;
 	return {
 		wizardState,
@@ -22,6 +23,7 @@ export function useWizard() {
 		closeAll,
 		setShowCloseWarning,
 		setHideExit,
-		setActiveDevice
+		setActiveDevice,
+		setError
 	};
 }

packages/sitebuilder/src/wizards/first-time-configuration/components/FirstTimeConfigurationWizard.tsx

@@ -10,6 +10,7 @@ import { Grid } from '@mui/material';
 import { ArrowForward } from '@mui/icons-material';
 import PlaceholderLogo from '@sb/logos/PlaceholderLogo';
 import ScreenWrapper from './ScreenWrapper';
+import { ErrorScreen } from '../screens';
 
 const FirstTimeConfigurationWizard = () => {
 	const {
@@ -18,7 +19,7 @@ const FirstTimeConfigurationWizard = () => {
 	} = useFirstTimeConfiguration();
 
 	const {
-		wizardState: { showCloseWarning, hasStepped },
+		wizardState: { showCloseWarning, hasStepped, error },
 		goToNextStep,
 		goToPreviousStep,
 		goToStep,
@@ -97,6 +98,7 @@ const FirstTimeConfigurationWizard = () => {
 						text={ __('Exit to Setup', 'moderntribe-sitebuilder') }
 					/>
 				) }
+				{ error && error.showError && <ErrorScreen logo={ <PlaceholderLogo /> } /> }
 				<ScreenWrapper>{ currentScreen.screen }</ScreenWrapper>
 			</Grid>
 			<WizardFooter