Attempting to create a basic POS interface in Books.

[esafwan]

I am trying to build a quick POS interface for Frappe Books. I had suggested books to a few small businesses and individual shops.
However, while it was useful many needed a POS like interface. For example small Kirana stores.

Progress so far.

For now, I have managed to add a link on the sidebar under sales & am trying to build a usable UI. This is my first time with Vue and Electron. However, experience working on React and NodeJs is helping me progress.

I was wondering if there would anyone from the Books team, who I can connect with to get direction and also get back in case I have any queries. Also, any suggestion on how to go ahead with development will help too.

Original Issue: #289

[18alantom]

Awesome stuff @esafwan! You can use this: https://docs.erpnext.com/docs/v13/user/manual/en/accounts/point-of-sales for ideas/guidance, to test it out you can check the demo: https://erpnext.com/demo.

Any queries you can post it here, just tag me or @ankitsinghaniyaz we'll take a look.

As for development, I'd try getting the business logic down first then focus on the UI.

[esafwan]

@18alantom Thank you for the response. I have multiple implementation ERPNext running with POS being used in 5 retail counters with great success. It is a clean and usable product within ERPNext.

As you suggested, I am figuring out the business logic first. With respect to the same, I am stuck at creating the invoice doctype. While am able to create invoice, I am not sure how I can add items and what other fields are mandatory before I can submit the same.

My code:

const doctype = 'SalesInvoice';
this.doc = await frappe.getNewDoc(doctype);     
this.doc.set('items', 'Item Name');
this.oc.insertOrUpdate();

Error I am getting is something as below:

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Array'
    |     index 0 -> object with constructor 'BaseDocument'
    |     property 'parentdoc' -> object with constructor 'SalesInvoiceServer'
    --- property 'items' closes the circle
    at JSON.stringify (<anonymous>)

It will be great if I get direction on how I can create an invoice and add the required data to it.

@ankitsinghaniyaz

[18alantom]

I have multiple implementation ERPNext running with POS being used in 5 retail counters with great success. It is a clean and usable product within ERPNext.

I wasn't aware, nice to know that you're familiar with ERPNext! Hopefully we can get develop something as clean as the ERPNext POS in Frappe Books.

this.doc.set('items', 'Item Name');

Since items is a Table type, you can't set it this way, you'll have to set it as an Array or you can use .append. Here's an example from the codebase.

const invoice = await frappe.getNewDoc('SalesInvoice');
invoice.append('items', {
  item: doc.name,
  rate: doc.rate,
  tax: doc.tax,
});

For mandatory fields you can check the Model.js itself for required: 1, here's the model file for SalesInvoice, and for the SalesInvoice table items.

p.s. I don't know if you're following the docs but they're a bit outdated, I too faced difficulties w.r.t this. It's easier to check examples from the codebase or check the source code of a function. Updating the docs will be put off for a while until this project gathers speed.

[esafwan]

@18alantom I am referring to the code. I did find documentation to be of limited use.

My major challenge is not having any serious working experience with Vue and FrappeJs.
With some inputs from the Books team, my current understanding of JS & ERPNext. I think I can pull this off. 😃

[esafwan]

So far, I have been successful in doing the following:

1. Adding a link on the left sidebar.
2. Creating a POS page with items shown as a grid.
3. Creating a new invoice and adding a hardcoded item to it.

Next steps I plan to do:

• Make the button with an item grid add that item to the invoice.
• Show current invoice items in the table on right.
• Load Account, Tax, Price etc from the item data.
• Implement option to choose customer.

[esafwan]

Update:
Attempting to reuse Invoice UI and add maybe a POS toggle. That way almost all methods can be reused.

[18alantom]

Nice! Just as a precautionary measure, ensure that the business logic and UI aren't tightly coupled.

That way we can trigger the PoS UI from anywhere, like say a dashboard or probably launch a new window for it. For now, though, the business logic is the most important.

Also this way if any UI changes are there in Invoice then it won't break PoS.

You can still reuse the Invoice code by extending the PurchaseInvoiceServer and overriding what's required. Both purchase and sales invoice use the same underlying code which is TransactionDocument.

[esafwan]

@18alantom I am still figuring out how everything works. So, I am not bothering much about how it is coded.

However, I have started everything on a fresh branch with commits that makes sense to me. So that I can track all my changes and later replicate them in a cleaner way. Ideally, as you said in a different POS UI that can be triggered from anywhere. Let me also have a look at PurchaseInvoiceServer. I have not got a chance to look at it yet.

Current progress:

[18alantom]

@esafwan yup makes sense to get familiar first then replicate cleanly. Let me know if something doesn't make sense in the code.

[esafwan]

@18alantom

I have created a pay button to test the function where I can save, submit and pay in one go. What will be the right way to go ahead?

I am creating a function that will be called when pay is clicked. Which in return will call the on onSaveClick() & onSubmitClick() functions. Followed by a logic that will create a payment entry against this invoice.

I am also still not sure how I can invoke the pay action from within the invoice page(will be changed later), in this case.

[18alantom]

What will be the right way to go ahead?

I'd first try to get the business logic down using ERPNext as a reference. One way to evaluate is, can the written PoS logic be mapped to the ERPNext PoS UI?

I am also still not sure how I can invoke the pay action from within the invoice page(will be changed later), in this case.

For the creating the Payment entry you can use the QuickEditForm.vue file as reference, payments are made through here. Essentially on clicking Pay, calling getDoc, setting the fields, then calling insert, and submit.

[esafwan]

Thank you for the prompt response.

Right now I am figuring out all logic parts and making sure I have all the knowledge required to finally execute whatever flow I will finally implement. I expect to implement POS in a UI independent from the standard invoice feature.

Immediate goals and it's relationship to ERPNext:

• In ERPNext POS is focused on a more multiuser use case. For example, you have POS profile, POS opening, POS closing etc...
• In the case of Frape Books, it is more of a personal single person finance app. For example, we are not really tracking who logged in or who created a bill or who registered a payment. That layer is fully missing.
• At present, the objective of POS UI that am working on is very limited and simple. Create a UI for the shop owner to use Frappe Book as POS, that is give him/her the ability to quickly create an invoice via POS like UI and submit the invoice with payment entry in one go.
• Currently, though Frappe Books is good enough for a single owner boutique or retail shop, the lack of a POS like interface results in much friction and requires more clicks than needed.
• Just having an alternative UI for invoices with payment automatically created as the invoice is submitted will solve this issue.
• For a more elaborate use case I think, we will need to come with users, roles etc. Which is more of the whole Frappe Books level scope I think.

I would really love to hear and appreciate any inputs, suggestions or criticism you may have towards the above points.

Thanks.

[18alantom]

I agree with all your points. As of now there is no authentication or authorization flow for users/roles in FB. Once it is added in, it shouldn't be too difficult to update POS to take it into account.

Until then, point 3 is a sensible immediate target. Once this is done, additional single user POS features can be added in.

[esafwan]

@18alantom
I was able to successfully do the following:

1. I was able to modify the current invoice form page and modify it to have a POS like UI.
2. Show the Pay button on the top header after the invoice is submitted.
3. The pay button opens the quick edit form from which the user can make the payment.

Next, in a fresh branch created from master, I am creating a separate POS form by the name PosInvoiceForm.vue, this will be almost the same as InvoiceForm.vue with just the UI modified to resemble a POS. I then intend to add a button Open POS in the Invoice List page.

However I am stuck at:
I can see that the invoice form route is implemented as below in router.js

{
    path: '/edit/:doctype/:name',
    name: 'InvoiceForm',
    components: {
      default: InvoiceForm,
      edit: QuickEditForm,
    },
    props: {
      default: true,
      edit: (route) => route.query,
    },
  },

How can I make a button load the PosInvoiceForm without having to lose the ability to load the standard InvoiceForm? Any hints towards the right direction will be greatly appreciated.

[18alantom]

A route can be added for PosInvoiceForm and when the Open POS button is clicked call routeTo with this route.

You can check the other calls to routeTo for reference, it takes other options too if you need.

[esafwan]

Update: I have not been able to put much time into the last 3 weeks due to some other engagements. I am expecting to get back to this and try to finish a PoC starting next week.

[NavidDaxon]

Hi there, How can i get access to this project, I wondered to use pos interface in this framework but i couldnt find any source for that.

[esafwan]

Hello Navid,
It was not completed in usable way.

[NavidDaxon]

how can i get contact with you about this project wa or telegram or something

[esafwan]

@esafwan is my telegram id.

[esafwan]

@18alantom
I have restarted the development of POS interface afresh here.

I restarted from scratch after understanding the Frappe Books code base better. As of now, I have cloned the invoice form as a base & started changing its layout to that of a POS. I have for now added some dummy product cards to finish the layout part.

[esafwan]

Further Updates:

1. Added an Open POS button list view of Invoice.
2. It opens the invoice form created for POS.
3. The logic for the buttons needs your review.

Below is the relevant code snippet (commit):

 async openPos() {
      const doc = await fyo.doc.getNewDoc(this.schemaName, this.filters ?? {});
      const path = "/pos/SalesInvoice/" + doc.name;            
      routeTo(path);
      doc.on('afterSync', () => {
        const path =  "/pos/SalesInvoice/" + doc.name;
        this.$router.replace(path);
      });      
    }

In a quick look, couldn't figure out how to use getFormPath to expose POS form.

[18alantom]

I've added a comment to commit.

[esafwan]

The item grid on pos now loads from actual items. Also added a button to add to the invoice.(see image below)

I am stuck here. I am not able to figure out how I can add an item to the current invoice. In older version of Frappe Books, I had done it with the below code:

invoice.append('items', {
  item: doc.name,
  rate: doc.rate,
  tax: doc.tax,
});

I understand there has been some refactor and I am aware of FYO. I tried both the codes below with no success:

Code 1:

doc.set("Item",{
        item: item_doc.name,
        rate: item_doc.rate,
        tax: item_doc.tax
      });

The above code returns no error but doesn't work.

Code 2:

doc.append("Item",{
        item: item_doc.name,
        rate: item_doc.rate,
        tax: item_doc.tax
  });

The above code, returns the below error:

errorHandling.ts:79 TypeError: Cannot read properties of undefined (reading 'target')
at Proxy._getChildDoc (doc.ts:368:71)
at Proxy.push (doc.ts:327:12)
at Proxy._callee5$ (doc.ts:319:10)
at tryCatch (runtime.js:63:15)
at Generator.invoke [as _invoke] (runtime.js:294:1)
at Generator.next (runtime.js:119:1)
at asyncGeneratorStep (asyncToGenerator.js:3:16)
at _next (asyncToGenerator.js:25:9)
at asyncToGenerator.js:32:7
at new Promise ()

The actual source code is here.

[18alantom]

Hey, append as you had used it earlier should work. (ref: how tables add items).

You're getting an error on the second implementation because "Item" is not a field.

Since fields are case-sensitive you'll have to use "items". (ref: SalesInvoice fields).

[esafwan]

I had assumed that we are passing the doctype name. Changing it to "items" fixed my issue. I will commit and push in some time.

[esafwan]

[esafwan]

@18alantom Thank you for the prompt support. I have a functional POS UI ready now.

Possible next steps:

1. In POS only show PAY button instead of save or submit and then open payment screen as soon as it is pressed.
2. Hide tax column and load default if possible.
3. Find more creative ways to better layout the invoice part.

See the POS in action below.

[esafwan]

Latest code is committed here.

[uday85]

Is there a possibility to add customer name number address and nature of work
Along with possibility of adding ID for some purchase requireing identification or prescription and such field can be updated through camera or image on WhatsApp