✨(app-impress) select template on pad

We add a template select component to the pad toolbox.
This component is a dropdown that allows the user
to select a template for the pad to add in a PDF.

src/frontend/apps/impress/src/features/pads/pad-tools/components/PadToolBox.tsx

@@ -1,7 +1,10 @@
-import React from 'react';
+import { Select } from '@openfun/cunningham-react';
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Box } from '@/components';
 import { Pad } from '@/features/pads/pad';
+import { TemplatesOrdering, useTemplates } from '@/features/templates';
 
 import PrintToPDFButton from './PrintToPDFButton';
 
@@ -10,9 +13,53 @@ interface PadToolBoxProps {
 }
 
 export const PadToolBox = ({ pad }: PadToolBoxProps) => {
+  const { t } = useTranslation();
+  const { data: templates } = useTemplates({
+    ordering: TemplatesOrdering.BY_CREATED_ON_DESC,
+  });
+  const [templateIdSelected, setTemplateIdSelected] = useState<string>();
+
+  const templateOptions = useMemo(() => {
+    if (!templates?.pages) {
+      return [];
+    }
+
+    const templateOptions = templates.pages
+      .map((page) =>
+        page.results.map((template) => ({
+          label: template.title,
+          value: template.id,
+        })),
+      )
+      .flat();
+
+    if (templateOptions.length) {
+      setTemplateIdSelected(templateOptions[0].value);
+    }
+
+    return templateOptions;
+  }, [templates?.pages]);
+
   return (
-    <Box className="m-b" $align="flex-end">
-      <PrintToPDFButton pad={pad} />
+    <Box
+      className="m-b"
+      $align="center"
+      $direction="row"
+      $gap="1rem"
+      $justify="flex-end"
+    >
+      <Select
+        clearable={false}
+        label={t('Template')}
+        options={templateOptions}
+        value={templateIdSelected}
+        onChange={(options) =>
+          setTemplateIdSelected(options.target.value as string)
+        }
+      />
+      {templateIdSelected && (
+        <PrintToPDFButton pad={pad} templateId={templateIdSelected} />
+      )}
     </Box>
   );
 };

src/frontend/apps/impress/src/features/pads/pad-tools/components/PrintToPDFButton.tsx

@@ -7,15 +7,17 @@ import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Pad, usePadStore } from '@/features/pads/pad';
+import { Template } from '@/features/templates/template';
 
 import { useCreatePdf } from '../api/useCreatePdf';
 import { downloadFile } from '../utils';
 
 interface PrintToPDFButtonProps {
   pad: Pad;
+  templateId: Template['id'];
 }
 
-const PrintToPDFButton = ({ pad }: PrintToPDFButtonProps) => {
+const PrintToPDFButton = ({ pad, templateId }: PrintToPDFButtonProps) => {
   const { t } = useTranslation();
   const [isFetching, setIsFetching] = useState(false);
   const { toast } = useToastProvider();
@@ -64,7 +66,7 @@ const PrintToPDFButton = ({ pad }: PrintToPDFButtonProps) => {
     const body = await editor.blocksToHTMLLossy(editor.document);
 
     createPdf({
-      templateId: '472d0633-20b8-4cb1-998a-1134ade092ba',
+      templateId,
       body,
       body_type: 'markdown',
     });