feat(members): add wordpress orders link below description

src/components/layout/NavigationDrawer.vue

@@ -12,7 +12,7 @@
           item.active
             ? 'bg-amber-600 text-white'
             : 'text-amber-100 hover:bg-amber-600 hover:text-white',
-          'group flex w-full flex-col items-center rounded-md p-3 text-xs font-medium no-underline',
+          'group flex w-full flex-col items-center rounded-md p-3 text-xs font-medium no-underline transition-colors',
         ]"
         :to="item.to">
         <SvgIcon

src/i18n/locales/en-GB/members.json

@@ -153,6 +153,7 @@
         "fail": "Unable to synchronize {name}",
         "success": "{name} synchronized"
       },
+      "orders": "View orders",
       "sync": "Synchronize",
       "title": "Sync with WordPress"
     }

src/i18n/locales/fr-FR/members.json

@@ -153,6 +153,7 @@
         "fail": "Impossible de synchroniser {name}",
         "success": "{name} synchronisé"
       },
+      "orders": "Consulter les commandes",
       "sync": "Synchroniser",
       "title": "Synchronisation avec Wordpress"
     }

src/services/api/members.ts

@@ -102,6 +102,13 @@ export const buildMemberWordpressProfileUrl = (wordpressUserId: number) => {
   ).toString();
 };
 
+export const buildMemberWordpressOrdersUrl = (wordpressUserId: number) => {
+  return new URL(
+    `/wp-admin/edit.php?s&post_status=all&post_type=shop_order&_customer_user=${wordpressUserId}`,
+    import.meta.env.VUE_APP_WORDPRESS_BASE_URL,
+  ).toString();
+};
+
 export const getMemberAuditEvents = (id: string): Promise<AuditEvent[]> => {
   return HTTP.get(`/api/members/${id}/audit`).then(({ data }) => data);
 };

src/views/Private/Members/MembersDetail.vue

@@ -256,10 +256,26 @@
         </template>
       </SectionRow>
 
-      <SectionRow
-        class="mt-16 px-3 sm:px-0"
-        :description="$t('members.detail.orders.description')"
-        :title="$t('members.detail.orders.title')">
+      <SectionRow class="mt-16 px-3 sm:px-0" :title="$t('members.detail.orders.title')">
+        <template #description>
+          <p class="mt-1 whitespace-pre-line text-sm text-gray-500">
+            {{ $t('members.detail.orders.description') }}
+          </p>
+
+          <a
+            v-if="!isNil(member.wpUserId)"
+            class="group mt-5 flex flex-row items-center gap-x-3 self-start rounded-md border border-transparent px-4 py-2 font-medium text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:text-sm"
+            :href="buildMemberWordpressOrdersUrl(member.wpUserId)"
+            target="_blank">
+            <SvgIcon
+              aria-hidden="true"
+              class="size-5 text-indigo-500 group-hover:text-indigo-700"
+              :path="mdiOpenInNew"
+              type="mdi" />
+            <span>{{ $t('members.detail.wordpress.orders') }}</span>
+          </a>
+        </template>
+
         <div class="flex min-h-full flex-row flex-wrap items-stretch gap-3">
           <TicketsListPanel
             class="max-h-[40rem] min-w-64 shrink grow basis-0"
@@ -360,16 +376,22 @@ import SideDialog from '@/components/layout/SideDialog.vue';
 import { formatAmount, fractionAmount } from '@/helpers/currency';
 import { isSilentError } from '@/helpers/errors';
 import { ROUTE_NAMES } from '@/router/names';
-import { Attendance, getMember, getMemberActivity } from '@/services/api/members';
+import {
+  Attendance,
+  buildMemberWordpressOrdersUrl,
+  getMember,
+  getMemberActivity,
+} from '@/services/api/members';
 import { Subscription, getAllMemberSubscriptions } from '@/services/api/subscriptions';
 import { Ticket, getAllMemberTickets } from '@/services/api/tickets';
 import { useNotificationsStore } from '@/store/notifications';
 import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue';
-import { mdiAccountCircle, mdiInformationOutline } from '@mdi/js';
+import { mdiAccountCircle, mdiInformationOutline, mdiOpenInNew } from '@mdi/js';
 import { useQuery } from '@tanstack/vue-query';
 import { useHead } from '@unhead/vue';
 import { Head } from '@unhead/vue/components';
 import dayjs from 'dayjs';
+import { isNil } from 'lodash';
 import { computed, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';