Make country and state a dropdown in shipping info section

[andrii-balitskyi]

Closes #87

• Add country dropdown
• Add state dropdown

Kapture.2024-10-22.at.13.50.31.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Updated (UTC)
snippets	⬜️ Ignored (Inspect)	Visit Preview	Oct 22, 2024 11:50am

[seveibar]

Cool. Is it possible to type in the state/country? Just a pet peeve when it's a forced dropdown and not a dropdown or type search.

Next step is to load this from the server via /accounts/get_shipping_info and set it with update_shipping_info

[seveibar]

Can we make the order of the fields more conventional

Id also recommend we do country first

[andrii-balitskyi]

Cool. Is it possible to type in the state/country? Just a pet peeve when it's a forced dropdown and not a dropdown or type search.

@seveibar you can't type but when you hit a key, the select dropdown does go to the choices starting with that letter.
To make it typeable, should I use input tag together with datalist one?

Next step is to load this from the server via /accounts/get_shipping_info and set it with update_shipping_info

I added /accounts/get and /accounts/update endpoints for that as shipping info is stored on accounts. What's the benefit of using separate shipping info endpoints?

[andrii-balitskyi]

@seveibar I end up adding a custom SearchableSelect component. Also, I added some shipping properties to make the fields more conventional as you suggested. I updated the video in the PR description so you can take a look at the updated version. Lmk what you think.

[seveibar]

The design is a bit unconventional, the correct design is like this where you don't have to click the select field: https://react-select.com/home

Even better, shadcn has a builtin component here: https://ui.shadcn.com/docs/components/combobox

Still this is an improvement

[seveibar]

I'd recommend switching to ComboBox, shadcn's builtin

[andrii-balitskyi]

@seveibar switched to ComboBox and updated the video in the PR description

[seveibar]

@andrii-balitskyi FWIW this is still not correct/best practice. The field itself should be a combobox, the combobox should not appear when you select the field