chore: various small changes

- Rename Slider to Image Slider - Remove notice from Countdown Block - Change upsell notice color to Gray - Remove Upsell from Form sidebar - Add Pro label to Form Submission menu item - Remove Export button from Form Submission page for in free version - Rename sib to Brevo - Remove CTA category, use the default one - Replace webhook docs link - Set default Countdown date Closes: Codeinwp/otter-internals#173
Codeinwp · Jul 25, 2024 · a1e13b5 · a1e13b5
1 parent bb813f9
commit a1e13b5
Show file tree

Hide file tree

Showing 12 changed files with 167 additions and 178 deletions.
diff --git a/inc/class-patterns.php b/inc/class-patterns.php
@@ -35,11 +35,11 @@ public function init() {
 	 */
 	public function register_patterns() {
 		$block_pattern_categories = array(
-			'otter-blocks' => array( 'label' => __( 'Otter Blocks', 'otter-blocks' ) ),
-			'cta'          => array( 'label' => __( 'Call to Action', 'otter-blocks' ) ),
-			'team'         => array( 'label' => __( 'Team', 'otter-blocks' ) ),
-			'pricing'      => array( 'label' => __( 'Pricing', 'otter-blocks' ) ),
-			'testimonials' => array( 'label' => __( 'Testimonials', 'otter-blocks' ) ),
+			'otter-blocks'   => array( 'label' => __( 'Otter Blocks', 'otter-blocks' ) ),
+			'call-to-action' => array( 'label' => __( 'Call to Action', 'otter-blocks' ) ),
+			'team'           => array( 'label' => __( 'Team', 'otter-blocks' ) ),
+			'pricing'        => array( 'label' => __( 'Pricing', 'otter-blocks' ) ),
+			'testimonials'   => array( 'label' => __( 'Testimonials', 'otter-blocks' ) ),
 		);
 
 		$block_pattern_categories = apply_filters( 'otter_blocks_block_pattern_categories', $block_pattern_categories );

diff --git a/inc/plugins/class-dashboard.php b/inc/plugins/class-dashboard.php
@@ -29,6 +29,7 @@ public function init() {
 		add_action( 'admin_menu', array( $this, 'register_menu_page' ) );
 		add_action( 'admin_init', array( $this, 'maybe_redirect' ) );
 		add_action( 'admin_notices', array( $this, 'maybe_add_otter_banner' ), 30 );
+		add_action( 'admin_head', array( $this, 'add_inline_css' ) );
 
 		$form_options = get_option( 'themeisle_blocks_form_emails' );
 		if ( ! empty( $form_options ) ) {
@@ -72,7 +73,11 @@ public function register_menu_page() {
 		add_submenu_page(
 			'otter',
 			__( 'Form Submissions', 'otter-blocks' ),
-			__( 'Form Submissions', 'otter-blocks' ),
+			sprintf(
+				'<div class="o-menu-submissions">%s <span class="o-menu-badge">%s</span></div>',
+				esc_html__( 'Form Submissions', 'otter-blocks' ),
+				esc_html__( 'Pro', 'otter-blocks' )
+			),
 			'manage_options',
 			'form-submissions-free',
 			array( $this, 'form_submissions_callback' ),
@@ -92,6 +97,34 @@ function() {
 		);
 	}
 
+	/**
+	 * Add inline CSS.
+	 */
+	public function add_inline_css() {
+		?>
+		<style>
+			.o-menu-submissions {
+				display: flex;
+				align-items: center;
+			}
+
+			.o-menu-badge {
+				border: 1px solid;
+				border-radius: 16px;
+				color: inherit;
+				font-size: 10px;
+				font-weight: 600;
+				line-height: 8px;
+				margin: 0;
+				opacity: .8;
+				padding: 4px 6px;
+				text-transform: uppercase;
+			}
+		</style>
+		<?php
+
+	}
+
 	/**
 	 * Register Admin Page
 	 *
@@ -300,12 +333,13 @@ private function the_otter_banner() {
 				<img src="<?php echo esc_url( OTTER_BLOCKS_URL . 'assets/images/logo-alt.png' ); ?>" alt="<?php esc_attr_e( 'Otter Blocks', 'otter-blocks' ); ?>" style="width: 90px">
 			</div>
 			<div class="otter-banner__content">
-				<h1 class="otter-banner__title" style="line-height: normal;"><?php esc_html_e( 'Form Submissions', 'otter-blocks' ); ?>
-					<sub class="otter-banner__version"><?php echo esc_html( 'v' . OTTER_BLOCKS_VERSION ); ?></sub>
-				</h1>
+				<h1 class="otter-banner__title" style="line-height: normal;"><?php esc_html_e( 'Form Submissions', 'otter-blocks' ); ?></h1>
+
+				<?php if ( Pro::is_pro_active() ) : ?>
 				<button id="export-submissions" class="button">
 					<?php esc_html_e( 'Export', 'otter-blocks' ); ?>
 				</button>
+				<?php endif; ?>
 			</div>
 		</div>
 		<script>

diff --git a/src/blocks/blocks/countdown/edit.tsx b/src/blocks/blocks/countdown/edit.tsx
@@ -10,7 +10,6 @@ import { __ } from '@wordpress/i18n';
 
 import {
 	isEmpty,
-	isNumber,
 	pickBy
 } from 'lodash';
 
@@ -78,6 +77,13 @@ const Edit = ({
 				setAttributes({ borderRadiusBox, borderRadius: undefined, borderRadiusBottomLeft: undefined, borderRadiusTopRight: undefined, borderRadiusBottomRight: undefined, borderRadiusTopLeft: undefined, borderRadiusType: undefined });
 			}
 		}
+
+		/**
+		 * Set default time if no time is set.
+		 */
+		if ( 'timer' !== attributes.mode && ! attributes.date ) {
+			setAttributes({ date: moment().utc().add( 1, 'week' ).format( 'YYYY-MM-DDTHH:mm:ss' ) });
+		}
 	}, []);
 
 	/**
@@ -110,7 +116,6 @@ const Edit = ({
 		}
 	};
 
-
 	const inlineStyles = {
 		'--border-radius': boxValues( attributes.borderRadiusBox ),
 		'--border-style': attributes.borderStyle,

diff --git a/src/blocks/blocks/countdown/inspector.js b/src/blocks/blocks/countdown/inspector.js
@@ -76,36 +76,27 @@ const defaultFontSizes = [
 const fontWeights = [ '', '100', '200', '300', '400', '500', '600', '700', '800', '900' ].map( x => ({ label: x ? x : 'Default', value: x }) );
 
 const SettingsPanel = ({ attributes }) => (
-	<Fragment>
-		<SelectControl
-			label={ __( 'Countdown Type', 'otter-blocks' ) }
-			value={  attributes.mode }
-			options={[
-				{
-					label: __( 'Static', 'otter-blocks' ),
-					value: ''
-				},
-				{
-					label: __( 'Evergreen (Pro)', 'otter-blocks' ),
-					value: 'timer',
-					disabled: true
-				},
-				{
-					label: __( 'Interval (Pro)', 'otter-blocks' ),
-					value: 'interval',
-					disabled: true
-				}
-			]}
-			help={ __( 'An universal deadline for all visitors', 'otter-blocks' )}
-		/>
-
-		{ ! Boolean( window.themeisleGutenberg?.hasPro ) && (
-			<Notice
-				notice={ <ExternalLink href={ setUtm( window.themeisleGutenberg.upgradeLink, 'countdownfeature' ) }>{ __( 'Get more options with Otter Pro.', 'otter-blocks' ) }</ExternalLink> }
-				variant="upsell"
-			/>
-		) }
-	</Fragment>
+	<SelectControl
+		label={ __( 'Countdown Type', 'otter-blocks' ) }
+		value={  attributes.mode }
+		options={[
+			{
+				label: __( 'Static', 'otter-blocks' ),
+				value: ''
+			},
+			{
+				label: __( 'Evergreen (Pro)', 'otter-blocks' ),
+				value: 'timer',
+				disabled: true
+			},
+			{
+				label: __( 'Interval (Pro)', 'otter-blocks' ),
+				value: 'interval',
+				disabled: true
+			}
+		]}
+		help={ __( 'An universal deadline for all visitors', 'otter-blocks' )}
+	/>
 );
 
 const EndActionPanel = () => (

diff --git a/src/blocks/blocks/form/inspector.js b/src/blocks/blocks/form/inspector.js
@@ -251,14 +251,6 @@ const FormOptions = ({ formOptions, setFormOption, attributes, setAttributes })
 							}
 							help={ __( 'The submissions are send only via email. No data will be saved on the server, use this option to handle sensitive data.', 'otter-blocks' ) }
 						/>
-
-						<div>
-							<Notice
-								notice={ <ExternalLink href={ setUtm( window.themeisleGutenberg.upgradeLink, 'form-block' ) }>{ __( 'Unlock this with Otter Pro.', 'otter-blocks' ) }</ExternalLink> }
-								variant="upsell"
-							/>
-							<p className="description">{ __( 'Enhance your email process with our new feature. Store submissions in a database for easy access.', 'otter-blocks' ) }</p>
-						</div>
 					</ToolsPanelItem>
 					<ToolsPanelItem
 						hasValue={ () => false }
@@ -327,7 +319,7 @@ const FormOptions = ({ formOptions, setFormOption, attributes, setAttributes })
 						</Button>
 
 						< br />
-						<ExternalLink href="https://docs.themeisle.com/article/1550-otter-pro-documentation">
+						<ExternalLink href="https://docs.themeisle.com/article/1878-how-to-use-webhooks-in-otter-forms">
 							{ __( 'Learn more about webhooks.', 'otter-blocks' ) }
 						</ExternalLink>
 
@@ -509,7 +501,7 @@ const Inspector = ({
 								options={ [
 									{ label: __( 'None', 'otter-blocks' ), value: '' },
 									{ label: __( 'Mailchimp', 'otter-blocks' ), value: 'mailchimp' },
-									{ label: __( 'Sendinblue', 'otter-blocks' ), value: 'sendinblue' }
+									{ label: __( 'Brevo', 'otter-blocks' ), value: 'sendinblue' }
 								] }
 								onChange={ provider => {
 									window.oTrk?.add({ feature: 'marketing', featureComponent: 'provider', featureValue: provider, groupID: attributes.id });

diff --git a/src/blocks/blocks/slider/block.json b/src/blocks/blocks/slider/block.json
@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "themeisle-blocks/slider",
-	"title": "Slider",
+	"title": "Image Slider",
 	"category": "themeisle-blocks",
 	"description": "Minimal image slider to showcase beautiful images. Powered by Otter.",
 	"keywords": [ "slider", "gallery", "carousel" ],

diff --git a/src/blocks/blocks/slider/edit.js b/src/blocks/blocks/slider/edit.js
@@ -241,7 +241,7 @@ const Edit = ({
 			<div { ...blockProps }>
 				<Placeholder
 					labels={ {
-						title: __( 'Slider', 'otter-blocks' ),
+						title: __( 'Image Slider', 'otter-blocks' ),
 						instructions: __( 'Drag images, upload new ones or select files from your library.', 'otter-blocks' )
 					} }
 					icon="images-alt2"

diff --git a/src/blocks/blocks/slider/index.js b/src/blocks/blocks/slider/index.js
@@ -19,7 +19,7 @@ const { name } = metadata;
 
 registerBlockType( name, {
 	...metadata,
-	title: __( 'Slider', 'otter-blocks' ),
+	title: __( 'Image Slider', 'otter-blocks' ),
 	description: __( 'Minimal image slider to showcase beautiful images. Powered by Otter.', 'otter-blocks' ),
 	icon,
 	keywords: [

diff --git a/src/blocks/components/notice/editor.scss b/src/blocks/components/notice/editor.scss
@@ -8,11 +8,12 @@
 	margin: 10px 0;
 
 	&.is-upsell {
-		background: #ED6F57;
+		background: transparent;
 		font-size: 12px;
+		border: 1px solid #808080;
 
 		.components-external-link {
-			color: white;
+			color: #808080;
 		}
 	}
 
@@ -27,7 +28,7 @@
 		flex-direction: row-reverse;
 		text-decoration: unset;
 
-		svg {
+		.components-external-link__icon {
 			margin: 0 5px 0 0;
 		}
 	}

diff --git a/src/blocks/editor.scss b/src/blocks/editor.scss
@@ -26,40 +26,6 @@ svg.o-block-icon {
 	fill: #fff !important;
 }
 
-.o-notice {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	background: #F3F3F3;
-	border-radius: 4px;
-	padding: 10px 20px;
-	margin: 10px 0;
-
-	&.is-upsell {
-		background: #ED6F57;
-		font-size: 12px;
-
-		.components-external-link {
-			color: white;
-		}
-	}
-
-	.components-external-link {
-		display: flex;
-		flex-direction: row-reverse;
-		text-decoration: unset;
-
-		svg {
-			margin: 0 5px 0 0;
-		}
-	}
-
-	svg {
-		width: 18px;
-		height: 18px;
-	}
-}
-
 .o-is-new {
 	&.components-panel__body {
 		.components-panel__body-title {