feat(Ad): Add user setting to grab phone or not

Closes #316

src/app/ad/ad.ts

@@ -2,6 +2,7 @@ import {getIsoDateTime} from '../utils/get-iso-date-time';
 import {PDF} from '../pdf/pdf';
 import {FONT_SIZES, FONT_WEIGHTS} from '../constants';
 import {observeElement} from '../utils/observe-element';
+import {defaultState} from '../state/initialize-state';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const manifest = require('../../manifest-chrome.json');
@@ -83,6 +84,14 @@ export interface AdData {
   url: string;
 }
 
+interface Props {
+  gatherPhone: boolean;
+}
+
+const defaultProps = {
+  gatherPhone: defaultState.isPhoneChecked,
+};
+
 /**
  * Class representing an Ad.
  */
@@ -97,8 +106,11 @@ export class Ad {
 
   private pdf: PDF;
 
-  constructor(props: AdData = Ad.parseLeboncoin()) {
-    this.props = props;
+  private gatherPhone: boolean;
+
+  constructor({gatherPhone}: Props = defaultProps) {
+    this.props = Ad.parseLeboncoin();
+    this.gatherPhone = gatherPhone;
     const {date, time} = getIsoDateTime();
     this.date = date;
     this.time = time;
@@ -242,7 +254,7 @@ export class Ad {
     });
 
     // Phone
-    if (this.isAuthenticated) {
+    if (this.isAuthenticated && this.gatherPhone) {
       const phone = await this.getSellerPhone();
       this.pdf.printText({
         text: `Tel: ${phone}`,

src/app/content.ts

@@ -16,7 +16,7 @@ export async function content(): Promise<StateType> {
     await setState(StateKeys.setReloaded, true);
 
     if (document.visibilityState === 'visible') {
-      const ad = new Ad();
+      const ad = new Ad({gatherPhone: state.isPhoneChecked});
       await ad.build();
       ad.export();
     }

src/app/pdf/pdf.ts

@@ -8,24 +8,24 @@ export type PrintLink = {
   text: string;
   url: string;
   size: number;
-}
+};
 
 export type PrintText = {
   text: string;
   size?: number;
   weight?: string;
-}
+};
 
 export type PrintBlock = {
   text: string;
   size: number;
-}
+};
 
 export type PrintImage = {
   id: number;
   total: number;
   url: string;
-}
+};
 
 /**
  * Class for printing PDFs
@@ -45,37 +45,33 @@ export class PDF {
 
   private y: number = this.init.y;
 
-  private readonly width: number = this.doc.internal.pageSize.getWidth() - this.x;
+  private readonly width: number =
+    this.doc.internal.pageSize.getWidth() - this.x;
 
-  private readonly height: number = this.doc.internal.pageSize.getHeight() - this.y;
+  private readonly height: number =
+    this.doc.internal.pageSize.getHeight() - this.y;
 
   private readonly font = 'times';
 
-  private readonly weight = FONT_WEIGHTS.normal
+  private readonly weight = FONT_WEIGHTS.normal;
 
-  private readonly size = FONT_SIZES.normal
+  private readonly size = FONT_SIZES.normal;
 
   constructor(filename: string) {
     this.name = filename;
     this.resetPosition();
   }
 
-  public printLink({
-    text,
-    url,
-    size,
-  }: PrintLink): void {
+  public printLink({text, url, size}: PrintLink): void {
     this.doc.setFontSize(size || this.size).setFont(this.font, this.weight);
     this.doc.textWithLink(text, this.x, this.y, {url});
     this.movePosition(size);
   }
 
-  public printText({
-    text,
-    size,
-    weight,
-  }: PrintText): void {
-    this.doc.setFontSize(size || this.size).setFont(this.font, weight || this.weight);
+  public printText({text, size, weight}: PrintText): void {
+    this.doc
+      .setFontSize(size || this.size)
+      .setFont(this.font, weight || this.weight);
     this.doc.text(text, this.x, this.y);
     this.movePosition(size);
   }
@@ -86,10 +82,7 @@ export class PDF {
     this.movePosition();
   }
 
-  public printBlock({
-    text,
-    size,
-  }: PrintBlock): void {
+  public printBlock({text, size}: PrintBlock): void {
     const lines = this.doc
       .setFontSize(size || this.size)
       .setFont(this.font, this.weight)
@@ -108,11 +101,7 @@ export class PDF {
     });
   }
 
-  public async printImage({
-    id,
-    total,
-    url,
-  }: PrintImage): Promise<void> {
+  public async printImage({id, total, url}: PrintImage): Promise<void> {
     let base64;
     try {
       base64 = await fetchBase64(url);
@@ -184,7 +173,7 @@ export class PDF {
   }
 
   private movePosition(size = this.size) {
-    this.y += 0.5 * size / 24;
+    this.y += (0.5 * size) / 24;
   }
 
   private resetPosition() {

src/app/popup.ts

@@ -1,14 +1,29 @@
+import {getState} from './state/get-state';
 import {setState, StateKeys} from './state/set-state';
 
-/**
- * Popup script entry point.
- */
-async function popup(): Promise<void> {
-  const link = document.getElementById('export');
+let isAttached = false;
 
-  link.addEventListener('click', async () => {
+async function attach(): Promise<void> {
+  if (isAttached) {
+    return;
+  }
+
+  isAttached = true;
+
+  const state = await getState();
+
+  const exportButton = document.getElementById('export');
+  exportButton.addEventListener('click', async () => {
     await setState(StateKeys.isTriggered, true);
   });
+
+  const phoneCheckbox = document.getElementById(
+    'phoneCheckbox',
+  ) as HTMLInputElement;
+  phoneCheckbox.checked = state.isPhoneChecked;
+  phoneCheckbox.addEventListener('change', async () => {
+    await setState(StateKeys.isPhoneChecked, phoneCheckbox.checked);
+  });
 }
 
-window.addEventListener('load', popup);
+window.addEventListener('load', attach);

src/app/state/get-state.ts

@@ -3,6 +3,7 @@ import {getBrowser} from '../utils/get-browser';
 export interface StateType {
   isTriggered: boolean;
   isReloading: boolean;
+  isPhoneChecked: boolean;
 }
 
 /**
@@ -13,11 +14,8 @@ export interface StateType {
 export function getState(): Promise<StateType> {
   const browser = getBrowser();
   return new Promise((resolve) => {
-    browser.storage.local.get(
-      null,
-      async (state: StateType) => {
-        resolve(state);
-      },
-    );
+    browser.storage.local.get(null, async (state: StateType) => {
+      resolve(state);
+    });
   });
 }

src/app/state/initialize-state.ts

@@ -4,6 +4,7 @@ import {setState, StateKeys} from './set-state';
 export const defaultState = {
   isTriggered: false,
   isReloading: false,
+  isPhoneChecked: false,
 };
 
 /**
@@ -19,4 +20,8 @@ export async function initializeState(): Promise<void> {
   if (typeof state.isReloading === 'undefined') {
     await setState(StateKeys.isReloading, defaultState.isReloading);
   }
+
+  if (typeof state.isPhoneChecked === 'undefined') {
+    await setState(StateKeys.isPhoneChecked, defaultState.isPhoneChecked);
+  }
 }

src/app/state/set-state.ts

@@ -5,6 +5,7 @@ export enum StateKeys {
   isTriggered = 'isTriggered',
   isReloading = 'isReloading',
   setReloaded = 'setReloaded',
+  isPhoneChecked = 'isPhoneChecked',
 }
 
 /**
@@ -13,13 +14,16 @@ export enum StateKeys {
  * @param {StateKeys} actionType - The action type.
  * @param {boolean} payload - The payload.
  */
-export async function setState(actionType: StateKeys, payload: boolean): Promise<void> {
+export async function setState(
+  actionType: StateKeys,
+  payload: boolean,
+): Promise<void> {
   const browser = getBrowser();
 
   // reducer
   switch (actionType) {
     case StateKeys.isTriggered: {
-      const obj: Pick<StateType, StateKeys.isTriggered> = {
+      const obj: Partial<StateType> = {
         isTriggered: payload,
       };
 
@@ -28,7 +32,7 @@ export async function setState(actionType: StateKeys, payload: boolean): Promise
     }
 
     case StateKeys.isReloading: {
-      const obj: Pick<StateType, StateKeys.isReloading> = {
+      const obj: Partial<StateType> = {
         isReloading: payload,
       };
 
@@ -37,7 +41,7 @@ export async function setState(actionType: StateKeys, payload: boolean): Promise
     }
 
     case StateKeys.setReloaded: {
-      const obj: StateType = {
+      const obj: Partial<StateType> = {
         isTriggered: false,
         isReloading: false,
       };
@@ -46,6 +50,15 @@ export async function setState(actionType: StateKeys, payload: boolean): Promise
       break;
     }
 
+    case StateKeys.isPhoneChecked: {
+      const obj: Partial<StateType> = {
+        isPhoneChecked: payload,
+      };
+
+      await browser.storage.local.set(obj);
+      break;
+    }
+
     default: {
       throw new Error('Action type not found.');
     }

src/popup/index.html

@@ -1,13 +1,37 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta content="width=device-width, initial-scale=1.0" name="viewport">
-  <link href="./styles.css" rel="stylesheet">
-  <title>leboncoin-pdf-ext</title>
-</head>
-<body>
-<button id="export">exporter</button>
-<script src="../scripts/popup.js"></script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      content="width=device-width, initial-scale=1.0"
+      name="viewport"
+    />
+    <link
+      href="./styles.css"
+      rel="stylesheet"
+    />
+    <title>leboncoin-pdf-ext</title>
+  </head>
+  <body>
+    <div class="container">
+      <button
+        id="export"
+        class="button"
+      >
+        exporter
+      </button>
+
+      <div class="checkbox">
+        <input
+          type="checkbox"
+          id="phoneCheckbox"
+          name="phoneCheckbox"
+          value="checked"
+        />
+        <label for="phoneCheckbox">Prendre téléphone</label>
+      </div>
+    </div>
+
+    <script src="../scripts/popup.js"></script>
+  </body>
 </html>

src/popup/styles.css

@@ -1,3 +1,30 @@
 html {
-    user-select: none;
+  user-select: none;
+}
+
+.container {
+  width: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.button {
+  width: calc(100% - 8px);
+}
+
+.checkbox {
+  width: 100%;
+  height: auto;
+  margin-top: 4px;
+
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.checkbox input {
+  width: 15px;
+  height: 15px;
 }