-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Initial PoC of using the add-new-site component on /sites
- Loading branch information
Showing
4 changed files
with
186 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 22 additions & 0 deletions
22
client/components/add-new-site/content/site-list/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import AddNewSiteSiteListMenuItems from 'calypso/components/add-new-site/menu-items/site-list'; | ||
| import AddNewSitePopover from 'calypso/components/add-new-site/popover'; | ||
| import type { AddNewSiteContentProps } from 'calypso/components/add-new-site/types'; | ||
|
|
||
| const AddNewSiteSiteList = ( { | ||
| isMenuVisible, | ||
| popoverMenuContext, | ||
| setMenuVisible, | ||
| toggleMenu, | ||
| }: AddNewSiteContentProps ) => { | ||
| return ( | ||
| <AddNewSitePopover | ||
| isMenuVisible={ isMenuVisible } | ||
| toggleMenu={ toggleMenu } | ||
| popoverMenuContext={ popoverMenuContext } | ||
| > | ||
| <AddNewSiteSiteListMenuItems setMenuVisible={ setMenuVisible } /> | ||
| </AddNewSitePopover> | ||
| ); | ||
| }; | ||
|
|
||
| export default AddNewSiteSiteList; |
139 changes: 139 additions & 0 deletions
139
client/components/add-new-site/menu-items/site-list.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| import config from '@automattic/calypso-config'; | ||
| import { WordPressLogo, JetpackLogo } from '@automattic/components'; | ||
| import { download, reusableBlock, Icon } from '@wordpress/icons'; | ||
| import clsx from 'clsx'; | ||
| import { useTranslate } from 'i18n-calypso'; | ||
| import { useContext, useCallback } from 'react'; | ||
| import { A4A_MARKETPLACE_HOSTING_PRESSABLE_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants'; | ||
| import useFetchDevLicenses from 'calypso/a8c-for-agencies/data/purchases/use-fetch-dev-licenses'; | ||
| import usePressableOwnershipType from 'calypso/a8c-for-agencies/sections/marketplace/hosting-overview/hooks/use-pressable-ownership-type'; | ||
| import devSiteBanner from 'calypso/assets/images/a8c-for-agencies/dev-site-banner.svg'; | ||
| import pressableIcon from 'calypso/assets/images/pressable/pressable-icon.svg'; | ||
| import AddNewSiteContext from 'calypso/components/add-new-site/context'; | ||
| import AddNewSiteMenuItem from 'calypso/components/add-new-site/menu-item'; | ||
| import AddNewSitePopoverColumn from 'calypso/components/add-new-site/popover-column'; | ||
| import { preventWidows } from 'calypso/lib/formatting'; | ||
| import type { AddNewSiteMenuItemsProps } from 'calypso/components/add-new-site/types'; | ||
|
|
||
| const AddNewSiteSiteListMenuItems = ( { setMenuVisible }: AddNewSiteMenuItemsProps ) => { | ||
| const translate = useTranslate(); | ||
|
|
||
| const { setVisibleModalType } = useContext( AddNewSiteContext ); | ||
|
|
||
| const pressableOwnership = usePressableOwnershipType(); | ||
|
|
||
| const { data: devLicenses } = useFetchDevLicenses(); | ||
|
|
||
| const hasAvailableDevSites = devLicenses?.available > 0; | ||
|
|
||
| const devSitesEnabled = config.isEnabled( 'a4a-dev-sites' ); | ||
|
|
||
| const handleOnClick = useCallback( | ||
| ( modalType: string ) => { | ||
| setVisibleModalType( modalType ); | ||
| setMenuVisible( false ); | ||
| }, | ||
| [ setVisibleModalType, setMenuVisible ] | ||
| ); | ||
|
|
||
| return ( | ||
| <> | ||
| <AddNewSitePopoverColumn heading={ translate( 'Add a new site' ) }> | ||
| <AddNewSiteMenuItem | ||
| icon={ <WordPressLogo /> } | ||
| heading={ translate( 'WordPress.com' ) } | ||
| description={ preventWidows( | ||
| translate( 'Build and grow your site, all in one powerful platform.' ) | ||
| ) } | ||
| buttonProps={ { | ||
| onClick: () => { | ||
| // TODO | ||
| }, | ||
| } } | ||
| /> | ||
| <AddNewSiteMenuItem | ||
| icon={ <JetpackLogo /> } | ||
| heading={ translate( 'Via the Jetpack plugin' ) } | ||
| description={ preventWidows( | ||
| translate( 'Install the Jetpack plugin on an existing site' ) | ||
| ) } | ||
| buttonProps={ { | ||
| onClick: () => { | ||
| handleOnClick( 'jetpack-connection' ); | ||
| }, | ||
| } } | ||
| /> | ||
| <AddNewSiteMenuItem | ||
| icon={ <img src={ pressableIcon } alt="Pressable" /> } | ||
| heading="Pressable" | ||
| description={ translate( 'Bring your theme, plugins, and content to WordPress.com.' ) } | ||
| buttonProps={ { | ||
| href: | ||
| pressableOwnership === 'regular' | ||
| ? 'https://my.pressable.com/agency/auth' | ||
| : A4A_MARKETPLACE_HOSTING_PRESSABLE_LINK, | ||
| target: pressableOwnership === 'regular' ? '_blank' : undefined, | ||
| } } | ||
| /> | ||
| </AddNewSitePopoverColumn> | ||
| <AddNewSitePopoverColumn heading={ translate( 'Migrate & Import' ) }> | ||
| <AddNewSiteMenuItem | ||
| icon={ <Icon icon={ reusableBlock } size={ 18 } /> } | ||
| heading="Migrate" | ||
| description={ preventWidows( | ||
| translate( 'Bring your theme, plugins, and content to WordPress.com.' ) | ||
| ) } | ||
| buttonProps={ { | ||
| onClick: () => { | ||
| // TODO | ||
| }, | ||
| } } | ||
| /> | ||
| <AddNewSiteMenuItem | ||
| icon={ <Icon icon={ download } size={ 18 } /> } | ||
| heading="Import" | ||
| description={ preventWidows( | ||
| translate( 'Use a backup file to import your content into a new site.' ) | ||
| ) } | ||
| buttonProps={ { | ||
| onClick: () => { | ||
| // TODO | ||
| }, | ||
| } } | ||
| /> | ||
| </AddNewSitePopoverColumn> | ||
| { devSitesEnabled && ( | ||
| <AddNewSitePopoverColumn> | ||
| <AddNewSiteMenuItem | ||
| isBanner | ||
| icon={ <img src={ devSiteBanner } alt="Get a Free Domain and Up to 55% off" /> } | ||
| heading={ translate( 'Get a Free Domain and Up to 55% off' ) } | ||
| description={ preventWidows( | ||
| translate( | ||
| 'Save up to 55% on annual plans and get a free custom domain for a year. Your next site is just a step away.' | ||
| ) | ||
| ) } | ||
| disabled={ ! hasAvailableDevSites } | ||
| buttonProps={ { | ||
| onClick: () => { | ||
| // TODO | ||
| }, | ||
| } } | ||
| > | ||
| <div> | ||
| <div | ||
| className={ clsx( 'add-new-site-popover__cta', { | ||
| disabled: ! hasAvailableDevSites, | ||
| } ) } | ||
| > | ||
| { translate( 'Unlock Offer' ) } | ||
| </div> | ||
| </div> | ||
| </AddNewSiteMenuItem> | ||
| </AddNewSitePopoverColumn> | ||
| ) } | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default AddNewSiteSiteListMenuItems; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters