Settings UI

.editorconfig

@@ -7,6 +7,7 @@ end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
 indent_style = tab
+indent_size = 4
 
 [*.{yml,json}]
 indent_style = space

css/src/components/_ui.scss

@@ -203,22 +203,16 @@
 		}
 	}
 
-
 	&-panel {
 		background-color: #fff;
 		border: 1px solid $color-light-grey;
-		padding: 0.5rem 1.75rem 0.4rem;
-		width: 60%;
+		padding: 0.5rem 1.75rem 2rem;
 		margin-top: 1rem;
-
-		/* Small devices */
-		@media only screen and (max-width: 992px) {
-			width: 100%;
-		}
+		margin-right: 1rem;
 
 		/* Medium devices until large */
-		@media only screen and (min-width: 993px) and (max-width: 1200px) {
-			width: 80%;
+		@media only screen and (min-width: 993px) {
+			max-width: 900px;
 		}
 
 		&-inner {
@@ -270,6 +264,76 @@
 			}
 		}
 
+		ul {
+			padding: 0 3em;
+			list-style: initial;
+		}
+
+		.cld-plan {
+			color: $color-wp-blue;
+			font-weight: 700;
+			font-size: 1.5em;
+		}
+
+		.stat-boxes {
+			border: 1px solid $color-light-grey;
+			font-size: 1.2em;
+
+			.box {
+				border-bottom: 1px solid $color-light-grey;
+				padding: 2rem;
+				text-align: center;
+
+				&:last-of-type {
+					border-bottom: none;
+				}
+			}
+
+			.icon {
+				height: 50px;
+				margin-right: 0.5em;
+				width: 50px;
+			}
+
+			h3 {
+				margin-bottom: 1.5rem;
+				margin-top: 2.4rem;
+			}
+
+			.limit {
+				font-size: 2em;
+				font-weight: 700;
+				margin-right: 0.5em;
+				white-space: nowrap;
+			}
+
+			.usage {
+				color: $color-wp-blue;
+				font-size: 1.5em;
+				font-weight: 400;
+			}
+
+			@media only screen and (min-width: 783px) {
+				display: flex;
+				flex-wrap: nowrap;
+				font-size: 1em;
+
+				.box {
+					border-bottom: none;
+					border-right: 1px solid $color-light-grey;
+					flex-grow: 1;
+
+					&:last-of-type {
+						border-right: none;
+					}
+				}
+			}
+
+			@media only screen and (min-width: 1200px) {
+				font-size: 1.2em;
+			}
+		}
+
 		.notification-success {
 			background-color: transparentize($color-notification-success, 0.8);
 			border: 2px solid $color-notification-success;

php/class-plugin.php

@@ -175,15 +175,15 @@ private function get_settings_page_structure() {
 			'icon'        => 'dashicons-cloudinary',
 			'option_name' => $this->slug,
 			'page_header' => array(
-				'content' => '<img src="' . $this->dir_url . '/css/logo.svg" alt="' . esc_attr__( "Cloudinary's logo", 'cloudinary' ) . '" width="150px"><p style="margin-left: 1rem; font-size: 0.75rem;"><a href="#">Need help?</a></p>',
+				'content' => '<img src="' . esc_url( $this->dir_url ) . 'css/logo.svg" alt="' . esc_attr__( "Cloudinary's logo", 'cloudinary' ) . '" width="150px"><p style="margin-left: 1rem; font-size: 0.75rem;"><a href="#">' . esc_html__( 'Need help?', 'cloudinary' ) . '</a></p>',
 			),
 			'page_footer' => array(
 				'content' => __( 'Thanks for using Cloudinary, please take a minute to rate our plugin.', 'cloudinary' ),
 			),
 			'pages'       => array(
 				$this->slug => array(
-					'page_title' => __( 'Dashboard', 'cloudinary' ),
-					'menu_title' => __( 'Cloudinary', 'cloudinary' ),
+					'page_title' => __( 'Cloudinary Dashboard', 'cloudinary' ),
+					'menu_title' => __( 'Dashboard', 'cloudinary' ),
 					array(
 						'type' => 'panel',
 						array(
@@ -192,10 +192,17 @@ private function get_settings_page_structure() {
 						),
 						array(
 							'type'    => 'link',
-							'url'     => '#',
+							'url'     => 'https://cloudinary.com/console/lui/upgrade_options',
 							'content' => __( 'Upgrade Plan', 'cloudinary' ),
 						),
 					),
+					array(
+						'type' => 'panel',
+						array(
+							'type'  => 'plan_status',
+							'title' => __( 'Your Plan Status', 'cloudinary' ),
+						),
+					),
 				),
 			),
 		);

php/ui/component/class-plan-status.php

@@ -0,0 +1,215 @@
+<?php
+/**
+ * Plan UI Component.
+ *
+ * @package Cloudinary
+ */
+
+namespace Cloudinary\UI\Component;
+
+use function Cloudinary\get_plugin_instance;
+use Cloudinary\UI\Component;
+use Cloudinary\Settings\Setting;
+use Cloudinary\Connect;
+
+/**
+ * Plan Status Component to render plan status.
+ *
+ * @package Cloudinary\UI
+ */
+class Plan_Status extends Component {
+
+	/**
+	 * Holds the components build blueprint.
+	 *
+	 * @var string
+	 */
+	protected $blueprint = 'title/|stat_boxes|box_storage/|box_transformations/|box_bandwidth/|/stat_boxes';
+
+	/**
+	 * Holder the Connect object.
+	 *
+	 * @var Connect
+	 */
+	protected $connection;
+
+	/**
+	 * Holds the plugin url.
+	 *
+	 * @var string
+	 */
+	protected $dir_url;
+
+	/**
+	 * Plan constructor.
+	 *
+	 * @param Setting $setting The parent Setting.
+	 */
+	public function __construct( $setting ) {
+		$plugin           = get_plugin_instance();
+		$this->connection = $plugin->get_component( 'connect' );
+		$this->dir_url    = $plugin->dir_url;
+
+		parent::__construct( $setting );
+	}
+
+	/**
+	 * Setup action before rendering.
+	 */
+	protected function pre_render() {
+		$this->setting->set_param( 'plan_heading', $this->connection->get_usage_stat( 'plan' ) );
+	}
+
+	/**
+	 * Filter the title parts structure.
+	 *
+	 * @param array $struct The array structure.
+	 *
+	 * @return array
+	 */
+	protected function title( $struct ) {
+		$struct['element'] = 'h2';
+
+		return parent::title( $struct );
+	}
+
+	/**
+	 * Filter the plan box parts structure.
+	 *
+	 * @param array $struct The array structure.
+	 *
+	 * @return array
+	 */
+	protected function stat_boxes( $struct ) {
+		$struct['element']             = 'div';
+		$struct['attributes']['class'] = array(
+			'stat-boxes',
+		);
+
+		return $struct;
+	}
+
+	/**
+	 * Box Storage structure.
+	 *
+	 * @param array $struct The array structure.
+	 *
+	 * @return array
+	 */
+	protected function box_storage( array $struct ) {
+		$title            = $this->get_part( 'h3' );
+		$title['content'] = __( 'Storage', 'cloudinary' );
+
+		$icon                      = $this->get_part( 'icon' );
+		$icon['element']           = 'img';
+		$icon['attributes']['src'] = $this->dir_url . 'css/cloud.svg';
+		$icon['render']            = true;
+
+		$limit                        = $this->get_part( 'span' );
+		$limit['attributes']['class'] = array(
+			'limit',
+		);
+		$limit['content']             = size_format( $this->connection->get_usage_stat( 'storage', 'limit' ) );
+
+		$usage                        = $this->get_part( 'span' );
+		$usage['attributes']['class'] = array(
+			'usage',
+		);
+		$usage['content']             = $this->connection->get_usage_stat( 'storage', 'used_percent' ) . '%';
+
+
+		$struct = $this->get_struct( $struct, $icon, $title, $limit, $usage );
+
+		return $struct;
+	}
+
+	/**
+	 * Box Transformations structure.
+	 *
+	 * @param array $struct The array structure.
+	 *
+	 * @return array
+	 */
+	protected function box_transformations( array $struct ) {
+		$title            = $this->get_part( 'h3' );
+		$title['content'] = __( 'Transformations', 'cloudinary' );
+
+		$icon                      = $this->get_part( 'icon' );
+		$icon['element']           = 'img';
+		$icon['attributes']['src'] = $this->dir_url . 'css/transformation.svg';
+		$icon['render']            = true;
+
+		$limit                        = $this->get_part( 'span' );
+		$limit['attributes']['class'] = array(
+			'limit',
+		);
+		$limit['content']             = number_format_i18n( $this->connection->get_usage_stat( 'transformations', 'limit' ) );
+
+		$usage                        = $this->get_part( 'span' );
+		$usage['attributes']['class'] = array(
+			'usage',
+		);
+		$usage['content']             = $this->connection->get_usage_stat( 'transformations', 'used_percent' ) . '%';
+
+		$struct = $this->get_struct( $struct, $icon, $title, $limit, $usage );
+
+		return $struct;
+	}
+
+	/**
+	 * Box Bandwidth structure.
+	 *
+	 * @param array $struct The array structure.
+	 *
+	 * @return array
+	 */
+	protected function box_bandwidth( array $struct ) {
+		$title            = $this->get_part( 'h3' );
+		$title['content'] = __( 'Bandwidth', 'cloudinary' );
+
+		$icon                      = $this->get_part( 'icon' );
+		$icon['element']           = 'img';
+		$icon['attributes']['src'] = $this->dir_url . 'css/bandwidth.svg';
+		$icon['render']            = true;
+
+		$limit                        = $this->get_part( 'span' );
+		$limit['attributes']['class'] = array(
+			'limit',
+		);
+		$limit['content']             = size_format( $this->connection->get_usage_stat( 'bandwidth', 'limit' ) );
+
+		$usage                        = $this->get_part( 'span' );
+		$usage['attributes']['class'] = array(
+			'usage',
+		);
+		$usage['content']             = $this->connection->get_usage_stat( 'bandwidth', 'used_percent' ) . '%';
+
+		$struct = $this->get_struct( $struct, $icon, $title, $limit, $usage );
+
+		return $struct;
+	}
+
+	/**
+	 * Get the box struct.
+	 *
+	 * @param array $struct The array structure.
+	 * @param array $icon   The icon URL.
+	 * @param array $title  The title.
+	 * @param array $limit  The limit.
+	 * @param array $usage  The usage.
+	 *
+	 * @return array
+	 */
+	protected function get_struct( array $struct, array $icon, array $title, array $limit, array $usage ) {
+		$struct['element']             = 'div';
+		$struct['attributes']['class'] = array(
+			'box',
+		);
+		$struct['children']['icon']    = $icon;
+		$struct['children']['title']   = $title;
+		$struct['children']['limit']   = $limit;
+		$struct['children']['usage']   = $usage;
+
+		return $struct;
+	}
+}