norm/Gainsight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Backed up Spark's sandbox templates with catalog vs enrolled courses (catalog doesn't work yet...).

Browse Source
This commit is contained in:
Norm Rasmussen
2024-10-30 17:04:28 -04:00
parent dec65e7bf7
commit 6aabae3469
342 changed files with 9112 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/.DS_Store vendored Normal file
View File

Binary file not shown.

39
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/_cards_course.html.liquid Normal file
View File

@ -0,0 +1,39 @@
{% capture course_label %}{% endcapture %}
{% capture course_data_label %}none{% endcapture %}
{% assign course_is_new = false %}
{% assign created_at_date_seconds = current_person.created_at | date: "%s" %}
{% assign course_published_date_seconds = course.properties.initial_publish_date | date: "%s" %}
{% if course_published_date_seconds > created_at_date_seconds %}{% assign course_is_new = true %}{% endif %}
{% if course_is_new %}
{% if course.progress == 0 %}
{% capture course_label %}<div class="label label-green new-topic-label">New</div>{% endcapture %}
{% capture course_data_label %}new{% endcapture %}
{% endif %}
{% endif %}
{% if course.progress > 0 and course.progress < 100 %}
{% capture course_label %}<div class="label label-orange">In progress</div>{% endcapture %}
{% capture course_data_label %}in-progress{% endcapture %}
{% elsif course.completed? %}
{% capture course_label %}<div class="label label-gray">Viewed</div>{% endcapture %}
{% capture course_data_label %}viewed{% endcapture %}
{% endif %}
<a class="np-card featured-card" href="{% route course, id: course.id %}">
<div class="np-card-container">
<img src="{{ course.image_url }}" alt="{{ course.name }}" />
<div class="card-content-wrapper">
<div class="featured-card-title">
{{ course.name }}
</div>
<div class="featured-card-desc">
{{ course.short_description }}
</div>
<div class="card-info">
{% if course.properties.course_length != 'NULL' %}
<div class="card-content-length">{{ course.properties.course_length }}</div>
{% endif %}
{{course_label}}
</div>
</div>
</div>
</a>

42
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/_cards_course_condensed.html.liquid Normal file
View File

@ -0,0 +1,42 @@
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
{% capture course_label %}{% endcapture %}{% capture course_data_label %}none{% endcapture %}
{% assign is_new = false %}
{% assign created_at_date_seconds = current_person.created_at | date: "%s" %}
{% assign course_published_date_seconds = course.properties.initial_publish_date | date: "%s" %}
{% if course_published_date_seconds > created_at_date_seconds %}
{% assign is_new = true %}
{% endif %}
{% if is_new %}
{% if course.progress == 0 %}
{% capture course_label %}<div class="label label-green new-topic-label">New</div>{% endcapture %}
{% capture course_data_label %}new{% endcapture %}
{% endif %}
{% endif %}
{% if course.progress > 0 and course.progress < 100 %}
{% capture course_label %}<div class="label label-orange">In progress</div>{% endcapture %}
{% capture course_data_label %}in-progress{% endcapture %}
{% elsif course.completed? %}
{% capture course_label %}<div class="label label-gray">Viewed</div>{% endcapture %}
{% capture course_data_label %}viewed{% endcapture %}
{% endif %}
<a href="{{ course_path }}" class="np-card-condensed" data-label="{{course_data_label}}">
<div class="np-card-condensed-content-wrapper">
<div class="title-wrapper">
<div class="np-course-title">{{ course.name }}</div>
<div class="np-card-condensed-content-description">
{{ course.full_description }}
</div>
<div class="info-wrapper">
{% if course.properties.course_length != 'NULL' %}
<div class="card-content-length">{{ course.properties.course_length }}</div>
{% endif %}
<div class="labels-wrapper">{{course_label}}</div>
</div>
</div>
</div>
</a>

72
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/_cards_faq.html.liquid Normal file
View File

@ -0,0 +1,72 @@
<div class="faq-resource-card">
<button class="accordion">
<div class="accordion-content">
<div class="accordion-title np-search-result-title">{{course.name}}</div>
<i class="far fa-plus"></i>
</div>
</button>
<div class="panel">
<div class="panel-content-container">
{{course.full_description}}
</div>
</div>
</div>
<style>
.faq-resource-card {
background-color: #fff;
box-shadow: 0px 2px 8px rgb(0 0 0 / 10%);
margin-bottom: 15px!important;
padding: 0!important;
min-height: auto;
min-width: auto;
}
.faq-resource-card .accordion {
background-color: #fff;
border-radius:4px;
cursor: pointer;
padding: 15px;
width: 100%;
border: none;
text-align: left;
outline: none;
transition: 0.4s;
color: #3B4459;
font-size: 16px;
line-height: 24px;
}
.faq-resource-card .accordion-title {
color: #3b4459;
font-size: 16px;
line-height: 20px;
font-weight: 400;
}
.faq-resource-card .accordion-content {
display:flex;
justify-content:space-between;
align-items: center;
}
.faq-resource-card .accordion-content i {
color: #2a71dc;
font-size: 24px;
transition:all 0.4s;
}
.faq-resource-card .active .accordion-content i {
transform:rotate(45deg)
}
.faq-resource-card .panel {
padding: 0 15px;
background-color: #fff;
font-size: 16px;
line-height: 24px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.faq-resource-card .panel-content-container {
padding-bottom: 15px;
}
</style>

25
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/_cards_learning_path.html.liquid Normal file
View File

@ -0,0 +1,25 @@
<a class="np-card featured-card" href="{% route learning_path, id: learning_path.id %}">
<div class="np-card-container lp-card-container">
<img src="{{ learning_path.image_url }}" alt="{{ learning_path.name }}" />
<div class="card-content-wrapper">
<div class="featured-card-title">{{ learning_path.name }}</div>
<div class="featured-card-desc">{{ learning_path.description | strip_html }}</div>
<div class="card-info">
<div class="lp-courses-count">{{ learning_path.items.count }} resources</div>
<span class="dot-divider">&#183;</span>
{% for item in learning_path.items %}
{% if item.course? %}
{% for enrolled_course in enrolled_courses %}
{% if item.id == enrolled_course.id %}
{% assign course_time = enrolled_course.properties.course_length | split: " " %}
{% assign course_time_number = course_time | slice: 0 %}
<div class="np-hidden hidden-course-length" data-course-length="{{course_time_number}}"></div>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
<div class="lp-time"></div>
</div>
</div>
</div>
</a>

25
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/_cards_learning_path_condensed.html.liquid Normal file
View File

@ -0,0 +1,25 @@
{% capture course_label %}{% endcapture %}
{% capture course_data_label %}none{% endcapture %}
{% if learning_path.progress > 0 and learning_path.progress < 100 %}
{% capture course_label %}<div class="label label-orange">In progress</div>{% endcapture %}
{% capture course_data_label %}in-progress{% endcapture %}
{% elsif learning_path.completed? %}
{% capture course_label %}<div class="label label-gray">Viewed</div>{% endcapture %}
{% capture course_data_label %}viewed{% endcapture %}
{% endif %}
<a href="{% route learning_path, id: learning_path.id %}" class="np-card-condensed" data-label="{{course_data_label}}">
<div class="np-card-condensed-content-wrapper">
<div class="title-wrapper">
<div class="np-course-title">{{ learning_path.name }}</div>
<div class="np-card-condensed-content-description">
{{ learning_path.description | strip_html }}
</div>
<div class="info-wrapper">
<div class="card-content-length">{{ learning_path.items.count }} resources</div>
<div class="labels-wrapper">{{course_label}}</div>
</div>
</div>
</div>
</a>

55
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/_category_cards.html.liquid Normal file
View File

@ -0,0 +1,55 @@
{% if courses.enrolled.any? %}{% comment %} GETTING STARTED {% endcomment %}{% for school_category in school_categories %} {% if school_category == "Getting Started" %}<div class="np-category-card" data-category='{{school_category | replace: " ", "-" | downcase }}'><div class="np-category-card-content-wrapper"><div class="np-category-card-img"><img src="https://cdn.northpass.io/walmart/categories-img-label.webp" width="60" height="60" alt="Getting Started Category Icon"></div><div class="title-wrapper"><div class="labels-wrapper"><div class="label label-green new-topic-label">New</div></div> <div class="np-category-title">{{school_category}}</div></div></div><i class="fas fa-chevron-right"></i></div>{% include "filtered_courses_tray", category_name: school_category %}{% endif %}{% endfor %}{% comment %} EARNINGS {% endcomment %}{% for school_category in school_categories %}{% if school_category == "Earnings" %}<div class="np-category-card" data-category='{{school_category | replace: " ", "-" | downcase }}'><div class="np-category-card-content-wrapper"><div class="np-category-card-img"><img src="https://cdn.northpass.io/walmart/category-earnings-icon.webp" width="61" height="60" alt="Earnings Category Icon"></div><div class="title-wrapper"><div class="labels-wrapper"> <div class="label label-green new-topic-label">New</div></div><div class="np-category-title">{{school_category}}</div></div></div><i class="fas fa-chevron-right"></i></div>{% include "filtered_courses_tray", category_name: school_category %}{% endif %}{% endfor %}{% comment %} SHOPPING & DELIVERY {% endcomment %}{% for school_category in school_categories %}{% if school_category == "Shopping & Delivery" %}<div class="np-category-card" data-category='{{school_category | replace: " ", "-" | downcase }}'><div class="np-category-card-content-wrapper"><div class="np-category-card-img"><img src="https://cdn.northpass.io/walmart/category-shopping-delivery-icon.webp" width="61" height="60" alt="Shopping & Delivery Category Icon"></div><div class="title-wrapper"><div class="labels-wrapper"><div class="label label-green new-topic-label">New</div></div><div class="np-category-title">{{school_category}}</div></div></div><i class="fas fa-chevron-right"></i></div>{% include "filtered_courses_tray", category_name: school_category %}{% endif %}{% endfor %}{% comment %} DELIVERY {% endcomment %}{% for school_category in school_categories %}{% if school_category == "Delivery" %}<div class="np-category-card" data-category='{{school_category | replace: " ", "-" | downcase }}'><div class="np-category-card-content-wrapper"><div class="np-category-card-img"><img src="https://cdn.northpass.io/walmart/category-delivery-icon.webp" width="61" height="60" alt="Delivery Category Icon"></div><div class="title-wrapper"><div class="labels-wrapper"><div class="label label-green new-topic-label">New</div></div><div class="np-category-title">{{school_category}}</div></div></div><i class="fas fa-chevron-right"></i></div>{% include "filtered_courses_tray", category_name: school_category %}{% endif %}{% endfor %}{% comment %} USING THE APP {% endcomment %}{% for school_category in school_categories %}{% if school_category == "Using the App" %}<div class="np-category-card" data-category='{{school_category | replace: " ", "-" | downcase }}'><div class="np-category-card-content-wrapper"><div class="np-category-card-img"><img src="https://cdn.northpass.io/walmart/category-using-the-app-icon.webp" width="60" height="60" alt="Using the App Category Icon"></div><div class="title-wrapper"><div class="labels-wrapper"><div class="label label-green new-topic-label">New</div></div><div class="np-category-title">{{school_category}}</div></div></div><i class="fas fa-chevron-right"></i></div>{% include "filtered_courses_tray", category_name: school_category %}{% endif %}{% endfor %}{% comment %} CONTACTING CUSTOMERS {% endcomment %}{% for school_category in school_categories %}{% if school_category == "Contacting Customers" %}<div class="np-category-card" data-category='{{school_category | replace: " ", "-" | downcase }}'><div class="np-category-card-content-wrapper"><div class="np-category-card-img"><img src="https://cdn.northpass.io/walmart/category-contacting-customers-icon.webp" width="61" height="60" alt="Contacting Customers Category Icon"></div><div class="title-wrapper"><div class="labels-wrapper"><div class="label label-green new-topic-label">New</div></div><div class="np-category-title">{{school_category}}</div></div></div><i class="fas fa-chevron-right"></i></div> {% include "filtered_courses_tray", category_name: school_category %}{% endif %}{% endfor %}
{% comment %} NON SPECIFIED {% endcomment %}
{% for school_category in school_categories %}
{% unless school_category == "Getting Started" or school_category == "Earnings" or school_category == "Shopping & Delivery" or school_category == "Delivery" or school_category == "Using the App" or school_category == "Contacting Customers" %}
{% if school_category == "Resource Bundles" %}
{% if features.learning_paths? and learning_paths.enrolled.any? %}
<div class="np-category-card" data-category='resource-bundles'>
<div class="np-category-card-content-wrapper">
<div class="np-category-card-img">
<img src="https://cdn.northpass.io/walmart/category-resource-bundles-icon.webp" width="60" height="60" alt="Category Icon">
</div>
<div class="title-wrapper">
<div class="np-category-title">Resource Bundles</div>
</div>
</div>
<i class="fas fa-chevron-right"></i>
</div>
{% include "filtered_learning_paths_tray", category_name: "Resource Bundles" %}
{% endif %}
{% else %}
<div class="np-category-card" data-category='{{school_category | replace: " ", "-" | downcase }}'>
<div class="np-category-card-content-wrapper">
<div class="np-category-card-img">
{% if school_category == "Arrival & Pick Up" %}
<img src="https://cdn.northpass.io/walmart/category-arrival-pickup-icon.webp" width="60" height="60" alt="Category Icon">
{% elsif school_category == "Drop Off & Returns" %}
<img src="https://cdn.northpass.io/walmart/category-dropoff-returns-icon.webp" width="60" height="60" alt="Category Icon">
{% elsif school_category == "Troubleshooting" %}
<img src="https://cdn.northpass.io/walmart/category-troubleshooting-icon.webp" width="60" height="60" alt="Category Icon">
{% elsif school_category == "Trust & Safety" %}
<img src="https://cdn.northpass.io/walmart/category-trust-safety-icon.webp" width="60" height="60" alt="Category Icon">
{% elsif school_category == "Offer Acceptance" %}
<img src="https://cdn.northpass.io/walmart/category-offer-acceptance-icon.webp" width="60" height="60" alt="Category Icon">
{% elsif school_category == "Returns" %}
<img src="https://cdn.northpass.io/walmart/category-returns-icon.webp" width="60" height="60" alt="Category Icon">
{% else %}
<img src="https://cdn.northpass.io/walmart/category-spark-icon.webp" width="61" height="60" alt="Category Icon">
{% endif %}
</div>
<div class="title-wrapper">
<div class="labels-wrapper">
<div class="label label-green new-topic-label">New</div>
</div>
<div class="np-category-title">{{school_category}}</div>
</div>
</div>
<i class="fas fa-chevron-right"></i>
</div>
{% include "filtered_courses_tray", category_name: school_category %}
{% endif %}
{% endunless %}
{% endfor %}
{% endif %}

1
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/_course_activity_unlocked.html.liquid Normal file
View File

@ -0,0 +1 @@
<a href="{% route activity_viewer, id: activity.id, course_id: params.course_id, learning_path_id: params.learning_path_id %}" class="{{ class }}">{{ activity.title }}</a><i class="fas fa-chevron-right np-course-outline-content-activity-icon-chevron"></i>

1
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/_course_outline.html.liquid Normal file
View File

@ -0,0 +1 @@
<div class="np-course-outline"><div class="np-text-title np-course-outline-title">Contents</div><div class="np-course-outline-content"><ol class="np-course-outline-content-section">{% assign activity_count = 0 %}{% assign num_of_sections = course.sections | size %}{% assign num_of_activities_in_first_section = course.sections.first.activities | size %}{% for section in course.sections %}<li class="np-course-outline-content-section-list">{% if num_of_activities_in_first_section > 1 or num_of_sections > 1 %}<div class="np-course-outline-content-section-name">{{ section.name }}</div>{% endif %}<ol class="np-course-outline-content-activity">{% for activity in section.activities %}{% assign activity_count = activity_count | plus: 1 %}<li class="np-course-outline-content-activity-list">{% if activity.completed? %}<svg class="np-course-outline-content-activity-icon icon-check" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z" fill="#3171FF"/><path d="M7 12.2478L10.2561 15.5039L16.76 9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>{% if activity.locked? %}<span class="np-course-outline-content-activity-title">{{ activity.title }}</span>{% else %}{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link-completed" %}{% endif %}<div class="np-list-bar-completed np-course-outline-content-activity-list-bar"></div>{% else %}<div class="np-course-outline-content-activity-icon number-circle">{{ activity_count }}</div>{% if activity.locked? %}<span class="np-course-outline-content-activity-title"> {{ activity.title }}</span>{% else %}{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link" %}{% endif %}<div class="np-course-outline-content-activity-list-bar"></div>{% endif %}</li>{% endfor %}</ol></li>{% endfor %} </ol></div></div>

1
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/_filtered_courses_tray.html.liquid Normal file
View File

@ -0,0 +1 @@
<div class="filtered-courses-tray" data-tray='{{school_category | replace: " ", "-" | downcase }}'><div class="tray-header"> <div class="close-tray"><i class="fal fa-arrow-left"></i></div><div class="header-title">{{category_name}}</div></div>{% if current_person.signed_in? %}<div class="np-courses-search np-header-search-expanded tray-search"><form action="{% route search %}" method="get" data-test="mobile-search"><i class="np-header-search-icon far fa-search"></i><input aria-label="Search courses" class="np-header-search-input np-header-font-background-color" type="text" name="q" placeholder="Search" /></form></div>{% endif %}<div class="tray-wrapper">{% assign enrolled_courses_by_progress = enrolled_courses | sort: "name" %}{% for course in enrolled_courses_by_progress %}{% for course_category in course.categories %}{% if school_category == course_category.name %}{% include "cards_course_condensed" with course %}{% endif %}{% endfor %}{% endfor %}</div></div>

14
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/_filtered_learning_paths_tray.html.liquid Normal file
View File

@ -0,0 +1,14 @@
<div class="filtered-courses-tray filtered-learning-paths-tray" data-tray='{{school_category | replace: " ", "-" | downcase }}'>
<div class="tray-header"><div class="close-tray"><i class="fal fa-arrow-left"></i></div><div class="header-title">{{category_name}}</div></div>
{% if current_person.signed_in? %}<div class="np-courses-search np-header-search-expanded tray-search"><form action="{% route search %}" method="get" data-test="mobile-search"><i class="np-header-search-icon far fa-search"></i><input aria-label="Search courses" class="np-header-search-input np-header-font-background-color" type="text" name="q" placeholder="Search" /></form></div>{% endif %}
<div class="tray-wrapper">
{% assign learning_paths_by_progress = enrolled_learning_paths | sort: "progress" %}
{% for learning_path in learning_paths_by_progress %}
{% for lp_category in learning_path.categories %}
{% if school_category == lp_category.name %}
{% include "cards_learning_path_condensed" with learning_path %}
{% endif %}
{% endfor %}
{% endfor %}
</div>
</div>

29
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/_head.html.liquid Normal file
View File

@ -0,0 +1,29 @@
{% styles default %}
{% styles colors %}
{% styles custom %}
{% assign staging_school_id = "1ddd31d3-cabe-4809-b5d3-8abfbdd33458" %}
{% assign production_sandbox_school_id = "a21f483c-cfa4-46f7-b30b-8753ec1e7f60" %}
{% assign live_school_id = "3c8229bf-a77c-4c88-8c65-75a03b0b1212" %}
{% if current_school.id == staging_school_id %}
{% comment %} <link rel="stylesheet" href="https://cdn.northpass.io/walmart/staging/walmart-styles_04262023_v1.min.css" /> {% endcomment %}
{% elsif current_school.id == production_sandbox_school_id %}
<link rel="stylesheet" href="https://cdn.northpass.io/walmart/production-sandbox/walmart-styles_11092023_v1.min.css" />
{% elsif current_school.id == live_school_id %}
<link rel="stylesheet" href="https://cdn.northpass.io/walmart/live/walmart-styles_04062023_v1.min.css" />
{% endif %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-toggle-state/1.16.0/easy-toggle-state.min.js" integrity="sha512-hG7MyW8uOh26+C0KutsTVCJm8waH4iA9vSa8gOsosTHdIh6JjOE/MRn8vmcFg2rLGTnpVWmSKcDJF48cB89/3w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
{% if current_school.id == staging_school_id %}
{% comment %} <script src="https://cdn.northpass.io/walmart/staging/walmart-js_03062023_v1.min.js" defer ></script> {% endcomment %}
{% include "js_scripts" %}
{% elsif current_school.id == production_sandbox_school_id %}
<script src="https://cdn.northpass.io/walmart/production-sandbox/walmart-js_11092023_v1.min.js" defer ></script>
{% comment %} {% include "js_scripts" %} {% endcomment %}
{% elsif current_school.id == live_school_id %}
<script src="https://cdn.northpass.io/walmart/live/walmart-js_10062023_v1.min.js" defer ></script>
{% endif %}

4
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/_mobile_header.html.liquid Normal file
View File

@ -0,0 +1,4 @@
<div class="mobile-header">
<a href="{{back_link}}" class="exit-icon"><i class="fal {{back_icon}}"></i></a>
<div class="header-title">{{title}}</div>
</div>

18
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/_search_result.html.liquid Normal file
View File

@ -0,0 +1,18 @@
{% if result.type == "course" %}
{% unless result.item.id == "89e045e5-842d-4413-8f2a-e80c3de239c7" %}
<div class="np-card np-search-result">
<div class="np-card-container">
<a class="np-card-content" href="{% if result.path contains 'activities' %}{{ result.path }}{% else %}{{ result.path | replace: '?search_sid=', '/cover?search_sid='}}{% endif %}">
<div class="np-search-result-content">
<div>
<div class="np-search-result-title">
{{ result.name }}
</div>
</div>
<div class="np-search-result-snippet">{{ result.item.full_description }}</div>
</div>
</a>
</div>
</div>
{% endunless %}
{% endif %}

22
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/_sub_navigation.html.liquid Normal file
View File

@ -0,0 +1,22 @@
<nav class="np-sub-navigation navigation-mobile">
<div class="np-sub-navigation-content">
{% for link in navigations.sub_navigation %}
{% if link.label == 'Home' %}
<div class="np-sub-navigation-content-item {{ link.active_class }} home-link">
<a class="np-sub-navigation-content-item-link" href="/app/courses">
<i class="link-all-resources np-button-color np-sub-navigation-content-item-icon"></i>
All Resources
</a>
</div>
{% elsif link.label == 'Dashboard' %}
<div class="np-sub-navigation-content-item {{ link.active_class }} my-resources-link">
<a class="np-sub-navigation-content-item-link" href="/app/progress">
<i class="link-my-resources np-button-color np-sub-navigation-content-item-icon"></i>
Progress
</a>
</div>
{% endif %}
{% endfor %}
</div>
</nav>

94
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/course.html.liquid Normal file
View File

@ -0,0 +1,94 @@
{% if course.properties.skip_course_outline_page %}
<script>
window.location.replace('{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}')
</script>
{% else %}
{% assign back_button_url = "/app/courses" %}
{% for category in course.categories %}
{% assign cat_name = category.name | replace: " ", "-" | downcase %}
{% assign back_button_url = '/app/courses#' | append: cat_name %}
{% endfor %}
<div class="mobile-header">
<a href="{{back_button_url}}" class="exit-icon">
<i class="fal fa-arrow-left"></i>
</a>
<div class="header-title">{{ course.name }}</div>
</div>
<main class="np-main np-max-width np-page-container course-cover-page">
<div id="course-mobile">
<div class="np-card cover-page-card">
<div class="np-card-container">
<img src="{{ course.image_url }}" alt="{{ course.name }}" />
<div class="card-content-wrapper">
<div class="cover-page-card-title">{{ course.name }}</div>
<div class="cover-page-card-desc">{{ course.full_description | strip_html }}</div>
<div class="card-info">
{% if course.properties.course_length != 'NULL' %}
<div class="card-content-length">{{ course.properties.course_length }}</div>
{% endif %}
</div>
</div>
</div>
</div>
<div class="np-card-container np-card-padding np-card-spacing">
{% include "course_outline" %}
</div>
<div class="np-top-cta stick-to-bottom">
{% 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">Review</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.progress > 0 and course.progress < 100 %}
Resume
{% elsif course.completed? %}
Review
{% else %}
Start
{% endif %}
</a>
{% endif %}
</div>
</div>
</main>
{% endif %}
<script>
setTimeout(function() {
const isAppContextAware = sessionStorage.getItem('appContext') !== null && sessionStorage.getItem('appContext') !== 'Returning to App';
const appContextCategoryOrigin = sessionStorage.getItem('appContextCategoryOrigin')
if (document.referrer.includes("/search") || document.referrer.includes("/progress")) {
console.log("User came directly from 'Search' or 'Progress' Tab.")
if (isAppContextAware && !appContextCategoryOrigin) {
console.log("Go back to app.")
$(".mobile-header .exit-icon").attr("href", "javascript: sendMessage()")
} else {
console.log("Go back to previous page")
$(".mobile-header .exit-icon").attr("href", "javascript: goBack()")
}
} else {
if (window.location.pathname.includes("learning_paths")) {
console.log("User navigating a learning path, Arrow will redirect back to learning path cover page.")
const pathParts = window.location.pathname.split("/")
$(".mobile-header .exit-icon").attr("href", `/app/learning_paths/${pathParts[3]}`)
} else {
if (isAppContextAware && !appContextCategoryOrigin) {
console.log("App Context value exists. Category Origin does not. This is the user's origin")
$(".mobile-header .exit-icon").attr("href", "javascript: sendMessage()")
}
}
}
}, 500)
</script>

114
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/courses.html.liquid Normal file
View File

@ -0,0 +1,114 @@
{% assign available_school_categories = '' | split: '' %}
{% assign enrolled_courses = courses.enrolled %}
{% for course in enrolled_courses %}
{% for cat in course.categories %}
{% assign cat_name = cat.name | split: '!@#$%^&*()' %}
{% assign available_school_categories = available_school_categories | concat: cat_name %}
{% endfor %}
{% endfor %}
{% assign enrolled_learning_paths = learning_paths.enrolled %}
{% for learning_path in enrolled_learning_paths %}
{% for lp_cat in learning_path.categories %}
{% assign lp_cat_name = lp_cat.name | split: '!@#$%^&*()' %}
{% assign available_school_categories = available_school_categories | concat: lp_cat_name %}
{% endfor %}
{% endfor %}
{% assign unique_school_categories = available_school_categories | uniq | sort %}
{% assign resource_bundles_to_display = "" %}
{% if features.learning_paths? %}
{% if enrolled_learning_paths.any? %}
{% if current_person.properties.access_level == "EXPERIENCED" %}
{% assign resource_bundles_to_display = current_school.properties.featured_resource_bundles_experienced | downcase %}
{% elsif current_person.properties.access_level == "BEGINNER" %}
{% assign resource_bundles_to_display = current_school.properties.featured_resource_bundles_beginner | downcase %}
{% endif %}
{% endif %}
{% endif %}
{% assign resource_bundles_to_display_array = resource_bundles_to_display | split: "," %}
{% capture icon %}
fa-arrow-left{% endcapture %}
{% include "mobile_header", title: "Resource Center", back_icon: icon, back_link: "javascript:sendMessage();" %}
{% if current_school.properties.banner_toggle == true %}
<div class="np-alert" style="height: 65px; margin-top: 55px; padding: 0 0 5px 5px; color:#000000; font-size: 16px; background-color:#FFC220" >
{{ current_school.properties.banner_text }}
</div>
{% endif %}
{% include "sub_navigation" %}
<main class="np-main np-courses np-subpage-container np-max-width">
{% if current_person.signed_in? %}
<div class="np-courses-search np-header-search-expanded">
<form
action="{% route search %}"
method="get"
data-test="mobile-search">
<i class="np-header-search-icon far fa-search"></i><input
aria-label="Search courses"
class="np-header-search-input np-header-font-background-color"
type="text"
name="q"
placeholder="Search" /></form>
</div>
{% endif %}
{% if current_person.properties.show_welcome_message %}
<div class="intro-msg"><div class="intro-msg-icon-wrapper"><div class="intro-msg-icon"></div></div><div class="intro-msg-text">Questions? We can help! Check out these optional resources to get the most out of the Spark Driver&trade; app.</div></div>
{% endif %}
{% if courses.enrolled.any? %}
<div class="recommended-courses-section">
<div class="np-courses-section-label">Featured</div>
<div class="recommended-courses-carousel-outer-container">
<div class="recommended-courses-carousel">
{% if features.learning_paths? %}
{% if enrolled_learning_paths.any? %}
{% for bundle in resource_bundles_to_display_array %}
{% assign bundle_name = bundle | strip | escape_once %}
{% for learning_path in enrolled_learning_paths %}
{% assign lp_title_downcase = learning_path.name | downcase | strip | escape_once %}
{% if lp_title_downcase contains bundle_name %}
<div class="course-slide lp-slide">
{% include "cards_learning_path" with learning_path, enrolled_courses: enrolled_courses %}
</div>
{% break %}
{% endif %}
{% endfor %}
{% endfor %}
{% endif %}
{% endif %}
{% for course in enrolled_courses %}
{% if course.properties.is_recommended_course == true %}
{% if course.properties.access_level == current_person.properties.access_level %}
<div
class="course-slide"
data-initialpublishdate="{{course.properties.initial_publish_date}}"
data-position="{{course.properties.featured_course_position}}">
{% include "cards_course" with course %}
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
{% endif %}
<div class="all-categories-section">
<div class="np-courses-section-label" style="margin-bottom:15px;">All Categories</div>
<div class="category-cards-wrapper">
{% include "category_cards", school_categories: unique_school_categories %}
</div>
</div>
</main>
<script>
$(document).ready(function() {
const showWelcomeMessage = '{{current_person.properties.show_welcome_message}}'
if (showWelcomeMessage == 'true') {
let userData = {
learner_uuid: '{{current_person.id}}'
}
const schoolUuid = '{{current_school.id}}'
hideWelcomeMessage(userData, schoolUuid)
}
})
</script>

3
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/dashboard.html.liquid Normal file
View File

@ -0,0 +1,3 @@
<script>
window.location.replace('/app/courses')
</script>

33
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/faq.html.liquid Normal file
View File

@ -0,0 +1,33 @@
<div class="np-hidden-mobile">
{% include "header" %}
</div>
<div class="np-hidden-desktop">
{% capture icon %}
fa-arrow-left
{% endcapture %}
{% include "mobile_header", title: "Resource Center", back_icon: icon, back_link: "javascript:sendMessage();" %}
</div>
{% include "sub_navigation" %}
<main class="np-main np-dashboard np-subpage-container np-max-width">
{% if current_person.signed_in? %}
<div class="np-courses-search np-header-search-expanded"><form action="{% route search %}" method="get" data-test="mobile-search"><i class="np-header-search-icon far fa-search"></i><input aria-label="Search courses" class="np-header-search-input np-header-font-background-color" type="text" name="q" placeholder="Search" /></form>
</div>
{% endif %}
<div class="row np-flex-center">
<div class="col-xs-12 col-sm-8">
{% if courses.enrolled.any? %}
{% for course in courses.enrolled %}
{% for cat in course.categories %}
{% if cat.name == "FAQ" %}
{% include "cards_faq" %}
{% endif %}
{% endfor %}
{% endfor %}
{% endif %}
</div>
</div>
</main>
<div class="np-hidden-mobile">
{% include "footer" %}
</div>

4
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/homepage.html.liquid Normal file
View File

@ -0,0 +1,4 @@
<script>
window.location.replace('/app/courses')
</script>

119
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/learning_path.html.liquid Normal file
View File

@ -0,0 +1,119 @@
<div class="np-top-cta stick-to-bottom np-hidden">
{% learning_path_next_step_button learning_path, class: "lp-button np-top-button np-button-font-color np-button np-button-big" %}
</div>
<script>
const learningPathBtnText = document.querySelector(".lp-button").innerText
console.log(learningPathBtnText)
if (learningPathBtnText.toLowerCase() == "start path") {
document.querySelector(".lp-button").click()
}
</script>
{% capture icon %}fa-arrow-left{% endcapture %}
{% include "mobile_header", title: learning_path.name, back_icon: icon, back_link: "/app/courses#resource-bundles" %}
{% assign courses = courses.enrolled %}
<main class="np-main np-max-width np-page-container">
<div id="learning-path-mobile">
<div class="np-card cover-page-card">
<div class="np-card-container">
<img src="{{ learning_path.image_url }}" alt="{{ learning_path.name }}" />
<div class="card-content-wrapper">
<div class="cover-page-card-title">{{ learning_path.name }}</div>
<div class="cover-page-card-desc">{{ learning_path.description | strip_html }}</div>
<div class="card-info">
<div class="card-courses-count">{{ learning_path.items.count }} resources</div>
<span class="dot-divider">&#183;</span>
<div class="card-time"></div>
</div>
</div>
</div>
</div>
<div class="np-card-spacing">
<div class="np-learning-path-outline">
<div class="np-card-heading">Contents</div>
{% assign courses_index = 1 %}
{% for item in learning_path.items %}
{% assign course_desc = "" %}
{% assign course_length = "" %}
{% assign course_is_new = false %}
{% for course in courses %}
{% if course.id == item.id %}
{% assign course_desc = course.short_description %}
{% assign course_length = course.properties.course_length %}
{% assign created_at_date_seconds = current_person.created_at | date: "%s" %}
{% assign course_published_date_seconds = course.properties.initial_publish_date | date: "%s" %}
{% if course_published_date_seconds > created_at_date_seconds %}{% assign course_is_new = true %}{% endif %}
{% endif %}
{% endfor %}
{% if item.course? %}
{% if learning_path.enrolled? and item.unlocked? %}
<div class="learning-path-item-wrapper">
<div class="np-learning-path-outline-bar {% if courses_index == 1 %}np-hidden{% endif %}"></div>
<div class="learning-path-item-indicator {% if item.completed? %}completed{% endif %}">
{% if item.completed? %}
<i class="fa fa-check"></i>
{% else %}
{{courses_index}}
{% endif %}
</div>
<a class="np-learning-path-outline-item np-card-container" href="{% route learning_path_course, learning_path_id: learning_path.id, id: item.id %}">
<div class="np-card-content">
<div class="np-learning-path-outline-content">
<div class="np-learning-path-outline-name np-top-title">{{ item.name }}</div>
<div class="learning-path-outline-desc">{{course_desc}}</div>
<div class="info-wrapper">
<div class="course-time">{{course_length}}</div>
<div class="labels-wrapper" style="margin-left:10px">
{% if item.progress > 0 and item.progress < 100 %}
<div class="label label-orange">In progress</div>
{% endif %}
{% if course_is_new %}
{% if item.progress == 0 %}
<div class="label label-green">New</div>
{% endif %}
{% endif %}
</div>
</div>
</div>
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
</div>
</a>
</div>
{% else %}
<div class="learning-path-item-wrapper">
<div class="np-learning-path-outline-bar {% if courses_index == 1 %}np-hidden{% endif %}"></div>
<div class="learning-path-item-indicator">{{courses_index}}</div>
<div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
<div class="np-learning-path-outline-content">
<div class="np-learning-path-outline-name np-top-title">{{ item.name }}</div>
<div class="learning-path-outline-desc">{{course_desc}}</div>
<div class="info-wrapper">
<div class="course-time">{{course_length}}</div>
<div class="labels-wrapper" style="margin-left:10px">
<div class="label label-green">New</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endif %}
{% assign courses_index = courses_index | plus: 1 %}
{% endfor %}
</div>
</div>
</div>
</div>
</main>
<script>
setTimeout(function() {
const isAppContextAware = sessionStorage.getItem('appContext') !== null && sessionStorage.getItem('appContext') !== 'Returning to App';
const appContextCategoryOrigin = sessionStorage.getItem('appContextCategoryOrigin')
if (isAppContextAware && !appContextCategoryOrigin) {
console.log("App Context value exists. Category Origin does not. Go back to app.")
$(".mobile-header .exit-icon").attr("href", "javascript: sendMessage()")
}
}, 500)
</script>

112
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/learning_path_summary.html.liquid Normal file
View File

@ -0,0 +1,112 @@
<div class="np-top-cta stick-to-bottom np-hidden">
{% learning_path_next_step_button learning_path, class: "lp-button np-top-button np-button-font-color np-button np-button-big" %}
</div>
<script>
const learningPathBtnText = document.querySelector(".lp-button").innerText
console.log(learningPathBtnText)
if (learningPathBtnText.toLowerCase() == "start new content") {
document.querySelector(".np-top-cta").innerText = "Start"
document.querySelector(".np-top-cta").classList.remove("np-hidden")
document.querySelector(".np-sub-navigation").style.display = "none";
}
</script>
{% capture icon %}fa-arrow-left{% endcapture %}
{% include "mobile_header", title: learning_path.name, back_icon: icon, back_link: "/app/courses#resource-bundles" %}
{% assign courses = courses.enrolled %}
<main class="np-main np-max-width np-page-container">
<div id="learning-path-mobile">
<div class="np-card cover-page-card">
<div class="np-card-container">
<img src="{{ learning_path.image_url }}" alt="{{ learning_path.name }}" />
<div class="card-content-wrapper">
<div class="cover-page-card-title">{{ learning_path.name }}</div>
<div class="cover-page-card-desc">{{ learning_path.description | strip_html }}</div>
<div class="card-info">
<div class="card-courses-count">{{ learning_path.items.count }} resources</div>
<span class="dot-divider">&#183;</span>
<div class="card-time"></div>
</div>
</div>
</div>
</div>
<div class="np-card-spacing">
<div class="np-learning-path-outline">
<div class="np-card-heading">Contents</div>
{% assign courses_index = 1 %}
{% for item in learning_path.items %}
{% assign course_desc = "" %}
{% assign course_length = "" %}
{% for course in courses %}
{% if course.id == item.id %}
{% assign course_desc = course.short_description %}
{% assign course_length = course.properties.course_length %}
{% endif %}
{% endfor %}
{% if item.course? %}
{% if learning_path.enrolled? and item.unlocked? %}
<div class="learning-path-item-wrapper">
<div class="np-learning-path-outline-bar {% if courses_index == 1 %}np-hidden{% endif %}"></div>
<div class="learning-path-item-indicator {% if item.completed? %}completed{% endif %}">
{% if item.completed? %}
<i class="fa fa-check"></i>
{% else %}
{{courses_index}}
{% endif %}
</div>
<a class="np-learning-path-outline-item np-card-container" href="{% route learning_path_course, learning_path_id: learning_path.id, id: item.id %}">
<div class="np-card-content">
<div class="np-learning-path-outline-content">
<div class="labels-wrapper">
{% if item.progress > 0 and item.progress < 100 %}
<div class="label label-orange">In progress</div>
{% endif %}
</div>
<div class="np-learning-path-outline-name np-top-title">{{ item.name }}</div>
<div class="learning-path-outline-desc">{{course_desc}}</div>
<div class="info-wrapper">
<div class="course-time">{{course_length}}</div>
</div>
</div>
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
</div>
</a>
</div>
{% else %}
<div class="learning-path-item-wrapper">
<div class="np-learning-path-outline-bar {% if courses_index == 1 %}np-hidden{% endif %}"></div>
<div class="learning-path-item-indicator">{{courses_index}}</div>
<div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
<div class="np-learning-path-outline-content">
<div class="np-learning-path-outline-name np-top-title">{{ item.name }}</div>
<div class="learning-path-outline-desc">{{course_desc}}</div>
<div class="info-wrapper">
<div class="course-time">{{course_length}}</div>
<div class="labels-wrapper" style="margin-left:10px">
<div class="label label-green">New</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endif %}
{% assign courses_index = courses_index | plus: 1 %}
{% endfor %}
</div>
</div>
</div>
</div>
</main>
<script>
setTimeout(function() {
const isAppContextAware = sessionStorage.getItem('appContext') !== null && sessionStorage.getItem('appContext') !== 'Returning to App';
const appContextCategoryOrigin = sessionStorage.getItem('appContextCategoryOrigin')
if (isAppContextAware && !appContextCategoryOrigin) {
console.log("App Context value exists. Category Origin does not. Go back to app.")
$(".mobile-header .exit-icon").attr("href", "javascript: sendMessage()")
}
}, 500)
</script>

60
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/progress.html.liquid Normal file
View File

@ -0,0 +1,60 @@
{% capture icon %}
fa-arrow-left
{% endcapture %}
{% include "mobile_header", title: "Resource Center", back_icon: icon, back_link: "javascript:sendMessage();" %}
{% include "sub_navigation" %}
<main class="np-main np-dashboard np-subpage-container np-max-width">
<div class="row np-flex-center">
<div class="col-xs-12 col-sm-8">
{% if courses.enrolled.any? %}
{% assign courses_in_progress = 0 %}
{% assign enrolled_courses = courses.enrolled %}
{% assign courses_ordered_by_progress = enrolled_courses | sort: "progress" %}
{% for course in courses_ordered_by_progress %}
{% if course.progress > 0 %}
{% assign courses_in_progress = courses_in_progress | plus: 1 %}
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
<a href="{{ course_path }}" class="np-card-condensed dashboard-card">
<div class="np-card-condensed-content-wrapper">
<div class="title-wrapper">
<div class="np-course-title">{{ course.name }}</div>
<div class="info-wrapper">
{% if course.properties.course_length != 'NULL' %}
<div class="card-content-length">
{{ course.properties.course_length }}
</div>
{% endif %}
<div class="labels-wrapper">
{% if course.progress > 0 and course.progress < 100 %}
<div class="label label-orange">
In progress
</div>
{% elsif course.completed? %}
<div class="label label-gray">
Viewed
</div>
{% endif %}
</div>
</div>
</div>
</div>
</a>
{% endif %}
{% endfor %}
{% if courses_in_progress == 0 %}
<div class="np-dashboard-resources-container">
<div class="courses-zero-state-img"></div>
<div class="np-zero-state-text">
<p>You haven't viewed any resources yet.<br>Visit <a href="/app/courses">All Resources</a> to see what's available.</p>
</div>
</div>
{% endif %}
{% endif %}
</div>
</div>
</main>

55
Custom_Templates/customer_templates/Walmart Spark Sandbox EnrolledCourses/search.html.liquid Normal file
View File

@ -0,0 +1,55 @@
{% assign enrolled_courses = courses.enrolled %}
{% include "mobile_header", title: "Search", back_icon: "fa-arrow-left", back_link: "javascript: goBack()" %}
{% include "sub_navigation" %}
<main class="np-main np-search np-subpage-container np-max-width">
<div class="np-header-search np-catalog-search np-header-search-expanded">
<form action="{% route search %}" method="get" data-test="desktop-search">
<input
aria-label="Search courses"
class="np-header-search-input np-header-font-background-color"
type="text"
name="q"
placeholder="Search"
/>
<i class="np-header-search-icon far fa-search"></i>
</form>
</div>
<div class="np-search-header">
<div class="np-resource-subtitle">
<span class="np-resource-subtitle-number">{{ results.count }}</span>
{% t .results_for %}
<span class="results-term">"{{ results.term }}"</span>
</div>
</div>
{% if results.items.any? %}
<div class="search-results-list">
{% render "search_result" for results.items as result %}
</div>
{% else %}
<div class="np-card np-search-zero-state">
<div class="np-card-container">
<div class="np-card-content np-card-content-vertical np-search-zero-state-card">
<div class="search-zero-state-img"></div>
<div class="np-zero-state-text">
<div class="zero-state-header">No results found</div>
<div>Please try another search item.</div>
</div>
</div>
</div>
</div>
{% endif %}
</main>
<script>
$(document).ready(function() {
const term = '{{ results.term }}'
sortSearchResultsByTerm(term)
const resultsCount = document.querySelector(".np-resource-subtitle-number")
const allResults = document.querySelectorAll(".np-search-result")
resultsCount.innerHTML = allResults.length
})
</script>