Merge pull request #219 from moderntribe/chore/SITE-316/moving-domain…

…-card

Moving domain card into the site-settings package

.github/workflows/deploy.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:        
-      - uses: webfactory/ssh-agent@v0.8.0
+      - uses: webfactory/ssh-agent@v0.7.0
         with:
           ssh-private-key: ${{ secrets.ssh-key || secrets.SITEBUILDER_SSH_PRIVATE_KEY }}
 

packages/site-settings/.eslintrc.json

@@ -25,7 +25,8 @@
             "alias": {
                 "extensions": [".js", ".jsx", ".ts", ".tsx"],
 								"map": [
-									["@site", "./src"]
+									["@site", "./src"],
+									["@go-live", "./src/wizards/go-live"]
 								]
             }
         },

packages/site-settings/package.json

@@ -19,7 +19,8 @@
 	"author": "",
 	"dependencies": {
 		"@moderntribe/wme-ui": "workspace:*",
-		"@moderntribe/wme-utils": "workspace:*"
+		"@moderntribe/wme-utils": "workspace:*",
+		"@tanstack/react-query": "^4.14.3"
 	},
 	"peerDependencies": {
 		"@emotion/react": "^11.9.3",

packages/site-settings/site-settings.d.ts

@@ -60,9 +60,179 @@ declare global {
 		footer?: SetupCardFooter;
 	}
 
+	interface SetupCardInterface {
+		id: string;
+		title: string;
+		intro?: string;
+		completed: boolean;
+		navTitle: string;
+		rows: (SetupCardRowInterface | SetupCardRowGoLIveInterface)[];
+		footer?: SetupCardFooter;
+	}
+
+	interface SetupCardFooter {
+		collapsible: boolean;
+		collapsibleLabel?: string;
+		rows: (SetupCardFooterRowColumns | SetupCardFooterRowLinks | SetupCardRowGoLIveInterface)[]
+	}
+
+	interface SetupCardFooterRowColumns {
+		type: 'columns';
+		gridColumns: number,
+		columns: SetupCardFooterColumn[];
+	}
+
+	interface SetupCardFooterRowLinks {
+		type: 'links';
+		title: string;
+		links: SetupCardLink[];
+	}
+
+	interface SetupCardFooterRowText{
+		type: 'text';
+		text: string;
+	}
+
 	interface PasswordStrengthType {
 		label: 'weak' | 'medium' | 'strong';
 		color: 'error' | 'warning' | 'success';
 	}
 
+	type DomainVerificationTypes = 'general' | 'registration' | 'pointed' | 'success';
+
+	interface DomainVerificationInterface {
+		type: DomainVerificationTypes;
+		message: string;
+	}
+
+	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 DomainTld {
+		id: number
+		identity: string
+		metadata: DomainMetadata
+	}
+
+	interface DomainMetadata {
+		scope: string
+		uri: string
+	}
+
+	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 DomainVerificationSuccessInterface {
+		domain: string;
+		is_registered: boolean;
+		is_pointed: boolean;
+		uses_local_nameservers: boolean;
+		can_setup: boolean;
+		nameservers: string[];
+	}
+
+	interface DomainVerificationErrorInterface {
+		code: string;
+		message: string;
+	}
+
+	interface StepInterface {
+		id: number;
+		hideBack?: boolean;
+		hideSkip?: boolean;
+		hideNext?: boolean;
+		label?: string;
+		title?: string;
+		description?: string;
+		footerHelpText?: string;
+		icon?: React.ReactNode;
+		nextText?: string;
+		loadingText?: string;
+		backText?: string;
+		screen?: React.ReactNode;
+		disableNext?: boolean;
+		disableAll?: boolean;
+		disable?: boolean;
+		hidePagination?: boolean;
+		hideExit?: boolean;
+		hideSidebar?: boolean;
+		hideFooter?: boolean;
+	}
+
+	interface SetupCardRowInterface {
+		completed?: boolean;
+		id: string;
+		type: 'task';
+		title?: string;
+		intro?: string;
+		icon?: React.ReactElement | string;
+		taskCta?: string;
+		url?: string;
+		target?: '_blank' | '_self';
+		wizardHash?: string;
+	}
+
+	export interface GoLiveInterface {
+		isLoading: boolean;
+		verifyingUrl: string;
+		lastStep: number;
+		hasDomain: string | null;
+		selectedDomains: Domain[];
+		searchDomain: string;
+		skipDnsVerification: boolean;
+		verificationStatus: string;
+		verificationErrorType: boolean | string;
+		verificationMessage: string;
+		showLogoutButton: boolean;
+		steps: Array<StepInterface>;
+	}
+
+	export interface GoLiveProviderContextInterface {
+		goLiveState: GoLiveInterface;
+		setGoLiveState: React.Dispatch<React.SetStateAction<GoLiveInterface>>;
+		submitGoLiveForm: () => void;
+		submitDomainVerification: () => void;
+		handleDomainVerificationRequest: () => void;
+		setIsLoading: (loading: boolean) => void;
+		setShowPurchaseNavigation: (show: boolean) => void;
+	}
+
 }

packages/site-settings/src/components/Loadable.tsx

@@ -1,7 +1,7 @@
 import { Suspense } from 'react';
 import { Loading } from './Loading';
 
-const Loadable = <T extends { fullscreen?: boolean }>(Component: React.ComponentType<T>) => (props: T) => {
+const Loadable = <T extends { fullscreen?: boolean }>(Component: React.FunctionComponent<T>) => (props: T) => {
 	const {
 		fullscreen,
 	} = props;

packages/site-settings/src/constants/index.ts

@@ -1,7 +1,115 @@
+import { __ } from '@wordpress/i18n';
+
 export const SITE_SETTINGS = window?.site_settings;
 
 export const ASSETS_URL = SITE_SETTINGS?.assets_url;
 
 export const IMAGE_DIR = `${ ASSETS_URL }images/`;
 
 export const CARDS: SetupCardAccordionInterface[] = SITE_SETTINGS?.cards || [];
+
+export const WIZARDS = SITE_SETTINGS?.wizards || {};
+
+export const GO_LIVE_PROPS = SITE_SETTINGS.wizards.golive;
+
+export const NEXCESS_SUPPORT_URL = SITE_SETTINGS.support_url;
+
+export const SITE_DOMAIN_DATA = {
+	screen: {
+		title: __('Site Set Up', 'moderntribe-sitebuilder'),
+	},
+	goLiveStatus: {
+		manage: __('Manage', 'moderntribe-sitebuilder'),
+		statusMessage: __('Your site domain is', 'moderntribe-sitebuilder'),
+		tryAgain: __('Try Again', 'moderntribe-sitebuilder'),
+		verifyMsgPart1: __('We were unable to verify', 'moderntribe-sitebuilder'),
+		verifyMsgPart2: __('Try again in 8-12 hrs after your last attempt.', 'moderntribe-sitebuilder'),
+	},
+	lookAndFeelFooter: {
+		change: __('Change', 'moderntribe-sitebuilder'),
+	},
+	goLiveProviderText: {
+		getDomain: __('Get My Domain', 'moderntribe-sitebuilder'),
+		haveDomain: __('I\'ve Got My Domain', 'moderntribe-sitebuilder'),
+		checkout: __('Checkout', 'moderntribe-sitebuilder'),
+		continueStr: __('Continue', 'moderntribe-sitebuilder'),
+		errorMessage: __('There was an error while updating your site\'s domain.', 'moderntribe-sitebuilder'),
+		errorMessageVerification: __('There was an error while verifying your site\'s domain.', 'moderntribe-sitebuilder'),
+		errorNotPointed: __('This domain is not pointing to your website.', 'moderntribe-sitebuilder'), // TODO: change wording to use product name
+		errorNotRegistered: __('This domain is not registered.', 'moderntribe-sitebuilder'),
+		errorGeneral: __('We\'re unable to connect your domain.', 'moderntribe-sitebuilder'),
+	},
+	findDomain: {
+		title: __('Find the perfect domain.', 'moderntribe-sitebuilder'),
+		description: __('Enter the domain name you want your store to have, and we\'ll see if it\'s available. If it isn\'t, we\'ll make suggestions about ones that are.', 'moderntribe-sitebuilder'),
+		defaultError: __('Something went wrong, please try again', 'moderntribe-sitebuilder')
+	},
+	verifyDomain: {
+		screenTitle: __('Verify your domain', 'moderntribe-sitebuilder'),
+		screenDescription: __('We\'ll verify your domain and get it ready to use. This can take a while, but don\'t worry - we\'ll walk you through it.', 'moderntribe-sitebuilder'),
+		screenNotice: __('If you\'re using a subdomain (ex: store.example.com), please stop here and reach out to support at', 'moderntribe-sitebuilder'),
+		goLiveLabelText: __('Enter the domain you want to connect', 'moderntribe-sitebuilder'),
+		goLivePlaceholderText: __('yourdomain.com', 'moderntribe-sitebuilder'),
+		errorDomainFormat: __('The domain entered does not appear to be a valid format.', 'moderntribe-sitebuilder'),
+	},
+	updateSiteUrl: {
+		screenTitle: __('You\'re ready to go live with', 'moderntribe-sitebuilder'),
+		screenDescription: __('Once we begin, this process may take a few minutes. When the process is complete, you will need to log in again on the new live domain.', 'moderntribe-sitebuilder'),
+		descriptionProcessing: __('This process will take a few minutes. You\'ll be logged out when it completes and will need to log in again on your new domain.', 'moderntribe-sitebuilder'),
+		launchImgAltText: __('Go live rocket', 'moderntribe-sitebuilder'),
+		loginUrlLabelText: __('Copy Your New Login URL', 'moderntribe-sitebuilder'),
+		loginUrlHelperText: __('Copy and save this URL. Once your domain is connected you\'ll need it to login.', 'moderntribe-sitebuilder')
+	},
+	connectWithNexcess: {
+		screenTitle: __('Good choice! We’ll need to connect to your Nexcess account.', 'moderntribe-sitebuilder'),
+		screenDescription: __('We\'ll make sure your chosen domain is managed by your Nexcess account. Once connected, we\'ll navigate you back here to complete the process.', 'moderntribe-sitebuilder'),
+	},
+	claimYourDomain: {
+		screenTitle: __('is all yours!', 'moderntribe-sitebuilder'),
+		screenDescription: __('We need a little time to update the entire internet about your purchase. You\'ll be able to connect your domain when we\'re done. This typically takes an hour but can take up to 8 hours to complete.', 'moderntribe-sitebuilder'),
+	},
+	errorDomainGeneral: {
+		accountContent: __('It looks like we\'re having trouble connecting your domain.', 'moderntribe-sitebuilder'),
+		accountCta: __('Contact Support', 'moderntribe-sitebuilder')
+	},
+	errorDomainNotRegistered: {
+		registerDomainContent: __('It looks like this domain is not registered. Don\'t worry, we can help you secure this domain for your Store. Nexcess helps you find, create and own your perfect domain. It’s so easy, even we could do it. Once you\'ve got your domain, come back here and select "I\'ve Got My Domain".', 'moderntribe-sitebuilder'),
+		registerDomainCtaPart1: __('Purchase', 'moderntribe-sitebuilder'),
+		registerDomainCtaPart2: __('With Nexcess', 'moderntribe-sitebuilder')
+	},
+	errorDomainRegisteredNotPointing: {
+		helpHeadlinePart1: __('1. Enter Name Servers', 'moderntribe-sitebuilder'),
+		helpHeadlinePart2: __('2. Retry your connection', 'moderntribe-sitebuilder'),
+		helpHeadlinePart3: __('3. Still not working?', 'moderntribe-sitebuilder'),
+		helpContentPart1: __('Log in to your domain registrar (the site where you bought your domain) and change the nameservers to the following:', 'moderntribe-sitebuilder'),
+		helpContentPart1a: __('If you don\'t know how to do this, your registrar\'s customer support team can help!', 'moderntribe-sitebuilder'),
+		helpContentPart1b: __('Advanced users only: If you\'d prefer to point A records or CNAME records to your StoreBuilder site, you can log into the Nexcess Client Portal to find the settings for your site.', 'moderntribe-sitebuilder'),
+		helpContentPart1c: __('Learn more about connecting a domain.', 'moderntribe-sitebuilder'),
+		helpContentPart2: __('Once you\'ve pointed your Name Servers at Nexcess you can retry your connection. It can take up to 48 hours for this to work.', 'moderntribe-sitebuilder'),
+		helpContentPart3: __('This can take awhile, depending on your provider. If it\'s been 48 hours since you added your nameservers, contact StoreBuilder support for further assistance. ', 'moderntribe-sitebuilder'),
+		retryConnection: __('Retry connection', 'moderntribe-sitebuilder'),
+		advancedLabelPart1: __('Advanced:', 'moderntribe-sitebuilder'),
+		advancedLabelPart2: __('Skip verification', 'moderntribe-sitebuilder'),
+		advancedContentPart1: __('By default, we check that the appropriate DNS records are set before changing your domain. If you\'re behind a proxy or are using another more advanced DNS technique, you may wish to skip this validation.', 'moderntribe-sitebuilder'),
+		advancedContentPart2: __('Your site may become inaccessible if its DNS records are invalid, so please double-check your DNS configuration before continuing.', 'moderntribe-sitebuilder'),
+		advancedContentPart3: __('If anything does go wrong, please reach out to support and we\'ll get you up and running!', 'moderntribe-sitebuilder'),
+	},
+	successDomainConnected: {
+		statusSuccessPart1: __('Your domain is ready to connect!', 'moderntribe-sitebuilder'),
+		statusSuccessPart2: __('Continue and we\'ll do all the work of updating your site to use your custom domain.', 'moderntribe-sitebuilder'),
+		statusSuccessNote: __('This process may take a few minutes, after which you will need to log in again on the new live domain.', 'moderntribe-sitebuilder')
+	},
+	skipVerificationWarning: {
+		warningHeadline: __('Skipping domain verification is an advanced step.', 'moderntribe-sitebuilder'),
+		message1: __('Your site may become inaccessible if its domain records are invalid, so please double-check your configuration before continuing.', 'moderntribe-sitebuilder'),
+		message2: __('If anything does go wrong, please reach out to support and we\'ll get you up and running!', 'moderntribe-sitebuilder'),
+		continueButton: __('Continue without verification', 'moderntribe-sitebuilder'),
+		nevermind: __('Do not skip verification', 'moderntribe-sitebuilder')
+	},
+	domainItems: {
+		taken: __('Taken', 'moderntribe-sitebuilder'),
+		selected: __('Selected', 'moderntribe-sitebuilder'),
+		available: __('Available', 'moderntribe-sitebuilder'),
+		unavailable: __('Unavailable', 'moderntribe-sitebuilder'),
+	}
+};

packages/site-settings/src/contexts/SiteSettingsProvider.tsx

@@ -0,0 +1,44 @@
+import { createContext, useState } from 'react';
+import { GO_LIVE_PROPS } from '@site/constants';
+
+export interface SiteSettingsStateInterface {
+	capturedDomain?: string;
+}
+
+export interface SiteSettingsContextInterface {
+	siteSettingsState: SiteSettingsStateInterface;
+	setSiteSettingsState: (props: any) => void;
+}
+
+const localData: SiteSettingsStateInterface = {
+	capturedDomain: '',
+};
+
+const siteSettingsData = (): SiteSettingsStateInterface => {
+	return {
+		...localData,
+		capturedDomain: GO_LIVE_PROPS.verifyingUrl
+	};
+};
+
+export const SiteSettingsContext = createContext<SiteSettingsContextInterface | null>({
+	siteSettingsState: siteSettingsData(),
+	setSiteSettingsState: () => {}
+});
+
+const SiteSettingsProvider = ({ children }: { children: React.ReactNode }) => {
+	const [siteSettingsState, setSiteSettingsState] = useState<SiteSettingsStateInterface>(siteSettingsData);
+
+	return (
+		<SiteSettingsContext.Provider
+			value={ {
+				siteSettingsState,
+				setSiteSettingsState,
+			} }
+		>
+			{ children }
+		</SiteSettingsContext.Provider>
+	);
+};
+
+export default SiteSettingsProvider;

packages/site-settings/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useSiteSettings';

packages/site-settings/src/hooks/useSiteSettings.ts

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { SiteSettingsContext, SiteSettingsContextInterface } from '@site/contexts/SiteSettingsProvider';
+
+export function useSiteSettings() {
+	const {
+		siteSettingsState,
+		setSiteSettingsState,
+	} = useContext(SiteSettingsContext) as SiteSettingsContextInterface;
+	return {
+		siteSettingsState,
+		setSiteSettingsState,
+	};
+}