Cookie Widget

public/data/locales/en.json

@@ -12,5 +12,8 @@
   "mosttrees": "MOST TREES",
   "trees": "Trees",
   "the": "The",
-  "forestGrows": "Forest Grows."
+  "forestGrows": "Forest Grows.",
+  "privacyPolicyNotice": "By using this website, you agree to our",
+  "privacyPolicy": "cookie policy",
+  "acceptClose": "Accept and close"
 }

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"></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,96 @@
+<svelte:options tag="tree-popup" immutable={true} />
+<script>
+    import enLocale from '../../public/data/locales/en.json';
+    import { writable } from '../../utils/localstorage'
+
+    export let show=true;
+    export let message;
+    export let locale = "en";
+    let language = [];
+    language["en"] = enLocale;
+
+
+const cookiePolicy = localStorage.getItem('hidePlanetCookie')
+    export const hideCookieNotification = writable(cookiePolicy)
+    hideCookieNotification.subscribe(value => {
+       localStorage.setItem('hidePlanetCookie', value === true ? true : false)
+       
+    })
+
+
+  function hideCookieNotice(){
+      show = false
+      hideCookieNotification.set
+      hideCookieNotification.update
+  }
+
+    
+</script>
+{#if show}
+    <div class="cookiePolicy" >
+      <div class="policyNotice">
+        {message}
+        <a class="policyLink" href="https://www.plant-for-the-planet.org/en/footermenu/privacy-policy">
+          {language[locale].privacyPolicy}
+        </a>
+      </div>
+      <button
+        id={"cookieCloseButton"}
+        class="primaryButton"
+        on:click={hideCookieNotice}
+      >
+        {language[locale].acceptClose}
+      </button>
+    </div>
+{/if}
+<style>
+      @import "https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap";
+
+   .cookiePolicy {
+  position: fixed;
+  background-color: white;
+  box-shadow: 0px 3px 6px -3px ;
+  bottom: 20px;
+  left: 20px;
+  width: 280px;
+  border-radius: 4px;
+  padding: 20px;
+  z-index: 10;
+  font-family: "Raleway", sans-serif;
+ 
+   }
+   .policyNotice {
+       text-align: center;
+  }
+  .policyLink {
+    font-weight: bold;
+    text-decoration: none;
+    color: #007a49;
+    display: inline;
+  }
+
+  .primaryButton {
+    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;
+  }
+  .primaryButton: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
+    }
+  } 
+