Display the link to add the shipping address when shipping address is not available #8141
Conversation
tarunvijwani
added
type: enhancement
|
The release ZIP for this PR is accessible via: Script Dependencies ReportThere is no changed script dependency between this branch and trunk. This comment was automatically generated by the TypeScript Errors Report
assets/js/base/components/cart-checkout/totals/shipping/test/index.tsx
assets/js/base/utils/address.ts |
woocommercebot
requested review from
a team and
mikejolley
and removed request for
a team
|
Size Change: -95 B (0%) Total Size: 1.06 MB
ℹ️ View Unchanged
|
|
Before looking at the code, is it not strange that the text here states "Add an address for shipping rates", but still displays shipping rates below? It seems like this link should only change if there are no rates displayed. Unless of course the link text is made slightly more generic so it fits both cases. |
That's a great point. I think we can change the text to something like "Add an address to get the exact shipping rates" @elizaan36 @ralucaStan I'd love to hear your thoughts. |
assets/js/base/components/cart-checkout/totals/shipping/index.tsx
Outdated
Show resolved
Hide resolved
|
|
||
| const formattedLocation = formatShippingAddress( shippingAddress ); | ||
| const label = | ||
| ! hasDefaultCustomerAddress && ! formattedLocation |
There was a problem hiding this comment.
@mikejolley Do you think we should remove hasDefaultCustomerAddress check as well? I think formatLocation null check is enough to determine whether we have the address or not to change the label, irrespective of the user's setting in WC. Let me know your thoughts.
There was a problem hiding this comment.
Yeah that makes sense, I'm assuming that formatted location logic needs the basics (state, country, city) or will null. If thats the case, yes remove it.
|
It's my understanding that the text "Add an address for shipping rates" would only appear when there are no rates shown. What's the use case where the link would show alongside rates? |
@elizaan36 If the merchant has defined the default shipping rates that are applicable for every location, then it will show the rates. If the customer adds their address, the shipping rates will change according to their location. The Cart Shortcode page also follows the same approach. Screen.Recording.2023-01-19.at.12.39.36.PM.movHowever, if the merchant has not defined the default shipping rates, then it will display the error(We're adding the changes of #8130 to this PR to keep the text consistent) Screen.Recording.2023-01-19.at.12.42.53.PM.mov |
I imagine the merchant's intention would be to offer the flat rate and turn off the shipping calculator in that case. So I'd say if the merchant has chosen a flat rate for all locations, the link shouldn't appear. It's quite confusing for the shopper to see "Flat rate" or "Free shipping" with a link that might change these rates. What do you think?
Nice, this makes sense and glad we can align the experience there! |
Yes, that makes perfect sense! I'll incorporate the changes. Thank you! |
- Replace hardcoded notices with text for Cart and Checkout block. - Fix shipping placeholder for the Checkout block when no shipping rates are available. - Created a function in base/utils to format Shipping address. - Remove the condition to check default customer address. Display the "Add shipping address" link only when there is no address available. - Hide shipping calculator if default shipping are defined.
tarunvijwani
force-pushed
the
add/8027-shipping-address-link
branch
from
7ca092b to
52f902c
Compare
tarunvijwani
changed the title
tarunvijwani
changed the title
assets/js/base/components/cart-checkout/shipping-location/index.tsx
Outdated
Show resolved
Hide resolved
assets/js/base/components/cart-checkout/totals/shipping/shipping-placeholder.tsx
Outdated
Show resolved
Hide resolved
| @@ -26,6 +26,7 @@ const Block = ( { | |||
| showRateSelector={ false } | |||
| values={ cartTotals } | |||
| currency={ totalsCurrency } | |||
| isCheckout={ true } | |||
There was a problem hiding this comment.
I found a bug on the checkout block page that displays Calculated during checkout for shipping in the Checkout summary if shipping options are unavailable. It happened because we were not passing the isCheckout prop to TotalsShipping component for Checkout. This change will fix it and display the correct error message.
* Add further unit tests * Add useStoreCart to mocked values and wrap in SlotFillProvider * Add test for 2nd and 3rd scenario * Remove AsyncModeProvider mock Remove AsyncModeProvider mock since we are requiring @wordpress/data in setup-globals.js --------- Co-authored-by: Thomas Roberts <[email protected]>
|
This PR will be merged in the 1st week of April and released in the 10.0.0 version. |
tarunvijwani
added
the
status: on hold
…8679) * Add CartCheckoutUtils class This class will store reusable methods relating to Cart/Checkout Blocks, i.e. whether they are used on the Cart/Checkout page. * Update ShippingController to use the new CartCheckoutUtils function This will reduce code duplication when checking if the Cart/Checkout blocks are in use on the Cart/Checkout page. * Add filter to remove shipping settings when Cart/Checkout are default * Ensure setting displays correctly if cart is default but not checkout * Add tests to ensure core shipping settings update correctly * Add setCartCheckoutPages function to update set the cart/checkout page * Force shipping to be enabled if the Checkout block is in use. * Add filter to override cost requires address option * Add shippingCostRequiresAddress option * Check if the address is required before showing rates * Show shipping rates in editor * Add shippingCostRequiresAddress attribute to shipping methods block * Update frontend type to show shippingCostRequiresAddress is a prop * Add control to toggle shippingCostRequiresAddress option * Show address notice in the correct scenario * Send shippingCostRequiresAddress to Block in front end context * Add e2e test for editor control * Add e2e tests for shipping options on the front end * Add updateAttributeInSiblingBlock function * Add shippingCostRequiresAddress to shipping method block * Ensure attribute is updated in both blocks when editing * In Shipping Methods Block, show correct component based on block setting * Show correct block in editor * Remove broken test from PR * Clean up updateAttributeInSiblingBlock * Add setCartCheckoutPages function to update set the cart/checkout page * Add tests to ensure core shipping settings update correctly * Add isAddressComplete function Borrowed from #8141 * Check if the address is required before showing rates * Show shipping rates in editor * Show address notice in the correct scenario * Add e2e tests for shipping options on the front end * Ensure errorId is passed to StateInput * Add fullShippingAddressPushed action to wc/store/cart * Add fullShippingAddressPushed case to reducer * Ensure fullShippingAddressPushed is set when initialising cart store * Add fullShippingAddressPushed selector and default state entry * Add shippingAddressHasValidationErrors util function * Do not overwrite addresses when selecting a rate * Set whether full address has been pushed when saving address changes * In Shipping Methods Block, show correct component based on block setting * Don't show from price if rates should be hidden until address entered * Check city validation errors to assert if shipping address is valid * Rename merchant.js to merchant.ts * Move local pickup functions to common merchant util * Update local pickup tests to use common merchant utils * Add test to ensure setting toggles in both blocks * Add navigating to settings and saving in merchant util * Create addPickupLocation merchant util * Add test for local pickup and require full address * Make sure correct conditions are met to show shipping options * Ensure checkbox is checked during local pickup tests * Unset the checkbox when tests are finished running * Update checkout block fixture * Prevent error in unit tests * Import validation store key from constants Required because importing from the index causes the validation data store to register twice * Update checkout terms test to wait for button not to be disabled * Revert "Add isAddressComplete function" This reverts commit 9967dc0.
Fix linting error that got introduced while resolving the merge conflict.
- Rename the isShippingAddressComplete variable to shippingAddressHasErrors as it only checks validation errors. - Use isAddressComplete function to check if address is complete.
tarunvijwani
requested review from
rubikuserbot and
a team
and removed request for
rubikuserbot
There was a problem hiding this comment.
@tarunvijwani, there is a logical error in the code! Please check my comment below!
| ? totalShippingValue | ||
| : // if address is not complete, display the link to add an address. | ||
| ! addressComplete && ( | ||
| <ShippingPlaceholder |
There was a problem hiding this comment.
@tarunvijwani, on the Checkout Block page, we would like to show the "ShippingPlaceholder" component when there are no shipping methods available (i.e., hasRates && cartHasCalculatedShipping). But, with this additional condition (i.e., ! addressComplete &&), the Shipping placeholder will never be displayed if the address is complete!
There was a problem hiding this comment.
Continuing the discussion on slack: p1679930401191499-slack-C8X6Q7XQU
With this PR, we display a link to add the shipping address in the shipping calculator on the cart page when the shipping address is unavailable. We're also hiding the option to change the shipping address when default shipping rates are defined.
Fixes #8027 and #7730
Changes in the PR
Accessibility
prefers-reduced-motionScreenshots
Testing
Automated Tests
User Facing Testing
case 1 (With no default shipping rates)
wp-admin/admin.php?page=wc-settings.No location by default.case 2(With default shipping rates)
wp-admin/admin.php?page=wc-settings.No location by default.case 3(Error Notice)
wp-admin/admin.php?page=wc-settings.No location by default.There are no shipping options available. Please check your shipping address.error is visible in the text form.There are no shipping options available. Please check your shipping addresserror is visible in the text form under Shipping options.WooCommerce Visibility
Changelog