Item
Qty
Amount
+ Add Discount
-
+
-
Net Total
@@ -106,7 +105,7 @@ erpnext.PointOfSale.ItemCart = class {
0.00
+
Checkout
@@ -151,7 +150,7 @@ erpnext.PointOfSale.ItemCart = class {
this.$numpad_section.append(
`
+ text-center text-white no-select pointer rounded-md text-md text-bold mt-4" data-button-value="checkout">
Checkout
`
)
@@ -159,15 +158,17 @@ erpnext.PointOfSale.ItemCart = class {
bind_events() {
const me = this;
- this.$customer_section.on('click', '.add-remove-customer', function (e) {
- const customer_info_is_visible = me.$cart_container.hasClass('d-none');
- customer_info_is_visible ?
- me.toggle_customer_info(false) : me.reset_customer_selector();
+ this.$customer_section.on('click', '.reset-customer-btn', function (e) {
+ me.reset_customer_selector();
});
- this.$customer_section.on('click', '.customer-header', function(e) {
- // don't triggger the event if .add-remove-customer btn is clicked which is under .customer-header
- if ($(e.target).closest('.add-remove-customer').length) return;
+ this.$customer_section.on('click', '.close-details-btn', function (e) {
+ me.toggle_customer_info(false);
+ });
+
+ this.$customer_section.on('click', '.customer-display', function(e) {
+ // don't triggger the event if .reset-customer-btn btn is clicked which is under .customer-header
+ if ($(e.target).closest('.reset-customer-btn').length) return;
const show = !me.$cart_container.hasClass('d-none');
me.toggle_customer_info(show);
@@ -282,24 +283,26 @@ erpnext.PointOfSale.ItemCart = class {
toggle_item_highlight(item) {
const $cart_item = $(item);
- const item_is_highlighted = $cart_item.hasClass("shadow");
+ const item_is_highlighted = $cart_item.hasClass("shadow-base");
if (!item || item_is_highlighted) {
this.item_is_selected = false;
- this.$cart_container.find('.cart-item-wrapper').removeClass("shadow").css("opacity", "1");
+ this.$cart_container.find('.cart-item-wrapper').removeClass("shadow-base").css("opacity", "1");
} else {
- $cart_item.addClass("shadow");
+ $cart_item.addClass("shadow-base");
this.item_is_selected = true;
this.$cart_container.find('.cart-item-wrapper').css("opacity", "1");
- this.$cart_container.find('.cart-item-wrapper').not(item).removeClass("shadow").css("opacity", "0.65");
+ this.$cart_container.find('.cart-item-wrapper').not(item).removeClass("shadow-base").css("opacity", "0.65");
}
- // highlight with inner shadow
- // $cart_item.addClass("shadow-inner bg-selected");
- // me.$cart_container.find('.cart-item-wrapper').not(this).removeClass("shadow-inner bg-selected");
+ // highlight with inner shadow-base
+ // $cart_item.addClass("shadow-base-inner bg-selected");
+ // me.$cart_container.find('.cart-item-wrapper').not(this).removeClass("shadow-base-inner bg-selected");
}
make_customer_selector() {
- this.$customer_section.html(``);
+ this.$customer_section.html(`
+
+ `);
const me = this;
const query = { query: 'erpnext.controllers.queries.customer_query' };
const allowed_customer_group = this.events.get_allowed_customer_group() || [];
@@ -313,6 +316,7 @@ erpnext.PointOfSale.ItemCart = class {
label: __('Customer'),
fieldtype: 'Link',
options: 'Customer',
+ input_class: 'input-xs',
placeholder: __('Search by customer name, phone, email.'),
get_query: () => query,
onchange: function() {
@@ -332,7 +336,7 @@ erpnext.PointOfSale.ItemCart = class {
}
},
},
- parent: this.$customer_section.find('.customer-search-field'),
+ parent: this.$customer_section.find('.customer-field'),
render_input: true,
});
this.customer_field.toggle_label(false);
@@ -414,7 +418,7 @@ erpnext.PointOfSale.ItemCart = class {
stroke-linecap="round" stroke-linejoin="round">
+
${String(discount).bold()}% off
`
@@ -423,18 +427,18 @@ erpnext.PointOfSale.ItemCart = class {
}
update_customer_section() {
- const { customer, email_id='', mobile_no='', image } = this.customer_info || {};
+ const { customer, email_id='', mobile_no='' } = this.customer_info || {};
if (customer) {
- this.$customer_section.addClass('border pr-4 pl-4').html(
- `
-
- ${get_customer_image()}
-
-
${customer}
+ this.$customer_section.html(
+ `
+
+ ${this.get_customer_image()}
+
+
- ${customer}
${get_customer_description()}
+
`
@@ -618,7 +619,7 @@ erpnext.PointOfSale.ItemCart = class {
if (item_data.rate && item_data.amount && item_data.rate !== item_data.amount) {
return `
@@ -449,26 +453,23 @@ erpnext.PointOfSale.ItemCart = class {
function get_customer_description() {
if (!email_id && !mobile_no) {
- return `
`
+ } else {
+ return `
@@ -575,7 +576,7 @@ erpnext.PointOfSale.ItemCart = class {
if (!$item_to_update.length) {
this.$cart_items_wrapper.append(
- `Click to add email / phone
`
+ return `Click to add email / phone
`
} else if (email_id && !mobile_no) {
- return `${email_id}
`
+ return `${email_id}
`
} else if (mobile_no && !email_id) {
- return `${mobile_no}
`
+ return `${mobile_no}
`
} else {
- return `${email_id} | ${mobile_no}
`
+ return `${email_id} - ${mobile_no}
`
}
}
- function get_customer_image() {
- if (image) {
- return `
-
-
`
- } else {
- return `
- ${frappe.get_abbr(customer)}
-
`
- }
+ }
+ get_customer_image() {
+ const { customer, image } = this.customer_info || {};
+ if (image) {
+ return `${frappe.get_abbr(customer)}
`
}
}
@@ -523,7 +524,7 @@ erpnext.PointOfSale.ItemCart = class {
let margin_left = '';
if (i !== 0) margin_left = 'ml-2';
const description = /[0-9]+/.test(t.description) ? t.description : `${t.description} @ ${t.rate}%`;
- return `${description}`
+ return `${description}`
}).join('')
}
-
+
${item_data.qty || 0}
@@ -629,7 +630,7 @@ erpnext.PointOfSale.ItemCart = class {
} else {
return `
-
+
${item_data.qty || 0}
@@ -753,25 +754,25 @@ erpnext.PointOfSale.ItemCart = class {
}
highlight_numpad_btn($btn, curr_action) {
- const curr_action_is_highlighted = $btn.hasClass('shadow-inner');
+ const curr_action_is_highlighted = $btn.hasClass('shadow-base-inner');
const curr_action_is_action = ['qty', 'discount_percentage', 'rate', 'done'].includes(curr_action);
if (!curr_action_is_highlighted) {
- $btn.addClass('shadow-inner bg-selected');
+ $btn.addClass('shadow-base-inner bg-selected');
}
if (this.prev_action === curr_action && curr_action_is_highlighted) {
// if Qty is pressed twice
- $btn.removeClass('shadow-inner bg-selected');
+ $btn.removeClass('shadow-base-inner bg-selected');
}
if (this.prev_action && this.prev_action !== curr_action && curr_action_is_action) {
// Order: Qty -> Rate then remove Qty highlight
const prev_btn = $(`[data-button-value='${this.prev_action}']`);
- prev_btn.removeClass('shadow-inner bg-selected');
+ prev_btn.removeClass('shadow-base-inner bg-selected');
}
if (!curr_action_is_action || curr_action === 'done') {
// if numbers are clicked
setTimeout(() => {
- $btn.removeClass('shadow-inner bg-selected');
+ $btn.removeClass('shadow-base-inner bg-selected');
}, 100);
}
}
@@ -790,7 +791,7 @@ erpnext.PointOfSale.ItemCart = class {
reset_numpad() {
this.numpad_value = '';
this.prev_action = undefined;
- this.$numpad_section.find('.shadow-inner').removeClass('shadow-inner bg-selected');
+ this.$numpad_section.find('.shadow-base-inner').removeClass('shadow-base-inner bg-selected');
}
toggle_numpad_field_edit(fieldname) {
@@ -801,48 +802,60 @@ erpnext.PointOfSale.ItemCart = class {
toggle_customer_info(show) {
if (show) {
- this.$cart_container.addClass('d-none')
- this.$customer_section.addClass('flex-1 scroll-y').removeClass('mb-0 border pr-4 pl-4')
- this.$customer_section.find('.icon').addClass('w-24 h-24 text-2xl').removeClass('w-12 h-12 text-md')
- this.$customer_section.find('.customer-header').removeClass('h-18');
- this.$customer_section.find('.customer-details').addClass('sticky z-100 bg-white');
+ const { customer } = this.customer_info || {};
- this.$customer_section.find('.customer-name').html(
- `
${this.customer_info.customer}
- `
- )
-
- this.$customer_section.find('.customer-details').append(
- `
-
CONTACT DETAILS
-
-
-
-
-
+ this.$cart_container.addClass('d-none');
+ this.$customer_section.css({
+ 'height': '100%',
+ 'padding-top': '0px',
+ 'overflow-x': 'hidden',
+ 'overflow-y': 'scroll'
+ });
+ this.$customer_section.find('.customer-details').html(
+ `
+
+
`
- )
+ Contact Details
+
+
- RECENT TRANSACTIONS
-
+ ${this.get_customer_image()}
+
+
+
+ ${customer}
+
+
+
+
+
+
+
+ Recent Transactions
`
+ );
// transactions need to be in diff div from sticky elem for scrolling
- this.$customer_section.append(``)
+ this.$customer_section.append(``)
- this.render_customer_info_form();
+ this.render_customer_fields();
this.fetch_customer_transactions();
} else {
this.$cart_container.removeClass('d-none');
- this.$customer_section.removeClass('flex-1 scroll-y').addClass('mb-0 border pr-4 pl-4');
- this.$customer_section.find('.icon').addClass('w-12 h-12 text-md').removeClass('w-24 h-24 text-2xl');
- this.$customer_section.find('.customer-header').addClass('h-18')
- this.$customer_section.find('.customer-details').removeClass('sticky z-100 bg-white');
+ this.$customer_section.css({
+ 'height': '',
+ 'padding-top': '',
+ 'overflow-x': '',
+ 'overflow-y': ''
+ });
this.update_customer_section();
}
}
- render_customer_info_form() {
- const $customer_form = this.$customer_section.find('.customer-form');
+ render_customer_fields() {
+ const $customer_form = this.$customer_section.find('.customer-fields-container');
const dfs = [{
fieldname: 'email_id',
@@ -864,7 +877,7 @@ erpnext.PointOfSale.ItemCart = class {
},{
fieldname: 'loyalty_points',
label: __('Loyalty Points'),
- fieldtype: 'Int',
+ fieldtype: 'Data',
read_only: 1
}];
@@ -916,14 +929,14 @@ erpnext.PointOfSale.ItemCart = class {
const transaction_container = this.$customer_section.find('.customer-transactions');
if (!res.length) {
- transaction_container.removeClass('flex-1 border rounded').html(
- `No recent transactions found
`
+ transaction_container.html(
+ `No recent transactions found
`
)
return;
};
const elapsed_time = moment(res[0].posting_date+" "+res[0].posting_time).fromNow();
- this.$customer_section.find('.last-transacted-on').html(`Last transacted ${elapsed_time}`);
+ this.$customer_section.find('.customer-desc').html(`Last transacted ${elapsed_time}`);
res.forEach(invoice => {
const posting_datetime = moment(invoice.posting_date+" "+invoice.posting_time).format("Do MMMM, h:mma");
@@ -934,20 +947,22 @@ erpnext.PointOfSale.ItemCart = class {
if (invoice.status === 'Return') (indicator_color = 'grey');
transaction_container.append(
- `
-
-
${invoice.name}
-
- ${posting_datetime}
-
+ `
+
+
- ${invoice.name}
+ ${posting_datetime}
-
+ `
)
});
})
+
`
+
+
-
${format_currency(invoice.grand_total, invoice.currency, 0) || 0}
- ${invoice.status}
+
+
+ ${invoice.status}
+