The repo for Purrform's main BigCommerce store.
feat: change cat draft
+159
-1
+37
assets/scss/custom/components/_accountsReward.scss
+37
assets/scss/custom/components/_accountsReward.scss
···
132
132
.cat button {
133
133
border: 1px solid #8f8f8f;
134
134
border-radius: 5px;
135
+
background-color: #687d6a;
136
+
color: white;
137
+
transition: all 0.2s;
138
+
}
139
+
.cat button:hover {
140
+
background-color: white;
141
+
color: #687d6a;
135
142
}
136
143
137
144
.cat-birthdays {
···
159
166
display: none;
160
167
color: red;
161
168
}
169
+
170
+
#change-slot-dialog {
171
+
border-radius: 0.5rem;
172
+
border-color: #687d6a;
173
+
padding-inline: 1.5rem;
174
+
}
175
+
176
+
#change-slot-dialog::backdrop {
177
+
background-color: rgba(0, 0, 0, 0.5);
178
+
}
179
+
180
+
#change-slot-dialog form {
181
+
display: flex;
182
+
flex-direction: column;
183
+
gap: 0.5rem;
184
+
}
185
+
186
+
#change-slot-dialog button {
187
+
margin-top: 1rem;
188
+
border: 1px solid #8f8f8f;
189
+
border-radius: 5px;
190
+
background-color: #687d6a;
191
+
color: white;
192
+
transition: all 0.2s;
193
+
194
+
&:hover {
195
+
background-color: white;
196
+
color: #687d6a;
197
+
}
198
+
}
+122
-1
templates/pages/account/inbox.html
+122
-1
templates/pages/account/inbox.html
···
452
452
let catsInHousehold,
453
453
catsRegistered,
454
454
changeSlotAvailable,
455
+
changeSlotUsed,
455
456
registeredCatsData;
456
457
457
458
const changeButtonAvailable = catsRegistered === 4 && changeSlotAvailable;
···
485
486
birthdayFormDiv.style.display = 'none';
486
487
}
487
488
changeSlotAvailable = data.change_slot_available;
489
+
changeSlotUsed = data.change_slot_used;
488
490
registeredCatsData = data.cats;
489
491
490
492
if (catsRegistered === 0) {
···
591
593
return;
592
594
}
593
595
birthdayErrorDiv.style.display = 'none';
596
+
597
+
catsRegistered++;
598
+
594
599
const catDiv = document.createElement('div');
595
600
catDiv.classList.add('cat');
596
601
catDiv.innerHTML = `
···
600
605
<div class="cat-detail">Birthday: ${catBirthday}</div>
601
606
<button class="delete-cat-btn" onclick="deleteCat('${catName}')">Remove</button>
602
607
`;
608
+
609
+
if (catsRegistered === 4 && !changeSlotUsed) {
610
+
catDiv.innerHTML += `
611
+
<button class="change-cat-btn" onclick="changeCat('${catName}')">Change</button>
612
+
`;
613
+
}
614
+
603
615
catListDiv.appendChild(catDiv);
604
616
document.querySelector('#reward-cat-name').value = '';
605
617
document.querySelector('#reward-cat-breed').value = '';
606
618
document.querySelector('#reward-cat-birthday').value = '';
607
619
document.querySelector('#reward-cat-sex').value = '';
608
620
609
-
catsRegistered++;
610
621
if (catsRegistered >= catsInHousehold) {
611
622
birthdayFormDiv.style.display = 'none';
612
623
}
···
680
691
'Error connecting to the server, please try again later.';
681
692
return;
682
693
});
694
+
}
695
+
696
+
function changeCat(oldName) {
697
+
const changeSlotDialog = document.createElement('dialog');
698
+
changeSlotDialog.id = 'change-slot-dialog';
699
+
changeSlotDialog.innerHTML = `
700
+
<p>Change your cat's details</p>
701
+
<form id="change-cat-form">
702
+
<div>
703
+
<label for="change-cat-name" class="form-label">Cat Name</label>
704
+
<input type="text" id="change-cat-name" required minlength="2" />
705
+
</div>
706
+
<div>
707
+
<label for="change-cat-breed" class="form-label">Breed</label>
708
+
<input type="text" id="change-cat-breed" required minlength="2" />
709
+
</div>
710
+
<div>
711
+
<label for="change-cat-sex" class="form-label">Sex</label>
712
+
<select name="sex" id="change-cat-sex">
713
+
<option value="male">Male</option>
714
+
<option value="female">Female</option>
715
+
</select>
716
+
</div>
717
+
<div>
718
+
<label for="change-cat-birthday" class="form-label">Birthday</label>
719
+
<input type="date" id="change-cat-birthday" required />
720
+
</div>
721
+
<button type="submit">Change</button>
722
+
</form>
723
+
<div class="birthday-change-error"></div>
724
+
`;
725
+
const cancelButton = document.createElement('button');
726
+
cancelButton.textContent = 'Cancel';
727
+
cancelButton.style.display = 'block';
728
+
cancelButton.style.width = '100%';
729
+
cancelButton.onclick = () => {
730
+
changeSlotDialog.close();
731
+
};
732
+
changeSlotDialog.appendChild(cancelButton);
733
+
document.body.appendChild(changeSlotDialog);
734
+
changeSlotDialog.showModal();
735
+
736
+
const changeCatForm = document.querySelector('#change-cat-form');
737
+
changeCatForm.addEventListener('submit', (e) => {
738
+
e.preventDefault();
739
+
740
+
const birthdayChangeErrorDiv = document.querySelector(
741
+
'.birthday-change-error'
742
+
);
743
+
744
+
const catName = document.querySelector('#change-cat-name').value;
745
+
const catBreed = document.querySelector('#change-cat-breed').value;
746
+
const catGender = document.querySelector('#change-cat-sex').value;
747
+
const catBirthday = document.querySelector(
748
+
'#change-cat-birthday'
749
+
).value;
750
+
751
+
if (
752
+
catName.trim() === '' ||
753
+
catBreed.trim() === '' ||
754
+
catGender.trim() === '' ||
755
+
catBirthday.trim() === ''
756
+
) {
757
+
birthdayChangeErrorDiv.textContent =
758
+
'Please fill in all fields.';
759
+
return;
760
+
}
761
+
762
+
fetch(
763
+
`https://e4c7-2a01-4b00-805d-b800-4869-64a3-a1d2-7f3b.ngrok-free.app/changeCatBirthday?ownerEmail={{customer.email}}&oldCatName=${oldName}&newCatName=${catName}&newCatBreed=${catBreed}&newCatGender=${catGender}&newCatBirthday=${catBirthday}`
764
+
)
765
+
.then(async (response) => {
766
+
if (!response.ok) {
767
+
const message = await response.text();
768
+
birthdayChangeErrorDiv.textContent = message;
769
+
return;
770
+
}
771
+
772
+
birthdayErrorDiv.textContent = '';
773
+
774
+
const catDivs = document.querySelectorAll('.cat');
775
+
catDivs.forEach((catDiv) => {
776
+
if (
777
+
catDiv.querySelector('.cat-header').textContent ===
778
+
oldName
779
+
) {
780
+
catDiv.querySelector('.cat-header').textContent =
781
+
catName;
782
+
catDiv.querySelector(
783
+
'.cat-detail:nth-of-type(1)'
784
+
).textContent = `Breed: ${catBreed}`;
785
+
catDiv.querySelector(
786
+
'.cat-detail:nth-of-type(2)'
787
+
).textContent = `Sex: ${catGender}`;
788
+
catDiv.querySelector(
789
+
'.cat-detail:nth-of-type(3)'
790
+
).textContent = `Birthday: ${catBirthday}`;
791
+
}
792
+
});
793
+
794
+
changeSlotDialog.close();
795
+
return;
796
+
})
797
+
.catch((err) => {
798
+
console.error(err);
799
+
birthdayChangeErrorDiv.textContent =
800
+
'Error connecting to the server, please try again later.';
801
+
return;
802
+
});
803
+
});
683
804
}
684
805
</script>
685
806
{{/if}} {{/partial}} {{> layout/base}}