1 files changed, 267 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
+					}
+				}
+			}
+		}
+	}
+}
+