From 52b117cfec3e9b0ddb95d44524204eccecb2adc8 Mon Sep 17 00:00:00 2001 From: Nick Date: Thu, 29 Feb 2024 15:56:21 -0500 Subject: [PATCH] [#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 --- .../goodbids/src/classes/Nonprofits/Setup.php | 24 +++++++ .../goodbids/src/components/button-link.tsx | 4 +- .../goodbids/src/components/link.tsx | 8 +++ .../goodbids/src/components/typography.tsx | 40 +++++++++++ .../goodbids/src/utils/get-base-url.ts | 10 +++ .../src/views/auction-wizard/finish/index.tsx | 14 ++-- .../complete-set-up/activate-extensions.tsx | 55 ++++++++++++++ .../complete-set-up/advanced.tsx | 28 ++++++++ .../complete-set-up/finalize-details.tsx | 30 ++++++++ .../nonprofit-setup/complete-set-up/index.tsx | 50 +++++++++++++ .../complete-set-up/set-up-payments.tsx | 31 ++++++++ .../complete-set-up/update-shipping.tsx | 31 ++++++++ .../components/card-heading.tsx | 30 ++++++++ .../views/nonprofit-setup/components/card.tsx | 11 +++ .../components/multi-step-expansion.tsx | 28 ++++++++ .../components/multi-step-heading.tsx | 24 +++++++ .../nonprofit-setup/components/multi-step.tsx | 71 +++++++++++++++++++ .../customize-design-and-content/advanced.tsx | 28 ++++++++ .../customize-design-and-content/index.tsx | 46 ++++++++++++ .../review-homepage.tsx | 31 ++++++++ .../update-style.tsx | 30 ++++++++ .../upload-site-logo.tsx | 31 ++++++++ .../src/views/nonprofit-setup/driver.tsx | 21 ++++++ .../src/views/nonprofit-setup/index.tsx | 3 +- .../views/nonprofit-setup/invite-admins.tsx | 33 +++++++++ .../src/views/nonprofit-setup/launch-site.tsx | 34 +++++++++ .../views/nonprofit-setup/plan-an-auction.tsx | 34 +++++++++ client-mu-plugins/goodbids/tailwind.config.js | 3 + 28 files changed, 774 insertions(+), 9 deletions(-) create mode 100644 client-mu-plugins/goodbids/src/components/link.tsx create mode 100644 client-mu-plugins/goodbids/src/components/typography.tsx create mode 100644 client-mu-plugins/goodbids/src/utils/get-base-url.ts create mode 100644 client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/activate-extensions.tsx create mode 100644 client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/advanced.tsx create mode 100644 client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/finalize-details.tsx create mode 100644 client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/index.tsx create mode 100644 client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/set-up-payments.tsx create mode 100644 client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/update-shipping.tsx create mode 100644 client-mu-plugins/goodbids/src/views/nonprofit-setup/components/card-heading.tsx create mode 100644 client-mu-plugins/goodbids/src/views/nonprofit-setup/components/card.tsx create mode 100644 client-mu-plugins/goodbids/src/views/nonprofit-setup/components/multi-step-expansion.tsx create mode 100644 client-mu-plugins/goodbids/src/views/nonprofit-setup/components/multi-step-heading.tsx create mode 100644 client-mu-plugins/goodbids/src/views/nonprofit-setup/components/multi-step.tsx create mode 100644 client-mu-plugins/goodbids/src/views/nonprofit-setup/customize-design-and-content/advanced.tsx create mode 100644 client-mu-plugins/goodbids/src/views/nonprofit-setup/customize-design-and-content/index.tsx create mode 100644 client-mu-plugins/goodbids/src/views/nonprofit-setup/customize-design-and-content/review-homepage.tsx create mode 100644 client-mu-plugins/goodbids/src/views/nonprofit-setup/customize-design-and-content/update-style.tsx create mode 100644 client-mu-plugins/goodbids/src/views/nonprofit-setup/customize-design-and-content/upload-site-logo.tsx create mode 100644 client-mu-plugins/goodbids/src/views/nonprofit-setup/driver.tsx create mode 100644 client-mu-plugins/goodbids/src/views/nonprofit-setup/invite-admins.tsx create mode 100644 client-mu-plugins/goodbids/src/views/nonprofit-setup/launch-site.tsx create mode 100644 client-mu-plugins/goodbids/src/views/nonprofit-setup/plan-an-auction.tsx diff --git a/client-mu-plugins/goodbids/src/classes/Nonprofits/Setup.php b/client-mu-plugins/goodbids/src/classes/Nonprofits/Setup.php index d892e65be..52b3ae314 100644 --- a/client-mu-plugins/goodbids/src/classes/Nonprofits/Setup.php +++ b/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' ); + } + ); + } } diff --git a/client-mu-plugins/goodbids/src/components/button-link.tsx b/client-mu-plugins/goodbids/src/components/button-link.tsx index 2b8870999..4714b9743 100644 --- a/client-mu-plugins/goodbids/src/components/button-link.tsx +++ b/client-mu-plugins/goodbids/src/components/button-link.tsx @@ -6,9 +6,9 @@ type ButtonProps = React.AnchorHTMLAttributes & { 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', diff --git a/client-mu-plugins/goodbids/src/components/link.tsx b/client-mu-plugins/goodbids/src/components/link.tsx new file mode 100644 index 000000000..218c16707 --- /dev/null +++ b/client-mu-plugins/goodbids/src/components/link.tsx @@ -0,0 +1,8 @@ +type LinkProps = Omit< + React.AnchorHTMLAttributes, + 'className' +>; + +export function Link(props: LinkProps) { + return ; +} diff --git a/client-mu-plugins/goodbids/src/components/typography.tsx b/client-mu-plugins/goodbids/src/components/typography.tsx new file mode 100644 index 000000000..2343f9a2c --- /dev/null +++ b/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 ( + + {children} + + ); +}; + +export const H2 = ({ as = 'h2', children }: TypographyProps) => { + const Component = as; + + return ( + + {children} + + ); +}; + +export const H3 = ({ as = 'h3', children }: TypographyProps) => { + const Component = as; + + return ( + + {children} + + ); +}; + +export const P = ({ as = 'p', children }: TypographyProps) => { + const Component = as; + + return {children}; +}; diff --git a/client-mu-plugins/goodbids/src/utils/get-base-url.ts b/client-mu-plugins/goodbids/src/utils/get-base-url.ts new file mode 100644 index 000000000..8ae96be36 --- /dev/null +++ b/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, ''); +} diff --git a/client-mu-plugins/goodbids/src/views/auction-wizard/finish/index.tsx b/client-mu-plugins/goodbids/src/views/auction-wizard/finish/index.tsx index bbc6adbe5..220d159fc 100644 --- a/client-mu-plugins/goodbids/src/views/auction-wizard/finish/index.tsx +++ b/client-mu-plugins/goodbids/src/views/auction-wizard/finish/index.tsx @@ -24,12 +24,14 @@ export function FinishScreen() {

- - {__('Customize Auction page', 'goodbids')} - +
+ + {__('Customize Auction page', 'goodbids')} + +
); } diff --git a/client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/activate-extensions.tsx b/client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/activate-extensions.tsx new file mode 100644 index 000000000..ae1597242 --- /dev/null +++ b/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 ( + <> + + + + Connect Jetpack + + ), + }, + { + title: __('Woo Shipping and Tax', 'goodbids'), + content: __( + 'Woo Shipping and Tax is a plugin that provides shipping and tax calculation tools.', + 'goodbids', + ), + component: ( + + Install Woo Shipping and Tax + + ), + }, + ]} + /> + + ); +} diff --git a/client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/advanced.tsx b/client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/advanced.tsx new file mode 100644 index 000000000..fd202c96b --- /dev/null +++ b/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 ( + +
+ + {__('Advanced', 'goodbids')} + +
+ + ); +} diff --git a/client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/finalize-details.tsx b/client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/finalize-details.tsx new file mode 100644 index 000000000..6cd096ad3 --- /dev/null +++ b/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 ( + General page in the WordPress Admin.', + 'goodbids', + )} + > +
+ + {__('Update Site Settings', 'goodbids')} + +
+ + ); +} diff --git a/client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/index.tsx b/client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/index.tsx new file mode 100644 index 000000000..196432c5b --- /dev/null +++ b/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 ( + + + + , + }, + 'set-up-payments': { + label: __('2 Set Up Payments', 'goodbids'), + component: , + }, + 'update-shipping': { + label: __('3 Update Shipping', 'goodbids'), + component: , + }, + 'activate-extensions': { + label: __('4 Activate Extensions', 'goodbids'), + component: , + }, + advanced: { + label: __('Advanced', 'goodbids'), + component: , + fade: true, + }, + }} + /> + + ); +} diff --git a/client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/set-up-payments.tsx b/client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/set-up-payments.tsx new file mode 100644 index 000000000..c21ffbed9 --- /dev/null +++ b/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 ( + Settings > Payments page in the WordPress Admin.', + 'goodbids', + )} + > +
+ + {__('Set Up Payments', 'goodbids')} + +
+ + ); +} diff --git a/client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/update-shipping.tsx b/client-mu-plugins/goodbids/src/views/nonprofit-setup/complete-set-up/update-shipping.tsx new file mode 100644 index 000000000..05d284ef5 --- /dev/null +++ b/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 ( + Settings > Shipping page in the WordPress Admin.', + 'goodbids', + )} + > +
+ + {__('Update Shipping Settings', 'goodbids')} + +
+ + ); +} diff --git a/client-mu-plugins/goodbids/src/views/nonprofit-setup/components/card-heading.tsx b/client-mu-plugins/goodbids/src/views/nonprofit-setup/components/card-heading.tsx new file mode 100644 index 000000000..28a845d64 --- /dev/null +++ b/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 ( +
+
+

{title}

+

{content}

+
+ + {children} +
+ ); +} diff --git a/client-mu-plugins/goodbids/src/views/nonprofit-setup/components/card.tsx b/client-mu-plugins/goodbids/src/views/nonprofit-setup/components/card.tsx new file mode 100644 index 000000000..0d49248cb --- /dev/null +++ b/client-mu-plugins/goodbids/src/views/nonprofit-setup/components/card.tsx @@ -0,0 +1,11 @@ +type CardProps = { + children: React.ReactNode; +}; + +export function Card({ children }: CardProps) { + return ( +
+ {children} +
+ ); +} diff --git a/client-mu-plugins/goodbids/src/views/nonprofit-setup/components/multi-step-expansion.tsx b/client-mu-plugins/goodbids/src/views/nonprofit-setup/components/multi-step-expansion.tsx new file mode 100644 index 000000000..fd0f98e6e --- /dev/null +++ b/client-mu-plugins/goodbids/src/views/nonprofit-setup/components/multi-step-expansion.tsx @@ -0,0 +1,28 @@ +import { H3, P } from '../../../components/typography'; + +type MultiStepExpansionItemType = { + title: string; + content: string; + component: React.ReactNode; +}; + +type MultiStepExpansionProps = { + items: MultiStepExpansionItemType[]; +}; + +export function MultiStepExpansion({ items }: MultiStepExpansionProps) { + return ( +
+ {items.map(({ title, content, component }) => ( +
+

{title}

+

{content}

+ {component} +
+ ))} +
+ ); +} diff --git a/client-mu-plugins/goodbids/src/views/nonprofit-setup/components/multi-step-heading.tsx b/client-mu-plugins/goodbids/src/views/nonprofit-setup/components/multi-step-heading.tsx new file mode 100644 index 000000000..c31b6a751 --- /dev/null +++ b/client-mu-plugins/goodbids/src/views/nonprofit-setup/components/multi-step-heading.tsx @@ -0,0 +1,24 @@ +import { H2, P } from '../../../components/typography'; + +type MultiStepHeadingProps = { + title: string; + content: string; + children?: React.ReactNode; +}; + +export function MultiStepHeading({ + title, + content, + children, +}: MultiStepHeadingProps) { + return ( +
+
+

{title}

+

{content}

+
+ + {children} +
+ ); +} diff --git a/client-mu-plugins/goodbids/src/views/nonprofit-setup/components/multi-step.tsx b/client-mu-plugins/goodbids/src/views/nonprofit-setup/components/multi-step.tsx new file mode 100644 index 000000000..a3cdedd4c --- /dev/null +++ b/client-mu-plugins/goodbids/src/views/nonprofit-setup/components/multi-step.tsx @@ -0,0 +1,71 @@ +import clsx from 'clsx'; +import { useState } from 'react'; + +type StepType = { + label: string; + component: React.ReactNode; + fade?: boolean; +}; + +type MultiStepProps = { + defaultStep: string; + steps: Record; +}; + +export function MultiStep({ defaultStep, steps }: MultiStepProps) { + const [step, setStep] = useState(defaultStep); + + return ( +
+
+ {Object.entries(steps).map(([key, value]) => ( + + ))} +
+ + {steps[step].component} +
+ ); +} + +type ButtonProps = Exclude< + React.ButtonHTMLAttributes, + 'className' +> & { + active: boolean; + fade?: boolean; +}; + +function Button(props: ButtonProps) { + const { active, fade = false, ...rest } = props; + + const classes = clsx( + 'px-4 py-2 text-admin-large border-none text-left hover:bg-admin-secondary hover:text-white focus:text-white transition-all ', + { + 'bg-admin-main text-white': active, + 'bg-transparent text-admin-main': !active && !fade, + 'bg-transparent text-black/50': !active && fade, + }, + ); + + return