[4.x] Remove address card in account centre and show it basic in a table

.github/workflows/playwright.yml

@@ -80,6 +80,7 @@ jobs:
         with:
           repository: rapidez/rapidez
           path: rapidez/rapidez
+          ref: 4.x
 
       - uses: actions/setup-node@v4
         with:

resources/views/account/address-edit.blade.php

@@ -10,13 +10,14 @@
             query="{ customer { addresses { id firstname middlename lastname street city postcode country_code region { region_id } telephone company vat_id default_billing default_shipping } } }"
             :check="(data) => data.customer?.addresses.find(a => a.id == {{ request()->id }})"
             redirect="{{ route('account.edit') }}"
+            v-slot="{ data }"
         >
-            <div v-if="data && data?.customer?.addresses" slot-scope="{ data }">
+            <div v-if="data && data?.customer?.addresses">
                 <graphql-mutation
                     query="@include('rapidez::account.partials.queries.address-edit')"
                     :variables="data.customer.addresses.find(a => a.id == {{ request()->id }})"
                     :callback="refreshUserInfoCallback"
-                    redirect="{{ route('account.addresses') }}"
+                    redirect="{{ route('account.edit') }}"
                 >
                     @include('rapidez-ct::account.partials.address-form', ['region' => 'region.region_id'])
                 </graphql-mutation>

resources/views/account/address-new.blade.php

@@ -11,7 +11,7 @@
             :variables="{ street: [] }"
             :watch="false"
             :callback="refreshUserInfoCallback"
-            redirect="{{ route('account.addresses') }}"
+            redirect="{{ route('account.edit') }}"
         >
             @include('rapidez-ct::account.partials.address-form', ['region' => 'region.region_id'])
         </graphql-mutation>

resources/views/account/edit.blade.php

@@ -5,8 +5,8 @@
 @section('robots', 'NOINDEX,NOFOLLOW')
 
 @section('account-content')
-    <graphql query="@include('rapidez::account.partials.queries.overview')" :callback="sortOrdersCallback">
-        <div v-if="data" slot-scope="{ data, runQuery }">
+    <graphql query="@include('rapidez::account.partials.queries.overview')" :callback="sortOrdersCallback" v-slot="{ data, runQuery }">
+        <div v-if="data">
             <x-rapidez-ct::sections>
                 <x-rapidez-ct::card.inactive>
                     @include('rapidez-ct::account.partials.sections.edit.addresses')

resources/views/account/order.blade.php

@@ -33,7 +33,7 @@
                 <x-rapidez::button.outline href="/account/orders">
                     @lang('Back to my orders')
                 </x-rapidez::button.outline>
-                <span class="text-muted">
+                <span class="text-muted w-full" data-testid="masked">
                     @lang('Order date'): @{{ (new Date(order.order_date)).toLocaleDateString() }}
                 </span>
             </x-rapidez-ct::toolbar>

resources/views/account/partials/additional-addresses.blade.php

@@ -0,0 +1,71 @@
+<graphql query="{ customer { addresses { id firstname middlename lastname street city postcode country_code telephone default_billing default_shipping } } }" v-slot="{ data }">
+    <div v-if="data">
+        <div :set="data.customer.additionalAddresses = data.customer.addresses.filter(a => a.default_billing == false && a.default_shipping == false)">
+            <h2 class="mt-4 mb-2 text-lg font-medium">@lang('Additional address entries')</h2>
+            <div v-if="data?.customer?.additionalAddresses?.length" class="w-full overflow-auto">
+                <table class="bg-white border p-2 w-full table-auto text-left">
+                    <thead>
+                        <tr>
+                            <th class="px-4 py-2">@lang('Firstname')</th>
+                            @if (Rapidez::config('customer/address/middlename_show', 0))
+                                <th class="px-4 py-2">@lang('Middlename')</th>
+                            @endif
+                            <th class="px-4 py-2">@lang('Lastname')</th>
+                            <th class="px-4 py-2">@lang('Address')</th>
+                            <th class="px-4 py-2">@lang('Postcode')</th>
+                            <th class="px-4 py-2">@lang('City')</th>
+                            <th class="px-4 py-2">@lang('Region')</th>
+                            <th class="px-4 py-2">@lang('Country')</th>
+                            <th class="px-4 py-2">@lang('Phone')</th>
+                            <th></th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="additionalAddress in data.customer.additionalAddresses">
+                            <td class="border-t px-4 py-2">@{{ additionalAddress.firstname }}</td>
+                            @if (Rapidez::config('customer/address/middlename_show', 0))
+                                <td class="border-t px-4 py-2">@{{ additionalAddress.middlename }}</td>
+                            @endif
+                            <td class="border-t px-4 py-2">@{{ additionalAddress.lastname }}</td>
+                            <td class="border-t px-4 py-2">@{{ additionalAddress.street[0] }} @{{ additionalAddress.street[1] }} @{{ additionalAddress.street[2] }} @{{ additionalAddress.street[3] }}</td>
+                            <td class="border-t px-4 py-2">@{{ additionalAddress.postcode }}</td>
+                            <td class="border-t px-4 py-2">@{{ additionalAddress.city }}</td>
+                            <td class="border-t px-4 py-2">@{{ additionalAddress.region?.region }}</td>
+                            <td class="border-t px-4 py-2">@{{ additionalAddress.country_code }}</td>
+                            @if (Rapidez::config('customer/address/telephone_show', 'opt'))
+                                <td class="border-t px-4 py-2">@{{ additionalAddress.telephone }}</td>
+                            @endif
+                            <td class="border-t px-4 py-2">
+                                <a :href="'/account/address/' + additionalAddress.id | url" data-testid="address-edit">
+                                    <x-heroicon-o-pencil-square class="size-4 shrink-0" />
+                                </a>
+                            </td>
+                            <td class="border-t px-4 py-2">
+                                <graphql-mutation
+                                    query="mutation deleteCustomerAddress($id: Int!){ deleteCustomerAddress ( id: $id ) }"
+                                    :variables="{ id: additionalAddress.id }"
+                                    :callback="refreshUserInfoCallback"
+                                    redirect="{{ route('account.edit') }}"
+                                >
+                                    <div class="flex items-center size-4" slot-scope="{ mutate }">
+                                        <button v-on:click="mutate" data-testid="address-delete">
+                                            <x-heroicon-o-trash class="size-4 shrink-0 text-red-600" />
+                                        </button>
+                                    </div>
+                                </graphql-mutation>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div v-else>
+                @lang('You have no other address entries in your address book.')
+            </div>
+
+            <x-rapidez::button.secondary :href="route('account.address.create')" class="mt-5">
+                @lang('Add new address')
+            </x-rapidez::button.secondary>
+        </div>
+    </div>
+</graphql>

resources/views/account/partials/address-cards.blade.php

@@ -10,10 +10,6 @@
                 </x-rapidez-ct::button.link>
             </x-rapidez-ct::card.address>
         </template>
-        <a href="/account/address/new" class="min-h-44 flex flex-col items-center justify-center gap-y-2 font-medium bg-emphasis rounded max-md:hidden">
-            <span>+</span>
-            <span>@lang('Add a new address')</span>
-        </a>
     </template>
     <template v-else>
         <x-rapidez-ct::card.address v-bind:address="data.customer.shipping_address" shipping check>
@@ -28,11 +24,3 @@
         </x-rapidez-ct::card.address>
     </template>
 </div>
-<div class="flex flex-wrap gap-3">
-    <x-rapidez::button.secondary :href="route('account.address.create')">
-        @lang('Add a new address')
-    </x-rapidez::button.secondary>
-    <x-rapidez::button.secondary tag="label" for="popup" v-if="data?.customer?.addresses?.length">
-        @lang('My addresses')
-    </x-rapidez::button.secondary>
-</div>

resources/views/account/partials/default-addresses.blade.php

@@ -23,7 +23,7 @@
             </div>
             <a href="{{ route('account.edit') }}" class="font-medium">
                 <span>@lang('Account settings')</span>
-                <x-heroicon-o-cog class="size-6 stroke-2" />
+                <x-heroicon-o-cog class="size-6 stroke-[1.5px]" />
             </a>
         </x-rapidez-ct::separated-listing>
     </x-rapidez-ct::card>

resources/views/account/partials/layout.blade.php

@@ -12,7 +12,7 @@
 @endphp
 
 @section('content')
-    <div v-cloak class="container" data-testid="account-content">
+    <div v-cloak class="container overflow-hidden" data-testid="account-content">
         <template v-if="loggedIn">
             @hasSection('title')
                 <x-rapidez-ct::title class="mb-5" tag="h1">

resources/views/account/partials/orders.blade.php

@@ -3,17 +3,17 @@
         <x-rapidez-ct::sections>
             <a class="block" v-for="order in data.customer.orders.items" :href="'/account/order/' + order.number" data-testid="order-id">
                 <x-rapidez-ct::card.inactive class="flex-col">
-                    <x-rapidez-ct::title.lg>
+                    <x-rapidez-ct::title.lg data-testid="masked">
                         @lang('Order') #@{{ order.number }}
                     </x-rapidez-ct::title.lg>
                     <x-rapidez-ct::card.white class="mt-5 flex flex-wrap items-center gap-x-3 md:gap-x-8">
                         <x-heroicon-s-shopping-cart class="size-5 text-muted" />
-                        <div class="flex flex-col">
+                        <div class="flex flex-col flex-1">
                             <span class="font-medium">
                                 @lang('Number of products')
                                 (@{{ order.items.length }})
                             </span>
-                            <span class="text-muted">
+                            <span class="text-muted" data-testid="masked">
                                 @lang('Total price'): @{{ order.total.grand_total.value | price }}
                                 /
                                 @lang('Order date'): @{{ (new Date(order.order_date)).toLocaleDateString() }}

resources/views/account/partials/sections/edit/addresses.blade.php

@@ -4,5 +4,5 @@
     v-bind:set-shipping="data.customer.shipping_address = data.customer.addresses.find(e => e.default_shipping)"
 >
     @include('rapidez-ct::account.partials.address-cards')
-    @include('rapidez-ct::account.partials.address-cards-popup')
+    @include('rapidez-ct::account.partials.additional-addresses')
 </div>

resources/views/components/address-form.blade.php

@@ -4,13 +4,14 @@
 <div class="grid grid-cols-12 gap-5">
     @if($showList)
         <div class="col-span-12" v-if="$root.loggedIn">
-            <graphql query="{ customer { addresses { id firstname lastname street city postcode country_code } } }">
+            <graphql query="{ customer { addresses { id firstname lastname street city postcode company country_code } } }">
                 <div v-if="data" slot-scope="{ data }">
                     <x-rapidez::input.select v-model="variables.customer_address_id" data-testid="{{ $type }}-address-select">
                         <option v-for="address in data.customer.addresses" :value="address.id">
                             @{{ address.firstname }} @{{ address.lastname }}
                             - @{{ address.street[0] }} @{{ address.street[1] }} @{{ address.street[2] }}
                             - @{{ address.postcode }}
+                            <template v-if="address.company">- @{{ address.company }}</template>
                             - @{{ address.city }}
                             - @{{ address.country_code }}
                         </option>

resources/views/components/dashboard/item/index.blade.php

@@ -5,7 +5,7 @@
     'is' => isset($item['href']) ? 'a' : 'button',
 ]) }}>
     @if ($item['icon'] ?? false)
-        <x-icon name="{{ $item['icon'] }}" class="size-6 stroke-2"/>
+        <x-icon name="{{ $item['icon'] }}" class="size-6 stroke-[1.5px]"/>
     @endif
     <div class="flex flex-col gap-y-1">
         @if ($item['heading'] ?? false)

resources/views/components/layout/index.blade.php

@@ -1,7 +1,5 @@
-@slots(['sidebar'])
-
-<div {{ $attributes->class('text flex flex-wrap gap-8 text-sm max-lg:flex-col') }}>
-    <div class="flex-1">
+<div {{ $attributes->class('text flex gap-8 text-sm max-lg:flex-col') }}>
+    <div class="flex-1 max-w-full overflow-hidden">
         {{ $slot }}
     </div>
     <x-rapidez-ct::layout.sidebar :attributes="$sidebar->attributes">

tests/playwright/account.spec.js

@@ -1,2 +1,2 @@
-// Run the register tests from rapidez/account
+// Run the register tests from rapidez/account when this is updated in 5.x
 // import '@rapidez/account/tests/playwright/account.spec.js'