From 0a484f28ba3dae4e3b39b0be8b92f272f6641dc3 Mon Sep 17 00:00:00 2001 From: Maciej <7597086+mdanilowicz@users.noreply.github.com> Date: Thu, 15 Jun 2023 19:20:15 +0200 Subject: [PATCH 01/14] feat: add state --- .../api-client/src/services/contextService.ts | 8 +- packages/composables/src/useCountries.ts | 12 +- packages/composables/src/useState.ts | 0 .../shared/SharedCountryStateInput.vue | 109 ++++++++++++++++++ templates/vue-demo-store/i18n/pl-PL/form.json | 4 +- .../vue-demo-store/pages/checkout/index.vue | 31 +---- 6 files changed, 135 insertions(+), 29 deletions(-) create mode 100644 packages/composables/src/useState.ts create mode 100644 templates/vue-demo-store/components/shared/SharedCountryStateInput.vue diff --git a/packages/api-client/src/services/contextService.ts b/packages/api-client/src/services/contextService.ts index 2a092515a..5a3ec5f43 100644 --- a/packages/api-client/src/services/contextService.ts +++ b/packages/api-client/src/services/contextService.ts @@ -182,9 +182,13 @@ export async function setCurrentLanguage( export async function getAvailableCountries( contextInstance: ShopwareApiInstance = defaultInstance ): Promise> { - const { data } = await contextInstance.invoke.get< + const { data } = await contextInstance.invoke.post< EntityResult<"country", Country> - >(getContextCountryEndpoint()); + >(getContextCountryEndpoint(), { + associations: { + states: {}, + }, + }); return data; } diff --git a/packages/composables/src/useCountries.ts b/packages/composables/src/useCountries.ts index dfb5e981e..d6c1e5f1a 100644 --- a/packages/composables/src/useCountries.ts +++ b/packages/composables/src/useCountries.ts @@ -8,13 +8,14 @@ import { provide, } from "vue"; import { getAvailableCountries } from "@shopware-pwa/api-client"; -import { Country } from "@shopware-pwa/types"; +import { Country, CountryState } from "@shopware-pwa/types"; import { useShopwareContext } from "./useShopwareContext"; export type UseCountriesReturn = { mountedCallback(): Promise; getCountries: ComputedRef; fetchCountries(): Promise; + getStatesForCountry(countryId: string): CountryState | null; }; /** @@ -43,11 +44,20 @@ export function useCountries(): UseCountriesReturn { } }; + const getStatesForCountry = (countryId: string) => { + return ( + getCountries.value.find((element: Country) => { + return element.id === countryId; + })?.states || null + ); + }; + onMounted(mountedCallback); return { mountedCallback, fetchCountries, + getStatesForCountry, getCountries, }; } diff --git a/packages/composables/src/useState.ts b/packages/composables/src/useState.ts new file mode 100644 index 000000000..e69de29bb diff --git a/templates/vue-demo-store/components/shared/SharedCountryStateInput.vue b/templates/vue-demo-store/components/shared/SharedCountryStateInput.vue new file mode 100644 index 000000000..b31997c6f --- /dev/null +++ b/templates/vue-demo-store/components/shared/SharedCountryStateInput.vue @@ -0,0 +1,109 @@ + + + + + diff --git a/templates/vue-demo-store/i18n/pl-PL/form.json b/templates/vue-demo-store/i18n/pl-PL/form.json index 4670a1cf8..bfd0fe681 100644 --- a/templates/vue-demo-store/i18n/pl-PL/form.json +++ b/templates/vue-demo-store/i18n/pl-PL/form.json @@ -24,6 +24,8 @@ "save": "Zapisz", "submit": "Zatwierdź", "promoCodePlaceholder": "Wpisz kod promocyjny", - "searchPlaceholder": "Szukaj produktów" + "searchPlaceholder": "Szukaj produktów", + "chooseState": "Wybierz stan", + "state": "Stan" } } diff --git a/templates/vue-demo-store/pages/checkout/index.vue b/templates/vue-demo-store/pages/checkout/index.vue index bfe9f7d1c..ff5c3c8f3 100644 --- a/templates/vue-demo-store/pages/checkout/index.vue +++ b/templates/vue-demo-store/pages/checkout/index.vue @@ -112,6 +112,7 @@ const state = reactive({ zipcode: "", city: "", countryId: "", + stateId: "", }, customShipping: false, }); @@ -494,31 +495,11 @@ const addAddressModalController = useModal(); -
- - - - {{ $v.billingAddress.city.$errors[0].$message }} - -
+
-
- - -
- +