660 lines
21 KiB
JavaScript
660 lines
21 KiB
JavaScript
import $ from "jquery";
|
|
window.$ = window.jQuery = $; // Make sure jQuery is available globally
|
|
import debounce from "lodash.debounce";
|
|
import fromPairs from "lodash.frompairs";
|
|
import sortBy from "lodash.sortby";
|
|
import moment from "moment";
|
|
import nunjucks from "nunjucks";
|
|
|
|
import "bootstrap-sass/assets/javascripts/bootstrap/tooltip";
|
|
import "bootstrap-sass/assets/javascripts/bootstrap/popover";
|
|
|
|
import "./templates";
|
|
import "./index.scss";
|
|
|
|
/* Init and global vars */
|
|
let _dom;
|
|
let users;
|
|
let searching; /* search ajax request */
|
|
let selectedUser = null;
|
|
let membershipOrder = null; /* selected order object */
|
|
const cardForm = {
|
|
fields: {
|
|
cardNumber: false,
|
|
phoneNumber: false,
|
|
},
|
|
};
|
|
const STATE_ICON = {
|
|
success: "ok",
|
|
warning: "warning-sign",
|
|
error: "remove",
|
|
};
|
|
// TODO: replace with lodash template
|
|
const nunjucksEnv = new nunjucks.Environment();
|
|
|
|
const urls = {
|
|
userSearch: "/user-search/",
|
|
checkPhoneNumber: "/check-phone-number/",
|
|
checkCard: "/check-card/",
|
|
registerCardAndMembership: "/register-card-membership/",
|
|
renewMembership: "/renew-membership/",
|
|
};
|
|
|
|
function getCookie(name) {
|
|
let cookieValue = null;
|
|
if (document.cookie && document.cookie !== "") {
|
|
const cookies = document.cookie.split(";");
|
|
for (let i = 0; i < cookies.length; i++) {
|
|
const cookie = $.trim(cookies[i]);
|
|
// Does this cookie string begin with the name we want?
|
|
if (cookie.substring(0, name.length + 1) === `${name}=`) {
|
|
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return cookieValue;
|
|
}
|
|
|
|
function getParameterByName(name) {
|
|
return new URLSearchParams(window.location.search).get(name) || "";
|
|
}
|
|
|
|
function formatPhoneNumber(str) {
|
|
if (!str || str.length <= 1) {
|
|
return "No phone number";
|
|
}
|
|
if (str.length === 11) {
|
|
return `${str.slice(0, 3)} ${str.slice(3, 6)} ${str.slice(6, 8)} ${str.slice(8)}`;
|
|
}
|
|
|
|
return str;
|
|
}
|
|
|
|
function sortSearchResults(results) {
|
|
return sortBy(results, (x) => {
|
|
if (x.last_membership) {
|
|
if (x.last_membership.end_date) {
|
|
return 0 - moment(x.last_membership.end_date).unix();
|
|
}
|
|
return 0 - moment(x.last_membership.start_date).unix();
|
|
}
|
|
return 0;
|
|
});
|
|
}
|
|
|
|
function formatResults(results) {
|
|
return nunjucksEnv.render("search_results.html", { results });
|
|
}
|
|
|
|
function renderSelectedUser(userData) {
|
|
let context;
|
|
if (!userData) {
|
|
context = { placeholder: true }; // dummy card
|
|
} else {
|
|
context = { res: userData, checked: true, no_user_actions: true };
|
|
}
|
|
const selectedUserHtml = nunjucksEnv.render("search_result.html", context);
|
|
_dom.selectedEntityWrap.html(selectedUserHtml);
|
|
}
|
|
|
|
function renderSelectedOrder(order) {
|
|
if (!order) {
|
|
return;
|
|
}
|
|
const context = { order, checked: true, no_user_actions: true };
|
|
const selectedOrderHtml = nunjucksEnv.render("selected_order.html", context);
|
|
_dom.selectedEntityWrap.html(selectedOrderHtml);
|
|
}
|
|
|
|
function setToast(message, messageType) {
|
|
const context = {
|
|
message,
|
|
message_type: messageType,
|
|
icon: STATE_ICON[messageType],
|
|
};
|
|
const html = nunjucksEnv.render("toast.html", context);
|
|
_dom.toastWrap.html(html);
|
|
_dom.toastWrap.addClass("visible");
|
|
setTimeout(() => {
|
|
_dom.toastWrap.removeClass("visible");
|
|
}, 5000);
|
|
}
|
|
|
|
function updateMemberShipButton(user, order) {
|
|
// const todayPlusThirtyDays = moment().add(30, 'days').format('YYYY-MM-DD');
|
|
/* User with valid membership */
|
|
if (user && user.is_member) {
|
|
/* ...which is lifelong cannot renew */
|
|
if (user.last_membership.membership_type === "lifelong") {
|
|
_dom.membershipSubmitButton.prop("disabled", true);
|
|
}
|
|
/* ...or expiring soon and the user has a card */
|
|
// else if (user.last_membership.end_date <= todayPlusThirtyDays && user.active_member_card) {
|
|
|
|
// FIXME: ponas workaround 2019-12-17, block below commented out
|
|
_dom.membershipSubmitButton.prop("disabled", false);
|
|
|
|
/* ...with a membership that expires soon can renew */
|
|
// else if (user.last_membership.end_date <= todayPlusThirtyDays) {
|
|
// _dom.membershipSubmitButton.prop('disabled', false);
|
|
// }
|
|
}
|
|
/* User with expired membership can renew */
|
|
// else if (user && !user.is_member && user.active_member_card) {
|
|
else if (user && !user.is_member) {
|
|
_dom.membershipSubmitButton.prop("disabled", false);
|
|
} else if (order) {
|
|
// FIXME: ponas workaround 2019-12-17, block below commented out
|
|
_dom.membershipSubmitButton.prop("disabled", false);
|
|
|
|
/* Order */
|
|
/* If the membership has expired it can be renewed */
|
|
// if (!order.product.is_valid && order.product.end_date <= todayPlusThirtyDays) {
|
|
// _dom.membershipSubmitButton.prop('disabled', false);
|
|
// }
|
|
} else {
|
|
_dom.membershipSubmitButton.prop("disabled", true);
|
|
}
|
|
}
|
|
|
|
function setSelectedUser(user, updateSearchResult) {
|
|
selectedUser = user;
|
|
updateMemberShipButton(user, null);
|
|
|
|
_dom.userIdField.val((user && user.id) || "").trigger("change");
|
|
if (updateSearchResult) {
|
|
const staleSearchResult = _dom.results.find(".search-result").removeClass("selected");
|
|
staleSearchResult.find("input").prop("checked", false);
|
|
/* User is still in search result, mark selected */
|
|
if (user && users && users.find(({ id }) => id === user.id)) {
|
|
const searchResult = _dom.results.find(`[data-user-id="${user.id}"]`).toggleClass("selected");
|
|
searchResult.find("input").prop("checked", true);
|
|
}
|
|
}
|
|
}
|
|
|
|
function setSelectedOrder(order) {
|
|
membershipOrder = order;
|
|
if (order) {
|
|
updateMemberShipButton(null, order);
|
|
}
|
|
_dom.orderUuidField.val((order && order.uuid) || "").trigger("change");
|
|
}
|
|
|
|
function setFieldState(fieldElement, state, helpText) {
|
|
if (!helpText) {
|
|
helpText = "";
|
|
}
|
|
const helpSpan = `<span class="help-block ">${helpText}</span>`;
|
|
const feedbackSpan = `<span class="glyphicon glyphicon-${STATE_ICON[state]} form-control-feedback" aria-hidden="true"></span>`;
|
|
const cssClass = `has-${state}`;
|
|
const formGroup = fieldElement.parent().parent();
|
|
formGroup.removeClass("has-success has-warning has-error has-feedback"); // reset
|
|
if (["success", "warning", "error"].indexOf(state) !== -1) {
|
|
formGroup.addClass(`${cssClass} has-feedback`);
|
|
/* Feedback icon */
|
|
const feedbackEl = formGroup.find(".form-control-feedback");
|
|
if (!feedbackEl.length) {
|
|
// add
|
|
formGroup.append(feedbackSpan);
|
|
} else {
|
|
// Update
|
|
feedbackEl.removeClass("glyphicon-ok glypicon-warning-sign glyphicon-remove");
|
|
feedbackEl.addClass(`glyphicon-${STATE_ICON[state]}`);
|
|
}
|
|
/* Help text */
|
|
const helpTextEl = formGroup.find(".help-block");
|
|
if (!helpTextEl.length) {
|
|
formGroup.append(helpSpan);
|
|
} else {
|
|
helpTextEl.text(helpText);
|
|
}
|
|
} else {
|
|
formGroup.find(".form-control-feedback").remove();
|
|
formGroup.find(".help-block").remove();
|
|
}
|
|
}
|
|
function resetCardForm(resetNative) {
|
|
if (resetNative) {
|
|
_dom.registerCardForm.get(0).reset();
|
|
}
|
|
/* Clear field states */
|
|
setFieldState(_dom.phoneNumberField, "");
|
|
cardForm.fields.phoneNumber = false;
|
|
setFieldState(_dom.cardNumberField, "");
|
|
cardForm.fields.cardNumber = false;
|
|
selectedUser = null;
|
|
membershipOrder = null;
|
|
_dom.userIdField.val("").trigger("change");
|
|
_dom.membershipTrialCheckBox.prop("checked", false);
|
|
|
|
/* Disable submit buttons */
|
|
_dom.registerSubmitButton.prop("disabled", true);
|
|
_dom.membershipSubmitButton.prop("disabled", true);
|
|
}
|
|
function resetSearchForm(resetNative) {
|
|
if (resetNative) {
|
|
_dom.searchResetButton.get(0).reset();
|
|
}
|
|
/* Clear search results */
|
|
users = null;
|
|
_dom.results.html("");
|
|
}
|
|
|
|
function cardFormIsValid() {
|
|
return Object.values(cardForm.fields).every((v) => v);
|
|
}
|
|
|
|
function updateSubmitButton() {
|
|
if (cardFormIsValid()) {
|
|
_dom.registerSubmitButton.prop("disabled", false);
|
|
return;
|
|
}
|
|
_dom.registerSubmitButton.prop("disabled", true);
|
|
}
|
|
function validatePhoneNumber(val) {
|
|
if (val.length === 0) {
|
|
cardForm.fields.phoneNumber = false;
|
|
updateSubmitButton();
|
|
return "Phone number should not be empty.";
|
|
}
|
|
cardForm.fields.phoneNumber = true;
|
|
updateSubmitButton();
|
|
return "";
|
|
}
|
|
|
|
function validateCardNumber(val) {
|
|
if (val.length === 0) {
|
|
cardForm.fields.cardNumber = false;
|
|
updateSubmitButton();
|
|
return "Card number should not be empty.";
|
|
}
|
|
if (val.length > 0 && val[0] !== "1") {
|
|
cardForm.fields.cardNumber = false;
|
|
updateSubmitButton();
|
|
return "Card number should start with 1.";
|
|
}
|
|
if (val.length !== 9) {
|
|
cardForm.fields.cardNumber = false;
|
|
updateSubmitButton();
|
|
return "Card number should be 9 digits long.";
|
|
}
|
|
cardForm.fields.cardNumber = true;
|
|
updateSubmitButton();
|
|
return "";
|
|
}
|
|
|
|
function getFormData(formElement) {
|
|
let formData = formElement.serializeArray();
|
|
formData = fromPairs(
|
|
formData.map((x) => {
|
|
return [x.name, x.value || null];
|
|
})
|
|
);
|
|
/* no need for radio button state */
|
|
delete formData.user;
|
|
|
|
return formData;
|
|
}
|
|
|
|
/* Phone number as you type */
|
|
function checkPhoneNumber() {
|
|
const val = _dom.phoneNumberField.val().trim();
|
|
$.getJSON(urls.checkPhoneNumber, { phone_number: val }, (data) => {
|
|
/* Invalid phone number? */
|
|
if (data.error) {
|
|
setSelectedUser(null, true);
|
|
setSelectedOrder(null);
|
|
setFieldState(_dom.phoneNumberField, "error", data.error);
|
|
cardForm.fields.phoneNumber = false;
|
|
updateSubmitButton();
|
|
return;
|
|
}
|
|
|
|
const { user } = data;
|
|
const { order } = data;
|
|
let message = "";
|
|
|
|
/* Has valid card membership */
|
|
if (!user && order && order.member_card && order.product.is_valid) {
|
|
message = `Phone number is already tied to card ${order.member_card} and is valid until ${order.product.end_date}.`;
|
|
setFieldState(_dom.phoneNumberField, "error", message);
|
|
cardForm.fields.phoneNumber = false;
|
|
setSelectedOrder(order);
|
|
updateSubmitButton();
|
|
return;
|
|
}
|
|
|
|
if (user) {
|
|
/* Existing user */
|
|
message = "Phone number belongs to existing user.";
|
|
setFieldState(_dom.phoneNumberField, "success", message);
|
|
setSelectedUser(user, true);
|
|
setSelectedOrder(null);
|
|
cardForm.fields.phoneNumber = true;
|
|
updateSubmitButton();
|
|
} else if (order) {
|
|
setSelectedOrder(order);
|
|
/* Valid membership, no card associated */
|
|
if (order.product.is_valid) {
|
|
message = "Phone number has a valid membership.";
|
|
} else {
|
|
message = "Phone number has an expired membership.";
|
|
}
|
|
} else {
|
|
/* Valid phone number associated user or order */
|
|
setSelectedOrder(null);
|
|
setSelectedUser(null);
|
|
}
|
|
|
|
setFieldState(_dom.phoneNumberField, "success", message);
|
|
cardForm.fields.phoneNumber = true;
|
|
updateSubmitButton();
|
|
});
|
|
}
|
|
|
|
/* Add filter |phoneNumber */
|
|
nunjucksEnv.addFilter("phoneNumber", formatPhoneNumber);
|
|
|
|
/* On document ready */
|
|
$(function () {
|
|
_dom = {
|
|
results: $(".results-wrap"),
|
|
query: $("#id_query"),
|
|
phoneNumberLabel: $("[for=id_phone_number]"),
|
|
phoneNumberField: $("#id_phone_number"),
|
|
cardNumberField: $("#id_card_number"),
|
|
registerCardForm: $(".register-card-form"),
|
|
registerSubmitButton: $("#register-submit-btn"),
|
|
usernameField: $("#id_username"),
|
|
userIdField: $("#id_user_id"),
|
|
orderUuidField: $("#id_order_uuid"),
|
|
selectedEntityWrap: $(".register-card-form--selected-entity-wrap"),
|
|
toastWrap: $(".toast-wrap"),
|
|
registerResetButton: $(".register-reset-btn"),
|
|
searchResetButton: $(".search-reset-btn"),
|
|
membershipSubmitButton: $("#membership-submit-btn"),
|
|
membershipTrialCheckBox: $("#id_membership_trial"),
|
|
};
|
|
|
|
const lazyCheckPhoneNumber = debounce(checkPhoneNumber, 250);
|
|
_dom.phoneNumberField.on("input", (e) => {
|
|
const val = e.target.value.trim();
|
|
const validationMsg = validatePhoneNumber(val);
|
|
if (validationMsg !== "") {
|
|
setSelectedUser(null, true);
|
|
setFieldState(_dom.phoneNumberField, "error", validationMsg);
|
|
return;
|
|
}
|
|
lazyCheckPhoneNumber();
|
|
});
|
|
/* Card number as you type */
|
|
_dom.cardNumberField.on("input", (e) => {
|
|
/* Card number should exist in the database and not tied to existing user */
|
|
const val = e.target.value.trim();
|
|
const validationMsg = validateCardNumber(val);
|
|
if (validationMsg !== "") {
|
|
setFieldState(_dom.cardNumberField, "error", validationMsg);
|
|
return;
|
|
}
|
|
$.getJSON(urls.checkCard, { card_number: val }, (data) => {
|
|
if (data.error) {
|
|
updateSubmitButton();
|
|
cardForm.fields.cardNumber = false;
|
|
setFieldState(_dom.cardNumberField, "error", data.error);
|
|
return;
|
|
}
|
|
|
|
const card = data;
|
|
const { user } = data;
|
|
const { order } = data;
|
|
// const todayPlusThirtyDays = moment().add(30, 'days');
|
|
|
|
if (!card) {
|
|
cardForm.fields.cardNumber = false;
|
|
setFieldState(_dom.cardNumberField, "error", "Cannot find card number in database.");
|
|
} else if (card && card.registered !== null && user === null && order && !order.product.is_valid) {
|
|
/* An already registered card (with no user) can repurchase membership if expired */
|
|
setSelectedOrder(order);
|
|
cardForm.fields.cardNumber = true;
|
|
setFieldState(
|
|
_dom.cardNumberField,
|
|
"success",
|
|
`Card number is in use (not activated) and belongs to ${formatPhoneNumber(order.phone_number)}.`
|
|
);
|
|
} else if (card && card.registered !== null) {
|
|
let ownerString = "???";
|
|
if (user) {
|
|
ownerString = `existing user: ${user.first_name} ${user.last_name} (${formatPhoneNumber(user.phone_number)})`;
|
|
} else {
|
|
setSelectedOrder(order);
|
|
ownerString = `phone number: ${formatPhoneNumber(order.phone_number)}`;
|
|
}
|
|
cardForm.fields.cardNumber = false;
|
|
setFieldState(_dom.cardNumberField, "error", `Card number is in use and belongs to ${ownerString}.`);
|
|
} else if (card && user === null) {
|
|
cardForm.fields.cardNumber = true;
|
|
setFieldState(_dom.cardNumberField, "success");
|
|
} else {
|
|
cardForm.fields.cardNumber = true;
|
|
setFieldState(_dom.cardNumberField, "");
|
|
}
|
|
updateSubmitButton();
|
|
}).fail(() => {
|
|
cardForm.fields.cardNumber = false;
|
|
setFieldState(_dom.cardNumberField, "error", "Cannot find card number in database.");
|
|
});
|
|
});
|
|
|
|
/* User search as you type */
|
|
_dom.query.on("input", () => {
|
|
const val = _dom.query.val().trim();
|
|
if (val.length <= 2) {
|
|
_dom.results.html("");
|
|
return;
|
|
}
|
|
if (searching) {
|
|
searching.abort();
|
|
}
|
|
searching = $.getJSON(urls.userSearch, { search: val }, (data) => {
|
|
if (data.results && data.results.length > 0) {
|
|
const sortedResults = sortSearchResults(data.results);
|
|
_dom.results.html(formatResults(sortedResults));
|
|
users = data.results;
|
|
} else if (data.error) {
|
|
_dom.results.html(data.error);
|
|
} else if (val !== "") {
|
|
_dom.results.html(`Found no user matching: '${val}'`);
|
|
} else {
|
|
_dom.results.html("");
|
|
}
|
|
});
|
|
});
|
|
|
|
/* On search result click */
|
|
_dom.results.on("click", ".search-result input", () => {
|
|
const label = $(this).parent();
|
|
let number = label.attr("data-phone-number");
|
|
const userId = label.attr("data-user-id");
|
|
|
|
/* Update selected state */
|
|
$(".search-result").removeClass("selected");
|
|
label.toggleClass("selected");
|
|
|
|
setSelectedUser(users.find(({ id }) => id === userId));
|
|
|
|
/* Update phone number field */
|
|
if (number === "-") {
|
|
number = "";
|
|
}
|
|
_dom.phoneNumberField.val(number).trigger("input");
|
|
});
|
|
/* On submit button click */
|
|
_dom.registerSubmitButton.on("click", (e) => {
|
|
e.preventDefault();
|
|
|
|
if (!cardFormIsValid()) {
|
|
setToast("Either phone number or card number is not valid", "error");
|
|
return;
|
|
}
|
|
const payload = getFormData(_dom.registerCardForm);
|
|
|
|
/* Register type */
|
|
// FIXME: get from form
|
|
// action: 'new_card_membership', 'update_card', 'add_or_renew', 'sms_card_notify'
|
|
if (selectedUser === null && membershipOrder === null) {
|
|
// Unknown phone / card, new membership
|
|
payload.action = "new_card_membership";
|
|
} else if (selectedUser === null && membershipOrder !== null) {
|
|
if (membershipOrder.member_card === null && membershipOrder.product.is_valid) {
|
|
// Associate member card with a valid membership order
|
|
payload.action = "sms_card_notify";
|
|
payload.order_uuid = membershipOrder.uuid;
|
|
} else {
|
|
// New card for expired order -- treat as new card membership
|
|
payload.action = "new_card_membership";
|
|
}
|
|
} else if (selectedUser !== null && selectedUser.is_member) {
|
|
// Add member card to a user
|
|
payload.action = "update_card";
|
|
} else {
|
|
// New order for user
|
|
payload.action = "add_or_renew"; // Note: could also update card number
|
|
}
|
|
$.ajax(urls.registerCardAndMembership, {
|
|
data: JSON.stringify(payload),
|
|
contentType: "application/json",
|
|
dataType: "json",
|
|
type: "post",
|
|
headers: { "X-CSRFToken": getCookie("csrftoken") },
|
|
})
|
|
.done(() => {
|
|
let successMessage = `New card registered ${payload.card_number}`;
|
|
if (payload.action === "add_or_renew") {
|
|
const fullName = `${selectedUser.first_name} ${selectedUser.last_name}`;
|
|
successMessage = `New membership and card number ${payload.card_number} registered to ${fullName} `;
|
|
} else if (payload.action === "new_card_membership") {
|
|
successMessage = `New membership and card registered to ${formatPhoneNumber(
|
|
payload.phone_number
|
|
)}. Activation SMS sent `;
|
|
} else if (payload.action === "sms_card_notify") {
|
|
successMessage = `New card registered to ${formatPhoneNumber(
|
|
payload.phone_number
|
|
)}. Membership already paid ${membershipOrder.product.start_date}. Activation SMS sent `;
|
|
}
|
|
setToast(`${successMessage} :-)`, "success");
|
|
resetCardForm(true);
|
|
})
|
|
.fail((data) => {
|
|
console.log("failed", data);
|
|
let errorText = data.responseText;
|
|
if (data.responseJSON) {
|
|
if (data.responseJSON.non_field_errors) {
|
|
errorText = data.responseJSON.non_field_errors.join("<br>");
|
|
} else {
|
|
errorText = "Not sure why. :-(";
|
|
}
|
|
}
|
|
setToast(`Failed! ${errorText}`, "error");
|
|
});
|
|
});
|
|
|
|
/* Membership renewal button */
|
|
_dom.membershipSubmitButton.on("click", (e) => {
|
|
e.preventDefault();
|
|
if (!selectedUser && !membershipOrder) {
|
|
setToast("Computer says no.", "error");
|
|
return;
|
|
}
|
|
|
|
const payload = getFormData(_dom.registerCardForm);
|
|
|
|
/* If order, make sure to bring along both card number and phone number */
|
|
if (membershipOrder) {
|
|
payload.card_number = membershipOrder.member_card;
|
|
payload.phone_number = membershipOrder.phone_number;
|
|
}
|
|
|
|
$.ajax(urls.renewMembership, {
|
|
data: JSON.stringify(payload),
|
|
contentType: "application/json",
|
|
dataType: "json",
|
|
type: "post",
|
|
headers: { "X-CSRFToken": getCookie("csrftoken") },
|
|
})
|
|
.done((data) => {
|
|
let name = "unknown";
|
|
if (data.user) {
|
|
name = `${selectedUser.first_name} ${selectedUser.last_name}`;
|
|
} else {
|
|
name = `phone number ${data.phone_number}`;
|
|
}
|
|
const successMessage = `Membership renewed for ${name} :-)`;
|
|
setToast(successMessage, "success");
|
|
resetCardForm(true);
|
|
})
|
|
.fail((data) => {
|
|
console.log("failed", data);
|
|
let errorText = data.responseText;
|
|
if (data.responseJSON) {
|
|
if (data.responseJSON.non_field_errors) {
|
|
errorText = data.responseJSON.non_field_errors.join("<br>");
|
|
} else {
|
|
errorText = "Not sure why. :-(";
|
|
}
|
|
}
|
|
setToast(`Failed! ${errorText}`, "error");
|
|
});
|
|
});
|
|
|
|
/* On user id change */
|
|
_dom.userIdField.on("change", function () {
|
|
/* Render selected user in search form */
|
|
renderSelectedUser(selectedUser);
|
|
});
|
|
/* On order uuid change */
|
|
_dom.orderUuidField.on("change", function () {
|
|
/* Render selected order */
|
|
renderSelectedOrder(membershipOrder);
|
|
});
|
|
/* Reset buttons */
|
|
_dom.registerResetButton.on("click", function () {
|
|
resetCardForm();
|
|
});
|
|
_dom.searchResetButton.on("click", function () {
|
|
resetSearchForm();
|
|
});
|
|
|
|
/* Ninja add some icons to bootstrap form */
|
|
const iconMobile =
|
|
'<span class="input-group-addon"><span class="glyphicon glyphicon-phone glyphicon-phone-large"></span></span>';
|
|
_dom.phoneNumberField.parent().addClass("input-group");
|
|
_dom.phoneNumberField.before(iconMobile);
|
|
|
|
/* Render initial placeholder user */
|
|
const selectedUserHtml = nunjucksEnv.render("search_result.html", { placeholder: true });
|
|
_dom.selectedEntityWrap.html(selectedUserHtml);
|
|
|
|
/* Initial focus */
|
|
if (_dom.usernameField) {
|
|
_dom.usernameField.focus();
|
|
}
|
|
|
|
/* Load query params */
|
|
if (getParameterByName("user_id")) {
|
|
_dom.userIdField.val(getParameterByName("user_id")).trigger("change");
|
|
}
|
|
if (getParameterByName("phone_number")) {
|
|
_dom.phoneNumberField.val(getParameterByName("phone_number")).trigger("input");
|
|
}
|
|
if (getParameterByName("card_number")) {
|
|
_dom.cardNumberField.val(getParameterByName("card_number")).trigger("input");
|
|
}
|
|
|
|
$('[data-toggle="popover"]').popover({
|
|
html: true,
|
|
trigger: "click",
|
|
});
|
|
});
|