Many UX improvements for pickup delivery selection in classic checkou…

…t and customer area.

assets/css/pickup-locations.scss

@@ -0,0 +1,174 @@
+.pickup_location_notice.hidden, #pickup_location_field.hidden, #pickup_location_customer_number_field.hidden {
+  display: none;
+}
+
+#pickup_location_field .select2-selection__clear {
+  margin-right: 5px; padding: 0 3px;
+}
+
+.woocommerce form {
+  #current_pickup_location_field {
+    display: none;
+  }
+
+  .pickup_location_notice {
+    margin-top: -.5rem;
+
+    p {
+      margin: 0;
+      padding: 0;
+    }
+
+    a.pickup-location-remove {
+      color: var(--wc-subtext);
+      font-size: 0.9em;
+      margin-top: 1rem;
+    }
+  }
+
+  .wc-gzd-shipments-managed-by-pickup-location {
+    .woocommerce-input-wrapper {
+      position: relative;
+    }
+  }
+}
+
+.wc-gzd-shipments-managed-by-pickup-location-notice {
+  font-size: 0.7em;
+  color: var(--wc-subtext);
+  line-height: 1em;
+  position: absolute;
+  right: 0;
+  top: 0;
+  margin-right: 1em;
+}
+
+body.wc-gzd-body-modal-active {
+  overflow: hidden;
+}
+
+.wc-gzd-modal-background {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  opacity: .50;
+  filter: alpha(opacity=50);
+  z-index: 1000;
+}
+
+.select2-container--open {
+  .wc-gzd-pickup-location-select-dropdown {
+    z-index: 1051 !important;
+  }
+}
+
+.wc-gzd-modal-content {
+  display: none;
+  z-index: 1001;
+  position: fixed;
+  padding-top: 100px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+
+  .wc-gzd-modal-close {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40px' height='40px' viewbox='0 0 40 40'%3E%3Cpath d='M 10,10 L 30,30 M 30,10 L 10,30' stroke='black' stroke-width='4' stroke-linecap='butt' /%3E%3C/svg%3E");
+    text-indent: -9999px;
+    background-repeat: no-repeat;
+    width: 1.2em;
+    height: 1.2em;
+    background-size: contain;
+  }
+
+  .wc-gzd-modal-content-inner {
+    background-color: white;
+    border-radius: 5px;
+    margin: 0 auto;
+    width: 80%;
+
+    header {
+      background: #fcfcfc;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      padding: 1em 1.2em;
+      border-bottom: 1px solid #ddd;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      h4 {
+        font-size: 1.2em;
+        margin: 0;
+      }
+    }
+
+    article {
+      overflow: auto;
+      padding: 1.2em;
+    }
+
+    .pickup-location-search-fields-wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+
+      p.form-row {
+        float: none;
+        flex-grow: 1;
+        width: auto;
+        margin: 0;
+        margin-right: 1.5em;
+        padding: 0;
+      }
+
+      #wc-gzd-shipments-search-pickup-location-submit {
+        align-self: flex-end;
+        padding: .9rem 1.1rem;
+      }
+    }
+
+    .pickup-location-search-results {
+      margin-top: 2em;
+
+      #pickup_location_field {
+        padding: 0;
+
+        &.hidden {
+          display: none;
+        }
+      }
+    }
+
+    .pickup-location-search-actions {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 1.5em;
+      align-items: baseline;
+
+      a {
+        &.pickup-location-remove {
+          color: var(--wc-red);
+          font-size: .9em;
+        }
+
+        &.submit-pickup-location {
+          margin-left: 1.5em;
+        }
+      }
+
+      a.hidden {
+        display: none;
+      }
+    }
+  }
+}
+
+.wc-gzd-modal-background.active, .wc-gzd-modal-content.active {
+  display: block;
+}

assets/js/static/modal.js

@@ -0,0 +1,63 @@
+
+window.germanized = window.germanized || {};
+window.germanized.shipments_modal = window.germanized.shipments_modal || {};
+
+( function( $, germanized ) {
+
+    /**
+     * Core
+     */
+    germanized.shipments_modal = {
+        params: {},
+
+        init: function () {
+            var self  = germanized.shipments_modal;
+
+            $( document ).on( 'click', '.wc-gzd-modal-launcher, .wc-gzd-modal-background, .wc-gzd-modal-close', self.onTriggerModal );
+            $( document ).on( 'click', '.wc-gzd-modal-content.active', self.detectBgClick );
+        },
+
+        detectBgClick: function( e ) {
+            if ( ! $( e.target ).closest('.wc-gzd-modal-content-inner' ).length && ! $( e.target ).is( '.wc-gzd-modal-content-inner' ) ) {
+                $( this ).find( '.wc-gzd-modal-close' ).trigger( 'click' );
+            }
+        },
+
+        onTriggerModal: function() {
+            var modalId = false;
+
+            if ( $( this ).parents( '.wc-gzd-modal-content' ).length > 0 ) {
+                modalId = $( this ).parents( '.wc-gzd-modal-content' ).data( 'id' );
+            } else {
+                modalId = $( this ).data( 'modal-id' );
+            }
+
+            if ( modalId ) {
+                if ( $( '.wc-gzd-modal-content[data-id="' + modalId + '"]' ).length > 0 ) {
+                    var $modal = $( '.wc-gzd-modal-content[data-id="' + modalId + '"]' );
+
+                    $modal.toggleClass( "active" );
+                    $( '.wc-gzd-modal-background' ).toggleClass( "active" );
+
+                    if ( $modal.hasClass( 'active' ) ) {
+                        $( '.wc-gzd-modal-background' ).attr( 'data-id', modalId );
+                        $( 'body' ).addClass( 'wc-gzd-body-modal-active' );
+
+                        $( document.body ).trigger( 'wc_gzd_shipments_modal_open', [ modalId, $modal ] );
+                    } else {
+                        $( 'body' ).removeClass( 'wc-gzd-body-modal-active' );
+
+                        $( document.body ).trigger( 'wc_gzd_shipments_modal_close', [ modalId, $modal ] );
+                    }
+                }
+            }
+
+            return false;
+        },
+    };
+
+    $( document ).ready( function() {
+        germanized.shipments_modal.init();
+    });
+
+})( jQuery, window.germanized );