[Admin][Settings] Introduce zone creation and modification capability

[chaimann]

Description

Introduce a new interface for creating and editing zones.

Features

• Implement the interface described in the design with specified fields in a modal component.

Figma Design

Design details

[chaimann]

@kennyadsl @tvdeyen
for this one I assume we'd want to allow select multiple states/countries, same how it's done in current backend:

I've checked the design files and found an example of a field which I believe is a multi-select:

Existing UI component for select field does not have any specific logic for multiple options, it falls back to default browser select with "multiple=true":

Do you guys know if there is something I'm missing and there is some work in progress on the multi-select component? Or should I implement it from scratch?

[chaimann]

I'd also suggest that since "Type" contains only two options state or country, it'd be a better UX to have this field represented by two radio buttons instead of select

[tvdeyen]

Do you guys know if there is something I'm missing and there is some work in progress on the multi-select component? Or should I implement it from scratch?

No, there is nothing work in progress. In the current admin we use select2 for such things.

I would suggest to not implement something from scratch, but rather use something like tom-select (since select2 is not maintained anymore)

I'd also suggest that since "Type" contains only two options state or country, it'd be a better UX to have this field represented by two radio buttons instead of select

Agreed 👍🏻

[chaimann]

I would suggest to not implement something from scratch

yeah, I phrased it badly, I meant creating a component that was missing, using a 3rd party lib and customising it to meet our UI design examples 😅

[tvdeyen]

One word about how I suggest including a third party library like tom-select (or any alternative). Since we need a way to initialize it for DOM elements on some kind of event (DOM ready, turbo-update, etc.), using a web-component (custom element) is the most successful and future proof way of doing it.

Please let's not try to bend Stimulus to get this "working" in some brittle way.

If you need an example on how to implement it you can take a look at the Alchemy Page Select https://github.com/AlchemyCMS/alchemy_cms/blob/main/app/javascript/alchemy_admin/components/page_select.js and of course you can #ama ;)

[chaimann]

thank you, I'll check it out! 🙂

[fthobe]

I'd also suggest that since "Type" contains only two options state or country, it'd be a better UX to have this field represented by two radio buttons instead of select

I think the idea behind the picklist was the ability to extend the logic to other factors. Given that there are countries applying city tax even on ecommerce I'd leave it a picklist. There might be stuff changing down the road and a picklist realibly renders no matter which are the values and as far as I remember even stuff like the Colorado shipping tax was an issue here.

Generally your approach is right though.

[fthobe]

@tvdeyen @kennyadsl DHL / FedEx / GLS / UPS.... all support ZIP Code based remote areas that cost more to ship, we should maybe consider to bring https://github.com/solidusio-contrib/solidus_zip_zones into core and consider it here, it's really universally needed.

Also because the way solidus_zip_zones is intergrated into old backend, we would need to retouch it anyway and it seems to little logic.

Examples of need:

• DHL: https://mydhl.express.dhl/content/dam/downloads/global/en/remote-areas/dhl_express_remote_areas_en.pdf.coredownload.pdf
• UPS: https://www.ups.com/media/en/extended_area_us.pdf
• FedEx: https://www.fedex.com/content/dam/fedex/us-united-states/services/ODA_OPA_ZIP_changes.pdf

[fthobe]

@chaimann some general things around radio buttons and picklists, there's no hard

Accepted standards and best practices in favor of radio buttons:

1. I'd go with radio buttons wherever you need to display complex choices and want the user to be aware of all options from the get go or need a quick choice (eg checkouts to keep the amount of time needed small) as you need only one click and all options are visible immediately;
2. Go with picklists when the lists are more than 6-8 items as the consumption of space can become annoying;
3. Generally consider that the only tangible advantage of a picklist is use of space and visibility of choice, it's neither more comfortable (more clicks) nor clearer in the selection process (less visibility of options), so it's ideal per options not frequently changing when you for a clean UI / UX.

The reason why i'd go with a picklist here is that there might be endless reasons to change and adapt zones.

[tvdeyen]

@tvdeyen @kennyadsl DHL / FedEx / GLS / UPS.... all support ZIP Code based remote areas that cost more to ship, we should maybe consider to bring https://github.com/solidusio-contrib/solidus_zip_zones into core and consider it here, it's really universally needed.

Also because the way solidus_zip_zones is intergrated into old backend, we would need to retouch it anyway and it seems to little logic.

Examples of need:

• DHL: https://mydhl.express.dhl/content/dam/downloads/global/en/remote-areas/dhl_express_remote_areas_en.pdf.coredownload.pdf
• UPS: https://www.ups.com/media/en/extended_area_us.pdf
• FedEx: https://www.fedex.com/content/dam/fedex/us-united-states/services/ODA_OPA_ZIP_changes.pdf

@fthobe please do not hijack existing tickets with tangential information on features you might want in your store. Please create new issues and add references instead. Otherwise it is very hard to track the actual work on a ticket. Thanks!

[fthobe]

@fthobe please do not hijack existing tickets with tangential information on features you might want in your store. Please create new issues and add references instead. Otherwise it is very hard to track the actual work on a ticket. Thanks!

Ok, sorry.