Feature/nexcess domains alt

packages/sitebuilder/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@moderntribe/sitebuilder",
-	"version": "1.5.0",
+	"version": "1.6.0-alpha.10",
 	"description": "SiteBuilder foundation",
 	"main": "dist/index.js",
 	"files": [
@@ -22,17 +22,18 @@
 	"author": "",
 	"dependencies": {
 		"@moderntribe/wme-ui": "workspace:*",
-		"@moderntribe/wme-utils": "workspace:*"
+		"@moderntribe/wme-utils": "workspace:*",
+		"@tanstack/react-query": "^4.14.3"
 	},
 	"peerDependencies": {
-		"@wordpress/element": "^4.12.0",
-		"@wordpress/html-entities": "^3.14.0",
-		"@wordpress/i18n": "^4.14.0",
 		"@emotion/react": "^11.9.3",
 		"@emotion/styled": "^11.9.3",
 		"@mui/icons-material": "^5.8.4",
 		"@mui/material": "^5.9.2",
 		"@mui/utils": "^5.9.1",
+		"@wordpress/element": "^4.12.0",
+		"@wordpress/html-entities": "^3.14.0",
+		"@wordpress/i18n": "^4.14.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-router-dom": "^6.4.2"

packages/sitebuilder/sitebuilder.d.ts

@@ -118,6 +118,58 @@ declare global {
 		disable?: boolean;
 		hidePagination?: boolean;
 	}
+	export interface Domain {
+		domain: string
+		is_available: boolean
+		package: {
+			id: number
+			identity: string
+			metadata: DomainMetadata
+			addons: DomainAddon[]
+			auto_renew: boolean
+			bandwidth: number
+			billing_type: string
+			environment_type: string
+			is_wildcard: boolean
+			label: string
+			name: string
+			orderable_terms: DomainOrderableTerms
+			term_fees: DomainTermFees
+			tld: DomainTld
+			trial_period: number
+			type: string
+		}
+		pricing: any[]
+		tld: DomainTld
+	}
+	interface DomainAddon {
+		id: number
+		identity: string
+		metadata: DomainMetadata
+		description: string
+		monthly_fee: string
+		name: string
+		term_fees: DomainTermFees
+		type: string
+	}
+	interface DomainTermFees {
+		[key: string]: string
+	}
+
+	interface DomainOrderableTerms {
+		[key: string]: string
+	}
+
+	interface DomainTld {
+		id: number
+		identity: string
+		metadata: DomainMetadata
+	}
+
+	interface DomainMetadata {
+		scope: string
+		uri: string
+	}
 
 	interface Window {
 		ppcp_onboarding_productionCallback: (authCode: string, sharedId: string) => void;

packages/sitebuilder/src/SiteBuilder.tsx

@@ -2,27 +2,34 @@ import React, { lazy } from 'react';
 import { ThemeProvider, createTheme } from '@mui/material';
 import { theme as WME_THEME } from '@moderntribe/wme-ui';
 import { HashRouter, Routes, Route, Navigate } from 'react-router-dom';
+import {
+	QueryClient,
+	QueryClientProvider
+} from '@tanstack/react-query';
 import SiteBuilderProvider from '@sb/contexts/SiteBuilderProvider';
 import WizardProvider from '@sb/contexts/WizardProvider';
 import WizardWrapper from '@sb/wizards/WizardWrapper';
 import Loadable from '@sb/components/Loadable';
 import { SB_THEME } from '@sb/constants';
 
-const SetupScreen = Loadable(lazy(() => import('@sb/setup/SetupScreen')));
+const SetupScreen: (props: any) => JSX.Element = Loadable(lazy(() => import('@sb/setup/SetupScreen')));
 
 const siteBuilderTheme = createTheme(WME_THEME, SB_THEME);
+const queryClient = new QueryClient();
 
 const SiteBuilder = () => (
 	<ThemeProvider theme={ siteBuilderTheme }>
-		<SiteBuilderProvider>
-			<HashRouter>
-				<Routes>
-					<Route path="/" element={ <SetupScreen fullscreen={ true } /> } />
-					<Route path="/wizard/*" element={ <WizardProvider><WizardWrapper /></WizardProvider> } />
-					<Route path="*" element={ <Navigate to="/" /> } />
-				</Routes>
-			</HashRouter>
-		</SiteBuilderProvider>
+		<QueryClientProvider client={ queryClient }>
+			<SiteBuilderProvider>
+				<HashRouter>
+					<Routes>
+						<Route path="/" element={ <SetupScreen fullscreen={ true } /> } />
+						<Route path="/wizard/*" element={ <WizardProvider><WizardWrapper /></WizardProvider> } />
+						<Route path="*" element={ <Navigate to="/" /> } />
+					</Routes>
+				</HashRouter>
+			</SiteBuilderProvider>
+		</QueryClientProvider>
 	</ThemeProvider>
 );
 

packages/sitebuilder/src/constants/theme.ts

@@ -48,12 +48,6 @@ declare module '@mui/material/styles/createPalette' {
 
 let theme = {
 	palette: {
-		primary: {
-			main: '#303F9F',
-			dark: '#2A3353',
-			grey: '#949494',
-			white: '#FFF',
-		},
 		text: {
 			primary: '#2A3353',
 			secondary: '#2A3353',

packages/sitebuilder/src/contexts/GoLiveProvider.tsx

@@ -15,7 +15,7 @@ export interface GoLiveProviderContextInterface {
 	setIsLoading: (loading: boolean) => void;
 	getHasDomainNextText: (hasDomain: string) => void;
 	setHasDomain: (hasDomain: string) => void;
-	setShowGetDomain: (show: boolean) => void;
+	setShowPurchaseNavigation: (show: boolean) => void;
 }
 
 export interface DomainVerficationSuccessInterface {
@@ -72,6 +72,7 @@ export const GoLiveContext = createContext<GoLiveProviderContextInterface | null
 
 const GoLiveProvider = ({ children }: { children: React.ReactNode }) => {
 	const [goLiveState, setGoLiveState] = useState<GoLiveInterface>(GoLiveData());
+	const { selectedDomains } = goLiveState;
 
 	const goLiveNonce = GO_LIVE_PROPS.ajax?.nonce || '';
 	const goLiveAction = GO_LIVE_PROPS.ajax?.action || '';
@@ -80,6 +81,7 @@ const GoLiveProvider = ({ children }: { children: React.ReactNode }) => {
 
 	const navigate = useNavigate();
 	const [searchParams, setSearchParams] = useSearchParams();
+	const purchaseNavigation = searchParams.get('purchase') === 'true';
 
 	const activeStep = searchParams.get('step')
 		? Number(searchParams.get('step'))
@@ -94,46 +96,35 @@ const GoLiveProvider = ({ children }: { children: React.ReactNode }) => {
 	}, [retryVerfication]);
 
 	useEffect(() => {
-		if (activeStep === 3) {
-			if (! capturedDomain) {
-				navigate('/wizard/go-live');
-			}
-
-			if (
-				goLiveState.verificationStatus && ! (
-					goLiveState.verificationStatus === 'connected' ||
-					goLiveState.verificationStatus === 'advanced'
-				)
-			) {
-				navigate('/wizard/go-live');
-			}
-
-			if (goLiveState.verificationStatus === 'error') {
-				navigate('/wizard/go-live?step=2');
+		if (activeStep === 2) {
+			if (purchaseNavigation) {
+				if (selectedDomains.length === 0) {
+					searchParams.set('step', '1');
+					setSearchParams(searchParams);
+				}
 			}
 		}
-
-		if (activeStep === 1 && goLiveState.hasDomain !== null) {
-			const { steps, hasDomain, showGetDomain } = goLiveState;
-
-			steps[ 0 ].nextText = continueStr;
-			steps[ 0 ].hideBack = true;
-
-			if (hasDomain === 'no') {
-				steps[ 0 ].nextText = showGetDomain ? haveDomain : getDomain;
-			}
-
-			if (hasDomain === 'no' && showGetDomain) {
-				steps[ 0 ].disableNext = true;
-				steps[ 0 ].hideBack = false;
+		if (activeStep === 3) {
+			if (! purchaseNavigation) {
+				if (! capturedDomain) {
+					navigate('/wizard/go-live');
+				}
+
+				if (
+					goLiveState.verificationStatus && ! (
+						goLiveState.verificationStatus === 'connected' ||
+					goLiveState.verificationStatus === 'advanced'
+					)
+				) {
+					navigate('/wizard/go-live');
+				}
+
+				if (goLiveState.verificationStatus === 'error') {
+					navigate('/wizard/go-live?step=2');
+				}
 			}
-
-			setGoLiveState({
-				...goLiveState,
-				steps
-			});
 		}
-	}, [activeStep, goLiveState.showGetDomain]);
+	}, [activeStep, purchaseNavigation]);
 
 	const submitGoLiveForm = () => {
 		const { steps, showLogoutButton } = goLiveState;
@@ -312,7 +303,7 @@ const GoLiveProvider = ({ children }: { children: React.ReactNode }) => {
 	const getHasDomainNextText = (hasDomain:string) => {
 		switch (hasDomain) {
 		case 'yes':
-			return goLiveState.showGetDomain ? haveDomain : continueStr;
+			return haveDomain;
 		case 'no':
 			return getDomain;
 		default:
@@ -331,14 +322,13 @@ const GoLiveProvider = ({ children }: { children: React.ReactNode }) => {
 		});
 	};
 
-	const setShowGetDomain = (show:boolean) => {
-		const { steps } = goLiveState;
-		steps[ 0 ].nextText = haveDomain;
-		setGoLiveState({
-			...goLiveState,
-			showGetDomain: show,
-			steps
-		});
+	const setShowPurchaseNavigation = (show: boolean) => {
+		if (show) {
+			searchParams.set('purchase', 'true');
+		} else {
+			searchParams.delete('purchase');
+		}
+		setSearchParams(searchParams);
 	};
 
 	return (
@@ -349,7 +339,7 @@ const GoLiveProvider = ({ children }: { children: React.ReactNode }) => {
 			submitDomainVerification,
 			setIsLoading,
 			setHasDomain,
-			setShowGetDomain,
+			setShowPurchaseNavigation,
 			handleDomainVerificationRequest,
 			getHasDomainNextText
 		} }>

packages/sitebuilder/src/contexts/WizardProvider.tsx

@@ -83,7 +83,8 @@ const WizardProvider = ({ children }: { children: React.ReactNode }) => {
 		if (typeof targetStep !== 'number') {
 			return;
 		}
-		setSearchParams({ step: String(targetStep) });
+		searchParams.set('step', String(targetStep));
+		setSearchParams(searchParams);
 	};
 
 	const goToNextStep = () => {

packages/sitebuilder/src/hooks/index.ts

@@ -1,3 +1,5 @@
+export * from './useCreatePurchaseFlow';
+export * from './useFindDomain';
 export * from './useFirstTimeConfiguration';
 export * from './useLookAndFeel';
 export * from './useGoLive';

packages/sitebuilder/src/hooks/useCreatePurchaseFlow.ts

@@ -0,0 +1,51 @@
+import { useMutation } from '@tanstack/react-query';
+import { handleActionRequest } from '@moderntribe/wme-utils';
+import { GO_LIVE_PROPS } from '@sb/constants';
+
+export interface Response {
+  action: string
+  data: any
+  callback_url: string
+  return_url: any
+  uuid: string
+  site_id: number
+  outcome: Outcome
+}
+
+export interface Outcome {
+  status: string
+  details: Details
+}
+
+export interface Details {
+  id: number
+  identity: string
+  scope: string
+  purchased_domain: string
+}
+
+async function createPurchaseFlow(domains: { domainName: string, packageId: number}[]) {
+	const goLiveNonce = GO_LIVE_PROPS.ajax?.nonce || '';
+	const goLiveAction = GO_LIVE_PROPS.ajax?.action || '';
+	const response: any = await handleActionRequest({
+		_wpnonce: goLiveNonce,
+		action: goLiveAction,
+		sub_action: 'create-purchase-flow',
+		domains: domains.map(({ domainName, packageId }) => ({ domain_name: domainName, package_id: packageId })),
+	});
+	return response as Response;
+}
+
+export function useCreatePurchaseFlow() {
+	const goLivePurchaseFlowUrl = GO_LIVE_PROPS?.purchaseFlowUrl || '';
+	const mutation = useMutation(
+		createPurchaseFlow,
+		{
+			onSuccess: (data) => {
+				window.location.href = goLivePurchaseFlowUrl.replace('UUID', data.uuid);
+			},
+		}
+	);
+
+	return mutation;
+}