summaryrefslogtreecommitdiff
path: root/Shop/Checkout
diff options
context:
space:
mode:
Diffstat (limited to 'Shop/Checkout')
-rw-r--r--Shop/Checkout/PersonalInfo.ui.qml267
-rw-r--r--Shop/Checkout/PersonalInfo/PaymentMethod/NetBanking.ui.qml76
-rw-r--r--Shop/Checkout/RightSidebar/OrderSummary.ui.qml242
3 files changed, 585 insertions, 0 deletions
diff --git a/Shop/Checkout/PersonalInfo.ui.qml b/Shop/Checkout/PersonalInfo.ui.qml
new file mode 100644
index 0000000..3bdff82
--- /dev/null
+++ b/Shop/Checkout/PersonalInfo.ui.qml
@@ -0,0 +1,267 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import Eduport 1.4
+import "../../TextField"
+import "../../Label"
+import "PersonalInfo/PaymentMethod"
+
+ColumnLayout {
+ property alias name: name
+ property alias email: email
+ property alias mobile: mobile
+ property alias country: country
+ property alias state: province
+ property alias postal: postal
+ property alias address: address
+ property alias paymentMethodNetBanking: paymentMethodNetBanking
+
+ H5 {
+ text: qsTr("Personal Details")
+ Layout.fillWidth: true
+ Layout.rightMargin: 16
+ Layout.leftMargin: 16
+ Layout.topMargin: 16
+ }
+
+ GridLayout {
+ Layout.margins: 16
+ columns: body.width < 768 ? 1 : 2
+ rows: body.width < 768 ? 4 : 7
+ columnSpacing: 0
+ rowSpacing: 16
+
+ ColumnLayout {
+
+ Body {
+ text: qsTr("Your name *")
+ Layout.fillWidth: true
+ }
+
+ Rectangle {
+ implicitHeight: 56
+ color: "#f5f7f9"
+ radius: 8
+ border.width: 0
+ Layout.fillWidth: true
+ RowLayout {
+ anchors.fill: parent
+ Input {
+ id: name
+ placeholderText: qsTr("Name")
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ }
+ }
+ }
+ }
+
+ ColumnLayout {
+
+ Body {
+ text: qsTr("Email address *")
+ Layout.fillWidth: true
+ }
+
+ Rectangle {
+ implicitHeight: 56
+ color: "#f5f7f9"
+ radius: 8
+ border.width: 0
+ Layout.fillWidth: true
+ RowLayout {
+ anchors.fill: parent
+ Input {
+ id: email
+ placeholderText: qsTr("Email")
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ }
+ }
+ }
+ }
+
+ ColumnLayout {
+
+ Body {
+ text: qsTr("Mobile number *")
+ Layout.fillWidth: true
+ }
+
+ Rectangle {
+ implicitHeight: 56
+ color: "#f5f7f9"
+ radius: 8
+ border.width: 0
+ Layout.fillWidth: true
+ RowLayout {
+ anchors.fill: parent
+ Input {
+ id: mobile
+ placeholderText:
+ qsTr("Mobile number")
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ }
+ }
+ }
+ }
+
+ ColumnLayout {
+
+ Body {
+ text: qsTr("Select country *")
+ Layout.fillWidth: true
+ }
+ Rectangle {
+ implicitHeight: 56
+ color: "#f5f7f9"
+ radius: 8
+ border.width: 0
+ Layout.fillWidth: true
+ RowLayout {
+ anchors.fill: parent
+ Input {
+ id: country
+ placeholderText:
+ qsTr("Select country")
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ }
+ }
+ }
+ }
+
+ ColumnLayout {
+
+ Body {
+ text: qsTr("Select state *")
+ Layout.fillWidth: true
+ }
+
+ Rectangle {
+ implicitHeight: 56
+ color: "#f5f7f9"
+ radius: 8
+ border.width: 0
+ Layout.fillWidth: true
+ RowLayout {
+ anchors.fill: parent
+ Input {
+ id: province
+ placeholderText:
+ qsTr("Select state")
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ }
+ }
+ }
+ }
+
+ ColumnLayout {
+
+ Body {
+ text: qsTr("Postal code *")
+ Layout.fillWidth: true
+ }
+
+ Rectangle {
+ implicitHeight: 56
+ color: "#f5f7f9"
+ radius: 8
+ border.width: 0
+ Layout.fillWidth: true
+ RowLayout {
+ anchors.fill: parent
+ Input {
+ id: postal
+ placeholderText:
+ qsTr("PIN code")
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ }
+ }
+ }
+ }
+
+ ColumnLayout {
+
+ Body {
+ text: qsTr("Address *")
+ Layout.fillWidth: true
+ }
+
+ Rectangle {
+ implicitHeight: 56
+ color: "#f5f7f9"
+ radius: 8
+ border.width: 0
+ Layout.fillWidth: true
+ RowLayout {
+ anchors.fill: parent
+ Input {
+ id: address
+ placeholderText: qsTr("Address")
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ }
+ }
+ }
+ }
+ }
+
+ ColumnLayout {
+
+ H5 {
+ text: qsTr("Payment method")
+ Layout.fillWidth: true
+ Layout.margins: 16
+ }
+
+ ColumnLayout {
+
+ Rectangle {
+ implicitHeight: paymentCard.height
+ Layout.margins: 16
+ Layout.fillWidth: true
+ border.width: 1
+ radius: 8
+ border.color: "#4d000000"
+ color: Eduport.bsAccordionBg
+
+ ColumnLayout {
+ id: paymentCard
+ anchors {
+ left: parent.left
+ right: parent.right
+ }
+ Body {
+ text:
+ qsTr("Credit or Debit Card")
+ Layout.fillWidth: true
+ padding: 16
+ }
+ }
+ }
+
+ Rectangle {
+ implicitHeight: paymentMethodNetBanking.height
+ Layout.margins: 16
+ Layout.fillWidth: true
+ border.width: 1
+ radius: 8
+ border.color: "#4d000000"
+ color: Eduport.bsAccordionBg
+
+ NetBanking {
+ id: paymentMethodNetBanking
+ anchors {
+ left: parent.left
+ right: parent.right
+ }
+ }
+ }
+ }
+ }
+}
+
diff --git a/Shop/Checkout/PersonalInfo/PaymentMethod/NetBanking.ui.qml b/Shop/Checkout/PersonalInfo/PaymentMethod/NetBanking.ui.qml
new file mode 100644
index 0000000..8200de1
--- /dev/null
+++ b/Shop/Checkout/PersonalInfo/PaymentMethod/NetBanking.ui.qml
@@ -0,0 +1,76 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import Eduport 1.4
+import "../../../../Label"
+
+ColumnLayout {
+ property alias banks: banks
+
+ Body {
+ text:
+ qsTr("Pay with Net Banking")
+ Layout.fillWidth: true
+ Layout.rightMargin: 16
+ Layout.leftMargin: 16
+ Layout.topMargin: 16
+ }
+
+ ColumnLayout {
+ Layout.margins: 16
+
+ Body {
+ text: qsTr("In order to complete your transaction, we will transfer you over to Eduport secure servers.")
+ Layout.fillWidth: true
+ }
+
+ Body {
+ text: qsTr("Select your bank from the drop-down list and click proceed to continue with your payment.")
+ Layout.fillWidth: true
+ }
+
+ ComboBox {
+ id: banks
+ Layout.fillWidth: true
+ Layout.topMargin: 24
+ font: Eduport.bsBodyFont
+ model: ListModel {
+ ListElement {
+ label: "Please choose one"
+ }
+ ListElement {
+ label: "Bank of America"
+ }
+ ListElement {
+ label: "Bank of India"
+ }
+ ListElement {
+ label: "Bank of London"
+ }
+ }
+ contentItem: Text {
+ text: banks.displayText
+ font: banks.font
+ color: Eduport.bsBodyColor
+ verticalAlignment: Text.AlignVCenter
+ }
+ background: Rectangle {
+ width: banks.width
+ color: Eduport.bsBodyBg
+ radius: 8
+ }
+ delegate: ItemDelegate {
+ contentItem: Text {
+ text: label
+ font: banks.font
+ color: Eduport.bsBodyColor
+ verticalAlignment: Text.AlignVCenter
+ }
+ background: Rectangle {
+ width: banks.width
+ color: Eduport.bsBodyBg
+ }
+ }
+ }
+ }
+}
diff --git a/Shop/Checkout/RightSidebar/OrderSummary.ui.qml b/Shop/Checkout/RightSidebar/OrderSummary.ui.qml
new file mode 100644
index 0000000..7564106
--- /dev/null
+++ b/Shop/Checkout/RightSidebar/OrderSummary.ui.qml
@@ -0,0 +1,242 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import Eduport 1.4
+import "../../../TextField"
+import "../../../Label"
+import "../../../Button"
+import "../.."
+
+ColumnLayout {
+ property alias courseItems: courseItems
+ property alias priceValue: priceValue
+ property alias discountValue: discountValue
+ property alias totalValue: totalValue
+ property alias placeOrder: placeOrder
+
+ H4 {
+ text: qsTr("Order Summary")
+ Layout.fillWidth: true
+ Layout.rightMargin: 16
+ Layout.leftMargin: 16
+ Layout.topMargin: 16
+ }
+
+ ColumnLayout {
+ Layout.margins: 16
+ spacing: 16
+
+ Item {
+ Layout.fillWidth: true
+ implicitHeight: codeLabel.implicitHeight
+ + codeValue.implicitHeight
+
+ Body {
+ id: codeLabel
+ text: qsTr("Transaction code")
+ anchors.verticalCenter: parent.verticalCenter
+ }
+
+ H6 {
+ id: codeValue
+ text: "AB12365E"
+ font {
+ family: Eduport.fwLightFont.family
+ weight: Eduport.fwLightFont.weight
+ pointSize: Eduport.h6FontSize
+ }
+ anchors {
+ right: parent.right
+ verticalCenter: parent.verticalCenter
+ }
+ }
+ }
+
+ RowLayout {
+
+ Rectangle {
+ implicitHeight: 56
+ color: "#f5f7f9"
+ radius: 8
+ border.width: 0
+ Layout.fillWidth: true
+ RowLayout {
+ anchors.fill: parent
+ Input {
+ placeholderText:
+ qsTr("COUPON CODE")
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ }
+ }
+ }
+
+ Button {
+ text: qsTr("Apply")
+ font.pointSize: 14
+ font.family: "roboto"
+ implicitHeight: 56
+ contentItem: Text {
+ color: "#ffffff"
+ text: "Apply"
+ padding: 12
+ horizontalAlignment: Text.AlignHCenter
+ verticalAlignment: Text.AlignVCenter
+ font.weight: Font.Medium
+ font.family: "Roboto"
+ font.pointSize: 14
+ }
+
+ background: Rectangle {
+ color: "#066ac9"
+ radius: 8
+ }
+ }
+ }
+ }
+
+ ListView {
+ id: courseItems
+ interactive: false
+ Layout.fillWidth: true
+ implicitHeight: count
+ * (width * 400 / 533
+ + (width < 362 ? 37.5 : 18.75)
+ + 86.5)
+ model: ListModel {
+ ListElement {
+ image: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
+ title: "Sketch from A to Z: for app designer"
+ price: "$150"
+ }
+ ListElement {
+ image: "https://eduport.webestica.com/assets/images/courses/4by3/18.jpg"
+ title: "The Complete Video Production Bootcamp"
+ price: "$350"
+ }
+ }
+ delegate: Course {
+ width: courseItems.width
+ imageSource: image
+ titleText: title
+ priceText: price
+ }
+ }
+
+ Rectangle {
+ Layout.fillWidth: true
+ Layout.topMargin: 16
+ Layout.bottomMargin: 16
+ height: 1
+ border {
+ width: .5
+ color: "#0a000000"
+ }
+ }
+
+ ColumnLayout {
+
+ Item {
+ Layout.fillWidth: true
+ implicitHeight: priceLabel.implicitHeight
+ + priceValue.implicitHeight
+
+ H6 {
+ id: priceLabel
+ text: qsTr("Original Price")
+ font {
+ family: Eduport.fwLightFont.family
+ weight: Eduport.fwLightFont.weight
+ pointSize: Eduport.h6FontSize
+ }
+ anchors.verticalCenter: parent.verticalCenter
+ }
+
+ H6 {
+ id: priceValue
+ text: "$500"
+ anchors {
+ right: parent.right
+ verticalCenter: parent.verticalCenter
+ }
+ }
+ }
+
+ Item {
+ Layout.fillWidth: true
+ implicitHeight: discountLabel.implicitHeight
+ + discountValue.implicitHeight
+
+ H6 {
+ id: discountLabel
+ text: qsTr("Coupon Discount")
+ font {
+ family: Eduport.fwLightFont.family
+ weight: Eduport.fwLightFont.weight
+ pointSize: Eduport.h6FontSize
+ }
+ anchors.verticalCenter: parent.verticalCenter
+ }
+
+ Body {
+ id: discountValue
+ text: "-$20"
+ anchors {
+ right: parent.right
+ verticalCenter: parent.verticalCenter
+ }
+ }
+ }
+
+ Item {
+ Layout.fillWidth: true
+ implicitHeight: totalLabel.implicitHeight
+ + totalValue.implicitHeight
+
+ H5 {
+ id: totalLabel
+ text: qsTr("Total")
+ anchors.verticalCenter: parent.verticalCenter
+ }
+
+ H5 {
+ id: totalValue
+ text: "$480"
+ anchors {
+ right: parent.right
+ verticalCenter: parent.verticalCenter
+ }
+ }
+ }
+ }
+
+ Success {
+ id: placeOrder
+ Layout.margins: 16
+ Layout.fillWidth: true
+ text: qsTr("Place Order")
+ implicitHeight: 36
+ font {
+ family: Eduport.bsBtnFont.family
+ weight: Eduport.bsBtnFont.weight
+ pointSize: Eduport.bsBtnLgFontSize
+ }
+ background: Rectangle {
+ color: placeOrder.down
+ ? Eduport.bsBtnSuccessActiveBG
+ : placeOrder.enabled
+ ? Eduport.bsBtnSuccessBg
+ : Eduport.bsBtnSuccessDisabledBg
+ border {
+ width: Eduport.bsBtnBorderWidth
+ color: placeOrder.down
+ ? Eduport.bsBtnSuccessActiveBorderColor
+ : placeOrder.enabled
+ ? Eduport.bsBtnSuccessBorderColor
+ : Eduport
+ .bsBtnSuccessDisabledBorderColor
+ }
+ radius: Eduport.bsBtnLgBorderRadius
+ }
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-01 17:32:07 +0000