The repo for Purrform's main BigCommerce store.
dev: breeder referral front-end
+170
-74
+170
-74
templates/pages/account/inbox.html
+170
-74
templates/pages/account/inbox.html
···
15
15
</div>
16
16
{{/unless}}
17
17
{{#if customer_group_id '===' 11}}
18
-
<div class="reward-section">
19
-
<h2>Birthday gift</h2>
20
-
<p>Register up to 4 cats to receive a 10% discount voucher when it's their birthday! The purrfect gift!
21
-
</p>
22
-
<div class="reward-form">
23
-
<div>
24
-
<label class="form-label" for="reward-cat-name">Name</label>
25
-
<input type="text" id="reward-cat-name">
26
-
</div>
27
-
<div>
28
-
<label class="form-label" for="reward-cat-sex">Sex</label>
29
-
<select name="sex" id="reward-cat-sex">
30
-
<option value="Male">Male</option>
31
-
<option value="Female">Female</option>
32
-
</select>
33
-
</div>
34
-
<div>
35
-
<label class="form-label" for="reward-cat-breed">Breed</label>
36
-
<input type="text" id="reward-cat-breed">
37
-
</div>
38
-
<div>
39
-
<label class="form-label" for="reward-cat-birthday">Birthday</label>
40
-
<input type="text" id="reward-cat-birthday" placeholder="DD/MM/YYYY" maxlength="10">
41
-
</div>
42
-
<button class="button button--primary">Add Cat</button>
18
+
<div class="reward-section">
19
+
<h2>Birthday gift</h2>
20
+
<p>Register up to 4 cats to receive a 10% discount voucher when it's their birthday! The purrfect gift!
21
+
</p>
22
+
<div class="reward-form">
23
+
<div>
24
+
<label class="form-label" for="reward-cat-name">Name</label>
25
+
<input type="text" id="reward-cat-name">
43
26
</div>
44
-
<div class="list-of-cats">
45
-
<div class="cat">
46
-
<div class="cat-header">Cat #1</div>
47
-
<div class="cat-detail">Name: Josh</div>
48
-
<div class="cat-detail">Age: 12</div>
49
-
<div class="cat-detail">Birthday: 10th of June, 1997</div>
50
-
</div>
51
-
<div class="cat">
52
-
<div class="cat-header">Cat #2</div>
53
-
<div class="cat-detail">Name: Bella</div>
54
-
<div class="cat-detail">Age: 8</div>
55
-
<div class="cat-detail">Birthday: 22nd of August, 2015</div>
56
-
</div>
57
-
<div class="cat">
58
-
<div class="cat-header">Cat #3</div>
59
-
<div class="cat-detail">Name: Whiskers</div>
60
-
<div class="cat-detail">Age: 4</div>
61
-
<div class="cat-detail">Birthday: 14th of March, 2019</div>
62
-
</div>
63
-
<div class="cat disabled">
64
-
<div class="cat-header">Cat #4</div>
65
-
<!-- <div class="cat-detail">Name: --</div>
27
+
<div>
28
+
<label class="form-label" for="reward-cat-sex">Sex</label>
29
+
<select name="sex" id="reward-cat-sex">
30
+
<option value="Male">Male</option>
31
+
<option value="Female">Female</option>
32
+
</select>
33
+
</div>
34
+
<div>
35
+
<label class="form-label" for="reward-cat-breed">Breed</label>
36
+
<input type="text" id="reward-cat-breed">
37
+
</div>
38
+
<div>
39
+
<label class="form-label" for="reward-cat-birthday">Birthday</label>
40
+
<input type="text" id="reward-cat-birthday" placeholder="DD/MM/YYYY" maxlength="10">
41
+
</div>
42
+
<button class="button button--primary">Add Cat</button>
43
+
</div>
44
+
<div class="list-of-cats">
45
+
<div class="cat">
46
+
<div class="cat-header">Cat #1</div>
47
+
<div class="cat-detail">Name: Josh</div>
48
+
<div class="cat-detail">Age: 12</div>
49
+
<div class="cat-detail">Birthday: 10th of June, 1997</div>
50
+
</div>
51
+
<div class="cat">
52
+
<div class="cat-header">Cat #2</div>
53
+
<div class="cat-detail">Name: Bella</div>
54
+
<div class="cat-detail">Age: 8</div>
55
+
<div class="cat-detail">Birthday: 22nd of August, 2015</div>
56
+
</div>
57
+
<div class="cat">
58
+
<div class="cat-header">Cat #3</div>
59
+
<div class="cat-detail">Name: Whiskers</div>
60
+
<div class="cat-detail">Age: 4</div>
61
+
<div class="cat-detail">Birthday: 14th of March, 2019</div>
62
+
</div>
63
+
<div class="cat disabled">
64
+
<div class="cat-header">Cat #4</div>
65
+
<!-- <div class="cat-detail">Name: --</div>
66
66
<div class="cat-detail">Age: -</div>
67
67
<div class="cat-detail">Birthday: ----</div> -->
68
-
</div>
69
68
</div>
70
69
</div>
71
-
<div class="reward-section">
72
-
<h2>Refer a friend</h2>
73
-
<p>Refer a friend and both of you will receive a 5% discount code.</p>
70
+
</div>
71
+
<div id="friend-referral" class="reward-section">
72
+
<h2>Refer a friend</h2>
73
+
<p>Refer a friend and both of you will receive a 5% discount code.</p>
74
+
<form id="friend-referral-form">
75
+
<p id="friendError"></p>
74
76
<label class="form-label" for="reward-friend-refer-email">Email Address</label>
75
-
<input type="text" id="reward-friend-refer-email">
76
-
<button class="button button--primary">Submit</button>
77
-
</div>
77
+
<input type="email" id="reward-friend-refer-email">
78
+
<button class="button button--primary" type="submit">Submit</button>
79
+
</form>
80
+
</div>
78
81
{{/if}}
79
-
{{#if customer_group_id '===' 11}}
80
-
<div class="reward-section">
82
+
{{#if customer_group_name '===' 'Breeder'}}
83
+
<div id="breeder-referral" class="reward-section">
81
84
<h2>Breeder referral</h2>
82
85
<p>Send a 10% discount code to your customers and when 5 customers redeem their codes, you will receive
83
86
a 5% discount code as a reward.</p>
84
-
<label class="form-label" for="reward-breeder-refer-email">Email Address</label>
85
-
<input type="text" id="reward-breeder-refer-email">
86
-
<button class="button button--primary">Submit</button>
87
+
<form id="breeder-referral-form">
88
+
<p id="breederError"></p>
89
+
<label class="form-label" for="reward-breeder-refer-email">Email Address</label>
90
+
<input type="email" id="reward-breeder-refer-email">
91
+
<button class="button button--primary" type="submit">Submit</button>
92
+
</form>
87
93
</div>
88
94
{{/if}}
89
95
</section>
···
94
100
</section>
95
101
</div>
96
102
</div>
103
+
{{#if customer_group_name '===' 'Breeder'}}
104
+
{{inject "breederEmail" customer.email}}
105
+
<script>
106
+
const jsContext = JSON.parse({{jsContext}});
107
+
const breederReferralForm = document.querySelector('#breeder-referral-form')
108
+
const breederReferralInput = document.querySelector('#reward-breeder-refer-email')
109
+
const breederEmail = jsContext.breederEmail
110
+
const errorMsg = document.querySelector('#breederError')
111
+
// errorMsg.textContent = "";
112
+
breederReferralForm.addEventListener('submit', (e) => {
113
+
e.preventDefault();
114
+
// console.log(breederReferralInput.value)
115
+
// https://purrform-apps-027e.onrender.com/breederReferralForm?breederEmail=${breederEmail}&customerEmail=${breederReferralInput.value}
116
+
// https://4722-188-214-15-243.ngrok-free.app/breederReferralForm?breederEmail=${breederEmail}&customerEmail=${breederReferralInput.value}
117
+
fetch(`https://purrform-apps-027e.onrender.com/breederReferralForm?breederEmail=${breederEmail}&customerEmail=${breederReferralInput.value}`, {
118
+
method: "GET",
119
+
headers: {
120
+
'Content-Type': 'application/json'
121
+
},
122
+
})
123
+
.then((response) => {
124
+
if (!response.ok) {
125
+
if (response.status == 401) {
126
+
errorMsg.textContent = "Error: This email has already been referred.";
127
+
return
128
+
} else if (response.status == 402) {
129
+
errorMsg.textContent = "Error: Your referral was created, however we couldn't deliver the email to the customer.";
130
+
return
131
+
} else {
132
+
errorMsg.textContent = "Error: Something went wrong when creating the referral."
133
+
return
134
+
}
135
+
} else {
136
+
errorMsg.textContent = "Referral succesful";
137
+
breederReferralInput.value = "";
138
+
}
139
+
})
140
+
.catch(err => {
141
+
errorMsg.textContent = err.message
142
+
console.log("Error on referral")
143
+
})
144
+
})
145
+
</script>
146
+
{{/if}}
147
+
{{#if customer_group_name '===' 'Personal'}}
148
+
{{inject "friendEmail" customer.email}}
149
+
<script>
150
+
const friendJsContext = JSON.parse({{jsContext}});
151
+
const friendReferralForm = document.querySelector('#friend-referral-form')
152
+
const friendReferralInput = document.querySelector('#reward-friend-refer-email')
153
+
const friendEmail = friendJsContext.friendEmail
154
+
const friendErrorMsg = document.querySelector('#friendError')
155
+
// errorMsg.textContent = "";
156
+
friendReferralForm.addEventListener('submit', (e) => {
157
+
e.preventDefault();
158
+
// console.log(friendReferralInput.value)
159
+
// https://purrform-apps-027e.onrender.com/friendReferralForm?friendEmail=${friendEmail}&customerEmail=${friendReferralInput.value}
160
+
// https://4722-188-214-15-243.ngrok-free.app/friendReferralForm?friendEmail=${friendEmail}&customerEmail=${friendReferralInput.value}
161
+
fetch(`https://purrform-apps-027e.onrender.com/friendReferralForm?friendEmail=${friendEmail}&customerEmail=${friendReferralInput.value}`, {
162
+
method: "GET",
163
+
headers: {
164
+
'Content-Type': 'application/json'
165
+
},
166
+
})
167
+
.then((response) => {
168
+
if (!response.ok) {
169
+
if (response.status == 401) {
170
+
friendErrorMsg.textContent = "Error: This email has already been referred.";
171
+
return
172
+
} else if (response.status == 402) {
173
+
friendErrorMsg.textContent = "Error: Your referral was created, however we couldn't deliver the email to the customer.";
174
+
return
175
+
} else {
176
+
friendErrorMsg.textContent = "Error: Something went wrong when creating the referral."
177
+
return
178
+
}
179
+
} else {
180
+
friendErrorMsg.textContent = "Referral succesful";
181
+
friendReferralInput.value = "";
182
+
}
183
+
})
184
+
.catch(err => {
185
+
friendErrorMsg.textContent = err.message
186
+
console.log("Error on referral")
187
+
})
188
+
})
189
+
</script>
190
+
{{/if}}
97
191
<script>
98
192
document.addEventListener('DOMContentLoaded', (event) => {
99
193
const dateInput = document.getElementById('reward-cat-birthday');
194
+
if (dateInput) {
195
+
dateInput.addEventListener('input', function (e) {
196
+
let value = e.target.value.replace(/\D/g, ''); // Remove all non-digit characters
197
+
if (value.length > 8) {
198
+
value = value.slice(0, 8); // Limit input to 8 digits
199
+
}
100
200
101
-
dateInput.addEventListener('input', function (e) {
102
-
let value = e.target.value.replace(/\D/g, ''); // Remove all non-digit characters
103
-
if (value.length > 8) {
104
-
value = value.slice(0, 8); // Limit input to 8 digits
105
-
}
201
+
// Insert slashes
202
+
if (value.length >= 5) {
203
+
value = value.slice(0, 2) + '/' + value.slice(2, 4) + '/' + value.slice(4, 8);
204
+
} else if (value.length >= 3) {
205
+
value = value.slice(0, 2) + '/' + value.slice(2, 4);
206
+
} else if (value.length >= 1) {
207
+
value = value.slice(0, 2);
208
+
}
106
209
107
-
// Insert slashes
108
-
if (value.length >= 5) {
109
-
value = value.slice(0, 2) + '/' + value.slice(2, 4) + '/' + value.slice(4, 8);
110
-
} else if (value.length >= 3) {
111
-
value = value.slice(0, 2) + '/' + value.slice(2, 4);
112
-
} else if (value.length >= 1) {
113
-
value = value.slice(0, 2);
114
-
}
210
+
e.target.value = value;
211
+
});
212
+
}
115
213
116
-
e.target.value = value;
117
-
});
118
214
});
119
215
</script>
120
216
<script>