|
|
|
@ -8,26 +8,29 @@ |
|
|
|
<meta charset="utf-8" /> |
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
|
<style> |
|
|
|
.nav .nav-item { |
|
|
|
margin-right: 10px !important; |
|
|
|
.custom-tab { |
|
|
|
background-color: #262262 !important; |
|
|
|
color: white !important; |
|
|
|
border: 1px solid #262262 !important; |
|
|
|
transition: background-color 0.3s ease-in-out; |
|
|
|
} |
|
|
|
.custom-tab:hover { |
|
|
|
background-color: white !important; |
|
|
|
color: black !important; |
|
|
|
} |
|
|
|
|
|
|
|
.col-md-3 { |
|
|
|
flex: 0 0 auto !important; |
|
|
|
width: 100% !important; |
|
|
|
} |
|
|
|
|
|
|
|
.nav { |
|
|
|
padding-bottom: 8px !important; |
|
|
|
} |
|
|
|
|
|
|
|
.img-fluid { |
|
|
|
max-width: 302px; |
|
|
|
height: 300px; |
|
|
|
max-width: 368px; |
|
|
|
height: 214px; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-primary { |
|
|
|
background-color:#262262 !important; |
|
|
|
background-color: #262262 !important; |
|
|
|
border-color: #262262 !important; |
|
|
|
} |
|
|
|
|
|
|
|
@ -44,7 +47,7 @@ |
|
|
|
position: relative !important; |
|
|
|
} |
|
|
|
|
|
|
|
#referImg{ |
|
|
|
#referImg { |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
|
|
|
|
@ -82,6 +85,35 @@ |
|
|
|
.banner-small-2 .text-content { |
|
|
|
width: 60%; |
|
|
|
} |
|
|
|
|
|
|
|
.referral-code-container { |
|
|
|
position: relative; |
|
|
|
width: 18%; |
|
|
|
} |
|
|
|
|
|
|
|
.referral-code-header { |
|
|
|
font-size: 1.5rem; |
|
|
|
} |
|
|
|
.referral-code { |
|
|
|
width: 140%; |
|
|
|
padding-right: 30px; |
|
|
|
padding-left: 13px; |
|
|
|
background-color: #f0f8ff; |
|
|
|
border: 1px solid #a0a0a0; |
|
|
|
border-radius: 5px; |
|
|
|
} |
|
|
|
|
|
|
|
.referral-code:focus { |
|
|
|
outline: none; |
|
|
|
} |
|
|
|
|
|
|
|
.copy-icon { |
|
|
|
position: absolute; |
|
|
|
top: -3px; |
|
|
|
right: -43px; |
|
|
|
padding: 10px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
<script src="~/vendor/jquery/jquery.min.js"></script> |
|
|
|
@ -103,29 +135,44 @@ |
|
|
|
<div class="card"> |
|
|
|
<div class="card-body p-4"> |
|
|
|
<div> |
|
|
|
<ul class="nav nav-pills"> |
|
|
|
<li class="nav-item"> |
|
|
|
<a class="nav-link active" aria-current="page" href="#" id="invite-tab">Invite</a> |
|
|
|
</li> |
|
|
|
<li class="nav-item"> |
|
|
|
<a class="nav-link" href="#" id="referrals-tab" onclick="GetRewardDetails()">Referrals</a> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
@* <ul class="nav nav-pills"> |
|
|
|
<li class="nav-item"> |
|
|
|
<a class="nav-link active" aria-current="page" href="#" id="invite-tab">Invite</a> |
|
|
|
</li> |
|
|
|
<li class="nav-item"> |
|
|
|
<a class="nav-link" href="#" id="referrals-tab" onclick="GetRewardDetails()">Referrals</a> |
|
|
|
</li> |
|
|
|
</ul> *@ |
|
|
|
<nav> |
|
|
|
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist"> |
|
|
|
<a class="nav-item nav-link active custom-tab" id="invite-tab" data-toggle="tab" href="#invite" role="tab" aria-controls="invite" aria-selected="true">Invite</a> |
|
|
|
<a class="nav-item nav-link custom-tab" id="referrals-tab" data-toggle="tab" href="#referrals" role="tab" aria-controls="referrals" aria-selected="false">Referrals</a> |
|
|
|
</div> |
|
|
|
</nav> |
|
|
|
</div> |
|
|
|
<div class="row mb-4"> |
|
|
|
<div class="col-md-3 banner"> |
|
|
|
<div id="invite-content"> |
|
|
|
<div class="banner-small banner-small-2 bg-2 d-flex align-items-center flex-direction-column"> |
|
|
|
<div class="col-md-6"> |
|
|
|
<h3>Refer & Earn</h3> |
|
|
|
<div class="mb-4"> |
|
|
|
<h2 class="referral-code-header">Available Reward Points: <span id="showRewardPoints"></span></h2> |
|
|
|
</div> |
|
|
|
<h2 class="referral-code-header">Refer & Earn</h2> |
|
|
|
<p class="text-black fs-5">Receive a FREE 5$ bonus credit as Reward Amount</p> |
|
|
|
<p>You and your friend will each be given 5$ in bonus credit. Get 1$ after they successfully register, and 4$ after their first transaction.</p> |
|
|
|
@* <p>Get 1$ after they successfully register, and 4$ after their first transaction.</p> *@ |
|
|
|
<p>There may be minimum send requirements, Terms and Conditions.</p> |
|
|
|
<p class="text-black fs-5">Refer IME Londong to your friends & get many more exciting deals <br> plus discount on your every transfer.</p> |
|
|
|
<h2 class="referral-code-header">Your Referral Code:</h2> |
|
|
|
<div class="referral-code-container"> |
|
|
|
<input type="text" id="referralCode" class="referral-code" readonly> |
|
|
|
<span class="copy-icon" id="copyReferralCode" onclick="copyReferralCode()"> |
|
|
|
<i class="fa fa-copy"></i> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col-md-4" id="referImg"> |
|
|
|
<img src="~/images/refer.png" alt="Image Description" class="img-fluid" /> |
|
|
|
<img src="~/images/reefer-and-earn.png" alt="Image Description" class="img-fluid" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
@ -144,11 +191,11 @@ |
|
|
|
</tbody> |
|
|
|
</table> |
|
|
|
</div> |
|
|
|
<div class="col-md-12"> |
|
|
|
<div class="mb-3 mt-5"> |
|
|
|
<button class="btn btn-lg btn-primary">Send Invite <i class="fa fa-share-alt px-1" aria-hidden="true"></i></button> |
|
|
|
</div> |
|
|
|
@* <div class="col-md-12"> |
|
|
|
<div class="mb-3 mt-5"> |
|
|
|
<button class="btn btn-lg btn-primary">Send Invite <i class="fa fa-share-alt px-1" aria-hidden="true"></i></button> |
|
|
|
</div> |
|
|
|
</div> *@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -164,6 +211,7 @@ |
|
|
|
@section scripts{ |
|
|
|
<script> |
|
|
|
$(document).ready(function () { |
|
|
|
GetRewardDetails(); |
|
|
|
|
|
|
|
$('#invite-content').show(); |
|
|
|
$('#referrals-content').hide(); |
|
|
|
@ -188,7 +236,13 @@ |
|
|
|
url: '/GetRewardDetails', |
|
|
|
data: {}, |
|
|
|
success: function (response) { |
|
|
|
debugger |
|
|
|
var data = response.notificationModel; |
|
|
|
var totalRewardPoints = data.length > 0 ? data[0].rewardPoints : 0; |
|
|
|
$('#showRewardPoints').text(totalRewardPoints); |
|
|
|
|
|
|
|
var referralCode = data.length > 0 ? data[0].referralCode : ''; |
|
|
|
$('#referralCode').val(referralCode); |
|
|
|
|
|
|
|
var tableBody = $('#reward-table-body'); |
|
|
|
tableBody.empty(); |
|
|
|
@ -196,7 +250,7 @@ |
|
|
|
data.forEach(function (item) { |
|
|
|
var row = '<tr>' + |
|
|
|
'<td>' + item.title + '</td>' + |
|
|
|
'<td>' + item.rewardPoints + '</td>' + |
|
|
|
'<td>' + item.rewardAmount + '</td>' + |
|
|
|
'<td>' + item.customerName + '</td>' + |
|
|
|
'<td>' + item.date + '</td>' + |
|
|
|
'</tr>'; |
|
|
|
@ -208,5 +262,10 @@ |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
function copyReferralCode() { |
|
|
|
var referralCode = document.getElementById('referralCode'); |
|
|
|
referralCode.select(); |
|
|
|
document.execCommand('copy'); |
|
|
|
} |
|
|
|
</script> |
|
|
|
} |
