The repo for Purrform's main BigCommerce store.
feat: delete cat
+87
-3
+7
assets/scss/custom/components/_accountsReward.scss
+7
assets/scss/custom/components/_accountsReward.scss
···
61
61
grid-template-columns: 1fr;
62
62
}
63
63
.cat {
64
+
position: relative;
64
65
background-color: #fff;
65
66
border: 1px solid #ddd;
66
67
border-radius: 8px;
···
120
121
font-weight: bold;
121
122
border-bottom: 1px solid #ddd;
122
123
}
124
+
123
125
.previous-grid-item {
124
126
font-size: 0.8rem;
125
127
padding: 0.75rem 0;
126
128
border-bottom: 1px solid #ddd;
127
129
}
130
+
}
131
+
132
+
.cat button {
133
+
border: 1px solid #8f8f8f;
134
+
border-radius: 5px;
128
135
}
129
136
130
137
.cat-birthdays {
+80
-3
templates/pages/account/inbox.html
+80
-3
templates/pages/account/inbox.html
···
449
449
const catListDiv = document.querySelector('.list-of-cats');
450
450
const mainContainer = document.querySelector('.cat-birthdays');
451
451
452
-
let catsInHousehold, catsRegistered, changeSlotAvailable, registeredCats;
452
+
let catsInHousehold,
453
+
catsRegistered,
454
+
changeSlotAvailable,
455
+
registeredCatsData;
456
+
457
+
const changeButtonAvailable = catsRegistered === 4 && changeSlotAvailable;
453
458
454
459
// Call backend to see if customer has registered a cat
455
460
fetch(
···
480
485
birthdayFormDiv.style.display = 'none';
481
486
}
482
487
changeSlotAvailable = data.change_slot_available;
483
-
registeredCats = data.cats;
488
+
registeredCatsData = data.cats;
484
489
485
490
if (catsRegistered === 0) {
486
491
catListDiv.textContent = 'No cats registered yet.';
···
493
498
catListDiv.appendChild(catListTitle);
494
499
catListDiv.appendChild(document.createElement('br'));
495
500
496
-
for (const registeredCat of registeredCats) {
501
+
for (const registeredCat of registeredCatsData) {
497
502
const catDiv = document.createElement('div');
498
503
catDiv.classList.add('cat');
499
504
catDiv.innerHTML = `
···
501
506
<div class="cat-detail">Breed: ${registeredCat.cat_breed}</div>
502
507
<div class="cat-detail">Sex: ${registeredCat.cat_gender}</div>
503
508
<div class="cat-detail">Birthday: ${registeredCat.cat_birthday}</div>
509
+
<button class="delete-cat-btn" onclick="deleteCat('${registeredCat.cat_name}') ">Remove</button>
504
510
`;
511
+
if (changeSlotAvailable) {
512
+
catDiv.innerHTML += `
513
+
<button class="change-cat-btn" onclick="changeCat('${registeredCat.cat_name}')">Change</button>
514
+
`;
515
+
}
505
516
catListDiv.appendChild(catDiv);
506
517
}
518
+
519
+
if (changeSlotAvailable) {
520
+
const changeSlotMsg = document.createElement('p');
521
+
changeSlotMsg.classList.add('change-slot-msg');
522
+
changeSlotMsg.textContent =
523
+
'You can change a cat by clicking the "Change" button. (1 change / year)';
524
+
mainContainer.appendChild(changeSlotMsg);
525
+
mainContainer.appendChild(document.createElement('br'));
526
+
}
507
527
})
508
528
.catch((err) => {
509
529
console.error(err);
···
578
598
<div class="cat-detail">Breed: ${catBreed}</div>
579
599
<div class="cat-detail">Sex: ${catGender}</div>
580
600
<div class="cat-detail">Birthday: ${catBirthday}</div>
601
+
<button class="delete-cat-btn" onclick="deleteCat('${catName}')">Remove</button>
581
602
`;
582
603
catListDiv.appendChild(catDiv);
583
604
document.querySelector('#reward-cat-name').value = '';
···
604
625
return;
605
626
});
606
627
});
628
+
629
+
function deleteCat(catName) {
630
+
fetch(
631
+
`https://e4c7-2a01-4b00-805d-b800-4869-64a3-a1d2-7f3b.ngrok-free.app/deleteCatBirthday?ownerEmail={{customer.email}}&catName=${catName}`
632
+
)
633
+
.then(async (response) => {
634
+
if (!response.ok) {
635
+
const message = await response.text();
636
+
birthdayErrorDiv.style.display = 'block';
637
+
birthdayErrorDiv.textContent = message;
638
+
return;
639
+
}
640
+
birthdayErrorDiv.style.display = 'none';
641
+
const catDivs = document.querySelectorAll('.cat');
642
+
catDivs.forEach((catDiv) => {
643
+
if (
644
+
catDiv.querySelector('.cat-header').textContent ===
645
+
catName
646
+
) {
647
+
catDiv.remove();
648
+
}
649
+
});
650
+
651
+
catsRegistered--;
652
+
if (catsRegistered < catsInHousehold) {
653
+
birthdayFormDiv.style.display = 'block';
654
+
}
655
+
656
+
// remove the change buttons
657
+
const changeButtons =
658
+
document.querySelectorAll('.change-cat-btn');
659
+
changeButtons.forEach((button) => {
660
+
button.remove();
661
+
});
662
+
663
+
// remove the change slot message
664
+
const changeSlotMsg =
665
+
document.querySelector('.change-slot-msg');
666
+
if (changeSlotMsg) {
667
+
changeSlotMsg.remove();
668
+
}
669
+
670
+
document.querySelector(
671
+
'.cat-list-title'
672
+
).textContent = `Your Registered Cats (${catsRegistered}/${catsInHousehold})`;
673
+
674
+
return;
675
+
})
676
+
.catch((err) => {
677
+
console.error(err);
678
+
birthdayErrorDiv.style.display = 'block';
679
+
birthdayErrorDiv.textContent =
680
+
'Error connecting to the server, please try again later.';
681
+
return;
682
+
});
683
+
}
607
684
</script>
608
685
{{/if}} {{/partial}} {{> layout/base}}