The repo for Purrform's main BigCommerce store.
Merge pull request #1 from Teser301:breeder-previous-referrals
feat: Show previous referrals
authored by
Rogerio Romao
and committed by
GitHub
7ba40557
266a836a
+442
-292
+1
assets/scss/custom/_variables.scss
+1
assets/scss/custom/_variables.scss
+114
-81
assets/scss/custom/components/_accountsReward.scss
+114
-81
assets/scss/custom/components/_accountsReward.scss
···
1
1
.account.account--fixed {
2
-
.account-content {
3
-
.reward-section {
4
-
padding: 20px 0;
5
-
border-bottom: 5px solid $color-p;
6
-
&:not(:first-child) {
7
-
padding: 40px 0;
8
-
}
2
+
.account-content {
3
+
.reward-section {
4
+
padding: 20px 0;
5
+
border-bottom: 5px solid $color-p;
6
+
&:not(:first-child) {
7
+
padding: 40px 0;
8
+
}
9
+
}
10
+
.reward-form {
11
+
display: grid;
12
+
grid-template-columns: 1fr 1fr;
13
+
gap: 20px;
14
+
button {
15
+
margin: 0;
16
+
grid-column: 1 / 3;
17
+
}
18
+
}
19
+
button {
20
+
margin-top: 20px;
21
+
@media (max-width: $tablet) {
22
+
width: 100%;
23
+
}
24
+
}
25
+
.disabled {
26
+
background-color: #a2a2a2 !important;
27
+
opacity: 0.8;
28
+
color: whitesmoke !important;
29
+
pointer-events: none;
30
+
}
31
+
input,
32
+
select {
33
+
height: 48px;
34
+
border-radius: 32px;
35
+
font-family: 'Filson Pro';
36
+
font-size: 1rem;
37
+
line-height: 48px;
38
+
appearance: none;
39
+
background-color: white;
40
+
border: 1px solid #8f8f8f;
41
+
color: #666666;
42
+
display: block;
43
+
font-family: inherit;
44
+
margin: 0;
45
+
padding: 0rem 1rem;
46
+
47
+
transition: border-color 100ms ease-out;
48
+
width: 100%;
49
+
}
50
+
51
+
// Specific elements
52
+
#loyalty-points-balance {
53
+
font-weight: bold;
54
+
}
55
+
.list-of-cats {
56
+
display: grid;
57
+
grid-template-columns: repeat(2, minmax(200px, 1fr));
58
+
gap: 20px;
59
+
padding: 20px;
60
+
@media (max-width: $tablet) {
61
+
grid-template-columns: 1fr;
62
+
}
63
+
.cat {
64
+
background-color: #fff;
65
+
border: 1px solid #ddd;
66
+
border-radius: 8px;
67
+
padding: 20px;
68
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
69
+
&.disabled {
70
+
background-color: #8f8f8f;
71
+
color: #666666;
72
+
}
73
+
.cat-header {
74
+
font-size: 20px;
75
+
font-weight: bold;
76
+
margin-bottom: 10px;
77
+
}
78
+
79
+
.cat-detail {
80
+
font-size: 16px;
81
+
margin-bottom: 5px;
82
+
}
83
+
}
84
+
}
9
85
}
10
-
.reward-form {
11
-
display: grid;
12
-
grid-template-columns: 1fr 1fr;
13
-
gap: 20px;
14
-
button {
15
-
margin: 0;
16
-
grid-column: 1 / 3;
17
-
}
18
-
}
19
-
button {
20
-
margin-top: 20px;
21
-
@media (max-width: $tablet) {
86
+
.account-footer {
87
+
text-align: center;
88
+
padding: 40px 0.75rem;
22
89
width: 100%;
23
-
}
90
+
float: left;
24
91
}
25
-
.disabled {
26
-
background-color: #666666 !important;
27
-
opacity: 0.4;
28
-
pointer-events: none;
92
+
#previous-length {
93
+
margin-top: 1rem;
29
94
}
30
-
input,
31
-
select {
32
-
height: 48px;
33
-
border-radius: 32px;
34
-
font-family: "Filson Pro";
35
-
font-size: 1rem;
36
-
line-height: 48px;
37
-
appearance: none;
38
-
background-color: white;
39
-
border: 1px solid #8f8f8f;
40
-
color: #666666;
41
-
display: block;
42
-
font-family: inherit;
43
-
margin: 0;
44
-
padding: 0rem 1rem;
45
-
46
-
transition: border-color 100ms ease-out;
47
-
width: 100%;
48
-
}
49
-
50
-
// Specific elements
51
-
#loyalty-points-balance {
52
-
font-weight: bold;
53
-
}
54
-
.list-of-cats {
55
-
display: grid;
56
-
grid-template-columns: repeat(2, minmax(200px, 1fr));
57
-
gap: 20px;
58
-
padding: 20px;
59
-
@media (max-width: $tablet) {
60
-
grid-template-columns: 1fr;
61
-
}
62
-
.cat {
63
-
background-color: #fff;
95
+
#previous-grid {
64
96
border: 1px solid #ddd;
65
-
border-radius: 8px;
97
+
border-radius: 1rem;
66
98
padding: 20px;
67
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
68
-
&.disabled {
69
-
background-color: #8f8f8f;
70
-
color: #666666;
71
-
}
72
-
.cat-header {
73
-
font-size: 20px;
74
-
font-weight: bold;
75
-
margin-bottom: 10px;
76
-
}
99
+
display: none;
100
+
grid-template-columns: 1.7fr 0.6fr;
101
+
margin-top: 2rem;
77
102
78
-
.cat-detail {
79
-
font-size: 16px;
80
-
margin-bottom: 5px;
103
+
@media (max-width: $mobile) {
104
+
overflow: auto;
105
+
.previous-grid-title {
106
+
font-size: 0.9rem;
107
+
}
108
+
.previous-grid-item {
109
+
font-size: 0.7rem;
110
+
}
111
+
.previous-grid-item:nth-child(even) {
112
+
text-align: right;
113
+
}
81
114
}
82
-
}
83
115
}
84
-
}
85
-
.account-footer {
86
-
text-align: center;
87
-
padding: 40px 0.75rem;
88
-
width: 100%;
89
-
float: left;
90
-
span {
116
+
.previous-grid-title {
117
+
font-size: 1.15rem;
118
+
font-weight: bold;
119
+
border-bottom: 1px solid #ddd;
91
120
}
92
-
}
121
+
.previous-grid-item {
122
+
font-size: 0.8rem;
123
+
padding: 0.75rem 0;
124
+
border-bottom: 1px solid #ddd;
125
+
}
93
126
}
+75
-73
package.json
+75
-73
package.json
···
1
1
{
2
-
"name": "bigcommerce-cornerstone",
3
-
"description": "The BigCommerce reference theme for the Stencil platform",
4
-
"version": "6.10.0",
5
-
"private": true,
6
-
"author": "BigCommerce",
7
-
"license": "MIT",
8
-
"dependencies": {
9
-
"@bigcommerce/stencil-utils": "6.15.0",
10
-
"core-js": "^3.9.0",
11
-
"creditcards": "^4.2.0",
12
-
"easyzoom": "^2.5.3",
13
-
"focus-trap": "^6.3.0",
14
-
"focus-within-polyfill": "^5.1.0",
15
-
"formdata-polyfill": "^3.0.20",
16
-
"foundation-sites": "^5.5.3",
17
-
"jquery": "^3.6.1",
18
-
"jstree": "^3.3.12",
19
-
"lazysizes": "5.2.2",
20
-
"lodash": "^4.17.21",
21
-
"nod-validate": "^2.0.12",
22
-
"object-fit-images": "^3.2.4",
23
-
"regenerator-runtime": "^0.13.7",
24
-
"slick-carousel": "^1.8.1",
25
-
"svg-injector": "^1.1.3",
26
-
"webfontloader": "^1.6.28",
27
-
"whatwg-fetch": "^3.6.1"
28
-
},
29
-
"devDependencies": {
30
-
"@babel/core": "^7.12.17",
31
-
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
32
-
"@babel/preset-env": "^7.12.17",
33
-
"@bigcommerce/citadel": "^2.15.1",
34
-
"babel-eslint": "^10.1.0",
35
-
"babel-jest": "^25.5.1",
36
-
"babel-loader": "^8.2.2",
37
-
"babel-plugin-lodash": "^3.3.4",
38
-
"clean-webpack-plugin": "^4.0.0",
39
-
"cli": "^1.0.1",
40
-
"eslint": "^4.8.0",
41
-
"eslint-config-airbnb": "^16.0.0",
42
-
"eslint-plugin-import": "^2.22.1",
43
-
"eslint-plugin-jsx-a11y": "^6.4.1",
44
-
"eslint-plugin-react": "^7.22.0",
45
-
"expose-loader": "^4.0.0",
46
-
"grunt": "^1.5.3",
47
-
"grunt-cli": "^1.3.2",
48
-
"grunt-eslint": "^20.0.0",
49
-
"grunt-run": "^0.8.1",
50
-
"grunt-stylelint": "^0.16.0",
51
-
"grunt-svgstore": "^2.0.0",
52
-
"imports-loader": "^0.7.1",
53
-
"jest": "^27.2.2",
54
-
"lighthouse": "^10.0.0",
55
-
"load-grunt-config": "^3.0.1",
56
-
"lodash-webpack-plugin": "^0.11.6",
57
-
"stylelint": "^13.9.0",
58
-
"stylelint-config-sass-guidelines": "^7.1.0",
59
-
"stylelint-scss": "^3.18.0",
60
-
"time-grunt": "^1.2.2",
61
-
"url": "^0.11.0",
62
-
"webpack": "^5.76.0",
63
-
"webpack-bundle-analyzer": "^4.5.0",
64
-
"webpack-cli": "^4.5.0",
65
-
"webpack-merge": "^5.8.0"
66
-
},
67
-
"scripts": {
68
-
"build": "npx webpack --config webpack.prod.js",
69
-
"buildDev": "npx webpack --config webpack.dev.js",
70
-
"lighthouse": "npx lighthouse --config-path=lighthouse-config.js --quiet --output json --chrome-flags=\"--headless\" $URL | jq '.audits | map_values(.rawValue)'",
71
-
"test": "npx jest",
72
-
"stylelint": "npx stylelint **/*.scss",
73
-
"stylelint:fix": "npx stylelint --fix **/*.scss"
74
-
}
2
+
"name": "bigcommerce-cornerstone",
3
+
"description": "The BigCommerce reference theme for the Stencil platform",
4
+
"version": "6.10.0",
5
+
"private": true,
6
+
"author": "BigCommerce",
7
+
"license": "MIT",
8
+
"dependencies": {
9
+
"@bigcommerce/stencil-utils": "6.15.0",
10
+
"core-js": "^3.9.0",
11
+
"creditcards": "^4.2.0",
12
+
"easyzoom": "^2.5.3",
13
+
"focus-trap": "^6.3.0",
14
+
"focus-within-polyfill": "^5.1.0",
15
+
"formdata-polyfill": "^3.0.20",
16
+
"foundation-sites": "^5.5.3",
17
+
"jquery": "^3.6.1",
18
+
"jstree": "^3.3.12",
19
+
"lazysizes": "5.2.2",
20
+
"lodash": "^4.17.21",
21
+
"nod-validate": "^2.0.12",
22
+
"object-fit-images": "^3.2.4",
23
+
"regenerator-runtime": "^0.13.7",
24
+
"slick-carousel": "^1.8.1",
25
+
"svg-injector": "^1.1.3",
26
+
"webfontloader": "^1.6.28",
27
+
"whatwg-fetch": "^3.6.1"
28
+
},
29
+
"devDependencies": {
30
+
"@babel/core": "^7.12.17",
31
+
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
32
+
"@babel/preset-env": "^7.12.17",
33
+
"@bigcommerce/citadel": "^2.15.1",
34
+
"babel-eslint": "^10.1.0",
35
+
"babel-jest": "^25.5.1",
36
+
"babel-loader": "^8.2.2",
37
+
"babel-plugin-lodash": "^3.3.4",
38
+
"clean-webpack-plugin": "^4.0.0",
39
+
"cli": "^1.0.1",
40
+
"eslint": "^4.8.0",
41
+
"eslint-config-airbnb": "^16.0.0",
42
+
"eslint-plugin-import": "^2.22.1",
43
+
"eslint-plugin-jsx-a11y": "^6.4.1",
44
+
"eslint-plugin-react": "^7.22.0",
45
+
"expose-loader": "^4.0.0",
46
+
"grunt": "^1.5.3",
47
+
"grunt-cli": "^1.3.2",
48
+
"grunt-eslint": "^20.0.0",
49
+
"grunt-run": "^0.8.1",
50
+
"grunt-stylelint": "^0.16.0",
51
+
"grunt-svgstore": "^2.0.0",
52
+
"imports-loader": "^0.7.1",
53
+
"jest": "^27.2.2",
54
+
"lighthouse": "^10.0.0",
55
+
"load-grunt-config": "^3.0.1",
56
+
"lodash-webpack-plugin": "^0.11.6",
57
+
"stylelint": "^13.9.0",
58
+
"stylelint-config-sass-guidelines": "^7.1.0",
59
+
"stylelint-scss": "^3.18.0",
60
+
"time-grunt": "^1.2.2",
61
+
"url": "^0.11.0",
62
+
"webpack": "^5.76.0",
63
+
"webpack-bundle-analyzer": "^4.5.0",
64
+
"webpack-cli": "^4.5.0",
65
+
"webpack-merge": "^5.8.0"
66
+
},
67
+
"scripts": {
68
+
"start": "stencil start -c 1 -o",
69
+
"publish": "stencil push -c 1 -a -d",
70
+
"build": "npx webpack --config webpack.prod.js",
71
+
"buildDev": "npx webpack --config webpack.dev.js",
72
+
"lighthouse": "npx lighthouse --config-path=lighthouse-config.js --quiet --output json --chrome-flags=\"--headless\" $URL | jq '.audits | map_values(.rawValue)'",
73
+
"test": "npx jest",
74
+
"stylelint": "npx stylelint **/*.scss",
75
+
"stylelint:fix": "npx stylelint --fix **/*.scss"
76
+
}
75
77
}
+252
-138
templates/pages/account/inbox.html
+252
-138
templates/pages/account/inbox.html
···
1
-
{{#partial "page"}}
2
-
3
-
{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
1
+
{{#partial "page"}} {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
4
2
<h1 class="page-heading page-heading--account">Rewards</h1>
5
3
{{> components/account/navigation account_page='messages'}}
6
4
···
13
11
<p>Purchase goods to earn points for discounts!</p>
14
12
<p id="loyalty-points-balance">No balance found.</p>
15
13
</div>
16
-
{{/unless}}
17
-
{{#if customer_group_id '===' 11}}
14
+
{{/unless}} {{#if customer_group_id '===' 11}}
18
15
<div class="reward-section">
19
16
<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!
17
+
<p
18
+
>Register up to 4 cats to receive a 10% discount voucher
19
+
when it's their birthday! The purrfect gift!
21
20
</p>
22
21
<div class="reward-form">
23
22
<div>
24
-
<label class="form-label" for="reward-cat-name">Name</label>
25
-
<input type="text" id="reward-cat-name">
23
+
<label class="form-label" for="reward-cat-name"
24
+
>Name</label
25
+
>
26
+
<input type="text" id="reward-cat-name" />
26
27
</div>
27
28
<div>
28
-
<label class="form-label" for="reward-cat-sex">Sex</label>
29
+
<label class="form-label" for="reward-cat-sex"
30
+
>Sex</label
31
+
>
29
32
<select name="sex" id="reward-cat-sex">
30
33
<option value="Male">Male</option>
31
34
<option value="Female">Female</option>
32
35
</select>
33
36
</div>
34
37
<div>
35
-
<label class="form-label" for="reward-cat-breed">Breed</label>
36
-
<input type="text" id="reward-cat-breed">
38
+
<label class="form-label" for="reward-cat-breed"
39
+
>Breed</label
40
+
>
41
+
<input type="text" id="reward-cat-breed" />
37
42
</div>
38
43
<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">
44
+
<label class="form-label" for="reward-cat-birthday"
45
+
>Birthday</label
46
+
>
47
+
<input
48
+
type="text"
49
+
id="reward-cat-birthday"
50
+
placeholder="DD/MM/YYYY"
51
+
maxlength="10"
52
+
/>
41
53
</div>
42
54
<button class="button button--primary">Add Cat</button>
43
55
</div>
···
46
58
<div class="cat-header">Cat #1</div>
47
59
<div class="cat-detail">Name: Josh</div>
48
60
<div class="cat-detail">Age: 12</div>
49
-
<div class="cat-detail">Birthday: 10th of June, 1997</div>
61
+
<div class="cat-detail"
62
+
>Birthday: 10th of June, 1997</div
63
+
>
50
64
</div>
51
65
<div class="cat">
52
66
<div class="cat-header">Cat #2</div>
53
67
<div class="cat-detail">Name: Bella</div>
54
68
<div class="cat-detail">Age: 8</div>
55
-
<div class="cat-detail">Birthday: 22nd of August, 2015</div>
69
+
<div class="cat-detail"
70
+
>Birthday: 22nd of August, 2015</div
71
+
>
56
72
</div>
57
73
<div class="cat">
58
74
<div class="cat-header">Cat #3</div>
59
75
<div class="cat-detail">Name: Whiskers</div>
60
76
<div class="cat-detail">Age: 4</div>
61
-
<div class="cat-detail">Birthday: 14th of March, 2019</div>
77
+
<div class="cat-detail"
78
+
>Birthday: 14th of March, 2019</div
79
+
>
62
80
</div>
63
81
<div class="cat disabled">
64
82
<div class="cat-header">Cat #4</div>
···
68
86
</div>
69
87
</div>
70
88
</div>
71
-
{{/if}}
72
-
{{#if customer_group_name '===' 'Testing Group'}}
89
+
{{/if}} {{#if customer_group_name '===' 'Testing Group'}}
73
90
<div id="friend-referral" class="reward-section">
74
91
<h2>Refer a friend</h2>
75
-
<p>Refer a friend and both of you will receive a 5% discount code.</p>
92
+
<p
93
+
>Refer a friend and both of you will receive a 5% discount
94
+
code.</p
95
+
>
76
96
<form id="friend-referral-form">
77
97
<p id="friendError"></p>
78
-
<label class="form-label" for="reward-friend-refer-email">Email Address</label>
79
-
<input type="email" id="reward-friend-refer-email">
80
-
<button class="button button--primary" type="submit">Submit</button>
98
+
<label class="form-label" for="reward-friend-refer-email"
99
+
>Email Address</label
100
+
>
101
+
<input type="email" id="reward-friend-refer-email" />
102
+
<button class="button button--primary" type="submit"
103
+
>Submit</button
104
+
>
81
105
</form>
82
106
</div>
83
-
{{/if}}
84
-
{{#if customer_group_name '===' 'Breeder'}}
107
+
{{/if}} {{#if customer_group_name '===' 'Breeder'}}
85
108
<div id="breeder-referral" class="reward-section">
86
109
<h2>Breeder referral</h2>
87
-
<p>Send a 10% discount code to your customers and when 5 customers redeem their codes, you will receive
88
-
a 5% discount code as a reward.</p>
110
+
<p
111
+
>Send a 10% discount code to your customers and when 5
112
+
customers redeem their codes, you will receive a 5% discount
113
+
code as a reward.</p
114
+
>
89
115
<form id="breeder-referral-form">
90
116
<p id="breederError"></p>
91
-
<label class="form-label" for="reward-breeder-refer-email">Email Address</label>
92
-
<input type="email" id="reward-breeder-refer-email">
93
-
<button class="button button--primary" type="submit">Submit</button>
117
+
<label class="form-label" for="reward-breeder-refer-email"
118
+
>Email Address</label
119
+
>
120
+
<input type="email" id="reward-breeder-refer-email" />
121
+
<button class="button button--primary" type="submit"
122
+
>Submit</button
123
+
>
94
124
</form>
125
+
<button
126
+
id="previous-referrals-btn"
127
+
class="button button--primary"
128
+
>See previous referrals</button
129
+
>
130
+
<div id="previous-container">
131
+
<div id="previous-length"></div>
132
+
<div id="previous-grid">
133
+
<div
134
+
id="previous-grid-title-email"
135
+
class="previous-grid-title"
136
+
>Email</div
137
+
>
138
+
<div
139
+
id="previous-grid-title-purchased"
140
+
class="previous-grid-title"
141
+
>Purchased</div
142
+
>
143
+
</div>
144
+
</div>
95
145
</div>
96
146
{{/if}}
97
147
</section>
98
148
<section class="account-footer">
99
-
<span>Terms and conditions apply, full T&Cs can be found at <br /> <a
100
-
href="https://www.purrform.co.uk/terms-conditions/">https://www.purrform.co.uk/terms-conditions/</a>
149
+
<span
150
+
>Terms and conditions apply, full T&Cs can be found at <br />
151
+
<a href="https://www.purrform.co.uk/terms-conditions/"
152
+
>https://www.purrform.co.uk/terms-conditions/</a
153
+
>
101
154
</span>
102
155
</section>
103
156
</div>
104
157
</div>
105
-
{{#if customer_group_name '===' 'Breeder'}}
106
-
{{inject "breederEmail" customer.email}}
158
+
{{#if customer_group_name '===' 'Breeder'}} {{inject "breederEmail"
159
+
customer.email}}
160
+
<script>
161
+
// sends a referral
162
+
const jsContext = JSON.parse({{jsContext}});
163
+
const breederReferralForm = document.querySelector('#breeder-referral-form')
164
+
const breederRerferralButton = document.querySelector('#breeder-referral-form .button-primary')
165
+
const breederReferralInput = document.querySelector('#reward-breeder-refer-email')
166
+
const breederEmail = jsContext.breederEmail
167
+
const errorMsg = document.querySelector('#breederError')
168
+
// errorMsg.textContent = "";
169
+
breederReferralForm.addEventListener('submit', (e) => {
170
+
e.preventDefault();
171
+
e.submitter.classList.add('disabled')
172
+
173
+
if (breederReferralInput.value.trim() === "") {
174
+
errorMsg.textContent = "Error: Field is empty";
175
+
errorMsg.style.color = "red";
176
+
setTimeout(function() {
177
+
e.submitter.classList.remove('disabled')
178
+
}, 750);
179
+
return;
180
+
}
181
+
182
+
fetch(`https://purrform-apps-027e.onrender.com/breederReferralForm?breederEmail=${breederEmail}&customerEmail=${breederReferralInput.value}`, {
183
+
method: "GET",
184
+
headers: {
185
+
'Content-Type': 'application/json'
186
+
},
187
+
})
188
+
.then(async (response) => {
189
+
if (!response.ok) {
190
+
const message = await response.text()
191
+
errorMsg.style.color = "red";
192
+
errorMsg.textContent = message
193
+
194
+
} else {
195
+
errorMsg.style.color = "initial";
196
+
errorMsg.style.fontWeight = "bold";
197
+
errorMsg.textContent = "Referral succesful - 10% discount code sent to customer.";
198
+
breederReferralInput.value = "";
199
+
}
200
+
setTimeout(function() {
201
+
e.submitter.classList.remove('disabled')
202
+
}, 750);
203
+
})
204
+
.catch(err => {
205
+
errorMsg.textContent = err.message
206
+
console.log("Error on referral")
207
+
setTimeout(function() {
208
+
e.submitter.classList.remove('disabled')
209
+
}, 750);
210
+
})
211
+
})
212
+
</script>
107
213
<script>
108
-
const jsContext = JSON.parse({{jsContext}});
109
-
const breederReferralForm = document.querySelector('#breeder-referral-form')
110
-
const breederRerferralButton = document.querySelector('#breeder-referral-form .button-primary')
111
-
const breederReferralInput = document.querySelector('#reward-breeder-refer-email')
112
-
const breederEmail = jsContext.breederEmail
113
-
const errorMsg = document.querySelector('#breederError')
114
-
// errorMsg.textContent = "";
115
-
breederReferralForm.addEventListener('submit', (e) => {
116
-
e.preventDefault();
117
-
e.submitter.classList.add('disabled')
118
-
// console.log(breederReferralInput.value)
119
-
// https://purrform-apps-027e.onrender.com/breederReferralForm?breederEmail=${breederEmail}&customerEmail=${breederReferralInput.value}
120
-
// https://4722-188-214-15-243.ngrok-free.app/breederReferralForm?breederEmail=${breederEmail}&customerEmail=${breederReferralInput.value}
121
-
fetch(`https://purrform-apps-027e.onrender.com/breederReferralForm?breederEmail=${breederEmail}&customerEmail=${breederReferralInput.value}`, {
122
-
method: "GET",
214
+
// fetches previous referrals
215
+
const seePreviousBtn = document.querySelector('#previous-referrals-btn');
216
+
const previousLength = document.querySelector('#previous-length');
217
+
218
+
seePreviousBtn.addEventListener('click', (e) => {
219
+
e.preventDefault();
220
+
fetch(
221
+
`https://purrform-apps-027e.onrender.com/getBreedersPreviousReferrals?breederEmail=${breederEmail}`,
222
+
{
223
+
method: 'GET',
123
224
headers: {
124
-
'Content-Type': 'application/json'
225
+
'Content-Type': 'application/json',
125
226
},
126
-
})
227
+
}
228
+
)
127
229
.then((response) => {
128
230
if (!response.ok) {
129
-
if (response.status == 401) {
130
-
if (breederReferralInput.value.trim() !== "") {
131
-
errorMsg.textContent = "Error: This email has already been referred.";
132
-
} else {
133
-
errorMsg.textContent = "Error: Field is empty";
231
+
previousLength.textContent =
232
+
'Error fetching previous referrals, please try again later.';
233
+
} else {
234
+
response.json().then((data) => {
235
+
previousLength.textContent = `You have referred ${data.length} customers.`;
236
+
const previousGrid =
237
+
document.querySelector('#previous-grid');
238
+
if (data.length > 0) {
239
+
// remove previous grid items (for refreshing)
240
+
const gridItems = document.querySelectorAll(
241
+
'.previous-grid-item'
242
+
);
243
+
gridItems.forEach((item) => {
244
+
item.remove();
245
+
});
246
+
previousGrid.style.display = 'grid';
134
247
}
135
-
errorMsg.style.color = "red";
136
-
} else if (response.status == 402) {
137
-
errorMsg.textContent = "Error: Your referral was created, however we couldn't deliver the email to the customer.";
138
-
errorMsg.style.color = "red";
139
-
} else {
140
-
errorMsg.textContent = "Error: Something went wrong when creating the referral."
141
-
errorMsg.style.color = "red";
142
-
}
143
-
} else {
144
-
errorMsg.textContent = "Referral succesful";
145
-
breederReferralInput.value = "";
146
-
errorMsg.style.color = "initial";
248
+
data.forEach(({ customer_email, has_purchased }) => {
249
+
const email = document.createElement('div');
250
+
email.classList.add('previous-grid-item');
251
+
email.textContent = customer_email;
252
+
const purchased = document.createElement('div');
253
+
purchased.classList.add('previous-grid-item');
254
+
purchased.textContent = has_purchased
255
+
? 'Yes'
256
+
: 'No';
257
+
previousGrid.appendChild(email);
258
+
previousGrid.appendChild(purchased);
259
+
});
260
+
});
147
261
}
148
-
setTimeout(function() {
149
-
e.submitter.classList.remove('disabled')
150
-
}, 750);
151
262
})
152
-
.catch(err => {
153
-
errorMsg.textContent = err.message
154
-
console.log("Error on referral")
155
-
setTimeout(function() {
156
-
e.submitter.classList.remove('disabled')
157
-
}, 750);
158
-
})
159
-
})
263
+
.catch((err) => {
264
+
previousLength.textContent =
265
+
'Error fetching previous referrals, please try again later.';
266
+
});
267
+
});
160
268
</script>
161
-
{{/if}}
162
-
{{#if customer_group_name '===' 'Testing Group'}}
163
-
{{inject "friendEmail" customer.email}}
269
+
{{/if}} {{#if customer_group_name '===' 'Testing Group'}} {{inject "friendEmail"
270
+
customer.email}}
164
271
<script>
165
-
const friendJsContext = JSON.parse({{jsContext}});
166
-
const friendReferralForm = document.querySelector('#friend-referral-form')
167
-
const friendReferralInput = document.querySelector('#reward-friend-refer-email')
168
-
const friendEmail = friendJsContext.friendEmail
169
-
const friendErrorMsg = document.querySelector('#friendError')
170
-
// errorMsg.textContent = "";
171
-
friendReferralForm.addEventListener('submit', (e) => {
172
-
e.preventDefault();
173
-
e.submitter.classList.add('disabled')
174
-
// console.log(friendReferralInput.value)
175
-
// https://purrform-apps-027e.onrender.com/friendReferralForm?friendEmail=${friendEmail}&customerEmail=${friendReferralInput.value}
176
-
// https://4722-188-214-15-243.ngrok-free.app/friendReferralForm?friendEmail=${friendEmail}&customerEmail=${friendReferralInput.value}
177
-
fetch(`https://purrform-apps-027e.onrender.com/friendReferralForm?friendEmail=${friendEmail}&customerEmail=${friendReferralInput.value}`, {
178
-
method: "GET",
179
-
headers: {
180
-
'Content-Type': 'application/json'
181
-
},
182
-
})
183
-
.then((response) => {
184
-
if (!response.ok) {
185
-
if (response.status == 401) {
186
-
friendErrorMsg.textContent = "Error: This email has already been referred.";
187
-
friendErrorMsg.style.color = "red";
188
-
} else if (response.status == 402) {
189
-
friendErrorMsg.textContent = "Error: Your referral was created, however we couldn't deliver the email to the customer.";
190
-
friendErrorMsg.style.color = "red";
191
-
} else {
192
-
friendErrorMsg.textContent = "Error: Something went wrong when creating the referral."
193
-
friendErrorMsg.style.color = "red";
194
-
}
272
+
const friendJsContext = JSON.parse({{jsContext}});
273
+
const friendReferralForm = document.querySelector('#friend-referral-form')
274
+
const friendReferralInput = document.querySelector('#reward-friend-refer-email')
275
+
const friendEmail = friendJsContext.friendEmail
276
+
const friendErrorMsg = document.querySelector('#friendError')
277
+
// errorMsg.textContent = "";
278
+
friendReferralForm.addEventListener('submit', (e) => {
279
+
e.preventDefault();
280
+
e.submitter.classList.add('disabled')
281
+
// console.log(friendReferralInput.value)
282
+
// https://purrform-apps-027e.onrender.com/friendReferralForm?friendEmail=${friendEmail}&customerEmail=${friendReferralInput.value}
283
+
// https://4722-188-214-15-243.ngrok-free.app/friendReferralForm?friendEmail=${friendEmail}&customerEmail=${friendReferralInput.value}
284
+
fetch(`https://purrform-apps-027e.onrender.com/friendReferralForm?friendEmail=${friendEmail}&customerEmail=${friendReferralInput.value}`, {
285
+
method: "GET",
286
+
headers: {
287
+
'Content-Type': 'application/json'
288
+
},
289
+
})
290
+
.then((response) => {
291
+
if (!response.ok) {
292
+
if (response.status == 401) {
293
+
friendErrorMsg.textContent = "Error: This email has already been referred.";
294
+
friendErrorMsg.style.color = "red";
295
+
} else if (response.status == 402) {
296
+
friendErrorMsg.textContent = "Error: Your referral was created, however we couldn't deliver the email to the customer.";
297
+
friendErrorMsg.style.color = "red";
195
298
} else {
196
-
friendErrorMsg.textContent = "Referral succesful";
197
-
friendReferralInput.value = "";
198
-
friendErrorMsg.style.color = "initial";
299
+
friendErrorMsg.textContent = "Error: Something went wrong when creating the referral."
300
+
friendErrorMsg.style.color = "red";
199
301
}
200
-
setTimeout(function() {
201
-
e.submitter.classList.remove('disabled')
202
-
}, 750);
203
-
})
204
-
.catch(err => {
205
-
friendErrorMsg.textContent = err.message
206
-
console.log("Error on referral")
207
-
setTimeout(function() {
208
-
e.submitter.classList.remove('disabled')
209
-
}, 750);
210
-
})
302
+
} else {
303
+
friendErrorMsg.textContent = "Referral succesful";
304
+
friendReferralInput.value = "";
305
+
friendErrorMsg.style.color = "initial";
306
+
}
307
+
setTimeout(function() {
308
+
e.submitter.classList.remove('disabled')
309
+
}, 750);
310
+
})
311
+
.catch(err => {
312
+
friendErrorMsg.textContent = err.message
313
+
console.log("Error on referral")
314
+
setTimeout(function() {
315
+
e.submitter.classList.remove('disabled')
316
+
}, 750);
211
317
})
318
+
})
212
319
</script>
213
320
{{/if}}
214
321
<script>
···
223
330
224
331
// Insert slashes
225
332
if (value.length >= 5) {
226
-
value = value.slice(0, 2) + '/' + value.slice(2, 4) + '/' + value.slice(4, 8);
333
+
value =
334
+
value.slice(0, 2) +
335
+
'/' +
336
+
value.slice(2, 4) +
337
+
'/' +
338
+
value.slice(4, 8);
227
339
} else if (value.length >= 3) {
228
340
value = value.slice(0, 2) + '/' + value.slice(2, 4);
229
341
} else if (value.length >= 1) {
···
233
345
e.target.value = value;
234
346
});
235
347
}
236
-
237
348
});
238
349
</script>
239
350
<script>
···
244
355
credentials: 'same-origin',
245
356
headers: {
246
357
'Content-Type': 'application/json',
247
-
'Authorization': 'Bearer {{ settings.storefront_api.token }}'
358
+
Authorization: 'Bearer {{ settings.storefront_api.token }}',
248
359
},
249
360
body: JSON.stringify({
250
361
query: `
···
258
369
}
259
370
}
260
371
}
261
-
`
372
+
`,
262
373
}),
263
374
})
264
-
.then(res => res.json())
265
-
.then(json => {
375
+
.then((res) => res.json())
376
+
.then((json) => {
266
377
const attribute = json.data.customer.attributes.attribute;
267
378
const points = attribute ? attribute.value : '0'; // Default to '0' if attribute is not found
268
379
269
-
const pointsBalanceElement = document.getElementById('loyalty-points-balance');
380
+
const pointsBalanceElement = document.getElementById(
381
+
'loyalty-points-balance'
382
+
);
270
383
pointsBalanceElement.textContent = `Current Balance: ${points}`;
271
384
})
272
-
.catch(error => {
273
-
const pointsBalanceElement = document.getElementById('loyalty-points-balance');
385
+
.catch((error) => {
386
+
const pointsBalanceElement = document.getElementById(
387
+
'loyalty-points-balance'
388
+
);
274
389
pointsBalanceElement.textContent = 'Current Balance: 0';
275
390
});
276
391
}
277
-
fetchLoyalty()
278
-
document.addEventListener('DOMContentLoaded', fetchLoyalty())
392
+
fetchLoyalty();
393
+
document.addEventListener('DOMContentLoaded', fetchLoyalty());
279
394
</script>
280
-
{{/partial}}
281
-
{{> layout/base}}
395
+
{{/partial}} {{> layout/base}}