[3.x] Region select

lang/nl.json

@@ -67,6 +67,7 @@
     "Quantity": "Hoeveelheid",
     "Increase": "Verhogen",
     "Decrease": "Verlagen",
+    "Region": "Regio",
     "Related products": "Gerelateerde producten",
     "Remove": "Verwijderen",
     "Repeat password": "Wachtwoord herhalen",

package.json

@@ -27,7 +27,7 @@
         "rollup": "^4.24.0",
         "rollup-plugin-visualizer": "^5.9.0",
         "tailwind-scrollbar-hide": "^1.1.7",
-        "tailwindcss": "^3.3.3",
+        "tailwindcss": "^3.4",
         "universal-cookie": "^7.1.4",
         "vite": "^5.0",
         "vue": "^2.7",

resources/views/cart/queries/fragments/cart.graphql

@@ -61,7 +61,7 @@ fragment cart on Cart {
         street
         city
         region {
-            code
+            region_id
             label
         }
         postcode

resources/views/checkout/partials/address.blade.php

@@ -145,18 +145,33 @@
                 />
             </label>
         </div>
-        <div class="col-span-12 sm:col-span-6">
+        <div class="col-span-12 sm:col-span-6 sm:col-start-1">
             <label>
                 <x-rapidez::label>@lang('Country')</x-rapidez::label>
                 <x-rapidez::input.select.country
                     name="{{ $type }}_country"
                     dusk="{{ $type }}_country"
                     v-model="variables.country_code"
-                    v-on:change="$root.$nextTick(() => window.app.$emit('postcode-change', variables))"
+                    v-on:change="$root.$nextTick(() => {
+                        window.app.$emit('postcode-change', variables);
+                        variables.region_id = null
+                    })"
                     required
                 />
             </label>
         </div>
+        <div class="col-span-12 sm:col-span-6 has-[.exists]:block hidden">
+            <label>
+                <x-rapidez::label>@lang('Region')</x-rapidez::label>
+                <x-rapidez::input.select.region
+                    class="exists"
+                    name="{{ $type }}_region"
+                    dusk="{{ $type }}_region"
+                    country="variables.country_code"
+                    v-model="variables.region_id"
+                />
+            </label>
+        </div>
         @if (Rapidez::config('customer/address/telephone_show', 'req'))
             <div class="col-span-12 sm:col-span-6 sm:col-start-1">
                 <label>

resources/views/checkout/queries/fragments/orderV2.graphql

@@ -26,6 +26,7 @@ fragment orderV2 on CustomerOrder {
         telephone
         fax
         country_code
+        region
     }
     shipping_address {
         prefix
@@ -40,6 +41,7 @@ fragment orderV2 on CustomerOrder {
         telephone
         fax
         country_code
+        region
     }
     items {
         ...orderItem

resources/views/checkout/queries/setBillingAddressOnCart.graphql

@@ -10,6 +10,7 @@ mutation (
     $street: [String]!,
     $city: String!,
     $country_code: String!,
+    $region_id: Int,
     $telephone: String,
     $fax: String,
     $company: String,
@@ -31,6 +32,7 @@ mutation (
                 street: $street,
                 city: $city,
                 country_code: $country_code,
+                region_id: $region_id,
                 telephone: $telephone,
                 fax: $fax,
                 company: $company,

resources/views/checkout/queries/setNewBillingAddressOnCart.graphql

@@ -10,6 +10,7 @@ mutation setNewBillingAddressOnCart (
     $street: [String]!,
     $city: String!,
     $country_code: String!,
+    $region_id: Int,
     $telephone: String,
     $fax: String,
     $company: String,
@@ -29,6 +30,7 @@ mutation setNewBillingAddressOnCart (
                 street: $street,
                 city: $city,
                 country_code: $country_code,
+                region_id: $region_id,
                 telephone: $telephone,
                 fax: $fax,
                 company: $company,

resources/views/checkout/queries/setNewShippingAddressesOnCart.graphql

@@ -9,6 +9,7 @@ mutation setNewShippingAddressOnCart (
     $street: [String]!,
     $city: String!,
     $country_code: String!,
+    $region_id: Int,
     $telephone: String,
     $fax: String,
     $company: String,
@@ -28,6 +29,7 @@ mutation setNewShippingAddressOnCart (
                     street: $street,
                     city: $city,
                     country_code: $country_code,
+                    region_id: $region_id,
                     telephone: $telephone,
                     fax: $fax,
                     company: $company,

resources/views/checkout/steps/billing_address.blade.php

@@ -5,7 +5,8 @@
         ...window.address_defaults,
         ...cart.billing_address,
         same_as_shipping: !cart.is_virtual && (cart?.billing_address?.same_as_shipping ?? true),
-        country_code: cart.billing_address?.country.code || window.address_defaults.country_code
+        country_code: cart.billing_address?.country.code || window.address_defaults.country_code,
+        region_id: cart.billing_address?.region.region_id || window.address_defaults.region_id,
     }))"
     :before-request="(query, variables, options) => [variables.customer_address_id ? config.queries.setExistingBillingAddressOnCart : query, variables, options]"
     :callback="updateCart"

resources/views/checkout/steps/shipping_address.blade.php

@@ -4,7 +4,8 @@
         cart_id: mask,
         ...window.address_defaults,
         ...cart.shipping_addresses[0],
-        country_code: cart.shipping_addresses[0]?.country.code || window.address_defaults.country_code
+        country_code: cart.shipping_addresses[0]?.country.code || window.address_defaults.country_code,
+        region_id: cart.shipping_addresses[0]?.region.region_id || window.address_defaults.region_id,
     }"
     group="shipping"
     :before-request="(query, variables, options) => [variables.customer_address_id ? config.queries.setExistingShippingAddressesOnCart : query, variables, options]"

resources/views/components/input/select/country.blade.php

@@ -1,7 +1,7 @@
 <graphql query="{ countries { two_letter_abbreviation full_name_locale } }" cache="countries">
     <div v-if="data" slot-scope="{ data }">
         <x-rapidez::input.select {{ $attributes }}>
-            <option v-for="country in Object.values(data.countries).sort((a, b) => a.full_name_locale.localeCompare(b.full_name_locale))" :value="country.two_letter_abbreviation.toUpperCase()">
+            <option v-for="country in Object.values(data.countries).filter(country => country.full_name_locale).sort((a, b) => a.full_name_locale.localeCompare(b.full_name_locale))" :value="country.two_letter_abbreviation.toUpperCase()">
                 @{{ country.full_name_locale }}
             </option>
         </x-rapidez::input.select>

resources/views/components/input/select/region.blade.php

@@ -0,0 +1,22 @@
+@props(['country'])
+<graphql
+    v-if="{{ $country }}"
+    query="query country($id: String) { country(id: $id) { available_regions { code id name } } }"
+    v-bind:variables="{ id: {{ $country }} }"
+    v-bind:cache="'regions_' + {{ $country }}"
+    v-bind:key="{{ $country }}"
+>
+    <div class="contents" slot-scope="{ data }">
+        <template v-if="data && data.country.available_regions">
+            <x-rapidez::input.select
+                {{ $attributes }}
+                v-if="{{ Rapidez::config('general/region/display_all', '0') }} || '{{ Rapidez::config('general/region/state_required') }}'.split(',').includes({{ $country }})"
+                v-bind:required="'{{ Rapidez::config('general/region/state_required') }}'.split(',').includes({{ $country }})"
+            >
+                <option v-for="region in data.country.available_regions.toSorted((a, b) => a.name.localeCompare(b.name))" :value="region.id">
+                    @{{ region.name }}
+                </option>
+            </x-rapidez::input.select>
+        </template>
+    </div>
+</graphql>