Feature/CLOUD-396

cloudinary-image-management-and-manipulation-in-the-cloud-cdn/css/src/components/_brand.scss

@@ -1,95 +1,109 @@
 @font-face {
-	font-family: 'cloudinary';
-	src: url('fonts/cloudinary.eot?fj77m5');
-	src: url('fonts/cloudinary.eot?fj77m5#iefix') format('embedded-opentype'),
+	font-family : 'cloudinary';
+	src         : url('fonts/cloudinary.eot?fj77m5');
+	src         : url('fonts/cloudinary.eot?fj77m5#iefix') format('embedded-opentype'),
 	url('fonts/cloudinary.ttf?fj77m5') format('truetype'),
 	url('fonts/cloudinary.woff?fj77m5') format('woff'),
 	url('fonts/cloudinary.svg?fj77m5#cloudinary') format('svg');
-	font-weight: normal;
-	font-style: normal;
+	font-weight : normal;
+	font-style  : normal;
 }
 
 .dashicons {
 	&-cloudinary {
 		/* use !important to prevent issues with browser extensions that change fonts */
-		speak: none;
-		font-style: normal;
-		font-weight: normal;
-		font-variant: normal;
-		text-transform: none;
-		line-height: 1;
+		speak                   : none;
+		font-style              : normal;
+		font-weight             : normal;
+		font-variant            : normal;
+		text-transform          : none;
+		line-height             : 1;
 
 		/* Better Font Rendering =========== */
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
+		-webkit-font-smoothing  : antialiased;
+		-moz-osx-font-smoothing : grayscale;
 
 		&:before {
-			font-family: 'cloudinary' !important;
-			content: '\e900';
+			font-family : 'cloudinary' !important;
+			content     : '\e900';
 		}
 
 		&.success {
-			color: $color-green;
+			color : $color-green;
 		}
 
 		&.error {
-			color: $color-red;
+			color : $color-red;
 
 			&:before {
-				content: '\e901';
+				content : '\e901';
 			}
 		}
 
 		&.warning {
-			color: $color-orange;
+			color : $color-orange;
 
 			&:before {
-				content: '\e902';
+				content : '\e902';
 			}
 		}
 
 		&.warning {
-			color: $color-orange;
+			color : $color-orange;
 		}
 
 		&.warning {
-			color: $color-orange;
+			color : $color-orange;
 		}
 	}
 }
 
 .column-cld_status {
-	width: 5.5em;
+	width : 5.5em;
 
 	.dashicons {
 		&-cloudinary {
-			display: inline-block;
+			display : inline-block;
 
 			&:before {
-				font-size: 1.8rem;
+				font-size : 1.8rem;
 			}
 		}
 	}
 }
 
 .form-field, .form-table {
 	.error-notice {
-		display: none;
-		color: $color-red;
+		display : none;
+		color   : $color-red;
 	}
 
 	input.cld-field:invalid {
-		border-color: $color-red;
+		border-color : $color-red;
 
 		+ .error-notice {
-			display: inline-block;
+			display : inline-block;
 		}
 	}
 }
 
-.cloudinary-welcome {
-	background-image: url("logo.svg");
-	background-repeat: no-repeat;
-	background-size: 153px;
-	background-position: top 12px right 20px;
+.cloudinary {
+	&-welcome {
+		background-image    : url("logo.svg");
+		background-repeat   : no-repeat;
+		background-size     : 153px;
+		background-position : top 12px right 20px;
+	}
+	&-stats{
+		display: inline-block;
+		margin-left: 25px;
+	}
+	&-stat{
+		cursor: help;
+	}
+	&-percent {
+		font-size      : 0.8em;
+		vertical-align : top;
+		color          : $color-blue;
+	}
 }

cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/class-connect.php

@@ -61,6 +61,26 @@ class Connect implements Config, Setup, Notice {
 	 */
 	public $handle;
 
+	/**
+	 * Holder of general notices.
+	 *
+	 * @var array
+	 */
+	protected $notices = array();
+
+	/**
+	 * Holds the meta keys for connect meta to maintain consistency.
+	 */
+	const META_KEYS = array(
+		'usage'      => '_cloudinary_usage',
+		'last_usage' => '_cloudinary_last_usage',
+		'signature'  => 'cloudinary_connection_signature',
+		'version'    => 'cloudinary_version',
+		'url'        => 'cloudinary_url',
+		'connect'    => 'cloudinary_connect',
+		'cache'      => 'cloudinary_settings_cache',
+	);
+
 	/**
 	 * Initiate the plugin resources.
 	 *
@@ -117,7 +137,7 @@ public function media_library_script() {
 	 */
 	public function verify_connection( $data ) {
 		if ( empty( $data['cloudinary_url'] ) ) {
-			delete_option( 'cloudinary_connection_signature' );
+			delete_option( self::META_KEYS['signature'] );
 
 			add_settings_error(
 				'cloudinary_connect',
@@ -157,7 +177,7 @@ public function verify_connection( $data ) {
 		}
 
 		add_settings_error( 'cloudinary_connect', 'connection_success', __( 'Successfully connected to Cloudinary.', 'cloudinary' ), 'updated' );
-		update_option( 'cloudinary_connection_signature', md5( $data['cloudinary_url'] ) );
+		update_option( self::META_KEYS['signature'], md5( $data['cloudinary_url'] ) );
 
 		return $data;
 	}
@@ -214,11 +234,14 @@ function ( $a ) {
 		}
 
 		$this->config_from_url( $url );
-		$test = new Connect\Api( $this, $this->plugin->version );
-		$test = $test->ping();
-		if ( is_wp_error( $test ) ) {
+		$test        = new Connect\Api( $this, $this->plugin->version );
+		$test_result = $test->ping();
+		if ( is_wp_error( $test_result ) ) {
 			$result['type']    = 'connection_error';
-			$result['message'] = ucwords( str_replace( '_', ' ', $test->get_error_message() ) );
+			$result['message'] = ucwords( str_replace( '_', ' ', $test_result->get_error_message() ) );
+		} else {
+			$this->api = $test;
+			$this->usage_stats( true );
 		}
 
 		return $result;
@@ -290,23 +313,62 @@ public function setup() {
 		// Get the cloudinary url from plugin config.
 		$config = $this->plugin->config['settings']['connect'];
 		if ( ! empty( $config['cloudinary_url'] ) ) {
-
 			$this->config_from_url( $config['cloudinary_url'] );
-
 			$this->api = new Connect\Api( $this, $this->plugin->version );
-			$stats     = get_transient( '_cloudinary_usage' );
-			if ( empty( $stats ) ) {
-				// Get users plan.
-				$stats = $this->plugin->components['connect']->api->usage();
-				if ( ! is_wp_error( $stats ) && ! empty( $stats['media_limits'] ) ) {
-					$stats['max_image_size'] = $stats['media_limits']['image_max_size_bytes'];
-					$stats['max_video_size'] = $stats['media_limits']['video_max_size_bytes'];
-					set_transient( '_cloudinary_usage', $stats, HOUR_IN_SECONDS );
-				}
+			$this->usage_stats();
+		}
+	}
+
+	/**
+	 * Set the usage stats from the Cloudinary API.
+	 *
+	 * @param bool $refresh Flag to force a refresh.
+	 */
+	public function usage_stats( $refresh = false ) {
+		$stats = get_transient( self::META_KEYS['usage'] );
+		if ( empty( $stats ) || true === $refresh ) {
+			// Get users plan.
+			$stats = $this->api->usage();
+			if ( ! is_wp_error( $stats ) && ! empty( $stats['media_limits'] ) ) {
+				$stats['max_image_size'] = $stats['media_limits']['image_max_size_bytes'];
+				$stats['max_video_size'] = $stats['media_limits']['video_max_size_bytes'];
+				set_transient( self::META_KEYS['usage'], $stats, HOUR_IN_SECONDS );
+				update_option( self::META_KEYS['last_usage'], $stats );// Save the last successful call to prevent crashing.
+			} else {
+				// Handle error by logging and fetching the last success.
+				// @todo : log issue.
+				$stats = get_option( self::META_KEYS['last_usage'] );
 			}
-			$this->usage = $stats;
+		}
+		$this->usage = $stats;
+	}
 
+	/**
+	 * Get a usage stat for display.
+	 *
+	 * @param string      $type The type of stat to get.
+	 * @param string|null $stat The stat to get.
+	 *
+	 * @return bool|string
+	 */
+	public function get_usage_stat( $type, $stat = null ) {
+		$value = false;
+		if ( isset( $this->usage[ $type ] ) ) {
+			if ( is_string( $this->usage[ $type ] ) ) {
+				$value = $this->usage[ $type ];
+			} elseif ( is_array( $this->usage[ $type ] ) && isset( $this->usage[ $type ][ $stat ] ) ) {
+				$value = $this->usage[ $type ][ $stat ];
+			} elseif ( is_array( $this->usage[ $type ] ) ) {
+
+				if ( 'limit' === $stat && isset( $this->usage[ $type ]['usage'] ) ) {
+					$value = $this->usage[ $type ]['usage'];
+				} elseif ( 'used_percent' === $stat && isset( $this->usage[ $type ]['credits_usage'] ) ) {
+					$value = $this->usage[ $type ]['credits_usage'];
+				}
+			}
 		}
+
+		return $value;
 	}
 
 	/**
@@ -317,15 +379,14 @@ public function setup() {
 	 * @return array The array of the config options stored.
 	 */
 	public function get_config() {
-		$signature = get_option( 'cloudinary_connection_signature', null );
-		$version   = get_option( 'cloudinary_version' );
-
+		$signature = get_option( self::META_KEYS['signature'], null );
+		$version   = get_option( self::META_KEYS['version'] );
 		if ( empty( $signature ) || version_compare( $this->plugin->version, $version, '>' ) ) {
 			// Check if there's a previous version, or missing signature.
-			$cld_url = get_option( 'cloudinary_url', null );
+			$cld_url = get_option( self::META_KEYS['url'], null );
 			if ( null === $cld_url ) {
 				// Post V1.
-				$data = get_option( 'cloudinary_connect', array() );
+				$data = get_option( self::META_KEYS['connect'], array() );
 				if ( ! isset( $data['cloudinary_url'] ) || empty( $data['cloudinary_url'] ) ) {
 					return null; // return null to indicate not valid.
 				}
@@ -355,35 +416,86 @@ public function get_config() {
 
 				// remove filters as we've already verified it and 'add_settings_error()' isin't available yet.
 				remove_filter( 'pre_update_option_cloudinary_connect', array( $this, 'verify_connection' ) );
-				update_option( 'cloudinary_connect', $data );
-				update_option( 'cloudinary_connection_signature', $signature );
-				update_option( 'cloudinary_version', $this->plugin->version );
-				delete_option( 'cloudinary_settings_cache' ); // remove the cache.
+				update_option( self::META_KEYS['connect'], $data );
+				update_option( self::META_KEYS['signature'], $signature );
+				update_option( self::META_KEYS['version'], $this->plugin->version );
+				delete_option( self::META_KEYS['cache'] ); // remove the cache.
 				$this->plugin->config['settings']['connect'] = $data; // Set the connection url for this round.
 			}
 		}
 
 		return $signature;
 	}
 
+	/**
+	 * Set usage notices if limits are towards higher end.
+	 */
+	public function usage_notices() {
+		if ( ! empty( $this->usage ) ) {
+			$usage_type = 'used_percent';
+			if ( isset( $this->usage['credits'] ) ) {
+				$usage_type = 'credits_usage';
+			}
+			foreach ( $this->usage as $stat => $values ) {
+
+				if ( ! is_array( $values ) || ! isset( $values[ $usage_type ] ) || 0 > $values[ $usage_type ] ) {
+					continue;
+				}
+
+				$link      = null;
+				$link_text = null;
+				if ( 90 <= $values[ $usage_type ] ) {
+					// 90% used - show error.
+					$level     = 'error';
+					$link      = 'https://cloudinary.com/console/lui/upgrade_options';
+					$link_text = __( 'upgrade your account', 'cloudinary' );
+				} elseif ( 80 <= $values[ $usage_type ] ) {
+					$level = 'warning';
+					$link_text = __( 'upgrade your account', 'cloudinary' );
+				} elseif ( 70 <= $values[ $usage_type ] ) {
+					$level = 'neutral';
+					$link_text = __( 'upgrade your account', 'cloudinary' );
+				} else {
+					continue;
+				}
+				// translators: Placeholders are URLS and percentage values.
+				$message         = sprintf(
+					__(
+						'<span class="dashicons dashicons-cloudinary"></span> You are %2$s of the way through your monthly quota for %1$s on your Cloudinary account. If you exceed your quota, the Cloudinary plugin will be deactivated until your next billing cycle and your media assets will be served from your WordPress Media Library. You may wish to <a href="%3$s" target="_blank">%4$s</a> and increase your quota to ensure you maintain full functionality.',
+						'cloudinary'
+					),
+					ucwords( $stat ),
+					$values[ $usage_type ] . '%',
+					$link,
+					$link_text
+				);
+				$this->notices[] = array(
+					'message'     => $message,
+					'type'        => $level,
+					'dismissible' => false,
+				);
+			}
+		}
+	}
+
 	/**
 	 * Get admin notices.
 	 */
 	public function get_notices() {
-		$screen  = get_current_screen();
-		$notices = array();
+		$this->usage_notices();
+		$screen = get_current_screen();
 		if ( empty( $this->plugin->config['connect'] ) ) {
 			if ( is_object( $screen ) && in_array( $screen->id, $this->plugin->components['settings']->handles, true ) ) {
-				$link      = '<a href="' . esc_url( admin_url( 'admin.php?page=cld_connect' ) ) . '">' . __( 'Connect', 'cloudinary' ) . '</a> ';
-				$notices[] = array(
+				$link            = '<a href="' . esc_url( admin_url( 'admin.php?page=cld_connect' ) ) . '">' . __( 'Connect', 'cloudinary' ) . '</a> ';
+				$this->notices[] = array(
 					'message'     => $link . __( 'your Cloudinary account with WordPress to get started.', 'cloudinary' ),
 					'type'        => 'error',
 					'dismissible' => true,
 				);
 			}
 		}
 
-		return $notices;
+		return $this->notices;
 	}
 
 }