Welcome page

src/components/ui/Button/index.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import styled from "styled-components";
+
+import { HTMLComponent } from "../../../types/html-component";
+
+type Props = {
+  href?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  prefixIcon?: React.ReactNode;
+  color?: "primary" | "secondary";
+  variant?: "default" | "ghost";
+  size?: "default" | "small" | "large";
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
+
+type ButtonProps = HTMLComponent<
+  Props,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>;
+
+const Button: React.FC<ButtonProps> = styled(
+  ({
+    as: Component = "button",
+    href,
+    loading,
+    disabled = loading,
+    prefixIcon,
+    color = "primary",
+    variant = "default",
+    size = "default",
+    onClick,
+    className = "",
+    children,
+    ...rest
+  }: ButtonProps) => {
+    href;
+    color;
+    variant;
+    size;
+    /* if (href && !disabled) {
+  return (
+    <_LinkAsButton className={className} href={href}>
+      {children}
+    </_LinkAsButton>
+  );
+} */
+
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      onClick && onClick(e);
+    };
+
+    return (
+      <Component
+        onClick={handleClick}
+        className={className}
+        disabled={disabled}
+        whileTap={{ opacity: 0.8 }}
+        transition={{ duration: 0.2 }}
+        {...rest}
+      >
+        <ButtonContent>
+          <div className={"flex flex-row gap-x-[15px] items-center"}>
+            {prefixIcon && prefixIcon}
+            {children}
+          </div>
+        </ButtonContent>
+      </Component>
+    );
+  },
+)<ButtonProps>`
+  cursor: pointer;
+
+  font-family: "neulis-cursive";
+  font-weight: 600;
+  color: #ffffff;
+  background-color: var(--green);
+
+  padding: 15px 20px;
+  border: none;
+  border-radius: 5px;
+`;
+
+const ButtonContent = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  line-height: 20px;
+`;
+
+export default Button;

src/components/ui/GlobalStyle/custom.ts

@@ -18,7 +18,6 @@ const customCss = css`
   }
 
   html {
-    width: 380px;
     height: auto;
   }
 
@@ -59,6 +58,16 @@ const customCss = css`
       filter: brightness(0.8);
     }
   }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: "neulis-cursive", sans-serif;
+    font-weight: 700;
+  }
 `;
 
 export default customCss;

src/pages/Background/index.ts

@@ -1,7 +1,10 @@
 import analyzes from "./analyzes";
+import installNotice from "./installed";
 import tabtimes from "./tabtimes";
 
 const main = async () => {
+  chrome.runtime.onInstalled.addListener(installNotice);
+
   console.log("kartrak - background script started");
   tabtimes();
   analyzes();

src/pages/Background/installed.ts

@@ -0,0 +1,9 @@
+const installNotice = () => {
+  console.log("kartrak - extension installed");
+
+  chrome.tabs.create({
+    url: chrome.runtime.getURL("welcome.html"),
+  });
+};
+
+export default installNotice;

src/pages/Popup/index.css

@@ -0,0 +1,3 @@
+html {
+  width: 380px;
+}

src/pages/Popup/index.tsx

@@ -2,8 +2,9 @@
 import { createRoot } from "react-dom/client";
 
 import Popup from "./Popup";
+import "./index.css";
 import "./../../styles/fonts.css";
 
 const container = document.getElementById("app-container");
 const root = createRoot(container!); // createRoot(container!) if you use TypeScript
 root.render(<Popup />);

src/pages/Welcome/Welcome.tsx

@@ -0,0 +1,155 @@
+import React from "react";
+import styled from "styled-components";
+
+import Button from "../../components/ui/Button";
+import GlobalStyle from "../../components/ui/GlobalStyle";
+
+const WelcomePage: React.FC = () => {
+  const [isPinned, setIsPinned] = React.useState<boolean>(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const handleCheckIfPinned = React.useCallback((shouldError = true) => {
+    console.log("kartrak - check if pinned");
+
+    const checkIfPinned = async (): Promise<boolean> => {
+      const userSettings = await chrome.action.getUserSettings();
+
+      console.log("kartrak - userSettings", userSettings);
+
+      return userSettings.isOnToolbar;
+    };
+
+    checkIfPinned().then((isPinned) => {
+      if (isPinned) {
+        chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+          const activeTab = tabs[0];
+
+          if (activeTab) {
+            setIsPinned(true);
+          }
+        });
+      } else if (shouldError) {
+        setError("L'extension n'est pas épinglée à la barre d'outils.");
+      }
+    });
+  }, []);
+
+  const handleCloseTab = React.useCallback(() => {
+    console.log("kartrak - close tab");
+
+    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+      const activeTab = tabs[0];
+
+      if (activeTab) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        chrome.tabs.remove(activeTab.id!);
+      }
+    });
+  }, []);
+
+  React.useEffect(() => {
+    handleCheckIfPinned(false);
+  }, []);
+
+  console.log("kartrak - isPinned", isPinned);
+
+  return (
+    <Container>
+      <Row>
+        <GlobalStyle />
+
+        {isPinned ? (
+          <>
+            <Title>{"Vous êtes prêt à y aller !"}</Title>
+
+            <TextContent>
+              {
+                "Vous pouvez désormais cliquer sur l’extension quand vous le souhaitez pour analyser des sites internets ou voir vos statistiques d’activités."
+              }
+            </TextContent>
+
+            <Image
+              src={require("../../assets/img/welcome/opened-extension.png")}
+              alt={"Extension ouverte"}
+            />
+
+            <StyledButton onClick={handleCloseTab}>
+              {"J’ai compris, merci"}
+            </StyledButton>
+          </>
+        ) : (
+          <>
+            <Title>
+              {"Kartrak est désormais installé sur votre navigateur"}
+            </Title>
+
+            <TextContent>
+              {
+                "Épinglez dès maintenant l’extension à la barre d’outils de votre navigateur. Vous serez amenés à ouvrir souvent l’extension, alors ça sera plus pratique !"
+              }
+            </TextContent>
+
+            <Image
+              src={require("../../assets/img/welcome/extension-pinned.png")}
+              alt={"Extension épinglée"}
+            />
+
+            <StyledButton onClick={() => handleCheckIfPinned()}>
+              {"J'ai épinglé l'extension"}
+            </StyledButton>
+
+            {error && <Error>{error}</Error>}
+          </>
+        )}
+      </Row>
+    </Container>
+  );
+};
+
+const Container = styled.main`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+`;
+
+const Row = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width: 750px;
+`;
+
+const Title = styled.h1`
+  font-family: "neulis-cursive";
+  font-size: 48px;
+  font-weight: 600;
+  text-align: center;
+  color: var(--primary);
+`;
+
+const TextContent = styled.p`
+  margin-top: 15px;
+  text-align: center;
+
+  color: var(--grey);
+  font-size: 18px;
+`;
+
+const Image = styled.img`
+  margin-top: 40px;
+  max-width: 560px;
+  width: 100%;
+`;
+
+const StyledButton = styled(Button)`
+  margin-top: 40px;
+`;
+
+const Error = styled.p`
+  margin-top: 10px;
+  color: var(--red);
+`;
+
+export default WelcomePage;

src/pages/Welcome/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Merci d'avoir installé Kartrak</title>
+  </head>
+
+  <body>
+    <div id="app-container"></div>
+  </body>
+</html>

src/pages/Welcome/index.tsx

@@ -0,0 +1,11 @@
+import "./../../styles/fonts.css";
+
+import React from "react";
+import { createRoot } from "react-dom/client";
+
+import WelcomePage from "./Welcome";
+
+const container = document.getElementById("app-container");
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const root = createRoot(container!);
+root.render(<WelcomePage />);

src/types/html-component.ts

@@ -0,0 +1,12 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type HTMLComponent<P, N = React.HTMLAttributes<any>> = {
+  /**
+   * The root element.
+   */
+  as?: React.ElementType;
+  /**
+   * The content, duh.
+   */
+  children?: React.ReactNode;
+} & P &
+  Partial<Omit<N, keyof P>>;

webpack.config.js

@@ -42,6 +42,7 @@ const options = {
   mode: process.env.NODE_ENV || "development",
   entry: {
     options: path.join(__dirname, "src", "pages", "Options", "index.tsx"),
+    welcome: path.join(__dirname, "src", "pages", "Welcome", "index.tsx"),
     popup: path.join(__dirname, "src", "pages", "Popup", "index.tsx"),
     background: path.join(__dirname, "src", "pages", "Background", "index.ts"),
     contentScript: path.join(__dirname, "src", "pages", "Content", "index.ts"),
@@ -192,6 +193,12 @@ const options = {
       chunks: ["options"],
       cache: false,
     }),
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, "src", "pages", "Welcome", "index.html"),
+      filename: "welcome.html",
+      chunks: ["welcome"],
+      cache: false,
+    }),
     new HtmlWebpackPlugin({
       template: path.join(__dirname, "src", "pages", "Popup", "index.html"),
       filename: "popup.html",