🚧(app-regie) use mail domain slug in mail domains feature

Stop using mailDomain.id in frontend navigation and mail-domains/
requests. Instead, uses mailDomain slug.

src/frontend/apps/desk/src/features/mail-domains/api/useCreateMailbox.tsx

@@ -1,5 +1,3 @@
-import { UUID } from 'crypto';
-
 import {
   UseMutationOptions,
   useMutation,
@@ -16,14 +14,14 @@ export interface CreateMailboxParams {
   local_part: string;
   secondary_email: string;
   phone_number: string;
-  mailDomainId: UUID;
+  mailDomainSlug: string;
 }
 
 export const createMailbox = async ({
-  mailDomainId,
+  mailDomainSlug,
   ...data
 }: CreateMailboxParams): Promise<void> => {
-  const response = await fetchAPI(`mail-domains/${mailDomainId}/mailboxes/`, {
+  const response = await fetchAPI(`mail-domains/${mailDomainSlug}/mailboxes/`, {
     method: 'POST',
     body: JSON.stringify(data),
   });
@@ -37,7 +35,7 @@ export const createMailbox = async ({
   }
 };
 
-type UseCreateMailboxParams = { domainId: UUID } & UseMutationOptions<
+type UseCreateMailboxParams = { mailDomainSlug: string } & UseMutationOptions<
   void,
   APIError,
   CreateMailboxParams
@@ -49,7 +47,10 @@ export function useCreateMailbox(options: UseCreateMailboxParams) {
     mutationFn: createMailbox,
     onSuccess: (data, variables, context) => {
       void queryClient.invalidateQueries({
-        queryKey: [KEY_LIST_MAILBOX, { id: variables.mailDomainId }],
+        queryKey: [
+          KEY_LIST_MAILBOX,
+          { mailDomainSlug: variables.mailDomainSlug },
+        ],
       });
       if (options?.onSuccess) {
         options.onSuccess(data, variables, context);

src/frontend/apps/desk/src/features/mail-domains/api/useMailDomain.tsx

@@ -5,19 +5,19 @@ import { APIError, errorCauses, fetchAPI } from '@/api';
 import { MailDomain } from '../types';
 
 export type MailDomainParams = {
-  id: string;
+  slug: string;
 };
 
 type MailDomainResponse = MailDomain;
 
 export const getMailDomain = async ({
-  id,
+  slug,
 }: MailDomainParams): Promise<MailDomainResponse> => {
-  const response = await fetchAPI(`mail-domains/${id}`);
+  const response = await fetchAPI(`mail-domains/${slug}`);
 
   if (!response.ok) {
     throw new APIError(
-      `Failed to get the mail domain ${id}`,
+      `Failed to get the mail domain ${slug}`,
       await errorCauses(response),
     );
   }

src/frontend/apps/desk/src/features/mail-domains/api/useMailboxes.tsx

@@ -5,7 +5,7 @@ import { APIError, APIList, errorCauses, fetchAPI } from '@/api';
 import { MailDomainMailbox } from '../types';
 
 export type MailDomainMailboxesParams = {
-  id: string;
+  mailDomainSlug: string;
   page: number;
   ordering?: string;
 };
@@ -13,11 +13,11 @@ export type MailDomainMailboxesParams = {
 type MailDomainMailboxesResponse = APIList<MailDomainMailbox>;
 
 export const getMailDomainMailboxes = async ({
-  id,
+  mailDomainSlug,
   page,
   ordering,
 }: MailDomainMailboxesParams): Promise<MailDomainMailboxesResponse> => {
-  let url = `mail-domains/${id}/mailboxes/?page=${page}`;
+  let url = `mail-domains/${mailDomainSlug}/mailboxes/?page=${page}`;
 
   if (ordering) {
     url += '&ordering=' + ordering;
@@ -27,7 +27,7 @@ export const getMailDomainMailboxes = async ({
 
   if (!response.ok) {
     throw new APIError(
-      `Failed to get the mailboxes of mail domain ${id}`,
+      `Failed to get the mailboxes of mail domain ${mailDomainSlug}`,
       await errorCauses(response),
     );
   }

src/frontend/apps/desk/src/features/mail-domains/components/MailDomainsContent.tsx

@@ -46,10 +46,11 @@ function formatSortModel(
 
 export function MailDomainsContent({ mailDomain }: { mailDomain: MailDomain }) {
   const [sortModel, setSortModel] = useState<SortModel>([]);
-  const { t } = useTranslation();
   const [isCreateMailboxFormVisible, setIsCreateMailboxFormVisible] =
     useState(false);
 
+  const { t } = useTranslation();
+
   const pagination = usePagination({
     defaultPage: 1,
     pageSize: PAGE_SIZE,
@@ -59,7 +60,7 @@ export function MailDomainsContent({ mailDomain }: { mailDomain: MailDomain }) {
   const ordering = sortModel.length ? formatSortModel(sortModel[0]) : undefined;
 
   const { data, isLoading, error } = useMailboxes({
-    id: mailDomain.id,
+    mailDomainSlug: mailDomain.slug,
     page,
     ordering,
   });

src/frontend/apps/desk/src/features/mail-domains/components/forms/CreateMailboxForm.tsx

@@ -60,7 +60,7 @@ export const CreateMailboxForm = ({
   });
 
   const { mutate: createMailbox, ...queryState } = useCreateMailbox({
-    domainId: mailDomain.id,
+    mailDomainSlug: mailDomain.slug,
     onSuccess: () => {
       toast(t('Mailbox created!'), VariantType.SUCCESS, {
         duration: 4000,
@@ -75,7 +75,7 @@ export const CreateMailboxForm = ({
   const onSubmitCallback = (event: React.FormEvent) => {
     event.preventDefault();
     void methods.handleSubmit((data) =>
-      createMailbox({ ...data, mailDomainId: mailDomain.id }),
+      createMailbox({ ...data, mailDomainSlug: mailDomain.slug }),
     )();
   };
 

src/frontend/apps/desk/src/features/mail-domains/components/panel/PanelItem.tsx

@@ -15,10 +15,10 @@ export const PanelMailDomains = ({ mailDomain }: MailDomainProps) => {
   const { colorsTokens } = useCunninghamTheme();
   const { t } = useTranslation();
   const {
-    query: { id },
+    query: { slug },
   } = useRouter();
 
-  const isActive = mailDomain.id === id;
+  const isActive = mailDomain.slug === slug;
 
   const activeStyle = `
     border-right: 4px solid ${colorsTokens()['primary-600']};
@@ -51,7 +51,7 @@ export const PanelMailDomains = ({ mailDomain }: MailDomainProps) => {
     >
       <StyledLink
         className="p-s pt-t pb-t"
-        href={`/mail-domains/${mailDomain.id}`}
+        href={`/mail-domains/${mailDomain.slug}`}
       >
         <Box $align="center" $direction="row" $gap="0.5rem">
           <IconMailDomains

src/frontend/apps/desk/src/features/mail-domains/types.tsx

@@ -5,6 +5,7 @@ export interface MailDomain {
   name: string;
   created_at: string;
   updated_at: string;
+  slug: string;
 }
 
 export interface MailDomainMailbox {

src/frontend/apps/desk/src/pages/mail-domains/[slug].tsx

@@ -12,11 +12,11 @@ import { NextPageWithLayout } from '@/types/next';
 const Page: NextPageWithLayout = () => {
   const router = useRouter();
 
-  if (router?.query?.id && typeof router.query.id !== 'string') {
-    throw new Error('Invalid mail domain id');
+  if (router?.query?.slug && typeof router.query.slug !== 'string') {
+    throw new Error('Invalid mail domain slug');
   }
 
-  const { id } = router.query;
+  const { slug } = router.query;
 
   const navigate = useNavigate();
 
@@ -25,7 +25,7 @@ const Page: NextPageWithLayout = () => {
     error: error,
     isError,
     isLoading: isLoading,
-  } = useMailDomain({ id: String(id) });
+  } = useMailDomain({ slug: String(slug) });
 
   if (error?.status === 404) {
     navigate.replace(`/404`);