Merge pull request #220 from moderntribe/ftc-wizard

FTC wizard & error page

Author: Luke Frauhiger

.changeset/real-coins-accept.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

.changeset/serious-ladybugs-do.md

@@ -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",

.changeset/twenty-needles-sort.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/site-settings/CHANGELOG.md

@@ -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/site-settings/package.json

@@ -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/CHANGELOG.md

@@ -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/package.json

@@ -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>;
+};