Shipping Settings: Add classes cost link to Flat rate methods (#40860)

plugins/woocommerce/changelog/add-shipping-settings-flat-rate-add-classes-link

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+Comment: Improvement on existing unreleased functionality
+

plugins/woocommerce/client/legacy/css/admin.scss

@@ -4124,6 +4124,14 @@ table.wc_shipping {
 		
 	}
 
+	.wc-shipping-method-add-class-costs {
+		margin-top: -24px;
+		text-decoration: none;
+		color: #3858E9;
+		font-size: 12px;
+		line-height: 16px;
+	}
+
 	.wc-shipping-zone-method-input {
 		input {
 			clip: rect(0 0 0 0);

plugins/woocommerce/client/legacy/js/admin/wc-shipping-classes.js

@@ -92,7 +92,6 @@
 					$tr.find( '.edit' ).hide();
 					$tr.find( '.wc-shipping-class-edit' ).on( 'click', { view: this }, this.onEditRow );
 					$tr.find( '.wc-shipping-class-delete' ).on( 'click', { view: this }, this.onDeleteRow );
-					// $tr.find( '.wc-shipping-class-cancel-edit' ).on( 'click', { view: this }, this.onCancelEditRow );
 				},
 				configureNewShippingClass: function( event ) {
 					event.preventDefault();

plugins/woocommerce/client/legacy/js/admin/wc-shipping-zone-methods.js

@@ -498,16 +498,13 @@
 										);
 									}
 								}
-								// Trigger save if there are changes, or just re-render
+
-								if ( _.size( shippingMethodView.model.changes ) ) {
+								// Avoid triggering a rerender here because we don't want to show the method in the table in case merchant doesn't finish flow.
+								
 								shippingMethodView.model.set( 'methods', response.data.methods );
-									shippingMethodView.model.trigger( 'change:methods' );
+
-									shippingMethodView.model.trigger( 'rerender' );
+								// Close original modal
-								} else {
+								closeModal();
-									shippingMethodView.model.set( 'methods', response.data.methods );
-									shippingMethodView.model.trigger( 'change:methods' );
-									shippingMethodView.model.trigger( 'saved:methods' );
-								}
 							}
 							var instance_id = response.data.instance_id, 
 							    method      = response.data.methods[ instance_id ];
@@ -534,9 +531,6 @@
 							}
 		
 							$( document.body ).trigger( 'init_tooltips' );
-
-							// Close original modal
-							closeModal();
 						}, 'json' );
 					}
 				},
@@ -567,6 +561,22 @@
 						if ( select.length > 0 ) {
 							event.data.view.possiblyHideFreeShippingRequirements( { woocommerce_free_shipping_requires: select.val() } );
 						}
+
+						event.data.view.possiblyAddShippingClassLink( event );
+					}
+				},
+				possiblyAddShippingClassLink: function( event ) {
+					const article = $( 'article.wc-modal-shipping-method-settings' );
+					const shippingClassesCount = article.data( 'shipping-classes-count' );
+					const status = article.data( 'status' );
+					const instance_id = article.data( 'id' );
+					const model = event.data.view.model;
+					const methods = _.indexBy( model.get( 'methods' ), 'instance_id' );
+					const method = methods[ instance_id ];
+
+					if ( method.id === 'flat_rate' && shippingClassesCount === 0 ) {
+						const link = article.find( '.wc-shipping-method-add-class-costs' );
+						link.css( 'display', 'block' );
 					}
 				},
 				validateFormArguments: function( event, target, data ) {

plugins/woocommerce/includes/admin/settings/views/html-admin-page-shipping-zone-methods.php

@@ -140,11 +140,12 @@ if ( ! defined( 'ABSPATH' ) ) {
 						<span class="screen-reader-text"><?php esc_html_e( 'Close modal panel', 'woocommerce' ); ?></span>
 					</button>
 				</header>
-				<article class="wc-modal-shipping-method-settings">
+				<article class="wc-modal-shipping-method-settings" data-id="{{{ data.instance_id }}}" data-status="{{{ data.status }}}"  data-shipping-classes-count="<?php echo count( WC()->shipping()->get_shipping_classes() ); ?>">
 					<form action="" method="post">
 						{{{ data.method.settings_html }}}
 						<input type="hidden" name="instance_id" value="{{{ data.instance_id }}}" />
 					</form>
+					<a class="wc-shipping-method-add-class-costs" style="display:none;" target="_blank" href="<?php echo esc_url( admin_url( 'admin.php?page=wc-settings&tab=shipping&section=classes' ) ); ?>"><?php esc_html_e( 'Add shipping class costs', 'woocommerce' ); ?></a>
 				</article>
 				<footer>
 					<div class="inner">