hedera-web/forms/ecomerce/confirm/ui.xml

<vn>
<vn-group>
	<db-form v-model="order" on-ready="onOrderReady">
		<db-model property="model" result-index="1">
			CALL myBasket_getTax;
			SELECT o.id, o.sent, o.notes, o.companyFk, 
					ag.description agency, v.code method, 
					ad.nickname, ad.postalCode, ad.city, ad.street, 
					t.*, c.credit, myClient_getDebt(NULL) debt
				FROM myBasket o
					JOIN vn.agencyMode ag ON ag.id = o.agencyModeFk 
					LEFT JOIN myAddress ad ON ad.id = o.addressFk 
					JOIN vn.deliveryMethod v ON v.id = o.deliveryMethodFk
					JOIN myClient c
					JOIN (
						SELECT
							IFNULL(SUM(taxableBase), 0) taxableBase,
							IFNULL(SUM(tax), 0) tax
							FROM tmp.orderAmount
					) t;
			DROP TEMPORARY TABLE
				tmp.orderAmount,
				tmp.orderTax;
		</db-model>
	</db-form>
	<db-query id="confirm-query" on-ready="onConfirm">
		CALL myBasket_confirm
	</db-query>
</vn-group>
<div id="title">
	<h1><t>Order summary</t></h1>
</div>
<div id="form" class="confirm">
	<div class="vn-w-sm">
		<div class="box vn-pa-lg summary">
			<div>
				<div class="delivery">
					<h6><t>ShippingInformation</t></h6>
					<p>
						<t>Delivery at</t>  {{Vn.Value.format(order.sent, _('%D'))}}
					</p>
					<p>
						<span id="method"><t>Agency</t></span> {{order.agency}}
					</p>
				</div>
				<div id="address" class="address vn-mt-md">
					<h6><t>DeliveryAddress</t></h6>
					<p>{{order.nickname}}</p>
					<p>{{order.street}}</p>
					<p>{{order.postalCode}}, {{order.city}}</p>
				</div>
			</div>
		</div>
		<div class="box vn-pa-lg payment">
			<div>
				<table class="debt-info">
					<tbody>
						<tr>
							<td><t>Previous balance</t></td>
							<td class="currency">
								<htk-text format="%.2d€" id="debt"/>
							</td>
						</tr>
						<tr>
							<td>
								<t>Order total</t>
							</td>
							<td class="currency">
								{{Vn.Value.format(order.taxableBase, _('%.2d€'))}}
							</td>
						</tr>
						<tr>
							<td>
								<t>Order VAT</t>
							</td>
							<td class="currency">
								{{Vn.Value.format(order.tax, _('%.2d€'))}}
							</td>
						</tr>
						<tr class="total-debt sum-total">
							<td>
								<t>Total debt</t>
							</td>
							<td class="currency">
								<htk-text format="%.2d€" id="total-debt"/>
							</td>
						</tr>
						<tr id="credit-info" class="credit-info">
							<td>
								<t>Credit</t>
							</td>
							<td class="currency">
								{{Vn.Value.format(order.credit, _('%.2d€'))}}
							</td>
						</tr>
						<tr id="exceeded-info" class="exceeded-info sum-total">
							<td>
								<t>Exceeded credit</t>
							</td>
							<td class="currency">
								<htk-text format="%.2d€" id="credit-excess"/>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div id="amount-selector" class="amount-selector">
				<h2>
					<t>Amount to pay</t>
				</h2>
				<div class="radio">
					<htk-radio-group
						id="pay-amount"/>
					<div>
						<htk-radio radio-group="pay-amount" value="ALL"/>
						<label>
							<t>Total debt</t>, 
							<htk-text format="%.2d€" id="total-amount"/>
						</label>
					</div>
					<div>
						<htk-radio radio-group="pay-amount" value="EXCEEDED"/>
						<label>
							<t>Exceeded credit</t>, 
							<htk-text format="%.2d€" id="excess-amount"/>
						</label>
					</div>
				</div>
			</div>
			<div>
				<h6><t>Pay method</t></h6>
				<div class="pay-methods">
					<htk-radio-group
						id="pay-method"
						on-changed="onPayMethodChange"/>
					<div id="balance-method">
						<label>
							<htk-radio radio-group="pay-method" value="BALANCE"/>
							<t>Use my balance</t>
						</label>
						<div>
							<t>You have a favorable balance.</t>
						</div>
					</div>
					<div id="credit-method">
						<label>
							<htk-radio radio-group="pay-method" value="CREDIT"/>
							<t>Use my credit</t>
						</label>
						<div>
							<t>You have a favorable credit.</t>
						</div>
					</div>
					<div id="card-method">
						<label>
							<htk-radio radio-group="pay-method" value="CARD"/>
							<t>Credit card</t>
						</label>
						<div>
							<t>You will be redirected to the payment.</t>
						</div>
					</div>
					<div id="transfer-method">
						<label>
							<htk-radio radio-group="pay-method" value="TRANSFER"/>
							<t>Bank Transfer</t>
						</label>
						<div>
							<t>Make a transfer to one account.</t>
							<htk-repeater form-id="iter">
								<db-model property="model">
									SELECT name, iban FROM mainAccountBank	
								</db-model>
								<custom>
									<div class="transfer-account">
										<p>{{iter.name}}</p>
										<p>{{iter.iban}}</p>
									</div>
								</custom>
							</htk-repeater>
						</div>
					</div>
					<div id="later-method">
						<label>
							<htk-radio radio-group="pay-method" value="LATER"/>
							<t>Pay later</t>
						</label>
					</div>
				</div>
			</div>
			<div class="button-bar vn-mt-md">
				<button
					id="modify"
					on-click="this.onModifyClick()"
					class="modify-order">
					<t>Modify</t>
				</button>
				<button
					id="confirm"
					on-click="this.onConfirmClick()"
					class="confirm-order">
					<t>Confirm</t>
				</button>
			</div>
		</div>
	</div>
</div>
<htk-dialog
	id="success-dialog"
	icon="ok"
	message="_Order confirmed successfully"
	buttons="ACCEPT"
	on-response="onDialogResponse"/>
</vn>