initial docker setup

frontend/src/containers/orders/style/CustomerAcceptance.scss

@@ -0,0 +1,66 @@
+@import '../../../styleConstants.scss';
+
+#customer-acceptance {
+    padding: 1rem 0;
+
+    .waiting {
+        background: $pending-status-color;
+    }
+
+    .accepted {
+        background: $validated-status-color;
+    }
+
+    .declined {
+        background: $declined-stattus-color;
+    }
+
+    .danger {
+        background: $danger;
+    }
+
+    .warning {
+        background: $warning;
+    }
+
+    .acceptance-button {
+        margin-top: 1rem;
+        cursor: pointer;
+        background: $whiteColor;
+    }
+
+    .acceptance-accept {
+        color: $production-status-color;
+    }
+
+    .acceptance-decline {
+        margin-left: 0.5rem;
+        color: $canceled-status-color;
+
+        .package-document {
+            margin-top: 1rem;
+        }
+    }
+
+    .acceptance-docs {
+        margin-top: 1rem;
+    }
+
+    .acceptance-label {
+        margin-top: 1rem;
+        font-weight: $font-weight;
+    }
+
+    @media all and (max-width: 768px) {
+
+         .aceeptance-message {
+             font-size: $font-size-small
+         }
+    }
+
+    @media all and (max-width: 480px) {
+         .acceptance-decline {
+             margin-left: 0;
+         }
+    }
+}

frontend/src/containers/orders/style/InstallationScheduling.scss

@@ -0,0 +1,112 @@
+@import '../../../styleConstants.scss';
+
+.installation-scheduling-dates-container {
+    padding-bottom: 1rem;
+
+    .confirmation-dates-buttons {
+        float: right;
+
+        .install-btn-accept {
+            color: $production-status-color;
+        }
+
+        .install-btn-decline {
+            color: $canceled-status-color;
+        }
+
+        .install-btn-remove {
+            color: $warm-grey;
+        }
+    }
+
+    .installation-button {
+        width: 5rem;
+        margin-left: 1rem;
+        height: 2rem;
+        font-size: $font-size-small;
+        cursor: pointer;
+        background-color: $whiteColor;
+        font-weight: $font-weight;
+    }
+
+    .dates-info-btn {
+        margin-left: 1rem;
+        cursor: pointer;
+        float: right;
+    }
+
+    .dates-info-popover {
+        max-width: 50rem;
+    }
+
+    .status-icon-installation-dates {
+        padding-right: 3px;
+    }
+
+    .installation-date-proposed {
+        cursor: default;
+    }
+}
+
+.installation-scheduling-dates-container:hover {
+    background-color: $hoverColor;
+}
+
+.dates-info-popover {
+    .react-datepicker {
+        font-family: $ProximaNova-font;
+        border: none;
+        border-radius: unset;
+    }
+}
+
+#installation-scheduler-container {
+    .document-link {
+        cursor: pointer;
+        word-wrap: break-word;
+        font-size: $font-size-small;
+        display: inline;
+    }
+
+    .set-installation-dates {
+        background: $whiteColor;
+    }
+
+    .check-installation-dates {
+        cursor: pointer;
+        color: $blueColor;
+        font-weight: $font-weight;
+    }
+
+    .subtitle {
+        padding-right: 0.5rem;
+        display: inline-block;
+    }
+
+    .install-date-text {
+        display: inline-block;
+        padding-right: 0.5rem;
+    }
+}
+
+.subtitle {
+    padding-top: 0.5rem;
+}
+
+.order-package-row {
+    padding: 0.5rem;
+}
+
+.package-installation-row {
+    padding: 0.5rem;
+}
+
+.scheduled-date-btn {
+    margin-left: 0.7rem;
+    cursor: pointer;
+    float: right;
+}
+
+.scheduled-date-popover {
+    max-width: 50rem;
+}

frontend/src/containers/orders/style/Orders.scss

@@ -0,0 +1,128 @@
+@import '../../../styleConstants.scss';
+
+$borderWidth: 3px;
+
+#orders-list-container {
+    .orders-tab {
+        cursor: pointer;
+    }
+    .order-central-row {
+        border-radius: 1.5px;
+    }
+
+    .order-border-open {
+        border-left: $borderWidth $open-status-color solid;
+    }
+
+    .order-border-in-progress {
+        border-left: $borderWidth $in-progress-status-color solid;
+    }
+
+    .order-border-production {
+        border-left: $borderWidth $production-status-color solid;
+    }
+
+    .order-border-end-of-life {
+        border-left: $borderWidth $end-of-life-status-color solid;
+    }
+
+    .order-border-canceled {
+        border-left: $borderWidth $canceled-status-color solid;
+    }
+
+    .cl-photo{
+        width: 2rem;
+        height: 2rem;
+    }
+
+    .order-number {
+        display: inline-block;
+        padding-left: 1rem;
+        bottom: 0;
+    }
+
+    .package-photo {
+        padding-left: 1rem;
+        width: 20%;
+    }
+
+    .package-info-col {
+        width: 100%;
+    }
+
+    .actions-button {
+        background-color: $whiteColor;
+        color: $darkGreyColor;
+        cursor: pointer;
+    }
+
+    .actions-button:hover{
+        background: rgba(113, 194, 191, 0.5);
+    }
+
+    .status-icon {
+        width: $font-size-xsmal;
+        height: $font-size-xsmal;
+        display: inline-block;
+        border-radius: 50%;
+        margin-right: 0.5rem;
+    }
+
+    .open {
+        background: $open-status-color;
+    }
+
+    .in-progress {
+        background: $in-progress-status-color;
+    }
+
+    .production {
+        background: $production-status-color;
+    }
+
+    .order-item-cl {
+        display: inline-flex;
+    }
+
+    .cl-contact-name {
+        font-weight: $font-weight;
+        color: $darkGreyColor;
+        font-size: $font-size-small;
+    }
+
+    .cl-name {
+        font-weight: unset;
+        font-size: $font-size-msmall;
+        color: $warmGreyColor;
+    }
+
+    .cl-details {
+        margin-left: 1rem;
+    }
+
+    .package-name {
+        display: inline-block;
+        padding-left: 1rem;
+        bottom: 0;
+        font-size: $font-size-small;
+        font-weight: $font-weight;
+        width: 80%;
+    }
+
+    .order-details-container {
+        padding-left: 1rem;
+    }
+
+    .toggle-view-packages {
+        cursor: pointer;
+    }
+
+    .actions-link {
+        color: $darkGreyColor;
+        text-decoration: none;
+    }
+
+    .actions-item {
+        cursor: pointer;
+    }
+}

frontend/src/containers/orders/style/OrdersList.scss

@@ -0,0 +1,3 @@
+.view-all-orders-text {
+    padding-left: 0.3rem;
+}

frontend/src/containers/orders/style/ProcessContainer.scss

@@ -0,0 +1,366 @@
+@import '../../../styleConstants.scss';
+$border-width: 5px;
+$link-line-height: 1.5rem;
+
+#order-info {
+    .subtitle {
+        margin-top: 0.5rem;
+    }
+
+    .info-color {
+        margin-top: 0.2rem;
+        padding-left: 0.2rem;
+    }
+
+    .no-process {
+        background: $open-status-color;
+    }
+
+    .processing {
+        border-left: $border-width $processing-status-color solid;
+    }
+
+    .canceled {
+        border-left: $border-width $canceled-status-color solid;
+    }
+
+    .production {
+        border-left: $border-width $production-status-color solid;
+    }
+
+    .end-of-life {
+        border-left: $border-width $end-of-life-status-color solid;
+    }
+
+    .wiaas-box-container {
+        padding: 0;
+    }
+
+    .components-link {
+        position: relative;
+        height: $link-line-height;
+
+        .link-line {
+            position: absolute;
+            background: $borderColor;
+            width: 3px;
+            top: 0;
+            left: 49%;
+            height: $link-line-height;
+            z-index: 0;
+        }
+    }
+
+    .package-name-link {
+        font-size: $font-size-big;
+        font-weight: $font-weight;
+        text-align: left;
+        color: $title-color;
+    }
+}
+
+.order-process{
+
+    .no-process-info {
+        background: $whiteColor;
+        padding: 1rem;
+        font-size: $font-size-normal;
+        font-weight: $font-weight;
+    }
+}
+
+.order-step{
+    .wiaas-box-container {
+        padding: 0;
+    }
+}
+
+.step-circle-layer {
+    text-align: center;
+}
+
+.step-circle {
+    z-index: 1;
+    margin-top: $link-line-height;
+    position: relative;
+    border-radius: 50%;
+    text-align: center;
+    width: 3rem;
+    height: 3rem;
+    color: $whiteColor;
+    line-height: 1rem;
+    padding: 0.5rem;
+    display: inline-block;
+    font-weight: $font-weight;
+    font-size: $font-size-small;
+}
+
+.step-line{
+    position: absolute;
+    background: $borderColor;
+    width: 2%;
+    top: 0;
+    left: 49%;
+    height: 100%;
+    z-index: 0;
+}
+
+.order-step:last-child .step-line{
+    height: 50%;
+}
+
+.step-box-layer {
+    margin-top: $link-line-height;
+    position: relative;
+}
+
+.step-box {
+    background: $whiteColor;
+    border-radius: 1.5px;
+
+    .wiaas-main-title {
+        font-size: $font-size-small;
+    }
+}
+
+.end-of-life {
+    background: $end-of-life-status-color;
+}
+
+.canceled {
+    background: $canceled-status-color;
+}
+
+.production {
+    background: $production-status-color;
+}
+
+.open {
+    background: $open-status-color;
+}
+
+.done {
+    background: $done-status-color;
+}
+
+.in-progress {
+    background: $in-progress-status-color;
+}
+
+.inactive {
+    background: $inactive-status-color;
+}
+
+.step-comment {
+    margin-top: 1rem;
+    font-size: $font-size-small;
+}
+
+.new-comment-button {
+    background-color: $whiteColor;
+    color: $darkGreyColor;
+    font-size: $font-size-small;
+    cursor: pointer;
+    margin-top: 0.5rem;
+}
+
+.support-mail-button {
+    background-color: $whiteColor;
+    color: $darkGreyColor;
+    font-size: $font-size-small;
+    cursor: pointer;
+    margin-top: 0.5rem;
+    float: right;
+}
+
+.upload-file-drop-zone {
+    width: 100%;
+    border: 3px dashed $borderColor;
+    height: 10rem;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+.upload-file-accept {
+    border: 3px dashed $greenColor;
+    background: rgba(52, 195, 136, 0.1);
+}
+
+.upload-file-drop-zone:hover{
+    border: 3px dashed $greenColor;
+    background: rgba(52, 195, 136, 0.1);
+}
+
+.status-icon {
+    width: $font-size-xsmal;
+    height: $font-size-xsmal;
+    display: inline-block;
+    border-radius: 50%;
+    margin-right: 0.5rem;
+}
+
+.drop-zone-text {
+    text-align: center;
+    padding: 4rem 0;
+}
+
+.document-link {
+    cursor: pointer;
+    word-wrap: break-word;
+
+    .step-comment {
+        padding: 0.5rem 1rem 1rem;
+        font-size: $font-size-small;
+    }
+}
+
+.order-package-info {
+    background: $whiteColor;
+    padding-bottom: 1rem;
+
+    .document-link {
+        cursor: pointer;
+        word-wrap: break-word;
+        font-size: $font-size-small;
+    }
+
+    .price-info-btn {
+        margin-left: 1rem;
+        cursor: pointer;
+    }
+
+    .price-info-popover {
+        max-width: 50rem;
+    }
+
+    .link-to-docs{
+        cursor: pointer;
+        color: $blueColor;
+        font-weight: 600;
+    }
+}
+
+#order-info-description {
+    background: $whiteColor;
+    padding-bottom: 1rem;
+
+    .terms-link {
+        cursor: pointer;
+        margin-top: 1rem;
+    }
+
+    .terms-label {
+        display: inline-block;
+    }
+
+    .installation-date-per-package {
+        font-weight: $font-weight;
+    }
+}
+
+#order-comments {
+    background: $whiteColor;
+
+    .order-coments-body{
+        margin: 1rem 0;
+    }
+
+    .order-comment {
+        margin-top: 0.5rem;
+        font-size: $font-size-small;
+        background: rgba(43, 98, 121, 0.2);
+        padding: 0.5rem;
+        border-radius: $box-radius;
+    }
+
+    .mine {
+        background: rgba(113, 194, 191, 0.2);
+    }
+
+    .order-comment-header {
+        font-weight: $font-weight;
+    }
+}
+
+.confirmation-proposed {
+    color: $pending-status-color;
+}
+
+.confirmation-accepted {
+    color: $done-status-color;
+}
+
+.confirmation-declined {
+    color: $canceled-status-color;
+}
+
+.confirmation-canceled {
+    color: $invalid-status-color;
+}
+
+.confirmation-invalid {
+    color: $invalid-status-color;
+}
+
+#order-documents{
+    .document-link-big {
+        display: inline-block;
+        cursor: pointer;
+        padding: 1rem;
+        margin-bottom: 3px;
+        text-align: center;
+        font-size: $font-size-small;
+    }
+
+    .document-link-big a {
+        color: $blueColor;
+    }
+
+    .document-link-big:hover {
+        margin-bottom: 0;
+        color: $title-color;
+        border-bottom: $blueColor 3px solid;
+    }
+}
+
+#send-support-mail-container {
+    .support-details {
+        margin-top: 1rem;
+    }
+
+    .package-name {
+        font-weight: $font-weight;
+    }
+
+    .order-package-details {
+        margin-bottom: 1.5rem;
+    }
+}
+
+#my-support-mail-text {
+    width: 50rem;
+    height: 10rem;
+}
+
+@media all and (max-width: 1032px) {
+     #my-support-mail-text {
+         width: 22rem;
+     }
+}
+
+@media all and (max-width: 768px) {
+
+     .drop-zone-text {
+         text-align: center;
+         padding: 4rem 0;
+         font-size: 1rem;
+     }
+
+     .document-link {
+         font-size: $font-size-small;
+     }
+
+     #my-support-mail-text {
+         width: 16rem;
+     }
+}

frontend/src/containers/orders/style/ProcessNavContainer.scss

@@ -0,0 +1,70 @@
+@import '../../../styleConstants.scss';
+
+.process-nav {
+
+
+    .process-menu {
+        text-align: center;
+    }
+
+    .process-nav-div {
+        display: inline-block;
+        margin-left: 1rem;
+        cursor: pointer;
+        font-weight: $font-weight;
+        color: $blueColor;
+    }
+
+    .selected-nav {
+        border-bottom: $blueColor 3px solid;
+        color: $title-color;
+    }
+
+    .process-nav-div:hover {
+        border-bottom: $blueColor 3px solid;
+    }
+
+    .status-layer{
+        display: inline-block;
+        vertical-align: middle;
+        border-radius: 3px;
+        color: $whiteColor;
+        padding: 0.2rem 1rem;
+        font-size: $font-size-xsmal;
+        margin-left: 0.7rem;
+        font-weight: $font-weight;
+    }
+
+    .schedule-active {
+        cursor: pointer;
+        background-color: $whiteColor;
+        color: $darkGreyColor;
+        opacity: 0.8;
+        border: 0.1rem $border-grey solid;
+        display: inline-block;
+        border-radius: $box-radius;
+        font-weight: $font-weight;
+    }
+
+    .schedule-inactive {
+        cursor: no-drop;
+        background-color: $whiteColor;
+        color: $darkGreyColor;
+        opacity: 0.4;
+        border: 0.1rem $border-grey solid;
+        display: inline-block;
+        border-radius: $box-radius;
+        font-weight: $font-weight;
+    }
+
+    @media all and (max-width: 576px) {
+
+         .process-menu {
+             text-align: left;
+         }
+         .process-nav-div {
+             margin-left: 0;
+             margin-right: 1rem;
+         }
+     }
+}

frontend/src/containers/orders/style/ValidateQuestionnaire.scss

@@ -0,0 +1,25 @@
+@import '../../../styleConstants.scss';
+
+#validate-questionnaire {
+    padding: 1rem 0;
+
+    .invalid {
+        background: $invalid-status-color;
+    }
+
+    .not-validated {
+        background: $pending-status-color;
+    }
+
+    .validated {
+        background: $validated-status-color;
+    }
+
+    .package-document {
+        margin-top: 1rem;
+    }
+
+    .document-status {
+        font-weight: $font-weight;
+    }
+}