From a4c5ede05eb842bc331c5276ce3e3bd40d23cf0d Mon Sep 17 00:00:00 2001
From: Andrea Gueugnaut <andrea.gueugnaut@gmail.com>
Date: Wed, 15 Jan 2025 16:46:25 +0100
Subject: [PATCH] refactor(frontend): remove inbox

---
 .../src/components/Inbox/InboxMessageList.tsx | 166 ------------------
 .../src/components/Inbox/InboxSidemenu.tsx    | 134 --------------
 .../Inbox/inbox-message-list.module.scss      |  39 ----
 .../Inbox/inbox-sidemenu.module.scss          |  26 ---
 4 files changed, 365 deletions(-)
 delete mode 100644 frontend/src/components/Inbox/InboxMessageList.tsx
 delete mode 100644 frontend/src/components/Inbox/InboxSidemenu.tsx
 delete mode 100644 frontend/src/components/Inbox/inbox-message-list.module.scss
 delete mode 100644 frontend/src/components/Inbox/inbox-sidemenu.module.scss

diff --git a/frontend/src/components/Inbox/InboxMessageList.tsx b/frontend/src/components/Inbox/InboxMessageList.tsx
deleted file mode 100644
index 8548257ea..000000000
--- a/frontend/src/components/Inbox/InboxMessageList.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import { Col, Row, Table, Text } from '../_dsfr';
-import classNames from 'classnames';
-import { Selection, useSelection } from '../../hooks/useSelection';
-import { OwnerProspect, OwnerProspectSort } from '../../models/OwnerProspect';
-import styles from './inbox-message-list.module.scss';
-import { dateShortFormatWithMinutes } from '../../utils/dateUtils';
-import { useSort } from '../../hooks/useSort';
-import ExtendedToggle from '../ExtendedToggle/ExtendedToggle';
-import AppLinkAsButton from '../_app/AppLinkAsButton/AppLinkAsButton';
-import { pluralize } from '../../utils/stringUtils';
-import AppCheckbox from '../_app/AppCheckbox/AppCheckbox';
-
-interface Props {
-  messages: OwnerProspect[];
-  onChange?: (ownerProspect: OwnerProspect) => void;
-  onDisplay?: (ownerProspect: OwnerProspect) => void;
-  onSelect?: (selection: Selection) => void;
-  onSort?: (sort: OwnerProspectSort) => void | Promise<void>;
-}
-
-function InboxMessageList(props: Props) {
-  const { getSortButton } = useSort<OwnerProspectSort>({
-    onSort: props.onSort,
-  });
-
-  const total = props.messages.length;
-  const unread = props.messages.filter((message) => !message.read).length;
-  const selection = useSelection(total);
-
-  function splitAddress(fullAddress: string): string[] {
-    const zipcode = fullAddress.search(/\d{5}/);
-    return zipcode >= 0
-      ? [fullAddress.substring(0, zipcode), fullAddress.substring(zipcode)]
-      : [fullAddress];
-  }
-
-  const columns = [
-    {
-      name: 'select',
-      headerRender: () => (
-        <AppCheckbox
-          checked={selection.hasSelected}
-          className={selection.selected.ids.length > 0 ? 'indeterminate' : ''}
-          label=""
-          onChange={() => selection.toggleSelectAll()}
-        />
-      ),
-      render: ({ id }: { id: string }) => (
-        <AppCheckbox
-          checked={selection.isSelected(id)}
-          label=""
-          onChange={() => selection.toggleSelect(id)}
-          value={id}
-        />
-      ),
-    },
-    {
-      name: 'address',
-      headerRender: () => getSortButton('address', 'Adresse du logement'),
-      render: (owner: OwnerProspect) => (
-        <div className={classNames(styles.address, 'ellipsis')}>
-          {!owner.read && <span className={styles.chip} />}
-          <div className={styles.addressLines}>
-            {splitAddress(owner.address).map((address) => (
-              <Text bold={!owner.read} key={owner.id}>
-                {address}
-              </Text>
-            ))}
-          </div>
-        </div>
-      ),
-    },
-    {
-      name: 'contact',
-      headerRender: () => getSortButton('email', 'Contact'),
-      render: (owner: OwnerProspect) => (
-        <>
-          <Text className="ellipsis">
-            {owner.firstName} {owner.lastName}
-          </Text>
-          <Text className={classNames('ellipsis', styles.subtitle)}>
-            {owner.email}
-          </Text>
-        </>
-      ),
-    },
-    {
-      name: 'status',
-      headerRender: () => 'Statut',
-      render: (owner: OwnerProspect) => (
-        <ExtendedToggle
-          checked={owner.callBack}
-          className="fr-mt-0"
-          label="À recontacter"
-          iconId="fr-icon-phone-fill"
-          onChange={(checked) =>
-            props.onChange?.({ ...owner, callBack: checked })
-          }
-          toggleColor="#4a9df7"
-          vertical
-        />
-      ),
-    },
-    {
-      name: 'inbox',
-      headerRender: () => getSortButton('createdAt', 'Date de réception'),
-      render: (owner: OwnerProspect) => (
-        <>
-          {owner.createdAt && (
-            <Text className={styles.subtitle}>
-              Reçu le {dateShortFormatWithMinutes(new Date(owner.createdAt))}
-            </Text>
-          )}
-        </>
-      ),
-    },
-    {
-      name: 'action',
-      headerRender: () => '',
-      render: (owner: OwnerProspect) => (
-        <AppLinkAsButton
-          iconId="fr-icon-arrow-right-line"
-          iconPosition="right"
-          isSimple
-          onClick={() => props.onDisplay?.({ ...owner, read: true })}
-        >
-          Afficher le message
-        </AppLinkAsButton>
-      ),
-    },
-  ];
-
-  return (
-    <>
-      <Row spacing="mb-2w">
-        <Col>
-          <Text as="span">
-            {props.messages.length} {pluralize(total)('message')} dont 
-            <Text as="span" bold>
-              {unread} non {pluralize(unread)('lu')}
-            </Text>
-          </Text>
-        </Col>
-      </Row>
-      <Row>
-        <Col n="12">
-          <Table
-            caption="Boite de réception"
-            captionPosition="none"
-            className={classNames(styles.table, {
-              'with-select': props.onSelect,
-            })}
-            columns={columns}
-            data={props.messages}
-            fixedLayout
-            rowKey={(message: OwnerProspect) => message.id}
-            pagination
-            paginationPosition="center"
-          />
-        </Col>
-      </Row>
-    </>
-  );
-}
-
-export default InboxMessageList;
diff --git a/frontend/src/components/Inbox/InboxSidemenu.tsx b/frontend/src/components/Inbox/InboxSidemenu.tsx
deleted file mode 100644
index f50e2a1b5..000000000
--- a/frontend/src/components/Inbox/InboxSidemenu.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import { Col, Container, Row, Text } from '../_dsfr';
-import { format } from 'date-fns';
-import { fr } from 'date-fns/locale';
-import { OwnerProspect } from '../../models/OwnerProspect';
-import Aside from '../Aside/Aside';
-import ExtendedToggle from '../ExtendedToggle/ExtendedToggle';
-import styles from './inbox-sidemenu.module.scss';
-import { useMemo } from 'react';
-import { useClipboard } from '../../hooks/useClipboard';
-import Label from '../Label/Label';
-import { initials } from '../../utils/stringUtils';
-import Button from '@codegouvfr/react-dsfr/Button';
-import AppLink from '../_app/AppLink/AppLink';
-
-interface Props {
-  expand: boolean;
-  onChange?: (ownerProspect: OwnerProspect) => void;
-  onClose?: () => void;
-  ownerProspect?: OwnerProspect;
-}
-
-function InboxSidemenu(props: Props) {
-  const clipboard = useClipboard();
-
-  function copyMail(): void {
-    if (props.ownerProspect?.email) {
-      clipboard.copy(props.ownerProspect?.email);
-    }
-  }
-
-  function onChange(checked: boolean): void {
-    if (props.onChange && props.ownerProspect) {
-      props.onChange({
-        ...props.ownerProspect,
-        callBack: checked,
-      });
-    }
-  }
-
-  const sentAt = useMemo<string | undefined>(() => {
-    const createdAt = props.ownerProspect?.createdAt;
-    if (createdAt) {
-      return format(new Date(createdAt), 'dd MMMM yyyy, k:mm', { locale: fr });
-    }
-  }, [props.ownerProspect?.createdAt]);
-
-  return (
-    <Aside
-      expand={props.expand}
-      onClose={props.onClose}
-      title={`Message entrant de ${props.ownerProspect?.firstName} ${props.ownerProspect?.lastName}`}
-      content={
-        <Container as="article" fluid>
-          {sentAt && (
-            <Row justifyContent="center">
-              <Text className="subtitle" size="sm">
-                {sentAt}
-              </Text>
-            </Row>
-          )}
-          <Row>
-            {props.ownerProspect?.firstName &&
-              props.ownerProspect?.lastName && (
-                <div className={styles.initials}>
-                  {initials(
-                    props.ownerProspect.firstName,
-                    props.ownerProspect.lastName,
-                  )}
-                </div>
-              )}
-            <Col className={styles.message} n="12">
-              <div>
-                <Label>Nom et prénom</Label>
-                <Text className="ellipsis" spacing="mb-1w">
-                  {props.ownerProspect?.lastName.toUpperCase()} 
-                  {props.ownerProspect?.firstName}
-                </Text>
-              </div>
-              <div>
-                <Label>Email</Label>
-                <Text spacing="mb-1w">{props.ownerProspect?.email}</Text>
-                <Button
-                  priority="secondary"
-                  className="fr-mb-1w"
-                  onClick={copyMail}
-                  iconId="fr-icon-file-add-fill"
-                >
-                  {clipboard.copied ? 'Copié !' : 'Copier mail'}
-                </Button>
-              </div>
-              <div>
-                <Label>Adresse du logement</Label>
-                <AppLink
-                  className="ellipsis fr-mb-1w"
-                  to={`https://www.google.com/maps/place/${props.ownerProspect?.address}`}
-                  iconId="fr-icon-map-pin-2-fill"
-                  iconPosition="left"
-                  isSimple
-                  target="_blank"
-                  title="Voir sur la carte - nouvelle fenêtre"
-                >
-                  {props.ownerProspect?.address}
-                </AppLink>
-              </div>
-              <div>
-                <Label>Source du message</Label>
-                <Text spacing="mb-1w">Formulaire de la page publique</Text>
-              </div>
-              <div>
-                <Label>Message</Label>
-                <Text spacing="mb-1w">{props.ownerProspect?.notes}</Text>
-              </div>
-            </Col>
-          </Row>
-        </Container>
-      }
-      footer={
-        <section className={styles.callBack}>
-          {props.ownerProspect && (
-            <ExtendedToggle
-              checked={props.ownerProspect.callBack}
-              iconId="fr-icon-phone-fill"
-              label="À recontacter"
-              onChange={onChange}
-              toggleColor="#4a9df7"
-            />
-          )}
-        </section>
-      }
-    />
-  );
-}
-
-export default InboxSidemenu;
diff --git a/frontend/src/components/Inbox/inbox-message-list.module.scss b/frontend/src/components/Inbox/inbox-message-list.module.scss
deleted file mode 100644
index e135d646a..000000000
--- a/frontend/src/components/Inbox/inbox-message-list.module.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.address {
-  align-items: center;
-  display: inline-flex;
-  flex-flow: row wrap;
-  max-width: 100%;
-}
-
-.chip {
-  background-color: var(--blue-france-113);
-  border-radius: 50%;
-  display: inline-block;
-  height: 1rem;
-  margin-right: 1rem;
-  width: 1rem;
-
-  & + .addressLines {
-    width: calc(100% - 2rem)
-  }
-}
-
-.ellipsis {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.subtitle {
-  color: var(--grey-425);
-  font-size: 1rem;
-  font-weight: 400;
-}
-
-.table {
-  th:last-child,
-  tr > td:last-child {
-    padding: 1rem 0.5rem;
-  }
-}
-
diff --git a/frontend/src/components/Inbox/inbox-sidemenu.module.scss b/frontend/src/components/Inbox/inbox-sidemenu.module.scss
deleted file mode 100644
index 955b8902a..000000000
--- a/frontend/src/components/Inbox/inbox-sidemenu.module.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.callBack {
-  background-color: #bcd3fc;
-  border-radius: 0.5rem;
-  display: inline-flex;
-  padding: 0.5rem 0.5rem 0 0.5rem;
-}
-
-.initials {
-  align-items: center;
-  background-color: var(--orange-terre-battue-925);
-  border-radius: 50%;
-  color: var(--orange-terre-battue-850-active);
-  display: inline-flex;
-  font-weight: 500;
-  justify-content: center;
-  height: 2.5rem;
-  margin-right: 0.5rem;
-  width: 2.5rem;
-}
-
-.message {
-  background-color: var(--grey-975);
-  flex-basis: calc(100% - 3rem);
-  max-width: calc(100% - 3rem);
-  padding: 1rem 2rem;
-}