From 860cfafadfb22d0db73a41357880693ca5214d38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C4=B1rat=20Kaya?= <48600092+benfiratkaya@users.noreply.github.com> Date: Tue, 9 Nov 2021 00:53:16 +0300 Subject: [PATCH] Updated: Code design --- .../Status/Movements/Table/Item/index.js | 30 ++++++ .../Delivery/Status/Movements/Table/index.js | 36 +++++++ .../Status/Movements/Table/style.scss | 85 ++++++++++++++++ .../Delivery/Status/Movements/index.js | 63 ++++++++++++ .../Delivery/Status/Movements/style.scss | 89 +++++++++++++++++ src/components/Delivery/Status/Steps/index.js | 67 +++++++++++++ .../Delivery/Status/Steps/style.scss | 98 +++++++++++++++++++ src/components/Delivery/Status/Title/index.js | 31 ++++++ .../Delivery/Status/Title/style.scss | 13 +++ src/components/Delivery/Status/index.js | 17 ++++ src/components/Delivery/Status/style.scss | 4 + 11 files changed, 533 insertions(+) create mode 100644 src/components/Delivery/Status/Movements/Table/Item/index.js create mode 100644 src/components/Delivery/Status/Movements/Table/index.js create mode 100644 src/components/Delivery/Status/Movements/Table/style.scss create mode 100644 src/components/Delivery/Status/Movements/index.js create mode 100644 src/components/Delivery/Status/Movements/style.scss create mode 100644 src/components/Delivery/Status/Steps/index.js create mode 100644 src/components/Delivery/Status/Steps/style.scss create mode 100644 src/components/Delivery/Status/Title/index.js create mode 100644 src/components/Delivery/Status/Title/style.scss create mode 100644 src/components/Delivery/Status/index.js create mode 100644 src/components/Delivery/Status/style.scss diff --git a/src/components/Delivery/Status/Movements/Table/Item/index.js b/src/components/Delivery/Status/Movements/Table/Item/index.js new file mode 100644 index 0000000..1372f80 --- /dev/null +++ b/src/components/Delivery/Status/Movements/Table/Item/index.js @@ -0,0 +1,30 @@ +import {getDateFromUnix} from "../../../../../../helpers/getDate"; + +const TableItem = ({actionDate, operationalState, description, location}) => { + let operationalStateText = { + 0: "Gönderi Alındı", + 1: "Gönderi", + 2: "Transfer Merkezinde", + 3: "Gönderi Yola Çıktı (Teslimat şubesine)", + 4: "Teslimat Şubesine Ulaştı", + 5: "Teslimat Şubesine Ulaştı", + 6: "Kurye Dağıtımda", + 7: "Teslim Edildi", + 8: "Gönderi", + 9: "Gönderi", + 10: "Gönderi", + 11: "Gönderi Yola Çıktı (Transfer merkezine)" + }; + + + return ( + + ); +}; + +export default TableItem; diff --git a/src/components/Delivery/Status/Movements/Table/index.js b/src/components/Delivery/Status/Movements/Table/index.js new file mode 100644 index 0000000..4e65fe3 --- /dev/null +++ b/src/components/Delivery/Status/Movements/Table/index.js @@ -0,0 +1,36 @@ +import {connect} from "react-redux"; + +import ScrollUp from "../../../../ScrollUp"; + +import "./style.scss"; +import TableItem from "./Item"; + +const DeliveryTable = ({trackingHistoryList}) => { + return ( +
+ + {trackingHistoryList.map(item => ( + + ))} + +
+ ); +}; + +const mapStateToProps = (state) => { + return { + trackingHistoryList: state.delivery.data.trackingHistoryList + }; +}; + +export default connect(mapStateToProps)(DeliveryTable); diff --git a/src/components/Delivery/Status/Movements/Table/style.scss b/src/components/Delivery/Status/Movements/Table/style.scss new file mode 100644 index 0000000..0d4b76d --- /dev/null +++ b/src/components/Delivery/Status/Movements/Table/style.scss @@ -0,0 +1,85 @@ +@import "../../../../../styles/media"; + +.delivery-table { + position: relative; + width: 100%; + margin-top: 30px; + + .table-head { + display: flex; + color: #fff; + background-color: #273142; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + + li { + display: flex; + flex: 1 0; + align-items: center; + padding: 1.3em; + font-size: 13px; + text-transform: uppercase; + border-right: 1px solid #6e7787; + + &:last-child { + border-right: 0; + + @include lt-sm { + display: none; + } + } + + &:nth-last-child(2) { + @include lt-sm { + border-right: 0; + } + } + } + } + + .table-body { + display: flex; + flex-wrap: wrap; + background-color: #fff; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + + &:nth-child(2n) { + @include lt-sm { + background-color: #eff0f1; + } + } + + li { + display: flex; + flex: 1 0; + align-items: center; + order: 2; + padding: 1.3em; + font-size: 13px; + border-right: 1px solid #f4f7fa; + border-bottom: 1px solid #f4f7fa; + + @include lt-sm { + font-size: 11px; + } + + &:last-child { + border-right: 0; + + @include lt-sm { + order: 1; + flex: 100% 1; + } + + &:before { + @include lt-sm { + content: 'Lokasyon:'; + color: #f16623; + margin-right: 2px; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/components/Delivery/Status/Movements/index.js b/src/components/Delivery/Status/Movements/index.js new file mode 100644 index 0000000..27c63c2 --- /dev/null +++ b/src/components/Delivery/Status/Movements/index.js @@ -0,0 +1,63 @@ +import {useState} from "react"; +import {connect} from "react-redux"; + +import DeliveryTable from "./Table"; + +import {formatDate, getDateFromUnix} from "../../../../helpers/getDate"; + +import "./style.scss"; + +const DeliveryMovements = ({delivery}) => { + const [showDetails, setShowDetails] = useState(false); + + return ( +
+
+
+
+
Teslimat Numarsı:
+
{delivery.orderNumber}
+
+
+
+
Teslim Alacak:
+
{delivery.targetCustomer}
+
+
+
Gönderi Numarası:
+
{delivery.deliveryNumber}
+
+
+
Son İşlem Tarihi:
+
{getDateFromUnix(delivery.trackingHistoryList?.[0].actionDate)}
+
+
+
Tahmini Teslim Tarihi:
+
{formatDate(delivery.estimatedDeliveryDate)}
+
+
+
Teslim Edilecek Şube:
+
{delivery.targetXDock}
+
+
+
Teslim Edilecek Adres:
+
{delivery.targetAddress}
+
+
+
+ {showDetails && } + +
+
+ ); +}; + +const mapStateToProps = (state) => { + return { + delivery: state.delivery.data + }; +}; + +export default connect(mapStateToProps)(DeliveryMovements); diff --git a/src/components/Delivery/Status/Movements/style.scss b/src/components/Delivery/Status/Movements/style.scss new file mode 100644 index 0000000..77334fa --- /dev/null +++ b/src/components/Delivery/Status/Movements/style.scss @@ -0,0 +1,89 @@ +@import "../../../../styles/media"; + +.delivery-movements { + margin-top: 20px; + + .card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + padding: 20px; + } + + .delivery-info { + width: 100%; + background-color: #fff; + padding: 30px; + border-radius: 10px; + + .delivery-no { + width: 100%; + text-align: center; + margin-bottom: 50px; + + .title { + font-size: 13px; + color: #6e7787; + } + + .content { + margin-top: 5px; + font-size: 30px; + font-weight: 500; + color: #f16623; + } + } + + .delivery-detail { + display: flex; + flex-wrap: wrap; + + .detail { + width: 25%; + margin-bottom: 20px; + + @include lt-sm { + width: 100%; + } + + .title { + margin-bottom: 5px; + font-size: 13px; + color: #6e7787; + } + + .content { + font-size: 15px; + font-weight: 500; + color: #273142; + } + } + } + } + + .btn-detail { + display: block; + padding: 15px 50px; + background-color: transparent; + font-size: 15px; + font-weight: 500; + color: #f16623; + border: 1px solid #f16623; + border-radius: 30px; + margin-top: 30px; + text-transform: uppercase; + + @include lt-sm { + width: 100%; + font-size: 14px; + padding: 10px 30px; + } + + &:hover { + color: #fff; + background-color: #f16623; + } + } +} \ No newline at end of file diff --git a/src/components/Delivery/Status/Steps/index.js b/src/components/Delivery/Status/Steps/index.js new file mode 100644 index 0000000..0df8cec --- /dev/null +++ b/src/components/Delivery/Status/Steps/index.js @@ -0,0 +1,67 @@ +import {connect} from "react-redux"; + +import {operationalStep} from "../../../../helpers/operationalStep"; + +import "./style.scss"; + +const DeliverySteps = ({operationalState}) => { + const OPERATION_STEP = operationalStep(operationalState); + + return ( +
+
= 1}> +
+ + + +
+
1.Gönderi Alındı
+
+
= 2}> +
+ + + +
+
2.Transfer Merkezinde
+
+
= 3}> +
+ + + +
+
3.Teslimat Şubesinde
+
+
= 4}> +
+ + + +
+
4.Kurye Dağıtımda
+
+
= 5}> +
+ + + +
+
5.Teslim Edildi
+
+
+ ); +}; + +const mapStateToProps = (state) => { + return { + operationalState: state.delivery.data.operationalState + }; +}; + +export default connect(mapStateToProps)(DeliverySteps); diff --git a/src/components/Delivery/Status/Steps/style.scss b/src/components/Delivery/Status/Steps/style.scss new file mode 100644 index 0000000..44de86b --- /dev/null +++ b/src/components/Delivery/Status/Steps/style.scss @@ -0,0 +1,98 @@ +@import "../../../../styles/media"; + +.delivery-steps { + display: flex; + align-items: flex-start; + justify-content: center; + margin: 20px 0; + + .step { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + flex: 1 1; + position: relative; + + &[data-active="true"] { + .circle { + background-color: #f16623; + border-color: #f16623; + + .icon { + fill: #ffffff; + } + } + } + + &:not(&:first-child) { + &:before { + content: ''; + position: absolute; + top: 40px; + right: 50%; + height: 4px; + width: 100%; + background-color: #afbbca; + z-index: -1; + + @include lt-sm { + top: 20px; + height: 3px; + } + } + + &[data-active="true"]:before { + background-color: #f16623; + } + } + + &:last-child { + &[data-active="true"] .circle { + background-color: #0bc15c; + border-color: #0bc15c; + + .icon { + fill: #ffffff; + } + } + } + + .circle { + display: flex; + align-items: center; + justify-content: center; + width: 80px; + height: 80px; + background-color: #fff; + border: 3px solid #afbbca; + border-radius: 50%; + + @include lt-sm { + width: 40px; + height: 40px; + } + + .icon { + fill: #afbbca; + + @include lt-sm { + width: 60%; + height: 60%; + } + } + } + + .title { + margin-top: 20px; + font-size: 15px; + font-weight: 500; + color: #6e7787; + text-align: center; + + @include lt-sm { + font-size: 10px; + } + } + } +} \ No newline at end of file diff --git a/src/components/Delivery/Status/Title/index.js b/src/components/Delivery/Status/Title/index.js new file mode 100644 index 0000000..0c94a08 --- /dev/null +++ b/src/components/Delivery/Status/Title/index.js @@ -0,0 +1,31 @@ +import {connect} from "react-redux"; + +import {operationalStep} from "../../../../helpers/operationalStep"; + +import "./style.scss"; + +const DeliveryStatusTitle = ({operationalState}) => { + const OPERATION_STEP = operationalStep(operationalState); + + const title = { + 1: "Gönderiniz Alındı", + 2: "Gönderiniz Transfer Merkezi", + 3: "Gönderiniz Teslimat Şubesinde", + 4: "Gönderiniz Kurye Dağıtımında", + 5: "Gönderiniz Teslim Edildi" + } + + return ( +
+ {title[OPERATION_STEP]} +
+ ); +}; + +const mapStateToProps = (state) => { + return { + operationalState: state.delivery.data.operationalState + }; +}; + +export default connect(mapStateToProps)(DeliveryStatusTitle); \ No newline at end of file diff --git a/src/components/Delivery/Status/Title/style.scss b/src/components/Delivery/Status/Title/style.scss new file mode 100644 index 0000000..a7cd03f --- /dev/null +++ b/src/components/Delivery/Status/Title/style.scss @@ -0,0 +1,13 @@ +@import "../../../../styles/media"; + +.delivery-status-title { + margin-top: 20px; + font-size: 30px; + color: #f16623; + font-weight: 300; + text-align: center; + + @include lt-sm { + font-size: 24px; + } +} \ No newline at end of file diff --git a/src/components/Delivery/Status/index.js b/src/components/Delivery/Status/index.js new file mode 100644 index 0000000..63d22a1 --- /dev/null +++ b/src/components/Delivery/Status/index.js @@ -0,0 +1,17 @@ +import DeliverySteps from "./Steps"; +import DeliveryStatusTitle from "./Title"; +import DeliveryMovements from "./Movements"; + +import "./style.scss"; + +const DeliveryStatus = () => { + return ( +
+ + + +
+ ); +}; + +export default DeliveryStatus; diff --git a/src/components/Delivery/Status/style.scss b/src/components/Delivery/Status/style.scss new file mode 100644 index 0000000..219cb2e --- /dev/null +++ b/src/components/Delivery/Status/style.scss @@ -0,0 +1,4 @@ +.delivery-status { + display: flex; + flex-direction: column; +} \ No newline at end of file