diff --git a/assets/css/pickup-locations.scss b/assets/css/pickup-locations.scss new file mode 100644 index 00000000..d6a72292 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/assets/js/static/modal.js b/assets/js/static/modal.js new file mode 100644 index 00000000..467c5c38 --- /dev/null +++ b/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 ); diff --git a/assets/js/static/pickup-locations.js b/assets/js/static/pickup-locations.js index 3c4ddee6..8bea0a1c 100644 --- a/assets/js/static/pickup-locations.js +++ b/assets/js/static/pickup-locations.js @@ -11,6 +11,7 @@ window.germanized.shipments_pickup_locations = window.germanized.shipments_picku params: {}, pickupLocations: {}, + available: false, init: function () { var self = germanized.shipments_pickup_locations; @@ -20,36 +21,196 @@ window.germanized.shipments_pickup_locations = window.germanized.shipments_picku if ( $pickupSelect.length > 0 ) { self.pickupLocations = $pickupSelect.data( 'locations' ); + } + + if ( $( '#current_pickup_location' ).length > 0 ) { + self.available = $( '.choose-pickup-location:visible' ).length > 0 || $( '.currently-shipping-to:visible' ).length > 0; $( document.body ).on( 'updated_checkout', self.afterRefreshCheckout ); - $( document ).on( 'change', '#pickup_location_field #pickup_location', self.onSelectPickupLocation ); $( document ).on( 'change', '#ship-to-different-address-checkbox', self.onSelectDifferentShipping ); + $( document ).on( 'submit', '#wc-gzd-shipments-pickup-location-search-form', self.onSearch ); + $( document ).on( 'click', '.submit-pickup-location', self.onSelectPickupLocation ); + $( document ).on( 'change', '#current_pickup_location', self.onChangeCurrentPickupLocation ); + $( document ).on( 'click', '.pickup-location-remove', self.onRemovePickupLocation ); + $( document ).on( 'change', '#pickup_location', self.onChangePickupLocation ); + $( document ).on( 'change', '#billing_postcode, #shipping_postcode', self.onChangeAddress ); + + self.onChangeCurrentPickupLocation(); + self.onChangePickupLocation(); + self.maybeInitSelect2(); + } + }, + + onChangeAddress: function() { + var self= germanized.shipments_pickup_locations, + postcode = $( '#shipping_postcode:visible' ).val() ? $( '#shipping_postcode:visible' ).val() : $( '#billing_postcode' ).val(); + + $( '#pickup-location-postcode' ).val( postcode ); + }, + + onChangePickupLocation: function() { + var self= germanized.shipments_pickup_locations, + $pickupSelect = self.getPickupLocationSelect(); + + if ( $pickupSelect.val() ) { + $( '.pickup-location-search-actions' ).find( '.submit-pickup-location' ).show(); + } else { + $( '.pickup-location-search-actions' ).find( '.submit-pickup-location' ).hide(); + } + }, + + hasPickupLocationDelivery: function() { + var self = germanized.shipments_pickup_locations, + $current = $( '#current_pickup_location' ), + currentCode = $current.val(); + + if ( currentCode ) { + return true; + } + + return false; + }, + + disablePickupLocationDelivery: function() { + var self= germanized.shipments_pickup_locations, + $modal = $( '.wc-gzd-modal-content[data-id="pickup-location"].active' ); + + $( '.wc-gzd-shipments-managed-by-pickup-location' ).val( '' ); + $( '#current_pickup_location' ).val( '' ).trigger( 'change' ); + + if ( $modal.length > 0 ) { + $modal.find( '.wc-gzd-modal-close' ).trigger( 'click' ); + } + }, + + onRemovePickupLocation: function() { + var self= germanized.shipments_pickup_locations; + + self.disablePickupLocationDelivery(); + + return false; + }, - self.afterRefreshCheckout(); + getCustomerNumberField: function() { + return $( '#pickup_location_customer_number_field' ); + }, + + onChangeCurrentPickupLocation: function() { + var self = germanized.shipments_pickup_locations, + $current = $( '#current_pickup_location' ), + currentCode = $current.val(), + currentPickupLocation = currentCode ? self.getPickupLocation( currentCode ) : false, + $notice = $( '.pickup_location_notice' ); + + if ( currentCode && currentPickupLocation ) { + $current.attr( 'data-current-location', currentPickupLocation ); + + self.replaceShippingAddress( currentPickupLocation.address_replacements ); + self.updateCustomerNumberField( currentPickupLocation ); + + $notice.find( '.pickup-location-manage-link' ).text( currentPickupLocation.label ); + $notice.find( '.currently-shipping-to' ).show(); + $notice.find( '.choose-pickup-location' ).hide(); + } else { + $current.attr( 'data-current-location', '' ); + $current.val( '' ); + + self.getCustomerNumberField().addClass( 'hidden' ); + self.getCustomerNumberField().hide(); + + console.log($( '.wc-gzd-shipments-managed-by-pickup-location' ).find( 'input[type=text]' )); + + $( '.wc-gzd-shipments-managed-by-pickup-location' ).find( 'input[type=text]' ).val( '' ); + $( '.wc-gzd-shipments-managed-by-pickup-location' ).find( ':input' ).prop( 'readonly', false ); + + $( '.wc-gzd-shipments-managed-by-pickup-location' ).removeClass( 'wc-gzd-shipments-managed-by-pickup-location' ); + $( '.wc-gzd-shipments-managed-by-pickup-location-notice' ).remove(); + + $notice.find( '.currently-shipping-to' ).hide(); + $notice.find( '.choose-pickup-location' ).show(); } }, + onSearch: function() { + var self = germanized.shipments_pickup_locations, + $form = $( this ), + params = $form.serialize(), + $pickupSelect = self.getPickupLocationSelect(), + current = $pickupSelect.val(); + + $( '#wc-gzd-shipments-pickup-location-search-form' ).block({ + message: null, + overlayCSS: { + background: '#fff', + opacity: 0.6 + } + }); + + params['action'] = 'woocommerce_gzd_shipments_search_pickup_locations'; + + $.ajax({ + type: "POST", + url: self.params.wc_ajax_url.toString().replace('%%endpoint%%', 'woocommerce_gzd_shipments_search_pickup_locations'), + data: params, + success: function( data ) { + if ( data.success ) { + self.pickupLocations = data.locations; + self.updatePickupLocationSelect(); + + $( '#wc-gzd-shipments-pickup-location-search-form' ).unblock(); + } + }, + error: function( data ) {}, + dataType: 'json' + }); + + return false; + }, + + updatePickupLocationSelect: function() { + var self = germanized.shipments_pickup_locations, + $pickupSelect = self.getPickupLocationSelect(), + current = $pickupSelect.val(); + + $pickupSelect.attr('data-locations', self.pickupLocations ); + $pickupSelect.find( 'option:not([value=""])' ).remove(); + + $.each( self.pickupLocations, function( code, pickupLocation ) { + var label = $( '