CCPA Compliance

<style><!--
#form-ccpa-edit-account-request,
#form-ccpa-data-account-request,
#form-ccpa-personal-data-report-request,
#form-ccpa-delete-account-request {
display: none;
}


/* 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%;
}
/* Modal Close Button */
.data-verification-close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
line-height: 17px;
}
.data-verification-close:hover,
.data-verification-close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* Checkbox Text */
#data-verification-container p{
display: inline-block;
padding-left: 5px;
vertical-align: top;
width: calc(100% - 45px);
cursor: pointer;
}
#data-verification-container a, #data-verification-container a:hover{
text-decoration: underline!important;
color: #4285f4;
}
/* 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;
}

/* Modal changes on mobile resolution*/
@media only screen and (max-width: 600px) {
#data-verification-modal {
width: 90%;
}
}

/* 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;
}

/* 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);
}
}
--></style>
<div id="ccpa_page" class="col-sm-12">
<h2>Data Rectification</h2>
<p>You can use the link below to update your account data if it is not accurate.</p>
<ul class="list-unstyled">
<li><a id="btn-ccpa-edit-account-request" href="#">Edit your account information</a></li>
</ul>
<div id="form-ccpa-edit-account-request"><form><label>Enter your email to confirm your identity</label> <input type="email" name="email" placeholder="example@email.com" autocorrect="off" autocapitalize="off" autofocus="" /> <input type="submit" class="btn" value="Submit" /></form></div>
<h2>Data Portability</h2>
<p>You can use the links below to download all the data we store and use for a better experience in our store.</p>
<ul class="list-unstyled">
<li><a id="btn-ccpa-requests-request" href="#">CCPA requests</a></li>
<li><a id="btn-ccpa-personal-information-request" href="#">Personal information</a></li>
<li><a id="btn-ccpa-orders-request" href="#">Orders</a></li>
</ul>
<div id="form-ccpa-data-account-request"><form><label>Enter your email to confirm your identity</label> <input type="email" name="email" placeholder="example@email.com" autocorrect="off" autocapitalize="off" autofocus="" /> <input type="submit" class="btn" value="Submit" /> <input type="hidden" name="request_type" value="" /></form></div>
<h2>Access to Personal Data</h2>
<p>You can use the link below to request a report which will contain all personal information that we store for you.</p>
<ul class="list-unstyled">
<li><a id="btn-ccpa-personal-data-report-request" href="#">Request a report</a></li>
</ul>
<div id="form-ccpa-personal-data-report-request"><form><label>Enter your email to confirm your identity</label> <input type="email" name="email" placeholder="example@email.com" autocorrect="off" autocapitalize="off" autofocus="" /> <input type="submit" class="btn" value="Submit" /></form></div>
<h2>Right to be Forgotten</h2>
<p>Use this option if you want to remove your personal and other data from our store. Keep in mind that <strong>this process will delete your account, so you will no longer be able to access or use it anymore</strong>.</p>
<ul class="list-unstyled">
<li><a id="btn-ccpa-delete-account-request" href="#">Request personal data deletion</a></li>
</ul>
<div id="form-ccpa-delete-account-request"><form><label>Enter your email to confirm your identity</label> <input type="email" name="email" placeholder="example@email.com" autocorrect="off" autocapitalize="off" autofocus="" /> <input type="submit" class="btn" value="Submit" /></form></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>// <![CDATA[
var ccpaSlideUpAll = function() {
$('#form-ccpa-edit-account-request').slideUp(100);
$('#form-ccpa-data-account-request').slideUp(100);
$('#form-ccpa-personal-data-report-request').slideUp(100);
$('#form-ccpa-delete-account-request').slideUp(100);
};

var email, type, consentGiven = false;
var verificationModalContent = '<div id="data-verification-background"><div class="loading"></div><div id="data-verification-modal"><span class="data-verification-close">&times;</span><div id="data-verification-container"><input type="checkbox" style="display: none;"><label id="data-verification-icon"><svg width="18px" height="18px" viewBox="0 0 18 18"><path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path></path><polyline points="1 9 7 14 15 4"></polyline></svg></label><p>I give my consent on collecting my email and IP address for the purpose of processing this request. For more check <a href="https://gdprcdn.b-cdn.net/pages/privacy_policy" target="_blank">Privacy Policy</a>.</p></div></div></div>';

var ccpaSendRequest = function(callback) {
$.ajax({
url: 'https://gdpr.apps.isenselabs.com/gdprRequests/submitRequest',
method: 'POST',
data: {
shop: Shopify.shop,
email: email,
type: type,
consentGiven: consentGiven,
lang: Shopify.locale ? Shopify.locale : '',
gtranslateLang: isenseGDPR.Cookies.get('googtrans') ? isenseGDPR.Cookies.get('googtrans') : ''
},
success: function(resp) {
if (!resp.error) {
ccpaSlideUpAll();
alert('Your request has been submitted successfully. Please check your email for more information.');
} else {
alert(resp.message);
}
if (typeof callback == 'function') {
callback(resp);
}
}
});
};

$(document).ready(function() {
//Append modal to body, because otherwise it will not stay centered(even if position is fixed)
$("body").append(verificationModalContent);

// When the user clicks on <span> (x), close the modal
$('.data-verification-close:first').on('click', function(e) {
e.preventDefault();
closeVerificationModal();
});

$('#data-verification-icon, #data-verification-container p').on('click', function(e) {
e.preventDefault();

// Detect a href's click, because it is overwritten.
if($(e.target).is("a")) {
window.open(e.target.href, '_blank');
return;
}

$('#data-verification-icon').addClass("clicked");
setTimeout(()=>{
$("#data-verification-modal").fadeOut();
$('#data-verification-background .loading').css('display', 'inline-block');
consentGiven = true;
ccpaSendRequest(function(resp) {
consentGiven = false;
closeVerificationModal();
});
}, 400);
});
});

function openVerificationModal(){
$("#data-verification-modal").css("display", "block")
$('#data-verification-background').css("display", "block");
}
function closeVerificationModal(){
$('#data-verification-background').fadeOut();
$('#data-verification-icon').removeClass("clicked");
$('#data-verification-background .loading').css('display', 'none');
}

$('#btn-ccpa-edit-account-request').on('click', function(e) {
e.preventDefault();
ccpaSlideUpAll();
$('#form-ccpa-edit-account-request').slideDown(200);
});

$('#form-ccpa-edit-account-request form input[type=submit]').on('click', function(e) {
e.preventDefault();
email = $('#form-ccpa-edit-account-request form input[name=email]').val();
type = 'customer/edit';
openVerificationModal();
});

$('#btn-ccpa-requests-request, #btn-ccpa-personal-information-request, #btn-ccpa-orders-request').on('click', function(e) {
e.preventDefault();
ccpaSlideUpAll();

type = '';

switch($(this).attr('id')) {
case 'btn-ccpa-requests-request':
type = 'customer/requests';
break;
case 'btn-ccpa-personal-information-request':
type = 'customer/personal_info';
break;
case 'btn-ccpa-orders-request':
type = 'customer/orders';
break;
}

$('#form-ccpa-data-account-request form input[name="request_type"]').val(type);

$('#form-ccpa-data-account-request').slideDown(200);
});

$('#form-ccpa-data-account-request form input[type=submit]').on('click', function(e) {
e.preventDefault();
email = $('#form-ccpa-data-account-request form input[name=email]').val();
type = $('#form-ccpa-data-account-request form input[name="request_type"]').val();
openVerificationModal();
});

$('#btn-ccpa-personal-data-report-request').on('click', function(e) {
e.preventDefault();
ccpaSlideUpAll();
$('#form-ccpa-personal-data-report-request').slideDown(200);
});

$('#form-ccpa-personal-data-report-request form input[type=submit]').on('click', function(e) {
e.preventDefault();
email = $('#form-ccpa-personal-data-report-request form input[name=email]').val();
type = 'customer/report';
openVerificationModal();
});

$('#btn-ccpa-delete-account-request').on('click', function(e) {
e.preventDefault();
ccpaSlideUpAll();
$('#form-ccpa-delete-account-request').slideDown(200);
});

$('#form-ccpa-delete-account-request form input[type=submit]').on('click', function(e) {
e.preventDefault();
email = $('#form-ccpa-delete-account-request form input[name=email]').val();
type = 'customer/delete';
openVerificationModal();
});
// ]]></script>