Merge pull request #83 from Plant-for-the-Planet-org/feature/cookieWi…

…dget

Cookie Policy widget

.env

@@ -1,2 +1,3 @@
 API_URL=https://app.plant-for-the-planet.org/app
-CDN_URL=https://cdn.plant-for-the-planet.org
+CDN_URL=https://cdn.plant-for-the-planet.org
+ENVIORNMENT=PROD

.env.local

@@ -1,3 +1,4 @@
 API_URL=https://app-staging.plant-for-the-planet.org/app
 CDN_URL=https://cdn.plant-for-the-planet.org
 APP_URL=https://www1.plant-for-the-planet.org
+ENVIORNMENT=development

public/data/locales/en.json

@@ -13,4 +13,4 @@
   "trees": "Trees",
   "the": "The",
   "forestGrows": "Forest Grows."
-}
+}

public/index.html

@@ -199,6 +199,7 @@ <h2 class="widgetTitle">Get started with a Widget</h2>
 						<input type="text" class="form-control" onblur="updateURL('treeMap', this.value)"
 							placeholder="Username or profile url" id="userSlug">
 					</div>
+
 					<div id="error"></div>
 					<select class="form-select" onchange="changeAttribute('treeMap',this.value,'locale')"
 						aria-label="Default select example">

public/variants.html

@@ -11,6 +11,7 @@
 	<script defer src='/build/tree-tenant-counter.js'></script>
 	<script defer src='/build/tree-tenant-leaderboard.js'></script>
 	<script defer src='/build/tree-profile.js'></script>
+	<script defer src='/build/tree-popup.js'></script>
 
 </head>
 
@@ -46,6 +47,7 @@ <h2> Tree tenant counter </h2>
 	<h2> Tenant Leaderboard </h2>
 	<p>Default</p>
 	<tree-tenantleaderboard tenantkey="ten_I9TW3ncG" theme="light" locale="en" id="tenantLeaderboard" ></tree-tenantleaderboard>
+	<tree-popup message="By using this website, you agree to our <a target='_blank' class='cookie-policy-link' href='https://a.plant-for-the-planet.org/privacy-terms'>cookie policy</a>" buttontext="Accept and Close" theme="light">  </tree-popup>
 </body>
 
 </html>

rollup.config.js

@@ -296,4 +296,69 @@ export default [{
   watch: {
     clearScreen: false,
   },
+},{
+  input: "src/CookiePolicy/TreePopup.js",
+  output: {
+    sourcemap: false,
+    format: "iife",
+    name: "app",
+    file: "public/build/tree-popup.js",
+  },
+  plugins: [
+    gzipPlugin(),
+    replace({
+      // stringify the object
+      __myapp: JSON.stringify({
+        env: {
+          isProd: production,
+          ...config().parsed // attached the .env config
+        }
+      }),
+    }),
+    svelte({
+      include: /App\.svelte$/,
+      compilerOptions: {
+        // enable run-time checks when not in production
+        dev: !production,
+        customElement: true
+      },
+      emitCss: false,
+    }),
+    svelte({
+      exclude: /App\.svelte$/,
+      compilerOptions: {
+        // enable run-time checks when not in production
+        dev: !production,
+        customElement: false
+      },
+      emitCss: false,
+    }),
+    json(),
+
+    // If you have external dependencies installed from
+    // npm, you'll most likely need these plugins. In
+    // some cases you'll need additional configuration -
+    // consult the documentation for details:
+    // https://github.com/rollup/plugins/tree/master/packages/commonjs
+    resolve({
+      browser: true,
+      dedupe: ["svelte"],
+    }),
+    commonjs(),
+
+    // In dev mode, call `npm run start` once
+    // the bundle has been generated
+    !production && serve(),
+
+    // Watch the `public` directory and refresh the
+    // browser on changes when not in production
+    !production && livereload("public"),
+
+    // If we're building for production (npm run build
+    // instead of npm run dev), minify
+    production && terser(),
+  ],
+  watch: {
+    clearScreen: false,
+  },
 }];

src/CookiePolicy/App.svelte

@@ -0,0 +1,103 @@
+<svelte:options tag="tree-popup" immutable={true} />
+
+<script>
+    import { writable } from "../../utils/localstorage";
+    export let message;
+    export let buttontext;
+    export let theme = "light";
+    const now = new Date();
+    let cookiePolicy = localStorage.getItem("hidePlanetCookie");
+    if(cookiePolicy){
+        cookiePolicy = JSON.parse(cookiePolicy)
+        if(now.getTime() > cookiePolicy.expiry){
+            localStorage.removeItem('hidePlanetCookie')
+            cookiePolicy = null;
+        }
+    }
+
+    export const hideCookieNotification = writable(cookiePolicy);
+    function hideCookieNotice() {
+        const expiryTime = now.getTime() +  (__myapp.env.ENVIORNMENT === 'development' ? 15000 : 15778800000) //6 months in milliseconds
+        const data ={
+            value: true,
+            expiry: expiryTime,
+        }
+        hideCookieNotification.subscribe((value) => {
+            localStorage.setItem("hidePlanetCookie", JSON.stringify(data));
+        });
+        
+        cookiePolicy = true;
+    }
+    
+</script>
+
+{#if !cookiePolicy}
+    <div
+        class="cookie-policy"
+        style="--bg-color: {theme === 'light' ? '#fff' : '#2f3336'};
+            --text-color: {theme === 'light'
+            ? '#000000'
+            : '#fff'};"
+    >
+        <div class="policy-notice">
+            <div class="cookie-policy-link" />
+            {@html message}
+        </div>
+        <button
+            id={"cookie-close-button"}
+            class="primary-button"
+            on:click={hideCookieNotice}
+        >
+            {buttontext}
+        </button>
+    </div>
+{/if}
+
+<style>
+
+    .cookie-policy-link {
+        font-weight: 700;
+        color: #007a49;
+        text-decoration: none;
+    }
+    .cookie-policy {
+        position: fixed;
+        background-color: var(--bg-color);
+        color: var(--text-color);
+        box-shadow: 0px 3px 6px -3px;
+        bottom: 20px;
+        left: 20px;
+        width: 280px;
+        border-radius: 4px;
+        padding: 20px;
+        z-index: 999999;
+        font-family: "Raleway", sans-serif;
+    }
+    .policy-notice {
+        text-align: center;
+    }
+
+    .primary-button {
+        color: white;
+        font-weight: bold;
+        background-image: linear-gradient(97deg, #68b030 4%, #007a49 116%);
+        height: 40px;
+        padding: 0px;
+        text-align: center;
+        border: 0px;
+        border-radius: 40px;
+        min-width: 200px;
+        width: 100%;
+        margin-top: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition-duration: 0.5s;
+        transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+        text-decoration: none;
+    }
+    .primary-button:hover {
+        transform: translateY(-7px);
+        cursor: pointer;
+    }
+</style>

src/CookiePolicy/TreePopup.js

@@ -0,0 +1,3 @@
+import App from "./App.svelte";
+
+export default App;

utils/localstorage.js

@@ -0,0 +1,30 @@
+import {writable as internal, get} from 'svelte/store'
+export function writable(key, initialValue) {
+    // create an underlying store
+    const store = internal(initialValue)
+    const {subscribe, set} = store
+    // get the last value from localStorage
+    const json = localStorage.getItem(key)
+
+    // use the value from localStorage if it exists
+    if (json) {
+      set(JSON.parse(json))
+    }
+
+    // return an object with the same interface as svelte's writable()
+    return {
+      // capture set and write to localStorage
+      set(value) {
+        localStorage.setItem(key, JSON.stringify(value))
+        set(value)
+      },
+      // capture updates and write to localStore
+      update(cb) {
+        const value = cb(get(store))
+        this.set(value)
+      },
+      // punt subscriptions to underlying store
+      subscribe
+    }
+  } 
+