feat: add preference center link to footer

es-ds-components/components/es-footer.vue

@@ -25,6 +25,27 @@ export default {
             return this.content.copyrightText.replace('{currentYear}', new Date().getFullYear());
         },
     },
+    mounted() {
+        // TODO: update with GTM tag in prod once we've gone live
+        // See https://tagmanager.google.com/#/container/accounts/2920232696/containers/8806152/workspaces/126/tags
+        // for GTM script that triggers this event.
+        window.addEventListener('OneTrustLoadedCb', () => {
+            (window as any).OneTrust.OnConsentChanged(() => {
+                // OneTrust modal should modify cookie values, a hard-refresh will
+                // trigger re-loading GTM with updated cookie values, which in turn
+                // will only fire tags aligned with new preferences
+                window.location.reload();
+                return false;
+            });
+            document.querySelectorAll('.toggle-info-display').forEach((elem) => {
+                // Function closure to ensure event only fires on one elem
+                elem.addEventListener('click', (e) => {
+                    e.stopImmediatePropagation();
+                    (window as any).OneTrust.ToggleInfoDisplay();
+                });
+            });
+        });
+    },
 };
 </script>
 
@@ -120,16 +141,26 @@ export default {
                 <!-- Trademark Info -->
                 <!-- Legal -->
                 <hr class="border-top border-blue-500 m-0" />
-                <div class="row justify-content-center pt-100">
+                <div class="row pt-100">
                     <div
                         v-for="link in content.legalLinks"
                         :key="link.text"
-                        class="col col-6 col-lg-auto font-size-75 font-weight-semibold font-size-md-50 font-weight-md-normal mt-25 mb-50 px-lg-300">
+                        class="col col-6 col-lg-auto">
                         <es-nav-bar-link
+                            v-if="link.url"
                             :href="link.url"
-                            class="text-reset font-weight-normal">
+                            class="text-reset font-weight-normal font-size-75 font-size-md-50 font-weight-md-normal mt-25 mb-50 pr-lg-300">
                             {{ link.text }}
                         </es-nav-bar-link>
+                        <div v-else>
+                            <icon-ccpa-opt-out />
+                            <es-button
+                                inline
+                                class="toggle-info-display text-reset font-weight-normal font-size-75 font-size-md-50 font-weight-md-normal ml-1"
+                                variant="link">
+                                {{ link.text }}
+                            </es-button>
+                        </div>
                     </div>
                 </div>
                 <!-- Legal -->

es-ds-components/components/icon/ccpa-opt-out.vue

@@ -0,0 +1,99 @@
+<script lang="ts">
+export default {
+    name: 'IconCcpaOptOut',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '29px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '14px',
+            required: false,
+        },
+    },
+};
+</script>
+
+<template>
+    <svg
+        id="Layer_1"
+        :style="{
+            height: height,
+            width: width,
+        }"
+        aria-labelledby="California Consumer Privacy Act (CCPA) Opt-Out Icon"
+        role="img"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 30 14"
+        style="enable-background: new 0 0 30 14"
+        xml:space="preserve">
+        <g>
+            <g id="final---dec.11-2020_1_">
+                <g
+                    id="_x30_208-our-toggle_2_"
+                    transform="translate(-1275.000000, -200.000000)">
+                    <g
+                        id="Final-Copy-2_2_"
+                        transform="translate(1275.000000, 200.000000)">
+                        <path
+                            class="st0"
+                            d="M7.4,12.8h6.8l3.1-11.6H7.4C4.2,1.2,1.6,3.8,1.6,7S4.2,12.8,7.4,12.8z" />
+                    </g>
+                </g>
+            </g>
+            <g id="final---dec.11-2020">
+                <g
+                    id="_x30_208-our-toggle"
+                    transform="translate(-1275.000000, -200.000000)">
+                    <g
+                        id="Final-Copy-2"
+                        transform="translate(1275.000000, 200.000000)">
+                        <path
+                            class="st1"
+                            d="M22.6,0H7.4c-3.9,0-7,3.1-7,7s3.1,7,7,7h15.2c3.9,0,7-3.1,7-7S26.4,0,22.6,0z M1.6,7c0-3.2,2.6-5.8,5.8-5.8
+                            h9.9l-3.1,11.6H7.4C4.2,12.8,1.6,10.2,1.6,7z" />
+                        <path
+                            id="x"
+                            class="st2"
+                            d="M24.6,4c0.2,0.2,0.2,0.6,0,0.8l0,0L22.5,7l2.2,2.2c0.2,0.2,0.2,0.6,0,0.8c-0.2,0.2-0.6,0.2-0.8,0
+                            l0,0l-2.2-2.2L19.5,10c-0.2,0.2-0.6,0.2-0.8,0c-0.2-0.2-0.2-0.6,0-0.8l0,0L20.8,7l-2.2-2.2c-0.2-0.2-0.2-0.6,0-0.8
+                            c0.2-0.2,0.6-0.2,0.8,0l0,0l2.2,2.2L23.8,4C24,3.8,24.4,3.8,24.6,4z" />
+                        <path
+                            id="y"
+                            class="st3"
+                            d="M12.7,4.1c0.2,0.2,0.3,0.6,0.1,0.8l0,0L8.6,9.8C8.5,9.9,8.4,10,8.3,10c-0.2,0.1-0.5,0.1-0.7-0.1l0,0
+                            L5.4,7.7c-0.2-0.2-0.2-0.6,0-0.8c0.2-0.2,0.6-0.2,0.8,0l0,0L8,8.6l3.8-4.5C12,3.9,12.4,3.9,12.7,4.1z" />
+                    </g>
+                </g>
+            </g>
+        </g>
+    </svg>
+</template>
+
+<style type="text/css">
+.st0,
+.st1 {
+    clip-rule: evenodd;
+    fill-rule: evenodd;
+}
+.st0,
+.st2 {
+    fill: #fff;
+}
+.st1,
+.st3 {
+    fill: #06f;
+}
+</style>

es-ds-components/utils/get-es-footer-content.ts

@@ -76,6 +76,7 @@ export default (
         { text: 'Privacy policy', url: `${ES_DOMAIN}/privacy-policy/` },
         { text: 'Mobile terms of use', url: `${ES_DOMAIN}/mobile-terms-of-use/` },
         { text: 'Non-discrimination policy', url: `${ES_DOMAIN}/nondiscrimination/` },
+        { text: 'Your privacy choices' },
     ],
     copyrightText: '© Copyright 2009-{currentYear} EnergySage, Inc. All rights reserved.',
     trademarkText: `ENERGYSAGE is a registered trademark and the EnergySage logo is a trademark of EnergySage, Inc.