Merge pull request #41 from SocialGouv/feat/newsletter

feat: newsletter

.kube-workflow/env/dev/templates/app.configmap.yaml

@@ -0,0 +1,6 @@
+kind: ConfigMap
+apiVersion: v1
+metadata:
+  name: app-configmap
+data:
+  NODE_ENV: 'production'

.kube-workflow/env/dev/templates/app.sealed-secret.yaml

@@ -0,0 +1,15 @@
+apiVersion: bitnami.com/v1alpha1
+kind: SealedSecret
+metadata:
+  annotations:
+    sealedsecrets.bitnami.com/cluster-wide: 'true'
+  name: app-sealed-secret
+spec:
+  encryptedData:
+    NOTION_INTEGRATION_TOKEN: AgDG6FAYWxGNN0usFWJdBk78CACGUsikw8D5sC3AEAFxNn2abYckeZA6YZaJT/11yvHhChVWTWAGKb5Dng03WDt2sgUEM1GZHj9oBAVMQ/7ZIr/YYoBMbPWNI/BBkScTrREcdSk3geTnbLEAVWF+2Aks6tfKaLJxVh7+jEOPzwiUKOOufNEwuI7rO8Mfo+pT6Lu+0V8/x4UetNCQltvBMzjqT/Na3LUV4CiQMCzMH6yB8t9FoVQC9gNzuiQYRIqQETHV6XymMkq3UCkX/8c6Gp99OjJpi8j2bBAc8ydwkKn4Xp1F5PjR/OF3i/gokPhlQWI3jeVaYe7X2UNvWx2Sxkg3NcqUDN9kbBBEKkftodTHwUSFal7odzpj+wmUgHzNu3bpzFyP/Yen6qkH3iNYFGTmfu7Fsc2PtWTyAKcoI1LUP02unlkL/MjcZvlTRZYX78q3cBVuQQpr4R2UEvq9kehVuRHZjTcaZUiAVwV+cWuUaEzawSZodujt3Ghn0xwM+WLiUrxpo0xQozLT0ZKOsyVzO4aLoRTs0e5yPz0w1R3IZ8NonYMGkAepeeGN1r9EbQFc2szOqLGIXAzfI1QjOQ1ANC49mbqt/rRXr3zVsWhST4qBQgQv3kZKOzRLjWOxH8wCazlzGceGOgJxj3mpJSvaf6kyKyYEBEwON46IXjPJPC/WGv8vrxySARRmMGX54ilBSO8IL9hOdVEDCxVYboQkXcZOdxQoJ5q0imc+XhR6xQghSsJ+etsYS7ctDa5NK5R7Dg==
+  template:
+    metadata:
+      annotations:
+        sealedsecrets.bitnami.com/cluster-wide: 'true'
+      name: app-sealed-secret
+    type: Opaque

.kube-workflow/env/preprod/templates/app.configmap.yaml

@@ -0,0 +1,6 @@
+kind: ConfigMap
+apiVersion: v1
+metadata:
+  name: app-configmap
+data:
+  NODE_ENV: 'production'

.kube-workflow/env/preprod/templates/app.sealed-secret.yaml

@@ -0,0 +1,14 @@
+apiVersion: bitnami.com/v1alpha1
+kind: SealedSecret
+metadata:
+  annotations: {}
+  name: app-sealed-secret
+  namespace: ressourcerie
+spec:
+  encryptedData:
+    NOTION_INTEGRATION_TOKEN: AgCq5fKtAlGYdIk3JRBmfm/basmo3rJralCTbxSBAtSn9tmDbGS3m16qiZhDr5QEdZLj2Sp+8bYc/dLoQuf3Oe6dGnTFSdgKYLH++5BWlg3WnQuToq2csOS96uRSWv7PQfSgy1pVYs1OjRIn08Vv9SWX/BCVajlss1+M/jXAuHpTXdppN5/EXrgc8H4/VvlzfWSryrKFL1xAr5PpeMBZACNZqTLKRU/oPOQuci4/bIKXUsfEd9iPgmMg0Bf0kc4CmSkdpmA0+bgOHyxEoYJyryKc5M20CyyKlhF0MrW9c8uwIwtjlzjsxo/EstJLz5UalvrW/KE5EOHK283a3pbsPscmTeJHL3466CVfaqlKOruAPtgr0ABrPNrYFOnWAZ51Fvt/uaMh2/FQcd+1bsrQspocMBRJGtoBzsndouGfe1jd4v4Som/DiV9fOeiCtJR3m3zJT4w7MojGNx2zEwcOQVx8kFJAAQ5gZ5nY8JOxj+py6kDpHjHL0lY9gHXmNprXBq30yhksfPnGngQAhxqPAkeE+eJWJSNbzzY3Tex742FwuAmzEbq9lJHK2m0ayxA/aUvXjPK9rnaOp7fuxl3VRVc/Vte8Nhmb6X7aJkg6/YqZ0PX5i8eTwGkrSiwVa+bYCf0WuSMCYFF+S9zOIrv6ZWYMe+MfeXjqKgE9EK0AFoPsB4uJF3zWBXP4101/F8oidUZxZ28I6jtOsoQ0jKtCLGKMN3dG2TB22c9Lrrvp/QiLieXB2loprq7wkOvEnbXp1+wcTw==
+  template:
+    metadata:
+      annotations: {}
+      name: app-sealed-secret
+    type: Opaque

.kube-workflow/env/prod/templates/app.configmap.yaml

@@ -0,0 +1,6 @@
+kind: ConfigMap
+apiVersion: v1
+metadata:
+  name: app-configmap
+data:
+  NODE_ENV: 'production'

.kube-workflow/env/prod/templates/app.sealed-secret.yaml

@@ -0,0 +1,14 @@
+apiVersion: bitnami.com/v1alpha1
+kind: SealedSecret
+metadata:
+  annotations: {}
+  name: app-sealed-secret
+  namespace: ressourcerie
+spec:
+  encryptedData:
+    NOTION_INTEGRATION_TOKEN: AgCq5fKtAlGYdIk3JRBmfm/basmo3rJralCTbxSBAtSn9tmDbGS3m16qiZhDr5QEdZLj2Sp+8bYc/dLoQuf3Oe6dGnTFSdgKYLH++5BWlg3WnQuToq2csOS96uRSWv7PQfSgy1pVYs1OjRIn08Vv9SWX/BCVajlss1+M/jXAuHpTXdppN5/EXrgc8H4/VvlzfWSryrKFL1xAr5PpeMBZACNZqTLKRU/oPOQuci4/bIKXUsfEd9iPgmMg0Bf0kc4CmSkdpmA0+bgOHyxEoYJyryKc5M20CyyKlhF0MrW9c8uwIwtjlzjsxo/EstJLz5UalvrW/KE5EOHK283a3pbsPscmTeJHL3466CVfaqlKOruAPtgr0ABrPNrYFOnWAZ51Fvt/uaMh2/FQcd+1bsrQspocMBRJGtoBzsndouGfe1jd4v4Som/DiV9fOeiCtJR3m3zJT4w7MojGNx2zEwcOQVx8kFJAAQ5gZ5nY8JOxj+py6kDpHjHL0lY9gHXmNprXBq30yhksfPnGngQAhxqPAkeE+eJWJSNbzzY3Tex742FwuAmzEbq9lJHK2m0ayxA/aUvXjPK9rnaOp7fuxl3VRVc/Vte8Nhmb6X7aJkg6/YqZ0PX5i8eTwGkrSiwVa+bYCf0WuSMCYFF+S9zOIrv6ZWYMe+MfeXjqKgE9EK0AFoPsB4uJF3zWBXP4101/F8oidUZxZ28I6jtOsoQ0jKtCLGKMN3dG2TB22c9Lrrvp/QiLieXB2loprq7wkOvEnbXp1+wcTw==
+  template:
+    metadata:
+      annotations: {}
+      name: app-sealed-secret
+    type: Opaque

components/home/index.js

@@ -2,6 +2,7 @@ import Baseline from './baseline';
 import ApiTripletSection from './apiTripletSection';
 import ArticleTripletSection from './articleTripletSection';
 import ExplanationSection from './explanationSection';
+import NewsLetterSection from './newsLetterSection';
 import UseCaseSection from './useCaseSection';
 import UseCasesSection from './useCasesSection';
 import DLNUFSection from './DLNUFSection';
@@ -10,6 +11,7 @@ export {
   Baseline,
   ExplanationSection,
   ArticleTripletSection,
+  NewsLetterSection,
   UseCaseSection,
   UseCasesSection,
   ApiTripletSection,

components/home/newsLetterSection.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { ButtonLink } from '../../uiComponents';
+
+const NewsLetterSection = () => {
+    const [isSent, setIsSent] = useState(false);
+    const [email, setEmail] = useState('');
+    const [message, setMessage] = useState('')
+
+    const handleForm = (e: React.FormEvent<HTMLInputElement>): void => {
+        setEmail(e.currentTarget.value);
+      };
+
+      const validateEmail = (email: string): Boolean => {
+        return (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email))
+      }
+
+      const addMailNotion = async (email: string) => {
+        const response = await fetch(`/api/notion?email=${email}`)
+        return response.ok
+      }
+
+        return (
+            <section id="newsletter-section">
+                <div className="fr-container">
+                    <h2>Newsletter</h2>
+                    <div className="grid-newsletter">
+                        <div className="text-nl">
+                            <p>
+                                La newsletter de la Ressourcerie est orientée sur une thématique mensuelle et présente des cas d'usages et articles de vulgarisation sélectionnés parmi nos productions,
+                                une ressource technique en lien avec les productions sélectionnées, et notre veille sur les initiatives tech' de la sphère travail (pour élargir le spectre) !
+                            </p>
+                        </div>
+                        <div className="cta-nl">
+                            <div>
+                                <div className="div-input">
+                                    <input
+                                        className="fr-input"
+                                        type="text"
+                                        id="newsletter-input"
+                                        name="newsletter-input"
+                                        onChange={handleForm}
+                                    />
+                                </div>
+                                {isSent ? <div>{message}</div> : <br />}
+                                <br />
+                                <ButtonLink onClick={
+                                    () => {
+                                        setIsSent(true)
+                                        setMessage(validateEmail(email) ? 'Merci pour votre inscription!' : 'Cette adresse mail semble invalide')
+                                        if(validateEmail(email)) {
+                                            addMailNotion(email)
+                                        }
+                                    }
+                                } size="large" alt>
+                                    <span className="layout-center">
+                                        Je m'inscris à la newsletter!
+                                    </span>
+                                </ButtonLink>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <br />
+            </section>
+        );
+  };
+  export default NewsLetterSection;

components/home/newsLetterSectionStyles.scss

@@ -0,0 +1,38 @@
+#newsletter-section {
+
+    padding: 50px 0;
+
+    h2,
+    h3 {
+      text-align: center;
+    }
+
+    .grid-newsletter {
+      margin-top: 2rem;
+      display: grid;
+      grid-template-columns: 50% 50%;
+
+      .text-nl {
+        padding-right:2rem;
+      }
+
+      .cta-nl {
+        padding: 1rem;
+        text-align: center;
+
+        .div-input {
+          max-width:350px;
+          margin: 0 auto;
+        }
+      }
+
+    }
+
+    @media only screen and (min-width: 1px) and (max-width: 900px) {
+      .grid-newsletter {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+
+}

components/home/useCasesSectionStyle.scss

@@ -1,6 +1,7 @@
 @import '../../constants/colors.scss';
 
 section#usecases-triplet {
+  background-color: $lightestGrey;
   padding: 50px 0;
 
   h2 {
@@ -32,7 +33,7 @@ section#usecases-triplet {
         }
         &.active {
           border-radius: 8px;
-          background-color: #f6f8fe;
+          background-color: #e8ecf7;
           color: rgba(0,0,0,.8);
         }
       }

layouts/imports.scss

@@ -2,6 +2,7 @@
 @import '../components/home/tripletStyles.scss';
 @import '../components/home/useCasesSectionStyle.scss';
 @import '../components/home/explanationSectionStyles.scss';
+@import '../components/home/newsLetterSectionStyles.scss';
 @import '../components/home/useCaseSectionStyles.scss';
 @import '../components/roadmap/roadmapStyles.scss';
 

package.json

@@ -28,6 +28,7 @@
     "@babel/eslint-parser": "^7.14.4",
     "@babel/preset-typescript": "^7.13.0",
     "@babel/runtime": "^7.13.10",
+    "@notionhq/client": "^1.0.4",
     "@types/cors": "^2.8.10",
     "@types/d3": "6.7",
     "@types/d3-scale": "^4.0.1",

pages/api/notion/index.tsx

@@ -0,0 +1,61 @@
+import type { NextApiHandler } from "next";
+import { Client } from '@notionhq/client';
+
+const handler: NextApiHandler = async (req, res) => {
+
+  if (req.method == "GET") {
+    await post(req, res);
+  } else {
+    res.status(405).end();
+    return;
+  }
+};
+
+const post: NextApiHandler = async (req, res) => {
+    const email = req.query.email as string
+
+    const notion = new Client({ auth: process.env.NOTION_INTEGRATION_TOKEN });
+
+    (async () => {
+        const response = await notion.pages.create({
+          parent: {
+            database_id: "e4e03e2676c54de09cc3fb46a56c90df",
+          },
+             icon: {
+              type: "emoji",
+                  emoji: "🥬"
+            },
+            cover: {
+                type: "external",
+              external: {
+                  url: "https://upload.wikimedia.org/wikipedia/commons/6/62/Tuscankale.jpg"
+              }
+            },
+          properties: {
+            Name: {
+              title: [
+                {
+                  text: {
+                    content: email,
+                  },
+                },
+              ],
+            },
+            email: {
+              rich_text: [
+                {
+                  text: {
+                    content: email,
+                  },
+                },
+              ],
+            }
+          }
+        });
+        console.log(response);
+      })();
+
+    res.status(200).json({ message: "Commentaire ajouté" });
+};
+
+export default handler;