#form-pipeda-edit-account-request, #form-pipeda-requests-request, #form-pipeda-personal-information-request, #form-pipeda-orders-request, #form-pipeda-personal-data-report-request { display: none; } #pipeda_page button { background-color: transparent; border: 0; border-bottom: 1px solid black; padding: 0px; } /* Modal background */ #data-verification-background { display: none; position: fixed; z-index: 1; padding-top: calc(50vh - 83px); left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4); opacity: unset; z-index: 9999; } /* Modal Content */ #data-verification-modal { background-color: #fefefe; margin: auto; padding: 16px; border: 1px solid #888; width: 38%; opacity: 1; } /* Modal Close Button */ .data-verification-close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; line-height: 17px; background-color: transparent; border: 0px; padding: 0px; } .data-verification-close:hover { color: #000; text-decoration: none; cursor: pointer; } /* Checkbox Text */ #data-verification-container p { display: inline-block; padding: 0; margin: 0; line-height: 24px; padding-left: 10px; vertical-align: top; width: calc(100% - 45px); } #data-verification-container a, #data-verification-container a:hover { text-decoration: underline !important; color: #4285f4; } #data-verification-container input { opacity: 0; width: 0; height: 0; margin: 0; padding: 0; } /* Checkbox Icon */ #data-verification-icon { cursor: pointer; position: relative; margin: auto; width: 18px; height: 18px; -webkit-tap-highlight-color: transparent; transform: translate3d(0, 0, 0); margin-top: 2px; } #data-verification-icon:before { content: ""; position: absolute; top: -7px; left: -7px; width: 32px; height: 32px; border-radius: 50%; background: rgba(34, 50, 84, 0.03); opacity: 0; transition: opacity 0.2s ease; } #data-verification-icon svg { position: relative; z-index: 1; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: #c8ccd4; stroke-width: 1.5; transform: translate3d(0, 0, 0); transition: all 0.2s ease; } #data-verification-icon svg path { stroke-dasharray: 60; stroke-dashoffset: 0; } #data-verification-icon svg polyline { stroke-dasharray: 22; stroke-dashoffset: 66; } #data-verification-icon:hover:before { opacity: 1; } #data-verification-container:hover #data-verification-icon svg { stroke: #4285f4; } #data-verification-icon.clicked svg { stroke: #4285f4; } #data-verification-icon.clicked svg path { stroke-dashoffset: 60; transition: all 0.3s linear; } #data-verification-icon.clicked svg polyline { stroke-dashoffset: 42; transition: all 0.2s linear; transition-delay: 0.15s; } /* Accessibility design */ #data-verification-icon:focus, .data-verification-close:focus, #data-verification-container input:focus ~ #data-verification-icon svg, #data-verification-container a:focus { box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4); transition: all 0.3s ease; outline: none; transform: scale(1.06); } /* Loading Element */ .loading { display: none; top: 50vh; left: 50vw; position: fixed; } .loading:not(:required):after { content: ''; display: block; font-size: 10px; width: 1em; height: 1em; margin-top: -0.5em; -webkit-animation: spinner 1500ms infinite linear; -moz-animation: spinner 1500ms infinite linear; -ms-animation: spinner 1500ms infinite linear; -o-animation: spinner 1500ms infinite linear; animation: spinner 1500ms infinite linear; border-radius: 0.5em; -webkit-box-shadow: rgba(255, 255, 255, 1) 1.5em 0 0 0, rgba(255, 255, 255, 1) 1.1em 1.1em 0 0, rgba(255, 255, 255, 1) 0 1.5em 0 0, rgba(255, 255, 255, 1) -1.1em 1.1em 0 0, rgba(255, 255, 255, 1) -1.5em 0 0 0, rgba(255, 255, 255, 1) -1.1em -1.1em 0 0, rgba(255, 255, 255, 1) 0 -1.5em 0 0, rgba(255, 255, 255, 1) 1.1em -1.1em 0 0; box-shadow: rgba(255, 255, 255, 1) 1.5em 0 0 0, rgba(255, 255, 255, 1) 1.1em 1.1em 0 0, rgba(255, 255, 255, 1) 0 1.5em 0 0, rgba(255, 255, 255, 1) -1.1em 1.1em 0 0, rgba(255, 255, 255, 1) -1.5em 0 0 0, rgba(255, 255, 255, 1) -1.1em -1.1em 0 0, rgba(255, 255, 255, 1) 0 -1.5em 0 0, rgba(255, 255, 255, 1) 1.1em -1.1em 0 0; } #pipeda_page .list-unstyled li button { cursor: pointer; } .show-isense { transition: opacity 400ms !important; } .hide-isense { opacity: 0 !important; transition: 0.4s ease-out; } /* Modal changes on mobile resolution*/ @media only screen and (max-width: 600px) { #data-verification-modal { width: 90%; } } /* Animation */ @-webkit-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } The app used for assuring the GDPR, LGPD, CCPA-CPRA, VCDPA, CPA, CTDPA, APPI, PIPEDA compliance of this site, collects your IP and the email address in order to process the data. For more check Privacy Policy & Terms of Service Data Rectification You can use the link below to update your account data if it is not accurate. Edit your account information Enter your email to confirm your identity Data Portability You can use the links below to download all the data we store and use for a better experience in our store. PIPEDA requests Enter your email to confirm your identity Personal information Enter your email to confirm your identity Orders Enter your email to confirm your identity Access to Personal Data You can use the link below to request a report which will contain all personal information that we store for you. Request a report Enter your email to confirm your identity // { target.style.transitionProperty = 'height, margin, padding'; target.style.transitionDuration = duration + 'ms'; target.style.boxSizing = 'border-box'; target.style.height = target.offsetHeight + 'px'; target.offsetHeight; target.style.overflow = 'hidden'; target.style.height = 0; target.style.paddingTop = 0; target.style.paddingBottom = 0; target.style.marginTop = 0; target.style.marginBottom = 0; window.setTimeout(() => { target.style.display = 'none'; target.style.removeProperty('height'); target.style.removeProperty('padding-top'); target.style.removeProperty('padding-bottom'); target.style.removeProperty('margin-top'); target.style.removeProperty('margin-bottom'); target.style.removeProperty('overflow'); target.style.removeProperty('transition-duration'); target.style.removeProperty('transition-property'); }, duration); } /* SLIDE DOWN */ let slideDown = (target, duration = 500) => { setTimeout(function () { target.style.removeProperty('display'); let display = window.getComputedStyle(target).display; if (display === 'none') display = 'block'; target.style.display = display; let height = target.offsetHeight; target.style.overflow = 'hidden'; target.style.height = 0; target.style.paddingTop = 0; target.style.paddingBottom = 0; target.style.marginTop = 0; target.style.marginBottom = 0; target.offsetHeight; target.style.boxSizing = 'border-box'; target.style.transitionProperty = "height, margin, padding"; target.style.transitionDuration = duration + 'ms'; target.style.height = height + 'px'; target.style.removeProperty('padding-top'); target.style.removeProperty('padding-bottom'); target.style.removeProperty('margin-top'); target.style.removeProperty('margin-bottom'); window.setTimeout(() => { target.style.removeProperty('height'); target.style.removeProperty('overflow'); target.style.removeProperty('transition-duration'); target.style.removeProperty('transition-property'); }, duration); }, 100) } /* TOOGLE */ var slideToggle = (target, duration = 500) => { if (window.getComputedStyle(target).display === 'none') { return slideDown(target, duration); } else { return slideUp(target, duration); } } /* FADE */ var toggleFadeiSense = (elem, show) => { if (show) { elem.style.display = "block"; setTimeout(function () { elem.classList.add('show-isense'); elem.classList.remove('hide-isense'); }, 20) } else { elem.classList.remove('show-isense'); elem.classList.add('hide-isense'); setTimeout(() => { elem.style.display = 'none'; }, 400) } } var pipedaSlideUpAll = function () { slideUp(document.querySelector('#form-pipeda-edit-account-request'), 100); slideUp(document.querySelector('#form-pipeda-requests-request'), 100); slideUp(document.querySelector('#form-pipeda-personal-information-request'), 100); slideUp(document.querySelector('#form-pipeda-orders-request'), 100); slideUp(document.querySelector('#form-pipeda-personal-data-report-request'), 100); document.querySelector('#pipeda_page button').setAttribute("aria-expanded", "false"); }; var email, type, consentGiven = false; var verificationModalContent = '×I give my consent on collecting my email and IP address for the purpose of processing this request. For more check Privacy Policy & Terms of Service.'; var pipedaSendRequest = function (callback) { fetch('https://www.cloudflare.com/cdn-cgi/trace', { method: 'GET', headers: { 'Content-Type': 'text/plain', }, }) .then(resp => resp.text()) .then(resp => { if (!resp.error) { let ipInfo = resp; let formData = new FormData(); formData.append('shop', Shopify.shop); formData.append('email', email); formData.append('type', type); formData.append('sourceOfRequest', 4); formData.append('ipAddress', ipInfo); formData.append('consentGiven', consentGiven); formData.append('page', 'pipeda'); formData.append('lang', Shopify.locale ? Shopify.locale : ''); formData.append('gtranslateLang', isenseGDPR.Cookies.get('googtrans') ? isenseGDPR.Cookies.get('googtrans') : ''); fetch('https://gdpr.apps.isenselabs.com/gdprRequests/submitRequest', { method: 'POST', body: formData }) .then(resp => resp.json()) .then(resp => { if (!resp.error) { pipedaSlideUpAll(); if (resp.message.length) { alert(resp.message); } else { alert('Your request has been submitted successfully. Please check your email for more information.'); } } else { alert(resp.message); } if (typeof callback == 'function') { callback(resp); } }) .catch(error => { alert(error.message); }) } else { alert(resp.message); } }) } //Append modal to body, because otherwise it will not stay centered(even if position is fixed) document.querySelector("body").insertAdjacentHTML('beforeend', verificationModalContent); document.addEventListener("DOMContentLoaded", function () { // When the user clicks on (x), close the modal document.querySelector('.data-verification-close').addEventListener('click', function (e) { e.preventDefault(); closeVerificationModal(); // Focus the button of the request type that was picked let pipedaForms = document.querySelectorAll('.form-pipeda-request'); pipedaForms.forEach(function(pipedaForm) { if (pipedaForm.style.display !== "none") { let pipedaFormLinks = pipedaForm.previousElementSibling.querySelectorAll('li'); if (pipedaFormLinks.length === 1) { pipedaFormLinks[0].querySelector('button').focus(); } } }); }); document.querySelector('#data-verification-icon, #data-verification-container p').addEventListener('click', function (e) { e.preventDefault(); // Detect a href's click, because it is overwritten. if (e.target.tagName === "A") { window.open(e.target.href, '_blank'); return; } document.querySelector('#data-verification-icon').classList.add("clicked"); setTimeout(() => { toggleFadeiSense(document.querySelector("#data-verification-modal"), false); document.querySelector('#data-verification-background .loading').style.display = 'inline-block'; consentGiven = true; pipedaSendRequest(function (resp) { consentGiven = false; closeVerificationModal(); }); }, 400); }); }); function openVerificationModal() { toggleFadeiSense(document.querySelector("#data-verification-modal"), true); toggleFadeiSense(document.querySelector('#data-verification-background'), true); document.querySelector('#data-verification-container input').focus(); } function closeVerificationModal() { toggleFadeiSense(document.querySelector("#data-verification-background"), false); document.querySelector('#data-verification-icon').classList.remove("clicked"); document.querySelector('#data-verification-background .loading').style.display = 'none'; // Focus the button of the request type that was picked let pipedaForms = document.querySelectorAll('.form-pipeda-request'); pipedaForms.forEach(function(pipedaForm) { if (pipedaForm.style.display !== "none") { let pipedaFormLinks = pipedaForm.previousElementSibling.querySelectorAll('li'); if (pipedaFormLinks.length === 1) { pipedaFormLinks[0].querySelector('button').focus(); } else { // Focus logic for Data Portability requests pipedaFormLinks = pipedaForm.parentElement; if (pipedaFormLinks.nodeName === 'LI') { pipedaFormLinks.querySelector('button').focus(); } } } }); } document.querySelector('#btn-pipeda-edit-account-request').addEventListener('click', function (e) { e.preventDefault(); pipedaSlideUpAll(); slideDown(document.querySelector('#form-pipeda-edit-account-request'), 200); this.setAttribute("aria-expanded", "true"); }); document.querySelector('#form-pipeda-edit-account-request-submit').addEventListener('click', function (e) { e.preventDefault(); email = document.querySelector('#form-pipeda-edit-account-request-email').value; type = 'customer/edit'; openVerificationModal(); }); document.querySelector('#btn-pipeda-requests-request').addEventListener('click', function(e) { e.preventDefault(); pipedaSlideUpAll(); slideDown(document.querySelector('#form-pipeda-requests-request'), 200); this.setAttribute("aria-expanded", "true"); }); document.querySelector('#form-pipeda-requests-request-submit').addEventListener('click', function(e) { e.preventDefault(); email = document.querySelector('#form-pipeda-requests-request-email').value; type = 'customer/requests'; openVerificationModal(); }); document.querySelector('#btn-pipeda-personal-information-request').addEventListener('click', function(e) { e.preventDefault(); pipedaSlideUpAll(); slideDown(document.querySelector('#form-pipeda-personal-information-request'), 200); this.setAttribute("aria-expanded", "true"); }); document.querySelector('#form-pipeda-personal-information-request-submit').addEventListener('click', function(e) { e.preventDefault(); email = document.querySelector('#form-pipeda-personal-information-request-email').value; type = 'customer/personal_info'; openVerificationModal(); }); document.querySelector('#btn-pipeda-orders-request').addEventListener('click', function(e) { e.preventDefault(); pipedaSlideUpAll(); slideDown(document.querySelector('#form-pipeda-orders-request'), 200); this.setAttribute("aria-expanded", "true"); }); document.querySelector('#form-pipeda-orders-request-submit').addEventListener('click', function(e) { e.preventDefault(); email = document.querySelector('#form-pipeda-orders-request-email').value; type = 'customer/orders'; openVerificationModal(); }); document.querySelector('#btn-pipeda-personal-data-report-request').addEventListener('click', function (e) { e.preventDefault(); pipedaSlideUpAll(); slideDown(document.querySelector('#form-pipeda-personal-data-report-request'), 200); this.setAttribute("aria-expanded", "true"); }); document.querySelector('#form-pipeda-personal-data-report-request-submit').addEventListener('click', function (e) { e.preventDefault(); email = document.querySelector('#form-pipeda-personal-data-report-request-email').value; type = 'customer/report'; openVerificationModal(); }); // Keyboard navigation in data verification modal for accesibility document.querySelector('#data-verification-modal').addEventListener('keydown', function(e) { let isTabPressed = e.keyCode === 9 || e.key === "Tab" || e.code === "Tab"; let isEscapePressed = e.keyCode === 27 || e.key === "Escape" || e.code === "Escape"; let isSpacePressed = event.keyCode === 32 || e.key === " " || event.code === "Space"; let isEnterPressed = event.keyCode === 13 || e.key === "Enter" || event.code === "Enter"; let dataVerificationCloseButton = document.querySelector('.data-verification-close'); let dataVerificationCheckbox = document.querySelector('#data-verification-container input'); let dataVerificationLink = document.querySelector('#data-verification-container a'); // This function saves us the trouble of calling e.preventDefault() after every focusing let executeFocus = (focusElement) => {focusElement.focus();e.preventDefault();} if (isEscapePressed) { if (dataVerificationCloseButton) { dataVerificationCloseButton.click(); } } if (isSpacePressed || isEnterPressed) { if (document.activeElement === dataVerificationCheckbox) { document.querySelector('#data-verification-container #data-verification-icon').click(); } } if (isTabPressed) { if (e.shiftKey) { if (dataVerificationCloseButton && document.activeElement === dataVerificationCloseButton) { executeFocus(dataVerificationLink); } } else { if (dataVerificationLink && document.activeElement === dataVerificationLink) { executeFocus(dataVerificationCloseButton); } } } }); // ]]>
