Merge pull request #213 from moderntribe/feature/SITE-288/google-anal…

…ytics-card

Setting up Site Settings screen and Google Analytics card

packages/sitedetails/package.json → packages/site-settings/package.json

@@ -1,7 +1,7 @@
 {
-	"name": "@moderntribe/sitedetails",
+	"name": "@moderntribe/site-settings",
 	"version": "1.0.0",
-	"description": "Sitedetails foundation",
+	"description": "Site settings foundation",
 	"source": "src/index.tsx",
 	"main": "dist/umd/index.js",
 	"module": "dist/esm/index.js",

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

@@ -45,18 +45,19 @@ declare module '*.svg' {
 
 declare global {
 	interface Window {
-		site_details: any;
+		site_settings: any;
 		wp: any;
 		wpApiSettings: any;
 	}
 
 	interface SetupCardAccordionInterface {
 		id: string;
-		header: string;
-		subHeader?: string;
-		chipBackground?: ChipProps['color'];
-		chipText?: string;
-		expanded?: boolean;
+		title: string;
+		intro?: string;
+		completed: boolean;
+		navTitle: string;
+		rows: (SetupCardRowInterface | SetupCardRowGoLIveInterface)[];
+		footer?: SetupCardFooter;
 	}
 
 	interface PasswordStrengthType {

packages/sitedetails/src/SiteDetails.tsx → packages/site-settings/src/SiteSettings.tsx

@@ -5,10 +5,10 @@ import { HashRouter, Routes, Route } from 'react-router-dom';
 import Loadable from '@site/components/Loadable';
 
 const SetupScreen = Loadable(lazy(() => import('@site/setup/SetupScreen')));
-const storeBuilderTheme = createTheme(WME_THEME);
+const siteSettingsTheme = createTheme(WME_THEME);
 
-const SiteDetails = () => (
-	<ThemeProvider theme={ storeBuilderTheme }>
+const SiteSettings = () => (
+	<ThemeProvider theme={ siteSettingsTheme }>
 		<HashRouter>
 			<Routes>
 				<Route path="/" element={ <SetupScreen fullscreen={ true } /> } />
@@ -17,4 +17,4 @@ const SiteDetails = () => (
 	</ThemeProvider>
 );
 
-export default SiteDetails;
+export default SiteSettings;

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

@@ -0,0 +1,7 @@
+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 || [];

packages/site-settings/src/index.tsx

@@ -0,0 +1,3 @@
+import SiteSettings from './SiteSettings';
+export default SiteSettings;
+

packages/sitedetails/src/setup/SetupCards.tsx → packages/site-settings/src/setup/SetupCards.tsx

@@ -5,14 +5,7 @@ import { SetupCardAccordion } from '@moderntribe/wme-ui';
 
 const Container = styled(Box)<BoxProps>(({ theme }) => ({
 	maxWidth: theme.spacing(100),
-	margin: `${ theme.spacing(3) } auto`,
-}));
-
-const CardAccordionWrapper = styled(SetupCardAccordion)(({ theme }) => ({
-	'& .MuiChip-colorError.MuiChip-filledError': {
-		backgroundColor: theme.palette.error.main,
-		color: theme.palette.error.contrastText,
-	}
+	margin: `${ theme.spacing(5) } auto`,
 }));
 
 const SetupCards = () => {
@@ -21,21 +14,18 @@ const SetupCards = () => {
 			{
 				CARDS.map((card: SetupCardAccordionInterface) => {
 					return (
-						<CardAccordionWrapper
+						<SetupCardAccordion
 							key={ card.id }
 							id={ card.id }
-							header={ card.header }
-							subHeader={ card.subHeader }
-							chipBackground={ card.chipBackground }
-							chipText={ card.chipText }
-							defaultExpanded
+							header={ card.title }
+							subHeader={ card.intro }
 						>
 							{
 								((card.id === 'site-visibility') && <SiteVisibility />) ||
 								((card.id === 'google-analytics') && <GoogleAnalytics />) ||
 								<></>
 							}
-						</CardAccordionWrapper>
+						</SetupCardAccordion>
 					);
 				})
 			}

packages/site-settings/src/setup/SetupScreen.tsx

@@ -0,0 +1,16 @@
+import { Box, Typography } from '@mui/material';
+import { SetupCards } from '@site/setup';
+import { __ } from '@wordpress/i18n';
+
+const SetupScreen = () => {
+	return (
+		<Box pt={ 4 } pl={ '12px' } pr={ 4 }>
+			<Typography variant="h3" textAlign="center">
+				{ __('Site Settings', 'moderntribe-sitebuilder') }
+			</Typography>
+			<SetupCards />
+		</Box>
+	);
+};
+
+export default SetupScreen;

packages/sitedetails/src/setup/cards/GoogleAnalytics.tsx → packages/site-settings/src/setup/cards/GoogleAnalytics.tsx

@@ -31,7 +31,12 @@ const GoogleAnalytics = () => {
 						<>
 							{ __('Google Analytics Code', 'moderntribe-sitebuilder') }
 							{ ' ' }
-							<Link href="/">{ __('(How do I set this up?)', 'moderntribe-sitebuilder') }</Link>
+							<Link
+								href="/"
+								target="_blank"
+								rel="noopener">
+								{ __('(How do I set this up?)', 'moderntribe-sitebuilder') }
+							</Link>
 						</>
 					}
 					field={
@@ -47,7 +52,7 @@ const GoogleAnalytics = () => {
 				/>
 				<Button
 					variant="contained"
-					color="secondary">
+					color="primary">
 					{ __('Save', 'moderntribe-sitebuilder') }
 				</Button>
 			</Form>

packages/sitedetails/tsconfig.json → packages/site-settings/tsconfig.json

@@ -108,7 +108,7 @@
 	},
 	"include": [
 		"src/**/*",
-		"sitedetails.d.ts"
+		"site-settings.d.ts"
 	],
 	"exclude": [
 		"build",

plugins/wme-sitebuilder/assets/js/site-settings.js

@@ -0,0 +1,9 @@
+/**
+ * Scripting for the SiteBuilder React App
+ */
+import SiteSettings from '@moderntribe/site-settings';
+
+wp.element.render(
+	wp.element.createElement(SiteSettings),
+	document.getElementById('site-settings-react'),
+);

plugins/wme-sitebuilder/package.json

@@ -45,6 +45,7 @@
 		"@emotion/styled": "^11.10.5",
 		"@moderntribe/sitebuilder": "workspace:*",
 		"@moderntribe/storebuilder": "workspace:*",
+		"@moderntribe/site-settings": "workspace:*",
 		"@mui/icons-material": "^5.11.0",
 		"@mui/lab": "5.0.0-alpha.112",
 		"@mui/material": "^5.11.3",

plugins/wme-sitebuilder/webpack.mix.js

@@ -48,6 +48,7 @@ mix.webpackConfig({
 // Bundle JavaScript.
 mix.js('assets/js/sitebuilder.js', '/')
 	.js('assets/js/store-details.js', '/')
+	.js('assets/js/site-settings.js', '/')
 	.sourceMaps(false)
 	.eslint()
 	.react();
@@ -73,3 +74,4 @@ const copyAssets = (source, target) => {
 // Copy assets from packages.
 copyAssets('sitebuilder', 'sitebuilder');
 copyAssets('storebuilder', 'store-details');
+copyAssets('site-settings', 'site-settings');

plugins/wme-sitebuilder/wme-sitebuilder.php

@@ -47,6 +47,7 @@
 	$wme_sitebuilder->registerModules([
 		Modules\SiteBuilder::class,
 		Modules\StoreDetails::class,
+		Modules\SiteSettings::class,
 	]);
 
 	$wme_sitebuilder->init();

plugins/wme-sitebuilder/wme-sitebuilder/Cards/GoogleAnalytics.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace Tribe\WME\Sitebuilder\Cards;
+
+class GoogleAnalytics extends Card {
+
+	/**
+	 * @var string
+	 */
+	protected $admin_page_slug = 'site-settings';
+
+	/**
+	 * @var string
+	 */
+	protected $card_slug = 'google-analytics';
+
+
+	/**
+	 * Construct.
+	 *
+	 */
+	public function __construct() {
+		parent::__construct();
+	}
+
+	/**
+	 * Get properties.
+	 *
+	 * @return array
+	 */
+	public function props() {
+		$details = [
+			'id'        => 'google-analytics',
+			'navTitle'     => __( 'Google Analytics', 'wme-sitebuilder' ),
+			'title'     => __( 'Google Analytics', 'wme-sitebuilder' ),
+			'intro'     => __( 'Google Analytics enables you to track the visitors to your site and generate reports.', 'wme-sitebuilder' ),
+		];
+
+		return $details;
+	}
+}

plugins/wme-sitebuilder/wme-sitebuilder/Container.php

@@ -43,14 +43,17 @@ public function config() {
 					$app->make( Wizards\FirstTimeConfiguration::class )
 				);
 			},
-			Cards\GoLive::class                   => static function ( $app ) {
+			Cards\GoLive::class => static function ($app) {
 				return new Cards\GoLive(
-					$app->make( Wizards\GoLive::class )
+					$app->make(Wizards\GoLive::class)
 				);
 			},
-			Cards\LookAndFeel::class              => static function ( $app ) {
+			Cards\GoogleAnalytics::class => static function () {
+				return new Cards\GoogleAnalytics();
+			},
+			Cards\LookAndFeel::class => static function ($app) {
 				return new Cards\LookAndFeel(
-					$app->make( Wizards\LookAndFeel::class )
+					$app->make(Wizards\LookAndFeel::class)
 				);
 			},
 			Cards\ManageProducts::class           => null,
@@ -86,12 +89,20 @@ public function config() {
 				);
 			},
 
-			Modules\SiteBuilder::class            => static function ( $app ) {
+			Modules\SiteBuilder::class => static function ($app) {
 				return new Modules\SiteBuilder(
 					[
-						$app->make( Cards\FirstTimeConfiguration::class ),
-						$app->make( Cards\LookAndFeel::class ),
-						$app->make( Cards\GoLive::class ),
+						$app->make(Cards\FirstTimeConfiguration::class),
+						$app->make(Cards\LookAndFeel::class),
+						$app->make(Cards\GoLive::class),
+					]
+				);
+			},
+
+			Modules\SiteSettings::class => static function ($app) {
+				return new Modules\SiteSettings(
+					[
+						$app->make(Cards\GoogleAnalytics::class),
 					]
 				);
 			},