Merge commit '0f2807e6a518c09f4926bc5cda65c1ce3321732d'

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
+		}
+	}
+}