Separate personal info from checkout

to its own file

2 files changed, 334 insertions, 316 deletions

diff --git a/Shop/Checkout.ui.qml b/Shop/Checkout.ui.qml
index c7761c1..8b80af2 100644
--- a/Shop/Checkout.ui.qml
+++ b/Shop/Checkout.ui.qml
@@ -5,18 +5,12 @@ import Eduport 1.4
 import "../TextField" as TxtFld
 import "../Label" as Lbl
 import "../Button" as Btn
+import "Checkout"
 
 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 personalInfo: personalInfo
 	property alias courseItems: courseItems
 	property alias priceValue: priceValue
 	property alias discountValue: discountValue
@@ -66,317 +60,12 @@ Flickable {
 
 				Rectangle {
 					Layout.fillWidth: true
-					implicitHeight: personal.height
+					implicitHeight: personalInfo.height
 					Layout.margins: 16
 					radius: 8
-					ColumnLayout {
-						id: personal
-						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"
-												}
-											}
-										}
-									}
-								}
-							}
-						}
+					PersonalInfo {
+						id: personalInfo
 					}
 				}
 			}
diff --git a/Shop/Checkout/PersonalInfo.ui.qml b/Shop/Checkout/PersonalInfo.ui.qml
new file mode 100644
index 0000000..b35878c
--- /dev/null
+++ b/Shop/Checkout/PersonalInfo.ui.qml
@@ -0,0 +1,329 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import Eduport 1.4
+import "../../TextField"
+import "../../Label"
+
+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 banks: banks
+
+	anchors {
+		left: parent.left
+		right: parent.right
+	}
+
+	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"
+
+				ColumnLayout {
+					id: paymentCard
+					anchors {
+						left: parent.left
+						right: parent.right
+					}
+					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
+					}
+
+					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
+							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"
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+