Skip to content

Commit

Permalink
Improve checkout impl + UI. Added validation and data structure for p…
Browse files Browse the repository at this point in the history 
…ickup locations.
  • Loading branch information
@dennisnissle
dennisnissle committed Mar 27, 2024
1 parent 685e69e commit 0bbac9d
Show file tree
Hide file tree
Showing 13 changed files with 555 additions and 260 deletions.
37 changes: 12 additions & 25 deletions assets/js/blocks/checkout-pickup-location-select/slotfills/pickup-location-select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,26 @@ import { ExperimentalOrderShippingPackages } from '@woocommerce/blocks-checkout'
import { registerPlugin } from '@wordpress/plugins';
import { useEffect, useCallback, useState, useMemo } from "@wordpress/element";
import { useSelect, useDispatch, select, dispatch } from '@wordpress/data';
import triggerFetch from '@wordpress/api-fetch';
import { extensionCartUpdate } from '@woocommerce/blocks-checkout';
import classnames from 'classnames';
import { getSetting } from '@woocommerce/settings';
import { __, _x, sprintf } from '@wordpress/i18n';
import { SVG } from '@wordpress/components';
import _ from 'lodash';
import { CART_STORE_KEY, CHECKOUT_STORE_KEY, PAYMENT_STORE_KEY, VALIDATION_STORE_KEY } from '@woocommerce/block-data';
import { CART_STORE_KEY, CHECKOUT_STORE_KEY } from '@woocommerce/block-data';

import {
ValidatedTextInput,
ValidatedTextInputHandle,
} from '@woocommerce/blocks-checkout';

import { decodeEntities } from '@wordpress/html-entities';
import { useDebouncedCallback, useDebounce } from 'use-debounce';
import { getSelectedShippingProviders, Combobox, hasShippingProvider } from '@woocommerceGzdShipments/blocks-checkout';
import { getSelectedShippingProviders, Combobox, hasShippingProvider, getCheckoutData, hasPickupLocation } from '@woocommerceGzdShipments/blocks-checkout';

import './style.scss';

const PickupLocationSelect = ({
extensions,
cart,
components
}) => {
const [ needsCustomerNumber, setNeedsCustomerNumber ] = useState( false );
const [ supportsCustomerNumber, setSupportsCustomerNumber ] = useState( false );
const [ customerNumberIsMandatory, setCustomerNumberIsMandatory ] = useState( false );

const {
shippingRates,
Expand Down Expand Up @@ -54,16 +50,7 @@ const PickupLocationSelect = ({
};
} );

const { checkoutOptions } = useSelect( ( select ) => {
const store = select( CHECKOUT_STORE_KEY );

const extensionsData = store.getExtensionData();
const shipmentsData = extensionsData.hasOwnProperty( 'woocommerce-gzd-shipments' ) ? extensionsData['woocommerce-gzd-shipments'] : { 'pickup_location': '', 'pickup_location_customer_number': '' };

return {
checkoutOptions: shipmentsData
};
} );
const checkoutOptions = getCheckoutData();

const availableLocations = useMemo(
() =>
Expand Down Expand Up @@ -113,7 +100,8 @@ const PickupLocationSelect = ({
const currentLocation = getLocationByCode( checkoutOptions.pickup_location );

if ( currentLocation ) {
setNeedsCustomerNumber( () => { return currentLocation.needs_customer_number } );
setSupportsCustomerNumber( () => { return currentLocation.supports_customer_number } );
setCustomerNumberIsMandatory( () => { return currentLocation.customer_number_is_mandatory } );

const newShippingAddress = { ...shippingAddress };

Expand Down Expand Up @@ -156,8 +144,6 @@ const PickupLocationSelect = ({
pickupLocationDeliveryAvailable
] );

console.log(checkoutOptions);

if ( needsShipping && pickupLocationDeliveryAvailable ) {
return (
<div className="wc-gzd-shipments-pickup-location-delivery">
Expand All @@ -167,6 +153,7 @@ const PickupLocationSelect = ({
<Combobox
options={ locationOptions }
id="pickup-location"
key="pickup-location"
name="pickup_location"
label={ _x( 'Pickup location', 'shipments', 'woocommerce-germanized-shipments' ) }
errorId="pickup-location"
Expand All @@ -181,14 +168,14 @@ const PickupLocationSelect = ({
} }
/>

{ needsCustomerNumber && (
{ supportsCustomerNumber && (
<ValidatedTextInput
key="pickup_location_customer_number"
value={ checkoutOptions.pickup_location_customer_number }
id="pickup-location-customer-number"
label={ _x( "Customer Number", 'shipments', 'woocommerce-germanized-shipments' ) }
name="pickup_location_customer_number"
required={ true }
required={ customerNumberIsMandatory }
maxLength="20"
onChange={ ( newValue ) => {
setOption( 'pickup_location_customer_number', newValue );
Expand Down
122 changes: 2 additions & 120 deletions assets/js/blocks/checkout-pickup-location-select/slotfills/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,123 +1,5 @@
.wc-gzd-checkout-dhl {
.wc-gzd-checkout-dhl-title {
display: flex;
flex-wrap: wrap;
align-items: center;
.wc-gzd-shipments-pickup-location-delivery {
h4 {
font-size: 1em;

.dhl-icon {
width: 130px;
height: auto;
margin-left: auto;
}
}

.wc-block-components-radio-control-accordion-option {
position: relative;

.wc-block-components-radio-control__option-layout {
font-size: .875em;
}

.wc-block-components-radio-control-accordion-content {
font-size: .875em;
}

.wc-block-components-radio-control__option {
border-bottom: none;
padding-left: 56px;
padding-right: 16px;
margin: 0;
padding-bottom: 1em;
padding-top: 1em;

&::after {
border-style: solid;
border-width: 1px 1px 0;
bottom: 0;
content: "";
display: block;
left: 0;
opacity: .3;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
}

.wc-block-components-radio-control__input {
left: 16px;
}

&::after {
border-width: 0;
}
}

&::after {
border-style: solid;
border-width: 1px 1px 0;
bottom: 0;
content: "";
display: block;
left: 0;
opacity: .3;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
}

&:last-child {
&::after {
border-width: 1px;
}
}
}

.wc-gzd-dhl-preferred-day-select {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0;
padding: 0;

.wc-gzd-dhl-preferred-day {
color: inherit;
flex-basis: 10%;
flex-grow: 1;
text-align: center;
padding: 10px 0 0;
margin: 0 8px 8px 0;
background-color: #e3e3e3;
border: none;

&:last-child {
margin-right: 0;
}

.inner {
position: relative;
display: flex;
flex-direction: column;
flex-wrap: wrap;
padding: 5px 10px;
font-size: 1em;
background-color: #eef4f2;
cursor: pointer;
margin: 0;
line-height: 1.8em;

.day {
font-size: 1.4em;
}
}

&.active {
.inner {
background-color: #FFCC00;
}
}
}
}
}
40 changes: 38 additions & 2 deletions assets/js/packages/checkout/utils/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,19 @@
import { CHECKOUT_STORE_KEY, CART_STORE_KEY } from '@woocommerce/block-data';
import { useSelect, useDispatch, select, dispatch } from '@wordpress/data';
import {useCallback} from "@wordpress/element";

export const getSelectedShippingProviders = (
shippingRates
shippingRates = null
) => {
if ( null === shippingRates ) {
shippingRates = useSelect( ( select ) => {
const isEditor = !! select( 'core/editor' );
const store = select( CART_STORE_KEY );

return isEditor ? [] : store.getShippingRates();
} );
}

return Object.fromEntries( shippingRates.map( ( { package_id: packageId, shipping_rates: packageRates } ) => {
const meta_data = packageRates.find( ( rate ) => rate.selected )?.meta_data || [];
let provider = '';
Expand All @@ -18,6 +31,29 @@ export const getSelectedShippingProviders = (
} ) );
};

export const hasShippingProvider = ( shippingProviders, shippingProvider ) => {
export const hasShippingProvider = ( shippingProvider, shippingProviders = null ) => {
shippingProviders = null === shippingProviders ? getSelectedShippingProviders() : shippingProviders;

return Object.values( shippingProviders ).includes( shippingProvider );
};

export const hasPickupLocation = () => {
const checkoutData = getCheckoutData();

return !!checkoutData.pickup_location;
};

export const getCheckoutData = () => {
const { checkoutOptions } = useSelect( ( select ) => {
const store = select( CHECKOUT_STORE_KEY );

const extensionsData = store.getExtensionData();
const shipmentsData = extensionsData.hasOwnProperty( 'woocommerce-gzd-shipments' ) ? extensionsData['woocommerce-gzd-shipments'] : { 'pickup_location': '', 'pickup_location_customer_number': '' };

return {
checkoutOptions: shipmentsData
};
} );

return checkoutOptions;
};
30 changes: 30 additions & 0 deletions src/Admin/Admin.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,36 @@ function() {

add_action( 'woocommerce_admin_field_dimensions', array( __CLASS__, 'register_dimensions_field' ), 30 );
add_filter( 'woocommerce_admin_settings_sanitize_option', array( __CLASS__, 'sanitize_dimensions_field' ), 10, 3 );

add_filter( 'woocommerce_admin_shipping_fields', array( __CLASS__, 'register_pickup_location_admin_fields' ), 10, 3 );
}

public static function register_pickup_location_admin_fields( $fields, $order = null, $context = 'edit' ) {
if ( ! $order instanceof \WC_Order ) {
return $fields;
}

$shipment_order = wc_gzd_get_shipment_order( $order );

if ( $shipment_order->supports_pickup_location() ) {
$fields['pickup_location_code'] = array(
'label' => _x( 'Pickup location', 'shipments', 'woocommerce-germanized-shipments' ),
'type' => 'text',
'id' => '_pickup_location_code',
'show' => false,
'value' => $shipment_order->get_pickup_location_code(),
);

$fields['pickup_location_customer_number'] = array(
'label' => _x( 'Pickup customer number', 'shipments', 'woocommerce-germanized-shipments' ),
'show' => false,
'id' => '_pickup_location_customer_number',
'type' => 'text',
'value' => $shipment_order->get_pickup_location_customer_number(),
);
}

return $fields;
}

public static function sanitize_toggle_field( $value, $option, $raw_value ) {
Expand Down
Loading

0 comments on commit 0bbac9d

Please sign in to comment.