Luminate's eCommerce/FiveServ integration is almost complete. We had to do the error messages because FiveServe redirects regardless of outcome of transaction... very dumb. Aretera notes.

This commit is contained in:
Norm Rasmussen
2024-06-05 21:16:22 -04:00
parent e325b9a3bc
commit a808da6818
5 changed files with 195 additions and 23 deletions

View File

@ -7,7 +7,8 @@
</a> </a>
<div class="np-learning-path-banner-content" style="align-items: center; display: flex; flex-direction: column; justify-content: center;"> <div class="np-learning-path-banner-content" style="align-items: center; display: flex; flex-direction: column; justify-content: center;">
<h3 class="np-learning-path-banner-headline" style="color: #8F75DD; font-size: 25px; font-weight: 500; line-height: 25px; margin: 0 0 4px;">You earned it!</h3> <h3 class="np-learning-path-banner-headline" style="color: #8F75DD; font-size: 25px; font-weight: 500; line-height: 25px; margin: 0 0 4px;">You earned it!</h3>
<p class="np-learning-path-banner-description" style="color: #1b3e4f; font-size: 20px; font-weight: 400; line-height: 20px; margin: 0 0 12px;">Congratulations, you're Walmart Luminate Replenishment Certified. Click the button below to add your accomplishment to LinkedIn!</p> <p class="np-learning-path-banner-description" style="color: #1b3e4f; font-size: 20px; font-weight: 400; line-height: 20px; margin: 0 0 12px;">
Congratulations, you're Walmart Luminate Replenishment Certified. Click the button below to add your accomplishment to LinkedIn!</p>
<div class="np-learning-path-banner-actions"> <div class="np-learning-path-banner-actions">
<a href="https://linkedin.com/profile/add/?startTask=Walmart%20Luminate%20Replenishment%20Certification&name=Walmart%20Luminate%20Replenishment%20Certification&organizationId=80427781&certUrl=https%3A%2F%2Fwalmartluminate.northpass.com" <a href="https://linkedin.com/profile/add/?startTask=Walmart%20Luminate%20Replenishment%20Certification&name=Walmart%20Luminate%20Replenishment%20Certification&organizationId=80427781&certUrl=https%3A%2F%2Fwalmartluminate.northpass.com"
class="np-learning-path-banner-action np-learning-path-banner-action--primary"> class="np-learning-path-banner-action np-learning-path-banner-action--primary">
@ -15,6 +16,23 @@
</div> </div>
</div> </div>
</div> </div>
{% elsif learning_path.id == "f8ce6c73-a086-4e44-8b96-74883d7fae0e" %}
<div class="np-learning-path-completed-banner np-learning-path-banner" style="background-color: #DBD7EE">
<a class="np-learning-path-banner-image" style="width:30%; height:30%" onclick="downloadImage()">
<img style="width:100%; height:100%"
id="image"
src="https://s3.amazonaws.com/schoolkeep-production/wysiwyg/10183441-2254-4b1e-a9f7-9549ca773257/20240604142406_Sales-Analysis.png">
</a>
<div class="np-learning-path-banner-content" style="align-items: center; display: flex; flex-direction: column; justify-content: center;">
<h3 class="np-learning-path-banner-headline" style="color: #8F75DD; font-size: 25px; font-weight: 500; line-height: 25px; margin: 0 0 4px;">You earned it!</h3>
<p class="np-learning-path-banner-description" style="color: #1b3e4f; font-size: 20px; font-weight: 400; line-height: 20px; margin: 0 0 12px;">
Congratulations, you're Walmart Luminate Sales Analysis Certified. Click the button below to add your accomplishment to LinkedIn!</p>
<div class="np-learning-path-banner-actions">
<a href="https://linkedin.com/profile/add/?startTask=Walmart%20Luminate%20Sales%20Analysis%20Certification&name=Walmart%20Luminate%20Sales%20Analysis%20Certification&organizationId=80427781&certUrl=https%3A%2F%2Fwalmartluminate.northpass.com" class="np-learning-path-banner-action np-learning-path-banner-action--primary">
Add to LinkedIn!</a>
</div>
</div>
</div>
{% else %} {% else %}
<div class="np-learning-path-completed-banner np-learning-path-banner"> <div class="np-learning-path-completed-banner np-learning-path-banner">
<img class="np-learning-path-banner-image" src="https://s3.amazonaws.com/static.northpass.com/images/stars-completed.svg"/> <img class="np-learning-path-banner-image" src="https://s3.amazonaws.com/static.northpass.com/images/stars-completed.svg"/>

View File

@ -11,7 +11,7 @@
src="{{ course.image_url }}" src="{{ course.image_url }}"
class="np-top-image np-top-image-spacing" class="np-top-image np-top-image-spacing"
alt="{{ course.name }}" alt="{{ course.name }}"
/> />
</div> </div>
{% include "course_description" %} {% include "course_description" %}
@ -37,6 +37,8 @@
<div class="np-top-cta"> <div class="np-top-cta">
{% include "course_progress_and_cta" %} {% include "course_progress_and_cta" %}
</div> </div>
<div class="np-alert" id="fiveserv-alert" style="background-color: red; color: white; display:none;">
</div>
{% include "course_outline" %} {% include "course_outline" %}
</div> </div>
</div> </div>

View File

@ -0,0 +1,132 @@
<div class="np-top-cta-progress-content">
<div class="np-top-cta-progress-title np-text-title">
{% t .header %}
</div>
<div class="np-progress-bar-container">
<div
style="width: {{ course.progress }}%"
class="np-button-background-color np-card-progress-bar">
</div>
</div>
{% if course.enrolled? == false and course.properties.course_cost != 0 %}
<div class="np-top-cta-progress-text np-button-color" style="font-size: 25px;">
$ {{ course.properties.course_cost }}
</div>
</div>
<a
class="np-top-button np-button-font-color np-button np-button-big"
<input id="snappayhppform_response" name="snappayhppform_response" />
<button type="button" value="Submit" onclick="myclick()" class="button" style="color: white; border:none; background:transparent;">
<strong>Purchase</strong>
<div id='mylink'></div>
</button>
<input src="https://stage.snappayglobal.com/Interop/HostedPaymentPage" id="snappayhppform_response" type="hidden" name="snappayhppform_response" />
</a>
{% else %}
<div class="np-top-cta-progress-text
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
">
{% t shared.progress, count: course.progress %}
</div>
</div>
{% if course.learner_can_retake? %}
<form action="{% route course_retake, id: course.id %}" method="POST">
{% form_authenticity_token %}
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
{% t .retake, key: current_school.course_vocabulary %}
</button>
</form>
{% else %}
<a
class="np-top-button np-button-font-color np-button np-button-big"
{% if course.enrolled? %}
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
{% else %}
href="{% route course_enrollment, code: course.enrollment_code %}"
{% endif %}
>
{% if course.enrolled? == false %}
{% t shared.enroll %}
{% elsif course.started? == false %}
{% t shared.course.start, key: current_school.course_vocabulary %}
{% elsif course.completed? %}
{% t shared.course.view, key: current_school.course_vocabulary %}
{% else %}
{% t shared.continue %}
{% endif %}
</a>
{% endif %}
{% endif %}
{% comment %}
<div id="dvsnappay_hppform">
</div>
<div id="dvsnappay_hppform">
<!-- HTML is dynamically placed here -->
</div>
{% endcomment %}
<script type="text/javascript">
function myclick() {
sessionStorage.clear()
var mylink = document.getElementById('mylink');
mylink.onclick = function () {
var t = document.createElement("script");
t.setAttribute("id", "snappay_hppform");
t.setAttribute("src", "https://stage.snappayglobal.com/Areas/Interop/Scripts/HPPForm.js");
t.setAttribute("data-target", "#snappayhppform_response");
t.setAttribute("data-callback", "submit_external_ecommerce");
t.setAttribute("data-accountid", "1003003518");
t.setAttribute("data-merchantid", "822200009000");
t.setAttribute("data-customerid", "100");
t.setAttribute("data-paymentmode", "CC");
t.setAttribute("data-transactionamount", '{{ course.properties.course_cost }}');
t.setAttribute("data-currencycode", "USD");
t.setAttribute("data-firstname", "{{ current_person.first_name }}");
t.setAttribute("data-lastname", "{{ current_person.last_name }}");
t.setAttribute("data-email", "{{ current_person.email }}");
t.setAttribute("data-redirectionurl", "https://luminatesandbox.northpass.com/app/courses/{{ course.id }}"); //url they are currently on
t.setAttribute("data-snappayurl", "https://stage.snappayglobal.com/Interop/HostedPaymentPage");
document.getElementsByTagName("head")[0].appendChild(t);
return false;
}
document.getElementById('mylink').click();
}
var response = document.getElementById('snappayhppform_response');
function submit_external_ecommerce() {
var result = $("#snappayhppform_response").val();
sessionStorage.setItem("snappayhpp_response", result);
sessionStorage.setItem("caller", "js");
var obj = JSON.parse(result);
var response = obj['response']
var inside = JSON.parse(obj['response'])
var stringside = JSON.stringify(inside)
sessionStorage.setItem("stringside", stringside)
}
var error_code = JSON.parse(sessionStorage.getItem('stringside')).pgreturncode
var error_desc = JSON.parse(sessionStorage.getItem('stringside')).pgreturndescription
console.log(error_code)
console.log(error_desc)
if(error_code != 000 ) {
console.log("If statement has run")
var alert = document.getElementById("fiveserv-alert")
document.getElementById("fiveserv-alert").style.display = 'grid';
var error_text = document.createTextNode(error_desc);
alert.appendChild(error_text)
} else {
window.location.replace('https://luminatesandbox.northpass.com/c/{{ course.enrollment_code }}')
sessionStorage.clear()
}
// Set course prop as whole number, if 0, don't do anything
// If user is not enrolled in course, run functions - check error message
// With redirect they will land back on page, with error message from sessionstorage
// If no error, auto-redirect/click to enrollment link. window.replace(/c/aklwjdalkjd)
</script>

View File

@ -5,21 +5,19 @@
<div class="np-homepage-headline"> <div class="np-homepage-headline">
{{ homepage.featured_courses_headline }} {{ homepage.featured_courses_headline }}
</div> </div>
{%- comment -%}
<div id="dvsnappay_hppform"> <div id="dvsnappay_hppform">
<!-- HTML is dynamically placed here --> <!-- HTML is dynamically placed here -->
</div> </div>
<input id="snappayhppform_response" name="snappayhppform_response" /> <input id="snappayhppform_response" name="snappayhppform_response" />
<button type="button" value="Submit" onclick="myclick()" class="button" style="border:none; background:transparent;"> <button type="button" value="Submit" onclick="myclick()" class="button" style="border:none; background:transparent;">
Purchase access to a course! Purchase access to a course!
<div id='mylink'></div> <div id='mylink'></div>
</button> </button>
<div id="dvsnappay_hppform"> <div id="dvsnappay_hppform">
</div> </div>
<input src="https://stage.snappayglobal.com/Interop/HostedPaymentPage" id="snappayhppform_response" type="hidden" name="snappayhppform_response" /> <input src="https://stage.snappayglobal.com/Interop/HostedPaymentPage" id="snappayhppform_response" type="hidden" name="snappayhppform_response" />
<script type="text/javascript"> <script type="text/javascript">
function myclick() { function myclick() {
var mylink = document.getElementById('mylink'); var mylink = document.getElementById('mylink');
@ -33,39 +31,41 @@
t.setAttribute("data-merchantid", "822200009000"); t.setAttribute("data-merchantid", "822200009000");
t.setAttribute("data-customerid", "100"); t.setAttribute("data-customerid", "100");
t.setAttribute("data-paymentmode", "CC"); t.setAttribute("data-paymentmode", "CC");
t.setAttribute("data-transactionamount", "100"); t.setAttribute("data-transactionamount", '{{ course.properties.cost }}');
t.setAttribute("data-currencycode", "USD"); t.setAttribute("data-currencycode", "USD");
t.setAttribute("data-firstname", "No one"); t.setAttribute("data-firstname", "No one");
t.setAttribute("data-lastname", "Noooo One"); t.setAttribute("data-lastname", "Noooo One");
t.setAttribute("data-email", "Noone@none.com"); t.setAttribute("data-email", "Noone@none.com");
t.setAttribute("data-redirectionurl", "https://www.walmartluminate.com"); t.setAttribute("data-redirectionurl", "https://luminatesandbox.northpass.com/app"); //url they are currently on
t.setAttribute("data-snappayurl", "https://stage.snappayglobal.com/Interop/HostedPaymentPage"); t.setAttribute("data-snappayurl", "https://stage.snappayglobal.com/Interop/HostedPaymentPage");
document.getElementsByTagName("head")[0].appendChild(t); document.getElementsByTagName("head")[0].appendChild(t);
return false; return false;
} }
document.getElementById('mylink').click(); document.getElementById('mylink').click();
} }
</script>
<script>
var response = document.getElementById('snappayhppform_response'); var response = document.getElementById('snappayhppform_response');
</script> function submit_external_ecommerce() {
<script type="text/javascript">
function submit_external_ecommerce() {
var result = $("#snappayhppform_response").val(); var result = $("#snappayhppform_response").val();
sessionStorage.setItem("snappayhpp_response", result); sessionStorage.setItem("snappayhpp_response", result);
sessionStorage.setItem("caller", "js"); sessionStorage.setItem("caller", "js");
var obj = JSON.parse(result);
var response = obj['response']
// var pgreturncode = response['pgreturncode']
// sessionStorage.setItem("returncode", pgreturncode)
var inside = JSON.parse(obj['response'])
sessionStorage.setItem("insidevals", inside)
var stringside = JSON.stringify(inside)
sessionStorage.setItem("stringside", stringside)
} }
var obj = JSON.parse(result);
var response = obj['response']
// var pgreturncode = response['pgreturncode']
// sessionStorage.setItem("returncode", pgreturncode)
var inside = JSON.parse(obj['response'])
sessionStorage.setItem("insidevals", inside)
var stringside = JSON.stringify(inside)
sessionStorage.setItem("stringside", stringside)
console.log(inside)
// Set course prop as whole number, if 0, don't do anything
// If user is not enrolled in course, run functions - check error message
// With redirect they will land back on page, with error message from sessionstorage
// If no error, auto-redirect/click to enrollment link. window.replace(/c/aklwjdalkjd)
</script> </script>
{%- endcomment -%}

View File

@ -182,3 +182,23 @@ Two questions from Emily:
Jackie has been laid off. Jackie has been laid off.
Emily on PTO May 6-10 Emily on PTO May 6-10
## 06-05-2024
Mark was big advocate for gainsight
Emily goes up to PS, but her boss left
Now reporting to MarComs
Support went to Engineering
This started in April
Sally and Noor still involved
Emily not feeling great
Julie was her boss
"we could do whatever we wanted"
Increase the spread of the academy
Artera UI is changing in July
Emily advocating for a button in the UI