2024-12-20 13:32:45 -05:00
<div class="overlay-modal">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-logo">
<img class="modal-logo-img" src="https://cdn.filestackcontent.com/security=policy:eyJleHBpcnkiOjQ4ODEyOTI3OTAsImNhbGwiOlsicmVhZCIsImNvbnZlcnQiLCJzdG9yZSIsInBpY2siLCJyZW1vdmUiXX0=,signature:1ced31330ca94f7126cb6541f569f7c3caa2d116af79ee6644ee173fafdba070/glXgXFmuT2KPDDWoWnHg" alt="">
</div>
<div class="modal-content-container">
<div class="modal-descirption">
<div class="modal-heading">
Welcome to Supplier Academy <br>
your one-stop-shop for success at Walmart!
</div>
<div class="modal-text">
<div class="modal-smaller-heading">
In Supplier Academy you can...
</div>
<div class="list-modal-container">
2025-04-21 17:17:41 -04:00
<div class="list-item">
<div class="dot"></div>
<div class="dot-modal">Explore hundreds of eLearning modules</div>
</div>
<div class="list-item">
<div class="dot"></div>
<div class="dot-modal">Sign up for live webinars</div>
</div>
<div class="list-item">
<div class="dot"></div>
<div class="dot-modal">Complete custom learning paths</div>
</div>
2024-12-20 13:32:45 -05:00
</div>
<div class="modal-text-description">
The Supplier Development team is here to support you every step of the way. If you have any questions or need assistance, feel free to reach out to us at <span class="text-bold">supplierdevelopment@walmart.com</span>.
</div>
</div>
</div>
<div class="modal-dividing-line"></div>
<div class="modal-form">
<div class="modal-welcome-section">
<div class="welcome-image-wrapper">
<svg class="welcome-image" xmlns="http://www.w3.org/2000/svg" width="186" height="162" fill="none" viewBox="0 0 186 162"><mask id="a" width="164" height="162" x="11" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#E6F1FC" d="M93 162c44.793 0 81.105-36.265 81.105-81S137.793 0 93 0C48.207 0 11.895 36.265 11.895 81S48.207 162 93 162Z"/></mask><g mask="url(#a)"><path fill="#E6F1FC" d="M93.287 161.783c44.793 0 81.105-36.265 81.105-81s-36.312-81-81.105-81c-44.793 0-81.104 36.265-81.104 81s36.311 81 81.104 81Z"/><path fill="#000" fill-rule="evenodd" d="M48.976 48.756c0-13.853 11.23-25.084 25.083-25.084 13.854 0 25.084 11.23 25.084 25.084v52.57H48.976v-52.57Z" clip-rule="evenodd"/><path fill="#000" d="M60.524 121.778c14.585 0 26.408-11.474 26.408-25.629 0-14.154-11.823-25.629-26.408-25.629S34.116 81.995 34.116 96.15c0 14.154 11.823 25.628 26.408 25.628Z"/><path fill="#000" d="M64.193 93.67c13.493 0 24.43-9.994 24.43-22.322s-10.938-22.322-24.43-22.322c-13.492 0-24.43 9.994-24.43 22.322S50.7 93.67 64.193 93.67Z"/><path fill="#000" d="M81.692 121.778c14.585 0 26.408-11.474 26.408-25.629 0-14.154-11.823-25.629-26.408-25.629-14.584 0-26.408 11.475-26.408 25.63 0 14.154 11.824 25.628 26.408 25.628Z"/><path fill="#000" d="M85.362 93.67c13.492 0 24.43-9.994 24.43-22.322s-10.938-22.322-24.43-22.322c-13.493 0-24.43 9.994-24.43 22.322S71.868 93.67 85.361 93.67Z"/><path fill="#CC8B57" d="M57.865 32.533c0-.719.583-1.302 1.302-1.302H88.95c.72 0 1.302.583 1.302 1.302v31.352c0 8.943-7.25 16.193-16.193 16.193-8.944 0-16.194-7.25-16.194-16.193V32.533Z"/><path fill="#CC8B57" d="M85.173 53.832c0-.03.025-.056.055-.056h4.773a4.697 4.697 0 1 1 0 9.394h-4.773a.056.056 0 0 1-.055-.056v-9.282ZM53.422 58.473a4.697 4.697 0 0 1 4.696-4.697h4.774c.03 0 .055.025.055.056v9.282c0 .031-.025.056-.055.056h-4.774a4.697 4.697 0 0 1-4.696-4.697Z"/><path fill="#000" fill-rule="evenodd" d="m57.865 31.142 15.876-5.636 16.51 5.636 1.906 5.01-1.905 3.196s-6.918 1.882-14.606 7.126c-7.688 5.244-17.78 7.839-17.78 7.839l-2.541-11.899 2.54-11.272Z" clip-rule="evenodd"/><path fill="#CC8B57" d="M103.309 161.352a81.946 81.946 0 0 1-10.31.648c-27.395 0-51.619-13.565-66.302-34.337l.746-6.223c1.485-12.392 10.814-22.127 22.408-26.747 7.552-3.01 14.365-6.945 14.365-11.353 0-4.514-.635-12.655-.635-12.655l20.956.67s-.636 7.166-.636 11.702c0 3.666 4.454 6.986 10.15 9.735 13.155 6.345 23.332 18.776 22.241 33.34l-1.141 15.246-11.842 3.945v16.029Z"/><path fill="#CC8B57" d="M103.309 161.352a81.946 81.946 0 0 1-10.31.648c-27.395 0-51.619-13.565-66.302-34.337l.746-6.223c1.485-12.392 10.814-22.127 22.408-26.747 7.552-3.01 14.365-6.945 14.365-11.353 0-4.514-.635-12.655-.635-12.655l20.956.67s-.04.449-.1 1.191c-.178 2.228-.535 7.11-.535 10.511 0 3.655 4.427 6.967 10.1 9.71l.05.025c13.154 6.345 23.331 18.776 22.24 33.34l-1.141 15.246-11.842 3.945v16.029Z"/><path fill="#002D58" d="M107.533 160.703A81.682 81.682 0 0 1 93 162c-27.396 0-51.62-13.565-66.303-34.337l.746-6.223c1.485-12.392 10.814-22.127 22.408-26.747a76.48 76.48 0 0 0 2.998-1.266c4.798 3.816 12.11 7.85 21.527 7.762 9.32-.086 16.404-4.028 21.038-7.762 3.035 1.374 6.336 2.59 9.458 3.616 8.322 2.737 15.635 8.217 19.63 16.015l7.772 15.168-15.888 23.264c-.357.356-.661.627-.903.799-3.416 2.436-7.881 7.501-7.881 7.501l-.069.913Z"/><path fill="#0071DC" stroke="#0071DC" d="M66.728 157.657c-2.297-15.585-9.227-51.295-11.944-65.139a69.043 69.043 0 0 1-4.933 2.175 41.087 41.087 0 0 0-7.208 3.73c.034 12.271.096 34.461.126 46.177a80.98 80.98 0 0 0 23.96 13.057Z"/><path fill="#E8E8E8" d="M46.659 130.675c-.696 0-1.26.565-1.26 1.261v1.921c0 .696.564 1.26 1.26 1.26h9.354a1.26 1.26 0 0 0 1.26-1.26v-1.921c0-.696-.564-1.261-1.26-1.261h-9.354Z"/><path fill="#0071DC" stroke="#0071DC" d="M107.768 160.661A81.662 81.662 0 0 1 92.999 162c-3.143 0-6.244-.178-9.294-.526.02-.229.043-.457.065-.684 1.34-13.57 7.571-53.269 9.94-68.165 3.474 1.706 7.444 3.196 11.162 4.418.268.089.535.18.801.273-.017 15.586-.037 50.069.096 54.391.11 3.56 1.21 6.951 1.999 8.954Z"/><path fill="#FEBC11" fill-rule="evenodd" d="M97.748 115.862c-
</div>
<div class="welcome-text-wrapper">
<div class="modal-heading">Hi, {{current_person.first_name}}!</div>
<div class="modal-heading">Please complete the information below to get started!</div>
</div>
</div>
<div class="form-section">
<div class="option">
<label class="label-name modal-smaller-heading" for="">Which country are you currently doing business in?</label>
<select class="select-options" name="country" id="">
<option value="" selected>Please choose an option</option>
<option value="USA">USA</option>
<option value="Mexico">Mexico</option>
<option value="India">India</option>
<option value="Walmart Associate">Walmart Associate</option>
</select>
</div>
<div class="option">
<label class="label-name modal-smaller-heading" for="">Are you currently doing business with Walmart Inc.?</label>
<select class="select-options" name="business" id="">
<option value="" selected>Please choose an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="submit-container">
<button class="submit-btn">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
2025-04-21 17:17:41 -04:00
.dot {
width: 7.5px;
height: 7.5px;
background: #fff;
border-radius: 50%;
}
.list-item {
display: flex;
align-items: center;
gap: 10px;
margin: 15px 0;
}
2024-12-20 13:32:45 -05:00
.overlay-modal {
position: fixed;
z-index: 111;
height: 100%;
width: 100%;
background: rgba(0,0,0, 0.35);
display: flex;
justify-content: center;
overflow: scroll;
}
.modal-container {
display: flex;
flex-direction: column;
}
.welcome-text-wrapper {
display: flex;
flex-direction: column;
gap: 20px;
}
.modal-logo {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 40px;
}
.welcome-image {
width: 150px;
height: 150px;
border-radius: 100%;
}
.text-bold {
font-weight: 600;
}
.modal-welcome-section {
display: flex;
align-items: center;
gap: 30px;
}
.modal-wrapper {
height: fit-content;
width: fit-content;
display: flex;
justify-content: center;
border: 3px solid #ffc220;
2025-04-21 17:17:41 -04:00
background: #001e60;
2024-12-20 13:32:45 -05:00
border-radius: 12px;
padding: 60px 40px;
margin-top: 5%;
margin-right: 5%;
margin-left: 5%;
max-width: 1200px;
}
.modal-descirption {
flex-basis: 50%;
}
.modal-form {
flex-basis: 50%;
}
.modal-dividing-line {
height: 100%;
width: 3px;
background: #ffc220;
}
.modal-content-container {
display: flex;
gap: 40px;
}
.modal-logo-img {
max-width: 600px;
width: 100%;
}
.modal-heading {
font-size: 1.5rem;
font-weight: 600;
text-align: center;
}
.modal-text {
font-size: 1.25rem;
margin-top: 25px;
}
.modal-smaller-heading {
font-weight: 600;
}
.dot-modal {
padding: 0;
}
.list-modal-container {
margin-left: 20px;
}
.form-section {
margin-top: 30px;
}
.label-name {
font-size: 1.25rem;
}
.select-options {
width: 100%;
background: #fff;
border: none;
padding: 10px 15px;
margin-top: 10px;
border-radius: 4px;
}
.option {
margin-top: 20px;
}
.submit-container {
display: flex;
justify-content: center;
margin-top: 30px;
}
.submit-btn {
border: none;
color: #000;
font-size: 1.25rem;
font-weight: 600;
padding: 10px 20px;
max-width: 250px;
width: 100%;
background: #ffc220;
border-radius: 12px;
cursor: pointer;
}
.loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.spinner {
width: 50px;
height: 50px;
border: 5px solid transparent;
border-top: 5px solid #fff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media only screen and (max-width: 900px) {
.modal-content-container {
flex-direction: column;
gap: 20px;
}
2025-04-21 17:17:41 -04:00
2024-12-20 13:32:45 -05:00
.modal-text {
text-align: center;
}
.modal-welcome-section {
flex-direction: column;
}
.modal-wrapper {
padding: 40px 20px;
}
.modal-logo {
margin-bottom: 30px;
}
.modal-heading {
font-size: 1.25rem;
}
.modal-text {
font-size: 1rem;
}
.label-name {
font-size: 1rem;
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
if (localStorage.getItem("modalFilled") === "true") {
document.getElementsByClassName('overlay-modal')[0].style.display = 'none';
}
const countrySelect = document.querySelector(".select-options[name='country']");
const businessSelect = document.querySelector(".select-options[name='business']");
const submitBtn = document.querySelector(".submit-btn");
const businessOptionContainer = businessSelect.closest(".option");
businessOptionContainer.style.display = "none";
countrySelect.addEventListener("change", () => {
const selectedCountry = countrySelect.value;
businessOptionContainer.style.display = selectedCountry === "USA" ? "block" : "none";
});
submitBtn.addEventListener("click", () => {
const selectedCountry = countrySelect.value;
const selectedBusiness = businessSelect.value;
if (!selectedCountry) {
alert("Please choose a country.");
return;
}
let payload = {};
switch (selectedCountry) {
case "India":
payload = { group: "9d4a3325-ada5-4c19-8dd6-7f5aeae34899", locale: "IND", id: "{{current_person.id}}" };
break;
case "Mexico":
payload = { group: "5274843d-fba0-461c-b05b-3f3640385cf2", locale: "MEX", id: "{{current_person.id}}" };
break;
case "Walmart Associate":
2025-04-21 17:17:41 -04:00
payload = { group: "93414c12-d00f-4258-af01-18e455d756c7", group2: "646fe445-cc88-4266-a6bd-8e28b977649e", group3: "164ebbb5-5ad0-45d9-81ab-3b0930d63dc8", locale: "USA", id: "{{current_person.id}}" };
2024-12-20 13:32:45 -05:00
break;
case "USA":
if (!selectedBusiness) {
alert("Please choose if you are doing business with Walmart.");
return;
}
2025-07-10 16:18:51 -04:00
payload = selectedBusiness === "yes"
2024-12-20 13:32:45 -05:00
? { group: "164ebbb5-5ad0-45d9-81ab-3b0930d63dc8", locale: "USA", id: "{{current_person.id}}" }
: { group: "646fe445-cc88-4266-a6bd-8e28b977649e", locale: "USA", id: "{{current_person.id}}" };
break;
default:
alert("Invalid country selection.");
return;
}
showLoader();
fetch("https://webhooks.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/walmart-supplier-modal-integration", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(payload),
})
.then(() => {
localStorage.setItem("modalFilled", "true");
setTimeout(() => {
2025-07-10 16:18:51 -04:00
location.reload();
}, 4000);
2024-12-20 13:32:45 -05:00
})
.catch(() => {
alert("There was an error submitting the form.");
hideLoader();
});
});
function showLoader() {
const loader = document.createElement("div");
loader.className = "loader";
loader.innerHTML = `<div class="spinner"></div>`;
document.body.appendChild(loader);
}
function hideLoader() {
const loader = document.querySelector(".loader");
if (loader) loader.remove();
}
});
2025-07-10 16:18:51 -04:00
</script>
