Merge pull request #1040 from bluehost/PRESS4-509

feature/Launchpad with view & add buttons - PRESS4 509
bluehost · Apr 22, 2024 · 24ad9da · 24ad9da
2 parents a55bce0 + ea2f4cd
commit 24ad9da
Show file tree

Hide file tree

Showing 9 changed files with 416 additions and 0 deletions.
diff --git a/composer.json b/composer.json
@@ -73,6 +73,7 @@
     "newfold-labs/wp-module-deactivation": "^1.1.1",
     "newfold-labs/wp-module-ecommerce": "^1.3.27",
     "newfold-labs/wp-module-global-ctb": "^1.0.11",
+    "newfold-labs/wp-module-facebook": "^1.0.3",
     "newfold-labs/wp-module-help-center": "^1.0.24",
     "newfold-labs/wp-module-loader": "^1.0.10",
     "newfold-labs/wp-module-marketplace": "^2.2.4",

diff --git a/inc/Admin.php b/inc/Admin.php
@@ -66,6 +66,9 @@ public static function subpages() {
 		$home        = array(
 			'bluehost#/home' => __( 'Home', 'wp-plugin-bluehost' ),
 		);
+		$pagesAndPosts        = array(
+			'bluehost#/pages&posts' => __( 'Pages & Posts', 'wp-plugin-bluehost' ),
+		);
 		$store       = array(
 			'bluehost#/store' => __( 'Store', 'wp-plugin-bluehost' ),
 		);
@@ -89,6 +92,7 @@ public static function subpages() {
 		if ( 'atomic' === getContext( 'platform' ) ) {
 			return array_merge(
 				$home,
+				$pagesAndPosts,
 				$store,
 				$marketplace,
 				$settings,
@@ -98,6 +102,7 @@ public static function subpages() {
 
 		return array_merge(
 			$home,
+			$pagesAndPosts,
 			$store,
 			$marketplace,
 			$performance,

diff --git a/src/app/data/routes.js b/src/app/data/routes.js
@@ -5,6 +5,7 @@ import {
 	BoltIcon,
 	AdjustmentsHorizontalIcon,
 	BuildingStorefrontIcon,
+	DocumentDuplicateIcon,
 } from '@heroicons/react/24/outline';
 import { NewfoldRuntime } from '@newfold-labs/wp-module-runtime';
 import { Route, Routes } from 'react-router-dom';
@@ -18,6 +19,7 @@ import Staging from '../pages/staging';
 import Help from '../pages/help';
 import { getMarketplaceSubnavRoutes } from '@modules/wp-module-marketplace/components/marketplaceSubnav';
 import { ReactComponent as HelpIcon } from '../components/icons/HelpIcon.svg';
+import PagesAndPosts from '../pages/pagesAndPosts';
 
 const addPartialMatch = ( prefix, path ) =>
 	prefix === path ? `${ prefix }/*` : path;
@@ -64,6 +66,7 @@ export const AppRoutes = () => {
 
 const topRoutePaths = [
 	'/home',
+	'/pages&posts',
 	'/store',
 	'/marketplace',
 	'/performance',
@@ -80,6 +83,13 @@ export const routes = [
 		Icon: HomeIcon,
 		condition: true,
 	},
+	{
+		name: '/pages&posts',
+		title: __( 'Pages & Posts', 'wp-plugin-bluehost' ),
+		Component: PagesAndPosts,
+		Icon: DocumentDuplicateIcon,
+		condition: true,
+	},
 	{
 		name: '/store',
 		title: __( 'Store', 'wp-plugin-bluehost' ),

diff --git a/src/app/pages/pagesAndPosts/ProductsPages.js b/src/app/pages/pagesAndPosts/ProductsPages.js
@@ -0,0 +1,49 @@
+import { Button, Card, Title } from '@newfold/ui-component-library';
+
+const ProductsPages = () => {
+	return (
+		<Card
+			className="hover:nfd-bg-[#FEFCEA] wppbh-app-products"
+			style={ {
+				borderRadius: 0,
+			} }
+		>
+			<Card.Content>
+				<svg
+					width="48"
+					height="48"
+					viewBox="0 0 48 48"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<rect width="48" height="48" rx="8" fill="#FEFCEA" />
+					<path
+						fillRule="evenodd"
+						clipRule="evenodd"
+						d="M17.9508 14.6899C17.8182 14.2827 17.437 14 17 14H15L14.8834 14.0067C14.386 14.0645 14 14.4872 14 15L14.0067 15.1166C14.0645 15.614 14.4872 16 15 16H16.18L16.4158 17.1781C16.4181 17.1909 16.4207 17.2037 16.4235 17.2163L17.9145 24.6713L15.9999 26.5859L15.8943 26.6993C15.0637 27.6584 15.3668 29.0487 16.3082 29.6739C16.1109 30.0738 16 30.5239 16 31C16 32.6569 17.3431 34 19 34C20.6569 34 22 32.6569 22 31C22 30.6494 21.9398 30.3128 21.8293 30H26.1707C26.0602 30.3128 26 30.6494 26 31C26 32.6569 27.3431 34 29 34C30.6569 34 32 32.6569 32 31C32 29.3431 30.6569 28 29 28L19.0237 28.0001C19.0158 28 19.0079 28 19 28C18.9921 28 18.9841 28 18.9762 28.0001L17.4141 28.0001L19.4142 26H29L29.1249 25.9922C29.4535 25.9509 29.7439 25.7484 29.8944 25.4472L33.8944 17.4472L33.9402 17.3414C34.1753 16.7021 33.7043 16 33 16H18.2198L17.9806 14.8039L17.9508 14.6899ZM19 30C18.4477 30 18 30.4477 18 31C18 31.5523 18.4477 32 19 32C19.5523 32 20 31.5523 20 31C20 30.4477 19.5523 30 19 30ZM28 31C28 30.4477 28.4477 30 29 30C29.5523 30 30 30.4477 30 31C30 31.5523 29.5523 32 29 32C28.4477 32 28 31.5523 28 31ZM19.8198 24L18.6198 18H31.381L28.381 24H19.8198Z"
+						fill="#986423"
+					/>
+				</svg>
+				<Title size="4" className="nfd-leading-normal nfd-my-4">
+					{ __( 'Products', 'wp-plugin-bluehost' ) }
+				</Title>
+				<p>
+					{ __(
+						'Showcase physical and digital goods, product variations, and custom configurations.',
+						'wp-plugin-bluehost'
+					) }
+				</p>
+			</Card.Content>
+			<div className="nfd-flex nfd-justify-end nfd-gap-6 nfd-items-center">
+				<a href="edit.php?post_type=product">
+					{ __( 'View all', 'wp-plugin-bluehost' ) }
+				</a>
+				<a href="post-new.php?post_type=product">
+					<Button>{ __( 'Add New', 'wp-plugin-bluehost' ) }</Button>
+				</a>
+			</div>
+		</Card>
+	);
+};
+
+export default ProductsPages;
diff --git a/src/app/pages/pagesAndPosts/blogPosts.js b/src/app/pages/pagesAndPosts/blogPosts.js
@@ -0,0 +1,49 @@
+import { Button, Card, Title } from '@newfold/ui-component-library';
+
+const BlogPosts = () => {
+	return (
+		<Card
+			className="hover:nfd-bg-[#F9F5FE] wppbh-app-blog-posts"
+			style={ {
+				borderRadius: 0,
+			} }
+		>
+			<Card.Content>
+				<svg
+					width="48"
+					height="48"
+					viewBox="0 0 48 48"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<rect width="48" height="48" rx="8" fill="#F9F5FE" />
+					<path
+						fillRule="evenodd"
+						clipRule="evenodd"
+						d="M17 15H31C32.6569 15 34 16.3431 34 18V26C34 27.6569 32.6569 29 31 29H26.414L21.7071 33.7071C21.1045 34.3097 20.0928 33.9277 20.006 33.1136L20 33V29H17C15.4023 29 14.0963 27.7511 14.0051 26.1763L14 26V18C14 16.3431 15.3431 15 17 15ZM31 17H17C16.4477 17 16 17.4477 16 18V26C16 26.5523 16.4477 27 17 27H21C21.5523 27 22 27.4477 22 28V30.584L25.2929 27.2929C25.4492 27.1366 25.6519 27.0374 25.8686 27.0087L26 27H31C31.5523 27 32 26.5523 32 26V18C32 17.4477 31.5523 17 31 17Z"
+						fill="#7D3CCA"
+					/>
+				</svg>
+				<Title size="4" className="nfd-leading-normal nfd-my-4">
+					{ __( 'Blog Posts', 'wp-plugin-bluehost' ) }
+				</Title>
+				<p>
+					{ __(
+						'Add a new blog post or edit your existing posts.',
+						'wp-plugin-bluehost'
+					) }
+				</p>
+			</Card.Content>
+			<div className="nfd-flex nfd-justify-end nfd-gap-6 nfd-items-center">
+				<a href="edit.php">
+					{ __( 'View all', 'wp-plugin-bluehost' ) }
+				</a>
+				<a href="post-new.php">
+					<Button>{ __( 'Add New', 'wp-plugin-bluehost' ) }</Button>
+				</a>
+			</div>
+		</Card>
+	);
+};
+
+export default BlogPosts;
diff --git a/src/app/pages/pagesAndPosts/bookingAndAppointments.js b/src/app/pages/pagesAndPosts/bookingAndAppointments.js
@@ -0,0 +1,49 @@
+import { Button, Card, Title } from '@newfold/ui-component-library';
+
+const BookingAndAppointments = () => {
+	return (
+		<Card
+			className="hover:nfd-bg-[#F2F9FE] wppbh-app-bookings"
+			style={ {
+				borderRadius: 0,
+			} }
+		>
+			<Card.Content>
+				<svg
+					width="48"
+					height="48"
+					viewBox="0 0 48 48"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<rect width="48" height="48" rx="8" fill="#F2F9FE" />
+					<path
+						fillRule="evenodd"
+						clipRule="evenodd"
+						d="M20.9933 14.8834C20.9355 14.386 20.5128 14 20 14C19.4477 14 19 14.4477 19 15V16H17C15.3431 16 14 17.3431 14 19V31C14 32.6569 15.3431 34 17 34H31C32.6569 34 34 32.6569 34 31V19C34 17.3431 32.6569 16 31 16H29V15L28.9933 14.8834C28.9355 14.386 28.5128 14 28 14C27.4477 14 27 14.4477 27 15V16H21V15L20.9933 14.8834ZM19 18V19L19.0067 19.1166C19.0645 19.614 19.4872 20 20 20C20.5523 20 21 19.5523 21 19V18H27V19L27.0067 19.1166C27.0645 19.614 27.4872 20 28 20C28.5523 20 29 19.5523 29 19V18H31C31.5523 18 32 18.4477 32 19V31C32 31.5523 31.5523 32 31 32H17C16.4477 32 16 31.5523 16 31V19C16 18.4477 16.4477 18 17 18H19ZM29 22C29.5523 22 30 22.4477 30 23C30 23.5128 29.614 23.9355 29.1166 23.9933L29 24H19C18.4477 24 18 23.5523 18 23C18 22.4872 18.386 22.0645 18.8834 22.0067L19 22H29Z"
+						fill="#2D689C"
+					/>
+				</svg>
+				<Title size="4" className="nfd-leading-normal nfd-my-4">
+					{ __( 'Bookings & Appointments', 'wp-plugin-bluehost' ) }
+				</Title>
+				<p>
+					{ __(
+						'Add your list of services, setup a booking calendar, and edit your bookings form.',
+						'wp-plugin-bluehost'
+					) }
+				</p>
+			</Card.Content>
+			<div className="nfd-flex nfd-justify-end nfd-gap-6 nfd-items-center">
+				<a href="edit.php?post_type=yith_booking&yith-plugin-fw-panel-skip-redirect=1">
+					{ __( 'View all', 'wp-plugin-bluehost' ) }
+				</a>
+				<a href="edit.php?post_type=yith_booking&yith-plugin-fw-panel-skip-redirect=1">
+					<Button>{ __( 'Add New', 'wp-plugin-bluehost' ) }</Button>
+				</a>
+			</div>
+		</Card>
+	);
+};
+
+export default BookingAndAppointments;
diff --git a/src/app/pages/pagesAndPosts/index.js b/src/app/pages/pagesAndPosts/index.js
@@ -0,0 +1,89 @@
+import { Alert, Container, Page } from '@newfold/ui-component-library';
+import { useContext } from '@wordpress/element';
+
+import SitePages from './sitePages';
+import BlogPosts from './blogPosts';
+import BookingAndAppointments from './bookingAndAppointments';
+import ProductsPages from './ProductsPages';
+import AppStore from '../../data/store';
+
+const PagesAndPosts = () => {
+	const { store } = useContext( AppStore );
+	return (
+		<Page
+			title="Pages & Posts"
+			className={ 'wppbh-app-pagesAndPosts-page' }
+		>
+			<Container>
+				<Container.Header
+					title={ __( 'Pages & Posts', 'wp-plugin-bluehost' ) }
+					description={
+						store?.comingSoon ? (
+							<Alert
+								variant="warning"
+								className="nfd-text-sm nfd-bg-transparent nfd-p-0 "
+							>
+								<span className="nfd-text-red-700">
+									{ __(
+										'Your site is not live.',
+										'wp-plugin-bluehost'
+									) }
+								</span>
+							</Alert>
+						) : (
+							<Alert
+								variant="success"
+								className="nfd-text-sm nfd-bg-transparent nfd-p-0 "
+							>
+								<span className="nfd-font-semibold nfd-text-black">
+									{ __(
+										'Your site is live.',
+										'wp-plugin-bluehost'
+									) }
+								</span>
+							</Alert>
+						)
+					}
+					className={ 'wppbh-app-settings-header' }
+				>
+					{ store?.comingSoon ? (
+						<p>
+							{ __(
+								'Visitors to your site will see your "Coming Soon" page and not your actual site. Visit',
+								'wp-plugin-bluehost'
+							) }{ ' ' }
+							<a href="#/settings">
+								{ __( '"Settings"', 'wp-plugin-bluehost' ) }
+							</a>{ ' ' }
+							{ __(
+								'to set your site live.',
+								'wp-plugin-bluehost'
+							) }
+						</p>
+					) : (
+						<p>
+							{ __(
+								'Visitors to your site will see all your publicly published pages.',
+								'wp-plugin-bluehost'
+							) }
+						</p>
+					) }
+				</Container.Header>
+
+				<div className="nfd-grid md:nfd-grid-cols-2 nfd-gap-0 sm:nfd-grid-cols-1">
+					<SitePages />
+					<BlogPosts />
+					{ window.NewfoldRuntime.isYithBookingActive &&
+						window.NewfoldRuntime.isWoocommerceActive && (
+							<BookingAndAppointments />
+						) }
+					{ window.NewfoldRuntime.isWoocommerceActive && (
+						<ProductsPages />
+					) }
+				</div>
+			</Container>
+		</Page>
+	);
+};
+
+export default PagesAndPosts;
diff --git a/src/app/pages/pagesAndPosts/sitePages.js b/src/app/pages/pagesAndPosts/sitePages.js
@@ -0,0 +1,51 @@
+import { Button, Card, Title } from '@newfold/ui-component-library';
+
+const SitePages = () => {
+	return (
+		<Card
+			className="hover:nfd-bg-[#F2FDFA] wppbh-app-site-page"
+			style={ {
+				borderRadius: 0,
+			} }
+		>
+			<Card.Content>
+				<svg
+					width="48"
+					height="48"
+					viewBox="0 0 48 48"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<rect width="48" height="48" rx="8" fill="#F2FDFA" />
+					<path
+						fillRule="evenodd"
+						clipRule="evenodd"
+						d="M24.586 14H19C17.3431 14 16 15.3431 16 17V31C16 32.6569 17.3431 34 19 34H29C30.6569 34 32 32.6569 32 31V21.414C32 20.8835 31.7891 20.3748 31.414 19.9998L26.0001 14.5859C25.6252 14.2109 25.1165 14 24.586 14ZM19 16H24.586L30 21.414V31C30 31.5523 29.5523 32 29 32H19C18.4477 32 18 31.5523 18 31V17C18 16.4477 18.4477 16 19 16ZM27 23C27.5523 23 28 23.4477 28 24C28 24.5128 27.614 24.9355 27.1166 24.9933L27 25H21C20.4477 25 20 24.5523 20 24C20 23.4872 20.386 23.0645 20.8834 23.0067L21 23H27ZM27 27C27.5523 27 28 27.4477 28 28C28 28.5128 27.614 28.9355 27.1166 28.9933L27 29H21C20.4477 29 20 28.5523 20 28C20 27.4872 20.386 27.0645 20.8834 27.0067L21 27H27Z"
+						fill="#417C77"
+					/>
+				</svg>
+				<Title size="4" className="nfd-leading-normal nfd-my-4">
+					{ __( 'Site Pages', 'wp-plugin-bluehost' ) }
+				</Title>
+				<p>
+					{ __(
+						'Edit your homepage and other existing pages or add new pages to your site.',
+						'wp-plugin-bluehost'
+					) }
+				</p>
+			</Card.Content>
+			<div className="nfd-flex nfd-justify-end nfd-gap-6 nfd-items-center">
+				<a href="edit.php?post_type=page">
+					{ __( 'View all', 'wp-plugin-bluehost' ) }
+				</a>
+				<a href="post-new.php?post_type=page">
+					<Button onClick>
+						{ __( 'Add New', 'wp-plugin-bluehost' ) }
+					</Button>
+				</a>
+			</div>
+		</Card>
+	);
+};
+
+export default SitePages;