Merge commit '0f2807e6a518c09f4926bc5cda65c1ce3321732d'

1 files changed, 11 insertions, 538 deletions

diff --git a/Shop/Checkout.ui.qml b/Shop/Checkout.ui.qml
index c7761c1..84e225c 100644
--- a/Shop/Checkout.ui.qml
+++ b/Shop/Checkout.ui.qml
@@ -2,26 +2,16 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import Eduport 1.4
-import "../TextField" as TxtFld
 import "../Label" as Lbl
 import "../Button" as Btn
+import "Checkout"
+import "Checkout/RightSidebar"
 
 Flickable {
 	property alias alert: alert
 	property alias login: login
-	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 banks: banks
-	property alias courseItems: courseItems
-	property alias priceValue: priceValue
-	property alias discountValue: discountValue
-	property alias totalValue: totalValue
-	property alias placeOrder: placeOrder
+	property alias personalInfo: personalInfo
+	property alias orderSummary: orderSummary
 	property alias premium: premium
 	contentHeight: body.height
 
@@ -66,317 +56,17 @@ Flickable {
 
 				Rectangle {
 					Layout.fillWidth: true
-					implicitHeight: personal.height
 					Layout.margins: 16
+					implicitHeight: personalInfo.height
 					radius: 8
-					ColumnLayout {
-						id: personal
+					color: Eduport.bsCardBg
+
+					PersonalInfo {
+						id: personalInfo
 						anchors {
 							left: parent.left
 							right: parent.right
 						}
-
-						Lbl.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 {
-
-								Lbl.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
-										TxtFld.Input {
-											id: name
-											placeholderText: qsTr("Name")
-											Layout.fillWidth: true
-											Layout.fillHeight: true
-										}
-									}
-								}
-							}
-
-							ColumnLayout {
-
-								Lbl.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
-										TxtFld.Input {
-											id: email
-											placeholderText: qsTr("Email")
-											Layout.fillWidth: true
-											Layout.fillHeight: true
-										}
-									}
-								}
-							}
-
-							ColumnLayout {
-
-								Lbl.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
-										TxtFld.Input {
-											id: mobile
-											placeholderText: qsTr("Mobile number")
-											Layout.fillWidth: true
-											Layout.fillHeight: true
-										}
-									}
-								}
-							}
-
-							ColumnLayout {
-
-								Lbl.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
-										TxtFld.Input {
-											id: country
-											placeholderText: qsTr("Select country")
-											Layout.fillWidth: true
-											Layout.fillHeight: true
-										}
-									}
-								}
-							}
-
-							ColumnLayout {
-
-								Lbl.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
-										TxtFld.Input {
-											id: province
-											placeholderText: qsTr("Select state")
-											Layout.fillWidth: true
-											Layout.fillHeight: true
-										}
-									}
-								}
-							}
-
-							ColumnLayout {
-
-								Lbl.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
-										TxtFld.Input {
-											id: postal
-											placeholderText: qsTr("PIN code")
-											Layout.fillWidth: true
-											Layout.fillHeight: true
-										}
-									}
-								}
-							}
-
-							ColumnLayout {
-
-								Lbl.Body {
-									text: qsTr("Address *")
-									Layout.fillWidth: true
-								}
-
-								Rectangle {
-									implicitHeight: 56
-									color: "#f5f7f9"
-									radius: 8
-									border.width: 0
-									Layout.fillWidth: true
-									RowLayout {
-										anchors.fill: parent
-										TxtFld.Input {
-											id: address
-											placeholderText: qsTr("Address")
-											Layout.fillWidth: true
-											Layout.fillHeight: true
-										}
-									}
-								}
-							}
-						}
-
-						ColumnLayout {
-
-							Lbl.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"
-
-									ColumnLayout {
-										id: paymentCard
-										anchors {
-											left: parent.left
-											right: parent.right
-										}
-										Lbl.Body {
-											text: qsTr("Credit or Debit Card")
-											Layout.fillWidth: true
-											padding: 16
-										}
-									}
-								}
-
-								Rectangle {
-									implicitHeight: paymentNetBanking.height
-									Layout.margins: 16
-									Layout.fillWidth: true
-									border.width: 1
-									radius: 8
-									border.color: "#4d000000"
-
-									ColumnLayout {
-										id: paymentNetBanking
-										anchors {
-											left: parent.left
-											right: parent.right
-										}
-
-										Lbl.Body {
-											text: qsTr("Pay with Net Banking")
-											Layout.fillWidth: true
-											Layout.rightMargin: 16
-											Layout.leftMargin: 16
-											Layout.topMargin: 16
-										}
-
-										ColumnLayout {
-											Layout.margins: 16
-											Lbl.Body {
-												text: qsTr("In order to complete your transaction, we will transfer you over to Eduport secure servers.")
-												Layout.fillWidth: true
-											}
-
-											Lbl.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
-												font.pointSize: 14
-												font.family: "roboto"
-												Layout.topMargin: 24
-												model: ListModel {
-													ListElement {
-														label: "Please choose one"
-													}
-													ListElement {
-														label: "Bank of America"
-													}
-													ListElement {
-														label: "Bank of India"
-													}
-													ListElement {
-														label: "Bank of London"
-													}
-												}
-												delegate: ItemDelegate {
-													contentItem: Text {
-														text: label
-														font {
-															family: Eduport.bodyFont.family
-															weight: Eduport.bodyFont.weight
-															pointSize: Eduport.bodyFont.pointSize
-														}
-													}
-												}
-												background: Rectangle {
-													radius: 8
-													implicitHeight: 36
-													implicitWidth: 200
-													color: "#f5f7f9"
-												}
-											}
-										}
-									}
-								}
-							}
-						}
 					}
 				}
 			}
@@ -393,231 +83,14 @@ Flickable {
 					implicitHeight: orderSummary.height
 					Layout.margins: 16
 					radius: 8
+					color: Eduport.bsCardBg
 
-					ColumnLayout {
+					OrderSummary {
 						id: orderSummary
 						anchors {
 							left: parent.left
 							right: parent.right
 						}
-
-						Lbl.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
-
-								Label {
-									id: codeLabel
-									text: qsTr("Transaction code")
-									font.pointSize: 14
-									font.family: "roboto"
-									anchors.verticalCenter: parent.verticalCenter
-								}
-
-								Label {
-									id: codeValue
-									text: "AB12365E"
-									font.pointSize: 14
-									font.family: "roboto"
-									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
-										TxtFld.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
-
-								Label {
-									id: priceLabel
-									text: qsTr("Original Price")
-									font {
-										family: Eduport.fwLightFont.family
-										weight: Eduport.fwLightFont.weight
-										pointSize: Eduport.h6FontSize
-									}
-									anchors.verticalCenter: parent.verticalCenter
-								}
-
-								Lbl.H6 {
-									id: priceValue
-									text: "$500"
-									anchors {
-										right: parent.right
-										verticalCenter: parent.verticalCenter
-									}
-								}
-							}
-
-							Item {
-								Layout.fillWidth: true
-								implicitHeight: discountLabel.implicitHeight
-												+ discountValue.implicitHeight
-
-								Label {
-									id: discountLabel
-									text: qsTr("Coupon Discount")
-									font {
-										family: Eduport.fwLightFont.family
-										weight: Eduport.fwLightFont.weight
-										pointSize: Eduport.h6FontSize
-									}
-									anchors.verticalCenter: parent.verticalCenter
-								}
-
-								Lbl.Body {
-									id: discountValue
-									text: "-$20"
-									anchors {
-										right: parent.right
-										verticalCenter: parent.verticalCenter
-									}
-								}
-							}
-
-							Item {
-								Layout.fillWidth: true
-								implicitHeight: totalLabel.implicitHeight
-												+ totalValue.implicitHeight
-
-								Lbl.H5 {
-									id: totalLabel
-									text: qsTr("Total")
-									anchors.verticalCenter: parent.verticalCenter
-								}
-
-								Lbl.H5 {
-									id: totalValue
-									text: "$480"
-									anchors {
-										right: parent.right
-										verticalCenter: parent.verticalCenter
-									}
-								}
-							}
-						}
-
-						Btn.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
-							}
-						}
 					}
 				}