diff options
Diffstat (limited to 'addons/point_of_sale/static/src/xml/Screens/PaymentScreen')
7 files changed, 342 insertions, 0 deletions
diff --git a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PSNumpadInputButton.xml b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PSNumpadInputButton.xml new file mode 100644 index 00000000..381cd88c --- /dev/null +++ b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PSNumpadInputButton.xml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates id="template" xml:space="preserve"> + + <t t-name="PSNumpadInputButton" owl="1"> + <button t-attf-class="{{ _class }}" + t-on-click="trigger('input-from-numpad', { key: props.value })"> + <t t-slot="default"> + <t t-if="props.text"> + <t t-esc="props.text" /> + </t> + <t t-else=""> + <t t-esc="props.value" /> + </t> + </t> + </button> + </t> + +</templates> diff --git a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentMethodButton.xml b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentMethodButton.xml new file mode 100644 index 00000000..dacf7e96 --- /dev/null +++ b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentMethodButton.xml @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates id="template" xml:space="preserve"> + + <t t-name="PaymentMethodButton" owl="1"> + <div class="button paymentmethod" + t-on-click="trigger('new-payment-line', props.paymentMethod)"> + <div class="payment-name"> + <t t-esc="props.paymentMethod.name" /> + </div> + </div> + </t> + +</templates> diff --git a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreen.xml b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreen.xml new file mode 100644 index 00000000..d78128c9 --- /dev/null +++ b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreen.xml @@ -0,0 +1,99 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates id="template" xml:space="preserve"> + + <t t-name="PaymentScreen" owl="1"> + <div class="payment-screen screen" t-att-class="{ oe_hidden: !props.isShown }"> + <div class="screen-content"> + <t t-if="!env.isMobile"> + <div class="top-content"> + <div class="button back" + t-on-click="showScreen('ProductScreen')"> + <i class="fa fa-angle-double-left fa-fw"></i> + <span class="back_text">Back</span> + </div> + <div class="top-content-center"><h1>Payment</h1></div> + <div class="button next" t-att-class="{ highlight: currentOrder.is_paid() }" + t-on-click="validateOrder(false)"> + <span class="next_text">Validate</span> + <i class="fa fa-angle-double-right fa-fw"></i> + </div> + </div> + </t> + <div class="main-content"> + <div class="left-content"> + <t t-if="env.isMobile"> + <section class="paymentlines-container"> + <PaymentScreenStatus paymentLines="paymentLines" /> + </section> + </t> + <div class="paymentmethods-container"> + <PaymentScreenPaymentLines paymentLines="paymentLines" /> + <div class="paymentmethods"> + <t t-foreach="payment_methods_from_config" t-as="paymentMethod" + t-key="paymentMethod.id"> + <PaymentMethodButton paymentMethod="paymentMethod" /> + </t> + </div> + </div> + </div> + <div class="right-content"> + <t t-if="!env.isMobile"> + <section class="paymentlines-container"> + <PaymentScreenStatus paymentLines="paymentLines" /> + </section> + </t> + + <div class="payment-buttons-container"> + <section class="payment-numpad"> + <PaymentScreenNumpad /> + </section> + + <div class="payment-buttons"> + <div class="customer-button"> + <div class="button" t-on-click="selectClient"> + <i class="fa fa-user" role="img" aria-label="Customer" + title="Customer" /> + <span class="js_customer_name"> + <t t-if="env.pos.get_client()"> + <t t-esc="env.pos.get_client().name" /> + </t> + <t t-if="!env.pos.get_client()"> + Customer + </t> + </span> + </div> + </div> + <div class="payment-controls"> + <div t-if="env.pos.config.module_account" class="button js_invoice" + t-att-class="{ highlight: currentOrder.is_to_invoice() }" + t-on-click="toggleIsToInvoice"> + <i class="fa fa-file-text-o" /> Invoice + </div> + <div t-if="env.pos.config.tip_product_id" class="button js_tip" + t-on-click="addTip"> + <i class="fa fa-heart" /> Tip + </div> + <div t-if="env.pos.config.iface_cashdrawer" class="button js_cashdrawer" + t-on-click="openCashbox"> + <i class="fa fa-archive" /> Open Cashbox + </div> + </div> + </div> + </div> + </div> + </div> + <t t-if="env.isMobile"> + <div class="switchpane"> + <button class="btn-switchpane" t-att-class="{ secondary: !currentOrder.is_paid() }" t-on-click="validateOrder(false)"> + <h1>Validate</h1> + </button> + <button class="btn-switchpane secondary" t-on-click="showScreen('ProductScreen', {mobile_pane: 'left'})"> + <h1>Review</h1> + </button> + </div> + </t> + </div> + </div> + </t> + +</templates> diff --git a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenElectronicPayment.xml b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenElectronicPayment.xml new file mode 100644 index 00000000..792c490c --- /dev/null +++ b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenElectronicPayment.xml @@ -0,0 +1,76 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates id="template" xml:space="preserve"> + + <t t-name="PaymentScreenElectronicPayment" owl="1"> + <div class="paymentline electronic_payment"> + <t t-if="props.line.payment_status == 'pending'"> + <div> + Payment request pending + </div> + <div class="button send_payment_request highlight" title="Send Payment Request" t-on-click="trigger('send-payment-request', props.line)"> + Send + </div> + </t> + <t t-elif="props.line.payment_status == 'retry'"> + <div> + Transaction cancelled + </div> + <div class="button send_payment_request highlight" title="Send Payment Request" t-on-click="trigger('send-payment-request', props.line)"> + Retry + </div> + </t> + <t t-elif="props.line.payment_status == 'force_done'"> + <div> + Connection error + </div> + <div class="button send_force_done" title="Force Done" t-on-click="trigger('send-force-done', props.line)"> + Force done + </div> + </t> + <t t-elif="props.line.payment_status == 'waitingCard'"> + <div> + Waiting for card + </div> + <div class="button send_payment_cancel" title="Cancel Payment Request" t-on-click="trigger('send-payment-cancel', props.line)"> + Cancel + </div> + </t> + <t t-elif="['waiting', 'waitingCancel'].includes(props.line.payment_status)"> + <div> + Request sent + </div> + <div> + <i class="fa fa-spinner fa-spin" role="img" /> + </div> + </t> + <t t-elif="props.line.payment_status == 'reversing'"> + <div> + Reversal request sent to terminal + </div> + <div> + <i class="fa fa-spinner fa-spin" role="img" /> + </div> + </t> + <t t-elif="props.line.payment_status == 'done'"> + <div> + Payment Successful + </div> + <t t-if="props.line.can_be_reversed"> + <div class="button send_payment_reversal" title="Reverse Payment" t-on-click="trigger('send-payment-reverse', props.line)"> + Reverse + </div> + </t> + <t t-else=""> + <div></div> + </t> + </t> + <t t-elif="props.line.payment_status == 'reversed'"> + <div> + Payment reversed + </div> + <div></div> + </t> + </div> + </t> + +</templates> diff --git a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenNumpad.xml b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenNumpad.xml new file mode 100644 index 00000000..d988ab5f --- /dev/null +++ b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenNumpad.xml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates id="template" xml:space="preserve"> + + <t t-name="PaymentScreenNumpad" owl="1"> + <div class="numpad"> + <PSNumpadInputButton value="'1'" /> + <PSNumpadInputButton value="'2'" /> + <PSNumpadInputButton value="'3'" /> + <PSNumpadInputButton value="'+10'" changeClassTo="'mode-button'" /> + <br /> + <PSNumpadInputButton value="'4'" /> + <PSNumpadInputButton value="'5'" /> + <PSNumpadInputButton value="'6'" /> + <PSNumpadInputButton value="'+20'" changeClassTo="'mode-button'" /> + <br /> + <PSNumpadInputButton value="'7'" /> + <PSNumpadInputButton value="'8'" /> + <PSNumpadInputButton value="'9'" /> + <PSNumpadInputButton value="'+50'" changeClassTo="'mode-button'" /> + <br /> + <PSNumpadInputButton value="'-'" text="'+/-'" /> + <PSNumpadInputButton value="'0'" /> + <PSNumpadInputButton value="decimalPoint" /> + <PSNumpadInputButton value="'Backspace'"> + <img src="/point_of_sale/static/src/img/backspace.png" width="24" height="21" + alt="Backspace" /> + </PSNumpadInputButton> + </div> + </t> + +</templates> diff --git a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenPaymentLines.xml b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenPaymentLines.xml new file mode 100644 index 00000000..6816f300 --- /dev/null +++ b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenPaymentLines.xml @@ -0,0 +1,62 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates id="template" xml:space="preserve"> + + <t t-name="PaymentScreenPaymentLines" owl="1"> + <div class="paymentlines"> + <t t-foreach="props.paymentLines" t-as="line" t-key="line.cid"> + <t t-if="line.selected"> + <div class="paymentline selected" + t-att-class="selectedLineClass(line)" + t-on-click="trigger('select-payment-line', { cid: line.cid })"> + <div class="payment-name"> + <t t-esc="line.payment_method.name" /> + </div> + <div class="payment-amount"> + <t t-if="line and line.payment_status and ['done', 'waitingCard', 'waiting', 'reversing', 'reversed'].includes(line.payment_status)"> + <t t-esc="env.pos.format_currency_no_symbol(line.get_amount())" /> + </t> + <t t-else=""> + <t t-esc="formatLineAmount(line)" /> + </t> + </div> + <t t-if="!line.payment_status or !['done', 'reversed'].includes(line.payment_status)"> + <div class="delete-button" + t-on-click="trigger('delete-payment-line', { cid: line.cid })" + aria-label="Delete" title="Delete"> + <i class="fa fa-times-circle" /> + </div> + </t> + </div> + <t t-if="line and line.payment_status"> + <PaymentScreenElectronicPayment line="line" /> + </t> + </t> + <t t-else=""> + <div class="paymentline" + t-att-class="unselectedLineClass(line)" + t-on-click="trigger('select-payment-line', { cid: line.cid })"> + <div class="payment-name"> + <t t-esc="line.payment_method.name" /> + </div> + <div class="payment-amount"> + <t t-if="line and line.payment_status and ['done', 'waitingCard', 'waiting', 'reversing', 'reversed'].includes(line.payment_status)"> + <t t-esc="env.pos.format_currency_no_symbol(line.get_amount())" /> + </t> + <t t-else=""> + <t t-esc="formatLineAmount(line)" /> + </t> + </div> + <t t-if="!line.payment_status or !['done', 'reversed'].includes(line.payment_status)"> + <div class="delete-button" + t-on-click="trigger('delete-payment-line', { cid: line.cid })" + aria-label="Delete" title="Delete"> + <i class="fa fa-times-circle" /> + </div> + </t> + </div> + </t> + </t> + </div> + </t> + +</templates> diff --git a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenStatus.xml b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenStatus.xml new file mode 100644 index 00000000..7c90c8a5 --- /dev/null +++ b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenStatus.xml @@ -0,0 +1,43 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates id="template" xml:space="preserve"> + +<t t-name="PaymentScreenStatus" owl="1"> + <div t-if="props.paymentLines.length === 0" class="paymentlines-empty"> + <div class="total"> + <t t-esc="totalDueText" /> + </div> + <div class="message"> + Please select a payment method. + </div> + </div> + + <div t-else=""> + <div class="payment-status-container"> + <div> + <div class="payment-status-remaining"> + <span class="label">Remaining</span> + <span class="amount" + t-att-class="{ highlight: currentOrder.get_due() > 0 }"> + <t t-esc="remainingText" /> + </span> + </div> + <div class="payment-status-total-due"> + <span class="label">Total Due</span> + <span> + <t t-esc="totalDueText" /> + </span> + </div> + </div> + <div> + <div class="payment-status-change"> + <span class="label">Change</span> + <span class="amount" + t-att-class="{ highlight: currentOrder.get_change() > 0 }"> + <t t-esc="changeText" /> + </span> + </div> + </div> + </div> + </div> +</t> +</templates> |