[#508] Nonprofit Components (#539)

- [#508] Adds additional admin styles
- [#508] Adds typography and link components
- [#508] Adds site set up card, headings, and multi-step components
- [#510] Adds nonprofit set up cards
- [#510] Disables site warnings in nonprofit set up

client-mu-plugins/goodbids/src/classes/Nonprofits/Setup.php

@@ -25,6 +25,10 @@ class Setup {
 	 * @since 1.0.0
 	 */
 	public function __construct() {
+		// Remove any admin notices for this page.
+		$this->disable_admin_notices();
+
+		// Add the menu page for the setup dashboard
 		$this->add_menu_dashboard_page();
 
 		// Enqueue Scripts
@@ -155,4 +159,24 @@ private function get_js_vars(): array {
 			'ajaxUrl' => admin_url( 'admin-ajax.php' ),
 		];
 	}
+
+	/**
+	 * Disable Admin notices for this page.
+	 *
+	 * @since 1.0.0
+	 *
+	 * @return void
+	 */
+	private function disable_admin_notices(): void {
+		add_action(
+			'admin_init',
+			function(): void {
+				if ( ! $this->is_setup_page() ) {
+					return;
+				}
+
+				remove_all_actions( 'admin_notices' );
+			}
+		);
+	}
 }

client-mu-plugins/goodbids/src/components/button-link.tsx

@@ -6,9 +6,9 @@ type ButtonProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
 
 export function ButtonLink({ variant = 'outline', ...rest }: ButtonProps) {
 	const classes = clsx(
-		'py-2 px-6 cursor-pointer text-admin-content no-underline',
+		'py-2 px-6 cursor-pointer text-admin-content no-underline text-center block',
 		{
-			'border-none rounded-admin-sm bg-admin-main text-white hover:bg-admin-accent hover:text-black transition-colors focus:outline-opacity-50 focus:ring-2 focus:ring-admin-main focus:ring-opacity-50 w-full max-w-80':
+			'border-none rounded-admin-sm bg-admin-main text-white hover:bg-admin-accent hover:text-black transition-colors focus:outline-opacity-50 focus:ring-2 focus:ring-admin-main focus:ring-opacity-50':
 				variant === 'solid',
 			'border border-solid rounded-admin-sm border-admin-main text-admin-main':
 				variant === 'outline',

client-mu-plugins/goodbids/src/components/link.tsx

@@ -0,0 +1,8 @@
+type LinkProps = Omit<
+	React.AnchorHTMLAttributes<HTMLAnchorElement>,
+	'className'
+>;
+
+export function Link(props: LinkProps) {
+	return <a {...props} className="text-admin-content" />;
+}

client-mu-plugins/goodbids/src/components/typography.tsx

@@ -0,0 +1,40 @@
+type TypographyProps = {
+	as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div';
+	children: React.ReactNode;
+};
+
+export const H1 = ({ as = 'h1', children }: TypographyProps) => {
+	const Component = as;
+
+	return (
+		<Component className="!text-admin-extra-large !font-bold m-0 !p-0">
+			{children}
+		</Component>
+	);
+};
+
+export const H2 = ({ as = 'h2', children }: TypographyProps) => {
+	const Component = as;
+
+	return (
+		<Component className="!text-admin-large !font-bold m-0">
+			{children}
+		</Component>
+	);
+};
+
+export const H3 = ({ as = 'h3', children }: TypographyProps) => {
+	const Component = as;
+
+	return (
+		<Component className="!text-admin-medium !font-bold m-0">
+			{children}
+		</Component>
+	);
+};
+
+export const P = ({ as = 'p', children }: TypographyProps) => {
+	const Component = as;
+
+	return <Component className="text-admin-content m-0">{children}</Component>;
+};

client-mu-plugins/goodbids/src/utils/get-base-url.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns the base URL of the admin section.
+ * Used to create links in both the subdomain and subdirectory setups.
+ *
+ * @returns {string} The base URL of the admin section.
+ */
+
+export function getBaseAdminUrl() {
+	return window.location.href.replace(/\/wp-admin\/.*/g, '');
+}

client-mu-plugins/goodbids/src/views/auction-wizard/finish/index.tsx

@@ -24,12 +24,14 @@ export function FinishScreen() {
 				</p>
 			</div>
 
-			<ButtonLink
-				href={`${baseUrl}/wp-admin/post.php?post=${auctionId}&action=edit`}
-				autoFocus
-			>
-				{__('Customize Auction page', 'goodbids')}
-			</ButtonLink>
+			<div className="w-fit">
+				<ButtonLink
+					href={`${baseUrl}/wp-admin/post.php?post=${auctionId}&action=edit`}
+					autoFocus
+				>
+					{__('Customize Auction page', 'goodbids')}
+				</ButtonLink>
+			</div>
 		</div>
 	);
 }

client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/activate-extensions.tsx

@@ -0,0 +1,55 @@
+import { __ } from '@wordpress/i18n';
+import { getBaseAdminUrl } from '../../../utils/get-base-url';
+import { MultiStepExpansion } from '../components/multi-step-expansion';
+import { MultiStepHeading } from '../components/multi-step-heading';
+import { Link } from '../../../components/link';
+
+const JETPACK_URL = '/wp-admin/admin.php?page=jetpack#/dashboard';
+const WOO_SHIPPING_AND_TAX_URL = '#';
+
+export function ActivateExtensions() {
+	const baseUrl = getBaseAdminUrl();
+
+	return (
+		<>
+			<MultiStepHeading
+				title={__('Activate Extensions', 'goodbids')}
+				content={__(
+					'We commending activating these plugins to get the most out of your GOODBIDS Nonprofit site.',
+					'goodbids',
+				)}
+			/>
+
+			<MultiStepExpansion
+				items={[
+					{
+						title: __('Jetpack', 'goodbids'),
+						content: __(
+							'Jetpack is a plugin that provides security, performance, and site management tools.',
+							'goodbids',
+						),
+						component: (
+							<Link href={`${baseUrl}${JETPACK_URL}`}>
+								Connect Jetpack
+							</Link>
+						),
+					},
+					{
+						title: __('Woo Shipping and Tax', 'goodbids'),
+						content: __(
+							'Woo Shipping and Tax is a plugin that provides shipping and tax calculation tools.',
+							'goodbids',
+						),
+						component: (
+							<Link
+								href={`${baseUrl}${WOO_SHIPPING_AND_TAX_URL}`}
+							>
+								Install Woo Shipping and Tax
+							</Link>
+						),
+					},
+				]}
+			/>
+		</>
+	);
+}

client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/advanced.tsx

@@ -0,0 +1,28 @@
+import { __ } from '@wordpress/i18n';
+import { ButtonLink } from '../../../components/button-link';
+import { getBaseAdminUrl } from '../../../utils/get-base-url';
+import { MultiStepHeading } from '../components/multi-step-heading';
+
+// TODO: Update this URL
+const EXTENSIONS_URL = '#';
+
+export function Advanced() {
+	const baseUrl = getBaseAdminUrl();
+
+	return (
+		<MultiStepHeading
+			title={__('Advanced', 'goodbids')}
+			content={__('Do some advanced stuff here.', 'goodbids')}
+		>
+			<div className="w-full max-w-60">
+				<ButtonLink
+					target="_blank"
+					variant="solid"
+					href={`${baseUrl}${EXTENSIONS_URL}`}
+				>
+					{__('Advanced', 'goodbids')}
+				</ButtonLink>
+			</div>
+		</MultiStepHeading>
+	);
+}

client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/finalize-details.tsx

@@ -0,0 +1,30 @@
+import { __ } from '@wordpress/i18n';
+import { ButtonLink } from '../../../components/button-link';
+import { getBaseAdminUrl } from '../../../utils/get-base-url';
+import { MultiStepHeading } from '../components/multi-step-heading';
+
+const SITE_SETTINGS_URL = '/wp-admin/options-general.php';
+
+export function FinalizeDetails() {
+	const baseUrl = getBaseAdminUrl();
+
+	return (
+		<MultiStepHeading
+			title={__('Finalize Details', 'goodbids')}
+			content={__(
+				'Click the button below to review and update your site name, tagline, and timezone. You can revisit these post-launch on the Settings > General page in the WordPress Admin.',
+				'goodbids',
+			)}
+		>
+			<div className="w-full max-w-60">
+				<ButtonLink
+					target="_blank"
+					variant="solid"
+					href={`${baseUrl}${SITE_SETTINGS_URL}`}
+				>
+					{__('Update Site Settings', 'goodbids')}
+				</ButtonLink>
+			</div>
+		</MultiStepHeading>
+	);
+}

client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/index.tsx

@@ -0,0 +1,50 @@
+import { __ } from '@wordpress/i18n';
+import { Card } from '../components/card';
+import { FinalizeDetails } from './finalize-details';
+import { SetUpPayments } from './set-up-payments';
+import { MultiStep } from '../components/multi-step';
+import { UpdateShipping } from './update-shipping';
+import { ActivateExtensions } from './activate-extensions';
+import { Advanced } from './advanced';
+import { CardHeading } from '../components/card-heading';
+
+export function CompleteSetUp() {
+	return (
+		<Card>
+			<CardHeading
+				title={__('Complete Setup', 'goodbids')}
+				content={__(
+					"Before you can launch your GOODBIDS site, you'll need to complete the steps below.",
+					'goodbids',
+				)}
+			/>
+
+			<MultiStep
+				defaultStep="finalize-details"
+				steps={{
+					'finalize-details': {
+						label: __('1 Finalize Details', 'goodbids'),
+						component: <FinalizeDetails />,
+					},
+					'set-up-payments': {
+						label: __('2 Set Up Payments', 'goodbids'),
+						component: <SetUpPayments />,
+					},
+					'update-shipping': {
+						label: __('3 Update Shipping', 'goodbids'),
+						component: <UpdateShipping />,
+					},
+					'activate-extensions': {
+						label: __('4 Activate Extensions', 'goodbids'),
+						component: <ActivateExtensions />,
+					},
+					advanced: {
+						label: __('Advanced', 'goodbids'),
+						component: <Advanced />,
+						fade: true,
+					},
+				}}
+			/>
+		</Card>
+	);
+}

client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/set-up-payments.tsx

@@ -0,0 +1,31 @@
+import { __ } from '@wordpress/i18n';
+import { ButtonLink } from '../../../components/button-link';
+import { getBaseAdminUrl } from '../../../utils/get-base-url';
+import { MultiStepHeading } from '../components/multi-step-heading';
+
+const WOOCOMMERCE_PAYMENTS_URL =
+	'/wp-admin/admin.php?page=wc-settings&tab=checkout';
+
+export function SetUpPayments() {
+	const baseUrl = getBaseAdminUrl();
+
+	return (
+		<MultiStepHeading
+			title={__('Set Up Payments', 'goodbids')}
+			content={__(
+				'Set up payments for your GOODBIDS site. Click the button below to review and update your site settings. You can revisit these post-launch on the WooCommerce > Settings > Payments page in the WordPress Admin.',
+				'goodbids',
+			)}
+		>
+			<div className="w-full max-w-60">
+				<ButtonLink
+					target="_blank"
+					variant="solid"
+					href={`${baseUrl}${WOOCOMMERCE_PAYMENTS_URL}`}
+				>
+					{__('Set Up Payments', 'goodbids')}
+				</ButtonLink>
+			</div>
+		</MultiStepHeading>
+	);
+}

client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/update-shipping.tsx

@@ -0,0 +1,31 @@
+import { __ } from '@wordpress/i18n';
+import { ButtonLink } from '../../../components/button-link';
+import { getBaseAdminUrl } from '../../../utils/get-base-url';
+import { MultiStepHeading } from '../components/multi-step-heading';
+
+const WOOCOMMERCE_SHIPPING_URL =
+	'/wp-admin/admin.php?page=wc-settings&tab=shipping';
+
+export function UpdateShipping() {
+	const baseUrl = getBaseAdminUrl();
+
+	return (
+		<MultiStepHeading
+			title={__('Update Shipping', 'goodbids')}
+			content={__(
+				'Click the button below to update your shipping settings. You can revisit these post-launch on the WooCommerce > Settings > Shipping page in the WordPress Admin.',
+				'goodbids',
+			)}
+		>
+			<div className="w-full max-w-60">
+				<ButtonLink
+					target="_blank"
+					variant="solid"
+					href={`${baseUrl}${WOOCOMMERCE_SHIPPING_URL}`}
+				>
+					{__('Update Shipping Settings', 'goodbids')}
+				</ButtonLink>
+			</div>
+		</MultiStepHeading>
+	);
+}

client-mu-plugins/goodbids/src/views/nonprofit-setup/components/card-heading.tsx

@@ -0,0 +1,30 @@
+import clsx from 'clsx';
+import { H1, P } from '../../../components/typography';
+
+type CardHeadingProps = {
+	title: string;
+	content: string;
+	children?: React.ReactNode;
+};
+
+export function CardHeading({ title, content, children }: CardHeadingProps) {
+	const containerClasses = clsx('flex items-center justify-between gap-4', {
+		'p-4': children,
+	});
+
+	const headingClasses = clsx('w-full flex flex-col gap-1', {
+		'max-w-120': children,
+		'p-4': !children,
+	});
+
+	return (
+		<div className={containerClasses}>
+			<div className={headingClasses}>
+				<H1>{title}</H1>
+				<P>{content}</P>
+			</div>
+
+			{children}
+		</div>
+	);
+}